refactor(report): improve report summary

fix: prevent stale rundown cache on rename
docs(llms): document ongoing code migrations
2026-09-01 20:39:18 +00:00 · 2026-08-30 13:29:12 +02:00 · 2026-08-25 21:41:34 +02:00 · 2026-08-25 21:41:18 +02:00 · 2026-08-25 21:41:18 +02:00 · 2026-08-23 13:42:21 +02:00
95 changed files with 4438 additions and 2778 deletions
@@ -0,0 +1,46 @@
+---
+name: code-review
+description: Review Ontime changes for concrete correctness, architecture, testing, routing, security, and maintenance issues. For GitHub Copilot review.
+---
+
+# Review Ontime changes
+
+Review as a maintainer. Find material defects, not speculative advice, style preferences, or generic checklists. Approve when no material issue remains.
+
+## Load relevant context
+
+Read the full diff, PR description, linked issue, tests, and nearby owning code. Then load only applicable guides:
+
+- Every non-trivial review: [change assessment](../../../docs/agent-guides/change-assessment.md)
+- Module placement, server layers, client state, shared packages: [architecture](../../../docs/agent-guides/architecture.md)
+- Tests or changed behaviour: [testing](../../../docs/agent-guides/testing.md)
+- Comments, abstractions, naming, complexity: [code quality](../../../docs/agent-guides/code-quality.md)
+- Authentication, external input, files, integrations, assets, secrets: [security](../../../docs/agent-guides/security.md)
+- Routes, URLs, websockets, authentication, cookies, presets, assets: [routing and cloud](../../../docs/agent-guides/routing-and-cloud.md)
+- Rundowns, timers, persistence, imports, cache, realtime: [domain invariants](../../../docs/agent-guides/domain-invariants.md)
+- Commands, imports, dependencies, formatting, CI claims: [workflow](../../../docs/agent-guides/workflow.md)
+
+Check a guide and nearby canonical code before citing an Ontime convention. Skip unrelated guides.
+
+## Review order
+
+1. Establish intent and affected runtime surfaces.
+2. Read tests first. Identify claimed behaviour and coverage.
+3. Trace implementation, errors, and state transitions.
+4. Check correctness/data integrity, security, architecture/testability, cloud routing, lifecycle/performance, maintainability.
+5. Verify claimed checks. Never claim unobserved results.
+
+Passing tests do not prove architecture, routing, comments, or error paths. Review changed behaviour only; include existing problems only when the diff worsens or relies on them.
+
+## Findings
+
+Report only concrete, actionable issues. Each finding: tight line range, direct defect, impact and trigger, smallest viable remedy when unclear.
+
+- **P0 — Critical:** data loss, exploitable vulnerability, broadly broken production. Blocks merge.
+- **P1 — High:** likely correctness failure or major supported-deployment regression. Blocks merge.
+- **P2 — Medium:** real edge-case defect, architecture regression, missing business-rule test, stale comment, meaningful maintenance risk. Normally blocks merge.
+- **P3 — Low:** local improvement with limited impact. No subjective style or tool-managed formatting.
+
+Order by priority. Prefer few high-confidence findings. No praise or checklist before findings. If none, say so and note verification gaps or residual risk.
+
+Then give one concise PR-level value/risk/complexity assessment. Never repeat it per finding.
@@ -0,0 +1,22 @@
+# Ontime agent guide
+
+Make the smallest maintainable change. Keep scope narrow. Inspect nearby code first. Reuse helpers and boundaries when semantics match.
+
+## Load only relevant guides
+
+- Commands, validation, formatting, imports, PRs: [workflow](docs/agent-guides/workflow.md).
+- Non-trivial planning, implementation, review: [change assessment](docs/agent-guides/change-assessment.md).
+- Module placement, server layers, client state, shared packages: [architecture](docs/agent-guides/architecture.md).
+- Tests or changed behaviour: [testing](docs/agent-guides/testing.md).
+- Comments, naming, abstractions, maintainability: [code quality](docs/agent-guides/code-quality.md).
+- Authentication, external input, files, integrations, assets, secrets: [security](docs/agent-guides/security.md).
+- Navigation, URLs, API paths, websockets, redirects, cookies, static assets: [routing and cloud](docs/agent-guides/routing-and-cloud.md).
+- Rundowns, timers, imports, persistence, cache, websockets: [domain invariants](docs/agent-guides/domain-invariants.md).
+
+Load multiple guides when needed. Skip unrelated guides for mechanical work.
+
+## Before handoff
+
+- Check the final diff for scope, stale comments, temporary code, redundant tests, generated files.
+- If work reveals a missing, stable, reusable system, domain, or product invariant, update its owning guide. Exclude guesses, one-off bugs, and implementation details.
+- Follow [workflow verification](docs/agent-guides/workflow.md). Report only observed results.
@@ -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:"
  }
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { OntimeReport } from 'ontime-types';
+import type { LastRunReport } from 'ontime-types';

 import { ontimeQueryClient } from '../../common/queryClient';
 import { REPORT, apiEntryUrl } from './constants';
@@ -8,18 +8,13 @@ import type { RequestOptions } from './requestOptions';
 export const reportUrl = `${apiEntryUrl}/report`;

 /**
- * HTTP request to fetch all reports
+ * HTTP request to fetch the one report retained from the latest run.
 */
-export async function fetchReport(options?: RequestOptions): Promise<OntimeReport> {
-  const res = await axios.get(reportUrl, { signal: options?.signal });
+export async function fetchLastRunReport(options?: RequestOptions): Promise<LastRunReport> {
+  const res = await axios.get(`${reportUrl}/last-run`, { signal: options?.signal });
  return res.data;
 }

-export async function deleteReport(id: string) {
-  await axios.delete(`${reportUrl}/${id}`);
-  await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
-}
-
 export async function deleteAllReport() {
  await axios.delete(`${reportUrl}/all`);
  await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
@@ -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>
  );
 }

@@ -1,17 +1,30 @@
 import { useQuery } from '@tanstack/react-query';
-import { OntimeReport } from 'ontime-types';
+import type { LastRunReport } from 'ontime-types';
 import { MILLIS_PER_HOUR } from 'ontime-utils';

 import { REPORT } from '../api/constants';
-import { fetchReport } from '../api/report';
+import { fetchLastRunReport } from '../api/report';
+
+const emptyLastRunReport: LastRunReport = {
+  eventReports: {},
+  rundown: null,
+  show: {
+    plannedStart: null,
+    plannedEnd: null,
+    plannedDuration: null,
+    actualStart: null,
+    actualEnd: null,
+    actualDuration: null,
+  },
+};

 export default function useReport() {
-  const { data, refetch } = useQuery<OntimeReport>({
+  const { data } = useQuery<LastRunReport>({
    queryKey: REPORT,
-    queryFn: ({ signal }) => fetchReport({ signal }),
-    placeholderData: (previousData, _previousQuery) => previousData,
+    queryFn: ({ signal }) => fetchLastRunReport({ signal }),
+    placeholderData: (previousData) => previousData,
    staleTime: MILLIS_PER_HOUR,
  });

-  return { data: data ?? {}, refetch };
+  return { data: data ?? emptyLastRunReport };
 }
@@ -0,0 +1,23 @@
+import type { OntimeEventReport } from 'ontime-types';
+import { dayInMs, MILLIS_PER_MINUTE } from 'ontime-utils';
+
+import { getEventVariance } from '../report';
+
+it('uses captured days when measuring an event across midnight', () => {
+  const report: OntimeEventReport = {
+    startedAt: dayInMs - 5 * MILLIS_PER_MINUTE,
+    startedAtDay: 0,
+    endedAt: 5 * MILLIS_PER_MINUTE,
+    endedAtDay: 1,
+    scheduledStart: dayInMs - 5 * MILLIS_PER_MINUTE,
+    scheduledDay: 0,
+    scheduledDuration: 10 * MILLIS_PER_MINUTE,
+  };
+
+  expect(getEventVariance(report)).toMatchObject({
+    actualDuration: 10 * MILLIS_PER_MINUTE,
+    delta: 0,
+    status: 'ontime',
+  });
+  expect(getEventVariance({ ...report, endedAt: null })).toMatchObject({ status: 'not-run' });
+});
@@ -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';
 }
@@ -0,0 +1,29 @@
+import type { MaybeNumber, OntimeEventReport } from 'ontime-types';
+import { dayInMs, MILLIS_PER_SECOND } from 'ontime-utils';
+
+type EventVariance = {
+  actualDuration: MaybeNumber;
+  delta: number;
+  status: 'ontime' | 'over' | 'under' | 'not-run';
+};
+
+const notRun: EventVariance = { actualDuration: null, delta: 0, status: 'not-run' };
+
+export function getReportTimePosition(time: number, day: number): number;
+export function getReportTimePosition(time: MaybeNumber, day: number | null): MaybeNumber;
+export function getReportTimePosition(time: MaybeNumber, day: number | null): MaybeNumber {
+  return time === null || day === null ? null : day * dayInMs + time;
+}
+
+export function getEventVariance(entry: OntimeEventReport | undefined): EventVariance {
+  if (!entry) return notRun;
+
+  const start = getReportTimePosition(entry.startedAt, entry.startedAtDay);
+  const end = getReportTimePosition(entry.endedAt, entry.endedAtDay);
+  if (start === null || end === null) return notRun;
+
+  const actualDuration = end - start;
+  const delta = actualDuration - entry.scheduledDuration;
+  if (Math.abs(delta) < MILLIS_PER_SECOND) return { actualDuration, delta, status: 'ontime' };
+  return { actualDuration, delta, status: delta > 0 ? 'over' : 'under' };
+}
@@ -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;
@@ -1,7 +0,0 @@
-th.over {
-  color: $playback-over;
-}
-
-th.under {
-  color: $playback-under;
-}
@@ -1,103 +1,92 @@
+import { isOntimeEvent } from 'ontime-types';
 import { useMemo } from 'react';
-import { IoTrashBin } from 'react-icons/io5';
+import { IoDownloadOutline, IoTrashBin } from 'react-icons/io5';

 import { deleteAllReport } from '../../../../common/api/report';
 import { createBlob, downloadBlob } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import useReport from '../../../../common/hooks-query/useReport';
-import useRundown from '../../../../common/hooks-query/useRundown';
-import { cx } from '../../../../common/utils/styleUtils';
-import { formatTime } from '../../../../common/utils/time';
 import * as Panel from '../../panel-utils/PanelUtils';
-import { CombinedReport, getCombinedReport, makeReportCSV } from './reportSettings.utils';
-
-import style from './ReportSettings.module.scss';
+import ReportShowSummary from './composite/ReportShowSummary';
+import ReportTable from './composite/ReportTable';
+import { getCombinedReport, getGroupReports, getRunSummary, makeReportCSV } from './reportSettings.utils';

 export default function ReportSettings() {
-  const { data: reportData } = useReport();
-  const { data } = useRundown();
+  const { data: lastRun } = useReport();
+  const { eventReports, rundown, show } = lastRun;

-  const clearReport = async () => await deleteAllReport();
-  const downloadCSV = (combinedReport: CombinedReport[]) => {
-    if (!combinedReport) {
-      return;
+  const combinedReport = useMemo(
+    () => (rundown ? getCombinedReport(eventReports, rundown.entries, rundown.flatOrder) : []),
+    [eventReports, rundown],
+  );
+
+  const summary = useMemo(
+    () => getRunSummary(eventReports, rundown?.entries ?? {}, rundown?.flatOrder ?? []),
+    [eventReports, rundown],
+  );
+
+  const groups = useMemo(
+    () => (rundown ? getGroupReports(eventReports, rundown.entries, rundown.order) : []),
+    [eventReports, rundown],
+  );
+
+  let worstOverrunTitle: string | null = null;
+  if (summary.worstOverrun !== null) {
+    const entry = rundown?.entries[summary.worstOverrun.id];
+    if (entry && isOntimeEvent(entry)) {
+      worstOverrunTitle = entry.title;
    }
+  }
+
+  const hasReport = rundown !== null && Object.keys(eventReports).length > 0;
+  const downloadCSV = () => {
+    if (!hasReport) return;
+
    const csv = makeReportCSV(combinedReport);
    const blob = createBlob(csv, 'text/csv;charset=utf-8;');
    downloadBlob(blob, 'ontime-report.csv');
  };

-  const combinedReport = useMemo(() => {
-    return getCombinedReport(reportData, data.entries, data.flatOrder);
-  }, [reportData, data.entries, data.flatOrder]);
-
  return (
    <Panel.Section>
      <Panel.Card>
-        <Panel.SubHeader>Report</Panel.SubHeader>
+        <Panel.SubHeader>
+          Report
+          <Panel.InlineElements>
+            <Button onClick={downloadCSV} disabled={!hasReport}>
+              <IoDownloadOutline />
+              Export CSV
+            </Button>
+            <Button variant='subtle-destructive' onClick={deleteAllReport} disabled={!hasReport}>
+              <IoTrashBin />
+              Clear All
+            </Button>
+          </Panel.InlineElements>
+        </Panel.SubHeader>
        <Panel.Divider />
-        <Panel.Section>
-          <Panel.Title>
-            Manage report
-            <Panel.InlineElements>
-              <Button onClick={() => downloadCSV(combinedReport)} disabled={combinedReport.length === 0}>
-                <IoTrashBin />
-                Export CSV
-              </Button>
-              <Button variant='subtle-destructive' onClick={clearReport} disabled={combinedReport.length === 0}>
-                <IoTrashBin />
-                Clear All
-              </Button>
-            </Panel.InlineElements>
-          </Panel.Title>
-        </Panel.Section>
-        <Panel.Section>
-          <Panel.Table>
-            <thead>
-              <tr>
-                <th>#</th>
-                <th>Cue</th>
-                <th>Title</th>
-                <th>Scheduled Start</th>
-                <th>Actual Start</th>
-                <th>Scheduled End</th>
-                <th>Actual End</th>
-              </tr>
-            </thead>
-            <tbody>
-              {combinedReport.length === 0 && (
-                <Panel.TableEmpty
-                  title='No report data yet'
-                  description='Reports are generated as you run through the show, comparing scheduled times against what actually happened.'
-                />
-              )}

-              {combinedReport.map((entry) => {
-                const start = (() => {
-                  if (entry.actualStart === null) return null;
-                  if (entry.actualStart <= entry.scheduledStart) return 'under';
-                  return 'over';
-                })();
-                const end = (() => {
-                  if (entry.actualEnd === null) return null;
-                  if (entry.actualEnd <= entry.scheduledEnd) return 'under';
-                  return 'over';
-                })();
-                return (
-                  <tr key={entry.id}>
-                    <th>{entry.index}</th>
-                    <th>{entry.cue}</th>
-                    <th>{entry.title}</th>
-                    <th className={cx([start && style[start]])}>{formatTime(entry.scheduledStart)}</th>
-                    <th className={cx([start && style[start]])}>{formatTime(entry.actualStart)}</th>
-                    <th className={cx([end && style[end]])}>{formatTime(entry.scheduledEnd)}</th>
-                    <th className={cx([end && style[end]])}>{formatTime(entry.actualEnd)}</th>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </Panel.Table>
-        </Panel.Section>
+        {!hasReport ? (
+          <Panel.Section>
+            <Panel.EmptyState
+              title='No report yet'
+              description='Ontime records what actually happened as you run the show, and compares it against the schedule as it stood at the time. Start an event and this fills in.'
+            />
+          </Panel.Section>
+        ) : (
+          <>
+            <Panel.Section>
+              <ReportShowSummary
+                rundownTitle={rundown.title}
+                show={show}
+                summary={summary}
+                worstOverrunTitle={worstOverrunTitle}
+              />
+            </Panel.Section>
+            <Panel.Section>
+              <ReportTable rows={combinedReport} groups={groups} />
+            </Panel.Section>
+          </>
+        )}
      </Panel.Card>
    </Panel.Section>
  );
@@ -0,0 +1,161 @@
+import type { OntimeEventReport, OntimeReport } from 'ontime-types';
+import {
+  createDelay,
+  createEvent,
+  createGroup,
+  dayInMs,
+  MILLIS_PER_HOUR,
+  MILLIS_PER_MINUTE,
+  MILLIS_PER_SECOND,
+} from 'ontime-utils';
+
+import {
+  formatOffset,
+  getCombinedReport,
+  getGroupReports,
+  getRunSummary,
+  getShowOffsets,
+  makeReportCSV,
+} from '../reportSettings.utils';
+
+function makeEvent(id: string, patch = {}) {
+  const event = createEvent({ id, title: id, ...patch });
+  if (!event) throw new Error('Failed to create test event');
+  return event;
+}
+
+function makeReport(patch: Partial<OntimeEventReport> = {}): OntimeEventReport {
+  return {
+    startedAt: 5 * MILLIS_PER_MINUTE,
+    startedAtDay: 1,
+    endedAt: 15 * MILLIS_PER_MINUTE,
+    endedAtDay: 1,
+    scheduledStart: dayInMs - 5 * MILLIS_PER_MINUTE,
+    scheduledDay: 0,
+    scheduledDuration: 10 * MILLIS_PER_MINUTE,
+    ...patch,
+  };
+}
+
+describe('getCombinedReport()', () => {
+  it('uses the captured schedule and absolute day when calculating offsets', () => {
+    const entry = makeEvent('a', { timeStart: 0, duration: 99 * MILLIS_PER_MINUTE });
+    const rows = getCombinedReport({ a: makeReport() }, { a: entry }, ['a']);
+
+    expect(rows[0]).toMatchObject({
+      scheduledStart: dayInMs - 5 * MILLIS_PER_MINUTE,
+      scheduledEnd: dayInMs + 5 * MILLIS_PER_MINUTE,
+      startOffset: 10 * MILLIS_PER_MINUTE,
+      endOffset: 10 * MILLIS_PER_MINUTE,
+    });
+  });
+
+  it('includes unplayed events but excludes skipped and non-event entries', () => {
+    const ran = makeEvent('ran');
+    const unplayed = makeEvent('unplayed', { timeStart: 20 * MILLIS_PER_MINUTE });
+    const skipped = makeEvent('skipped', { skip: true });
+    const delay = createDelay({ id: 'delay' });
+    const report: OntimeReport = { ran: makeReport({ scheduledStart: 0, scheduledDay: 0 }) };
+
+    const rows = getCombinedReport(report, { ran, unplayed, skipped, delay }, ['ran', 'unplayed', 'skipped', 'delay']);
+
+    expect(rows.map(({ id }) => id)).toEqual(['ran', 'unplayed']);
+    expect(rows[1]).toMatchObject({ scheduledStart: unplayed.timeStart, actualStart: null, actualEnd: null });
+  });
+});
+
+describe('report calculations', () => {
+  it('keeps finishing time separate from running time', () => {
+    const offsets = getShowOffsets({
+      plannedStart: 19 * MILLIS_PER_HOUR,
+      plannedEnd: 21 * MILLIS_PER_HOUR,
+      plannedDuration: 2 * MILLIS_PER_HOUR,
+      actualStart: 19 * MILLIS_PER_HOUR - 10 * MILLIS_PER_MINUTE,
+      actualEnd: 21 * MILLIS_PER_HOUR - 6 * MILLIS_PER_MINUTE,
+      actualDuration: 2 * MILLIS_PER_HOUR + 4 * MILLIS_PER_MINUTE,
+    });
+
+    expect(offsets).toMatchObject({
+      startOffset: -10 * MILLIS_PER_MINUTE,
+      endOffset: -6 * MILLIS_PER_MINUTE,
+      durationOffset: 4 * MILLIS_PER_MINUTE,
+    });
+  });
+
+  it('measures completed groups against their target and exposes untimed gaps', () => {
+    const group = createGroup({ id: 'group', entries: ['a', 'b'], targetDuration: 30 * MILLIS_PER_MINUTE });
+    const entries = {
+      group,
+      a: makeEvent('a', { parent: group.id, duration: 10 * MILLIS_PER_MINUTE }),
+      b: makeEvent('b', { parent: group.id, duration: 10 * MILLIS_PER_MINUTE }),
+    };
+    const report: OntimeReport = {
+      a: makeReport({ startedAt: 0, startedAtDay: 0, endedAt: 10 * MILLIS_PER_MINUTE, endedAtDay: 0 }),
+      b: makeReport({
+        startedAt: 15 * MILLIS_PER_MINUTE,
+        startedAtDay: 0,
+        endedAt: 25 * MILLIS_PER_MINUTE,
+        endedAtDay: 0,
+      }),
+    };
+
+    expect(getGroupReports(report, entries, [group.id])[0]).toMatchObject({
+      elapsed: 25 * MILLIS_PER_MINUTE,
+      untimed: 5 * MILLIS_PER_MINUTE,
+      variance: -5 * MILLIS_PER_MINUTE,
+      eventsRun: 2,
+      eventsPlanned: 2,
+    });
+    expect(getGroupReports({ a: report.a }, entries, [group.id])[0].variance).toBeNull();
+  });
+
+  it('summarises completed events and excludes skipped events from the plan', () => {
+    const entries = { a: makeEvent('a'), b: makeEvent('b', { skip: true }) };
+    const report = {
+      a: makeReport({ startedAt: 0, startedAtDay: 0, endedAt: 15 * MILLIS_PER_MINUTE, endedAtDay: 0 }),
+      b: makeReport({ startedAt: 0, startedAtDay: 0, endedAt: 30 * MILLIS_PER_MINUTE, endedAtDay: 0 }),
+    };
+
+    expect(getRunSummary(report, entries, ['a', 'b'])).toEqual({
+      eventsRun: 2,
+      eventsPlanned: 1,
+      worstOverrun: { id: 'b', delta: 20 * MILLIS_PER_MINUTE },
+    });
+  });
+});
+
+describe('report formatting', () => {
+  it.each([
+    [null, '–'],
+    [MILLIS_PER_SECOND / 2, 'On time'],
+    [4 * MILLIS_PER_MINUTE + 12 * MILLIS_PER_SECOND, '+4m12s'],
+    [-MILLIS_PER_MINUTE, '-1m'],
+  ])('formats offset %s', (value, expected) => {
+    expect(formatOffset(value)).toBe(expected);
+  });
+
+  it('exports group context and leaves missing actual times empty', () => {
+    const csv = makeReportCSV([
+      {
+        id: 'a',
+        index: 1,
+        title: 'Welcome',
+        cue: '1',
+        parent: 'act1',
+        groupTitle: 'Act 1',
+        scheduledStart: 0,
+        scheduledEnd: 10 * MILLIS_PER_MINUTE,
+        actualStart: null,
+        startOffset: null,
+        actualEnd: null,
+        endOffset: null,
+      },
+    ]);
+
+    const fields = csv.trim().split('\n')[1].split(',');
+    expect(csv).toContain('Group');
+    expect(fields[1]).toBe('Act 1');
+    expect(fields[5]).toBe('');
+    expect(fields[7]).toBe('');
+  });
+});
@@ -0,0 +1,138 @@
+// Panel.Table nests its own padding inside the section it sits in, so the
+// summary takes the same inset to keep one left edge down the whole panel
+.inset {
+  padding: 0 var(--panel-card-padding, 2rem);
+}
+
+.summary {
+  padding: 1.25rem;
+  background-color: $gray-1200;
+  border-radius: 3px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.title {
+  margin: 0;
+  color: $ui-white;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.body {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem 2.5rem;
+}
+
+.headline {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.headlineLabel,
+.metricLabel {
+  color: $gray-300;
+  font-size: calc(1rem - 2px);
+}
+
+.headlineValue {
+  font-size: 1.75rem;
+  font-weight: 600;
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+
+.unavailable {
+  max-width: 32rem;
+  color: $warning-orange;
+  font-size: calc(1rem - 2px);
+  line-height: 1.4;
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  align-items: baseline;
+  gap: 0.375rem 1.5rem;
+  margin: 0;
+}
+
+.metricValue,
+.metricOffset {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.metricValue {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.planned,
+.arrow {
+  color: $gray-300;
+}
+
+.actual {
+  color: $ui-white;
+  font-weight: 600;
+}
+
+.metricOffset {
+  justify-self: end;
+  font-weight: 600;
+}
+
+.over {
+  color: $playback-over;
+}
+
+.under {
+  color: $playback-under;
+}
+
+.none {
+  color: $gray-300;
+}
+
+.footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+
+  padding-top: 0.875rem;
+  border-top: 1px solid $white-10;
+
+  color: $gray-300;
+  font-size: calc(1rem - 2px);
+}
+
+.footerItem {
+  white-space: nowrap;
+
+  & + &::before {
+    content: '·';
+    margin-right: 0.75rem;
+    color: $gray-500;
+  }
+
+  b {
+    color: $ui-white;
+    font-weight: 600;
+  }
+}
+
+.overrun {
+  color: $playback-over;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
@@ -0,0 +1,130 @@
+import type { MaybeNumber, ShowReport } from 'ontime-types';
+
+import { cx, enDash } from '../../../../../common/utils/styleUtils';
+import { formatDuration, formatTime } from '../../../../../common/utils/time';
+import { formatOffset, getShowOffsets, offsetTone } from '../reportSettings.utils';
+import type { RunSummary } from '../reportSettings.utils';
+
+import style from './ReportShowSummary.module.scss';
+
+interface ReportShowSummaryProps {
+  rundownTitle: string;
+  show: ShowReport;
+  summary: RunSummary;
+  worstOverrunTitle: string | null;
+}
+
+/**
+ * Leads the report with whether the show ran to the length it was planned for.
+ *
+ * Running time is the headline rather than finishing time because it is the
+ * part the team controls and the part that carries into the next run of the
+ * same rundown. Finishing time is the other question a report is asked, and
+ * the two can point opposite ways, so it stays beside it as its own row
+ * rather than being folded into a single figure.
+ */
+export default function ReportShowSummary({ rundownTitle, show, summary, worstOverrunTitle }: ReportShowSummaryProps) {
+  const offsets = getShowOffsets(show);
+
+  /**
+   * A show that stopped early has no meaningful end: its last event is simply
+   * where it got to. Measuring that against the plan would report a show which
+   * never finished as having come in comfortably short.
+   */
+  const didReachEnd = summary.eventsRun > 0 && summary.eventsRun === summary.eventsPlanned;
+  const hasPlan = offsets.startOffset !== null;
+
+  return (
+    <div className={style.inset}>
+      <section className={style.summary} aria-labelledby='report-summary-title'>
+        <h4 id='report-summary-title' className={style.title}>
+          {rundownTitle || 'Untitled rundown'}
+        </h4>
+
+        <div className={style.body}>
+          <div className={style.headline}>
+            <span className={style.headlineLabel}>{didReachEnd ? 'Against planned duration' : 'Show incomplete'}</span>
+            {didReachEnd && offsets.durationOffset !== null ? (
+              <span className={cx([style.headlineValue, style[offsetTone(offsets.durationOffset)]])}>
+                {formatOffset(offsets.durationOffset)}
+              </span>
+            ) : (
+              <span className={style.unavailable}>
+                The show did not reach the end of the rundown, so there is nothing to measure it against.
+              </span>
+            )}
+          </div>
+
+          <dl className={style.metrics}>
+            {hasPlan && (
+              <Metric
+                label='Started'
+                planned={formatMaybeTime(show.plannedStart)}
+                actual={formatMaybeTime(show.actualStart)}
+                offset={offsets.startOffset}
+              />
+            )}
+            {hasPlan && didReachEnd && (
+              <Metric
+                label='Ended'
+                planned={formatMaybeTime(show.plannedEnd)}
+                actual={formatMaybeTime(show.actualEnd)}
+                offset={offsets.endOffset}
+              />
+            )}
+            {didReachEnd && (
+              <Metric
+                label='Duration'
+                planned={formatMaybeDuration(offsets.plannedDuration)}
+                actual={formatMaybeDuration(offsets.actualDuration)}
+              />
+            )}
+          </dl>
+        </div>
+
+        {summary.worstOverrun !== null && (
+          <div className={style.footer}>
+            <span className={style.footerItem}>
+              longest overrun <b>{worstOverrunTitle || 'an event'}</b>{' '}
+              <span className={style.overrun}>+{formatDuration(summary.worstOverrun.delta, false)}</span>
+            </span>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+function Metric({
+  label,
+  planned,
+  actual,
+  offset,
+}: {
+  label: string;
+  planned: string;
+  actual: string;
+  offset?: MaybeNumber;
+}) {
+  return (
+    <>
+      <dt className={style.metricLabel}>{label}</dt>
+      <dd className={style.metricValue}>
+        <span className={style.planned}>{planned}</span>
+        <span className={style.arrow}>→</span>
+        <span className={style.actual}>{actual}</span>
+      </dd>
+      <dd className={cx([style.metricOffset, offset !== undefined && style[offsetTone(offset)]])}>
+        {offset === undefined ? '' : formatOffset(offset)}
+      </dd>
+    </>
+  );
+}
+
+function formatMaybeTime(value: MaybeNumber): string {
+  return value === null ? enDash : formatTime(value);
+}
+
+function formatMaybeDuration(value: MaybeNumber): string {
+  return value === null ? enDash : formatDuration(value, false);
+}
@@ -0,0 +1,160 @@
+$rail: var(--user-bg, #{$gray-500});
+$event-wash: var(--event-bg, transparent);
+
+// event rows carry their values in td, not th: the panel's th styling is meant
+// for column headings and renders whatever it holds small, bold and upper case
+td.over {
+  color: $playback-over;
+}
+
+td.under {
+  color: $playback-under;
+}
+
+.eventRow td {
+  background-color: color-mix(in srgb, #{$gray-1300} 96%, #{$event-wash} 4%);
+}
+
+.groupedRow td:first-child {
+  box-shadow: inset 2px 0 $rail;
+  // clear the rail rather than sitting against it
+  padding-left: 0.75rem;
+}
+
+.groupRow > * {
+  background-color: color-mix(in srgb, #{$gray-1300} 88%, #{$rail} 12%);
+  vertical-align: top;
+}
+
+.groupSpacer {
+  height: 0.75rem;
+  background: transparent !important;
+
+  td {
+    height: 0.75rem;
+    padding: 0;
+    background: transparent !important;
+  }
+}
+
+.groupSummary {
+  padding: 0.875rem 1rem;
+  box-shadow: inset 4px 0 $rail;
+
+  text-align: left;
+  text-transform: none;
+  letter-spacing: normal;
+
+  > * {
+    text-transform: none;
+  }
+}
+
+.groupTitle,
+.groupLabel,
+.groupValues,
+.groupFooter {
+  display: block;
+}
+
+.groupTitle {
+  color: $ui-white;
+  font-size: 1rem;
+  font-weight: 600;
+  text-transform: none;
+}
+
+.groupBody {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.75rem 2.5rem;
+  margin-top: 0.75rem;
+}
+
+.groupHeadline {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.groupLabel,
+.groupMetrics dt,
+.groupFooter {
+  color: $gray-400;
+  font-size: calc(1rem - 3px);
+  font-weight: 400;
+}
+
+.groupHeadlineValue {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+
+.groupMetrics {
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: baseline;
+  gap: 0.375rem 1.5rem;
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.groupMetrics dd {
+  margin: 0;
+}
+
+.groupValues {
+  display: flex;
+  gap: 0.5rem;
+  color: $gray-300;
+
+  b {
+    color: $ui-white;
+    font-weight: 600;
+  }
+}
+
+.groupFooter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid $white-10;
+
+  b {
+    color: $ui-white;
+    font-weight: 600;
+  }
+}
+
+.unavailable {
+  color: $gray-400;
+  font-size: calc(1rem - 3px);
+  font-weight: 400;
+}
+
+.arrow {
+  color: $gray-500;
+}
+
+.over {
+  color: $playback-over;
+}
+
+.under {
+  color: $playback-under;
+}
+
+.none {
+  color: $ui-white;
+}
+
+.eventCue,
+.eventIndex {
+  color: $gray-300;
+}
@@ -0,0 +1,193 @@
+import type { EntryId } from 'ontime-types';
+import { useMemo } from 'react';
+
+import Tooltip from '../../../../../common/components/tooltip/Tooltip';
+import { cx, enDash } from '../../../../../common/utils/styleUtils';
+import { formatDuration, formatTime } from '../../../../../common/utils/time';
+import * as Panel from '../../../panel-utils/PanelUtils';
+import { formatOffset, offsetTone } from '../reportSettings.utils';
+import type { CombinedReport, GroupReport } from '../reportSettings.utils';
+
+import style from './ReportTable.module.scss';
+
+interface ReportTableProps {
+  rows: CombinedReport[];
+  groups: GroupReport[];
+}
+
+type ReportColourStyle = React.CSSProperties & Partial<Record<'--event-bg' | '--user-bg', string | undefined>>;
+
+/**
+ * The report laid out the way the show was planned: blocks, then the events
+ * inside them. Each block carries how it ran against the budget set for it.
+ */
+export default function ReportTable({ rows, groups }: ReportTableProps) {
+  // groups are rendered where their first event appears, so the table follows
+  // the rundown rather than a separate ordering
+  const sections = useMemo(() => makeSections(rows, groups), [rows, groups]);
+
+  return (
+    <Panel.Table>
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Cue</th>
+          <th>Title</th>
+          <th>Scheduled Start</th>
+          <th>Actual Start</th>
+          <th>Scheduled End</th>
+          <th>Actual End</th>
+        </tr>
+      </thead>
+      {sections.map((section, index) => (
+        <tbody key={section.key}>
+          {section.group && index > 0 && <GroupSpacer />}
+          {section.group && <GroupRow group={section.group} />}
+          {section.rows.map((entry) => (
+            <EventRow
+              key={entry.id}
+              entry={entry}
+              groupColour={section.group?.colour}
+              grouped={section.group !== null}
+            />
+          ))}
+        </tbody>
+      ))}
+    </Panel.Table>
+  );
+}
+
+function GroupSpacer() {
+  return (
+    <tr aria-hidden='true' className={style.groupSpacer}>
+      <td colSpan={7} />
+    </tr>
+  );
+}
+
+/**
+ * A group read the same way as the show above it: what it was measured
+ * against, what it actually did, and how much of it ran.
+ */
+function GroupRow({ group }: { group: GroupReport }) {
+  const hasTarget = group.targetDuration !== null;
+  const measuredAgainst = group.targetDuration ?? group.scheduledDuration;
+  const unavailableReason = group.eventsRun === 0 ? 'Did not run' : 'Still running';
+
+  return (
+    <tr className={style.groupRow} style={groupColourStyle(group.colour)}>
+      <th scope='rowgroup' colSpan={7} className={style.groupSummary}>
+        <span className={style.groupTitle}>{group.title || 'Untitled group'}</span>
+        <div className={style.groupBody}>
+          <div className={style.groupHeadline}>
+            <span className={style.groupLabel}>{hasTarget ? 'Against target' : 'Against schedule'}</span>
+            {group.variance === null ? (
+              <span className={style.unavailable}>{unavailableReason}</span>
+            ) : (
+              <span className={cx([style.groupHeadlineValue, style[offsetTone(group.variance)]])}>
+                {formatOffset(group.variance)}
+              </span>
+            )}
+          </div>
+          <dl className={style.groupMetrics}>
+            <dt>{hasTarget ? 'Target' : 'Scheduled'}</dt>
+            <dd className={style.groupValues}>
+              <span>{formatDuration(measuredAgainst, false)}</span>
+              <span className={style.arrow}>→</span>
+              <b>{group.elapsed === null ? enDash : formatDuration(group.elapsed, false)}</b>
+            </dd>
+            {group.actualStart !== null && group.actualEnd !== null && (
+              <>
+                <dt>Ran</dt>
+                <dd className={style.groupValues}>
+                  <span>{formatTime(group.actualStart)}</span>
+                  <span className={style.arrow}>→</span>
+                  <b>{formatTime(group.actualEnd)}</b>
+                </dd>
+              </>
+            )}
+          </dl>
+        </div>
+        {group.untimed !== null && group.untimed > 0 && (
+          <span className={style.groupFooter}>
+            <Tooltip
+              text='Time inside this group with no event running. It covers anything the timer did not: changeovers, a late start on an event, or an item run without a timer at all.'
+              render={<span />}
+            >
+              <b>{formatDuration(group.untimed, false)}</b> untimed
+            </Tooltip>
+          </span>
+        )}
+      </th>
+    </tr>
+  );
+}
+
+function EventRow({ entry, groupColour, grouped }: { entry: CombinedReport; groupColour?: string; grouped: boolean }) {
+  const start = offsetTone(entry.startOffset);
+  const end = offsetTone(entry.endOffset);
+
+  return (
+    <tr className={cx([style.eventRow, grouped && style.groupedRow])} style={eventColours(entry.colour, groupColour)}>
+      <td className={style.eventIndex}>{entry.index}</td>
+      <td className={style.eventCue}>{entry.cue}</td>
+      <td>{entry.title}</td>
+      <td>{formatTime(entry.scheduledStart)}</td>
+      <td className={cx([start && style[start]])}>{formatTime(entry.actualStart)}</td>
+      <td>{formatTime(entry.scheduledEnd)}</td>
+      <td className={cx([end && style[end]])}>{formatTime(entry.actualEnd)}</td>
+    </tr>
+  );
+}
+
+/**
+ * Uses the cuesheet's custom property for group colour. Left unset when the
+ * group has none so the stylesheet can provide a neutral edge.
+ */
+function groupColourStyle(colour?: string): ReportColourStyle {
+  const style: ReportColourStyle = {};
+  if (colour) style['--user-bg'] = colour;
+  return style;
+}
+
+/** Keeps the event wash distinct from its parent group's identifying rail. */
+function eventColours(eventColour: string, groupColour?: string): ReportColourStyle {
+  const style: ReportColourStyle = {};
+  if (eventColour) style['--event-bg'] = eventColour;
+  if (groupColour) style['--user-bg'] = groupColour;
+  return style;
+}
+
+type Section = {
+  key: string;
+  group: GroupReport | null;
+  rows: CombinedReport[];
+};
+
+/**
+ * Splits the rows into the blocks they belong to, keeping rundown order and
+ * leaving ungrouped events in their own run of rows.
+ */
+function makeSections(rows: CombinedReport[], groups: GroupReport[]): Section[] {
+  const byId = new Map<EntryId, GroupReport>(groups.map((group) => [group.id, group]));
+  const sections: Section[] = [];
+  let current: Section | null = null;
+
+  let currentParent: EntryId | null | undefined;
+
+  for (const row of rows) {
+    if (current === null || row.parent !== currentParent) {
+      currentParent = row.parent;
+      // index keeps the key unique even if a group were to appear twice
+      current = {
+        key: `${row.parent ?? 'ungrouped'}-${sections.length}`,
+        group: row.parent ? (byId.get(row.parent) ?? null) : null,
+        rows: [],
+      };
+      sections.push(current);
+    }
+    current.rows.push(row);
+  }
+
+  return sections;
+}
@@ -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,89 +1,262 @@
-import { EntryId, MaybeNumber, OntimeReport, RundownEntries, isOntimeEvent } from 'ontime-types';
+import type { EntryId, MaybeNumber, OntimeGroup, OntimeReport, RundownEntries, ShowReport } from 'ontime-types';
+import { isOntimeEvent, isOntimeGroup } from 'ontime-types';
+import { dayInMs, MILLIS_PER_SECOND } from 'ontime-utils';

 import { makeCSVFromArrayOfArrays } from '../../../../common/utils/csv';
-import { formatTime } from '../../../../common/utils/time';
+import { getEventVariance, getReportTimePosition } from '../../../../common/utils/report';
+import { enDash } from '../../../../common/utils/styleUtils';
+import { formatDuration, formatTime } from '../../../../common/utils/time';

 export type CombinedReport = {
  id: EntryId;
  index: number;
  title: string;
  cue: string;
+  colour: string;
+  /** the group this event belongs to, so the report can mirror the rundown */
+  parent: EntryId | null;
+  groupTitle: string;
  scheduledStart: number;
  actualStart: MaybeNumber;
+  startOffset: MaybeNumber;
  scheduledEnd: number;
  actualEnd: MaybeNumber;
+  endOffset: MaybeNumber;
+};
+
+export type ShowOffsets = {
+  startOffset: MaybeNumber;
+  endOffset: MaybeNumber;
+  plannedDuration: MaybeNumber;
+  actualDuration: MaybeNumber;
+  durationOffset: MaybeNumber;
+};
+
+export type GroupReport = {
+  id: EntryId;
+  title: string;
+  colour: string;
+  targetDuration: MaybeNumber;
+  scheduledDuration: number;
+  actualStart: MaybeNumber;
+  actualEnd: MaybeNumber;
+  elapsed: MaybeNumber;
+  untimed: MaybeNumber;
+  variance: MaybeNumber;
+  eventsRun: number;
+  eventsPlanned: number;
+};
+
+export type RunSummary = {
+  eventsRun: number;
+  eventsPlanned: number;
+  worstOverrun: { id: EntryId; delta: number } | null;
 };

 /**
- * Creates a combined report with the rundown data
+ * Creates a combined report with the rundown data.
+ *
+ * Events that ran are measured against the schedule recorded at the time,
+ * not the rundown's current values, so editing the rundown afterwards does
+ * not change how a show that already happened is reported. Events that never
+ * ran have no snapshot and fall back to the rundown.
 */
 export function getCombinedReport(
  report: OntimeReport,
  rundown: RundownEntries,
  flatOrder: EntryId[],
 ): CombinedReport[] {
-  if (Object.keys(report).length === 0) return [];
-  if (flatOrder.length === 0) return [];
+  if (Object.keys(report).length === 0 || flatOrder.length === 0) return [];

  const combinedReport: CombinedReport[] = [];

  let index = 1;
-  for (let i = 0; i < flatOrder.length; i++) {
-    const id = flatOrder[i];
+  for (const id of flatOrder) {
    const entry = rundown[id];
-    if (!entry || !isOntimeEvent(entry)) continue;
+    // skipped events were never meant to run, listing them alongside events
+    // that did would also disagree with the summary, which excludes them
+    if (!entry || !isOntimeEvent(entry) || entry.skip) continue;

-    if (!(id in report)) {
-      combinedReport.push({
-        id: id,
-        index: index,
-        title: entry.title,
-        cue: entry.cue,
-        scheduledStart: entry.timeStart,
-        actualEnd: null,
-        scheduledEnd: entry.timeEnd,
-        actualStart: null,
-      });
-    }
+    const parent = entry.parent;
+    const group = parent ? rundown[parent] : undefined;
+    const reported = report[id];
+    const scheduledStart = reported?.scheduledStart ?? entry.timeStart;
+    const scheduledDay = reported?.scheduledDay ?? entry.dayOffset;
+    const scheduledStartPosition = getReportTimePosition(scheduledStart, scheduledDay);
+    const actualStartPosition = reported ? getReportTimePosition(reported.startedAt, reported.startedAtDay) : null;
+    const actualEndPosition = reported ? getReportTimePosition(reported.endedAt, reported.endedAtDay) : null;
+    const scheduledDuration = reported?.scheduledDuration ?? entry.duration;

-    if (id in report) {
-      combinedReport.push({
-        id: id,
-        index: index,
-        title: entry.title,
-        cue: entry.cue,
-        scheduledStart: entry.timeStart,
-        actualEnd: report[id].endedAt,
-        scheduledEnd: entry.timeEnd,
-        actualStart: report[id].startedAt,
-      });
-    }
+    combinedReport.push({
+      id,
+      index,
+      title: entry.title,
+      cue: entry.cue,
+      colour: entry.colour,
+      parent,
+      groupTitle: group && isOntimeGroup(group) ? group.title : '',
+      // an event that ran is measured against the plan it ran on, one that
+      // did not has no snapshot and falls back to the rundown
+      scheduledStart,
+      scheduledEnd: scheduledStart + scheduledDuration,
+      actualStart: reported?.startedAt ?? null,
+      startOffset: getOffset(actualStartPosition, scheduledStartPosition),
+      actualEnd: reported?.endedAt ?? null,
+      endOffset: getOffset(actualEndPosition, scheduledStartPosition + scheduledDuration),
+    });
    index++;
  }

  return combinedReport;
 }

-const csvHeader = ['Index', 'Title', 'Cue', 'Scheduled Start', 'Actual Start', 'Scheduled End', 'Actual End'];
+function getOffset(actual: MaybeNumber, scheduled: number): MaybeNumber {
+  return actual === null ? null : actual - scheduled;
+}

-/**
- * Transforms a CombinedReport into a CSV string
- */
-export function makeReportCSV(combinedReport: CombinedReport[]) {
-  const csv: string[][] = [];
-  csv.push(csvHeader);
+export function getShowOffsets(show: ShowReport): ShowOffsets {
+  const { plannedDuration, actualDuration } = show;
+  return {
+    startOffset: getWallClockOffset(show.plannedStart, show.actualStart),
+    endOffset: getWallClockOffset(show.plannedEnd, show.actualEnd),
+    plannedDuration,
+    actualDuration,
+    durationOffset: plannedDuration === null || actualDuration === null ? null : actualDuration - plannedDuration,
+  };
+}

-  for (const entry of combinedReport) {
-    csv.push([
-      String(entry.index),
-      entry.title,
-      entry.cue,
-      formatTime(entry.scheduledStart),
-      formatTime(entry.actualStart),
-      formatTime(entry.scheduledEnd),
-      formatTime(entry.actualEnd),
-    ]);
+function getWallClockOffset(planned: MaybeNumber, actual: MaybeNumber): MaybeNumber {
+  if (planned === null || actual === null) return null;
+
+  const offset = actual - planned;
+  if (offset < -dayInMs / 2) return offset + dayInMs;
+  if (offset > dayInMs / 2) return offset - dayInMs;
+  return offset;
+}
+
+export function getGroupReports(report: OntimeReport, entries: RundownEntries, order: EntryId[]): GroupReport[] {
+  const groups: GroupReport[] = [];
+  for (const id of order) {
+    const group = entries[id];
+    if (group && isOntimeGroup(group)) groups.push(getGroupReport(group, report, entries));
+  }
+  return groups;
+}
+
+function getGroupReport(group: OntimeGroup, report: OntimeReport, entries: RundownEntries): GroupReport {
+  let scheduledDuration = 0;
+  let eventsPlanned = 0;
+  let eventsRun = 0;
+  let ranDuration = 0;
+  let firstStart = Number.POSITIVE_INFINITY;
+  let lastEnd = Number.NEGATIVE_INFINITY;
+  let actualStart: MaybeNumber = null;
+  let actualEnd: MaybeNumber = null;
+
+  for (const childId of group.entries) {
+    const child = entries[childId];
+    if (!child || !isOntimeEvent(child) || child.skip) continue;
+
+    eventsPlanned += 1;
+    const reported = report[childId];
+    scheduledDuration += reported?.scheduledDuration ?? child.duration;
+
+    const variance = getEventVariance(reported);
+    if (variance.actualDuration === null || !reported) continue;
+
+    eventsRun += 1;
+    ranDuration += variance.actualDuration;
+    const start = getReportTimePosition(reported.startedAt, reported.startedAtDay);
+    const end = getReportTimePosition(reported.endedAt, reported.endedAtDay);
+    if (start !== null && start < firstStart) {
+      firstStart = start;
+      actualStart = reported.startedAt;
+    }
+    if (end !== null && end > lastEnd) {
+      lastEnd = end;
+      actualEnd = reported.endedAt;
+    }
  }

-  return makeCSVFromArrayOfArrays(csv);
+  const elapsed = actualStart === null || actualEnd === null ? null : lastEnd - firstStart;
+  const measuredAgainst = group.targetDuration ?? scheduledDuration;
+  const isComplete = eventsRun > 0 && eventsRun === eventsPlanned;
+
+  return {
+    id: group.id,
+    title: group.title,
+    colour: group.colour,
+    targetDuration: group.targetDuration,
+    scheduledDuration,
+    actualStart,
+    actualEnd,
+    elapsed,
+    untimed: elapsed === null ? null : Math.max(0, elapsed - ranDuration),
+    variance: elapsed === null || !isComplete ? null : elapsed - measuredAgainst,
+    eventsRun,
+    eventsPlanned,
+  };
+}
+
+export function getRunSummary(report: OntimeReport, entries: RundownEntries, order: EntryId[]): RunSummary {
+  const eventsPlanned = order.filter((id) => {
+    const entry = entries[id];
+    return entry && isOntimeEvent(entry) && !entry.skip;
+  }).length;
+  const summary: RunSummary = { eventsRun: 0, eventsPlanned, worstOverrun: null };
+  for (const [id, entry] of Object.entries(report)) {
+    const variance = getEventVariance(entry);
+    if (variance.status === 'not-run') continue;
+
+    summary.eventsRun += 1;
+    if (variance.status === 'over' && (summary.worstOverrun?.delta ?? 0) < variance.delta) {
+      summary.worstOverrun = { id, delta: variance.delta };
+    }
+  }
+  return summary;
+}
+
+/**
+ * Signed offset, eg "+4m12s" / "-1m", following Ontime's convention that
+ * positive means behind schedule.
+ */
+export function formatOffset(value: MaybeNumber): string {
+  if (value === null) return enDash;
+  if (Math.abs(value) < MILLIS_PER_SECOND) return 'On time';
+  return `${value > 0 ? '+' : '-'}${formatDuration(Math.abs(value), false)}`;
+}
+
+/** Whether an offset is behind, ahead, or neither, for colouring */
+export function offsetTone(value: MaybeNumber): 'over' | 'under' | 'none' {
+  if (value === null || Math.abs(value) < MILLIS_PER_SECOND) return 'none';
+  return value > 0 ? 'over' : 'under';
+}
+
+function formatCsvTime(value: MaybeNumber): string {
+  return value === null ? '' : formatTime(value);
+}
+
+const csvHeader = ['Index', 'Group', 'Cue', 'Title', 'Scheduled Start', 'Actual Start', 'Scheduled End', 'Actual End'];
+
+/**
+ * Transforms a CombinedReport into a CSV string.
+ *
+ * Exported as one row per event with its group named, rather than with
+ * rollups baked in, so it stays the dataset a report is built from.
+ */
+export function makeReportCSV(combinedReport: CombinedReport[]) {
+  const csv = combinedReport.map((entry) => [
+    String(entry.index),
+    entry.groupTitle,
+    entry.cue,
+    entry.title,
+    formatTime(entry.scheduledStart),
+    // an event that never ran leaves the cell empty rather than a
+    // placeholder, so a spreadsheet reads it as missing
+    formatCsvTime(entry.actualStart),
+    formatTime(entry.scheduledEnd),
+    formatCsvTime(entry.actualEnd),
+  ]);
+
+  return makeCSVFromArrayOfArrays([csvHeader, ...csv]);
 }
@@ -99,7 +99,7 @@ function RunningStatus({ startedAt, expectedFinish, isStopped, isCountToEnd, isO

 function StoppedStatus() {
  const { data } = useReport();
-  const hasReport = Object.keys(data).length > 0;
+  const hasReport = Object.keys(data.eventReports).length > 0;

  if (hasReport) {
    return <AppLink search='settings=sharing__report'>Go to report management</AppLink>;
@@ -141,7 +141,6 @@ function RundownEventInner({
          isPast={isPast}
          isLoaded={loaded}
          totalGap={totalGap}
-          duration={duration}
        />
      )}
      <div className={style.statusElements} id='entry-status' data-timertype={timerType}>
@@ -6,6 +6,7 @@ import { IoCheckmarkCircle } from 'react-icons/io5';
 import Tooltip from '../../../../common/components/tooltip/Tooltip';
 import useReport from '../../../../common/hooks-query/useReport';
 import { usePlayback } from '../../../../common/hooks/useSocket';
+import { getEventVariance } from '../../../../common/utils/report';
 import { cx } from '../../../../common/utils/styleUtils';
 import { formatDuration, useTimeUntilExpectedStart } from '../../../../common/utils/time';

@@ -20,7 +21,6 @@ interface RundownEventChipProps {
  isLoaded: boolean;
  className: string;
  totalGap: number;
-  duration: number;
  isLinkedToLoaded: boolean;
 }

@@ -33,7 +33,6 @@ export default function RundownEventChip({
  className,
  totalGap,
  id,
-  duration,
  isLinkedToLoaded,
 }: RundownEventChipProps) {
  const playback = usePlayback();
@@ -45,25 +44,20 @@ export default function RundownEventChip({
  const playbackActive = isPlaybackActive(playback);

  if (!playbackActive || isPast) {
-    return <EventReport className={className} id={id} duration={duration} />;
+    return <EventReport className={className} id={id} />;
  }

-  if (playbackActive) {
-    // we extracted the component to avoid unnecessary calculations and re-renders
-    return (
-      <Tooltip text='Expected time until start' render={<span />} className={className}>
-        <EventUntil
-          timeStart={timeStart}
-          delay={delay}
-          dayOffset={dayOffset}
-          totalGap={totalGap}
-          isLinkedToLoaded={isLinkedToLoaded}
-        />
-      </Tooltip>
-    );
-  }
-
-  return null;
+  return (
+    <Tooltip text='Expected time until start' render={<span />} className={className}>
+      <EventUntil
+        timeStart={timeStart}
+        delay={delay}
+        dayOffset={dayOffset}
+        totalGap={totalGap}
+        isLinkedToLoaded={isLinkedToLoaded}
+      />
+    </Tooltip>
+  );
 }

 interface EventUntilProps {
@@ -86,41 +80,30 @@ function EventUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }:
 interface EventReportProps {
  className: string;
  id: string;
-  duration: number;
 }

-function EventReport(props: EventReportProps) {
-  const { className, id, duration } = props;
+function EventReport({ className, id }: EventReportProps) {
  const { data } = useReport();
-  const currentReport = data[id];
+  const currentReport = data.eventReports[id];

  const [value, overUnderStyle, tooltip] = useMemo(() => {
-    if (!currentReport) {
+    // Use the schedule recorded when the event ran so later rundown edits do
+    // not change its report.
+    const variance = getEventVariance(currentReport);
+    if (variance.status === 'not-run') {
      return [null, 'none', ''];
    }

-    const { startedAt, endedAt } = currentReport;
-    if (!startedAt || !endedAt) {
-      return [null, 'none', ''];
-    }
-
-    const actualDuration = endedAt - startedAt;
-    const difference = actualDuration - duration;
-    const absDifference = Math.abs(difference);
-
-    if (absDifference < MILLIS_PER_SECOND) {
+    if (variance.status === 'ontime') {
      return ['ontime', 'under', 'Event finished on time'];
    }

-    const isOver = difference > 0;
-
-    const fullTimeValue = millisToString(absDifference);
-
-    const tooltip = `Event ran ${isOver ? 'over' : 'under'} time by ${fullTimeValue}`;
-
+    const absDifference = Math.abs(variance.delta);
+    const isOver = variance.status === 'over';
+    const tooltip = `Event ran ${isOver ? 'over' : 'under'} time by ${millisToString(absDifference)}`;
    const value = `${isOver ? '+' : '-'}${formatDuration(absDifference, absDifference > 2 * MILLIS_PER_MINUTE)}`;
-    return [value, isOver ? 'over' : 'under', tooltip];
-  }, [currentReport, duration]);
+    return [value, variance.status, tooltip];
+  }, [currentReport]);

  if (!value) {
    return null;
@@ -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
@@ -107,7 +107,15 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
        // a subscribed group is live when any of its children is the selected/running event
        const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
        const isArmed = !isLive && activeEntryId === selectedEventId;
-        const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
+        const countdownEvent = extendEventData(
+          event,
+          currentDay,
+          actualStart,
+          plannedStart,
+          offset,
+          mode,
+          reportData.eventReports,
+        );
        const displayTitle = getPropertyValue(event, mainSource ?? 'title');
        return (
          <div
@@ -38,7 +38,7 @@ export default function SingleEventCountdown({ subscribedEvent, goToEditMode }:

  const expectedEnd = getExpectedEnd(subscribedEvent, expectedStart, currentDay);

-  const { endedAt } = reportData[subscribedEvent.reportId ?? subscribedEvent.id] ?? { endedAt: null };
+  const { endedAt } = reportData.eventReports[subscribedEvent.reportId ?? subscribedEvent.id] ?? { endedAt: null };
  const countdownEvent = { ...subscribedEvent, expectedStart, endedAt, expectedEnd };
  const titleTmp = getPropertyValue(subscribedEvent, mainSource ?? 'title');
  const title = titleTmp?.length ? titleTmp : ' '; // insert utf-8 empty space to avoid the line collapsing;
@@ -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:"
  },
@@ -0,0 +1,112 @@
+import type { PlayableEvent } from 'ontime-types';
+import { RefetchKey, TimerLifeCycle } from 'ontime-types';
+import { MILLIS_PER_MINUTE } from 'ontime-utils';
+import { vi } from 'vitest';
+
+import { sendRefetch } from '../../../adapters/WebsocketAdapter.js';
+import { makeRuntimeStateData } from '../../../stores/__mocks__/runtimeState.mocks.js';
+import { makeOntimeEvent, makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
+import { clear, generate, generateLastRunReport, triggerReportEntry } from '../report.service.js';
+
+vi.mock('../../../adapters/WebsocketAdapter.js', () => ({ sendRefetch: vi.fn() }));
+
+const eventA = makeOntimeEvent({
+  id: 'event-a',
+  dayOffset: 0,
+  timeStart: 0,
+  timeEnd: MILLIS_PER_MINUTE,
+  duration: MILLIS_PER_MINUTE,
+}) as PlayableEvent;
+const eventB = makeOntimeEvent({
+  id: 'event-b',
+  dayOffset: 0,
+  timeStart: MILLIS_PER_MINUTE,
+  timeEnd: 2 * MILLIS_PER_MINUTE,
+  duration: MILLIS_PER_MINUTE,
+}) as PlayableEvent;
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  clear();
+});
+
+it('records lifecycle times while keeping the schedule captured at start', () => {
+  const start = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 500 }, _startEpoch: 1 });
+  triggerReportEntry(TimerLifeCycle.onStart, start);
+
+  const edited = { ...eventA, timeStart: 999, duration: 999 } as PlayableEvent;
+  const stop = makeRuntimeStateData({ eventNow: edited, clock: 2 * MILLIS_PER_MINUTE, rundown: { currentDay: 1 } });
+  triggerReportEntry(TimerLifeCycle.onStop, stop);
+
+  expect(generate()[eventA.id]).toEqual({
+    startedAt: 500,
+    startedAtDay: 0,
+    endedAt: 2 * MILLIS_PER_MINUTE,
+    endedAtDay: 1,
+    scheduledStart: eventA.timeStart,
+    scheduledDay: eventA.dayOffset,
+    scheduledDuration: eventA.duration,
+  });
+  expect(sendRefetch).toHaveBeenCalledTimes(2);
+  expect(sendRefetch).toHaveBeenLastCalledWith(RefetchKey.Report);
+});
+
+it('falls back to the current event when a stop arrives without a start', () => {
+  const stop = makeRuntimeStateData({ eventNow: eventA, clock: MILLIS_PER_MINUTE });
+  triggerReportEntry(TimerLifeCycle.onStop, stop);
+
+  expect(generate()[eventA.id]).toMatchObject({
+    startedAt: null,
+    endedAt: MILLIS_PER_MINUTE,
+    scheduledDuration: eventA.duration,
+  });
+});
+
+it('accumulates one run and replaces it when the next run starts', () => {
+  const firstRun = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, _startEpoch: 1 });
+  triggerReportEntry(TimerLifeCycle.onStart, firstRun);
+  triggerReportEntry(TimerLifeCycle.onStart, { ...firstRun, eventNow: eventB });
+  expect(Object.keys(generate())).toHaveLength(2);
+
+  triggerReportEntry(TimerLifeCycle.onStart, { ...firstRun, _startEpoch: 2 });
+  expect(Object.keys(generate())).toEqual([eventA.id]);
+});
+
+it('returns the latest report with the rundown plan captured at run start', () => {
+  const rundown = makeRundown({
+    id: 'run-1',
+    title: 'Original title',
+    order: [eventA.id, eventB.id],
+    entries: { [eventA.id]: eventA, [eventB.id]: eventB },
+  });
+  const start = makeRuntimeStateData({
+    eventNow: eventA,
+    timer: { startedAt: 500 },
+    _startEpoch: 1,
+    rundown: { plannedStart: 0, plannedEnd: 2 * MILLIS_PER_MINUTE },
+  });
+  triggerReportEntry(TimerLifeCycle.onStart, start, rundown);
+  triggerReportEntry(TimerLifeCycle.onStop, { ...start, clock: MILLIS_PER_MINUTE });
+  rundown.title = 'Edited later';
+
+  expect(generateLastRunReport()).toMatchObject({
+    rundown: { id: 'run-1', title: 'Original title' },
+    eventReports: { [eventA.id]: { scheduledDuration: MILLIS_PER_MINUTE } },
+    show: {
+      plannedStart: 0,
+      plannedEnd: 2 * MILLIS_PER_MINUTE,
+      plannedDuration: 2 * MILLIS_PER_MINUTE,
+      actualStart: 500,
+      actualEnd: MILLIS_PER_MINUTE,
+    },
+  });
+});
+
+it('clears the retained report and rundown snapshot together', () => {
+  const rundown = makeRundown({ order: [eventA.id], entries: { [eventA.id]: eventA } });
+  const state = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, _startEpoch: 1 });
+  triggerReportEntry(TimerLifeCycle.onStart, state, rundown);
+  clear();
+
+  expect(generateLastRunReport()).toMatchObject({ eventReports: {}, rundown: null });
+});
@@ -0,0 +1,72 @@
+import type { OntimeEventReport, OntimeReport, PlayableEvent } from 'ontime-types';
+import { dayInMs, MILLIS_PER_HOUR, MILLIS_PER_MINUTE } from 'ontime-utils';
+
+import { makeOntimeEvent, makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
+import { getActualShowTimes, getPlannedShowDuration } from '../report.utils.js';
+
+function makeReport(patch: Partial<OntimeEventReport>): OntimeEventReport {
+  return {
+    startedAt: 0,
+    startedAtDay: 0,
+    endedAt: 0,
+    endedAtDay: 0,
+    scheduledStart: 0,
+    scheduledDay: 0,
+    scheduledDuration: 0,
+    ...patch,
+  };
+}
+
+describe('getActualShowTimes()', () => {
+  it('preserves long gaps within the same day', () => {
+    const report: OntimeReport = {
+      morning: makeReport({ startedAt: 6 * MILLIS_PER_HOUR, endedAt: 7 * MILLIS_PER_HOUR }),
+      evening: makeReport({ startedAt: 20 * MILLIS_PER_HOUR, endedAt: 21 * MILLIS_PER_HOUR }),
+    };
+
+    expect(getActualShowTimes(report)).toEqual({
+      actualStart: 6 * MILLIS_PER_HOUR,
+      actualEnd: 21 * MILLIS_PER_HOUR,
+      actualDuration: 15 * MILLIS_PER_HOUR,
+    });
+  });
+
+  it('orders events by their captured day across midnight', () => {
+    const report: OntimeReport = {
+      beforeMidnight: makeReport({
+        startedAt: dayInMs - 10 * MILLIS_PER_MINUTE,
+        endedAt: dayInMs - 5 * MILLIS_PER_MINUTE,
+      }),
+      afterMidnight: makeReport({
+        startedAt: 0,
+        startedAtDay: 1,
+        endedAt: 10 * MILLIS_PER_MINUTE,
+        endedAtDay: 1,
+      }),
+    };
+
+    expect(getActualShowTimes(report).actualDuration).toBe(20 * MILLIS_PER_MINUTE);
+  });
+});
+
+it('derives planned duration from playable, non-skipped events', () => {
+  const first = makeOntimeEvent({
+    id: 'first',
+    dayOffset: 0,
+    timeStart: 23 * MILLIS_PER_HOUR,
+    duration: MILLIS_PER_HOUR,
+  }) as PlayableEvent;
+  const last = makeOntimeEvent({
+    id: 'last',
+    dayOffset: 1,
+    timeStart: MILLIS_PER_HOUR,
+    duration: MILLIS_PER_HOUR,
+  }) as PlayableEvent;
+  const skipped = makeOntimeEvent({ id: 'skipped', dayOffset: 2, timeStart: 0, duration: MILLIS_PER_HOUR, skip: true });
+  const rundown = makeRundown({
+    order: [first.id, last.id, skipped.id],
+    entries: { [first.id]: first, [last.id]: last, [skipped.id]: skipped },
+  });
+
+  expect(getPlannedShowDuration(rundown)).toBe(3 * MILLIS_PER_HOUR);
+});
@@ -10,6 +10,10 @@ router.get('/', (_req: Request, res: Response) => {
  res.status(200).json(report.generate());
 });

+router.get('/last-run', (_req: Request, res: Response) => {
+  res.status(200).json(report.generateLastRunReport());
+});
+
 router.delete('/all', (_req: Request, res: Response) => {
  report.clear();
  res.status(204).send();
@@ -1,13 +1,35 @@
-import { OntimeEventReport, OntimeReport, RefetchKey, TimerLifeCycle } from 'ontime-types';
-import { DeepReadonly } from 'ts-essentials';
+import type { LastRunReport, OntimeEventReport, OntimeReport, Rundown, ShowReport } from 'ontime-types';
+import { RefetchKey, TimerLifeCycle } from 'ontime-types';
+import type { DeepReadonly } from 'ts-essentials';

 import { sendRefetch } from '../../adapters/WebsocketAdapter.js';
-import { RuntimeState } from '../../stores/runtimeState.js';
+import type { RuntimeState } from '../../stores/runtimeState.js';
+import { getCurrentRundown } from '../rundown/rundown.dao.js';
+import { getActualShowTimes, getPlannedShowDuration } from './report.utils.js';

 const report = new Map<string, OntimeEventReport>();

 let formattedReport: OntimeReport | null = null;

+/**
+ * Identifies the show the current report belongs to.
+ * The report describes one run, so starting a new show begins a fresh one
+ * rather than mixing a rehearsal into the numbers for the performance.
+ */
+let currentShowStart: number | null = null;
+
+/**
+ * The plan the show was measured against, taken when it starts.
+ * Snapshotted for the same reason the per event schedule is: editing the
+ * rundown afterwards must not move the target a past show was judged by.
+ */
+let plannedTimes: Pick<ShowReport, 'plannedStart' | 'plannedEnd' | 'plannedDuration'> = {
+  plannedStart: null,
+  plannedEnd: null,
+  plannedDuration: null,
+};
+let rundownSnapshot: Rundown | null = null;
+
 /**
 * generates a full report
 * @returns full report
@@ -27,9 +49,15 @@ export function clear(id?: string) {
  formattedReport = null;
  if (id) {
    report.delete(id);
-  } else {
-    report.clear();
+    return;
  }
+
+  // clearing everything also forgets which show the report described, so the
+  // next event starts a report rather than resuming the one just discarded
+  report.clear();
+  currentShowStart = null;
+  plannedTimes = { plannedStart: null, plannedEnd: null, plannedDuration: null };
+  rundownSnapshot = null;
 }

 /**
@@ -41,6 +69,7 @@ export function clear(id?: string) {
 export function triggerReportEntry(
  cycle: TimerLifeCycle.onStart | TimerLifeCycle.onStop,
  state: DeepReadonly<RuntimeState>,
+  rundown: Readonly<Rundown> = getCurrentRundown(),
 ) {
  if (!state.eventNow?.id) {
    return;
@@ -49,15 +78,80 @@ export function triggerReportEntry(
  const eventId = state.eventNow.id;

  if (cycle === TimerLifeCycle.onStart) {
-    report.set(eventId, { startedAt: state.timer.startedAt, endedAt: null });
+    startShowIfNew(state, rundown);
+
+    report.set(eventId, {
+      startedAt: state.timer.startedAt,
+      startedAtDay: state.rundown.currentDay ?? state.eventNow.dayOffset,
+      endedAt: null,
+      endedAtDay: null,
+      // snapshot the schedule so later rundown edits cannot change how a show
+      // that already happened is reported
+      scheduledStart: state.eventNow.timeStart,
+      scheduledDay: state.eventNow.dayOffset,
+      scheduledDuration: state.eventNow.duration,
+    });
    formattedReport = null;
+    sendRefetch(RefetchKey.Report);
    return;
  }

  if (cycle === TimerLifeCycle.onStop) {
-    const startedAt = report.get(eventId)?.startedAt ?? null;
-    report.set(eventId, { startedAt, endedAt: state.clock });
+    const previous = report.get(eventId);
+    report.set(eventId, {
+      startedAt: previous?.startedAt ?? null,
+      startedAtDay: previous?.startedAtDay ?? null,
+      endedAt: state.clock,
+      endedAtDay: state.rundown.currentDay ?? state.eventNow.dayOffset,
+      scheduledStart: previous?.scheduledStart ?? state.eventNow.timeStart,
+      scheduledDay: previous?.scheduledDay ?? state.eventNow.dayOffset,
+      scheduledDuration: previous?.scheduledDuration ?? state.eventNow.duration,
+    });
    formattedReport = null;
    sendRefetch(RefetchKey.Report);
  }
 }
+
+/**
+ * Clears the report when a new show begins.
+ *
+ * The runtime stamps a show when its first event starts, so a change of stamp
+ * means the previous report described a different run. Without this the report
+ * would accumulate across rehearsals and performances with no way to tell
+ * which numbers belonged to which.
+ * @private
+ */
+function startShowIfNew(state: DeepReadonly<RuntimeState>, rundown: Readonly<Rundown>) {
+  const showStart = state._startEpoch ?? state.rundown.actualStart;
+  if (showStart === null || showStart === currentShowStart) {
+    return;
+  }
+
+  report.clear();
+  formattedReport = null;
+  currentShowStart = showStart;
+  rundownSnapshot = structuredClone(rundown);
+  plannedTimes = {
+    plannedStart: state.rundown.plannedStart,
+    plannedEnd: state.rundown.plannedEnd,
+    plannedDuration: getPlannedShowDuration(rundownSnapshot),
+  };
+}
+
+/**
+ * Show level times for the report.
+ * Planned times are the ones captured when the show started, actual times are
+ * derived from the events that ran.
+ */
+function generateShowReport(): ShowReport {
+  return { ...plannedTimes, ...getActualShowTimes(generate()) };
+}
+
+/** The single report retained for the UI: the latest run and its captured plan. */
+export function generateLastRunReport(): LastRunReport {
+  return {
+    eventReports: generate(),
+    rundown: rundownSnapshot,
+    show: generateShowReport(),
+  };
+}
@@ -0,0 +1,52 @@
+import type { OntimeReport, Rundown, ShowReport } from 'ontime-types';
+import { isOntimeEvent } from 'ontime-types';
+import { dayInMs } from 'ontime-utils';
+
+export function getActualShowTimes(
+  report: OntimeReport,
+): Pick<ShowReport, 'actualStart' | 'actualEnd' | 'actualDuration'> {
+  let firstStart = Number.POSITIVE_INFINITY;
+  let lastEnd = Number.NEGATIVE_INFINITY;
+  let actualStart: number | null = null;
+  let actualEnd: number | null = null;
+
+  for (const entry of Object.values(report)) {
+    if (entry.startedAt !== null && entry.startedAtDay !== null) {
+      const start = entry.startedAtDay * dayInMs + entry.startedAt;
+      if (start < firstStart) {
+        firstStart = start;
+        actualStart = entry.startedAt;
+      }
+    }
+
+    if (entry.endedAt !== null && entry.endedAtDay !== null) {
+      const end = entry.endedAtDay * dayInMs + entry.endedAt;
+      if (end > lastEnd) {
+        lastEnd = end;
+        actualEnd = entry.endedAt;
+      }
+    }
+  }
+
+  return {
+    actualStart,
+    actualEnd,
+    actualDuration: actualStart === null || actualEnd === null ? null : lastEnd - firstStart,
+  };
+}
+
+export function getPlannedShowDuration(rundown: Rundown): number | null {
+  let firstStart = Number.POSITIVE_INFINITY;
+  let lastEnd = Number.NEGATIVE_INFINITY;
+
+  for (const id of rundown.flatOrder) {
+    const entry = rundown.entries[id];
+    if (!entry || !isOntimeEvent(entry) || entry.skip) continue;
+
+    const start = entry.dayOffset * dayInMs + entry.timeStart;
+    firstStart = Math.min(firstStart, start);
+    lastEnd = Math.max(lastEnd, start + entry.duration);
+  }
+
+  return Number.isFinite(firstStart) ? lastEnd - firstStart : null;
+}
@@ -818,7 +818,7 @@ export async function renameRundown(id: string, title: string) {
  const dataProvider = getDataProvider();
  const rundown = dataProvider.getRundown(id);

-  await dataProvider.setRundown(id, { ...rundown, title });
+  await dataProvider.setRundown(id, { ...rundown, title, revision: rundown.revision + 1 });

  /**
   * If we are modifying the loaded rundown we re-init it
@@ -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,
 }

 /**
@@ -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(
@@ -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;
+  }
+}
@@ -0,0 +1,85 @@
+# Ontime architecture
+
+Use for module placement or cross-boundary changes.
+
+## Direction
+
+Dependencies point toward pure domain logic:
+
+```text
+HTTP request
+  -> validation / router or controller
+  -> service orchestration
+  -> pure domain utilities
+
+service orchestration
+  -> DAO / stores / adapters / external clients
+```
+
+Keep a layer only for clearer ownership, isolated side effects, or direct business-rule tests.
+
+## Reuse and ownership
+
+Before adding a module, helper, service, or interface, find the concept owner and inspect callers.
+
+1. Reuse when the contract already matches.
+2. Extend for the same concept when the contract stays coherent.
+3. Keep local when reuse needs flags, broad optional inputs, unrelated modes, or leaky terms.
+4. Generalise only after stable common behaviour appears across real callers.
+
+Do not duplicate canonical rules or distort an abstraction to force reuse. Small local duplication can beat coupling unrelated concepts.
+
+## Server
+
+### Routers and controllers
+
+Routers declare paths and middleware. Controllers map validated HTTP input to typed service arguments, then results/errors to responses.
+
+Keep reusable calculations, domain decisions, transformations, persistence workflows, and integration coordination out of handlers. Simple reads may stay direct when a service would only pass through.
+
+### Services
+
+Services orchestrate use cases and side-effect boundaries. Make ordering and effects visible. Move substantial branching, calculation, comparison, parsing, and transformation to pure utilities.
+
+### Pure utilities
+
+Pass required state, config, and time explicitly. No I/O, stores/globals, logging, websocket publication, browser inspection, or caller-owned mutation unless explicitly contracted.
+
+Use focused Vitest coverage. Colocate feature logic. Move to `ontime-utils` only for genuine cross-package use.
+
+### State and boundaries
+
+- DAOs/data providers: persistence.
+- Stores: mutable runtime state.
+- Adapters/clients: external protocols and integrations.
+- Validators/parsers: protect boundaries before domain logic.
+- Commit state before dependent notifications or invalidations.
+
+Old layering exceptions are context, not precedent. Improve touched boundaries only through focused, behaviour-preserving moves.
+
+## Client
+
+- `common/api`: HTTP transport.
+- `common/hooks-query`: TanStack Query reads, mutations, keys, cache, invalidation.
+- `features`: reusable product capabilities and domain behaviour.
+- `views`: route-level composition.
+- `common`: genuinely cross-feature code.
+
+Keep substantial rules out of JSX, effects, and handlers. Use tested, colocated pure utilities. TanStack Query owns server state; established Zustand/context owns local state. No parallel caches.
+
+Limit subscriptions with selectors. Keep effect dependencies stable. Clean up listeners, intervals, external resources.
+
+## Shared packages
+
+- `ontime-types`: shared contracts; type-focused.
+- `ontime-utils`: environment-independent, side-effect-free shared logic.
+- Never import application layers into shared packages.
+- Keep feature-specific helpers with their owner, even when used by another file.
+
+## Review prompts
+
+- Business rule understandable/testable without app startup?
+- Transport, orchestration, state, transformation separated?
+- Existing owner reused without forcing unrelated behaviour?
+- Abstraction removes concepts rather than relocating them?
+- Smallest focused remedy clear?
@@ -0,0 +1,30 @@
+# Change assessment
+
+Use before non-trivial planning/implementation and during non-trivial review. Let it shape scope and verification; avoid process theatre.
+
+## Rate three dimensions
+
+- **Value** — concrete user, product, operational, or maintenance benefit; include urgency.
+- **Risk** — regression likelihood/impact: data loss, security, cloud incompatibility, disruption, hard rollback.
+- **Complexity** — concepts, dependencies, layers, states, verification surfaces; not line count.
+
+Use `Low`, `Medium`, or `High`. Give one evidence-based sentence each. No pseudo-precise scores.
+
+```markdown
+## Assessment
+
+- Value: High — <concrete benefit>
+- Risk: Medium — <failure modes and reversibility>
+- Complexity: Low — <conceptual and verification burden>
+- Recommendation: Proceed | Reshape | Defer — <why>
+```
+
+One assessment per overall change.
+
+- High value never excuses unmanaged risk/complexity.
+- High risk needs earlier proof, narrower increments, rollback, or stronger checks.
+- High complexity needs clearer boundaries and smaller steps, not automatic abstraction.
+- Low value plus high risk/complexity suggests reshape or defer.
+- Revise after material scope discovery.
+
+Plans: assessment before steps. Reviews: findings first, then assessment. Assessment informs; never replaces user intent or evidence.
@@ -0,0 +1,48 @@
+# Simplicity and maintainability
+
+Use for abstractions, comments, helpers, naming, or structural complexity.
+
+## Simplicity
+
+Choose the smallest explicit, testable design. No extension points, generic engines, wrappers, or config for hypothetical needs.
+
+- Prefer direct flow over clever expressions or scattered conditions.
+- Extract only to name a rule, enable pure tests, or remove meaningful duplication.
+- Keep abstractions only when they reduce reader-held concepts.
+- Reuse the concept owner when semantics match.
+- Do not add flags, optional branches, generic names, or extension points to merge unlike cases.
+- Prefer focused local helpers over generic APIs exposing unrelated modes.
+- Keep scope narrow; note unrelated cleanup.
+- Delete clearly obsolete branches, harnesses, and shims. Ask when ownership or compatibility is unclear.
+
+## Comments
+
+Keep comments for:
+
+- non-obvious intent or invariants;
+- necessary ordering, timing, mutation, or side effects;
+- browser, Electron, cloud, or protocol constraints;
+- workaround reasons and removal conditions;
+- public contracts names/types cannot express.
+
+Remove comments that:
+
+- narrate code or names;
+- number obvious steps;
+- explain mechanics better expressed by code;
+- preserve removed history;
+- claim untested behaviour;
+- use banners to hide oversized modules.
+
+Update adjacent comments with code. Stale comments are defects.
+
+## Naming and types
+
+- Prefer Ontime terms over vague `data`, `result`, `item`.
+- Prefer explicit/discriminated types over `any`, broad casts, optional fields, non-null assertions, silent fallbacks.
+- Handle unions/enums exhaustively when future cases could be unsafe.
+- Keep public functions focused enough to avoid long contract explanations.
+
+## Review standard
+
+Do not demand personal style. Report complexity only when it risks maintenance, hides rules, blocks focused tests, duplicates ownership, or makes changes unsafe. Suggest reuse only after verifying the existing contract fits without added genericity.
@@ -0,0 +1,52 @@
+# Ontime domain invariants
+
+Load only for touched domains. Add only stable, recurring invariants; not one-off bugs.
+
+## Rundowns and entries
+
+- Keep `entries`, `order`, `flatOrder` normalised.
+- Keep group membership, group entry lists, child `parent` references consistent.
+- Preserve entry identity and supported types across patch, clone, group, ungroup, reorder.
+- Distinguish loaded vs background rundown. Prefer explicit rundown ID over global current state.
+- No caller-owned rundown mutation unless explicitly contracted.
+
+## Persistence, realtime, cache
+
+- No partial commit on failure.
+- Preserve revision/transaction semantics for loaded and background rundowns.
+- Persist before websocket refetches, runtime updates, integration notifications, or cache assumptions.
+- Notify only invalidated consumers; never leave client cache stale.
+- Avoid duplicate listeners, notifications, invalidations, lifecycle effects.
+- Reconnect/refetch must converge on authoritative state.
+- Align query keys and websocket refetch keys with the changed resource.
+
+## Timers
+
+Use temporal values by meaning: `Instant` for epoch time, `TimeOfDay` for local time since midnight, `Duration` for elapsed time, `Day` for calendar offsets. Convert through `timeCore`; never interchange as raw numbers.
+
+Active work: [runtimeState time-core migration](../migrations/runtime-state-time-core.md).
+
+When relevant, cover interactions among:
+
+- midnight/day offsets;
+- linked events/gaps;
+- delays/skipped entries;
+- count-to-end;
+- absolute/relative offsets;
+- warning, danger, finish, roll, end-action transitions;
+- loaded/next-event state.
+
+Pass time/state explicitly to keep rules deterministic and unit-testable.
+
+## Reports
+
+- Retain only the most recent run. A report is one aggregate containing its event records, show timing, and rundown snapshot.
+- Capture the rundown plan when the run starts; later rundown edits must not change a completed report.
+- Store day offsets with report timestamps. Use absolute timeline positions for ordering and duration, and wall-clock values only for display.
+
+## Imports and migrations
+
+- Treat project files, spreadsheets, custom fields, migrated data as untrusted.
+- Preserve fields the import/migration does not own.
+- Validate/parse into the current model before runtime logic.
+- Avoid source mutation; test round trips and non-mutation when preservation matters.
@@ -0,0 +1,49 @@
+# Routing and Ontime Cloud
+
+Use for navigation, URLs, endpoints, websockets, auth, cookies, assets, redirects, presets, or local-storage scope.
+
+## Deployment invariant
+
+Support root and runtime-prefixed deployments:
+
+```text
+local:  http://localhost:4001/timer
+cloud:  https://cloud.example/client-hash/timer
+```
+
+Prefix is deployment data. Never assume `/`.
+
+## Client
+
+- `apps/client/src/externals.ts`: derives `baseURI`, `serverURL`, `websocketUrl` from document base/current origin.
+- `BrowserRouter`: uses `baseURI` basename.
+- APIs/assets: use `common/api/constants.ts` or base-aware helpers.
+- App navigation: use React Router. Never strip/guess/re-add prefix from `window.location.pathname`.
+- Persisted browser state: use existing base-aware scoping where prefixes need isolation.
+
+## Server
+
+- `updateRouterPrefix()` in `apps/server/src/externals.ts`: normalises `ROUTER_PREFIX`.
+- `apps/server/src/app.ts`: mounts routes below that prefix.
+- Domain routers: paths relative to mount; never derive prefix.
+- Websockets, auth redirects, cookie paths, share URLs: preserve prefix.
+
+## URL rules
+
+Use `URL`, React Router, or existing helpers instead of string manipulation. Preserve:
+
+- leading/trailing slashes and runtime prefix;
+- query params, auth tokens, navigation locks;
+- preset aliases and canonical view paths;
+- `https`/`wss` behind proxies;
+- static/user asset paths.
+
+Never infer Ontime Cloud from hostname alone. Generated base markup marks cloud; runtime prefixes also serve non-cloud reverse proxies.
+
+## Cloud capabilities
+
+Gate unavailable local-network integrations in cloud, including OSC output. Keep server behaviour and UI availability aligned.
+
+## Verification
+
+Test both root and a prefix such as `/client-hash`. Include relevant queries, redirects, cookies, websocket paths, presets, assets. Root-only routing coverage is incomplete.
@@ -0,0 +1,42 @@
+# Security boundaries
+
+Use for auth, external input, files, integrations, assets, URLs, or secrets.
+
+## Untrusted inputs
+
+Validate/parse before trust:
+
+- HTTP bodies, params, headers, cookies, websocket messages;
+- project files, migrations, spreadsheets, imports;
+- custom HTML/CSS/views, translations, served assets;
+- automation payloads, third-party responses;
+- externally supplied paths/filenames.
+
+Validate shape and domain constraints at the owning boundary. Keep existing parser/validation layers; avoid downstream defensive casts.
+
+## Authentication and authorisation
+
+- Keep protected routers behind auth middleware in `apps/server/src/app.ts`.
+- Preserve auth across prefixed routes, redirects, websockets, generated links.
+- Scope session cookies to runtime prefix; isolate hosted clients.
+- Authentication never grants arbitrary file, path, project, or rundown access.
+
+## Files, URLs, integrations
+
+- Use established path/file helpers. Reject traversal and unexpected types.
+- Build URLs with `URL` or existing helpers. Check open redirects, SSRF, protocol changes, token leaks.
+- Encode/constrain untrusted HTML, CSS, filenames, headers, log values.
+- Preserve cloud limits on local-network capabilities.
+
+## Secrets and diagnostics
+
+- Never commit/log passwords, hashes, tokens, credentials, cookies, private project content.
+- Errors: useful, but no internal paths, stacks, credentials, sensitive payloads.
+- Keep tokens in existing session/authenticated-share flows. Avoid new URL-token patterns.
+
+## Review prompts
+
+- Where does input become trusted?
+- Validation once at owner, then useful type?
+- Can one prefixed client cross another client's session/assets?
+- Can logs, responses, redirects, URLs leak secrets?
@@ -0,0 +1,52 @@
+# Testing strategy
+
+Use for changed behaviour or tests.
+
+## Layers
+
+### Pure unit
+
+Put detailed business-rule coverage on pure functions. Test public inputs/outputs with Vitest: relevant boundaries, invalid input, ordering, rollover, errors.
+
+Every bug fix needs a regression test that fails before the fix. Prefer behaviour over mocks/implementation assertions.
+
+### Service and state
+
+Use service, DAO, store, or hook tests for orchestration: transitions, transactions, persistence, cache, notifications, external effects.
+
+Do not repeat all pure cases here. Prove delegation and sequencing.
+
+### End-to-end
+
+Reserve Playwright for key journeys and high-risk cross-layer integrations: edit/run rundown, playback, imports, rundown switching, cloud-prefixed navigation.
+
+No E2E for edges already proven in lower layers. Add E2E only when lower layers cannot prove the user-facing integration.
+
+## Compact before handoff
+
+Development harnesses may be broad, repetitive, diagnostic, temporary. Before handoff:
+
+1. Identify distinct required behaviours/regressions.
+2. Keep the smallest readable set that catches them.
+3. Parameterise repetition only when the table reads better.
+4. Remove diagnostic assertions, redundant permutations, temporary fixtures, private-detail coupling.
+5. Keep rare cases that encode real domain rules.
+
+Optimise for future readers, not minimum line count.
+
+## Quality
+
+- Name tests by observable behaviour.
+- Keep setup local/explicit unless a fixture improves comprehension.
+- Avoid arbitrary waits, wall-clock dependence, cross-test state, weak assertions.
+- Prefer realistic typed fixtures over large snapshots or masking casts.
+- Test non-mutation when promised.
+- No tests for trivial type/format changes or framework behaviour Ontime does not own.
+
+## Review prompts
+
+- Business logic directly unit-testable?
+- Test catches the reported bug/regression?
+- Cases distinct, not repeated path?
+- Temporary harness leaked?
+- E2E justified by cross-layer risk?
@@ -0,0 +1,69 @@
+# Workflow and repository conventions
+
+Use for commands, imports, formatting, CI, dependencies, PRs.
+
+## Workspaces
+
+Confirm names from `package.json`.
+
+| Package          | Workspace name        |
+| ---------------- | --------------------- |
+| Client           | `ontime-ui`           |
+| Server           | `ontime-server`       |
+| Electron         | `ontime-electron`     |
+| Resolver         | `@getontime/resolver` |
+| CLI              | `@getontime/cli`      |
+| Shared types     | `ontime-types`        |
+| Shared utilities | `ontime-utils`        |
+
+Run from repo root: `pnpm --filter <workspace-name> <script>`. Add/install workspaces only when required.
+
+## Verification
+
+Start narrow; expand with risk:
+
+```text
+focused test
+  -> affected package tests
+  -> package lint/typecheck
+  -> required repository checks
+```
+
+```bash
+pnpm --filter ontime-ui test:pipeline <path-to-test>
+pnpm --filter ontime-server test:pipeline <path-to-test>
+pnpm --filter ontime-utils test:pipeline <path-to-test>
+pnpm --filter <workspace-name> lint
+pnpm --filter <workspace-name> typecheck
+
+pnpm format:check
+pnpm lint
+pnpm typecheck
+pnpm test
+pnpm e2e
+```
+
+PR CI: `.github/workflows/test.yml`; runs format, lint, types, unit, Playwright. Run E2E locally only for key flows or E2E infrastructure.
+
+Before code commit: `pnpm lint`, `pnpm test`; add `pnpm typecheck` for TypeScript and `pnpm format:check` for formatted files. Claim only observed results.
+
+## TypeScript and imports
+
+- Strict TypeScript. Prefer `ontime-types` domain types over local copies.
+- Keep client/server payloads aligned through `ontime-types`.
+- Import `ontime-types`/`ontime-utils` from public entry points; Oxlint forbids `src` subpaths.
+- Server relative ESM imports need `.js`.
+- Reuse public exports/canonical helpers before adding utilities.
+
+## Formatting and dependencies
+
+- Use Oxlint/Oxfmt, not ESLint/Prettier.
+- Oxfmt: two spaces, semicolons, single quotes, trailing commas, 120 columns.
+- Add dependencies only when platform/current stack cannot solve the need. Review `package.json` and `pnpm-lock.yaml` together.
+- Never hand-edit lockfile. No build output unless already tracked.
+
+## Pull requests
+
+- Title: `[<workspace-name>] <Title>`.
+- Separate behaviour from unrelated refactors/format churn.
+- State what changed, why, verification.
@@ -0,0 +1,67 @@
+# runtimeState time-core migration
+
+**Status:** In progress
+
+## Goal
+
+Make temporal meaning explicit across `runtimeState` and timer calculations. Prevent mixing:
+
+- `Instant`: epoch timestamp;
+- `TimeOfDay`: local milliseconds since midnight, range `[0, dayInMs)`;
+- `Duration`: elapsed or remaining milliseconds;
+- `Day`: calendar-day offset.
+
+Use `apps/server/src/lib/time-core/timeCore.ts` for conversions and temporal arithmetic. Branded types remain numbers at serialization boundaries.
+
+## Current state
+
+Completed foundation:
+
+- temporal brands in `ontime-types`;
+- `timeCore` helpers for now, conversion, duration arithmetic, midnight crossing, calendar-day distance;
+- partial `runtimeState` adoption of `Instant`, `TimeOfDay`, `Day`, and `timeCore`.
+
+Remaining ambiguity:
+
+- `TimerState`, `RundownState`, and `Offset` expose temporal fields as `number`/`MaybeNumber`;
+- `timerUtils` accepts/returns raw numbers with different meanings;
+- `runtimeState` retains raw duration fields, manual arithmetic, and `as TimeOfDay`/`as Duration` casts.
+
+## Migration rules
+
+- Classify each temporal field before changing it. No generic `Time` type.
+- Convert only through `timeCore` or an explicit transport adapter.
+- Keep public/websocket JSON numeric where required; brand at the boundary.
+- Keep type migration separate from behaviour changes.
+- Preserve current midnight, rollover, pause, add-time, roll, and offset behaviour per slice.
+- Add helpers only when they encode a named temporal rule and remove caller casts/arithmetic.
+
+## Slices
+
+- [x] Add temporal brands and initial `timeCore` helpers/tests.
+- [ ] Inventory temporal fields in `TimerState`, `RundownState`, `Offset`, and private runtime state; assign intended types.
+- [ ] Migrate pure `timerUtils` functions by temporal concept; add focused midnight/rollover tests.
+- [ ] Migrate private `RuntimeState` fields and calculations; remove local casts/manual conversions.
+- [ ] Migrate shared runtime contracts and add numeric transport adapters where compatibility requires them.
+- [ ] Update remaining callers, fixtures, and mocks.
+- [ ] Remove superseded helpers, casts, and ambiguous temporal numbers.
+
+Each slice must leave old/new boundaries explicit, compile cleanly, and preserve behaviour.
+
+## Required coverage
+
+- before, at, and after midnight;
+- overnight and multi-day rundowns;
+- local-day calculation across timezone/DST offset changes;
+- pause/resume, added time, elapsed/remaining duration;
+- roll secondary targets and expected finish;
+- absolute/relative offsets and day offsets.
+
+## Complete when
+
+- Runtime/timer boundaries use semantic temporal types or documented numeric transport fields.
+- Temporal conversions/arithmetic use `timeCore` or named pure helpers.
+- No unexplained temporal casts or ambiguous numeric fields remain in migrated scope.
+- Focused tests cover the required boundaries.
+
+After completion, remove this migration tracker. Keep durable rules in `docs/agent-guides/domain-invariants.md`.
@@ -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",
@@ -1,8 +1,42 @@
 import type { MaybeNumber } from '../../utils/utils.type.js';
+import type { EntryId } from './OntimeEntry.js';
+import type { Rundown } from './Rundown.type.js';

 export type OntimeEventReport = {
  startedAt: MaybeNumber;
+  startedAtDay: number | null;
  endedAt: MaybeNumber;
+  endedAtDay: number | null;
+  /**
+   * Snapshot of the schedule taken when the event ran.
+   * Keeping a copy is what makes a report a record: editing the rundown
+   * afterwards no longer changes how a show that already happened is reported.
+   */
+  scheduledStart: number;
+  scheduledDay: number;
+  scheduledDuration: number;
 };

-export type OntimeReport = Record<string, OntimeEventReport>;
+export type OntimeReport = Record<EntryId, OntimeEventReport>;
+
+/**
+ * Show level times for the report.
+ *
+ * Planned times are snapshotted when the show starts, for the same reason the
+ * per event schedule is. Actual times are derived from the events that ran.
+ */
+export type ShowReport = {
+  plannedStart: MaybeNumber;
+  plannedEnd: MaybeNumber;
+  plannedDuration: MaybeNumber;
+  actualStart: MaybeNumber;
+  actualEnd: MaybeNumber;
+  actualDuration: MaybeNumber;
+};
+
+/** The only report retained by the server: the most recent run and its plan. */
+export type LastRunReport = {
+  eventReports: OntimeReport;
+  rundown: Rundown | null;
+  show: ShowReport;
+};
@@ -24,7 +24,7 @@ export { TimerType } from './definitions/TimerType.type.js';
 export type { Day, Duration, Instant, TimeOfDay } from './definitions/core/Temporal.js';

 // ---> Report
-export type { OntimeReport, OntimeEventReport } from './definitions/core/Report.type.js';
+export type { LastRunReport, OntimeReport, OntimeEventReport, ShowReport } from './definitions/core/Report.type.js';

 // ---> Automations
 export { ontimeActionKeyValues } from './definitions/core/Automation.type.js';
@@ -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
Carlos Valente	d8106fdc0c	refactor(report): improve report summary	2026-08-30 13:29:12 +02:00
Carlos Valente	b9683f00dc	fix: prevent stale rundown cache on rename	2026-08-25 21:41:34 +02:00
Carlos Valente	63fdc50c50	docs(llms): document ongoing code migrations	2026-08-25 21:41:18 +02:00
Carlos Valente	5acfc4a122	docs(llms): setup agents documentation	2026-08-25 21:41:18 +02: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