Fix rundown-switch data loss and clone key divergence found in review

Two real bugs in the clone work, both confirmed with repros before fixing and re-confirmed by reverting each fix afterwards. 1. Data loss on every rundown switch (blocker). cachedRundown was a module-level const mutated in place by init(). Once setRundown stored by reference, db.data.rundowns[loadedId] aliased that object, so loading a second rundown rewrote the first one's stored record in place. Repro: after init(A) then init(B), store['rundown-a'] had id 'rundown-b', title 'B' and order ['b1'] - A's data was gone, and both keys pointed at one object. The earlier audit missed this because it only asked whether callers mutate an object after handing it over, within one rundown's lifetime. It never considered that cachedRundown is a singleton reused across different rundowns, which is where the aliasing actually bites. Fixed at the root: cachedRundown is now reassigned rather than repurposed, so a stored record keeps pointing at the data it was stored for. Mutating in place from commit, while it still represents the same rundown, is unchanged and is what keeps the stored record current. Every getCurrentRundown() call site was checked - all are locals used within a single operation, none held across a switch. 2. cloneEntryData was not key-equal to structuredClone. For an entry without a custom/triggers/entries key, the spread-then- override form added those as own keys ('custom' as {}, 'triggers' as undefined). fast-equals deepEqual counts own keys, so a clone never compared equal to its source, which is the comparison runtime.service.ts uses to decide whether to re-broadcast - reinstating the per-tick re-broadcast and restore-save this PR had already fixed once. Dropping `?? []` earlier corrected the value but not the key. Containers are now only replaced when the entry carries them. The regression test was vacuous: toBeUndefined() passes for both an absent key and an own key holding undefined. It now asserts key equality against structuredClone plus deepEqual, and was verified to fail against the previous implementation. Typecheck, lint, format and the full suite (706 tests) pass.
Remove the second full-rundown clone from DataProvider.setRundown
2026-08-25 17:09:09 +00:00 · 2026-08-25 05:32:52 +00:00 · 2026-08-25 05:08:02 +00:00 · 2026-08-24 18:56:57 +00:00 · 2026-08-24 18:51:39 +00:00 · 2026-08-23 19:59:56 +00:00
67 changed files with 2518 additions and 2600 deletions
@@ -4,7 +4,7 @@
  "private": true,
  "type": "module",
  "dependencies": {
-    "@base-ui/react": "1.6.0",
+    "@base-ui/react": "1.7.0",
    "@codemirror/commands": "^6.0.0",
    "@codemirror/lang-css": "^6.0.0",
    "@codemirror/state": "^6.0.0",
@@ -13,12 +13,12 @@
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@fontsource/open-sans": "^5.2.7",
-    "@mantine/hooks": "^8.3.7",
+    "@mantine/hooks": "^9.5.1",
    "@sentry/react": "^10.59.0",
    "@table-nav/react": "^0.0.7",
    "@tanstack/react-query": "^5.101.0",
    "@tanstack/react-query-devtools": "^5.101.0",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.1.2",
    "@uiw/codemirror-theme-vscode": "^4.25.10",
    "autosize": "^6.0.1",
    "axios": "^1.18.0",
@@ -29,7 +29,7 @@
    "react-dom": "^19.2.7",
    "react-fast-compare": "^3.2.2",
    "react-hook-form": "^7.80.0",
-    "react-icons": "5.6.0",
+    "react-icons": "5.7.0",
    "react-router": "^8.0.1",
    "react-virtuoso": "^4.18.7",
    "zustand": "^5.0.14"
@@ -60,7 +60,8 @@
    ]
  },
  "devDependencies": {
-    "@sentry/vite-plugin": "5.1.1",
+    "@sentry/vite-plugin": "5.4.0",
+    "@types/node": "catalog:",
    "@types/qrcode": "^1.5.6",
    "@types/react": "^19.1.12",
    "@types/react-dom": "^19.1.9",
@@ -72,8 +73,8 @@
    "ontime-utils": "workspace:*",
    "sass": "^1.57.1",
    "typescript": "catalog:",
-    "vite": "8.0.1",
-    "vite-plugin-compression2": "2.5.1",
+    "vite": "8.2.1",
+    "vite-plugin-compression2": "2.5.3",
    "vite-plugin-svgr": "4.5.0",
    "vitest": "catalog:"
  }
@@ -0,0 +1,6 @@
+.eyebrow {
+  font-size: $aux-text-size;
+  font-weight: 400;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './Eyebrow.module.scss';
+
+interface EyebrowProps {
+  className?: string;
+}
+
+export default function Eyebrow({ children, className }: PropsWithChildren<EyebrowProps>) {
+  return <span className={cx([style.eyebrow, className])}>{children}</span>;
+}
@@ -1,7 +1,3 @@
-.separator {
-  border-color: $border-color-ondark;
-}
-
 .backdrop {
  position: fixed;
  inset: 0;
@@ -23,14 +19,15 @@

  width: 22rem;
  height: 100vh;
+  height: 100dvh;

  display: flex;
  flex-direction: column;
-  padding-block: 1rem;

  background-color: $gray-1250;
  color: $ui-white;
  border-right: 1px solid $gray-1100;
+  box-shadow: $box-shadow-right;

  &[data-open] {
    transform: translateX(0%);
@@ -50,22 +47,51 @@
 }

 .header {
+  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
-  height: 3.5rem;
-  padding-inline: 1.5rem;
+  gap: 1rem;
+  min-height: 4rem;
+  padding: 0.75rem 1rem 0.75rem 1.25rem;
+  border-bottom: 1px solid $white-10;
+}

+.headerText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.title {
  font-weight: 600;
  font-size: 1.25rem;
+  line-height: 1.2;
+}
+
+.clientName {
+  font-size: $aux-text-size;
+  color: $gray-600;
+  @include ellipsis-text;
 }

 .body {
  flex: 1;
+  min-height: 0;
  overflow-y: auto;
+  padding-block: 0.5rem 1rem;
 }

-.note {
-  margin-left: auto;
-  color: $white-20;
+.group {
+  display: flex;
+  flex-direction: column;
+
+  &:not(:first-child) {
+    margin-top: 0.75rem;
+  }
+}
+
+.groupLabel {
+  padding: 0.5rem 1.25rem 0.25rem;
+  color: $gray-700;
 }
@@ -1,7 +1,7 @@
 import { Dialog } from '@base-ui/react/dialog';
-import { useDisclosure, useFullscreen } from '@mantine/hooks';
-import { memo } from 'react';
-import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
+import { useDisclosure, useFullscreenDocument } from '@mantine/hooks';
+import { memo, PropsWithChildren } from 'react';
+import { IoClose, IoExpand, IoLockClosedOutline, IoPencilOutline, IoSwapVertical } from 'react-icons/io5';
 import { LuCoffee } from 'react-icons/lu';
 import { useLocation } from 'react-router';

@@ -14,9 +14,11 @@ import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
 import IconButton from '../buttons/IconButton';
 import { RenameClientModal } from '../client-modal/RenameClientModal';
+import Eyebrow from '../eyebrow/Eyebrow';
 import ClientLink from './client-link/ClientLink';
 import EditorNavigation from './editor-navigation/EditorNavigation';
 import NavigationMenuItem from './navigation-menu-item/NavigationMenuItem';
+import NavigationMenuToggle from './navigation-menu-item/NavigationMenuToggle';
 import OtherAddresses from './other-addresses/OtherAddresses';

 import style from './NavigationMenu.module.scss';
@@ -33,7 +35,7 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
  const isSmallScreen = useIsSmallScreen();

  const [isRenameOpen, handlers] = useDisclosure(false);
-  const { fullscreen, toggle } = useFullscreen();
+  const { fullscreen, toggle } = useFullscreenDocument();
  const { mirror, toggleMirror } = useViewOptionsStore();
  const { keepAwake, toggleKeepAwake } = useKeepAwakeOptions();
  const location = useLocation();
@@ -52,75 +54,93 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
        <RenameClientModal id={id} name={name} isOpen={isRenameOpen} onClose={handlers.close} />
        <Dialog.Popup className={style.drawer}>
          <div className={style.header}>
-            <Dialog.Title>Ontime</Dialog.Title>
-            <IconButton variant='subtle-white' size='large' onClick={onClose}>
+            <div className={style.headerText}>
+              <Dialog.Title className={style.title}>Ontime</Dialog.Title>
+              {name && <span className={style.clientName}>{name}</span>}
+            </div>
+            <IconButton variant='subtle-white' size='large' aria-label='Close menu' onClick={onClose}>
              <IoClose />
            </IconButton>
          </div>
          <div className={style.body}>
-            {supportsFullscreen && (
-              <NavigationMenuItem active={fullscreen} onClick={toggle}>
-                Toggle Fullscreen
-                {fullscreen ? <IoContract /> : <IoExpand />}
+            <MenuGroup label='This screen'>
+              {supportsFullscreen && (
+                <NavigationMenuToggle checked={fullscreen} icon={<IoExpand />} label='Fullscreen' onToggle={toggle} />
+              )}
+              <NavigationMenuToggle
+                checked={mirror}
+                icon={<IoSwapVertical />}
+                label='Flip Screen'
+                onToggle={() => toggleMirror()}
+              />
+              {canUseWakeLock && (
+                <NavigationMenuToggle
+                  checked={keepAwake}
+                  icon={<LuCoffee />}
+                  label='Keep Awake'
+                  onToggle={toggleKeepAwake}
+                />
+              )}
+              <NavigationMenuItem onClick={handlers.open}>
+                <IoPencilOutline />
+                Rename Client
              </NavigationMenuItem>
-            )}
-            <NavigationMenuItem active={mirror} onClick={() => toggleMirror()}>
-              Flip Screen
-              <IoSwapVertical />
-              {mirror && <span className={style.note}>Active</span>}
-            </NavigationMenuItem>
-            {canUseWakeLock && (
-              <NavigationMenuItem active={keepAwake} onClick={toggleKeepAwake}>
-                Keep Awake
-                <LuCoffee />
-                {keepAwake && <span className={style.note}>Active</span>}
-              </NavigationMenuItem>
-            )}
-            <NavigationMenuItem onClick={handlers.open}>Rename Client</NavigationMenuItem>
+            </MenuGroup>

-            <hr className={style.separator} />
-
-            <EditorNavigation />
-            <ClientLink
-              to='cuesheet'
-              current={location.pathname === '/cuesheet'}
-              postAction={isSmallScreen ? onClose : undefined}
-            >
-              <IoLockClosedOutline />
-              Cuesheet
-            </ClientLink>
-            <ClientLink to='op' current={location.pathname === '/op'} postAction={isSmallScreen ? onClose : undefined}>
-              <IoLockClosedOutline />
-              Operator
-            </ClientLink>
-
-            <hr className={style.separator} />
-
-            {navigatorConstants.map((route) => (
+            <MenuGroup label='Ontime app'>
+              <EditorNavigation />
              <ClientLink
-                key={route.url}
-                to={route.url}
-                current={location.pathname === `/${route.url}`}
+                to='cuesheet'
+                current={location.pathname === '/cuesheet'}
                postAction={isSmallScreen ? onClose : undefined}
              >
-                {route.label}
+                <IoLockClosedOutline />
+                Cuesheet
              </ClientLink>
-            ))}
+              <ClientLink
+                to='op'
+                current={location.pathname === '/op'}
+                postAction={isSmallScreen ? onClose : undefined}
+              >
+                <IoLockClosedOutline />
+                Operator
+              </ClientLink>
+            </MenuGroup>
+
+            <MenuGroup label='Views'>
+              {navigatorConstants.map((route) => (
+                <ClientLink
+                  key={route.url}
+                  to={route.url}
+                  current={location.pathname === `/${route.url}`}
+                  postAction={isSmallScreen ? onClose : undefined}
+                >
+                  {route.label}
+                </ClientLink>
+              ))}
+            </MenuGroup>

            <PresetNavigation isSmallScreen={isSmallScreen} onClose={onClose} />
          </div>

-          {isLocalhost && (
-            <div>
-              <OtherAddresses currentLocation={location.pathname} />
-            </div>
-          )}
+          {isLocalhost && <OtherAddresses currentLocation={location.pathname} />}
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>
  );
 }

+function MenuGroup({ label, children }: PropsWithChildren<{ label: string }>) {
+  return (
+    <div className={style.group}>
+      <div className={style.groupLabel}>
+        <Eyebrow>{label}</Eyebrow>
+      </div>
+      {children}
+    </div>
+  );
+}
+
 function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean; onClose: () => void }) {
  const location = useLocation();
  const { data: urlPresets } = useUrlPresets();
@@ -129,8 +149,7 @@ function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean;
  if (navPresets.length === 0) return null;

  return (
-    <>
-      <hr className={style.separator} />
+    <MenuGroup label='Presets'>
      {navPresets.map((preset) => (
        <ClientLink
          key={preset.alias}
@@ -141,6 +160,6 @@ function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean;
          {preset.alias}
        </ClientLink>
      ))}
-    </>
+    </MenuGroup>
  );
 }
@@ -1,5 +1,5 @@
-import { useDisclosure, useHotkeys } from '@mantine/hooks';
-import { memo } from 'react';
+import { useHotkeys } from '@mantine/hooks';
+import { memo, useCallback, useState } from 'react';
 import { useSearchParams } from 'react-router';

 import { hasCustomParams } from '../../stores/savedViewParams';
@@ -15,21 +15,37 @@ interface ViewNavigationMenuProps {
  suppressSettings?: boolean;
 }

+function isInteractiveKeyboardAction(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+
+  return (
+    target.closest(
+      'button, a, input, textarea, select, [role="button"], [role="checkbox"], [role="switch"], [contenteditable]:not([contenteditable="false"])',
+    ) !== null
+  );
+}
+
 export default memo(ViewNavigationMenu);
 function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
-  const [isMenuOpen, menuHandler] = useDisclosure();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const { open: showEditFormDrawer } = useViewParamsEditorStore();
  const [searchParams] = useSearchParams();
  const hasSavedChanges = hasCustomParams(searchParams);

+  const toggleMenu = useCallback(() => setIsMenuOpen((prev) => !prev), []);
+  const closeMenu = useCallback(() => setIsMenuOpen(false), []);
+
  useHotkeys([
    [
      'Space',
-      () => {
-        if (isNavigationLocked) return;
-        menuHandler.toggle();
+      (event) => {
+        if (isNavigationLocked || isInteractiveKeyboardAction(event.target)) return;
+        event.preventDefault();
+        toggleMenu();
      },
-      { preventDefault: true },
+      { preventDefault: false },
    ],
    [
      'mod + ,',
@@ -48,11 +64,11 @@ function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNaviga
  return (
    <>
      <FloatingNavigation
-        toggleMenu={isNavigationLocked ? undefined : menuHandler.toggle}
+        toggleMenu={isNavigationLocked ? undefined : toggleMenu}
        toggleSettings={suppressSettings ? undefined : showEditFormDrawer}
        hasSavedChanges={hasSavedChanges}
      />
-      {!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />}
+      {!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={closeMenu} />}
    </>
  );
 }
@@ -2,35 +2,68 @@
  display: flex;
  align-items: center;

-  padding: 0.75rem 1.5rem;
-  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  gap: 0.625rem;
  width: 100%;

-  border-left: 4px solid transparent;
-  color: $action-text-color;
+  border-left: 3px solid transparent;
+  color: $gray-200;
+  font-size: $text-body-size;
  white-space: nowrap;
+  text-align: left;

  cursor: pointer;

-  transition-property: color;
+  transition-property: color, background-color;
  transition-duration: $transition-time-action;

+  // keep icons on a fixed box so labels align regardless of the glyph
+  > svg {
+    flex-shrink: 0;
+    width: 1.125rem;
+    height: 1.125rem;
+    color: $gray-500;
+    transition: color $transition-time-action;
+  }
+
  &:hover {
-    color: $ontime-color;
-    background-color: $gray-1350;
+    background-color: $white-3;
+    color: $ui-white;
+
+    > svg {
+      color: $gray-300;
+    }
  }

  &:active {
-    background-color: $border-color-ondark;
+    background-color: $white-7;
  }

-  &:focus {
+  &:focus-visible {
    outline: 2px solid $blue-500;
-    background-color: $gray-1350;
+    outline-offset: -2px;
+    background-color: $white-3;
+  }
+
+  // toggle rows are labels, the focusable control sits inside them
+  &:focus-within {
+    background-color: $white-3;
  }

  &.current {
-    background-color: $gray-1300;
-    border-left: 4px solid $action-text-color;
+    background-color: $bg-active;
+    border-left-color: $blue-400;
+    color: $ui-white;
+    font-weight: 600;
+
+    > svg {
+      color: $blue-300;
+    }
  }
 }
+
+.label {
+  flex: 1;
+  min-width: 0;
+  @include ellipsis-text;
+}
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';

-import { isKeyEnter } from '../../../utils/keyEvent';
+import { isKeyEnter, isKeySpace } from '../../../utils/keyEvent';
 import { cx } from '../../../utils/styleUtils';

 import style from './NavigationMenuItem.module.scss';
@@ -11,6 +11,7 @@ interface NavigationMenuItemProps {
  onClick: () => void;
 }

+/** A row in the navigation menu, and the single place which decides how a row reacts to input */
 export default function NavigationMenuItem({
  active,
  className,
@@ -24,7 +25,9 @@ export default function NavigationMenuItem({
      role='button'
      onClick={onClick}
      onKeyDown={(event) => {
-        if (isKeyEnter(event)) {
+        if (isKeyEnter(event) || isKeySpace(event)) {
+          event.preventDefault();
+          event.stopPropagation();
          onClick();
        }
      }}
@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+
+import Switch from '../../switch/Switch';
+
+import style from './NavigationMenuItem.module.scss';
+
+interface NavigationMenuToggleProps {
+  checked: boolean;
+  icon: ReactNode;
+  label: string;
+  onToggle: () => void;
+}
+
+/** A menu row which reflects, and toggles, an on/off state */
+export default function NavigationMenuToggle({ checked, icon, label, onToggle }: NavigationMenuToggleProps) {
+  return (
+    <label className={style.link}>
+      {icon}
+      <span className={style.label}>{label}</span>
+      <Switch checked={checked} onCheckedChange={onToggle} />
+    </label>
+  );
+}
@@ -1,22 +1,52 @@
+.footer {
+  flex: 0 0 auto;
+  padding: 0.75rem 0;
+  border-top: 1px solid $white-10;
+}
+
 .header {
-  font-size: calc(1rem - 2px);
-  margin-left: 1rem;
+  padding: 0 1.25rem 0.25rem;
  color: $gray-700;
 }

 .interfaces {
-  padding: 0.5rem 0.5rem;
+  padding: 0.25rem 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.25rem;
+}
+
+.interface {
+  min-width: 0;
+  max-width: 100%;
+
+  > div {
+    max-width: 100%;
+
+    > button:first-child {
+      min-width: 0;
+      max-width: calc(100% - 1.5rem);
+      justify-content: flex-start;
+      padding-inline: 0.5rem;
+    }
+  }
 }

 .interfaceCopy {
  display: flex;
  align-items: center;
+  min-width: 0;
+  width: 100%;
+}
+
+.address {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

 .goIcon {
+  flex: 0 0 auto;
  @include rotate-fourty-five;
  margin-left: 0.25rem;
  margin-bottom: 0.25rem;
@@ -3,6 +3,8 @@ import { IoArrowUp } from 'react-icons/io5';
 import useInfo from '../../../hooks-query/useInfo';
 import { linkToOtherHost, openLink } from '../../../utils/linkUtils';
 import CopyTag from '../../copy-tag/CopyTag';
+import Eyebrow from '../../eyebrow/Eyebrow';
+import { getExternalInterfaces } from './otherAddresses.utils';

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

@@ -12,32 +14,33 @@ interface OtherAddressesProps {

 export default function OtherAddresses({ currentLocation }: OtherAddressesProps) {
  const { data } = useInfo();
+  const externalInterfaces = getExternalInterfaces(data.networkInterfaces);

-  // there is no point showing this if we only have one interface
-  if (data.networkInterfaces.length < 2) {
+  if (externalInterfaces.length === 0) {
    return null;
  }

  return (
-    <>
-      <div className={style.header}>Accessible on external networks</div>
+    <div className={style.footer}>
+      <div className={style.header}>
+        <Eyebrow>Also available at</Eyebrow>
+      </div>
      <div className={style.interfaces}>
-        {data?.networkInterfaces?.map((nif) => {
-          if (nif.name === 'localhost') {
-            return null;
-          }
-
+        {externalInterfaces.map((nif) => {
          const address = linkToOtherHost(nif.address, currentLocation);

          return (
-            <CopyTag key={nif.name} copyValue={address} onClick={() => openLink(address)} size='small'>
-              <span className={style.interfaceCopy}>
-                {nif.address} <IoArrowUp className={style.goIcon} />
-              </span>
-            </CopyTag>
+            <div key={nif.name} className={style.interface}>
+              <CopyTag copyValue={address} onClick={() => openLink(address)} size='small'>
+                <span className={style.interfaceCopy}>
+                  <span className={style.address}>{nif.address}</span>
+                  <IoArrowUp className={style.goIcon} />
+                </span>
+              </CopyTag>
+            </div>
          );
        })}
      </div>
-    </>
+    </div>
  );
 }
@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest';
+
+import { getExternalInterfaces } from '../otherAddresses.utils';
+
+describe('getExternalInterfaces', () => {
+  test('returns no alternatives when localhost is the only interface', () => {
+    expect(getExternalInterfaces([{ name: 'localhost', address: '127.0.0.1' }])).toEqual([]);
+  });
+
+  test('does not treat an interface name as deployment information', () => {
+    expect(
+      getExternalInterfaces([
+        { name: 'localhost', address: '127.0.0.1' },
+        { name: 'cloud', address: '192.168.1.42' },
+      ]),
+    ).toEqual([{ name: 'cloud', address: '192.168.1.42' }]);
+  });
+
+  test('returns non-local interfaces when local and external interfaces are available', () => {
+    expect(
+      getExternalInterfaces([
+        { name: 'localhost', address: '127.0.0.1' },
+        { name: 'Wi-Fi', address: '192.168.1.42' },
+        { name: 'Ethernet', address: '10.0.0.42' },
+      ]),
+    ).toEqual([
+      { name: 'Wi-Fi', address: '192.168.1.42' },
+      { name: 'Ethernet', address: '10.0.0.42' },
+    ]);
+  });
+});
@@ -0,0 +1,6 @@
+import { type NetworkInterface } from 'ontime-types';
+
+/** Returns network addresses other than the localhost address injected by the info endpoint. */
+export function getExternalInterfaces(interfaces: NetworkInterface[]) {
+  return interfaces.filter((networkInterface) => networkInterface.name !== 'localhost');
+}
@@ -2,6 +2,12 @@
  display: flex;
  align-items: center;
  gap: 0.5rem;
+
+  > span {
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    text-transform: uppercase;
+  }
 }

 // attempt to match with ontimeTextInputs
@@ -1,37 +1,77 @@
-.inline {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
+.multiOptionList {
+  overflow-y: auto;
+  max-height: 12rem;
+  background: $gray-1200;
+  border: 1px solid $gray-1100;
+  border-radius: $component-border-radius-md;
 }

-// styles from subtle button
 .toggleSelect {
+  box-sizing: border-box;
  display: flex;
  align-items: center;
-  gap: 0.25rem;
-  padding-inline: 0.5rem;
-  height: 2.5rem;
-  background: $gray-1050;
-  color: $ui-white;
+  gap: 0.75rem;
+  min-height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border: 0;
+  color: $gray-300;
  line-height: 1em;
-  border-radius: $component-border-radius-md;
+  cursor: pointer;
+  transition:
+    background-color $transition-time-action,
+    border-color $transition-time-action,
+    color $transition-time-action;

-  &:hover:not(:disabled):not(:active) {
+  &:hover {
    background: $gray-1000;
-    color: $blue-500;
+    color: $ui-white;
  }

-  &:active:not(:disabled) {
+  &:active {
    background: $gray-1100;
-    border-color: $gray-1250;
+  }
+
+  &:focus-within {
+    outline: 2px solid $blue-500;
+    outline-offset: -2px;
+  }
+
+  &.selected {
+    background: $bg-active;
+    box-shadow: inset 3px 0 $blue-400;
+    color: $ui-white;
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $white-7;
+  }
+
+  > [role='checkbox'] {
+    flex: 0 0 auto;
+    width: 1.125rem;
+    height: 1.125rem;
+    border: 1px solid $gray-400;
+
+    &[data-unchecked] {
+      background: $gray-1100;
+    }
+
+    &[data-checked] {
+      border-color: $blue-400;
+    }
+
+    &:focus-visible {
+      outline: 0;
+    }
  }

  &::after {
    content: '';
-    margin-left: 0.25rem;
-    width: 0.75em;
-    height: 0.75em;
+    flex: 0 0 auto;
+    margin-left: auto;
+    width: 0.625rem;
+    height: 0.625rem;
    background: var(--user-bg, $gray-900);
    border-radius: 50%;
  }
@@ -2,6 +2,7 @@ import { ComponentProps, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router';

 import { isStringBoolean } from '../../../views/common/viewUtils';
+import { cx } from '../../utils/styleUtils';
 import Checkbox from '../checkbox/Checkbox';
 import Input from '../input/input/Input';
 import Select, { SelectOption } from '../select/Select';
@@ -107,18 +108,20 @@ function MultiOption({ paramField, options }: EditFormMultiOptionProps) {
  return (
    <>
      <input name={id} hidden readOnly value={paramState.join(',')} />
-      <div className={style.inline}>
+      <div className={style.multiOptionList}>
        {values.map((option) => {
+          const selected = paramState.includes(option.value);
+
          return (
            <label
              key={option.value}
-              className={style.toggleSelect}
+              className={cx([style.toggleSelect, selected && style.selected])}
              style={{
                '--user-bg': option.colour,
              }}
            >
              <Checkbox
-                checked={paramState.includes(option.value)}
+                checked={selected}
                onCheckedChange={(checked) => toggleValue(option.value, checked as boolean)}
              />
              {option.label}
@@ -1,13 +1,3 @@
-.drawerFooter {
-  display: flex;
-  justify-content: end;
-  gap: $section-spacing;
-
-  button {
-    padding: 0 2em;
-  }
-}
-
 .backdrop {
  position: fixed;
  inset: 0;
@@ -34,11 +24,11 @@

  display: flex;
  flex-direction: column;
-  padding-block: 1rem 1.5rem;

-  background-color: $gray-1250;
+  background-color: $ui-black;
  color: $ui-white;
  border-left: 1px solid $gray-1100;
+  box-shadow: $box-shadow-l1;

  &[data-open] {
    transform: translateX(0%);
@@ -58,36 +48,54 @@
 }

 .header {
-  padding-inline: 1rem;
+  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
-  height: 3.5rem;
+  gap: 1rem;
+  min-height: 4rem;
+  padding: 0.75rem 1rem;
+}

+.headerText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.title {
  font-weight: 600;
  font-size: 1.25rem;
+  line-height: 1.2;
+}
+
+.target {
+  font-size: $aux-text-size;
+  color: $gray-600;
 }

 .body {
  flex: 1;
-  padding-inline: 1rem;
-  padding-bottom: 10vh;
+  padding: 1rem;
  overflow-y: auto;
 }

 .footer {
+  flex: 0 0 auto;
  display: flex;
-  padding-inline: 1rem;
+  padding: 0.75rem 1rem;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
+
+  background-color: $ui-black;
+  border-top: 1px solid $white-10;
 }

 .sectionList {
  display: flex;
  flex-direction: column;
-  gap: 2rem;
-  padding-right: 0.5rem;
+  gap: 0.75rem;
 }

 .info {
@@ -4,6 +4,7 @@ import { FormEvent, memo } from 'react';
 import { IoClose } from 'react-icons/io5';
 import { useSearchParams } from 'react-router';

+import { viewLabels } from '../../../viewerConfig';
 import useViewSettings from '../../hooks-query/useViewSettings';
 import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
 import { useSavedViewParams } from '../../stores/savedViewParams';
@@ -71,8 +72,17 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
        <Dialog.Backdrop className={style.backdrop} />
        <Dialog.Popup className={style.drawer}>
          <div className={style.header}>
-            <Dialog.Title>Customise</Dialog.Title>
-            <IconButton variant='subtle-white' size='large' data-testid='close-view-params' onClick={handleClose}>
+            <div className={style.headerText}>
+              <Dialog.Title className={style.title}>Customise</Dialog.Title>
+              <span className={style.target}>{viewLabels[target]}</span>
+            </div>
+            <IconButton
+              variant='subtle-white'
+              size='large'
+              aria-label='Close'
+              data-testid='close-view-params'
+              onClick={handleClose}
+            >
              <IoClose />
            </IconButton>
          </div>
@@ -1,10 +1,21 @@
 .presetSection {
  background-color: $gray-1350;
+  border: 1px solid $white-10;
+  border-radius: $component-border-radius-md;
+  margin-bottom: 0.75rem;
+}
+
+.header {
+  padding: 0.5rem 1rem;
+  min-height: 2.25rem;
  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 1rem 0.5rem;
-  margin-bottom: 1rem;
+  align-items: center;
+
+  color: $gray-300;
+}
+
+.presetList {
+  border-top: 1px solid $white-7;
  max-height: 10rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
@@ -14,12 +25,39 @@
  display: flex;
  align-items: center;
  gap: 0.5rem;
+  min-height: 2.5rem;
+  padding: 0.375rem 1rem;
+  font-size: $inner-section-text-size;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $white-7;
+  }

  &.active {
-    color: $blue-500;
+    background-color: $bg-active;
+    box-shadow: inset 3px 0 $blue-400;
+    color: $ui-white;
+    font-weight: 600;
  }
 }

+.presetName {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .presetActions {
  margin-left: auto;
 }
+
+.current {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-left: auto;
+  color: $blue-400;
+  font-size: $aux-text-size;
+  font-weight: 600;
+}
@@ -4,6 +4,7 @@ import { useSearchParams } from 'react-router';
 import { useViewUrlPresets } from '../../hooks-query/useUrlPresets';
 import { cx } from '../../utils/styleUtils';
 import Button from '../buttons/Button';
+import Eyebrow from '../eyebrow/Eyebrow';

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

@@ -26,22 +27,31 @@ export function ViewParamsPresets({ target }: { target: OntimeView }) {

  return (
    <div className={style.presetSection}>
-      {viewPresets.map((preset) => {
-        const active = searchParams.get('alias') === preset.alias;
-        return (
-          <div key={preset.alias} className={cx([style.preset, active && style.active])}>
-            <div>{preset.alias}</div>
-            <Button
-              variant={active ? 'ghosted' : 'subtle-white'}
-              onClick={() => handleRecall(preset)}
-              disabled={active}
-              className={style.presetActions}
-            >
-              {active ? 'Applied' : 'Apply'}
-            </Button>
-          </div>
-        );
-      })}
+      <div className={style.header}>
+        <Eyebrow>Saved presets</Eyebrow>
+      </div>
+      <div className={style.presetList}>
+        {viewPresets.map((preset) => {
+          const active = searchParams.get('alias') === preset.alias;
+          return (
+            <div key={preset.alias} className={cx([style.preset, active && style.active])}>
+              <span className={style.presetName}>{preset.alias}</span>
+              {active ? (
+                <span className={style.current}>Current</span>
+              ) : (
+                <Button
+                  variant='ghosted'
+                  size='small'
+                  onClick={() => handleRecall(preset)}
+                  className={style.presetActions}
+                >
+                  Apply
+                </Button>
+              )}
+            </div>
+          );
+        })}
+      </div>
    </div>
  );
 }
@@ -1,48 +1,118 @@
 .section {
+  overflow: hidden;
+
  color: $ui-white;
  font-size: 1rem;
+  background-color: $white-3;
+  border: 1px solid $gray-1100;
+  border-radius: $component-border-radius-md;
 }

 .sectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  height: 2rem;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.5rem 1rem;
+
+  background: transparent;
+  border: 0;
+  font: inherit;
+  text-align: left;
+
+  color: $gray-300;

  &.collapsible {
    cursor: pointer;
+    transition-property: color, background-color;
+    transition-duration: $transition-time-action;
+
+    &:hover {
+      background-color: $white-3;
+      color: $ui-white;
+    }
+
+    &:focus-visible {
+      outline: 2px solid $blue-500;
+      outline-offset: -2px;
+    }
  }
 }

+.sectionTitle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/** marks a section which holds values coming from the URL */
+.customised {
+  width: 0.4rem;
+  height: 0.4rem;
+  border-radius: 50%;
+  background-color: $active-indicator;
+  flex-shrink: 0;
+}
+
+.chevron {
+  flex-shrink: 0;
+  rotate: 180deg;
+  transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+
+  &.closed {
+    rotate: 0deg;
+  }
+}
+
+.options {
+  padding-inline: 1rem;
+  border-top: 1px solid $white-7;
+}
+
 .label {
-  margin-top: $section-spacing;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  row-gap: 0.25rem;
+  padding: 0.75rem 0;
  font-size: $inner-section-text-size;
-  color: $label-gray;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $white-7;
+  }
+}
+
+/**
+ * Compact controls sit beside their label instead of below it.
+ * Placement is done with grid areas so that the markup stays flat.
+ */
+.inline {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: 1rem;
+
+  > .title {
+    grid-area: 1 / 1;
+  }
+
+  > .description {
+    grid-area: 2 / 1;
+  }
+
+  > *:last-child {
+    grid-area: 1 / 2 / span 2;
+  }
 }

 .title {
-  font-size: $inner-section-text-size;
-  display: block;
-  width: 100%;
+  color: $ui-white;
 }

 .description {
-  font-size: $inner-section-text-size;
-  display: block;
-  color: $modal-note-color;
-}
-
-.closed {
-  transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
-  rotate: 0deg;
-}
-
-.open {
-  transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
-  rotate: 180deg;
+  color: $gray-400;
+  font-size: $aux-text-size;
+  line-height: 1.4;
 }

 .hidden {
@@ -1,7 +1,9 @@
 import { useLocalStorage } from '@mantine/hooks';
 import { IoChevronDown } from 'react-icons/io5';
+import { useSearchParams } from 'react-router';

 import { cx } from '../../utils/styleUtils';
+import Eyebrow from '../eyebrow/Eyebrow';
 import { OptionTitle } from './constants';
 import ParamInput from './ParamInput';
 import { type ParamField } from './viewParams.types';
@@ -14,50 +16,74 @@ interface ViewParamsSectionProps {
  options: ParamField[];
 }

+/** Fields which are compact enough to share a row with their label */
+function isInlineField(option: ParamField): boolean {
+  return option.type === 'boolean' || option.type === 'colour';
+}
+
 export default function ViewParamsSection({ title, collapsible, options }: ViewParamsSectionProps) {
  const [collapsed, setCollapsed] = useLocalStorage({ key: `params-${title}`, defaultValue: false });
+  const [searchParams] = useSearchParams();

-  const handleCollapse = () => {
-    if (collapsible) {
-      setCollapsed((prev) => !prev);
-    }
-  };
+  // hidden options are inputs without a UI, there is nothing to frame them with
+  if (title === OptionTitle.Hidden) {
+    return <HiddenContents options={options} />;
+  }
+
+  const isCollapsed = Boolean(collapsible && collapsed);

  return (
    <section className={style.section}>
-      {title === OptionTitle.Hidden ? (
-        <HiddenContents options={options} />
-      ) : (
-        <>
-          <div className={cx([style.sectionHeader, collapsible && style.collapsible])} onClick={handleCollapse}>
-            {title}
-            {collapsible && <IoChevronDown className={cx([collapsed ? style.closed : style.open])} />}
-          </div>
-          <SectionContents options={options} collapsed={collapsed} />
-        </>
-      )}
-    </section>
-  );
-}
-
-interface SectionContentsProps {
-  options: ParamField[];
-  collapsed: boolean;
-}
-
-function SectionContents({ options, collapsed }: SectionContentsProps) {
-  return (
-    <>
-      {options.map((option) => {
-        return (
-          <label key={option.title} className={cx([style.label, collapsed && style.hidden])}>
+      <SectionHeader
+        title={title}
+        isCustomised={options.some((option) => searchParams.has(option.id))}
+        collapsed={isCollapsed}
+        onToggle={collapsible ? () => setCollapsed((prev) => !prev) : undefined}
+      />
+      {/* collapsed options stay mounted: the form reads its values from the DOM */}
+      <div className={cx([style.options, isCollapsed && style.hidden])}>
+        {options.map((option) => (
+          <label key={option.title} className={cx([style.label, isInlineField(option) && style.inline])}>
            <span className={style.title}>{option.title}</span>
            <span className={style.description}>{option.description}</span>
            <ParamInput paramField={option} />
          </label>
-        );
-      })}
-    </>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+interface SectionHeaderProps {
+  title: string;
+  isCustomised: boolean;
+  collapsed: boolean;
+  /** a header without a toggle belongs to a section which cannot collapse */
+  onToggle?: () => void;
+}
+
+function SectionHeader({ title, isCustomised, collapsed, onToggle }: SectionHeaderProps) {
+  const label = (
+    <Eyebrow className={style.sectionTitle}>
+      {title}
+      {isCustomised && <span className={style.customised} title='Contains custom values' />}
+    </Eyebrow>
+  );
+
+  if (!onToggle) {
+    return <div className={style.sectionHeader}>{label}</div>;
+  }
+
+  return (
+    <button
+      type='button'
+      className={cx([style.sectionHeader, style.collapsible])}
+      aria-expanded={!collapsed}
+      onClick={onToggle}
+    >
+      {label}
+      <IoChevronDown className={cx([style.chevron, collapsed && style.closed])} />
+    </button>
  );
 }

@@ -4,6 +4,10 @@ export function isKeyEnter<T>(event: KeyboardEvent<T>): boolean {
  return event.key === 'Enter';
 }

+export function isKeySpace<T>(event: KeyboardEvent<T>): boolean {
+  return event.key === ' ' || event.code === 'Space';
+}
+
 export function isKeyEscape<T>(event: KeyboardEvent<T>): boolean {
  return event.key === 'Escape';
 }
@@ -1,5 +1,3 @@
-import { AppMode } from '../ontimeConfig';
-
 declare module '*.scss' {
  const content: Record<string, string>;
  export default content;
@@ -32,39 +30,6 @@ declare global {
  }
 }

-/**
- * Declare custom data we pass to the table
- * - `handleUpdate` callback to update the entry when the user edits a cell
- * - `handleUpdateTimer` callback to update the timer for a specific event
- * - `options-showDelayedTimes` whether to show or hide delayed times
- * - `options-hideTableSeconds` whether to hide seconds in the table
- * - `options-hideIndexColumn` whether to hide the index column
- * - `options-cuesheetMode` run or edit mode
- *
- * And metadata specific for each column
- * - `canWrite` whether the user can write to this column
- * - `colour` background colour associated with a custom field
- */
-declare module '@tanstack/react-table' {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface TableMeta<TData extends RowData> {
-    handleUpdate: (rowIndex: number, accessor: string, payload: string, isCustom: boolean) => void;
-    handleUpdateTimer: (eventId: string, field: TimeField, payload: string) => void;
-    options: {
-      showDelayedTimes: boolean;
-      hideTableSeconds: boolean;
-      hideIndexColumn: boolean;
-      cuesheetMode: AppMode;
-    };
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface ColumnMeta<TData extends RowData, TValue> {
-    canWrite: boolean;
-    colour?: string;
-  }
-}
-
 /**
 * Allow passing CSS Properties
 */
@@ -53,7 +53,7 @@ ul {
  &.active {
    color: $ui-white;
    border-left-color: $blue-400;
-    background-color: rgba($blue-500, 0.16);
+    background-color: $bg-active;
    font-weight: 600;
  }

@@ -79,7 +79,7 @@ ul {
  &.active {
    color: $ui-white;
    border-left-color: $blue-400;
-    background-color: rgba($blue-500, 0.16);
+    background-color: $bg-active;
    font-weight: 600;
  }
 }
@@ -124,7 +124,7 @@ $card-padding: 2rem;
  // active rows use a panel-local class today; keep the treatment here so all
  // settings tables share the same state without each panel owning its colours
  tr[class*='current'] {
-    background-color: rgba($blue-500, 0.16);
+    background-color: $bg-active;

    > td:first-child {
      box-shadow: inset 3px 0 $blue-400;
@@ -12,20 +12,21 @@ import { useUpdateUrlPreset } from '../../../../../common/hooks-query/useUrlPres
 import { isUrlSafe } from '../../../../../common/utils/regex';
 import { enDash } from '../../../../../common/utils/styleUtils';
 import { generateUrlPresetOptions } from '../../../../../common/utils/urlPresets';
+import { viewLabels } from '../../../../../viewerConfig';
 import CuesheetLinkOptions, { CuesheetPermissionValues } from '../../../../sharing/composite/CuesheetLinkOptions';
 import * as Panel from '../../../panel-utils/PanelUtils';

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

 const targetOptions: SelectOption<OntimeViewPresettable>[] = [
-  { value: OntimeView.Cuesheet, label: 'Cuesheet' },
-  { value: OntimeView.Operator, label: 'Operator' },
-  { value: OntimeView.Timer, label: 'Timer' },
-  { value: OntimeView.Backstage, label: 'Backstage' },
-  { value: OntimeView.Timeline, label: 'Timeline' },
-  { value: OntimeView.StudioClock, label: 'Studio Clock' },
-  { value: OntimeView.Countdown, label: 'Countdown' },
-  { value: OntimeView.ProjectInfo, label: 'Project Info' },
+  { value: OntimeView.Cuesheet, label: viewLabels[OntimeView.Cuesheet] },
+  { value: OntimeView.Operator, label: viewLabels[OntimeView.Operator] },
+  { value: OntimeView.Timer, label: viewLabels[OntimeView.Timer] },
+  { value: OntimeView.Backstage, label: viewLabels[OntimeView.Backstage] },
+  { value: OntimeView.Timeline, label: viewLabels[OntimeView.Timeline] },
+  { value: OntimeView.StudioClock, label: viewLabels[OntimeView.StudioClock] },
+  { value: OntimeView.Countdown, label: viewLabels[OntimeView.Countdown] },
+  { value: OntimeView.ProjectInfo, label: viewLabels[OntimeView.ProjectInfo] },
 ];

 const formId = 'url-preset-form';
@@ -1,15 +1,14 @@
-import type { ColumnDef } from '@tanstack/react-table';
 import type { CustomFields } from 'ontime-types';

-import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { AppMode } from '../../../ontimeConfig';
 import { makeCuesheetColumns } from '../../../views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory';
+import type { CuesheetColumnDef } from '../../../views/cuesheet/cuesheet-table/cuesheetTable.features';

 /**
 * Creates column definitions for the rundown table
 * Reuses cuesheetColsFactory with preset=undefined for full access
 */
-export function makeRundownColumns(customFields: CustomFields): ColumnDef<ExtendedEntry>[] {
+export function makeRundownColumns(customFields: CustomFields): CuesheetColumnDef[] {
  // When preset=undefined, factory defaults to fullRead=true, fullWrite=true
  // canWrite is determined by editorMode (AppMode.Edit vs AppMode.Run)
  return makeCuesheetColumns(customFields, AppMode.Edit, undefined);
@@ -48,6 +48,7 @@ $playback-under: $green-500;
 // interface panels
 $bg-container-l1: $gray-1350;
 $bg-container-l2: $gray-1300;
+$bg-active: rgba($action-blue, 0.16);

 $backdrop-color: rgba(0, 0, 0, 0.7);
 $box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
@@ -1,12 +1,30 @@
-export const navigatorConstants = [
-  { url: 'timer', label: 'Timer' },
-  { url: 'backstage', label: 'Backstage' },
-  { url: 'timeline', label: 'Timeline' },
-  { url: 'studio', label: 'Studio Clock' },
-  { url: 'countdown', label: 'Countdown' },
-  { url: 'info', label: 'Project Info' },
+import { OntimeView } from 'ontime-types';
+
+/** User facing name of each view, the single source for view naming in the UI */
+export const viewLabels: Record<OntimeView, string> = {
+  [OntimeView.Editor]: 'Editor',
+  [OntimeView.Cuesheet]: 'Cuesheet',
+  [OntimeView.Operator]: 'Operator',
+  [OntimeView.Timer]: 'Timer',
+  [OntimeView.Backstage]: 'Backstage',
+  [OntimeView.Timeline]: 'Timeline',
+  [OntimeView.StudioClock]: 'Studio Clock',
+  [OntimeView.Countdown]: 'Countdown',
+  [OntimeView.ProjectInfo]: 'Project Info',
+};
+
+/** Views offered in the navigation menu, in the order they are shown. Their value is also their route */
+const navigatorViews = [
+  OntimeView.Timer,
+  OntimeView.Backstage,
+  OntimeView.Timeline,
+  OntimeView.StudioClock,
+  OntimeView.Countdown,
+  OntimeView.ProjectInfo,
 ];

+export const navigatorConstants = navigatorViews.map((view) => ({ url: view, label: viewLabels[view] }));
+
 // default time format to use for users in 12 hour clocks
 export const FORMAT_12 = 'h:mm:ss a';
 // default time format to use for users in 24 hour clocks
@@ -7,14 +7,13 @@ import {
  useSensor,
  useSensors,
 } from '@dnd-kit/core';
-import { ColumnDef } from '@tanstack/react-table';
 import { PropsWithChildren } from 'react';

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

 interface CuesheetDndProps {
-  columns: ColumnDef<ExtendedEntry>[];
+  columns: CuesheetColumnDef[];
  tableRoot?: 'editor' | 'cuesheet';
 }

@@ -1,5 +1,5 @@
 import { useTableNav } from '@table-nav/react';
-import { ColumnDef, Table, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { useTable } from '@tanstack/react-table';
 import { OntimeEntry, SupportedEntry, TimeField, isOntimeDelay, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { ComponentProps, ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
@@ -29,12 +29,17 @@ import GroupRow from './cuesheet-table-elements/GroupRow';
 import MilestoneRow from './cuesheet-table-elements/MilestoneRow';
 import TableMenu from './cuesheet-table-menu/TableMenu';
 import CuesheetTableHeaderToolbar from './cuesheet-table-settings/CuesheetTableHeaderToolbar';
+import {
+  CuesheetColumnDef,
+  CuesheetTable as CuesheetTableInstance,
+  cuesheetTableFeatures,
+} from './cuesheetTable.features';
 import { useColumnOrder, useColumnSizes, useColumnVisibility } from './useColumnManager';

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

 type CuesheetTableBaseProps = {
-  columns: ColumnDef<ExtendedEntry>[];
+  columns: CuesheetColumnDef[];
  cuesheetMode: AppMode;
  source: RundownSource;
  insertElement?: ReactNode;
@@ -120,7 +125,8 @@ export default function CuesheetTable({
  const { columnSizing, setColumnSizing } = useColumnSizes(tableRoot);
  const { columnVisibility, setColumnVisibility } = useColumnVisibility(tableRoot);

-  const table = useReactTable({
+  const table = useTable({
+    features: cuesheetTableFeatures,
    data: flatRundown,
    columns,
    columnResizeMode: 'onChange',
@@ -131,7 +137,6 @@ export default function CuesheetTable({
    },
    onColumnVisibilityChange: setColumnVisibility,
    onColumnSizingChange: setColumnSizing,
-    getCoreRowModel: getCoreRowModel(),
    meta,
  });

@@ -195,7 +200,7 @@ export default function CuesheetTable({
    return colSizes;
    // eslint-disable-next-line react-compiler/react-compiler -- unfortunately this is what we need
    // eslint-disable-next-line react-hooks/exhaustive-deps -- this works well and follows documentation
-  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
+  }, [columns, table.state.columnResizing, table.state.columnSizing]);

  const allLeafColumns = table.getAllLeafColumns();
  const { rows } = table.getRowModel();
@@ -214,9 +219,7 @@ export default function CuesheetTable({
  const computeItemKey = useCallback((_: number, item: ExtendedEntry) => item.id, []);
  const fixedHeaderContent = useCallback(() => {
    return table.getHeaderGroups().map((headerGroup) => {
-      const HeaderComponent = table.getState().columnSizingInfo.isResizingColumn
-        ? CuesheetHeader
-        : SortableCuesheetHeader;
+      const HeaderComponent = table.state.columnResizing.isResizingColumn ? CuesheetHeader : SortableCuesheetHeader;

      // if the table is being resized, we render non-sortable headers to avoid performance issues
      return (
@@ -279,8 +282,8 @@ interface CuesheetVirtuosoContext {
  columnSizeVars: { [key: string]: number };
  cursor: string | null;
  listeners: ReturnType<typeof useTableNav>['listeners'];
-  rows: ReturnType<Table<ExtendedEntry>['getRowModel']>['rows'];
-  table: Table<ExtendedEntry>;
+  rows: ReturnType<CuesheetTableInstance['getRowModel']>['rows'];
+  table: CuesheetTableInstance;
  handleAddNew?: (type: SupportedEntry) => void;
 }

@@ -1,16 +1,16 @@
 import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { HeaderGroup, flexRender } from '@tanstack/react-table';
+import { FlexRender } from '@tanstack/react-table';
 import { CSSProperties } from 'react';

-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
+import type { CuesheetHeaderGroup } from '../cuesheetTable.features';
 import { Draggable, SortableCell, TableCell } from './SortableCell';

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

 interface CuesheetHeaderProps {
-  headerGroup: HeaderGroup<ExtendedEntry>;
+  headerGroup: CuesheetHeaderGroup;
  cuesheetMode: AppMode;
  hideIndexColumn: boolean;
 }
@@ -46,7 +46,7 @@ export function SortableCuesheetHeader({ headerGroup, cuesheetMode, hideIndexCol
              injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
              draggable={<Draggable header={header} />}
            >
-              {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+              {header.isPlaceholder ? null : <FlexRender header={header} />}
            </SortableCell>
          );
        })}
@@ -85,7 +85,7 @@ export function CuesheetHeader({ headerGroup, cuesheetMode, hideIndexColumn }: C
            injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
            draggable={<Draggable header={header} />}
          >
-            {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+            {header.isPlaceholder ? null : <FlexRender header={header} />}
          </TableCell>
        );
      })}
@@ -1,14 +1,14 @@
-import { Table, flexRender } from '@tanstack/react-table';
-import { EntryId, OntimeEntry, RGBColour, SupportedEntry } from 'ontime-types';
+import { FlexRender } from '@tanstack/react-table';
+import { EntryId, RGBColour, SupportedEntry } from 'ontime-types';
 import { colourToHex, cssOrHexToColour } from 'ontime-utils';
 import { CSSProperties, memo, useMemo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';

 import IconButton from '../../../../common/components/buttons/IconButton';
-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
+import type { CuesheetTable } from '../cuesheetTable.features';

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

@@ -25,7 +25,7 @@ interface EventRowProps {
  skip: boolean;
  parent: EntryId | null;
  rowIndex: number;
-  table: Table<ExtendedEntry<OntimeEntry>>;
+  table: CuesheetTable;
  injectedStyles?: CSSProperties;
  hasCursor?: boolean;
 }
@@ -133,7 +133,7 @@ function EventRow({
              data-testid={`cuesheet-cell-${cell.column.id}`}
              data-column-id={cell.column.id}
            >
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <FlexRender cell={cell} />
            </td>
          );
        })}
@@ -1,12 +1,12 @@
-import { Table, flexRender } from '@tanstack/react-table';
+import { FlexRender } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
 import { CSSProperties, memo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';

 import IconButton from '../../../../common/components/buttons/IconButton';
-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
+import type { CuesheetTable } from '../cuesheetTable.features';

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

@@ -15,7 +15,7 @@ interface GroupRowProps {
  colour: string;
  rowId: string;
  rowIndex: number;
-  table: Table<ExtendedEntry>;
+  table: CuesheetTable;
  injectedStyles?: CSSProperties;
  hasCursor?: boolean;
 }
@@ -76,7 +76,7 @@ function GroupRow({
              }}
              role='cell'
            >
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <FlexRender cell={cell} />
            </td>
          );
        })}
@@ -1,14 +1,14 @@
-import { Table, flexRender } from '@tanstack/react-table';
+import { FlexRender } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
 import { colourToHex, cssOrHexToColour } from 'ontime-utils';
 import { CSSProperties, memo, useMemo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';

 import IconButton from '../../../../common/components/buttons/IconButton';
-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { cx, enDash, getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
+import type { CuesheetTable } from '../cuesheetTable.features';

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

@@ -20,7 +20,7 @@ interface MilestoneRowProps {
  colour: string;
  rowId: string;
  rowIndex: number;
-  table: Table<ExtendedEntry>;
+  table: CuesheetTable;
  injectedStyles?: CSSProperties;
  hasCursor?: boolean;
 }
@@ -102,7 +102,7 @@ function MilestoneRow({
              }}
              tabIndex={-1}
            >
-              {canRender && flexRender(cell.column.columnDef.cell, cell.getContext())}
+              {canRender && <FlexRender cell={cell} />}
            </td>
          );
        })}
@@ -1,9 +1,8 @@
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Header } from '@tanstack/react-table';
 import { CSSProperties, ReactNode } from 'react';

-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
+import type { CuesheetHeaderCell } from '../cuesheetTable.features';

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

@@ -48,7 +47,7 @@ export function TableCell({ colSpan, injectedStyles, children, draggable }: Sort
 }

 interface DraggableProps {
-  header: Header<ExtendedEntry, unknown>;
+  header: CuesheetHeaderCell;
 }

 export function Draggable({ header }: DraggableProps) {
@@ -1,4 +1,3 @@
-import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { CustomFields, TimeStrategy, URLPreset, isOntimeDelay, isOntimeEvent } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 import { useCallback } from 'react';
@@ -8,6 +7,7 @@ import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { formatDuration, formatTime } from '../../../../common/utils/time';
 import { AppMode } from '../../../../ontimeConfig';
 import { getCuesheetColumnAccessPolicy } from '../../cuesheet.policies';
+import type { CuesheetCellContext, CuesheetColumnDef } from '../cuesheetTable.features';
 import DurationInput from './DurationInput';
 import EditableImage from './EditableImage';
 import FlagCell from './FlagCell';
@@ -17,11 +17,11 @@ import MutedText from './MutedText';
 import SingleLineCell from './SingleLineCell';
 import TimeInput from './TimeInput';

-function getColumnLabel(column: CellContext<ExtendedEntry, unknown>['column']): string {
+function getColumnLabel(column: CuesheetCellContext['column']): string {
  return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
 }

-function MakeStart({ getValue, row, table, column }: CellContext<ExtendedEntry, unknown>) {
+function MakeStart({ getValue, row, table, column }: CuesheetCellContext) {
  if (!table.options.meta) {
    return null;
  }
@@ -60,7 +60,7 @@ function MakeStart({ getValue, row, table, column }: CellContext<ExtendedEntry,
  );
 }

-function MakeEnd({ getValue, row, table, column }: CellContext<ExtendedEntry, unknown>) {
+function MakeEnd({ getValue, row, table, column }: CuesheetCellContext) {
  if (!table.options.meta) {
    return null;
  }
@@ -100,7 +100,7 @@ function MakeEnd({ getValue, row, table, column }: CellContext<ExtendedEntry, un
  );
 }

-function MakeDuration({ getValue, row, table, column }: CellContext<ExtendedEntry, unknown>) {
+function MakeDuration({ getValue, row, table, column }: CuesheetCellContext) {
  if (!table.options.meta) {
    return null;
  }
@@ -131,7 +131,7 @@ function MakeDuration({ getValue, row, table, column }: CellContext<ExtendedEntr
  );
 }

-function MakeMultiLineField({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
+function MakeMultiLineField({ row, column, table }: CuesheetCellContext) {
  const update = useCallback(
    (newValue: string) => {
      table.options.meta?.handleUpdate(row.index, column.id, newValue, false);
@@ -160,7 +160,7 @@ function MakeMultiLineField({ row, column, table }: CellContext<ExtendedEntry, u
  );
 }

-function LazyImage({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
+function LazyImage({ row, column, table }: CuesheetCellContext) {
  const update = useCallback(
    (newValue: string) => {
      table.options.meta?.handleUpdate(row.index, column.id, newValue, true);
@@ -178,7 +178,7 @@ function LazyImage({ row, column, table }: CellContext<ExtendedEntry, unknown>)
  return <EditableImage initialValue={initialValue} updateValue={update} readOnly={!canWrite} />;
 }

-function MakeSingleLineField({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
+function MakeSingleLineField({ row, column, table }: CuesheetCellContext) {
  const update = useCallback(
    (newValue: string) => {
      table.options.meta?.handleUpdate(row.index, column.id, newValue, false);
@@ -207,7 +207,7 @@ function MakeSingleLineField({ row, column, table }: CellContext<ExtendedEntry,
  );
 }

-function MakeFlagField({ row }: CellContext<ExtendedEntry, unknown>) {
+function MakeFlagField({ row }: CuesheetCellContext) {
  const event = row.original;
  if (!isOntimeEvent(event) || !event.flag) {
    return null;
@@ -215,7 +215,7 @@ function MakeFlagField({ row }: CellContext<ExtendedEntry, unknown>) {
  return <FlagCell />;
 }

-function MakeCustomField({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
+function MakeCustomField({ row, column, table }: CuesheetCellContext) {
  const update = useCallback(
    (newValue: string) => {
      table.options.meta?.handleUpdate(row.index, column.id, newValue, true);
@@ -255,8 +255,8 @@ export function makeCuesheetColumns(
  customFields: CustomFields,
  cuesheetMode: AppMode,
  preset: URLPreset | undefined,
-): ColumnDef<ExtendedEntry>[] {
-  const columnsDef: ColumnDef<ExtendedEntry>[] = [];
+): CuesheetColumnDef[] {
+  const columnsDef: CuesheetColumnDef[] = [];
  const { canRead, canWrite } = getCuesheetColumnAccessPolicy(preset, cuesheetMode);

  if (canRead('flag')) {
@@ -2,7 +2,6 @@ import { Popover } from '@base-ui/react/popover';
 import { Toggle } from '@base-ui/react/toggle';
 import { ToggleGroup } from '@base-ui/react/toggle-group';
 import { Toolbar } from '@base-ui/react/toolbar';
-import type { Column } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 import { IoBookOutline, IoChevronDown, IoOptions } from 'react-icons/io5';

@@ -10,9 +9,9 @@ import Button from '../../../../common/components/buttons/Button';
 import Checkbox from '../../../../common/components/checkbox/Checkbox';
 import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
 import PopoverContents from '../../../../common/components/popover/Popover';
-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetPermissions } from '../../useTablePermissions';
+import type { CuesheetColumn } from '../cuesheetTable.features';
 import CuesheetShareModal from './CuesheetShareModal';

 import style from './CuesheetTableSettings.module.scss';
@@ -37,7 +36,7 @@ type TableModeControls = {
 };

 interface CuesheetTableHeaderToolbarProps {
-  columns: Column<ExtendedEntry, unknown>[];
+  columns: CuesheetColumn[];
  optionsStore: TableHeaderOptionsStore;
  handleResetResizing: () => void;
  handleResetReordering: () => void;
@@ -111,7 +110,7 @@ interface ViewSettingsProps {
 }

 interface ColumnSettingsProps {
-  columns: Column<ExtendedEntry, unknown>[];
+  columns: CuesheetColumn[];
  handleResetResizing: () => void;
  handleResetReordering: () => void;
  handleClearToggles: () => void;
@@ -203,7 +202,7 @@ function ColumnSettings({

            return (
              <Editor.Label key={`${column.id}-${visible}`} className={style.option}>
-                <Checkbox defaultChecked={visible} onCheckedChange={column.toggleVisibility} />
+                <Checkbox defaultChecked={visible} onCheckedChange={(checked) => column.toggleVisibility(checked)} />
                {columnHeader as ReactNode}
              </Editor.Label>
            );
@@ -12,7 +12,7 @@
  transition: background-color 0.2s ease-in-out;

  &[data-background-rundown='true'] {
-    background-color: rgba($ontime-color, 0.5);
+    background-color: $bg-active;

    .apart::before {
      content: 'BACKGROUND EDIT';
@@ -0,0 +1,74 @@
+import {
+  columnOrderingFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  metaHelper,
+  tableFeatures,
+} from '@tanstack/react-table';
+import type { CellContext, Column, ColumnDef, Header, HeaderGroup, Table } from '@tanstack/react-table';
+import type { TimeField } from 'ontime-types';
+
+import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
+import type { AppMode } from '../../../ontimeConfig';
+
+/**
+ * Custom data we pass to the table
+ * - `handleUpdate` callback to update the entry when the user edits a cell
+ * - `handleUpdateTimer` callback to update the timer for a specific event
+ * - `options-showDelayedTimes` whether to show or hide delayed times
+ * - `options-hideTableSeconds` whether to hide seconds in the table
+ * - `options-hideIndexColumn` whether to hide the index column
+ * - `options-cuesheetMode` run or edit mode
+ */
+export interface CuesheetTableMeta {
+  handleUpdate: (rowIndex: number, accessor: string, payload: string, isCustom: boolean) => void;
+  handleUpdateTimer: (eventId: string, field: TimeField, payload: string) => void;
+  options: {
+    showDelayedTimes: boolean;
+    hideTableSeconds: boolean;
+    hideIndexColumn: boolean;
+    cuesheetMode: AppMode;
+  };
+}
+
+/**
+ * Metadata specific for each column
+ * - `canWrite` whether the user can write to this column
+ * - `colour` background colour associated with a custom field
+ */
+export interface CuesheetColumnMeta {
+  canWrite: boolean;
+  colour?: string;
+}
+
+/**
+ * Features registered in the cuesheet and rundown tables.
+ * In v9 an API only exists once its feature is registered, so this list is the
+ * source of truth for what the table can do:
+ * - `columnOrderingFeature`: user reorders columns by dragging the headers
+ * - `columnVisibilityFeature`: user toggles columns in the table settings
+ * - `columnSizingFeature`: column widths, exposed to CSS as custom properties
+ * - `columnResizingFeature`: the drag handle in the header (requires sizing)
+ *
+ * The `tableMeta` / `columnMeta` slots replace the v8 global module augmentation:
+ * they scope our meta types to this table instead of every table in the app.
+ */
+export const cuesheetTableFeatures = tableFeatures({
+  columnOrderingFeature,
+  columnVisibilityFeature,
+  columnSizingFeature,
+  columnResizingFeature,
+  tableMeta: metaHelper<CuesheetTableMeta>(),
+  columnMeta: metaHelper<CuesheetColumnMeta>(),
+});
+
+export type CuesheetFeatures = typeof cuesheetTableFeatures;
+
+/** Convenience aliases so consumers do not need to repeat the feature generic */
+export type CuesheetColumnDef = ColumnDef<CuesheetFeatures, ExtendedEntry>;
+export type CuesheetTable = Table<CuesheetFeatures, ExtendedEntry>;
+export type CuesheetCellContext = CellContext<CuesheetFeatures, ExtendedEntry>;
+export type CuesheetHeaderGroup = HeaderGroup<CuesheetFeatures, ExtendedEntry>;
+export type CuesheetHeaderCell = Header<CuesheetFeatures, ExtendedEntry, unknown>;
+export type CuesheetColumn = Column<CuesheetFeatures, ExtendedEntry, unknown>;
@@ -1,10 +1,10 @@
 import { useLocalStorage } from '@mantine/hooks';
-import { ColumnDef, ColumnSizingState, Updater } from '@tanstack/react-table';
+import { ColumnSizingState, Updater } from '@tanstack/react-table';
 import { useCallback, useEffect, useMemo, useState } from 'react';

 import { debounce } from '../../../common/utils/debounce';
 import { makeStageKey } from '../../../common/utils/localStorage';
-import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
+import type { CuesheetColumnDef } from './cuesheetTable.features';

 type TableRoot = 'editor' | 'cuesheet';

@@ -38,7 +38,7 @@ export function useColumnSizes(tableRoot: TableRoot = 'cuesheet') {
  };
 }

-export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[], tableRoot: TableRoot = 'cuesheet') {
+export function useColumnOrder(columns: CuesheetColumnDef[], tableRoot: TableRoot = 'cuesheet') {
  const tableOrderKey = useMemo(() => makeStageKey(`${tableRoot}-table-order`), [tableRoot]);

  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
@@ -169,7 +169,7 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
        {
          id: 'timerColour',
          title: 'Timer Colour',
-          description: 'Timer colour. Default: #f6f6f6',
+          description: 'Timer colour. Default: #F6F6F6',
          type: 'colour',
          defaultValue: 'f6f6f6',
        },
@@ -14,8 +14,8 @@
  "main": "src/main.js",
  "devDependencies": {
    "electron": "38.2.1",
-    "electron-builder": "26.9.1",
-    "wait-on": "^7.2.0"
+    "electron-builder": "26.15.3",
+    "wait-on": "^9.0.0"
  },
  "scripts": {
    "dev:electron": "wait-on http://localhost:3000 && cross-env NODE_ENV=development electron .",
@@ -10,7 +10,7 @@
    "cookie": "1.0.2",
    "cookie-parser": "1.4.7",
    "cors": "2.8.6",
-    "dotenv": "^16.0.1",
+    "dotenv": "^17.0.0",
    "express": "5.2.1",
    "express-static-gzip": "3.0.1",
    "express-validator": "7.3.2",
@@ -31,11 +31,11 @@
    "@types/multer": "2.1.0",
    "@types/node": "catalog:",
    "@types/ws": "^8.5.10",
-    "esbuild": "^0.24.0",
+    "esbuild": "^0.28.0",
    "ontime-types": "workspace:*",
    "server-timing": "^3.3.3",
    "ts-essentials": "catalog:",
-    "tsx": "^4.19.2",
+    "tsx": "^4.23.12",
    "typescript": "catalog:",
    "vitest": "catalog:"
  },
@@ -1,5 +1,7 @@
+import { deepEqual } from 'fast-equals';
 import {
  EndAction,
+  OntimeEntry,
  OntimeEvent,
  OntimeGroup,
  OntimeMilestone,
@@ -8,13 +10,21 @@ import {
  TimerType,
  Trigger,
 } from 'ontime-types';
-import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, createEvent } from 'ontime-utils';
+import {
+  MILLIS_PER_HOUR,
+  MILLIS_PER_MINUTE,
+  createDelay,
+  createEvent,
+  createGroup,
+  createMilestone,
+} from 'ontime-utils';
 import { assertType } from 'vitest';

 import { makeOntimeEvent, makeOntimeGroup, makeOntimeMilestone, makeRundown } from '../__mocks__/rundown.mocks.js';
 import { parseRundown } from '../rundown.parser.js';
 import {
  calculateDayOffset,
+  cloneEntryData,
  deleteById,
  doesInvalidateMetadata,
  getIntegerAndFraction,
@@ -715,3 +725,68 @@ describe('eventDurationMatchGroupTarget()', () => {
    expect(result).toStrictEqual(null);
  });
 });
+
+describe('cloneEntryData()', () => {
+  const trigger: Trigger = {
+    id: 'trigger-1',
+    title: 'Go on air',
+    trigger: TimerLifeCycle.onStart,
+    automationId: 'automation-1',
+  };
+
+  // the real factories, so these are complete entries exactly as the rundown holds them
+  const entries: [string, OntimeEntry][] = [
+    ['event', createEvent({ custom: { sponsor: 'a value' }, triggers: [trigger] }, 'cue-1') as OntimeEvent],
+    ['group', createGroup({ id: 'group-1', entries: ['a', 'b'], custom: { sponsor: 'a value' } })],
+    ['milestone', createMilestone({ id: 'milestone-1', custom: { sponsor: 'a value' } })],
+    ['delay', createDelay({ id: 'delay-1', duration: 10 })],
+  ];
+
+  /**
+   * Fails if any nested object or array in the clone is the same reference as the source,
+   * so a field added later that needs a copy of its own is caught here without the clone
+   * having to enumerate fields.
+   */
+  function expectNoSharedReferences(clone: unknown, source: unknown, path: string) {
+    if (typeof source !== 'object' || source === null) return;
+    expect(clone, `${path} is shared with the source`).not.toBe(source);
+    const cloneRecord = clone as Record<string, unknown>;
+    const sourceRecord = source as Record<string, unknown>;
+    for (const key of Object.keys(sourceRecord)) {
+      expectNoSharedReferences(cloneRecord[key], sourceRecord[key], `${path}.${key}`);
+    }
+  }
+
+  /** the two halves of the structuredClone contract: same value, no shared references */
+  it.each(entries)('clones a %s to the same value structuredClone would produce', (_type, entry) => {
+    expect(cloneEntryData(entry)).toStrictEqual(structuredClone(entry));
+  });
+
+  it.each(entries)('shares no nested object or array with the source %s', (_type, entry) => {
+    expectNoSharedReferences(cloneEntryData(entry), entry, 'entry');
+  });
+
+  /**
+   * Regression: normalising an absent container to an empty one makes deepEqual report a
+   * change on every comparison, which would have the runtime re-broadcast and re-save the
+   * restore point on every tick. See PR #2178.
+   */
+  it.each([
+    ['event', makeOntimeEvent({ id: 'partial' })],
+    ['group', makeOntimeGroup({ id: 'partial', entries: undefined })],
+  ])('gives a partial %s exactly the keys structuredClone would, so it stays deep-equal', (_type, entry) => {
+    const clone = cloneEntryData(entry);
+    // asserting on keys, not values: `toBeUndefined()` cannot tell an absent key from an own
+    // key holding undefined, and it is key presence that decides the deepEqual below
+    expect(Object.keys(clone).sort()).toEqual(Object.keys(structuredClone(entry)).sort());
+    // this is the comparison runtime.service.ts uses to decide whether to re-broadcast an
+    // entry; if the clone gains a key, every tick looks like a change
+    expect(deepEqual(clone, entry)).toBe(true);
+  });
+
+  it('throws on an entry type it does not know how to clone', () => {
+    expect(() => cloneEntryData({ id: 'x', type: 'unknown' } as unknown as OntimeEvent)).toThrow(
+      'Unsupported entry type for cloning',
+    );
+  });
+});
@@ -27,6 +27,7 @@ import {
  isPlayableEvent,
 } from 'ontime-types';
 import { addToRundown, createGroup, customFieldLabelToKey, getInsertAfterId, insertAtIndex } from 'ontime-utils';
+import type { DeepReadonly } from 'ts-essentials';

 import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
 import { consoleError } from '../../utils/console.js';
@@ -34,6 +35,7 @@ import { ProcessedRundownMetadata, makeRundownMetadata } from './rundown.parser.
 import type { RundownMetadata } from './rundown.types.js';
 import {
  applyPatchToEntry,
+  cloneRundown,
  cloneSimpleRundownEntry,
  deleteById,
  doesInvalidateMetadata,
@@ -43,9 +45,14 @@ import {
 } from './rundown.utils.js';

 /**
- * The currently loaded rundown in cache
+ * The currently loaded rundown in cache.
+ *
+ * Reassigned - never mutated in place - when a different rundown is loaded: the persistence
+ * layer stores this object by reference, so repurposing it for another rundown would rewrite
+ * the previously loaded rundown's stored record. Mutating it in place while it represents the
+ * same rundown (ie. from commit) is intended, and is what keeps the stored record current.
 */
-const cachedRundown: Rundown = {
+let cachedRundown: Rundown = {
  id: '',
  title: '',
  order: [],
@@ -79,9 +86,16 @@ export const getRundownMetadata = (): Readonly<RundownMetadata> => rundownMetada
 export const getProjectCustomFields = (): Readonly<CustomFields> => projectCustomFields;
 export const getEntryWithId = (entryId: EntryId): OntimeEntry | undefined => cachedRundown.entries[entryId];

-type Transaction = {
+/**
+ * @param R the type callers see for `rundown` - a plain, mutable `Rundown` when the
+ * transaction was opened with `mutableRundown: true`, otherwise a `DeepReadonly<Rundown>`
+ * so that accidentally mutating an entry (or an order array) on a non-mutable transaction
+ * - which would silently corrupt the live cache without going through commit() - is a
+ * compile-time error instead of a runtime bug.
+ */
+type Transaction<R> = {
  customFields: CustomFields;
-  rundown: Rundown;
+  rundown: R;

  commit: (shouldProcess?: boolean) => Promise<{
    rundown: Readonly<Rundown>;
@@ -102,11 +116,17 @@ type TransactionOptions = {
  rundownId?: string;
 };

-export function createTransaction(options: TransactionOptions): Transaction {
+export function createTransaction(options: TransactionOptions & { mutableRundown: true }): Transaction<Rundown>;
+export function createTransaction(
+  options: TransactionOptions & { mutableRundown?: false },
+): Transaction<DeepReadonly<Rundown>>;
+export function createTransaction(
+  options: TransactionOptions,
+): Transaction<Rundown> | Transaction<DeepReadonly<Rundown>> {
  const targetId = options.rundownId ?? cachedRundown.id;
  const isLoaded = targetId === cachedRundown.id;
  const sourceRundown: Rundown = isLoaded ? cachedRundown : (getDataProvider().getRundown(targetId) as Rundown);
-  const rundown = options.mutableRundown ? structuredClone(sourceRundown) : sourceRundown;
+  const rundown = options.mutableRundown ? cloneRundown(sourceRundown) : sourceRundown;
  const customFields = options.mutableCustomFields ? structuredClone(projectCustomFields) : projectCustomFields;

  /**
@@ -707,21 +727,25 @@ export const customFieldMutation = {
 * Expose function to add an initial rundown to the system
 */
 export function init(initialRundown: Readonly<Rundown>, initialCustomFields: Readonly<CustomFields>) {
-  const rundown = structuredClone(initialRundown);
+  const rundown = cloneRundown(initialRundown);
  const customFields = structuredClone(initialCustomFields);
  const processedData = processRundown(rundown, customFields, { mutate: true });

-  // update the cache values
-  cachedRundown.id = rundown.id;
-  cachedRundown.title = rundown.title;
  projectCustomFields = customFields;

  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we are not interested in the iteration data
  const { previousEvent, latestEvent, previousEntry, entries, order, ...metadata } = processedData;
-  cachedRundown.entries = entries;
-  cachedRundown.order = order;
-  cachedRundown.flatOrder = metadata.flatEntryOrder;
-  cachedRundown.revision = rundown.revision;
+
+  // a fresh object, so that the record already stored for a previously loaded rundown keeps
+  // pointing at that rundown's data - see the note on cachedRundown
+  cachedRundown = {
+    id: rundown.id,
+    title: rundown.title,
+    entries,
+    order,
+    flatOrder: metadata.flatEntryOrder,
+    revision: rundown.revision,
+  };
  rundownMetadata = metadata;

  // defer writing to the database
@@ -33,7 +33,7 @@ import {
 import { makeNewRundown } from '../../models/dataModel.js';
 import type { ErrorEmitter } from '../../utils/parserUtils.js';
 import { RundownMetadata } from './rundown.types.js';
-import { calculateDayOffset, cleanupCustomFields } from './rundown.utils.js';
+import { calculateDayOffset, cleanupCustomFields, cloneEntryData } from './rundown.utils.js';

 /**
 * Parse a rundowns object along with the project custom fields
@@ -234,7 +234,7 @@ export function makeRundownMetadata(customFields: CustomFields, options?: { muta
  };

  function process<T extends OntimeEntry>(entry: T, childOfGroup: EntryId | null): T {
-    return processEntry(rundownMeta, customFields, mutate ? entry : structuredClone(entry), childOfGroup);
+    return processEntry(rundownMeta, customFields, mutate ? entry : cloneEntryData(entry), childOfGroup);
  }

  function getMetadata(): ProcessedRundownMetadata {
@@ -39,6 +39,7 @@ import {
 import { parseRundown } from './rundown.parser.js';
 import type { RundownMetadata } from './rundown.types.js';
 import {
+  cloneRundown,
  generateEvent,
  getFirstInsertId,
  getIntegerAndFraction,
@@ -626,7 +627,7 @@ export async function editCustomField(
    // ... reassign references in the background rundowns
    for (const rundownId of Object.keys(projectRundowns)) {
      if (rundownId !== rundown.id) {
-        const backgroundRundown = structuredClone(projectRundowns[rundownId]);
+        const backgroundRundown = cloneRundown(projectRundowns[rundownId]);
        customFieldMutation.renameUsages(backgroundRundown, oldKey, newKey);
        await updateBackgroundRundown(rundownId, backgroundRundown);
      }
@@ -666,7 +667,7 @@ export async function deleteCustomField(key: CustomFieldKey, projectRundowns: Pr
  // remove references in the background rundowns
  for (const rundownId of Object.keys(projectRundowns)) {
    if (rundownId !== rundown.id) {
-      const backgroundRundown = structuredClone(projectRundowns[rundownId]);
+      const backgroundRundown = cloneRundown(projectRundowns[rundownId]);
      customFieldMutation.removeUsages(backgroundRundown, key);
      await updateBackgroundRundown(rundownId, backgroundRundown);
    }
@@ -846,7 +847,7 @@ export async function duplicateExistingRundown(id: string) {
  const dataProvider = getDataProvider();
  const rundown = dataProvider.getRundown(id);

-  const duplicatedRundown: Rundown = structuredClone(rundown);
+  const duplicatedRundown: Rundown = cloneRundown(rundown);
  duplicatedRundown.id = generateId();
  duplicatedRundown.title = `Copy of ${rundown.title}`;
  duplicatedRundown.revision = 0;
@@ -329,7 +329,7 @@ export function mergeRundownPreservingFields(
    const structure = isOntimeGroup(incomingEntry)
      ? { entries: incomingEntry.entries }
      : { parent: incomingEntry.parent };
-    entries[id] = structuredClone({ ...merged, ...structure });
+    entries[id] = cloneEntryData({ ...merged, ...structure });
  }

  return {
@@ -353,19 +353,19 @@ export function isLoadedPlayable(loadedEventId: EntryId, rundown: Readonly<Rundo

 /** List of event properties which do not need the rundown to be regenerated */
 enum RegenerateWhitelist {
-  'id', // adding it for completeness, users cannot change ID
-  'type', // adding it for completeness, users cannot change ID
-  'cue',
-  'title',
-  'note',
-  'endAction',
-  'timerType',
-  'countToEnd',
-  'colour',
-  'timeWarning',
-  'timeDanger',
-  'custom',
-  'triggers',
+  id, // adding it for completeness, users cannot change ID
+  type, // adding it for completeness, users cannot change ID
+  cue,
+  title,
+  note,
+  endAction,
+  timerType,
+  countToEnd,
+  colour,
+  timeWarning,
+  timeDanger,
+  custom,
+  triggers,
 }

 /**
@@ -499,6 +499,68 @@ export function cloneSimpleRundownEntry(entry: OntimeEntry, newId: EntryId): Ont
  throw new Error(`Unsupported entry type for cloning: ${entry}`);
 }

+/**
+ * Fast, shape-aware clone of a single entry, preserving its identity (id, revision, etc).
+ * Drop-in replacement for `structuredClone(entry)`, at a fraction of the cost: the spread
+ * already copies every primitive field by value, so only the nested containers need work.
+ * `custom` and `entries` hold primitives, so copying the container is enough. `triggers`
+ * holds objects, which are copied too - otherwise a mutable transaction could edit a trigger
+ * of the cached rundown before commit.
+ * A container is only replaced when the entry actually carries it, so the clone has exactly
+ * the same keys as the source. Adding a key here would make the clone compare unequal to the
+ * entry it came from, and the runtime uses that comparison to decide whether to re-broadcast.
+ */
+export function cloneEntryData<T extends OntimeEntry>(entry: T): T {
+  switch (entry.type) {
+    case SupportedEntry.Event: {
+      const clone: OntimeEvent = { ...entry };
+      if (clone.custom) clone.custom = { ...clone.custom };
+      if (clone.triggers) clone.triggers = clone.triggers.map((trigger) => ({ ...trigger }));
+      return clone as T;
+    }
+    case SupportedEntry.Group: {
+      const clone: OntimeGroup = { ...entry };
+      if (clone.custom) clone.custom = { ...clone.custom };
+      if (clone.entries) clone.entries = clone.entries.slice();
+      return clone as T;
+    }
+    case SupportedEntry.Milestone: {
+      const clone: OntimeMilestone = { ...entry };
+      if (clone.custom) clone.custom = { ...clone.custom };
+      return clone as T;
+    }
+    case SupportedEntry.Delay:
+      return { ...entry } as T;
+    default: {
+      // exhaustiveness guard: a new member of `SupportedEntry` is named in the error here
+      const unhandled: never = entry;
+      throw new Error(`Unsupported entry type for cloning: ${(unhandled as OntimeEntry).type}`);
+    }
+  }
+}
+
+/**
+ * Fast, shape-aware clone of a whole rundown.
+ * Drop-in replacement for `structuredClone(rundown)`: every entry (and its nested
+ * `custom` / `triggers` / `entries` containers) gets its own copy, so callers can mutate
+ * the result freely without touching the source - same contract as structuredClone,
+ * at a fraction of the cost since we skip the generic serialization algorithm.
+ */
+export function cloneRundown(rundown: Readonly<Rundown>): Rundown {
+  const entries: RundownEntries = {};
+  for (const id in rundown.entries) {
+    entries[id] = cloneEntryData(rundown.entries[id]);
+  }
+  return {
+    id: rundown.id,
+    title: rundown.title,
+    revision: rundown.revision,
+    order: rundown.order.slice(),
+    flatOrder: rundown.flatOrder.slice(),
+    entries,
+  };
+}
+
 /**
 * Utility for calculating if the current events should have a day offset
 * @param current the current event under test
@@ -464,9 +464,8 @@ export async function upload(sheetId: string, options: ImportMap) {
    sheetOrder.forEach((entryId, index) => {
      const isGroupEnd = entryId.startsWith('group-end-');
      const id = isGroupEnd ? entryId.split('group-end-')[1] : entryId;
-      const entry = isGroupEnd
-        ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup)
-        : structuredClone(rundown.entries[id]);
+      // cellRequestFromEvent only reads the entry to build a cell request, no clone is needed
+      const entry = isGroupEnd ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup) : rundown.entries[id];
      updateRundown.push(cellRequestFromEvent(entry, index, worksheetId, sheetMetadata));
    });
  } catch (e) {
@@ -1,21 +0,0 @@
-import type { NextFunction, Request, RequestHandler, Response } from 'express';
-
-import { hasPassword, hashedPassword } from '../api-data/session/session.service.js';
-
-/**
- * Wraps the app authenticate middleware with support for the Authorization header.
- * MCP clients conventionally authenticate with `Authorization: Bearer <token>`
- * rather than cookies or query params; any other request falls through to the
- * app middleware, keeping the behaviour of the shared middleware untouched.
- */
-export function makeMcpAuthenticate(fallback: RequestHandler): RequestHandler {
-  return function mcpAuthenticate(req: Request, res: Response, next: NextFunction) {
-    if (hasPassword) {
-      const authHeader = req.headers.authorization;
-      if (authHeader?.startsWith('Bearer ') && authHeader.slice(7) === hashedPassword) {
-        return next();
-      }
-    }
-    return fallback(req, res, next);
-  };
-}
@@ -20,12 +20,9 @@ export function createMcpServer(): Server {
    { capabilities: { tools: {}, prompts: {}, resources: {} } },
  );

-  server.setRequestHandler(
-    ListToolsRequestSchema,
-    async (): Promise<ListToolsResult> => ({
-      tools: TOOL_DEFINITIONS as unknown as ListToolsResult['tools'],
-    }),
-  );
+  server.setRequestHandler(ListToolsRequestSchema, async (): Promise<ListToolsResult> => ({
+    tools: TOOL_DEFINITIONS as unknown as ListToolsResult['tools'],
+  }));

  server.setRequestHandler(CallToolRequestSchema, async (request): Promise<CallToolResult> => {
    const { name, arguments: args = {} } = request.params;
@@ -13,7 +13,6 @@ import { socket } from './adapters/WebsocketAdapter.js';
 // Import Routers
 import { appRouter } from './api-data/index.js';
 import { integrationRouter } from './api-integration/integration.router.js';
-import { makeMcpAuthenticate } from './api-mcp/mcp.auth.js';
 import { mcpRouter } from './api-mcp/mcp.router.js';
 import { flushPendingWrites, getDataProvider } from './classes/data-provider/DataProvider.js';
 // Services
@@ -102,7 +101,7 @@ app.get(`${prefix}/ready`, (_req, res) => {
 app.use(`${prefix}/login`, loginRouter); // router for login flow
 app.use(`${prefix}/data`, authenticate, appRouter); // router for application data
 app.use(`${prefix}/api`, authenticate, integrationRouter); // router for integrations
-app.use(`${prefix}/mcp`, makeMcpAuthenticate(authenticate), mcpRouter); // router for MCP agent integration
+app.use(`${prefix}/mcp`, authenticate, mcpRouter); // router for MCP agent integration

 // serve static external files
 app.use(
@@ -101,8 +101,16 @@ function getCustomFields(): Readonly<CustomFields> {
  return db.data.customFields;
 }

+/**
+ * Stores a rundown, replacing any existing entry for the same key.
+ * Takes ownership of `newData` and stores it by reference - the caller must not mutate it
+ * afterward. Every call site either hands over a freshly-built object it never touches again,
+ * or (for the loaded rundown) the cache's own long-lived object, which is already the single
+ * source of truth for that data - aliasing it here costs nothing and avoids a second full
+ * deep copy of the rundown on every commit.
+ */
 async function setRundown(rundownKey: string, newData: Rundown): ReadonlyPromise<ProjectRundowns> {
-  db.data.rundowns[rundownKey] = structuredClone(newData);
+  db.data.rundowns[rundownKey] = newData;
  await persist();
  return db.data.rundowns;
 }
@@ -4,12 +4,17 @@ import { DatabaseModel } from 'ontime-types';
 * Merges a partial ontime project into a given ontime project
 */
 export function safeMerge(existing: DatabaseModel, newData: Partial<DatabaseModel>): DatabaseModel {
-  const deepExisting = structuredClone(existing);
-  const deepNewData = structuredClone(newData);
+  // rundowns are merged separately below by reference (only the top-level map is copied,
+  // same as the other properties here) - deep-cloning them here would be wasted work,
+  // since a project's rundowns are by far the largest part of this object
+  const { rundowns: existingRundowns, ...existingRest } = existing;
+  const { rundowns: newRundowns = {}, ...newDataRest } = newData;
+
+  const deepExisting = structuredClone(existingRest);
+  const deepNewData = structuredClone(newDataRest);

  // destructure each property to simplify merging not provided ie: ...{} has no effect
  const {
-    rundowns = {},
    project = {},
    settings = {},
    viewSettings = {},
@@ -19,7 +24,7 @@ export function safeMerge(existing: DatabaseModel, newData: Partial<DatabaseMode
  } = deepNewData;

  return {
-    rundowns: { ...existing.rundowns, ...rundowns },
+    rundowns: { ...existingRundowns, ...newRundowns },
    project: { ...deepExisting.project, ...project },
    settings: { ...deepExisting.settings, ...settings },
    viewSettings: { ...deepExisting.viewSettings, ...viewSettings },
@@ -1,6 +1,31 @@
-import { describe, expect, it } from 'vitest';
+import type { IncomingMessage } from 'node:http';

-import { isPublicAssetRequest } from '../authenticate.js';
+import type { NextFunction, Request, Response } from 'express';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('../../api-data/session/session.service.js', () => ({
+  hasPassword: true,
+  hashedPassword: 'valid-token',
+}));
+
+import { authenticateSocket, isPublicAssetRequest, makeAuthenticateMiddleware } from '../authenticate.js';
+
+function makeResponse() {
+  return {
+    redirect: vi.fn(),
+    send: vi.fn(),
+    status: vi.fn().mockReturnThis(),
+  } as unknown as Response;
+}
+
+function makeHeadersWithFailingAuthorization(cookie?: string) {
+  return {
+    cookie,
+    get authorization(): never {
+      throw new Error('Authorization header should not be read');
+    },
+  };
+}

 describe('isPublicAssetRequest()', () => {
  it('allows root public assets without a prefix', () => {
@@ -18,3 +43,144 @@ describe('isPublicAssetRequest()', () => {
    expect(isPublicAssetRequest('/backstage', '')).toBe(false);
  });
 });
+
+describe('bearer authentication', () => {
+  const next = vi.fn() as NextFunction;
+
+  beforeEach(() => {
+    next.mockClear();
+  });
+
+  it('prioritises cookie authentication for API requests', () => {
+    const { authenticate } = makeAuthenticateMiddleware('');
+    const req = {
+      cookies: { token: JSON.stringify({ token: 'valid-token' }) },
+      headers: makeHeadersWithFailingAuthorization(),
+      query: {},
+    } as unknown as Request;
+
+    expect(() => authenticate(req, makeResponse(), next)).not.toThrow();
+    expect(next).toHaveBeenCalledOnce();
+  });
+
+  it('prioritises cookie authentication for redirecting routes', () => {
+    const { authenticateAndRedirect } = makeAuthenticateMiddleware('');
+    const req = {
+      cookies: { token: JSON.stringify({ token: 'valid-token' }) },
+      headers: makeHeadersWithFailingAuthorization(),
+      originalUrl: '/external/image.png',
+      query: {},
+    } as unknown as Request;
+
+    expect(() => authenticateAndRedirect(req, makeResponse(), next)).not.toThrow();
+    expect(next).toHaveBeenCalledOnce();
+  });
+
+  it('prioritises cookie authentication for WebSocket handshakes', () => {
+    const cookie = `token=${encodeURIComponent(JSON.stringify({ token: 'valid-token' }))}`;
+    const req = { headers: makeHeadersWithFailingAuthorization(cookie) } as IncomingMessage;
+
+    expect(() => authenticateSocket({} as never, req, next)).not.toThrow();
+    expect(next).toHaveBeenCalledOnce();
+  });
+
+  it('authenticates API requests with a bearer token', () => {
+    const { authenticate } = makeAuthenticateMiddleware('');
+    const req = {
+      cookies: {},
+      headers: { authorization: 'Bearer valid-token' },
+      query: {},
+    } as unknown as Request;
+    const res = makeResponse();
+
+    authenticate(req, res, next);
+
+    expect(next).toHaveBeenCalledOnce();
+    expect(res.status).not.toHaveBeenCalled();
+  });
+
+  it('accepts case-insensitive bearer schemes and extra whitespace', () => {
+    const { authenticate } = makeAuthenticateMiddleware('');
+    const req = {
+      cookies: {},
+      headers: { authorization: 'bearer   valid-token ' },
+      query: {},
+    } as unknown as Request;
+
+    authenticate(req, makeResponse(), next);
+
+    expect(next).toHaveBeenCalledOnce();
+  });
+
+  it('authenticates redirecting routes with a bearer token', () => {
+    const { authenticateAndRedirect } = makeAuthenticateMiddleware('/stage');
+    const req = {
+      cookies: {},
+      headers: { authorization: 'Bearer valid-token' },
+      originalUrl: '/stage/external/image.png',
+      query: {},
+    } as unknown as Request;
+    const res = makeResponse();
+
+    authenticateAndRedirect(req, res, next);
+
+    expect(next).toHaveBeenCalledOnce();
+    expect(res.redirect).not.toHaveBeenCalled();
+  });
+
+  it('authenticates WebSocket handshakes with a bearer token', () => {
+    const req = {
+      headers: { authorization: 'Bearer valid-token' },
+    } as IncomingMessage;
+
+    authenticateSocket({} as never, req, next);
+
+    expect(next).toHaveBeenCalledOnce();
+    expect(next).toHaveBeenCalledWith();
+  });
+
+  it('rejects an invalid bearer token', () => {
+    const { authenticate, authenticateAndRedirect } = makeAuthenticateMiddleware('');
+    const req = {
+      cookies: {},
+      headers: { authorization: 'Bearer invalid-token' },
+      query: {},
+    } as unknown as Request;
+    const res = makeResponse();
+
+    authenticate(req, res, next);
+
+    expect(next).not.toHaveBeenCalled();
+    expect(res.status).toHaveBeenCalledWith(401);
+    expect(res.send).toHaveBeenCalledWith('Unauthorized');
+
+    const redirectReq = { ...req, originalUrl: '/external/image.png' } as Request;
+    const redirectRes = makeResponse();
+    authenticateAndRedirect(redirectReq, redirectRes, next);
+
+    expect(next).not.toHaveBeenCalled();
+    expect(redirectRes.redirect).toHaveBeenCalledWith('/login?redirect=/external/image.png');
+
+    const socketNext = vi.fn();
+    authenticateSocket(
+      {} as never,
+      { headers: { authorization: 'Bearer invalid-token' } } as IncomingMessage,
+      socketNext,
+    );
+
+    expect(socketNext).toHaveBeenCalledOnce();
+    expect(socketNext.mock.calls[0][0]).toEqual(new Error('Unauthorized'));
+  });
+
+  it.each(['/socket?not_token=valid-token', '/socket?token=valid-token-suffix'])(
+    'rejects lookalike WebSocket query tokens in %s',
+    (url) => {
+      const socketNext = vi.fn();
+
+      authenticateSocket({} as never, { headers: { host: 'localhost' }, url } as IncomingMessage, socketNext);
+
+      expect(socketNext).toHaveBeenCalledOnce();
+      expect(socketNext.mock.calls[0][0]).toEqual(new Error('Unauthorized'));
+    },
+  );
+});
@@ -77,17 +77,16 @@ export function makeAuthenticateMiddleware(prefix: string) {
  const loginRedirectBase = `${prefix}/login?redirect=`;

  function authenticate(req: Request, res: Response, next: NextFunction) {
-    if (req.query.token) {
-      if (req.query.token === hashedPassword) {
-        return next();
-      }
+    if (getTokenFromCookies(req.cookies) === hashedPassword) {
+      return next();
    }

-    if (req.cookies?.token) {
-      const tokenFromCookie = getTokenFromCookie(req.cookies.token);
-      if (tokenFromCookie === hashedPassword) {
-        return next();
-      }
+    if (getTokenFromAuthHeader(req.headers.authorization) === hashedPassword) {
+      return next();
+    }
+
+    if (getTokenFromParams(req.query) === hashedPassword) {
+      return next();
    }

    res.status(401).send('Unauthorized');
@@ -105,17 +104,17 @@ export function makeAuthenticateMiddleware(prefix: string) {
      return next();
    }

-    // we expect the token to be in the cookies
-    if (req.cookies?.token) {
-      const tokenFromCookie = getTokenFromCookie(req.cookies.token);
-      if (tokenFromCookie === hashedPassword) {
-        return next();
-      }
+    if (getTokenFromCookies(req.cookies) === hashedPassword) {
+      return next();
+    }
+
+    if (getTokenFromAuthHeader(req.headers.authorization) === hashedPassword) {
+      return next();
    }

    // we use query params for generating authenticated URLs and for clients like the companion module
    // if the user gives is a token in the query params, we set the cookie to be used in further requests
-    if (req.query.token === hashedPassword) {
+    if (getTokenFromParams(req.query) === hashedPassword) {
      if (hashedPassword !== undefined) {
        setSessionCookie(res, hashedPassword, prefix);
      }
@@ -136,33 +135,16 @@ export function authenticateSocket(_ws: WebSocket, req: IncomingMessage, next: (
    return next();
  }

-  // check if the token is in the cookie
-  const cookieString = req.headers.cookie;
-  if (typeof cookieString === 'string') {
-    const cookies = parseCookie(cookieString);
-    if (cookies.token) {
-      const token = getTokenFromCookie(cookies.token);
-      if (token === hashedPassword) {
-        return next();
-      }
-    }
-  }
-
-  // check if token is in the params - simple string check first
-  const urlString = req.url || '';
-  if (urlString.includes(`token=${hashedPassword}`)) {
+  if (getTokenFromCookies(req.headers.cookie) === hashedPassword) {
    return next();
  }

-  // fallback to full URL parsing for other formats
-  try {
-    const url = new URL(urlString, `http://${req.headers.host}`);
-    const token = url.searchParams.get('token');
-    if (token === hashedPassword) {
-      return next();
-    }
-  } catch (_) {
-    // ignore URL parsing errors
+  if (getTokenFromAuthHeader(req.headers.authorization) === hashedPassword) {
+    return next();
+  }
+
+  if (getTokenFromParams(req.url, req.headers.host) === hashedPassword) {
+    return next();
  }

  return next(new Error('Unauthorized'));
@@ -181,19 +163,18 @@ function setSessionCookie(res: Response, token: string, prefix: string) {
  });
 }

-/**
- * When calling this function we already know a cookie called 'token' exists
- * And want to extract its value
- */
-function getTokenFromCookie(cookieContents: string): string | undefined {
-  // Fast path: check if the hashed password is directly in the cookie string
-  // This avoids JSON parsing for the common case
-  const cookieTokenString = '"token":"' + hashedPassword + '}"';
+function getTokenFromCookies(cookies: string | Record<string, unknown> | undefined): string | undefined {
+  const cookieContents = typeof cookies === 'string' ? parseCookie(cookies).token : cookies?.token;
+  if (typeof cookieContents !== 'string') {
+    return undefined;
+  }
+
+  // Fast path: avoid JSON parsing when the expected token can be found directly
+  const cookieTokenString = '"token":"' + hashedPassword + '"';
  if (cookieTokenString && cookieContents.includes(cookieTokenString)) {
    return hashedPassword;
  }

-  // Fallback to JSON parsing for other cases or validation
  try {
    const cookie = JSON.parse(cookieContents);
    if (cookie && typeof cookie.token === 'string') {
@@ -203,3 +184,19 @@ function getTokenFromCookie(cookieContents: string): string | undefined {
    // no error handling to do here
  }
 }
+
+function getTokenFromAuthHeader(authorization: string | undefined): string | undefined {
+  return authorization?.match(/^Bearer\s+(\S+)\s*$/i)?.[1];
+}
+
+function getTokenFromParams(params: string | Record<string, unknown> | undefined, host?: string): string | undefined {
+  if (typeof params !== 'string') {
+    return typeof params?.token === 'string' ? params.token : undefined;
+  }
+
+  try {
+    return new URL(params, `http://${host}`).searchParams.get('token') ?? undefined;
+  } catch (_) {
+    return undefined;
+  }
+}
@@ -20,6 +20,7 @@ import { triggerAutomations } from '../../api-data/automation/automation.service
 import { triggerReportEntry } from '../../api-data/report/report.service.js';
 import { getCurrentRundown, getEntryWithId, getRundownMetadata } from '../../api-data/rundown/rundown.dao.js';
 import { RundownMetadata } from '../../api-data/rundown/rundown.types.js';
+import { cloneEntryData } from '../../api-data/rundown/rundown.utils.js';
 import { logger } from '../../classes/Logger.js';
 import { timerConfig } from '../../setup/config.js';
 import { eventStore } from '../../stores/EventStore.js';
@@ -754,7 +755,7 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
      }
      // at this point we know that either the id or the contents has changed
      batch.add(key, currentEntry as RuntimeStore[K]); // we know that there is the necessary overlap in the types to cast this
-      RuntimeService.previousState[key] = structuredClone(currentEntry);
+      RuntimeService.previousState[key] = currentEntry ? cloneEntryData(currentEntry) : null;
      return true;
    }

@@ -48,6 +48,47 @@ test.describe('test view navigation feature', () => {
    await expect(page).toHaveURL('/timer');
  });

+  /**
+   * The shortcut has to read the current open state, not the one captured when it was
+   * registered, otherwise it only ever opens the menu.
+   */
+  test('Space closes the menu as well as opening it', async ({ page }) => {
+    const menu = page.getByRole('dialog');
+    await expect(menu).toBeHidden();
+
+    await openNavigationMenu(page);
+    await expect(menu).toBeVisible();
+
+    await page.keyboard.press('Space');
+    await expect(menu).toBeHidden();
+  });
+
+  test('Space closes a menu opened with the button', async ({ page }) => {
+    await page.mouse.move(Math.random() * 100, Math.random() * 100);
+    await page.getByTestId('navigation__toggle-menu').click();
+
+    const menu = page.getByRole('dialog');
+    await expect(menu).toBeVisible();
+
+    await page.keyboard.press('Space');
+    await expect(menu).toBeHidden();
+  });
+
+  test('Space toggles a focused menu switch without closing the menu', async ({ page }) => {
+    await openNavigationMenu(page);
+
+    const menu = page.getByRole('dialog');
+    const flipScreen = page.getByRole('switch', { name: 'Flip Screen' });
+    await expect(menu).toBeVisible();
+
+    const initiallyChecked = await flipScreen.getAttribute('aria-checked');
+    await flipScreen.focus();
+    await page.keyboard.press('Space');
+
+    await expect(flipScreen).toHaveAttribute('aria-checked', initiallyChecked === 'true' ? 'false' : 'true');
+    await expect(menu).toBeVisible();
+  });
+
  test('not-found', async ({ page }) => {
    await page.goto('/not-found');

@@ -6,6 +6,25 @@ test('cuesheet displays events', async ({ page }) => {
  await expect(page.getByTestId('cuesheet-event').first()).toBeVisible();
 });

+test('cuesheet persists column visibility', async ({ page }) => {
+  await page.goto('/cuesheet');
+
+  const noteHeader = page.getByRole('columnheader', { name: 'Note', exact: true });
+  const noteCell = page.getByTestId('cuesheet-event').first().getByTestId('cuesheet-cell-note');
+  await expect(noteHeader).toBeVisible();
+  await expect(noteCell).toBeVisible();
+
+  await page.getByRole('button', { name: 'Columns' }).click();
+  await page.getByRole('checkbox', { name: 'Note', exact: true }).click();
+
+  await expect(noteHeader).toBeHidden();
+  await expect(noteCell).toBeHidden();
+
+  await page.reload();
+  await expect(noteHeader).toBeHidden();
+  await expect(noteCell).toBeHidden();
+});
+
 test('cuesheet datagrid does not submit timer cells on tab-out or escape', async ({ page }) => {
  await page.goto('/cuesheet');

@@ -44,7 +44,7 @@ test.describe('URL Preset', () => {
      .filter({ hasText: /^testingApply$/ })
      .getByRole('button')
      .click();
-    await expect(page.getByRole('button', { name: 'Applied' })).toBeVisible();
+    await expect(page.getByText('Current')).toBeVisible();

    // 2. the URL contains the preset
    expect(page.url().includes('hideTimerSeconds=true')).toBeTruthy();
@@ -13,3 +13,28 @@ test('View params configures timer view', async ({ page }) => {
  await expect(page.getByText('TIME NOW', { exact: true })).not.toBeInViewport();
  await expect(page).toHaveURL(/.*hideClock=true/);
 });
+
+/**
+ * The form gathers its values from the DOM, so a collapsed section has to stay mounted.
+ * Unmounting it would quietly drop everything the user set in it on the next apply.
+ */
+test('View params keeps the values of collapsed sections', async ({ page }) => {
+  // hideClock lives in the section we are about to collapse
+  await page.goto('/timer?hideClock=true');
+  await expect(page.getByText('TIME NOW', { exact: true })).not.toBeInViewport();
+
+  await page.mouse.move(Math.random() * 100, Math.random() * 100);
+  await page.getByTestId('navigation__toggle-settings').click();
+
+  const section = page.getByRole('button', { name: /Element visibility/ });
+  await expect(section).toHaveAttribute('aria-expanded', 'true');
+  await section.focus();
+  await page.keyboard.press('Space');
+  await expect(section).toHaveAttribute('aria-expanded', 'false');
+  await expect(page.getByRole('dialog', { name: 'Ontime' })).toBeHidden();
+
+  await page.getByTestId('apply-view-params').click();
+
+  await expect(page).toHaveURL(/.*hideClock=true/);
+  await expect(page.getByText('TIME NOW', { exact: true })).not.toBeInViewport();
+});
@@ -41,14 +41,14 @@
    "format:check": "oxfmt --check"
  },
  "devDependencies": {
-    "@playwright/test": "1.60.0",
+    "@playwright/test": "1.62.1",
    "@types/node": "catalog:",
    "cross-env": "^7.0.3",
-    "oxfmt": "^0.42.0",
-    "oxlint": "^1.57.0",
-    "oxlint-tsgolint": "^0.17.4",
+    "oxfmt": "^0.63.0",
+    "oxlint": "^1.78.0",
+    "oxlint-tsgolint": "^7.0.2001",
    "rimraf": "catalog:",
-    "turbo": "2.8.20",
+    "turbo": "2.10.10",
    "typescript": "catalog:"
  },
  "packageManager": "pnpm@11.1.2+sha512.415a1cc25974731e75455c1468371be74c5aa5fb7621b50d4056d222451609f11412f23fd602e6169f1e060466641f798597e1be961a10688836a67b16569499",
@@ -14,6 +14,7 @@
    "nanoid": "^6.0.0"
  },
  "devDependencies": {
+    "@types/node": "catalog:",
    "ontime-types": "workspace:*",
    "typescript": "catalog:",
    "vitest": "catalog:"
@@ -4,10 +4,10 @@ packages:

 catalog:
  '@types/node': 22.19.11
-  rimraf: 6.0.1
-  ts-essentials: 10.1.1
+  rimraf: 6.1.3
+  ts-essentials: 10.2.1
  typescript: 7.0.2
-  vitest: 4.0.17
+  vitest: 4.1.10

 allowBuilds:
  '@parcel/watcher': true
Author	SHA1	Message	Date
Claude	3d904f7cc6	Fix rundown-switch data loss and clone key divergence found in review Two real bugs in the clone work, both confirmed with repros before fixing and re-confirmed by reverting each fix afterwards. 1. Data loss on every rundown switch (blocker). cachedRundown was a module-level const mutated in place by init(). Once setRundown stored by reference, db.data.rundowns[loadedId] aliased that object, so loading a second rundown rewrote the first one's stored record in place. Repro: after init(A) then init(B), store['rundown-a'] had id 'rundown-b', title 'B' and order ['b1'] - A's data was gone, and both keys pointed at one object. The earlier audit missed this because it only asked whether callers mutate an object after handing it over, within one rundown's lifetime. It never considered that cachedRundown is a singleton reused across different rundowns, which is where the aliasing actually bites. Fixed at the root: cachedRundown is now reassigned rather than repurposed, so a stored record keeps pointing at the data it was stored for. Mutating in place from commit, while it still represents the same rundown, is unchanged and is what keeps the stored record current. Every getCurrentRundown() call site was checked - all are locals used within a single operation, none held across a switch. 2. cloneEntryData was not key-equal to structuredClone. For an entry without a custom/triggers/entries key, the spread-then- override form added those as own keys ('custom' as {}, 'triggers' as undefined). fast-equals deepEqual counts own keys, so a clone never compared equal to its source, which is the comparison runtime.service.ts uses to decide whether to re-broadcast - reinstating the per-tick re-broadcast and restore-save this PR had already fixed once. Dropping `?? []` earlier corrected the value but not the key. Containers are now only replaced when the entry carries them. The regression test was vacuous: toBeUndefined() passes for both an absent key and an own key holding undefined. It now asserts key equality against structuredClone plus deepEqual, and was verified to fail against the previous implementation. Typecheck, lint, format and the full suite (706 tests) pass.	2026-08-25 05:32:52 +00:00
Claude	a2ec4d0d3f	Remove the second full-rundown clone from DataProvider.setRundown setRundown deep-cloned every rundown a second time on top of the clone createTransaction already makes - the only two callers that matter for correctness are the ones passing the live cachedRundown singleton, and db.data.rundowns[key] is only ever replaced wholesale, never mutated in place, so aliasing it introduces no corruption path. The other six call sites already pass a freshly-built object they never touch again, for which the clone was pure waste. setRundown now takes ownership of `newData` and stores it by reference, documented on the function. Verified with a throwaway suite (deleted, per instructions, once green) covering: - the reference stored is the exact one passed in, not a copy - round-trip content correctness is unchanged - a mutation to the source after setRundown is visible through getRundown, which is the new contract, not a regression - pinned explicitly so it reads as intentional - the fresh-object call sites (duplicate, import, rename, etc.) are unaffected - mergeRundown / deleteRundown / not-found still behave correctly - perf: setRundown on a 1000-entry rundown dropped from ~557us/call to ~5us/call Real disk I/O could not be exercised in that suite - lowdb's JSONFilePreset forces an in-memory adapter whenever NODE_ENV=test, which vitest always sets, independent of this project's own IS_TEST flag. That's fine: this change only affects which object reference ends up at db.data.rundowns[key], not persist()'s debounce/write-scheduling logic, which is untouched, so checking that state directly is equivalent to checking what a real write would serialize. Full suite (705 tests), typecheck, and lint all pass on the final diff, which is 8 lines changed in one file.	2026-08-25 05:08:02 +00:00
Claude	2d5a328636	Simplify entry clone back to a spread, cover it with two generic tests The per-type clone functions from the previous commit listed every field of every entry type, which was a lot of code for a change meant to be a drop-in swap. They are replaced by the spread they were written to guard, keeping both review fixes and the exhaustiveness guard. The explicit literals were also weaker than they looked. They forced a new field to be named, but nothing stopped it being named as a plain alias, which is the actual bug we care about. The guarantee now comes from a test that walks a clone against its source and fails on any shared nested object or array. That covers a field added later without the clone enumerating fields, and it names the path it found: entry.triggers.0 is shared with the source Paired with a field-for-field comparison against structuredClone, the two tests pin both halves of the contract - same value, no shared references - and both were confirmed to fail when the corresponding fix is reverted. Dropping the literals also removes the `parent: undefined` divergence they introduced on entries that omit the key, since a spread copies exactly the keys that are present. Net: the diff for this PR goes from 261 to 159 added lines, with rundown.utils.ts down from 132 to 52.	2026-08-24 18:56:57 +00:00
Claude	10dffb5d72	Address PR review: deep-clone triggers, stop normalising absent values Replaces the generic type machinery around cloneEntryData with a concrete clone per entry type, and fixes two review findings. Types: ReferenceKeys / EntryOfType / ClonedReferenceFields / UnclonedReferenceFields / AssertNever are gone. There are only four entry types, so each gets its own small function listing every field explicitly - the same pattern the create*Patch functions in this file already use. Adding a field to an entry type still fails to compile until it is handled, but now with a plain "property is missing" error rather than a constraint on never, and the clone reads as the logic it is instead of type gymnastics. The exhaustiveness guard in the switch is kept, so a new SupportedEntry member is still named in a compile error. Fixes, both from review: - triggers were copied with slice(), which shares every Trigger object with the source. A mutable transaction could edit a trigger of the cached rundown before commit. Each trigger is now copied too, making the structuredClone contract actually true - custom and entries were already deep since their values are primitives. - triggers and entries were normalised from undefined to [], so an entry missing either field never compared equal to its own snapshot. That would have the runtime re-broadcast and re-save the restore point on every tick. An absent value is now left absent. Tests: cloneEntryData is compared field-for-field against structuredClone for all four entry types built from the real factories, plus aliasing coverage for custom, triggers (array and elements), and group entries, the absent-value regression, and the unknown-type throw. Each was confirmed to fail when the corresponding fix is reverted. The remaining review comment, about the missing default branch, was already fixed in `4548798`.	2026-08-24 18:51:39 +00:00
Claude	45487985be	Make cloneEntryData fail to compile when an entry shape changes cloneEntryData relies on a spread plus a hand-written list of the nested containers to copy. Nothing tied that list to the real types, so adding a reference-typed field to an entry - or a new entry type - would silently produce a clone that aliases the new field back to the source, which is the exact bug the custom clone exists to avoid. Two compile-time guards, both verified by temporarily mutating the shared types: - ClonedReferenceFields declares, per entry type, the reference-typed fields the switch copies. UnclonedReferenceFields diffs that against the fields the types actually have, computed via ReferenceKeys. Adding `attachments: string[]` to OntimeEvent now fails with `Type '"attachments"' does not satisfy the constraint 'never'`, naming the offending field. Adding a primitive field stays silent, since the spread already copies it by value and no action is needed. - A default branch in the switch asserts the entry is never. Adding a SupportedEntry member fails with `Type 'OntimeMarker' is not assignable to type 'never'`, and separately at the ClonedReferenceFields index, which is no longer total. Branded primitives such as Day (number & Brand<'day'>) correctly classify as primitives, so they are not flagged. Typecheck, lint, format and the full suite (695 tests) pass unchanged.	2026-08-23 19:59:56 +00:00
Claude	c6c25cebcc	Make createTransaction's rundown deep-readonly when not mutable Overload createTransaction() on the literal mutableRundown option: with mutableRundown: true it returns rundown: Rundown as before; otherwise it returns rundown: DeepReadonly<Rundown> (ts-essentials, already a convention in this codebase for read-only snapshots). Previously a non-mutable transaction's rundown was typed as plain Rundown even though it's the live cachedRundown reference itself (or a background rundown read straight from disk) - nothing stopped a future mutation function from writing into it outside the commit() flow, since Readonly<T> (used elsewhere for the same purpose) only blocks top-level reassignment, not nested writes like array.push() or entry.field = x. Scoped to rundown.dao.ts only: every existing call site in rundown.service.ts passes a literal mutableRundown: true, so this changes no call-site types. The one mutableRundown: false site doesn't destructure rundown at all. Verified with a throwaway probe file (removed) that mutating a non-mutable transaction's rundown is now a compile error, and that a mutable one still compiles as before. Typecheck, lint and full test suite (695 tests) pass unchanged.	2026-08-23 18:19:18 +00:00
Claude	b1059e7bff	Replace structuredClone with shape-aware clones in rundown/data hot paths structuredClone's generic serialization algorithm does far more work than plain object spreads need for these known shapes. Adds cloneEntryData() and cloneRundown() as drop-in replacements (same "independent copy" contract, same call sites) and swaps them in everywhere a rundown or a single entry was being deep-cloned via structuredClone: - createTransaction()/init() in rundown.dao.ts - the main per-mutation clone - DataProvider.setRundown() - was re-cloning the whole rundown a second time on every single commit - rundown.service.ts background-rundown clones (custom field rename/remove, duplicateExistingRundown) - the per-entry clone in processRundown's non-mutating path (rundown.parser.ts) - mergeRundownPreservingFields's per-entry clone Also: - safeMerge() (DataProvider.utils.ts) was deep-cloning the entire DatabaseModel, including all rundowns, just to read a handful of small config properties that never touch rundowns - it now only clones the properties it actually merges. - sheets.service.ts's per-row clone before building a (read-only) Google Sheets cell request was unnecessary and is removed. - runtime.service.ts's previous-state snapshot for eventNow/eventNext/ eventFlag/groupNow now uses cloneEntryData. Benchmarked on a synthetic 1000-event rundown: a cue-only edit (no reprocessing needed) went from ~5ms to ~1.2ms end to end, including the DataProvider clone. Verified against the existing test suite (695 passing) plus typecheck and lint.	2026-08-23 16:21:53 +00:00
Carlos Valente	a84b8b5530	refactor(ui): polish navigation menu and view params editor	2026-08-23 13:42:21 +02:00
Carlos Valente	c19aa4ca28	fix(cuesheet): prevent stale column width on refresh	2026-08-23 13:28:24 +02:00
Carlos Valente	805663e2ea	chore(deps): migrate to @tanstack/react-table v9	2026-08-23 13:28:24 +02:00
Carlos Valente	0f0b32d444	accept bearer token	2026-08-21 20:52:11 +02:00
Carlos Valente	703dee35a4	style: bump oxfmt to 0.63 and reformat	2026-08-18 13:56:53 +02:00
Carlos Valente	2a7f5b7872	chore(deps): upgrade dependencies	2026-08-18 13:56:53 +02:00