fix(report): measure events against the schedule they ran on

The runtime report joined live report data against the current rundown, so editing an event after the show silently rewrote the report of a show that had already happened. Durations, and the over/under chip in the rundown, would change to match the edit. Each event now records the schedule it actually ran on, and the report is read from that. - OntimeEventReport carries scheduledStart and scheduledDuration, captured when the event starts, plus a playCount so an event started twice no longer overwrites its own record without trace. - The over/under calculation moves to ontime-utils, where the rundown chip and the settings panel share one implementation instead of deriving it separately and disagreeing. - The report panel gains a summary of the show: planned against actual, drift, and how many events landed over, under or on time. - Export CSV was rendering a trash bin icon. No change to how or where anything is stored: the report stays in memory exactly as before. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019nr3FbLbM8gB8Jm771YgTV
refactor(report): finish via playback, one file per run
2026-08-23 16:09:11 +00:00 · 2026-08-09 19:19:02 +00:00 · 2026-08-09 14:59:57 +00:00 · 2026-08-08 21:35:52 +00:00 · 2026-08-08 21:25:03 +00:00 · 2026-08-08 16:21:00 +00:00
71 changed files with 795 additions and 2842 deletions
@@ -1,6 +1,6 @@
 {
  "name": "@getontime/cli",
-  "version": "4.13.0-beta.1",
+  "version": "4.11.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "4.13.0-beta.1",
+  "version": "4.11.0",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -20,7 +20,6 @@ const Backstage = lazy(() => import('./views/backstage/Backstage'));
 const StudioClock = lazy(() => import('./views/studio/Studio'));
 const Timeline = lazy(() => import('./views/timeline/TimelinePage'));
 const ProjectInfo = lazy(() => import('./views/project-info/ProjectInfo'));
-const Teleprompter = lazy(() => import('./views/teleprompter/Teleprompter'));

 const Editor = lazy(() => import('./views/editor/ProtectedEditor'));
 const Cuesheet = lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
@@ -96,15 +95,6 @@ export default function AppRouter() {
            </ViewLoader>
          }
        />
-        <Route
-          path='teleprompter'
-          element={
-            <ViewLoader>
-              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSpaceHotkey />
-              <Teleprompter />
-            </ViewLoader>
-          }
-        />
        {/*/!* Protected Routes *!/*/}
        <Route path='editor' element={<Editor />} />
        <Route path='cuesheet' element={<Cuesheet />} />
@@ -175,7 +165,6 @@ const PresetViewMap: Record<OntimeViewPresettable, ComponentType> = {
  [OntimeView.StudioClock]: StudioClock,
  [OntimeView.Countdown]: Countdown,
  [OntimeView.ProjectInfo]: ProjectInfo,
-  [OntimeView.Teleprompter]: Teleprompter,
 };

 /**
@@ -225,14 +214,8 @@ function PresetView() {
  const Component = PresetViewMap[preset.target as OntimeViewPresettable];
  return (
    <PresetContext value={preset}>
-      <ViewLoader>
-        <ViewNavigationMenu
-          isNavigationLocked={getIsNavigationLocked()}
-          suppressSettings
-          suppressSpaceHotkey={preset.target === OntimeView.Teleprompter}
-        />
-        {Component ? <Component /> : <NotFound />}
-      </ViewLoader>
+      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
+      {Component ? <Component /> : <NotFound />}
    </PresetContext>
  );
 }
@@ -176,13 +176,6 @@ export async function postCloneEntry(
  return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`, options);
 }

-/**
- * HTTP request events duration to fit inside the group target
- */
-export async function requestFitGroupTarget(rundownId: RundownId, eventId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/${rundownId}/${eventId}/fit-group-duration`);
-}
-
 /**
 * HTTP request for grouping a list of entries into a group
 */
@@ -1,66 +0,0 @@
-.groups {
-  display: grid;
-  gap: 0.875rem;
-}
-
-.group {
-  h3 {
-    margin: 0 0 0.375rem;
-    color: var(--shortcut-title-color, currentColor);
-    font-size: calc(1rem - 3px);
-    font-weight: 600;
-    text-transform: uppercase;
-  }
-}
-
-.list {
-  display: grid;
-  gap: 0.25rem;
-}
-
-.row {
-  min-height: 1.625rem;
-  display: grid;
-  grid-template-columns: minmax(10rem, 1fr) minmax(0, auto);
-  align-items: center;
-  gap: 0.75rem;
-  font-size: calc(1rem - 3px);
-}
-
-.label {
-  min-width: 0;
-  line-height: 1.2;
-  color: var(--shortcut-label-color, currentColor);
-}
-
-.keys {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.25rem 0.5rem;
-  min-width: 0;
-}
-
-.combo {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 0.25rem 0;
-}
-
-.separator {
-  color: var(--shortcut-separator-color, currentColor);
-  font-size: calc(1rem - 5px);
-}
-
-@media (max-width: 680px) {
-  .row {
-    grid-template-columns: 1fr;
-    gap: 0.25rem;
-  }
-
-  .keys {
-    justify-content: flex-start;
-  }
-}
@@ -1,42 +0,0 @@
-import type { PropsWithChildren } from 'react';
-
-import { cx } from '../../utils/styleUtils';
-import Kbd from '../kbd/Kbd';
-
-import style from './KeyboardShortcuts.module.scss';
-
-export function ShortcutGroups({ className, children }: PropsWithChildren<{ className?: string }>) {
-  return <div className={cx([style.groups, className])}>{children}</div>;
-}
-
-export function ShortcutGroup({ title, children }: PropsWithChildren<{ title: string }>) {
-  return (
-    <section className={style.group}>
-      <h3>{title}</h3>
-      <div className={style.list}>{children}</div>
-    </section>
-  );
-}
-
-export function Shortcut({ label, children }: PropsWithChildren<{ label: string }>) {
-  return (
-    <div className={style.row}>
-      <span className={style.label}>{label}</span>
-      <span className={style.keys}>{children}</span>
-    </div>
-  );
-}
-
-export function Combo({ keys }: { keys: string[] }) {
-  return (
-    <span className={style.combo}>
-      {keys.map((key) => (
-        <Kbd key={key}>{key}</Kbd>
-      ))}
-    </span>
-  );
-}
-
-export function Separator() {
-  return <span className={style.separator}>/</span>;
-}
@@ -1,4 +1,4 @@
-import { type HotkeyItem, useDisclosure, useHotkeys } from '@mantine/hooks';
+import { useDisclosure, useHotkeys } from '@mantine/hooks';
 import { memo } from 'react';
 import { useSearchParams } from 'react-router';

@@ -13,32 +13,24 @@ interface ViewNavigationMenuProps {
  isNavigationLocked?: boolean;
  /** prevent showing settings */
  suppressSettings?: boolean;
-  suppressSpaceHotkey?: boolean;
 }

 export default memo(ViewNavigationMenu);
-function ViewNavigationMenu({ isNavigationLocked, suppressSettings, suppressSpaceHotkey }: ViewNavigationMenuProps) {
+function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
  const [isMenuOpen, menuHandler] = useDisclosure();
  const { open: showEditFormDrawer } = useViewParamsEditorStore();
  const [searchParams] = useSearchParams();
  const hasSavedChanges = hasCustomParams(searchParams);

-  // Omitting the binding also avoids useHotkeys preventing the default action.
-  const spaceHotkey: HotkeyItem[] = suppressSpaceHotkey
-    ? []
-    : [
-        [
-          'Space',
-          () => {
-            if (isNavigationLocked) return;
-            menuHandler.toggle();
-          },
-          { preventDefault: true },
-        ],
-      ];
-
  useHotkeys([
-    ...spaceHotkey,
+    [
+      'Space',
+      () => {
+        if (isNavigationLocked) return;
+        menuHandler.toggle();
+      },
+      { preventDefault: true },
+    ],
    [
      'mod + ,',
      () => {
@@ -49,13 +49,7 @@ export default function ParamInput({ paramField }: ParamInputProps) {
  }

  if (type === 'boolean') {
-    const paramValue = searchParams.get(id);
-    return (
-      <ControlledSwitch
-        id={id}
-        initialValue={paramValue === null ? Boolean(defaultValue) : isStringBoolean(paramValue)}
-      />
-    );
+    return <ControlledSwitch id={id} initialValue={isStringBoolean(searchParams.get(id)) ?? defaultValue} />;
  }

  if (type === 'number') {
@@ -228,41 +228,11 @@ describe('getURLSearchParamsFromObj()', () => {
      },
    ];
    const params = {
+      bool1: 'off',
      bool2: 'on',
    };
    const result = getURLSearchParamsFromObj(params, mockOptionsWithBooleans);
    expect(result.get('bool1')).toBe('false');
    expect(result.get('bool2')).toBe('true');
  });
-
-  it('omits booleans which match their default', () => {
-    const mockOptionsWithBooleans: ViewOption[] = [
-      {
-        title: OptionTitle.StyleOverride,
-        options: [
-          {
-            id: 'onByDefault',
-            title: 'onByDefault',
-            description: 'On by default',
-            type: 'boolean',
-            defaultValue: true,
-          },
-          {
-            id: 'offByDefault',
-            title: 'offByDefault',
-            description: 'Off by default',
-            type: 'boolean',
-            defaultValue: false,
-          },
-        ],
-      },
-    ];
-
-    const untouched = getURLSearchParamsFromObj({ onByDefault: 'on' }, mockOptionsWithBooleans);
-    expect(untouched.toString()).toBe('');
-
-    const flipped = getURLSearchParamsFromObj({ offByDefault: 'on' }, mockOptionsWithBooleans);
-    expect(flipped.get('onByDefault')).toBe('false');
-    expect(flipped.get('offByDefault')).toBe('true');
-  });
 });
@@ -155,14 +155,6 @@ export function getURLSearchParamsFromObj(paramsObj: ViewParamsObj, paramFields:
    });
  });

-  // Unchecked checkboxes are absent from FormData. Persist false when true is the default.
-  metadata.booleanFields.forEach((id) => {
-    if (id in paramsObj) return;
-    if (metadata.defaultValues[id] !== 'false') {
-      addUniqueParam(id, 'false');
-    }
-  });
-
  // Then process user-provided values
  Object.entries(paramsObj).forEach(([id, value]) => {
    if (typeof value === 'string' && value.length) {
@@ -49,7 +49,6 @@ import {
  requestEventSwap,
  requestGroupEntries,
  requestUngroup,
-  requestFitGroupTarget,
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
 import { useEditorSettings } from '../stores/editorSettings';
@@ -467,27 +466,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
        return previousEnd;
      }
    },
-    [getCurrentRundownData, updateEntryMutation, queryClient, resolveCurrentRundownQueryKey],
-  );
-
-  /**
-   * Updates time of existing event so it satisfies the group target duration
-   * @param eventId {EntryId} - id of the event
-   */
-  const matchGroupDuration = useCallback(
-    async (eventId: EntryId) => {
-      const rundownId = getCurrentRundownData()?.id;
-      if (!rundownId) {
-        throw new Error('Rundown not initialised');
-      }
-
-      try {
-        await requestFitGroupTarget(rundownId, eventId);
-      } catch (error) {
-        logAxiosError('Error updating event', error);
-      }
-    },
-    [getCurrentRundownData],
+    [getCurrentRundownData, updateEntryMutation, queryClient],
  );

  /**
@@ -1030,7 +1009,6 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
      swapEvents,
      updateEntry,
      updateTimer,
-      matchGroupDuration,
    }),
    [
      addEntry,
@@ -1048,7 +1026,6 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
      swapEvents,
      updateEntry,
      updateTimer,
-      matchGroupDuration,
    ],
  );
 }
@@ -200,7 +200,8 @@ $card-padding: 2rem;
 .overlay {
  position: absolute;
  z-index: $zindex-backdrop;
-  inset: 0;
+  width: 100%;
+  height: 100%;
  backdrop-filter: blur(2px);
  display: grid;
  place-content: center;
@@ -1,7 +0,0 @@
-.updateIndicator {
-  width: 0.5em;
-  height: 0.5em;
-  flex: 0 0 auto;
-  border-radius: 99px;
-  background-color: $red-400;
-}
@@ -3,8 +3,6 @@ import useAppVersion from '../../../../common/hooks-query/useAppVersion';
 import { appVersion, isOntimeCloud, websiteUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';

-import style from './AppVersion.module.scss';
-
 export default function AppVersion() {
  const { data, isError } = useAppVersion();

@@ -20,12 +18,7 @@ export default function AppVersion() {
    return (
      <Panel.ListItem>
        <Panel.Field
-          title={
-            <>
-              <span className={style.updateIndicator} aria-hidden='true' />
-              {`Ontime ${appVersion}`}
-            </>
-          }
+          title={`Ontime ${appVersion}`}
          description={
            isOntimeCloud
              ? `Version ${data.version} is available. Restart your stage to update.`
@@ -33,7 +26,7 @@ export default function AppVersion() {
          }
        />
        {!isOntimeCloud && (
-          <ExternalLink href={websiteUrl}>Download the latest version from Ontime's page</ExternalLink>
+          <ExternalLink href={websiteUrl}>Visit Ontime's page to download the latest version.</ExternalLink>
        )}
      </Panel.ListItem>
    );
@@ -5,3 +5,28 @@ th.over {
 th.under {
  color: $playback-under;
 }
+
+.summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  padding: 0 var(--panel-card-padding, 2rem);
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.statLabel {
+  font-size: calc(1rem - 3px);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: $gray-300;
+}
+
+.statValue {
+  font-size: 1rem;
+  font-weight: 600;
+}
@@ -1,5 +1,6 @@
+import { countPlannedEvents, getRunSummary } from 'ontime-utils';
 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';
@@ -7,9 +8,9 @@ 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 { formatDuration, formatTime } from '../../../../common/utils/time';
 import * as Panel from '../../panel-utils/PanelUtils';
-import { CombinedReport, getCombinedReport, makeReportCSV } from './reportSettings.utils';
+import { CombinedReport, formatDrift, getCombinedReport, makeReportCSV } from './reportSettings.utils';

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

@@ -31,6 +32,10 @@ export default function ReportSettings() {
    return getCombinedReport(reportData, data.entries, data.flatOrder);
  }, [reportData, data.entries, data.flatOrder]);

+  const summary = useMemo(() => {
+    return getRunSummary(reportData, countPlannedEvents(data.entries, data.flatOrder));
+  }, [reportData, data.entries, data.flatOrder]);
+
  return (
    <Panel.Section>
      <Panel.Card>
@@ -41,7 +46,7 @@ export default function ReportSettings() {
            Manage report
            <Panel.InlineElements>
              <Button onClick={() => downloadCSV(combinedReport)} disabled={combinedReport.length === 0}>
-                <IoTrashBin />
+                <IoDownloadOutline />
                Export CSV
              </Button>
              <Button variant='subtle-destructive' onClick={clearReport} disabled={combinedReport.length === 0}>
@@ -51,6 +56,19 @@ export default function ReportSettings() {
            </Panel.InlineElements>
          </Panel.Title>
        </Panel.Section>
+        {summary.eventsRun > 0 && (
+          <Panel.Section>
+            <div className={style.summary}>
+              <Stat label='Events run' value={`${summary.eventsRun} / ${summary.eventsPlanned}`} />
+              <Stat label='Scheduled' value={formatDuration(summary.scheduledDuration, false)} />
+              <Stat label='Actual' value={formatDuration(summary.actualDuration, false)} />
+              <Stat label='Drift' value={formatDrift(summary.drift, summary.eventsRun)} />
+              <Stat label='On time' value={String(summary.eventsOnTime)} />
+              <Stat label='Over' value={String(summary.eventsOver)} />
+              <Stat label='Under' value={String(summary.eventsUnder)} />
+            </div>
+          </Panel.Section>
+        )}
        <Panel.Section>
          <Panel.Table>
            <thead>
@@ -102,3 +120,12 @@ export default function ReportSettings() {
    </Panel.Section>
  );
 }
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className={style.stat}>
+      <span className={style.statLabel}>{label}</span>
+      <span className={style.statValue}>{value}</span>
+    </div>
+  );
+}
@@ -0,0 +1,130 @@
+import {
+  EndAction,
+  OntimeEvent,
+  OntimeReport,
+  RundownEntries,
+  SupportedEntry,
+  TimeStrategy,
+  TimerType,
+} from 'ontime-types';
+
+import { formatDrift, getCombinedReport, makeReportCSV } from '../reportSettings.utils';
+
+function makeEvent(patch: Partial<OntimeEvent>): OntimeEvent {
+  return {
+    type: SupportedEntry.Event,
+    id: 'event',
+    flag: false,
+    cue: '1',
+    title: 'event title',
+    note: '',
+    endAction: EndAction.None,
+    timerType: TimerType.CountDown,
+    countToEnd: false,
+    linkStart: false,
+    timeStrategy: TimeStrategy.LockEnd,
+    timeStart: 0,
+    timeEnd: 10000,
+    duration: 10000,
+    skip: false,
+    colour: '',
+    timeWarning: 0,
+    timeDanger: 0,
+    custom: {},
+    triggers: [],
+    parent: null,
+    revision: 0,
+    delay: 0,
+    dayOffset: 0,
+    gap: 0,
+    ...patch,
+  } as OntimeEvent;
+}
+
+describe('getCombinedReport()', () => {
+  it('returns an empty list when nothing has run', () => {
+    expect(getCombinedReport({}, {}, [])).toEqual([]);
+  });
+
+  it('measures a run event against the schedule recorded at the time', () => {
+    // the rundown was edited after the show, the report must not follow it
+    const entry = makeEvent({ id: 'a', timeStart: 0, timeEnd: 99999 });
+    const report: OntimeReport = {
+      a: { startedAt: 100, endedAt: 10100, scheduledStart: 0, scheduledDuration: 10000, playCount: 1 },
+    };
+
+    const result = getCombinedReport(report, { a: entry }, ['a']);
+
+    expect(result[0]).toMatchObject({
+      scheduledStart: 0,
+      scheduledEnd: 10000, // from the snapshot, not the edited timeEnd of 99999
+      actualStart: 100,
+      actualEnd: 10100,
+    });
+  });
+
+  it('falls back to the rundown for an event which has not run', () => {
+    const notRun = makeEvent({ id: 'a', timeStart: 0, timeEnd: 10000 });
+    const didRun = makeEvent({ id: 'b', timeStart: 10000, timeEnd: 20000 });
+    const report: OntimeReport = {
+      b: { startedAt: 10000, endedAt: 20000, scheduledStart: 10000, scheduledDuration: 10000, playCount: 1 },
+    };
+
+    const result = getCombinedReport(report, { a: notRun, b: didRun }, ['a', 'b']);
+
+    expect(result[0]).toMatchObject({
+      id: 'a',
+      scheduledStart: 0,
+      scheduledEnd: 10000,
+      actualStart: null,
+      actualEnd: null,
+    });
+  });
+
+  it('skips entries which are not events', () => {
+    const entry = makeEvent({ id: 'a' });
+    const rundownEntries: RundownEntries = {
+      a: entry,
+      delay: { type: SupportedEntry.Delay, id: 'delay', duration: 1000, parent: null },
+    };
+    const report: OntimeReport = {
+      a: { startedAt: 0, endedAt: 10000, scheduledStart: 0, scheduledDuration: 10000, playCount: 1 },
+    };
+
+    expect(getCombinedReport(report, rundownEntries, ['delay', 'a']).map((row) => row.id)).toEqual(['a']);
+  });
+});
+
+describe('formatDrift()', () => {
+  it('has nothing to report when no event completed', () => {
+    expect(formatDrift(0, 0)).toBe('–');
+  });
+
+  it('treats sub-second drift as on time', () => {
+    expect(formatDrift(500, 3)).toBe('On time');
+  });
+
+  it('signs the drift in both directions', () => {
+    expect(formatDrift(252000, 3)).toBe('+4m12s');
+    expect(formatDrift(-60000, 3)).toBe('-1m');
+  });
+});
+
+describe('makeReportCSV()', () => {
+  it('produces a header row and one row per entry', () => {
+    const csv = makeReportCSV([
+      {
+        id: 'a',
+        index: 1,
+        title: 'Welcome',
+        cue: '1',
+        scheduledStart: 0,
+        scheduledEnd: 10000,
+        actualStart: 0,
+        actualEnd: 12000,
+      },
+    ]);
+
+    expect(csv.trim().split('\n')).toHaveLength(2);
+  });
+});
@@ -26,7 +26,6 @@ const targetOptions: SelectOption<OntimeViewPresettable>[] = [
  { value: OntimeView.StudioClock, label: 'Studio Clock' },
  { value: OntimeView.Countdown, label: 'Countdown' },
  { value: OntimeView.ProjectInfo, label: 'Project Info' },
-  { value: OntimeView.Teleprompter, label: 'Teleprompter' },
 ];

 const formId = 'url-preset-form';
@@ -1,7 +1,9 @@
 import { EntryId, MaybeNumber, OntimeReport, RundownEntries, isOntimeEvent } from 'ontime-types';
+import { MILLIS_PER_SECOND } from 'ontime-utils';

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

 export type CombinedReport = {
  id: EntryId;
@@ -15,7 +17,12 @@ export type CombinedReport = {
 };

 /**
- * 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,
@@ -33,7 +40,9 @@ export function getCombinedReport(
    const entry = rundown[id];
    if (!entry || !isOntimeEvent(entry)) continue;

-    if (!(id in report)) {
+    const reported = report[id];
+
+    if (!reported) {
      combinedReport.push({
        id: id,
        index: index,
@@ -44,18 +53,16 @@ export function getCombinedReport(
        scheduledEnd: entry.timeEnd,
        actualStart: null,
      });
-    }
-
-    if (id in report) {
+    } else {
      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,
+        scheduledStart: reported.scheduledStart,
+        actualEnd: reported.endedAt,
+        scheduledEnd: reported.scheduledStart + reported.scheduledDuration,
+        actualStart: reported.startedAt,
      });
    }
    index++;
@@ -64,6 +71,16 @@ export function getCombinedReport(
  return combinedReport;
 }

+/**
+ * Signed drift, eg "+4m12s" / "-1m". With nothing completed there is no
+ * meaningful drift to report.
+ */
+export function formatDrift(drift: number, eventsRun: number): string {
+  if (eventsRun === 0) return enDash;
+  if (Math.abs(drift) < MILLIS_PER_SECOND) return 'On time';
+  return `${drift > 0 ? '+' : '-'}${formatDuration(Math.abs(drift), false)}`;
+}
+
 const csvHeader = ['Index', 'Title', 'Cue', 'Scheduled Start', 'Actual Start', 'Scheduled End', 'Actual End'];

 /**
@@ -85,10 +85,10 @@ export default function ServerPortSettings() {
            </Button>
          </Panel.InlineElements>
        </Panel.SubHeader>
+        <Panel.Loader isLoading={status === 'pending'} />
        {rootError && <Panel.Error>{rootError}</Panel.Error>}
        <Panel.Divider />
        <Panel.Section>
-          <Panel.Loader isLoading={status === 'pending'} />
          {data.pendingRestart && (
            <Info type='warning'>A port change is pending and will happen on the next restart.</Info>
          )}
@@ -17,10 +17,59 @@
 }

 .shortcuts {
+  display: grid;
+  gap: 0.875rem;
  margin-top: 0.875rem;
+}

-  --shortcut-title-color: #{$ui-white};
-  --shortcut-separator-color: #{$gray-500};
+.shortcutGroup {
+  h3 {
+    margin: 0 0 0.375rem;
+    color: $ui-white;
+    font-size: calc(1rem - 3px);
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+}
+
+.shortcutList {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.shortcutRow {
+  min-height: 1.625rem;
+  display: grid;
+  grid-template-columns: minmax(10rem, 1fr) minmax(0, auto);
+  align-items: center;
+  gap: 0.75rem;
+  font-size: calc(1rem - 3px);
+}
+
+.shortcutLabel {
+  min-width: 0;
+  line-height: 1.2;
+}
+
+.shortcutKeys {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.25rem 0.5rem;
+  min-width: 0;
+}
+
+.keyCombo {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 0.25rem 0;
+}
+
+.separator {
+  color: $gray-500;
+  font-size: calc(1rem - 5px);
 }

 .prompt {
@@ -35,4 +84,13 @@
  .shortcutSection {
    margin-top: 1rem;
  }
+
+  .shortcutRow {
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+  }
+
+  .shortcutKeys {
+    justify-content: flex-start;
+  }
 }
@@ -1,13 +1,7 @@
-import { memo } from 'react';
+import { PropsWithChildren, memo } from 'react';

 import * as Editor from '../../../common/components/editor-utils/EditorUtils';
-import {
-  Combo,
-  Separator,
-  Shortcut,
-  ShortcutGroup,
-  ShortcutGroups,
-} from '../../../common/components/keyboard-shortcuts/KeyboardShortcuts';
+import Kbd from '../../../common/components/kbd/Kbd';
 import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';

 import style from './EventEditorEmpty.module.scss';
@@ -19,7 +13,7 @@ function EventEditorEmpty() {
    <div className={style.entryEditor} data-testid='editor-container'>
      <div className={style.shortcutSection}>
        <Editor.Title className={style.prompt}>Rundown shortcuts</Editor.Title>
-        <ShortcutGroups className={style.shortcuts}>
+        <div className={style.shortcuts}>
          <ShortcutGroup title='Search'>
            <Shortcut label='Find in rundown'>
              <Combo keys={[deviceMod, 'F']} />
@@ -106,8 +100,40 @@ function EventEditorEmpty() {
              <Combo keys={[deviceAlt, 'Shift', 'D']} />
            </Shortcut>
          </ShortcutGroup>
-        </ShortcutGroups>
+        </div>
      </div>
    </div>
  );
 }
+
+function ShortcutGroup({ title, children }: PropsWithChildren<{ title: string }>) {
+  return (
+    <section className={style.shortcutGroup}>
+      <h3>{title}</h3>
+      <div className={style.shortcutList}>{children}</div>
+    </section>
+  );
+}
+
+function Shortcut({ label, children }: PropsWithChildren<{ label: string }>) {
+  return (
+    <div className={style.shortcutRow}>
+      <span className={style.shortcutLabel}>{label}</span>
+      <span className={style.shortcutKeys}>{children}</span>
+    </div>
+  );
+}
+
+function Combo({ keys }: { keys: string[] }) {
+  return (
+    <span className={style.keyCombo}>
+      {keys.map((key) => (
+        <Kbd key={key}>{key}</Kbd>
+      ))}
+    </span>
+  );
+}
+
+function Separator() {
+  return <span className={style.separator}>/</span>;
+}
@@ -81,7 +81,7 @@ export default function GroupEditor({ group }: GroupEditorProps) {
          <div>
            <Editor.Label htmlFor='eventId'>Plan offset</Editor.Label>
            <TextLikeInput
-              offset={planOffsetLabel === 'under' ? 'over' : planOffsetLabel}
+              offset={planOffsetLabel}
              className={cx([style.textLikeInput, planOffset === null && style.inactive])}
              disabled
            >
@@ -1,6 +1,6 @@
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Day, EndAction, EntryId, Maybe, OntimeGroup, Playback, TimeStrategy, TimerType } from 'ontime-types';
+import { Day, EndAction, EntryId, Playback, TimeStrategy, TimerType } from 'ontime-types';
 import { isPlaybackActive } from 'ontime-utils';
 import { MouseEvent, useEffect, useRef } from 'react';
 import {
@@ -13,10 +13,9 @@ import {
  IoTrash,
  IoUnlink,
 } from 'react-icons/io5';
-import { TbClockPin, TbFlagFilled, TbListNumbers } from 'react-icons/tb';
+import { TbFlagFilled, TbListNumbers } from 'react-icons/tb';

 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import { useEntry } from '../../../common/hooks-query/useRundown';
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
 import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';
@@ -103,10 +102,7 @@ export default function RundownEvent({
  const clearSelectedEventId = useEventIdSwapping((state) => state.clearSelectedEventId);
  const openRenumberDialog = useRenumberCuesDialogStore((state) => state.onOpen);

-  const parentGroup = useEntry(parent) as Maybe<OntimeGroup>;
-
-  const { updateEntry, batchUpdateEvents, clone, deleteEntry, groupEntries, swapEvents, matchGroupDuration } =
-    useEntryActionsContext();
+  const { updateEntry, batchUpdateEvents, clone, deleteEntry, groupEntries, swapEvents } = useEntryActionsContext();

  const isSelected = useEventSelection((state) => state.selectedEvents.has(eventId));
  const unselect = useEventSelection((state) => state.unselect);
@@ -118,15 +114,6 @@ export default function RundownEvent({

  const handleRef = useRef<null | HTMLSpanElement>(null);

-  const [enableMatchDuration, groupTargetDurationDescription] = (() => {
-    if (!parentGroup || parentGroup.targetDuration === null || parentGroup.duration === parentGroup.targetDuration)
-      return [false, ''];
-    const { targetDuration, duration } = parentGroup;
-    return targetDuration > duration
-      ? [true, 'Increase event duration to fit the group target']
-      : [true, 'Decrease event duration to fit the group target'];
-  })();
-
  const [onContextMenu] = useContextMenu<HTMLDivElement>(() =>
    selectedEvents.size > 1
      ? [
@@ -185,17 +172,6 @@ export default function RundownEvent({
              updateEntry({ id: eventId, flag: !flag });
            },
          },
-          {
-            type: 'item',
-            label: 'Match Group Target Duration',
-            description: groupTargetDurationDescription,
-            icon: TbClockPin,
-            onClick: () => {
-              if (!parent) return;
-              matchGroupDuration(eventId);
-            },
-            disabled: !enableMatchDuration,
-          },
          { type: 'divider' },
          {
            type: 'item',
@@ -141,7 +141,6 @@ function RundownEventInner({
          isPast={isPast}
          isLoaded={loaded}
          totalGap={totalGap}
-          duration={duration}
        />
      )}
      <div className={style.statusElements} id='entry-status' data-timertype={timerType}>
@@ -1,5 +1,5 @@
 import { Day } from 'ontime-types';
-import { MILLIS_PER_MINUTE, MILLIS_PER_SECOND, isPlaybackActive, millisToString } from 'ontime-utils';
+import { MILLIS_PER_MINUTE, MILLIS_PER_SECOND, getEventVariance, isPlaybackActive, millisToString } from 'ontime-utils';
 import { useMemo } from 'react';
 import { IoCheckmarkCircle } from 'react-icons/io5';

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

@@ -33,7 +32,6 @@ export default function RundownEventChip({
  className,
  totalGap,
  id,
-  duration,
  isLinkedToLoaded,
 }: RundownEventChipProps) {
  const playback = usePlayback();
@@ -45,7 +43,7 @@ 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) {
@@ -86,41 +84,32 @@ function EventUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }:
 interface EventReportProps {
  className: string;
  id: string;
-  duration: number;
 }

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

  const [value, overUnderStyle, tooltip] = useMemo(() => {
-    if (!currentReport) {
+    // measured against the schedule recorded when the event ran, so this
+    // agrees with the report panel and survives later rundown edits
+    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 absDifference = Math.abs(variance.delta);
+    const isOver = variance.status === 'over';
    const fullTimeValue = millisToString(absDifference);
-
    const tooltip = `Event ran ${isOver ? 'over' : 'under'} time by ${fullTimeValue}`;
-
    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;
@@ -74,36 +74,42 @@
  .metaLabel {
    color: $muted-gray;
    font-size: calc(1rem - 3px);
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
  }
 }

+.strike {
+  text-decoration: wavy underline;
+  margin-right: 0.25rem;
+  color: $ui-white;
+}
+
 .duration {
  display: flex;
  align-items: center;
  gap: 0.25rem;
-  color: $ui-white;
-
-  &.warning {
-    .strike {
-      // color: $playback-over;
-      text-decoration: wavy underline;
-      text-decoration-color: $playback-over;
-    }
-    .offsetLabel {
-      background-color: $playback-over;
-    }
-  }
 }

 .lockIcon {
-  color: $muted-gray;
+  opacity: 0.6;
 }

-.target {
-  display: contents;
+.over {
+  color: $playback-over;
+  .strike {
+    text-decoration-color: $playback-over;
+  }
+  .offsetLabel {
+    background-color: $playback-over;
+  }
+}
+.under {
+  color: $playback-under;
+  .strike {
+    text-decoration-color: $playback-under;
+  }
+  .offsetLabel {
+    background-color: $playback-under;
+  }
 }

 .drag {
@@ -2,25 +2,24 @@ import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { EntryId, OntimeGroup } from 'ontime-types';
 import { MILLIS_PER_MINUTE } from 'ontime-utils';
-import { MouseEvent, useCallback, useRef } from 'react';
+import { MouseEvent, useRef } from 'react';
 import {
  IoChevronDown,
  IoChevronUp,
  IoDuplicateOutline,
  IoFolderOpenOutline,
+  IoLockClosed,
  IoReorderTwo,
  IoTrash,
-  IoLockClosed,
 } from 'react-icons/io5';
-import { TbClockPin } from 'react-icons/tb';

 import IconButton from '../../../common/components/buttons/IconButton';
 import Tag from '../../../common/components/tag/Tag';
-import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
 import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';
+import { getOffsetState } from '../../../common/utils/offset';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import { formatDuration, formatTime } from '../../../common/utils/time';
 import TitleEditor from '../common/TitleEditor';
@@ -41,31 +40,12 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
  'use memo';

  const handleRef = useRef<null | HTMLSpanElement>(null);
-  const { clone, ungroup, deleteEntry, updateEntry } = useEntryActionsContext();
+  const { clone, ungroup, deleteEntry } = useEntryActionsContext();

  const selectSingleEntry = useEventSelection((state) => state.setSingleEntrySelection);
  const selectedEvents = useEventSelection((state) => state.selectedEvents);
  const entryCopyId = useEntryCopy((state) => state.entryCopyId);

-  const isDurationMatching = data.targetDuration !== null && data.targetDuration === data.duration;
-
-  const [planOffset, offset] = (() => {
-    if (data.targetDuration === null) {
-      return [null, 0];
-    }
-
-    const offset = data.duration - data.targetDuration;
-    if (offset === 0) {
-      return [null, 0];
-    }
-    const absOffset = Math.abs(offset);
-    return [`${offset < 0 ? '-' : '+'}${formatDuration(absOffset, absOffset > 2 * MILLIS_PER_MINUTE)}`, offset];
-  })();
-
-  const matchDuration = useCallback(() => {
-    updateEntry({ id: data.id, targetDuration: data.duration });
-  }, [data.duration, data.id, updateEntry]);
-
  const [onContextMenu] = useContextMenu<HTMLDivElement>(() => [
    {
      type: 'item',
@@ -82,18 +62,6 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
      disabled: data.entries.length === 0,
    },
    { type: 'divider' },
-    {
-      type: 'item',
-      label: 'Match Content Duration',
-      icon: TbClockPin,
-      onClick: matchDuration,
-      disabled: isDurationMatching,
-      description:
-        offset > 0
-          ? "Increase group target duration to match it's contents"
-          : "Decrease group target duration to match it's contents",
-    },
-    { type: 'divider' },
    {
      type: 'item',
      label: 'Delete Group',
@@ -137,6 +105,22 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
  const binderColours = data.colour && getAccessibleColour(data.colour);
  const isValidDrop = isDragging && over?.id && canDrop(over.data.current?.type, over.data.current?.parent);

+  const [planOffset, planOffsetLabel] = (() => {
+    if (data.targetDuration === null) {
+      return [null, null];
+    }
+
+    const offset = data.duration - data.targetDuration;
+    if (offset === 0) {
+      return [null, 'under'];
+    }
+    const absOffset = Math.abs(offset);
+    return [
+      `${offset < 0 ? '-' : '+'}${formatDuration(absOffset, absOffset > 2 * MILLIS_PER_MINUTE)}`,
+      getOffsetState(offset),
+    ];
+  })();
+
  const dragStyle = {
    zIndex: isDragging ? 2 : 'inherit',
    transform: CSS.Translate.toString(transform),
@@ -191,18 +175,20 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
            <div className={style.metaLabel}>End</div>
            <div>{formatTime(data.timeEnd)}</div>
          </div>
-          <Tooltip text={'Group has target duration'} disabled={data.targetDuration === null}>
-            <div className={style.metaEntry}>
-              <div className={style.metaLabel}>
-                Duration
-                {data.targetDuration !== null && <IoLockClosed className={style.lockIcon} />}
-              </div>
-              <div className={cx([style.duration, planOffset && style.warning])}>
-                <span className={style.strike}>{formatDuration(data.duration)}</span>
-                {planOffset && <Tag className={style.offsetLabel}>{planOffset}</Tag>}
-              </div>
+          <div className={style.metaEntry}>
+            <div className={style.metaLabel}>Duration</div>
+            <div className={style.duration}>
+              {planOffset === null ? (
+                formatDuration(data.duration)
+              ) : (
+                <span className={cx([planOffsetLabel && style[planOffsetLabel]])}>
+                  <span className={style.strike}>{formatDuration(data.duration)}</span>
+                  <Tag className={style.offsetLabel}>{planOffset}</Tag>
+                </span>
+              )}
+              {data.targetDuration !== null && <IoLockClosed className={style.lockIcon} />}
            </div>
-          </Tooltip>
+          </div>
        </div>
      </div>
    </div>
@@ -35,7 +35,6 @@ export default function GenerateLinkFormExport({ lockedPath }: GenerateLinkFormE
      { value: OntimeView.Timer, label: 'Timer' },
      { value: OntimeView.Cuesheet, label: 'Cuesheet' },
      { value: OntimeView.Operator, label: 'Operator' },
-      { value: OntimeView.Teleprompter, label: 'Teleprompter' },
      { value: '<<companion>>', label: 'Companion' },
      ...urlPresetData.map((preset) => ({
        value: `preset-${preset.alias}`,
@@ -4,7 +4,6 @@ export const navigatorConstants = [
  { url: 'timeline', label: 'Timeline' },
  { url: 'studio', label: 'Studio Clock' },
  { url: 'countdown', label: 'Countdown' },
-  { url: 'teleprompter', label: 'Teleprompter' },
  { url: 'info', label: 'Project Info' },
 ];

@@ -1,201 +0,0 @@
-@use '@/theme/viewerDefs' as *;
-
-.teleprompter {
-  --tp-flip-x: 1;
-  --tp-flip-y: 1;
-
-  /* Keep shared stage-screen settings usable on smaller clients. */
-  --tp-font-size: min(var(--tp-configured-font-size), 8vw);
-
-  position: relative;
-  height: 100dvh;
-  width: 100%;
-  overflow: hidden;
-
-  font-family: var(--font-family-override, $viewer-font-family);
-  background: var(--background-color-override, #000000);
-  color: var(--color-override, #ffffff);
-
-  transform: scale(var(--tp-flip-x), var(--tp-flip-y));
-  transform-origin: center center;
-
-  &--flip-h {
-    --tp-flip-x: -1;
-  }
-
-  &--flip-v {
-    --tp-flip-y: -1;
-  }
-}
-
-.teleprompter__scroller {
-  height: 100%;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-
-  /* The animation loop is the only writer of scrollTop. */
-  overflow-anchor: none;
-  scroll-behavior: auto;
-
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.teleprompter__content {
-  width: var(--tp-text-width);
-  margin-inline: auto;
-
-  font-size: var(--tp-font-size);
-  line-height: var(--tp-line-height);
-
-  /* Percent padding resolves against width, so use viewport-height units. */
-  padding-top: calc(var(--tp-reading-line) * 1dvh);
-  padding-bottom: calc(100dvh - var(--tp-reading-line) * 1dvh);
-}
-
-.teleprompter__block {
-  margin-bottom: 1em;
-
-  &[data-loaded] .teleprompter__heading {
-    color: $accent-color;
-  }
-}
-
-.teleprompter__group {
-  font-size: 0.34em;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: $viewer-label-color;
-  margin-bottom: 0.35em;
-}
-
-.teleprompter__heading {
-  font-size: 0.38em;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: $viewer-secondary-color;
-  margin-bottom: 0.3em;
-}
-
-.teleprompter__body {
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-}
-
-.teleprompter__dim {
-  position: absolute;
-  inset: 0 0 auto 0;
-  height: calc(var(--tp-reading-line) * 1%);
-  pointer-events: none;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
-}
-
-.teleprompter__reading-line {
-  position: absolute;
-  top: calc(var(--tp-reading-line) * 1%);
-  left: 0;
-  right: 0;
-  width: var(--tp-text-width);
-  margin-inline: auto;
-  height: calc(var(--tp-font-size) * var(--tp-line-height));
-  pointer-events: none;
-}
-
-.teleprompter__reading-marker {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  background: $accent-color;
-  clip-path: polygon(0 0, 100% 50%, 0 100%);
-  font-size: var(--tp-font-size);
-
-  --tp-gutter: max(0px, calc((100vw - 100%) / 2));
-  width: min(1.2em, calc(var(--tp-gutter) * 0.6));
-  right: calc(100% + var(--tp-gutter) * 0.2);
-}
-
-.teleprompter__controls {
-  position: absolute;
-  bottom: min(2vh, 16px);
-  left: 50%;
-
-  /* Cancel the view flip so controls remain readable to the operator. */
-  transform: translateX(-50%) scale(var(--tp-flip-x), var(--tp-flip-y));
-
-  display: flex;
-  align-items: center;
-  gap: min(1vh, 8px);
-  padding: min(1vh, 8px) clamp(8px, 1vw, 16px);
-
-  background: rgba(white, 8%);
-  border-radius: $element-border-radius;
-  backdrop-filter: blur(6px);
-
-  opacity: 1;
-  transition: opacity $viewer-transition-time;
-
-  &--idle {
-    opacity: 0;
-    pointer-events: none;
-  }
-}
-
-.teleprompter__speed {
-  display: flex;
-  align-items: baseline;
-  gap: 0.2em;
-  min-width: 4em;
-  justify-content: center;
-  font-size: clamp(14px, 1.4vw, 22px);
-  font-variant-numeric: tabular-nums;
-}
-
-.teleprompter__speed-unit {
-  font-size: 0.6em;
-  color: $viewer-label-color;
-}
-
-.teleprompter__help {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.75);
-}
-
-.teleprompter__help-card {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  width: min(92vw, 32rem);
-  max-height: 85dvh;
-  overflow-y: auto;
-  padding: 1.5rem;
-
-  background: $viewer-background-color;
-  color: $viewer-color;
-  border-radius: $element-border-radius;
-  font-size: 1rem;
-}
-
-.teleprompter__help-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-bottom: 1.25rem;
-}
-
-.teleprompter__help-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.teleprompter__help-groups {
-  --shortcut-title-color: #{$viewer-label-color};
-  --shortcut-label-color: #{$viewer-secondary-color};
-  --shortcut-separator-color: #{$viewer-label-color};
-}
@@ -1,175 +0,0 @@
-import { OntimeView } from 'ontime-types';
-import { type CSSProperties, useState } from 'react';
-
-import EmptyPage from '../../common/components/state/EmptyPage';
-import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
-import { useSelectedEventId } from '../../common/hooks/useSocket';
-import { useWindowTitle } from '../../common/hooks/useWindowTitle';
-import { useViewOptionsStore } from '../../common/stores/viewOptions';
-import { cx } from '../../common/utils/styleUtils';
-import Loader from '../common/loader/Loader';
-import ControlOverlay from './control-overlay/ControlOverlay';
-import HelpOverlay from './help-overlay/HelpOverlay';
-import ScriptBlockView from './script-block/ScriptBlock';
-import { defaults, getTeleprompterOptions, useTeleprompterOptions } from './teleprompter.options';
-import { stepFontSize } from './teleprompter.scroll';
-import { buildScript, composeFlip } from './teleprompter.utils';
-import { useSyncTeleprompterParams } from './useSyncTeleprompterParams';
-import { useTeleprompterControls } from './useTeleprompterControls';
-import { type TeleprompterData, useTeleprompterData } from './useTeleprompterData';
-import { useTeleprompterScroll } from './useTeleprompterScroll';
-
-import './Teleprompter.scss';
-
-export default function TeleprompterLoader() {
-  const { data, status } = useTeleprompterData();
-
-  useWindowTitle('Teleprompter');
-
-  if (status === 'pending') {
-    return <Loader />;
-  }
-
-  if (status === 'error') {
-    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
-  }
-
-  return <Teleprompter {...data} />;
-}
-
-function Teleprompter({ rundown, rundownMetadata, customFields }: TeleprompterData) {
-  'use memo';
-
-  const options = useTeleprompterOptions();
-  const selectedEventId = useSelectedEventId();
-  const isMirrored = useViewOptionsStore((state) => state.mirror);
-
-  const [showHelp, setShowHelp] = useState(false);
-
-  const fromParams = { flipH: options.flipH, flipV: options.flipV, fontSize: options.fontSize };
-  const paramsKey = `${fromParams.flipH}|${fromParams.flipV}|${fromParams.fontSize}`;
-
-  const [live, setLive] = useState(fromParams);
-  const [seededFrom, setSeededFrom] = useState(paramsKey);
-  // Reset live controls before commit when the URL configuration changes.
-  if (seededFrom !== paramsKey) {
-    setSeededFrom(paramsKey);
-    setLive(fromParams);
-  }
-
-  const viewOptions = getTeleprompterOptions(customFields);
-
-  const blocks = buildScript(rundown, rundownMetadata, customFields, {
-    scriptSource: options.scriptSource,
-    heading: options.heading,
-    hideEmpty: options.hideEmpty,
-    showGroups: options.showGroups,
-  });
-
-  const {
-    scrollerRef,
-    contentRef,
-    registerBlock,
-    handleUserScroll,
-    controller,
-    isRunning,
-    speed,
-    followLocked,
-    atEnd,
-  } = useTeleprompterScroll({
-    initialSpeed: options.speed,
-    followLoaded: options.followLoaded,
-    selectedEventId,
-    readingLinePos: options.readingLinePos,
-    blocks,
-  });
-
-  const handleFlip = (axis: 'h' | 'v') =>
-    setLive((current) => {
-      const key = axis === 'h' ? 'flipH' : 'flipV';
-      return { ...current, [key]: !current[key] };
-    });
-
-  const handleFontSize = (steps: number) =>
-    setLive((current) => ({ ...current, fontSize: stepFontSize(current.fontSize, steps) }));
-
-  const handleResetFontSize = () => setLive((current) => ({ ...current, fontSize: defaults.fontSize }));
-  const handleToggleHelp = () => setShowHelp((current) => !current);
-
-  useSyncTeleprompterParams({ speed, fontSize: live.fontSize, flipH: live.flipH, flipV: live.flipV });
-
-  useTeleprompterControls({
-    controller,
-    isHelpOpen: showHelp,
-    onFlip: handleFlip,
-    onFontSize: handleFontSize,
-    onResetFontSize: handleResetFontSize,
-    onToggleHelp: handleToggleHelp,
-  });
-
-  const hasScriptSource = options.scriptSource !== 'none';
-
-  const effectiveFlip = composeFlip(live.flipH, live.flipV, isMirrored);
-
-  const viewStyles = {
-    '--tp-configured-font-size': `${live.fontSize}px`,
-    '--tp-line-height': options.lineHeight,
-    '--tp-text-width': `${options.textWidth}%`,
-    '--tp-reading-line': options.readingLinePos,
-  } as CSSProperties;
-
-  return (
-    <div
-      className={cx([
-        'teleprompter',
-        effectiveFlip.flipH && 'teleprompter--flip-h',
-        effectiveFlip.flipV && 'teleprompter--flip-v',
-      ])}
-      style={viewStyles}
-      data-testid='teleprompter-view'
-    >
-      <ViewParamsEditor target={OntimeView.Teleprompter} viewOptions={viewOptions} />
-
-      {!hasScriptSource ? (
-        <EmptyPage text='Select which field holds the script in the view options' />
-      ) : blocks.length === 0 ? (
-        <EmptyPage text='There is no script text in the selected field' />
-      ) : (
-        <>
-          <div
-            className='teleprompter__scroller'
-            data-testid='teleprompter-scroller'
-            ref={scrollerRef}
-            onWheel={handleUserScroll}
-            onTouchMove={handleUserScroll}
-            onPointerDown={handleUserScroll}
-          >
-            <div className='teleprompter__content' ref={contentRef}>
-              {blocks.map((block) => (
-                <ScriptBlockView key={block.id} block={block} registerRef={registerBlock} />
-              ))}
-            </div>
-          </div>
-
-          <div className='teleprompter__dim' />
-          {options.readingLine && (
-            <div className='teleprompter__reading-line'>
-              <span className='teleprompter__reading-marker' />
-            </div>
-          )}
-
-          <ControlOverlay
-            isRunning={isRunning}
-            speed={speed}
-            canReengageFollow={followLocked && options.followLoaded}
-            atEnd={atEnd}
-            controller={controller}
-            onToggleHelp={handleToggleHelp}
-          />
-        </>
-      )}
-
-      <HelpOverlay isOpen={showHelp} onClose={handleToggleHelp} />
-    </div>
-  );
-}
@@ -1,96 +0,0 @@
-import { resolveTeleprompterAction, type TeleprompterKeyEvent } from '../teleprompter.keymap';
-import { SPEED_STEP, SPEED_STEP_COARSE } from '../teleprompter.scroll';
-
-function makeEvent(overrides: Partial<TeleprompterKeyEvent>): TeleprompterKeyEvent {
-  return {
-    code: '',
-    key: '',
-    shiftKey: false,
-    ctrlKey: false,
-    metaKey: false,
-    altKey: false,
-    repeat: false,
-    ...overrides,
-  };
-}
-
-describe('resolveTeleprompterAction()', () => {
-  test('space toggles playback', () => {
-    expect(resolveTeleprompterAction(makeEvent({ code: 'Space' }))).toEqual({ type: 'togglePlay' });
-  });
-
-  test('ignores a repeating space', () => {
-    expect(resolveTeleprompterAction(makeEvent({ code: 'Space', repeat: true }))).toBeNull();
-  });
-
-  test('vertical arrows nudge by a line', () => {
-    expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowDown' }))).toEqual({ type: 'nudge', lines: 1 });
-    expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowUp' }))).toEqual({ type: 'nudge', lines: -1 });
-  });
-
-  test('a repeating arrow still nudges, so the key can be held', () => {
-    expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowDown', repeat: true }))).toEqual({
-      type: 'nudge',
-      lines: 1,
-    });
-  });
-
-  test('page keys jump a screen', () => {
-    expect(resolveTeleprompterAction(makeEvent({ code: 'PageDown' }))).toEqual({ type: 'page', direction: 1 });
-    expect(resolveTeleprompterAction(makeEvent({ code: 'PageUp' }))).toEqual({ type: 'page', direction: -1 });
-  });
-
-  test('horizontal arrows change speed', () => {
-    expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowRight' }))).toEqual({ type: 'speed', delta: SPEED_STEP });
-    expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowLeft' }))).toEqual({ type: 'speed', delta: -SPEED_STEP });
-  });
-
-  test('shift makes the speed step coarse', () => {
-    expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowRight', shiftKey: true }))).toEqual({
-      type: 'speed',
-      delta: SPEED_STEP_COARSE,
-    });
-    expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowLeft', shiftKey: true }))).toEqual({
-      type: 'speed',
-      delta: -SPEED_STEP_COARSE,
-    });
-  });
-
-  test('home rewinds and escape rewinds and stops', () => {
-    expect(resolveTeleprompterAction(makeEvent({ code: 'Home' }))).toEqual({ type: 'rewind' });
-    expect(resolveTeleprompterAction(makeEvent({ code: 'Escape' }))).toEqual({ type: 'rewindAndPause' });
-    expect(resolveTeleprompterAction(makeEvent({ code: 'End' }))).toEqual({ type: 'jumpToEnd' });
-  });
-
-  test('f flips, shift+f flips the other axis', () => {
-    expect(resolveTeleprompterAction(makeEvent({ key: 'f' }))).toEqual({ type: 'flip', axis: 'h' });
-    expect(resolveTeleprompterAction(makeEvent({ key: 'F', shiftKey: true }))).toEqual({ type: 'flip', axis: 'v' });
-  });
-
-  test('changes and resets the font size', () => {
-    expect(resolveTeleprompterAction(makeEvent({ key: '+' }))).toEqual({ type: 'fontSize', steps: 1 });
-    expect(resolveTeleprompterAction(makeEvent({ key: '=' }))).toEqual({ type: 'fontSize', steps: 1 });
-    expect(resolveTeleprompterAction(makeEvent({ key: '-' }))).toEqual({ type: 'fontSize', steps: -1 });
-    expect(resolveTeleprompterAction(makeEvent({ key: '_' }))).toEqual({ type: 'fontSize', steps: -1 });
-    expect(resolveTeleprompterAction(makeEvent({ key: '0' }))).toEqual({ type: 'resetFontSize' });
-  });
-
-  test('l re-engages the follow and ? shows the help', () => {
-    expect(resolveTeleprompterAction(makeEvent({ key: 'l' }))).toEqual({ type: 'reengageFollow' });
-    expect(resolveTeleprompterAction(makeEvent({ key: '?', shiftKey: true }))).toEqual({ type: 'toggleHelp' });
-  });
-
-  test('never shadows a shortcut which carries a modifier', () => {
-    expect(resolveTeleprompterAction(makeEvent({ key: ',', metaKey: true }))).toBeNull();
-    expect(resolveTeleprompterAction(makeEvent({ code: 'Space', ctrlKey: true }))).toBeNull();
-    expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowRight', altKey: true }))).toBeNull();
-  });
-
-  test('ignores keys it does not bind', () => {
-    expect(resolveTeleprompterAction(makeEvent({ code: 'KeyQ', key: 'q' }))).toBeNull();
-  });
-
-  test('leaves Enter alone, so a focused transport button can still be pressed', () => {
-    expect(resolveTeleprompterAction(makeEvent({ code: 'Enter', key: 'Enter' }))).toBeNull();
-  });
-});
@@ -1,109 +0,0 @@
-import { getOptionsFromParams, getTeleprompterOptions } from '../teleprompter.options';
-import { DEFAULT_SPEED, MAX_SPEED, MIN_SPEED } from '../teleprompter.scroll';
-
-describe('getOptionsFromParams()', () => {
-  test('provides sensible defaults with no params', () => {
-    const options = getOptionsFromParams(new URLSearchParams());
-
-    expect(options).toMatchObject({
-      scriptSource: 'none',
-      heading: 'title',
-      hideEmpty: true,
-      showGroups: true,
-      speed: DEFAULT_SPEED,
-      followLoaded: true,
-      fontSize: 52,
-      lineHeight: 1.3,
-      textWidth: 80,
-      readingLine: true,
-      readingLinePos: 25,
-      flipH: false,
-      flipV: false,
-    });
-  });
-
-  test('reads the script source verbatim so it can be handed to getPropertyValue', () => {
-    const options = getOptionsFromParams(new URLSearchParams('script=custom-prompter'));
-    expect(options.scriptSource).toBe('custom-prompter');
-  });
-
-  test('booleans which default to true can be turned off', () => {
-    const options = getOptionsFromParams(
-      new URLSearchParams('hideEmpty=false&showGroups=false&followLoaded=false&readingLine=false'),
-    );
-
-    expect(options).toMatchObject({
-      hideEmpty: false,
-      showGroups: false,
-      followLoaded: false,
-      readingLine: false,
-    });
-  });
-
-  test('booleans which default to false can be turned on', () => {
-    const options = getOptionsFromParams(new URLSearchParams('flipH=true&flipV=true'));
-
-    expect(options).toMatchObject({
-      flipH: true,
-      flipV: true,
-    });
-  });
-
-  test('clamps the speed to the usable range', () => {
-    expect(getOptionsFromParams(new URLSearchParams('speed=1000')).speed).toBe(MAX_SPEED);
-    expect(getOptionsFromParams(new URLSearchParams('speed=0')).speed).toBe(MIN_SPEED);
-  });
-
-  test('falls back to the default for a non numeric value', () => {
-    expect(getOptionsFromParams(new URLSearchParams('speed=fast')).speed).toBe(DEFAULT_SPEED);
-    expect(getOptionsFromParams(new URLSearchParams('speed=')).speed).toBe(DEFAULT_SPEED);
-    expect(getOptionsFromParams(new URLSearchParams('fontSize=huge')).fontSize).toBe(52);
-  });
-
-  test('rejects an unknown value for an enumerated option', () => {
-    expect(getOptionsFromParams(new URLSearchParams('heading=banana')).heading).toBe('title');
-  });
-
-  test('preset values take precedence over the search params', () => {
-    const options = getOptionsFromParams(
-      new URLSearchParams('speed=10&script=custom-a'),
-      new URLSearchParams('speed=20&script=custom-b'),
-    );
-
-    expect(options.speed).toBe(20);
-    expect(options.scriptSource).toBe('custom-b');
-  });
-});
-
-describe('getTeleprompterOptions()', () => {
-  test('every declared default is what parsing an empty query produces', () => {
-    const parsed = getOptionsFromParams(new URLSearchParams()) as Record<string, unknown>;
-    const parsedByParamId: Record<string, unknown> = { ...parsed, script: parsed.scriptSource };
-
-    const declared = getTeleprompterOptions({}).flatMap((section) => section.options);
-    expect(declared.length).toBeGreaterThan(0);
-
-    for (const field of declared) {
-      if (!('defaultValue' in field) || field.defaultValue === undefined) continue;
-      const expected = field.defaultValue;
-      expect({ id: field.id, value: parsedByParamId[field.id] }).toEqual({ id: field.id, value: expected });
-    }
-  });
-});
-
-describe('option value round trip', () => {
-  test('every value the editor offers survives parsing', () => {
-    const selects = getTeleprompterOptions({})
-      .flatMap((section) => section.options)
-      .filter((field) => field.type === 'option' && field.id !== 'script');
-
-    expect(selects.length).toBeGreaterThan(0);
-
-    for (const field of selects) {
-      for (const { value } of field.values) {
-        const parsed = getOptionsFromParams(new URLSearchParams(`${field.id}=${value}`)) as Record<string, unknown>;
-        expect({ id: field.id, value, parsed: parsed[field.id] }).toEqual({ id: field.id, value, parsed: value });
-      }
-    }
-  });
-});
@@ -1,139 +0,0 @@
-import {
-  advance,
-  clampSpeed,
-  easeCatchUp,
-  frameDeltaSeconds,
-  linesPerMinuteToPxPerSecond,
-  MAX_FONT_SIZE,
-  MAX_FRAME_DELTA_MS,
-  MAX_SPEED,
-  MIN_FONT_SIZE,
-  MIN_SPEED,
-  stepFontSize,
-} from '../teleprompter.scroll';
-
-describe('linesPerMinuteToPxPerSecond()', () => {
-  test('converts a read rate into a pixel rate', () => {
-    // 30 lines a minute over a 64px line is half a line a second
-    expect(linesPerMinuteToPxPerSecond(30, 64)).toBe(32);
-  });
-});
-
-describe('stepFontSize()', () => {
-  test('steps by a ratio, so a press is the same visual change at any size', () => {
-    // a fixed pixel step would be a big jump at 20px and imperceptible at 200px
-    expect(stepFontSize(100, 1)).toBe(110);
-    expect(stepFontSize(20, 1)).toBe(22);
-  });
-
-  test('shrinking undoes growing', () => {
-    expect(stepFontSize(stepFontSize(50, 1), -1)).toBe(50);
-  });
-
-  test('stays inside the range the option accepts', () => {
-    expect(stepFontSize(MAX_FONT_SIZE, 5)).toBe(MAX_FONT_SIZE);
-    expect(stepFontSize(MIN_FONT_SIZE, -5)).toBe(MIN_FONT_SIZE);
-  });
-});
-
-describe('clampSpeed()', () => {
-  test('bounds the speed to the usable range', () => {
-    expect(clampSpeed(MIN_SPEED - 10)).toBe(MIN_SPEED);
-    expect(clampSpeed(MAX_SPEED + 10)).toBe(MAX_SPEED);
-    expect(clampSpeed(30)).toBe(30);
-  });
-
-  test('falls back to the minimum for a non number, rather than stalling at zero', () => {
-    expect(clampSpeed(Number.NaN)).toBe(MIN_SPEED);
-  });
-});
-
-describe('frameDeltaSeconds()', () => {
-  test('clamps a long gap so returning to a background tab cannot teleport the script', () => {
-    // requestAnimationFrame is suspended while hidden, so the first timestamp
-    // back can be minutes stale
-    expect(frameDeltaSeconds(1000 / 60)).toBeCloseTo(1 / 60, 6);
-    expect(frameDeltaSeconds(60_000)).toBe(MAX_FRAME_DELTA_MS / 1000);
-  });
-
-  test('ignores nonsense deltas', () => {
-    expect(frameDeltaSeconds(-5)).toBe(0);
-    expect(frameDeltaSeconds(Number.NaN)).toBe(0);
-  });
-});
-
-describe('advance()', () => {
-  test('accumulates sub-pixel movement without losing any to rounding', () => {
-    // 32px/s sampled at 60fps is 0.53px a frame: rounding each frame would stall
-    const pxPerSecond = 32;
-    const frame = 1 / 60;
-    let position = 0;
-
-    for (let i = 0; i < 100; i += 1) {
-      position = advance(position, pxPerSecond, frame, 10_000).position;
-    }
-
-    expect(position).toBeCloseTo((pxPerSecond * 100) / 60, 5);
-  });
-
-  test('reports the end of the script once the bottom is reached', () => {
-    expect(advance(499, 100, 1, 500).atEnd).toBe(true);
-    expect(advance(100, 100, 1, 500).atEnd).toBe(false);
-  });
-
-  test('reports the end without bounding the position, which the caller owns', () => {
-    // the loop has to bound the position anyway, for nudges and for a document
-    // which shrank, so this does not do it a second time
-    expect(advance(490, 100, 1, 500)).toEqual({ position: 590, atEnd: true });
-  });
-
-  test('never reports the end for a document which does not overflow', () => {
-    // it may simply not have been measured yet, and stopping playback on an
-    // unmeasured document would look like the prompter refusing to run
-    expect(advance(0, 100, 1, 0).atEnd).toBe(false);
-  });
-});
-
-describe('easeCatchUp()', () => {
-  test('approaches the target monotonically from either side', () => {
-    let fromAbove = 500;
-    let fromBelow = 0;
-    let previousAbove = 501;
-    let previousBelow = -1;
-
-    for (let i = 0; i < 20; i += 1) {
-      fromBelow = easeCatchUp(fromBelow, 500, 1 / 60);
-      fromAbove = easeCatchUp(fromAbove, 0, 1 / 60);
-
-      expect(fromBelow).toBeGreaterThan(previousBelow);
-      expect(fromBelow).toBeLessThanOrEqual(500);
-      expect(fromAbove).toBeLessThan(previousAbove);
-      expect(fromAbove).toBeGreaterThanOrEqual(0);
-
-      previousBelow = fromBelow;
-      previousAbove = fromAbove;
-    }
-  });
-
-  test('settles exactly on the target instead of creeping forever', () => {
-    let position = 0;
-    for (let i = 0; i < 300; i += 1) {
-      position = easeCatchUp(position, 500, 1 / 60);
-    }
-    expect(position).toBe(500);
-  });
-
-  test('is framerate independent, so a jump takes the same time on any display', () => {
-    let atSixty = 0;
-    for (let i = 0; i < 60; i += 1) {
-      atSixty = easeCatchUp(atSixty, 1000, 1 / 60);
-    }
-
-    let atThirty = 0;
-    for (let i = 0; i < 30; i += 1) {
-      atThirty = easeCatchUp(atThirty, 1000, 1 / 30);
-    }
-
-    expect(atSixty).toBeCloseTo(atThirty, 3);
-  });
-});
@@ -1,218 +0,0 @@
-import { type CustomFields, type OntimeEntry, type Rundown, SupportedEntry } from 'ontime-types';
-
-import type { RundownMetadata, RundownMetadataObject } from '../../../common/utils/rundownMetadata';
-import { buildScript, composeFlip } from '../teleprompter.utils';
-
-function makeEvent(id: string, overrides: Partial<OntimeEntry> = {}): OntimeEntry {
-  return {
-    type: SupportedEntry.Event,
-    id,
-    cue: id.toUpperCase(),
-    title: `Title ${id}`,
-    note: `Note ${id}`,
-    skip: false,
-    custom: { script: `Script ${id}` },
-    parent: null,
-    ...overrides,
-  } as OntimeEntry;
-}
-
-function makeGroup(id: string, title: string, entries: string[]): OntimeEntry {
-  return { type: SupportedEntry.Group, id, title, entries } as OntimeEntry;
-}
-
-function makeMetadata(overrides: Partial<RundownMetadata> = {}): RundownMetadata {
-  return { isPast: false, isLoaded: false, groupId: null, ...overrides } as RundownMetadata;
-}
-
-function makeRundown(entries: OntimeEntry[], flatOrder?: string[]): Rundown {
-  return {
-    id: 'default',
-    title: 'test',
-    order: flatOrder ?? entries.map((entry) => entry.id),
-    flatOrder: flatOrder ?? entries.map((entry) => entry.id),
-    entries: Object.fromEntries(entries.map((entry) => [entry.id, entry])),
-    revision: 1,
-  };
-}
-
-const customFields: CustomFields = {
-  script: { type: 'text', colour: '', label: 'Script' },
-  poster: { type: 'image', colour: '', label: 'Poster' },
-};
-
-const defaultOptions = {
-  scriptSource: 'custom-script',
-  heading: 'title' as const,
-  hideEmpty: true,
-  showGroups: true,
-};
-
-function metadataFor(ids: string[], overrides: Record<string, Partial<RundownMetadata>> = {}): RundownMetadataObject {
-  return Object.fromEntries(ids.map((id) => [id, makeMetadata(overrides[id])]));
-}
-
-describe('buildScript()', () => {
-  test('resolves the script from the selected custom field, in rundown order', () => {
-    const rundown = makeRundown([makeEvent('a'), makeEvent('b')]);
-    const blocks = buildScript(rundown, metadataFor(['a', 'b']), customFields, defaultOptions);
-
-    expect(blocks).toHaveLength(2);
-    expect(blocks.map((block) => block.id)).toEqual(['a', 'b']);
-    expect(blocks[0].text).toBe('Script a');
-  });
-
-  test('returns nothing when no script source is selected', () => {
-    const rundown = makeRundown([makeEvent('a')]);
-    expect(buildScript(rundown, metadataFor(['a']), customFields, { ...defaultOptions, scriptSource: 'none' })).toEqual(
-      [],
-    );
-  });
-
-  test('refuses an image custom field, which the select filters but the URL does not', () => {
-    const rundown = makeRundown([makeEvent('a', { custom: { poster: 'https://example.com/a.png' } })]);
-    const blocks = buildScript(rundown, metadataFor(['a']), customFields, {
-      ...defaultOptions,
-      scriptSource: 'custom-poster',
-    });
-
-    expect(blocks).toEqual([]);
-  });
-
-  test('reads the note and the title as script sources', () => {
-    const rundown = makeRundown([makeEvent('a')]);
-    expect(
-      buildScript(rundown, metadataFor(['a']), customFields, { ...defaultOptions, scriptSource: 'note' })[0].text,
-    ).toBe('Note a');
-    expect(
-      buildScript(rundown, metadataFor(['a']), customFields, { ...defaultOptions, scriptSource: 'title' })[0].text,
-    ).toBe('Title a');
-  });
-
-  test('skips entries which are not events', () => {
-    const rundown = makeRundown([
-      makeEvent('a'),
-      { type: SupportedEntry.Delay, id: 'd', duration: 10 } as OntimeEntry,
-      { type: SupportedEntry.Milestone, id: 'm', title: 'milestone' } as OntimeEntry,
-    ]);
-
-    const blocks = buildScript(rundown, metadataFor(['a', 'd', 'm']), customFields, defaultOptions);
-    expect(blocks.map((block) => block.id)).toEqual(['a']);
-  });
-
-  test('skips events flagged as skipped', () => {
-    const rundown = makeRundown([makeEvent('a', { skip: true }), makeEvent('b')]);
-    const blocks = buildScript(rundown, metadataFor(['a', 'b']), customFields, defaultOptions);
-    expect(blocks.map((block) => block.id)).toEqual(['b']);
-  });
-
-  test('hideEmpty drops events with no script text', () => {
-    const rundown = makeRundown([makeEvent('a', { custom: { script: '   ' } }), makeEvent('b')]);
-
-    expect(buildScript(rundown, metadataFor(['a', 'b']), customFields, defaultOptions).map((b) => b.id)).toEqual(['b']);
-    expect(
-      buildScript(rundown, metadataFor(['a', 'b']), customFields, { ...defaultOptions, hideEmpty: false }).map(
-        (b) => b.id,
-      ),
-    ).toEqual(['a', 'b']);
-  });
-
-  test('marks the block belonging to the loaded event', () => {
-    const rundown = makeRundown([makeEvent('a'), makeEvent('b')]);
-    const metadata = metadataFor(['a', 'b'], { b: { isLoaded: true } });
-
-    const blocks = buildScript(rundown, metadata, customFields, defaultOptions);
-    expect(blocks.map((block) => block.isLoaded)).toEqual([false, true]);
-  });
-
-  test('emits a group title once, on the first block of the group', () => {
-    const rundown = makeRundown(
-      [makeGroup('g', 'Morning session', ['a', 'b']), makeEvent('a'), makeEvent('b')],
-      ['g', 'a', 'b'],
-    );
-    const metadata = metadataFor(['g', 'a', 'b'], { a: { groupId: 'g' }, b: { groupId: 'g' } });
-
-    const blocks = buildScript(rundown, metadata, customFields, defaultOptions);
-    expect(blocks.map((block) => block.groupTitle)).toEqual(['Morning session', null]);
-  });
-
-  test('emits each group title as the script moves between groups', () => {
-    const rundown = makeRundown(
-      [
-        makeGroup('g1', 'Morning session', ['a']),
-        makeEvent('a'),
-        makeGroup('g2', 'Afternoon session', ['b']),
-        makeEvent('b'),
-      ],
-      ['g1', 'a', 'g2', 'b'],
-    );
-    const metadata = metadataFor(['g1', 'a', 'g2', 'b'], { a: { groupId: 'g1' }, b: { groupId: 'g2' } });
-
-    const blocks = buildScript(rundown, metadata, customFields, defaultOptions);
-    expect(blocks.map((block) => block.groupTitle)).toEqual(['Morning session', 'Afternoon session']);
-  });
-
-  test('repeats a group title when the script returns to it after an ungrouped event', () => {
-    // the reader has lost the context by then, so naming the group again is right
-    const rundown = makeRundown(
-      [makeGroup('g', 'Morning session', ['a', 'c']), makeEvent('a'), makeEvent('b'), makeEvent('c')],
-      ['g', 'a', 'b', 'c'],
-    );
-    const metadata = metadataFor(['g', 'a', 'b', 'c'], { a: { groupId: 'g' }, c: { groupId: 'g' } });
-
-    const blocks = buildScript(rundown, metadata, customFields, defaultOptions);
-    expect(blocks.map((block) => block.groupTitle)).toEqual(['Morning session', null, 'Morning session']);
-  });
-
-  test('does not emit group titles when they are turned off', () => {
-    const rundown = makeRundown([makeGroup('g', 'Morning session', ['a']), makeEvent('a')], ['g', 'a']);
-    const metadata = metadataFor(['g', 'a'], { a: { groupId: 'g' } });
-
-    const blocks = buildScript(rundown, metadata, customFields, { ...defaultOptions, showGroups: false });
-    expect(blocks[0].groupTitle).toBeNull();
-  });
-
-  describe('headings', () => {
-    const rundown = makeRundown([makeEvent('a')]);
-    const metadata = metadataFor(['a']);
-
-    test('shows the title, the cue, both, or nothing', () => {
-      expect(buildScript(rundown, metadata, customFields, { ...defaultOptions, heading: 'title' })[0].heading).toBe(
-        'Title a',
-      );
-      expect(buildScript(rundown, metadata, customFields, { ...defaultOptions, heading: 'cue' })[0].heading).toBe('A');
-      expect(buildScript(rundown, metadata, customFields, { ...defaultOptions, heading: 'both' })[0].heading).toBe(
-        'A · Title a',
-      );
-      expect(buildScript(rundown, metadata, customFields, { ...defaultOptions, heading: 'none' })[0].heading).toBe('');
-    });
-
-    test('leaves no dangling separator when an event has no cue', () => {
-      const noCue = makeRundown([makeEvent('a', { cue: '' })]);
-      expect(buildScript(noCue, metadata, customFields, { ...defaultOptions, heading: 'both' })[0].heading).toBe(
-        'Title a',
-      );
-    });
-  });
-});
-
-describe('composeFlip()', () => {
-  test('passes the per view flips through when Flip Screen is off', () => {
-    expect(composeFlip(false, false, false)).toEqual({ flipH: false, flipV: false });
-    expect(composeFlip(true, false, false)).toEqual({ flipH: true, flipV: false });
-    expect(composeFlip(false, true, false)).toEqual({ flipH: false, flipV: true });
-  });
-
-  test('Flip Screen alone flips both axes, matching rotate(180deg) in every other view', () => {
-    expect(composeFlip(false, false, true)).toEqual({ flipH: true, flipV: true });
-  });
-
-  test('a horizontal flip and Flip Screen leave only the vertical axis flipped', () => {
-    // scale(-1, 1) composed with scale(-1, -1) is scale(1, -1)
-    expect(composeFlip(true, false, true)).toEqual({ flipH: false, flipV: true });
-  });
-
-  test('both flips cancel Flip Screen out', () => {
-    expect(composeFlip(true, true, true)).toEqual({ flipH: false, flipV: false });
-  });
-});
@@ -1,135 +0,0 @@
-import type { MouseEvent } from 'react';
-import { IoAdd, IoArrowUp, IoHelpCircleOutline, IoLocate, IoPause, IoPlay, IoRemove } from 'react-icons/io5';
-
-import IconButton from '../../../common/components/buttons/IconButton';
-import Tooltip from '../../../common/components/tooltip/Tooltip';
-import { useFadeOutOnInactivity } from '../../../common/hooks/useFadeOutOnInactivity';
-import { cx } from '../../../common/utils/styleUtils';
-import { SPEED_STEP } from '../teleprompter.scroll';
-import type { TeleprompterController } from '../teleprompter.types';
-
-interface ControlOverlayProps {
-  isRunning: boolean;
-  speed: number;
-  canReengageFollow: boolean;
-  atEnd: boolean;
-  controller: TeleprompterController;
-  onToggleHelp: () => void;
-}
-
-export default function ControlOverlay({
-  isRunning,
-  speed,
-  canReengageFollow,
-  atEnd,
-  controller,
-  onToggleHelp,
-}: ControlOverlayProps) {
-  const isActive = useFadeOutOnInactivity(true);
-
-  // Pointer activation yields focus so the next Space reaches the transport.
-  const press = (action: () => void) => (event: MouseEvent<HTMLButtonElement>) => {
-    if (event.detail > 0) {
-      event.currentTarget.blur();
-    }
-    action();
-  };
-
-  return (
-    <div className={cx(['teleprompter__controls', !isActive && 'teleprompter__controls--idle'])}>
-      <Tooltip
-        text={isRunning ? 'Pause (Space)' : 'Play (Space)'}
-        render={
-          <IconButton
-            variant='subtle-white'
-            size='large'
-            onClick={press(controller.togglePlay)}
-            data-testid='teleprompter-play'
-            aria-label={isRunning ? 'Pause' : 'Play'}
-          />
-        }
-      >
-        {isRunning ? <IoPause /> : <IoPlay />}
-      </Tooltip>
-
-      <Tooltip
-        text='Slow down (Left arrow)'
-        render={
-          <IconButton
-            variant='subtle-white'
-            size='large'
-            onClick={press(() => controller.changeSpeed(-SPEED_STEP))}
-            aria-label='Slow down'
-          />
-        }
-      >
-        <IoRemove />
-      </Tooltip>
-
-      <div className='teleprompter__speed' data-testid='teleprompter-speed'>
-        {speed}
-        <span className='teleprompter__speed-unit'>lpm</span>
-      </div>
-
-      <Tooltip
-        text='Speed up (Right arrow)'
-        render={
-          <IconButton
-            variant='subtle-white'
-            size='large'
-            onClick={press(() => controller.changeSpeed(SPEED_STEP))}
-            aria-label='Speed up'
-          />
-        }
-      >
-        <IoAdd />
-      </Tooltip>
-
-      <Tooltip
-        text='Rewind to the top (Home)'
-        render={
-          <IconButton
-            variant={atEnd ? 'primary' : 'subtle-white'}
-            size='large'
-            onClick={press(() => controller.rewind())}
-            aria-label='Rewind to top'
-          />
-        }
-      >
-        <IoArrowUp />
-      </Tooltip>
-
-      <Tooltip
-        text={
-          canReengageFollow ? 'Jump back to the loaded event and follow it again (L)' : 'Following the loaded event'
-        }
-        render={
-          <IconButton
-            variant={canReengageFollow ? 'primary' : 'subtle-white'}
-            size='large'
-            disabled={!canReengageFollow}
-            onClick={press(controller.reengageFollow)}
-            data-testid='teleprompter-follow'
-            aria-label='Follow the loaded event'
-          />
-        }
-      >
-        <IoLocate />
-      </Tooltip>
-
-      <Tooltip
-        text='Keyboard shortcuts (?)'
-        render={
-          <IconButton
-            variant='subtle-white'
-            size='large'
-            onClick={press(onToggleHelp)}
-            aria-label='Keyboard shortcuts'
-          />
-        }
-      >
-        <IoHelpCircleOutline />
-      </Tooltip>
-    </div>
-  );
-}
@@ -1,102 +0,0 @@
-import { Dialog } from '@base-ui/react/dialog';
-import { IoClose } from 'react-icons/io5';
-
-import IconButton from '../../../common/components/buttons/IconButton';
-import {
-  Combo,
-  Separator,
-  Shortcut,
-  ShortcutGroup,
-  ShortcutGroups,
-} from '../../../common/components/keyboard-shortcuts/KeyboardShortcuts';
-
-interface HelpOverlayProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export default function HelpOverlay({ isOpen, onClose }: HelpOverlayProps) {
-  return (
-    <Dialog.Root
-      open={isOpen}
-      onOpenChange={(open) => {
-        if (!open) {
-          onClose();
-        }
-      }}
-    >
-      <Dialog.Portal>
-        <Dialog.Backdrop className='teleprompter__help' />
-        <Dialog.Popup className='teleprompter__help-card'>
-          <div className='teleprompter__help-header'>
-            <Dialog.Title className='teleprompter__help-title'>Prompter shortcuts</Dialog.Title>
-            <IconButton variant='subtle-white' size='large' onClick={onClose} aria-label='Close'>
-              <IoClose />
-            </IconButton>
-          </div>
-
-          <ShortcutGroups className='teleprompter__help-groups'>
-            <ShortcutGroup title='Transport'>
-              <Shortcut label='Start / stop scrolling'>
-                <Combo keys={['Space']} />
-              </Shortcut>
-              <Shortcut label='Slower / faster'>
-                <Combo keys={['←']} />
-                <Separator />
-                <Combo keys={['→']} />
-              </Shortcut>
-              <Shortcut label='Larger speed steps'>
-                <Combo keys={['Shift', '←']} />
-                <Separator />
-                <Combo keys={['Shift', '→']} />
-              </Shortcut>
-            </ShortcutGroup>
-
-            <ShortcutGroup title='Navigation'>
-              <Shortcut label='Nudge one line'>
-                <Combo keys={['↑']} />
-                <Separator />
-                <Combo keys={['↓']} />
-              </Shortcut>
-              <Shortcut label='Jump a screen'>
-                <Combo keys={['PgUp']} />
-                <Separator />
-                <Combo keys={['PgDn']} />
-              </Shortcut>
-              <Shortcut label='Jump to top / end'>
-                <Combo keys={['Home']} />
-                <Separator />
-                <Combo keys={['End']} />
-              </Shortcut>
-              <Shortcut label='Rewind and stop'>
-                <Combo keys={['Esc']} />
-              </Shortcut>
-              <Shortcut label='Follow the loaded event again'>
-                <Combo keys={['L']} />
-              </Shortcut>
-            </ShortcutGroup>
-
-            <ShortcutGroup title='Display'>
-              <Shortcut label='Font size'>
-                <Combo keys={['+']} />
-                <Separator />
-                <Combo keys={['-']} />
-              </Shortcut>
-              <Shortcut label='Reset font size'>
-                <Combo keys={['0']} />
-              </Shortcut>
-              <Shortcut label='Flip horizontally / vertically'>
-                <Combo keys={['F']} />
-                <Separator />
-                <Combo keys={['Shift', 'F']} />
-              </Shortcut>
-              <Shortcut label='Show this list'>
-                <Combo keys={['?']} />
-              </Shortcut>
-            </ShortcutGroup>
-          </ShortcutGroups>
-        </Dialog.Popup>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}
@@ -1,22 +0,0 @@
-import type { ScriptBlock } from '../teleprompter.types';
-
-interface ScriptBlockProps {
-  block: ScriptBlock;
-  registerRef: (id: string, element: HTMLElement | null) => void;
-}
-
-export default function ScriptBlockView({ block, registerRef }: ScriptBlockProps) {
-  'use memo';
-
-  return (
-    <section
-      className='teleprompter__block'
-      ref={(element) => registerRef(block.id, element)}
-      data-loaded={block.isLoaded || undefined}
-    >
-      {block.groupTitle && <div className='teleprompter__group'>{block.groupTitle}</div>}
-      {block.heading && <h2 className='teleprompter__heading'>{block.heading}</h2>}
-      <p className='teleprompter__body'>{block.text}</p>
-    </section>
-  );
-}
@@ -1,65 +0,0 @@
-import { SPEED_STEP, SPEED_STEP_COARSE } from './teleprompter.scroll';
-import type { TeleprompterAction } from './teleprompter.types';
-
-export type TeleprompterKeyEvent = {
-  code: string;
-  key: string;
-  shiftKey: boolean;
-  ctrlKey: boolean;
-  metaKey: boolean;
-  altKey: boolean;
-  repeat: boolean;
-};
-
-export function resolveTeleprompterAction(event: TeleprompterKeyEvent): TeleprompterAction | null {
-  if (event.ctrlKey || event.metaKey || event.altKey) {
-    return null;
-  }
-
-  switch (event.code) {
-    case 'Space':
-      return event.repeat ? null : { type: 'togglePlay' };
-    case 'ArrowDown':
-      return { type: 'nudge', lines: 1 };
-    case 'ArrowUp':
-      return { type: 'nudge', lines: -1 };
-    case 'PageDown':
-      return { type: 'page', direction: 1 };
-    case 'PageUp':
-      return { type: 'page', direction: -1 };
-    case 'ArrowRight':
-      return { type: 'speed', delta: event.shiftKey ? SPEED_STEP_COARSE : SPEED_STEP };
-    case 'ArrowLeft':
-      return { type: 'speed', delta: event.shiftKey ? -SPEED_STEP_COARSE : -SPEED_STEP };
-    case 'Home':
-      return { type: 'rewind' };
-    case 'End':
-      return { type: 'jumpToEnd' };
-    case 'Escape':
-      return { type: 'rewindAndPause' };
-  }
-
-  // Character bindings use key so they work across keyboard layouts.
-  switch (event.key) {
-    case '?':
-      return { type: 'toggleHelp' };
-    case '+':
-    case '=':
-      return { type: 'fontSize', steps: 1 };
-    case '-':
-    case '_':
-      return { type: 'fontSize', steps: -1 };
-    case '0':
-      return { type: 'resetFontSize' };
-  }
-
-  const lowerKey = event.key.toLowerCase();
-  if (lowerKey === 'f') {
-    return { type: 'flip', axis: event.shiftKey ? 'v' : 'h' };
-  }
-  if (lowerKey === 'l') {
-    return { type: 'reengageFollow' };
-  }
-
-  return null;
-}
@@ -1,223 +0,0 @@
-import type { CustomFields } from 'ontime-types';
-import { use, useMemo } from 'react';
-import { useSearchParams } from 'react-router';
-
-import { OptionTitle } from '../../common/components/view-params-editor/constants';
-import type { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
-import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
-import { PresetContext } from '../../common/context/PresetContext';
-import { isStringBoolean } from '../common/viewUtils';
-import { DEFAULT_SPEED, MAX_FONT_SIZE, MAX_SPEED, MIN_FONT_SIZE, MIN_SPEED } from './teleprompter.scroll';
-import type { HeadingSource, TeleprompterOptions } from './teleprompter.types';
-
-const headingOptions: { value: HeadingSource; label: string }[] = [
-  { value: 'title', label: 'Title' },
-  { value: 'cue', label: 'Cue' },
-  { value: 'both', label: 'Cue and title' },
-  { value: 'none', label: 'None' },
-];
-const headingSources = headingOptions.map((option) => option.value);
-
-export const defaults = {
-  script: 'none',
-  heading: 'title' as HeadingSource,
-  hideEmpty: true,
-  showGroups: true,
-  speed: DEFAULT_SPEED,
-  followLoaded: true,
-  fontSize: 52,
-  lineHeight: 1.3,
-  textWidth: 80,
-  readingLine: true,
-  readingLinePos: 25,
-  flipH: false,
-  flipV: false,
-};
-
-const bounds = {
-  speed: [MIN_SPEED, MAX_SPEED],
-  fontSize: [MIN_FONT_SIZE, MAX_FONT_SIZE],
-  lineHeight: [1, 4],
-  textWidth: [20, 100],
-  readingLinePos: [0, 100],
-} as const;
-
-export const getTeleprompterOptions = (customFields: CustomFields): ViewOption[] => {
-  const scriptOptions = makeOptionsFromCustomFields(customFields, [
-    { value: 'none', label: 'None' },
-    { value: 'note', label: 'Note' },
-    { value: 'title', label: 'Title' },
-  ]);
-
-  return [
-    {
-      title: OptionTitle.DataSources,
-      collapsible: true,
-      options: [
-        {
-          id: 'script',
-          title: 'Script',
-          description: 'Select the data source which holds the script to read',
-          type: 'option',
-          values: scriptOptions,
-          defaultValue: defaults.script,
-        },
-        {
-          id: 'heading',
-          title: 'Segment heading',
-          description: 'What to show above each segment of the script',
-          type: 'option',
-          values: headingOptions,
-          defaultValue: defaults.heading,
-        },
-      ],
-    },
-    {
-      title: OptionTitle.BehaviourOptions,
-      collapsible: true,
-      options: [
-        {
-          id: 'speed',
-          title: 'Speed',
-          description: `Scroll speed in lines per minute (${MIN_SPEED}-${MAX_SPEED}). Adjustable live with the arrow keys`,
-          type: 'number',
-          defaultValue: defaults.speed,
-        },
-        {
-          id: 'followLoaded',
-          title: 'Follow loaded event',
-          description: 'Scroll to the segment of the loaded event. Scrolling by hand releases the follow',
-          type: 'boolean',
-          defaultValue: defaults.followLoaded,
-        },
-      ],
-    },
-    {
-      title: OptionTitle.ElementVisibility,
-      collapsible: true,
-      options: [
-        {
-          id: 'hideEmpty',
-          title: 'Hide events without a script',
-          description: 'Prevents showing headings for events which have no script text',
-          type: 'boolean',
-          defaultValue: defaults.hideEmpty,
-        },
-        {
-          id: 'showGroups',
-          title: 'Show group names',
-          description: 'Shows the group name when the script moves into a new group',
-          type: 'boolean',
-          defaultValue: defaults.showGroups,
-        },
-      ],
-    },
-    {
-      title: OptionTitle.StyleOverride,
-      collapsible: true,
-      options: [
-        {
-          id: 'fontSize',
-          title: 'Font size',
-          description: 'Base font size in pixels. Adjustable live with the + and - keys',
-          type: 'number',
-          defaultValue: defaults.fontSize,
-        },
-        {
-          id: 'lineHeight',
-          title: 'Line height',
-          description: 'Spacing between lines, as a multiple of the font size',
-          type: 'number',
-          defaultValue: defaults.lineHeight,
-        },
-        {
-          id: 'textWidth',
-          title: 'Text width',
-          description: 'Width of the text column as a percentage of the screen. Narrower means less eye movement',
-          type: 'number',
-          defaultValue: defaults.textWidth,
-        },
-        {
-          id: 'readingLine',
-          title: 'Reading line',
-          description: 'Shows a marker beside the line which should be read',
-          type: 'boolean',
-          defaultValue: defaults.readingLine,
-        },
-        {
-          id: 'readingLinePos',
-          title: 'Reading line position',
-          description: 'Position of the reading line as a percentage from the top of the screen',
-          type: 'number',
-          defaultValue: defaults.readingLinePos,
-        },
-        {
-          id: 'flipH',
-          title: 'Flip horizontally',
-          description:
-            'Mirrors the view horizontally, which is what a beam splitter rig needs. Toggled live with F. Flip Screen in the navigation menu flips both axes at once, which is a rotation rather than a mirror',
-          type: 'boolean',
-          defaultValue: defaults.flipH,
-        },
-        {
-          id: 'flipV',
-          title: 'Flip vertically',
-          description: 'Mirrors the view vertically. Note this also moves the reading line. Toggled live with Shift+F',
-          type: 'boolean',
-          defaultValue: defaults.flipV,
-        },
-      ],
-    },
-  ];
-};
-
-function toNumber(value: string | null, [min, max]: readonly [number, number], fallback: number): number {
-  if (value === null || value === '') return fallback;
-  const parsed = Number(value);
-  if (!Number.isFinite(parsed)) return fallback;
-  return Math.min(Math.max(parsed, min), max);
-}
-
-function toBoolean(value: string | null, fallback: boolean): boolean {
-  return value === null ? fallback : isStringBoolean(value);
-}
-
-function toEnum<T extends string>(value: string | null, allowed: readonly T[], fallback: T): T {
-  return allowed.includes(value as T) ? (value as T) : fallback;
-}
-
-export function getOptionsFromParams(
-  searchParams: URLSearchParams,
-  defaultValues?: URLSearchParams,
-): TeleprompterOptions {
-  const getValue = (key: string) => defaultValues?.get(key) ?? searchParams.get(key);
-
-  return {
-    scriptSource: getValue('script') ?? defaults.script,
-    heading: toEnum(getValue('heading'), headingSources, defaults.heading),
-
-    hideEmpty: toBoolean(getValue('hideEmpty'), defaults.hideEmpty),
-    showGroups: toBoolean(getValue('showGroups'), defaults.showGroups),
-
-    speed: toNumber(getValue('speed'), bounds.speed, defaults.speed),
-    followLoaded: toBoolean(getValue('followLoaded'), defaults.followLoaded),
-
-    fontSize: toNumber(getValue('fontSize'), bounds.fontSize, defaults.fontSize),
-    lineHeight: toNumber(getValue('lineHeight'), bounds.lineHeight, defaults.lineHeight),
-    textWidth: toNumber(getValue('textWidth'), bounds.textWidth, defaults.textWidth),
-    readingLine: toBoolean(getValue('readingLine'), defaults.readingLine),
-    readingLinePos: toNumber(getValue('readingLinePos'), bounds.readingLinePos, defaults.readingLinePos),
-    flipH: toBoolean(getValue('flipH'), defaults.flipH),
-    flipV: toBoolean(getValue('flipV'), defaults.flipV),
-  };
-}
-
-export function useTeleprompterOptions(): TeleprompterOptions {
-  const [searchParams] = useSearchParams();
-  const maybePreset = use(PresetContext);
-
-  return useMemo(() => {
-    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
-    return getOptionsFromParams(searchParams, defaultValues);
-  }, [maybePreset, searchParams]);
-}
@@ -1,53 +0,0 @@
-export const MIN_SPEED = 1;
-export const MAX_SPEED = 40;
-export const DEFAULT_SPEED = 14;
-
-export const SPEED_STEP = 1;
-export const SPEED_STEP_COARSE = 5;
-
-export const MIN_FONT_SIZE = 12;
-export const MAX_FONT_SIZE = 400;
-const FONT_SIZE_STEP_RATIO = 1.1;
-
-export function stepFontSize(current: number, steps: number): number {
-  return clamp(Math.round(current * FONT_SIZE_STEP_RATIO ** steps), MIN_FONT_SIZE, MAX_FONT_SIZE);
-}
-
-export const MAX_FRAME_DELTA_MS = 100;
-
-const CATCH_UP_RATE = 8;
-const CATCH_UP_EPSILON = 0.5;
-
-export function clamp(value: number, min: number, max: number): number {
-  if (Number.isNaN(value)) return min;
-  return Math.min(Math.max(value, min), max);
-}
-
-export function clampSpeed(value: number): number {
-  return clamp(value, MIN_SPEED, MAX_SPEED);
-}
-
-export function linesPerMinuteToPxPerSecond(linesPerMinute: number, lineHeightPx: number): number {
-  return (linesPerMinute / 60) * lineHeightPx;
-}
-
-export function frameDeltaSeconds(deltaMs: number): number {
-  if (!Number.isFinite(deltaMs) || deltaMs < 0) return 0;
-  return Math.min(deltaMs, MAX_FRAME_DELTA_MS) / 1000;
-}
-
-export function advance(
-  position: number,
-  pxPerSecond: number,
-  deltaSeconds: number,
-  maxScroll: number,
-): { position: number; atEnd: boolean } {
-  const next = position + pxPerSecond * deltaSeconds;
-  return { position: next, atEnd: maxScroll > 0 && next >= maxScroll };
-}
-
-export function easeCatchUp(current: number, target: number, deltaSeconds: number): number {
-  if (deltaSeconds <= 0) return current;
-  const next = target + (current - target) * Math.exp(-CATCH_UP_RATE * deltaSeconds);
-  return Math.abs(next - target) < CATCH_UP_EPSILON ? target : next;
-}
@@ -1,52 +0,0 @@
-import type { MaybeString } from 'ontime-types';
-
-export type HeadingSource = 'none' | 'title' | 'cue' | 'both';
-
-export type ScriptBlock = {
-  id: string;
-  heading: string;
-  text: string;
-  groupTitle: MaybeString;
-  isLoaded: boolean;
-};
-
-export type TeleprompterOptions = {
-  scriptSource: string;
-  heading: HeadingSource;
-  hideEmpty: boolean;
-  showGroups: boolean;
-  /** lines per minute */
-  speed: number;
-  followLoaded: boolean;
-  fontSize: number;
-  lineHeight: number;
-  textWidth: number;
-  readingLine: boolean;
-  readingLinePos: number;
-  flipH: boolean;
-  flipV: boolean;
-};
-
-export type TeleprompterAction =
-  | { type: 'togglePlay' }
-  | { type: 'nudge'; lines: number }
-  | { type: 'page'; direction: 1 | -1 }
-  | { type: 'speed'; delta: number }
-  | { type: 'rewind' }
-  | { type: 'rewindAndPause' }
-  | { type: 'jumpToEnd' }
-  | { type: 'flip'; axis: 'h' | 'v' }
-  | { type: 'fontSize'; steps: number }
-  | { type: 'resetFontSize' }
-  | { type: 'reengageFollow' }
-  | { type: 'toggleHelp' };
-
-export type TeleprompterController = {
-  togglePlay: () => void;
-  nudge: (lines: number) => void;
-  page: (direction: 1 | -1) => void;
-  changeSpeed: (delta: number) => void;
-  rewind: (alsoPause?: boolean) => void;
-  jumpToEnd: () => void;
-  reengageFollow: () => void;
-};
@@ -1,80 +0,0 @@
-import { type CustomFields, isOntimeEvent, isOntimeGroup, type MaybeString, type Rundown } from 'ontime-types';
-
-import type { RundownMetadataObject } from '../../common/utils/rundownMetadata';
-import { getPropertyValue } from '../common/viewUtils';
-import type { HeadingSource, ScriptBlock, TeleprompterOptions } from './teleprompter.types';
-
-type BuildScriptOptions = Pick<TeleprompterOptions, 'scriptSource' | 'heading' | 'hideEmpty' | 'showGroups'>;
-
-function makeHeading(source: HeadingSource, cue: string, title: string): string {
-  switch (source) {
-    case 'cue':
-      return cue;
-    case 'title':
-      return title;
-    case 'both':
-      return [cue, title].filter(Boolean).join(' · ');
-    case 'none':
-      return '';
-  }
-}
-
-function isReadableSource(scriptSource: string, customFields: CustomFields): boolean {
-  if (!scriptSource.startsWith('custom-')) {
-    return true;
-  }
-  const key = scriptSource.slice('custom-'.length);
-  return customFields[key]?.type === 'text';
-}
-
-/** Builds the continuous script in rundown order. */
-export function buildScript(
-  rundown: Rundown,
-  rundownMetadata: RundownMetadataObject,
-  customFields: CustomFields,
-  options: BuildScriptOptions,
-): ScriptBlock[] {
-  const { scriptSource, heading, hideEmpty, showGroups } = options;
-
-  if (scriptSource === 'none' || !isReadableSource(scriptSource, customFields)) {
-    return [];
-  }
-
-  const blocks: ScriptBlock[] = [];
-  let lastGroupId: MaybeString = null;
-
-  for (const id of rundown.flatOrder) {
-    const entry = rundown.entries[id];
-    if (!isOntimeEvent(entry) || entry.skip) {
-      continue;
-    }
-
-    const metadata = rundownMetadata[id];
-    const text = getPropertyValue(entry, scriptSource, rundown.entries)?.trim() ?? '';
-    if (hideEmpty && !text) {
-      continue;
-    }
-
-    const groupId = metadata?.groupId ?? null;
-    let groupTitle: MaybeString = null;
-    if (showGroups && groupId && groupId !== lastGroupId) {
-      const group = rundown.entries[groupId];
-      groupTitle = isOntimeGroup(group) ? group.title : null;
-    }
-    lastGroupId = groupId;
-
-    blocks.push({
-      id,
-      heading: makeHeading(heading, entry.cue, entry.title),
-      text,
-      groupTitle,
-      isLoaded: Boolean(metadata?.isLoaded),
-    });
-  }
-
-  return blocks;
-}
-
-export function composeFlip(flipH: boolean, flipV: boolean, isMirrored: boolean): { flipH: boolean; flipV: boolean } {
-  return { flipH: flipH !== isMirrored, flipV: flipV !== isMirrored };
-}
@@ -1,50 +0,0 @@
-import { use, useEffect } from 'react';
-import { useSearchParams } from 'react-router';
-
-import { PresetContext } from '../../common/context/PresetContext';
-import { defaults } from './teleprompter.options';
-
-const SETTLE_MS = 400;
-
-interface LiveParams {
-  speed: number;
-  fontSize: number;
-  flipH: boolean;
-  flipV: boolean;
-}
-
-/** Keeps keyboard and overlay changes shareable through the URL. */
-export function useSyncTeleprompterParams({ speed, fontSize, flipH, flipV }: LiveParams) {
-  const [, setSearchParams] = useSearchParams();
-  const isPreset = Boolean(use(PresetContext));
-
-  useEffect(() => {
-    if (isPreset) return;
-
-    const timeout = setTimeout(() => {
-      const values = {
-        speed: speed === defaults.speed ? null : String(speed),
-        fontSize: fontSize === defaults.fontSize ? null : String(fontSize),
-        flipH: flipH === defaults.flipH ? null : String(flipH),
-        flipV: flipV === defaults.flipV ? null : String(flipV),
-      };
-
-      setSearchParams(
-        (current) => {
-          const next = new URLSearchParams(current);
-          for (const [key, value] of Object.entries(values)) {
-            if (value === null) {
-              next.delete(key);
-            } else {
-              next.set(key, value);
-            }
-          }
-          return next;
-        },
-        { replace: true },
-      );
-    }, SETTLE_MS);
-
-    return () => clearTimeout(timeout);
-  }, [flipH, flipV, fontSize, isPreset, setSearchParams, speed]);
-}
@@ -1,74 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-import { useViewParamsEditorStore } from '../../common/components/view-params-editor/viewParamsEditor.store';
-import { resolveTeleprompterAction } from './teleprompter.keymap';
-import type { TeleprompterAction, TeleprompterController } from './teleprompter.types';
-
-interface UseTeleprompterControlsArgs {
-  controller: TeleprompterController;
-  isHelpOpen: boolean;
-  onFlip: (axis: 'h' | 'v') => void;
-  onFontSize: (steps: number) => void;
-  onResetFontSize: () => void;
-  onToggleHelp: () => void;
-}
-
-const ignoredTags = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
-
-export function useTeleprompterControls(args: UseTeleprompterControlsArgs) {
-  const argsRef = useRef(args);
-  useEffect(() => {
-    argsRef.current = args;
-  });
-
-  useEffect(() => {
-    function applyAction(action: TeleprompterAction) {
-      const { controller, onFlip, onFontSize, onResetFontSize, onToggleHelp } = argsRef.current;
-      switch (action.type) {
-        case 'togglePlay':
-          return controller.togglePlay();
-        case 'nudge':
-          return controller.nudge(action.lines);
-        case 'page':
-          return controller.page(action.direction);
-        case 'speed':
-          return controller.changeSpeed(action.delta);
-        case 'rewind':
-          return controller.rewind();
-        case 'rewindAndPause':
-          return controller.rewind(true);
-        case 'jumpToEnd':
-          return controller.jumpToEnd();
-        case 'reengageFollow':
-          return controller.reengageFollow();
-        case 'flip':
-          return onFlip(action.axis);
-        case 'fontSize':
-          return onFontSize(action.steps);
-        case 'resetFontSize':
-          return onResetFontSize();
-        case 'toggleHelp':
-          return onToggleHelp();
-      }
-    }
-
-    function handleKeyDown(event: KeyboardEvent) {
-      const target = event.target as HTMLElement | null;
-      if (target && (ignoredTags.has(target.tagName) || target.isContentEditable)) {
-        return;
-      }
-      if (useViewParamsEditorStore.getState().isOpen || argsRef.current.isHelpOpen) {
-        return;
-      }
-
-      const action = resolveTeleprompterAction(event);
-      if (!action) return;
-
-      event.preventDefault();
-      applyAction(action);
-    }
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
-}
@@ -1,26 +0,0 @@
-import type { CustomFields, Rundown } from 'ontime-types';
-
-import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
-import type { RundownMetadataObject } from '../../common/utils/rundownMetadata';
-import { type ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';
-
-export interface TeleprompterData {
-  rundown: Rundown;
-  rundownMetadata: RundownMetadataObject;
-  customFields: CustomFields;
-}
-
-export function useTeleprompterData(): ViewData<TeleprompterData> {
-  const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata();
-  const { data: customFields, status: customFieldStatus } = useCustomFields();
-
-  return {
-    data: {
-      rundown,
-      rundownMetadata,
-      customFields,
-    },
-    status: aggregateQueryStatus([rundownStatus, customFieldStatus]),
-  };
-}
@@ -1,282 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import {
-  advance,
-  clamp,
-  clampSpeed,
-  easeCatchUp,
-  frameDeltaSeconds,
-  linesPerMinuteToPxPerSecond,
-} from './teleprompter.scroll';
-import type { ScriptBlock, TeleprompterController } from './teleprompter.types';
-
-const PAGE_FRACTION = 0.85;
-const EXTERNAL_SCROLL_EPSILON = 2;
-
-/**
- * Uses layout coordinates because client rects include the teleprompter's CSS
- * transform while scrollTop does not.
- */
-function getLayoutTop(element: HTMLElement): number {
-  let top = 0;
-  let current: HTMLElement | null = element;
-
-  while (current) {
-    top += current.offsetTop;
-    current = current.offsetParent instanceof HTMLElement ? current.offsetParent : null;
-  }
-
-  return top;
-}
-
-interface UseTeleprompterScrollArgs {
-  initialSpeed: number;
-  followLoaded: boolean;
-  selectedEventId: string | null;
-  readingLinePos: number;
-  blocks: ScriptBlock[];
-}
-
-/**
- * Owns the scroll position of the teleprompter.
- *
- * The animation frame is the only writer of scrollTop. Controls update refs so
- * smooth scrolling and playback cannot compete for the DOM position.
- */
-export function useTeleprompterScroll({
-  initialSpeed,
-  followLoaded,
-  selectedEventId,
-  readingLinePos,
-  blocks,
-}: UseTeleprompterScrollArgs) {
-  const scrollerRef = useRef<HTMLDivElement | null>(null);
-  const contentRef = useRef<HTMLDivElement | null>(null);
-  const blockRefs = useRef(new Map<string, HTMLElement>());
-
-  const [isScrollerMounted, setIsScrollerMounted] = useState(false);
-  const attachScroller = useCallback((element: HTMLDivElement | null) => {
-    scrollerRef.current = element;
-    setIsScrollerMounted(Boolean(element && contentRef.current));
-  }, []);
-  const attachContent = useCallback((element: HTMLDivElement | null) => {
-    contentRef.current = element;
-    setIsScrollerMounted(Boolean(element && scrollerRef.current));
-  }, []);
-
-  // authoritative, sub-pixel scroll position
-  const posRef = useRef(0);
-  const lastTsRef = useRef(0);
-  const runningRef = useRef(false);
-  const speedRef = useRef(initialSpeed);
-  const lineHeightRef = useRef(0);
-  const maxScrollRef = useRef(0);
-  const catchUpTargetRef = useRef<number | null>(null);
-  const pendingDeltaRef = useRef(0);
-
-  const [isRunning, setIsRunning] = useState(false);
-  const [speed, setSpeed] = useState(initialSpeed);
-  const [followLocked, setFollowLocked] = useState(false);
-  const [atEnd, setAtEnd] = useState(false);
-
-  const tick = useCallback((timestamp: number) => {
-    const el = scrollerRef.current;
-    if (!el) return;
-
-    // Adopt wheel, touch, scrollbar, browser-clamp and find-in-page changes.
-    if (Math.abs(el.scrollTop - posRef.current) > EXTERNAL_SCROLL_EPSILON) {
-      posRef.current = el.scrollTop;
-      catchUpTargetRef.current = null;
-    }
-
-    const deltaSeconds = frameDeltaSeconds(timestamp - lastTsRef.current);
-    lastTsRef.current = timestamp;
-
-    let next = posRef.current;
-
-    if (pendingDeltaRef.current !== 0) {
-      next += pendingDeltaRef.current;
-      pendingDeltaRef.current = 0;
-      catchUpTargetRef.current = null;
-    }
-
-    if (catchUpTargetRef.current !== null) {
-      next = easeCatchUp(next, catchUpTargetRef.current, deltaSeconds);
-      if (next === catchUpTargetRef.current) {
-        catchUpTargetRef.current = null;
-      }
-    } else if (runningRef.current) {
-      const pxPerSecond = linesPerMinuteToPxPerSecond(speedRef.current, lineHeightRef.current);
-      const result = advance(next, pxPerSecond, deltaSeconds, maxScrollRef.current);
-      next = result.position;
-      if (result.atEnd) {
-        runningRef.current = false;
-        setIsRunning(false);
-        setAtEnd(true);
-      }
-    }
-
-    const clamped = clamp(next, 0, maxScrollRef.current);
-    if (clamped !== posRef.current) {
-      posRef.current = clamped;
-      el.scrollTop = clamped;
-    }
-  }, []);
-
-  useEffect(() => {
-    lastTsRef.current = performance.now();
-    let frame = requestAnimationFrame(function loop(timestamp) {
-      tick(timestamp);
-      frame = requestAnimationFrame(loop);
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [tick]);
-
-  const measure = useCallback(() => {
-    const scroller = scrollerRef.current;
-    const content = contentRef.current;
-    if (!scroller || !content) return;
-
-    maxScrollRef.current = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-
-    const computed = getComputedStyle(content);
-    const parsedLineHeight = Number.parseFloat(computed.lineHeight);
-    if (Number.isFinite(parsedLineHeight) && parsedLineHeight > 0) {
-      lineHeightRef.current = parsedLineHeight;
-    } else {
-      const parsedFontSize = Number.parseFloat(computed.fontSize);
-      lineHeightRef.current = Number.isFinite(parsedFontSize) ? parsedFontSize * 1.2 : 0;
-    }
-  }, []);
-
-  useEffect(() => {
-    speedRef.current = speed;
-  }, [speed]);
-
-  const [speedFromOption, setSpeedFromOption] = useState(initialSpeed);
-  // Keep the live speed in sync with view-param and remote redirect changes.
-  if (speedFromOption !== initialSpeed) {
-    setSpeedFromOption(initialSpeed);
-    setSpeed(initialSpeed);
-  }
-
-  useEffect(() => {
-    measure();
-
-    const scroller = scrollerRef.current;
-    const content = contentRef.current;
-    if (!scroller || !content) return;
-
-    const observer = new ResizeObserver(() => measure());
-    observer.observe(scroller);
-    observer.observe(content);
-    return () => observer.disconnect();
-  }, [measure, isScrollerMounted]);
-
-  useEffect(() => {
-    let cancelled = false;
-    void document.fonts?.ready.then(() => {
-      if (!cancelled) measure();
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [measure]);
-
-  useEffect(() => {
-    const onVisibilityChange = () => {
-      lastTsRef.current = performance.now();
-    };
-    document.addEventListener('visibilitychange', onVisibilityChange);
-    return () => document.removeEventListener('visibilitychange', onVisibilityChange);
-  }, []);
-
-  // Avoid re-following when a new blocks array contains the same selected event.
-  const hasSelectedBlock = selectedEventId !== null && blocks.some((block) => block.id === selectedEventId);
-
-  useEffect(() => {
-    if (!followLoaded || followLocked || !selectedEventId) return;
-
-    const scroller = scrollerRef.current;
-    const target = blockRefs.current.get(selectedEventId);
-    if (!scroller || !target) return;
-
-    const offset = (scroller.clientHeight * readingLinePos) / 100;
-    const top = getLayoutTop(target) - getLayoutTop(scroller) - offset;
-
-    catchUpTargetRef.current = clamp(top, 0, maxScrollRef.current);
-    setAtEnd(false);
-  }, [selectedEventId, followLoaded, followLocked, readingLinePos, hasSelectedBlock]);
-
-  const handleUserScroll = useCallback(() => {
-    if (followLoaded) {
-      setFollowLocked(true);
-    }
-  }, [followLoaded]);
-
-  const registerBlock = useCallback((id: string, element: HTMLElement | null) => {
-    if (element) {
-      blockRefs.current.set(id, element);
-    } else {
-      blockRefs.current.delete(id);
-    }
-  }, []);
-
-  const controller: TeleprompterController = useMemo(() => {
-    const play = () => {
-      if (maxScrollRef.current > 0 && posRef.current >= maxScrollRef.current) {
-        return;
-      }
-      runningRef.current = true;
-      setIsRunning(true);
-      setAtEnd(false);
-    };
-
-    const pause = () => {
-      runningRef.current = false;
-      setIsRunning(false);
-    };
-
-    return {
-      togglePlay: () => (runningRef.current ? pause() : play()),
-      nudge: (lines: number) => {
-        pendingDeltaRef.current += lines * lineHeightRef.current;
-        setAtEnd(false);
-      },
-      page: (direction: 1 | -1) => {
-        const scroller = scrollerRef.current;
-        if (!scroller) return;
-        const distance = scroller.clientHeight * PAGE_FRACTION * direction;
-        catchUpTargetRef.current = clamp(posRef.current + distance, 0, maxScrollRef.current);
-        setAtEnd(false);
-      },
-      changeSpeed: (delta: number) => setSpeed((current) => clampSpeed(current + delta)),
-      rewind: (alsoPause = false) => {
-        catchUpTargetRef.current = 0;
-        if (alsoPause) pause();
-        setAtEnd(false);
-      },
-      jumpToEnd: () => {
-        catchUpTargetRef.current = maxScrollRef.current;
-        if (maxScrollRef.current > 0) {
-          runningRef.current = false;
-          setIsRunning(false);
-          setAtEnd(true);
-        }
-      },
-      reengageFollow: () => setFollowLocked(false),
-    };
-  }, []);
-
-  return {
-    scrollerRef: attachScroller,
-    contentRef: attachContent,
-    registerBlock,
-    handleUserScroll,
-    controller,
-    isRunning,
-    speed,
-    followLocked,
-    atEnd,
-  };
-}
@@ -1,6 +1,6 @@
 {
  "name": "ontime-electron",
-  "version": "4.13.0-beta.1",
+  "version": "4.11.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -100,7 +100,7 @@ function makeFileMenu(askToQuit, serverUrl, redirectWindow, showDialog, download
    submenu: [
      {
        label: 'New project...',
-        click: () => redirectWindow('/editor?settings=project__create'),
+        click: () => redirectWindow('/editor?settings=project__manage&new=true'),
      },
      {
        label: 'Load...',
@@ -151,7 +151,6 @@ function makeViewMenu(clientUrl) {
      makeItemOpenInBrowser('Editor', `${clientUrl}/editor`),
      makeItemOpenInBrowser('Cuesheet', `${clientUrl}/cuesheet`),
      makeItemOpenInBrowser('Operator', `${clientUrl}/op`),
-      makeItemOpenInBrowser('Teleprompter', `${clientUrl}/teleprompter`),
      { type: 'separator' },
      makeItemOpenInBrowser('Timer', `${clientUrl}/timer`),
      makeItemOpenInBrowser('Backstage', `${clientUrl}/backstage`),
@@ -203,18 +202,6 @@ function makeSettingsMenu(redirectWindow) {
            label: 'View settings',
            click: () => redirectWindow('/editor?settings=settings__view'),
          },
-          {
-            label: 'Custom views',
-            click: () => redirectWindow('/editor?settings=settings__custom-views'),
-          },
-          {
-            label: 'MCP Server',
-            click: () => redirectWindow('/editor?settings=settings__mcp'),
-          },
-          {
-            label: 'Server port',
-            click: () => redirectWindow('/editor?settings=settings__port'),
-          },
        ],
      },
      {
@@ -1,6 +1,6 @@
 {
  "name": "@getontime/resolver",
-  "version": "4.13.0-beta.1",
+  "version": "4.11.0",
  "type": "module",
  "repository": "https://github.com/cpvalente/ontime",
  "types": "./dist/main.d.ts",
@@ -2,7 +2,7 @@
  "name": "ontime-server",
  "type": "module",
  "main": "src/index.ts",
-  "version": "4.13.0-beta.1",
+  "version": "4.11.0",
  "exports": "./src/index.js",
  "dependencies": {
    "@googleapis/sheets": "^5.0.5",
@@ -0,0 +1,95 @@
+import { TimerLifeCycle } from 'ontime-types';
+import type { PlayableEvent } from 'ontime-types';
+import { vi } from 'vitest';
+
+import { makeRuntimeStateData } from '../../../stores/__mocks__/runtimeState.mocks.js';
+import { makeOntimeEvent } from '../../rundown/__mocks__/rundown.mocks.js';
+import { clear, generate, triggerReportEntry } from '../report.service.js';
+
+vi.mock('../../../adapters/WebsocketAdapter.js', () => ({
+  sendRefetch: vi.fn(),
+}));
+
+const eventA = makeOntimeEvent({ id: 'event-a', timeStart: 0, timeEnd: 10000, duration: 10000 }) as PlayableEvent;
+
+beforeEach(() => {
+  clear();
+});
+
+describe('triggerReportEntry()', () => {
+  it('snapshots the schedule when an event starts', () => {
+    const state = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 500 }, clock: 500 });
+    triggerReportEntry(TimerLifeCycle.onStart, state);
+
+    expect(generate()[eventA.id]).toEqual({
+      startedAt: 500,
+      endedAt: null,
+      scheduledStart: eventA.timeStart,
+      scheduledDuration: eventA.duration,
+      playCount: 1,
+    });
+  });
+
+  it('keeps the snapshot taken at start when the event stops', () => {
+    const start = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, clock: 0 });
+    triggerReportEntry(TimerLifeCycle.onStart, start);
+
+    const stop = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, clock: 12000 });
+    triggerReportEntry(TimerLifeCycle.onStop, stop);
+
+    expect(generate()[eventA.id]).toMatchObject({
+      startedAt: 0,
+      endedAt: 12000,
+      scheduledStart: eventA.timeStart,
+      scheduledDuration: eventA.duration,
+    });
+  });
+
+  it('records the schedule as it was, not as it later becomes', () => {
+    const start = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, clock: 0 });
+    triggerReportEntry(TimerLifeCycle.onStart, start);
+
+    // the event is edited to a different duration, then stopped
+    const edited = { ...eventA, duration: 99999, timeEnd: 99999 } as PlayableEvent;
+    const stop = makeRuntimeStateData({ eventNow: edited, timer: { startedAt: 0 }, clock: 10000 });
+    triggerReportEntry(TimerLifeCycle.onStop, stop);
+
+    expect(generate()[eventA.id].scheduledDuration).toBe(10000);
+  });
+
+  it('counts a re-run rather than losing the previous one', () => {
+    const state = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, clock: 0 });
+    triggerReportEntry(TimerLifeCycle.onStart, state);
+    triggerReportEntry(TimerLifeCycle.onStop, { ...state, clock: 5000 } as typeof state);
+    triggerReportEntry(TimerLifeCycle.onStart, { ...state, clock: 5000 } as typeof state);
+
+    expect(generate()[eventA.id].playCount).toBe(2);
+  });
+
+  it('falls back to the current event when a stop arrives with no start', () => {
+    const stop = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, clock: 10000 });
+    triggerReportEntry(TimerLifeCycle.onStop, stop);
+
+    expect(generate()[eventA.id]).toMatchObject({
+      startedAt: null,
+      endedAt: 10000,
+      scheduledDuration: eventA.duration,
+      playCount: 1,
+    });
+  });
+
+  it('ignores events without an id', () => {
+    const state = makeRuntimeStateData({ eventNow: null });
+    triggerReportEntry(TimerLifeCycle.onStart, state);
+    expect(generate()).toEqual({});
+  });
+});
+
+describe('clear()', () => {
+  it('clears a single event', () => {
+    const state = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, clock: 0 });
+    triggerReportEntry(TimerLifeCycle.onStart, state);
+    clear(eventA.id);
+    expect(generate()).toEqual({});
+  });
+});
@@ -49,14 +49,31 @@ export function triggerReportEntry(
  const eventId = state.eventNow.id;

  if (cycle === TimerLifeCycle.onStart) {
-    report.set(eventId, { startedAt: state.timer.startedAt, endedAt: null });
+    // an event started twice is a re-run, not a new record
+    const playCount = (report.get(eventId)?.playCount ?? 0) + 1;
+
+    report.set(eventId, {
+      startedAt: state.timer.startedAt,
+      endedAt: null,
+      // snapshot the schedule so later rundown edits cannot change how a show
+      // that already happened is reported
+      scheduledStart: state.eventNow.timeStart,
+      scheduledDuration: state.eventNow.duration,
+      playCount,
+    });
    formattedReport = null;
    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,
+      endedAt: state.clock,
+      scheduledStart: previous?.scheduledStart ?? state.eventNow.timeStart,
+      scheduledDuration: previous?.scheduledDuration ?? state.eventNow.duration,
+      playCount: previous?.playCount ?? 1,
+    });
    formattedReport = null;
    sendRefetch(RefetchKey.Report);
  }
@@ -8,7 +8,7 @@ import {
  TimerType,
  Trigger,
 } from 'ontime-types';
-import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, createEvent } from 'ontime-utils';
+import { MILLIS_PER_HOUR, createEvent } from 'ontime-utils';
 import { assertType } from 'vitest';

 import { makeOntimeEvent, makeOntimeGroup, makeOntimeMilestone, makeRundown } from '../__mocks__/rundown.mocks.js';
@@ -22,7 +22,6 @@ import {
  makeDeepClone,
  mergeRundownPreservingFields,
  isLoadedPlayable,
-  eventDurationMatchGroupTarget,
 } from '../rundown.utils.js';

 describe('test event validator', () => {
@@ -611,107 +610,3 @@ describe('isLoadedPlayable()', () => {
    expect(isLoadedPlayable('keynote', rundown)).toBe(false);
  });
 });
-
-describe('eventDurationMatchGroupTarget()', () => {
-  it('returns unchanged duration when group already matches target', () => {
-    const result = eventDurationMatchGroupTarget({
-      targetDuration: MILLIS_PER_HOUR,
-      groupDuration: MILLIS_PER_HOUR,
-      eventDuration: MILLIS_PER_MINUTE * 30,
-    });
-    expect(result).toStrictEqual(null);
-  });
-
-  it('increases event duration when group is shorter than target', () => {
-    // Group is 1h short of target, so event duration increases by 1h
-    const result = eventDurationMatchGroupTarget({
-      targetDuration: MILLIS_PER_HOUR * 2, // 2h
-      groupDuration: MILLIS_PER_HOUR, // 1h
-      eventDuration: MILLIS_PER_MINUTE * 30, // 30m
-    });
-    expect(result).toStrictEqual(MILLIS_PER_HOUR + MILLIS_PER_MINUTE * 30); // 1h30m
-  });
-
-  it('decreases event duration when group is longer than target', () => {
-    // Group is 30m over target, so event duration decreases by 30m
-    const result = eventDurationMatchGroupTarget({
-      targetDuration: MILLIS_PER_HOUR, // 1h
-      groupDuration: MILLIS_PER_HOUR + MILLIS_PER_MINUTE * 30, // 1h30m
-      eventDuration: MILLIS_PER_MINUTE * 30, // 30m
-    });
-    expect(result).toStrictEqual(0);
-  });
-
-  it('handles zero target duration', () => {
-    const result = eventDurationMatchGroupTarget({
-      targetDuration: 0,
-      groupDuration: MILLIS_PER_HOUR,
-      eventDuration: MILLIS_PER_HOUR,
-    });
-    expect(result).toStrictEqual(0);
-  });
-
-  it('handles zero group duration', () => {
-    const result = eventDurationMatchGroupTarget({
-      targetDuration: MILLIS_PER_HOUR,
-      groupDuration: 0,
-      eventDuration: MILLIS_PER_MINUTE * 30,
-    });
-    expect(result).toStrictEqual(MILLIS_PER_HOUR + MILLIS_PER_MINUTE * 30);
-  });
-
-  it('handles zero event duration', () => {
-    const result = eventDurationMatchGroupTarget({
-      targetDuration: MILLIS_PER_HOUR,
-      groupDuration: MILLIS_PER_MINUTE * 30,
-      eventDuration: 0,
-    });
-    expect(result).toStrictEqual(MILLIS_PER_HOUR - MILLIS_PER_MINUTE * 30);
-  });
-
-  it('handles all zero values', () => {
-    const result = eventDurationMatchGroupTarget({
-      targetDuration: 0,
-      groupDuration: 0,
-      eventDuration: 0,
-    });
-    expect(result).toStrictEqual(null);
-  });
-
-  it('returns null when result would be negative', () => {
-    // Group exceeds target by 1.5h, event shrinks by 1.5h (exceeds event duration)
-    const result = eventDurationMatchGroupTarget({
-      targetDuration: MILLIS_PER_MINUTE * 30,
-      groupDuration: MILLIS_PER_HOUR * 2,
-      eventDuration: MILLIS_PER_HOUR,
-    });
-    expect(result).toStrictEqual(null);
-  });
-
-  it('handles large durations', () => {
-    const result = eventDurationMatchGroupTarget({
-      targetDuration: MILLIS_PER_HOUR * 24, // 24h
-      groupDuration: MILLIS_PER_HOUR * 12, // 12h
-      eventDuration: MILLIS_PER_HOUR, // 1h
-    });
-    expect(result).toStrictEqual(MILLIS_PER_HOUR * 13); // 13h
-  });
-
-  it('returns null when targetDuration is null', () => {
-    const result = eventDurationMatchGroupTarget({
-      targetDuration: null,
-      groupDuration: MILLIS_PER_HOUR,
-      eventDuration: MILLIS_PER_MINUTE * 30,
-    });
-    expect(result).toStrictEqual(null);
-  });
-
-  it('returns null when duration would be over 24h', () => {
-    const result = eventDurationMatchGroupTarget({
-      targetDuration: 30 * MILLIS_PER_HOUR,
-      groupDuration: MILLIS_PER_HOUR,
-      eventDuration: MILLIS_PER_MINUTE * 30,
-    });
-    expect(result).toStrictEqual(null);
-  });
-});
@@ -35,7 +35,6 @@ import {
  reorderEntry,
  swapEvents,
  ungroupEntries,
-  entryFitGroupDuration,
 } from './rundown.service.js';
 import { normalisedToRundownArray } from './rundown.utils.js';
 import {
@@ -338,23 +337,6 @@ router.post('/:rundownId/ungroup/:id', paramsWithId, async (req: Request, res: R
  }
 });

-/**
- * Change a events duration to fit inside the group target
- */
-router.post(
-  '/:rundownId/:id/fit-group-duration',
-  paramsWithId,
-  async (req: Request, res: Response<Rundown | ErrorResponse>) => {
-    try {
-      const rundown = await entryFitGroupDuration(req.params.rundownId, req.params.id);
-      res.status(200).send(rundown);
-    } catch (error) {
-      const message = getErrorMessage(error);
-      res.status(400).send({ message });
-    }
-  },
-);
-
 /**
 * Deletes a list of entries by their ID
 */
@@ -47,7 +47,6 @@ import {
  hasChanges,
  mergeRundownPreservingFields,
  isLoadedPlayable,
-  eventDurationMatchGroupTarget,
 } from './rundown.utils.js';
 import { assertInsertAnchorExists, assertInsertAnchorInOrder, assertSingleInsertAnchor } from './rundown.validation.js';

@@ -448,69 +447,6 @@ export async function cloneEntry(rundownId: string, entryId: EntryId, options: I
  return rundownResult;
 }

-/**
- *  Change a events duration to fit inside the group target
- */
-export async function entryFitGroupDuration(rundownId: string, entryId: EntryId): Promise<Rundown> {
-  const { rundown, commit } = createTransaction({ rundownId, mutableRundown: true });
-
-  const entry = rundown.entries[entryId];
-
-  if (!entry) {
-    throw new Error('Entry not found');
-  }
-
-  if (!isOntimeEvent(entry)) {
-    throw new Error('Entry must be an event');
-  }
-
-  const { parent } = entry;
-  if (!parent) {
-    throw new Error('Entry must be in a group');
-  }
-
-  const group = rundown.entries[parent];
-
-  if (!group) {
-    throw new Error('Group not found');
-  }
-
-  if (!isOntimeGroup(group)) {
-    throw new Error('Group is not a group');
-  }
-
-  const newDuration = eventDurationMatchGroupTarget({
-    targetDuration: group.targetDuration,
-    groupDuration: group.duration,
-    eventDuration: entry.duration,
-  });
-
-  if (newDuration === null) {
-    throw new Error('Unable to fit a duration');
-  }
-
-  const newEnd = entry.timeStart + newDuration;
-
-  rundownMutation.edit(rundown, {
-    id: entryId,
-    duration: newDuration,
-    timeEnd: newEnd,
-    timeStrategy: entry.timeStrategy,
-  });
-  const { rundown: rundownResult, rundownMetadata, revision } = await commit();
-
-  // schedule the side effects
-  setImmediate(() => {
-    // notify runtime that rundown has changed
-    updateRuntimeOnChange(rundownMetadata);
-
-    // we need to notify the timer since we might be changing a running event
-    notifyChanges(rundown.id, rundownMetadata, revision, { external: true, timer: true });
-  });
-
-  return rundownResult;
-}
-
 /**
 * Groups a list of entries into a new group
 */
@@ -3,7 +3,6 @@ import {
  EntryCustomFields,
  EntryId,
  ImportedFields,
-  Maybe,
  OntimeBaseEvent,
  OntimeDelay,
  OntimeEntry,
@@ -31,7 +30,6 @@ import {
  generateId,
  getCueCandidate,
  makeString,
-  maxDuration,
  validateEndAction,
  validateTimerType,
  validateTimes,
@@ -603,27 +601,3 @@ export function getIntegerAndFraction(value: string): IncrementNumber {
    precision,
  };
 }
-
-/**
- * Adjusts an event's duration to fit inside the group target
- * @param targetDuration - The desired total duration for the group, or null
- * @param groupDuration - The current total duration of all events in the group
- * @param eventDuration - The current duration of the event being adjusted
- * @returns The adjusted event duration, or null if targetDuration is null or
- *          the result would be negative
- */
-export function eventDurationMatchGroupTarget({
-  targetDuration,
-  groupDuration,
-  eventDuration,
-}: {
-  targetDuration: Maybe<number>;
-  groupDuration: number;
-  eventDuration: number;
-}): Maybe<number> {
-  if (targetDuration === null) return null;
-  if (targetDuration === groupDuration) return null;
-  const durationDiff = targetDuration - groupDuration;
-  const newDuration = eventDuration + durationDiff;
-  return newDuration < 0 || newDuration > maxDuration ? null : newDuration;
-}
@@ -9,52 +9,45 @@ test.describe('test view navigation feature', () => {
  test('Timeline', async ({ page }) => {
    await openNavigationMenu(page);
    await page.getByRole('button', { name: 'Timeline' }).click();
-    await expect(page.getByTestId('timeline-view')).toBeVisible();
+    page.locator('data-testid=timeline-view');
    await expect(page).toHaveURL('/timeline');
  });

  test('Backstage', async ({ page }) => {
    await openNavigationMenu(page);
    await page.getByRole('button', { name: 'Backstage' }).click();
-    await expect(page.getByTestId('backstage-view')).toBeVisible();
+    page.locator('data-testid=backstage-view');
    await expect(page).toHaveURL('/backstage');
  });

  test('Studio Clock', async ({ page }) => {
    await openNavigationMenu(page);
    await page.getByRole('button', { name: 'Studio Clock' }).click();
-    await expect(page.getByTestId('studio-view')).toBeVisible();
+    page.locator('data-testid=studio-view');
    await expect(page).toHaveURL('/studio');
  });

  test('Countdown', async ({ page }) => {
    await openNavigationMenu(page);
    await page.getByRole('button', { name: 'Countdown' }).click();
-    await expect(page.getByTestId('countdown-view')).toBeVisible();
+    page.locator('data-testid=countdown-view');
    await expect(page).toHaveURL('/countdown');
  });

  test('Project Info', async ({ page }) => {
    await openNavigationMenu(page);
    await page.getByRole('button', { name: 'Project Info' }).click();
-    await expect(page.getByTestId('project-view')).toBeVisible();
+    page.locator('data-testid=project-view');
    await expect(page).toHaveURL('/info');
  });

  test('Timer', async ({ page }) => {
    await openNavigationMenu(page);
    await page.getByRole('button', { name: 'Timer', exact: true }).click();
-    await expect(page.getByTestId('timer-view')).toBeVisible();
+    page.locator('data-testid=timer-view');
    await expect(page).toHaveURL('/timer');
  });

-  test('Teleprompter', async ({ page }) => {
-    await openNavigationMenu(page);
-    await page.getByRole('button', { name: 'Teleprompter' }).click();
-    await expect(page.getByTestId('teleprompter-view')).toBeVisible();
-    await expect(page).toHaveURL('/teleprompter');
-  });
-
  test('not-found', async ({ page }) => {
    await page.goto('/not-found');

@@ -13,25 +13,3 @@ test('View params configures timer view', async ({ page }) => {
  await expect(page.getByText('TIME NOW', { exact: true })).not.toBeInViewport();
  await expect(page).toHaveURL(/.*hideClock=true/);
 });
-
-test('View params configures teleprompter view', async ({ page, request }) => {
-  const response = await request.post('/data/db/demo');
-  expect(response.ok()).toBe(true);
-
-  await page.goto('/teleprompter?script=note');
-
-  const readingMarker = page.locator('.teleprompter__reading-marker');
-  await expect(readingMarker).toBeVisible();
-
-  await page.mouse.move(Math.random() * 100, Math.random() * 100);
-  await page.getByTestId('navigation__toggle-settings').click();
-
-  const readingLineSwitch = page.locator('label:has(input[name="readingLine"]) [role="switch"]');
-  await expect(readingLineSwitch).toHaveAttribute('aria-checked', 'true');
-
-  await readingLineSwitch.click();
-  await page.getByTestId('apply-view-params').click();
-
-  await expect(page).toHaveURL(/.*readingLine=false/);
-  await expect(readingMarker).toHaveCount(0);
-});
@@ -71,15 +71,11 @@ test('Move', async ({ page }) => {
  await page.getByRole('button', { name: 'Rundown menu' }).click();
  await page.getByRole('menuitem', { name: 'Clear all' }).click();
  await page.getByRole('button', { name: 'Delete all' }).click();
-  await expect(page.getByTestId('rundown-event')).toHaveCount(0);

  // create events
  await page.getByRole('button', { name: 'Create Event' }).click();
-  await expect(page.getByTestId('rundown-event')).toHaveCount(1);
  await page.getByRole('button', { name: 'Event' }).nth(4).click();
-  await expect(page.getByTestId('rundown-event')).toHaveCount(2);
  await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
-  await expect(page.getByTestId('rundown-event')).toHaveCount(3);

  // copy move down
  await page.getByTestId('entry-1').getByTestId('rundown-event').getByText('1').click();
@@ -90,16 +86,15 @@ test('Move', async ({ page }) => {
    .press('Alt+Control+ArrowDown');
  await expect(page.getByTestId('entry-2').getByTestId('rundown-event')).toContainText('1');

-  // move entry three up twice, waiting for each reorder before targeting its new row
+  // copy move up
  await page.getByTestId('entry-3').getByTestId('rundown-event').getByText('3').click();
  await page
    .getByTestId('entry-3')
    .getByTestId('rundown-event')
    .filter({ hasText: '3' })
    .press('Alt+ControlOrMeta+ArrowUp');
-  await expect(page.getByTestId('entry-2').getByTestId('rundown-event')).toContainText('3');
  await page
-    .getByTestId('entry-2')
+    .getByTestId('entry-3')
    .getByTestId('rundown-event')
    .filter({ hasText: '3' })
    .press('Alt+ControlOrMeta+ArrowUp');
@@ -13,27 +13,23 @@ test('time until absolute', async ({ context }) => {
  await editor.getByRole('button', { name: 'Rundown menu' }).click();
  await editor.getByRole('menuitem', { name: 'Clear all' }).click();
  await editor.getByRole('button', { name: 'Delete all' }).click();
-  await expect(editor.getByTestId('rundown-event')).toHaveCount(0);

  await editor.getByRole('button', { name: 'Create Event' }).click();
-  await expect(editor.getByTestId('rundown-event')).toHaveCount(1);
  await editor.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
-  await expect(editor.getByTestId('rundown-event')).toHaveCount(2);
  await editor.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
-  await expect(editor.getByTestId('rundown-event')).toHaveCount(3);
  await editor.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
-  await expect(editor.getByTestId('rundown-event')).toHaveCount(4);

  await editor.getByTestId('entry-1').getByTestId('rundown-event').click();
-  const entry1Id = await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue();
+  const ids = new Array<string>();
+  ids.push(await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue());
  await editor.getByTestId('entry-2').getByTestId('rundown-event').click();
-  const entry2Id = await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue();
+  ids.push(await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue());
  await editor.getByTestId('entry-3').getByTestId('rundown-event').click();
-  const entry3Id = await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue();
+  ids.push(await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue());
  await editor.getByTestId('entry-4').getByTestId('rundown-event').click();
-  const entry4Id = await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue();
+  ids.push(await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue());

-  await countdown.goto(`/countdown?${entry1Id}&sub=${entry2Id}&sub=${entry3Id}&sub=${entry4Id}`);
+  await countdown.goto(`/countdown?${ids.join('&sub=')}`);

  // Create reusable locator references for different elements
  const entry2 = {
@@ -61,10 +57,8 @@ test('time until absolute', async ({ context }) => {

  await editor.getByRole('button', { name: 'Absolute' }).click();
  await editor.getByTestId('entry-1').getByLabel('Start event').click();
-  await expect(editor.getByTestId('entry-1').getByLabel('Pause event')).toBeVisible();
  await expect(editor.getByTestId('offset')).not.toContainText('0:00'); // This might be a bad test requires that the test is not run at 0h
-  await editor.getByTestId('entry-1').getByLabel('Pause event').click();
-  await expect(editor.getByTestId('entry-1').getByLabel('Start event')).toBeVisible();
+  await editor.getByLabel('Pause event').click();

  // 1. initial check
  await expect(entry2.editorEvent).toContainText('9m');
@@ -135,29 +129,22 @@ test('time until absolute', async ({ context }) => {

 test('time until relative', async ({ context }) => {
  const editor = await context.newPage();
-  await editor.goto('/editor');
+  editor.goto('/editor');

  await editor.getByRole('button', { name: 'Edit' }).click();
  await editor.getByRole('button', { name: 'Rundown menu' }).click();
  await editor.getByRole('menuitem', { name: 'Clear all' }).click();
  await editor.getByRole('button', { name: 'Delete all' }).click();
-  await expect(editor.getByTestId('rundown-event')).toHaveCount(0);

  await editor.getByRole('button', { name: 'Create Event' }).click();
-  await expect(editor.getByTestId('rundown-event')).toHaveCount(1);
+  await editor.getByRole('button', { name: 'Event' }).nth(4).click();
  await editor.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
-  await expect(editor.getByTestId('rundown-event')).toHaveCount(2);
  await editor.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
-  await expect(editor.getByTestId('rundown-event')).toHaveCount(3);
-  await editor.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
-  await expect(editor.getByTestId('rundown-event')).toHaveCount(4);

  await editor.getByRole('button', { name: 'Relative' }).click();
  await editor.getByTestId('entry-1').getByLabel('Start event').click();
-  await expect(editor.getByTestId('entry-1').getByLabel('Pause event')).toBeVisible();
  await expect(editor.getByTestId('offset')).toContainText('0:00'); // This might be a bad test as it ruires the evaluation to happen within 1s
-  await editor.getByTestId('entry-1').getByLabel('Pause event').click();
-  await expect(editor.getByTestId('entry-1').getByLabel('Start event')).toBeVisible();
+  await editor.getByLabel('Pause event').click();

  await expect(editor.getByTestId('entry-2').getByTestId('rundown-event')).toContainText('9m');
  await expect(editor.getByTestId('entry-3').getByTestId('rundown-event')).toContainText('19m');
@@ -1,48 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test('teleprompter renders and responds to its primary controls', async ({ page, request }) => {
-  // Earlier feature specs edit the loaded rundown. Restore the real demo project
-  // instead of manufacturing test-only events: its notes are the script fixture.
-  const response = await request.post('/data/db/demo');
-  expect(response.ok()).toBe(true);
-  const loadResponse = await request.get('/api/load/index/5');
-  expect(loadResponse.ok()).toBe(true);
-
-  await page.goto('/teleprompter?script=note&flipV=true');
-
-  const view = page.getByTestId('teleprompter-view');
-  const scroller = page.getByTestId('teleprompter-scroller');
-  const speed = page.getByTestId('teleprompter-speed');
-
-  await expect(view).toBeVisible();
-  await expect(scroller).toBeVisible();
-  await expect(page.getByText('Music plays, holding slide on screens')).toBeVisible();
-  await expect(speed).toContainText('14');
-  await expect(view).toHaveCSS('transform', /^matrix\(1, 0, 0, -1/);
-
-  // Following uses layout coordinates, which must remain stable when the view's
-  // visual coordinates are inverted by a vertical transform.
-  const loadedBlock = page.locator('.teleprompter__block[data-loaded]');
-  await expect(loadedBlock).toBeAttached();
-  const expectedScrollTop = await loadedBlock.evaluate((element) => {
-    const scroller = element.closest('.teleprompter')?.querySelector<HTMLElement>('.teleprompter__scroller');
-    if (!scroller) throw new Error('Teleprompter scroller not found');
-    return Math.max(0, (element as HTMLElement).offsetTop - scroller.clientHeight * 0.25);
-  });
-  await expect
-    .poll(async () => Math.abs((await scroller.evaluate((element) => element.scrollTop)) - expectedScrollTop))
-    .toBeLessThan(2);
-
-  await page.goto('/teleprompter?script=note');
-
-  await page.keyboard.press('Space');
-  await expect.poll(() => scroller.evaluate((element) => element.scrollTop)).toBeGreaterThan(0);
-  await page.keyboard.press('Space');
-
-  await page.keyboard.press('ArrowRight');
-  await page.keyboard.press('f');
-  await expect(speed).toContainText('15');
-  await expect(page).toHaveURL(/speed=15/);
-  await expect(page).toHaveURL(/flipH=true/);
-  await expect(view).toHaveCSS('transform', /^matrix\(-1/);
-});
@@ -1,6 +1,6 @@
 {
  "name": "ontime",
-  "version": "4.13.0-beta.1",
+  "version": "4.11.0",
  "description": "Time keeping for live events",
  "keywords": [
    "ontime",
@@ -1,5 +1,5 @@
 {
-  "version": "4.13.0-beta.1",
+  "version": "4.11.0",
  "name": "ontime-types",
  "type": "module",
  "main": "./src/index.ts",
@@ -1,8 +1,35 @@
 import type { MaybeNumber } from '../../utils/utils.type.js';
+import type { EntryId } from './OntimeEntry.js';

 export type OntimeEventReport = {
  startedAt: MaybeNumber;
  endedAt: MaybeNumber;
+  /**
+   * 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;
+  scheduledDuration: number;
+  /** how many times the event was started, >1 means it was re-run */
+  playCount: number;
 };

-export type OntimeReport = Record<string, OntimeEventReport>;
+export type OntimeReport = Record<EntryId, OntimeEventReport>;
+
+/** Headline numbers for everything in the current report */
+export type RunSummary = {
+  /** events which produced a report entry */
+  eventsRun: number;
+  /** playable events in the rundown */
+  eventsPlanned: number;
+  scheduledDuration: number;
+  actualDuration: number;
+  /** actualDuration - scheduledDuration, signed */
+  drift: number;
+  eventsOver: number;
+  eventsUnder: number;
+  eventsOnTime: number;
+  /** largest single overrun, answers "what blew the schedule" */
+  worstOverrun: { id: EntryId; delta: number } | null;
+};
@@ -11,7 +11,6 @@ export enum OntimeView {
  StudioClock = 'studio',
  Countdown = 'countdown',
  ProjectInfo = 'info',
-  Teleprompter = 'teleprompter',
 }

 export type OntimeViewPresettable = Exclude<OntimeView, OntimeView.Editor>;
@@ -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 { OntimeReport, OntimeEventReport, RunSummary } from './definitions/core/Report.type.js';

 // ---> Automations
 export { ontimeActionKeyValues } from './definitions/core/Automation.type.js';
@@ -99,6 +99,15 @@ export {

 export { isPlaybackActive } from './src/playback-utils/playbackstate.js';

+// feature business logic - reports
+export {
+  countPlannedEvents,
+  getEventVariance,
+  getRunSummary,
+  type EventVariance,
+  type VarianceStatus,
+} from './src/report-utils/reportUtils.js';
+
 //Colour
 export {
  colourToHex,
@@ -0,0 +1,112 @@
+import type { OntimeEventReport, OntimeReport } from 'ontime-types';
+
+import { getEventVariance, getRunSummary } from './reportUtils.js';
+
+function makeEntry(patch: Partial<OntimeEventReport> = {}): OntimeEventReport {
+  return {
+    startedAt: 0,
+    endedAt: 10000,
+    scheduledStart: 0,
+    scheduledDuration: 10000,
+    playCount: 1,
+    ...patch,
+  };
+}
+
+describe('getEventVariance()', () => {
+  it('reports an event which never ran', () => {
+    expect(getEventVariance(undefined)).toMatchObject({ status: 'not-run', actualDuration: null, delta: 0 });
+  });
+
+  it('reports an event which started but never finished', () => {
+    const entry = makeEntry({ startedAt: 1000, endedAt: null });
+    expect(getEventVariance(entry)).toMatchObject({ status: 'not-run', actualDuration: null });
+  });
+
+  it('reports an event which never started', () => {
+    const entry = makeEntry({ startedAt: null, endedAt: 1000 });
+    expect(getEventVariance(entry)).toMatchObject({ status: 'not-run' });
+  });
+
+  it('reports an event which matched its schedule', () => {
+    const entry = makeEntry({ startedAt: 0, endedAt: 10000, scheduledDuration: 10000 });
+    expect(getEventVariance(entry)).toMatchObject({ status: 'ontime', actualDuration: 10000, delta: 0 });
+  });
+
+  it('treats sub-second differences as on time', () => {
+    const entry = makeEntry({ startedAt: 0, endedAt: 10500, scheduledDuration: 10000 });
+    expect(getEventVariance(entry)).toMatchObject({ status: 'ontime', delta: 500 });
+  });
+
+  it('reports an overrun', () => {
+    const entry = makeEntry({ startedAt: 0, endedAt: 15000, scheduledDuration: 10000 });
+    expect(getEventVariance(entry)).toMatchObject({ status: 'over', actualDuration: 15000, delta: 5000 });
+  });
+
+  it('reports an underrun', () => {
+    const entry = makeEntry({ startedAt: 0, endedAt: 6000, scheduledDuration: 10000 });
+    expect(getEventVariance(entry)).toMatchObject({ status: 'under', actualDuration: 6000, delta: -4000 });
+  });
+
+  it('measures against the snapshot, not the current rundown', () => {
+    // the rundown may have been edited after the run, the snapshot is what counts
+    const entry = makeEntry({ startedAt: 0, endedAt: 12000, scheduledDuration: 10000 });
+    expect(getEventVariance(entry).delta).toBe(2000);
+  });
+});
+
+describe('getRunSummary()', () => {
+  it('returns an empty summary for an empty report', () => {
+    expect(getRunSummary({}, 0)).toMatchObject({
+      eventsRun: 0,
+      eventsPlanned: 0,
+      scheduledDuration: 0,
+      actualDuration: 0,
+      drift: 0,
+      worstOverrun: null,
+    });
+  });
+
+  it('aggregates durations and drift across a run', () => {
+    const report: OntimeReport = {
+      a: makeEntry({ startedAt: 0, endedAt: 15000, scheduledDuration: 10000 }), // +5000
+      b: makeEntry({ startedAt: 15000, endedAt: 21000, scheduledDuration: 10000 }), // -4000
+      c: makeEntry({ startedAt: 21000, endedAt: 31000, scheduledDuration: 10000 }), // 0
+    };
+
+    expect(getRunSummary(report, 4)).toMatchObject({
+      eventsRun: 3,
+      eventsPlanned: 4,
+      scheduledDuration: 30000,
+      actualDuration: 31000,
+      drift: 1000,
+      eventsOver: 1,
+      eventsUnder: 1,
+      eventsOnTime: 1,
+    });
+  });
+
+  it('identifies the worst overrun', () => {
+    const report: OntimeReport = {
+      a: makeEntry({ startedAt: 0, endedAt: 15000, scheduledDuration: 10000 }), // +5000
+      b: makeEntry({ startedAt: 0, endedAt: 30000, scheduledDuration: 10000 }), // +20000
+      c: makeEntry({ startedAt: 0, endedAt: 12000, scheduledDuration: 10000 }), // +2000
+    };
+
+    expect(getRunSummary(report, 3).worstOverrun).toEqual({ id: 'b', delta: 20000 });
+  });
+
+  it('ignores events which did not complete', () => {
+    const report: OntimeReport = {
+      a: makeEntry({ startedAt: 0, endedAt: 15000, scheduledDuration: 10000 }),
+      b: makeEntry({ startedAt: 15000, endedAt: null, scheduledDuration: 10000 }),
+    };
+
+    expect(getRunSummary(report, 2)).toMatchObject({
+      eventsRun: 1,
+      scheduledDuration: 10000,
+      actualDuration: 15000,
+      drift: 5000,
+    });
+  });
+});
@@ -0,0 +1,101 @@
+import type { EntryId, OntimeEventReport, OntimeReport, RundownEntries, RunSummary } from 'ontime-types';
+import { isOntimeEvent } from 'ontime-types';
+
+import { MILLIS_PER_SECOND } from '../date-utils/conversionUtils.js';
+
+export type VarianceStatus = 'ontime' | 'over' | 'under' | 'not-run';
+
+export type EventVariance = {
+  /** how long the event actually took, null if it never completed */
+  actualDuration: number | null;
+  /** actualDuration - scheduledDuration, signed. 0 when the event did not complete */
+  delta: number;
+  status: VarianceStatus;
+};
+
+const notRun: EventVariance = { actualDuration: null, delta: 0, status: 'not-run' };
+
+/**
+ * Calculates how an event performed against its schedule.
+ * An event is considered on time if it is within a second of its scheduled duration.
+ */
+export function getEventVariance(entry: OntimeEventReport | undefined): EventVariance {
+  if (!entry) {
+    return notRun;
+  }
+
+  const { startedAt, endedAt, scheduledDuration } = entry;
+  if (startedAt === null || endedAt === null) {
+    return notRun;
+  }
+
+  const actualDuration = endedAt - startedAt;
+  const delta = actualDuration - scheduledDuration;
+
+  if (Math.abs(delta) < MILLIS_PER_SECOND) {
+    return { actualDuration, delta, status: 'ontime' };
+  }
+
+  return { actualDuration, delta, status: delta > 0 ? 'over' : 'under' };
+}
+
+/**
+ * Aggregates a run's per event data into the headline numbers for a show.
+ * @param report the run's per event data
+ * @param eventsPlanned how many playable events the rundown held when the run was made
+ */
+export function getRunSummary(report: OntimeReport, eventsPlanned: number): RunSummary {
+  const summary: RunSummary = {
+    eventsRun: 0,
+    eventsPlanned,
+    scheduledDuration: 0,
+    actualDuration: 0,
+    drift: 0,
+    eventsOver: 0,
+    eventsUnder: 0,
+    eventsOnTime: 0,
+    worstOverrun: null,
+  };
+
+  for (const [id, entry] of Object.entries(report)) {
+    const variance = getEventVariance(entry);
+    if (variance.status === 'not-run') {
+      continue;
+    }
+
+    summary.eventsRun += 1;
+    summary.scheduledDuration += entry.scheduledDuration;
+    summary.actualDuration += variance.actualDuration as number;
+
+    if (variance.status === 'over') {
+      summary.eventsOver += 1;
+      if (summary.worstOverrun === null || variance.delta > summary.worstOverrun.delta) {
+        summary.worstOverrun = { id, delta: variance.delta };
+      }
+    } else if (variance.status === 'under') {
+      summary.eventsUnder += 1;
+    } else {
+      summary.eventsOnTime += 1;
+    }
+  }
+
+  summary.drift = summary.actualDuration - summary.scheduledDuration;
+
+  return summary;
+}
+
+/**
+ * Counts the events a run could have played.
+ * Skipped events are excluded: they were never meant to run and would
+ * make the completion figures read as if the show fell short.
+ */
+export function countPlannedEvents(entries: RundownEntries, order: EntryId[]): number {
+  let count = 0;
+  for (const id of order) {
+    const entry = entries[id];
+    if (entry && isOntimeEvent(entry) && !entry.skip) {
+      count += 1;
+    }
+  }
+  return count;
+}
Author	SHA1	Message	Date
Claude	05cf7c7c56	fix(report): measure events against the schedule they ran on The runtime report joined live report data against the current rundown, so editing an event after the show silently rewrote the report of a show that had already happened. Durations, and the over/under chip in the rundown, would change to match the edit. Each event now records the schedule it actually ran on, and the report is read from that. - OntimeEventReport carries scheduledStart and scheduledDuration, captured when the event starts, plus a playCount so an event started twice no longer overwrites its own record without trace. - The over/under calculation moves to ontime-utils, where the rundown chip and the settings panel share one implementation instead of deriving it separately and disagreeing. - The report panel gains a summary of the show: planned against actual, drift, and how many events landed over, under or on time. - Export CSV was rendering a trash bin icon. No change to how or where anything is stored: the report stays in memory exactly as before. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019nr3FbLbM8gB8Jm771YgTV	2026-08-09 19:19:02 +00:00
Claude	a851414d13	refactor(report): finish via playback, one file per run Uses the Finish the app already has, and stops rewriting the whole history every time a show ends. - The Go button already reads "Finish" on the last event and calls stop (playbackControl.utils). Closing the run hangs off that instead of a second Finish button of its own, so POST /report/runs/finish and the button in the overview are both gone. The run indicator stays as the way the feature is found, now a passive status that opens the reports panel. - Reports move from one file per project to a directory per project with one file per run. Finishing a show wrote the entire history back to disk, which grew with every show ever recorded; it now writes only the run that just ended. Deleting a run unlinks one file and deleting a project removes one directory. - A report that cannot be read is skipped instead of taking the rest of the history with it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019nr3FbLbM8gB8Jm771YgTV	2026-08-09 14:59:57 +00:00
Claude	b21385ec4a	refactor(report): a run becomes a report only when finished Progress is kept in memory while a show runs and written once, as a complete report, when the operator finishes the run. The stored history therefore never contains a partial run. - Nothing writes on the cue path. triggerReportEntry only updates memory, so the sidecar is untouched between the first event and finish. - Removes the write coalescing added for the previous model: with a single write per run there is nothing to debounce, so the timer, the dirty flag, the flush export and the shutdown hook all go, and app.ts returns to its previous state. - ShowRun.endedAt is no longer nullable. A stored run is finished by definition, so recovery of runs left open by a crash is gone along with the concept, and the run list drops its ongoing state. - Adds GET /report/runs/open for the editor indicator. /runs now means finished reports only, which is also the contract Cloud sees. - A run whose rundown was deleted before it finished now reports the events that actually ran as its planned count, rather than zero. Known gap: RestorePoint carries playback state only, so a crash mid show loses the in progress report. The stored history is unaffected. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019nr3FbLbM8gB8Jm771YgTV	2026-08-08 21:35:52 +00:00
Claude	faca1a1c76	refactor(report): reduce footprint and take writes off the cue path Cuts the risk surface of the run history feature while keeping what it delivers. Stability: - Sidecar writes were happening on every event stop, and each write serialised the project's entire history. That put work proportional to everything that ever ran onto the show critical path, growing without bound. Writes during a run are now coalesced, with immediate writes for anything a user did and a flush on finish, project change and shutdown. - The editor no longer carries any of this feature's code. The per event last run chip is gone, so RundownEventChip, RundownEventInner and useProjectRundowns are back to their previous state. Each rundown row had gained two extra query subscriptions, one of them polling. - closeRun is no longer called from runtime.service, so the timer path is untouched. Ending a run is now explicit, which also means a mid show stop and restart no longer splits one show across two runs. Discovery: - A run indicator in the editor overview appears only while a run is being recorded. It shows when recording started and carries the Finish action, then links to the report. One component with one subscription, rather than anything per row. Smaller: - report.parser drops from exhaustive validation of a file we write ourselves to a shallow shape check; the failure mode is unchanged. - getCombinedReport returns to its original shape, keeping only the snapshot read that report accuracy depends on. - Removes getLatestRun and GET /runs/latest, which only existed for the chip, and hand rolled refetches the api layer already covers. Production diff is down from ~1460 to ~1290 lines, and the four floating promises the previous revision introduced are gone. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019nr3FbLbM8gB8Jm771YgTV	2026-08-08 21:25:03 +00:00
Claude	8551c161f1	fix(report): correct run timestamps, scoping and recovery Review of the run history feature turned up four defects, all in the code that feature introduced. - Runs were dated with a time of day rather than a wall clock instant. `clock` and `rundown.actualStart` are millis since midnight, so every run in the history list rendered as 1 January 1970, and getLatestRun ordered runs incorrectly across days: a run at 09:00 today sorted below one at 20:00 last week, so the "last run" chip and /runs/latest could return an older run. Runs now take `_startEpoch`, the instant the show began, and the type documents the invariant. - A stop arriving with no run open is ignored. Loading a project stops playback and reinitialises reporting in the same tick, and the trailing stop was attributing the previous project's event to the new one. - Run summaries counted planned events from the loaded rundown rather than the rundown the run belongs to, so switching rundowns mid-run gave the summary a denominator from a different rundown. A run whose rundown has since been deleted now keeps its last known count instead of dropping to zero. - Recovery of runs left open by a crash only closed the first one. Any others stayed dangling forever: permanently shown as ongoing and never eligible as the latest run. Also replaces the raw ISO default run label with a readable local date and time, and adds a batching upsertRuns to the store so recovery writes the sidecar once rather than racing one write per run. Each fix has a regression test, verified to fail without the change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019nr3FbLbM8gB8Jm771YgTV	2026-08-08 16:21:00 +00:00
Claude	3c2875a956	feat(report): persistent show run history Turns the reporter from a live-only, single-run curiosity into a persistent, per-project, per-rundown history of runs. - Extend OntimeEventReport with a schedule snapshot (scheduledStart, scheduledDuration) taken when an event starts, plus playCount. Reports are now a record that survives later rundown edits, rather than a live join against the current rundown. - Add a run lifecycle: a run opens on the first event start and closes on a full stop, archiving the previous run to history so the next start begins fresh. - Persist runs to a per-project sidecar file (services/report-service), patterned on the existing restore-service, so a crash or restart no longer loses the whole show's record. Runs are scoped by rundownId for multi-rundown projects, cascade-deleted with their rundown or project, renamed alongside a project rename, and deliberately not copied when a project is duplicated. - Extract the over/under/on-time variance and run summary maths shared by the rundown chip, the report settings panel, and the server into ontime-utils (getEventVariance, getRunSummary, countPlannedEvents). - Extend the report API with run history endpoints (list, get, latest, rename, delete) while keeping GET /report's existing shape so Companion and HTTP automations are unaffected. - Replace the settings report table with a run browser: a list of runs with a rundown filter, inline rename, delete, and a detail view with per-run summary stats and CSV export. - Add a third, muted state to the rundown event chip: an event with nothing in the current run yet previews how it went last time. Fixes a real bug found while testing the new store: emptyStore() was a shared object, so its runs array leaked mutations across project loads. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019nr3FbLbM8gB8Jm771YgTV	2026-08-08 11:08:28 +00:00