feat: option to select all events for countdown

chore: remove unused code
fix docker ignore (#1780 )
2026-08-03 06:28:01 +00:00 · 2025-09-16 16:59:29 +02:00 · 2025-09-16 16:38:11 +02:00 · 2025-09-16 16:27:00 +02:00 · 2025-09-16 06:43:19 +02:00 · 2025-09-14 14:19:18 +02:00
162 changed files with 1645 additions and 2541 deletions
@@ -17,6 +17,7 @@
 # Ignore build folders
 node_modules
 **/node_modules
+**/dist

 # Ignore default volumes created by running docker compose up
 ontime-db
@@ -1,2 +1 @@
- "ONTIME_VERSION.js"
-dist/
+ "ONTIME_VERSION.js"
@@ -2,7 +2,7 @@ name: Ontime build

 on:
  push:
-    tags: ['*']
+    tags: [ "*" ]
  workflow_dispatch:

 jobs:
@@ -11,20 +11,15 @@ jobs:

    steps:
      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22

      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-
-      - 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: pnpm/action-setup@v3
        with:
-          path: ${{ env.PNPM_STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          version: 10

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -35,7 +30,7 @@ jobs:
        run: pnpm build

      - name: Electron - Build app
-        env:
+        env: 
          APPLE_ID: ${{ secrets.APPLEID }}
          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLEIDPASS }}
          APPLE_TEAM_ID: ${{ secrets.TEAMID }}
@@ -58,9 +53,15 @@ jobs:

    steps:
      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22

      - name: Setup pnpm
        uses: pnpm/action-setup@v3
+        with:
+          version: 10

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -85,9 +86,15 @@ jobs:

    steps:
      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22

      - name: Setup pnpm
        uses: pnpm/action-setup@v3
+        with:
+          version: 10

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -14,19 +14,19 @@ jobs:
    steps:
      - uses: actions/checkout@v4

-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3

-      - name: Get pnpm store directory
-        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
        with:
-          path: ${{ env.PNPM_STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          node-version: 22
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 10

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -38,20 +38,16 @@ jobs:

      - name: Copy server
        run: mkdir -p apps/cli/server && cp apps/server/dist/index.cjs apps/cli/server/index.cjs
-
+      
      - name: Copy client
        run: cp -R apps/client/build apps/cli/client

      - name: Copy external
        run: cp -R apps/server/src/external apps/cli/external
-
-      - name: Setup pnpm auth config
-        run: pnpm config set '//registry.npmjs.org/:_authToken' "${NODE_AUTH_TOKEN}"
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-
+      
      - name: Publish to NPM
        run: pnpm publish --access public --no-git-checks
        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
          NPM_CONFIG_PROVENANCE: true
        working-directory: ./apps/cli
@@ -6,63 +6,43 @@ on:
  workflow_dispatch:

 jobs:
+
  publish_docker:
    runs-on: ubuntu-latest
    env:
      CI: ''

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

-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+    - name: Docker Login
+      uses: docker/login-action@v2.1.0
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_TOKEN }}

-      - name: Get pnpm store directory
-        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+    - name: Docker Setup Buildx
+      uses: docker/setup-buildx-action@v2.5.0

-      - name: Setup pnpm cache
-        uses: actions/cache@v4
-        with:
-          path: ${{ env.PNPM_STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+    - name: Build and push stable release
+      if: github.event.release.prerelease == false
+      uses: docker/build-push-action@v4.0.0
+      with:
+        context: .
+        file: ./Dockerfile
+        platforms: linux/amd64,linux/arm64,linux/arm/v7
+        # Push is a shorthand for --output=type=registry
+        push: true
+        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest

-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+    - name: Build and push pre-release
+      if: github.event.release.prerelease == true
+      uses: docker/build-push-action@v4.0.0
+      with:
+        context: .
+        file: ./Dockerfile
+        platforms: linux/amd64,linux/arm64,linux/arm/v7
+        # Push is a shorthand for --output=type=registry
+        push: true
+        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly

-      - name: Build project packages
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-        run: pnpm build:docker
-
-      - name: Docker Login
-        uses: docker/login-action@v2.1.0
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Docker Setup Buildx
-        uses: docker/setup-buildx-action@v2.5.0
-
-      - name: Build and push stable release
-        if: github.event.release.prerelease == false
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: .
-          file: ./Dockerfile
-          platforms: linux/amd64,linux/arm64,linux/arm/v7
-          # Push is a shorthand for --output=type=registry
-          push: true
-          tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest
-
-      - name: Build and push pre-release
-        if: github.event.release.prerelease == true
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: .
-          file: ./Dockerfile
-          platforms: linux/amd64,linux/arm64,linux/arm/v7
-          # Push is a shorthand for --output=type=registry
-          push: true
-          tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly
@@ -1,46 +0,0 @@
-name: Ontime Resolver build
-
-on:
-  release:
-    types: [published]
-  workflow_dispatch:
-
-jobs:
-  build_resolver:
-    permissions:
-      id-token: write
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Get pnpm store directory
-        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v4
-        with:
-          path: ${{ env.PNPM_STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build project packages
-        run: pnpm build:resolver
-
-      - name: Setup pnpm auth config
-        run: pnpm config set '//registry.npmjs.org/:_authToken' "${NODE_AUTH_TOKEN}"
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-
-      - name: Publish to NPM
-        run: pnpm publish --access public --no-git-checks
-        env:
-          NPM_CONFIG_PROVENANCE: true
-        working-directory: ./apps/resolver
@@ -14,35 +14,55 @@ jobs:

    steps:
      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22

      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-
-      - 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: pnpm/action-setup@v3
        with:
-          path: ${{ env.PNPM_STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          version: 10

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

-      # Run code quality
-      - name: Run linter
-        run: pnpm lint
+      # Run code quality per package
+      - name: React - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./apps/client

-      - name: Run TypeScript checks
-        run: pnpm typecheck
+      - name: Server - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./apps/server
+
+      - name: Utils - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./packages/utils
+
+      - name: Types - Run linter
+        if: always()
+        run: pnpm lint
+        working-directory: ./packages/types

      # We choose to run tests separately
-      - name: Run unit tests
+      - name: React - Run unit tests
        if: always()
-        run: pnpm test
+        run: pnpm test:pipeline
+        working-directory: ./apps/client
+
+      - name: Server - Run unit tests
+        if: always()
+        run: pnpm test:pipeline
+        working-directory: ./apps/server
+
+      - name: Utils - Run unit tests
+        if: always()
+        run: pnpm test:pipeline
+        working-directory: ./packages/utils

  e2e-test:
    runs-on: ubuntu-latest
@@ -50,36 +70,21 @@ jobs:

    steps:
      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22

      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-
-      - 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: pnpm/action-setup@v3
        with:
-          path: ${{ env.PNPM_STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          version: 10

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

-      - 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
-        with:
-          path: |
-            ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
-          restore-keys: |
-            ${{ runner.os }}-playwright-
-      - run: npx playwright install --with-deps
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
+      - name: Build client
+        run: pnpm build:local

      - name: Install Playwright Browsers
        run: npx playwright install --with-deps
@@ -5,10 +5,6 @@ node_modules

 playwright-report

-
-pnpm-lock.yaml
 **/*.toml
-**/*.json
-!tsconfig.common.json
-!turbo.json
-!package.json
+**/*.yml
+**/*.json
@@ -21,7 +21,7 @@ Locally, we would need to run both the React client and the node.js server in de

 From the project root, run the following commands
 - __Install the project dependencies__ by running `pnpm i`
- __Run dev mode__ by running `pnpm dev` or `pnpm dev:electron` to get the electron window
+- __Run dev mode__ by running `pnpm turbo dev`


 ### Debugging backend
@@ -30,10 +30,10 @@ The previous command will start the development servers for both the client, ser
 Typically in dev mode we prefer to start these in separate terminals to help with error tracking and debugging.

 We do that by creating two terminals an running
- __Run the React UI__ by running `pnpm dev --filter=ontime-ui`
- __Run the nodejs server__ by running `pnpm dev --filter=ontime-server`
+- __Run the React UI__ by running `pnpm turbo dev --filter=ontime-ui`
+- __Run the nodejs server__ by running `pnpm turbo dev --filter=ontime-server`

- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by running `pnpm dev:inspect --filter=ontime-server`.
+- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by running `pnpm turbo dev:inspect --filter=ontime-server`.

 ## TESTING

@@ -46,7 +46,7 @@ Generally we have 2 types of tests.

 Unit tests are contained in mostly all the apps and packages (client, server and utils)

-You can run unit tests by running `pnpm test:pipeline` from the project root.
+You can run unit tests by running `pnpm turbo test:pipeline` from the project root.
 This will run all tests and close test runner.

 Alternatively you can navigate to an app or project and run `pnpm test` to run those tests in watch mode
@@ -66,7 +66,7 @@ start the webserver with `pnpm dev:server`

 Some other useful commands

- `pnpm e2e:ui` open playwright UI
+- `pnpm e2e --ui` open playwright UI
 - `pnpm e2e --headed` run tests with a visible browser window

 ## CREATE AN INSTALLABLE FILE (Windows | MacOS | Linux)
@@ -77,13 +77,13 @@ You can generate a distribution for your OS by running the following steps.
 From the project root, run the following commands

 - __Install the project dependencies__ by running `pnpm i`
- __Build the UI and server__ by running `pnpm build`
- __Create the package__ by running `pnpm dist-win`, `pnpm dist-mac` or `pnpm dist-linux`
+- __Build the UI and server__ by running `pnpm turbo run build:electron`
+- __Create the package__ by running `pnpm turbo run dist-win`, `pnpm turbo run dist-mac` or `pnpm turbo run dist-linux`

 The build distribution assets will be at `.apps/electron/dist`

 Note: The MacOS build will only work in CI, locally it will fail due to notarisation issues.
-Use the `pnpm dist-mac:local` command to build a MacOS distribution locally and skip the notary process.
+Use the `pnpm turbo run dist-mac:local` command to build a MacOS distribution locally and skip the notary process.

 ## DOCKER

@@ -1,30 +1,37 @@
-ARG NODE_VERSION=22.15.1
-FROM node:${NODE_VERSION}-alpine
-
-# Set environment variables
-# Environment Variable to signal that we are running production
-ENV NODE_ENV=docker
-# Ontime Data path
-ENV ONTIME_DATA=/data/
-
-RUN mkdir /app
-WORKDIR /app/
-
-# Prepare UI
-COPY apps/client/build/ ./client/
-
-# Prepare Backend
-COPY apps/server/dist/ ./server/
-COPY apps/server/src/external/ ./external/
-COPY apps/server/src/user/ ./user/
-COPY apps/server/src/html/ ./html/
-
-# Export default ports
-EXPOSE 4001/tcp 8888/udp 9999/udp
-
-CMD ["node", "server/docker.cjs"]
-
-# Build and run commands
-# pnpm build:docker
-# docker buildx build . -t getontime/ontime
-# docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/data/ getontime/ontime
+FROM node:22-bullseye AS builder
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN npm install -g pnpm@10.11.0
+COPY . /app
+WORKDIR /app
+RUN pnpm --filter=ontime-ui --filter=ontime-server --filter=ontime-utils install --config.dedupe-peer-dependents=false --frozen-lockfile
+RUN pnpm --filter=ontime-ui --filter=ontime-server run build:docker
+
+FROM node:22-alpine
+
+# Set environment variables
+# Environment Variable to signal that we are running production
+ENV NODE_ENV=docker
+# Ontime Data path
+ENV ONTIME_DATA=/data/
+
+WORKDIR /app/
+
+# Prepare UI
+COPY --from=builder /app/apps/client/build ./client/
+
+# Prepare Backend
+COPY --from=builder /app/apps/server/dist/ ./server/
+COPY --from=builder /app/apps/server/src/external/ ./external/
+COPY --from=builder /app/apps/server/src/user/ ./user/
+COPY --from=builder /app/apps/server/src/html/ ./html/
+
+# Export default ports
+EXPOSE 4001/tcp 8888/udp 9999/udp
+
+CMD ["node", "server/docker.cjs"]
+
+# Build and run commands
+# !!! Note that this command needs pre-build versions of the UI and server apps
+# docker buildx build . -t getontime/ontime
+# docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/data/ getontime/ontime
@@ -1,6 +1,6 @@
 {
    "name": "@getontime/cli",
-    "version": "4.0.0-beta.5",
+    "version": "4.0.0-beta.3",
    "author": "Carlos Valente",
    "description": "Time keeping for live events",
    "repository": "https://github.com/cpvalente/ontime",
@@ -13,6 +13,12 @@
    <link rel="manifest" href="/manifest.json" />
    <meta name="robots" content="noindex" />
    <title>ontime</title>
+    <style>
+      body,
+      html {
+        background-color: #101010 !important;
+      }
+    </style>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -1,10 +1,10 @@
 {
  "name": "ontime-ui",
-  "version": "4.0.0-beta.5",
+  "version": "4.0.0-beta.3",
  "private": true,
  "type": "module",
  "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.4",
+    "@base-ui-components/react": "1.0.0-beta.3",
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
@@ -16,7 +16,7 @@
    "@tanstack/react-query-devtools": "^5.85.9",
    "@tanstack/react-table": "^8.21.3",
    "autosize": "^6.0.1",
-    "axios": "^1.12.2",
+    "axios": "^1.11.0",
    "babel-plugin-react-compiler": "19.1.0-rc.3",
    "csv-stringify": "^6.6.0",
    "prismjs": "^1.30.0",
@@ -37,12 +37,15 @@
    "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
    "postinstall": "pnpm addversion",
    "dev": "cross-env BROWSER=none vite",
-    "dev:electron": "pnpm dev",
-    "lint": "eslint . --quiet",
-    "typecheck": "tsc --noEmit",
    "build": "vite build",
+    "build:local": "cross-env NODE_ENV=local vite build",
+    "build:electron": "cross-env NODE_ENV=local vite build",
+    "build:docker": "cross-env VITE_IS_DOCKER=true vite build",
+    "build:localdocker": "cross-env NODE_ENV=local vite build",
+    "lint": "eslint . --quiet",
    "test": "vitest",
    "test:pipeline": "vitest run",
+    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build",
    "analyse": "npx vite-bundle-visualizer"
  },
  "browserslist": {
@@ -8,7 +8,6 @@ import IdentifyOverlay from './common/components/identify-overlay/IdentifyOverla
 import { AppContextProvider } from './common/context/AppContext';
 import { ontimeQueryClient } from './common/queryClient';
 import { connectSocket } from './common/utils/socket';
-import KeepAwake from './features/keep-awake/KeepAwake';
 import { TranslationProvider } from './translation/TranslationProvider';
 import AppRouter from './AppRouter';
 import { baseURI } from './externals';
@@ -25,7 +24,6 @@ function App() {
              <ErrorBoundary>
                <TranslationProvider>
                  <IdentifyOverlay />
-                  <KeepAwake />
                  <AppRouter />
                </TranslationProvider>
              </ErrorBoundary>
@@ -1,6 +1,9 @@
 import axios, { AxiosResponse } from 'axios';
 import { DatabaseModel, MessageResponse, ProjectData, ProjectFileListResponse, QuickStartData } from 'ontime-types';

+import { makeTable } from '../../views/cuesheet/cuesheet.utils';
+import { aggregateRundowns, makeCSVFromArrayOfArrays } from '../utils/csv';
+
 import { apiEntryUrl } from './constants';
 import { createBlob, downloadBlob } from './utils';

@@ -30,6 +33,27 @@ export async function downloadProject(fileName: string) {
  }
 }

+/**
+ * Request download of the current rundown as a CSV file
+ * @param fileName
+ */
+export async function downloadCSV(fileName: string = 'rundown') {
+  try {
+    const { data, name } = await fileDownload(fileName);
+    const { project, rundowns, customFields } = data;
+
+    const flatRundowns = aggregateRundowns(rundowns);
+    const sheetData = makeTable(project, flatRundowns, customFields);
+
+    const fileContent = makeCSVFromArrayOfArrays(sheetData);
+
+    const blob = createBlob(fileContent, 'text/csv;charset=utf-8;');
+    downloadBlob(blob, `${name}.csv`);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
 /**
 * HTTP request to upload project file
 */
@@ -49,14 +49,15 @@ class ErrorBoundary extends React.Component {
      return (
        <div className={style.errorContainer} data-testid='error-container'>
          <div>
-            <p className={style.error}>: /</p>
-            <p>Something went wrong.</p>
-            <a
+            <p className={style.error}>:/</p>
+            <p>Something went wrong</p>
+            <div
+              role='button'
              className={style.report}
-              href={`mailto:mail@getontime.no?subject=Error%20Report&body=${encodeURIComponent(this.reportContent)}`}
+              onClick={() => Sentry.showReportDialog({ eventId: this.state.eventId })}
            >
              Report error
-            </a>
+            </div>
            <div
              role='button'
              className={style.report}
@@ -3,21 +3,24 @@
  height: 100%;
  display: grid;
  place-content: center;
-  background-color: $ui-black;
-  color: $ui-white;
-}
+  background-color: #121212;
+  color: white;

-.error {
-  color: $error-red;
-}
+  .error {
+    color: $error-red;
+    font-weight: 600;
+  }

-.report {
-  color: $blue-500;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  cursor: pointer;
+  .report {
+    text-decoration: underline  $error-red;
+    cursor: pointer;
+  }

-  &:hover {
-    color: $ontime-color;
+  .report:hover {
+    color: $error-red;
+  }
+
+  .report:active {
+    color: white;
  }
 }
@@ -1,4 +1,3 @@
-import { MouseEvent } from 'react';
 import { IoBan } from 'react-icons/io5';

 import { cx } from '../../../utils/styleUtils';
@@ -11,13 +10,12 @@ interface SwatchProps {
  isSelected?: boolean;
 }

-export default function Swatch({ color, isSelected, onClick }: SwatchProps) {
-  const handleClick = (event: MouseEvent) => {
-    onClick?.(color);
-    event.preventDefault();
-    event.stopPropagation();
-  };
+export default function Swatch(props: SwatchProps) {
+  const { color, isSelected, onClick } = props;

+  const handleClick = () => {
+    onClick?.(color);
+  };
  const classes = cx([style.swatch, isSelected && style.selected, onClick && style.selectable]);

  if (!color) {
@@ -20,7 +20,7 @@ export default function DelayInput(props: DelayInputProps) {
  const [value, setValue] = useState<string>('');
  const inputRef = useRef<HTMLInputElement | null>(null);
  // avoid wrong submit on cancel
-  const ignoreChangeRef = useRef(false);
+  let ignoreChange = false;

  // set internal value on duration change
  useEffect(() => {
@@ -35,8 +35,8 @@ export default function DelayInput(props: DelayInputProps) {
   * @param {string} newValue string to be parsed
   */
  const validateAndSubmit = (newValue: string) => {
-    if (ignoreChangeRef.current) {
-      ignoreChangeRef.current = false;
+    if (ignoreChange) {
+      ignoreChange = false;
      return;
    }

@@ -78,7 +78,7 @@ export default function DelayInput(props: DelayInputProps) {
    } else if (event.key === 'Tab') {
      validateAndSubmit((event.target as HTMLInputElement).value);
    } else if (event.key === 'Escape') {
-      ignoreChangeRef.current = true;
+      ignoreChange = true;
      setValue(millisToString(duration));
      inputRef.current?.blur();
    }
@@ -11,7 +11,8 @@ interface AppLinkProps {
 * Component used to navigate to an editor link inside the same window
 * Handles the path to respect Ontime Clouds base URL
 */
-export default function AppLink({ search, children }: PropsWithChildren<AppLinkProps>) {
+export default function AppLink(props: PropsWithChildren<AppLinkProps>) {
+  const { search, children } = props;
  const navigate = useNavigate();

  const handleClick = () => navigate({ search });
@@ -12,7 +12,9 @@ interface ExternalLinkProps {
  inline?: boolean;
 }

-export default function ExternalLink({ href, inline, children }: ExternalLinkProps) {
+export default function ExternalLink(props: ExternalLinkProps) {
+  const { href, inline, children } = props;
+
  const handleClick = (event: MouseEvent) => {
    event.preventDefault();
    openLink(href);
@@ -1,12 +1,10 @@
 import { memo } from 'react';
 import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
-import { LuCoffee } from 'react-icons/lu';
 import { useLocation } from 'react-router';
 import { Dialog } from '@base-ui-components/react/dialog';
 import { useDisclosure, useFullscreen } from '@mantine/hooks';

 import { isLocalhost } from '../../../externals';
-import { useKeepAwakeOptions } from '../../../features/keep-awake/KeepAwake';
 import { navigatorConstants } from '../../../viewerConfig';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
@@ -33,7 +31,6 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
  const [isRenameOpen, handlers] = useDisclosure(false);
  const { fullscreen, toggle } = useFullscreen();
  const { mirror, toggleMirror } = useViewOptionsStore();
-  const { keepAwake, toggleKeepAwake } = useKeepAwakeOptions();
  const location = useLocation();

  return (
@@ -65,13 +62,6 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
              <IoSwapVertical />
              {mirror && <span className={style.note}>Active</span>}
            </NavigationMenuItem>
-            {window.isSecureContext && (
-              <NavigationMenuItem active={keepAwake} onClick={toggleKeepAwake}>
-                Keep Awake
-                <LuCoffee />
-                {keepAwake && <span className={style.note}>Active</span>}
-              </NavigationMenuItem>
-            )}
            <NavigationMenuItem onClick={handlers.open}>Rename Client</NavigationMenuItem>

            <hr className={style.separator} />
@@ -62,6 +62,8 @@
  padding: 2px;
  border-radius: $component-border-radius-md;
  color: $ui-white;
+  overflow-y: auto;
+  max-height: 20rem;
  border: 1px solid $gray-1000;

  &[data-side='start'] {
@@ -71,16 +73,6 @@
  }
 }

-.list {
-  box-sizing: border-box;
-  position: relative;
-  padding-block: 0.25rem;
-  overflow-y: auto;
-  max-height: 20rem;
-  max-height: var(--available-height);
-  scroll-padding-block: 1.5rem;
-}
-
 .item {
  box-sizing: border-box;
  outline: 0;
@@ -31,17 +31,14 @@ export default function Select<T>({ options, fluid, size = 'medium', ...selectRo
        <BaseSelect.Positioner side='bottom' align='start'>
          <BaseSelect.ScrollUpArrow className={styles.scrollArrow} />
          <BaseSelect.Popup className={styles.popup}>
-            <BaseSelect.Arrow />
-            <BaseSelect.List className={styles.list}>
-              {options.map(({ disabled, label, value }) => (
-                <BaseSelect.Item key={String(value)} className={styles.item} value={value} disabled={disabled}>
-                  <BaseSelect.ItemIndicator className={styles.itemIndicator}>
-                    <IoCheckmark className={styles.itemIndicatorIcon} />
-                  </BaseSelect.ItemIndicator>
-                  <BaseSelect.ItemText className={styles.itemLabel}>{label}</BaseSelect.ItemText>
-                </BaseSelect.Item>
-              ))}
-            </BaseSelect.List>
+            {options.map(({ disabled, label, value }) => (
+              <BaseSelect.Item key={String(value)} className={styles.item} value={value} disabled={disabled}>
+                <BaseSelect.ItemIndicator className={styles.itemIndicator}>
+                  <IoCheckmark className={styles.itemIndicatorIcon} />
+                </BaseSelect.ItemIndicator>
+                <BaseSelect.ItemText className={styles.itemLabel}>{label}</BaseSelect.ItemText>
+              </BaseSelect.Item>
+            ))}
          </BaseSelect.Popup>
          <BaseSelect.ScrollDownArrow className={styles.scrollArrow} />
        </BaseSelect.Positioner>
@@ -28,7 +28,6 @@
  bottom: 0;

  width: 40rem;
-  max-width: 100vw;
  height: 100vh;

  display: flex;
@@ -6,7 +6,7 @@ import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { RUNDOWN } from '../api/constants';
 import { fetchCurrentRundown } from '../api/rundown';
 import { useSelectedEventId } from '../hooks/useSocket';
-import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
+import { getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';

 import useProjectData from './useProjectData';

@@ -54,8 +54,8 @@ export function useFlatRundown() {

  // update data whenever the revision changes
  useEffect(() => {
-    if (data.revision !== -1 || data.revision !== prevRevision) {
-      const flatRundown = data.order.map((id) => data.entries[id]);
+    if (data.revision !== -1 && data.revision !== prevRevision) {
+      const flatRundown = data.flatOrder.map((id) => data.entries[id]);
      setFlatRundown(flatRundown);
      setPrevRevision(data.revision);
    }
@@ -85,8 +85,8 @@ export function useFlatRundownWithMetadata() {
 /**
 * Provides access to a partial rundown based on a filter callback
 */
-export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
-  const { data, status } = useFlatRundownWithMetadata();
+export function usePartialRundown(cb: (event: OntimeEntry) => boolean) {
+  const { data, status } = useFlatRundown();
  const filteredData = useMemo(() => {
    return data.filter(cb);
  }, [data, cb]);
@@ -164,15 +164,46 @@ export const useProgressData = createSelector((state: RuntimeStore) => ({
  timeDanger: state.eventNow?.timeDanger ?? null,
 }));

+export const useRundownOverview = createSelector((state: RuntimeStore) => ({
+  plannedStart: state.rundown.plannedStart,
+  actualStart: state.rundown.actualStart,
+  plannedEnd: state.rundown.plannedEnd,
+  expectedEnd: state.offset.expectedRundownEnd,
+}));
+
+export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) => ({
+  playback: state.timer.playback,
+  clock: state.clock,
+
+  numEvents: state.rundown.numEvents,
+  selectedEventIndex: state.rundown.selectedEventIndex,
+  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
+
+  groupExpectedEnd: state.offset.expectedGroupEnd,
+}));
+
+export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
+  clock: state.clock,
+  offset: state.offset.absolute,
+}));
+
 export const useExpectedStartData = createSelector((state: RuntimeStore) => ({
  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
  mode: state.offset.mode,
-  currentDay: state.rundown.currentDay ?? 0,
+  currentDay: state.eventNow?.dayOffset ?? 0,
  actualStart: state.rundown.actualStart,
  plannedStart: state.rundown.plannedStart,
  clock: state.clock,
 }));

+export const useCurrentDay = createSelector((state: RuntimeStore) => ({
+  currentDay: state.eventNow?.dayOffset ?? 0,
+}));
+
+export const useRuntimeOffset = createSelector((state: RuntimeStore) => ({
+  offset: state.offset.absolute,
+}));
+
 export const usePing = createSelector((state: RuntimeStore) => ({
  ping: state.ping,
 }));
@@ -196,45 +227,6 @@ export const usePlayback = () => {
  return useRuntimeStore(featureSelector);
 };

-/* ======================= Overview data subscriptions ======================= */
-
-export const useStartTimesOverview = createSelector((state: RuntimeStore) => ({
-  plannedStart: state.rundown.plannedStart,
-  actualStart: state.rundown.actualStart,
-  plannedEnd: state.rundown.plannedEnd,
-  expectedEnd: state.offset.expectedRundownEnd,
-}));
-
-export const useProgressOverview = createSelector((state: RuntimeStore) => ({
-  numEvents: state.rundown.numEvents,
-  selectedEventIndex: state.rundown.selectedEventIndex,
-}));
-
-export const useOffsetOverview = createSelector((state: RuntimeStore) => ({
-  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
-  playback: state.timer.playback,
-}));
-
-export const useGroupTimerOverView = createSelector((state: RuntimeStore) => ({
-  clock: state.clock,
-  mode: state.offset.mode,
-  groupExpectedEnd: state.offset.expectedGroupEnd,
-  // we can force these numbers to 0 fo this use case to avoid null checks
-  actualGroupStart: state.rundown.actualGroupStart ?? 0,
-  currentDay: state.eventNow?.dayOffset ?? 0,
-  playback: state.timer.playback,
-}));
-
-export const useFlagTimerOverView = createSelector((state: RuntimeStore) => ({
-  clock: state.clock,
-  mode: state.offset.mode,
-  // we can force these numbers to 0 fo this use case to avoid null checks
-  actualStart: state.rundown.actualStart ?? 0,
-  plannedStart: state.rundown.plannedStart ?? 0,
-  currentDay: state.eventNow?.dayOffset ?? 0,
-  playback: state.timer.playback,
-}));
-
 /* ======================= View specific subscriptions ======================= */

 export const useTimerSocket = createSelector((state: RuntimeStore) => ({
@@ -276,7 +268,11 @@ export const useStudioTimersSocket = createSelector((state: RuntimeStore) => ({
  eventNow: state.eventNow,
  message: state.message,
  time: state.timer,
-  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
+  offset: state.offset,
  rundown: state.rundown,
-  expectedRundownEnd: state.offset.expectedRundownEnd,
+}));
+
+export const useTimelineSocket = createSelector((state: RuntimeStore) => ({
+  clock: state.clock,
+  offset: state.offset.absolute,
 }));
@@ -0,0 +1 @@
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
@@ -0,0 +1,89 @@
+import { create } from 'zustand';
+
+type Target = 'cuesheet' | 'timer' | 'clock' | 'countdown' | 'backstage' | 'studio';
+
+interface SelectionState {
+  [key: string]: boolean;
+}
+
+interface ColumnPermissions {
+  read: string[];
+  write: string[];
+}
+
+interface CuesheetLinksState {
+  target: Target | null;
+  readSelected: SelectionState;
+  writeSelected: SelectionState;
+  setTarget: (target: Target | null) => void;
+  setField: (field: 'read' | 'write', key: string, value: boolean) => void;
+  toggleField: (field: 'read' | 'write', key: string) => void;
+  selectAll: (field: 'read' | 'write', keys: string[]) => void;
+  clearAll: (field: 'read' | 'write', keys: string[]) => void;
+  // Returns arrays of column keys that have read/write permissions if target is 'cuesheet'
+  getSelections: () => ColumnPermissions | null;
+}
+
+export const useCuesheetLinksStore = create<CuesheetLinksState>((set, get) => ({
+  target: null,
+  readSelected: {},
+  writeSelected: {},
+  setTarget: (target) => set({ target }),
+  setField: (field, key, value) =>
+    set((state) => ({
+      ...(field === 'read'
+        ? { readSelected: { ...state.readSelected, [key]: value } }
+        : { writeSelected: { ...state.writeSelected, [key]: value } }),
+    })),
+  toggleField: (field, key) =>
+    set((state) => ({
+      ...(field === 'read'
+        ? { readSelected: { ...state.readSelected, [key]: !state.readSelected[key] } }
+        : { writeSelected: { ...state.writeSelected, [key]: !state.writeSelected[key] } }),
+    })),
+  selectAll: (field, keys) =>
+    set((_state) => ({
+      ...(field === 'read'
+        ? {
+            readSelected: keys.reduce((acc, key) => {
+              acc[key] = true;
+              return acc;
+            }, {} as SelectionState),
+          }
+        : {
+            writeSelected: keys.reduce((acc, key) => {
+              acc[key] = true;
+              return acc;
+            }, {} as SelectionState),
+          }),
+    })),
+  clearAll: (field, keys) =>
+    set((_state) => ({
+      ...(field === 'read'
+        ? {
+            readSelected: keys.reduce((acc, key) => {
+              acc[key] = false;
+              return acc;
+            }, {} as SelectionState),
+          }
+        : {
+            writeSelected: keys.reduce((acc, key) => {
+              acc[key] = false;
+              return acc;
+            }, {} as SelectionState),
+          }),
+    })),
+  getSelections: () => {
+    const state = get();
+    if (state.target !== 'cuesheet') return null;
+
+    return {
+      read: Object.entries(state.readSelected)
+        .filter(([_, selected]) => selected)
+        .map(([key]) => key),
+      write: Object.entries(state.writeSelected)
+        .filter(([_, selected]) => selected)
+        .map(([key]) => key),
+    };
+  },
+}));
@@ -1,4 +1,6 @@
-import { makeCSVFromArrayOfArrays } from '../csv';
+import { OntimeEntry, ProjectRundowns, Rundown } from 'ontime-types';
+
+import { aggregateRundowns, makeCSVFromArrayOfArrays } from '../csv';

 describe('makeCSVFromArrayOfArrays()', () => {
  it('joins an array of arrays with commas and newlines', () => {
@@ -11,3 +13,34 @@ after newline,after comma
 `);
  });
 });
+
+describe('aggregateRundowns()', () => {
+  it('flattens an object of rundowns into a single array', () => {
+    const rundowns = {
+      first: {
+        id: '',
+        title: '',
+        revision: 0,
+        order: ['1', '2'],
+        flatOrder: ['1', '2'],
+        entries: {
+          '1': { id: '1' } as OntimeEntry,
+          '2': { id: '2' } as OntimeEntry,
+        },
+      },
+      second: {
+        id: '',
+        title: '',
+        revision: 0,
+        order: ['3', '4'],
+        flatOrder: ['3', '4'],
+        entries: {
+          '3': { id: '3' } as OntimeEntry,
+          '4': { id: '4' } as OntimeEntry,
+        },
+      } as Rundown,
+    } as ProjectRundowns;
+
+    expect(aggregateRundowns(rundowns)).toStrictEqual([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }]);
+  });
+});
@@ -1,4 +1,5 @@
 import { stringify } from 'csv-stringify/browser/esm/sync';
+import { OntimeEntry, ProjectRundowns } from 'ontime-types';

 /**
 * Converts an array of arrays to a CSV file
@@ -6,3 +7,25 @@ import { stringify } from 'csv-stringify/browser/esm/sync';
 export function makeCSVFromArrayOfArrays(arrayOfArrays: string[][]): string {
  return stringify(arrayOfArrays);
 }
+
+/**
+ * Receives an object of rundowns, and flattens them into a single, linear rundown
+ * Used for CSV export
+ */
+export function aggregateRundowns(rundowns: ProjectRundowns): OntimeEntry[] {
+  const rundownKeys = Object.keys(rundowns);
+  if (rundownKeys.length === 0) return [];
+  const flatRundown: OntimeEntry[] = [];
+
+  for (const key of rundownKeys) {
+    const { order, entries } = rundowns[key];
+
+    for (let i = 0; i < order.length; i++) {
+      const entryId = order[i];
+      const entry = entries[entryId];
+
+      flatRundown.push(entry);
+    }
+  }
+  return flatRundown;
+}
@@ -0,0 +1,8 @@
+import { MaybeString } from 'ontime-types';
+
+export default function safeParseNumber(value: MaybeString, defaultValue: number = 0): number {
+  if (!value) return defaultValue;
+  const number = Number(value);
+  if (isNaN(number)) return defaultValue;
+  return number;
+}
@@ -1,5 +1,5 @@
 import {
-  ApiActionTag,
+  ApiAction,
  Log,
  MessageTag,
  RefetchKey,
@@ -199,7 +199,7 @@ export const connectSocket = () => {
  };
 };

-export function sendSocket<T extends MessageTag | ApiActionTag>(
+export function sendSocket<T extends MessageTag | ApiAction>(
  tag: T,
  payload: T extends MessageTag ? Pick<WsPacketToServer & { tag: T }, 'payload'>['payload'] : unknown,
 ): void {
@@ -12,8 +12,6 @@ import { APP_SETTINGS } from '../api/constants';
 import { useExpectedStartData } from '../hooks/useSocket';
 import { ontimeQueryClient } from '../queryClient';

-import { ExtendedEntry } from './rundownMetadata';
-
 /**
 * Returns current time in milliseconds from midnight
 * @returns {number}
@@ -156,33 +154,3 @@ export function useTimeUntilExpectedStart(
  );
  return expectedStart - clock;
 }
-
-export function getExpectedTimesFromExtendedEvent(
-  event: Pick<
-    ExtendedEntry<OntimeEvent>,
-    'timeStart' | 'dayOffset' | 'delay' | 'totalGap' | 'isLinkedToLoaded' | 'countToEnd' | 'duration'
-  > | null,
-  state: ReturnType<typeof useExpectedStartData>,
-) {
-  if (event === null) return { expectedStart: 0, timeToStart: 0, expectedEnd: 0, plannedEnd: 0 };
-
-  const expectedStart = getExpectedStart(
-    { timeStart: event.timeStart, delay: event.delay, dayOffset: event.dayOffset },
-    {
-      totalGap: event.totalGap,
-      isLinkedToLoaded: event.isLinkedToLoaded,
-      ...state,
-    },
-  );
-
-  const plannedEnd = event.timeStart + event.duration + event.delay;
-
-  return {
-    expectedStart,
-    timeToStart: expectedStart - state.clock,
-    expectedEnd: event.countToEnd
-      ? Math.max(expectedStart + event.duration, plannedEnd)
-      : expectedStart + event.duration,
-    plannedEnd,
-  };
-}
@@ -33,8 +33,8 @@ export function validateProjectFile(file: File) {
  }

  // Limit file size of a project file to around 1MB
-  if (file.size > 2_000_000) {
-    throw new Error('File size limit (2MB) exceeded');
+  if (file.size > 1_000_000) {
+    throw new Error('File size limit (1MB) exceeded');
  }
 }

@@ -56,8 +56,8 @@ export function validateLogo(file: File) {
    throw new Error('File is empty');
  }

-  // Limit file size of a project file to around 1.5MB
-  if (file.size > 1_500_000) {
-    throw new Error('File size limit (1.5MB) exceeded');
+  // Limit file size of a project file to around 1MB
+  if (file.size > 1_000_000) {
+    throw new Error('File size limit (1MB) exceeded');
  }
 }
@@ -17,11 +17,11 @@ export const buyMeACoffeeUrl = 'https://buymeacoffee.com/cpvalente';

 // resolve environment
 export const appVersion = version;
-export const isDocker = import.meta.env.IS_DOCKER; // this env is made available by the vite.config.js define function
-export const isProduction = import.meta.env.PROD;
-export const isDev = import.meta.env.DEV;
+export const isProduction = import.meta.env.MODE === 'production';
+export const isDev = !isProduction;
 export const currentHostName = window.location.hostname;
 export const isLocalhost = currentHostName === 'localhost' || currentHostName === '127.0.0.1';
+export const isDockerImage = Boolean(import.meta.env.VITE_IS_DOCKER);
 export const isOntimeCloud = currentHostName.includes('cloud.getontime.no');

 // resolve entrypoint URLs
@@ -0,0 +1,29 @@
+/* eslint-disable react/display-name */
+import { ComponentType, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+
+import useUrlPresets from '../common/hooks-query/useUrlPresets';
+import { getRouteFromPreset } from '../common/utils/urlPresets';
+
+const withPreset = <P extends object>(Component: ComponentType<P>) => {
+  return (props: Partial<P>) => {
+    const { data } = useUrlPresets();
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    // navigate if is alias route
+    useEffect(() => {
+      if (!data) return;
+      const destination = getRouteFromPreset(location, data);
+
+      // navigate to this destination if its not null
+      if (destination) {
+        navigate(destination);
+      }
+    }, [data, navigate, location]);
+
+    return <Component {...(props as P)} />;
+  };
+};
+
+export default withPreset;
@@ -107,16 +107,16 @@ export default function AutomationsList(props: AutomationsListProps) {
                    </IconButton>
                  </Panel.InlineElements>
                </tr>
+                {deleteError && (
+                  <tr>
+                    <td colSpan={5}>
+                      <Panel.Error>{deleteError}</Panel.Error>
+                    </td>
+                  </tr>
+                )}
              </Fragment>
            );
          })}
-          {deleteError && (
-            <tr>
-              <td colSpan={5}>
-                <Panel.Error>{deleteError}</Panel.Error>
-              </td>
-            </tr>
-          )}
        </tbody>
      </Panel.Table>
    </Panel.Card>
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { CustomFields, Rundown } from 'ontime-types';

 import Button from '../../../../../common/components/buttons/Button';
-import useRundown from '../../../../../common/hooks-query/useRundown';
 import * as Panel from '../../../panel-utils/PanelUtils';

 import PreviewSpreadsheet from './preview/PreviewRundown';
@@ -18,7 +17,7 @@ interface ImportReviewProps {

 export default function ImportReview(props: ImportReviewProps) {
  const { rundown, customFields, onFinished, onCancel } = props;
-  const { data: currentRundown } = useRundown();
+
  const [loading, setLoading] = useState(false);
  const { importRundown } = useGoogleSheet();
  const resetPreview = useSheetStore((state) => state.resetPreview);
@@ -30,12 +29,9 @@ export default function ImportReview(props: ImportReviewProps) {

  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 },
+        [rundown.id]: rundown,
      },
      customFields,
    );
@@ -4,7 +4,7 @@ import { MessageTag } from 'ontime-types';
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
 import { usePing } from '../../../../common/hooks/useSocket';
 import { sendSocket } from '../../../../common/utils/socket';
-import { isDocker } from '../../../../externals';
+import { isDockerImage } from '../../../../externals';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';

@@ -18,7 +18,7 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
  return (
    <>
      <Panel.Header>Network</Panel.Header>
-      {isDocker && (
+      {isDockerImage && (
        <Panel.Section>
          <OntimeCloudStats />
        </Panel.Section>
@@ -10,6 +10,7 @@ import {

 import {
  deleteProject,
+  downloadCSV,
  downloadProject,
  duplicateProject,
  loadProject,
@@ -186,6 +187,10 @@ function ActionMenu(props: ActionMenuProps) {
    await downloadProject(filename);
  };

+  const handleExportCSV = async () => {
+    await downloadCSV(filename);
+  };
+
  return (
    <DropdownMenu
      render={<IconButton variant='ghosted-white' />}
@@ -208,6 +213,7 @@ function ActionMenu(props: ActionMenuProps) {
        { type: 'item', icon: IoPencilOutline, label: 'Rename', onClick: handleRename },
        { type: 'item', icon: IoCopyOutline, label: 'Duplicate', onClick: handleDuplicate },
        { type: 'item', icon: IoDocumentOutline, label: 'Download', onClick: handleDownload },
+        { type: 'item', icon: IoDocumentOutline, label: 'Export CSV Rundown', onClick: handleExportCSV },
        { type: 'divider' },
        { type: 'item', icon: IoTrash, label: 'Delete', onClick: () => onDelete(filename), disabled: current },
      ]}
@@ -27,7 +27,6 @@ export default function ProjectData() {
    reset,
    formState: { isSubmitting, isValid, isDirty, errors },
    setError,
-    clearErrors,
    watch,
    control,
    setValue,
@@ -54,7 +53,6 @@ export default function ProjectData() {

  const handleUploadProjectLogo = async (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
-    clearErrors('logo');

    if (!file) {
      return;
@@ -95,7 +93,6 @@ export default function ProjectData() {

  const onSubmit = async (formData: ProjectData) => {
    try {
-      clearErrors();
      await updateProjectData(formData);
    } catch (error) {
      const message = maybeAxiosError(error);
@@ -31,7 +31,7 @@ const staticOptions = [
  },
  {
    id: 'manage',
-    label: 'Project settings',
+    label: 'Project data',
    secondary: [
      { id: 'manage__defaults', label: 'Rundown defaults' },
      { id: 'manage__custom', label: 'Custom fields' },
@@ -1,84 +0,0 @@
-import { use, useCallback, useEffect, useMemo, useState } from 'react';
-import { useSearchParams } from 'react-router';
-
-import { PresetContext } from '../../common/context/PresetContext';
-
-/** @url https://developer.mozilla.org/en-US/docs/Web/API/WakeLock */
-export default function KeepAwake() {
-  const { keepAwake } = useKeepAwakeOptions();
-  const [wakeLockSentinel, setWakeLockSentinel] = useState<WakeLockSentinel | null>(null);
-
-  const removeLock = () => {
-    if (wakeLockSentinel) wakeLockSentinel.release().finally(() => setWakeLockSentinel(null));
-  };
-
-  const acquireLock = () => {
-    if (!wakeLockSentinel || wakeLockSentinel.released) {
-      setWakeLockSentinel(null);
-      navigator.wakeLock
-        .request('screen')
-        .then((sentinel) => {
-          setWakeLockSentinel(sentinel);
-        })
-        .catch(console.error);
-    }
-  };
-
-  useEffect(() => {
-    const controller = new AbortController();
-    if (keepAwake) {
-      acquireLock();
-      document.addEventListener(
-        'visibilitychange',
-        () => {
-          if (wakeLockSentinel !== null && document.visibilityState === 'visible') {
-            acquireLock();
-          }
-        },
-        { signal: controller.signal },
-      );
-    } else {
-      removeLock();
-    }
-
-    return () => {
-      controller.abort();
-      removeLock();
-    };
-  }, [keepAwake]);
-
-  return <></>;
-}
-
-const keepAwakeKey = 'keep-awake';
-
-function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URLSearchParams) {
-  // Helper to get value from either source, prioritizing defaultValues
-  return defaultValues?.has(keepAwakeKey) || searchParams.has(keepAwakeKey);
-}
-
-/**
- * Hook exposes the keep awake options
- */
-export function useKeepAwakeOptions() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const maybePreset = use(PresetContext);
-
-  const keepAwake = useMemo(() => {
-    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
-    return getOptionsFromParams(searchParams, defaultValues);
-  }, [maybePreset, searchParams]);
-
-  const toggleKeepAwake = useCallback(() => {
-    setSearchParams((searchParams) => {
-      if (keepAwake) {
-        searchParams.delete(keepAwakeKey);
-      } else {
-        searchParams.set(keepAwakeKey, '1');
-      }
-      return searchParams;
-    });
-  }, [keepAwake]);
-
-  return { keepAwake, toggleKeepAwake };
-}
@@ -8,7 +8,7 @@ import { useSelectedEventId } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
+import useRundown from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { cx } from '../../common/utils/styleUtils';
 import { throttle } from '../../common/utils/throttle';
@@ -21,14 +21,14 @@ import OperatorGroup from './operator-group/OperatorGroup';
 import StatusBar from './status-bar/StatusBar';
 import { getOperatorOptions, useOperatorOptions } from './operator.options';
 import type { EditEvent } from './operator.types';
-import { getEventData } from './operator.utils';
+import { getEventData, makeOperatorMetadata } from './operator.utils';

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

 const selectedOffset = 50;

 export default function Operator() {
-  const { data, rundownMetadata, status } = useRundownWithMetadata();
+  const { data, status } = useRundown();
  const { data: customFields, status: customFieldStatus } = useCustomFields();
  const { data: projectData, status: projectDataStatus } = useProjectData();

@@ -113,6 +113,7 @@ export default function Operator() {
  }

  const canEdit = shouldEdit && subscribe.length;
+  const { process } = makeOperatorMetadata(selectedEventId);

  return (
    <div className={style.operatorContainer} data-testid='operator-view'>
@@ -129,7 +130,8 @@ export default function Operator() {
        {data.order.map((entryId) => {
          const entry = data.entries[entryId];
          if (isOntimeEvent(entry)) {
-            const { isPast, isLinkedToLoaded, isLoaded, totalGap } = rundownMetadata[entryId];
+            const { isPast, isSelected, isLinkedToLoaded, totalGap } = process(entry);
+
            // hide past events (if setting) and skipped events
            if ((hidePast && isPast) || entry.skip) {
              return null;
@@ -156,9 +158,9 @@ export default function Operator() {
                delay={entry.delay}
                dayOffset={entry.dayOffset}
                isLinkedToLoaded={isLinkedToLoaded}
-                isSelected={isLoaded}
+                isSelected={isSelected}
                isPast={isPast}
-                selectedRef={isLoaded ? selectedRef : undefined}
+                selectedRef={isSelected ? selectedRef : undefined}
                showStart={showStart}
                subscribed={subscribedData}
                totalGap={totalGap}
@@ -177,7 +179,7 @@ export default function Operator() {
                    return null;
                  }

-                  const { isPast, isLoaded, isLinkedToLoaded, totalGap } = rundownMetadata[nestedEntryId];
+                  const { isPast, isSelected, isLinkedToLoaded, totalGap } = process(nestedEntry);

                  // hide past events (if setting) and skipped events
                  if ((hidePast && isPast) || nestedEntry.skip) {
@@ -205,9 +207,9 @@ export default function Operator() {
                      delay={nestedEntry.delay}
                      dayOffset={nestedEntry.dayOffset}
                      isLinkedToLoaded={isLinkedToLoaded}
-                      isSelected={isLoaded}
+                      isSelected={isSelected}
                      isPast={isPast}
-                      selectedRef={isLoaded ? selectedRef : undefined}
+                      selectedRef={isSelected ? selectedRef : undefined}
                      showStart={showStart}
                      subscribed={subscribedData}
                      totalGap={totalGap}
@@ -0,0 +1,83 @@
+import { OntimeEvent } from 'ontime-types';
+
+import { makeOperatorMetadata } from '../operator.utils';
+
+describe('makeOperatorMetadata()', () => {
+  it('should track past, selected states, gaps and linking', () => {
+    const event1 = { id: 'event1', gap: 5, linkStart: false } as OntimeEvent;
+    const event2 = { id: 'event2', gap: 10, linkStart: true } as OntimeEvent;
+    const event3 = { id: 'event3', gap: 15, linkStart: true } as OntimeEvent;
+    const { process } = makeOperatorMetadata('event2');
+
+    expect(process(event1)).toEqual({
+      isPast: true,
+      isSelected: false,
+      totalGap: 5,
+      isLinkedToLoaded: false,
+    });
+    expect(process(event2)).toEqual({
+      isPast: false,
+      isSelected: true,
+      totalGap: 15,
+      isLinkedToLoaded: false,
+    });
+    expect(process(event3)).toEqual({
+      isPast: false,
+      isSelected: false,
+      totalGap: 30,
+      isLinkedToLoaded: true,
+    });
+  });
+
+  it('should handle null selectedId', () => {
+    const event1 = { id: 'event1', gap: 5, linkStart: true } as OntimeEvent;
+    const event2 = { id: 'event2', gap: 10, linkStart: false } as OntimeEvent;
+    const event3 = { id: 'event3', gap: 15, linkStart: true } as OntimeEvent;
+    const { process } = makeOperatorMetadata(null);
+
+    expect(process(event1)).toEqual({
+      isPast: false,
+      isSelected: false,
+      totalGap: 5,
+      isLinkedToLoaded: true,
+    });
+    expect(process(event2)).toEqual({
+      isPast: false,
+      isSelected: false,
+      totalGap: 15,
+      isLinkedToLoaded: false,
+    });
+    expect(process(event3)).toEqual({
+      isPast: false,
+      isSelected: false,
+      totalGap: 30,
+      isLinkedToLoaded: true,
+    });
+  });
+
+  it('should break linking chain on countToEnd events', () => {
+    const event1 = { id: 'event1', gap: 5, linkStart: true, countToEnd: false } as OntimeEvent;
+    const event2 = { id: 'event2', gap: 10, linkStart: true, countToEnd: true } as OntimeEvent;
+    const event3 = { id: 'event3', gap: 15, linkStart: true, countToEnd: false } as OntimeEvent;
+    const { process } = makeOperatorMetadata(null);
+
+    expect(process(event1)).toEqual({
+      isPast: false,
+      isSelected: false,
+      totalGap: 5,
+      isLinkedToLoaded: true,
+    });
+    expect(process(event2)).toEqual({
+      isPast: false,
+      isSelected: false,
+      totalGap: 15,
+      isLinkedToLoaded: true,
+    });
+    expect(process(event3)).toEqual({
+      isPast: false,
+      isSelected: false,
+      totalGap: 30,
+      isLinkedToLoaded: false,
+    });
+  });
+});
@@ -71,7 +71,7 @@ function OperatorEvent({
  ]);

  return (
-    <div className={operatorClasses} data-testid={cue} ref={selectedRef} onContextMenu={handleLongPress} {...mouseHandlers}>
+    <div className={operatorClasses} ref={selectedRef} onContextMenu={handleLongPress} {...mouseHandlers}>
      <div className={style.binder} style={{ ...cueColours }}>
        <span className={style.cue}>{cue}</span>
      </div>
@@ -167,5 +167,5 @@ function TimeUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }:
  const isDue = timeUntil < MILLIS_PER_SECOND;
  const timeUntilString = isDue ? 'DUE' : `${formatDuration(Math.abs(timeUntil), timeUntil > 2 * MILLIS_PER_MINUTE)}`;

-  return <span className={style.timeUntil} data-testid='time-until'>{timeUntilString}</span>;
+  return <span className={style.timeUntil}>{timeUntilString}</span>;
 }
@@ -1,33 +1,74 @@
-import { CustomFields, MaybeString, OntimeEvent } from 'ontime-types';
-
-import { getPropertyValue } from '../viewers/common/viewUtils';
-
-import type { Subscribed } from './operator.types';
-
-export function getEventData(
-  event: OntimeEvent,
-  main: MaybeString,
-  secondary: MaybeString,
-  subscriptions: string[],
-  customFields: CustomFields,
-) {
-  const mainField = main ? getPropertyValue(event, main) ?? '' : event.title;
-  const secondaryField = getPropertyValue(event, secondary) ?? '';
-
-  // remove subscriptions that are not in customFields
-  const sanitisedSubscriptions = subscriptions.filter((field) => Object.hasOwn(customFields, field));
-  const subscribedData = sanitisedSubscriptions.reduce<Subscribed>((acc, id) => {
-    const field = customFields[id];
-    if (field) {
-      acc.push({
-        id,
-        label: field.label,
-        colour: field.colour,
-        value: event.custom[id],
-      });
-    }
-    return acc;
-  }, []);
-
-  return { mainField, secondaryField, subscribedData };
-}
+import { CustomFields, EntryId, MaybeString, OntimeEvent } from 'ontime-types';
+
+import { getPropertyValue } from '../viewers/common/viewUtils';
+
+import type { Subscribed } from './operator.types';
+
+type OperatorMetadata = {
+  isLinkedToLoaded: boolean;
+  isPast: boolean;
+  isSelected: boolean;
+  totalGap: number;
+};
+
+export function makeOperatorMetadata(selectedId: EntryId | null) {
+  const hasSelection = Boolean(selectedId);
+  let hasSeenSelected = false;
+  let totalGap = 0;
+  /** if the event can link all the way back to the currently playing event */
+  let isLinkedToLoaded = false;
+  let previousEvent: OntimeEvent | null = null;
+
+  function process(event: OntimeEvent): Readonly<OperatorMetadata> {
+    const isSelected = event.id === selectedId;
+    if (isSelected) {
+      hasSeenSelected = true;
+    }
+
+    // is past if we havent yet seen the selected event
+    const isPast = hasSelection && !hasSeenSelected;
+    totalGap += event.gap;
+
+    if (!isPast && !isSelected) {
+      /**
+       * isLinkToLoaded is a chain value that we maintain until we
+       * a) find an unlinked event
+       * b) find a countToEnd event
+       */
+      isLinkedToLoaded = event.linkStart && !previousEvent?.countToEnd;
+    }
+
+    previousEvent = event;
+    return { isPast, isSelected, totalGap, isLinkedToLoaded };
+  }
+
+  return { process };
+}
+
+export function getEventData(
+  event: OntimeEvent,
+  main: MaybeString,
+  secondary: MaybeString,
+  subscriptions: string[],
+  customFields: CustomFields,
+) {
+  const mainField = main ? getPropertyValue(event, main) ?? '' : event.title;
+  const secondaryField = getPropertyValue(event, secondary) ?? '';
+
+  // remove subscriptions that are not in customFields
+  const sanitisedSubscriptions = subscriptions.filter((field) => Object.hasOwn(customFields, field));
+  const subscribedData = sanitisedSubscriptions.reduce<Subscribed>((acc, id) => {
+    const field = customFields[id];
+    if (field) {
+      acc.push({
+        id,
+        label: field.label,
+        colour: field.colour,
+        value: event.custom[id],
+      });
+    }
+    return acc;
+  }, []);
+
+  return { mainField, secondaryField, subscribedData };
+}
@@ -47,10 +47,9 @@

 .daySpan {
  &::after {
-    content: "+"attr(data-day-offset);
+    content: '*';
    vertical-align: super;
-    font-size: 0.6em;
-    letter-spacing: 0;
+    font-size: 0.75em;
    color: $info-blue;
  }
 }
@@ -68,10 +67,3 @@
  font-size: calc(1rem - 2px);
  text-align: right;
 }
-
-.dueTime {
-  text-transform: capitalize;
-  font-size: 1rem;
-  letter-spacing: 0;
-  color: $playback-over;
-}
@@ -8,33 +8,30 @@ import {
  TbFolderPin,
  TbFolderStar,
 } from 'react-icons/tb';
-import { OffsetMode, OntimeEvent, OntimeGroup, TimerPhase, TimerType } from 'ontime-types';
-import { dayInMs, isPlaybackActive, millisToString } from 'ontime-utils';
+import { OntimeEvent, OntimeGroup, TimerPhase, TimerType } from 'ontime-types';
+import { isPlaybackActive, millisToString } from 'ontime-utils';

 import Tooltip from '../../../common/components/tooltip/Tooltip';
 import {
  useClock,
  useCurrentGroupId,
-  useFlagTimerOverView,
-  useGroupTimerOverView,
  useNextFlag,
-  useOffsetOverview,
-  useProgressOverview,
-  useStartTimesOverview,
+  useRundownOverview,
+  useRuntimePlaybackOverview,
  useTimer,
 } from '../../../common/hooks/useSocket';
 import { useEntry } from '../../../common/hooks-query/useRundown';
 import { getOffsetState, getOffsetText } from '../../../common/utils/offset';
 import { cx, enDash, timerPlaceholder } from '../../../common/utils/styleUtils';
 import { formatTime } from '../../../common/utils/time';
-import { calculateEndAndDaySpan, formatDueTime, formattedTime } from '../overview.utils';
+import { calculateEndAndDaySpan, formattedTime } from '../overview.utils';

 import { OverUnder, TimeColumn } from './TimeLayout';

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

 export function StartTimes() {
-  const { plannedEnd, plannedStart, actualStart, expectedEnd } = useStartTimesOverview();
+  const { plannedEnd, plannedStart, actualStart, expectedEnd } = useRundownOverview();

  const plannedStartText = plannedStart === null ? timerPlaceholder : formatTime(plannedStart);

@@ -50,7 +47,7 @@ export function StartTimes() {
          <Tooltip text='Planned start time' render={<TbCalendarPin className={style.icon} />} />
          <span className={cx([style.time, plannedStart === null && style.muted])}>{plannedStartText}</span>
        </div>
-        <div className={style.labelledElement} data-testid='actual-start-time'>
+        <div className={style.labelledElement}>
          <Tooltip text='Actual start time' render={<TbCalendarClock className={style.icon} />} />
          <span className={cx([style.time, actualStart === null && style.muted])}>{formattedTime(actualStart)}</span>
        </div>
@@ -61,8 +58,8 @@ export function StartTimes() {
          <Tooltip text='Planned end time' render={<TbCalendarPin className={style.icon} />} />
          {maybePlannedDaySpan > 0 ? (
            <Tooltip
-              text={`Rundown spans over ${maybePlannedDaySpan + 1} days`}
-              render={<span className={cx([style.time, style.daySpan])} data-day-offset={maybePlannedDaySpan} />}
+              text={`Event spans over ${maybePlannedDaySpan + 1} days`}
+              render={<span className={cx([style.time, style.daySpan])} />}
            >
              {plannedEndText}
            </Tooltip>
@@ -74,8 +71,8 @@ export function StartTimes() {
          <Tooltip text='Expected end time' render={<TbCalendarStar className={style.icon} />} />
          {maybeExpectedEnd !== null && maybeExpectedDaySpan > 0 ? (
            <Tooltip
-              text={`Rundown spans over ${maybeExpectedDaySpan + 1} days`}
-              render={<span className={cx([style.time, style.daySpan])} data-day-offset={maybeExpectedDaySpan} />}
+              text={`Event spans over ${maybeExpectedDaySpan + 1} days`}
+              render={<span className={cx([style.time, style.daySpan])} />}
            >
              {formattedTime(maybeExpectedEnd)}
            </Tooltip>
@@ -99,110 +96,61 @@ export function MetadataTimes() {
  );
 }

+//TODO: there a some things here we still need to think about, mainly what to do whit the planed group duration in relation to the events
 function GroupTimes() {
-  const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback } = useGroupTimerOverView();
+  const { clock, groupExpectedEnd } = useRuntimePlaybackOverview();
  const { currentGroupId } = useCurrentGroupId();
  const group = useEntry(currentGroupId) as OntimeGroup | null;

-  const active = isPlaybackActive(playback);
-
-  // the group end time dose not encode any day offsets so it is calculated with group start time and duration
-  const plannedGroupEnd = (() => {
-    if (!active) return null;
-    if (!group || group.timeStart === null) return null;
-    const normalizedClock = clock + currentDay * dayInMs;
-
-    return mode === OffsetMode.Absolute
-      ? group.timeStart + group.duration - normalizedClock
-      : actualGroupStart + group.duration - normalizedClock;
-  })();
-
-  const plannedTimeUntilGroupEnd = formatDueTime(plannedGroupEnd, 3, TimerType.CountDown);
+  // the group end time dose not encode any day offsets
+  const plannedGroupEnd = group && group.timeStart !== null ? group.timeStart + group.duration - clock : null;
+  const plannedTimeUntilGroupEnd = formattedTime(plannedGroupEnd, 3, TimerType.CountDown);

  const expectedGroupEnd = groupExpectedEnd !== null ? groupExpectedEnd - clock : null;
-  const expectedTimeUntilGroupEnd = formatDueTime(expectedGroupEnd, 3, TimerType.CountDown);
+  const expectedTimeUntilGroupEnd = formattedTime(expectedGroupEnd, 3, TimerType.CountDown);
+
+  const groupTitle = group?.title ?? null;

  return (
    <div className={style.metadataRow}>
-      <span className={group?.title ? style.labelTitle : style.label}>{`${group?.title || 'Group'} `}</span>
+      <span className={groupTitle ? style.labelTitle : style.label}>{`${groupTitle ? groupTitle : 'Group'} `}</span>
      <div className={style.labelledElement}>
        <Tooltip text='Time to planned group end' render={<TbFolderPin className={style.icon} />} />
-        <span
-          className={cx([
-            style.time,
-            (!group || !active) && style.muted,
-            plannedTimeUntilGroupEnd === 'due' && style.dueTime,
-          ])}
-        >
-          {plannedTimeUntilGroupEnd}
-        </span>
+        <span className={cx([style.time, !group && style.muted])}>{plannedTimeUntilGroupEnd}</span>
      </div>
      <div className={style.labelledElement}>
        <Tooltip text='Time to expected group end' render={<TbFolderStar className={style.icon} />} />
-        <span
-          className={cx([
-            style.time,
-            !groupExpectedEnd && style.muted,
-            expectedTimeUntilGroupEnd === 'due' && style.dueTime,
-          ])}
-        >
-          {expectedTimeUntilGroupEnd}
-        </span>
+        <span className={cx([style.time, groupExpectedEnd === null && style.muted])}>{expectedTimeUntilGroupEnd}</span>
      </div>
    </div>
  );
 }

 function FlagTimes() {
-  const { clock, mode, actualStart, plannedStart, playback, currentDay } = useFlagTimerOverView();
+  const { clock } = useClock();
  const { id, expectedStart } = useNextFlag();
  const entry = useEntry(id) as OntimeEvent | null;

-  const active = isPlaybackActive(playback);
-
-  const plannedFlagStart = (() => {
-    if (!active) return null;
-    if (!entry) return null;
-    const normalizedTimeStart = entry.timeStart + entry.dayOffset * dayInMs;
-    const normalizedClock = clock + currentDay * dayInMs;
-    return mode === OffsetMode.Absolute
-      ? normalizedTimeStart - normalizedClock
-      : normalizedTimeStart + actualStart - plannedStart - normalizedClock;
-  })();
-
-  const plannedTimeUntilDisplay = formatDueTime(plannedFlagStart, 3, TimerType.CountDown);
+  const plannedFlagStart = entry ? entry.timeStart - clock : null;
+  const plannedTimeUntilDisplay = formattedTime(plannedFlagStart, 3, TimerType.CountDown);

  const expectedTimeUntil = expectedStart !== null ? expectedStart - clock : null;
-  const expectedTimeUntilDisplay = formatDueTime(expectedTimeUntil, 3, TimerType.CountDown);
+  const expectedTimeUntilDisplay = formattedTime(expectedTimeUntil, 3, TimerType.CountDown);

  const title = entry?.title ?? null;

  return (
    <div className={style.metadataRow}>
-      <span className={title ? style.labelTitle : style.label}>{`${title || 'Flag'} `}</span>
+      <span className={title ? style.labelTitle : style.label}>{`${title ? title : 'Flag'} `}</span>
      <div className={style.labelledElement}>
        <Tooltip text='Time to next flag planned start' render={<TbFlagPin className={style.icon} />} />
-        <span
-          data-testid='flag-plannedStart'
-          className={cx([
-            style.time,
-            (!entry || !active) && style.muted,
-            plannedTimeUntilDisplay === 'due' && style.dueTime,
-          ])}
-        >
+        <span data-testid='flag-plannedStart' className={cx([style.time, !entry && style.muted])}>
          {plannedTimeUntilDisplay}
        </span>
      </div>
      <div className={style.labelledElement}>
        <Tooltip text='Time to next flag expected start' render={<TbFlagStar className={style.icon} />} />
-        <span
-          data-testid='flag-expectedStart'
-          className={cx([
-            style.time,
-            expectedTimeUntil === null && style.muted,
-            expectedTimeUntilDisplay === 'due' && style.dueTime,
-          ])}
-        >
+        <span data-testid='flag-expectedStart' className={cx([style.time, expectedTimeUntil === null && style.muted])}>
          {expectedTimeUntilDisplay}
        </span>
      </div>
@@ -211,7 +159,7 @@ function FlagTimes() {
 }

 export function ProgressOverview() {
-  const { numEvents, selectedEventIndex } = useProgressOverview();
+  const { numEvents, selectedEventIndex } = useRuntimePlaybackOverview();

  const current = selectedEventIndex !== null ? selectedEventIndex + 1 : enDash;
  const progressText = numEvents ? `${current} of ${numEvents || enDash}` : enDash;
@@ -220,7 +168,7 @@ export function ProgressOverview() {
 }

 export function OffsetOverview() {
-  const { offset, playback } = useOffsetOverview();
+  const { offset, playback } = useRuntimePlaybackOverview();

  const isPlaying = isPlaybackActive(playback);
  const offsetState = getOffsetState(isPlaying ? offset : null);
@@ -3,23 +3,6 @@ import { dayInMs, millisToString } from 'ontime-utils';

 import { timerPlaceholder, timerPlaceholderMin } from '../../common/utils/styleUtils';

-/**
- * Composition to stop negative timers from being formatted
- * They should show a due string instead
- *
- * This is used for cases when a negative timer is unwanted
- * eg: count down to a milestone
- */
-export function formatDueTime(
-  time: MaybeNumber,
-  segments: number = 3,
-  direction?: TimerType.CountDown | TimerType.CountUp,
-  dueString = 'due',
-): string {
-  if (time !== null && time <= 0) return dueString;
-  return formattedTime(time, segments, direction);
-}
-
 /**
 * Encapsulates the logic for formatting time in overview
 */
@@ -37,6 +37,7 @@ export default function RundownDelay({ data, hasCursor }: RundownDelayProps) {

  const dragStyle = {
    zIndex: isDragging ? 2 : 'inherit',
+    cursor: isDragging ? 'grabbing' : 'grab',
    transform: CSS.Translate.toString(transform),
    transition,
  };
@@ -205,6 +205,7 @@ export default function RundownEvent({

  const dragStyle = {
    zIndex: isDragging ? 2 : 'inherit',
+    cursor: isDragging ? 'grabbing' : 'grab',
    transform: CSS.Translate.toString(transform),
    transition,
  };
@@ -73,7 +73,9 @@ interface EventUntilProps {
  isLinkedToLoaded: boolean;
 }

-function EventUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }: EventUntilProps) {
+function EventUntil(props: EventUntilProps) {
+  const { timeStart, delay, dayOffset, totalGap, isLinkedToLoaded } = props;
+
  const timeUntil = useTimeUntilExpectedStart({ timeStart, delay, dayOffset }, { totalGap, isLinkedToLoaded });
  const isDue = timeUntil < MILLIS_PER_SECOND;

@@ -114,7 +114,7 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
    zIndex: isDragging ? 2 : 'inherit',
    transform: CSS.Translate.toString(transform),
    transition,
-    cursor: isOver ? (isValidDrop ? 'grabbing' : 'no-drop') : 'inherit',
+    cursor: isOver ? (isValidDrop ? 'grabbing' : 'no-drop') : 'grab',
  };

  return (
@@ -70,6 +70,7 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl

  const dragStyle = {
    zIndex: isDragging ? 2 : 'inherit',
+    cursor: isDragging ? 'grabbing' : 'grab',
    transform: CSS.Translate.toString(transform),
    transition,
  };
@@ -225,7 +225,6 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
              <Switch
                size='large'
                name='lockNav'
-                data-testid='lockNav'
                checked={watch('lockNav')}
                onCheckedChange={(checked) => setValue('lockNav', checked, { shouldDirty: true })}
                disabled={watch('lockConfig')}
@@ -240,7 +239,6 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
                <Switch
                  size='large'
                  name='lockConfig'
-                  data-testid='lockConfig'
                  checked={watch('lockConfig')}
                  onCheckedChange={(checked) => {
                    if (checked) {
@@ -256,7 +254,6 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
              <Switch
                size='large'
                name='authenticate'
-                data-testid='authenticate'
                checked={watch('authenticate')}
                onCheckedChange={(checked) => setValue('authenticate', checked, { shouldDirty: true })}
              />
@@ -63,6 +63,7 @@ body,
 html {
  font-size: 15px;
  font-family: $ontime-font-family;
+  background-color: var(--background-color-override, $ui-black);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
 }
@@ -17,6 +17,7 @@ $header-font-size: clamp(24px, 2.5vw, 48px);

 // General styling
 $accent-color: $red-500; // --accent-color-override
+$delay-color: $ontime-delay-text;
 $viewer-label-color: rgba(white, 25%);

 // Main Properties of a viewer
@@ -42,4 +43,4 @@ $timer-bold-font-family: 'Arial Black', sans-serif; // --font-family-bold-overri
 $external-color: rgba(white, 85%); // --external-color-override

 // properties related to the studio clock
-$studio-breakpoint: 1300px;
+$studio-breakpoint: 1200px;
@@ -10,14 +10,13 @@ import {
  makeProjectDataOptions,
 } from '../../common/components/view-params-editor/viewParams.utils';
 import { PresetContext } from '../../common/context/PresetContext';
-import { getScheduleOptions } from '../common/schedule/schedule.options';
+import { scheduleOptions } from '../common/schedule/schedule.options';

 export const getBackstageOptions = (
  timeFormat: string,
  customFields: CustomFields,
  projectData: ProjectData,
 ): ViewOption[] => {
-  const customFieldOptions = makeOptionsFromCustomFields(customFields, []);
  const secondaryOptions = makeOptionsFromCustomFields(customFields, [
    { value: 'none', label: 'None' },
    { value: 'note', label: 'Note' },
@@ -40,7 +39,7 @@ export const getBackstageOptions = (
        },
      ],
    },
-    getScheduleOptions(customFieldOptions),
+    scheduleOptions,
    {
      title: OptionTitle.ElementVisibility,
      collapsible: true,
@@ -1,5 +1,6 @@
 import { cx } from '../../../common/utils/styleUtils';

+import { getScheduledTimes } from './schedule.utils';
 import { useSchedule } from './ScheduleContext';
 import ScheduleItem from './ScheduleItem';

@@ -19,21 +20,17 @@ export default function Schedule({ className }: ScheduleProps) {
  return (
    <ul className={cx(['schedule', className])} ref={containerRef}>
      {events.map((event) => {
+        const { timeStart, timeEnd, delay } = getScheduledTimes(event);
+
        return (
          <ScheduleItem
            key={event.id}
-            timeStart={event.timeStart}
-            dayOffset={event.dayOffset}
-            delay={event.delay}
-            totalGap={event.totalGap}
-            isLinkedToLoaded={event.isLinkedToLoaded}
-            countToEnd={event.countToEnd}
-            duration={event.duration}
+            timeStart={timeStart}
+            timeEnd={timeEnd}
+            title={event.title}
            colour={event.colour}
            skip={event.skip}
-            title={event.title}
-            timeEnd={event.timeEnd}
-            cue={event.cue}
+            delay={delay}
          />
        );
      })}
@@ -1,13 +1,21 @@
-import { createContext, PropsWithChildren, RefObject, use, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { EntryId, isOntimeEvent, OntimeEntry, OntimeEvent } from 'ontime-types';
+import {
+  createContext,
+  PropsWithChildren,
+  RefObject,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { isOntimeEvent, OntimeEntry, OntimeEvent } from 'ontime-types';

 import { usePartialRundown } from '../../../common/hooks-query/useRundown';
-import { ExtendedEntry } from '../../../common/utils/rundownMetadata';

 import { useScheduleOptions } from './schedule.options';

 interface ScheduleContextState {
-  events: ExtendedEntry<OntimeEvent>[];
+  events: OntimeEvent[];
  selectedEventId: string | null;
  numPages: number;
  visiblePage: number;
@@ -17,18 +25,13 @@ interface ScheduleContextState {
 const ScheduleContext = createContext<ScheduleContextState | undefined>(undefined);

 interface ScheduleProviderProps {
-  selectedEventId: EntryId | null;
+  selectedEventId: string | null;
 }

 export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildren<ScheduleProviderProps>) => {
-  const { cycleInterval, stopCycle, filter } = useScheduleOptions();
-  const { data: events } = usePartialRundown((entry: ExtendedEntry<OntimeEntry>) => {
-    if (filter) {
-      // custom keys are prepended with custom-
-      const customKey = filter.startsWith('custom-') ? filter.slice('custom-'.length) : filter;
-      return isOntimeEvent(entry) && Boolean(entry.custom[customKey]);
-    }
-    return isOntimeEvent(entry);
+  const { cycleInterval, stopCycle } = useScheduleOptions();
+  const { data: events } = usePartialRundown((event: OntimeEntry) => {
+    return isOntimeEvent(event);
  });

  const [firstIndex, setFirstIndex] = useState(-1);
@@ -132,9 +135,9 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
  selectedEventIndex = 0;

  return (
-    <ScheduleContext
+    <ScheduleContext.Provider
      value={{
-        events: viewEvents as ExtendedEntry<OntimeEvent>[],
+        events: viewEvents as OntimeEvent[],
        selectedEventId,
        numPages,
        visiblePage,
@@ -142,12 +145,12 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
      }}
    >
      {children}
-    </ScheduleContext>
+    </ScheduleContext.Provider>
  );
 };

 export const useSchedule = () => {
-  const context = use(ScheduleContext);
+  const context = useContext(ScheduleContext);
  if (!context) {
    throw new Error('useSchedule() can only be used inside a ScheduleContext');
  }
@@ -1,10 +1,7 @@
-import { OntimeEvent } from 'ontime-types';
-
-import { useExpectedStartData } from '../../../common/hooks/useSocket';
+import { useRuntimeOffset } from '../../../common/hooks/useSocket';
 import { getOffsetState } from '../../../common/utils/offset';
-import { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { cx } from '../../../common/utils/styleUtils';
-import { formatTime, getExpectedTimesFromExtendedEvent } from '../../../common/utils/time';
+import { formatTime } from '../../../common/utils/time';
 import SuperscriptTime from '../../../features/viewers/common/superscript-time/SuperscriptTime';

 import { useScheduleOptions } from './schedule.options';
@@ -16,150 +13,116 @@ const formatOptions = {
  format24: 'HH:mm',
 };

-type ScheduleItemProps = Pick<
-  ExtendedEntry<OntimeEvent>,
-  | 'timeStart'
-  | 'dayOffset'
-  | 'delay'
-  | 'totalGap'
-  | 'isLinkedToLoaded'
-  | 'countToEnd'
-  | 'duration'
-  | 'colour'
-  | 'skip'
-  | 'title'
-  | 'timeEnd'
-  | 'cue'
->;
+interface ScheduleItemProps {
+  timeStart: number;
+  timeEnd: number;
+  title: string;
+  colour?: string;
+  skip?: boolean;
+  delay: number;
+}

-export default function ScheduleItem({
-  timeStart,
-  dayOffset,
-  delay,
-  totalGap,
-  isLinkedToLoaded,
-  countToEnd,
-  colour,
-  duration,
-  skip,
-  title,
-  timeEnd,
-  cue,
-}: ScheduleItemProps) {
+export default function ScheduleItem(props: ScheduleItemProps) {
+  const { timeStart, timeEnd, title, colour, skip, delay } = props;
  const { showExpected } = useScheduleOptions();

+  if (showExpected) {
+    return (
+      <ExpectedScheduleItem
+        timeStart={timeStart}
+        timeEnd={timeEnd}
+        title={title}
+        colour={colour}
+        skip={skip}
+        delay={delay}
+      />
+    );
+  }
+
+  if (delay > 0) {
+    return (
+      <DelayedScheduleItem
+        timeStart={timeStart}
+        timeEnd={timeEnd}
+        title={title}
+        colour={colour}
+        skip={skip}
+        delay={delay}
+      />
+    );
+  }
+
+  const start = formatTime(timeStart, formatOptions);
+  const end = formatTime(timeEnd, formatOptions);
  return (
-    <li className={cx(['entry', skip && 'entry--skip'])} data-testid={cue}>
+    <li className={cx(['entry', skip && 'entry--skip'])}>
      <div className='entry-times'>
-        {showExpected ? (
-          <ExpectedScheduleItem
-            timeStart={timeStart}
-            dayOffset={dayOffset}
-            delay={delay}
-            totalGap={totalGap}
-            isLinkedToLoaded={isLinkedToLoaded}
-            countToEnd={countToEnd}
-            duration={duration}
-            colour={colour}
-          />
-        ) : delay > 0 ? (
-          <DelayedScheduleItem timeStart={timeStart} delay={delay} colour={colour} timeEnd={timeEnd} />
-        ) : (
-          <PlannedScheduleItem timeStart={timeStart} timeEnd={timeEnd} colour={colour} />
-        )}
+        <span className='entry-colour' style={{ backgroundColor: colour }} />
+        <SuperscriptTime time={start} />
+        →
+        <SuperscriptTime time={end} />
      </div>
      <div className='entry-title'>{title}</div>
    </li>
  );
 }

-function PlannedScheduleItem({
-  timeStart,
-  timeEnd,
-  colour,
-}: Pick<ScheduleItemProps, 'timeStart' | 'timeEnd' | 'colour'>) {
-  const start = formatTime(timeStart, formatOptions);
-  const end = formatTime(timeEnd, formatOptions);
+function DelayedScheduleItem(props: ScheduleItemProps) {
+  const { timeStart, timeEnd, title, colour, skip, delay } = props;

-  return (
-    <>
-      <span className='entry-colour' style={{ backgroundColor: colour }} />
-      <SuperscriptTime time={start} />
-      →
-      <SuperscriptTime time={end} />
-    </>
-  );
-}
-
-function DelayedScheduleItem({
-  timeStart,
-  timeEnd,
-  colour,
-  delay,
-}: Pick<ScheduleItemProps, 'timeStart' | 'timeEnd' | 'colour' | 'delay'>) {
  const start = formatTime(timeStart, formatOptions);
  const end = formatTime(timeEnd, formatOptions);
  const delayedStart = formatTime(timeStart + delay, formatOptions);
  const delayedEnd = formatTime(timeEnd + delay, formatOptions);

  return (
-    <>
-      <span className='entry-times--delayed'>
-        <span className='entry-colour' style={{ backgroundColor: colour }} />
-        <SuperscriptTime time={start} />
-        →
-        <SuperscriptTime time={end} />
-      </span>
-      <span className='entry-times--delay'>
-        <SuperscriptTime time={delayedStart} />
-        →
-        <SuperscriptTime time={delayedEnd} />
-      </span>
-    </>
+    <li className={cx(['entry', skip && 'entry--skip'])}>
+      <div className='entry-times'>
+        <span className='entry-times--delayed'>
+          <span className='entry-colour' style={{ backgroundColor: colour }} />
+          <SuperscriptTime time={start} />
+          →
+          <SuperscriptTime time={end} />
+        </span>
+        <span className='entry-times--delay'>
+          <SuperscriptTime time={delayedStart} />
+          →
+          <SuperscriptTime time={delayedEnd} />
+        </span>
+      </div>
+      <div className='entry-title'>{title}</div>
+    </li>
  );
 }

-function ExpectedScheduleItem({
-  timeStart,
-  dayOffset,
-  delay,
-  totalGap,
-  isLinkedToLoaded,
-  countToEnd,
-  colour,
-  duration,
-}: Omit<ScheduleItemProps, 'timeEnd' | 'cue' | 'skip' | 'title'>) {
-  const expectedStartData = useExpectedStartData();
-  const { expectedStart, expectedEnd, plannedEnd } = getExpectedTimesFromExtendedEvent(
-    {
-      timeStart,
-      dayOffset,
-      delay,
-      totalGap,
-      isLinkedToLoaded,
-      countToEnd,
-      duration,
-    },
-    expectedStartData,
-  );
+function ExpectedScheduleItem(props: ScheduleItemProps) {
+  const { timeStart, timeEnd, title, colour, skip, delay } = props;

  return (
-    <>
-      <span className='entry-colour' style={{ backgroundColor: colour }} />
-      <ExpectedTime expectedTime={expectedStart} plannedTime={timeStart} />
-      →
-      <ExpectedTime expectedTime={expectedEnd} plannedTime={plannedEnd} />
-    </>
+    <li className={cx(['entry', skip && 'entry--skip'])}>
+      <div className='entry-times'>
+        <span className='entry-colour' style={{ backgroundColor: colour }} />
+        <ExpectedTime time={timeStart} delay={delay} />
+        →
+        <ExpectedTime time={timeEnd} delay={delay} />
+      </div>
+      <div className='entry-title'>{title}</div>
+    </li>
  );
 }

 interface ExpectedTimeProps {
-  expectedTime: number;
-  plannedTime: number;
+  time: number;
+  delay: number;
 }

-function ExpectedTime({ expectedTime, plannedTime }: ExpectedTimeProps) {
-  const timeDisplay = formatTime(expectedTime);
-  const expectedState = getOffsetState(expectedTime - plannedTime);
-  return <SuperscriptTime className={`entry-times--${expectedState}`} time={timeDisplay} />;
+function ExpectedTime(props: ExpectedTimeProps) {
+  const { time, delay } = props;
+  const { offset } = useRuntimeOffset();
+
+  const expectedOffset = offset - delay;
+  const expectedTime = formatTime(time - offset, formatOptions);
+  const expectedState = getOffsetState(expectedOffset);
+
+  return <SuperscriptTime className={`entry-times--${expectedState}`} time={expectedTime} />;
 }
@@ -1,23 +1,14 @@
 import { useMemo } from 'react';
 import { useSearchParams } from 'react-router';

-import { SelectOption } from '../../../common/components/select/Select';
 import { OptionTitle } from '../../../common/components/view-params-editor/constants';
-import type { ViewOption } from '../../../common/components/view-params-editor/viewParams.types';
+import { ViewOption } from '../../../common/components/view-params-editor/viewParams.types';
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';

-export const getScheduleOptions = (customFieldOptions: SelectOption[]): ViewOption => ({
+export const scheduleOptions: ViewOption = {
  title: OptionTitle.Schedule,
  collapsible: true,
  options: [
-    {
-      id: 'filter',
-      title: 'Filter',
-      description: 'Hide events without data in the selected custom field',
-      type: 'option',
-      values: customFieldOptions,
-      defaultValue: 'None',
-    },
    {
      id: 'stopCycle',
      title: 'Stop cycling through event pages',
@@ -40,10 +31,9 @@ export const getScheduleOptions = (customFieldOptions: SelectOption[]): ViewOpti
      defaultValue: false,
    },
  ],
-});
+};

 type ScheduleOptions = {
-  filter: string | null;
  cycleInterval: number;
  stopCycle: boolean;
  showExpected: boolean;
@@ -51,7 +41,6 @@ type ScheduleOptions = {

 function getScheduleOptionsFromParams(searchParams: URLSearchParams): ScheduleOptions {
  return {
-    filter: searchParams.get('filter'),
    cycleInterval: Number(searchParams.get('cycleInterval')) || 10,
    stopCycle: isStringBoolean(searchParams.get('stopCycle')),
    showExpected: isStringBoolean(searchParams.get('showExpected')),
@@ -0,0 +1,12 @@
+import { OntimeEvent } from 'ontime-types';
+
+/**
+ * Gather rules for how to present scheduled times
+ */
+export function getScheduledTimes(event: OntimeEvent) {
+  return {
+    timeStart: event.timeStart,
+    timeEnd: event.timeEnd,
+    delay: event.skip ? 0 : event.delay,
+  };
+}
@@ -141,7 +141,7 @@ $item-height: 3.5rem;
  }

  .sub__schedule--delayed {
-    color: $ontime-delay-text;
+    color: $delay-color;
  }

  .sub__schedule--strike {
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { IoAdd } from 'react-icons/io5';
-import { EntryId, isOntimeEvent, isPlayableEvent, OntimeEvent, OntimeView } from 'ontime-types';
+import { isOntimeEvent, isPlayableEvent, OntimeEvent, OntimeView } from 'ontime-types';

 import Button from '../../common/components/buttons/Button';
 import Empty from '../../common/components/state/Empty';
@@ -16,7 +16,7 @@ import { useTranslation } from '../../translation/TranslationProvider';
 import Loader from '../common/loader/Loader';

 import { getCountdownOptions, useCountdownOptions } from './countdown.options';
-import { getOrderedSubscriptions } from './countdown.utils';
+import { CountdownSubscription, getOrderedSubscriptions } from './countdown.utils';
 import CountdownSelect from './CountdownSelect';
 import CountdownSubscriptions from './CountdownSubscriptions';
 import SingleEventCountdown from './SingleEventCountdown';
@@ -59,6 +59,8 @@ function Countdown({ customFields, rundownData, projectData, isMirrored, setting
    [defaultFormat, customFields, subscriptions],
  );

+  console.log(subscriptions)
+
  return (
    <div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
      <ViewParamsEditor target={OntimeView.Countdown} viewOptions={countdownOptions} />
@@ -87,7 +89,7 @@ function Countdown({ customFields, rundownData, projectData, isMirrored, setting

 interface CountdownContentsProps {
  playableEvents: ExtendedEntry<OntimeEvent>[];
-  subscriptions: EntryId[];
+  subscriptions: CountdownSubscription;
  goToEditMode: () => void;
 }

@@ -1,24 +1,25 @@
 import { useState } from 'react';
-import { IoArrowBack, IoClose, IoSaveOutline } from 'react-icons/io5';
+import { IoArrowBack, IoClose, IoSaveOutline, IoAlbumsOutline } from 'react-icons/io5';
 import { useNavigate } from 'react-router';
-import { EntryId, PlayableEvent } from 'ontime-types';
+import { EntryId, OntimeEvent } from 'ontime-types';

 import Button from '../../common/components/buttons/Button';
 import { cx } from '../../common/utils/styleUtils';
 import ClockTime from '../../features/viewers/common/clock-time/ClockTime';

-import { makeSubscriptionsUrl } from './countdown.utils';
+import { CountdownSubscription, makeSubscriptionsUrl } from './countdown.utils';

 import './Countdown.scss';

 interface CountdownSelectProps {
-  events: PlayableEvent[];
-  subscriptions: EntryId[];
+  events: OntimeEvent[];
+  subscriptions: CountdownSubscription;
  disableEdit: () => void;
 }

 export default function CountdownSelect({ events, subscriptions, disableEdit }: CountdownSelectProps) {
-  const [selected, setSelected] = useState<EntryId[]>(subscriptions);
+  const maybeAllSubscriptions: EntryId[] = subscriptions === 'all' ? events.map((event) => event.id) : subscriptions;
+  const [selected, setSelected] = useState<EntryId[]>(maybeAllSubscriptions);
  const navigate = useNavigate();

  /**
@@ -47,12 +48,24 @@ export default function CountdownSelect({ events, subscriptions, disableEdit }:
    navigate(url.search.toString());
  };

+  /**
+   * Creates a URL with all
+   * and navigates to it
+   */
+  const applyAll = () => {
+    // we remove events that no longer exist to avoid stale subscriptions
+    const url = makeSubscriptionsUrl(window.location.href, 'all');
+    disableEdit();
+    setSelected([]);
+    navigate(url.search.toString());
+  };
+
  // make a copy of the selected array for quick lookup
  const selectedIds = new Set(selected);

  return (
    <div className='list-container'>
-      {events.map((event, index) => {
+      {events.map((event: OntimeEvent, index: number) => {
        const title = event.title || '{no title}';
        const isSelected = selectedIds.has(event.id);

@@ -86,6 +99,10 @@ export default function CountdownSelect({ events, subscriptions, disableEdit }:
        <Button variant='subtle' size='xlarge' onClick={disableEdit}>
          <IoArrowBack /> Go back
        </Button>
+        <Button variant='subtle' size='xlarge' onClick={applyAll}>
+          {/* TODO: icon ??? */}
+          <IoAlbumsOutline /> Use All
+        </Button>
        <Button variant='subtle' size='xlarge' onClick={() => setSelected([])} disabled={selected.length === 0}>
          <IoClose /> Clear
        </Button>
@@ -109,7 +109,6 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
            key={event.id}
            ref={isLive ? selectedRef : undefined}
            className={cx(['sub', isLive && 'sub--live', isArmed && 'sub--armed'])}
-            data-testid={event.cue}
          >
            <div className='sub__binder' style={{ '--user-color': event.colour }} />
            <ScheduleTime event={countdownEvent} showExpected={showExpected} />
@@ -8,11 +8,12 @@ import { ViewOption } from '../../common/components/view-params-editor/viewParam
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
 import { PresetContext } from '../../common/context/PresetContext';
 import { isStringBoolean } from '../../features/viewers/common/viewUtils';
+import { CountdownSubscription } from './countdown.utils';

 export const getCountdownOptions = (
  timeFormat: string,
  customFields: CustomFields,
-  persistedSubscriptions: EntryId[],
+  persistedSubscriptions: CountdownSubscription,
 ): ViewOption[] => {
  const secondaryOptions = makeOptionsFromCustomFields(customFields, [
    { value: 'none', label: 'None' },
@@ -55,7 +56,7 @@ export const getCountdownOptions = (
          id: 'sub',
          title: 'Event subscription',
          description: 'The events to follow',
-          values: persistedSubscriptions,
+          values: persistedSubscriptions === 'all' ? ['all'] : persistedSubscriptions,
          type: 'persist',
        },
      ],
@@ -64,7 +65,7 @@ export const getCountdownOptions = (
 };

 type CountdownOptions = {
-  subscriptions: EntryId[];
+  subscriptions: CountdownSubscription;
  secondarySource: keyof OntimeEvent | null;
  showExpected: boolean;
 };
@@ -85,8 +86,10 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
    return searchParams.getAll(key) as EntryId[];
  };

+  const subscriptions = getArrayValues('sub');
+
  return {
-    subscriptions: getArrayValues('sub'),
+    subscriptions: subscriptions.at(0) === 'all' ? 'all' : subscriptions,
    secondarySource: getValue('secondary-src') as keyof OntimeEvent | null,
    showExpected: isStringBoolean(getValue('showExpected')),
  };
@@ -14,6 +14,8 @@ export function sanitiseTitle(title: string | null) {
  return title ?? '{no title}';
 }

+export type CountdownSubscription = EntryId[] | 'all';
+
 export const preferredFormat12 = 'h:mm a';
 export const preferredFormat24 = 'HH:mm';

@@ -120,7 +122,7 @@ export function useSubscriptionDisplayData(
 /**
 * Adds a set of subscriptions to the URL parameters
 */
-export function makeSubscriptionsUrl(urlRef: string, subscriptions: EntryId[]) {
+export function makeSubscriptionsUrl(urlRef: string, subscriptions: CountdownSubscription) {
  const url = new URL(urlRef);
  const newParams = new URLSearchParams();

@@ -131,10 +133,14 @@ export function makeSubscriptionsUrl(urlRef: string, subscriptions: EntryId[]) {
    }
  }

-  // add new subscriptions
-  subscriptions.forEach((id) => {
-    newParams.append('sub', id);
-  });
+  if (subscriptions === 'all') {
+    newParams.append('sub', 'all');
+  } else {
+    // add new subscriptions
+    subscriptions.forEach((id) => {
+      newParams.append('sub', id);
+    });
+  }

  url.search = newParams.toString();

@@ -146,38 +152,14 @@ export function makeSubscriptionsUrl(urlRef: string, subscriptions: EntryId[]) {
 * Since the original array is already ordered, we simply filter out the events
 * which are not in the subscriptions list.
 */
-export function getOrderedSubscriptions<T extends OntimeEntry>(subscriptions: EntryId[], playableEvents: T[]): T[] {
+export function getOrderedSubscriptions<T extends OntimeEntry>(
+  subscriptions: CountdownSubscription,
+  playableEvents: T[],
+): T[] {
+  if (subscriptions === 'all') return playableEvents;
  return playableEvents.filter((event) => subscriptions.includes(event.id));
 }

-/**
- * Checks through the rundown whether the current event is linked to the loaded event
- */
-export function isLinkedToLoadedEvent(events: OntimeEvent[], loadedId: EntryId | null, currentId: EntryId): boolean {
-  // if nothing is loaded, we return true to simplify the logic
-  if (!loadedId) {
-    return true;
-  }
-
-  const loadedIndex = events.findIndex((event) => event.id === loadedId);
-  if (loadedIndex === -1) {
-    return true;
-  }
-
-  for (let i = loadedIndex; i < events.length; i++) {
-    const event = events[i];
-    if (event.id === currentId) {
-      return true;
-    }
-
-    if (event.linkStart === null) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
 export function isOutsideRange(a: number, b: number): boolean {
  return Math.abs(a - b) > MILLIS_PER_MINUTE;
 }
@@ -1,4 +1,6 @@
-import { parseField } from '../cuesheet.utils';
+import { ProjectData } from 'ontime-types';
+
+import { makeTable, parseField } from '../cuesheet.utils';

 describe('parseField()', () => {
  it('returns a string from given millis on timeStart, TimeEnd and duration', () => {
@@ -30,3 +32,69 @@ describe('parseField()', () => {
    });
  });
 });
+
+describe('makeTable()', () => {
+  it('returns array of arrays with given fields', () => {
+    const headerData = {
+      title: 'test title',
+      description: 'test description',
+      logo: 'test logo',
+    };
+    const tableData = [
+      {
+        title: 'test title 1',
+        timeStart: 0,
+        timeEnd: 0,
+        skip: true,
+        lighting: { value: 'test lighting' },
+        sound: { value: 'test sound' },
+      },
+    ];
+    const customFields = {
+      lighting: { label: 'test' },
+    };
+
+    // @ts-expect-error -- testing user data with missing fields
+    const table = makeTable(headerData as ProjectData, tableData, customFields);
+    expect(table).not.toContain('test logo');
+    expect(table).toMatchInlineSnapshot(`
+      [
+        [
+          "Ontime · Rundown export",
+        ],
+        [
+          "Project title: test title",
+        ],
+        [
+          "Project description: test description",
+        ],
+        [
+          "Time Start",
+          "Time End",
+          "Duration",
+          "ID",
+          "Colour",
+          "Cue",
+          "Title",
+          "Note",
+          "Skip?",
+          "lighting",
+          "Type",
+        ],
+        [
+          "00:00:00",
+          "00:00:00",
+          "",
+          "",
+          "",
+          "",
+          "test title 1",
+          "",
+          "x",
+          "",
+          "",
+        ],
+      ]
+    `);
+  });
+});
@@ -24,6 +24,7 @@ export function SortableCell({ columnId, colSpan, injectedStyles, children, drag
  const dragStyle = {
    ...injectedStyles,
    zIndex: isDragging ? 2 : 'inherit',
+    cursor: isDragging ? 'grabbing' : 'grab',
    transform: CSS.Translate.toString(transform),
    transition,
  };
@@ -0,0 +1,51 @@
+import { useVisibleRowsStore } from './visibleRowsStore';
+
+let observer: IntersectionObserver | null = null;
+
+function getObserver(): IntersectionObserver {
+  if (!observer) {
+    const options: IntersectionObserverInit = {
+      root: null,
+      rootMargin: '400px 0px', // prevent unmounting rows too early
+      threshold: 0.25,
+    };
+
+    const handleOnIntersect: IntersectionObserverCallback = (entries) => {
+      const visibleRows = useVisibleRowsStore.getState();
+      entries.forEach((entry) => {
+        const targetId = entry.target.id;
+        if (entry.isIntersecting) {
+          visibleRows.addVisibleRow(targetId);
+        } else {
+          visibleRows.removeVisibleRow(targetId);
+        }
+      });
+    };
+
+    observer = new IntersectionObserver(handleOnIntersect, options);
+  }
+
+  return observer;
+}
+
+/**
+ * register a row element in the observer
+ */
+export function observeRow(element: HTMLElement) {
+  getObserver().observe(element);
+}
+
+/**
+ * unregister a row element in the observer
+ */
+export function unobserveRow(element: HTMLElement) {
+  getObserver().unobserve(element);
+}
+
+/**
+ * cleanup observer, should be called when the table component unmounts
+ */
+export function cleanup() {
+  observer?.disconnect();
+  observer = null;
+}
@@ -0,0 +1,18 @@
+import { create } from 'zustand';
+
+interface VisibleRowsStore {
+  visibleRows: Set<string>;
+  addVisibleRow: (id: string) => void;
+  removeVisibleRow: (id: string) => void;
+}
+
+export const useVisibleRowsStore = create<VisibleRowsStore>((set) => ({
+  visibleRows: new Set(),
+  addVisibleRow: (id) => set((state) => ({ visibleRows: new Set(state.visibleRows).add(id) })),
+  removeVisibleRow: (id) =>
+    set((state) => {
+      const newSet = new Set(state.visibleRows);
+      newSet.delete(id);
+      return { visibleRows: newSet };
+    }),
+}));
@@ -1,4 +1,12 @@
-import { CustomFields, MaybeNumber, OntimeEntryCommonKeys } from 'ontime-types';
+import {
+  CustomFields,
+  isOntimeDelay,
+  isOntimeEvent,
+  MaybeNumber,
+  OntimeEntry,
+  OntimeEntryCommonKeys,
+  ProjectData,
+} from 'ontime-types';
 import { millisToString } from 'ontime-utils';

 type CsvHeaderKey = OntimeEntryCommonKeys | keyof CustomFields;
@@ -21,3 +29,72 @@ export const parseField = (field: CsvHeaderKey, data: unknown): string => {

  return String(data ?? '');
 };
+
+/**
+ * @description Creates an array of arrays usable by xlsx for export
+ */
+export const makeTable = (headerData: ProjectData, rundown: OntimeEntry[], customFields: CustomFields): string[][] => {
+  // create metadata header row
+  const data = [['Ontime · Rundown export']];
+  if (headerData.title) data.push([`Project title: ${headerData.title}`]);
+  if (headerData.description) data.push([`Project description: ${headerData.description}`]);
+
+  const customFieldKeys = Object.keys(customFields).map((key) => `custom-${key}`);
+  const customFieldLabels = Object.keys(customFields);
+
+  // we chose not to expose internals of the application
+  const fieldOrder: CsvHeaderKey[] = [
+    'timeStart',
+    'timeEnd',
+    'duration',
+    'id',
+    'colour',
+    'cue',
+    'title',
+    'note',
+    'skip',
+    ...customFieldKeys,
+    'type',
+  ];
+
+  const fieldTitles = [
+    'Time Start',
+    'Time End',
+    'Duration',
+    'ID',
+    'Colour',
+    'Cue',
+    'Title',
+    'Note',
+    'Skip?',
+    ...customFieldLabels,
+    'Type',
+  ];
+
+  // add header row to data
+  data.push(fieldTitles);
+  rundown.forEach((entry) => {
+    if (isOntimeDelay(entry)) return;
+
+    const row: string[] = [];
+    fieldOrder.forEach((field) => {
+      if (isOntimeEvent(entry)) {
+        // for custom fields, we need to extract the value from the custom object
+        if (field.startsWith('custom-')) {
+          const fieldLabel = field.split('custom-')[1];
+          const value = entry.custom[fieldLabel];
+          row.push(parseField(fieldLabel, value));
+        } else {
+          // @ts-expect-error -- it is ok, we will just not have the data for other fields
+          row.push(parseField(field, entry[field]));
+        }
+        return;
+      }
+      // @ts-expect-error -- it is ok, we will just not have the data for other fields
+      row.push(parseField(field, entry[field]));
+    });
+    data.push(row);
+  });
+
+  return data;
+};
@@ -1,6 +1,6 @@
 import { Playback } from 'ontime-types';

-import { useIsSmallScreen } from '../../common/hooks/useIsSmallScreen';
+import { useIsMobileDevice } from '../../common/hooks/useIsMobileDevice';
 import { useStudioClockSocket } from '../../common/hooks/useSocket';
 import { cx } from '../../common/utils/styleUtils';
 import { formatTime } from '../../common/utils/time';
@@ -18,12 +18,12 @@ interface StudioClockProps {
 }

 export default function StudioClock({ hideCards }: StudioClockProps) {
-  const isSmallScreen = useIsSmallScreen();
+  const isMobile = useIsMobileDevice();
  const { clock, playback } = useStudioClockSocket();
  const onAir = playback !== Playback.Stop;

  // if we are on mobile and have to show the cards
-  if (isSmallScreen && !hideCards) {
+  if (isMobile && !hideCards) {
    return <StudioClockMobile clock={clock} onAir={onAir} />;
  }

@@ -4,7 +4,7 @@
  display: flex;
  flex-direction: column;
  gap: $view-element-gap;
-  margin-block: auto;
+  margin-top: 5%;
  font-size: $base-font-size;

  .card {
@@ -17,17 +17,17 @@ interface StudioTimersProps {

 export default function StudioTimers({ viewSettings }: StudioTimersProps) {
  const { getLocalizedString } = useTranslation();
-  const { eventNow, eventNext, message, time, offset, rundown, expectedRundownEnd } = useStudioTimersSocket();
+  const { eventNow, eventNext, message, time, offset, rundown } = useStudioTimersSocket();

  const schedule = getFormattedScheduleTimes({
-    offset: offset,
+    offset: offset.absolute,
    actualStart: rundown.actualStart,
-    expectedEnd: expectedRundownEnd,
+    expectedEnd: offset.expectedRundownEnd,
  });
  const event = getFormattedEventData(eventNow, time);
  const eventNextTitle = eventNext?.title || '-';
  const formattedTimerMessage = (message.timer.visible && message.timer.text) || '-';
-  const formattedSecondaryMessage = message.timer.secondarySource === 'secondary' ? message.secondary || '-' : '-';
+  const formattedSecondaryMessage = message.secondary || '-';

  // gather presentation styles
  const timerColour = getTimerColour(
@@ -37,7 +37,7 @@ export default function StudioTimers({ viewSettings }: StudioTimersProps) {
    time.phase === TimerPhase.Danger,
  );

-  const offsetState = getOffsetState(offset);
+  const offsetState = getOffsetState(offset.absolute);

  return (
    <div className='studio__timers'>
@@ -105,7 +105,7 @@ $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-over
 }

 .delay {
-  color: $ontime-delay-text;
+  color: $delay-color;
 }

 .timeOverview {
@@ -117,7 +117,7 @@ $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-over
 .cross {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
-  text-decoration-color: $ontime-delay-text;
+  text-decoration-color: $delay-color;
 }

 .separeLeft {
@@ -4,7 +4,6 @@ import { isOntimeEvent, isPlayableEvent, OntimeEntry, PlayableEvent } from 'onti
 import { dayInMs, getLastEvent, MILLIS_PER_HOUR } from 'ontime-utils';

 import useHorizontalFollowComponent from '../../common/hooks/useHorizontalFollowComponent';
-import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { cx } from '../../common/utils/styleUtils';

 import TimelineMarkers from './timeline-markers/TimelineMarkers';
@@ -16,7 +15,7 @@ import style from './Timeline.module.scss';

 interface TimelineProps {
  firstStart: number;
-  rundown: ExtendedEntry<OntimeEntry>[];
+  rundown: OntimeEntry[];
  selectedEventId: string | null;
  totalDuration: number;
 }
@@ -46,7 +45,7 @@ function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: Timel

  const { positions, totalWidth } = useMemo(() => {
    const playableEvents = rundown
-      .filter((event): event is ExtendedEntry<PlayableEvent> => isOntimeEvent(event) && isPlayableEvent(event))
+      .filter((event): event is PlayableEvent => isOntimeEvent(event) && isPlayableEvent(event))
      .map((event) => ({
        start: event.timeStart + (event.dayOffset ?? 0) * dayInMs + (event.delay ?? 0),
        duration: event.duration,
@@ -97,11 +96,7 @@ function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: Timel
              left={position.left}
              status={statusMap[event.id]}
              start={event.timeStart + (event.dayOffset ?? 0) * dayInMs}
-              totalGap={event.totalGap}
-              isLinkedToLoaded={event.isLinkedToLoaded}
-              dayOffset={event.dayOffset}
              title={event.title}
-              cue={event.cue}
              width={position.width}
            />
          );
@@ -1,12 +1,12 @@
 import { RefObject } from 'react';

-import { useExpectedStartData, useTimer } from '../../common/hooks/useSocket';
+import { useTimelineStatus, useTimer } from '../../common/hooks/useSocket';
 import { getProgress } from '../../common/utils/getProgress';
 import { alpha, cx } from '../../common/utils/styleUtils';
-import { formatDuration, formatTime, getExpectedTimesFromExtendedEvent } from '../../common/utils/time';
+import { formatDuration, formatTime } from '../../common/utils/time';
 import { useTranslation } from '../../translation/TranslationProvider';

-import { getStatusLabel } from './timeline.utils';
+import { getStatusLabel, getTimeToStart } from './timeline.utils';

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

@@ -20,12 +20,8 @@ interface TimelineEntryProps {
  left: number;
  status: ProgressStatus;
  start: number;
-  dayOffset: number;
-  totalGap: number;
-  isLinkedToLoaded: boolean;
  title: string;
  width: number;
-  cue: string;
  ref?: RefObject<HTMLDivElement | null>;
 }

@@ -42,12 +38,8 @@ export function TimelineEntry({
  left,
  status,
  start,
-  dayOffset,
-  totalGap,
-  isLinkedToLoaded,
  title,
  width,
-  cue,
  ref,
 }: TimelineEntryProps) {
  const formattedStartTime = formatTime(start, formatOptions);
@@ -69,7 +61,6 @@ export function TimelineEntry({
        left: `${left}px`,
        width: `${width}px`,
      }}
-      data-testid={cue}
    >
      {status === 'live' ? <ActiveBlock /> : <div data-status={status} className={style.timelineBlock} />}
      <div
@@ -82,29 +73,11 @@ export function TimelineEntry({
        <div className={style.maybeInline}>
          <div className={cx([hasDelay && style.cross])}>{formattedStartTime}</div>
          {hasDelay && <div className={style.delay}>{formatTime(delayedStart, formatOptions)}</div>}
-          {smallArea && (
-            <TimelineEntryStatus
-              delay={delay}
-              start={start}
-              dayOffset={dayOffset}
-              totalGap={totalGap}
-              isLinkedToLoaded={isLinkedToLoaded}
-              status={status}
-            />
-          )}
+          {smallArea && <TimelineEntryStatus delay={delay} start={start} status={status} />}
        </div>
        {showTitle && (
          <>
-            {!smallArea && (
-              <TimelineEntryStatus
-                delay={delay}
-                start={start}
-                dayOffset={dayOffset}
-                totalGap={totalGap}
-                isLinkedToLoaded={isLinkedToLoaded}
-                status={status}
-              />
-            )}
+            {!smallArea && <TimelineEntryStatus delay={delay} start={start} status={status} />}
            <div>{title}</div>
          </>
        )}
@@ -119,31 +92,16 @@ export function TimelineEntry({
 interface TimelineEntryStatusProps {
  delay: number;
  start: number;
-  dayOffset: number;
-  totalGap: number;
-  isLinkedToLoaded: boolean;
  status: ProgressStatus;
 }

 // extract component to isolate re-renders provoked by the clock changes
-function TimelineEntryStatus({
-  delay,
-  start,
-  dayOffset,
-  totalGap,
-  isLinkedToLoaded,
-  status,
-}: TimelineEntryStatusProps) {
-  const state = useExpectedStartData();
-
+function TimelineEntryStatus({ delay, start, status }: TimelineEntryStatusProps) {
+  const { clock, offset } = useTimelineStatus();
  const { getLocalizedString } = useTranslation();

-  const { timeToStart } = getExpectedTimesFromExtendedEvent(
-    { timeStart: start, delay, dayOffset, totalGap, isLinkedToLoaded, countToEnd: false, duration: 0 },
-    state,
-  );
-
-  let statusText = getStatusLabel(timeToStart, status);
+  // start times need to be normalised in a rundown that crosses midnight
+  let statusText = getStatusLabel(getTimeToStart(clock, start, delay, offset), status);
  if (statusText === 'live') {
    statusText = getLocalizedString('timeline.live');
  } else if (statusText === 'pending') {
@@ -111,7 +111,7 @@
    color: $red-500;
  }

-  .section-content--followedBy .section-content--next {
+  .section-content--next {
    color: $green-500;
  }

@@ -1,22 +1,21 @@
 import { OntimeEvent } from 'ontime-types';
-import { MILLIS_PER_MINUTE } from 'ontime-utils';

-import { useExpectedStartData } from '../../common/hooks/useSocket';
-import { ExtendedEntry } from '../../common/utils/rundownMetadata';
-import { formatDuration, getExpectedTimesFromExtendedEvent } from '../../common/utils/time';
+import { useTimelineSocket } from '../../common/hooks/useSocket';
+import { formatDuration } from '../../common/utils/time';
 import { useTranslation } from '../../translation/TranslationProvider';

 import TimelineSection from './timeline-section/TimelineSection';
+import { getTimeToStart } from './timeline.utils';

 interface TimelineSectionsProps {
-  now: ExtendedEntry<OntimeEvent> | null;
-  next: ExtendedEntry<OntimeEvent> | null;
-  followedBy: ExtendedEntry<OntimeEvent> | null;
+  now: OntimeEvent | null;
+  next: OntimeEvent | null;
+  followedBy: OntimeEvent | null;
 }

 export default function TimelineSections({ now, next, followedBy }: TimelineSectionsProps) {
  const { getLocalizedString } = useTranslation();
-  const state = useExpectedStartData();
+  const { clock, offset } = useTimelineSocket();

  // gather card data
  const titleNow = now?.title ?? '-';
@@ -27,20 +26,20 @@ export default function TimelineSections({ now, next, followedBy }: TimelineSect
  let followedByStatus: string | undefined;

  if (next !== null) {
-    const { timeToStart } = getExpectedTimesFromExtendedEvent(next, state);
-    if (timeToStart <= 0) {
+    const timeToStart = getTimeToStart(clock, next.timeStart, next?.delay ?? 0, offset);
+    if (timeToStart < 0) {
      nextStatus = dueText;
    } else {
-      nextStatus = formatDuration(timeToStart, timeToStart > MILLIS_PER_MINUTE * 2);
+      nextStatus = `T - ${formatDuration(timeToStart)}`;
    }
  }

  if (followedBy !== null) {
-    const { timeToStart } = getExpectedTimesFromExtendedEvent(followedBy, state);
-    if (timeToStart <= 0) {
+    const timeToStart = getTimeToStart(clock, followedBy.timeStart, followedBy?.delay ?? 0, offset);
+    if (timeToStart < 0) {
      followedByStatus = dueText;
    } else {
-      followedByStatus = formatDuration(timeToStart, timeToStart > MILLIS_PER_MINUTE * 2);
+      followedByStatus = `T - ${formatDuration(timeToStart)}`;
    }
  }

@@ -57,7 +56,7 @@ export default function TimelineSections({ now, next, followedBy }: TimelineSect
        title={getLocalizedString('timeline.followedby')}
        status={followedByStatus}
        content={followedByText}
-        category='followedBy'
+        category='next'
      />
    </div>
  );
@@ -4,7 +4,7 @@ import { MaybeString } from 'ontime-types';
 import { cx } from '../../../common/utils/styleUtils';

 interface SectionProps {
-  category: 'now' | 'next' | 'followedBy';
+  category: 'now' | 'next';
  content: MaybeString;
  title: string;
  status?: string;
@@ -16,7 +16,7 @@ function TimelineSection({ category, content, title, status }: SectionProps) {
  const sectionClasses = cx(['section', category === 'now' && 'section--now']);
  const contentClasses = cx(['section-content', content ? `section-content--${category}` : 'section-content--subdue']);
  return (
-    <div className={sectionClasses} data-testid={category}>
+    <div className={sectionClasses}>
      <div className='section-title'>
        <span className='section-title__label'>{title}</span>
        {status && <span className='section-title__status'>{status}</span>}
@@ -8,10 +8,8 @@ import {
  getTimeFrom,
  isNewLatest,
  MILLIS_PER_HOUR,
-  MILLIS_PER_MINUTE,
 } from 'ontime-utils';

-import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { formatDuration } from '../../common/utils/time';

 import { useTimelineOptions } from './timeline.options';
@@ -78,23 +76,20 @@ export function getStatusLabel(timeToStart: number, status: ProgressStatus): str
    return status;
  }

-  if (timeToStart <= 0) {
+  if (timeToStart < 0) {
    return 'pending';
  }

-  return formatDuration(timeToStart, timeToStart > MILLIS_PER_MINUTE * 2);
+  return formatDuration(timeToStart);
 }

 interface ScopedRundownData {
-  scopedRundown: ExtendedEntry<PlayableEvent>[];
+  scopedRundown: PlayableEvent[];
  firstStart: number;
  totalDuration: number;
 }

-export function useScopedRundown(
-  rundown: ExtendedEntry<OntimeEntry>[],
-  selectedEventId: MaybeString,
-): ScopedRundownData {
+export function useScopedRundown(rundown: OntimeEntry[], selectedEventId: MaybeString): ScopedRundownData {
  const { hidePast } = useTimelineOptions();

  const data = useMemo(() => {
@@ -102,11 +97,11 @@ export function useScopedRundown(
      return { scopedRundown: [], firstStart: 0, totalDuration: 0 };
    }

-    const scopedRundown: ExtendedEntry<PlayableEvent>[] = [];
+    const scopedRundown: PlayableEvent[] = [];
    let selectedIndex = selectedEventId ? Infinity : -1;
    let firstStart = null;
    let totalDuration = 0;
-    let lastEntry: ExtendedEntry<PlayableEvent> | null = null;
+    let lastEntry: PlayableEvent | null = null;

    for (let i = 0; i < rundown.length; i++) {
      const currentEntry = rundown[i];
@@ -155,28 +150,26 @@ export function useScopedRundown(
 }

 type UpcomingEvents = {
-  now: ExtendedEntry<OntimeEvent> | null;
-  next: ExtendedEntry<OntimeEvent> | null;
-  followedBy: ExtendedEntry<OntimeEvent> | null;
+  now: OntimeEvent | null;
+  next: OntimeEvent | null;
+  followedBy: OntimeEvent | null;
 };

 /**
 * Returns upcoming events from current: now, next and followedBy
 */
-export function getUpcomingEvents(events: ExtendedEntry<PlayableEvent>[], selectedId: MaybeString): UpcomingEvents {
+export function getUpcomingEvents(events: PlayableEvent[], selectedId: MaybeString): UpcomingEvents {
  if (events.length === 0) {
    return { now: null, next: null, followedBy: null };
  }

-  let now = selectedId ? (getEventWithId(events, selectedId) as ExtendedEntry<OntimeEvent>) : null;
+  let now = selectedId ? getEventWithId(events, selectedId) : null;
  if (!isOntimeEvent(now)) {
    now = null;
  }

-  const next = now
-    ? (getNextEvent(events, now.id)?.nextEvent as ExtendedEntry<OntimeEvent> | null)
-    : (getFirstEvent(events).firstEvent as ExtendedEntry<OntimeEvent> | null);
-  const followedBy = next ? (getNextEvent(events, next.id)?.nextEvent as ExtendedEntry<OntimeEvent> | null) : null;
+  const next = now ? getNextEvent(events, now.id)?.nextEvent : getFirstEvent(events).firstEvent;
+  const followedBy = next ? getNextEvent(events, next.id)?.nextEvent : null;

  // Return the titles, handling nulls appropriately
  return {
@@ -190,7 +183,7 @@ export function getUpcomingEvents(events: ExtendedEntry<PlayableEvent>[], select
 * Utility function calculates time to start
 */
 export function getTimeToStart(now: number, start: number, delay: number, offset: number): number {
-  return start + delay - now + offset;
+  return start + delay - now - offset;
 }

 interface TimelineLayout {
@@ -1,20 +1,19 @@
 import { OntimeEntry, ProjectData, Settings } from 'ontime-types';

 import useProjectData from '../../common/hooks-query/useProjectData';
-import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
+import { useFlatRundown } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
-import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { aggregateQueryStatus, ViewData } from '../utils/viewLoader.utils';

 export interface TimelineData {
-  events: ExtendedEntry<OntimeEntry>[];
+  events: OntimeEntry[];
  projectData: ProjectData;
  settings: Settings;
 }

 export function useTimelineData(): ViewData<TimelineData> {
  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
+  const { data: rundownData, status: rundownStatus } = useFlatRundown();
  const { data: projectData, status: projectDataStatus } = useProjectData();
  const { data: settings, status: settingsStatus } = useSettings();

@@ -1,7 +1,6 @@
 {
-  "extends": "../../tsconfig.common.json",
  "compilerOptions": {
-    "target": "esnext",
+    "target": "ESNext",
    "lib": [
      "dom",
      "dom.iterable",
@@ -14,7 +13,21 @@
    ],
    "module": "esnext",
    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "allowJs": true,
@@ -8,17 +8,14 @@ import svgrPlugin from 'vite-plugin-svgr';
 import { ONTIME_VERSION } from './src/ONTIME_VERSION';

 const sentryAuthToken = process.env.SENTRY_AUTH_TOKEN;
+const isDev = process.env.NODE_ENV === 'local' || process.env.NODE_ENV === 'development';

 export default defineConfig({
  base: './', // Ontime cloud: we use relative paths to allow them to reference a dynamic base set at runtime
-  define: {
-    // we pass along the NODE_ENV here in case it is a docker build
-    'import.meta.env.IS_DOCKER': process.env.NODE_ENV === 'docker',
-  },
  plugins: [
    react(),
    svgrPlugin(),
-    sentryAuthToken &&
+    !isDev &&
      sentryVitePlugin({
        org: 'get-ontime',
        project: 'ontime',
@@ -1,19 +1,18 @@
 {
  "name": "ontime-electron",
-  "version": "4.0.0-beta.5",
+  "version": "4.0.0-beta.3",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
  "keywords": [
+    "lighdev",
    "ontime",
-    "timer",
-    "stage timer",
-    "rundown"
+    "timer"
  ],
  "license": "AGPL-3.0-only",
  "main": "src/main.js",
  "devDependencies": {
-    "electron": "38.2.1",
+    "electron": "37.2.1",
    "electron-builder": "26.0.18",
    "eslint": "catalog:",
    "eslint-config-prettier": "catalog:",
@@ -21,12 +20,14 @@
    "wait-on": "^7.2.0"
  },
  "scripts": {
-    "dev:electron": "wait-on http://localhost:3000 && cross-env NODE_ENV=development electron .",
+    "postinstall": "",
    "lint": "eslint . --quiet",
+    "dev": "wait-on http://localhost:3000 && cross-env NODE_ENV=development electron .",
    "dist-win": "electron-builder --publish=never --x64 --win",
    "dist-mac": "electron-builder --publish=never --mac",
    "dist-mac:local": "electron-builder --publish=never --mac -c.mac.identity=null",
-    "dist-linux": "electron-builder --publish=never --x64 --linux"
+    "dist-linux": "electron-builder --publish=never --x64 --linux",
+    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
  },
  "build": {
    "productName": "ontime-prerelease",
@@ -218,7 +218,7 @@ function makeSettingsMenu(redirectWindow) {
        ],
      },
      {
-        label: 'Project settings',
+        label: 'Project data',
        submenu: [
          {
            label: 'Rundown defaults',
@@ -1,2 +0,0 @@
-node_modules
-dist
@@ -1 +0,0 @@
-*.tgz
@@ -1,17 +0,0 @@
-# Ontime Resolver
-
-Congratulations! You got this far into Ontime's rabbit hole and want to manage your installation.
-
-The Resolver is an attempt to expose our ontime's api so it is easier to integrate with  
-
-## Links
- [Ontime's repository](https://github.com/cpvalente/ontime)
- [Ontime's documentation](https://docs.getontime.no/)
- [Ontime's website](https://getontime.no/)
-
-## Sponsoring
-You can help the development of this project or say thank you with a one time donation. \
-See the [terms of donations](https://github.com/cpvalente/ontime/blob/master/SPONSOR.md)
-
-[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/cpvalente)
-[![](https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=buymeacoffee&color=%23fe8e86)](https://www.buymeacoffee.com/cpvalente)
@@ -1,29 +0,0 @@
-{
-  "name": "@getontime/resolver",
-  "version": "4.0.0-beta.5",
-  "type": "module",
-  "repository": "https://github.com/cpvalente/ontime",
-  "types": "./dist/main.d.ts",
-  "main": "./dist/main.js",
-  "description": "shared typings for ontime",
-  "scripts": {
-    "lint": "eslint . --quiet",
-    "typecheck": "tsc --noEmit",
-    "prebuild": "pnpm rimraf ./dist",
-    "build": "tsup && pnpm rimraf ./dist/index.js",
-    "postbuild": "pnpm rimraf ./dist/index.d.ts"
-  },
-  "keywords": ["ontime", "resolver", "parser"],
-  "author": "",
-  "license": "AGPL-3.0-only",
-  "devDependencies": {
-    "@sprout2000/esbuild-copy-plugin": "^1.1.19",
-    "@typescript-eslint/parser": "catalog:",
-    "eslint": "catalog:",
-    "tsup": "^8.5.0",
-    "rimraf": "catalog:",
-    "typescript": "catalog:",
-    "ontime-types": "workspace:^4.0.0"
-  },
-  "files": ["dist"]
-}
@@ -1,20 +0,0 @@
-// api
-export { MessageTag, RefetchKey } from 'ontime-types';
-export type { ApiAction, ApiActionTag, ApiResponse } from 'ontime-types';
-export type { WsPacketToClient, WsPacketToServer } from 'ontime-types';
-
-// stores
-export type { RuntimeStore, TimerState, MessageState, RundownState, Offset } from 'ontime-types';
-export { TimerPhase, Playback, runtimeStorePlaceholder, OffsetMode } from 'ontime-types';
-
-// aux timer
-export type { SimpleTimerState } from 'ontime-types';
-export { SimplePlayback, SimpleDirection } from 'ontime-types';
-
-// entries
-export type { OntimeEvent, OntimeGroup, EntryCustomFields, CustomFields, Rundown } from 'ontime-types';
-export { SupportedEntry, isOntimeEvent, isOntimeGroup, isOntimeDelay, isOntimeMilestone } from 'ontime-types';
-
-// functions
-export { isWsPacketToClient } from './websocket.js';
-export type { SocketSender } from './websocket.js';
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
arc-alex	6397d33eaa	feat: option to select all events for countdown	2025-09-16 16:59:29 +02:00
arc-alex	9288566a7f	chore: remove unused code	2025-09-16 16:38:11 +02:00
Alex Christoffer Rasmussen	7fd9f83fb0	fix docker ignore (#1780 )	2025-09-16 16:27:00 +02:00
Carlos Valente	e621f1386e	fix(cuesheet): infinite render loop on resizing columns	2025-09-16 06:43:19 +02:00
Carlos Valente	b51e7cbd2d	fix: maintain multiline in cuesheet cells	2025-09-14 14:19:18 +02:00
Carlos Valente	7cd92ce5f7	docs: add contribution guidelines	2025-09-14 14:19:18 +02:00
Carlos Valente	f6a02abf36	fix: skip nested events	2025-09-14 14:19:18 +02:00
Carlos Valente	e4b0df42cf	feat: allow finding milestones	2025-09-14 14:19:18 +02:00
Carlos Valente	ded8bddb2d	refactor: improve automated following	2025-09-14 14:19:18 +02:00
Carlos Valente	8d3ce46c56	fix: allow moving a group after another	2025-09-14 14:19:18 +02:00
Carlos Valente	578cb2b244	refactor: improve pin styling	2025-09-14 14:19:18 +02:00
Carlos Valente	c79ee193c9	fix: prevent layout reflow on different entry types	2025-09-14 14:19:18 +02:00
Carlos Valente	5810ae0d54	refactor: add default value to secondary source	2025-09-14 14:19:18 +02:00
Carlos Valente	bfbf8574e3	fix: phase style overrides in timer	2025-09-14 14:19:18 +02:00
Alex Christoffer Rasmussen	490e429f44	cleanup (#1776 ) * chore: cleanup leftover console log * chore: prevent error in client tsconfig	2025-09-13 16:31:56 +02:00
Alex Christoffer Rasmussen	2e950965e0	fix: sheet default import map (#1775 ) * fix: default import map * fix: update test	2025-09-08 09:49:01 +02:00
arc-alex	cc34db775a	chore: bump version	2025-09-08 06:51:07 +02:00
				`@@ -0,0 +1 @@`
				`export type Size = 'xs' \| 'sm' \| 'md' \| 'lg';`