bump version

apps/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getontime/cli",
-  "version": "4.11.0",
+  "version": "4.13.0-beta.1",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "4.11.0",
+  "version": "4.13.0-beta.1",
   "private": true,
   "type": "module",
   "dependencies": {

apps/client/src/AppRouter.tsx

@@ -20,6 +20,7 @@ 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'));
@@ -95,6 +96,15 @@ 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 />} />
@@ -165,6 +175,7 @@ const PresetViewMap: Record<OntimeViewPresettable, ComponentType> = {
   [OntimeView.StudioClock]: StudioClock,
   [OntimeView.Countdown]: Countdown,
   [OntimeView.ProjectInfo]: ProjectInfo,
+  [OntimeView.Teleprompter]: Teleprompter,
 };
 
 /**
@@ -214,8 +225,14 @@ function PresetView() {
   const Component = PresetViewMap[preset.target as OntimeViewPresettable];
   return (
     <PresetContext value={preset}>
-      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
-      {Component ? <Component /> : <NotFound />}
+      <ViewLoader>
+        <ViewNavigationMenu
+          isNavigationLocked={getIsNavigationLocked()}
+          suppressSettings
+          suppressSpaceHotkey={preset.target === OntimeView.Teleprompter}
+        />
+        {Component ? <Component /> : <NotFound />}
+      </ViewLoader>
     </PresetContext>
   );
 }

apps/client/src/common/api/rundown.ts

@@ -176,6 +176,13 @@ 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
  */

apps/client/src/common/components/keyboard-shortcuts/KeyboardShortcuts.module.scss

@@ -0,0 +1,66 @@
+.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;
+  }
+}

apps/client/src/common/components/keyboard-shortcuts/KeyboardShortcuts.tsx

@@ -0,0 +1,42 @@
+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>;
+}

apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx

@@ -1,4 +1,4 @@
-import { useDisclosure, useHotkeys } from '@mantine/hooks';
+import { type HotkeyItem, useDisclosure, useHotkeys } from '@mantine/hooks';
 import { memo } from 'react';
 import { useSearchParams } from 'react-router';
 
@@ -13,24 +13,32 @@ interface ViewNavigationMenuProps {
   isNavigationLocked?: boolean;
   /** prevent showing settings */
   suppressSettings?: boolean;
+  suppressSpaceHotkey?: boolean;
 }
 
 export default memo(ViewNavigationMenu);
-function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
+function ViewNavigationMenu({ isNavigationLocked, suppressSettings, suppressSpaceHotkey }: 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([
-    [
-      'Space',
-      () => {
-        if (isNavigationLocked) return;
-        menuHandler.toggle();
-      },
-      { preventDefault: true },
-    ],
+    ...spaceHotkey,
     [
       'mod + ,',
       () => {

apps/client/src/common/components/view-params-editor/ParamInput.tsx

@@ -49,7 +49,13 @@ export default function ParamInput({ paramField }: ParamInputProps) {
   }
 
   if (type === 'boolean') {
-    return <ControlledSwitch id={id} initialValue={isStringBoolean(searchParams.get(id)) ?? defaultValue} />;
+    const paramValue = searchParams.get(id);
+    return (
+      <ControlledSwitch
+        id={id}
+        initialValue={paramValue === null ? Boolean(defaultValue) : isStringBoolean(paramValue)}
+      />
+    );
   }
 
   if (type === 'number') {

apps/client/src/common/components/view-params-editor/__tests__/viewParams.utils.test.ts

@@ -228,11 +228,41 @@ 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');
+  });
 });

apps/client/src/common/components/view-params-editor/viewParams.utils.ts

@@ -155,6 +155,14 @@ 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) {

apps/client/src/common/constants/timerLifecycle.ts

@@ -1,25 +0,0 @@
-import { TimerLifeCycle } from 'ontime-types';
-
-/**
- * User facing labels for the timer lifecycle
- * Shared between the automation settings and the rundown event editor
- * so that a lifecycle is named the same everywhere it is shown
- */
-export const lifecycleLabels: Record<TimerLifeCycle, string> = {
-  [TimerLifeCycle.onLoad]: 'On Load',
-  [TimerLifeCycle.onStart]: 'On Start',
-  [TimerLifeCycle.onPause]: 'On Pause',
-  [TimerLifeCycle.onStop]: 'On Stop',
-  [TimerLifeCycle.onClock]: 'Every second',
-  [TimerLifeCycle.onUpdate]: 'On Timer Update',
-  [TimerLifeCycle.onFinish]: 'On Finish',
-  [TimerLifeCycle.onWarning]: 'On Warning',
-  [TimerLifeCycle.onDanger]: 'On Danger',
-};
-
-/**
- * Resolves a lifecycle to its user facing label, falling back to the raw value
- */
-export function getLifecycleLabel(cycle: TimerLifeCycle | string): string {
-  return lifecycleLabels[cycle as TimerLifeCycle] ?? cycle;
-}

apps/client/src/common/hooks/useEntryAction.ts

@@ -49,6 +49,7 @@ import {
   requestEventSwap,
   requestGroupEntries,
   requestUngroup,
+  requestFitGroupTarget,
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
 import { useEditorSettings } from '../stores/editorSettings';
@@ -466,7 +467,27 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
         return previousEnd;
       }
     },
-    [getCurrentRundownData, updateEntryMutation, queryClient],
+    [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],
   );
 
   /**
@@ -1009,6 +1030,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
       swapEvents,
       updateEntry,
       updateTimer,
+      matchGroupDuration,
     }),
     [
       addEntry,
@@ -1026,6 +1048,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
       swapEvents,
       updateEntry,
       updateTimer,
+      matchGroupDuration,
     ],
   );
 }

apps/client/src/common/stores/logger.ts

@@ -17,15 +17,9 @@ const logger = createStore<LogStore>(() => ({
 
 export const useLogData = () => useStore(logger);
 
-/**
- * The server queue is capped at 100 entries, the client's was not.
- * A long show with chatty automations would otherwise grow this forever.
- */
-const maxLogEntries = 500;
-
 export const addLog = (log: Log) =>
   logger.setState((state) => ({
-    logs: [log, ...state.logs].slice(0, maxLogEntries),
+    logs: [log, ...state.logs],
   }));
 
 export const clearLogs = () => logger.setState({ logs: [] });

apps/client/src/common/utils/__tests__/automationOutputs.test.ts

@@ -1,32 +0,0 @@
-import type { AutomationOutput } from 'ontime-types';
-
-import { summariseOutputs } from '../automationOutputs';
-
-describe('summariseOutputs', () => {
-  it('returns an empty list when there are no outputs', () => {
-    expect(summariseOutputs([])).toEqual([]);
-  });
-
-  it('counts repeated output kinds', () => {
-    const outputs: AutomationOutput[] = [
-      { type: 'osc', targetIP: '127.0.0.1', targetPort: 8000, address: '/go', args: '' },
-      { type: 'osc', targetIP: '127.0.0.1', targetPort: 8000, address: '/stop', args: '' },
-      { type: 'http', url: 'http://127.0.0.1/start' },
-    ];
-
-    expect(summariseOutputs(outputs)).toEqual([
-      { type: 'osc', label: 'OSC', count: 2 },
-      { type: 'http', label: 'HTTP', count: 1 },
-    ]);
-  });
-
-  it('presents kinds in a stable order regardless of insertion order', () => {
-    const outputs: AutomationOutput[] = [
-      { type: 'ontime', action: 'aux1-start' },
-      { type: 'http', url: 'http://127.0.0.1/start' },
-      { type: 'osc', targetIP: '127.0.0.1', targetPort: 8000, address: '/go', args: '' },
-    ];
-
-    expect(summariseOutputs(outputs).map(({ type }) => type)).toEqual(['osc', 'http', 'ontime']);
-  });
-});

apps/client/src/common/utils/automationOutputs.ts

@@ -1,32 +0,0 @@
-import type { AutomationOutput } from 'ontime-types';
-
-const outputLabels: Record<AutomationOutput['type'], string> = {
-  osc: 'OSC',
-  http: 'HTTP',
-  ontime: 'Ontime',
-};
-
-export type OutputSummary = {
-  type: AutomationOutput['type'];
-  label: string;
-  count: number;
-};
-
-/**
- * Summarises an automation's outputs by kind so that a list row can say what the
- * automation does without the user having to open the form.
- * Shared between the automation settings panel and the rundown event editor.
- */
-export function summariseOutputs(outputs: AutomationOutput[]): OutputSummary[] {
-  const counts = new Map<AutomationOutput['type'], number>();
-
-  for (const output of outputs) {
-    counts.set(output.type, (counts.get(output.type) ?? 0) + 1);
-  }
-
-  // keep a stable presentation order regardless of the order the user added outputs
-  const order: AutomationOutput['type'][] = ['osc', 'http', 'ontime'];
-  return order
-    .filter((type) => counts.has(type))
-    .map((type) => ({ type, label: outputLabels[type], count: counts.get(type) as number }));
-}

apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss

@@ -200,8 +200,7 @@ $card-padding: 2rem;
 .overlay {
   position: absolute;
   z-index: $zindex-backdrop;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   backdrop-filter: blur(2px);
   display: grid;
   place-content: center;

apps/client/src/features/app-settings/panel/about-panel/AppVersion.module.scss

@@ -0,0 +1,7 @@
+.updateIndicator {
+  width: 0.5em;
+  height: 0.5em;
+  flex: 0 0 auto;
+  border-radius: 99px;
+  background-color: $red-400;
+}

apps/client/src/features/app-settings/panel/about-panel/AppVersion.tsx

@@ -3,6 +3,8 @@ 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();
 
@@ -18,7 +20,12 @@ export default function AppVersion() {
     return (
       <Panel.ListItem>
         <Panel.Field
-          title={`Ontime ${appVersion}`}
+          title={
+            <>
+              <span className={style.updateIndicator} aria-hidden='true' />
+              {`Ontime ${appVersion}`}
+            </>
+          }
           description={
             isOntimeCloud
               ? `Version ${data.version} is available. Restart your stage to update.`
@@ -26,7 +33,7 @@ export default function AppVersion() {
           }
         />
         {!isOntimeCloud && (
-          <ExternalLink href={websiteUrl}>Visit Ontime's page to download the latest version.</ExternalLink>
+          <ExternalLink href={websiteUrl}>Download the latest version from Ontime's page</ExternalLink>
         )}
       </Panel.ListItem>
     );

apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss

@@ -26,84 +26,61 @@
   gap: 1rem;
 }
 
-.titleSection {
+.titleSection,
+.filterSection,
+.oscSection,
+.httpSection,
+.actionSection {
   display: grid;
-  grid-template-columns: 1fr;
   grid-gap: 0.5rem;
+
+  button {
+    align-self: flex-end;
+  }
 }
 
 .titleSection,
 .ruleSection,
-.card {
-  label {
-    display: block;
+.filterSection,
+.oscSection,
+.httpSection,
+.actionSection {
+  label,
+  div {
+    // we use the div as non-interactive placeholder for button cells
+    // it needs to match the size of the label element
     font-size: calc(1rem - 3px);
+  }
+  label {
     color: $label-gray;
   }
 }
 
-/** shared shell for a single filter or output */
-.card {
-  border: 1px solid $white-10;
+.titleSection {
+  grid-template-columns: 1fr;
+}
+
+.filterSection {
+  grid-template-columns: 2fr 1fr 2fr auto;
+}
+
+.oscSection {
+  grid-template-columns: 9rem 5rem 3fr 4fr auto;
+}
+
+.httpSection {
+  grid-template-columns: 1fr auto;
+}
+
+.actionSection {
+  grid-template-columns: auto 1fr 1fr auto;
+
+  .test {
+    grid-column: -1;
+  }
+}
+
+.outputCard {
   border-left: 0.25rem solid $gray-1200;
-  border-radius: $component-border-radius-md;
-  background-color: $black-10;
-}
-
-.cardHeader {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid $white-10;
-}
-
-/** pushes the actions to the end of the header, and absorbs any overflow */
-.cardSummary {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: $aux-text-size;
-  color: $secondary-text-gray;
-}
-
-.cardBody {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
-  gap: 0.5rem 0.75rem;
-  padding: 0.75rem;
-}
-
-/** for fields that read badly when narrow: OSC address and args, URLs, message text */
-.spanFull {
-  grid-column: 1 / -1;
-}
-
-.testOk {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: $aux-text-size;
-  color: $green-400;
-}
-
-.testError {
-  padding: 0 0.75rem 0.5rem;
-}
-
-.tagOsc {
-  background-color: $blue-1000;
-  color: $blue-300;
-}
-
-.tagHttp {
-  background-color: $green-1000;
-  color: $green-300;
-}
-
-.tagOntime {
-  background-color: $gray-1000;
-  color: $gray-200;
+  padding-left: 0.5rem;
 }

apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx

@@ -1,31 +1,21 @@
 import {
   Automation,
   AutomationDTO,
-  AutomationFilter,
   HTTPOutput,
   OSCOutput,
   OntimeAction,
-  TimerLifeCycle,
-  Trigger,
   isHTTPOutput,
   isOSCOutput,
   isOntimeAction,
 } from 'ontime-types';
-import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
-import { IoAdd, IoCheckmark, IoTrash } from 'react-icons/io5';
+import { IoAdd, IoTrash } from 'react-icons/io5';
 
-import {
-  addAutomation,
-  addTrigger,
-  deleteTrigger,
-  editAutomation,
-  testOutput,
-} from '../../../../common/api/automation';
+import { addAutomation, editAutomation, testOutput } from '../../../../common/api/automation';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import IconButton from '../../../../common/components/buttons/IconButton';
-import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import Info from '../../../../common/components/info/Info';
 import Input from '../../../../common/components/input/input/Input';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
@@ -37,7 +27,7 @@ import useAutomationSettings from '../../../../common/hooks-query/useAutomationS
 import useCustomFields from '../../../../common/hooks-query/useCustomFields';
 import { startsWithHttp } from '../../../../common/utils/regex';
 import * as Panel from '../../panel-utils/PanelUtils';
-import { cycles, isAutomation, makeFieldList, operators } from './automationUtils';
+import { isAutomation, makeFieldList } from './automationUtils';
 import OntimeActionForm from './OntimeActionForm';
 import TemplateInput from './template-input/TemplateInput';
 
@@ -46,67 +36,17 @@ import style from './AutomationForm.module.scss';
 const integrationsDocsUrl = 'https://docs.getontime.no/api/automation/#using-variables-in-automation';
 const formId = 'automation-form';
 
-/** how long a successful test keeps its confirmation on screen */
-const testFeedbackDuration = 2000;
-
-type TestState = { status: 'sending' | 'ok' | 'error'; message?: string };
-
-/** lifecycles that fire continuously, and are worth a warning before a user picks one */
-const continuousCycles: TimerLifeCycle[] = [TimerLifeCycle.onClock, TimerLifeCycle.onUpdate];
-
 interface AutomationFormProps {
   automation: Automation | AutomationDTO;
-  /** global triggers, used to resolve which lifecycles this automation is currently bound to */
-  triggers: Trigger[];
   onClose: () => void;
 }
 
-export default function AutomationForm({ automation, triggers, onClose }: AutomationFormProps) {
+export default function AutomationForm({ automation, onClose }: AutomationFormProps) {
   const isEdit = isAutomation(automation);
   const { data } = useCustomFields();
   const { refetch } = useAutomationSettings();
   const fieldList = useMemo(() => makeFieldList(data), [data]);
 
-  /**
-   * Triggers are a separate entity, so they live outside the form state.
-   *
-   * We snapshot the automation's triggers when the form opens and reconcile against that
-   * snapshot, never against the live prop: settings are polled, so a trigger created
-   * elsewhere while this form is open must not be deleted by a save that never saw it.
-   */
-  const [initialTriggers] = useState<Trigger[]>(() =>
-    isAutomation(automation) ? triggers.filter((trigger) => trigger.automationId === automation.id) : [],
-  );
-  const initialCycles = useMemo(
-    () => Array.from(new Set(initialTriggers.map((trigger) => trigger.trigger))),
-    [initialTriggers],
-  );
-  const [selectedCycles, setSelectedCycles] = useState<TimerLifeCycle[]>(initialCycles);
-  /** set once a create succeeds, so a retry after a failed trigger sync edits instead of creating a duplicate */
-  const [createdId, setCreatedId] = useState<string | null>(null);
-
-  const cyclesAreDirty =
-    selectedCycles.length !== initialCycles.length ||
-    selectedCycles.some((cycle) => !initialCycles.includes(cycle)) ||
-    initialCycles.some((cycle) => !selectedCycles.includes(cycle));
-
-  const toggleCycle = (cycle: TimerLifeCycle) => {
-    setSelectedCycles((prev) => (prev.includes(cycle) ? prev.filter((c) => c !== cycle) : [...prev, cycle]));
-  };
-
-  /**
-   * A lifecycle can carry several differently named triggers, which the chips collapse into one.
-   * Unchecking it removes all of them, so say which ones rather than deleting them quietly.
-   */
-  const triggersToRemove = initialTriggers.filter((trigger) => !selectedCycles.includes(trigger.trigger));
-
-  /**
-   * Test results are keyed by the field array id rather than the index:
-   * removing an output shifts every index after it, which would leave feedback on the wrong row
-   */
-  const [testResults, setTestResults] = useState<Record<string, TestState>>({});
-  const feedbackTimers = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
-
   const {
     control,
     handleSubmit,
@@ -153,26 +93,6 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
     setFocus('title');
   }, [setFocus]);
 
-  // the timers outlive a fast close, clearing them avoids setting state on an unmounted form
-  useEffect(() => {
-    const timers = feedbackTimers.current;
-    return () => Object.values(timers).forEach(clearTimeout);
-  }, []);
-
-  const reportTest = (key: string, state: TestState) => {
-    setTestResults((prev) => ({ ...prev, [key]: state }));
-    clearTimeout(feedbackTimers.current[key]);
-
-    if (state.status === 'ok') {
-      feedbackTimers.current[key] = setTimeout(() => {
-        setTestResults((prev) => {
-          const { [key]: _discarded, ...rest } = prev;
-          return rest;
-        });
-      }, testFeedbackDuration);
-    }
-  };
-
   const handleAddNewFilter = () => {
     appendFilter({ field: '', operator: 'equals', value: '' });
   };
@@ -190,15 +110,12 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
     appendOutput({ type: 'ontime', action: 'aux1-start' });
   };
 
-  const handleTestOSCOutput = async (index: number, key: string) => {
-    const values = getValues(`outputs.${index}`) as OSCOutput;
-    if (!values.targetIP || !values.targetPort || !values.address) {
-      reportTest(key, { status: 'error', message: 'Fill in the target and address before testing' });
-      return;
-    }
-
-    reportTest(key, { status: 'sending' });
+  const handleTestOSCOutput = async (index: number) => {
     try {
+      const values = getValues(`outputs.${index}`) as OSCOutput;
+      if (!values.targetIP || !values.targetPort || !values.address) {
+        return;
+      }
       await testOutput({
         type: 'osc',
         targetIP: values.targetIP,
@@ -206,110 +123,67 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
         address: values.address,
         args: values.args,
       });
-      // OSC is fire and forget over UDP, the most we can honestly claim is that we sent it
-      reportTest(key, { status: 'ok', message: 'Sent' });
-    } catch (error) {
-      reportTest(key, { status: 'error', message: maybeAxiosError(error) });
+    } catch (_error) {
+      /** we dont handle errors here, users should use the network tab */
     }
   };
 
-  const handleTestHTTPOutput = async (index: number, key: string) => {
-    const values = getValues(`outputs.${index}`) as HTTPOutput;
-    if (!values.url) {
-      reportTest(key, { status: 'error', message: 'Add a target URL before testing' });
-      return;
-    }
-
-    reportTest(key, { status: 'sending' });
+  const handleTestHTTPOutput = async (index: number) => {
     try {
-      await testOutput({ type: 'http', url: values.url });
-      reportTest(key, { status: 'ok', message: 'Sent' });
-    } catch (error) {
-      reportTest(key, { status: 'error', message: maybeAxiosError(error) });
+      const values = getValues(`outputs.${index}`) as HTTPOutput;
+      if (!values.url) {
+        return;
+      }
+      await testOutput({
+        type: 'http',
+        url: values.url,
+      });
+    } catch (_error) {
+      /** we dont handle errors here, users should use the network tab */
     }
   };
 
-  const handleTestOntimeAction = async (index: number, key: string) => {
-    const values = getValues(`outputs.${index}`) as OntimeAction;
-
-    reportTest(key, { status: 'sending' });
+  const handleTestOntimeAction = async (index: number) => {
     try {
+      const values = getValues(`outputs.${index}`) as OntimeAction;
       // NOTE: there is no meaningful validation to do here, we let the server deal with the data
-      await testOutput({ ...values, type: 'ontime' });
-      reportTest(key, { status: 'ok', message: 'Done' });
-    } catch (error) {
-      reportTest(key, { status: 'error', message: maybeAxiosError(error) });
-    }
-  };
-
-  /**
-   * Reconciles the lifecycle selection against the global triggers.
-   * Runs after the automation itself is saved: a new automation has no id until then.
-   *
-   * Both sides are diffed against the mount-time snapshot, so this only ever removes
-   * triggers the user could actually see when they made the change.
-   */
-  const syncTriggers = async (automationId: string, title: string) => {
-    for (const trigger of triggersToRemove) {
-      await deleteTrigger(trigger.id);
-    }
-
-    const toAdd = selectedCycles.filter((cycle) => !initialCycles.includes(cycle));
-    for (const cycle of toAdd) {
-      const label = cycles.find(({ value }) => value === cycle)?.label ?? cycle;
-      await addTrigger({ title: `${title} — ${label}`, trigger: cycle, automationId });
+      await testOutput({
+        ...values,
+        type: 'ontime',
+      });
+    } catch (_error) {
+      /** we dont handle errors here */
     }
   };
 
   const onSubmit = async (values: AutomationDTO) => {
-    // saving happens in two requests, so a retry after a partial failure must edit rather than create again
-    const existingId = isAutomation(automation) ? automation.id : createdId;
-    let automationId: string;
-
-    try {
-      if (existingId) {
-        await editAutomation(existingId, { id: existingId, ...values });
-        automationId = existingId;
-      } else {
-        const created = await addAutomation(values);
-        setCreatedId(created.id);
-        automationId = created.id;
-      }
-    } catch (error) {
-      setError('root', { message: maybeAxiosError(error) });
-      return;
+    if (isAutomation(automation)) {
+      await handleEdit(automation.id, { id: automation.id, ...values });
+    } else {
+      await handleCreate(values);
     }
-
-    try {
-      await syncTriggers(automationId, values.title);
-    } catch (error) {
-      // the automation itself is saved, only its triggers failed. Keep the form open so the user can retry
-      refetch();
-      setError('root', { message: `Automation saved, but its triggers failed: ${maybeAxiosError(error)}` });
-      return;
-    }
-
     refetch();
-    onClose();
-  };
 
-  /** describes a filter in plain language so the user does not have to read the form back to themselves */
-  const describeFilter = (index: number): string | null => {
-    const field = watch(`filters.${index}.field`);
-    if (!field) {
-      return null;
+    async function handleEdit(id: string, values: Automation) {
+      try {
+        await editAutomation(id, values);
+        onClose();
+      } catch (error) {
+        setError('root', { message: maybeAxiosError(error) });
+      }
     }
 
-    const fieldLabel = fieldList.find((option) => option.value === field)?.label ?? field;
-    const operator = watch(`filters.${index}.operator`);
-    const operatorLabel = operators.find((option) => option.value === operator)?.label ?? operator;
-    const value = watch(`filters.${index}.value`);
-
-    return `${fieldLabel} ${operatorLabel} ${value ? `“${value}”` : 'nothing'}`;
+    async function handleCreate(values: AutomationDTO) {
+      try {
+        await addAutomation(values);
+        onClose();
+      } catch (error) {
+        setError('root', { message: maybeAxiosError(error) });
+      }
+    }
   };
 
-  const canSubmit = !isSubmitting && (isDirty || cyclesAreDirty) && isValid;
-  const hasContinuousCycle = selectedCycles.some((cycle) => continuousCycles.includes(cycle));
+  const canSubmit = !isSubmitting && isDirty && isValid;
 
   return (
     <Modal
@@ -317,7 +191,6 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
       onClose={onClose}
       showBackdrop
       showCloseButton
-      size='wide'
       title={isEdit ? 'Edit automation' : 'Create automation'}
       bodyElements={
         <form id={formId} onSubmit={handleSubmit(onSubmit)} className={style.outerColumn}>
@@ -334,119 +207,87 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
               </label>
               <Panel.Error>{errors.title?.message}</Panel.Error>
             </div>
-
-            <div className={style.titleSection}>
-              <label id='runs-on-label'>Runs on</label>
-              <Panel.Description>
-                Pick the moments in the timer lifecycle that should run this automation. You can also attach it to a
-                single event from the event editor.
-              </Panel.Description>
-              <Panel.InlineElements relation='inner' wrap='wrap' aria-labelledby='runs-on-label' role='group'>
-                {cycles.map(({ id, label, value }) => {
-                  const cycle = value as TimerLifeCycle;
-                  const isSelected = selectedCycles.includes(cycle);
-                  return (
-                    <Button
-                      key={id}
-                      size='small'
-                      variant={isSelected ? 'primary' : 'subtle'}
-                      aria-pressed={isSelected}
-                      onClick={() => toggleCycle(cycle)}
-                    >
-                      {label}
-                    </Button>
-                  );
-                })}
-              </Panel.InlineElements>
-              {hasContinuousCycle && (
-                <Panel.Description tone='warning'>
-                  Every second and On Timer Update fire continuously while the timer runs. Add a filter unless you mean
-                  to send on every tick.
-                </Panel.Description>
-              )}
-              {triggersToRemove.length > 0 && (
-                <Panel.Description tone='warning'>
-                  {`Saving removes ${triggersToRemove.length === 1 ? 'the trigger' : `${triggersToRemove.length} triggers`}: ${triggersToRemove
-                    .map((trigger) => trigger.title)
-                    .join(', ')}`}
-                </Panel.Description>
-              )}
-            </div>
           </div>
 
           <div className={style.innerColumn}>
             <h3>Filters (optional)</h3>
-            <Panel.Description>
-              Without filters the outputs are sent every time the automation is triggered.
-            </Panel.Description>
             <div className={style.ruleSection}>
-              {fieldFilters.length > 1 && (
-                <label>
-                  Trigger outputs if
-                  <RadioGroup
-                    orientation='horizontal'
-                    value={watch('filterRule')}
-                    onValueChange={(value) => setValue('filterRule', value, { shouldDirty: true })}
-                    items={[
-                      { value: 'all', label: 'All filters pass' },
-                      { value: 'any', label: 'Any filter passes' },
-                    ]}
-                  />
-                </label>
-              )}
+              <label>
+                Trigger outputs if
+                <RadioGroup
+                  orientation='horizontal'
+                  value={watch('filterRule')}
+                  onValueChange={(value) => setValue('filterRule', value, { shouldDirty: true })}
+                  items={[
+                    { value: 'all', label: 'All filters pass' },
+                    { value: 'any', label: 'Any filter passes' },
+                  ]}
+                />
+              </label>
               {fieldFilters.map((field, index) => {
-                const description = describeFilter(index);
+                const key = `filters.${index}.field.${field.id}`;
                 return (
-                  <div key={field.id} className={style.card}>
-                    <div className={style.cardHeader}>
-                      <Tag>Filter</Tag>
-                      <span className={style.cardSummary}>{description}</span>
-                      <IconButton
-                        aria-label='Delete filter'
-                        variant='ghosted-destructive'
-                        onClick={() => removeFilter(index)}
-                      >
-                        <IoTrash />
-                      </IconButton>
-                    </div>
-                    <div className={style.cardBody}>
-                      <label>
-                        Runtime data source
-                        <Select<string | null>
-                          // need to normalize '' to null for the Select to show the placeholder
-                          value={watch(`filters.${index}.field`) || null}
-                          onValueChange={(value) => {
-                            if (value === null) return;
-                            setValue(`filters.${index}.field`, value, { shouldDirty: true });
-                          }}
-                          options={fieldList.map(({ value, label }) => ({
-                            value,
-                            label,
-                            disabled: value === null,
-                          }))}
-                          aria-label='Event field'
-                        />
-                        <Panel.Error>{errors.filters?.[index]?.field?.message}</Panel.Error>
-                      </label>
-                      <label>
-                        Matching condition
-                        <Select
-                          value={watch(`filters.${index}.operator`)}
-                          onValueChange={(value: string | null) => {
-                            if (value === null) return;
-                            setValue(`filters.${index}.operator`, value as AutomationFilter['operator'], {
-                              shouldDirty: true,
-                            });
-                          }}
-                          options={operators}
-                          aria-label='Operator'
-                        />
-                        <Panel.Error>{errors.filters?.[index]?.operator?.message}</Panel.Error>
-                      </label>
-                      <label>
-                        Value to match
-                        <Input {...register(`filters.${index}.value`)} fluid placeholder='<empty / no value>' />
-                      </label>
+                  <div key={key} className={style.filterSection}>
+                    <label>
+                      Runtime data source
+                      <Select<string | null>
+                        // need to normalize '' to null for the Select to show the placeholder
+                        value={watch(`filters.${index}.field`) || null}
+                        onValueChange={(value) => {
+                          if (value === null) return;
+                          setValue(`filters.${index}.field`, value, { shouldDirty: true });
+                        }}
+                        options={fieldList.map(({ value, label }) => ({
+                          value,
+                          label,
+                          disabled: value === null,
+                        }))}
+                        aria-label='Event field'
+                      />
+                      <Panel.Error>{errors.filters?.[index]?.field?.message}</Panel.Error>
+                    </label>
+                    <label>
+                      Matching condition
+                      <Select
+                        value={watch(`filters.${index}.operator`)}
+                        onValueChange={(value: string | null) => {
+                          if (value === null) return;
+                          setValue(
+                            `filters.${index}.operator`,
+                            value as
+                              | 'equals'
+                              | 'not_equals'
+                              | 'greater_than'
+                              | 'less_than'
+                              | 'contains'
+                              | 'not_contains',
+                            { shouldDirty: true },
+                          );
+                        }}
+                        options={[
+                          { value: 'equals', label: 'equals' },
+                          { value: 'not_equals', label: 'not equals' },
+                          { value: 'contains', label: 'contains' },
+                        ]}
+                        aria-label='Operator'
+                      />
+                      <Panel.Error>{errors.filters?.[index]?.operator?.message}</Panel.Error>
+                    </label>
+                    <label>
+                      Value to match
+                      <Input {...register(`filters.${index}.value`)} fluid placeholder='<empty / no value>' />
+                    </label>
+                    <div>
+                      <span>&nbsp;</span>
+                      <div>
+                        <IconButton
+                          aria-label='Delete'
+                          variant='ghosted-destructive'
+                          onClick={() => removeFilter(index)}
+                        >
+                          <IoTrash />
+                        </IconButton>
+                      </div>
                     </div>
                   </div>
                 );
@@ -468,13 +309,6 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
               <ExternalLink href={integrationsDocsUrl}>read the docs</ExternalLink>
             </Info>
 
-            {fieldOutputs.length === 0 && (
-              <Panel.EmptyState
-                title='This automation does nothing yet'
-                description='An automation without outputs will be triggered, but it has nothing to send.'
-              />
-            )}
-
             {fieldOutputs.map((output, index) => {
               if (isOSCOutput(output)) {
                 const rowErrors = errors.outputs?.[index] as
@@ -487,61 +321,75 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
                   | undefined;
 
                 return (
-                  <OutputCard
-                    key={output.id}
-                    label='OSC'
-                    kindClass={style.tagOsc}
-                    summary={watch(`outputs.${index}.address`)}
-                    testState={testResults[output.id]}
-                    onTest={() => handleTestOSCOutput(index, output.id)}
-                    onDelete={() => removeOutput(index)}
-                  >
-                    <label>
-                      Target IP
-                      <Input
-                        {...register(`outputs.${index}.targetIP`, {
-                          required: { value: true, message: 'Required field' },
-                        })}
-                        fluid
-                        placeholder='127.0.0.1'
-                      />
-                      <Panel.Error>{rowErrors?.targetIP?.message}</Panel.Error>
-                    </label>
-                    <label>
-                      Target Port
-                      <Input
-                        {...register(`outputs.${index}.targetPort`, {
-                          required: { value: true, message: 'Required field' },
-                          setValueAs: (value) => (value === '' ? 0 : Number(value)),
-                          max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
-                          min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
-                        })}
-                        fluid
-                        type='number'
-                        maxLength={5}
-                        placeholder='8000'
-                      />
-                      <Panel.Error>{rowErrors?.targetPort?.message}</Panel.Error>
-                    </label>
-                    <label className={style.spanFull}>
-                      Address
-                      <TemplateInput
-                        {...register(`outputs.${index}.address`)}
-                        value={output.address}
-                        fluid
-                        placeholder='/cue/start'
-                      />
-                      <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
-                    </label>
-                    <label className={style.spanFull}>
-                      Arguments
-                      <TemplateInput {...register(`outputs.${index}.args`)} value={output.args} fluid placeholder='1' />
-                      <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
-                    </label>
-                  </OutputCard>
+                  <div key={output.id} className={style.outputCard}>
+                    <Tag>OSC</Tag>
+                    <div className={style.oscSection}>
+                      <label>
+                        Target IP
+                        <Input
+                          {...register(`outputs.${index}.targetIP`, {
+                            required: { value: true, message: 'Required field' },
+                          })}
+                          fluid
+                          placeholder='127.0.0.1'
+                        />
+                        <Panel.Error>{rowErrors?.targetIP?.message}</Panel.Error>
+                      </label>
+                      <label>
+                        Target Port
+                        <Input
+                          {...register(`outputs.${index}.targetPort`, {
+                            required: { value: true, message: 'Required field' },
+                            setValueAs: (value) => (value === '' ? 0 : Number(value)),
+                            max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
+                            min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
+                          })}
+                          fluid
+                          type='number'
+                          maxLength={5}
+                          placeholder='8000'
+                        />
+                        <Panel.Error>{rowErrors?.targetPort?.message}</Panel.Error>
+                      </label>
+                      <label>
+                        Address
+                        <TemplateInput
+                          {...register(`outputs.${index}.address`)}
+                          value={output.address}
+                          fluid
+                          placeholder='/cue/start'
+                        />
+                        <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
+                      </label>
+                      <label>
+                        Arguments
+                        <TemplateInput
+                          {...register(`outputs.${index}.args`)}
+                          value={output.args}
+                          fluid
+                          placeholder='1'
+                        />
+                        <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
+                      </label>
+                      <div>
+                        <span>&nbsp;</span>
+                        <Panel.InlineElements relation='inner'>
+                          <Button variant='ghosted-white' onClick={() => handleTestOSCOutput(index)}>
+                            Test
+                          </Button>
+                          <IconButton
+                            aria-label='Delete'
+                            variant='ghosted-destructive'
+                            onClick={() => removeOutput(index)}
+                          >
+                            <IoTrash />
+                          </IconButton>
+                        </Panel.InlineElements>
+                      </div>
+                    </div>
+                  </div>
                 );
               }
-
               if (isHTTPOutput(output)) {
                 const rowErrors = errors.outputs?.[index] as
                   | {
@@ -549,31 +397,42 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
                     }
                   | undefined;
                 return (
-                  <OutputCard
-                    key={output.id}
-                    label='HTTP'
-                    kindClass={style.tagHttp}
-                    testState={testResults[output.id]}
-                    onTest={() => handleTestHTTPOutput(index, output.id)}
-                    onDelete={() => removeOutput(index)}
-                  >
-                    <label className={style.spanFull}>
-                      Target URL
-                      <TemplateInput
-                        {...register(`outputs.${index}.url`, {
-                          required: { value: true, message: 'Required field' },
-                          pattern: {
-                            value: startsWithHttp,
-                            message: 'HTTP messages should target http:// or https://',
-                          },
-                        })}
-                        value={output.url}
-                        fluid
-                        placeholder='http://127.0.0.1/start/1'
-                      />
-                      <Panel.Error>{rowErrors?.url?.message}</Panel.Error>
-                    </label>
-                  </OutputCard>
+                  <div key={output.id} className={style.outputCard}>
+                    <Tag>HTTP</Tag>
+                    <div className={style.httpSection}>
+                      <label>
+                        Target URL
+                        <TemplateInput
+                          {...register(`outputs.${index}.url`, {
+                            required: { value: true, message: 'Required field' },
+                            pattern: {
+                              value: startsWithHttp,
+                              message: 'HTTP messages should target http:// or https://',
+                            },
+                          })}
+                          value={output.url}
+                          fluid
+                          placeholder='http://127.0.0.1/start/1'
+                        />
+                        <Panel.Error>{rowErrors?.url?.message}</Panel.Error>
+                      </label>
+                      <div>
+                        <span>&nbsp;</span>
+                        <Panel.InlineElements relation='inner'>
+                          <Button variant='ghosted-white' onClick={() => handleTestHTTPOutput(index)}>
+                            Test
+                          </Button>
+                          <IconButton
+                            aria-label='Delete'
+                            variant='ghosted-destructive'
+                            onClick={() => removeOutput(index)}
+                          >
+                            <IoTrash />
+                          </IconButton>
+                        </Panel.InlineElements>
+                      </div>
+                    </div>
+                  </div>
                 );
               }
 
@@ -588,14 +447,8 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
                     }
                   | undefined;
                 return (
-                  <OutputCard
-                    key={output.id}
-                    label='Ontime action'
-                    kindClass={style.tagOntime}
-                    testState={testResults[output.id]}
-                    onTest={() => handleTestOntimeAction(index, output.id)}
-                    onDelete={() => removeOutput(index)}
-                  >
+                  <div key={output.id} className={style.outputCard}>
+                    <Tag>Ontime action</Tag>
                     <OntimeActionForm
                       value={output.action}
                       index={index}
@@ -603,40 +456,38 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
                       rowErrors={rowErrors}
                       setValue={setValue}
                       watch={watch}
-                    />
-                  </OutputCard>
+                    >
+                      <span>&nbsp;</span>
+                      <Panel.InlineElements relation='inner'>
+                        <Button variant='ghosted-white' onClick={() => handleTestOntimeAction(index)}>
+                          Test
+                        </Button>
+                        <IconButton
+                          aria-label='Delete'
+                          variant='ghosted-destructive'
+                          onClick={() => removeOutput(index)}
+                        >
+                          <IoTrash />
+                        </IconButton>
+                      </Panel.InlineElements>
+                    </OntimeActionForm>
+                  </div>
                 );
               }
 
               return null;
             })}
-            <div>
-              <DropdownMenu
-                render={<Button />}
-                items={[
-                  {
-                    type: 'item',
-                    label: 'OSC',
-                    description: 'Send an OSC message to a device on the network',
-                    onClick: handleAddNewOSCOutput,
-                  },
-                  {
-                    type: 'item',
-                    label: 'HTTP',
-                    description: 'Call a URL, for webhooks and REST APIs',
-                    onClick: handleAddNewHTTPOutput,
-                  },
-                  {
-                    type: 'item',
-                    label: 'Ontime action',
-                    description: 'Change something inside Ontime, like a message or an aux timer',
-                    onClick: handleAddnewOntimeAction,
-                  },
-                ]}
-              >
-                Add output <IoAdd />
-              </DropdownMenu>
-            </div>
+            <Panel.InlineElements relation='inner'>
+              <Button onClick={handleAddNewOSCOutput}>
+                OSC <IoAdd />
+              </Button>
+              <Button onClick={handleAddNewHTTPOutput}>
+                HTTP <IoAdd />
+              </Button>
+              <Button onClick={handleAddnewOntimeAction}>
+                Ontime action <IoAdd />
+              </Button>
+            </Panel.InlineElements>
           </div>
         </form>
       }
@@ -652,42 +503,3 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
     />
   );
 }
-
-interface OutputCardProps {
-  label: string;
-  kindClass?: string;
-  summary?: string;
-  testState?: TestState;
-  onTest: () => void;
-  onDelete: () => void;
-  children: ReactNode;
-}
-
-/**
- * Shared chrome for every output kind: the type tag and the actions live in the header,
- * so they stop competing with the form fields for grid columns
- */
-function OutputCard({ label, kindClass, summary, testState, onTest, onDelete, children }: OutputCardProps) {
-  return (
-    <div className={style.card}>
-      <div className={style.cardHeader}>
-        <Tag className={kindClass}>{label}</Tag>
-        <span className={style.cardSummary}>{summary}</span>
-        {testState?.status === 'ok' && (
-          <span className={style.testOk}>
-            <IoCheckmark />
-            {testState.message}
-          </span>
-        )}
-        <Button variant='ghosted-white' onClick={onTest} loading={testState?.status === 'sending'}>
-          Test
-        </Button>
-        <IconButton aria-label='Delete output' variant='ghosted-destructive' onClick={onDelete}>
-          <IoTrash />
-        </IconButton>
-      </div>
-      {testState?.status === 'error' && <Panel.Error className={style.testError}>{testState.message}</Panel.Error>}
-      <div className={style.cardBody}>{children}</div>
-    </div>
-  );
-}

apps/client/src/features/app-settings/panel/automations-panel/AutomationPanel.tsx

@@ -30,12 +30,7 @@ export default function AutomationPanel({ location }: PanelBaseProps) {
         />
       </div>
       <div ref={automationsRef}>
-        <AutomationsList
-          automations={data.automations}
-          triggers={data.triggers}
-          enabledAutomations={automationState}
-          isLoading={isLoading}
-        />
+        <AutomationsList automations={data.automations} enabledAutomations={automationState} isLoading={isLoading} />
       </div>
       <div ref={triggersRef}>
         <TriggersList

apps/client/src/features/app-settings/panel/automations-panel/AutomationSettingsForm.tsx

@@ -12,7 +12,6 @@ import { preventEscape } from '../../../../common/utils/keyEvent';
 import { isOnlyNumbers } from '../../../../common/utils/regex';
 import { isOntimeCloud } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
-import useAppSettingsNavigation from '../../useAppSettingsNavigation';
 
 const oscApiDocsUrl = 'https://docs.getontime.no/api/protocols/osc/';
 
@@ -33,7 +32,6 @@ export default function AutomationSettingsForm({
   oscInputState,
   isLoading,
 }: AutomationSettingsProps) {
-  const { setLocation } = useAppSettingsNavigation();
   const {
     handleSubmit,
     reset,
@@ -96,17 +94,9 @@ export default function AutomationSettingsForm({
         <Panel.Section>
           <Info>
             <span>Control Ontime and share its data with external systems in your workflow.</span>
-            <span>- An automation is what to send: OSC and HTTP messages, or an action inside Ontime.</span>
-            <span>- A trigger is when to send it. Triggers for a single event live in the event editor.</span>
+            <span>- Automations allow Ontime to send its data on lifecycle triggers.</span>
             <span>- OSC Input tells Ontime to listen to messages on the specific port.</span>
-            <Info.Footer>
-              <Panel.InlineElements relation='inner'>
-                <ExternalLink href={oscApiDocsUrl}>See the docs</ExternalLink>
-                <Button variant='ghosted' size='small' onClick={() => setLocation('network__log')}>
-                  Automations report to the event log
-                </Button>
-              </Panel.InlineElements>
-            </Info.Footer>
+            <ExternalLink href={oscApiDocsUrl}>See the docs</ExternalLink>
           </Info>
         </Panel.Section>
 

apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.module.scss

@@ -1,3 +0,0 @@
-.muted {
-  color: $muted-gray;
-}

apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx

@@ -1,21 +1,16 @@
-import { Automation, AutomationDTO, NormalisedAutomation, Trigger } from 'ontime-types';
-import { Fragment, useMemo, useState } from 'react';
-import { IoAdd, IoPencil, IoSparklesOutline, IoTrash } from 'react-icons/io5';
+import { AutomationDTO, NormalisedAutomation } from 'ontime-types';
+import { Fragment, useState } from 'react';
+import { IoAdd, IoPencil, IoTrash } from 'react-icons/io5';
 
+import { deleteAutomation } from '../../../../common/api/automation';
+import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import IconButton from '../../../../common/components/buttons/IconButton';
 import Info from '../../../../common/components/info/Info';
 import Tag from '../../../../common/components/tag/Tag';
-import { getLifecycleLabel } from '../../../../common/constants/timerLifecycle';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
-import { summariseOutputs } from '../../../../common/utils/automationOutputs';
 import * as Panel from '../../panel-utils/PanelUtils';
 import AutomationForm from './AutomationForm';
-import { groupTriggersByAutomation, isAutomation } from './automationUtils';
-import DeleteAutomationDialog from './DeleteAutomationDialog';
-import RecipeLibraryModal from './recipes/RecipeLibraryModal';
-
-import style from './AutomationsList.module.scss';
 
 const automationPlaceholder: AutomationDTO = {
   title: '',
@@ -26,79 +21,39 @@ const automationPlaceholder: AutomationDTO = {
 
 interface AutomationsListProps {
   automations: NormalisedAutomation;
-  triggers: Trigger[];
   enabledAutomations?: boolean;
   isLoading: boolean;
 }
 
-export default function AutomationsList({
-  automations,
-  triggers,
-  enabledAutomations,
-  isLoading,
-}: AutomationsListProps) {
+export default function AutomationsList({ automations, enabledAutomations, isLoading }: AutomationsListProps) {
   const { refetch } = useAutomationSettings();
   const [automationFormData, setAutomationFormData] = useState<AutomationDTO | null>(null);
-  const [showRecipes, setShowRecipes] = useState(false);
-  const [deleteTarget, setDeleteTarget] = useState<Automation | null>(null);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
 
-  /**
-   * A recipe lands in the editor rather than only in the list.
-   * Seeing it as an editable automation is the point, and recipes with an
-   * external target are unusable until the user changes it anyway.
-   */
-  const handleRecipeInstalled = async (created: Automation) => {
-    setShowRecipes(false);
-    await refetch();
-    setAutomationFormData(created);
+  const handleDelete = async (id: string) => {
+    try {
+      setDeleteError(null);
+      await deleteAutomation(id);
+    } catch (error) {
+      setDeleteError(maybeAxiosError(error));
+    } finally {
+      refetch();
+    }
   };
 
-  const handleDeleted = async () => {
-    setDeleteTarget(null);
-    await refetch();
-  };
-
-  const lifecyclesByAutomation = useMemo(() => groupTriggersByAutomation(triggers), [triggers]);
-
   const arrayAutomations = Object.keys(automations);
 
   return (
     <Panel.Section>
       <Panel.Card>
         {automationFormData !== null && (
-          <AutomationForm
-            // the form snapshots the automation's lifecycles on mount, so it must never be
-            // reused across two different automations
-            key={isAutomation(automationFormData) ? automationFormData.id : 'new'}
-            automation={automationFormData}
-            triggers={triggers}
-            onClose={() => setAutomationFormData(null)}
-          />
-        )}
-        {showRecipes && (
-          <RecipeLibraryModal
-            onClose={() => setShowRecipes(false)}
-            onInstalled={(_recipe, created) => handleRecipeInstalled(created)}
-          />
-        )}
-        {deleteTarget !== null && (
-          <DeleteAutomationDialog
-            automation={deleteTarget}
-            blockingTriggers={triggers.filter((trigger) => trigger.automationId === deleteTarget.id)}
-            onCancel={() => setDeleteTarget(null)}
-            onDeleted={handleDeleted}
-          />
+          <AutomationForm automation={automationFormData} onClose={() => setAutomationFormData(null)} />
         )}
         <Panel.SubHeader>
           Manage automations
-          <Panel.InlineElements relation='inner'>
-            <Button onClick={() => setShowRecipes(true)}>
-              Browse recipes <IoSparklesOutline />
-            </Button>
-            <Button onClick={() => setAutomationFormData(automationPlaceholder)}>
-              New <IoAdd />
-            </Button>
-          </Panel.InlineElements>
+          <Button onClick={() => setAutomationFormData(automationPlaceholder)}>
+            New <IoAdd />
+          </Button>
         </Panel.SubHeader>
 
         <Panel.Divider />
@@ -114,10 +69,10 @@ export default function AutomationsList({
           <Panel.Table>
             <thead>
               <tr>
-                <th style={{ width: '35%' }}>Title</th>
-                <th style={{ width: '25%' }}>Runs on</th>
-                <th style={{ width: '15%' }}>Filter rule</th>
-                <th style={{ width: '15%' }}>Sends</th>
+                <th style={{ width: '45%' }}>Title</th>
+                <th style={{ width: '15%' }}>Trigger rule</th>
+                <th style={{ width: '15%' }}>Filters</th>
+                <th style={{ width: '15%' }}>Outputs</th>
                 <th />
               </tr>
             </thead>
@@ -127,14 +82,9 @@ export default function AutomationsList({
                   title='No automations yet'
                   description='An automation sends OSC or HTTP messages, or runs an Ontime action, whenever a trigger fires.'
                   action={
-                    <Panel.InlineElements relation='inner'>
-                      <Button variant='primary' onClick={() => setShowRecipes(true)}>
-                        Browse recipes <IoSparklesOutline />
-                      </Button>
-                      <Button onClick={() => setAutomationFormData(automationPlaceholder)}>
-                        Create from scratch <IoAdd />
-                      </Button>
-                    </Panel.InlineElements>
+                    <Button variant='primary' onClick={() => setAutomationFormData(automationPlaceholder)}>
+                      Create automation <IoAdd />
+                    </Button>
                   }
                 />
               )}
@@ -142,49 +92,27 @@ export default function AutomationsList({
                 if (!Object.hasOwn(automations, automationId)) {
                   return null;
                 }
-                const automation = automations[automationId];
-                const lifecycles = lifecyclesByAutomation[automationId] ?? [];
-                const outputs = summariseOutputs(automation.outputs);
-
                 return (
                   <Fragment key={automationId}>
                     <tr>
-                      <td>{automation.title}</td>
-                      <Panel.InlineElements as='td' relation='inner' wrap='wrap'>
-                        {lifecycles.length === 0 ? (
-                          <Tag variant='warning'>Never runs</Tag>
-                        ) : (
-                          lifecycles.map((cycle) => <Tag key={cycle}>{getLifecycleLabel(cycle)}</Tag>)
-                        )}
-                      </Panel.InlineElements>
+                      <td>{automations[automationId].title}</td>
                       <td>
-                        {automation.filters.length === 0 ? (
-                          <span className={style.muted}>—</span>
-                        ) : (
-                          <Tag>{automation.filterRule === 'all' ? 'All filters' : 'Any filter'}</Tag>
-                        )}
+                        <Tag>{automations[automationId].filterRule}</Tag>
                       </td>
-                      <Panel.InlineElements as='td' relation='inner' wrap='wrap'>
-                        {outputs.length === 0 ? (
-                          <Tag variant='warning'>No outputs</Tag>
-                        ) : (
-                          outputs.map(({ type, label, count }) => (
-                            <Tag key={type}>{count > 1 ? `${label} ×${count}` : label}</Tag>
-                          ))
-                        )}
-                      </Panel.InlineElements>
+                      <td>{automations[automationId].filters.length}</td>
+                      <td>{automations[automationId].outputs.length}</td>
                       <Panel.InlineElements align='end' relation='inner' as='td'>
                         <IconButton
                           variant='ghosted-white'
                           aria-label='Edit entry'
-                          onClick={() => setAutomationFormData(automation)}
+                          onClick={() => setAutomationFormData(automations[automationId])}
                         >
                           <IoPencil />
                         </IconButton>
                         <IconButton
                           variant='ghosted-destructive'
                           aria-label='Delete entry'
-                          onClick={() => setDeleteTarget(automation)}
+                          onClick={() => handleDelete(automationId)}
                         >
                           <IoTrash />
                         </IconButton>
@@ -193,6 +121,13 @@ export default function AutomationsList({
                   </Fragment>
                 );
               })}
+              {deleteError && (
+                <tr>
+                  <td colSpan={5}>
+                    <Panel.Error>{deleteError}</Panel.Error>
+                  </td>
+                </tr>
+              )}
             </tbody>
           </Panel.Table>
         </Panel.Section>

apps/client/src/features/app-settings/panel/automations-panel/DeleteAutomationDialog.tsx

@@ -1,101 +0,0 @@
-import type { Automation, Trigger } from 'ontime-types';
-import { useState } from 'react';
-
-import { deleteAutomation } from '../../../../common/api/automation';
-import { maybeAxiosError } from '../../../../common/api/utils';
-import Button from '../../../../common/components/buttons/Button';
-import Dialog from '../../../../common/components/dialog/Dialog';
-import Info from '../../../../common/components/info/Info';
-import { getLifecycleLabel } from '../../../../common/constants/timerLifecycle';
-import * as Panel from '../../panel-utils/PanelUtils';
-
-interface DeleteAutomationDialogProps {
-  automation: Automation;
-  /** global triggers pointing at this automation, they block the delete server side */
-  blockingTriggers: Trigger[];
-  onCancel: () => void;
-  onDeleted: () => void;
-}
-
-/**
- * The server refuses to delete an automation that is still referenced, and the panel used to
- * dump that refusal into a stray row under the table. This dialog confirms first and, on a
- * refusal, names what is blocking it: global triggers to remove from the Global Triggers list,
- * or an event reference to remove from the event editor. It does not delete those triggers for
- * the user — a single extra step there is safer than a delete-then-restore sequence here.
- */
-export default function DeleteAutomationDialog({
-  automation,
-  blockingTriggers,
-  onCancel,
-  onDeleted,
-}: DeleteAutomationDialogProps) {
-  const [error, setError] = useState<string | null>(null);
-  const [isDeleting, setIsDeleting] = useState(false);
-
-  const handleDelete = async () => {
-    setError(null);
-    setIsDeleting(true);
-    try {
-      await deleteAutomation(automation.id);
-      onDeleted();
-    } catch (error) {
-      setError(maybeAxiosError(error));
-    } finally {
-      setIsDeleting(false);
-    }
-  };
-
-  return (
-    <Dialog
-      isOpen
-      onClose={onCancel}
-      showBackdrop
-      showCloseButton
-      title='Delete automation'
-      bodyElements={
-        <Panel.Section>
-          <Panel.Paragraph>
-            Delete <strong>{automation.title}</strong>? This cannot be undone.
-          </Panel.Paragraph>
-
-          {blockingTriggers.length > 0 && (
-            <Info type='warning'>
-              <Info.Title>
-                {blockingTriggers.length === 1
-                  ? 'One trigger points at this automation'
-                  : `${blockingTriggers.length} triggers point at this automation`}
-              </Info.Title>
-              <Info.Body>
-                {blockingTriggers
-                  .map((trigger) => `${trigger.title} (${getLifecycleLabel(trigger.trigger)})`)
-                  .join(', ')}
-              </Info.Body>
-              <Info.Footer>Remove them from Global Triggers first, then delete the automation.</Info.Footer>
-            </Info>
-          )}
-
-          {error && (
-            <Info type='error'>
-              <Info.Title>Could not delete this automation</Info.Title>
-              <Info.Body>{error}</Info.Body>
-              <Info.Footer>
-                Automations attached to a single event have to be removed from that event first, in the event editor.
-              </Info.Footer>
-            </Info>
-          )}
-        </Panel.Section>
-      }
-      footerElements={
-        <>
-          <Button onClick={onCancel} disabled={isDeleting}>
-            Cancel
-          </Button>
-          <Button variant='destructive' onClick={handleDelete} loading={isDeleting}>
-            Delete
-          </Button>
-        </>
-      }
-    />
-  );
-}

apps/client/src/features/app-settings/panel/automations-panel/OntimeActionForm.tsx

@@ -1,5 +1,5 @@
 import { AutomationDTO, OntimeAction, OntimeActionKey, SecondarySource } from 'ontime-types';
-import { useState } from 'react';
+import { PropsWithChildren, useState } from 'react';
 import { UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form';
 
 import Input from '../../../../common/components/input/input/Input';
@@ -30,8 +30,9 @@ export default function OntimeActionForm({
   setValue,
   rowErrors,
   value,
+  children,
   watch,
-}: OntimeActionFormProps) {
+}: PropsWithChildren<OntimeActionFormProps>) {
   const [selectedAction, setSelectedAction] = useState<string>(value);
 
   const handleSetAction = (value: OntimeActionKey) => {
@@ -40,7 +41,7 @@ export default function OntimeActionForm({
   };
 
   return (
-    <>
+    <div className={style.actionSection}>
       <label>
         Action
         <Select
@@ -94,7 +95,7 @@ export default function OntimeActionForm({
 
       {selectedAction === 'message-set' && (
         <>
-          <label className={style.spanFull}>
+          <label>
             Text (leave empty for no change)
             <TemplateInput
               {...register(`outputs.${index}.text`)}
@@ -126,7 +127,7 @@ export default function OntimeActionForm({
 
       {selectedAction === 'message-secondary' && (
         <>
-          <label className={style.spanFull}>
+          <label>
             Text (leave empty for no change)
             <TemplateInput
               {...register(`outputs.${index}.text`)}
@@ -168,6 +169,8 @@ export default function OntimeActionForm({
           </label>
         </>
       )}
-    </>
+
+      <div className={style.test}>{children}</div>
+    </div>
   );
 }

apps/client/src/features/app-settings/panel/automations-panel/TriggersList.tsx

@@ -8,7 +8,6 @@ import Button from '../../../../common/components/buttons/Button';
 import Info from '../../../../common/components/info/Info';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
 import * as Panel from '../../panel-utils/PanelUtils';
-import useAppSettingsNavigation from '../../useAppSettingsNavigation';
 import { checkDuplicates } from './automationUtils';
 import TriggerForm from './TriggerForm';
 import TriggersListItem from './TriggersListItem';
@@ -28,7 +27,6 @@ interface TriggersListProps {
 export default function TriggersList({ triggers, automations, enabledAutomations, isLoading }: TriggersListProps) {
   const [formState, setFormState] = useState<FormState>({ isOpen: false, trigger: undefined });
   const { refetch } = useAutomationSettings();
-  const { setLocation } = useAppSettingsNavigation();
   const [deleteError, setDeleteError] = useState<string | null>(null);
 
   const openNewForm = () => setFormState({ isOpen: true });
@@ -52,10 +50,6 @@ export default function TriggersList({ triggers, automations, enabledAutomations
   };
 
   const duplicates = useMemo(() => checkDuplicates(triggers), [triggers]);
-  const orphans = useMemo(
-    () => triggers.filter((trigger) => !Object.hasOwn(automations, trigger.automationId)).length,
-    [triggers, automations],
-  );
 
   // there is no point letting user creating a trigger if there are no automations
   const canAdd = Object.keys(automations).length > 0;
@@ -72,17 +66,13 @@ export default function TriggersList({ triggers, automations, enabledAutomations
           />
         )}
         <Panel.SubHeader>
-          Global triggers
+          Manage triggers
           <Button disabled={!canAdd} onClick={openNewForm}>
             New <IoAdd />
           </Button>
         </Panel.SubHeader>
         <Panel.Divider />
         <Panel.Section>
-          <Panel.Description>
-            Triggers are managed from the automation itself. This list is for naming them, or for pointing several
-            differently named triggers at the same automation.
-          </Panel.Description>
           {enabledAutomations === false && (
             <Info>
               Automations are disabled. You can still manage triggers here, but they will not run until enabled.
@@ -90,15 +80,8 @@ export default function TriggersList({ triggers, automations, enabledAutomations
           )}
           {duplicates && (
             <Panel.Error>
-              You have created multiple links between the same trigger and automation. Duplicate combinations will only
-              fire once per lifecycle event.
-            </Panel.Error>
-          )}
-          {orphans > 0 && (
-            <Panel.Error>
-              {orphans === 1
-                ? '1 trigger points at an automation that no longer exists and will never run.'
-                : `${orphans} triggers point at automations that no longer exist and will never run.`}
+              You have created multiple links between the same trigger and automation which can cause performance
+              issues.
             </Panel.Error>
           )}
           <Panel.Table>
@@ -116,18 +99,14 @@ export default function TriggersList({ triggers, automations, enabledAutomations
                   title='No triggers yet'
                   description={
                     canAdd
-                      ? 'Triggers run an automation at a given point of the timer lifecycle. The usual way to create one is to pick the lifecycles in the automation itself.'
-                      : 'Create an automation first, then pick the lifecycles it should run on.'
+                      ? 'Triggers run an automation at a given point of the timer lifecycle, like when an event starts or finishes.'
+                      : 'Create an automation first, then add a trigger to decide when it should run.'
                   }
                   action={
-                    canAdd ? (
+                    canAdd && (
                       <Button variant='primary' onClick={openNewForm}>
                         Create trigger <IoAdd />
                       </Button>
-                    ) : (
-                      <Button variant='primary' onClick={() => setLocation('automation__automations')}>
-                        Go to automations
-                      </Button>
                     )
                   }
                 />

apps/client/src/features/app-settings/panel/automations-panel/TriggersListItem.tsx

@@ -31,12 +31,7 @@ export default function TriggersListItem(props: TriggersListItemProps) {
         <Tag>{cycles.find((cycle) => cycle.value === trigger.trigger)?.label}</Tag>
       </td>
       <td>
-        {/* a trigger can outlive the automation it points at, say after a partial project import */}
-        {automations?.[trigger.automationId] ? (
-          <Tag>{automations[trigger.automationId].title}</Tag>
-        ) : (
-          <Tag variant='warning'>Missing automation</Tag>
-        )}
+        <Tag>{automations?.[trigger.automationId]?.title}</Tag>
       </td>
       <Panel.InlineElements align='end' relation='inner' as='td'>
         <IconButton variant='ghosted-white' aria-label='Edit entry' onClick={handleEdit}>

apps/client/src/features/app-settings/panel/automations-panel/__tests__/automationUtils.test.ts

@@ -1,6 +1,6 @@
 import { TimerLifeCycle, Trigger } from 'ontime-types';
 
-import { checkDuplicates, cycles, groupTriggersByAutomation, operators } from '../automationUtils';
+import { checkDuplicates } from '../automationUtils';
 
 describe('checkDuplicates', () => {
   it('should return undefined if there are no duplicates', () => {
@@ -22,43 +22,3 @@ describe('checkDuplicates', () => {
     expect(checkDuplicates(triggers)).toStrictEqual([2]);
   });
 });
-
-describe('groupTriggersByAutomation', () => {
-  it('returns an empty object when there are no triggers', () => {
-    expect(groupTriggersByAutomation([])).toEqual({});
-  });
-
-  it('collects the lifecycles each automation is bound to', () => {
-    const triggers: Trigger[] = [
-      { id: '1', title: 'First', trigger: TimerLifeCycle.onStart, automationId: 'a' },
-      { id: '2', title: 'Second', trigger: TimerLifeCycle.onFinish, automationId: 'a' },
-      { id: '3', title: 'Third', trigger: TimerLifeCycle.onLoad, automationId: 'b' },
-    ];
-
-    expect(groupTriggersByAutomation(triggers)).toEqual({
-      a: [TimerLifeCycle.onStart, TimerLifeCycle.onFinish],
-      b: [TimerLifeCycle.onLoad],
-    });
-  });
-
-  it('collapses duplicates, the runtime only fires an automation once per lifecycle', () => {
-    const triggers: Trigger[] = [
-      { id: '1', title: 'First', trigger: TimerLifeCycle.onStart, automationId: 'a' },
-      { id: '2', title: 'Second', trigger: TimerLifeCycle.onStart, automationId: 'a' },
-    ];
-
-    expect(groupTriggersByAutomation(triggers)).toEqual({ a: [TimerLifeCycle.onStart] });
-  });
-});
-
-describe('operators', () => {
-  it('does not offer not_contains, which the server validation rejects', () => {
-    expect(operators.map(({ value }) => value)).not.toContain('not_contains');
-  });
-});
-
-describe('cycles', () => {
-  it('uses the shared user facing labels', () => {
-    expect(cycles.find(({ value }) => value === 'onStart')?.label).toBe('On Start');
-  });
-});

apps/client/src/features/app-settings/panel/automations-panel/automationUtils.ts

@@ -1,6 +1,4 @@
-import { Automation, AutomationDTO, AutomationFilter, CustomFields, TimerLifeCycle, Trigger } from 'ontime-types';
-
-import { lifecycleLabels } from '../../../../common/constants/timerLifecycle';
+import { Automation, AutomationDTO, CustomFields, TimerLifeCycle, Trigger } from 'ontime-types';
 
 type CycleLabel = {
   id: number;
@@ -9,29 +7,15 @@ type CycleLabel = {
 };
 
 export const cycles: CycleLabel[] = [
-  { id: 1, label: lifecycleLabels.onLoad, value: 'onLoad' },
-  { id: 2, label: lifecycleLabels.onStart, value: 'onStart' },
-  { id: 3, label: lifecycleLabels.onPause, value: 'onPause' },
-  { id: 4, label: lifecycleLabels.onStop, value: 'onStop' },
-  { id: 5, label: lifecycleLabels.onClock, value: 'onClock' },
-  { id: 6, label: lifecycleLabels.onUpdate, value: 'onUpdate' },
-  { id: 7, label: lifecycleLabels.onFinish, value: 'onFinish' },
-  { id: 8, label: lifecycleLabels.onWarning, value: 'onWarning' },
-  { id: 9, label: lifecycleLabels.onDanger, value: 'onDanger' },
-];
-
-/**
- * Filter operators offered in the automation form
- * NOTE: not_contains is supported by the type and by the runtime, but the server
- * validation list omits it, so an automation using it cannot be saved.
- * It stays out of the UI until the server accepts it.
- */
-export const operators: Array<{ value: AutomationFilter['operator']; label: string }> = [
-  { value: 'equals', label: 'equals' },
-  { value: 'not_equals', label: 'does not equal' },
-  { value: 'contains', label: 'contains' },
-  { value: 'greater_than', label: 'is greater than' },
-  { value: 'less_than', label: 'is less than' },
+  { id: 1, label: 'On Load', value: 'onLoad' },
+  { id: 2, label: 'On Start', value: 'onStart' },
+  { id: 3, label: 'On Pause', value: 'onPause' },
+  { id: 4, label: 'On Stop', value: 'onStop' },
+  { id: 5, label: 'Every second', value: 'onClock' },
+  { id: 6, label: 'On Timer Update', value: 'onUpdate' },
+  { id: 7, label: 'On Finish', value: 'onFinish' },
+  { id: 8, label: 'On Warning', value: 'onWarning' },
+  { id: 9, label: 'On Danger', value: 'onDanger' },
 ];
 
 /**
@@ -99,23 +83,3 @@ export function checkDuplicates(triggers: Trigger[]) {
   }
   return duplicates.length > 0 ? duplicates : undefined;
 }
-
-/**
- * Groups the lifecycles each automation is bound to
- * Used to show when an automation runs, and to highlight the ones that never will
- */
-export function groupTriggersByAutomation(triggers: Trigger[]): Record<string, TimerLifeCycle[]> {
-  const grouped: Record<string, TimerLifeCycle[]> = {};
-
-  for (const trigger of triggers) {
-    if (!Object.hasOwn(grouped, trigger.automationId)) {
-      grouped[trigger.automationId] = [];
-    }
-    // the runtime fires an automation once per lifecycle, duplicates would be noise here
-    if (!grouped[trigger.automationId].includes(trigger.trigger)) {
-      grouped[trigger.automationId].push(trigger.trigger);
-    }
-  }
-
-  return grouped;
-}

apps/client/src/features/app-settings/panel/automations-panel/recipes/RecipeLibraryModal.module.scss

@@ -1,47 +0,0 @@
-.library {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  color: $ui-white;
-  font-size: calc(1rem - 1px);
-  padding-block: 0.5rem;
-}
-
-.category {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.recipeGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
-  gap: 0.75rem;
-}
-
-.recipe {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  border: 1px solid $white-10;
-  border-radius: $component-border-radius-md;
-  background-color: $black-10;
-}
-
-.recipeTitle {
-  font-weight: 600;
-}
-
-.recipeDescription {
-  flex: 1;
-  font-size: $aux-text-size;
-  color: $secondary-text-gray;
-}
-
-.recipeActions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.75rem;
-}

apps/client/src/features/app-settings/panel/automations-panel/recipes/RecipeLibraryModal.tsx

@@ -1,121 +0,0 @@
-import type { Automation } from 'ontime-types';
-import { useState } from 'react';
-
-import { maybeAxiosError } from '../../../../../common/api/utils';
-import Button from '../../../../../common/components/buttons/Button';
-import Info from '../../../../../common/components/info/Info';
-import ExternalLink from '../../../../../common/components/link/external-link/ExternalLink';
-import Modal from '../../../../../common/components/modal/Modal';
-import Tag from '../../../../../common/components/tag/Tag';
-import { getLifecycleLabel } from '../../../../../common/constants/timerLifecycle';
-import { summariseOutputs } from '../../../../../common/utils/automationOutputs';
-import { isOntimeCloud } from '../../../../../externals';
-import * as Panel from '../../../panel-utils/PanelUtils';
-import {
-  automationRecipes,
-  recipeCategoryLabels,
-  recipeCategoryOrder,
-  type AutomationRecipe,
-} from './automationRecipes';
-import { installRecipe } from './recipeUtils';
-
-import style from './RecipeLibraryModal.module.scss';
-
-interface RecipeLibraryModalProps {
-  onClose: () => void;
-  /** called with the installed automation so the caller can open it for editing */
-  onInstalled: (automation: AutomationRecipe, created: Automation) => void;
-}
-
-export default function RecipeLibraryModal({ onClose, onInstalled }: RecipeLibraryModalProps) {
-  const [installing, setInstalling] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  // OSC is not available in the cloud service, offering those recipes there would be a lie
-  const available = isOntimeCloud
-    ? automationRecipes.filter((recipe) => !recipe.automation.outputs.some((output) => output.type === 'osc'))
-    : automationRecipes;
-
-  const handleInstall = async (recipe: AutomationRecipe) => {
-    setError(null);
-    setInstalling(recipe.id);
-    try {
-      const created = await installRecipe(recipe);
-      onInstalled(recipe, created);
-    } catch (error) {
-      setError(maybeAxiosError(error));
-    } finally {
-      setInstalling(null);
-    }
-  };
-
-  return (
-    <Modal
-      isOpen
-      onClose={onClose}
-      showBackdrop
-      showCloseButton
-      size='wide'
-      title='Automation recipes'
-      bodyElements={
-        <div className={style.library}>
-          <Info>
-            <Info.Body>
-              Recipes are a starting point, not a black box. Each one is added as a normal automation that you can edit,
-              test or delete. Recipes that reach external software are set to this machine, so point them at the right
-              device before you rely on them.
-            </Info.Body>
-          </Info>
-
-          {recipeCategoryOrder.map((category) => {
-            const recipes = available.filter((recipe) => recipe.category === category);
-            if (recipes.length === 0) {
-              return null;
-            }
-
-            return (
-              <section key={category} className={style.category}>
-                <Panel.Title>{recipeCategoryLabels[category]}</Panel.Title>
-                <div className={style.recipeGrid}>
-                  {recipes.map((recipe) => (
-                    <article key={recipe.id} className={style.recipe}>
-                      <div className={style.recipeTitle}>{recipe.title}</div>
-                      <div className={style.recipeDescription}>{recipe.description}</div>
-                      <Panel.InlineElements relation='inner' wrap='wrap'>
-                        {recipe.triggers.map((cycle) => (
-                          <Tag key={cycle}>{getLifecycleLabel(cycle)}</Tag>
-                        ))}
-                        {summariseOutputs(recipe.automation.outputs).map(({ type, label, count }) => (
-                          <Tag key={type}>{count > 1 ? `${label} ×${count}` : label}</Tag>
-                        ))}
-                        {recipe.needsSetup && <Tag variant='warning'>Needs a target</Tag>}
-                      </Panel.InlineElements>
-                      <div className={style.recipeActions}>
-                        {recipe.docsUrl && <ExternalLink href={recipe.docsUrl}>Docs</ExternalLink>}
-                        <Button
-                          variant='primary'
-                          size='small'
-                          loading={installing === recipe.id}
-                          disabled={installing !== null}
-                          onClick={() => handleInstall(recipe)}
-                        >
-                          {recipe.needsSetup ? 'Add and configure' : 'Add'}
-                        </Button>
-                      </div>
-                    </article>
-                  ))}
-                </div>
-              </section>
-            );
-          })}
-        </div>
-      }
-      footerElements={
-        <>
-          {error && <Panel.Error>{error}</Panel.Error>}
-          <Button onClick={onClose}>Close</Button>
-        </>
-      }
-    />
-  );
-}

apps/client/src/features/app-settings/panel/automations-panel/recipes/__tests__/automationRecipes.test.ts

@@ -1,75 +0,0 @@
-import { isHTTPOutput, isOSCOutput, isOntimeAction, timerLifecycleValues } from 'ontime-types';
-
-import { operators } from '../../automationUtils';
-import { automationRecipes, recipeCategoryOrder } from '../automationRecipes';
-
-/**
- * Recipes are shipped as constants but installed through the same endpoints as a
- * hand written automation. These assertions stand in for the server side validation,
- * so a recipe cannot silently rot into something that 400s on install.
- */
-describe('automationRecipes', () => {
-  it('ships recipes', () => {
-    expect(automationRecipes.length).toBeGreaterThan(0);
-  });
-
-  it('has unique ids', () => {
-    const ids = automationRecipes.map(({ id }) => id);
-    expect(new Set(ids).size).toBe(ids.length);
-  });
-
-  it('only uses categories the library knows how to render', () => {
-    for (const recipe of automationRecipes) {
-      expect(recipeCategoryOrder).toContain(recipe.category);
-    }
-  });
-
-  it('binds every recipe to at least one valid lifecycle', () => {
-    for (const recipe of automationRecipes) {
-      expect(recipe.triggers.length).toBeGreaterThan(0);
-      for (const cycle of recipe.triggers) {
-        expect(timerLifecycleValues).toContain(cycle);
-      }
-    }
-  });
-
-  it('gives every recipe something to send', () => {
-    for (const recipe of automationRecipes) {
-      expect(recipe.automation.outputs.length).toBeGreaterThan(0);
-      expect(recipe.automation.title).not.toBe('');
-
-      for (const output of recipe.automation.outputs) {
-        expect(isOSCOutput(output) || isHTTPOutput(output) || isOntimeAction(output)).toBe(true);
-      }
-    }
-  });
-
-  it('only uses filter operators the server accepts', () => {
-    const allowed = operators.map(({ value }) => value);
-    for (const recipe of automationRecipes) {
-      for (const filter of recipe.automation.filters) {
-        expect(allowed).toContain(filter.operator);
-      }
-    }
-  });
-
-  it('defaults every external target to this machine', () => {
-    for (const recipe of automationRecipes) {
-      for (const output of recipe.automation.outputs) {
-        if (isOSCOutput(output)) {
-          expect(output.targetIP).toBe('127.0.0.1');
-        }
-        if (isHTTPOutput(output)) {
-          expect(output.url.startsWith('http://127.0.0.1')).toBe(true);
-        }
-      }
-    }
-  });
-
-  it('marks recipes that reach outside Ontime as needing a target', () => {
-    for (const recipe of automationRecipes) {
-      const reachesOut = recipe.automation.outputs.some((output) => isOSCOutput(output) || isHTTPOutput(output));
-      expect(recipe.needsSetup).toBe(reachesOut);
-    }
-  });
-});

apps/client/src/features/app-settings/panel/automations-panel/recipes/automationRecipes.ts

@@ -1,159 +0,0 @@
-import type { AutomationDTO, TimerLifeCycle } from 'ontime-types';
-import { TimerLifeCycle as Cycle } from 'ontime-types';
-
-export type RecipeCategory = 'video' | 'audio' | 'playback' | 'messaging' | 'ontime';
-
-export type AutomationRecipe = {
-  /** stable, client only. Never persisted */
-  id: string;
-  title: string;
-  /** one line, plain language: what this does for the user */
-  description: string;
-  category: RecipeCategory;
-  docsUrl?: string;
-  /** true when the recipe points at external software the user has to locate */
-  needsSetup: boolean;
-  /** typed so the compiler catches drift against the automation schema */
-  automation: AutomationDTO;
-  triggers: TimerLifeCycle[];
-};
-
-export const recipeCategoryLabels: Record<RecipeCategory, string> = {
-  ontime: 'Works out of the box',
-  playback: 'Playback and cue systems',
-  video: 'Video and streaming',
-  audio: 'Audio',
-  messaging: 'Webhooks and messaging',
-};
-
-/** presentation order for the library */
-export const recipeCategoryOrder: RecipeCategory[] = ['ontime', 'video', 'playback', 'audio', 'messaging'];
-
-/**
- * Every recipe targets loopback by default.
- * A recipe added by mistake must not put traffic on a venue network, so the user
- * has to point it somewhere real before it can reach anything.
- */
-export const automationRecipes: AutomationRecipe[] = [
-  {
-    id: 'ontime-aux-timer',
-    title: 'Start Aux Timer 1 with the event',
-    description: 'Sets aux timer 1 to five minutes and starts it whenever an event starts.',
-    category: 'ontime',
-    needsSetup: false,
-    automation: {
-      title: 'Start Aux Timer 1 with the event',
-      filterRule: 'all',
-      filters: [],
-      outputs: [
-        { type: 'ontime', action: 'aux1-set', time: '00:05:00' },
-        { type: 'ontime', action: 'aux1-start' },
-      ],
-    },
-    triggers: [Cycle.onStart],
-  },
-  {
-    id: 'ontime-warn-stage',
-    title: 'Warn the stage when the timer hits danger',
-    description: 'Shows a message on the stage timer as soon as the running event enters its danger window.',
-    category: 'ontime',
-    needsSetup: false,
-    automation: {
-      title: 'Warn the stage at danger',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'ontime', action: 'message-set', text: 'Please wrap up', visible: true }],
-    },
-    triggers: [Cycle.onDanger],
-  },
-  {
-    id: 'ontime-clear-message',
-    title: 'Hide the stage message on finish',
-    description: 'Hides the stage message once the event finishes. Pairs with the danger warning above.',
-    category: 'ontime',
-    needsSetup: false,
-    automation: {
-      title: 'Hide the stage message on finish',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'ontime', action: 'message-set', text: '', visible: false }],
-    },
-    triggers: [Cycle.onFinish],
-  },
-  {
-    id: 'obs-record',
-    title: 'OBS — start recording when the show starts',
-    description:
-      'Presses a Companion button bound to OBS. obs-websocket speaks WebSocket rather than HTTP, so Ontime reaches OBS through Companion or a similar bridge.',
-    category: 'video',
-    docsUrl: 'https://docs.getontime.no/api/automation/',
-    needsSetup: true,
-    automation: {
-      title: 'OBS start recording',
-      filterRule: 'all',
-      filters: [],
-      // Companion HTTP API: /api/location/<page>/<row>/<column>/press
-      outputs: [{ type: 'http', url: 'http://127.0.0.1:8888/api/location/1/0/1/press' }],
-    },
-    triggers: [Cycle.onLoad],
-  },
-  {
-    id: 'vmix-overlay-warning',
-    title: 'vMix — show an overlay on timer warning',
-    description: 'Triggers a vMix overlay through the web controller when the timer enters its warning window.',
-    category: 'video',
-    needsSetup: true,
-    automation: {
-      title: 'vMix overlay on warning',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'http', url: 'http://127.0.0.1:8088/api/?Function=OverlayInput1In' }],
-    },
-    triggers: [Cycle.onWarning],
-  },
-  {
-    id: 'qlab-go',
-    title: 'QLab — fire the matching cue on event start',
-    description: "Sends OSC to QLab to start the cue whose number matches the Ontime event's cue.",
-    category: 'playback',
-    needsSetup: true,
-    automation: {
-      title: 'QLab GO on event start',
-      filterRule: 'all',
-      filters: [],
-      outputs: [
-        { type: 'osc', targetIP: '127.0.0.1', targetPort: 53000, address: '/cue/{{eventNow.cue}}/start', args: '' },
-      ],
-    },
-    triggers: [Cycle.onStart],
-  },
-  {
-    id: 'companion-press',
-    title: 'Companion — press a button on event start',
-    description: 'Presses page 1 button 1 on a Stream Deck through the Companion HTTP API.',
-    category: 'playback',
-    needsSetup: true,
-    automation: {
-      title: 'Companion button press',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'http', url: 'http://127.0.0.1:8888/api/location/1/0/0/press' }],
-    },
-    triggers: [Cycle.onStart],
-  },
-  {
-    id: 'webhook-event-title',
-    title: 'Webhook — send the current event title',
-    description: 'Posts the running event title to any URL. A good place to see template strings at work.',
-    category: 'messaging',
-    docsUrl: 'https://docs.getontime.no/api/automation/#using-variables-in-automation',
-    needsSetup: true,
-    automation: {
-      title: 'Webhook with the current event',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'http', url: 'http://127.0.0.1:3000/now?title={{eventNow.title}}' }],
-    },
-    triggers: [Cycle.onStart],
-  },
-];

apps/client/src/features/app-settings/panel/automations-panel/recipes/recipeUtils.ts

@@ -1,47 +0,0 @@
-import type { Automation } from 'ontime-types';
-
-import { addAutomation, addTrigger, deleteAutomation, deleteTrigger } from '../../../../../common/api/automation';
-import { cycles } from '../automationUtils';
-import type { AutomationRecipe } from './automationRecipes';
-
-/**
- * Installs a recipe as an ordinary automation, using the same endpoints as the form.
- * There is nothing special about the result: the user owns it and can edit or delete it.
- *
- * The server generates the ids, so the automation has to exist before its triggers can
- * point at it. If a trigger fails half way we undo the whole thing, triggers first:
- * the server refuses to delete an automation that is still referenced.
- */
-export async function installRecipe(recipe: AutomationRecipe): Promise<Automation> {
-  const created = await addAutomation(recipe.automation);
-  const createdTriggerIds: string[] = [];
-
-  try {
-    for (const cycle of recipe.triggers) {
-      const label = cycles.find(({ value }) => value === cycle)?.label ?? cycle;
-      const trigger = await addTrigger({
-        title: `${recipe.automation.title} — ${label}`,
-        trigger: cycle,
-        automationId: created.id,
-      });
-      createdTriggerIds.push(trigger.id);
-    }
-  } catch (error) {
-    await rollback(created.id, createdTriggerIds);
-    throw error;
-  }
-
-  return created;
-}
-
-async function rollback(automationId: string, triggerIds: string[]) {
-  try {
-    for (const id of triggerIds) {
-      await deleteTrigger(id);
-    }
-    await deleteAutomation(automationId);
-  } catch (_error) {
-    // the install already failed and we are reporting that. A failed cleanup leaves an
-    // editable automation behind, which is recoverable, so it should not mask the original error
-  }
-}

apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.tsx

@@ -26,6 +26,7 @@ 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';

apps/client/src/features/app-settings/panel/settings-panel/ServerPortSettings.tsx

@@ -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>
           )}

apps/client/src/features/app-settings/useAppSettingsMenu.tsx

@@ -84,28 +84,11 @@ const staticOptions = [
       {
         id: 'automation__automations',
         label: 'Manage automations',
-        keywords: [
-          'osc',
-          'http',
-          'webhook',
-          'integration',
-          'api',
-          'output',
-          'action',
-          'recipe',
-          'template',
-          'example',
-          'preset',
-          'obs',
-          'qlab',
-          'vmix',
-          'companion',
-          'share',
-        ],
+        keywords: ['osc', 'http', 'webhook', 'integration', 'api', 'output', 'action'],
       },
       {
         id: 'automation__triggers',
-        label: 'Global triggers',
+        label: 'Manage triggers',
         keywords: ['lifecycle', 'on load', 'on start', 'on finish', 'on update'],
       },
     ],

apps/client/src/features/log/Log.tsx

@@ -9,50 +9,118 @@ import * as Panel from '../app-settings/panel-utils/PanelUtils';
 
 import style from './Log.module.scss';
 
-const origins = Object.values(LogOrigin);
-
-type OriginFilters = Record<LogOrigin, boolean>;
-
-const allEnabled = Object.fromEntries(origins.map((origin) => [origin, true])) as OriginFilters;
-
 export default function Log() {
   const { logs: logData } = useLogData();
   const isExtracted = window.location.pathname.includes('/log');
 
-  const [filters, setFilters] = useState<OriginFilters>(allEnabled);
+  const [showClient, setShowClient] = useState(true);
+  const [showServer, setShowServer] = useState(true);
+  const [showRx, setShowRx] = useState(true);
+  const [showTx, setShowTx] = useState(true);
+  const [showPlayback, setShowPlayback] = useState(true);
+  const [showUser, setShowUser] = useState(true);
 
-  const filteredData = logData.filter((entry) => filters[entry.origin as LogOrigin]);
+  const matchers: LogOrigin[] = [];
+  if (showUser) {
+    matchers.push(LogOrigin.User);
+  }
+  if (showClient) {
+    matchers.push(LogOrigin.Client);
+  }
+  if (showServer) {
+    matchers.push(LogOrigin.Server);
+  }
+  if (showRx) {
+    matchers.push(LogOrigin.Rx);
+  }
+  if (showTx) {
+    matchers.push(LogOrigin.Tx);
+  }
+  if (showPlayback) {
+    matchers.push(LogOrigin.Playback);
+  }
 
-  const toggleOrigin = useCallback((origin: LogOrigin) => {
-    setFilters((prev) => ({ ...prev, [origin]: !prev[origin] }));
-  }, []);
+  const filteredData = logData.filter((entry) => matchers.some((match) => entry.origin === match));
 
-  /** middle click solos an origin */
-  const soloOrigin = useCallback((toEnable: LogOrigin) => {
-    setFilters(Object.fromEntries(origins.map((origin) => [origin, origin === toEnable])) as OriginFilters);
+  const disableOthers = useCallback((toEnable: LogOrigin) => {
+    setShowUser(toEnable === LogOrigin.User);
+    setShowClient(toEnable === LogOrigin.Client);
+    setShowServer(toEnable === LogOrigin.Server);
+    setShowRx(toEnable === LogOrigin.Rx);
+    setShowTx(toEnable === LogOrigin.Tx);
+    setShowPlayback(toEnable === LogOrigin.Playback);
   }, []);
 
   return (
     <div className={cx([style.container, isExtracted && style.extracted])}>
       <Panel.InlineElements className={style.buttonBar}>
         <span className={style.filterLabel}>Filter by</span>
-        {origins.map((origin) => {
-          const isEnabled = filters[origin];
-          return (
-            <Button
-              key={origin}
-              variant={isEnabled ? 'primary' : 'subtle'}
-              size='small'
-              aria-pressed={isEnabled}
-              aria-label={`${isEnabled ? 'Hide' : 'Show'} ${origin} events`}
-              onClick={() => toggleOrigin(origin)}
-              onAuxClick={() => soloOrigin(origin)}
-              onContextMenu={(e) => e.preventDefault()}
-            >
-              {origin}
-            </Button>
-          );
-        })}
+        <Button
+          variant={showUser ? 'primary' : 'subtle'}
+          size='small'
+          aria-pressed={showUser}
+          aria-label={`${showUser ? 'Hide' : 'Show'} ${LogOrigin.User} events`}
+          onClick={() => setShowUser((s) => !s)}
+          onAuxClick={() => disableOthers(LogOrigin.User)}
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {LogOrigin.User}
+        </Button>
+        <Button
+          variant={showClient ? 'primary' : 'subtle'}
+          size='small'
+          aria-pressed={showClient}
+          aria-label={`${showClient ? 'Hide' : 'Show'} ${LogOrigin.Client} events`}
+          onClick={() => setShowClient((s) => !s)}
+          onAuxClick={() => disableOthers(LogOrigin.Client)}
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {LogOrigin.Client}
+        </Button>
+        <Button
+          variant={showServer ? 'primary' : 'subtle'}
+          size='small'
+          aria-pressed={showServer}
+          aria-label={`${showServer ? 'Hide' : 'Show'} ${LogOrigin.Server} events`}
+          onClick={() => setShowServer((s) => !s)}
+          onAuxClick={() => disableOthers(LogOrigin.Server)}
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {LogOrigin.Server}
+        </Button>
+        <Button
+          variant={showPlayback ? 'primary' : 'subtle'}
+          size='small'
+          aria-pressed={showPlayback}
+          aria-label={`${showPlayback ? 'Hide' : 'Show'} ${LogOrigin.Playback} events`}
+          onClick={() => setShowPlayback((s) => !s)}
+          onAuxClick={() => disableOthers(LogOrigin.Playback)}
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {LogOrigin.Playback}
+        </Button>
+        <Button
+          variant={showRx ? 'primary' : 'subtle'}
+          size='small'
+          aria-pressed={showRx}
+          aria-label={`${showRx ? 'Hide' : 'Show'} ${LogOrigin.Rx} events`}
+          onClick={() => setShowRx((s) => !s)}
+          onAuxClick={() => disableOthers(LogOrigin.Rx)}
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {LogOrigin.Rx}
+        </Button>
+        <Button
+          variant={showTx ? 'primary' : 'subtle'}
+          size='small'
+          aria-pressed={showTx}
+          aria-label={`${showTx ? 'Hide' : 'Show'} ${LogOrigin.Tx} events`}
+          onClick={() => setShowTx((s) => !s)}
+          onAuxClick={() => disableOthers(LogOrigin.Tx)}
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {LogOrigin.Tx}
+        </Button>
         <Button variant='subtle-destructive' size='small' onClick={clearLogs} className={style.apart}>
           <IoClose /> Clear
         </Button>

apps/client/src/features/rundown/entry-editor/EventEditorEmpty.module.scss

@@ -17,59 +17,10 @@
 }
 
 .shortcuts {
-  display: grid;
-  gap: 0.875rem;
   margin-top: 0.875rem;
-}
 
-.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);
+  --shortcut-title-color: #{$ui-white};
+  --shortcut-separator-color: #{$gray-500};
 }
 
 .prompt {
@@ -84,13 +35,4 @@
   .shortcutSection {
     margin-top: 1rem;
   }
-
-  .shortcutRow {
-    grid-template-columns: 1fr;
-    gap: 0.25rem;
-  }
-
-  .shortcutKeys {
-    justify-content: flex-start;
-  }
 }

apps/client/src/features/rundown/entry-editor/EventEditorEmpty.tsx

@@ -1,7 +1,13 @@
-import { PropsWithChildren, memo } from 'react';
+import { memo } from 'react';
 
 import * as Editor from '../../../common/components/editor-utils/EditorUtils';
-import Kbd from '../../../common/components/kbd/Kbd';
+import {
+  Combo,
+  Separator,
+  Shortcut,
+  ShortcutGroup,
+  ShortcutGroups,
+} from '../../../common/components/keyboard-shortcuts/KeyboardShortcuts';
 import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';
 
 import style from './EventEditorEmpty.module.scss';
@@ -13,7 +19,7 @@ function EventEditorEmpty() {
     <div className={style.entryEditor} data-testid='editor-container'>
       <div className={style.shortcutSection}>
         <Editor.Title className={style.prompt}>Rundown shortcuts</Editor.Title>
-        <div className={style.shortcuts}>
+        <ShortcutGroups className={style.shortcuts}>
           <ShortcutGroup title='Search'>
             <Shortcut label='Find in rundown'>
               <Combo keys={[deviceMod, 'F']} />
@@ -100,40 +106,8 @@ function EventEditorEmpty() {
               <Combo keys={[deviceAlt, 'Shift', 'D']} />
             </Shortcut>
           </ShortcutGroup>
-        </div>
+        </ShortcutGroups>
       </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>;
-}

apps/client/src/features/rundown/entry-editor/GroupEditor.tsx

@@ -81,7 +81,7 @@ export default function GroupEditor({ group }: GroupEditorProps) {
           <div>
             <Editor.Label htmlFor='eventId'>Plan offset</Editor.Label>
             <TextLikeInput
-              offset={planOffsetLabel}
+              offset={planOffsetLabel === 'under' ? 'over' : planOffsetLabel}
               className={cx([style.textLikeInput, planOffset === null && style.inactive])}
               disabled
             >

apps/client/src/features/rundown/entry-editor/composite/EventEditorTriggers.module.scss

@@ -15,7 +15,7 @@
 
 .triggerHeader {
   display: grid;
-  grid-template-columns: 8rem 1fr auto 2rem;
+  grid-template-columns: 8rem 1fr 2rem;
   gap: 0.5rem;
   padding: 0.375rem 0.75rem;
   font-size: $aux-text-size;
@@ -25,7 +25,7 @@
 .trigger {
   padding: 0.5rem 0.75rem;
   display: grid;
-  grid-template-columns: 8rem 1fr auto 2rem;
+  grid-template-columns: 8rem 1fr 2rem;
   align-items: center;
   gap: 0.5rem;
   min-height: 2.5rem;
@@ -41,12 +41,6 @@
   }
 }
 
-.outputTags {
-  display: flex;
-  gap: 0.25rem;
-  justify-content: flex-end;
-}
-
 .duplicateMessage {
   padding-left: 0.75rem;
   font-size: $aux-text-size;

apps/client/src/features/rundown/entry-editor/composite/EventEditorTriggers.tsx

@@ -6,11 +6,8 @@ import Button from '../../../../common/components/buttons/Button';
 import IconButton from '../../../../common/components/buttons/IconButton';
 import Info from '../../../../common/components/info/Info';
 import Select from '../../../../common/components/select/Select';
-import Tag from '../../../../common/components/tag/Tag';
-import { getLifecycleLabel } from '../../../../common/constants/timerLifecycle';
 import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
-import { summariseOutputs } from '../../../../common/utils/automationOutputs';
 import { eventTriggerOptions } from './eventTrigger.constants';
 
 import style from './EventEditorTriggers.module.scss';
@@ -30,7 +27,7 @@ export default function EventEditorTriggers({ triggers, eventId }: EventEditorTr
     label: title,
   }));
   const hasAutomationOptions = allAutomationOptions.length > 0;
-  const triggerOptions = eventTriggerOptions.map((cycle) => ({ value: cycle, label: getLifecycleLabel(cycle) }));
+  const triggerOptions = eventTriggerOptions.map((cycle) => ({ value: cycle, label: cycle }));
 
   const duplicateIds = new Set<string>();
   const seen = new Map<string, string>();
@@ -79,7 +76,6 @@ export default function EventEditorTriggers({ triggers, eventId }: EventEditorTr
           <div className={style.triggerHeader}>
             <span>Lifecycle</span>
             <span>Automation</span>
-            <span>Sends</span>
           </div>
           {triggers.map((trigger) => {
             const isDuplicate = duplicateIds.has(trigger.id);
@@ -107,13 +103,6 @@ export default function EventEditorTriggers({ triggers, eventId }: EventEditorTr
                   }}
                   options={automationOptions}
                 />
-                <div className={style.outputTags}>
-                  {summariseOutputs(automationSettings.automations[trigger.automationId]?.outputs ?? []).map(
-                    ({ type, label, count }) => (
-                      <Tag key={type}>{count > 1 ? `${label} ×${count}` : label}</Tag>
-                    ),
-                  )}
-                </div>
                 <IconButton variant='ghosted-destructive' onClick={() => handleDelete(trigger.id)}>
                   <IoTrash />
                 </IconButton>

apps/client/src/features/rundown/rundown-event/RundownEvent.tsx

@@ -1,6 +1,6 @@
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Day, EndAction, EntryId, Playback, TimeStrategy, TimerType } from 'ontime-types';
+import { Day, EndAction, EntryId, Maybe, OntimeGroup, Playback, TimeStrategy, TimerType } from 'ontime-types';
 import { isPlaybackActive } from 'ontime-utils';
 import { MouseEvent, useEffect, useRef } from 'react';
 import {
@@ -13,9 +13,10 @@ import {
   IoTrash,
   IoUnlink,
 } from 'react-icons/io5';
-import { TbFlagFilled, TbListNumbers } from 'react-icons/tb';
+import { TbClockPin, 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';
@@ -102,7 +103,10 @@ export default function RundownEvent({
   const clearSelectedEventId = useEventIdSwapping((state) => state.clearSelectedEventId);
   const openRenumberDialog = useRenumberCuesDialogStore((state) => state.onOpen);
 
-  const { updateEntry, batchUpdateEvents, clone, deleteEntry, groupEntries, swapEvents } = useEntryActionsContext();
+  const parentGroup = useEntry(parent) as Maybe<OntimeGroup>;
+
+  const { updateEntry, batchUpdateEvents, clone, deleteEntry, groupEntries, swapEvents, matchGroupDuration } =
+    useEntryActionsContext();
 
   const isSelected = useEventSelection((state) => state.selectedEvents.has(eventId));
   const unselect = useEventSelection((state) => state.unselect);
@@ -114,6 +118,15 @@ 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
       ? [
@@ -172,6 +185,17 @@ 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',

apps/client/src/features/rundown/rundown-group/RundownGroup.module.scss

@@ -74,42 +74,36 @@
   .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 {
-  opacity: 0.6;
+  color: $muted-gray;
 }
 
-.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;
-  }
+.target {
+  display: contents;
 }
 
 .drag {

apps/client/src/features/rundown/rundown-group/RundownGroup.tsx

@@ -2,24 +2,25 @@ 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, useRef } from 'react';
+import { MouseEvent, useCallback, 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';
@@ -40,12 +41,31 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
   'use memo';
 
   const handleRef = useRef<null | HTMLSpanElement>(null);
-  const { clone, ungroup, deleteEntry } = useEntryActionsContext();
+  const { clone, ungroup, deleteEntry, updateEntry } = 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',
@@ -62,6 +82,18 @@ 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',
@@ -105,22 +137,6 @@ 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),
@@ -175,20 +191,18 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
             <div className={style.metaLabel}>End</div>
             <div>{formatTime(data.timeEnd)}</div>
           </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} />}
+          <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>
-          </div>
+          </Tooltip>
         </div>
       </div>
     </div>

apps/client/src/features/sharing/GenerateLinkFormExport.tsx

@@ -35,6 +35,7 @@ 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}`,

apps/client/src/viewerConfig.ts

@@ -4,6 +4,7 @@ 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' },
 ];
 

apps/client/src/views/teleprompter/Teleprompter.scss

@@ -0,0 +1,201 @@
+@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};
+}

apps/client/src/views/teleprompter/Teleprompter.tsx

@@ -0,0 +1,175 @@
+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>
+  );
+}

apps/client/src/views/teleprompter/__tests__/teleprompter.keymap.test.ts

@@ -0,0 +1,96 @@
+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();
+  });
+});

apps/client/src/views/teleprompter/__tests__/teleprompter.options.test.ts

@@ -0,0 +1,109 @@
+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 });
+      }
+    }
+  });
+});

apps/client/src/views/teleprompter/__tests__/teleprompter.scroll.test.ts

@@ -0,0 +1,139 @@
+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);
+  });
+});

apps/client/src/views/teleprompter/__tests__/teleprompter.utils.test.ts

@@ -0,0 +1,218 @@
+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 });
+  });
+});

apps/client/src/views/teleprompter/control-overlay/ControlOverlay.tsx

@@ -0,0 +1,135 @@
+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>
+  );
+}

apps/client/src/views/teleprompter/help-overlay/HelpOverlay.tsx

@@ -0,0 +1,102 @@
+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>
+  );
+}

apps/client/src/views/teleprompter/script-block/ScriptBlock.tsx

@@ -0,0 +1,22 @@
+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>
+  );
+}

apps/client/src/views/teleprompter/teleprompter.keymap.ts

@@ -0,0 +1,65 @@
+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;
+}

apps/client/src/views/teleprompter/teleprompter.options.ts

@@ -0,0 +1,223 @@
+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]);
+}

apps/client/src/views/teleprompter/teleprompter.scroll.ts

@@ -0,0 +1,53 @@
+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;
+}

apps/client/src/views/teleprompter/teleprompter.types.ts

@@ -0,0 +1,52 @@
+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;
+};

apps/client/src/views/teleprompter/teleprompter.utils.ts

@@ -0,0 +1,80 @@
+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 };
+}

apps/client/src/views/teleprompter/useSyncTeleprompterParams.ts

@@ -0,0 +1,50 @@
+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]);
+}

apps/client/src/views/teleprompter/useTeleprompterControls.ts

@@ -0,0 +1,74 @@
+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);
+  }, []);
+}

apps/client/src/views/teleprompter/useTeleprompterData.ts

@@ -0,0 +1,26 @@
+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]),
+  };
+}

apps/client/src/views/teleprompter/useTeleprompterScroll.ts

@@ -0,0 +1,282 @@
+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,
+  };
+}

apps/electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-electron",
-  "version": "4.11.0",
+  "version": "4.13.0-beta.1",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",

apps/electron/src/menu/applicationMenu.js

@@ -100,7 +100,7 @@ function makeFileMenu(askToQuit, serverUrl, redirectWindow, showDialog, download
     submenu: [
       {
         label: 'New project...',
-        click: () => redirectWindow('/editor?settings=project__manage&new=true'),
+        click: () => redirectWindow('/editor?settings=project__create'),
       },
       {
         label: 'Load...',
@@ -151,6 +151,7 @@ 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`),
@@ -202,6 +203,18 @@ 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'),
+          },
         ],
       },
       {

apps/resolver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getontime/resolver",
-  "version": "4.11.0",
+  "version": "4.13.0-beta.1",
   "type": "module",
   "repository": "https://github.com/cpvalente/ontime",
   "types": "./dist/main.d.ts",

apps/server/package.json

@@ -2,7 +2,7 @@
   "name": "ontime-server",
   "type": "module",
   "main": "src/index.ts",
-  "version": "4.11.0",
+  "version": "4.13.0-beta.1",
   "exports": "./src/index.js",
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",

apps/server/src/api-data/automation/__tests__/automation.service.test.ts

@@ -1,11 +1,10 @@
 import { PlayableEvent, TimerLifeCycle } from 'ontime-types';
 
-import { logger } from '../../../classes/Logger.js';
 import { makeRuntimeStoreData } from '../../../stores/__mocks__/runtimeStore.mocks.js';
 import { RuntimeState } from '../../../stores/runtimeState.js';
 import { makeOntimeEvent } from '../../rundown/__mocks__/rundown.mocks.js';
 import { addAutomation, addTrigger, deleteAllTriggers } from '../automation.dao.js';
-import { resetAutomationLogState, testConditions, triggerAutomations } from '../automation.service.js';
+import { testConditions, triggerAutomations } from '../automation.service.js';
 import * as httpClient from '../clients/http.client.js';
 import * as oscClient from '../clients/osc.client.js';
 import { makeHTTPAction, makeOSCAction } from './testUtils.js';
@@ -645,109 +644,3 @@ describe('testConditions()', () => {
     });
   });
 });
-
-/**
- * A successful fire used to be invisible. Making it visible is only useful if the log
- * stays readable: onClock fires every second and the logger queue holds 100 entries.
- */
-describe('automation reporting', () => {
-  let logSpy = vi.spyOn(logger, 'info');
-
-  beforeEach(async () => {
-    vi.spyOn(oscClient, 'emitOSC').mockImplementation(() => {});
-    logSpy = vi.spyOn(logger, 'info').mockImplementation(() => {});
-
-    await deleteAllTriggers();
-    resetAutomationLogState();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-    vi.restoreAllMocks();
-  });
-
-  async function bind(title: string, cycle: TimerLifeCycle) {
-    const automation = await addAutomation({
-      title,
-      filterRule: 'all',
-      filters: [],
-      outputs: [makeOSCAction()],
-    });
-    await addTrigger({ title, trigger: cycle, automationId: automation.id });
-    return automation;
-  }
-
-  it('logs once per automation that fires, not once per output', async () => {
-    await bind('reporting-finish', TimerLifeCycle.onFinish);
-    logSpy.mockClear();
-
-    triggerAutomations(TimerLifeCycle.onFinish);
-
-    expect(logSpy).toHaveBeenCalledTimes(1);
-    expect(logSpy.mock.calls[0][1]).toContain('reporting-finish');
-  });
-
-  it('never logs per fire on a continuous lifecycle, and explains itself once', async () => {
-    await bind('reporting-clock', TimerLifeCycle.onClock);
-    logSpy.mockClear();
-
-    triggerAutomations(TimerLifeCycle.onClock);
-    triggerAutomations(TimerLifeCycle.onClock);
-    triggerAutomations(TimerLifeCycle.onClock);
-
-    expect(logSpy).toHaveBeenCalledTimes(1);
-    expect(logSpy.mock.calls[0][1]).toContain('suppressed');
-  });
-
-  it('does not repeat the suppression notice on every load', async () => {
-    await bind('reporting-clock', TimerLifeCycle.onClock);
-    triggerAutomations(TimerLifeCycle.onClock);
-    logSpy.mockClear();
-
-    // roll mode loads at every event boundary, and an operator steps through cues by hand.
-    // Re-notifying on each one would be the very flooding the notice exists to prevent
-    for (let i = 0; i < 5; i++) {
-      triggerAutomations(TimerLifeCycle.onLoad);
-      triggerAutomations(TimerLifeCycle.onClock);
-    }
-
-    expect(logSpy.mock.calls.filter(([, message]) => String(message).includes('suppressed'))).toHaveLength(0);
-  });
-
-  it('shows the suppression notice again after a stop', async () => {
-    await bind('reporting-clock', TimerLifeCycle.onClock);
-    triggerAutomations(TimerLifeCycle.onClock);
-    logSpy.mockClear();
-
-    // a stop ends the run, the next one reports from scratch
-    triggerAutomations(TimerLifeCycle.onStop);
-    triggerAutomations(TimerLifeCycle.onClock);
-
-    expect(logSpy.mock.calls.some(([, message]) => String(message).includes('suppressed'))).toBe(true);
-  });
-
-  it('throttles repeated loads, which the reset used to defeat', async () => {
-    vi.useFakeTimers();
-    await bind('reporting-load', TimerLifeCycle.onLoad);
-    logSpy.mockClear();
-
-    triggerAutomations(TimerLifeCycle.onLoad);
-    triggerAutomations(TimerLifeCycle.onLoad);
-
-    expect(logSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it('collapses repeats of the same automation and cycle inside the throttle window', async () => {
-    vi.useFakeTimers();
-    await bind('reporting-danger', TimerLifeCycle.onDanger);
-    logSpy.mockClear();
-
-    triggerAutomations(TimerLifeCycle.onDanger);
-    triggerAutomations(TimerLifeCycle.onDanger);
-    expect(logSpy).toHaveBeenCalledTimes(1);
-
-    vi.advanceTimersByTime(1001);
-    triggerAutomations(TimerLifeCycle.onDanger);
-    expect(logSpy).toHaveBeenCalledTimes(2);
-  });
-});

apps/server/src/api-data/automation/automation.service.ts

@@ -1,5 +1,4 @@
 import {
-  type Automation,
   type AutomationFilter,
   type AutomationOutput,
   type FilterRule,
@@ -16,36 +15,11 @@ import { logger } from '../../classes/Logger.js';
 import { isOntimeCloud } from '../../setup/environment.js';
 import { eventStore } from '../../stores/EventStore.js';
 import { getAutomationTriggers, getAutomations, getAutomationsEnabled } from './automation.dao.js';
-import { isContained, isEquivalent, isGreaterThan, isLessThan, summariseOutputs } from './automation.utils.js';
+import { isContained, isEquivalent, isGreaterThan, isLessThan } from './automation.utils.js';
 import { emitHTTP } from './clients/http.client.js';
 import { toOntimeAction } from './clients/ontime.client.js';
 import { emitOSC } from './clients/osc.client.js';
 
-/**
- * Lifecycles that fire continuously while the timer runs.
- * The logger queue holds 100 entries, so logging every onClock fire would evict
- * everything else within two minutes and make the log useless.
- */
-const continuousCycles: TimerLifeCycle[] = [TimerLifeCycle.onClock, TimerLifeCycle.onUpdate];
-
-/** floor between two reports about the same automation, in milliseconds */
-const reportThrottleMs = 1000;
-
-/** automations we have already warned about being bound to a continuous lifecycle */
-const suppressionNotices = new Set<string>();
-/** last time we logged a given automation + cycle pair */
-const lastLoggedAt = new Map<string, number>();
-
-/**
- * Clears the reporting state.
- * Called when the runtime stops, so the next run reports from scratch rather than
- * inheriting throttles from the last one
- */
-export function resetAutomationLogState() {
-  suppressionNotices.clear();
-  lastLoggedAt.clear();
-}
-
 /**
  * Exposes a method for triggering actions based on a TimerLifeCycle event
  */
@@ -53,21 +27,6 @@ export function triggerAutomations(cycle: TimerLifeCycle) {
   if (!getAutomationsEnabled()) {
     return;
   }
-
-  fireForCycle(cycle);
-
-  // A stop ends a run, so the next one reports from scratch. This deliberately does not
-  // happen on load: loading is not rare, roll mode loads at every event boundary, and
-  // resetting there would re-emit the suppression notice once per cue, which is the
-  // flooding the notice exists to prevent.
-  // It sits out here because fireForCycle returns early when nothing is bound to onStop,
-  // which is the common case
-  if (cycle === TimerLifeCycle.onStop) {
-    resetAutomationLogState();
-  }
-}
-
-function fireForCycle(cycle: TimerLifeCycle) {
   const store = eventStore.poll();
 
   let triggers = getAutomationTriggers();
@@ -104,40 +63,10 @@ function fireForCycle(cycle: TimerLifeCycle) {
     const shouldSend = testConditions(automation.filters, automation.filterRule, store);
     if (shouldSend) {
       send(automation.outputs, store);
-      reportFired(trigger.automationId, automation, cycle);
     }
   });
 }
 
-/**
- * Makes a successful automation fire visible in the log, which it previously was not
- */
-function reportFired(automationId: string, automation: Automation, cycle: TimerLifeCycle) {
-  const now = Date.now();
-
-  if (continuousCycles.includes(cycle)) {
-    // one notice per load is enough to explain why the log goes quiet from here
-    if (!suppressionNotices.has(automationId)) {
-      suppressionNotices.add(automationId);
-      logger.info(
-        LogOrigin.Automation,
-        `${automation.title} is bound to ${cycle} and fires continuously, per-fire logging suppressed`,
-      );
-    }
-    return;
-  }
-
-  // a rapid reload can fire the same automation on the same cycle several times over
-  const logKey = `${automationId}:${cycle}`;
-  const lastLogged = lastLoggedAt.get(logKey);
-  if (lastLogged !== undefined && now - lastLogged < reportThrottleMs) {
-    return;
-  }
-  lastLoggedAt.set(logKey, now);
-
-  logger.info(LogOrigin.Automation, `${automation.title} fired on ${cycle} → ${summariseOutputs(automation.outputs)}`);
-}
-
 /**
  * Exposes a method for bypassing the condition check and testing the sending of an output
  */

apps/server/src/api-data/automation/automation.utils.ts

@@ -1,5 +1,4 @@
 import {
-  AutomationOutput,
   EntryId,
   FilterRule,
   MaybeNumber,
@@ -26,23 +25,6 @@ export function isOntimeActionAction(value: string): value is OntimeAction['acti
   return ontimeActionKeyValues.includes(value);
 }
 
-/**
- * Describes what an automation sends, for the log line of a successful fire
- * @example 'OSC ×2, HTTP'
- */
-export function summariseOutputs(outputs: AutomationOutput[]): string {
-  const labels: Record<AutomationOutput['type'], string> = { osc: 'OSC', http: 'HTTP', ontime: 'Ontime action' };
-  const counts = new Map<AutomationOutput['type'], number>();
-
-  for (const output of outputs) {
-    counts.set(output.type, (counts.get(output.type) ?? 0) + 1);
-  }
-
-  return Array.from(counts.entries())
-    .map(([type, count]) => (count > 1 ? `${labels[type]} ×${count}` : labels[type]))
-    .join(', ');
-}
-
 function toOscValue(argString: string): OscArgInput {
   const argAsNum = Number(argString);
   // NOTE: number like: 1 2.0 33333

apps/server/src/api-data/rundown/__tests__/rundown.utils.test.ts

@@ -8,7 +8,7 @@ import {
   TimerType,
   Trigger,
 } from 'ontime-types';
-import { MILLIS_PER_HOUR, createEvent } from 'ontime-utils';
+import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, createEvent } from 'ontime-utils';
 import { assertType } from 'vitest';
 
 import { makeOntimeEvent, makeOntimeGroup, makeOntimeMilestone, makeRundown } from '../__mocks__/rundown.mocks.js';
@@ -22,6 +22,7 @@ import {
   makeDeepClone,
   mergeRundownPreservingFields,
   isLoadedPlayable,
+  eventDurationMatchGroupTarget,
 } from '../rundown.utils.js';
 
 describe('test event validator', () => {
@@ -610,3 +611,107 @@ 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);
+  });
+});

apps/server/src/api-data/rundown/rundown.router.ts

@@ -35,6 +35,7 @@ import {
   reorderEntry,
   swapEvents,
   ungroupEntries,
+  entryFitGroupDuration,
 } from './rundown.service.js';
 import { normalisedToRundownArray } from './rundown.utils.js';
 import {
@@ -337,6 +338,23 @@ 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
  */

apps/server/src/api-data/rundown/rundown.service.ts

@@ -47,6 +47,7 @@ import {
   hasChanges,
   mergeRundownPreservingFields,
   isLoadedPlayable,
+  eventDurationMatchGroupTarget,
 } from './rundown.utils.js';
 import { assertInsertAnchorExists, assertInsertAnchorInOrder, assertSingleInsertAnchor } from './rundown.validation.js';
 
@@ -447,6 +448,69 @@ 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
  */

apps/server/src/api-data/rundown/rundown.utils.ts

@@ -3,6 +3,7 @@ import {
   EntryCustomFields,
   EntryId,
   ImportedFields,
+  Maybe,
   OntimeBaseEvent,
   OntimeDelay,
   OntimeEntry,
@@ -30,6 +31,7 @@ import {
   generateId,
   getCueCandidate,
   makeString,
+  maxDuration,
   validateEndAction,
   validateTimerType,
   validateTimes,
@@ -601,3 +603,27 @@ 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;
+}

apps/server/src/models/__tests__/demoProject.test.ts

@@ -1,73 +0,0 @@
-import { isHTTPOutput, isOSCOutput, isOntimeEvent, timerLifecycleValues } from 'ontime-types';
-
-import { parseAutomation } from '../../api-data/automation/automation.validation.js';
-import { demoDb } from '../demoProject.js';
-
-/**
- * The demo ships with automations so the feature is visible on first run.
- * They are hand written literals: nothing in the type system checks that a trigger
- * resolves to an automation, or that the demo cannot reach out to the network.
- */
-describe('demo project automations', () => {
-  const { automations, triggers } = demoDb.automation;
-
-  it('is enabled, otherwise the automations are invisible', () => {
-    expect(demoDb.automation.enabledAutomations).toBe(true);
-  });
-
-  it('does not open a listening socket', () => {
-    expect(demoDb.automation.enabledOscIn).toBe(false);
-  });
-
-  it('keys every automation by its own id', () => {
-    for (const [key, automation] of Object.entries(automations)) {
-      expect(automation.id).toBe(key);
-    }
-  });
-
-  it('passes the same validation as a user created automation', () => {
-    for (const automation of Object.values(automations)) {
-      expect(() => parseAutomation(automation)).not.toThrow();
-    }
-  });
-
-  it('resolves every global trigger to an automation', () => {
-    for (const trigger of triggers) {
-      expect(timerLifecycleValues).toContain(trigger.trigger);
-      expect(Object.hasOwn(automations, trigger.automationId)).toBe(true);
-    }
-  });
-
-  it('resolves every event level trigger to an automation', () => {
-    for (const rundown of Object.values(demoDb.rundowns)) {
-      for (const entry of Object.values(rundown.entries)) {
-        if (!isOntimeEvent(entry)) {
-          continue;
-        }
-        for (const trigger of entry.triggers) {
-          expect(timerLifecycleValues).toContain(trigger.trigger);
-          expect(Object.hasOwn(automations, trigger.automationId)).toBe(true);
-        }
-      }
-    }
-  });
-
-  it('never sends outside this machine, whatever the user presses', () => {
-    // an automation only fires if something triggers it
-    const boundIds = new Set<string>(triggers.map((trigger) => trigger.automationId));
-    for (const rundown of Object.values(demoDb.rundowns)) {
-      for (const entry of Object.values(rundown.entries)) {
-        if (isOntimeEvent(entry)) {
-          entry.triggers.forEach((trigger) => boundIds.add(trigger.automationId));
-        }
-      }
-    }
-
-    for (const id of boundIds) {
-      for (const output of automations[id].outputs) {
-        expect(isOSCOutput(output)).toBe(false);
-        expect(isHTTPOutput(output)).toBe(false);
-      }
-    }
-  });
-});

apps/server/src/models/demoProject.ts

@@ -76,43 +76,11 @@ export const demoDb: DatabaseModel = {
       label: 'PowerPoint Slide',
     },
   },
-  /**
-   * The demo ships with a working automation so the engine is visible the first time
-   * someone presses Play, rather than hidden behind an empty settings panel.
-   *
-   * It fires an Ontime action: the demo must not put traffic on whatever network it
-   * happens to be opened on. It is attached via an event-level trigger rather than a
-   * global one, so per-event triggers are also discoverable by browsing the rundown
-   * instead of reading docs. The OSC entry is there to be read and edited, and is
-   * deliberately left without a trigger of its own.
-   *
-   * The ids are hand written and must match the map keys. Ids are only generated for
-   * automations created through the DAO, so literals are safe here.
-   */
   automation: {
-    enabledAutomations: true,
-    // never open a listening socket without the user asking for it
+    enabledAutomations: false,
     enabledOscIn: false,
     oscPortIn: 8888,
     triggers: [],
-    automations: {
-      'demo-aux-timer': {
-        id: 'demo-aux-timer',
-        title: 'Demo: run Aux Timer 1 with the event',
-        filterRule: 'all',
-        filters: [],
-        outputs: [
-          { type: 'ontime', action: 'aux1-set', time: '00:05:00' },
-          { type: 'ontime', action: 'aux1-start' },
-        ],
-      },
-      'demo-osc-example': {
-        id: 'demo-osc-example',
-        title: 'Demo: OSC to a lighting console (example, not wired up)',
-        filterRule: 'all',
-        filters: [],
-        outputs: [{ type: 'osc', targetIP: '127.0.0.1', targetPort: 8000, address: '/ontime/go', args: '1' }],
-      },
-    },
+    automations: {},
   },
 };

apps/server/src/models/demoRundowns.ts

@@ -1,4 +1,4 @@
-import { SupportedEntry, TimeStrategy, EndAction, TimerType, Day, Rundown, TimerLifeCycle } from 'ontime-types';
+import { SupportedEntry, TimeStrategy, EndAction, TimerType, Day, Rundown } from 'ontime-types';
 
 export const stageRundown: Rundown = {
   id: 'default',
@@ -120,16 +120,7 @@ export const stageRundown: Rundown = {
         Audio_Notes: '1x Wireless Hand Held',
         PowerPoint_Name: 'HoldingSlide.pptx',
       },
-      // demonstrates that an automation can be attached to a single event, which is
-      // otherwise only discoverable by reading the docs. See demoProject.ts
-      triggers: [
-        {
-          id: 'demo-event-trigger',
-          title: 'Aux timer with the event',
-          trigger: TimerLifeCycle.onStart,
-          automationId: 'demo-aux-timer',
-        },
-      ],
+      triggers: [],
     },
     fa593e: {
       id: 'fa593e',

e2e/tests/002-view-navigation.spec.ts

@@ -9,45 +9,52 @@ test.describe('test view navigation feature', () => {
   test('Timeline', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Timeline' }).click();
-    page.locator('data-testid=timeline-view');
+    await expect(page.getByTestId('timeline-view')).toBeVisible();
     await expect(page).toHaveURL('/timeline');
   });
 
   test('Backstage', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Backstage' }).click();
-    page.locator('data-testid=backstage-view');
+    await expect(page.getByTestId('backstage-view')).toBeVisible();
     await expect(page).toHaveURL('/backstage');
   });
 
   test('Studio Clock', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Studio Clock' }).click();
-    page.locator('data-testid=studio-view');
+    await expect(page.getByTestId('studio-view')).toBeVisible();
     await expect(page).toHaveURL('/studio');
   });
 
   test('Countdown', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Countdown' }).click();
-    page.locator('data-testid=countdown-view');
+    await expect(page.getByTestId('countdown-view')).toBeVisible();
     await expect(page).toHaveURL('/countdown');
   });
 
   test('Project Info', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Project Info' }).click();
-    page.locator('data-testid=project-view');
+    await expect(page.getByTestId('project-view')).toBeVisible();
     await expect(page).toHaveURL('/info');
   });
 
   test('Timer', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Timer', exact: true }).click();
-    page.locator('data-testid=timer-view');
+    await expect(page.getByTestId('timer-view')).toBeVisible();
     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');
 

e2e/tests/features/207-view-params.spec.ts

@@ -13,3 +13,25 @@ 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);
+});

e2e/tests/features/209-rundown-shortcuts.spec.ts

@@ -71,11 +71,15 @@ 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();
@@ -86,15 +90,16 @@ test('Move', async ({ page }) => {
     .press('Alt+Control+ArrowDown');
   await expect(page.getByTestId('entry-2').getByTestId('rundown-event')).toContainText('1');
 
-  // copy move up
+  // move entry three up twice, waiting for each reorder before targeting its new row
   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-3')
+    .getByTestId('entry-2')
     .getByTestId('rundown-event')
     .filter({ hasText: '3' })
     .press('Alt+ControlOrMeta+ArrowUp');

e2e/tests/features/212-time-until.spec.ts

@@ -13,23 +13,27 @@ 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 ids = new Array<string>();
-  ids.push(await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue());
+  const entry1Id = await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue();
   await editor.getByTestId('entry-2').getByTestId('rundown-event').click();
-  ids.push(await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue());
+  const entry2Id = await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue();
   await editor.getByTestId('entry-3').getByTestId('rundown-event').click();
-  ids.push(await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue());
+  const entry3Id = await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue();
   await editor.getByTestId('entry-4').getByTestId('rundown-event').click();
-  ids.push(await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue());
+  const entry4Id = await editor.getByTestId('editor-container').getByLabel('Event ID (read only)').inputValue();
 
-  await countdown.goto(`/countdown?${ids.join('&sub=')}`);
+  await countdown.goto(`/countdown?${entry1Id}&sub=${entry2Id}&sub=${entry3Id}&sub=${entry4Id}`);
 
   // Create reusable locator references for different elements
   const entry2 = {
@@ -57,8 +61,10 @@ 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.getByLabel('Pause event').click();
+  await editor.getByTestId('entry-1').getByLabel('Pause event').click();
+  await expect(editor.getByTestId('entry-1').getByLabel('Start event')).toBeVisible();
 
   // 1. initial check
   await expect(entry2.editorEvent).toContainText('9m');
@@ -129,22 +135,29 @@ test('time until absolute', async ({ context }) => {
 
 test('time until relative', async ({ context }) => {
   const editor = await context.newPage();
-  editor.goto('/editor');
+  await 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 editor.getByRole('button', { name: 'Event' }).nth(4).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.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.getByLabel('Pause event').click();
+  await editor.getByTestId('entry-1').getByLabel('Pause event').click();
+  await expect(editor.getByTestId('entry-1').getByLabel('Start event')).toBeVisible();
 
   await expect(editor.getByTestId('entry-2').getByTestId('rundown-event')).toContainText('9m');
   await expect(editor.getByTestId('entry-3').getByTestId('rundown-event')).toContainText('19m');

e2e/tests/features/215-automations.spec.ts

@@ -1,59 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-const baseURL = 'http://localhost:4001';
-const automationsURL = `${baseURL}/data/automations`;
-
-/**
- * Covers the automation delete flow: the server refuses to delete an automation that a
- * trigger still points at, and clears once the reference is removed.
- */
-test.describe('automations', () => {
-  let createdTriggers: string[] = [];
-  let createdAutomations: string[] = [];
-
-  test.afterEach(async ({ request }) => {
-    try {
-      // triggers first, the server refuses to delete an automation that is still referenced
-      for (const id of createdTriggers) {
-        await request.delete(`${automationsURL}/trigger/${id}`);
-      }
-      for (const id of createdAutomations) {
-        await request.delete(`${automationsURL}/automation/${id}`);
-      }
-    } catch {
-      // cleanup is best effort, it must not turn a passing test red
-    } finally {
-      createdTriggers = [];
-      createdAutomations = [];
-    }
-  });
-
-  test('refuses to delete an automation that a trigger still points at', async ({ request }) => {
-    const automation = await (
-      await request.post(`${automationsURL}/automation`, {
-        data: {
-          title: 'e2e referenced automation',
-          filterRule: 'all',
-          filters: [],
-          outputs: [{ type: 'ontime', action: 'aux1-stop' }],
-        },
-      })
-    ).json();
-    createdAutomations.push(automation.id);
-
-    const trigger = await (
-      await request.post(`${automationsURL}/trigger`, {
-        data: { title: 'e2e blocking trigger', trigger: 'onFinish', automationId: automation.id },
-      })
-    ).json();
-    createdTriggers.push(trigger.id);
-
-    const refused = await request.delete(`${automationsURL}/automation/${automation.id}`);
-    expect(refused.status()).toBe(400);
-    expect((await refused.json()).message).toContain('e2e blocking trigger');
-
-    // and it goes through once the reference is removed
-    expect((await request.delete(`${automationsURL}/trigger/${trigger.id}`)).status()).toBe(204);
-    expect((await request.delete(`${automationsURL}/automation/${automation.id}`)).status()).toBe(204);
-  });
-});

e2e/tests/features/215-teleprompter.spec.ts

@@ -0,0 +1,48 @@
+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/);
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "4.11.0",
+  "version": "4.13.0-beta.1",
   "description": "Time keeping for live events",
   "keywords": [
     "ontime",

packages/types/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.11.0",
+  "version": "4.13.0-beta.1",
   "name": "ontime-types",
   "type": "module",
   "main": "./src/index.ts",

packages/types/src/definitions/core/UrlPreset.type.ts

@@ -11,6 +11,7 @@ export enum OntimeView {
   StudioClock = 'studio',
   Countdown = 'countdown',
   ProjectInfo = 'info',
+  Teleprompter = 'teleprompter',
 }
 
 export type OntimeViewPresettable = Exclude<OntimeView, OntimeView.Editor>;

packages/types/src/definitions/runtime/Logger.type.ts

@@ -19,7 +19,6 @@ export type LogMessage = {
 };
 
 export enum LogOrigin {
-  Automation = 'AUTOMATION',
   Client = 'CLIENT',
   Playback = 'PLAYBACK',
   Rx = 'RX',