feat: Keep screen awake (#1788 )

* feat keepAwake hook * reaqure lock after view change * refactor: move it to a navigation view setting * save to search params
refactor: better type for api aux action (#1796 )
2026-07-26 10:38:55 +00:00 · 2025-09-26 21:34:01 +02:00 · 2025-09-26 21:34:01 +02:00 · 2025-09-26 21:34:01 +02:00 · 2025-09-26 21:34:01 +02:00 · 2025-09-26 21:34:01 +02:00
148 changed files with 3114 additions and 1679 deletions
@@ -16,7 +16,8 @@

 # Ignore build folders
 node_modules
-dist
+**/node_modules
+**/dist

 # Ignore default volumes created by running docker compose up
 ontime-db
@@ -0,0 +1,42 @@
+name: Ontime Resolver build
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  build_cli:
+    permissions:
+      id-token: write
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          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
+
+      - name: Build project packages
+        run: pnpm turbo @getontime/resolver#build
+
+      - 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/resolver
@@ -7,4 +7,5 @@ playwright-report

 **/*.toml
 **/*.yml
-**/*.json
+**/*.json
+!tsconfig.common.json
@@ -99,3 +99,16 @@ Other useful commands

 - __List running processes__ by running `docker ps`
 - __Kill running process__ by running `docker kill <process-id>`
+
+## CONTRIBUTION GUIDELINES
+
+If you want to propose changes to the codebase, please reach out before opening a Pull Request.
+
+For new PRs, please follow the following checklist:
+* [ ] You have updated and ran unit locally and they are passing. Unit tests are generally created for all utility functions and business logic 
+* [ ] You have ran code formatting and linting in all your changes
+* [ ] The branch is clean and the commits are meaningfully separated and contain descriptive messages
+* [ ] The PR body contains description and motivation for the changes
+
+After this checklist is complete, you can request a review from one of the maintainers to get feedback and approval on the changes. \
+We will review as soon as possible
@@ -1,6 +1,6 @@
 {
    "name": "@getontime/cli",
-    "version": "4.0.0-alpha.6",
+    "version": "4.0.0-beta.4",
    "author": "Carlos Valente",
    "description": "Time keeping for live events",
    "repository": "https://github.com/cpvalente/ontime",
@@ -1,23 +1,23 @@
 {
  "name": "ontime-ui",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-beta.4",
  "private": true,
  "type": "module",
  "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.2",
+    "@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",
-    "@fontsource/open-sans": "^5.0.28",
-    "@mantine/hooks": "^8.2.4",
+    "@fontsource/open-sans": "^5.2.6",
+    "@mantine/hooks": "^8.2.8",
    "@sentry/react": "^10.2.0",
    "@table-nav/react": "^0.0.7",
-    "@tanstack/react-query": "^5.84.1",
-    "@tanstack/react-query-devtools": "^5.84.1",
+    "@tanstack/react-query": "^5.85.9",
+    "@tanstack/react-query-devtools": "^5.85.9",
    "@tanstack/react-table": "^8.21.3",
    "autosize": "^6.0.1",
    "axios": "^1.11.0",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
    "csv-stringify": "^6.6.0",
    "prismjs": "^1.30.0",
    "react": "^19.1.1",
@@ -27,11 +27,11 @@
    "react-hook-form": "^7.62.0",
    "react-icons": "5.5.0",
    "react-qr-code": "^2.0.18",
-    "react-router": "^7.8.0",
+    "react-router": "^7.8.2",
    "react-simple-code-editor": "^0.14.1",
    "react-virtuoso": "^4.14.0",
    "web-vitals": "^5.1.0",
-    "zustand": "^5.0.7"
+    "zustand": "^5.0.8"
  },
  "scripts": {
    "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -64,8 +64,8 @@
    "@sentry/vite-plugin": "^2.16.1",
    "@tanstack/eslint-plugin-query": "^5.8.4",
    "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
    "@typescript-eslint/eslint-plugin": "catalog:",
    "@typescript-eslint/parser": "catalog:",
    "@vitejs/plugin-react": "4.5.1",
@@ -8,6 +8,7 @@ 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';
@@ -24,6 +25,7 @@ function App() {
              <ErrorBoundary>
                <TranslationProvider>
                  <IdentifyOverlay />
+                  <KeepAwake />
                  <AppRouter />
                </TranslationProvider>
              </ErrorBoundary>
@@ -33,7 +33,13 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
    if (newPath === '/' || newPath === currentPath) {
      return;
    }
-    setRedirect({ target: id, redirect: newPath });
+
+    if (newPath.startsWith('preset-')) {
+      setRedirect({ target: id, redirect: newPath.slice(7) });
+    } else {
+      setRedirect({ target: id, redirect: newPath });
+    }
+
    onClose();
  };

@@ -45,7 +51,7 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
      label: view.label,
    })),
    ...enabledPresets.map((preset) => ({
-      value: preset.search,
+      value: `preset-${preset.alias}`,
      label: `URL Preset: ${preset.alias}`,
    })),
  ];
@@ -61,32 +67,11 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
        <>
          <Info>
            Remotely redirect the client to a different URL. <br />
-            Either by selecting a URL Preset or entering a custom path.
+            Either by entering a custom path or selecting a URL Preset.
            <br />
            <br />
            <AppLink search='settings=sharing__presets'>Manage URL Presets</AppLink>
          </Info>
-          <div>
-            <span className={style.label}>Select View or URL Preset</span>
-            <div className={style.textEntry}>
-              <Select
-                fluid
-                options={viewOptions}
-                defaultValue={viewOptions[0].value}
-                onValueChange={(value) => setSelected(value)}
-                disabled={enabledPresets.length === 0}
-              />
-              <Button
-                variant='primary'
-                aria-label='Redirect to preset'
-                className={style.redirect}
-                disabled={enabledPresets.length === 0 || selected === '/'}
-                onClick={() => handleRedirect(selected)}
-              >
-                Redirect <IoArrowForward />
-              </Button>
-            </div>
-          </div>
          <div className={style.inlineEntry}>
            <span className={style.label}>Enter custom path</span>
            <label className={style.textEntry}>
@@ -100,9 +85,34 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
              className={style.redirect}
              onClick={() => handleRedirect(path)}
            >
-              Redirect <IoArrowForward />
+              Redirect
+              <IoArrowForward />
            </Button>
          </div>
+          <div>
+            <span className={style.label}>Select View or URL Preset</span>
+            <div className={style.inlineEntry}>
+              <label className={style.textEntry}>
+                {origin}
+                <Select
+                  fluid
+                  options={viewOptions}
+                  defaultValue={viewOptions[0].value}
+                  onValueChange={(value) => setSelected(value)}
+                  disabled={enabledPresets.length === 0}
+                />
+              </label>
+              <Button
+                variant='primary'
+                aria-label='Redirect to preset'
+                className={style.redirect}
+                disabled={enabledPresets.length === 0 || selected === '/'}
+                onClick={() => handleRedirect(selected)}
+              >
+                Redirect <IoArrowForward />
+              </Button>
+            </div>
+          </div>
        </>
      }
    />
@@ -1,10 +1,11 @@
 import { memo } from 'react';
-import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
+import { IoClose, IoContract, IoExpand, IoEye, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
 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';
@@ -31,6 +32,7 @@ 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 (
@@ -62,6 +64,13 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
              <IoSwapVertical />
              {mirror && <span className={style.note}>Active</span>}
            </NavigationMenuItem>
+            {window.isSecureContext && (
+              <NavigationMenuItem active={keepAwake} onClick={toggleKeepAwake}>
+                Keep Awake
+                <IoEye />
+                {keepAwake && <span className={style.note}>Active</span>}
+              </NavigationMenuItem>
+            )}
            <NavigationMenuItem onClick={handlers.open}>Rename Client</NavigationMenuItem>

            <hr className={style.separator} />
@@ -11,9 +11,11 @@
 }

 .pin {
+  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
+  gap: 4px;

  input {
    font-size: 4rem;
@@ -39,7 +39,14 @@ export default function ParamInput({ paramField }: ParamInputProps) {
  }

  if (type === 'multi-option') {
-    return <MultiOption paramField={paramField} />;
+    const optionFromParams = searchParams.getAll(id);
+
+    return (
+      <MultiOption
+        paramField={paramField}
+        options={optionFromParams.length ? optionFromParams : paramField.defaultValue ?? ['']}
+      />
+    );
  }

  if (type === 'boolean') {
@@ -74,19 +81,17 @@ export default function ParamInput({ paramField }: ParamInputProps) {

 interface EditFormMultiOptionProps {
  paramField: ParamField & { type: 'multi-option' };
+  options: string[];
 }

-function MultiOption({ paramField }: EditFormMultiOptionProps) {
-  const [searchParams] = useSearchParams();
-  const { id, values, defaultValue = [''] } = paramField;
-
-  const optionFromParams = searchParams.getAll(id);
-  const [paramState, setParamState] = useState<string[]>(optionFromParams.length ? optionFromParams : defaultValue);
+function MultiOption({ paramField, options }: EditFormMultiOptionProps) {
+  const { id, values } = paramField;
+  const [paramState, setParamState] = useState<string[]>(options);

+  // synchronise options
  useEffect(() => {
-    const params = searchParams.getAll(id);
-    setParamState(params.length ? params : defaultValue);
-  }, [searchParams, id, defaultValue]);
+    setParamState(options);
+  }, [options]);

  const toggleValue = (value: string, checked: boolean) => {
    if (checked) {
@@ -28,6 +28,7 @@
  bottom: 0;

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

  display: flex;
@@ -56,13 +56,18 @@ export function makeCustomFieldSelectOptions(customFields: CustomFields, filterI
 /**
 * Creates data for a select element that displays project custom data
 */
-export function makeProjectDataOptions(projectData: ProjectData): SelectOption[] {
-  return projectData.custom.map((entry, index) => {
+export function makeProjectDataOptions(
+  projectData: ProjectData,
+  additionalOptions: SelectOption[] = [],
+): SelectOption[] {
+  const generatedOptions = projectData.custom.map((entry, index) => {
    return {
      value: `${index}-${entry.title}`,
      label: entry.title,
    };
  });
+
+  return [...additionalOptions, ...generatedOptions];
 }

 type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
@@ -23,6 +23,9 @@ export const useFadeOutOnInactivity = (initialState = false) => {

    const throttledShowMenu = throttle(setShowMenuTrue, 1000);

+    // we call the function on mount, to make sure the menu is hidden
+    throttledShowMenu();
+
    document.addEventListener('mousemove', throttledShowMenu);
    document.addEventListener('keydown', throttledShowMenu);

@@ -1,6 +1,5 @@
-import { RefObject, useCallback, useEffect, useRef } from 'react';
-
-import { useSelectedEventId } from './useSocket';
+import { RefObject, useCallback, useEffect } from 'react';
+import { MaybeString } from 'ontime-types';

 function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
  componentRef: RefObject<ComponentRef>,
@@ -18,37 +17,26 @@ function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends H
  scrollRef.current.scrollTo({ top, behavior: 'smooth' });
 }

-function snapToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
-  componentRef: RefObject<ComponentRef>,
-  scrollRef: RefObject<ScrollRef>,
-  topOffset: number,
-) {
-  if (!componentRef.current || !scrollRef.current) {
-    return;
-  }
-
-  const componentRect = componentRef.current.getBoundingClientRect();
-  const scrollRect = scrollRef.current.getBoundingClientRect();
-  const top = componentRect.top - scrollRect.top + scrollRef.current.scrollTop - topOffset;
-
-  // maintain current x scroll position
-  scrollRef.current.scrollTo(scrollRef.current.scrollLeft, top);
-}
-
 interface UseFollowComponentProps {
  followRef: RefObject<HTMLElement | null>;
  scrollRef: RefObject<HTMLElement | null>;
  doFollow: boolean;
  topOffset?: number;
  setScrollFlag?: (newValue: boolean) => void;
+  followTrigger?: MaybeString; // this would be an entry id or null
 }

-export default function useFollowComponent(props: UseFollowComponentProps) {
-  const { followRef, scrollRef, doFollow, topOffset = 100, setScrollFlag } = props;
-
-  // when cursor moves, view should follow
+export default function useFollowComponent({
+  followRef,
+  scrollRef,
+  doFollow,
+  topOffset = 100,
+  setScrollFlag,
+  followTrigger,
+}: UseFollowComponentProps) {
+  // when trigger moves, view should follow
  useEffect(() => {
-    if (!doFollow) {
+    if (!doFollow || !followTrigger) {
      return;
    }

@@ -60,16 +48,14 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
        setScrollFlag?.(false);
      });
    }
-
-    // eslint-disable-next-line -- the prompt seems incorrect
-  }, [followRef?.current, scrollRef?.current]);
+  }, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);

  const scrollToRefComponent = useCallback(
    (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
-      if (componentRef.current && containerRef.current) {
+      if (componentRef && containerRef) {
        // @ts-expect-error -- we know this are not null
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        scrollToComponent(componentRef!, scrollRef!, offset);
+        scrollToComponent(componentRef!, containerRef!, offset);
      }
    },
    [followRef, scrollRef, topOffset],
@@ -77,32 +63,3 @@ export default function useFollowComponent(props: UseFollowComponentProps) {

  return scrollToRefComponent;
 }
-
-export function useFollowSelected(doFollow: boolean, topOffset = 100) {
-  const selectedEvenId = useSelectedEventId();
-
-  const selectedRef = useRef<HTMLTableRowElement>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!doFollow) {
-      return;
-    }
-
-    if (selectedEvenId && selectedRef.current && scrollRef.current) {
-      // Use requestAnimationFrame to ensure the component is fully loaded
-      window.requestAnimationFrame(() => {
-        snapToComponent(
-          { current: selectedRef.current } as RefObject<HTMLElement>,
-          { current: scrollRef.current } as RefObject<HTMLElement>,
-          topOffset,
-        );
-      });
-    }
-  }, [doFollow, selectedEvenId, topOffset]);
-
-  return {
-    selectedRef,
-    scrollRef,
-  };
-}
@@ -10,7 +10,9 @@ const createSelector =

 export const setClientRemote = {
  setIdentify: (payload: { target: string; identify: boolean }) => sendSocket('client', payload),
-  setRedirect: (payload: { target: string; redirect: string }) => sendSocket('client', payload),
+  setRedirect: (payload: { target: string; redirect: string }) => {
+    sendSocket('client', payload);
+  },
  setClientName: (payload: { target: string; rename: string }) => sendSocket('client', payload),
 };

@@ -162,24 +164,6 @@ 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,
@@ -188,7 +172,7 @@ export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
 export const useExpectedStartData = createSelector((state: RuntimeStore) => ({
  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
  mode: state.offset.mode,
-  currentDay: state.eventNow?.dayOffset ?? 0,
+  currentDay: state.rundown.currentDay ?? 0,
  actualStart: state.rundown.actualStart,
  plannedStart: state.rundown.plannedStart,
  clock: state.clock,
@@ -225,6 +209,45 @@ export const usePlayback = () => {
  return useRuntimeStore(featureSelector);
 };

+/* ======================= Overview data subscriptions ======================= */
+
+export const useRundownOverview = 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) => ({
@@ -1 +0,0 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg';
@@ -1,19 +0,0 @@
-export type OverridableOptions = {
-  keyColour?: string;
-  textColour?: string;
-  textBackground?: string;
-  font?: string;
-  size?: number;
-  justifyContent?: 'start' | 'center' | 'end';
-  alignItems?: 'start' | 'center' | 'end';
-  left?: string;
-  top?: string;
-  hideNav?: boolean;
-  hideOvertime?: boolean;
-  hideMessagesOverlay?: boolean;
-  hideEndMessage?: boolean;
-  language?: string;
-  showProgressBar?: boolean;
-  hideTimerSeconds?: boolean;
-  removeLeadingZeros?: boolean;
-};
@@ -1,89 +0,0 @@
-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),
-    };
-  },
-}));
@@ -173,7 +173,7 @@ describe('initRundownMetadata()', () => {
      isPast: false,
      isNextDay: false,
      totalGap: 10,
-      isLinkedToLoaded: false,
+      isLinkedToLoaded: true,
      isLoaded: true,
      groupId: 'group',
      groupColour: 'red',
@@ -125,6 +125,7 @@ function processEntry(
  if (entry.id === selectedEventId) {
    processedData.isLoaded = true;
    processedData.isPast = false;
+    processedData.isLinkedToLoaded = true;
  }

  if (isOntimeGroup(entry)) {
@@ -158,7 +159,8 @@ function processEntry(
           * a) find an unlinked event
           * b) find a countToEnd event
           */
-          processedData.isLinkedToLoaded = entry.linkStart && !processedData.previousEvent?.countToEnd;
+          processedData.isLinkedToLoaded =
+            entry.linkStart && !processedData.previousEvent?.countToEnd && processedData.isLinkedToLoaded;
        }

        if (isNewLatest(entry, processedData.latestEvent)) {
@@ -1,8 +0,0 @@
-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 {
-  ApiAction,
+  ApiActionTag,
  Log,
  MessageTag,
  RefetchKey,
@@ -199,7 +199,7 @@ export const connectSocket = () => {
  };
 };

-export function sendSocket<T extends MessageTag | ApiAction>(
+export function sendSocket<T extends MessageTag | ApiActionTag>(
  tag: T,
  payload: T extends MessageTag ? Pick<WsPacketToServer & { tag: T }, 'payload'>['payload'] : unknown,
 ): void {
@@ -33,8 +33,8 @@ export function validateProjectFile(file: File) {
  }

  // Limit file size of a project file to around 1MB
-  if (file.size > 1_000_000) {
-    throw new Error('File size limit (1MB) exceeded');
+  if (file.size > 2_000_000) {
+    throw new Error('File size limit (2MB) 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 1MB
-  if (file.size > 1_000_000) {
-    throw new Error('File size limit (1MB) exceeded');
+  // 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');
  }
 }
@@ -1,29 +0,0 @@
-/* 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,6 +2,7 @@ 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';
@@ -17,7 +18,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);
@@ -29,9 +30,12 @@ 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(
      {
-        [rundown.id]: rundown,
+        [currentRundown.id]: { ...rundown, id: currentRundown.id, title: currentRundown.title },
      },
      customFields,
    );
@@ -14,4 +14,8 @@
 .copiable {
  cursor: text  ;
  user-select: text;
-}
+}
+
+.self {
+  background-color: $blue-1100;
+}
@@ -8,6 +8,7 @@ import { RenameClientModal } from '../../../../../common/components/client-modal
 import Tag from '../../../../../common/components/tag/Tag';
 import { setClientRemote } from '../../../../../common/hooks/useSocket';
 import { useClientStore } from '../../../../../common/stores/clientStore';
+import { cx } from '../../../../../common/utils/styleUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';

 import style from './ClientControlPanel.module.scss';
@@ -71,13 +72,13 @@ export default function ClientList() {
              const { identify, name, path } = client;
              const isCurrent = id === key;
              return (
-                <tr key={key}>
+                <tr key={key} className={cx([isCurrent && style.self])}>
                  <Panel.InlineElements relation='inner' as='td'>
                    {isCurrent && <Tag>SELF</Tag>}
                    {name}
                  </Panel.InlineElements>
                  <td className={style.copiable}>{path}</td>
-                  <Panel.InlineElements relation='inner'>
+                  <Panel.InlineElements relation='inner' as='td'>
                    <Button
                      size='small'
                      className={`${identify ? style.blink : ''}`}
@@ -27,6 +27,7 @@ export default function ProjectData() {
    reset,
    formState: { isSubmitting, isValid, isDirty, errors },
    setError,
+    clearErrors,
    watch,
    control,
    setValue,
@@ -53,6 +54,7 @@ export default function ProjectData() {

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

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

  const onSubmit = async (formData: ProjectData) => {
    try {
+      clearErrors();
      await updateProjectData(formData);
    } catch (error) {
      const message = maybeAxiosError(error);
@@ -0,0 +1,84 @@
+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 };
+}
@@ -49,6 +49,7 @@ export default function Operator() {
    scrollRef,
    doFollow: !lockAutoScroll,
    topOffset: selectedOffset,
+    followTrigger: selectedEventId,
  });

  useWindowTitle('Operator');
@@ -181,7 +182,7 @@ export default function Operator() {
                  const { isPast, isSelected, isLinkedToLoaded, totalGap } = process(nestedEntry);

                  // hide past events (if setting) and skipped events
-                  if (hidePast && isPast) {
+                  if ((hidePast && isPast) || nestedEntry.skip) {
                    return null;
                  }

@@ -13,6 +13,7 @@ import { isStringBoolean } from '../viewers/common/viewUtils';

 export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ViewOption[] => {
  const fieldOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
    { value: 'title', label: 'Title' },
    { value: 'note', label: 'Note' },
  ]);
@@ -38,7 +39,7 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
          description: 'Field to be shown in the second line of text',
          type: 'option',
          values: fieldOptions,
-          defaultValue: '',
+          defaultValue: 'none',
        },
        {
          id: 'subscribe',
@@ -47,9 +47,10 @@

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

 import Tooltip from '../../../common/components/tooltip/Tooltip';
 import {
  useClock,
  useCurrentGroupId,
+  useFlagTimerOverView,
+  useGroupTimerOverView,
  useNextFlag,
+  useOffsetOverview,
+  useProgressOverview,
  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, formattedTime } from '../overview.utils';
+import { calculateEndAndDaySpan, formatDueTime, formattedTime } from '../overview.utils';

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

@@ -58,8 +61,8 @@ export function StartTimes() {
          <Tooltip text='Planned end time' render={<TbCalendarPin className={style.icon} />} />
          {maybePlannedDaySpan > 0 ? (
            <Tooltip
-              text={`Event spans over ${maybePlannedDaySpan + 1} days`}
-              render={<span className={cx([style.time, style.daySpan])} />}
+              text={`Rundown spans over ${maybePlannedDaySpan + 1} days`}
+              render={<span className={cx([style.time, style.daySpan])} data-day-offset={maybePlannedDaySpan} />}
            >
              {plannedEndText}
            </Tooltip>
@@ -71,8 +74,8 @@ export function StartTimes() {
          <Tooltip text='Expected end time' render={<TbCalendarStar className={style.icon} />} />
          {maybeExpectedEnd !== null && maybeExpectedDaySpan > 0 ? (
            <Tooltip
-              text={`Event spans over ${maybeExpectedDaySpan + 1} days`}
-              render={<span className={cx([style.time, style.daySpan])} />}
+              text={`Rundown spans over ${maybeExpectedDaySpan + 1} days`}
+              render={<span className={cx([style.time, style.daySpan])} data-day-offset={maybeExpectedDaySpan} />}
            >
              {formattedTime(maybeExpectedEnd)}
            </Tooltip>
@@ -96,61 +99,110 @@ 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, groupExpectedEnd } = useRuntimePlaybackOverview();
+  const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback } = useGroupTimerOverView();
  const { currentGroupId } = useCurrentGroupId();
  const group = useEntry(currentGroupId) as OntimeGroup | null;

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

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

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

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

-  const plannedFlagStart = entry ? entry.timeStart - clock : null;
-  const plannedTimeUntilDisplay = formattedTime(plannedFlagStart, 3, TimerType.CountDown);
+  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 expectedTimeUntil = expectedStart !== null ? expectedStart - clock : null;
-  const expectedTimeUntilDisplay = formattedTime(expectedTimeUntil, 3, TimerType.CountDown);
+  const expectedTimeUntilDisplay = formatDueTime(expectedTimeUntil, 3, TimerType.CountDown);

  const title = entry?.title ?? null;

  return (
    <div className={style.metadataRow}>
-      <span className={title ? style.labelTitle : style.label}>{`${title ? title : 'Flag'} `}</span>
+      <span className={title ? style.labelTitle : style.label}>{`${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 && style.muted])}>
+        <span
+          data-testid='flag-plannedStart'
+          className={cx([
+            style.time,
+            (!entry || !active) && style.muted,
+            plannedTimeUntilDisplay === 'due' && style.dueTime,
+          ])}
+        >
          {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])}>
+        <span
+          data-testid='flag-expectedStart'
+          className={cx([
+            style.time,
+            expectedTimeUntil === null && style.muted,
+            expectedTimeUntilDisplay === 'due' && style.dueTime,
+          ])}
+        >
          {expectedTimeUntilDisplay}
        </span>
      </div>
@@ -159,7 +211,7 @@ function FlagTimes() {
 }

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

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

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

  const isPlaying = isPlaybackActive(playback);
  const offsetState = getOffsetState(isPlaying ? offset : null);
@@ -179,8 +231,9 @@ export function OffsetOverview() {

 export function ClockOverview({ className }: { className?: string }) {
  const { clock } = useClock();
+  const formattedClock = formatTime(clock);

-  return <TimeColumn label='Time now' value={formattedTime(clock)} className={className} />;
+  return <TimeColumn label='Time now' value={formattedClock} className={className} />;
 }

 export function TimerOverview({ className }: { className?: string }) {
@@ -3,6 +3,23 @@ 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
 */
@@ -82,7 +82,12 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {

  const cursorRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
-  useFollowComponent({ followRef: cursorRef, scrollRef, doFollow: editorMode === AppMode.Run });
+  useFollowComponent({
+    followRef: cursorRef,
+    scrollRef,
+    doFollow: true,
+    followTrigger: editorMode === AppMode.Edit ? cursor : featureData?.selectedEventId,
+  });

  // DND KIT
  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
@@ -312,7 +317,7 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {
    setMetadata(rundownMetadata);
  }, [order, entries, rundownMetadata]);

-  // in run mode, we follow selection
+  // in run mode, we follow the playback selection and open groups as needed
  useEffect(() => {
    if (editorMode !== AppMode.Run || !featureData?.selectedEventId) {
      return;
@@ -28,20 +28,22 @@
  padding-inline: 0;
  box-shadow: $box-shadow-right;

-  flex: 1 2 auto; /* flex-grow: 1, flex-shrink: 2, flex-basis: auto */
+  flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  min-width: 38rem;
-  max-width: 60rem;
+  max-width: none;
+  width: 0;
 }

 .side {
  max-height: 100%;
-  max-width: 45rem;
  margin: 0.5rem 0;
  padding: 1rem;
  padding-right: 0;
  background-color: $gray-1325;
  border-radius: 0 8px 8px 0;

-  flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
-  max-width: 45rem;
+  flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
+  // width is locked to swatch picker elements
+  min-width: calc(15 * 2rem + 13 * 0.5rem);
+  width: 0;
 }
@@ -73,9 +73,7 @@ interface EventUntilProps {
  isLinkedToLoaded: boolean;
 }

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

@@ -41,9 +41,9 @@ export function canDrop(
  order?: 'after' | 'before',
  isTargetCollapsed?: boolean,
 ): boolean {
-  // this would mean inserting a group inside another
+  // inserting before would mean adding a group inside another
  if (targetType === 'end-group') {
-    return false;
+    return order === 'after';
  }

  // this means swapping places with another group
@@ -29,7 +29,7 @@ export default function GenerateLinkFormExport({ lockedPath }: GenerateLinkFormE
      { value: OntimeView.Timer, label: 'Timer' },
      { value: OntimeView.Cuesheet, label: 'Cuesheet' },
      { value: OntimeView.Operator, label: 'Operator' },
-      { value: '', label: 'Companion' },
+      { value: '<<companion>>', label: 'Companion' },
      ...urlPresetData.map((preset) => ({
        value: `preset-${preset.alias}`,
        label: `URL Preset: ${preset.alias}`,
@@ -64,7 +64,7 @@ export const initializeSentry = () => {
      /NetworkError/i,
      /The operation couldn't be completed/i,
    ],
-    denyUrls: [/extensions\//i, /^chrome:\/\//i, /^chrome-extension:\/\//i],
+    denyUrls: [/extensions\//i, /^chrome:\/\//i, /^chrome-extension:\/\//i, /external\//i],
    beforeSend(event) {
      // Drop errors that happen during known data-unavailable states
      const error = event.exception?.values?.[0]?.value;
@@ -17,7 +17,6 @@ $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
@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langDe: TranslationObject = {
  'common.expected_finish': 'Erwartetes Ende',
  'common.minutes': 'min',
+  'common.seconds': 'sek',
  'common.now': 'Jetzt',
  'common.next': 'Nächste',
  'common.scheduled_start': 'Geplanter beginn',
@@ -15,6 +16,7 @@ export const langDe: TranslationObject = {
  'common.no_data': 'Keine Daten',
  'countdown.ended': 'Veranstaltung endete um',
  'countdown.running': 'Veranstaltung läuft',
+  'countdown.loaded': 'Veranstaltung geladen',
  'countdown.select_event': 'Wählen Sie eine Veranstaltung aus, um sie zu verfolgen',
  'countdown.to_start': 'Zeit bis zum Start',
  'countdown.waiting': 'Warten auf den Veranstaltungsbeginn',
@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langEs: TranslationObject = {
  'common.expected_finish': 'Finalización esperada',
  'common.minutes': 'min',
+  'common.seconds': 'sec',
  'common.now': 'Ahora',
  'common.next': 'Siguiente',
  'common.scheduled_start': 'Inicio programado',
@@ -15,6 +16,7 @@ export const langEs: TranslationObject = {
  'common.no_data': 'Sin datos',
  'countdown.ended': 'Evento finalizado a las',
  'countdown.running': 'Evento en curso',
+  'countdown.loaded': 'Evento está cargado', //TODO: check translation
  'countdown.select_event': 'Seleccionar un evento para seguir',
  'countdown.to_start': 'Tiempo para comenzar',
  'countdown.waiting': 'Esperando el inicio del evento',
@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langFr: TranslationObject = {
  'common.expected_finish': 'Fin estimée à',
  'common.minutes': 'min',
+  'common.seconds': 'sec',
  'common.now': 'Maintenant',
  'common.next': 'A suivre',
  'common.scheduled_start': 'Début prévu',
@@ -15,6 +16,7 @@ export const langFr: TranslationObject = {
  'common.no_data': 'Aucune donnée',
  'countdown.ended': 'Évènement terminé à',
  'countdown.running': 'Évènement en cours',
+  'countdown.loaded': 'Évènement chargé',
  'countdown.select_event': 'Sélectionnez un évènement à suivre',
  'countdown.to_start': 'Évènement commence dans',
  'countdown.waiting': 'En attente du début de l’évènement',
@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langIt: TranslationObject = {
  'common.expected_finish': 'Fine Prevista',
  'common.minutes': 'min',
+  'common.seconds': 'sec',
  'common.now': 'Adesso',
  'common.next': 'Prossimo',
  'common.scheduled_start': 'Inizio programmato',
@@ -15,6 +16,7 @@ export const langIt: TranslationObject = {
  'common.no_data': 'Nessun dato disponibile',
  'countdown.ended': 'Evento finito alle',
  'countdown.running': 'Evento in corso',
+  'countdown.loaded': 'Evento caricato', //TODO: check translation
  'countdown.select_event': 'Seleziona un evento da seguire',
  'countdown.to_start': 'Tempo alla partenza',
  'countdown.waiting': "In attesa dell'inizio dell'evento",
@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langPt: TranslationObject = {
  'common.expected_finish': 'Término esperado',
  'common.minutes': 'min',
+  'common.seconds': 'sec',
  'common.now': 'Agora',
  'common.next': 'Próximo',
  'common.scheduled_start': 'Início programado',
@@ -15,6 +16,7 @@ export const langPt: TranslationObject = {
  'common.no_data': 'Sem dados',
  'countdown.ended': 'Evento encerrado às',
  'countdown.running': 'Evento em andamento',
+  'countdown.loaded': 'Evento carregado', //TODO: check translation
  'countdown.select_event': 'Selecione um evento para acompanhar',
  'countdown.to_start': 'Tempo para iniciar',
  'countdown.waiting': 'Aguardando o início do evento',
@@ -10,15 +10,19 @@ import {
  makeProjectDataOptions,
 } from '../../common/components/view-params-editor/viewParams.utils';
 import { PresetContext } from '../../common/context/PresetContext';
-import { scheduleOptions } from '../common/schedule/schedule.options';
+import { getScheduleOptions } from '../common/schedule/schedule.options';

 export const getBackstageOptions = (
  timeFormat: string,
  customFields: CustomFields,
  projectData: ProjectData,
 ): ViewOption[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, [{ value: 'note', label: 'Note' }]);
-  const projectDataOptions = makeProjectDataOptions(projectData);
+  const customFieldOptions = makeOptionsFromCustomFields(customFields, []);
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
+    { value: 'note', label: 'Note' },
+  ]);
+  const projectDataOptions = makeProjectDataOptions(projectData, [{ value: 'none', label: 'None' }]);

  return [
    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
@@ -32,11 +36,11 @@ export const getBackstageOptions = (
          description: 'Select the data source for auxiliary text shown in now and next cards',
          type: 'option',
          values: secondaryOptions,
-          defaultValue: '',
+          defaultValue: 'none',
        },
      ],
    },
-    scheduleOptions,
+    getScheduleOptions(customFieldOptions),
    {
      title: OptionTitle.ElementVisibility,
      collapsible: true,
@@ -47,7 +51,7 @@ export const getBackstageOptions = (
          description: 'Select a project data source to show in the view',
          type: 'option',
          values: projectDataOptions,
-          defaultValue: '',
+          defaultValue: 'none',
        },
      ],
    },
@@ -1,14 +1,5 @@
-import {
-  createContext,
-  PropsWithChildren,
-  RefObject,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import { isOntimeEvent, OntimeEntry, OntimeEvent } from 'ontime-types';
+import { createContext, PropsWithChildren, RefObject, use, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { EntryId, isOntimeEvent, OntimeEntry, OntimeEvent } from 'ontime-types';

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

@@ -25,13 +16,18 @@ interface ScheduleContextState {
 const ScheduleContext = createContext<ScheduleContextState | undefined>(undefined);

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

 export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildren<ScheduleProviderProps>) => {
-  const { cycleInterval, stopCycle } = useScheduleOptions();
-  const { data: events } = usePartialRundown((event: OntimeEntry) => {
-    return isOntimeEvent(event);
+  const { cycleInterval, stopCycle, filter } = useScheduleOptions();
+  const { data: events } = usePartialRundown((entry: 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 [firstIndex, setFirstIndex] = useState(-1);
@@ -135,7 +131,7 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
  selectedEventIndex = 0;

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

 export const useSchedule = () => {
-  const context = useContext(ScheduleContext);
+  const context = use(ScheduleContext);
  if (!context) {
    throw new Error('useSchedule() can only be used inside a ScheduleContext');
  }
@@ -22,8 +22,7 @@ interface ScheduleItemProps {
  delay: number;
 }

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

  if (showExpected) {
@@ -67,9 +66,7 @@ export default function ScheduleItem(props: ScheduleItemProps) {
  );
 }

-function DelayedScheduleItem(props: ScheduleItemProps) {
-  const { timeStart, timeEnd, title, colour, skip, delay } = props;
-
+function DelayedScheduleItem({ timeStart, timeEnd, title, colour, skip, delay }: ScheduleItemProps) {
  const start = formatTime(timeStart, formatOptions);
  const end = formatTime(timeEnd, formatOptions);
  const delayedStart = formatTime(timeStart + delay, formatOptions);
@@ -95,9 +92,7 @@ function DelayedScheduleItem(props: ScheduleItemProps) {
  );
 }

-function ExpectedScheduleItem(props: ScheduleItemProps) {
-  const { timeStart, timeEnd, title, colour, skip, delay } = props;
-
+function ExpectedScheduleItem({ timeStart, timeEnd, title, colour, skip, delay }: ScheduleItemProps) {
  return (
    <li className={cx(['entry', skip && 'entry--skip'])}>
      <div className='entry-times'>
@@ -116,12 +111,11 @@ interface ExpectedTimeProps {
  delay: number;
 }

-function ExpectedTime(props: ExpectedTimeProps) {
-  const { time, delay } = props;
+function ExpectedTime({ time, delay }: ExpectedTimeProps) {
  const { offset } = useRuntimeOffset();

  const expectedOffset = offset - delay;
-  const expectedTime = formatTime(time - offset, formatOptions);
+  const expectedTime = formatTime(time + offset, formatOptions);
  const expectedState = getOffsetState(expectedOffset);

  return <SuperscriptTime className={`entry-times--${expectedState}`} time={expectedTime} />;
@@ -1,14 +1,23 @@
 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 { ViewOption } from '../../../common/components/view-params-editor/viewParams.types';
+import type { ViewOption } from '../../../common/components/view-params-editor/viewParams.types';
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';

-export const scheduleOptions: ViewOption = {
+export const getScheduleOptions = (customFieldOptions: SelectOption[]): 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',
@@ -31,9 +40,10 @@ export const scheduleOptions: ViewOption = {
      defaultValue: false,
    },
  ],
-};
+});

 type ScheduleOptions = {
+  filter: string | null;
  cycleInterval: number;
  stopCycle: boolean;
  showExpected: boolean;
@@ -41,6 +51,7 @@ 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')),
@@ -118,7 +118,11 @@ $item-height: 3.5rem;
  }

  .sub--live {
-    background-color: $green-700;
+    background-color: $active-green;
+  }
+
+  .sub--armed {
+    background-color: $gray-1325;
  }

  .sub__binder {
@@ -137,15 +141,19 @@ $item-height: 3.5rem;
  }

  .sub__schedule--delayed {
-    color: $delay-color;
+    color: $ontime-delay-text;
+  }
+
+  .sub__schedule--strike {
+    text-decoration: line-through;
  }

  .sub__schedule--over {
-    color: $playback-over
+    color: $playback-over;
  }

  .sub__schedule--under {
-    color: $playback-under
+    color: $playback-under;
  }

  .sub__title {
@@ -9,6 +9,7 @@ import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useClock } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { formatTime, getDefaultFormat } from '../../common/utils/time';
 import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
 import { useTranslation } from '../../translation/TranslationProvider';
@@ -39,14 +40,14 @@ export default function CountdownLoader() {
  return <Countdown {...data} />;
 }

-function Countdown({ customFields, events, projectData, isMirrored, settings }: CountdownData) {
+function Countdown({ customFields, rundownData, projectData, isMirrored, settings }: CountdownData) {
  const { getLocalizedString } = useTranslation();
  const { subscriptions } = useCountdownOptions();

  const [editMode, setEditMode] = useState(false);

  // gather rundown data
-  const playableEvents = events.filter((event) => isOntimeEvent(event) && isPlayableEvent(event));
+  const playableEvents = rundownData.filter((entry) => isOntimeEvent(entry) && isPlayableEvent(entry));

  // gather presentation data
  const hasEvents = playableEvents.length > 0;
@@ -85,7 +86,7 @@ function Countdown({ customFields, events, projectData, isMirrored, settings }:
 }

 interface CountdownContentsProps {
-  playableEvents: OntimeEvent[];
+  playableEvents: ExtendedEntry<OntimeEvent>[];
  subscriptions: EntryId[];
  goToEditMode: () => void;
 }
@@ -1,32 +1,37 @@
 import { useEffect, useRef, useState } from 'react';
 import { IoPencil } from 'react-icons/io5';
-import { EntryId, OntimeEvent } from 'ontime-types';
+import { MaybeNumber, OntimeEvent } from 'ontime-types';
+import { dayInMs } from 'ontime-utils';

 import Button from '../../common/components/buttons/Button';
 import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
 import useFollowComponent from '../../common/hooks/useFollowComponent';
-import {
-  useCountdownSocket,
-  useCurrentDay,
-  usePlayback,
-  useRuntimeOffset,
-  useSelectedEventId,
-} from '../../common/hooks/useSocket';
+import { useExpectedStartData, usePlayback, useSelectedEventId } from '../../common/hooks/useSocket';
+import useReport from '../../common/hooks-query/useReport';
 import { getOffsetState } from '../../common/utils/offset';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { cx } from '../../common/utils/styleUtils';
 import { throttle } from '../../common/utils/throttle';
 import FollowButton from '../../features/operator/follow-button/FollowButton';
 import ClockTime from '../../features/viewers/common/clock-time/ClockTime';
+import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
 import { getPropertyValue } from '../../features/viewers/common/viewUtils';
-import { useTranslation } from '../../translation/TranslationProvider';

 import { useCountdownOptions } from './countdown.options';
-import { getIsLive, getSubscriptionDisplayData, sanitiseTitle, timerProgress } from './countdown.utils';
+import {
+  CountdownEvent,
+  extendEventData,
+  getIsLive,
+  isOutsideRange,
+  preferredFormat12,
+  preferredFormat24,
+  useSubscriptionDisplayData,
+} from './countdown.utils';

 import './Countdown.scss';

 interface CountdownSubscriptionsProps {
-  subscribedEvents: OntimeEvent[];
+  subscribedEvents: ExtendedEntry<OntimeEvent>[];
  goToEditMode: () => void;
 }

@@ -36,6 +41,9 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
  const { selectedEventId } = useSelectedEventId();
  const showFab = useFadeOutOnInactivity(true);

+  const { data: reportData } = useReport();
+  const { offset, currentDay, actualStart, plannedStart, mode } = useExpectedStartData();
+
  const timeoutId = useRef<NodeJS.Timeout | null>(null);
  const [lockAutoScroll, setLockAutoScroll] = useState(false);
  const selectedRef = useRef<HTMLDivElement | null>(null);
@@ -45,6 +53,7 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
    scrollRef,
    doFollow: !lockAutoScroll,
    topOffset: 0,
+    followTrigger: selectedEventId,
  });

  // reset scroll if nothing is selected
@@ -92,23 +101,19 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
      {subscribedEvents.map((event) => {
        const secondaryData = getPropertyValue(event, secondarySource);
        const isLive = getIsLive(event.id, selectedEventId, playback);
-
+        const isArmed = !isLive && event.id === selectedEventId;
+        const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
+        const title = event.title.length ? event.title : ' '; // insert utf-8 empty space to avoid the line collapsing
        return (
-          <div key={event.id} ref={isLive ? selectedRef : undefined} className={cx(['sub', isLive && 'sub--live'])}>
+          <div
+            key={event.id}
+            ref={isLive ? selectedRef : undefined}
+            className={cx(['sub', isLive && 'sub--live', isArmed && 'sub--armed'])}
+          >
            <div className='sub__binder' style={{ '--user-color': event.colour }} />
-            <div className={cx(['sub__schedule', event.delay > 0 && 'sub__schedule--delayed'])}>
-              {showExpected ? (
-                <ExpectedSchedule timeStart={event.timeStart} timeEnd={event.timeEnd} delay={event.delay} />
-              ) : (
-                <>
-                  <ClockTime value={event.timeStart + event.delay} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
-                  →
-                  <ClockTime value={event.timeEnd + event.delay} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
-                </>
-              )}
-            </div>
-            <SubscriptionStatus key={event.id} event={event} selectedEventId={selectedEventId} />
-            <div className={cx(['sub__title', !event.title && 'subdued'])}>{sanitiseTitle(event.title)}</div>
+            <ScheduleTime event={countdownEvent} showExpected={showExpected} />
+            <SubscriptionStatus event={countdownEvent} />
+            <div className={cx(['sub__title', !event.title && 'subdued'])}>{title}</div>
            {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
          </div>
        );
@@ -123,63 +128,82 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
  );
 }

-interface ExpectedScheduleProps {
-  timeStart: number;
-  timeEnd: number;
-  delay: number;
-}
-function ExpectedSchedule(props: ExpectedScheduleProps) {
-  const { timeStart, timeEnd, delay } = props;
+type ScheduleTimeProps = {
+  event: CountdownEvent;
+  showExpected: boolean;
+};
+//TODO: consider relative mode
+export function ScheduleTime(props: ScheduleTimeProps) {
+  const { event, showExpected } = props;
+  const { timeStart, duration, delay, expectedStart, countToEnd } = event;

-  const { offset } = useRuntimeOffset();
+  const plannedStart = timeStart + delay + event.dayOffset * dayInMs;

-  // offset is negative if we are ahead
-  const expectedOffset = offset - delay;
-  const expectedState = getOffsetState(expectedOffset);
+  // only show new exacted value if outside  range of the planned value
+  const isExpectedValueShow = showExpected && isOutsideRange(plannedStart, expectedStart);
+
+  const plannedStateClass = isExpectedValueShow ? 'sub__schedule--strike' : delay !== 0 ? 'sub__schedule--delayed' : '';
+
+  const expectedStateClass = `sub__schedule--${getOffsetState(expectedStart - plannedStart)}`;
+  const plannedEnd = plannedStart + duration + delay;
+  const expectedEnd = countToEnd ? Math.max(expectedStart + duration, plannedEnd) : expectedStart + duration;
+  const expectedEndClass = `sub__schedule--${getOffsetState(expectedEnd - plannedEnd)}`;

  return (
-    <>
+    <div className='sub__schedule'>
      <ClockTime
-        value={timeStart - expectedOffset}
-        className={`sub__schedule--${expectedState}`}
-        preferredFormat12='h:mm'
-        preferredFormat24='HH:mm'
+        value={plannedStart}
+        preferredFormat12={preferredFormat12}
+        preferredFormat24={preferredFormat24}
+        className={plannedStateClass}
      />
-      →
-      <ClockTime value={timeEnd - expectedOffset} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
-    </>
+      {!isExpectedValueShow && (
+        <>
+          →
+          <ClockTime
+            value={plannedEnd}
+            preferredFormat12={preferredFormat12}
+            preferredFormat24={preferredFormat24}
+            className={plannedStateClass}
+          />
+        </>
+      )}
+      {isExpectedValueShow && (
+        <>
+          <ClockTime
+            value={expectedStart}
+            className={expectedStateClass}
+            preferredFormat12={preferredFormat12}
+            preferredFormat24={preferredFormat24}
+          />
+          →
+          <ClockTime
+            value={expectedEnd}
+            className={expectedEndClass}
+            preferredFormat12={preferredFormat12}
+            preferredFormat24={preferredFormat24}
+          />
+        </>
+      )}
+    </div>
  );
 }

 interface SubscriptionStatusProps {
-  event: OntimeEvent;
-  selectedEventId: EntryId | null;
+  event: ExtendedEntry<OntimeEvent> & { endedAt: MaybeNumber; expectedStart: number };
 }

-function SubscriptionStatus({ event, selectedEventId }: SubscriptionStatusProps) {
-  const { getLocalizedString } = useTranslation();
-  const { currentDay } = useCurrentDay();
-  const { offset } = useRuntimeOffset();
-  const { showExpected } = useCountdownOptions();
-  const { playback, current, clock } = useCountdownSocket();
-
-  // TODO: use reporter values as in the event block chip
-  const { status, timer } = getSubscriptionDisplayData(
-    current,
-    playback,
-    clock,
-    event,
-    selectedEventId,
-    offset,
-    currentDay,
-    getLocalizedString('common.minutes'),
-    showExpected,
-  );
+function SubscriptionStatus({ event }: SubscriptionStatusProps) {
+  const { status, statusDisplay, timeDisplay } = useSubscriptionDisplayData(event);

  return (
    <>
-      <div className='sub__status'>{getLocalizedString(timerProgress[status])}</div>
-      <div className='sub__timer'>{timer}</div>
+      <div className='sub__status'>{statusDisplay}</div>
+      {status === 'done' ? (
+        <SuperscriptTime className='sub__timer' time={timeDisplay} />
+      ) : (
+        <div className='sub__timer'>{timeDisplay}</div>
+      )}
    </>
  );
 }
@@ -1,11 +1,10 @@
@use '@/theme/viewerDefs' as *;

 .single-container {
-  height: 100%;
-  margin-top: 5vh;
+  margin-top: 7.5vh;
  display: flex;
  flex-direction: column;
-  gap: $view-element-gap;
+  gap: 5rem;
 }

 .event__title {
@@ -13,13 +12,25 @@
  padding: $view-card-padding;
  border-radius: $element-border-radius;
  font-size: clamp(40px, 4.5vw, 80px);
-  line-height: 1.1em;
+  line-height: 1.1;
  text-align: center;
+  border-left: 0.25em solid;
+  border-color: var(--card-background-color-override, $viewer-card-bg-color);
+
+  .secondary {
+    text-align: left;
+    font-size: $title-font-size;
+  }
+
+  .sub__schedule {
+    color: inherit;
+    font-size: $base-font-size;
+  }
 }

 .event__status {
  color: var(--secondary-color-override, $viewer-secondary-color);
-  font-size: clamp(2rem, 3.5vw, 3.5rem);
+  font-size: $header-font-size;
  font-weight: 600;
  text-transform: uppercase;
 }
@@ -1,29 +1,57 @@
 import { IoPencil } from 'react-icons/io5';
-import { OntimeEvent } from 'ontime-types';
+import { MaybeNumber, OntimeEvent } from 'ontime-types';
+import { getExpectedStart } from 'ontime-utils';

 import Button from '../../common/components/buttons/Button';
 import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
-import { useCountdownSocket, useCurrentDay, useRuntimeOffset, useSelectedEventId } from '../../common/hooks/useSocket';
+import { useExpectedStartData } from '../../common/hooks/useSocket';
+import useReport from '../../common/hooks-query/useReport';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { cx } from '../../common/utils/styleUtils';
-import { useTranslation } from '../../translation/TranslationProvider';
+import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
+import { getPropertyValue } from '../../features/viewers/common/viewUtils';

 import { useCountdownOptions } from './countdown.options';
-import { getSubscriptionDisplayData, timerProgress } from './countdown.utils';
+import { useSubscriptionDisplayData } from './countdown.utils';
+import { ScheduleTime } from './CountdownSubscriptions';

 import './SingleEventCountdown.scss';

 interface SingleEventCountdownProps {
-  subscribedEvent: OntimeEvent;
+  subscribedEvent: ExtendedEntry<OntimeEvent>;
  goToEditMode: () => void;
 }

 export default function SingleEventCountdown({ subscribedEvent, goToEditMode }: SingleEventCountdownProps) {
+  const { secondarySource, showExpected } = useCountdownOptions();
  const showFab = useFadeOutOnInactivity(true);
+  const { data: reportData } = useReport();
+
+  const { offset, currentDay, actualStart, plannedStart, mode } = useExpectedStartData();
+  const { totalGap, isLinkedToLoaded } = subscribedEvent;
+  const expectedStart = getExpectedStart(subscribedEvent, {
+    currentDay,
+    totalGap,
+    actualStart,
+    plannedStart,
+    isLinkedToLoaded,
+    offset,
+    mode,
+  });
+
+  const { endedAt } = reportData[subscribedEvent.id] ?? { endedAt: null };
+  const countdownEvent = { ...subscribedEvent, expectedStart, endedAt };
+  const title = subscribedEvent.title.length ? subscribedEvent.title : ' '; // insert utf-8 empty space to avoid the line collapsing
+  const secondaryData = getPropertyValue(subscribedEvent, secondarySource);

  return (
    <div className='single-container' data-testid='countdown-event'>
-      <SubscriptionStatus event={subscribedEvent} />
-      <div className='event__title'>{subscribedEvent.title}</div>
+      <SubscriptionStatus event={countdownEvent} />
+      <div className='event__title' style={{ borderColor: countdownEvent.colour }}>
+        <ScheduleTime event={countdownEvent} showExpected={showExpected} />
+        {title}
+        {secondaryData && <div className='secondary'>{secondaryData}</div>}
+      </div>
      <div className={cx(['fab-container', !showFab && 'fab-container--hidden'])}>
        <Button variant='primary' size='xlarge' onClick={goToEditMode}>
          <IoPencil /> Edit
@@ -34,34 +62,20 @@ export default function SingleEventCountdown({ subscribedEvent, goToEditMode }:
 }

 interface SubscriptionStatusProps {
-  event: OntimeEvent;
+  event: ExtendedEntry<OntimeEvent> & { endedAt: MaybeNumber; expectedStart: number };
 }

 function SubscriptionStatus({ event }: SubscriptionStatusProps) {
-  const { getLocalizedString } = useTranslation();
-  const { selectedEventId } = useSelectedEventId();
-  const { currentDay } = useCurrentDay();
-  const { offset } = useRuntimeOffset();
-  const { showExpected } = useCountdownOptions();
-  const { playback, current, clock } = useCountdownSocket();
-
-  // TODO: use reporter values as in the event block chip
-  const { status, timer } = getSubscriptionDisplayData(
-    current,
-    playback,
-    clock,
-    event,
-    selectedEventId,
-    offset,
-    currentDay,
-    getLocalizedString('common.minutes'),
-    showExpected,
-  );
+  const { status, statusDisplay, timeDisplay } = useSubscriptionDisplayData(event);

  return (
    <>
-      <div className='event__status'>{getLocalizedString(timerProgress[status])}</div>
-      <div className='event__timer'>{timer}</div>
+      <div className='event__status'>{statusDisplay}</div>
+      {status === 'done' ? (
+        <SuperscriptTime className='event__timer' time={timeDisplay} />
+      ) : (
+        <div className='event__timer'>{timeDisplay}</div>
+      )}
    </>
  );
 }
@@ -14,7 +14,10 @@ export const getCountdownOptions = (
  customFields: CustomFields,
  persistedSubscriptions: EntryId[],
 ): ViewOption[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, [{ value: 'note', label: 'Note' }]);
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
+    { value: 'note', label: 'Note' },
+  ]);

  return [
    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
@@ -28,7 +31,7 @@ export const getCountdownOptions = (
          description: 'Select the data source for auxiliary text shown in the card',
          type: 'option',
          values: secondaryOptions,
-          defaultValue: '',
+          defaultValue: 'none',
        },
      ],
    },
@@ -1,8 +1,11 @@
-import { EntryId, MaybeNumber, OntimeEvent, Playback, TimerType } from 'ontime-types';
-import { dayInMs } from 'ontime-utils';
+import { EntryId, MaybeNumber, OffsetMode, OntimeEntry, OntimeEvent, OntimeReport, Playback } from 'ontime-types';
+import { getExpectedStart, MILLIS_PER_MINUTE, removeSeconds } from 'ontime-utils';

-import { getFormattedTimer } from '../../features/viewers/common/viewUtils';
-import type { TranslationKey } from '../../translation/TranslationProvider';
+import { useCountdownSocket } from '../../common/hooks/useSocket';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
+import { timerPlaceholderMin } from '../../common/utils/styleUtils';
+import { formatDuration, formatTime } from '../../common/utils/time';
+import { type TranslationKey, useTranslation } from '../../translation/TranslationProvider';

 /**
 * Parses string as a title
@@ -11,6 +14,9 @@ export function sanitiseTitle(title: string | null) {
  return title ?? '{no title}';
 }

+export const preferredFormat12 = 'h:mm a';
+export const preferredFormat24 = 'HH:mm';
+
 /**
 * Whether the current event is live
 */
@@ -18,137 +24,96 @@ export function getIsLive(currentId: EntryId, selectedId: EntryId | null, playba
  return currentId === selectedId && playback !== Playback.Armed;
 }

-const subscriptionTimerDisplayOptions = {
-  removeSeconds: true,
-  removeLeadingZero: true,
-} as const;
-
-const subscriptionScheduledTimeDisplayOptions = {
-  removeSeconds: true,
-  removeLeadingZero: false,
-} as const;
-
-type TimerMessage = Record<string, TranslationKey>;
-export type ProgressStatus = 'future' | 'due' | 'live' | 'done';
+export type ProgressStatus = 'future' | 'due' | 'live' | 'done' | 'pending' | 'loaded';
+type TimerMessage = Record<ProgressStatus, TranslationKey>;

 export const timerProgress: TimerMessage = {
  future: 'countdown.to_start',
  due: 'timeline.due',
-  live: 'timeline.live',
+  live: 'countdown.running',
+  pending: 'countdown.waiting',
+  loaded: 'countdown.loaded',
  done: 'countdown.ended',
 };

+export function getFormattedTime(
+  value: MaybeNumber,
+  status: ProgressStatus,
+  minText: string,
+  secText: string,
+  dueText: string,
+) {
+  if (value === null) return timerPlaceholderMin;
+  if (status === 'future' || status === 'live') {
+    if (value <= 0) return dueText.toUpperCase();
+    return formatDuration(value, value > MILLIS_PER_MINUTE * 2)
+      .replace('m', `${minText} `)
+      .replace('s', secText);
+  }
+  return removeSeconds(formatTime(value));
+}
+
 /**
 * Returns a parsed timer and relevant status message
 * Handles events in different days but disregards whether an event has actually played
- * TODO: get data from reporter and check if the event has played
- * TODO: get timer data granularly
 */
-export function getSubscriptionDisplayData(
-  current: MaybeNumber,
-  playback: Playback,
-  clock: number,
-  subscribedEvent: OntimeEvent,
-  selectedId: EntryId | null,
-  offset: number,
-  currentDay: number,
-  minutesString: string,
-  showExpected = false,
-): { status: ProgressStatus; timer: string } {
-  const offsetAndDelay = showExpected ? offset + subscribedEvent.delay : 0;
+export function useSubscriptionDisplayData(
+  subscribedEvent: ExtendedEntry<OntimeEvent> & { endedAt: MaybeNumber; expectedStart: number },
+): { status: ProgressStatus; statusDisplay: string; timeDisplay: string } {
+  const { playback, current, clock } = useCountdownSocket();
+  const { getLocalizedString } = useTranslation();

-  if (selectedId === subscribedEvent.id) {
-    // 1. An event that is loaded but not running is {'due': <countdown | overtime>}
+  const bigDuration = (value: number) => {
+    if (value <= 0) return getLocalizedString('countdown.overtime').toUpperCase();
+    return formatDuration(value, value > MILLIS_PER_MINUTE * 2)
+      .replace('m', `${getLocalizedString('common.minutes')} `)
+      .replace('s', getLocalizedString('common.seconds'));
+  };
+
+  if (subscribedEvent.isLoaded) {
    if (playback === Playback.Armed) {
-      // if we are following the event, but it is not running, we show the scheduled start
      return {
-        status: 'due',
-        timer: getFormattedTimer(
-          subscribedEvent.timeStart + offsetAndDelay,
-          TimerType.CountDown,
-          minutesString,
-          subscriptionScheduledTimeDisplayOptions,
-        ),
+        status: 'loaded',
+        statusDisplay: getLocalizedString(timerProgress['loaded']),
+        timeDisplay: bigDuration(subscribedEvent.duration),
      };
    }

-    // 2. An event with a time-to-start lower than 0 is {'due': <countdown | scheduledStart>}, show the running timer
    return {
      status: 'live',
-      timer: getFormattedTimer(current, TimerType.CountDown, minutesString, subscriptionTimerDisplayOptions),
+      statusDisplay: getLocalizedString(timerProgress['live']),
+      timeDisplay: bigDuration(current ?? 0),
    };
  }

-  /**
-   * If the running timer is not the one we are following
-   * we can be in future, due or have ended
-   */
-
-  // 3. event is the day after, we show a countdown to start
-  if (subscribedEvent.dayOffset > currentDay) {
-    const dayOffset = (subscribedEvent.dayOffset - currentDay) * dayInMs;
+  if (playback === Playback.Stop || playback === Playback.Armed) {
    return {
-      status: 'future',
-      timer: getFormattedTimer(
-        subscribedEvent.timeStart + dayOffset - clock - offsetAndDelay,
-        TimerType.CountDown,
-        minutesString,
-        subscriptionTimerDisplayOptions,
-      ),
+      status: 'pending',
+      statusDisplay: getLocalizedString(timerProgress['pending']),
+      timeDisplay: ' ',
    };
  }

-  // 4. event is the before after, show the scheduled end
-  // TODO: get the time from the reporter
-  if (subscribedEvent.dayOffset < currentDay) {
+  if (subscribedEvent.isPast) {
    return {
      status: 'done',
-      timer: getFormattedTimer(
-        subscribedEvent.timeEnd,
-        TimerType.CountDown,
-        minutesString,
-        subscriptionScheduledTimeDisplayOptions,
-      ),
+      statusDisplay: getLocalizedString(timerProgress['done']),
+      timeDisplay: formatTime(subscribedEvent.endedAt, { format12: preferredFormat12, format24: preferredFormat24 }),
    };
  }

-  // 5. if event is in future, we count to the scheduled start
-  // TODO: get time until
-  if (clock < subscribedEvent.timeStart) {
+  if (subscribedEvent.expectedStart - clock <= 0) {
    return {
-      status: 'future',
-      timer: getFormattedTimer(
-        subscribedEvent.timeStart - clock - offsetAndDelay,
-        TimerType.CountDown,
-        minutesString,
-        subscriptionTimerDisplayOptions,
-      ),
+      status: 'due',
+      statusDisplay: getLocalizedString(timerProgress['future']), // We use future here on purpose for the look of it
+      timeDisplay: getLocalizedString(timerProgress['due']).toUpperCase(),
    };
  }

-  // 6. if event has ended, we show the scheduled end
-  // TODO: get the time from the reporter
-  if (clock > subscribedEvent.timeEnd) {
-    return {
-      status: 'done',
-      timer: getFormattedTimer(
-        subscribedEvent.timeEnd,
-        TimerType.CountDown,
-        minutesString,
-        subscriptionScheduledTimeDisplayOptions,
-      ),
-    };
-  }
-
-  // the event here has to be due, we show the countdown the expected start time
  return {
-    status: 'due',
-    timer: getFormattedTimer(
-      subscribedEvent.timeStart + offsetAndDelay,
-      TimerType.CountDown,
-      minutesString,
-      subscriptionScheduledTimeDisplayOptions,
-    ),
+    status: 'future',
+    statusDisplay: getLocalizedString(timerProgress['future']),
+    timeDisplay: bigDuration(subscribedEvent.expectedStart - clock),
  };
 }

@@ -181,7 +146,7 @@ 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(subscriptions: EntryId[], playableEvents: OntimeEvent[]): OntimeEvent[] {
+export function getOrderedSubscriptions<T extends OntimeEntry>(subscriptions: EntryId[], playableEvents: T[]): T[] {
  return playableEvents.filter((event) => subscriptions.includes(event.id));
 }

@@ -212,3 +177,32 @@ export function isLinkedToLoadedEvent(events: OntimeEvent[], loadedId: EntryId |

  return true;
 }
+
+export function isOutsideRange(a: number, b: number): boolean {
+  return Math.abs(a - b) > MILLIS_PER_MINUTE;
+}
+
+export type CountdownEvent = ExtendedEntry<OntimeEvent> & { expectedStart: number; endedAt: MaybeNumber };
+
+export function extendEventData(
+  event: ExtendedEntry<OntimeEvent>,
+  currentDay: number,
+  actualStart: MaybeNumber,
+  plannedStart: MaybeNumber,
+  offset: number,
+  mode: OffsetMode,
+  reportData: OntimeReport,
+): CountdownEvent {
+  const { totalGap, isLinkedToLoaded } = event;
+  const expectedStart = getExpectedStart(event, {
+    currentDay,
+    totalGap,
+    actualStart,
+    plannedStart,
+    isLinkedToLoaded,
+    offset,
+    mode,
+  });
+  const { endedAt } = reportData[event.id] ?? { endedAt: null };
+  return { ...event, expectedStart, endedAt };
+}
@@ -2,14 +2,15 @@ import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';

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

 export interface CountdownData {
  customFields: CustomFields;
-  events: OntimeEntry[];
+  rundownData: ExtendedEntry<OntimeEntry>[];
  projectData: ProjectData;
  isMirrored: boolean;
  settings: Settings;
@@ -20,7 +21,7 @@ export function useCountdownData(): ViewData<CountdownData> {
  const isMirrored = useViewOptionsStore((state) => state.mirror);

  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundown();
+  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
  const { data: projectData, status: projectDataStatus } = useProjectData();
  const { data: settings, status: settingsStatus } = useSettings();
  const { data: customFields, status: customFieldsStatus } = useCustomFields();
@@ -28,7 +29,7 @@ export function useCountdownData(): ViewData<CountdownData> {
  return {
    data: {
      customFields,
-      events: rundownData,
+      rundownData,
      projectData,
      isMirrored,
      settings,
@@ -11,14 +11,14 @@ import {
 import { ColumnDef } from '@tanstack/react-table';

 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
-import useColumnManager from '../cuesheet-table/useColumnManager';
+import { useColumnOrder } from '../cuesheet-table/useColumnManager';

 interface CuesheetDndProps {
  columns: ColumnDef<ExtendedEntry>[];
 }

 export default function CuesheetDnd({ columns, children }: PropsWithChildren<CuesheetDndProps>) {
-  const { columnOrder, saveColumnOrder } = useColumnManager(columns);
+  const { columnOrder, saveColumnOrder } = useColumnOrder(columns);

  const sensors = useSensors(
    useSensor(PointerSensor, {
@@ -13,14 +13,14 @@ import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { AppMode } from '../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../cuesheet.options';

-import CuesheetHeader from './cuesheet-table-elements/CuesheetHeader';
+import { CuesheetHeader, SortableCuesheetHeader } from './cuesheet-table-elements/CuesheetHeader';
 import DelayRow from './cuesheet-table-elements/DelayRow';
 import EventRow from './cuesheet-table-elements/EventRow';
 import GroupRow from './cuesheet-table-elements/GroupRow';
 import MilestoneRow from './cuesheet-table-elements/MilestoneRow';
 import CuesheetTableMenu from './cuesheet-table-menu/CuesheetTableMenu';
 import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
-import useColumnManager from './useColumnManager';
+import { useColumnOrder, useColumnSizes, useColumnVisibility } from './useColumnManager';

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

@@ -79,8 +79,9 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
    [cuesheetMode, data, hideIndexColumn, hideTableSeconds, showDelayedTimes, updateEntry, updateTimer],
  );

-  const { columnVisibility, columnOrder, columnSizing, resetColumnOrder, setColumnVisibility, setColumnSizing } =
-    useColumnManager(columns);
+  const { columnOrder, resetColumnOrder } = useColumnOrder(columns);
+  const { columnSizing, setColumnSizing } = useColumnSizes();
+  const { columnVisibility, setColumnVisibility } = useColumnVisibility();

  const table = useReactTable({
    data,
@@ -167,7 +168,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
              />
            );
          },
-          TableRow: ({ item: _item, ...virtuosoProps }) => {
+          TableRow: ({ item: _item, style: injectedStyles, ...virtuosoProps }) => {
            // eslint-disable-next-line react/destructuring-assignment
            const rowIndex = virtuosoProps['data-index'];
            const row = rows[rowIndex];
@@ -183,13 +184,16 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
                  rowId={row.id}
                  rowIndex={row.index}
                  table={table}
+                  injectedStyles={injectedStyles}
                  {...virtuosoProps}
                />
              );
            }

            if (isOntimeDelay(entry)) {
-              return <DelayRow key={key} duration={entry.duration} {...virtuosoProps} />;
+              return (
+                <DelayRow key={key} duration={entry.duration} injectedStyles={injectedStyles} {...virtuosoProps} />
+              );
            }

            if (isOntimeMilestone(entry)) {
@@ -204,6 +208,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
                  rowId={row.id}
                  rowIndex={rowIndex}
                  table={table}
+                  injectedStyles={injectedStyles}
                  {...virtuosoProps}
                />
              );
@@ -225,6 +230,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
                rowId={row.id}
                rowIndex={rowIndex}
                table={table}
+                injectedStyles={injectedStyles}
                {...virtuosoProps}
              />
            );
@@ -232,11 +238,14 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
          TableHead: (virtuosoProps) => <thead className={style.tableHeader} {...virtuosoProps} />,
        }}
        fixedHeaderContent={() => {
-          return table
-            .getHeaderGroups()
-            .map((headerGroup) => (
-              <CuesheetHeader key={headerGroup.id} cuesheetMode={cuesheetMode} headerGroup={headerGroup} />
-            ));
+          return table.getHeaderGroups().map((headerGroup) => {
+            const HeaderComponent = table.getState().columnSizingInfo.isResizingColumn
+              ? CuesheetHeader
+              : SortableCuesheetHeader;
+
+            // if the table is being resized, we render non-sortable headers to avoid performance issues
+            return <HeaderComponent key={headerGroup.id} cuesheetMode={cuesheetMode} headerGroup={headerGroup} />;
+          });
        }}
      />

@@ -7,7 +7,7 @@ import { getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';

-import { SortableCell } from './SortableCell';
+import { Draggable, SortableCell, TableCell } from './SortableCell';

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

@@ -16,8 +16,9 @@ interface CuesheetHeaderProps {
  cuesheetMode: AppMode;
 }

-export default function CuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHeaderProps) {
+export function SortableCuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHeaderProps) {
  const hideIndexColumn = usePersistedCuesheetOptions((state) => state.hideIndexColumn);
+
  return (
    <tr key={headerGroup.id}>
      {cuesheetMode === AppMode.Edit && <th className={style.actionColumn} tabIndex={-1} />}
@@ -43,8 +44,10 @@ export default function CuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHe
          return (
            <SortableCell
              key={header.column.columnDef.id}
-              header={header}
+              columnId={header.column.id}
+              colSpan={header.colSpan}
              injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
+              draggable={<Draggable header={header} />}
            >
              {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
            </SortableCell>
@@ -54,3 +57,43 @@ export default function CuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHe
    </tr>
  );
 }
+
+export function CuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHeaderProps) {
+  const hideIndexColumn = usePersistedCuesheetOptions((state) => state.hideIndexColumn);
+
+  return (
+    <tr key={headerGroup.id}>
+      {cuesheetMode === AppMode.Edit && <th className={style.actionColumn} tabIndex={-1} />}
+      {!hideIndexColumn && (
+        <th className={style.indexColumn} tabIndex={-1}>
+          #
+        </th>
+      )}
+      {headerGroup.headers.map((header) => {
+        const customBackground = header.column.columnDef.meta?.colour;
+        const canWrite = header.column.columnDef.meta?.canWrite;
+
+        const customStyles: CSSProperties = {
+          opacity: canWrite ? 1 : 0.6,
+        };
+        if (customBackground) {
+          const customColour = getAccessibleColour(customBackground);
+          customStyles.backgroundColor = customColour.backgroundColor;
+          customStyles.color = customColour.color;
+        }
+
+        return (
+          <TableCell
+            key={header.column.columnDef.id}
+            columnId={header.column.id}
+            colSpan={header.colSpan}
+            injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
+            draggable={<Draggable header={header} />}
+          >
+            {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+          </TableCell>
+        );
+      })}
+    </tr>
+  );
+}
@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { CSSProperties, memo } from 'react';

 import { millisToDelayString } from '../../../../common/utils/dateConfig';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
@@ -7,9 +7,10 @@ import style from './DelayRow.module.scss';

 interface DelayRowProps {
  duration: number;
+  injectedStyles?: CSSProperties;
 }

-function DelayRow({ duration, ...virtuosoProps }: DelayRowProps) {
+function DelayRow({ duration, injectedStyles, ...virtuosoProps }: DelayRowProps) {
  const hideDelays = usePersistedCuesheetOptions((state) => state.hideDelays);

  if (hideDelays || duration === 0) {
@@ -19,7 +20,7 @@ function DelayRow({ duration, ...virtuosoProps }: DelayRowProps) {
  const delayTime = millisToDelayString(duration, 'expanded');

  return (
-    <tr className={style.delayRow} data-testid='cuesheet-delay' {...virtuosoProps}>
+    <tr className={style.delayRow} data-testid='cuesheet-delay' style={injectedStyles} {...virtuosoProps}>
      <td tabIndex={0}>{delayTime}</td>
    </tr>
  );
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { CSSProperties, useMemo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { flexRender, Table } from '@tanstack/react-table';
 import { EntryId, OntimeEntry, RGBColour, SupportedEntry } from 'ontime-types';
@@ -26,6 +26,7 @@ interface EventRowProps {
  parent: EntryId | null;
  rowIndex: number;
  table: Table<ExtendedEntry<OntimeEntry>>;
+  injectedStyles?: CSSProperties;
 }

 export default function EventRow({
@@ -42,6 +43,7 @@ export default function EventRow({
  parent,
  rowIndex,
  table,
+  injectedStyles,
  ...virtuosoProps
 }: EventRowProps) {
  const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
@@ -81,6 +83,7 @@ export default function EventRow({
        parent && style.hasParent,
      ])}
      style={{
+        ...injectedStyles,
        opacity: `${isPast ? '0.2' : '1'}`,
        '--user-bg': groupColour ?? 'transparent',
      }}
@@ -4,3 +4,7 @@
  padding-top: 0.25em;
  width: 100%;
 }
+
+.multiline {
+  white-space: break-spaces;
+}
@@ -2,6 +2,10 @@ import { PropsWithChildren } from 'react';

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

-export default function GhostedText({ children }: PropsWithChildren) {
-  return <div className={style.ghostedText}>{children}</div>;
+interface GhostedTextProps {
+  multiline?: boolean;
+}
+
+export default function GhostedText({ children, multiline }: PropsWithChildren<GhostedTextProps>) {
+  return <div className={`${style.ghostedText} ${multiline ? style.multiline : ''}`}>{children}</div>;
 }
@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { flexRender, Table } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
@@ -15,9 +16,18 @@ interface GroupRowProps {
  rowId: string;
  rowIndex: number;
  table: Table<ExtendedEntry>;
+  injectedStyles?: CSSProperties;
 }

-export default function GroupRow({ groupId, colour, rowId, rowIndex, table, ...virtuosoProps }: GroupRowProps) {
+export default function GroupRow({
+  groupId,
+  colour,
+  rowId,
+  rowIndex,
+  table,
+  injectedStyles,
+  ...virtuosoProps
+}: GroupRowProps) {
  const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
    cuesheetMode: AppMode.Edit,
    hideIndexColumn: false,
@@ -26,7 +36,12 @@ export default function GroupRow({ groupId, colour, rowId, rowIndex, table, ...v
  const openMenu = useCuesheetTableMenu((store) => store.openMenu);

  return (
-    <tr className={style.groupRow} style={{ '--user-bg': colour }} data-testid='cuesheet-group' {...virtuosoProps}>
+    <tr
+      className={style.groupRow}
+      style={{ ...injectedStyles, '--user-bg': colour }}
+      data-testid='cuesheet-group'
+      {...virtuosoProps}
+    >
      {cuesheetMode === AppMode.Edit && (
        <td className={style.actionColumn} tabIndex={-1} role='cell'>
          <IconButton
@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { flexRender, Table } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
@@ -20,6 +21,7 @@ interface MilestoneRowProps {
  rowId: string;
  rowIndex: number;
  table: Table<ExtendedEntry>;
+  injectedStyles?: CSSProperties;
 }

 export default function MilestoneRow({
@@ -31,6 +33,7 @@ export default function MilestoneRow({
  rowId,
  rowIndex,
  table,
+  injectedStyles,
  ...virtuosoProps
 }: MilestoneRowProps) {
  const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
@@ -56,6 +59,7 @@ export default function MilestoneRow({
    <tr
      className={cx([style.milestoneRow, Boolean(parentBgColour) && style.hasParent])}
      style={{
+        ...injectedStyles,
        opacity: `${isPast ? '0.2' : '1'}`,
        '--user-bg': parentBgColour ?? 'transparent',
      }}
@@ -8,16 +8,16 @@ import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import style from '../CuesheetTable.module.scss';

 interface SortableCellProps {
-  header: Header<ExtendedEntry, unknown>;
+  columnId: string;
+  colSpan: number;
  injectedStyles: CSSProperties;
  children: ReactNode;
+  draggable: ReactNode;
 }

-export function SortableCell({ header, injectedStyles, children }: SortableCellProps) {
-  const { column, colSpan } = header;
-
+export function SortableCell({ columnId, colSpan, injectedStyles, children, draggable }: SortableCellProps) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: column.id,
+    id: columnId,
  });

  // build drag styles
@@ -34,12 +34,31 @@ export function SortableCell({ header, injectedStyles, children }: SortableCellP
      <div {...attributes} {...listeners}>
        {children}
      </div>
-      <div
-        onDoubleClick={() => header.column.resetSize()}
-        onMouseDown={header.getResizeHandler()}
-        onTouchStart={header.getResizeHandler()}
-        className={style.resizer}
-      />
+      {draggable}
    </th>
  );
 }
+
+export function TableCell({ colSpan, injectedStyles, children, draggable }: SortableCellProps) {
+  return (
+    <th style={injectedStyles} colSpan={colSpan} tabIndex={-1}>
+      <div>{children}</div>
+      {draggable}
+    </th>
+  );
+}
+
+interface DraggableProps {
+  header: Header<ExtendedEntry, unknown>;
+}
+
+export function Draggable({ header }: DraggableProps) {
+  return (
+    <div
+      onDoubleClick={() => header.column.resetSize()}
+      onMouseDown={header.getResizeHandler()}
+      onTouchStart={header.getResizeHandler()}
+      className={style.resizer}
+    />
+  );
+}
@@ -143,7 +143,7 @@ function MakeMultiLineField({ row, column, table }: CellContext<ExtendedEntry, u

  const canWrite = column.columnDef.meta?.canWrite;
  if (!canWrite) {
-    return <GhostedText>{initialValue}</GhostedText>;
+    return <GhostedText multiline>{initialValue}</GhostedText>;
  }

  return <MultiLineCell initialValue={initialValue as string} handleUpdate={update} />;
@@ -1,51 +0,0 @@
-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;
-}
@@ -1,18 +0,0 @@
-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,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocalStorage } from '@mantine/hooks';
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, ColumnSizingState, Updater } from '@tanstack/react-table';

 import { debounce } from '../../../common/utils/debounce';
 import { makeStageKey } from '../../../common/utils/localStorage';
@@ -14,17 +14,8 @@ const saveSizesToStorage = debounce((sizes: Record<string, number>) => {
  localStorage.setItem(tableSizesKey, JSON.stringify(sizes));
 }, 500);

-export default function useColumnManager(columns: ColumnDef<ExtendedEntry>[]) {
-  const [columnVisibility, setColumnVisibility] = useLocalStorage({
-    key: tableHiddenKey,
-    defaultValue: {},
-  });
-  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
-    key: tableOrderKey,
-    defaultValue: columns.map((col) => col.id as string),
-  });
-
-  const [columnSizing, setColumnSizingState] = useState(() => {
+export function useColumnSizes() {
+  const [columnSizing, setColumnSizingState] = useState<Record<string, number>>(() => {
    try {
      const stored = localStorage.getItem(tableSizesKey);
      return stored ? JSON.parse(stored) : {};
@@ -38,10 +29,22 @@ export default function useColumnManager(columns: ColumnDef<ExtendedEntry>[]) {
    saveSizesToStorage(columnSizing);
  }, [columnSizing]);

-  const setColumnSizing = useCallback((sizes: typeof columnSizing) => {
-    setColumnSizingState(sizes);
+  const setColumnSizing = useCallback((sizesOrUpdater: Updater<ColumnSizingState>) => {
+    setColumnSizingState(sizesOrUpdater);
  }, []);

+  return {
+    columnSizing,
+    setColumnSizing,
+  };
+}
+
+export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[]) {
+  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
+    key: tableOrderKey,
+    defaultValue: columns.map((col) => col.id as string),
+  });
+
  // update column order if columns change
  useEffect(() => {
    const newColumns = columns.map((col) => col.id as string);
@@ -55,12 +58,20 @@ export default function useColumnManager(columns: ColumnDef<ExtendedEntry>[]) {
  }, [columns, saveColumnOrder]);

  return {
-    columnVisibility,
    columnOrder,
-    columnSizing,
-    resetColumnOrder,
-    setColumnVisibility,
    saveColumnOrder,
-    setColumnSizing,
+    resetColumnOrder,
+  };
+}
+
+export function useColumnVisibility() {
+  const [columnVisibility, setColumnVisibility] = useLocalStorage({
+    key: tableHiddenKey,
+    defaultValue: {},
+  });
+
+  return {
+    columnVisibility,
+    setColumnVisibility,
  };
 }
@@ -66,4 +66,5 @@
 .scrollContainer {
  max-height: 70vh;
  overflow: auto;
+  padding-top: 1rem;
 }
@@ -71,8 +71,7 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
              results.map((entry, index) => {
                const isSelected = selected === index;
                const displayIndex = entry.type === SupportedEntry.Event ? entry.eventIndex : '-';
-                const displayCue = entry.type === SupportedEntry.Event ? entry.cue : '';
-                const colour = entry.type === SupportedEntry.Event ? entry.colour : '';
+                const displayCue = 'cue' in entry ? entry.cue : '';

                return (
                  <li
@@ -83,7 +82,7 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
                    onClick={submit}
                  >
                    <div className={style.data}>
-                      <div className={style.index} style={{ '--color': colour }}>
+                      <div className={style.index} style={{ '--color': entry.colour }}>
                        {displayIndex}
                      </div>
                      <div className={style.cue}>{displayCue}</div>
@@ -99,7 +98,7 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
      footerElements={
        <div className={style.footer}>
          Use the keywords <span className={style.em}>cue</span>, <span className={style.em}>index</span> or
-          <span className={style.em}>title</span> to filter search
+          <span className={style.em}>title</span> to filter search.
        </div>
      }
    />
@@ -1,6 +1,6 @@
 import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { useSessionStorage } from '@mantine/hooks';
-import { EntryId, isOntimeEvent, isOntimeGroup, MaybeString, SupportedEntry } from 'ontime-types';
+import { EntryId, isOntimeEvent, isOntimeGroup, isOntimeMilestone, MaybeString, SupportedEntry } from 'ontime-types';

 import { useFlatRundown } from '../../../common/hooks-query/useRundown';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
@@ -9,14 +9,15 @@ const maxResults = 12;

 type FilterableGroup = {
  type: SupportedEntry.Group;
-  id: string;
+  id: EntryId;
  index: number;
  title: string;
+  colour: string;
 };

 type FilterableEvent = {
  type: SupportedEntry.Event;
-  id: string;
+  id: EntryId;
  index: number;
  eventIndex: number;
  title: string;
@@ -25,7 +26,17 @@ type FilterableEvent = {
  parent: MaybeString;
 };

-type FilterableEntry = FilterableGroup | FilterableEvent;
+type FilterableMilestone = {
+  type: SupportedEntry.Milestone;
+  id: EntryId;
+  index: number;
+  title: string;
+  cue: string;
+  colour: string;
+  parent: MaybeString;
+};
+
+type FilterableEntry = FilterableGroup | FilterableEvent | FilterableMilestone;

 export default function useFinder() {
  const { data, rundownId } = useFlatRundown();
@@ -59,7 +70,7 @@ export default function useFinder() {
      lastSearchString.current = searchValue;

      if (searchValue.startsWith('index ')) {
-        const searchString = searchValue.replace('index ', '').trim();
+        const searchString = searchValue.slice('index '.length).trim();
        const { results, error } = searchByIndex(searchString);
        setResults(results);
        setError(error);
@@ -67,14 +78,14 @@ export default function useFinder() {
      }

      if (searchValue.startsWith('cue ')) {
-        const searchString = searchValue.replace('cue ', '').trim();
+        const searchString = searchValue.slice('cue '.length).trim();
        const { results, error } = searchByCue(searchString);
        setResults(results);
        setError(error);
        return;
      }

-      const searchString = searchValue.replace('title ', '').trim();
+      const searchString = searchValue.startsWith('title ') ? searchValue.slice('title '.length).trim() : searchValue;
      const { results, error } = searchByTitle(searchString);
      setResults(results);
      setError(error);
@@ -162,33 +173,46 @@ export default function useFinder() {
            break;
          }

-          const event = data[i];
-          if (isOntimeEvent(event)) {
-            if (event.title.toLowerCase().includes(searchString)) {
+          const entry = data[i];
+          if (isOntimeEvent(entry)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
              remaining--;
              results.push({
                type: SupportedEntry.Event,
-                id: event.id,
+                id: entry.id,
                index: i,
                eventIndex,
-                title: event.title,
-                cue: event.cue,
-                colour: event.colour,
-                parent: event.parent,
+                title: entry.title,
+                cue: entry.cue,
+                colour: entry.colour,
+                parent: entry.parent,
              } satisfies FilterableEvent);
            }
            eventIndex++;
-          }
-          if (isOntimeGroup(event)) {
-            if (event.title.toLowerCase().includes(searchString)) {
+          } else if (isOntimeGroup(entry)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
              remaining--;
              results.push({
                type: SupportedEntry.Group,
-                id: event.id,
+                id: entry.id,
                index: i,
-                title: event.title,
+                title: entry.title,
+                colour: entry.colour,
              } satisfies FilterableGroup);
            }
+          } else if (isOntimeMilestone(entry)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
+              remaining--;
+              results.push({
+                type: SupportedEntry.Milestone,
+                id: entry.id,
+                index: i,
+                title: entry.title,
+                cue: entry.cue,
+                colour: entry.colour,
+                parent: entry.parent,
+              } satisfies FilterableMilestone);
+            }
          }
        }
        return { results, error: null };
@@ -200,7 +224,7 @@ export default function useFinder() {
  const select = useCallback(
    (selectedEvent: FilterableEntry) => {
      // First expand the parent group if this is an event inside a group
-      if (selectedEvent.type === SupportedEntry.Event && selectedEvent.parent !== null) {
+      if ('parent' in selectedEvent && selectedEvent.parent !== null) {
        // Try direct state update instead of using callback
        const currentGroups = [...new Set(collapsedGroups)];
        const newGroups = currentGroups.filter((id) => id !== selectedEvent.parent);
@@ -105,7 +105,7 @@ $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-over
 }

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

 .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: $delay-color;
+  text-decoration-color: $ontime-delay-text;
 }

 .separeLeft {
@@ -183,7 +183,7 @@ export function getUpcomingEvents(events: PlayableEvent[], selectedId: MaybeStri
 * 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 {
@@ -68,7 +68,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings }
    hidePhase,
    font,
    keyColour,
-    textColour,
+    timerColour,
  } = useTimerOptions();

  const { getLocalizedString } = useTranslation();
@@ -131,11 +131,11 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings }
  );

  // gather presentation styles
-  const timerColour = getTimerColour(viewSettings, textColour, showWarning, showDanger);
+  const resolvedTimerColour = getTimerColour(viewSettings, timerColour, showWarning, showDanger);
  const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, secondaryContent);
  const userStyles = {
    ...(keyColour && { '--timer-bg': keyColour }),
-    ...(textColour && { '--timer-colour': timerColour }),
+    ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
    ...(font && { '--timer-font': font }),
  };

@@ -25,10 +25,12 @@ const timerDisplayOptions: SelectOption[] = [

 export const getTimerOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
  const mainOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
    { value: 'title', label: 'Title' },
    { value: 'note', label: 'Note' },
  ]);
  const secondaryOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
    { value: 'title', label: 'Title' },
    { value: 'note', label: 'Note' },
  ]);
@@ -84,7 +86,7 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
          description: 'Select the data source for the main text',
          type: 'option',
          values: mainOptions,
-          defaultValue: 'Title',
+          defaultValue: 'title',
        },
        {
          id: 'secondary-src',
@@ -92,7 +94,7 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
          description: 'Select the data source for the secondary text',
          type: 'option',
          values: secondaryOptions,
-          defaultValue: '',
+          defaultValue: 'none',
        },
      ],
    },
@@ -163,9 +165,9 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
          defaultValue: '101010',
        },
        {
-          id: 'textColour',
-          title: 'Text Colour',
-          description: 'Text colour. Default: #f6f6f6',
+          id: 'timerColour',
+          title: 'Timer Colour',
+          description: 'Timer colour. Default: #f6f6f6',
          type: 'colour',
          defaultValue: 'f6f6f6',
        },
@@ -191,7 +193,7 @@ type TimerOptions = {
  hidePhase: boolean;
  font?: string;
  keyColour?: string;
-  textColour?: string;
+  timerColour?: string;
 };

 /**
@@ -226,7 +228,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL

    font: getValue('font') ?? undefined,
    keyColour: makeColourString(getValue('keyColour')),
-    textColour: makeColourString(getValue('textColour')),
+    timerColour: makeColourString(getValue('timerColour')),
  };
 }

@@ -42,8 +42,8 @@ const fontSizeMap: { [key: number]: number } = {
  4: 28, // 9:01
  5: 28, // -9:01, 10:01, 9 min
  6: 25, // -10:01, 10 min
-  8: 20, // 23:01:01
-  9: 20, // -23:01:01
+  8: 18, // 23:01:01
+  9: 18, // -23:01:01
 };

 /**
@@ -1,6 +1,7 @@
 {
+  "extends": "../../tsconfig.common.json",
  "compilerOptions": {
-    "target": "ESNext",
+    "target": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
@@ -13,26 +14,13 @@
    ],
    "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,
    "baseUrl": "src",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "outDir": "build"
  },
  "include": [
    "src"
@@ -1,6 +1,6 @@
 {
  "name": "ontime-electron",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-beta.4",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -0,0 +1 @@
+*.tgz
@@ -0,0 +1,17 @@
+# 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)
@@ -0,0 +1,28 @@
+{
+  "name": "@getontime/resolver",
+  "version": "4.0.0-beta.4",
+  "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",
+    "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"]
+}
@@ -0,0 +1,20 @@
+// 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';
@@ -0,0 +1,18 @@
+import { ApiAction, ApiActionTag, MessageTag, WsPacketToClient, WsPacketToServer } from 'ontime-types';
+
+/**
+ * A helper type for sending correct websocket messages to ontime
+ */
+export type SocketSender = <T extends MessageTag | ApiActionTag>(
+  tag: T,
+  payload: T extends MessageTag
+    ? Pick<WsPacketToServer & { tag: T }, 'payload'>['payload']
+    : Pick<ApiAction & { tag: T }, 'payload'>['payload'],
+) => void;
+
+/**
+ * a soft type guard for WS packets
+ */
+export function isWsPacketToClient(data: unknown): data is WsPacketToClient {
+  return typeof data === 'object' && data !== null && 'tag' in data && 'payload' in data;
+}
@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.common.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "allowUnusedLabels": false,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "allowJs": true,
+    "declaration": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "baseUrl": "src",
+  },
+  "include": [
+    "src",
+  ],
+  "exclude": [
+    "node_modules",
+  ]
+}
@@ -0,0 +1,20 @@
+import { defineConfig } from 'tsup';
+import copyPlugin from '@sprout2000/esbuild-copy-plugin';
+
+export default defineConfig({
+  clean: false, //we can't use clean as i dose so after the copy plugin runs
+  entry: ['src/main.ts'],
+  outDir: 'dist',
+  bundle: true,
+
+  dts: { resolve: true },
+  format: 'esm',
+  target: 'esnext',
+  platform: 'node',
+  esbuildPlugins: [
+    copyPlugin.copyPlugin({
+      src: './node_modules/ontime-types/dist',
+      dest: './dist',
+    }),
+  ],
+});
@@ -2,7 +2,7 @@
  "name": "ontime-server",
  "type": "module",
  "main": "src/index.ts",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-beta.4",
  "exports": "./src/index.js",
  "dependencies": {
    "@googleapis/sheets": "^5.0.5",
@@ -20,7 +20,6 @@
    "ontime-utils": "workspace:*",
    "osc-min": "2.1.2",
    "sanitize-filename": "^1.6.3",
-    "steno": "^4.0.2",
    "ws": "^8.18.0",
    "xlsx": "^0.18.5"
  },
@@ -41,7 +40,7 @@
    "prettier": "catalog:",
    "server-timing": "^3.3.3",
    "shx": "^0.3.4",
-    "ts-essentials": "^10.0.3",
+    "ts-essentials": "catalog:",
    "tsx": "^4.19.2",
    "typescript": "catalog:",
    "vitest": "catalog:"
@@ -1,6 +1,6 @@
-import { TriggerDTO, TimerLifeCycle, AutomationDTO, Automation, EntryId } from 'ontime-types';
+import { TriggerDTO, TimerLifeCycle, AutomationDTO, Automation, ProjectRundowns } from 'ontime-types';

-import { makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
+import { makeOntimeEvent } from '../../rundown/__mocks__/rundown.mocks.js';

 import {
  addTrigger,
@@ -203,10 +203,29 @@ describe('deleteAutomation()', () => {
    const automations = getAutomations();
    expect(Object.keys(automations).length).toEqual(1);

-    const rundown = makeRundown({});
-    const timedEventOrder: EntryId[] = [];
-
-    await deleteAutomation(rundown, timedEventOrder, Object.keys(automations)[0]);
+    const projectRundowns: ProjectRundowns = {
+      'rundown-1': {
+        id: 'rundown-1',
+        title: 'Rundown 1',
+        order: ['1'],
+        flatOrder: ['1'],
+        entries: {
+          '1': makeOntimeEvent({
+            id: '1',
+            triggers: [
+              {
+                id: 'trigger-1',
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'test-automation',
+              },
+            ],
+          }),
+        },
+        revision: 1,
+      },
+    };
+    await deleteAutomation(projectRundowns, Object.keys(automations)[0]);
    const removed = getAutomations();
    expect(Object.keys(removed).length).toEqual(0);
  });
@@ -1,5 +1,7 @@
-import { TimerLifeCycle } from 'ontime-types';
-import { makeOntimeEvent, makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
+import { ProjectRundowns, TimerLifeCycle } from 'ontime-types';
+
+import { makeOntimeEvent } from '../../rundown/__mocks__/rundown.mocks.js';
+
 import { isAutomationUsed, parseTemplateNested, stringToOSCArgs } from '../automation.utils.js';

 describe('parseTemplateNested()', () => {
@@ -250,50 +252,109 @@ describe('test stringToOSCArgs()', () => {

 describe('isAutomationUsed()', () => {
  it('returns the first event which uses an automation', () => {
-    const rundown = makeRundown({
-      entries: {
-        '1': makeOntimeEvent({
-          id: '1',
-          triggers: [
-            {
-              id: 'trigger-1',
-              title: 'Trigger 1',
-              trigger: TimerLifeCycle.onClock,
-              automationId: 'test-automation',
-            },
-          ],
-        }),
+    const projectRundowns: ProjectRundowns = {
+      'rundown-1': {
+        id: 'rundown-1',
+        title: 'Rundown 1',
+        order: ['1'],
+        flatOrder: ['1'],
+        entries: {
+          '1': makeOntimeEvent({
+            id: '1',
+            triggers: [
+              {
+                id: 'trigger-1',
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'test-automation',
+              },
+            ],
+          }),
+        },
+        revision: 1,
      },
-    });
-
-    const timedEventOrder = ['1'];
+    };
    const automationId = 'test-automation';

-    const result = isAutomationUsed(rundown, timedEventOrder, automationId);
-    expect(result).toBe('1');
+    const result = isAutomationUsed(projectRundowns, automationId);
+    expect(result).toStrictEqual(['Rundown 1', '1']);
+  });
+
+  it('finds usages in any rundown', () => {
+    const projectRundowns: ProjectRundowns = {
+      'rundown-1': {
+        id: 'rundown-1',
+        title: 'Rundown 1',
+        order: ['1'],
+        flatOrder: ['1'],
+        entries: {
+          '1': makeOntimeEvent({
+            id: '1',
+            triggers: [
+              {
+                id: 'trigger-1',
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'test-automation',
+              },
+            ],
+          }),
+        },
+        revision: 1,
+      },
+      'rundown-2': {
+        id: 'rundown-2',
+        title: 'Rundown 2',
+        order: ['1'],
+        flatOrder: ['1'],
+        entries: {
+          '1': makeOntimeEvent({
+            id: '1',
+            triggers: [
+              {
+                id: 'trigger-1',
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'in-the-second-rundown',
+              },
+            ],
+          }),
+        },
+        revision: 1,
+      },
+    };
+    const automationId = 'in-the-second-rundown';
+
+    const result = isAutomationUsed(projectRundowns, automationId);
+    expect(result).toStrictEqual(['Rundown 2', '1']);
  });

  it('returns returns undefined if there are no matches', () => {
-    const rundown = makeRundown({
-      entries: {
-        '1': makeOntimeEvent({
-          id: '1',
-          triggers: [
-            {
-              id: 'trigger-1',
-              title: 'Trigger 1',
-              trigger: TimerLifeCycle.onClock,
-              automationId: 'test-automation',
-            },
-          ],
-        }),
+    const projectRundowns: ProjectRundowns = {
+      'rundown-1': {
+        id: 'rundown-1',
+        title: 'Rundown 1',
+        order: ['1'],
+        flatOrder: ['1'],
+        entries: {
+          '1': makeOntimeEvent({
+            id: '1',
+            triggers: [
+              {
+                id: 'trigger-1',
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'test-automation',
+              },
+            ],
+          }),
+        },
+        revision: 1,
      },
-    });
-
-    const timedEventOrder = ['1'];
+    };
    const automationId = 'does-not-exist';

-    const result = isAutomationUsed(rundown, timedEventOrder, automationId);
+    const result = isAutomationUsed(projectRundowns, automationId);
    expect(result).toBeUndefined();
  });
 });
@@ -4,8 +4,7 @@ import { Automation, AutomationSettings, ErrorResponse, Trigger } from 'ontime-t
 import type { Request, Response } from 'express';

 import { oscServer } from '../../adapters/OscAdapter.js';
-
-import { getCurrentRundown, getRundownMetadata } from '../rundown/rundown.dao.js';
+import { getDataProvider } from '../../classes/data-provider/DataProvider.js';

 import * as automationDao from './automation.dao.js';
 import * as automationService from './automation.service.js';
@@ -108,10 +107,8 @@ export async function editAutomation(req: Request, res: Response<Automation | Er

 export async function deleteAutomation(req: Request, res: Response<void | ErrorResponse>) {
  try {
-    const rundown = getCurrentRundown();
-    const { timedEventOrder } = getRundownMetadata();
-
-    await automationDao.deleteAutomation(rundown, timedEventOrder, req.params.id);
+    const projectRundowns = getDataProvider().getProjectRundowns();
+    await automationDao.deleteAutomation(projectRundowns, req.params.id);
    res.status(204).send();
  } catch (error) {
    const message = getErrorMessage(error);
@@ -2,9 +2,8 @@ import type {
  Automation,
  AutomationDTO,
  AutomationSettings,
-  EntryId,
  NormalisedAutomation,
-  Rundown,
+  ProjectRundowns,
  Trigger,
  TriggerDTO,
 } from 'ontime-types';
@@ -136,15 +135,15 @@ export async function editAutomation(id: string, newAutomation: AutomationDTO):
 /**
 * Deletes a automation given its ID
 */
-export async function deleteAutomation(rundown: Rundown, timedEventOrder: EntryId[], id: string): Promise<void> {
+export async function deleteAutomation(projectRundowns: ProjectRundowns, automationId: string): Promise<void> {
  const automations = getAutomations();
  // ignore request if automation does not exist
-  if (!Object.hasOwn(automations, id)) {
+  if (!Object.hasOwn(automations, automationId)) {
    return;
  }

  // prevent deleting a automation that is in use in triggers
-  const triggers = getAutomationTriggers().filter((trigger) => trigger.automationId === id);
+  const triggers = getAutomationTriggers().filter((trigger) => trigger.automationId === automationId);
  if (triggers.length) {
    throw new Error(
      `Unable to delete automation used in trigger ${triggers[0].title}${triggers.length > 1 ? ` and ${triggers.length - 1} more` : ''}`,
@@ -152,12 +151,12 @@ export async function deleteAutomation(rundown: Rundown, timedEventOrder: EntryI
  }

  // prevent deleting a automation that is in use in events
-  const isInUse = isAutomationUsed(rundown, timedEventOrder, id);
+  const isInUse = isAutomationUsed(projectRundowns, automationId);
  if (isInUse) {
-    throw new Error(`Unable to delete automation used in event with ID ${isInUse}`);
+    throw new Error(`Unable to delete automation used in rundown: ${isInUse[0]}, in event with ID: ${isInUse[1]}`);
  }

-  delete automations[id];
+  delete automations[automationId];
  await saveChanges({ automations });
 }

@@ -1,4 +1,13 @@
-import { EntryId, FilterRule, isOntimeEvent, MaybeNumber, OntimeAction, ontimeActionKeyValues, Rundown } from 'ontime-types';
+import {
+  EntryId,
+  FilterRule,
+  isOntimeEvent,
+  MaybeNumber,
+  OntimeAction,
+  ontimeActionKeyValues,
+  ProjectRundowns,
+  RundownEntries,
+} from 'ontime-types';
 import { millisToString, removeLeadingZero, splitWhitespace, getPropertyFromPath } from 'ontime-utils';
 import type { OscArgOrArrayInput, OscArgInput } from 'osc-min';

@@ -198,22 +207,40 @@ export function isBooleanEquals(a: boolean, b: string): boolean {

 /**
 * Checks is an automation is used in a rundown
- * TODO(v4): this currently only checks the current rundown, we will need to check all rundowns in the future
 */
-export function isAutomationUsed(
-  rundown: Rundown,
-  timedEventOrder: EntryId[],
+function isAutomationUsedInRundown(
+  entries: RundownEntries,
+  flatOrder: EntryId[],
  automationId: string,
 ): EntryId | undefined {
-  for (let i = 0; i < timedEventOrder.length; i++) {
-    const eventId = timedEventOrder[i];
-    const event = rundown.entries[eventId];
-    if (isOntimeEvent(event) && event.triggers) {
-      for (const trigger of event.triggers) {
+  for (let i = 0; i < flatOrder.length; i++) {
+    const eventId = flatOrder[i];
+    const entry = entries[eventId];
+
+    // only ontime events can contain triggers
+    if (isOntimeEvent(entry) && entry.triggers) {
+      for (const trigger of entry.triggers) {
        if (trigger.automationId === automationId) {
-          return eventId;
+          return entry.id;
        }
      }
    }
  }
 }
+
+/**
+ * Checks if an automation is used in any of the project rundowns
+ */
+export function isAutomationUsed(
+  projectRundowns: ProjectRundowns,
+  automationId: string,
+): [string, EntryId] | undefined {
+  for (const rundownId in projectRundowns) {
+    const rundown = projectRundowns[rundownId];
+    const usedInEvent = isAutomationUsedInRundown(rundown.entries, rundown.flatOrder, automationId);
+
+    if (usedInEvent) {
+      return [rundown.title, usedInEvent];
+    }
+  }
+}
@@ -31,7 +31,6 @@ export async function patchPartialProjectFile(req: Request, res: Response<Databa
    };

    const newData = await projectService.patchCurrentProject(patchDb);
-
    res.status(200).send(newData);
  } catch (error) {
    const message = getErrorMessage(error);
@@ -10,7 +10,7 @@ export const dataFromExcelTemplate = [
    'Timer type',
    'Count to end',
    'Skip',
-    'Notes',
+    'Note',
    't0',
    'Test1',
    'test2',
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Alex Christoffer Rasmussen	3b6d3a4631	feat: Keep screen awake (#1788 ) * feat keepAwake hook * reaqure lock after view change * refactor: move it to a navigation view setting * save to search params	2025-09-26 21:34:01 +02:00
Alex Christoffer Rasmussen	31c3e603ed	refactor: better type for api aux action (#1796 )	2025-09-26 21:34:01 +02:00
Alex Christoffer Rasmussen	1dfe5c980d	refactor: collect common tsconfig (#1794 ) * refactor: collect common tsconfig settings * chore: module and target should be lower case	2025-09-26 21:34:01 +02:00
Alex Christoffer Rasmussen	80e4dc0941	Fix: rundown import (#1795 ) * fix: patch in the active rundown id and title * fix: send a ALL refetch on project patch * fix: load the last used rundown on project patch and not just the first one * chore: lint * chore: clean up and let rundown service send the refetch request * chore: dont destructure rundown	2025-09-26 21:34:01 +02:00
Alex Christoffer Rasmussen	bc0b83aa14	remove private field from package (#1793 )	2025-09-26 21:34:01 +02:00
Alex Christoffer Rasmussen	971c6c66f0	Chore: Small todo about coerce boolean (#1789 ) * fix: coerce boolean types negative number is false * strict coerce	2025-09-26 21:34:01 +02:00
Carlos Valente	343697dc93	refactor: remove unused dependencies	2025-09-26 21:34:01 +02:00
Carlos Valente	4058231d6b	refactor: remove unused code	2025-09-26 21:34:01 +02:00
Carlos Valente	c5ff254267	refactor: prevent upload logo errors from being stuck	2025-09-26 21:34:01 +02:00
Carlos Valente	ac14cb9624	refactor: increase file size limits	2025-09-26 21:34:01 +02:00
Carlos Valente	bcabc50ad1	fix: check automation usage in all rundowns before allowing delete	2025-09-26 21:34:01 +02:00
Carlos Valente	cbd7bce106	bump version to 4.0.0-beta.4	2025-09-26 21:34:01 +02:00
Carlos Valente	00aa8a09fa	refactor(roll breaking): make starting with roll backtrace planned times	2025-09-21 07:42:47 +02:00
Carlos Valente	d04f958c11	fix: initialise group time	2025-09-21 07:42:47 +02:00
Alex Christoffer Rasmussen	5716fc31cf	feat: export package to help api consumers (#1624 )	2025-09-21 07:42:47 +02:00
Carlos Valente	a5d628af0c	fix: prevent params drawer from being larger than screen	2025-09-21 07:42:47 +02:00
Carlos Valente	111a1f95ba	fix: correct offset direction in expected time calculations	2025-09-21 07:42:47 +02:00
Carlos Valente	4bf74d86b3	refactor: set start metadata when starting from roll	2025-09-21 07:42:47 +02:00
arc-alex	d2638d64e4	fix: group end elements should only send timertype data nothing else	2025-09-21 07:42:47 +02:00
arc-alex	02cddeec4d	refactor: add a try grourd to the cell data generator to better pinpoint errors	2025-09-21 07:42:47 +02:00
Carlos Valente	a8fe8b5f1e	refactor: allow filtering schedule	2025-09-21 07:42:47 +02:00
Carlos Valente	8d2db7ffcd	Relative mode (#1764 ) * feat: add group start time to state * refactor: calculate expected times when offset mode changes * feat: show relative data in ui * fixup! feat: add group start time to state * fixup! refactor: calculate expected times when offset mode changes * fixup! feat: show relative data in ui * try to handle multiday * show planed/expected rundown end day offset values * refactor: style tweaks to timers * refactor: cleanup data use * day offset * update tests * test getExpectedStart multiday * write start epoch to restore file * current day in relative mode * remove todo * move find day offset to utils --------- Co-authored-by: arc-alex <ac@omnivox.dk>	2025-09-21 07:42:47 +02:00
Alex Christoffer Rasmussen	313590905f	fix docker ignore (#1780 )	2025-09-21 07:42:47 +02:00
Carlos Valente	7bbdab7dd9	fix(cuesheet): infinite render loop on resizing columns	2025-09-21 07:42:47 +02:00
Carlos Valente	304832ecde	fix: maintain multiline in cuesheet cells	2025-09-21 07:42:47 +02:00
Carlos Valente	0ab4abfcfe	docs: add contribution guidelines	2025-09-21 07:42:47 +02:00
Carlos Valente	1847822f31	fix: skip nested events	2025-09-21 07:42:47 +02:00
Carlos Valente	4499495212	feat: allow finding milestones	2025-09-21 07:42:47 +02:00
Carlos Valente	0035070db8	refactor: improve automated following	2025-09-21 07:42:47 +02:00
Carlos Valente	890a97d071	fix: allow moving a group after another	2025-09-21 07:42:47 +02:00
Carlos Valente	5441e5b07f	refactor: improve pin styling	2025-09-21 07:42:47 +02:00
Carlos Valente	ab4b94f2d8	fix: prevent layout reflow on different entry types	2025-09-21 07:42:47 +02:00
Carlos Valente	fd7ccb4a5b	refactor: add default value to secondary source	2025-09-21 07:42:47 +02:00
Carlos Valente	2e6bf234d5	fix: phase style overrides in timer	2025-09-21 07:42:47 +02:00
Alex Christoffer Rasmussen	c934b0ecdd	cleanup (#1776 ) * chore: cleanup leftover console log * chore: prevent error in client tsconfig	2025-09-21 07:42:47 +02:00
Alex Christoffer Rasmussen	cd6d6f24eb	fix: sheet default import map (#1775 ) * fix: default import map * fix: update test	2025-09-21 07:42:47 +02:00
arc-alex	e632a08557	chore: bump version	2025-09-21 07:42:47 +02:00
Carlos Valente	0057b4a3f1	refactor: tweaks to countdown styles	2025-09-08 06:23:39 +02:00
Carlos Valente	ac8c1e333e	bump version to 4.0.0-beta.2	2025-09-08 06:09:31 +02:00
Carlos Valente	321297b685	fix: redirect to preset	2025-09-08 06:09:00 +02:00
Alex Christoffer Rasmussen	67e67d6a5d	feat: propper timeuntil calc in countdown view (#1765 ) * fix error with is linked to loaded metadata * pass down metadata * create expected schedule * expected start in sub info * for singel subscribtions * refactor * add color to single events * refactor: clean up subscribtion data * show schedule and secondray data for single events * improve subscribtion data display	2025-09-07 21:49:45 +02:00
Carlos Valente	4385e0b9c9	refactor: ensure clocks timer and clock are in sync (#1772 ) * refactor: ensure clocks timer and clock are in sync --------- Co-authored-by: arc-alex <ac@omnivox.dk>	2025-09-07 21:49:45 +02:00
Carlos Valente	02243242f1	fix: redirect to preset	2025-09-07 21:49:45 +02:00
arc-alex	1af42b766d	fix: insert group-end where needed	2025-09-07 21:49:45 +02:00
arc-alex	9d6ec3758b	chore: clarifying comments	2025-09-07 21:49:45 +02:00
Carlos Valente	9e78ff4d1c	refactor: export data for all entry types	2025-09-07 21:49:45 +02:00
Carlos Valente	2037aef080	fix: prevent clipping on bold font sizes	2025-09-07 21:49:45 +02:00
Carlos Valente	48b9cf042f	refactor: lax validation for settings with this changes we allow the client and server to share the same data shape. even if some of it is useless. we also get an extra version property in the payload, if we want to save the transfer cost, we would rather remove it from the sent payload	2025-09-07 21:49:45 +02:00
Carlos Valente	1866e5e78d	refactor: simplify restore point	2025-09-07 21:49:45 +02:00
Carlos Valente	bc1b3800c8	refactor: op clock uses time format string	2025-09-07 21:49:45 +02:00
Carlos Valente	a2505c838b	refactor: add none option to optional select	2025-09-07 21:49:45 +02:00
Carlos Valente	bffa863fb4	fix: multi select infinite loop	2025-09-07 21:49:45 +02:00
Carlos Valente	d00d7677bc	fix: merge virtuoso and rundown styles	2025-09-07 21:49:45 +02:00
Carlos Valente	3ae73be562	refactor: prevent emitting errors from user pages	2025-09-07 21:49:45 +02:00
Carlos Valente	763080cd4d	fix: generate link for companion	2025-09-07 21:49:45 +02:00
Carlos Valente	6ff06b21a8	fix: hide fade out elements by default	2025-09-07 21:49:45 +02:00
Carlos Valente	adebde1b43	chore: upgrade client packages	2025-09-07 21:49:45 +02:00
				`@@ -1 +0,0 @@`
				`export type Size = 'xs' \| 'sm' \| 'md' \| 'lg';`