bump version to 3.3.3

refactor: minor code cleanups
refactor: improve errors to user
2026-07-26 10:38:55 +00:00 · 2024-06-23 23:02:14 +02:00 · 2024-06-23 22:07:34 +02:00 · 2024-06-23 22:07:34 +02:00 · 2024-06-23 22:07:34 +02:00 · 2024-06-23 22:06:44 +02:00
200 changed files with 4359 additions and 2158 deletions
@@ -0,0 +1,53 @@
+name: Ontime CLI build
+
+on:
+  push:
+    tags: [ "*" ]
+  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: 18.18.2
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - name: Copy server
+        run: mkdir -p apps/cli/server && cp apps/server/dist/index.cjs apps/cli/server/index.cjs
+      
+      - name: Copy client
+        run: cp -R apps/client/build apps/cli/client
+
+      - name: Copy external
+        run: cp -R apps/server/src/external apps/cli/external
+      
+      - name: Publish to NPM
+        run: pnpm publish --access public --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_CONFIG_PROVENANCE: true
+        working-directory: ./apps/cli
@@ -17,24 +17,6 @@ jobs:
    - name: Setup env
      run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV

-    - name: Setup Node.js environment
-      uses: actions/setup-node@v4
-      with:
-        node-version: 18.18.2
-
-    - name: Setup pnpm
-      uses: pnpm/action-setup@v2
-      with:
-        version: 8
-
-    - name: Install dependencies
-      run: pnpm install --frozen-lockfile
-
-    - name: Build project packages
-      env:
-        SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-      run: pnpm turbo build:docker
-
    - name: Docker Login
      uses: docker/login-action@v2.1.0
      with:
@@ -81,6 +81,9 @@ From the project root, run the following commands

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

+Note: The MacOS build will only work in CI, locally it will fail due to notarisation issues.
+Use the `turbo dist-mac:local` command to build a MacOS distribution locally.
+
 ## DOCKER

 Ontime provides a docker-compose file to aid with building and running docker images.
@@ -1,13 +1,11 @@
-FROM node:18.18-alpine AS base
+FROM node:18.18-alpine AS builder
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
-
-FROM base AS builder
 COPY . /app
 WORKDIR /app
-RUN pnpm install --frozen-lockfile \
-    && pnpm turbo build:docker
+RUN pnpm --filter=ontime-ui --filter=ontime-server --filter=ontime-utils install --config.dedupe-peer-dependents=false --frozen-lockfile
+RUN pnpm --filter=ontime-ui --filter=ontime-server run build:docker

 FROM node:18.18-alpine

@@ -4,19 +4,22 @@
 [![](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)

-## Download the latest releases here
-
-<div style="display: flex; justify-content: space-around">
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-arm64.dmg"><img alt="Download MacOS" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/mac-download.png"/></a>
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe"><img alt="Download Windows" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/win-download.png"/></a>
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage"><img alt="Download Linux" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/linux-download.png"/></a>
-  <a href="https://hub.docker.com/r/getontime/ontime"><img alt="Get from Dockerhub" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/dockerhub.png"/></a>
-</div>
-
-<br />
-
+## Download the latest release
 <a href="https://www.buymeacoffee.com/cpvalente" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="32"></a>

+- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe">Windows</a>
+- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-arm64.dmg">MacOS Arm</a>
+- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-x64.dmg">MacOS Intel</a>
+- Download AppImage for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage">Linux</a>
+- Get from <a href="https://hub.docker.com/r/getontime/ontime">Docker hub</a>
+
+## Using Ontime?
+
+Let us know!
+Ontime improves from the collaboration with its users. We would like to understand how you use Ontime and appreciate your feedback.
+
+We would also like to include a testimonials section in our ✨new website✨. It would be great to showcase the diversity of users running Ontime.
+
 # Ontime

 Ontime is a browser-based application that manages event rundowns, scheduling, and cueing.
@@ -24,6 +27,7 @@ Ontime is a browser-based application that manages event rundowns, scheduling, a
 With Ontime, you can plan, track your schedule, manage automation and cross-department show information all in one place.

 Ontime is made by entertainment and broadcast engineers and used by
+
 - Conference organisers
 - Touring shows and receiving venues
 - Broadcasters and streamers
@@ -99,16 +103,16 @@ More documentation is available [in our docs](https://docs.getontime.no)

 ## Main features

-* [x] Distribute data over network and render it in the browser
-* [x] Collaborative
-* [x] Extendable
-* [x] Send messages to different screen types
-* [x] Differentiate between backstage and public data
-* [x] Workflow for managing delays
-* [x] Rich protocol integrations for Control and Feedback
-* [x] For servers: use docker to run Ontime in in a server, configure from a browser anywhere
-* [x] Multi-platform (available on Windows, MacOS and Linux)
-* [x] Companion integration [follow link](https://bitfocus.io/connections/getontime-ontime)
+- [x] Distribute data over network and render it in the browser
+- [x] Collaborative
+- [x] Extendable
+- [x] Send messages to different screen types
+- [x] Differentiate between backstage and public data
+- [x] Workflow for managing delays
+- [x] Rich protocol integrations for Control and Feedback
+- [x] For servers: use docker to run Ontime in in a server, configure from a browser anywhere
+- [x] Multi-platform (available on Windows, MacOS and Linux)
+- [x] Companion integration [follow link](https://bitfocus.io/connections/getontime-ontime)

 ## Roadmap

@@ -0,0 +1,16 @@
+{
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended"
+  ],
+  "plugins": [],
+  "rules": {
+    "@typescript-eslint/no-var-requires": "off"
+  }
+}
@@ -0,0 +1,3 @@
+server
+external
+client
@@ -0,0 +1,9 @@
+{
+  "endOfLine": "lf",
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "printWidth": 120
+}
@@ -0,0 +1,44 @@
+# Ontime CLI
+
+![Ontime](https://github.com/cpvalente/ontime/blob/9e63261b350e5b7b61c7ffb17c9e75a6c5a8c711/.github/aux-images/editor.png)
+> Ontime is an application for managing rundown and event timers.
+
+Congratulations! You got this far into Ontime's rabbit hole and want to manage your installation.
+
+The CLI tool is a fast and lightweight way of installing Ontime and is perfect for self-hosting and headless installs.
+
+## Getting started
+
+### Prerequisites
+You will need to have installed the correct version of node.js
+Please check [the app engines declaration](https://github.com/cpvalente/ontime/blob/master/package.json) for the correct version.
+
+### Running Ontime
+To get Ontime running, all you need to do is install it in your system using your package manager of choice:
+
+Install globally in your system 
+```bash
+npm install -g @getontime/cli
+```
+
+... and run using the installed script
+```bash
+ontime
+```
+
+Or install and run ontime (the installation here is temporary for the duration of the session)
+```bash
+npx install @getontime/cli
+```
+
+## 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,20 @@
+#!/usr/bin/env node
+
+// NOTE: for now the following needs to be in place: ./server/index.cjs, ./client, ./external
+
+const ontimeServer = require('./server/index.cjs');
+const { initAssets, startServer, startIntegrations, shutdown } = ontimeServer;
+
+async function startOntime() {
+  await initAssets();
+
+  await startServer();
+
+  await startIntegrations();
+}
+
+startOntime();
+
+process.on(['SIGHUP', 'SIGINT', 'SIGTERM'], () => {
+  shutdown();
+});
@@ -0,0 +1,27 @@
+{
+    "name": "@getontime/cli",
+    "version": "3.3.3",
+    "author": "Carlos Valente",
+    "description": "Time keeping for live events",
+    "repository": "https://github.com/cpvalente/ontime",
+    "keywords": [
+        "lighdev",
+        "ontime",
+        "timer"
+    ],
+    "license": "AGPL-3.0-only",
+    "main": "main.js",
+    "bin": {
+        "ontime": "main.js"
+    },
+    "files": [
+        "client",
+        "external",
+        "server"
+    ],
+    "devDependencies": {
+        "eslint": "^8.53.0",
+        "eslint-config-prettier": "^9.0.0",
+        "prettier": "^3.0.3"
+    }
+}
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "3.0.3",
+  "version": "3.3.3",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -30,7 +30,7 @@
    "react-qr-code": "^2.0.12",
    "react-router-dom": "^6.3.0",
    "web-vitals": "^3.1.1",
-    "zustand": "^4.5.0"
+    "zustand": "^4.5.2"
  },
  "scripts": {
    "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -70,13 +70,13 @@
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^v7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react": "^7.32.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^8.0.0",
@@ -84,7 +84,7 @@
    "jsdom": "^21.1.0",
    "ontime-types": "workspace:*",
    "ontime-utils": "workspace:*",
-    "prettier": "^3.0.3",
+    "prettier": "^3.3.1",
    "sass": "^1.57.1",
    "typescript": "^5.4.3",
    "vite": "^5.2.11",
@@ -3,18 +3,16 @@ import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

-import { ContextMenu } from './common/components/context-menu/ContextMenu';
 import ErrorBoundary from './common/components/error-boundary/ErrorBoundary';
+import IdentifyOverlay from './common/components/identify-overlay/IdentifyOverlay';
 import { AppContextProvider } from './common/context/AppContext';
 import { ontimeQueryClient } from './common/queryClient';
-import { socketClientName } from './common/stores/connectionName';
 import { connectSocket } from './common/utils/socket';
 import theme from './theme/theme';
 import { TranslationProvider } from './translation/TranslationProvider';
 import AppRouter from './AppRouter';

-const preferredClientName = socketClientName.getState().name;
-connectSocket(preferredClientName);
+connectSocket();

 function App() {
  return (
@@ -25,13 +23,15 @@ function App() {
            <div className='App'>
              <ErrorBoundary>
                <TranslationProvider>
-                  <ContextMenu>
-                    <AppRouter />
-                  </ContextMenu>
+                  <IdentifyOverlay />
+                  <AppRouter />
                </TranslationProvider>
              </ErrorBoundary>
              <ReactQueryDevtools initialIsOpen={false} />
            </div>
+            <ErrorBoundary>
+              <div id='identify-portal' />
+            </ErrorBoundary>
          </BrowserRouter>
        </AppContextProvider>
      </QueryClientProvider>
@@ -1,6 +1,7 @@
 import { lazy, Suspense } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';

+import { useClientPath } from './common/hooks/useClientPath';
 import Log from './features/log/Log';
 import withPreset from './features/PresetWrapper';
 import withData from './features/viewers/ViewWrapper';
@@ -34,6 +35,9 @@ const TimerControl = lazy(() => import('./features/control/playback/TimerControl
 const MessageControl = lazy(() => import('./features/control/message/MessageControlExport'));

 export default function AppRouter() {
+  // handle client path changes
+  useClientPath();
+
  return (
    <Suspense fallback={null}>
      <Routes>
@@ -11,6 +11,7 @@ export const RUNTIME = ['runtimeStore'];
 export const SHEET_STATE = ['sheetState'];
 export const URL_PRESETS = ['urlpresets'];
 export const VIEW_SETTINGS = ['viewSettings'];
+export const CLIENT_LIST = ['clientList'];

 // resolve location
 const location = window.location;
@@ -11,8 +11,8 @@ const dbPath = `${apiEntryUrl}/db`;
 /**
 * HTTP request to the current DB
 */
-async function getDb(fileName?: string): Promise<AxiosResponse<DatabaseModel>> {
-  return axios.post(`${dbPath}/download/`, { fileName });
+async function getDb(filename: string): Promise<AxiosResponse<DatabaseModel>> {
+  return axios.post(`${dbPath}/download/`, { filename });
 }

 /**
@@ -123,7 +123,7 @@ export async function renameProject(filename: string, newFilename: string): Prom
  const url = `${dbPath}/${filename}/rename`;
  const decodedUrl = decodeURIComponent(url);
  const res = await axios.put(decodedUrl, {
-    newFilename,
+    filename: newFilename,
  });
  return res.data;
 }
@@ -74,8 +74,8 @@ export async function requestApplyDelay(eventId: string): Promise<AxiosResponse<
 /**
 * HTTP request to delete given event
 */
-export async function requestDelete(eventId: string): Promise<AxiosResponse<MessageResponse>> {
-  return axios.delete(`${rundownPath}/${eventId}`);
+export async function requestDelete(eventIds: string[]): Promise<AxiosResponse<MessageResponse>> {
+  return axios.delete(rundownPath, { data: { ids: eventIds } });
 }

 /**
@@ -0,0 +1,6 @@
+.buttonSection {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $element-spacing;
+  margin-top: -$element-spacing;
+}
@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import {
+  Button,
+  Input,
+  InputGroup,
+  InputLeftAddon,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+
+import { setClientRemote } from '../../hooks/useSocket';
+
+import style from './ClientModal.module.scss';
+
+interface RedirectClientModalProps {
+  id: string;
+  name?: string;
+  path?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function RedirectClientModal(props: RedirectClientModalProps) {
+  const { id, isOpen, name = '', path: currentPath = '', onClose } = props;
+  const [path, setPath] = useState(currentPath);
+
+  const { setRedirect } = setClientRemote;
+
+  const handleRedirect = () => {
+    if (path !== currentPath && path !== '') {
+      setRedirect({ target: id, redirect: path });
+    }
+    onClose();
+  };
+
+  const host = `${window.location.origin}/`;
+  const canSubmit = path !== currentPath && path !== '';
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Redirect: {name}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <InputGroup variant='ontime-filled' size='md'>
+            <InputLeftAddon>{host}</InputLeftAddon>
+            <Input placeholder='minimal?key=0000ffff' value={path} onChange={(event) => setPath(event.target.value)} />
+          </InputGroup>
+        </ModalBody>
+        <ModalFooter>
+          <div className={style.buttonSection}>
+            <Button size='md' variant='ontime-subtle' onClick={onClose}>
+              Cancel
+            </Button>
+            <Button size='md' variant='ontime-filled' onClick={handleRedirect} isDisabled={!canSubmit}>
+              Submit
+            </Button>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+
+import { setClientRemote } from '../../hooks/useSocket';
+
+import style from './ClientModal.module.scss';
+
+interface RenameClientModalProps {
+  id: string;
+  name?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function RenameClientModal(props: RenameClientModalProps) {
+  const { id, name: currentName = '', isOpen, onClose } = props;
+  const [name, setName] = useState(currentName);
+
+  const { setClientName } = setClientRemote;
+
+  const handleRename = () => {
+    if (name !== currentName && name !== '') {
+      setClientName({ target: id, rename: name });
+    }
+    onClose();
+  };
+
+  const canSubmit = name !== currentName && name !== '';
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Rename: {currentName}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Input
+            variant='ontime-filled'
+            size='md'
+            placeholder='new name'
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <div className={style.buttonSection}>
+            <Button size='md' variant='ontime-subtle' onClick={onClose}>
+              Cancel
+            </Button>
+            <Button size='md' variant='ontime-filled' onClick={handleRename} isDisabled={!canSubmit}>
+              Submit
+            </Button>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
@@ -75,6 +75,7 @@ export const ContextMenu = ({ children }: ContextMenuProps) => {
          w={1}
          h={1}
          style={{
+            position: 'fixed',
            left: coords.x,
            top: coords.y,
          }}
@@ -0,0 +1,34 @@
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  padding: 0;
+  box-sizing: border-box;
+
+  border: 10px solid $ui-white;
+  background-color: $ui-black;
+
+  color: $ui-white;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  z-index: 100;
+  cursor: pointer;
+}
+
+.name {
+  font-weight: 600;
+  margin-top: -10vh;
+  line-height: 1em;
+  font-size: 12vw;
+  text-transform: uppercase;
+}
+
+.message {
+  color: $label-gray;
+  line-height: 2em;
+  font-size: 3vw;
+}
@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { MILLIS_PER_MINUTE } from 'ontime-utils';
+
+import { setClientRemote } from '../../hooks/useSocket';
+import { useClientStore } from '../../stores/clientStore';
+
+import style from './IdentifyOverlay.module.scss';
+
+export default function IdentifyOverlay() {
+  const clients = useClientStore((store) => store.clients);
+  const id = useClientStore((store) => store.id);
+  const showOverlay = clients[id]?.identify;
+
+  if (!showOverlay) {
+    return null;
+  }
+
+  const portalRoot = document.getElementById('identify-portal');
+
+  if (!portalRoot) {
+    return null;
+  }
+  return createPortal(<Overlay />, portalRoot);
+}
+
+function Overlay() {
+  const clients = useClientStore((store) => store.clients);
+  const id = useClientStore((store) => store.id);
+  const name = useClientStore((store) => store.name);
+
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const { setIdentify } = setClientRemote;
+  const showOverlay = clients[id]?.identify;
+
+  const handleClose = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    setIdentify({ target: id, identify: false });
+  }, [id, setIdentify]);
+
+  // start a timer that will close the overlay after some time
+  useEffect(() => {
+    if (showOverlay) {
+      timerRef.current = setTimeout(handleClose, MILLIS_PER_MINUTE);
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [showOverlay, id, setIdentify, handleClose]);
+
+    console.log('here2');
+  return (
+    <div className={style.overlay} data-testid='identify-overlay' onClick={handleClose}>
+      <div className={style.name}>{name}</div>
+      <div className={style.message}>Click to close</div>
+    </div>
+  );
+}
@@ -1,9 +1,8 @@
 import { KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { Input, Radio, RadioGroup } from '@chakra-ui/react';
-import { millisToString } from 'ontime-utils';
+import { millisToString, parseUserTime } from 'ontime-utils';

 import { useEventAction } from '../../../hooks/useEventAction';
-import { forgivingStringToMillis } from '../../../utils/dateConfig';

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

@@ -40,7 +39,7 @@ export default function DelayInput(props: DelayInputProps) {
    }

    const isNegative = newValue.startsWith('-');
-    let newMillis = forgivingStringToMillis(newValue);
+    let newMillis = parseUserTime(newValue);

    if (isNegative) {
      newMillis = newMillis * -1;
@@ -1,23 +1,21 @@
 import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { Input } from '@chakra-ui/react';
-import { millisToString } from 'ontime-utils';
+import { millisToString, parseUserTime } from 'ontime-utils';

 import { useEmitLog } from '../../../stores/logger';
-import { forgivingStringToMillis } from '../../../utils/dateConfig';
-import { cx } from '../../../utils/styleUtils';

-import style from './TimeInput.module.scss';
 interface TimeInputProps<T extends string> {
  name: T;
  submitHandler: (field: T, value: string) => void;
  time?: number;
  placeholder: string;
  disabled?: boolean;
+  align?: 'left' | 'center';
  className?: string;
 }

 export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
-  const { name, submitHandler, time = 0, placeholder, disabled, className } = props;
+  const { name, submitHandler, time = 0, placeholder, disabled, align = 'center', className } = props;
  const { emitError } = useEmitLog();
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [value, setValue] = useState<string>('');
@@ -58,7 +56,7 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
        submitHandler(name, newValue);
      }

-      const valueInMillis = forgivingStringToMillis(newValue);
+      const valueInMillis = parseUserTime(newValue);
      if (valueInMillis === time) {
        return false;
      }
@@ -117,15 +115,13 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
    resetValue();
  }, [resetValue, time]);

-  const timeInputClasses = cx([style.timeInput, className]);
-
  return (
    <Input
      disabled={disabled}
      size='sm'
      ref={inputRef}
      data-testid={`time-input-${name}`}
-      className={timeInputClasses}
+      className={className}
      fontSize='1rem'
      type='text'
      placeholder={placeholder}
@@ -136,7 +132,10 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
      onKeyDown={onKeyDownHandler}
      value={value}
      maxLength={8}
+      maxWidth='7.5em'
+      letterSpacing='1px'
      autoComplete='off'
+      textAlign={align}
    />
  );
 }
@@ -6,7 +6,3 @@ $input-delayed-border-color: $ontime-delay-text;
    border: 1px solid $input-delayed-border-color;
  }
 }
-
-.inputField {
-  max-width: 7.75em;
-}
@@ -28,7 +28,7 @@ export default function TimeInputWithButton<T extends string>(props: PropsWithCh
        submitHandler={submitHandler}
        time={time}
        placeholder={placeholder}
-        className={style.inputField}
+        align='left'
        disabled={disabled}
      />
      {children}
@@ -7,10 +7,6 @@ $progress-bar-br: 3px;
  position: relative;
  width: 100%;
  height: $progress-bar-size;
-  border-radius: $progress-bar-br;
-  background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
-  display: flex;
-  overflow: hidden;

  &--hidden {
    display: none;
@@ -18,31 +14,42 @@ $progress-bar-br: 3px;
  }
 }

+.multiprogress-bar__bg {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: var(--progress-bar-br, $progress-bar-br);
+
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
 .multiprogress-bar__indicator {
  position: absolute;
-  height: inherit;
-  background-color: black;
+  inset: 0;
+  margin: -1px;
+  margin-left: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.multiprogress-bar__indicator-bar {
+  background-color: var(--background-color-override, $ui-black);
  opacity: 0.8;
  transition: 1s linear;
  transition-property: width;
-  right: 0;
+
+  .multiprogress-bar--ignore-css-override & {
+    background-color: $ui-black;
+  }
 }

 .multiprogress-bar__bg-normal {
-  position: absolute;
-  height: inherit;
-  right: 0;
-  width: 100%;
-}
-
-.multiprogress-bar__bg-warning {
-  position: absolute;
-  height: inherit;
-  right: 0;
+  flex: 1;
 }

 .multiprogress-bar__bg-danger {
-  position: absolute;
-  height: inherit;
-  right: 0;
-}
+  flex-shrink: 0;
+}
@@ -13,31 +13,51 @@ interface MultiPartProgressBar {
  danger?: MaybeNumber;
  dangerColor: string;
  hidden?: boolean;
+  ignoreCssOverride?: boolean;
  className?: string;
 }

 export default function MultiPartProgressBar(props: MultiPartProgressBar) {
-  const { now, complete, normalColor, warning, warningColor, danger, dangerColor, hidden, className = '' } = props;
+  const {
+    now,
+    complete,
+    normalColor,
+    warning,
+    warningColor,
+    danger,
+    dangerColor,
+    hidden,
+    ignoreCssOverride,
+    className = '',
+  } = props;

  const percentRemaining = complete === 0 ? 0 : 100 - clamp(100 - (Math.max(now ?? 0, 0) * 100) / complete, 0, 100);

  const dangerWidth = danger ? clamp((danger / complete) * 100, 0, 100) : 0;
-  const warningWidth = warning ? clamp((warning / complete) * 100, 0, 100) : 0;
+  const warningWidth = warning ? clamp((warning / complete) * 100 - dangerWidth, 0, 100) : 0;

  return (
-    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
+    <div
+      className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${
+        ignoreCssOverride ? 'multiprogress-bar--ignore-css-override' : ''
+      } ${className}`}
+    >
      {now !== null && (
        <>
-          <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
-          <div
-            className='multiprogress-bar__bg-warning'
-            style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
-          />
-          <div
-            className='multiprogress-bar__bg-danger'
-            style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
-          />
-          <div className='multiprogress-bar__indicator' style={{ width: `${percentRemaining}%` }} />
+          <div className='multiprogress-bar__bg'>
+            <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
+            <div
+              className='multiprogress-bar__bg-warning'
+              style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
+            />
+            <div
+              className='multiprogress-bar__bg-danger'
+              style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
+            />
+          </div>
+          <div className='multiprogress-bar__indicator'>
+            <div className='multiprogress-bar__indicator-bar' style={{ width: `${percentRemaining}%` }} />
+          </div>
        </>
      )}
    </div>
@@ -19,10 +19,10 @@ import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';

 import { navigatorConstants } from '../../../viewerConfig';
 import useClickOutside from '../../hooks/useClickOutside';
+import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
 import { isKeyEnter } from '../../utils/keyEvent';
-
-import RenameClientModal from './rename-client-modal/RenameClientModal';
+import { RenameClientModal } from '../client-modal/RenameClientModal';

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

@@ -34,8 +34,10 @@ interface NavigationMenuProps {
 function NavigationMenu(props: NavigationMenuProps) {
  const { isOpen, onClose } = props;

-  const { isOpen: isRenameOpen, onOpen: onRenameOpen, onClose: onRenameClose } = useDisclosure();
+  const id = useClientStore((store) => store.id);
+  const name = useClientStore((store) => store.name);

+  const { isOpen: isOpenRename, onOpen: onRenameOpen, onClose: onCloseRename } = useDisclosure();
  const { fullscreen, toggle } = useFullscreen();
  const { toggleMirror } = useViewOptionsStore();

@@ -45,7 +47,7 @@ function NavigationMenu(props: NavigationMenuProps) {

  return createPortal(
    <div id='navigation-menu-portal' ref={menuRef}>
-      <RenameClientModal isOpen={isRenameOpen} onClose={onRenameClose} />
+      <RenameClientModal id={id} name={name} isOpen={isOpenRename} onClose={onCloseRename} />
      <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
        <DrawerOverlay />
        <DrawerContent>
@@ -1,71 +0,0 @@
-import { useEffect, useState } from 'react';
-import {
-  Button,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-} from '@chakra-ui/react';
-
-import { setClientName } from '../../../hooks/useSocket';
-import { useSocketClientName } from '../../../stores/connectionName';
-
-interface RenameClientModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export default function RenameClientModal({ isOpen, onClose }: RenameClientModalProps) {
-  const { name: clientName, persistName } = useSocketClientName();
-  const [newName, setNewName] = useState(clientName);
-
-  useEffect(() => {
-    setNewName(clientName);
-  }, [isOpen, clientName]);
-
-  const handleRename = async () => {
-    if (newName) {
-      setClientName(newName);
-      persistName(newName);
-      onClose();
-    }
-  };
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      size='sm'
-      closeOnOverlayClick={false}
-      motionPreset='slideInBottom'
-      scrollBehavior='inside'
-      preserveScrollBarGap
-      variant='ontime'
-    >
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Rename client</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <Input
-            placeholder='Connection must have a name'
-            defaultValue={newName}
-            onChange={(e) => setNewName(e.target.value)}
-            variant='ontime-filled'
-          />
-          <Button
-            isDisabled={newName === clientName || !newName}
-            onClick={handleRename}
-            width='100%'
-            variant='ontime-filled'
-          >
-            Save
-          </Button>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  );
-}
@@ -1,25 +1,37 @@
@use '../../../theme/viewerDefs' as *;

 .title-card {
+  position: relative;
  display: flex;
  flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }

-.inline {
-  display: flex;
+.title-card__title,
+.title-card__secondary {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .title-card__title {
  font-weight: 600;
-  font-size: clamp(32px, 3.5vw, 50px);
+  font-size: clamp(1.5rem, 3vw, 3rem);
  color: var(--color-override, $viewer-color);
-  line-height: 1.1em;
+  line-height: 1.2em;
+}
+
+.title-card__secondary {
+  font-size: clamp(1rem, 2vw, 2.25rem);
+  color: var(--secondary-color-override, $viewer-secondary-color);
+  line-height: 1.2em;
 }

 .title-card__label {
+  position: absolute;
+  right: 1rem;
+  top: 0.5rem;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
-  font-weight: 400;
  color: var(--secondary-color-override, $viewer-secondary-color);
  margin-left: auto;
  text-transform: uppercase;
@@ -28,13 +40,3 @@
    color: var(--accent-color-override, $accent-color);
  }
 }
-
-.title-card__secondary {
-  font-size: clamp(1.5rem, 2vw, 2.25rem);
-  color: var(--secondary-color-override, $viewer-secondary-color);
-  line-height: 1.1em;
-
-  &::after {
-    content: '\200b';
-  }
-}
@@ -1,28 +1,32 @@
+import { ForwardedRef, forwardRef } from 'react';
+
 import { useTranslation } from '../../../translation/TranslationProvider';

 import './TitleCard.scss';

 interface TitleCardProps {
-  label: 'now' | 'next';
  title: string;
+  label?: 'now' | 'next';
  secondary?: string;
+  className?: string;
 }

-export default function TitleCard(props: TitleCardProps) {
-  const { label, title, secondary } = props;
+const TitleCard = forwardRef((props: TitleCardProps, ref: ForwardedRef<HTMLDivElement>) => {
+  const { label, title, secondary, className = '' } = props;
  const { getLocalizedString } = useTranslation();

  const accent = label === 'now';

  return (
-    <div className='title-card'>
-      <div className='inline'>
-        <span className='title-card__title'>{title}</span>
-        <span className={accent ? 'title-card__label title-card__label--accent' : 'title-card__label'}>
-          {getLocalizedString(`common.${label}`)}
-        </span>
-      </div>
+    <div className={`title-card ${className}`} ref={ref}>
+      <span className='title-card__title'>{title}</span>
+      <span className={accent ? 'title-card__label title-card__label--accent' : 'title-card__label'}>
+        {label && getLocalizedString(`common.${label}`)}
+      </span>
      <div className='title-card__secondary'>{secondary}</div>
    </div>
  );
-}
+});
+
+TitleCard.displayName = 'TitleCard';
+export default TitleCard;
@@ -1,5 +1,18 @@
+import { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { Input, InputGroup, InputLeftElement, Select, Switch } from '@chakra-ui/react';
+import {
+  Button,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItemOption,
+  MenuList,
+  MenuOptionGroup,
+  Select,
+  Switch,
+} from '@chakra-ui/react';

 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';

@@ -34,6 +47,10 @@ export default function ParamInput(props: EditFormInputProps) {
    );
  }

+  if (type === 'multi-option') {
+    return <MultiOption paramField={paramField} />;
+  }
+
  if (type === 'boolean') {
    const defaultCheckedValue = isStringBoolean(searchParams.get(id)) || defaultValue;

@@ -70,3 +87,47 @@ export default function ParamInput(props: EditFormInputProps) {
    </InputGroup>
  );
 }
+
+interface EditFormMultiOptionProps {
+  paramField: ParamField & { type: 'multi-option' };
+}
+
+function MultiOption(props: EditFormMultiOptionProps) {
+  const [searchParams] = useSearchParams();
+  const { paramField } = props;
+  const { id, defaultValue } = paramField;
+
+  const optionFromParams = (searchParams.get(id) ?? '').toLocaleLowerCase();
+  const defaultOptionValue = optionFromParams || defaultValue?.toLocaleLowerCase() || '';
+
+  const [paramState, setParamState] = useState<string>(defaultOptionValue);
+
+  return (
+    <>
+      <input name={id} hidden readOnly value={paramState} />
+      <Menu isLazy closeOnSelect={false} variant='ontime-on-dark'>
+        <MenuButton as={Button} variant='ontime-subtle-white' position='relative' width='fit-content' fontWeight={400}>
+          {paramField.title}
+        </MenuButton>
+        <MenuList>
+          <MenuOptionGroup
+            type='checkbox'
+            value={paramState.split('_')}
+            onChange={(value) => {
+              setParamState(typeof value === 'object' ? value.filter((v) => v !== '').join('_') : value);
+            }}
+          >
+            {Object.values(paramField.values).map((option) => {
+              const { value, label } = option;
+              return (
+                <MenuItemOption value={value} key={value}>
+                  {label}
+                </MenuItemOption>
+              );
+            })}
+          </MenuOptionGroup>
+        </MenuList>
+      </Menu>
+    </>
+  );
+}
@@ -1,12 +1,10 @@
 import { CustomFields } from 'ontime-types';

-import { capitaliseFirstLetter } from '../../../features/viewers/common/viewUtils';
-
-import { ParamField } from './types';
+import { type ParamField } from './types';

 const makeOptionsFromCustomFields = (customFields: CustomFields, additionalOptions?: Record<string, string>) => {
-  const customFieldOptions = Object.keys(customFields).reduce((acc, key) => {
-    return { ...acc, [`custom-${key}`]: `Custom: ${capitaliseFirstLetter(key)}` };
+  const customFieldOptions = Object.entries(customFields).reduce((acc, [key, value]) => {
+    return { ...acc, [`custom-${key}`]: `Custom: ${value.label}` };
  }, additionalOptions ?? {});
  return customFieldOptions;
 };
@@ -30,6 +28,14 @@ const hideTimerSeconds: ParamField = {
  defaultValue: false,
 };

+const showLeadingZeros: ParamField = {
+  id: 'showLeadingZeros',
+  title: 'Show leading zeros in timer',
+  description: 'Whether to show leading zeros in the running timer',
+  type: 'boolean',
+  defaultValue: false,
+};
+
 export const getClockOptions = (timeFormat: string): ParamField[] => [
  getTimeOption(timeFormat),
  {
@@ -103,10 +109,12 @@ export const getClockOptions = (timeFormat: string): ParamField[] => [
 ];

 export const getTimerOptions = (timeFormat: string, customFields: CustomFields): ParamField[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields);
+  const mainOptions = makeOptionsFromCustomFields(customFields, { title: 'Title' });
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
  return [
    getTimeOption(timeFormat),
    hideTimerSeconds,
+    showLeadingZeros,
    {
      id: 'hideClock',
      title: 'Hide Time Now',
@@ -114,6 +122,14 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
      type: 'boolean',
      defaultValue: false,
    },
+    {
+      id: 'main',
+      title: 'Main text',
+      description: 'Select the data source for the main text',
+      type: 'option',
+      values: mainOptions,
+      defaultValue: 'Title',
+    },
    {
      id: 'secondary-src',
      title: 'Secondary text',
@@ -230,13 +246,6 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
    type: 'boolean',
    defaultValue: false,
  },
-  {
-    id: 'hidemessages',
-    title: 'Hide Message Overlay',
-    description: 'Whether to hide the overlay from showing timer screen messages',
-    type: 'boolean',
-    defaultValue: false,
-  },
  {
    id: 'hideendmessage',
    title: 'Hide End Message',
@@ -453,8 +462,8 @@ export const getStudioClockOptions = (timeFormat: string): ParamField[] => [
 export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ParamField[] => {
  const fieldOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', note: 'Note' });

-  const customFieldSelect = Object.keys(customFields).reduce((acc, key) => {
-    return { ...acc, [key]: `Custom: ${capitaliseFirstLetter(key)}` };
+  const customFieldSelect = Object.entries(customFields).reduce((acc, [key, field]) => {
+    return { ...acc, [key]: { value: key, label: field.label, colour: field.colour } };
  }, {});

  return [
@@ -486,9 +495,8 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
      id: 'subscribe',
      title: 'Highlight Field',
      description: 'Choose a custom field to highlight',
-      type: 'option',
+      type: 'multi-option',
      values: customFieldSelect,
-      defaultValue: '',
    },
    {
      id: 'shouldEdit',
@@ -9,8 +9,15 @@ type OptionsField = {
  values: Record<string, string>;
  defaultValue?: string;
 };
+
+type MultiOptionsField = {
+  type: 'multi-option';
+  values: Record<string, { value: string; label: string; colour: string }>;
+  defaultValue?: string;
+};
+
 type StringField = { type: 'string'; defaultValue?: string; prefix?: string; placeholder?: string };
 type NumberField = { type: 'number'; defaultValue?: number; prefix?: string; placeholder?: string };
 type BooleanField = { type: 'boolean'; defaultValue: boolean };

-export type ParamField = BaseField & (StringField | BooleanField | NumberField | OptionsField);
+export type ParamField = BaseField & (StringField | BooleanField | NumberField | OptionsField | MultiOptionsField);
@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { useClientStore } from '../stores/clientStore';
+import { socketSendJson } from '../utils/socket';
+
+export const useClientPath = () => {
+  const navigate = useNavigate();
+  const { pathname, search } = useLocation();
+  const redirect = useClientStore((store) => store.redirect);
+  const setRedirect = useClientStore((store) => store.setRedirect);
+
+  // notify of client path changes
+  useEffect(() => {
+    //remove leading '/' from path
+    const fullPath = (pathname.startsWith('/') ? pathname.slice(1) : pathname) + search;
+    socketSendJson('set-client-path', fullPath);
+  }, [pathname, search]);
+
+  // navigate to new path when received from server
+  useEffect(() => {
+    if (redirect === '') {
+      return;
+    }
+
+    // clear redirect
+    setRedirect('');
+
+    // navigate if there is a path change
+    if (redirect !== pathname + search) {
+      navigate(redirect);
+    }
+  }, [navigate, pathname, redirect, search, setRedirect]);
+};
@@ -6,6 +6,7 @@ import {
  getLinkedTimes,
  getPreviousEventNormal,
  MILLIS_PER_SECOND,
+  parseUserTime,
  reorderArray,
  swapEventData,
 } from 'ontime-utils';
@@ -25,7 +26,6 @@ import {
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
 import { useEditorSettings } from '../stores/editorSettings';
-import { forgivingStringToMillis } from '../utils/dateConfig';

 /**
 * @description Set of utilities for events //TODO: should this be called useEntryAction and so on
@@ -94,15 +94,15 @@ export const useEventAction = () => {
        }

        if (newEvent.duration === undefined && newEvent.timeEnd === undefined) {
-          newEvent.duration = forgivingStringToMillis(defaultDuration);
+          newEvent.duration = parseUserTime(defaultDuration);
        }

        if (newEvent.timeDanger === undefined) {
-          newEvent.timeDanger = forgivingStringToMillis(defaultDangerTime);
+          newEvent.timeDanger = parseUserTime(defaultDangerTime);
        }

        if (newEvent.timeWarning === undefined) {
-          newEvent.timeWarning = forgivingStringToMillis(defaultWarnTime);
+          newEvent.timeWarning = parseUserTime(defaultWarnTime);
        }
      }

@@ -217,9 +217,9 @@ export const useEventAction = () => {
      } else if (value.startsWith('+') || value.startsWith('p+') || value.startsWith('p +')) {
        // TODO: is this logic solid?
        const remainingString = value.substring(1);
-        newValMillis = getPreviousEnd() + forgivingStringToMillis(remainingString);
+        newValMillis = getPreviousEnd() + parseUserTime(remainingString);
      } else {
-        newValMillis = forgivingStringToMillis(value);
+        newValMillis = parseUserTime(value);
      }

      // dont allow timer values over 23:59:59
@@ -337,7 +337,7 @@ export const useEventAction = () => {
  const _deleteEventMutation = useMutation({
    mutationFn: requestDelete,
    // we optimistically update here
-    onMutate: async (eventId) => {
+    onMutate: async (eventIds: string[]) => {
      // cancel ongoing queries
      await queryClient.cancelQueries({ queryKey: RUNDOWN });

@@ -346,9 +346,11 @@ export const useEventAction = () => {

      if (previousData) {
        // optimistically update object
-        const newOrder = previousData.order.filter((id) => id !== eventId);
+        const newOrder = previousData.order.filter((id) => !eventIds.includes(id));
        const newRundown = { ...previousData.rundown };
-        delete newRundown[eventId];
+        for (const eventId of eventIds) {
+          delete newRundown[eventId];
+        }

        queryClient.setQueryData(RUNDOWN, {
          order: newOrder,
@@ -377,9 +379,9 @@ export const useEventAction = () => {
   * Deletes an event form the list
   */
  const deleteEvent = useCallback(
-    async (eventId: string) => {
+    async (eventIds: string[]) => {
      try {
-        await _deleteEventMutation.mutateAsync(eventId);
+        await _deleteEventMutation.mutateAsync(eventIds);
      } catch (error) {
        logAxiosError('Error deleting event', error);
      }
@@ -1,46 +0,0 @@
-import { useSyncExternalStore } from 'react';
-
-const STORAGE_EVENT = 'ontime-storage';
-
-function getSnapshot(key: string): string | null {
-  try {
-    return window.localStorage.getItem(`ontime-${key}`);
-  } catch {
-    return null;
-  }
-}
-
-function getParsedJson<T>(localStorageValue: string | null, initialValue: T): T {
-  try {
-    return localStorageValue ? JSON.parse(localStorageValue) : initialValue;
-  } catch {
-    return initialValue;
-  }
-}
-
-export const useLocalStorage = <T>(key: string, initialValue: T) => {
-  const localStorageValue = useSyncExternalStore(subscribe, () => getSnapshot(key));
-  const parsedLocalStorageValue = getParsedJson(localStorageValue, initialValue);
-
-  /**
-   * @description Set value to local storage
-   * @param value
-   */
-  const setLocalStorageValue = (value: T | ((val: T) => T)) => {
-    // Allow value to be a function so we have same API as useState
-    const valueToStore = value instanceof Function ? value(parsedLocalStorageValue) : value;
-
-    localStorage.setItem(`ontime-${key}`, JSON.stringify(valueToStore));
-    window.dispatchEvent(new StorageEvent(STORAGE_EVENT));
-  };
-
-  return [parsedLocalStorageValue, setLocalStorageValue] as const;
-};
-
-function subscribe(callback: () => void) {
-  window.addEventListener(STORAGE_EVENT, callback);
-
-  return () => {
-    window.removeEventListener(STORAGE_EVENT, callback);
-  };
-}
@@ -3,6 +3,12 @@ import { RuntimeStore, SimpleDirection, SimplePlayback } from 'ontime-types';
 import { useRuntimeStore } from '../stores/runtime';
 import { socketSendJson } from '../utils/socket';

+export const setClientRemote = {
+  setIdentify: (payload: { target: string; identify: boolean }) => socketSendJson('client', payload),
+  setRedirect: (payload: { target: string; redirect: string }) => socketSendJson('client', payload),
+  setClientName: (payload: { target: string; rename: string }) => socketSendJson('client', payload),
+};
+
 export const useRundownEditor = () => {
  const featureSelector = (state: RuntimeStore) => ({
    playback: state.timer.playback,
@@ -1,4 +1,4 @@
-import { MaybeNumber, Playback, TimerType } from 'ontime-types';
+import { MaybeNumber, Playback, TimerPhase, TimerType } from 'ontime-types';

 // first set extends TimerState
 export type ViewExtendedTimer = {
@@ -8,12 +8,11 @@ export type ViewExtendedTimer = {
  elapsed: MaybeNumber;
  expectedFinish: MaybeNumber;
  finishedAt: MaybeNumber;
+  phase: TimerPhase;
  playback: Playback;
  secondaryTimer: MaybeNumber;
  startedAt: MaybeNumber;

  clock: number;
-  timeDanger: MaybeNumber;
-  timeWarning: MaybeNumber;
  timerType: TimerType;
 };
@@ -19,13 +19,10 @@ function persistModeToSession(mode: AppMode) {
 type AppModeStore = {
  mode: AppMode;
  setMode: (mode: AppMode) => void;
-  cursor: string | null;
-  setCursor: (cursor: string | null) => void;
 };

 export const useAppMode = create<AppModeStore>()((set) => ({
  mode: getModeFromSession(),
-  cursor: null,
  setMode: (mode: AppMode) => {
    persistModeToSession(mode);

@@ -33,5 +30,4 @@ export const useAppMode = create<AppModeStore>()((set) => ({
      return { mode };
    });
  },
-  setCursor: (cursor: string | null) => set({ cursor }),
 }));
@@ -0,0 +1,82 @@
+import { ClientList } from 'ontime-types';
+import { create } from 'zustand';
+
+interface ClientStore {
+  name?: string;
+  setName: (newValue: string) => void;
+
+  id: string;
+  setId: (newValue: string) => void;
+
+  redirect: string;
+  setRedirect: (newValue: string) => void;
+
+  clients: ClientList;
+  setClients: (clients: ClientList) => void;
+}
+
+const clientNameKey = 'ontime-client-name';
+
+function persistNameInStorage(newValue: string) {
+  localStorage.setItem(clientNameKey, newValue);
+}
+
+export const useClientStore = create<ClientStore>((set) => ({
+  name: localStorage.getItem(clientNameKey) ?? undefined,
+  setName: (name: string) =>
+    set(() => {
+      persistNameInStorage(name);
+      return { name };
+    }),
+
+  id: '',
+  setId: (id) => set({ id }),
+
+  redirect: '',
+  setRedirect: (redirect: string) => set({ redirect }),
+
+  clients: {},
+  setClients: (clients: ClientList) => set({ clients }),
+}));
+
+/**
+ * Allows getting client name (outside react)
+ */
+export function getClientName(): string | undefined {
+  return useClientStore.getState().name;
+}
+
+/**
+ * Allows updating current client name (outside react)
+ */
+export function setClientName(name: string): void {
+  useClientStore.getState().setName(name);
+}
+
+/**
+ * Allows updating current client name (outside react)
+ */
+export function setClientId(id: string): void {
+  useClientStore.getState().setId(id);
+}
+
+/**
+ * Allows getting client name (outside react)
+ */
+export function getClientId(): string | undefined {
+  return useClientStore.getState().id;
+}
+
+/**
+ * Allows updating redirect (outside react)
+ */
+export function setClientRedirect(path: string): void {
+  useClientStore.getState().setRedirect(path);
+}
+
+/**
+ * Allows setting clients (outside react)
+ */
+export function setClients(clients: ClientList): void {
+  return useClientStore.getState().setClients(clients);
+}
@@ -1,26 +0,0 @@
-import { useStore } from 'zustand';
-import { createStore } from 'zustand/vanilla';
-
-interface SocketClientNameState {
-  name?: string;
-  setName: (newValue: string) => void;
-  persistName: (newValue: string) => void;
-}
-
-const clientNameKey = 'ontime-client-name';
-
-function persistKeyToStorage(newValue: string) {
-  localStorage.setItem(clientNameKey, newValue);
-}
-
-export const socketClientName = createStore<SocketClientNameState>((set) => ({
-  name: localStorage.getItem(clientNameKey) ?? undefined,
-  setName: (newValue: string) => set(() => ({ name: newValue })),
-  persistName: (newValue: string) =>
-    set(() => {
-      persistKeyToStorage(newValue);
-      return { name: newValue };
-    }),
-}));
-
-export const useSocketClientName = () => useStore(socketClientName);
@@ -1,5 +1,5 @@
 import isEqual from 'react-fast-compare';
-import { Playback, RuntimeStore, SimpleDirection, SimplePlayback } from 'ontime-types';
+import { Playback, RuntimeStore, SimpleDirection, SimplePlayback, TimerPhase } from 'ontime-types';
 import { createWithEqualityFn, useStoreWithEqualityFn } from 'zustand/traditional';

 export const runtimeStorePlaceholder: RuntimeStore = {
@@ -11,6 +11,7 @@ export const runtimeStorePlaceholder: RuntimeStore = {
    elapsed: null,
    expectedFinish: null,
    finishedAt: null,
+    phase: TimerPhase.None,
    playback: Playback.Stop,
    secondaryTimer: null,
    startedAt: null,
@@ -1,292 +1,4 @@
-import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
-
-import { forgivingStringToMillis, millisToDelayString } from '../dateConfig';
-
-describe('test forgivingStringToMillis()', () => {
-  describe('function handles time with no separators', () => {
-    const testData = [
-      { value: '', expect: 0 },
-      { value: '0', expect: 0 },
-      { value: '-0', expect: 0 },
-      { value: '1', expect: MILLIS_PER_MINUTE },
-      { value: '-1', expect: MILLIS_PER_MINUTE },
-      { value: '0h0m0s', expect: 0 },
-      { value: '0h0m1s', expect: MILLIS_PER_SECOND },
-      { value: '0h1m0s', expect: MILLIS_PER_MINUTE },
-      { value: '1h0m0s', expect: MILLIS_PER_HOUR },
-      { value: '23h0m0s', expect: 23 * MILLIS_PER_HOUR },
-      { value: '12h12m12s', expect: 12 * MILLIS_PER_SECOND + 12 * MILLIS_PER_MINUTE + 12 * MILLIS_PER_HOUR },
-      { value: '12H12M12S', expect: 12 * MILLIS_PER_SECOND + 12 * MILLIS_PER_MINUTE + 12 * MILLIS_PER_HOUR },
-      { value: '2m', expect: 2 * MILLIS_PER_MINUTE },
-      { value: '1h5s', expect: MILLIS_PER_HOUR + 5 * MILLIS_PER_SECOND },
-      { value: '1h2m', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE },
-    ];
-
-    for (const s of testData) {
-      it(`handles ${s.value}`, () => {
-        expect(typeof forgivingStringToMillis(s.value)).toBe('number');
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-  });
-
-  describe('parses strings correctly', () => {
-    const ts = [
-      { value: '1.1.1', expect: MILLIS_PER_HOUR + MILLIS_PER_MINUTE + MILLIS_PER_SECOND },
-      { value: '12.1.1', expect: 12 * MILLIS_PER_HOUR + MILLIS_PER_MINUTE + MILLIS_PER_SECOND },
-      { value: '12.55.1', expect: 12 * MILLIS_PER_HOUR + 55 * MILLIS_PER_MINUTE + MILLIS_PER_SECOND },
-      { value: '12.55.40', expect: 12 * MILLIS_PER_HOUR + 55 * MILLIS_PER_MINUTE + 40 * MILLIS_PER_SECOND },
-    ];
-
-    for (const s of ts) {
-      it(`handles ${s.value} to the left`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-  });
-
-  describe('#33 separators are parsed according to doc examples ', () => {
-    const ts = [
-      { value: '0.1', expect: MILLIS_PER_MINUTE },
-      { value: '0 1', expect: MILLIS_PER_MINUTE },
-      { value: '0:1', expect: MILLIS_PER_MINUTE },
-      { value: '0,1', expect: MILLIS_PER_MINUTE },
-      { value: '2.2.2', expect: 2 * MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 2 * MILLIS_PER_SECOND },
-      { value: '2 2 2', expect: 2 * MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 2 * MILLIS_PER_SECOND },
-      { value: '2:2:2', expect: 2 * MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 2 * MILLIS_PER_SECOND },
-      { value: '2,2,2', expect: 2 * MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 2 * MILLIS_PER_SECOND },
-      { value: '2,2,2', expect: 2 * MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 2 * MILLIS_PER_SECOND },
-      { value: '10:', expect: 10 * MILLIS_PER_HOUR },
-      { value: ':10', expect: 10 * MILLIS_PER_MINUTE },
-      { value: '10', expect: 10 * MILLIS_PER_MINUTE },
-      { value: '120', expect: MILLIS_PER_HOUR + 20 * MILLIS_PER_MINUTE },
-      { value: '90m', expect: 90 * MILLIS_PER_MINUTE },
-      { value: '1.2', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE },
-      { value: '1.2.3', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 3 * MILLIS_PER_SECOND },
-      { value: '123456', expect: 12 * MILLIS_PER_HOUR + 34 * MILLIS_PER_MINUTE + 56 * MILLIS_PER_SECOND },
-    ];
-
-    for (const s of ts) {
-      it(`handles ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-  });
-
-  describe('parses time strings', () => {
-    const ts = [
-      { value: '1h2m3s', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 3 * MILLIS_PER_SECOND },
-      { value: '1h3s', expect: MILLIS_PER_HOUR + 3 * MILLIS_PER_SECOND },
-      { value: '1h2m', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE },
-      { value: '10h', expect: 10 * MILLIS_PER_HOUR },
-      { value: '10m', expect: 10 * MILLIS_PER_MINUTE },
-      { value: '10s', expect: 10 * MILLIS_PER_SECOND },
-      { value: '120h', expect: 120 * MILLIS_PER_HOUR },
-      { value: '120m', expect: 120 * MILLIS_PER_MINUTE },
-      { value: '120s', expect: 120 * MILLIS_PER_SECOND },
-    ];
-
-    for (const s of ts) {
-      it(`handles ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-  });
-
-  describe('handles am/pm', () => {
-    const ampm = [
-      { value: '9:10:11am', expect: 9 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 11 * MILLIS_PER_SECOND },
-      { value: '9:10:11a', expect: 9 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 11 * MILLIS_PER_SECOND },
-      { value: '9:10:11pm', expect: (12 + 9) * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 11 * MILLIS_PER_SECOND },
-      { value: '9:10:11p', expect: (12 + 9) * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 11 * MILLIS_PER_SECOND },
-      { value: '9:10am', expect: 9 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
-      { value: '9:10a', expect: 9 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
-      { value: '9:10pm', expect: (12 + 9) * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
-      { value: '9:10p', expect: (12 + 9) * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
-      { value: '9am', expect: 9 * MILLIS_PER_HOUR },
-      { value: '9a', expect: 9 * MILLIS_PER_HOUR },
-      { value: '9pm', expect: (12 + 9) * MILLIS_PER_HOUR },
-      { value: '9p', expect: (12 + 9) * MILLIS_PER_HOUR },
-      { value: '12am', expect: 0 },
-      { value: '12pm', expect: 12 * MILLIS_PER_HOUR },
-    ];
-
-    for (const s of ampm) {
-      it(`handles ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-  });
-
-  describe('it infers separators when non existent', () => {
-    const testCases = [
-      { value: '1', expect: MILLIS_PER_MINUTE }, // 00:01:00
-      { value: '12', expect: 12 * MILLIS_PER_MINUTE }, // 00:12:00
-      { value: '123', expect: MILLIS_PER_HOUR + 23 * MILLIS_PER_MINUTE }, // 01:23:00
-      { value: '1234', expect: 12 * MILLIS_PER_HOUR + 34 * MILLIS_PER_MINUTE }, // 12:34:00
-      { value: '12345', expect: 12 * MILLIS_PER_HOUR + 34 * MILLIS_PER_MINUTE + 5 * MILLIS_PER_SECOND }, // 12:34:05
-      { value: '123456', expect: 12 * MILLIS_PER_HOUR + 34 * MILLIS_PER_MINUTE + 56 * MILLIS_PER_SECOND }, // 12:34:56
-    ];
-
-    for (const s of testCases) {
-      it(`handles basic strings digits: ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-
-    const sixDigits = [
-      { value: '000000', expect: 0 }, // 00:00:00
-      { value: '000001', expect: MILLIS_PER_SECOND }, // 00:00:01
-      { value: '000100', expect: MILLIS_PER_MINUTE }, // 00:01:00
-      { value: '010000', expect: MILLIS_PER_HOUR }, // 01:00:00
-      { value: '230000', expect: MILLIS_PER_HOUR * 23 }, // 23:00:00
-      { value: '121212', expect: 12 * MILLIS_PER_HOUR + 12 * MILLIS_PER_MINUTE + 12 * MILLIS_PER_SECOND }, // 12:12:12
-    ];
-
-    for (const s of sixDigits) {
-      it(`handles string with 6 digits: ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-
-    const fiveDigits = [
-      { value: '00000', expect: 0 },
-      { value: '00001', expect: MILLIS_PER_SECOND }, // 00:00:01
-      { value: '00010', expect: MILLIS_PER_MINUTE }, // 00:01:00
-      { value: '00100', expect: 10 * MILLIS_PER_MINUTE }, // 00:10:00
-      { value: '01000', expect: MILLIS_PER_HOUR }, // 01:00:00
-      { value: '10000', expect: 10 * MILLIS_PER_HOUR }, // 10:00:00
-      { value: '23000', expect: 23 * MILLIS_PER_HOUR }, // 23:00:00
-      { value: '12121', expect: 12 * MILLIS_PER_HOUR + 12 * MILLIS_PER_MINUTE + 1 * MILLIS_PER_SECOND }, // 12:12:01
-    ];
-
-    for (const s of fiveDigits) {
-      it(`handles string with 5 digits: ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-
-    const fourDigits = [
-      { value: '0000', expect: 0 },
-      { value: '0001', expect: MILLIS_PER_MINUTE }, // 00:01:00
-      { value: '0010', expect: 10 * MILLIS_PER_MINUTE }, // 00:10:00
-      { value: '0100', expect: MILLIS_PER_HOUR }, // 01:00:00
-      { value: '1000', expect: 10 * MILLIS_PER_HOUR }, // 10:00:00
-      { value: '2300', expect: 23 * MILLIS_PER_HOUR }, // 23:00:00
-      { value: '1212', expect: 12 * MILLIS_PER_HOUR + 12 * MILLIS_PER_MINUTE }, // 12:12:00
-    ];
-
-    for (const s of fourDigits) {
-      it(`handles string with 4 digits: ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-
-    const threeDigits = [
-      { value: '000', expect: 0 },
-      { value: '001', expect: MILLIS_PER_MINUTE }, // 00:01:00
-      { value: '010', expect: 10 * MILLIS_PER_MINUTE }, // 00:10:00
-      { value: '100', expect: MILLIS_PER_HOUR }, // 01:00:00
-      { value: '230', expect: 2 * MILLIS_PER_HOUR + 30 * MILLIS_PER_MINUTE }, // 02:30:00
-      { value: '121', expect: MILLIS_PER_HOUR + 21 * MILLIS_PER_MINUTE }, // 01:21:00
-    ];
-
-    for (const s of threeDigits) {
-      it(`handles string with 3 digits: ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-
-    const twoDigits = [
-      { value: '00', expect: 0 },
-      { value: '01', expect: MILLIS_PER_MINUTE }, // 00:01:00
-      { value: '10', expect: 10 * MILLIS_PER_MINUTE }, // 00:10:00
-      { value: '23', expect: 23 * MILLIS_PER_MINUTE }, // 00:23:00
-    ];
-
-    for (const s of twoDigits) {
-      it(`handles string with 2 digits: ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-
-    const singleDigit = [...Array(10).keys()];
-
-    for (const s of singleDigit) {
-      it(`handles string with a single digits ${s}`, () => {
-        expect(forgivingStringToMillis(`${s}`)).toBe(s * 1000 * 60);
-      });
-    }
-  });
-
-  describe('handles overflows', () => {
-    const ts = [
-      // minutes overflow
-      { value: '99', expect: 99 * MILLIS_PER_MINUTE },
-      { value: '1.39.0', expect: 99 * MILLIS_PER_MINUTE },
-      // seconds overflow
-      { value: '0.0.120', expect: 120 * MILLIS_PER_SECOND },
-      { value: '0.2.0', expect: 120 * MILLIS_PER_SECOND },
-      { value: '0.0.99', expect: 99 * MILLIS_PER_SECOND },
-      { value: '0.1.39', expect: 99 * MILLIS_PER_SECOND },
-      // hours overflow
-      { value: '25.0.0', expect: 25 * MILLIS_PER_HOUR },
-      // hours overflow
-      { value: '50.0.0', expect: 50 * MILLIS_PER_HOUR },
-    ];
-
-    for (const s of ts) {
-      it(`handles ${s.value} to the left`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-  });
-
-  describe('test fillLeft', () => {
-    describe('function handles separators', () => {
-      const testData = [
-        { value: '1:2:3:10', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 3 * MILLIS_PER_SECOND }, // 01:02:03
-        { value: '2,10', expect: 2 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
-        { value: '2.10', expect: 2 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
-        { value: '2 10', expect: 2 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
-      ];
-
-      for (const s of testData) {
-        it(`handles ${s.value}`, () => {
-          expect(typeof forgivingStringToMillis(s.value)).toBe('number');
-          expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-        });
-      }
-    });
-
-    describe('parses strings correctly', () => {
-      const ts = [
-        { value: '1.2', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE },
-        { value: '1.70', expect: MILLIS_PER_HOUR + 70 * MILLIS_PER_MINUTE },
-      ];
-
-      for (const s of ts) {
-        it(`handles ${s.value}`, () => {
-          expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-        });
-      }
-    });
-
-    describe('handles overflows', () => {
-      const ts = [
-        // minutes overflow
-        { value: '0.120', expect: 120 * MILLIS_PER_MINUTE },
-        { value: '0.99', expect: 99 * MILLIS_PER_MINUTE },
-      ];
-
-      for (const s of ts) {
-        it(`handles ${s.value}`, () => {
-          expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-        });
-      }
-    });
-  });
-});
+import { millisToDelayString } from '../dateConfig';

 describe('millisToDelayString()', () => {
  it('returns null for null values', () => {
@@ -1,160 +1,11 @@
 import { MaybeNumber } from 'ontime-types';
-import { formatFromMillis, MILLIS_PER_HOUR, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
+import { formatFromMillis, MILLIS_PER_HOUR, MILLIS_PER_MINUTE } from 'ontime-utils';

 /**
- * @description safe parse string to int
- * @param {string} valueAsString
- * @return {number}
+ * Parses a value in millis to a string which encodes a delay
+ * @param millis 
+ * @param format 
 */
-const parse = (valueAsString: string): number => {
-  const parsed = parseInt(valueAsString, 10);
-  if (isNaN(parsed)) {
-    return 0;
-  }
-  return Math.abs(parsed);
-};
-
-/**
- * @description Utility function to check if a string contain am/pm indicators
- * @param {string} value
- */
-function checkAmPm(value: string) {
-  let isPM = false;
-  let isAM = false;
-  if (value.toLowerCase().includes('pm')) {
-    isPM = true;
-    value = value.replace(/pm/i, '');
-  } else if (value.toLowerCase().includes('p')) {
-    isPM = true;
-    value = value.replace(/p/i, '');
-  }
-
-  // we need to remove am, but it doesn't actually change anything
-  if (value.toLowerCase().includes('am')) {
-    isAM = true;
-    value = value.replace(/am/i, '');
-  } else if (value.toLowerCase().includes('a')) {
-    isAM = true;
-    value = value.replace(/a/i, '');
-  }
-
-  return { isAM, isPM, value };
-}
-
-/**
- * @description Utility function to check if a string contain h / m / s indicators
- * @param {string} value
- */
-function checkMatchers(value: string) {
-  const hoursMatch = /(\d+)h/i.exec(value);
-  const hoursMatchValue = hoursMatch ? parse(hoursMatch[1]) : 0;
-
-  const minutesMatch = /(\d+)m/i.exec(value);
-  const minutesMatchValue = minutesMatch ? parse(minutesMatch[1]) : 0;
-
-  const secondsMatch = /(\d+)s/i.exec(value);
-  const secondsMatchValue = secondsMatch ? parse(secondsMatch[1]) : 0;
-
-  if (hoursMatchValue > 0 || minutesMatchValue > 0 || secondsMatchValue > 0) {
-    return (
-      hoursMatchValue * MILLIS_PER_HOUR + minutesMatchValue * MILLIS_PER_MINUTE + secondsMatchValue * MILLIS_PER_SECOND
-    );
-  }
-  return { hoursMatchValue };
-}
-
-/**
- * @description Utility function to infer separators from a whole string
- * @param {string} value
- * @param {boolean} isAM
- * @param {boolean} isPM
- */
-function inferSeparators(value: string, isAM: boolean, isPM: boolean) {
-  const length = value.length;
-  let inferredMillis = 0;
-  let addAM = 0;
-  if (length === 1) {
-    if (isPM || isAM) {
-      inferredMillis = parse(value) * MILLIS_PER_HOUR;
-      if (isAM) {
-        // this ensures we dont add 12 hours in the end
-        addAM = inferredMillis;
-      }
-    } else {
-      inferredMillis = parse(value) * MILLIS_PER_MINUTE;
-    }
-  } else if (length === 2) {
-    if (isPM || isAM) {
-      inferredMillis = parse(value) * inferredMillis;
-      if (isAM) {
-        // this ensures we dont add 12 hours in the end
-        addAM = 12;
-      }
-    } else {
-      inferredMillis = parse(value) * MILLIS_PER_MINUTE;
-    }
-  } else if (length === 3) {
-    inferredMillis = parse(value[0]) * MILLIS_PER_HOUR + parse(value.substring(1)) * MILLIS_PER_MINUTE;
-  } else if (length === 4) {
-    inferredMillis = parse(value.substring(0, 2)) * MILLIS_PER_HOUR + parse(value.substring(2)) * MILLIS_PER_MINUTE;
-  } else if (length >= 5) {
-    const hours = parse(value.substring(0, 2));
-    const minutes = parse(value.substring(2, 4));
-    const seconds = parse(value.substring(4));
-    inferredMillis = hours * MILLIS_PER_HOUR + minutes * MILLIS_PER_MINUTE + seconds * MILLIS_PER_SECOND;
-  }
-  return { inferredMillis, addAM };
-}
-
-/**
- * @description Parses a time string to millis, auto-filling to the left
- * @param {string} value - time string
- * @returns {number} - time string in millis
- */
-export const forgivingStringToMillis = (value: string): number => {
-  if (value === '12am') {
-    return 0;
-  }
-
-  const { isAM, isPM, value: parsingValue } = checkAmPm(value);
-  const maybeMillisFromMatchers = checkMatchers(parsingValue);
-  if (typeof maybeMillisFromMatchers === 'number') {
-    return maybeMillisFromMatchers;
-  }
-
-  let { hoursMatchValue } = maybeMillisFromMatchers;
-
-  let millis = 0;
-
-  // split string at known separators    : , .
-  const separatorRegex = /[\s,:.]+/;
-  const [first, second, third] = parsingValue.split(separatorRegex);
-
-  if (first != null && second != null && third != null) {
-    // if string has three sections, treat as [hours] [minutes] [seconds]
-    millis = parse(first) * MILLIS_PER_HOUR;
-    millis += parse(second) * MILLIS_PER_MINUTE;
-    millis += parse(third) * MILLIS_PER_SECOND;
-  } else if (first != null && second == null && third == null) {
-    // we only have one section, infer separators
-    const { inferredMillis, addAM } = inferSeparators(first, isAM, isPM);
-    millis = inferredMillis;
-    hoursMatchValue = addAM;
-  }
-  if (first != null && second != null && third == null) {
-    // if string has two sections, treat as [hours] [minutes]
-    millis = parse(first) * MILLIS_PER_HOUR;
-    millis += parse(second) * MILLIS_PER_MINUTE;
-  }
-
-  // Add 12 hours if it is PM
-  if (isPM && hoursMatchValue < 12) {
-    millis += 12 * MILLIS_PER_HOUR;
-  }
-
-  return millis;
-};
-
 export function millisToDelayString(millis: MaybeNumber, format: 'compact' | 'expanded' = 'compact'): string {
  if (millis == null || millis === 0) {
    return '';
@@ -3,6 +3,6 @@ export function isMacOS() {
  return userAgent.includes('macintosh') || userAgent.includes('mac os');
 }

-export const deviceAlt = isMacOS() ? '⌥' : 'Alt';
+export const deviceAlt = isMacOS() ? 'Option' : 'Alt';

-export const deviceMod = isMacOS() ? '⌘' : 'Ctrl';
+export const deviceMod = isMacOS() ? 'Cmd' : 'Ctrl';
@@ -9,4 +9,5 @@ export const startsWithHttp = /^http:\/\//;
 export const startsWithSlash = /^\//;
 export const isAlphanumeric = /^[a-z0-9]+$/i;
 export const isASCII = /^[ -~]+$/; //https://catonmat.net/my-favorite-regex
+export const isASCIIorEmpty = /^$|^[ -~]+$/; //https://catonmat.net/my-favorite-regex
 export const isNotEmpty = /\S/;
@@ -1,21 +1,31 @@
 import { Log, RuntimeStore } from 'ontime-types';

-import { isProduction, RUNTIME, websocketUrl } from '../api/constants';
+import { CLIENT_LIST, isProduction, RUNTIME, websocketUrl } from '../api/constants';
 import { ontimeQueryClient } from '../queryClient';
-import { socketClientName } from '../stores/connectionName';
+import {
+  getClientId,
+  getClientName,
+  setClientId,
+  setClientName,
+  setClientRedirect,
+  setClients,
+} from '../stores/clientStore';
 import { addLog } from '../stores/logger';
 import { patchRuntime, runtimeStore } from '../stores/runtime';

 export let websocket: WebSocket | null = null;
 let reconnectTimeout: NodeJS.Timeout | null = null;
 const reconnectInterval = 1000;
+
 export let shouldReconnect = true;
 export let hasConnected = false;
 export let reconnectAttempts = 0;

-export const connectSocket = (preferredClientName?: string) => {
+export const connectSocket = () => {
  websocket = new WebSocket(websocketUrl);

+  const preferredClientName = getClientName();
+
  websocket.onopen = () => {
    clearTimeout(reconnectTimeout as NodeJS.Timeout);
    hasConnected = true;
@@ -24,6 +34,9 @@ export const connectSocket = (preferredClientName?: string) => {
    if (preferredClientName) {
      socketSendJson('set-client-name', preferredClientName);
    }
+
+    socketSendJson('set-client-type', 'ontime');
+    socketSendJson('set-client-path', location.pathname);
  };

  websocket.onclose = () => {
@@ -54,10 +67,48 @@ export const connectSocket = (preferredClientName?: string) => {
      }

      switch (type) {
-        case 'client-name': {
-          socketClientName.getState().setName(payload);
+        case 'client-id': {
+          if (typeof payload === 'string') {
+            setClientId(payload);
+          }
          break;
        }
+
+        case 'client-name': {
+          if (typeof payload === 'string') {
+            setClientName(payload);
+          }
+          break;
+        }
+
+        case 'client-rename': {
+          if (typeof payload === 'object') {
+            const id = getClientId();
+            if (payload.target && payload.target === id) {
+              setClientName(payload.name);
+            }
+          }
+          break;
+        }
+
+        case 'client-redirect': {
+          if (typeof payload === 'object') {
+            const id = getClientId();
+            if (payload.target && payload.target === id) {
+              setClientRedirect(payload.path);
+            }
+          }
+          break;
+        }
+
+        case 'client-list': {
+          setClients(payload);
+          if (!isProduction) {
+            ontimeQueryClient.setQueryData(CLIENT_LIST, payload);
+          }
+          break;
+        }
+
        case 'ontime-log': {
          addLog(payload as Log);
          break;
@@ -17,4 +17,10 @@ declare global {
  }
 }

+declare module 'react' {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number;
+  }
+}
+
 export default {};
@@ -3,10 +3,11 @@ import { ErrorBoundary } from '@sentry/react';
 import { useKeyDown } from '../../common/hooks/useKeyDown';

 import AboutPanel from './panel/about-panel/AboutPanel';
+import ClientControlPanel from './panel/client-control-panel/ClientControlPanel';
 import FeatureSettingsPanel from './panel/feature-settings-panel/FeatureSettingsPanel';
 import GeneralPanel from './panel/general-panel/GeneralPanel';
 import IntegrationsPanel from './panel/integrations-panel/IntegrationsPanel';
-import LogPanel from './panel/log-panel/LogPanel';
+import NetworkLogPanel from './panel/network-panel/NetworkLogPanel';
 import ProjectPanel from './panel/project-panel/ProjectPanel';
 import ShutdownPanel from './panel/shutdown-panel/ShutdownPanel';
 import SourcesPanel from './panel/sources-panel/SourcesPanel';
@@ -30,8 +31,9 @@ export default function AppSettings() {
          {panel === 'feature_settings' && <FeatureSettingsPanel location={location} />}
          {panel === 'sources' && <SourcesPanel />}
          {panel === 'integrations' && <IntegrationsPanel location={location} />}
+          {panel === 'client_control' && <ClientControlPanel />}
          {panel === 'about' && <AboutPanel />}
-          {panel === 'log' && <LogPanel />}
+          {panel === 'network' && <NetworkLogPanel location={location} />}
          {panel === 'shutdown' && <ShutdownPanel />}
        </PanelContent>
      </ErrorBoundary>
@@ -73,12 +73,12 @@ $inner-padding: 1rem;
    top: 0;
    z-index: 3;
    box-shadow: 0 1px $white-10;
+    background-color: $gray-1350;
  }

  th {
    font-weight: 400;
    color: $gray-400;
-    background-color: $gray-1350;
    white-space: nowrap;
    text-transform: capitalize;
  }
@@ -0,0 +1,24 @@
+.fullWidth {
+  width: 100%;
+}
+
+.actionButtons {
+  display: flex;
+  gap: $element-spacing;
+}
+
+.halfWidth {
+  width: 50%;
+  white-space: nowrap;
+}
+
+.pathList {
+  width: 100%;
+}
+
+.badgeList {
+  width: 100%;
+  * {
+    margin-right: $element-spacing;
+  }
+}
@@ -0,0 +1,15 @@
+import * as Panel from '../PanelUtils';
+
+import ClientList from './ClientList';
+
+export default function ClientControlPanel() {
+  return (
+    <Panel.Section>
+      <Panel.Card>
+        <Panel.SubHeader>Manage clients</Panel.SubHeader>
+        <Panel.Divider />
+        <ClientList />
+      </Panel.Card>
+    </Panel.Section>
+  );
+}
@@ -0,0 +1,147 @@
+import { useState } from 'react';
+import { Badge, Button, useDisclosure } from '@chakra-ui/react';
+
+import { RedirectClientModal } from '../../../../common/components/client-modal/RedirectClientModal';
+import { RenameClientModal } from '../../../../common/components/client-modal/RenameClientModal';
+import { setClientRemote } from '../../../../common/hooks/useSocket';
+import { useClientStore } from '../../../../common/stores/clientStore';
+import * as Panel from '../PanelUtils';
+
+import style from './ClientControlPanel.module.scss';
+
+export default function ClientList() {
+  const id = useClientStore((store) => store.id);
+  const clients = useClientStore((store) => store.clients);
+  const { isOpen: isOpenRedirect, onOpen: onOpenRedirect, onClose: onCloseRedirect } = useDisclosure();
+  const { isOpen: isOpenRename, onOpen: onOpenRename, onClose: onCloseRename } = useDisclosure();
+  const { setIdentify } = setClientRemote;
+
+  const [targetId, setTargetId] = useState('');
+
+  const openRename = (targetId: string) => {
+    setTargetId(targetId);
+    onOpenRename();
+  };
+
+  const openRedirect = (targetId: string) => {
+    setTargetId(targetId);
+    onOpenRedirect();
+  };
+
+  const ontimeClients = Object.entries(clients).filter(([_, { type }]) => type === 'ontime');
+  const otherClients = Object.entries(clients).filter(([_, { type }]) => type !== 'ontime');
+
+  const targetClient = clients[targetId];
+
+  return (
+    <>
+      {isOpenRedirect && (
+        <RedirectClientModal
+          id={targetId}
+          name={targetClient?.name}
+          path={targetClient?.path}
+          isOpen={isOpenRedirect}
+          onClose={onCloseRedirect}
+        />
+      )}
+      {isOpenRename && (
+        <RenameClientModal id={targetId} name={targetClient?.name} isOpen={isOpenRename} onClose={onCloseRename} />
+      )}
+      <Panel.Section>
+        <Panel.Title>Ontime Clients ({ontimeClients.length})</Panel.Title>
+        <Panel.Table>
+          <thead>
+            <tr>
+              <td className={style.fullWidth}>Client Name (Connection ID)</td>
+              <td className={style.fullWidth}>Path</td>
+              <td />
+            </tr>
+          </thead>
+          <tbody>
+            {ontimeClients.map(([key, client]) => {
+              const { identify, name, path } = client;
+              const isCurrent = id === key;
+              return (
+                <tr key={key}>
+                  <td className={style.badgeList}>
+                    <Badge variant='outline' size='xs'>
+                      {key}
+                    </Badge>
+                    {isCurrent && (
+                      <Badge variant='outline' colorScheme='yellow' size='xs'>
+                        self
+                      </Badge>
+                    )}
+                    {name}
+                  </td>
+                  {isCurrent ? <td /> : <td className={style.pathList}>{path}</td>}
+                  <td className={style.actionButtons}>
+                    <Button
+                      size='xs'
+                      className={`${identify ? style.blink : ''}`}
+                      isDisabled={isCurrent}
+                      variant={identify ? 'ontime-filled' : 'ontime-subtle'}
+                      data-testid={isCurrent ? '' : 'not-self-identify'}
+                      onClick={() => {
+                        setIdentify({ target: key, identify: !identify });
+                      }}
+                    >
+                      Identify
+                    </Button>
+                    <Button
+                      size='xs'
+                      variant='ontime-subtle'
+                      data-testid={isCurrent ? '' : 'not-self-rename'}
+                      onClick={() => openRename(key)}
+                    >
+                      Rename
+                    </Button>
+
+                    <Button
+                      size='xs'
+                      variant='ontime-subtle'
+                      isDisabled={isCurrent}
+                      data-testid={isCurrent ? '' : 'not-self-redirect'}
+                      onClick={() => openRedirect(key)}
+                    >
+                      Redirect
+                    </Button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Panel.Table>
+      </Panel.Section>
+      <Panel.Divider />
+      <Panel.Section>
+        <Panel.Title>Other Clients ({otherClients.length})</Panel.Title>
+        <Panel.Table>
+          <thead>
+            <tr>
+              <td className={style.halfWidth}>Client Name (Connection ID)</td>
+              <td className={style.halfWidth}>Client type</td>
+            </tr>
+          </thead>
+          <tbody>
+            {otherClients.map(([key, client]) => {
+              const { name, type } = client;
+
+              return (
+                <tr key={key}>
+                  <td className={style.badgeList}>
+                    <Badge variant='outline' size='sx'>
+                      {key}
+                    </Badge>
+                    {name}
+                  </td>
+                  <td>{type}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Panel.Table>
+      </Panel.Section>
+    </>
+  );
+}
@@ -67,7 +67,7 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
  return (
    <form onSubmit={handleSubmit(setupSubmit)} className={style.fieldForm}>
      <div className={style.column}>
-        <Panel.Description>Label</Panel.Description>
+        <Panel.Description>Label (only alphanumeric characters are allowed)</Panel.Description>
        {errors.label && <Panel.Error>{errors.label.message}</Panel.Error>}
        <Input
          {...register('label', {
@@ -153,6 +153,7 @@ export default function GeneralPanelForm() {
                <option value='pt'>Portuguese</option>
                <option value='es'>Spanish</option>
                <option value='sv'>Swedish</option>
+		<option value='pl'>Polish</option>
              </Select>
            </Panel.ListItem>
          </Panel.ListGroup>
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { Button, IconButton, Input, Select, Switch } from '@chakra-ui/react';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
@@ -8,7 +9,7 @@ import { generateId } from 'ontime-utils';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import useOscSettings, { useOscSettingsMutation } from '../../../../common/hooks-query/useOscSettings';
 import { isKeyEscape } from '../../../../common/utils/keyEvent';
-import { isASCII, isIPAddress, isOnlyNumbers, startsWithSlash } from '../../../../common/utils/regex';
+import { isASCII, isASCIIorEmpty, isIPAddress, isOnlyNumbers, startsWithSlash } from '../../../../common/utils/regex';
 import * as Panel from '../PanelUtils';

 import { cycles } from './integrationUtils';
@@ -40,6 +41,13 @@ export default function OscIntegrations() {
    control,
  });

+  // update form if we get new data from server
+  useEffect(() => {
+    if (data) {
+      reset(data);
+    }
+  }, [data, reset]);
+
  const onSubmit = async (values: OSCSettings) => {
    if (values.portIn === values.portOut) {
      setError('portIn', { message: 'OSC IN and OUT Ports cant be the same' });
@@ -221,7 +229,7 @@ export default function OscIntegrations() {
                <th>Enabled</th>
                <th>Cycle</th>
                <th className={style.halfWidth}>Address</th>
-                <th className={style.halfWidth}>Payload</th>
+                <th className={style.halfWidth}>Arguments</th>
                <th />
              </tr>
            </thead>
@@ -277,7 +285,7 @@ export default function OscIntegrations() {
                        {...register(`subscriptions.${index}.payload`, {
                          validate: {
                            oscStringIsAscii: (value) =>
-                              isASCII.test(value) || 'OSC payloads only allow ASCII characters',
+                              isASCIIorEmpty.test(value) || 'OSC arguments only allow ASCII characters',
                          },
                        })}
                      />
@@ -14,4 +14,6 @@ export const cycles: CycleLabel[] = [
  { id: 5, label: 'Every second', value: 'onClock' },
  { id: 5, label: 'On Timer Update', value: 'onUpdate' },
  { id: 6, label: 'On Finish', value: 'onFinish' },
+  { id: 7, label: 'On Warning', value: 'onWarning' },
+  { id: 8, label: 'On Danger', value: 'onDanger' },
 ];
@@ -1,9 +1,9 @@
 import { Select, Switch } from '@chakra-ui/react';
 import { EndAction, TimerType } from 'ontime-types';
+import { parseUserTime } from 'ontime-utils';

 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
 import { editorSettingsDefaults, useEditorSettings } from '../../../../common/stores/editorSettings';
-import { forgivingStringToMillis } from '../../../../common/utils/dateConfig';
 import * as Panel from '../PanelUtils';

 export default function EditorSettingsForm() {
@@ -15,9 +15,9 @@ export default function EditorSettingsForm() {
  const setDangerTime = eventSettings.setDangerTime;
  const setDefaultPublic = eventSettings.setDefaultPublic;

-  const durationInMs = forgivingStringToMillis(eventSettings.defaultDuration);
-  const warnTimeInMs = forgivingStringToMillis(eventSettings.defaultWarnTime);
-  const dangerTimeInMs = forgivingStringToMillis(eventSettings.defaultDangerTime);
+  const durationInMs = parseUserTime(eventSettings.defaultDuration);
+  const warnTimeInMs = parseUserTime(eventSettings.defaultWarnTime);
+  const dangerTimeInMs = parseUserTime(eventSettings.defaultDangerTime);

  return (
    <Panel.Section>
@@ -1,17 +0,0 @@
-import * as Panel from '../PanelUtils';
-
-import LogExport from './LogExport';
-import InfoNif from './NetworkInterfaces';
-
-export default function LogPanel() {
-  return (
-    <>
-      <Panel.Header>Log</Panel.Header>
-      <Panel.Section>
-        <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
-      </Panel.Section>
-      <InfoNif />
-      <LogExport />
-    </>
-  );
-}
@@ -6,7 +6,7 @@ import { handleLinks } from '../../../../common/utils/linkUtils';
 import Log from '../../../log/Log';
 import * as Panel from '../PanelUtils';

-import style from './LogExport.module.scss';
+import style from './NetworkLogExport.module.scss';

 export default function LogExport() {
  const extract = (event: MouseEvent) => {
@@ -0,0 +1,28 @@
+import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
+import { PanelBaseProps } from '../../settingsStore';
+import ClientControlPanel from '../client-control-panel/ClientControlPanel';
+import * as Panel from '../PanelUtils';
+
+import InfoNif from './NetworkInterfaces';
+import LogExport from './NetworkLogExport';
+
+export default function NetworkLogPanel({ location }: PanelBaseProps) {
+  const clientsRef = useScrollIntoView<HTMLDivElement>('clients', location);
+  const logRef = useScrollIntoView<HTMLDivElement>('log', location);
+
+  return (
+    <>
+      <Panel.Header>Network</Panel.Header>
+      <Panel.Section>
+        <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
+      </Panel.Section>
+      <InfoNif />
+      <div ref={logRef}>
+        <LogExport />
+      </div>
+      <div ref={clientsRef}>
+        <ClientControlPanel />
+      </div>
+    </>
+  );
+}
@@ -50,7 +50,8 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
  const handleSubmitCreate = async (values: ProjectCreateFormValues) => {
    try {
      setError(null);
-      const filename = values.title?.trim();
+
+      const filename = values.title ?? 'untitled';

      await createProject({
        ...values,
@@ -2,8 +2,6 @@ import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { Button, Input } from '@chakra-ui/react';

-import * as Panel from '../PanelUtils';
-
 import style from './ProjectPanel.module.scss';

 export type ProjectFormValues = {
@@ -15,10 +13,9 @@ interface ProjectFormProps {
  filename: string;
  onCancel: () => void;
  onSubmit: (values: ProjectFormValues) => Promise<void>;
-  submitError: string | null;
 }

-export default function ProjectForm({ action, filename, onSubmit, onCancel, submitError }: ProjectFormProps) {
+export default function ProjectForm({ action, filename, onSubmit, onCancel }: ProjectFormProps) {
  const {
    handleSubmit,
    register,
@@ -37,34 +34,31 @@ export default function ProjectForm({ action, filename, onSubmit, onCancel, subm
  }, [setFocus]);

  return (
-    <>
-      <form onSubmit={handleSubmit(onSubmit)} className={style.form}>
-        <Input
-          className={style.formInput}
-          id='filename'
+    <form onSubmit={handleSubmit(onSubmit)} className={style.form}>
+      <Input
+        className={style.formInput}
+        id='filename'
+        size='sm'
+        type='text'
+        variant='ontime-filled'
+        placeholder='Enter new name'
+        autoComplete='off'
+        {...register('filename', { required: true })}
+      />
+      <div className={style.actionButtons}>
+        <Button onClick={onCancel} size='sm' variant='ontime-ghosted' disabled={isSubmitting}>
+          Cancel
+        </Button>
+        <Button
          size='sm'
-          type='text'
          variant='ontime-filled'
-          placeholder='Enter new name'
-          autoComplete='off'
-          {...register('filename')}
-        />
-        <div className={style.actionButtons}>
-          <Button onClick={onCancel} size='sm' variant='ontime-ghosted' disabled={isSubmitting}>
-            Cancel
-          </Button>
-          <Button
-            size='sm'
-            variant='ontime-filled'
-            isDisabled={!isDirty || !isValid || isSubmitting}
-            type='submit'
-            className={style.saveButton}
-          >
-            {action}
-          </Button>
-        </div>
-      </form>
-      {submitError && <Panel.Error>{submitError}</Panel.Error>}
-    </>
+          isDisabled={!isDirty || !isValid || isSubmitting}
+          type='submit'
+          className={style.saveButton}
+        >
+          {action}
+        </Button>
+      </div>
+    </form>
  );
 }
@@ -11,6 +11,7 @@ import {
  renameProject,
 } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
+import * as Panel from '../PanelUtils';

 import ProjectForm, { ProjectFormValues } from './ProjectForm';

@@ -40,36 +41,53 @@ export default function ProjectListItem({
  onToggleEditMode,
 }: ProjectListItemProps) {
  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);

-  const handleSubmitRename = async (values: ProjectFormValues) => {
-    try {
+  const handleSubmitAction = (actionType: 'rename' | 'duplicate') => {
+    return async (values: ProjectFormValues) => {
+      setLoading(true);
      setSubmitError(null);
-
-      if (!values.filename) {
-        setSubmitError('Filename cannot be blank');
-        return;
+      try {
+        if (!values.filename) {
+          setSubmitError('Filename cannot be blank');
+          return;
+        }
+        const action = actionType === 'rename' ? renameProject : duplicateProject;
+        await action(filename, values.filename);
+        await onRefetch();
+        onSubmit();
+      } catch (error) {
+        setSubmitError(maybeAxiosError(error));
+      } finally {
+        setLoading(false);
      }
-      await renameProject(filename, values.filename);
+    };
+  };
+
+  const handleLoad = async (filename: string) => {
+    setLoading(true);
+    setSubmitError(null);
+    try {
+      await loadProject(filename);
      await onRefetch();
-      onSubmit();
+      await invalidateAllCaches();
    } catch (error) {
      setSubmitError(maybeAxiosError(error));
+    } finally {
+      setLoading(false);
    }
  };

-  const handleSubmitDuplicate = async (values: ProjectFormValues) => {
+  const handleDelete = async (filename: string) => {
+    setLoading(true);
+    setSubmitError(null);
    try {
-      setSubmitError(null);
-
-      if (!values.filename) {
-        setSubmitError('Filename cannot be blank');
-        return;
-      }
-      await duplicateProject(filename, values.filename);
+      await deleteProject(filename);
      await onRefetch();
-      onSubmit();
    } catch (error) {
      setSubmitError(maybeAxiosError(error));
+    } finally {
+      setLoading(false);
    }
  };

@@ -86,50 +104,55 @@ export default function ProjectListItem({
  const classes = current && !isCurrentlyBeingEdited ? style.current : undefined;

  return (
-    <tr key={filename} className={classes}>
-      {isCurrentlyBeingEdited ? (
-        <td colSpan={99}>
-          <ProjectForm
-            action={editingMode}
-            filename={filename}
-            onSubmit={editingMode === 'duplicate' ? handleSubmitDuplicate : handleSubmitRename}
-            onCancel={handleCancel}
-            submitError={submitError}
-          />
-        </td>
-      ) : (
-        <>
-          <td className={style.containCell}>{filename}</td>
-          <td>{new Date(updatedAt).toLocaleString()}</td>
-          <td className={style.actionButton}>
-            <ActionMenu
-              current={current}
+    <>
+      {submitError && (
+        <tr key='filename-error'>
+          <td colSpan={99}>
+            <Panel.Error>{submitError}</Panel.Error>
+          </td>
+        </tr>
+      )}
+      <tr key={filename} className={classes}>
+        {isCurrentlyBeingEdited ? (
+          <td colSpan={99}>
+            <ProjectForm
+              action={editingMode}
              filename={filename}
-              onChangeEditMode={handleToggleEditMode}
-              onRefetch={onRefetch}
+              onSubmit={editingMode === 'duplicate' ? handleSubmitAction('duplicate') : handleSubmitAction('rename')}
+              onCancel={handleCancel}
            />
          </td>
-        </>
-      )}
-    </tr>
+        ) : (
+          <>
+            <td className={style.containCell}>{filename}</td>
+            <td>{new Date(updatedAt).toLocaleString()}</td>
+            <td className={style.actionButton}>
+              <ActionMenu
+                current={current}
+                filename={filename}
+                onChangeEditMode={handleToggleEditMode}
+                onDelete={handleDelete}
+                onLoad={handleLoad}
+                isDisabled={loading}
+              />
+            </td>
+          </>
+        )}
+      </tr>
+    </>
  );
 }

-function ActionMenu({
-  current,
-  filename,
-  onChangeEditMode,
-  onRefetch,
-}: {
+interface ActionMenuProps {
  current?: boolean;
  filename: string;
+  isDisabled: boolean;
  onChangeEditMode: (editMode: EditMode, filename: string) => void;
-  onRefetch: () => Promise<void>;
-}) {
-  const handleLoad = async () => {
-    await loadProject(filename);
-    await invalidateAllCaches();
-  };
+  onDelete: (filename: string) => void;
+  onLoad: (filename: string) => void;
+}
+function ActionMenu(props: ActionMenuProps) {
+  const { current, filename, isDisabled, onChangeEditMode, onDelete, onLoad } = props;

  const handleRename = () => {
    onChangeEditMode('rename', filename);
@@ -139,11 +162,6 @@ function ActionMenu({
    onChangeEditMode('duplicate', filename);
  };

-  const handleDelete = async () => {
-    await deleteProject(filename);
-    await onRefetch();
-  };
-
  const handleDownload = async () => {
    await downloadProject(filename);
  };
@@ -161,16 +179,17 @@ function ActionMenu({
        color='#e2e2e2' // $gray-200
        variant='ontime-ghosted'
        size='sm'
+        isDisabled={isDisabled}
      />
      <MenuList>
-        <MenuItem onClick={handleLoad} isDisabled={current}>
+        <MenuItem onClick={() => onLoad(filename)} isDisabled={current}>
          Load
        </MenuItem>
        <MenuItem onClick={handleRename}>Rename</MenuItem>
        <MenuItem onClick={handleDuplicate}>Duplicate</MenuItem>
        <MenuItem onClick={handleDownload}>Download</MenuItem>
        <MenuItem onClick={handleExportCSV}>Export CSV Rundown</MenuItem>
-        <MenuItem isDisabled={current} onClick={handleDelete}>
+        <MenuItem isDisabled={current} onClick={() => onDelete(filename)}>
          Delete
        </MenuItem>
      </MenuList>
@@ -1,5 +1,5 @@
 .uploadSection,
-.successSection {
+.finishSection {
  margin-top: 1rem;
  display: flex;
  padding: 3rem 1rem;
@@ -15,12 +15,18 @@
  gap: 2rem;
 }

-.successSection {
-  color: $green-500;
+.finishSection {
  font-size: 1.5rem;
  text-align: center;
  flex-direction: column;
  gap: 1rem;
+
+  .error {
+    color: $red-500;
+  }
+  .success {
+    color: $green-500;
+  }
 }

 .buttonRow {
@@ -76,8 +76,13 @@ export default function SourcesPanel() {
      setAuthenticationStatus(result.authenticated);
      setSheetId(result.sheetId);
      if (result.authenticated === 'authenticated' && result.sheetId) {
-        const names = await getWorksheetNames(result.sheetId);
-        setWorksheets(names);
+        try {
+          const names = await getWorksheetNames(result.sheetId);
+          setWorksheets(names);
+        } catch (error) {
+          const message = maybeAxiosError(error);
+          setError(`Error getting worksheets: ${message}`);
+        }
      }
    }
    setImportFlow('gsheet');
@@ -129,11 +134,20 @@ export default function SourcesPanel() {
    await exportRundown(sheetId, importMap);
  };

+  const resetFlow = () => {
+    setImportFlow('none');
+    setRundown(null);
+    setHasFile('none');
+    setWorksheets(null);
+    setCustomFields(null);
+    setError('');
+  };
+
  const isExcelFlow = importFlow === 'excel';
  const isGSheetFlow = importFlow === 'gsheet';
  const isAuthenticated = authenticationStatus === 'authenticated';
  const showInput = importFlow === 'none';
-  const showSuccess = importFlow === 'finished';
+  const showCompleted = importFlow === 'finished';
  const showAuth = isGSheetFlow && !isAuthenticated;
  const showImportMap = (isGSheetFlow && isAuthenticated) || (isExcelFlow && hasFile === 'done');
  const showReview = rundown !== null && customFields !== null;
@@ -184,10 +198,18 @@ export default function SourcesPanel() {
              </div>
            </>
          )}
-          {showSuccess && (
-            <div className={style.successSection}>
-              <span>Import successful</span>
-              <Button variant='ontime-filled' size='sm' onClick={() => setImportFlow('none')}>
+          {showCompleted && (
+            <div className={style.finishSection}>
+              {error ? (
+                <span key='finish__error' className={style.error}>
+                  Import failed
+                </span>
+              ) : (
+                <span key='finish__success' className={style.success}>
+                  Import successful
+                </span>
+              )}
+              <Button variant='ontime-filled' size='sm' onClick={resetFlow}>
                Return
              </Button>
            </div>
@@ -195,6 +217,7 @@ export default function SourcesPanel() {
          {showAuth && <GSheetSetup onCancel={cancelGSheetFlow} />}
          {showImportMap && !showReview && (
            <ImportMapForm
+              hasErrors={Boolean(error)}
              isSpreadsheet={isExcelFlow}
              onCancel={cancelImportMap}
              onSubmitExport={handleSubmitExport}
@@ -15,14 +15,15 @@ import { convertToImportMap, getPersistedOptions, NamedImportMap, persistImportM
 import style from '../SourcesPanel.module.scss';

 interface ImportMapFormProps {
-  isSpreadsheet?: boolean;
+  hasErrors: boolean;
+  isSpreadsheet: boolean;
  onCancel: () => void;
  onSubmitExport: (importMap: ImportMap) => Promise<void>;
  onSubmitImport: (importMap: ImportMap) => Promise<void>;
 }

 export default function ImportMapForm(props: ImportMapFormProps) {
-  const { isSpreadsheet, onCancel, onSubmitExport, onSubmitImport } = props;
+  const { hasErrors, isSpreadsheet, onCancel, onSubmitExport, onSubmitImport } = props;
  const namedImportMap = getPersistedOptions();
  const { revoke } = useGoogleSheet();
  const {
@@ -78,7 +79,7 @@ export default function ImportMapForm(props: ImportMapFormProps) {
  const isLoading = Boolean(loading);
  const canSubmitSpreadsheet = isSpreadsheet && !isLoading;
  const canSubmitGSheet = !isLoading;
-  const canSubmit = isValid && (canSubmitSpreadsheet || canSubmitGSheet);
+  const canSubmit = !hasErrors && isValid && (canSubmitSpreadsheet || canSubmitGSheet);

  return (
    <Panel.Section as='form' id='import-map'>
@@ -50,7 +50,21 @@ export const settingPanels: Readonly<SettingsOption[]> = [
      { id: 'integrations__http', label: 'HTTP settings' },
    ],
  },
-  { id: 'log', label: 'Log', split: true },
+  {
+    id: 'network',
+    label: 'Network',
+    split: true,
+    secondary: [
+      {
+        id: 'network__log',
+        label: 'Application log',
+      },
+      {
+        id: 'network__clients',
+        label: 'Manage clients',
+      },
+    ],
+  },
  {
    id: 'about',
    label: 'About',
@@ -1,13 +1,12 @@
 import { Tooltip } from '@chakra-ui/react';
+import { useLocalStorage } from '@mantine/hooks';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
 import { Playback } from 'ontime-types';
-import { MILLIS_PER_HOUR, MILLIS_PER_SECOND } from 'ontime-utils';
+import { MILLIS_PER_HOUR, MILLIS_PER_SECOND, parseUserTime } from 'ontime-utils';

 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
-import { useLocalStorage } from '../../../../common/hooks/useLocalStorage';
 import { setPlayback } from '../../../../common/hooks/useSocket';
-import { forgivingStringToMillis } from '../../../../common/utils/dateConfig';
 import { tooltipDelayMid } from '../../../../ontimeConfig';
 import TapButton from '../tap-button/TapButton';

@@ -19,10 +18,10 @@ interface AddTimeProps {

 export default function AddTime(props: AddTimeProps) {
  const { playback } = props;
-  const [time, setTime] = useLocalStorage('add-time', 300_000); // 5 minutes
+  const [time, setTime] = useLocalStorage({ key: 'add-time', defaultValue: 300_000 }); // 5 minutes

  const handleTimeChange = (_field: string, value: string) => {
-    const newTime = forgivingStringToMillis(value);
+    const newTime = parseUserTime(value);
    // cap add time to 1 hour
    setTime(Math.min(newTime, MILLIS_PER_HOUR));
  };
@@ -1,5 +1,12 @@
-.extraRow {
+.label {
+  display: block;
+  margin-top: 2rem;
+  font-size: $inner-section-text-size;
+  color: $label-gray;
+}
+
+.controls {
+  margin-top: 0.25rem;
  display: flex;
  gap: 0.5rem;
-  margin-top: 2rem;
 }
@@ -4,10 +4,10 @@ import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { Playback, SimpleDirection, SimplePlayback } from 'ontime-types';
+import { parseUserTime } from 'ontime-utils';

 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
 import { setAuxTimer, useAuxTimerControl, useAuxTimerTime } from '../../../../common/hooks/useSocket';
-import { forgivingStringToMillis } from '../../../../common/utils/dateConfig';
 import TapButton from '../tap-button/TapButton';

 import style from './AuxTimer.module.scss';
@@ -29,33 +29,36 @@ export function AuxTimer() {
  };

  return (
-    <div className={style.extraRow}>
-      <AuxTimerInput />
-      <TapButton onClick={toggleDirection} aspect='tight'>
-        {direction === SimpleDirection.CountDown && <IoArrowDown data-testid='aux-timer-direction' />}
-        {direction === SimpleDirection.CountUp && <IoArrowUp data-testid='aux-timer-direction' />}
-      </TapButton>
+    <label className={style.label}>
+      Auxiliary Timer
+      <div className={style.controls}>
+        <AuxTimerInput />
+        <TapButton onClick={toggleDirection} aspect='tight'>
+          {direction === SimpleDirection.CountDown && <IoArrowDown data-testid='aux-timer-direction' />}
+          {direction === SimpleDirection.CountUp && <IoArrowUp data-testid='aux-timer-direction' />}
+        </TapButton>

-      <TapButton
-        onClick={start}
-        theme={Playback.Play}
-        active={playback === SimplePlayback.Start}
-        disabled={!userCan.start}
-      >
-        <IoPlay data-testid='aux-timer-start' />
-      </TapButton>
-      <TapButton
-        onClick={pause}
-        theme={Playback.Pause}
-        active={playback === SimplePlayback.Pause}
-        disabled={!userCan.pause}
-      >
-        <IoPause data-testid='aux-timer-pause' />
-      </TapButton>
-      <TapButton onClick={stop} theme={Playback.Stop} disabled={!userCan.stop}>
-        <IoStop data-testid='aux-timer-stop' />
-      </TapButton>
-    </div>
+        <TapButton
+          onClick={start}
+          theme={Playback.Play}
+          active={playback === SimplePlayback.Start}
+          disabled={!userCan.start}
+        >
+          <IoPlay data-testid='aux-timer-start' />
+        </TapButton>
+        <TapButton
+          onClick={pause}
+          theme={Playback.Pause}
+          active={playback === SimplePlayback.Pause}
+          disabled={!userCan.pause}
+        >
+          <IoPause data-testid='aux-timer-pause' />
+        </TapButton>
+        <TapButton onClick={stop} theme={Playback.Stop} disabled={!userCan.stop}>
+          <IoStop data-testid='aux-timer-stop' />
+        </TapButton>
+      </div>
+    </label>
  );
 }

@@ -64,7 +67,7 @@ function AuxTimerInput() {
  const { setDuration } = setAuxTimer;

  const handleTimeUpdate = (_field: string, value: string) => {
-    const newTime = forgivingStringToMillis(value);
+    const newTime = parseUserTime(value);
    setDuration(newTime / 1000); //frontend api is seconds based;
  };

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { Tooltip } from '@chakra-ui/react';
-import { Playback } from 'ontime-types';
+import { Playback, TimerPhase } from 'ontime-types';
 import { dayInMs, millisToMinutes, millisToSeconds, millisToString } from 'ontime-utils';

 import { useTimer } from '../../../../common/hooks/useSocket';
@@ -43,8 +43,8 @@ export default function PlaybackTimer(props: PropsWithChildren<PlaybackTimerProp
  const finish = millisToString(expectedFinish);

  const isRolling = playback === Playback.Roll;
-  const isWaiting = timer.secondaryTimer !== null && timer.secondaryTimer > 0 && timer.current === null;
-  const isOvertime = timer.current !== null && timer.current < 0;
+  const isWaiting = timer.phase === TimerPhase.Pending;
+  const isOvertime = timer.phase === TimerPhase.Overtime;
  const hasAddedTime = Boolean(timer.addedTime);

  const rollLabel = isRolling ? 'Roll mode active' : '';
@@ -16,12 +16,9 @@ interface TimerDisplayProps {
 export default function TimerDisplay(props: TimerDisplayProps) {
  const { time } = props;

-  if (time == null) {
-    return <div className={style.timer}>{timerPlaceholder}</div>;
-  }
-
-  const isNegative = time < 0;
-  const display = millisToString(Math.abs(time), { fallback: timerPlaceholder });
+  const isNegative = (time ?? 0) < 0;
+  const display =
+    time == null ? timerPlaceholder : millisToString(time, { fallback: timerPlaceholder }).replace('-', '');
  const classes = cx([style.timer, isNegative ? style.finished : null]);

  return <div className={classes}>{display}</div>;
@@ -36,7 +36,6 @@ $table-header-font-size: calc(1rem - 3px);
    min-width: 2rem;
    text-align: right;
    font-weight: 400;
-
    position: sticky;
    left: 0;
    z-index: 1;
@@ -48,11 +47,13 @@ $table-header-font-size: calc(1rem - 3px);
  position: sticky;
  top: 0;
  z-index: 10;
-  background-color: $gray-1300;

  font-size: $table-header-font-size;
  color: $gray-700;
-  font-weight: 400;
+
+  th {
+      background-color: $gray-1300;
+  }
 }

 .eventRow {
@@ -1,10 +1,9 @@
-import { useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import Color from 'color';
 import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types';

 import useFollowComponent from '../../common/hooks/useFollowComponent';
-import { useLocalStorage } from '../../common/hooks/useLocalStorage';
 import { getAccessibleColour } from '../../common/utils/styleUtils';

 import BlockRow from './cuesheet-table-elements/BlockRow';
@@ -13,7 +12,7 @@ import DelayRow from './cuesheet-table-elements/DelayRow';
 import EventRow from './cuesheet-table-elements/EventRow';
 import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
 import { useCuesheetSettings } from './store/CuesheetSettings';
-import { initialColumnOrder } from './cuesheetCols';
+import useColumnManager from './useColumnManager';

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

@@ -25,11 +24,17 @@ interface CuesheetProps {
 }

 export default function Cuesheet({ data, columns, handleUpdate, selectedId }: CuesheetProps) {
-  const { followSelected, showSettings, showDelayBlock, showPrevious } = useCuesheetSettings();
+  const { followSelected, showSettings, showDelayBlock, showPrevious, showIndexColumn } = useCuesheetSettings();

-  const [columnVisibility, setColumnVisibility] = useLocalStorage('table-hidden', {});
-  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>('table-order', initialColumnOrder);
-  const [columnSizing, setColumnSizing] = useLocalStorage('table-sizes', {});
+  const {
+    columnVisibility,
+    columnOrder,
+    columnSizing,
+    resetColumnOrder,
+    setColumnVisibility,
+    saveColumnOrder,
+    setColumnSizing,
+  } = useColumnManager(columns);

  const selectedRef = useRef<HTMLTableRowElement | null>(null);
  const tableContainerRef = useRef<HTMLDivElement | null>(null);
@@ -52,10 +57,6 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
    getCoreRowModel: getCoreRowModel(),
  });

-  const resetColumnOrder = () => {
-    saveColumnOrder(initialColumnOrder);
-  };
-
  const setAllVisible = () => {
    table.toggleAllColumnsVisible(true);
  };
@@ -64,6 +65,26 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
    setColumnSizing({});
  };

+  const reorder = useCallback(
+    (fromId: string, toId: string) => {
+      // get index of from
+      const fromIndex = columnOrder.indexOf(fromId);
+
+      // get index of to
+      const toIndex = columnOrder.indexOf(toId);
+
+      if (toIndex === -1) {
+        return;
+      }
+
+      const reorderedCols = [...columnOrder];
+      const reorderedItem = reorderedCols.splice(fromIndex, 1);
+      reorderedCols.splice(toIndex, 0, reorderedItem[0]);
+      saveColumnOrder(reorderedCols);
+    },
+    [columnOrder, saveColumnOrder],
+  );
+
  const headerGroups = table.getHeaderGroups();
  const rowModel = table.getRowModel();
  const allLeafColumns = table.getAllLeafColumns();
@@ -83,7 +104,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
      )}
      <div ref={tableContainerRef} className={style.cuesheetContainer}>
        <table className={style.cuesheet}>
-          <CuesheetHeader headerGroups={headerGroups} />
+          <CuesheetHeader headerGroups={headerGroups} saveColumnOrder={reorder} showIndexColumn={showIndexColumn} />
          <tbody>
            {rowModel.rows.map((row) => {
              const key = row.original.id;
@@ -136,6 +157,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
                    selectedRef={isSelected ? selectedRef : undefined}
                    skip={row.original.skip}
                    colour={row.original.colour}
+                    showIndexColumn={showIndexColumn}
                  >
                    {row.getVisibleCells().map((cell) => {
                      return (
@@ -19,6 +19,7 @@ export default function CuesheetProgress() {
      danger={timeDanger}
      dangerColor={data!.dangerColor}
      className={styles.progressOverride}
+      ignoreCssOverride
    />
  );
 }
@@ -1,23 +1,17 @@
-import { memo, useEffect } from 'react';
-import { Tooltip } from '@chakra-ui/react';
 import {
-  closestCenter,
+  closestCorners,
  DndContext,
  DragEndEvent,
-  KeyboardSensor,
  PointerSensor,
  TouchSensor,
  useSensor,
  useSensors,
 } from '@dnd-kit/core';
-import { horizontalListSortingStrategy, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
 import { flexRender, HeaderGroup } from '@tanstack/react-table';
 import { OntimeRundownEntry } from 'ontime-types';

-import { useLocalStorage } from '../../../common/hooks/useLocalStorage';
 import { getAccessibleColour } from '../../../common/utils/styleUtils';
-import { tooltipDelayFast } from '../../../ontimeConfig';
-import { initialColumnOrder } from '../cuesheetCols';

 import { SortableCell } from './SortableCell';

@@ -25,17 +19,12 @@ import style from '../Cuesheet.module.scss';

 interface CuesheetHeaderProps {
  headerGroups: HeaderGroup<OntimeRundownEntry>[];
+  saveColumnOrder: (fromId: string, toId: string) => void;
+  showIndexColumn: boolean;
 }

-function CuesheetHeader(props: CuesheetHeaderProps) {
-  const { headerGroups } = props;
-  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>('table-order', initialColumnOrder);
-
-  useEffect(() => {
-    if (!localStorage.getItem('table-order')) {
-      saveColumnOrder(initialColumnOrder);
-    }
-  }, [saveColumnOrder]);
+export default function CuesheetHeader(props: CuesheetHeaderProps) {
+  const { headerGroups, saveColumnOrder, showIndexColumn } = props;

  const handleOnDragEnd = (event: DragEndEvent) => {
    const { delta, active, over } = event;
@@ -45,21 +34,7 @@ function CuesheetHeader(props: CuesheetHeaderProps) {
    // cancel if we do not have an over id
    if (over?.id == null) return;

-    // get index of from
-    const fromIndex = columnOrder.indexOf(active.id as string);
-
-    // get index of to
-    const toIndex = columnOrder.indexOf(over.id as string);
-
-    if (toIndex === -1) {
-      return;
-    }
-
-    const reorderedCols = [...columnOrder];
-    const reorderedItem = reorderedCols.splice(fromIndex, 1);
-    reorderedCols.splice(toIndex, 0, reorderedItem[0]);
-
-    saveColumnOrder(reorderedCols);
+    saveColumnOrder(active.id as string, over.id as string);
  };

  const sensors = useSensors(
@@ -75,9 +50,6 @@ function CuesheetHeader(props: CuesheetHeaderProps) {
        tolerance: 50,
      },
    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
  );

  return (
@@ -86,13 +58,9 @@ function CuesheetHeader(props: CuesheetHeaderProps) {
        const key = headerGroup.id;

        return (
-          <DndContext key={key} sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleOnDragEnd}>
+          <DndContext key={key} sensors={sensors} collisionDetection={closestCorners} onDragEnd={handleOnDragEnd}>
            <tr key={headerGroup.id}>
-              <th className={style.indexColumn}>
-                <Tooltip label='Event Order' openDelay={tooltipDelayFast}>
-                  #
-                </Tooltip>
-              </th>
+              <th className={style.indexColumn}>{showIndexColumn && '#'}</th>
              <SortableContext key={key} items={headerGroup.headers} strategy={horizontalListSortingStrategy}>
                {headerGroup.headers.map((header) => {
                  const width = header.getSize();
@@ -119,5 +87,3 @@ function CuesheetHeader(props: CuesheetHeaderProps) {
    </thead>
  );
 }
-
-export default memo(CuesheetHeader);
@@ -8,6 +8,7 @@ const pastOpacity = '0.2';

 interface EventRowProps {
  eventIndex: number;
+  showIndexColumn: boolean;
  isPast?: boolean;
  selectedRef?: MutableRefObject<HTMLTableRowElement | null>;
  skip?: boolean;
@@ -15,7 +16,7 @@ interface EventRowProps {
 }

 function EventRow(props: PropsWithChildren<EventRowProps>) {
-  const { children, eventIndex, isPast, selectedRef, skip, colour } = props;
+  const { children, eventIndex, isPast, selectedRef, skip, colour, showIndexColumn } = props;
  const ownRef = useRef<HTMLTableRowElement>(null);
  const [isVisible, setIsVisible] = useState(false);

@@ -56,7 +57,7 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
      ref={selectedRef ?? ownRef}
    >
      <td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour.color }}>
-        {eventIndex}
+        {showIndexColumn && eventIndex}
      </td>
      {isVisible ? children : null}
    </tr>
@@ -24,11 +24,13 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
  const { columns, handleResetResizing, handleResetReordering, handleClearToggles } = props;
  const {
    followSelected,
+    showIndexColumn,
    toggleFollow,
    showPrevious,
    togglePreviousVisibility,
    showDelayBlock,
    showDelayedTimes,
+    toggleIndexColumn,
    toggleDelayedTimes,
    toggleDelayVisibility,
  } = useCuesheetSettings();
@@ -63,6 +65,10 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
            <Switch variant='ontime' size='sm' isChecked={showPrevious} onChange={() => togglePreviousVisibility()} />
            Show past events
          </label>
+          <label className={style.option}>
+            <Switch variant='ontime' size='sm' isChecked={showIndexColumn} onChange={() => toggleIndexColumn()} />
+            Show Event Order
+          </label>
        </div>
        <div className={style.sectionTitle}>Delay Flow</div>
        <div className={style.options}>
@@ -117,5 +117,3 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
    ...dynamicCustomFields,
  ];
 }
-
-export const initialColumnOrder: string[] = makeCuesheetColumns({}).map((column) => column.id as string);
@@ -4,6 +4,7 @@ import { booleanFromLocalStorage } from '../../../common/utils/localStorage';

 interface CuesheetSettings {
  showSettings: boolean;
+  showIndexColumn: boolean;
  followSelected: boolean;
  showPrevious: boolean;
  showDelayBlock: boolean;
@@ -12,6 +13,7 @@ interface CuesheetSettings {
  toggleSettings: (newValue?: boolean) => void;
  toggleFollow: (newValue?: boolean) => void;
  togglePreviousVisibility: (newValue?: boolean) => void;
+  toggleIndexColumn: (newValue?: boolean) => void;
  toggleDelayVisibility: (newValue?: boolean) => void;
  toggleDelayedTimes: (newValue?: boolean) => void;
 }
@@ -27,11 +29,13 @@ enum CuesheetKeys {
  Follow = 'ontime-cuesheet-follow-selected',
  DelayVisibility = 'ontime-cuesheet-show-delay',
  PreviousVisibility = 'ontime-cuesheet-show-previous',
+  ColumnIndex = 'ontime-cuesheet-show-index-column',
  DelayedTimes = 'ontime-cuesheet-show-delayed',
 }

 export const useCuesheetSettings = create<CuesheetSettings>()((set) => ({
  showSettings: false,
+  showIndexColumn: booleanFromLocalStorage(CuesheetKeys.ColumnIndex, true),
  followSelected: booleanFromLocalStorage(CuesheetKeys.Follow, false),
  showPrevious: booleanFromLocalStorage(CuesheetKeys.PreviousVisibility, true),
  showDelayBlock: booleanFromLocalStorage(CuesheetKeys.DelayVisibility, true),
@@ -44,6 +48,12 @@ export const useCuesheetSettings = create<CuesheetSettings>()((set) => ({
      localStorage.setItem(CuesheetKeys.Follow, String(followSelected));
      return { followSelected };
    }),
+  toggleIndexColumn: (newValue?: boolean) =>
+    set((state) => {
+      const showIndexColumn = toggle(state.showIndexColumn, newValue);
+      localStorage.setItem(CuesheetKeys.ColumnIndex, String(showIndexColumn));
+      return { showIndexColumn };
+    }),
  togglePreviousVisibility: (newValue?: boolean) =>
    set((state) => {
      const showPrevious = toggle(state.showPrevious, newValue);
@@ -0,0 +1,46 @@
+import { useCallback, useEffect } from 'react';
+import { useLocalStorage } from '@mantine/hooks';
+import { ColumnDef } from '@tanstack/react-table';
+import { OntimeRundownEntry } from 'ontime-types';
+
+export default function useColumnManager(columns: ColumnDef<OntimeRundownEntry>[]) {
+  const [columnVisibility, setColumnVisibility] = useLocalStorage({ key: 'table-hidden', defaultValue: {} });
+  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
+    key: 'table-order',
+    defaultValue: columns.map((col) => col.id as string),
+  });
+  const [columnSizing, setColumnSizing] = useLocalStorage({ key: 'table-sizes', defaultValue: {} });
+
+  // if the columns change, we update the dataset
+  useEffect(() => {
+    let shouldReplace = false;
+    const newColumns: string[] = [];
+
+    // iterate through columns to see if there are new ids
+    columns.forEach((column) => {
+      const columnnId = column.id as string;
+      if (!shouldReplace && !columnOrder.includes(columnnId)) {
+        shouldReplace = true;
+      }
+      newColumns.push(columnnId);
+    });
+
+    if (shouldReplace) {
+      saveColumnOrder(newColumns);
+    }
+  }, [columnOrder, columns, saveColumnOrder]);
+
+  const resetColumnOrder = useCallback(() => {
+    saveColumnOrder(columns.map((col) => col.id as string));
+  }, [columns, saveColumnOrder]);
+
+  return {
+    columnVisibility,
+    columnOrder,
+    columnSizing,
+    resetColumnOrder,
+    setColumnVisibility,
+    saveColumnOrder,
+    setColumnSizing,
+  };
+}
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { CustomField, CustomFields, isOntimeEvent, OntimeEvent, SupportedEvent } from 'ontime-types';
+import { isOntimeEvent, OntimeEvent, SupportedEvent } from 'ontime-types';
 import { getFirstEventNormal, getLastEventNormal } from 'ontime-utils';

 import Empty from '../../common/components/state/Empty';
@@ -27,11 +27,9 @@ import style from './Operator.module.scss';

 const selectedOffset = 50;

+export type Subscribed = { id: string; label: string; colour: string; value: string }[];
 type TitleFields = Pick<OntimeEvent, 'title'>;
-export type EditEvent = Pick<OntimeEvent, 'id' | 'cue'> & { fieldLabel?: string; fieldValue: string };
-export type PartialEdit = EditEvent & {
-  field: keyof CustomFields;
-};
+export type EditEvent = Pick<OntimeEvent, 'id' | 'cue'> & { subscriptions: Subscribed };

 export default function Operator() {
  const { data, status } = useRundown();
@@ -45,7 +43,7 @@ export default function Operator() {
  const { data: settings } = useSettings();

  const [showEditPrompt, setShowEditPrompt] = useState(false);
-  const [editEvent, setEditEvent] = useState<PartialEdit | null>(null);
+  const [editEvent, setEditEvent] = useState<EditEvent | null>(null);

  const [lockAutoScroll, setLockAutoScroll] = useState(false);
  const selectedRef = useRef<HTMLDivElement | null>(null);
@@ -102,16 +100,9 @@ export default function Operator() {
    debouncedHandleScroll();
  };

-  const handleEdit = useCallback(
-    (event: EditEvent) => {
-      const field = searchParams.get('subscribe') as keyof CustomField | null;
-
-      if (field) {
-        setEditEvent({ ...event, field });
-      }
-    },
-    [searchParams],
-  );
+  const handleEdit = useCallback((event: EditEvent) => {
+    setEditEvent({ ...event });
+  }, []);

  const missingData = !data || !customFields || !projectData;
  const isLoading = status === 'pending' || customFieldStatus === 'pending' || projectDataStatus === 'pending';
@@ -122,8 +113,13 @@ export default function Operator() {

  // get fields which the user subscribed to
  const shouldEdit = searchParams.get('shouldEdit');
-  const subscribe = searchParams.get('subscribe') as keyof CustomFields;
-  const canEdit = shouldEdit && subscribe;
+
+  const subscriptions = (searchParams.get('subscribe') ?? '')
+    .toLocaleLowerCase()
+    .split('_')
+    .filter((value) => Object.hasOwn(customFields, value));
+
+  const canEdit = shouldEdit && subscriptions;

  const main = searchParams.get('main') as keyof TitleFields | null;
  const secondary = searchParams.get('secondary');
@@ -171,9 +167,14 @@ export default function Operator() {
              return null;
            }

-            const mainField = main ? entry?.[main] || entry.title : entry.title;
+            const mainField = main ? getPropertyValue(entry, main) ?? '' : entry.title;
            const secondaryField = getPropertyValue(entry, secondary) ?? '';
-            const subscribedData = entry.custom[subscribe];
+            const subscribedData = subscriptions
+              ? subscriptions.map((id) => {
+                  const { label, colour } = customFields[id];
+                  return { id, label, colour, value: entry.custom[id] };
+                })
+              : null;

            return (
              <OperatorEvent
@@ -189,7 +190,6 @@ export default function Operator() {
                delay={entry.delay}
                isSelected={isSelected}
                subscribed={subscribedData}
-                subscribeLabel={subscribe}
                isPast={isPast}
                selectedRef={isSelected ? selectedRef : undefined}
                onLongPress={canEdit ? handleEdit : () => undefined}
@@ -1,48 +1,69 @@
 import { useRef, useState } from 'react';
 import { Button, Textarea } from '@chakra-ui/react';
+import { OntimeEvent } from 'ontime-types';

 import { useEventAction } from '../../../common/hooks/useEventAction';
-import type { PartialEdit } from '../Operator';
+import type { EditEvent } from '../Operator';

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

 interface EditModalProps {
-  event: PartialEdit;
+  event: EditEvent;
  onClose: () => void;
 }

 export default function EditModal(props: EditModalProps) {
  const { event, onClose } = props;

-  const { updateCustomField } = useEventAction();
+  const { updateEvent } = useEventAction();
  const [loading, setLoading] = useState(false);
-  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement[]>(new Array<HTMLTextAreaElement>());

  const handleSave = async () => {
+    if (!inputRef.current) return;
    setLoading(true);
-    const newValue = inputRef.current?.value;
-    if (newValue === undefined) {
-      return;
+
+    const patchObject: Partial<OntimeEvent> = { id: event.id };
+
+    inputRef.current.forEach((element) => {
+      if (element.dataset.field && element.defaultValue != element.value) {
+        if (patchObject.custom) {
+          patchObject.custom[element.dataset.field] = element.value;
+        } else {
+          Object.assign(patchObject, { custom: { [element.dataset.field]: element.value } });
+        }
+      }
+    });
+
+    if (patchObject.custom) {
+      await updateEvent(patchObject);
    }

-    await updateCustomField(event.id, event.field, newValue);
    setLoading(false);
    onClose();
  };

-  const fieldLabel = event?.fieldLabel ?? event.field;
-
  return (
    <div className={style.editModal}>
-      <div>{`Editing field ${fieldLabel} in cue ${event.cue}`}</div>
-      <Textarea
-        ref={inputRef}
-        variant='ontime-filled'
-        placeholder={`Add value for ${fieldLabel} field`}
-        defaultValue={event.fieldValue}
-        isDisabled={loading}
-        resize='none'
-      />
+      <div>{`Editing fields in cue ${event.cue}`}</div>
+      {event.subscriptions.map((field) => {
+        return (
+          <div key={field.label}>
+            <label>{field.label}</label>
+            <Textarea
+              ref={(element) => {
+                if (element) inputRef.current.push(element);
+              }}
+              variant='ontime-filled'
+              placeholder={`Add value for ${field.label} field`}
+              defaultValue={field.value}
+              data-field={field.id}
+              isDisabled={loading}
+              resize='none'
+            />
+          </div>
+        );
+      })}
      <div className={style.buttonRow}>
        <Button variant='ontime-subtle' onClick={onClose} isDisabled={loading}>
          Cancel
@@ -20,9 +20,9 @@
  grid-template-rows: auto auto auto;
  column-gap: 0.5rem;
  grid-template-areas:
-  "binder main      schedule"
-  "binder secondary running"
-  "binder fields    fields";
+    'binder main      schedule'
+    'binder secondary running'
+    'binder fields    fields';

  &.subscribed {
    background-color: $gray-1250;
@@ -65,12 +65,15 @@
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  color: $ui-white;
+
+  @include ellipsis-text;
 }

 .secondaryField {
  grid-area: secondary;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
+  @include ellipsis-text;
 }

 .schedule {
@@ -93,16 +96,27 @@
  font-weight: 400;
  color: $ui-black;
  margin: 0.25rem 0;
+  display: flex;
+  flex-wrap: wrap;
+

  .field {
    font-weight: 600;
-    padding: 0 0.25rem;
-    background-color: var(--operator-highlight-override, $orange-600);
-    margin-right: 0.5rem;
+    padding-inline: 0.25rem;
+  }
+
+  .noColour {
+    outline: 0.15rem solid var(--operator-highlight-override, $ui-white);
+    outline-offset: -0.15rem;
+    padding-right: 0.3rem;
+    color: $ui-white;
  }

  .value {
-    color: $orange-500;
+    padding-inline: 0.25rem;
+    background-color: $gray-1250;
+    color: var(--operator-highlight-override, $ui-white);
+    margin-right: 1rem;
  }
 }

@@ -6,7 +6,7 @@ import { useTimer } from '../../../common/hooks/useSocket';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import ClockTime from '../../viewers/common/clock-time/ClockTime';
 import RunningTime from '../../viewers/common/running-time/RunningTime';
-import type { EditEvent } from '../Operator';
+import type { EditEvent, Subscribed } from '../Operator';

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

@@ -21,8 +21,7 @@ interface OperatorEventProps {
  duration: number;
  delay?: number;
  isSelected: boolean;
-  subscribed?: string;
-  subscribeLabel: string;
+  subscribed: Subscribed | null;
  isPast: boolean;
  selectedRef?: RefObject<HTMLDivElement>;
  onLongPress: (event: EditEvent) => void;
@@ -47,7 +46,6 @@ function OperatorEvent(props: OperatorEventProps) {
    delay,
    isSelected,
    subscribed,
-    subscribeLabel: subscribedAlias,
    isPast,
    selectedRef,
    onLongPress,
@@ -56,7 +54,9 @@ function OperatorEvent(props: OperatorEventProps) {
  const handleLongPress = (event?: SyntheticEvent) => {
    // we dont have an event out of useLongPress
    event?.preventDefault();
-    onLongPress({ id, cue, fieldLabel: subscribedAlias, fieldValue: subscribed ?? '' });
+    if (subscribed) {
+      onLongPress({ id, cue, subscriptions: subscribed });
+    }
  };

  const mouseHandlers = useLongPress(handleLongPress, { threshold: 800 });
@@ -89,12 +89,22 @@ function OperatorEvent(props: OperatorEventProps) {
      </span>

      <div className={style.fields}>
-        {subscribed && (
-          <>
-            <span className={style.field}>{subscribedAlias}</span>
-            <span className={style.value}>{subscribed}</span>
-          </>
-        )}
+        {subscribed &&
+          subscribed
+            .filter((field) => field.value)
+            .map((field) => {
+              const fieldClasses = cx([style.field, !field.colour ? style.noColour : null]);
+              return (
+                <div key={field.id}>
+                  <span className={fieldClasses} style={{ backgroundColor: field.colour }}>
+                    {field.label}
+                  </span>
+                  <span className={style.value} style={{ color: field.colour }}>
+                    {field.value}
+                  </span>
+                </div>
+              );
+            })}
      </div>
    </div>
  );
@@ -105,5 +105,5 @@
 }

 .progressOverride {
-  border-radius: 0;
+  --progress-bar-br: 0;
 }
@@ -24,6 +24,7 @@ export default function StatusBarProgress(props: StatusBarProgressProps) {
      danger={timeDanger}
      dangerColor={viewSettings.dangerColor}
      className={styles.progressOverride}
+      ignoreCssOverride
    />
  );
 }
@@ -14,6 +14,7 @@ import { cloneEvent } from '../../common/utils/eventsManager';

 import QuickAddBlock from './quick-add-block/QuickAddBlock';
 import RundownEmpty from './RundownEmpty';
+import { useEventSelection } from './useEventSelection';

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

@@ -33,7 +34,9 @@ export default function Rundown({ data }: RundownProps) {
  const { entryCopyId, setEntryCopyId } = useEntryCopy();

  // cursor
-  const { cursor, mode: appMode, setCursor } = useAppMode();
+  const { mode: appMode } = useAppMode();
+  const { clearSelectedEvents, setSelectedEvents, cursor } = useEventSelection();
+
  const cursorRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
  useFollowComponent({ followRef: cursorRef, scrollRef, doFollow: appMode === AppMode.Run });
@@ -44,34 +47,42 @@ export default function Rundown({ data }: RundownProps) {
  const deleteAtCursor = useCallback(
    (cursor: string | null) => {
      if (!cursor) return;
-      const previous = getPreviousNormal(rundown, order, cursor).entry?.id ?? null;
-      deleteEvent(cursor);
-      setCursor(previous);
+      const { entry, index } = getPreviousNormal(rundown, order, cursor);
+      deleteEvent([cursor]);
+      if (entry && index !== null) {
+        setSelectedEvents({ id: entry.id, selectMode: 'click', index });
+      }
    },
-    [deleteEvent, order, rundown, setCursor],
+    [rundown, order, deleteEvent, setSelectedEvents],
  );

-  const insertAtCursor = useCallback(
-    (type: SupportedEvent | 'clone', cursor: string | null, above = false) => {
-      const adjustedCursor = above ? getPreviousNormal(rundown, order, cursor ?? '').entry?.id ?? null : cursor;
-
-      if (adjustedCursor === null) {
+  const insertCopyAtId = useCallback(
+    (atId: string | null, copyId: string | null, above = false) => {
+      const adjustedCursor = above ? getPreviousNormal(rundown, order, atId ?? '').entry?.id ?? null : atId;
+      if (copyId === null) {
        // we cant clone without selection
-        if (type === 'clone') {
-          return;
-        }
+        return;
+      }
+      const cloneEntry = rundown[copyId];
+      if (cloneEntry?.type === SupportedEvent.Event) {
+        //if we don't have a cursor add the new event on top
+        const newEvent = cloneEvent(cloneEntry, adjustedCursor ?? undefined);
+        addEvent(newEvent);
+      }
+    },
+    [addEvent, order, rundown],
+  );
+
+  const insertAtId = useCallback(
+    (type: SupportedEvent, id: string | null, above = false) => {
+      const adjustedCursor = above ? getPreviousNormal(rundown, order, id ?? '').entry?.id ?? null : id;
+      if (adjustedCursor === null) {
        // the only thing to do is adding an event at top
        addEvent({ type });
        return;
      }

-      if (type === 'clone') {
-        const cursorEvent = rundown[adjustedCursor];
-        if (cursorEvent?.type === SupportedEvent.Event) {
-          const newEvent = cloneEvent(cursorEvent, cursorEvent.id);
-          addEvent(newEvent);
-        }
-      } else if (type === SupportedEvent.Event) {
+      if (type === SupportedEvent.Event) {
        const newEvent = {
          type: SupportedEvent.Event,
        };
@@ -92,23 +103,26 @@ export default function Rundown({ data }: RundownProps) {
      if (order.length < 1) {
        return;
      }
-      let newCursor: string | undefined;
+      let newCursor: string | null;
+      let newIndex: number | null;
      if (cursor === null) {
        // there is no cursor, we select the first or last depending on direction if it exists
-        newCursor = direction === 'up' ? getLastNormal(rundown, order)?.id : getFirstNormal(rundown, order)?.id;
+        newCursor =
+          (direction === 'up' ? getLastNormal(rundown, order)?.id : getFirstNormal(rundown, order)?.id) ?? null;
+        newIndex = direction === 'up' ? order.length : 0;
      } else {
        // otherwise we select the next or previous
-        newCursor =
-          direction === 'up'
-            ? getPreviousNormal(rundown, order, cursor).entry?.id
-            : getNextNormal(rundown, order, cursor).entry?.id;
+        const selected =
+          direction === 'up' ? getPreviousNormal(rundown, order, cursor) : getNextNormal(rundown, order, cursor);
+        newCursor = selected.entry?.id ?? null;
+        newIndex = selected.index;
      }

-      if (newCursor) {
-        setCursor(newCursor);
+      if (newCursor && newIndex !== null) {
+        setSelectedEvents({ id: newCursor, selectMode: 'click', index: newIndex });
      }
    },
-    [order, rundown, setCursor],
+    [order, rundown, setSelectedEvents],
  );

  const moveEntry = useCallback(
@@ -134,22 +148,22 @@ export default function Rundown({ data }: RundownProps) {
    ['alt + mod + ArrowDown', () => moveEntry(cursor, 'down'), { preventDefault: true }],
    ['alt + mod + ArrowUp', () => moveEntry(cursor, 'up'), { preventDefault: true }],

-    ['Escape', () => setCursor(null), { preventDefault: true }],
+    ['Escape', () => clearSelectedEvents(), { preventDefault: true }],

    ['mod + Backspace', () => deleteAtCursor(cursor), { preventDefault: true }],

-    ['alt + E', () => insertAtCursor(SupportedEvent.Event, cursor), { preventDefault: true }],
-    ['alt + shift + E', () => insertAtCursor(SupportedEvent.Event, cursor, true), { preventDefault: true }],
+    ['alt + E', () => insertAtId(SupportedEvent.Event, cursor), { preventDefault: true }],
+    ['alt + shift + E', () => insertAtId(SupportedEvent.Event, cursor, true), { preventDefault: true }],

-    ['alt + B', () => insertAtCursor(SupportedEvent.Block, cursor), { preventDefault: true }],
-    ['alt + shift + B', () => insertAtCursor(SupportedEvent.Block, cursor, true), { preventDefault: true }],
+    ['alt + B', () => insertAtId(SupportedEvent.Block, cursor), { preventDefault: true }],
+    ['alt + shift + B', () => insertAtId(SupportedEvent.Block, cursor, true), { preventDefault: true }],

-    ['alt + D', () => insertAtCursor(SupportedEvent.Delay, cursor), { preventDefault: true }],
-    ['alt + shift + D', () => insertAtCursor(SupportedEvent.Delay, cursor, true), { preventDefault: true }],
+    ['alt + D', () => insertAtId(SupportedEvent.Delay, cursor), { preventDefault: true }],
+    ['alt + shift + D', () => insertAtId(SupportedEvent.Delay, cursor, true), { preventDefault: true }],

    ['mod + C', () => setEntryCopyId(cursor), { preventDefault: true }],
-    ['mod + V', () => insertAtCursor('clone', entryCopyId), { preventDefault: true }],
-    ['mod + shift + V', () => insertAtCursor('clone', entryCopyId, true), { preventDefault: true }],
+    ['mod + V', () => insertCopyAtId(cursor, entryCopyId), { preventDefault: true }],
+    ['mod + shift + V', () => insertCopyAtId(cursor, entryCopyId, true), { preventDefault: true }],

    ['alt + backspace', () => deleteAtCursor(cursor), { preventDefault: true }],
  ]);
@@ -165,8 +179,9 @@ export default function Rundown({ data }: RundownProps) {
    if (appMode !== AppMode.Run || !featureData?.selectedEventId) {
      return;
    }
-    setCursor(featureData.selectedEventId);
-  }, [appMode, featureData.selectedEventId, setCursor]);
+    const index = order.findIndex((id) => id === featureData.selectedEventId);
+    setSelectedEvents({ id: featureData.selectedEventId, selectMode: 'click', index });
+  }, [appMode, featureData.selectedEventId, order, setSelectedEvents]);

  const handleOnDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
@@ -185,7 +200,7 @@ export default function Rundown({ data }: RundownProps) {
  };

  if (statefulEntries.length < 1) {
-    return <RundownEmpty handleAddNew={() => insertAtCursor(SupportedEvent.Event, null)} />;
+    return <RundownEmpty handleAddNew={() => insertAtId(SupportedEvent.Event, cursor)} />;
  }

  let previousStart: MaybeNumber = null;
@@ -3,7 +3,6 @@ import { MaybeNumber, OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent

 import { useEventAction } from '../../common/hooks/useEventAction';
 import useMemoisedFn from '../../common/hooks/useMemoisedFn';
-import { useAppMode } from '../../common/stores/appModeStore';
 import { useEmitLog } from '../../common/stores/logger';
 import { cloneEvent } from '../../common/utils/eventsManager';

@@ -56,20 +55,15 @@ export default function RundownEntry(props: RundownEntryProps) {
  } = props;
  const { emitError } = useEmitLog();
  const { addEvent, updateEvent, batchUpdateEvents, deleteEvent, swapEvents } = useEventAction();
-  const cursor = useAppMode((state) => state.cursor);
-  const setCursor = useAppMode((state) => state.setCursor);
-  const { selectedEvents, clearSelectedEvents } = useEventSelection();
+  const { selectedEvents, unselect, clearSelectedEvents } = useEventSelection();

  const removeOpenEvent = useCallback(() => {
-    if (selectedEvents.has(data.id)) {
-      clearSelectedEvents();
-    }
+    unselect(data.id);
+  }, [unselect, data.id]);

-    // clear cursor if we are deleting the event that is currently selected
-    if (cursor === data.id) {
-      setCursor(null);
-    }
-  }, [selectedEvents, data.id, cursor, clearSelectedEvents, setCursor]);
+  const clearMultiSelection = useCallback(() => {
+    clearSelectedEvents();
+  }, [clearSelectedEvents]);

  // Create / delete new events
  type FieldValue = {
@@ -111,10 +105,12 @@ export default function RundownEntry(props: RundownEntryProps) {
        return swapEvents({ from: value as string, to: data.id });
      }
      case 'delete': {
-        if (selectedEvents.has(data.id)) {
-          removeOpenEvent();
+        if (selectedEvents.size > 1) {
+          clearMultiSelection();
+          return deleteEvent(Array.from(selectedEvents));
        }
-        return deleteEvent(data.id);
+        removeOpenEvent();
+        return deleteEvent([data.id]);
      }
      case 'clone': {
        const newEvent = cloneEvent(data as OntimeEvent, data.id);
@@ -134,7 +130,7 @@ export default function RundownEntry(props: RundownEntryProps) {
        if (selectedEvents.size > 1) {
          const changes: Partial<OntimeEvent> = { [field]: value };
          batchUpdateEvents(changes, Array.from(selectedEvents));
-          return clearSelectedEvents();
+          return;
        }
        if (field in data) {
          // @ts-expect-error -- not sure how to type this
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Carlos Valente	a63fa68d39	bump version to 3.3.3	2024-06-23 23:02:14 +02:00
Carlos Valente	20503de6fd	refactor: minor code cleanups	2024-06-23 22:07:34 +02:00
Carlos Valente	0335da9786	refactor: improve errors to user	2024-06-23 22:07:34 +02:00
Carlos Valente	9f1a64f53c	chore: upgrade dependencies	2024-06-23 22:07:34 +02:00
Alex Christoffer Rasmussen	975356f4f4	events with 0 duration dose not contribute to next day calculation (#1099 )	2024-06-23 22:06:44 +02:00
Carlos Valente	1b448835cd	fix: duplicate validation	2024-06-23 16:17:03 +02:00
Carlos Valente	cbf3d566b9	fix: prevent calling service before init	2024-06-23 11:50:49 +02:00
Carlos Valente	6c20cb5e99	refactor: remove size limits in title	2024-06-22 13:48:19 +02:00
Carlos Valente	cfc3aab893	style: add background to highlight	2024-06-21 14:45:45 +02:00
Alex Christoffer Rasmussen	b7c48f38a9	hotfix-build (#1091 ) * skip "alwaysStrict": true * bump to 3.3.2 * remove all new ts check to be sure	2024-06-17 11:44:44 +02:00
Carlos Valente	dcb6bfa62d	bump version to 3.3.1	2024-06-17 08:21:01 +02:00
Carlos Valente	0abc4de3cd	fix: column reordering in cuesheet	2024-06-17 08:14:12 +02:00
Carlos Valente	f750ed3cdc	style: match table header size	2024-06-17 08:14:12 +02:00
Carlos Valente	f026c1c1e3	chore: run linter on imports	2024-06-17 08:10:14 +02:00
Piotr Górski	ce176b01a2	Added Polish Translation (#1077 )	2024-06-16 14:46:11 +02:00
Carlos Valente	337dd7892a	chore: fix typo in donation text	2024-06-16 14:45:16 +02:00
Carlos Valente	b7daf2926a	refactor: improve typing	2024-06-16 09:07:01 +02:00
jwetzell	81a07099ae	Merge pull request #1084 from cpvalente/fix/npm-publish-with-provenance add permission for provenance publishing	2024-06-15 14:59:28 -05:00
jwetzell	8f88ca5053	add permission for provenance publishing https://docs.npmjs.com/generating-provenance-statements	2024-06-15 14:59:16 -05:00
jwetzell	82a885dc44	Merge pull request #1082 from cpvalente/fix/publish-action add registry url for publishing via CI	2024-06-15 13:33:58 -05:00
jwetzell	c4be814de5	add registry url for publishing via CI	2024-06-15 13:33:08 -05:00
Carlos Valente	9f3186e249	bump version to 3.3.0	2024-06-15 17:30:58 +02:00
jwetzell	5159554697	Merge pull request #1080 from cpvalente/fix/npm-publish-action disable git checks for pnpm publish workflow	2024-06-15 08:30:30 -05:00
jwetzell	cf690aff08	disable git checks for pnpm publish workflow	2024-06-15 08:25:43 -05:00
Carlos Valente	48c4e5f429	bump version to 3.3.0	2024-06-15 15:10:24 +02:00
Carlos Valente	ad0da6def4	fix: persistence of custom fields (#1078 )	2024-06-15 15:07:20 +02:00
Alex Christoffer Rasmussen	a15eb0db4c	Client remote control (#930 ) --------- Co-authored-by: kellhogs <fabianpos99@gmail.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2024-06-15 12:26:41 +02:00
jwetzell	70e8fbf327	add warning and danger transitions as timer life cycle events (#1071 ) * setup detection of TImerPhase changes * add integration event for transition to warning * add integration event for transition to danger --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2024-06-15 09:54:29 +02:00
jwetzell	1044dfac01	Merge pull request #1051 from cpvalente/feat/ontime-headless add a headless version of ontime	2024-06-13 20:11:00 -05:00
jwetzell	b5e5c113e2	update lock file	2024-06-13 20:06:11 -05:00
Carlos Valente	cbcff5e7ab	docs: initial npm documentation	2024-06-13 20:04:08 -05:00
jwetzell	83cb2f82f5	add SIGHUP and SIGTERM to cli shutdown	2024-06-13 20:01:25 -05:00
jwetzell	837fd53dfd	remove pkg bundling of cli	2024-06-13 20:01:04 -05:00
jwetzell	4962288a53	update package name for organization scoping	2024-06-13 19:59:47 -05:00
jwetzell	75a35e8537	add access flag to publish to organization	2024-06-13 19:59:47 -05:00
jwetzell	6e839fcefb	rename bin to ontime	2024-06-13 19:59:47 -05:00
jwetzell	052a8e4ccb	switch pkg to only build linux x64 and arm64 binaries	2024-06-13 19:59:47 -05:00
jwetzell	969c2bad14	add step to publish to NPM as well	2024-06-13 19:59:47 -05:00
jwetzell	9717222491	remove dev script from cli package.json	2024-06-13 19:59:47 -05:00
jwetzell	081c0bdac4	add necessary files to package.json for publishing	2024-06-13 19:59:47 -05:00
jwetzell	8b99e91883	add github workflow to build cli	2024-06-13 19:59:47 -05:00
jwetzell	4af2e688d1	add basic cli app for bundling a headless ontime	2024-06-13 19:59:47 -05:00
Luke Stein	cf8c8d4b2e	bump version to 3.2.0	2024-06-13 22:46:32 +02:00
Alex Christoffer Rasmussen	9e63261b35	None colour from API (#1063 )	2024-06-12 21:31:08 +02:00
Alex Christoffer Rasmussen	b1838a5e9a	display multiple custom fields in operator view (#1001 ) --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me>	2024-06-12 14:25:26 +02:00
Alex Christoffer Rasmussen	9d7b5568e4	use port 3000 in dev mode (#1065 )	2024-06-11 13:37:10 +02:00
Alex Christoffer Rasmussen	657aed1244	Fix coerce enum (#1064 )	2024-06-11 13:03:34 +02:00
Carlos Valente	13c49f3652	chore: improve dev scripts	2024-06-10 18:26:18 +02:00
Carlos Valente	86b4ddadb5	chore: prepare log levels	2024-06-10 18:26:18 +02:00
Carlos Valente	e9f806b88a	style: organise console levels and semantics	2024-06-10 18:26:18 +02:00
Carlos Valente	4f672670ed	chore: document aux functions	2024-06-10 18:26:18 +02:00
Carlos Valente	8742b790f3	refactor: escalate severe to electron	2024-06-10 18:26:18 +02:00
Carlos Valente	d41cd78f2e	refactor: add severe log level	2024-06-10 18:26:18 +02:00
Carlos Valente	715600a514	refactor: improve console visibility	2024-06-10 18:26:18 +02:00
Carlos Valente	b99cf5f255	refactor: improve error states in spreadsheet flow	2024-06-09 22:04:41 +02:00
Carlos Valente	9a9a0eb7cf	refactor: use timer phase while waiting	2024-06-08 13:47:26 +02:00
Carlos Valente	4bf2422ebc	refactor: show next when waiting to roll	2024-06-08 13:47:26 +02:00
Michael Foster	add769fe1e	fix for MultiPartProgressBar styling (#1022 )	2024-06-07 21:08:17 +02:00
Carlos Valente	3af4c64ff3	chore: upgrade lint dependencies	2024-06-07 20:15:43 +02:00
Alex Christoffer Rasmussen	f405e65c55	Custom for timer title (#1055 )	2024-06-07 15:24:29 +02:00
Alex Christoffer Rasmussen	0e32b3a3af	Fix: link events in sheet when there is nothing to link (#1053 ) * create failing tests * fix missing optional chaining	2024-06-06 22:38:52 +02:00
Alex Christoffer Rasmussen	c2fa115946	Validate project filename (#1046 )	2024-06-06 22:37:41 +02:00
jwetzell	edb48a2fc7	consider custom fields when loading operator main field (#1049 )	2024-06-06 21:57:50 +02:00
Alex Christoffer Rasmussen	6f7846bbf7	fix and test only space osc payload (#1052 )	2024-06-06 11:19:12 +02:00
Alex Christoffer Rasmussen	48ebd31c54	bump version to 3.1.1 (#1045 )	2024-06-04 15:57:52 +02:00
Carlos Valente	6d1a911ab8	refactor: rename negative to overtime	2024-06-04 15:51:00 +02:00
Carlos Valente	ee1753ef29	fix: account for pending timers	2024-06-04 15:51:00 +02:00
Carlos Valente	147e5f5a27	chore: remove unused dependencies	2024-06-03 22:38:57 +02:00
Carlos Valente	a02b3faacc	chore: bump version to 3.1.0	2024-06-03 22:38:57 +02:00
Alex Christoffer Rasmussen	a3b21072eb	keep the index row as a colour chip (#1039 )	2024-06-03 22:38:22 +02:00
Carlos Valente	2076080c5f	refactor: supress modifiers in count-up timers	2024-06-03 22:36:05 +02:00
Alex Christoffer Rasmussen	8b3abe9d61	fix: insert above shortcut (#1020 ) refactor: unify setCursor and useEventSelection	2024-06-03 21:34:00 +02:00
Carlos Valente	c2039866b4	refactor: fix missed first update (#1031 )	2024-06-03 20:27:51 +02:00
Carlos Valente	73e4a15718	style: add label to auxiliary timer	2024-06-03 20:26:25 +02:00
asharonbaltazar	c4359af2a0	feat:toggle index column (#1037 ) * feat:add `showIndexColumn` boolean property to `CuesheetSettings` * feat:use `showIndexColumn` to hide column index th/tr * feat:pass `showIndexColumn` to components * fix:update column headers naming	2024-06-03 14:21:11 -04:00
Carlos Valente	f75f45b19a	refactor: simplify client logic on timer phases	2024-06-03 20:18:19 +02:00
Carlos Valente	fd2eee32aa	refactor: declare timer phase	2024-06-03 20:18:19 +02:00
Carlos Valente	a53d354b16	refactor: continue roll	2024-06-03 20:17:41 +02:00
Alex Christoffer Rasmussen	ec55236eb2	fix: osc new project (#1032 )	2024-06-02 18:01:36 +02:00
Alex Christoffer Rasmussen	3895b37572	Allow time change from api (#1009 ) Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2024-06-02 15:21:09 +02:00
Julien Recurt	d8626ff324	Add option to display the full time (HH:mm:ss) in the timer view (#988 ) * Add option to display the full time (HH:mm:ss) in the timer view Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2024-06-01 13:39:15 +02:00
arc-alex	6c3870c15b	catch getWorksheetNames	2024-05-31 22:17:17 +02:00
Carlos Valente	4fadb23b07	refactor: timer overrides do not affect minimal	2024-05-31 22:17:03 +02:00
Carlos Valente	199ed1617f	fix: menu link to operator	2024-05-31 18:57:45 +02:00
Carlos Valente	2d618e0657	refactor: remove double import	2024-05-30 22:41:50 +02:00
Carlos Valente	f928c1dc95	refactor: avoid unnecessary computer property	2024-05-30 22:41:50 +02:00
jwetzell	8d526c7d31	Merge pull request #1019 from cpvalente/cleanup-server-setup remove redundant path evaluation	2024-05-30 07:57:23 -05:00
Carlos Valente	686c6108bf	refactor: improve payload type for OSC (#954 ) --------- Co-authored-by: Joel Wetzell <jwetzell@yahoo.com> Co-authored-by: arc-alex <ac@omnivox.dk>	2024-05-30 13:02:22 +02:00
Carlos Valente	ea3d33ca93	fix: correct key on shortcuts	2024-05-30 12:15:57 +02:00
jwetzell	6bf94ff645	remove redundant path evaluation	2024-05-29 16:25:15 -05:00
Carlos Valente	930cd71ffd	chore: upgrade electron	2024-05-29 08:33:44 +02:00
Carlos Valente	45cf1cf199	chore: bump version to 3.0.4	2024-05-28 22:49:29 +02:00
Carlos Valente	354f464263	chore: user feedback	2024-05-28 22:49:29 +02:00
Carlos Valente	c46a00febc	chore: expand download links	2024-05-28 22:49:29 +02:00
Carlos Valente	e991e151db	refactor: improve dnd activation strategy	2024-05-28 22:45:10 +02:00
Carlos Valente	b5993b91e1	fix: column reordering refactor: migrate local storage hook	2024-05-28 22:45:10 +02:00
arc-alex	4beac19c4a	Clear upload folder on startup	2024-05-28 22:44:55 +02:00
Carlos Valente	be852f4546	refactor: allow hiding sidebar	2024-05-27 15:52:02 +02:00
Carlos Valente	84e224dd71	refactor: unify time parsing logic	2024-05-27 15:51:45 +02:00
Carlos Valente	7cbb2112ed	refactor: simplify parsing logic	2024-05-27 15:51:45 +02:00
Carlos Valente	ce910c9cc6	refactor: extract parseUserTime	2024-05-27 15:51:45 +02:00
Alex Christoffer Rasmussen	9d04954d87	fix change api isPublic (#1008 )	2024-05-27 13:01:10 +02:00
Alex Christoffer Rasmussen	345ea6722e	add notes to secondaryOptions in timer view (#1004 )	2024-05-27 12:22:01 +02:00
Alex Christoffer Rasmussen	f43221cf7a	don't notify when aux timer is paused (#1003 )	2024-05-27 11:51:07 +02:00
Carlos Valente	a09aa922bb	refactor: delete several events	2024-05-26 21:36:49 +02:00
Carlos Valente	16f31a07b7	chore: upgrade dependencies	2024-05-26 21:36:49 +02:00
Carlos Valente	77d111650a	refactor: reduce scope of context	2024-05-26 21:36:49 +02:00
jwetzell	72891a69f4	Merge pull request #998 from cpvalente/fix/smart-time-parsing address some issues in am/pm time parsing	2024-05-26 11:07:43 -05:00
Carlos Valente	b8d5a30caf	style: input text alignment	2024-05-25 15:19:01 +02:00
jwetzell	9cbd4c085b	slim back tests even further and list out	2024-05-24 06:51:51 -05:00
jwetzell	afe0323384	use let not var	2024-05-24 06:12:46 -05:00
jwetzell	1907abc512	pare back am/pm tests	2024-05-24 05:53:07 -05:00
jwetzell	834aafe06d	remove need for hardcoded 12am test	2024-05-23 20:29:05 -05:00
jwetzell	98418014d3	lowercase time string before beginning to parse	2024-05-23 20:16:41 -05:00
jwetzell	3d13e784ea	fix parsing am/pm times	2024-05-23 19:45:12 -05:00
jwetzell	e397500d07	dynamically build am/pm tests	2024-05-23 19:17:36 -05:00
jwetzell	c7c0241859	add new am/pm test cases for dateConfig util	2024-05-23 17:39:42 -05:00
Carlos Valente	71a7fe96d1	style: fix input overflow	2024-05-23 22:13:42 +02:00
jwetzell	d0f958c13d	Merge pull request #990 from cpvalente/fix/docker-build fix docker multi-architecture build	2024-05-23 08:15:07 -05:00
jwetzell	7ee98fb062	remove node setup and build from docker action	2024-05-21 16:06:28 -05:00
jwetzell	c2b66a4215	rework dockerfile to remove need for turbo	2024-05-21 16:06:15 -05:00
jwetzell	1d0ee10c00	remove build:docker from turbo	2024-05-21 16:05:49 -05:00