perf(rundown): keep entry revisions in step with the server

An entry revision advances on every change to that entry, which makes it a cheap marker for what has moved on in a rundown. The client did not maintain it: an optimistic entry carried the old revision, so the entry the server returned always differed from ours by that one field. That difference is enough to defeat structural sharing. A new entries object recomputes the rundown metadata, which fires the effect behind the list, which re-renders every visible row. Editing one title on a fourteen entry rundown cost eight structural and sixty-one attribute mutations, twice over. - optimistic patches apply the same revision bump the server does, so an unchanged entry keeps its identity and a refetch costs nothing to render - the rundown metadata memo keys on the fields the derivation reads, so a change of rundown revision alone no longer churns the list - editing an entry now reads the server response, which is the authority on what was applied, and only writes when it differs from what we predicted Measured on the same edit: eight to four structural, sixty-one to forty-one attribute mutations. Both changes are needed, neither helps on its own. Two bugs found on the way. A swap stored the pre increment revision, so swapped entries were indistinguishable from untouched ones. The optimistic batch edit spread the request envelope onto the entry rather than the patch, so it never applied the edit it was predicting. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011a5cbVjNC5XXF88b2PkUCa
fix(rundown): narrow rundown invalidation
2026-09-07 07:19:16 +00:00 · 2026-08-30 12:04:47 +00:00 · 2026-08-30 10:51:20 +00:00 · 2026-08-29 17:48:42 +00:00 · 2026-08-29 17:21:24 +00:00 · 2026-08-29 13:21:59 +00:00
115 changed files with 1610 additions and 4410 deletions
@@ -7,15 +7,13 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="theme-color" content="#101010" />
    <meta name="ontime" content="ontime - time keeping for live events" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <meta name="apple-mobile-web-app-title" content="Ontime" />
    <link rel="apple-touch-icon" href="ontime-logo.png" />
    <link rel="icon" type="image/png" href="ontime-logo.png" />
+    <link rel="manifest" href="site.webmanifest" />
    <link rel="manifest" href="manifest.json" />
    <meta name="robots" content="noindex" />
-    <title>Ontime</title>
+    <title>ontime</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -1,21 +1,19 @@
 {
-  "name": "Ontime",
-  "short_name": "Ontime",
+  "name": "ontime",
+  "short_name": "ontime",
  "icons": [
    {
-      "src": "ontime-logo-192.png",
-      "sizes": "192x192",
-      "type": "image/png"
+      "src": "favicon.ico",
+      "type": "image/x-icon"
    },
    {
-      "src": "ontime-logo-512.png",
-      "sizes": "512x512",
+      "src": "ontime-logo.png",
      "type": "image/png"
    }
  ],
  "scope": "./",
  "start_url": "./",
-  "display": "standalone",
-  "theme_color": "#101010",
+  "display": "",
+  "theme_color": "#121212",
  "background_color": "#101010"
 }
@@ -0,0 +1,8 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [{ "src": "ontime-logo.png", "sizes": "295x295", "type": "image/png" }],
+  "theme_color": "#121212",
+  "background_color": "#101010",
+  "display": "standalone"
+}
@@ -3,6 +3,7 @@ import { ComponentType, Suspense, lazy, useEffect, useMemo } from 'react';
 import { Navigate, Route, useLocation, useNavigate, useParams } from 'react-router';

 import ViewNavigationMenu from './common/components/navigation-menu/ViewNavigationMenu';
+import { EditableRundownScopeProvider } from './common/context/EditableRundownScopeProvider';
 import { PresetContext } from './common/context/PresetContext';
 import useUrlPresets from './common/hooks-query/useUrlPresets';
 import { useClientPath } from './common/hooks/useClientPath';
@@ -112,7 +113,9 @@ export default function AppRouter() {
          path='rundown'
          element={
            <EditorFeatureWrapper>
-              <RundownPanel />
+              <EditableRundownScopeProvider rundownId={null}>
+                <RundownPanel />
+              </EditableRundownScopeProvider>
            </EditorFeatureWrapper>
          }
        />
@@ -22,6 +22,14 @@ export const CLIENT_LIST = ['clientList'];
 export const REPORT = ['report'];
 export const TRANSLATION = ['translation'];

+/**
+ * Cache key holding the data for a rundown.
+ * Before the loaded rundown is known there is no id to key by,
+ * and the data lives under the bootstrap alias.
+ */
+export const getRundownCacheKey = (rundownId: string) =>
+  rundownId ? getRundownQueryKey(rundownId) : CURRENT_RUNDOWN_QUERY_KEY;
+
 // API URLs
 export const apiEntryUrl = `${serverURL}/data`;

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import type { ReportData } from 'ontime-types';
+import { OntimeReport } from 'ontime-types';

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

 /**
- * HTTP request to fetch the report
+ * HTTP request to fetch all reports
 */
-export async function fetchReport(options?: RequestOptions): Promise<ReportData> {
+export async function fetchReport(options?: RequestOptions): Promise<OntimeReport> {
  const res = await axios.get(reportUrl, { signal: options?.signal });
  return res.data;
 }

+export async function deleteReport(id: string) {
+  await axios.delete(`${reportUrl}/${id}`);
+  await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
+}
+
 export async function deleteAllReport() {
  await axios.delete(`${reportUrl}/all`);
  await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
@@ -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;
-}
@@ -0,0 +1,24 @@
+import { PropsWithChildren } from 'react';
+
+import { useScopedEntryActions } from '../hooks/useEntryAction';
+import { EntryActionsProvider } from './EntryActionsContext';
+import { RundownScopeProvider, useRundownScope, type RundownScopeProviderProps } from './RundownScopeContext';
+
+/**
+ * Rundown scope for subtrees which mutate entries.
+ * Actions are bound to the same rundown as the data, so the two cannot disagree.
+ */
+export function EditableRundownScopeProvider({ children, rundownId }: RundownScopeProviderProps) {
+  return (
+    <RundownScopeProvider rundownId={rundownId}>
+      <ScopedEntryActions>{children}</ScopedEntryActions>
+    </RundownScopeProvider>
+  );
+}
+
+function ScopedEntryActions({ children }: PropsWithChildren) {
+  const { rundownId } = useRundownScope();
+  const actions = useScopedEntryActions(rundownId);
+
+  return <EntryActionsProvider actions={actions}>{children}</EntryActionsProvider>;
+}
@@ -0,0 +1,77 @@
+import { MaybeString, Rundown } from 'ontime-types';
+import { PropsWithChildren, createContext, useContext, useEffect, useMemo, useRef } from 'react';
+
+import { getRundownCacheKey } from '../api/constants';
+import { useProjectRundowns } from '../hooks-query/useProjectRundowns';
+import { ontimeQueryClient } from '../queryClient';
+import { createEventSelectionStore, type EventSelectionStoreApi } from '../stores/eventSelectionStore';
+
+export type RundownScopeValue = {
+  /** the rundown this subtree operates on */
+  rundownId: string;
+  /** whether this scope targets the rundown the runtime is playing */
+  isLoaded: boolean;
+  /** selection and cursor, scoped to this rundown */
+  selectionStore: EventSelectionStoreApi;
+};
+
+const RundownScopeContext = createContext<RundownScopeValue | null>(null);
+
+export interface RundownScopeProviderProps extends PropsWithChildren {
+  /** rundown to operate on, null follows the loaded rundown */
+  rundownId: MaybeString;
+}
+
+/**
+ * Declares which rundown a subtree reads from.
+ *
+ * Data hooks resolve their rundown from here, so components never need to know
+ * which rundown they operate on. Nest a provider to point part of the tree at a
+ * different rundown; the app mounts one at the root that follows the loaded rundown.
+ */
+export function RundownScopeProvider({ children, rundownId }: RundownScopeProviderProps) {
+  const {
+    data: { loaded },
+  } = useProjectRundowns();
+
+  const targetId = rundownId ?? loaded;
+
+  // the store reads the rundown lazily, the ref keeps it pointing at the current target
+  const targetIdRef = useRef(targetId);
+
+  const selectionStoreRef = useRef<EventSelectionStoreApi | null>(null);
+  if (selectionStoreRef.current === null) {
+    selectionStoreRef.current = createEventSelectionStore(() =>
+      ontimeQueryClient.getQueryData<Rundown>(getRundownCacheKey(targetIdRef.current)),
+    );
+  }
+  const selectionStore = selectionStoreRef.current;
+
+  // a selection refers to entries of a single rundown, it cannot survive a change of target
+  useEffect(() => {
+    targetIdRef.current = targetId;
+    selectionStore.getState().clearSelectedEvents();
+  }, [selectionStore, targetId]);
+
+  const value = useMemo(
+    (): RundownScopeValue => ({
+      rundownId: targetId,
+      // an unresolved target is not the loaded rundown, it is not yet any rundown
+      isLoaded: Boolean(loaded) && targetId === loaded,
+      selectionStore,
+    }),
+    [targetId, loaded, selectionStore],
+  );
+
+  return <RundownScopeContext.Provider value={value}>{children}</RundownScopeContext.Provider>;
+}
+
+export function useRundownScope(): RundownScopeValue {
+  const context = useContext(RundownScopeContext);
+
+  if (!context) {
+    throw new Error('useRundownScope must be used within a RundownScopeProvider');
+  }
+
+  return context;
+}
@@ -0,0 +1,81 @@
+import { EntryId, OntimeEntry } from 'ontime-types';
+import { useMemo } from 'react';
+
+import { useSelectedEventId } from '../hooks/useSocket';
+import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
+import { useProjectRundowns } from './useProjectRundowns';
+import { flattenRundown, useRundownById } from './useRundownById';
+
+/**
+ * Rundown data for surfaces which only ever work against the rundown being played:
+ * the viewers, the operator, app settings and the runtime overview.
+ *
+ * These take no part in a rundown scope, they resolve the loaded rundown directly.
+ * Anything which can be pointed at a background rundown reads from its scope instead.
+ */
+export function useLoadedRundown() {
+  const {
+    data: { loaded },
+  } = useProjectRundowns();
+  return useRundownById(loaded);
+}
+
+export function useLoadedRundownWithMetadata() {
+  const { data, status } = useLoadedRundown();
+  const selectedEventId = useSelectedEventId();
+  const { entries, flatOrder } = data;
+  const rundownMetadata = useMemo(
+    () => getRundownMetadata({ entries, flatOrder }, selectedEventId),
+    [entries, flatOrder, selectedEventId],
+  );
+  return { data, status, rundownMetadata };
+}
+
+export function useLoadedFlatRundown() {
+  const { data, status } = useLoadedRundown();
+  const flatRundown = useMemo(() => flattenRundown(data), [data]);
+  return { data: flatRundown, rundownId: data.id, status };
+}
+
+export function useLoadedFlatRundownWithMetadata() {
+  const { data, status } = useLoadedRundown();
+  const selectedEventId = useSelectedEventId();
+  const { entries, flatOrder } = data;
+  const rundownWithMetadata = useMemo(
+    () => getFlatRundownMetadata({ entries, flatOrder }, selectedEventId),
+    [entries, flatOrder, selectedEventId],
+  );
+  return { data: rundownWithMetadata, status };
+}
+
+/**
+ * Provides access to a partial rundown based on a filter callback
+ *
+ * Callers MUST memoize the callback with useCallback to prevent
+ * re-filtering on every render.
+ */
+export function useLoadedPartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
+  const { data, status } = useLoadedFlatRundownWithMetadata();
+  const filteredData = useMemo(() => data.filter(cb), [data, cb]);
+  return { data: filteredData, status };
+}
+
+/**
+ * Hook to get a specific entry by ID from the loaded rundown.
+ * Runtime ids (the playing event, its group, the next flag) only exist here.
+ */
+export function useLoadedEntry(entryId: EntryId | null): OntimeEntry | null {
+  const { data: rundown } = useLoadedRundown();
+
+  if (entryId === null) return null;
+  return rundown.entries[entryId] ?? null;
+}
+
+export function useLoadedRundownAuxData() {
+  const { data, status } = useLoadedRundown();
+  const filteredData = useMemo(() => {
+    const { title, id } = data;
+    return { title, id };
+  }, [data]);
+  return { data: filteredData, status };
+}
@@ -1,34 +1,17 @@
 import { useQuery } from '@tanstack/react-query';
-import type { ReportData } from 'ontime-types';
+import { OntimeReport } from 'ontime-types';
 import { MILLIS_PER_HOUR } from 'ontime-utils';

 import { REPORT } from '../api/constants';
 import { fetchReport } from '../api/report';

-const emptyReport: ReportData = {
-  eventReports: {},
-  rundown: null,
-  show: {
-    plannedStart: null,
-    plannedEnd: null,
-    plannedDuration: null,
-    actualStart: null,
-    actualEnd: null,
-    actualDuration: null,
-  },
-};
-
 export default function useReport() {
-  const { data: report, refetch } = useQuery<ReportData>({
+  const { data, refetch } = useQuery<OntimeReport>({
    queryKey: REPORT,
    queryFn: ({ signal }) => fetchReport({ signal }),
-    placeholderData: (previousData) => previousData,
+    placeholderData: (previousData, _previousQuery) => previousData,
    staleTime: MILLIS_PER_HOUR,
  });

-  return {
-    data: report?.eventReports ?? emptyReport.eventReports,
-    report: report ?? emptyReport,
-    refetch,
-  };
+  return { data: data ?? {}, refetch };
 }
@@ -1,62 +1,38 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { EntryId, OntimeEntry, Rundown } from 'ontime-types';
-import { useEffect, useMemo } from 'react';
+import { EntryId, OntimeEntry } from 'ontime-types';
+import { useMemo } from 'react';

-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { CURRENT_RUNDOWN_QUERY_KEY, getRundownQueryKey } from '../api/constants';
-import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
+import { useRundownScope } from '../context/RundownScopeContext';
 import { useSelectedEventId } from '../hooks/useSocket';
-import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
-import { useProjectRundowns } from './useProjectRundowns';
-
-// revision is -1 so that the remote revision is higher
-const cachedRundownPlaceholder: Rundown = {
-  id: 'default',
-  title: '',
-  order: [],
-  flatOrder: [],
-  entries: {},
-  revision: -1,
-};
+import { getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
+import { flattenRundown, useRundownById } from './useRundownById';

 /**
- * Normalised rundown data for the currently loaded rundown.
- *
- * Bootstraps via the `/current` alias so the first paint is a single round-trip,
- * independent of the project rundown list. Once the loaded id is known, the
- * query key swaps to the id-keyed cache that is shared with `useRundownById`.
+ * Normalised rundown data for the rundown of the enclosing scope
 */
 export default function useRundown() {
-  const queryClient = useQueryClient();
-  const {
-    data: { loaded: loadedRundownId },
-  } = useProjectRundowns();
+  const { rundownId } = useRundownScope();
+  return useRundownById(rundownId);
+}

-  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
-    queryKey: loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY,
-    queryFn: ({ signal }) => fetchCurrentRundown({ signal }),
-    refetchInterval: queryRefetchIntervalSlow,
-  });
-
-  // Seed the id-keyed cache when fetching via the bootstrap alias
-  useEffect(() => {
-    if (!data || loadedRundownId) return;
-    queryClient.setQueryData(getRundownQueryKey(data.id), data);
-  }, [data, loadedRundownId, queryClient]);
-
-  // Once we have the ID, drop the temporary current cache
-  useEffect(() => {
-    if (!loadedRundownId) return;
-    queryClient.removeQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
-  }, [loadedRundownId, queryClient]);
-
-  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
+/**
+ * Runtime state only describes the loaded rundown,
+ * a scope pointed elsewhere must not show a playing event
+ */
+export function useScopedSelectedEventId(): EntryId | null {
+  const { isLoaded } = useRundownScope();
+  const selectedEventId = useSelectedEventId();
+  return isLoaded ? selectedEventId : null;
 }

 export function useRundownWithMetadata() {
  const { data, status } = useRundown();
-  const selectedEventId = useSelectedEventId();
-  const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
+  const selectedEventId = useScopedSelectedEventId();
+  // key on the fields the derivation reads, a revision only change must not churn the list
+  const { entries, flatOrder } = data;
+  const rundownMetadata = useMemo(
+    () => getRundownMetadata({ entries, flatOrder }, selectedEventId),
+    [entries, flatOrder, selectedEventId],
+  );
  return { data, status, rundownMetadata };
 }

@@ -66,41 +42,23 @@ export function useRundownWithMetadata() {
 */
 export function useFlatRundown() {
  const { data, status } = useRundown();
-
-  const flatRundown = useMemo(() => {
-    if (data.revision === -1) {
-      return [];
-    }
-    return data.flatOrder.map((id) => data.entries[id]).filter((entry): entry is OntimeEntry => entry !== undefined);
-  }, [data]);
+  const flatRundown = useMemo(() => flattenRundown(data), [data]);

  return { data: flatRundown, rundownId: data.id, status };
 }

 export function useFlatRundownWithMetadata() {
  const { data, status } = useRundown();
-  const selectedEventId = useSelectedEventId();
+  const selectedEventId = useScopedSelectedEventId();

-  const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
+  const { entries, flatOrder } = data;
+  const rundownWithMetadata = useMemo(
+    () => getFlatRundownMetadata({ entries, flatOrder }, selectedEventId),
+    [entries, flatOrder, selectedEventId],
+  );
  return { data: rundownWithMetadata, status };
 }

-/**
- * Provides access to a partial rundown based on a filter callback
- *
- * Callers MUST memoize the callback with useCallback to prevent
- * re-filtering on every render.
- *
- */
-export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
-  const { data, status } = useFlatRundownWithMetadata();
-  const filteredData = useMemo(() => {
-    return data.filter(cb);
-  }, [data, cb]);
-
-  return { data: filteredData, status };
-}
-
 /**
 * Hook to get a specific entry by ID from the rundown
 */
@@ -110,30 +68,3 @@ export function useEntry(entryId: EntryId | null): OntimeEntry | null {
  if (entryId === null) return null;
  return rundown.entries[entryId] ?? null;
 }
-
-export function useRundownAuxData() {
-  const { data, status } = useRundown();
-  const filteredData = useMemo(() => {
-    const { title, id } = data;
-    return { title, id };
-  }, [data]);
-  return { data: filteredData, status };
-}
-
-/**
- * Provides access to a specific rundown by ID.
- * When rundownId is null/undefined the query is disabled and returns the placeholder.
- */
-export function useRundownById(rundownId: string | null | undefined) {
-  const enabled = Boolean(rundownId);
-
-  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
-    queryKey: getRundownQueryKey(rundownId ?? ''),
-    queryFn: ({ signal }) => fetchRundown(rundownId!, { signal }),
-    enabled,
-    placeholderData: (previousData, _previousQuery) => previousData,
-    refetchInterval: queryRefetchIntervalSlow,
-  });
-
-  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
-}
@@ -0,0 +1,66 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { OntimeEntry, Rundown } from 'ontime-types';
+import { useEffect, useRef } from 'react';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { CURRENT_RUNDOWN_QUERY_KEY, getRundownCacheKey, getRundownQueryKey } from '../api/constants';
+import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
+
+// revision is -1 so that the remote revision is higher
+const cachedRundownPlaceholder: Rundown = {
+  id: 'default',
+  title: '',
+  order: [],
+  flatOrder: [],
+  entries: {},
+  revision: -1,
+};
+
+/**
+ * Provides access to a specific rundown by ID.
+ *
+ * Without an ID we do not yet know which rundown is loaded, so we bootstrap via
+ * the `/current` alias to keep the first paint to a single round-trip, then seed
+ * the id-keyed cache that every other reader shares.
+ */
+export function useRundownById(rundownId: string | null | undefined) {
+  const queryClient = useQueryClient();
+  const id = rundownId ?? '';
+  const isBootstrap = id === '';
+
+  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+    queryKey: getRundownCacheKey(id),
+    queryFn: ({ signal }) => (isBootstrap ? fetchCurrentRundown({ signal }) : fetchRundown(id, { signal })),
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  // Seed the id-keyed cache when fetching via the bootstrap alias
+  useEffect(() => {
+    if (!data || !isBootstrap) return;
+    queryClient.setQueryData(getRundownQueryKey(data.id), data);
+  }, [data, isBootstrap, queryClient]);
+
+  // Once we have the ID, drop the temporary current cache.
+  // Only the reader which bootstrapped may do so, others are still relying on it.
+  const didBootstrap = useRef(isBootstrap);
+  useEffect(() => {
+    if (isBootstrap || !didBootstrap.current) return;
+    didBootstrap.current = false;
+    queryClient.removeQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
+  }, [isBootstrap, queryClient]);
+
+  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
+}
+
+/**
+ * Builds a flat rundown from the order and entries fields
+ */
+export function flattenRundown(rundown: Rundown): OntimeEntry[] {
+  if (rundown.revision === -1) {
+    return [];
+  }
+  return rundown.flatOrder
+    .map((id) => rundown.entries[id])
+    .filter((entry): entry is OntimeEntry => entry !== undefined);
+}
@@ -1,54 +0,0 @@
-import { EntryId, Rundown } from 'ontime-types';
-import { useMemo } from 'react';
-
-import { useSelectedEventId } from '../hooks/useSocket';
-import { getFlatRundownMetadata, type ExtendedEntry } from '../utils/rundownMetadata';
-import { useProjectRundowns } from './useProjectRundowns';
-import { useRundownById } from './useRundown';
-
-export type RundownSource = {
-  rundownId: string | null;
-  rundown: Rundown;
-  flatRundown: ExtendedEntry[];
-  status: string;
-  selectedEventId: EntryId | null;
-};
-
-/**
- * Explicitly scoped rundown data for views that may operate on a non-loaded rundown.
- */
-export function useScopedRundown(rundownId: string | null): RundownSource {
-  const { data: projectRundowns } = useProjectRundowns();
-  return useRundownSource(rundownId, projectRundowns.loaded || null);
-}
-
-/**
- * Loaded-rundown source for views that must follow the active runtime rundown.
- */
-export function useLoadedRundownSource(): RundownSource {
-  const { data: projectRundowns } = useProjectRundowns();
-  const loadedRundownId = projectRundowns.loaded || null;
-  return useRundownSource(loadedRundownId, loadedRundownId);
-}
-
-function useRundownSource(rundownId: string | null, loadedRundownId: string | null): RundownSource {
-  const isLoadedTarget = rundownId !== null && rundownId === loadedRundownId;
-  const runtimeSelectedEventId = useSelectedEventId();
-  const effectiveSelectedEventId = isLoadedTarget ? runtimeSelectedEventId : null;
-  const { data: rundown, status } = useRundownById(rundownId);
-  const flatRundown = useMemo(
-    () => getFlatRundownMetadata(rundown, effectiveSelectedEventId),
-    [effectiveSelectedEventId, rundown],
-  );
-
-  return useMemo(
-    () => ({
-      rundownId,
-      rundown,
-      flatRundown,
-      status,
-      selectedEventId: effectiveSelectedEventId,
-    }),
-    [effectiveSelectedEventId, flatRundown, rundown, rundownId, status],
-  );
-}
@@ -1,13 +1,13 @@
 import {
  FOLLOW_LOADED_RUNDOWN_ID,
-  getCuesheetRundownStorageKey,
+  getRundownSelectionStorageKey,
  resolveSelectedRundownId,
-} from '../useCuesheetRundownSelection';
+} from '../useRundownSelection';

-describe('useCuesheetRundownSelection helpers', () => {
-  it('builds a project-scoped storage key', () => {
-    expect(getCuesheetRundownStorageKey('http://localhost:4001', 'My Project')).toBe(
-      'cuesheet-selected-rundown:http://localhost:4001:My Project',
+describe('useRundownSelection helpers', () => {
+  it('builds a namespace and project scoped storage key', () => {
+    expect(getRundownSelectionStorageKey('cuesheet', 'http://localhost:4001', 'My Project')).toBe(
+      'rundown-selection:cuesheet:http://localhost:4001:My Project',
    );
  });

@@ -8,7 +8,6 @@ import {
  OntimeGroup,
  OntimeMilestone,
  PatchWithId,
-  ProjectRundownsList,
  Rundown,
  SupportedEntry,
  TimeField,
@@ -32,9 +31,10 @@ import {
  swapEventData,
 } from 'ontime-utils';
 import { useCallback, useMemo } from 'react';
+import isEqual from 'react-fast-compare';

 import { moveDown, moveUp, orderEntries } from '../../features/rundown/rundown.utils';
-import { CURRENT_RUNDOWN_QUERY_KEY, PROJECT_RUNDOWNS, getRundownQueryKey } from '../api/constants';
+import { getRundownCacheKey } from '../api/constants';
 import {
  ReorderEntry,
  deleteEntries,
@@ -52,6 +52,7 @@ import {
  requestFitGroupTarget,
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
+import { useRundownScope } from '../context/RundownScopeContext';
 import { useEditorSettings } from '../stores/editorSettings';

 export type EventOptions = Partial<{
@@ -64,22 +65,38 @@ export type EventOptions = Partial<{
  lastEventId: MaybeString;
 }>;

+/**
+ * Applies a patch the way the server does, revision included.
+ *
+ * An entry revision advances on every change to that entry, which makes it a
+ * cheap marker for whether an entry has moved on. The optimistic entry has to
+ * carry the revision the server will return, otherwise the two disagree and the
+ * refetch resolves to a different object for no reason.
+ * Mirrors applyPatchToEntry in the rundown service: delays carry no revision.
+ */
+function patchEntry(entry: OntimeEntry, patch: Partial<OntimeEntry>): OntimeEntry {
+  if (isOntimeEvent(entry) || isOntimeGroup(entry) || isOntimeMilestone(entry)) {
+    return { ...entry, ...patch, revision: entry.revision + 1 } as OntimeEntry;
+  }
+  return { ...entry, ...patch } as OntimeEntry;
+}
+
 type ClientInsertOptions = {
  after?: EntryId;
  before?: EntryId;
 };

 /**
- * Gather utilities for actions on entries in the loaded rundown.
+ * Gather utilities for actions on entries in the rundown of the enclosing scope.
 */
-export const useEntryActions = () => useEntryActionsForRundown(undefined);
+export const useEntryActions = () => useEntryActionsForRundown(useRundownScope().rundownId);

 /**
 * Gather utilities for actions on entries in an explicitly selected rundown.
 */
-export const useScopedEntryActions = (rundownId: string | null) => useEntryActionsForRundown(rundownId ?? '');
+export const useScopedEntryActions = (rundownId: MaybeString) => useEntryActionsForRundown(rundownId ?? '');

-function useEntryActionsForRundown(scopedRundownId: string | undefined) {
+function useEntryActionsForRundown(scopedRundownId: string) {
  const queryClient = useQueryClient();
  const {
    linkPrevious,
@@ -93,12 +110,8 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
  } = useEditorSettings();

  const resolveCurrentRundownQueryKey = useCallback(() => {
-    if (scopedRundownId !== undefined) {
-      return getRundownQueryKey(scopedRundownId);
-    }
-    const loadedRundownId = queryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
-    return loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY;
-  }, [queryClient, scopedRundownId]);
+    return getRundownCacheKey(scopedRundownId);
+  }, [scopedRundownId]);

  /**
   * Returns the currently loaded rundown
@@ -325,8 +338,10 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
      if (previousData && eventId) {
        // optimistically update object
        const newRundown = { ...previousData.entries };
-        // @ts-expect-error -- we expect the events to be of same type
-        newRundown[eventId] = { ...newRundown[eventId], ...newEvent };
+        const previousEntry = newRundown[eventId];
+        if (previousEntry) {
+          newRundown[eventId] = patchEntry(previousEntry, newEvent);
+        }
        queryClient.setQueryData<Rundown>(queryKey, {
          id: previousData.id,
          title: previousData.title,
@@ -340,6 +355,23 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
      // Return a context with the previous and new events
      return { previousData, newEvent, queryKey };
    },
+    // the server is the authority on the applied patch, it may normalise what we sent
+    onSuccess: (response, _variables, context) => {
+      const serverEntry = response.data;
+      if (!serverEntry || !context?.queryKey) return;
+
+      const cachedRundown = queryClient.getQueryData<Rundown>(context.queryKey);
+      if (!cachedRundown) return;
+
+      // our optimistic entry usually describes the change exactly, writing an
+      // identical entry would discard the cached reference for nothing
+      if (isEqual(cachedRundown.entries[serverEntry.id], serverEntry)) return;
+
+      queryClient.setQueryData<Rundown>(context.queryKey, {
+        ...cachedRundown,
+        entries: { ...cachedRundown.entries, [serverEntry.id]: serverEntry },
+      });
+    },
    // Mutation fails, rollback undoes optimist update
    onError: (_error, _newEvent, context) => {
      if (context?.previousData && context?.queryKey) {
@@ -512,10 +544,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
          if (Object.hasOwn(newRundown, eventId)) {
            const event = newRundown[eventId];
            if (isOntimeEvent(event)) {
-              newRundown[eventId] = {
-                ...event,
-                ...data,
-              };
+              newRundown[eventId] = patchEntry(event, data.data);
            }
          }
        });
@@ -2,8 +2,8 @@ import { MaybeString } from 'ontime-types';
 import { RefObject, useCallback, useEffect } from 'react';

 function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
-  componentRef: RefObject<ComponentRef | null>,
-  scrollRef: RefObject<ScrollRef | null>,
+  componentRef: RefObject<ComponentRef>,
+  scrollRef: RefObject<ScrollRef>,
  topOffset: number,
 ) {
  if (!componentRef.current || !scrollRef.current) {
@@ -21,16 +21,18 @@ interface UseFollowComponentProps {
  followRef: RefObject<HTMLElement | null>;
  scrollRef: RefObject<HTMLElement | null>;
  doFollow: boolean;
-  followTrigger: MaybeString; // this would be an entry id or null
-  getTopOffset: () => number;
+  topOffset?: number;
+  setScrollFlag?: (newValue: boolean) => void;
+  followTrigger?: MaybeString; // this would be an entry id or null
 }

 export default function useFollowComponent({
  followRef,
  scrollRef,
  doFollow,
+  topOffset = 100,
+  setScrollFlag,
  followTrigger,
-  getTopOffset,
 }: UseFollowComponentProps) {
  // when trigger moves, view should follow
  useEffect(() => {
@@ -39,17 +41,25 @@ export default function useFollowComponent({
    }

    if (followRef.current && scrollRef.current) {
+      setScrollFlag?.(true);
      // Use requestAnimationFrame to ensure the component is fully loaded
      window.requestAnimationFrame(() => {
-        // resolve the offset after layout, so that measured values are up to date
-        scrollToComponent(followRef, scrollRef, getTopOffset());
+        scrollToComponent(followRef as RefObject<HTMLElement>, scrollRef as RefObject<HTMLElement>, topOffset);
+        setScrollFlag?.(false);
      });
    }
-  }, [followTrigger, doFollow, followRef, scrollRef, getTopOffset]);
+  }, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);

-  const scrollToRefComponent = useCallback(() => {
-    scrollToComponent(followRef, scrollRef, getTopOffset());
-  }, [followRef, scrollRef, getTopOffset]);
+  const scrollToRefComponent = useCallback(
+    (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
+      if (componentRef && containerRef) {
+        // @ts-expect-error -- we know this are not null
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        scrollToComponent(componentRef!, containerRef!, offset);
+      }
+    },
+    [followRef, scrollRef, topOffset],
+  );

  return scrollToRefComponent;
 }
@@ -2,14 +2,21 @@ import { useSessionStorage } from '@mantine/hooks';
 import { startTransition, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router';

-import { useOrderedProjectList } from '../../common/hooks-query/useProjectList';
-import { useProjectRundowns } from '../../common/hooks-query/useProjectRundowns';
 import { serverURL } from '../../externals';
+import { useOrderedProjectList } from '../hooks-query/useProjectList';
+import { useProjectRundowns } from '../hooks-query/useProjectRundowns';

 export const FOLLOW_LOADED_RUNDOWN_ID = '__follow-loaded__' as const;

-export function getCuesheetRundownStorageKey(server: string, projectFilename: string) {
-  return `cuesheet-selected-rundown:${server}:${projectFilename}`;
+/** each surface keeps its own selection, so panels can point at different rundowns */
+export type RundownSelectionNamespace = 'cuesheet';
+
+export function getRundownSelectionStorageKey(
+  namespace: RundownSelectionNamespace,
+  server: string,
+  projectFilename: string,
+) {
+  return `rundown-selection:${namespace}:${server}:${projectFilename}`;
 }

 export function resolveSelectedRundownId(storedSelectedRundownId: string | null, availableRundownIds: Set<string>) {
@@ -17,14 +24,22 @@ export function resolveSelectedRundownId(storedSelectedRundownId: string | null,
  return FOLLOW_LOADED_RUNDOWN_ID;
 }

-export function useCuesheetRundownSelection() {
+/**
+ * Persisted choice of which rundown a surface operates on.
+ * The resolved id is meant to be handed to a rundown scope provider,
+ * where null means follow whichever rundown is loaded.
+ */
+export function useRundownSelection(namespace: RundownSelectionNamespace) {
  'use memo';

  const { data: projectRundowns } = useProjectRundowns();
  const {
    data: { lastLoadedProject },
  } = useOrderedProjectList();
-  const storageKey = useMemo(() => getCuesheetRundownStorageKey(serverURL, lastLoadedProject), [lastLoadedProject]);
+  const storageKey = useMemo(
+    () => getRundownSelectionStorageKey(namespace, serverURL, lastLoadedProject),
+    [namespace, lastLoadedProject],
+  );
  const [storedSelectedRundownId, setStoredSelectedRundownId] = useSessionStorage<string | null>({
    key: storageKey,
    defaultValue: FOLLOW_LOADED_RUNDOWN_ID,
@@ -38,6 +53,8 @@ export function useCuesheetRundownSelection() {
  return {
    loadedRundownId,
    selectedRundownId,
+    /** id for the rundown scope, null follows the loaded rundown */
+    scopedRundownId: selectedRundownId === FOLLOW_LOADED_RUNDOWN_ID ? null : selectedRundownId,
    projectRundowns: projectRundowns.rundowns,
    setSelectedRundownId: (rundownId: string) => {
      startTransition(() => {
@@ -52,7 +69,7 @@ export function useDirectLinkToBackgroundEdit() {
    data: { lastLoadedProject },
  } = useOrderedProjectList();
  const navigate = useNavigate();
-  const storageKey = getCuesheetRundownStorageKey(serverURL, lastLoadedProject);
+  const storageKey = getRundownSelectionStorageKey('cuesheet', serverURL, lastLoadedProject);
  const [_, setStoredSelectedRundownId] = useSessionStorage<string | null>({ key: storageKey, defaultValue: null });

  return useCallback(
@@ -6,6 +6,6 @@ import { useEffect } from 'react';
 */
 export function useWindowTitle(title: string) {
  useEffect(() => {
-    document.title = `Ontime - ${title}`;
+    document.title = `ontime - ${title}`;
  }, []);
 }
@@ -0,0 +1,64 @@
+import { Rundown, SupportedEntry } from 'ontime-types';
+
+import { createEventSelectionStore } from '../eventSelectionStore';
+
+function makeRundown(id: string, eventIds: string[]): Rundown {
+  return {
+    id,
+    title: id,
+    order: eventIds,
+    flatOrder: eventIds,
+    entries: Object.fromEntries(eventIds.map((entryId) => [entryId, { id: entryId, type: SupportedEntry.Event }])),
+    revision: 1,
+  } as unknown as Rundown;
+}
+
+describe('createEventSelectionStore', () => {
+  it('keeps selections of separate instances independent', () => {
+    const first = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2']));
+    const second = createEventSelectionStore(() => makeRundown('rundown-b', ['b1', 'b2']));
+
+    first.getState().setSingleEntrySelection({ id: 'a1' });
+    second.getState().setSingleEntrySelection({ id: 'b2' });
+
+    expect(first.getState().cursor).toBe('a1');
+    expect(second.getState().cursor).toBe('b2');
+    expect(first.getState().selectedEvents).toEqual(new Set(['a1']));
+    expect(second.getState().selectedEvents).toEqual(new Set(['b2']));
+  });
+
+  it('resolves a shift range against the injected rundown', () => {
+    const store = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2', 'a3']));
+
+    store.getState().setSelectedEvents({ id: 'a3', index: 2, selectMode: 'shift' });
+
+    // without an anchor the range runs from the top up to the clicked index
+    expect(store.getState().selectedEvents).toEqual(new Set(['a1', 'a2']));
+    expect(store.getState().anchoredIndex).toBe(2);
+  });
+
+  it('replaces the selection set so subscribers on the set re-render', () => {
+    const store = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2']));
+
+    store.getState().setSelectedEvents({ id: 'a1', index: 0, selectMode: 'click' });
+    const afterClick = store.getState().selectedEvents;
+
+    store.getState().setSelectedEvents({ id: 'a2', index: 1, selectMode: 'ctrl' });
+    const afterAdd = store.getState().selectedEvents;
+    expect(afterAdd).not.toBe(afterClick);
+    expect(afterAdd).toEqual(new Set(['a1', 'a2']));
+
+    store.getState().unselect('a1');
+    const afterUnselect = store.getState().selectedEvents;
+    expect(afterUnselect).not.toBe(afterAdd);
+    expect(afterUnselect).toEqual(new Set(['a2']));
+  });
+
+  it('does not select when the rundown is unavailable', () => {
+    const store = createEventSelectionStore(() => undefined);
+
+    store.getState().setSelectedEvents({ id: 'a1', index: 0, selectMode: 'shift' });
+
+    expect(store.getState().selectedEvents).toEqual(new Set());
+  });
+});
@@ -1,14 +1,21 @@
+import { MaybeString } from 'ontime-types';
 import { create } from 'zustand';

 type EntryCopyStore = {
-  entryCopyId: string | null;
+  entryCopyId: MaybeString;
+  /** rundown the copied entry belongs to, so a paste knows whether it crosses rundowns */
+  entryCopyRundownId: MaybeString;
  entryCopyMode: 'copy' | 'cut';
-  setEntryCopyId: (eventId: string | null, mode?: 'copy' | 'cut') => void;
+  setEntryCopyId: (eventId: MaybeString, rundownId: MaybeString, mode?: 'copy' | 'cut') => void;
 };

+/**
+ * The clipboard is shared across rundowns so entries can be moved between them
+ */
 export const useEntryCopy = create<EntryCopyStore>()((set) => ({
  entryCopyId: null,
+  entryCopyRundownId: null,
  entryCopyMode: 'copy',
-  setEntryCopyId: (entryCopyId: string | null, mode: 'copy' | 'cut' = 'copy') =>
-    set({ entryCopyId, entryCopyMode: mode }),
+  setEntryCopyId: (entryCopyId: MaybeString, entryCopyRundownId: MaybeString, mode: 'copy' | 'cut' = 'copy') =>
+    set({ entryCopyId, entryCopyRundownId, entryCopyMode: mode }),
 }));
@@ -0,0 +1,158 @@
+import { EntryId, MaybeNumber, Rundown, isOntimeEvent } from 'ontime-types';
+import { MouseEvent } from 'react';
+import { StoreApi } from 'zustand';
+import { createStore } from 'zustand/vanilla';
+
+import { isMacOS } from '../utils/deviceUtils';
+
+export type SelectionMode = 'shift' | 'click' | 'ctrl';
+
+export interface EventSelectionStore {
+  selectedEvents: Set<EntryId>;
+  anchoredIndex: MaybeNumber;
+  cursor: EntryId | null;
+  entryMode: 'event' | 'single' | null;
+  scrollHandler: ((id: EntryId) => void) | null;
+  setSingleEntrySelection: (selectionArgs: { id: EntryId }) => void;
+  setSelectedEvents: (selectionArgs: { id: EntryId; index: number; selectMode: SelectionMode }) => void;
+  clearSelectedEvents: () => void;
+  clearMultiSelect: () => void;
+  unselect: (id: EntryId) => void;
+  setScrollHandler: (handler: ((id: EntryId) => void) | null) => void;
+  scrollToEntry: (id: EntryId) => void;
+}
+
+export type EventSelectionStoreApi = StoreApi<EventSelectionStore>;
+
+/**
+ * Keeps track of the selected entries and selection mode
+ * Provides methods to update the selection based on user interactions
+ *
+ * One store instance exists per rundown scope, so panels showing different
+ * rundowns keep independent selections. The rundown the selection refers to is
+ * injected as `getRundown` rather than resolved from the loaded rundown.
+ */
+export function createEventSelectionStore(getRundown: () => Rundown | undefined): EventSelectionStoreApi {
+  return createStore<EventSelectionStore>()((set, get) => ({
+    selectedEvents: new Set(),
+    anchoredIndex: null,
+    cursor: null,
+    entryMode: null,
+    scrollHandler: null,
+    setSingleEntrySelection: ({ id }) => {
+      set({ selectedEvents: new Set([id]), anchoredIndex: null, cursor: id, entryMode: 'single' });
+    },
+    setSelectedEvents: ({ id, index, selectMode }) => {
+      const { selectedEvents, anchoredIndex, entryMode } = get();
+
+      // if we are in single mode, we replace the selection and change the mode
+      if (entryMode === 'single') {
+        return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
+      }
+
+      // on click, we replace selection with event
+      if (selectMode === 'click') {
+        return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
+      }
+
+      // on ctrl + click, we toggle the selection of that event
+      if (selectMode === 'ctrl') {
+        const rundownData = getRundown();
+        if (!rundownData) return;
+
+        // if it doesnt exist, simply add to the list and set an anchor
+        if (!selectedEvents.has(id)) {
+          return set({
+            selectedEvents: new Set(selectedEvents).add(id),
+            anchoredIndex: index,
+            cursor: id,
+            entryMode: 'event',
+          });
+        }
+
+        // if event is already selected, we remove it from selection
+        // and set the anchor to the event after
+        const withoutId = new Set(selectedEvents);
+        withoutId.delete(id);
+
+        const nextIndex = rundownData.order.findIndex(
+          (eventId, i) => i > index && isOntimeEvent(rundownData.entries[eventId]) && withoutId.has(eventId),
+        );
+
+        // if we didnt find anything after, set the anchor to the last event
+        return set({
+          selectedEvents: withoutId,
+          anchoredIndex: nextIndex < 0 ? rundownData.order.length - 1 : nextIndex,
+          entryMode: 'event',
+        });
+      }
+
+      // on shift + click, we select a range of events up to the clicked event
+      if (selectMode === 'shift') {
+        const rundownData = getRundown();
+        if (!rundownData) return;
+
+        // get list of rundown with only ontime events
+        const eventIds: EntryId[] = [];
+        rundownData.flatOrder.forEach((eventId) => {
+          const event = rundownData.entries[eventId];
+          if (isOntimeEvent(event)) {
+            eventIds.push(event.id);
+          }
+        });
+
+        const start = anchoredIndex === null ? 0 : Math.min(anchoredIndex, index);
+        const end = anchoredIndex === null ? index : Math.max(anchoredIndex, index + 1);
+
+        // create new set with range of ids from start to end
+        const selectedEventIds = eventIds.slice(start, end);
+
+        return set({
+          selectedEvents: new Set([...selectedEvents, ...selectedEventIds]),
+          anchoredIndex: index,
+          entryMode: 'event',
+        });
+      }
+    },
+    clearSelectedEvents: () => set({ selectedEvents: new Set(), anchoredIndex: null, cursor: null, entryMode: null }),
+    clearMultiSelect: () => {
+      const { selectedEvents } = get();
+      const [firstSelected] = selectedEvents;
+      set({
+        selectedEvents: new Set(firstSelected ? [firstSelected] : []),
+        anchoredIndex: null,
+        entryMode: null,
+      });
+    },
+    unselect: (id: string) => {
+      const { entryMode, selectedEvents } = get();
+      const remaining = new Set(selectedEvents);
+      remaining.delete(id);
+      set({
+        selectedEvents: remaining,
+        entryMode: remaining.size === 0 ? null : entryMode,
+      });
+    },
+    // Sets the scroll handler for programmatic scrolling to entries
+    setScrollHandler: (handler) => set({ scrollHandler: handler }),
+    // Scrolls to the specified entry using the registered scroll handler
+    scrollToEntry: (id: EntryId) => {
+      const handler = get().scrollHandler;
+      if (handler) {
+        handler(id);
+      }
+    },
+  }));
+}
+
+export function getSelectionMode(event: MouseEvent): SelectionMode {
+  if ((isMacOS() && event.metaKey) || event.ctrlKey) {
+    return 'ctrl';
+  }
+
+  if (event.shiftKey) {
+    return 'shift';
+  }
+
+  return 'click';
+}
@@ -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']);
-  });
-});
@@ -1,23 +0,0 @@
-import type { OntimeEventReport } from 'ontime-types';
-import { dayInMs, MILLIS_PER_MINUTE } from 'ontime-utils';
-
-import { getEventVariance } from '../report';
-
-it('uses captured days when measuring an event across midnight', () => {
-  const report: OntimeEventReport = {
-    startedAt: dayInMs - 5 * MILLIS_PER_MINUTE,
-    startedAtDay: 0,
-    endedAt: 5 * MILLIS_PER_MINUTE,
-    endedAtDay: 1,
-    scheduledStart: dayInMs - 5 * MILLIS_PER_MINUTE,
-    scheduledDay: 0,
-    scheduledDuration: 10 * MILLIS_PER_MINUTE,
-  };
-
-  expect(getEventVariance(report)).toMatchObject({
-    actualDuration: 10 * MILLIS_PER_MINUTE,
-    delta: 0,
-    status: 'ontime',
-  });
-  expect(getEventVariance({ ...report, endedAt: null })).toMatchObject({ status: 'not-run' });
-});
@@ -58,16 +58,4 @@ describe('formatDuration()', () => {
    expect(formatDuration(2 * MILLIS_PER_HOUR + 6 * MILLIS_PER_MINUTE + 45 * MILLIS_PER_SECOND, false)).toBe('2h6m45s');
    expect(formatDuration(599702, false)).toBe('9m59s');
  });
-  it('formats durations differently with and without seconds', () => {
-    expect(formatDuration(0, false)).toBe('0m');
-    expect(formatDuration(0, true)).toBe('0m');
-    expect(formatDuration(30 * MILLIS_PER_SECOND, false)).toBe('30s');
-    expect(formatDuration(30 * MILLIS_PER_SECOND, true)).toBe('');
-    expect(formatDuration(2 * MILLIS_PER_HOUR + 30 * MILLIS_PER_SECOND, false)).toBe('2h30s');
-    expect(formatDuration(2 * MILLIS_PER_HOUR + 30 * MILLIS_PER_SECOND, true)).toBe('2h');
-    expect(formatDuration(2 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 30 * MILLIS_PER_SECOND, false)).toBe(
-      '2h10m30s',
-    );
-    expect(formatDuration(2 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 30 * MILLIS_PER_SECOND, true)).toBe('2h10m');
-  });
 });
@@ -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 }));
-}
@@ -1,29 +0,0 @@
-import type { MaybeNumber, OntimeEventReport } from 'ontime-types';
-import { dayInMs, MILLIS_PER_SECOND } from 'ontime-utils';
-
-type EventVariance = {
-  actualDuration: MaybeNumber;
-  delta: number;
-  status: 'ontime' | 'over' | 'under' | 'not-run';
-};
-
-const notRun: EventVariance = { actualDuration: null, delta: 0, status: 'not-run' };
-
-export function getReportTimePosition(time: number, day: number): number;
-export function getReportTimePosition(time: MaybeNumber, day: number | null): MaybeNumber;
-export function getReportTimePosition(time: MaybeNumber, day: number | null): MaybeNumber {
-  return time === null || day === null ? null : day * dayInMs + time;
-}
-
-export function getEventVariance(entry: OntimeEventReport | undefined): EventVariance {
-  if (!entry) return notRun;
-
-  const start = getReportTimePosition(entry.startedAt, entry.startedAtDay);
-  const end = getReportTimePosition(entry.endedAt, entry.endedAtDay);
-  if (start === null || end === null) return notRun;
-
-  const actualDuration = end - start;
-  const delta = actualDuration - entry.scheduledDuration;
-  if (Math.abs(delta) < MILLIS_PER_SECOND) return { actualDuration, delta, status: 'ontime' };
-  return { actualDuration, delta, status: delta > 0 ? 'over' : 'under' };
-}
@@ -242,12 +242,12 @@ export function maybeInvalidateRundownCache(revision: MaybeNumber, rundownId?: s
    return;
  }

-  // skip if we dont recognise the ID the revision is lower
  const queryKey = getRundownQueryKey(rundownId);
  const cachedRundown = ontimeQueryClient.getQueryData<{ revision: number }>(queryKey);

-  if (revision === cachedRundown?.revision) {
-    // we already have the latest change
+  // we already have this change, or something newer
+  // messages can arrive after a refetch has already brought in a later revision
+  if (revision !== null && cachedRundown !== undefined && revision <= cachedRundown.revision) {
    return;
  }

@@ -1,27 +1,13 @@
-/**
- * The wide modal body does not scroll, so the form owns it.
- * Without this the form is simply clipped: four outputs is enough to put Save out of reach.
- */
-.form {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.formScroll {
-  height: 100%;
-}
-
 .outerColumn {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-size: calc(1rem - 1px);
  color: $ui-white;
+
+  // the shared modal body owns scrolling for this regular form modal
+  min-height: 100%;
  padding-block: 0.5rem;
-  // leaves the overlay scrollbar somewhere to sit without covering a field
-  padding-right: 0.5rem;

  h3 {
    font-size: 1rem;
@@ -40,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;
 }
@@ -1,109 +1,52 @@
 import {
  Automation,
  AutomationDTO,
-  AutomationFilter,
-  TimerLifeCycle,
-  Trigger,
+  HTTPOutput,
+  OSCOutput,
+  OntimeAction,
  isHTTPOutput,
  isOSCOutput,
  isOntimeAction,
 } from 'ontime-types';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 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';
 import Modal from '../../../../common/components/modal/Modal';
 import RadioGroup from '../../../../common/components/radio-group/RadioGroup';
-import ScrollArea from '../../../../common/components/scroll-area/ScrollArea';
 import Select from '../../../../common/components/select/Select';
 import Tag from '../../../../common/components/tag/Tag';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
 import useCustomFields from '../../../../common/hooks-query/useCustomFields';
+import { startsWithHttp } from '../../../../common/utils/regex';
 import * as Panel from '../../panel-utils/PanelUtils';
-import { cycles, isAutomation, makeFieldList, makeTriggerTitle, operators, type OutputErrors } from './automationUtils';
-import HttpOutputForm from './HttpOutputForm';
+import { isAutomation, makeFieldList } from './automationUtils';
 import OntimeActionForm from './OntimeActionForm';
-import OscOutputForm from './OscOutputForm';
-import OutputCard, { type TestState } from './OutputCard';
+import TemplateInput from './template-input/TemplateInput';

 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;
-
-/** 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,
@@ -150,28 +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 getOutputErrors = (index: number) => errors.outputs?.[index] as OutputErrors | undefined;
-
  const handleAddNewFilter = () => {
    appendFilter({ field: '', operator: 'equals', value: '' });
  };
@@ -189,99 +110,80 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
    appendOutput({ type: 'ontime', action: 'aux1-start' });
  };

-  /**
-   * Sends a single output as configured, without saving the automation.
-   * OSC is fire and forget over UDP, so the most we can honestly claim is that we sent it.
-   */
-  const handleTest = async (index: number, key: string) => {
-    const values = getValues(`outputs.${index}`);
-
-    if (isOSCOutput(values) && (!values.targetIP || !values.targetPort || !values.address)) {
-      reportTest(key, { status: 'error', message: 'Fill in the target and address before testing' });
-      return;
-    }
-    if (isHTTPOutput(values) && !values.url) {
-      reportTest(key, { status: 'error', message: 'Add a target URL before testing' });
-      return;
-    }
-
-    reportTest(key, { status: 'sending' });
+  const handleTestOSCOutput = async (index: number) => {
    try {
-      // NOTE: there is no meaningful validation to do on an Ontime action, we let the server deal with the data
-      await testOutput(values);
-      reportTest(key, { status: 'ok', message: 'Sent' });
-    } catch (error) {
-      reportTest(key, { status: 'error', message: maybeAxiosError(error) });
+      const values = getValues(`outputs.${index}`) as OSCOutput;
+      if (!values.targetIP || !values.targetPort || !values.address) {
+        return;
+      }
+      await testOutput({
+        type: 'osc',
+        targetIP: values.targetIP,
+        targetPort: values.targetPort,
+        address: values.address,
+        args: values.args,
+      });
+    } catch (_error) {
+      /** we dont handle errors here, users should use the network tab */
    }
  };

-  /**
-   * 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 handleTestHTTPOutput = async (index: number) => {
+    try {
+      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 toAdd = selectedCycles.filter((cycle) => !initialCycles.includes(cycle));
-    for (const cycle of toAdd) {
-      await addTrigger({ title: makeTriggerTitle(title, cycle), trigger: cycle, automationId });
+  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',
+      });
+    } 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
@@ -289,239 +191,304 @@ 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.form}>
-          <ScrollArea className={style.formScroll} contentClassName={style.outerColumn}>
-            <div className={style.innerColumn}>
-              <h3>Automation options</h3>
-              <div className={style.titleSection}>
-                <label>
-                  Title
-                  <Input
-                    {...register('title', { required: { value: true, message: 'Required field' } })}
-                    fluid
-                    placeholder='Load preset'
-                  />
-                </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>
+        <form id={formId} onSubmit={handleSubmit(onSubmit)} className={style.outerColumn}>
+          <div className={style.innerColumn}>
+            <h3>Automation options</h3>
+            <div className={style.titleSection}>
+              <label>
+                Title
+                <Input
+                  {...register('title', { required: { value: true, message: 'Required field' } })}
+                  fluid
+                  placeholder='Load preset'
+                />
+              </label>
+              <Panel.Error>{errors.title?.message}</Panel.Error>
            </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>
-                )}
-                {fieldFilters.map((field, index) => {
-                  const description = describeFilter(index);
-                  return (
-                    <div key={field.id} className={style.card}>
-                      <div className={style.cardHeader}>
-                        <Tag>Filter</Tag>
-                        <span className={style.cardSummary}>{description}</span>
+          <div className={style.innerColumn}>
+            <h3>Filters (optional)</h3>
+            <div className={style.ruleSection}>
+              <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 key = `filters.${index}.field.${field.id}`;
+                return (
+                  <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 filter'
+                          aria-label='Delete'
                          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>
                    </div>
-                  );
-                })}
-                <div>
-                  <Button onClick={handleAddNewFilter}>
-                    Add filter <IoAdd />
-                  </Button>
-                </div>
-              </div>
-            </div>
-
-            <div className={style.innerColumn}>
-              <h3>Outputs</h3>
-              <Info>
-                Type {'{{'} in any field to drop in Ontime runtime data, like the running event title.{' '}
-                <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) => {
-                const rowErrors = getOutputErrors(index);
-                const cardProps = {
-                  testState: testResults[output.id],
-                  onTest: () => handleTest(index, output.id),
-                  onDelete: () => removeOutput(index),
-                };
-
-                if (isOSCOutput(output)) {
-                  return (
-                    <OutputCard
-                      key={output.id}
-                      label='OSC'
-                      kindClass={style.tagOsc}
-                      summary={watch(`outputs.${index}.address`)}
-                      {...cardProps}
-                    >
-                      <OscOutputForm index={index} output={output} register={register} rowErrors={rowErrors} />
-                    </OutputCard>
-                  );
-                }
-
-                if (isHTTPOutput(output)) {
-                  return (
-                    <OutputCard key={output.id} label='HTTP' kindClass={style.tagHttp} {...cardProps}>
-                      <HttpOutputForm index={index} output={output} register={register} rowErrors={rowErrors} />
-                    </OutputCard>
-                  );
-                }
-
-                if (isOntimeAction(output)) {
-                  return (
-                    <OutputCard key={output.id} label='Ontime action' kindClass={style.tagOntime} {...cardProps}>
-                      <OntimeActionForm
-                        value={output.action}
-                        index={index}
-                        register={register}
-                        rowErrors={rowErrors}
-                        setValue={setValue}
-                        watch={watch}
-                      />
-                    </OutputCard>
-                  );
-                }
-
-                return null;
+                  </div>
+                );
              })}
              <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>
+                <Button onClick={handleAddNewFilter}>
+                  Add filter <IoAdd />
+                </Button>
              </div>
            </div>
-          </ScrollArea>
+          </div>
+
+          <div className={style.innerColumn}>
+            <h3>Outputs</h3>
+            <Info>
+              Automation outputs can be used to send data from Ontime to external software <br />
+              or to change properties of Ontime itself. <br /> <br />
+              Use Ontime runtime data in these fields with template strings. Type {'{{'} to see autocomplete, or{' '}
+              <ExternalLink href={integrationsDocsUrl}>read the docs</ExternalLink>
+            </Info>
+
+            {fieldOutputs.map((output, index) => {
+              if (isOSCOutput(output)) {
+                const rowErrors = errors.outputs?.[index] as
+                  | {
+                      targetIP?: { message?: string };
+                      targetPort?: { message?: string };
+                      address?: { message?: string };
+                      args?: { message?: string };
+                    }
+                  | undefined;
+
+                return (
+                  <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
+                  | {
+                      url?: { message?: string };
+                    }
+                  | undefined;
+                return (
+                  <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>
+                );
+              }
+
+              if (isOntimeAction(output)) {
+                const rowErrors = errors.outputs?.[index] as
+                  | {
+                      action?: { message?: string };
+                      time?: { message?: string };
+                      text?: { message?: string };
+                      visible?: { message?: string };
+                      secondarySource?: { message?: string };
+                    }
+                  | undefined;
+                return (
+                  <div key={output.id} className={style.outputCard}>
+                    <Tag>Ontime action</Tag>
+                    <OntimeActionForm
+                      value={output.action}
+                      index={index}
+                      register={register}
+                      rowErrors={rowErrors}
+                      setValue={setValue}
+                      watch={watch}
+                    >
+                      <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;
+            })}
+            <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>
      }
      footerElements={
@@ -30,16 +30,16 @@ export default function AutomationPanel({ location }: PanelBaseProps) {
        />
      </div>
      <div ref={automationsRef}>
-        <AutomationsList
-          automations={data.automations}
+        <AutomationsList automations={data.automations} enabledAutomations={automationState} isLoading={isLoading} />
+      </div>
+      <div ref={triggersRef}>
+        <TriggersList
          triggers={data.triggers}
+          automations={data.automations}
          enabledAutomations={automationState}
          isLoading={isLoading}
        />
      </div>
-      <div ref={triggersRef}>
-        <TriggersList triggers={data.triggers} automations={data.automations} isLoading={isLoading} />
-      </div>
    </>
  );
 }
@@ -94,8 +94,7 @@ 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>
            <ExternalLink href={oscApiDocsUrl}>See the docs</ExternalLink>
          </Info>
@@ -1,20 +0,0 @@
-/** tags make a cell taller than the title beside it, which staggers on the default baseline */
-.table td {
-  vertical-align: middle;
-}
-
-.tags {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.actions {
-  justify-content: flex-end;
-  flex-wrap: nowrap;
-}
-
-.muted {
-  color: $muted-gray;
-}
@@ -1,25 +1,18 @@
-import { Automation, AutomationDTO, NormalisedAutomation, Trigger } from 'ontime-types';
-import { useMemo, useState } from 'react';
+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 { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
-import useAppSettingsNavigation from '../../useAppSettingsNavigation';
 import AutomationForm from './AutomationForm';
-import { groupTriggersByAutomation, isAutomation } from './automationUtils';
-import DeleteAutomationDialog from './DeleteAutomationDialog';
-import NewAutomationDialog from './NewAutomationDialog';

-import style from './AutomationsList.module.scss';
-
-const emptyAutomation: AutomationDTO = {
+const automationPlaceholder: AutomationDTO = {
  title: '',
  filterRule: 'all',
  filters: [],
@@ -28,73 +21,37 @@ const emptyAutomation: 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 { setLocation } = useAppSettingsNavigation();
-  const [editing, setEditing] = useState<Automation | AutomationDTO | null>(null);
-  const [isPickingStart, setIsPickingStart] = useState(false);
-  const [deleteTarget, setDeleteTarget] = useState<Automation | null>(null);
+  const [automationFormData, setAutomationFormData] = useState<AutomationDTO | null>(null);
+  const [deleteError, setDeleteError] = useState<string | null>(null);

-  const lifecyclesByAutomation = useMemo(() => groupTriggersByAutomation(triggers), [triggers]);
-  const automationIds = Object.keys(automations);
-
-  /** a recipe creates the automation itself, so it lands in the list rather than in a form */
-  const handleCreated = async () => {
-    setIsPickingStart(false);
-    await refetch();
+  const handleDelete = async (id: string) => {
+    try {
+      setDeleteError(null);
+      await deleteAutomation(id);
+    } catch (error) {
+      setDeleteError(maybeAxiosError(error));
+    } finally {
+      refetch();
+    }
  };

-  const handleStartEmpty = () => {
-    setIsPickingStart(false);
-    setEditing(emptyAutomation);
-  };
-
-  const handleDeleted = async () => {
-    setDeleteTarget(null);
-    await refetch();
-  };
+  const arrayAutomations = Object.keys(automations);

  return (
    <Panel.Section>
      <Panel.Card>
-        {editing !== null && (
-          <AutomationForm
-            // the form snapshots the automation's lifecycles on mount, so it must never be
-            // reused across two different automations
-            key={isAutomation(editing) ? editing.id : 'new'}
-            automation={editing}
-            triggers={triggers}
-            onClose={() => setEditing(null)}
-          />
-        )}
-        {isPickingStart && (
-          <NewAutomationDialog
-            onClose={() => setIsPickingStart(false)}
-            onStartEmpty={handleStartEmpty}
-            onCreated={handleCreated}
-          />
-        )}
-        {deleteTarget !== null && (
-          <DeleteAutomationDialog
-            automation={deleteTarget}
-            attachedTriggers={triggers.filter((trigger) => trigger.automationId === deleteTarget.id)}
-            onCancel={() => setDeleteTarget(null)}
-            onDeleted={handleDeleted}
-          />
+        {automationFormData !== null && (
+          <AutomationForm automation={automationFormData} onClose={() => setAutomationFormData(null)} />
        )}
        <Panel.SubHeader>
          Manage automations
-          <Button onClick={() => setIsPickingStart(true)}>
+          <Button onClick={() => setAutomationFormData(automationPlaceholder)}>
            New <IoAdd />
          </Button>
        </Panel.SubHeader>
@@ -103,102 +60,74 @@ export default function AutomationsList({

        <Panel.Section>
          {enabledAutomations === false && (
-            <Info type='warning'>
-              <Info.Body>Automations are off, so nothing in this list will run.</Info.Body>
-              <Info.Footer>
-                {/* the master switch is at the top of the panel, out of sight once the list has rows */}
-                <Button size='small' onClick={() => setLocation('automation__settings')}>
-                  Go to automation settings
-                </Button>
-              </Info.Footer>
+            <Info>
+              Automations are disabled. You can still manage automation definitions here, but they will not run until
+              enabled.
            </Info>
          )}

-          <Panel.Table className={style.table}>
+          <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>
            <tbody>
-              {!isLoading && automationIds.length === 0 && (
+              {!isLoading && arrayAutomations.length === 0 && (
                <Panel.TableEmpty
                  title='No automations yet'
-                  description='An automation sends OSC or HTTP messages, or runs an Ontime action, whenever a trigger fires. Start from a recipe to see one working.'
+                  description='An automation sends OSC or HTTP messages, or runs an Ontime action, whenever a trigger fires.'
                  action={
-                    <Button variant='primary' onClick={() => setIsPickingStart(true)}>
-                      New automation <IoAdd />
+                    <Button variant='primary' onClick={() => setAutomationFormData(automationPlaceholder)}>
+                      Create automation <IoAdd />
                    </Button>
                  }
                />
              )}
-              {automationIds.map((automationId) => {
-                const automation = automations[automationId];
-                const lifecycles = lifecyclesByAutomation[automationId] ?? [];
-                const outputs = summariseOutputs(automation.outputs);
-
+              {arrayAutomations.map((automationId) => {
+                if (!Object.hasOwn(automations, automationId)) {
+                  return null;
+                }
                return (
-                  <tr key={automationId}>
-                    <td>{automation.title}</td>
-                    <td>
-                      {/*
-                       * Only global triggers are visible here: an automation can also be attached to
-                       * single events, which live in the rundown. An empty cell is therefore not the
-                       * same as never running, so it says nothing rather than claiming that.
-                       */}
-                      {lifecycles.length === 0 ? (
-                        <span className={style.muted}>—</span>
-                      ) : (
-                        <div className={style.tags}>
-                          {lifecycles.map((cycle) => (
-                            <Tag key={cycle}>{getLifecycleLabel(cycle)}</Tag>
-                          ))}
-                        </div>
-                      )}
-                    </td>
-                    <td>
-                      {automation.filters.length === 0 ? (
-                        <span className={style.muted}>—</span>
-                      ) : (
-                        <Tag>{automation.filterRule === 'all' ? 'All filters' : 'Any filter'}</Tag>
-                      )}
-                    </td>
-                    <td>
-                      <div className={style.tags}>
-                        {outputs.length === 0 ? (
-                          <Tag variant='warning'>No outputs</Tag>
-                        ) : (
-                          outputs.map(({ type, label, count }) => (
-                            <Tag key={type}>{count > 1 ? `${label} ×${count}` : label}</Tag>
-                          ))
-                        )}
-                      </div>
-                    </td>
-                    <td>
-                      <div className={cx([style.tags, style.actions])}>
+                  <Fragment key={automationId}>
+                    <tr>
+                      <td>{automations[automationId].title}</td>
+                      <td>
+                        <Tag>{automations[automationId].filterRule}</Tag>
+                      </td>
+                      <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={() => setEditing(automation)}
+                          onClick={() => setAutomationFormData(automations[automationId])}
                        >
                          <IoPencil />
                        </IconButton>
                        <IconButton
                          variant='ghosted-destructive'
                          aria-label='Delete entry'
-                          onClick={() => setDeleteTarget(automation)}
+                          onClick={() => handleDelete(automationId)}
                        >
                          <IoTrash />
                        </IconButton>
-                      </div>
-                    </td>
-                  </tr>
+                      </Panel.InlineElements>
+                    </tr>
+                  </Fragment>
                );
              })}
+              {deleteError && (
+                <tr>
+                  <td colSpan={5}>
+                    <Panel.Error>{deleteError}</Panel.Error>
+                  </td>
+                </tr>
+              )}
            </tbody>
          </Panel.Table>
        </Panel.Section>
@@ -1,96 +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 are deleted along with it */
-  attachedTriggers: Trigger[];
-  onCancel: () => void;
-  onDeleted: () => void;
-}
-
-/**
- * Deleting takes the automation's global triggers with it, so say so before it happens rather
- * than leaving the user to discover it in the triggers list.
- *
- * An automation attached to an event is still refused by the server: that reference lives in
- * the rundown and removing it is an edit to the show, not to this panel.
- */
-export default function DeleteAutomationDialog({
-  automation,
-  attachedTriggers,
-  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>
-
-          {attachedTriggers.length > 0 && (
-            <Info type='warning'>
-              <Info.Title>
-                {attachedTriggers.length === 1
-                  ? 'Its trigger is deleted with it'
-                  : `Its ${attachedTriggers.length} triggers are deleted with it`}
-              </Info.Title>
-              <Info.Body>{attachedTriggers.map((trigger) => getLifecycleLabel(trigger.trigger)).join(', ')}</Info.Body>
-            </Info>
-          )}
-
-          {error && (
-            <Info type='error'>
-              <Info.Title>Could not delete this automation</Info.Title>
-              <Info.Body>{error}</Info.Body>
-              <Info.Footer>
-                An automation attached to a single event has 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>
-        </>
-      }
-    />
-  );
-}
@@ -1,34 +0,0 @@
-import type { AutomationDTO, HTTPOutput } from 'ontime-types';
-import type { UseFormRegister } from 'react-hook-form';
-
-import { startsWithHttp } from '../../../../common/utils/regex';
-import * as Panel from '../../panel-utils/PanelUtils';
-import type { OutputErrors } from './automationUtils';
-import TemplateInput from './template-input/TemplateInput';
-
-import style from './AutomationForm.module.scss';
-
-interface HttpOutputFormProps {
-  index: number;
-  output: HTTPOutput;
-  register: UseFormRegister<AutomationDTO>;
-  rowErrors?: OutputErrors;
-}
-
-export default function HttpOutputForm({ index, output, register, rowErrors }: HttpOutputFormProps) {
-  return (
-    <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>
-  );
-}
@@ -1,196 +0,0 @@
-/* ---------- step one: pick a recipe ---------- */
-
-.picker {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  color: $ui-white;
-}
-
-/** outside the scrolling list, so it stays put however many recipes there are */
-.search {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding-block: 0.5rem;
-}
-
-/**
- * Caps the list rather than fixing its height, so the dialog still shrinks to two results
- * when a search narrows it down.
- */
-.listViewport {
-  height: auto;
-  max-height: min(52vh, 30rem);
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-  // room for the overlay scrollbar beside the chevrons
-  padding-right: 0.5rem;
-}
-
-.searchIcon {
-  position: absolute;
-  left: 0.625rem;
-  color: $gray-400;
-  pointer-events: none;
-}
-
-.searchInput {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
-.searchClear {
-  position: absolute;
-  right: 0.25rem;
-}
-
-.group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding-top: 0.75rem;
-
-  &:first-child {
-    padding-top: 0;
-  }
-}
-
-.groupTitle {
-  margin: 0;
-  padding-inline: 0.125rem;
-  font-size: $aux-text-size;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-  color: $gray-400;
-}
-
-.recipe {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  width: 100%;
-  padding: 0.625rem 0.75rem;
-  text-align: left;
-  color: inherit;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: $component-border-radius-md;
-  cursor: pointer;
-
-  &:hover {
-    background-color: $white-3;
-    border-color: $white-10;
-  }
-
-  &:focus-visible {
-    outline: 1px solid $action-blue;
-    outline-offset: -1px;
-  }
-}
-
-.recipeText {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  flex: 1;
-  min-width: 0;
-}
-
-.recipeTitle {
-  font-weight: 600;
-}
-
-.recipeDescription {
-  font-size: $aux-text-size;
-  color: $secondary-text-gray;
-}
-
-.recipeTags {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
-}
-
-.chevron {
-  color: $gray-400;
-}
-
-/* ---------- step two: answer what the recipe cannot know ---------- */
-
-.setup {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  color: $ui-white;
-  padding-block: 0.25rem;
-}
-
-.setupDescription {
-  margin: 0;
-  color: $secondary-text-gray;
-}
-
-/** the two facts a recipe decides for you, stated before the fields you can change */
-.summary {
-  display: grid;
-  grid-template-columns: 5rem 1fr;
-  align-items: center;
-  gap: 0.5rem 0.75rem;
-  margin: 0;
-  padding: 0.75rem;
-  background-color: $black-10;
-  border: 1px solid $white-10;
-  border-radius: $component-border-radius-md;
-
-  dt {
-    font-size: $aux-text-size;
-    color: $label-gray;
-  }
-
-  dd {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin: 0;
-  }
-}
-
-/* three columns, so a recipe's small numeric fields fill a row instead of leaving a hole */
-.fields {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  align-items: start;
-  gap: 0.75rem;
-
-  @media (width < 40rem) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-/* an address or a sentence, which a third of a row cannot hold */
-.wide {
-  grid-column: 1 / -1;
-}
-
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  font-size: $aux-text-size;
-  color: $label-gray;
-}
-
-.hint {
-  color: $secondary-text-gray;
-}
-
-/* pushes the leading action away from the confirming ones */
-.apart {
-  margin-right: auto;
-}
@@ -1,309 +0,0 @@
-import type { Automation } from 'ontime-types';
-import { useMemo, useState, type KeyboardEvent } from 'react';
-import { IoAdd, IoArrowBack, IoChevronForward, IoClose, IoSearch } from 'react-icons/io5';
-
-import { addAutomation, addTrigger } 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 Input from '../../../../common/components/input/input/Input';
-import Modal from '../../../../common/components/modal/Modal';
-import ScrollArea from '../../../../common/components/scroll-area/ScrollArea';
-import Select from '../../../../common/components/select/Select';
-import Tag from '../../../../common/components/tag/Tag';
-import { getLifecycleLabel } from '../../../../common/constants/timerLifecycle';
-import { summariseOutputs } from '../../../../common/utils/automationOutputs';
-import { cx } from '../../../../common/utils/styleUtils';
-import { isOntimeCloud } from '../../../../externals';
-import * as Panel from '../../panel-utils/PanelUtils';
-import {
-  automationRecipes,
-  defaultValues,
-  needsTarget,
-  recipeCategoryLabels,
-  recipeCategoryOrder,
-  type AutomationRecipe,
-  type RecipeValues,
-} from './automationRecipes';
-import { makeTriggerTitle } from './automationUtils';
-
-import style from './NewAutomationDialog.module.scss';
-
-interface NewAutomationDialogProps {
-  onClose: () => void;
-  /** hands over to the full automation form for someone who wants to start empty */
-  onStartEmpty: () => void;
-  onCreated: (automation: Automation) => void;
-}
-
-/**
- * The single entry point for making an automation.
- *
- * Two steps in one dialog rather than two stacked ones: pick a recipe, then answer only
- * what that recipe cannot know — where your gear is, how long the timer runs. Everything
- * else the recipe already decided, which is the point of having recipes at all.
- */
-export default function NewAutomationDialog({ onClose, onStartEmpty, onCreated }: NewAutomationDialogProps) {
-  const [selected, setSelected] = useState<AutomationRecipe | null>(null);
-
-  return selected === null ? (
-    <RecipePicker onClose={onClose} onStartEmpty={onStartEmpty} onSelect={setSelected} />
-  ) : (
-    <RecipeSetup recipe={selected} onClose={onClose} onBack={() => setSelected(null)} onCreated={onCreated} />
-  );
-}
-
-/** matches on everything the user might type: the software, its protocol, the job it does */
-function matches(recipe: AutomationRecipe, query: string): boolean {
-  const haystack = [recipe.title, recipe.description, recipeCategoryLabels[recipe.category], ...(recipe.keywords ?? [])]
-    .join(' ')
-    .toLowerCase();
-  return query
-    .toLowerCase()
-    .split(/\s+/)
-    .every((term) => haystack.includes(term));
-}
-
-interface RecipePickerProps {
-  onClose: () => void;
-  onStartEmpty: () => void;
-  onSelect: (recipe: AutomationRecipe) => void;
-}
-
-function RecipePicker({ onClose, onStartEmpty, onSelect }: RecipePickerProps) {
-  const [query, setQuery] = useState('');
-
-  const available = useMemo(
-    () =>
-      // OSC is not available in the cloud service, offering those recipes there would be a lie
-      isOntimeCloud
-        ? automationRecipes.filter(
-            (recipe) => !recipe.build(defaultValues(recipe)).outputs.some((output) => output.type === 'osc'),
-          )
-        : automationRecipes,
-    [],
-  );
-
-  const trimmed = query.trim();
-  const results = trimmed ? available.filter((recipe) => matches(recipe, trimmed)) : available;
-
-  const handleSearchKey = (event: KeyboardEvent<HTMLInputElement>) => {
-    // the dialog is the only thing listening for escape, and losing it while clearing a
-    // search would be a bigger surprise than the search staying put
-    if (event.key === 'Escape' && trimmed.length > 0) {
-      event.stopPropagation();
-      setQuery('');
-      return;
-    }
-
-    if (event.key === 'Enter' && results.length > 0) {
-      onSelect(results[0]);
-    }
-  };
-
-  return (
-    <Modal
-      isOpen
-      onClose={onClose}
-      showBackdrop
-      showCloseButton
-      size='compact'
-      title='New automation'
-      bodyElements={
-        <div className={style.picker}>
-          <div className={style.search}>
-            <IoSearch className={style.searchIcon} />
-            <Input
-              value={query}
-              onChange={(event) => setQuery(event.target.value)}
-              onKeyDown={handleSearchKey}
-              placeholder='Search recipes, eg. QLab, OSC, message'
-              className={style.searchInput}
-              aria-label='Search recipes'
-              fluid
-              autoFocus
-            />
-            {trimmed.length > 0 && (
-              <IconButton
-                variant='ghosted-white'
-                size='small'
-                aria-label='Clear search'
-                className={style.searchClear}
-                onClick={() => setQuery('')}
-              >
-                <IoClose />
-              </IconButton>
-            )}
-          </div>
-
-          {results.length === 0 && (
-            <Panel.EmptyState
-              title='No recipe matches that'
-              description='Try the name of the software, or start from an empty automation.'
-            />
-          )}
-
-          <ScrollArea viewportClassName={style.listViewport} contentClassName={style.list}>
-            {recipeCategoryOrder.map((category) => {
-              const inCategory = results.filter((recipe) => recipe.category === category);
-              if (inCategory.length === 0) {
-                return null;
-              }
-
-              return (
-                <section key={category} className={style.group}>
-                  <h4 className={style.groupTitle}>{recipeCategoryLabels[category]}</h4>
-                  {inCategory.map((recipe) => (
-                    <button type='button' key={recipe.id} className={style.recipe} onClick={() => onSelect(recipe)}>
-                      <div className={style.recipeText}>
-                        <div className={style.recipeTitle}>{recipe.title}</div>
-                        <div className={style.recipeDescription}>{recipe.description}</div>
-                      </div>
-                      <div className={style.recipeTags}>
-                        {recipe.triggers.map((cycle) => (
-                          <Tag key={cycle}>{getLifecycleLabel(cycle)}</Tag>
-                        ))}
-                        <IoChevronForward className={style.chevron} />
-                      </div>
-                    </button>
-                  ))}
-                </section>
-              );
-            })}
-          </ScrollArea>
-        </div>
-      }
-      footerElements={
-        <>
-          <Button variant='ghosted-white' className={style.apart} onClick={onStartEmpty}>
-            Start from an empty automation
-          </Button>
-          <Button onClick={onClose}>Cancel</Button>
-        </>
-      }
-    />
-  );
-}
-
-interface RecipeSetupProps {
-  recipe: AutomationRecipe;
-  onClose: () => void;
-  onBack: () => void;
-  onCreated: (automation: Automation) => void;
-}
-
-function RecipeSetup({ recipe, onClose, onBack, onCreated }: RecipeSetupProps) {
-  const [values, setValues] = useState<RecipeValues>(() => defaultValues(recipe));
-  const [isCreating, setIsCreating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const automation = recipe.build(values);
-  const isComplete = recipe.params.every(({ name }) => values[name]?.trim());
-
-  const setValue = (name: string, value: string) => setValues((prev) => ({ ...prev, [name]: value }));
-
-  const handleCreate = async () => {
-    setError(null);
-    setIsCreating(true);
-    try {
-      // the same two steps the automation form takes when it saves a new automation:
-      // the server generates the id, so the automation has to exist before a trigger can point at it
-      const created = await addAutomation(automation);
-      for (const cycle of recipe.triggers) {
-        await addTrigger({
-          title: makeTriggerTitle(automation.title, cycle),
-          trigger: cycle,
-          automationId: created.id,
-        });
-      }
-      onCreated(created);
-    } catch (error) {
-      // a half created automation is visible in the list and flagged there, so say what
-      // happened and let the user finish it in the form rather than undoing their work
-      setError(maybeAxiosError(error));
-    } finally {
-      setIsCreating(false);
-    }
-  };
-
-  return (
-    <Modal
-      isOpen
-      onClose={onClose}
-      showBackdrop
-      showCloseButton
-      size='compact'
-      title={recipe.title}
-      bodyElements={
-        <div className={style.setup}>
-          <p className={style.setupDescription}>{recipe.description}</p>
-
-          <dl className={style.summary}>
-            <dt>Runs on</dt>
-            <dd>
-              {recipe.triggers.map((cycle) => (
-                <Tag key={cycle}>{getLifecycleLabel(cycle)}</Tag>
-              ))}
-            </dd>
-            <dt>Sends</dt>
-            <dd>
-              {summariseOutputs(automation.outputs).map(({ type, label, count }) => (
-                <Tag key={type}>{count > 1 ? `${label} ×${count}` : label}</Tag>
-              ))}
-            </dd>
-          </dl>
-
-          {recipe.params.length > 0 && (
-            <div className={style.fields}>
-              {recipe.params.map((param) => (
-                <label key={param.name} className={cx([style.field, param.wide && style.wide])}>
-                  {param.label}
-                  {param.type === 'choice' ? (
-                    <Select
-                      value={values[param.name]}
-                      onValueChange={(value: string | null) => {
-                        if (value === null) return;
-                        setValue(param.name, value);
-                      }}
-                      options={param.options ?? []}
-                      aria-label={param.label}
-                      fluid
-                    />
-                  ) : (
-                    <Input
-                      type={param.type === 'number' ? 'number' : 'text'}
-                      value={values[param.name]}
-                      onChange={(event) => setValue(param.name, event.target.value)}
-                      fluid
-                    />
-                  )}
-                  {param.hint && <span className={style.hint}>{param.hint}</span>}
-                </label>
-              ))}
-            </div>
-          )}
-
-          <Panel.Description>
-            {needsTarget(recipe)
-              ? 'Created as a normal automation. Nothing is sent until an event triggers it.'
-              : 'Created as a normal automation, which you can edit or delete like any other.'}
-          </Panel.Description>
-        </div>
-      }
-      footerElements={
-        <>
-          {error && <Panel.Error>{error}</Panel.Error>}
-          <Button variant='ghosted-white' className={style.apart} onClick={onBack} disabled={isCreating}>
-            <IoArrowBack /> All recipes
-          </Button>
-          <Button onClick={onClose} disabled={isCreating}>
-            Cancel
-          </Button>
-          <Button variant='primary' onClick={handleCreate} loading={isCreating} disabled={!isComplete}>
-            Create automation <IoAdd />
-          </Button>
-        </>
-      }
-    />
-  );
-}
@@ -1,11 +1,10 @@
 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';
 import Select from '../../../../common/components/select/Select';
 import * as Panel from '../../panel-utils/PanelUtils';
-import type { OutputErrors } from './automationUtils';
 import TemplateInput from './template-input/TemplateInput';

 import style from './AutomationForm.module.scss';
@@ -13,7 +12,13 @@ import style from './AutomationForm.module.scss';
 interface OntimeActionFormProps {
  index: number;
  register: UseFormRegister<AutomationDTO>;
-  rowErrors?: OutputErrors;
+  rowErrors?: {
+    action?: { message?: string };
+    time?: { message?: string };
+    text?: { message?: string };
+    visible?: { message?: string };
+    secondarySource?: { message?: string };
+  };
  value: OntimeAction['action'];
  watch: UseFormWatch<AutomationDTO>;
  setValue: UseFormSetValue<AutomationDTO>;
@@ -25,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) => {
@@ -35,7 +41,7 @@ export default function OntimeActionForm({
  };

  return (
-    <>
+    <div className={style.actionSection}>
      <label>
        Action
        <Select
@@ -89,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`)}
@@ -121,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`)}
@@ -163,6 +169,8 @@ export default function OntimeActionForm({
          </label>
        </>
      )}
-    </>
+
+      <div className={style.test}>{children}</div>
+    </div>
  );
 }
@@ -1,63 +0,0 @@
-import type { AutomationDTO, OSCOutput } from 'ontime-types';
-import type { UseFormRegister } from 'react-hook-form';
-
-import Input from '../../../../common/components/input/input/Input';
-import * as Panel from '../../panel-utils/PanelUtils';
-import type { OutputErrors } from './automationUtils';
-import TemplateInput from './template-input/TemplateInput';
-
-import style from './AutomationForm.module.scss';
-
-interface OscOutputFormProps {
-  index: number;
-  output: OSCOutput;
-  register: UseFormRegister<AutomationDTO>;
-  rowErrors?: OutputErrors;
-}
-
-export default function OscOutputForm({ index, output, register, rowErrors }: OscOutputFormProps) {
-  return (
-    <>
-      <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>
-    </>
-  );
-}
@@ -1,58 +0,0 @@
-import type { ReactNode } from 'react';
-import { IoCheckmark, IoTrash } from 'react-icons/io5';
-
-import Button from '../../../../common/components/buttons/Button';
-import IconButton from '../../../../common/components/buttons/IconButton';
-import Tag from '../../../../common/components/tag/Tag';
-import * as Panel from '../../panel-utils/PanelUtils';
-
-import style from './AutomationForm.module.scss';
-
-export type TestState = { status: 'sending' | 'ok' | 'error'; message?: string };
-
-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
- */
-export default 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>
-  );
-}
@@ -5,9 +5,9 @@ import { IoAdd } from 'react-icons/io5';
 import { deleteTrigger } from '../../../../common/api/automation';
 import { maybeAxiosError } from '../../../../common/api/utils';
 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';
@@ -20,13 +20,13 @@ type FormState = {
 interface TriggersListProps {
  triggers: Trigger[];
  automations: NormalisedAutomation;
+  enabledAutomations?: boolean;
  isLoading: boolean;
 }

-export default function TriggersList({ triggers, automations, isLoading }: 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 });
@@ -50,10 +50,6 @@ export default function TriggersList({ triggers, automations, isLoading }: Trigg
  };

  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;
@@ -70,28 +66,22 @@ export default function TriggersList({ triggers, automations, isLoading }: Trigg
          />
        )}
        <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.
+            </Info>
+          )}
          {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>
@@ -109,18 +99,14 @@ export default function TriggersList({ triggers, automations, isLoading }: Trigg
                  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>
                    )
                  }
                />
@@ -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}>
@@ -1,113 +0,0 @@
-import { isHTTPOutput, isOSCOutput, isOntimeAction, timerLifecycleValues } from 'ontime-types';
-
-import { automationRecipes, defaultValues, needsTarget, recipeCategoryOrder } from '../automationRecipes';
-import { operators } from '../automationUtils';
-
-/**
- * Recipes are shipped as constants but created through the same endpoint as a hand written
- * automation. These assertions stand in for the server side validation, so a recipe cannot
- * silently rot into something that 400s when the user presses create.
- */
-describe('automationRecipes', () => {
-  const built = automationRecipes.map((recipe) => ({ recipe, automation: recipe.build(defaultValues(recipe)) }));
-
-  it('has unique ids', () => {
-    const ids = automationRecipes.map(({ id }) => id);
-    expect(new Set(ids).size).toBe(ids.length);
-  });
-
-  it('only uses categories the picker knows how to render', () => {
-    for (const { recipe } of built) {
-      expect(recipeCategoryOrder).toContain(recipe.category);
-    }
-  });
-
-  it('binds every recipe to at least one valid lifecycle', () => {
-    for (const { recipe } of built) {
-      expect(recipe.triggers.length).toBeGreaterThan(0);
-      for (const cycle of recipe.triggers) {
-        expect(timerLifecycleValues).toContain(cycle);
-      }
-    }
-  });
-
-  it('builds a titled automation with something to send, from its own defaults', () => {
-    for (const { automation } of built) {
-      expect(automation.title).not.toBe('');
-      expect(automation.outputs.length).toBeGreaterThan(0);
-
-      for (const output of automation.outputs) {
-        expect(isOSCOutput(output) || isHTTPOutput(output) || isOntimeAction(output)).toBe(true);
-      }
-    }
-  });
-
-  it('gives every choice parameter options, and a default that is one of them', () => {
-    const choices = automationRecipes.flatMap(({ params }) => params.filter(({ type }) => type === 'choice'));
-    expect(choices.filter(({ options }) => !options?.length)).toEqual([]);
-    expect(choices.filter(({ options, defaultValue }) => !options?.some((o) => o.value === defaultValue))).toEqual([]);
-  });
-
-  it('reads every parameter it declares', () => {
-    // a param the builder ignores is a field the user fills in for nothing, and a typo in
-    // either half would put the literal 'undefined' inside a URL
-    for (const { recipe } of built) {
-      for (const param of recipe.params) {
-        // a choice can only take one of its own options, so probe with the last one
-        if (param.type === 'choice') {
-          const last = param.options?.at(-1)?.value ?? '';
-          expect(JSON.stringify(recipe.build({ ...defaultValues(recipe), [param.name]: last }))).toContain(last);
-          continue;
-        }
-        const marker = param.type === 'number' ? '4242' : 'ontime-probe';
-        const probed = { ...defaultValues(recipe), [param.name]: marker };
-        expect(JSON.stringify(recipe.build(probed))).toContain(marker);
-      }
-    }
-  });
-
-  it('only uses filter operators the server accepts', () => {
-    const allowed = operators.map(({ value }) => value);
-    for (const { automation } of built) {
-      for (const filter of automation.filters) {
-        expect(allowed).toContain(filter.operator);
-      }
-    }
-  });
-
-  it('defaults every external target to this machine', () => {
-    const outputs = built.flatMap(({ automation }) => automation.outputs);
-    const osc = outputs.filter(isOSCOutput);
-    const http = outputs.filter(isHTTPOutput);
-
-    // filtering rather than asserting in a branch, so a failure names the offending recipe
-    expect(osc.filter(({ targetIP }) => targetIP !== '127.0.0.1')).toEqual([]);
-    expect(osc.filter(({ targetPort }) => !Number.isFinite(targetPort))).toEqual([]);
-    expect(http.filter(({ url }) => !url.startsWith('http://127.0.0.1'))).toEqual([]);
-  });
-
-  it('flags the recipes that reach outside Ontime', () => {
-    for (const { recipe, automation } of built) {
-      const reachesOut = automation.outputs.some((output) => isOSCOutput(output) || isHTTPOutput(output));
-      expect(needsTarget(recipe)).toBe(reachesOut);
-    }
-  });
-
-  /** the outputs a recipe builds from the given answers, as plain JSON to assert against */
-  function buildWith(id: string, values: Record<string, string>) {
-    const recipe = automationRecipes.find((candidate) => candidate.id === id);
-    return JSON.stringify(recipe?.build(values).outputs);
-  }
-
-  it('tolerates a URL that already carries a query', () => {
-    expect(buildWith('webhook-event-title', { url: 'http://127.0.0.1:3000/now?source=ontime' })).toContain(
-      '/now?source=ontime&title=',
-    );
-  });
-
-  it('tolerates an address pasted with a trailing slash', () => {
-    expect(
-      buildWith('companion-press', { host: 'http://127.0.0.1:8888/', page: '1', row: '0', column: '0' }),
-    ).toContain('http://127.0.0.1:8888/api/location/1/0/0/press');
-  });
-});
@@ -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');
-  });
-});
@@ -1,282 +0,0 @@
-import type { AutomationDTO, TimerLifeCycle } from 'ontime-types';
-import { TimerLifeCycle as Cycle } from 'ontime-types';
-
-export type RecipeCategory = 'ontime' | 'playback' | 'video' | 'messaging';
-
-export const recipeCategoryLabels: Record<RecipeCategory, string> = {
-  ontime: 'Ontime automations',
-  playback: 'Playback and cue systems',
-  video: 'Video and streaming',
-  messaging: 'Webhooks and messaging',
-};
-
-/** presentation order, empty categories are not rendered */
-export const recipeCategoryOrder: RecipeCategory[] = ['ontime', 'playback', 'video', 'messaging'];
-
-export type RecipeParam = {
-  name: string;
-  label: string;
-  /** one line under the field, for anything the label cannot say */
-  hint?: string;
-  type?: 'text' | 'number' | 'choice';
-  /** required by 'choice', which renders a select rather than a free field */
-  options?: { value: string; label: string }[];
-  /** takes a whole row: addresses and free text read badly in a narrow column */
-  wide?: boolean;
-  /** every default points at this machine, so a recipe cannot reach a venue network unasked */
-  defaultValue: string;
-};
-
-export type RecipeValues = Record<string, string>;
-
-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;
-  /** extra search terms: other names for the software, its protocol, the job it does */
-  keywords?: string[];
-  /** what the dialog asks for. Empty when the recipe needs nothing */
-  params: RecipeParam[];
-  triggers: TimerLifeCycle[];
-  /** typed, so the compiler catches a recipe drifting from the automation schema */
-  build: (values: RecipeValues) => AutomationDTO;
-};
-
-const auxTimers = [
-  { value: '1', label: 'Aux timer 1' },
-  { value: '2', label: 'Aux timer 2' },
-  { value: '3', label: 'Aux timer 3' },
-];
-
-type AuxNumber = '1' | '2' | '3';
-
-/**
- * Action keys are a union the compiler checks against the automation schema, so the aux
- * number is resolved through maps rather than string interpolation. Anything unexpected
- * falls back to the first timer instead of building an action the server would reject.
- */
-function toAux(value: string): AuxNumber {
-  return value === '2' || value === '3' ? value : '1';
-}
-
-const auxSet = { 1: 'aux1-set', 2: 'aux2-set', 3: 'aux3-set' } as const;
-const auxStart = { 1: 'aux1-start', 2: 'aux2-start', 3: 'aux3-start' } as const;
-const auxStop = { 1: 'aux1-stop', 2: 'aux2-stop', 3: 'aux3-stop' } as const;
-const auxSource = { 1: 'aux1', 2: 'aux2', 3: 'aux3' } as const;
-
-/** a user pasting an address is as likely to include the trailing slash as not */
-function origin(value: string): string {
-  return value.trim().replace(/\/+$/, '');
-}
-
-/** the recipe cannot know whether the user's URL already carries a query */
-function withQuery(url: string, query: string): string {
-  const trimmed = url.trim();
-  return trimmed.includes('?') ? `${trimmed}&${query}` : `${trimmed}?${query}`;
-}
-
-export const automationRecipes: AutomationRecipe[] = [
-  {
-    id: 'ontime-aux-timer',
-    title: 'Run an aux timer with the event',
-    description: 'Sets an aux timer and starts it whenever an event starts.',
-    category: 'ontime',
-    keywords: ['countdown', 'stage timer', 'speaker'],
-    params: [
-      { name: 'aux', label: 'Which timer', type: 'choice', options: auxTimers, defaultValue: '1' },
-      { name: 'duration', label: 'Duration', hint: 'hh:mm:ss', defaultValue: '00:05:00' },
-    ],
-    triggers: [Cycle.onStart],
-    build: ({ aux, duration }) => ({
-      title: `Run Aux Timer ${toAux(aux)} with the event`,
-      filterRule: 'all',
-      filters: [],
-      outputs: [
-        { type: 'ontime', action: auxSet[toAux(aux)], time: duration.trim() },
-        { type: 'ontime', action: auxStart[toAux(aux)] },
-      ],
-    }),
-  },
-  {
-    id: 'ontime-aux-stop',
-    title: 'Stop the aux timer when the event ends',
-    description: 'Stops an aux timer on finish, so it does not keep running into the next event.',
-    category: 'ontime',
-    keywords: ['countdown', 'stage timer', 'reset'],
-    params: [{ name: 'aux', label: 'Which timer', type: 'choice', options: auxTimers, defaultValue: '1' }],
-    triggers: [Cycle.onFinish],
-    build: ({ aux }) => ({
-      title: `Stop Aux Timer ${toAux(aux)} on finish`,
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'ontime', action: auxStop[toAux(aux)] }],
-    }),
-  },
-  {
-    id: 'ontime-warn-stage',
-    title: 'Warn the stage when time runs low',
-    description: 'Shows a message on the stage timer as the running event enters its danger window.',
-    category: 'ontime',
-    keywords: ['message', 'danger', 'wrap up', 'presenter'],
-    params: [{ name: 'message', label: 'Message', wide: true, defaultValue: 'Please wrap up' }],
-    triggers: [Cycle.onDanger],
-    build: ({ message }) => ({
-      title: 'Warn the stage at danger',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'ontime', action: 'message-set', text: message, visible: true }],
-    }),
-  },
-  {
-    id: 'ontime-clear-message',
-    title: 'Hide the stage message on finish',
-    description: 'Clears the stage message once the event finishes. Pairs with the warning above.',
-    category: 'ontime',
-    keywords: ['message', 'clear', 'presenter'],
-    params: [],
-    triggers: [Cycle.onFinish],
-    build: () => ({
-      title: 'Hide the stage message on finish',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'ontime', action: 'message-set', text: '', visible: false }],
-    }),
-  },
-  {
-    id: 'ontime-secondary-message',
-    title: 'Show an aux timer beside the stage message',
-    description: 'Points the secondary field on the stage timer at an aux timer when an event loads.',
-    category: 'ontime',
-    keywords: ['message', 'secondary', 'stage', 'countdown'],
-    params: [{ name: 'aux', label: 'Which timer', type: 'choice', options: auxTimers, defaultValue: '1' }],
-    triggers: [Cycle.onLoad],
-    build: ({ aux }) => ({
-      title: `Show Aux Timer ${toAux(aux)} as the secondary message`,
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'ontime', action: 'message-secondary', secondarySource: auxSource[toAux(aux)] }],
-    }),
-  },
-  {
-    id: 'qlab-go',
-    title: 'QLab — fire the matching cue',
-    description: "Starts the QLab cue whose number matches the Ontime event's cue.",
-    category: 'playback',
-    keywords: ['osc', 'sound', 'audio', 'mac', 'figure 53'],
-    params: [
-      {
-        name: 'ip',
-        label: 'QLab computer',
-        hint: 'IP address of the machine running QLab',
-        wide: true,
-        defaultValue: '127.0.0.1',
-      },
-      { name: 'port', label: 'OSC port', type: 'number', hint: "QLab's default is 53000", defaultValue: '53000' },
-    ],
-    triggers: [Cycle.onStart],
-    build: ({ ip, port }) => ({
-      title: 'QLab GO on event start',
-      filterRule: 'all',
-      filters: [],
-      outputs: [
-        {
-          type: 'osc',
-          targetIP: ip.trim(),
-          targetPort: Number(port),
-          address: '/cue/{{eventNow.cue}}/start',
-          args: '',
-        },
-      ],
-    }),
-  },
-  {
-    id: 'companion-press',
-    title: 'Companion — press a button',
-    description: 'Presses a Stream Deck button through the Companion HTTP API when an event starts.',
-    category: 'playback',
-    keywords: ['stream deck', 'bitfocus', 'obs', 'http', 'elgato'],
-    params: [
-      {
-        name: 'host',
-        label: 'Companion address',
-        hint: 'Where the Companion HTTP API is listening',
-        wide: true,
-        defaultValue: 'http://127.0.0.1:8888',
-      },
-      { name: 'page', label: 'Page', type: 'number', defaultValue: '1' },
-      { name: 'row', label: 'Row', type: 'number', defaultValue: '0' },
-      { name: 'column', label: 'Column', type: 'number', defaultValue: '0' },
-    ],
-    triggers: [Cycle.onStart],
-    build: ({ host, page, row, column }) => ({
-      title: 'Companion button press',
-      filterRule: 'all',
-      filters: [],
-      // Companion HTTP API: /api/location/<page>/<row>/<column>/press
-      outputs: [{ type: 'http', url: `${origin(host)}/api/location/${page}/${row}/${column}/press` }],
-    }),
-  },
-  {
-    id: 'vmix-overlay-warning',
-    title: 'vMix — show an overlay on warning',
-    description: 'Triggers a vMix overlay through the web controller when the timer enters its warning window.',
-    category: 'video',
-    keywords: ['streaming', 'http', 'lower third', 'graphics'],
-    params: [
-      {
-        name: 'host',
-        label: 'vMix address',
-        hint: 'The vMix web controller',
-        wide: true,
-        defaultValue: 'http://127.0.0.1:8088',
-      },
-      { name: 'overlay', label: 'Overlay number', type: 'number', defaultValue: '1' },
-    ],
-    triggers: [Cycle.onWarning],
-    build: ({ host, overlay }) => ({
-      title: 'vMix overlay on warning',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'http', url: `${origin(host)}/api/?Function=OverlayInput${overlay}In` }],
-    }),
-  },
-  {
-    id: 'webhook-event-title',
-    title: 'Webhook — post the running event',
-    description: 'Calls any URL with the running event title, as a template string you can edit afterwards.',
-    category: 'messaging',
-    keywords: ['http', 'rest', 'api', 'integration', 'slack'],
-    params: [
-      {
-        name: 'url',
-        label: 'URL',
-        hint: 'The event title is added as a title parameter',
-        wide: true,
-        defaultValue: 'http://127.0.0.1:3000/now',
-      },
-    ],
-    triggers: [Cycle.onStart],
-    build: ({ url }) => ({
-      title: 'Webhook with the current event',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'http', url: withQuery(url, 'title={{eventNow.title}}') }],
-    }),
-  },
-];
-
-/** the values the dialog starts with, so a recipe can be created without touching a field */
-export function defaultValues(recipe: AutomationRecipe): RecipeValues {
-  return Object.fromEntries(recipe.params.map(({ name, defaultValue }) => [name, defaultValue]));
-}
-
-/**
- * A recipe that only sends Ontime actions works the moment it is created.
- * Anything else points at software we cannot locate for the user.
- */
-export function needsTarget(recipe: AutomationRecipe): boolean {
-  return !recipe.build(defaultValues(recipe)).outputs.every((output) => output.type === 'ontime');
-}
@@ -1,20 +1,4 @@
-import { Automation, AutomationDTO, AutomationFilter, CustomFields, TimerLifeCycle, Trigger } from 'ontime-types';
-
-import { getLifecycleLabel, lifecycleLabels } from '../../../../common/constants/timerLifecycle';
-
-/**
- * Names a trigger created from an automation's lifecycle picker.
- * Shared so a trigger made by the form and one made by a recipe read the same in the list.
- */
-export function makeTriggerTitle(automationTitle: string, cycle: TimerLifeCycle): string {
-  return `${automationTitle} — ${getLifecycleLabel(cycle)}`;
-}
-
-/**
- * Outputs are a union, so react-hook-form cannot resolve a field's error by name.
- * Every output card knows which fields it registered, this just makes them reachable.
- */
-export type OutputErrors = Partial<Record<string, { message?: string }>>;
+import { Automation, AutomationDTO, CustomFields, TimerLifeCycle, Trigger } from 'ontime-types';

 type CycleLabel = {
  id: number;
@@ -23,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' },
 ];

 /**
@@ -113,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;
-}
@@ -0,0 +1,7 @@
+th.over {
+  color: $playback-over;
+}
+
+th.under {
+  color: $playback-under;
+}
@@ -1,72 +1,103 @@
 import { useMemo } from 'react';
-import { IoDownloadOutline, IoTrashBin } from 'react-icons/io5';
+import { IoTrashBin } from 'react-icons/io5';

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

 export default function ReportSettings() {
-  const { report } = useReport();
-  const { eventReports, rundown, show } = report;
-
-  const { combinedReport, groups, summary } = useMemo(() => {
-    const entries = rundown?.entries ?? {};
-    return {
-      combinedReport: rundown ? getCombinedReport(eventReports, entries, rundown.flatOrder) : [],
-      groups: rundown ? getGroupReports(eventReports, entries, rundown.order) : [],
-      summary: getRunSummary(eventReports, entries, rundown?.flatOrder ?? []),
-    };
-  }, [eventReports, rundown]);
-
-  const hasReport = rundown !== null && Object.keys(eventReports).length > 0;
-  const downloadCSV = () => {
-    if (!hasReport) return;
+  const { data: reportData } = useReport();
+  const { data } = useLoadedRundown();

+  const clearReport = async () => await deleteAllReport();
+  const downloadCSV = (combinedReport: CombinedReport[]) => {
+    if (!combinedReport) {
+      return;
+    }
    const csv = makeReportCSV(combinedReport);
    const blob = createBlob(csv, 'text/csv;charset=utf-8;');
    downloadBlob(blob, 'ontime-report.csv');
  };

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

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

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

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

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

  const combinedReport: CombinedReport[] = [];

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

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

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

  return combinedReport;
 }

-function getOffset(actual: MaybeNumber, scheduled: number): MaybeNumber {
-  return actual === null ? null : actual - scheduled;
-}
-
-export function getShowOffsets(show: ShowReport): ShowOffsets {
-  const { plannedDuration, actualDuration } = show;
-  return {
-    startOffset: getWallClockOffset(show.plannedStart, show.actualStart),
-    endOffset: getWallClockOffset(show.plannedEnd, show.actualEnd),
-    durationOffset: plannedDuration === null || actualDuration === null ? null : actualDuration - plannedDuration,
-  };
-}
-
-function getWallClockOffset(planned: MaybeNumber, actual: MaybeNumber): MaybeNumber {
-  if (planned === null || actual === null) return null;
-
-  const offset = actual - planned;
-  if (offset < -dayInMs / 2) return offset + dayInMs;
-  if (offset > dayInMs / 2) return offset - dayInMs;
-  return offset;
-}
-
-export function getGroupReports(report: OntimeReport, entries: RundownEntries, order: EntryId[]): GroupReport[] {
-  const groups: GroupReport[] = [];
-  for (const id of order) {
-    const group = entries[id];
-    if (group && isOntimeGroup(group)) groups.push(getGroupReport(group, report, entries));
-  }
-  return groups;
-}
-
-function getGroupReport(group: OntimeGroup, report: OntimeReport, entries: RundownEntries): GroupReport {
-  let scheduledDuration = 0;
-  let eventsPlanned = 0;
-  let eventsRun = 0;
-  let firstStart = Number.POSITIVE_INFINITY;
-  let lastEnd = Number.NEGATIVE_INFINITY;
-  let actualStart: MaybeNumber = null;
-  let actualEnd: MaybeNumber = null;
-
-  for (const childId of group.entries) {
-    const child = entries[childId];
-    if (!child || !isOntimeEvent(child) || child.skip) continue;
-
-    eventsPlanned += 1;
-    const reported = report[childId];
-    scheduledDuration += reported?.scheduledDuration ?? child.duration;
-
-    const variance = getEventVariance(reported);
-    if (variance.actualDuration === null || !reported) continue;
-
-    eventsRun += 1;
-    const start = getReportTimePosition(reported.startedAt, reported.startedAtDay);
-    const end = getReportTimePosition(reported.endedAt, reported.endedAtDay);
-    if (start !== null && start < firstStart) {
-      firstStart = start;
-      actualStart = reported.startedAt;
-    }
-    if (end !== null && end > lastEnd) {
-      lastEnd = end;
-      actualEnd = reported.endedAt;
-    }
-  }
-
-  const elapsed = actualStart === null || actualEnd === null ? null : lastEnd - firstStart;
-  const measuredAgainst = group.targetDuration ?? scheduledDuration;
-  const isComplete = eventsRun > 0 && eventsRun === eventsPlanned;
-
-  return {
-    id: group.id,
-    title: group.title,
-    colour: group.colour,
-    targetDuration: group.targetDuration,
-    scheduledDuration,
-    actualStart,
-    actualEnd,
-    elapsed,
-    variance: elapsed === null || !isComplete ? null : elapsed - measuredAgainst,
-    eventsRun,
-    eventsPlanned,
-  };
-}
-
-export function getRunSummary(report: OntimeReport, entries: RundownEntries, order: EntryId[]): RunSummary {
-  const eventsPlanned = order.filter((id) => {
-    const entry = entries[id];
-    return entry && isOntimeEvent(entry) && !entry.skip;
-  }).length;
-  const eventsRun = Object.values(report).filter((entry) => getEventVariance(entry).status !== 'not-run').length;
-  return { eventsRun, eventsPlanned };
-}
+const csvHeader = ['Index', 'Title', 'Cue', 'Scheduled Start', 'Actual Start', 'Scheduled End', 'Actual End'];

 /**
- * Signed offset, eg "+4m12s" / "-1m", following Ontime's convention that
- * positive means behind schedule.
- */
-export function formatOffset(value: MaybeNumber): string {
-  if (value === null) return enDash;
-  if (Math.abs(value) < MILLIS_PER_SECOND) return 'On time';
-  return `${value > 0 ? '+' : '-'}${formatDuration(Math.abs(value), false)}`;
-}
-
-export function offsetTone(value: MaybeNumber): 'over' | 'under' | 'none' {
-  if (value === null || Math.abs(value) < MILLIS_PER_SECOND) return 'none';
-  return value > 0 ? 'over' : 'under';
-}
-
-function formatCsvTime(value: MaybeNumber): string {
-  return value === null ? '' : formatTime(value);
-}
-
-const csvHeader = ['Index', 'Group', 'Cue', 'Title', 'Scheduled Start', 'Actual Start', 'Scheduled End', 'Actual End'];
-
-/**
- * Transforms a CombinedReport into a CSV string.
- *
- * Exported as one row per event with its group named, rather than with
- * rollups baked in, so it stays the dataset a report is built from.
+ * Transforms a CombinedReport into a CSV string
 */
 export function makeReportCSV(combinedReport: CombinedReport[]) {
-  const csv = combinedReport.map((entry) => [
-    String(entry.index),
-    entry.groupTitle,
-    entry.cue,
-    entry.title,
-    formatTime(entry.scheduledStart),
-    formatCsvTime(entry.actualStart),
-    formatTime(entry.scheduledEnd),
-    formatCsvTime(entry.actualEnd),
-  ]);
+  const csv: string[][] = [];
+  csv.push(csvHeader);

-  return makeCSVFromArrayOfArrays([csvHeader, ...csv]);
+  for (const entry of combinedReport) {
+    csv.push([
+      String(entry.index),
+      entry.title,
+      entry.cue,
+      formatTime(entry.scheduledStart),
+      formatTime(entry.actualStart),
+      formatTime(entry.scheduledEnd),
+      formatTime(entry.actualEnd),
+    ]);
+  }
+
+  return makeCSVFromArrayOfArrays(csv);
 }
@@ -19,8 +19,8 @@ import Dialog from '../../../../common/components/dialog/Dialog';
 import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import Tag from '../../../../common/components/tag/Tag';
 import { useMutateProjectRundowns, useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
+import { useDirectLinkToBackgroundEdit } from '../../../../common/hooks/useRundownSelection';
 import { cx } from '../../../../common/utils/styleUtils';
-import { useDirectLinkToBackgroundEdit } from '../../../../views/cuesheet/useCuesheetRundownSelection';
 import * as Panel from '../../panel-utils/PanelUtils';
 import RundownRenameForm from './composite/RundownRenameForm';
 import { ManageRundownForm } from './ManageRundownForm';
@@ -24,7 +24,7 @@ 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 useRundown from '../../../../../common/hooks-query/useRundown';
+import { useLoadedRundown } from '../../../../../common/hooks-query/useLoadedRundown';
 import { removeFileExtension, validateExcelImport } from '../../../../../common/utils/uploadUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 import GSheetSetup from './GSheetSetup';
@@ -59,7 +59,7 @@ export default function SourcesPanel() {
  const [activeSource, setActiveSource] = useState<ActiveSource | null>(null);
  const [completedRundownTitle, setCompletedRundownTitle] = useState('');

-  const { data: currentRundown } = useRundown();
+  const { data: currentRundown } = useLoadedRundown();
  const { applyImport } = useSpreadsheetImport();
  const navigate = useNavigate();

@@ -40,7 +40,7 @@ export default function ShutdownPanel() {
          {!isOntimeCloud && (
            <Panel.Section>
              <Button variant='destructive' onClick={handler.open} disabled={!canShutdown}>
-                Shutdown Ontime
+                Shutdown ontime
              </Button>
              {!canShutdown && <Panel.Description>Only available from the machine running Ontime.</Panel.Description>}
            </Panel.Section>
@@ -84,25 +84,11 @@ const staticOptions = [
      {
        id: 'automation__automations',
        label: 'Manage automations',
-        keywords: [
-          'osc',
-          'http',
-          'webhook',
-          'integration',
-          'api',
-          'output',
-          'action',
-          'recipe',
-          'example',
-          'preset',
-          'qlab',
-          'vmix',
-          'companion',
-        ],
+        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'],
      },
    ],
@@ -18,12 +18,6 @@
  padding-bottom: 95vh;
 }

-.groupSection {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
 .editPrompt {
  position: fixed;
  z-index: $zindex-dialog;
@@ -1,5 +1,5 @@
 import { OntimeView, isOntimeEvent, isOntimeGroup } from 'ontime-types';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';

 import EmptyFill from '../../common/components/state/EmptyFill';
 import EmptyPage from '../../common/components/state/EmptyPage';
@@ -25,10 +25,7 @@ import { OperatorData, useOperatorData } from './useOperatorData';

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

-/** Keeps the running event clear of the list edge when no group header is pinned above it */
-const edgeOffset = 50;
-/** How far the running event may drift from where we placed it before we stop following */
-const followTolerance = 50;
+const selectedOffset = 50;

 export default function OperatorLoader() {
  const { data, status } = useOperatorData();
@@ -57,20 +54,11 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
  const [lockAutoScroll, setLockAutoScroll] = useState(false);
  const selectedRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
-  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
-
-  // The header height varies with the viewport, so measure it at scroll time.
-  const getTopOffset = useCallback(() => {
-    const header = stickyHeaderRef.current;
-    // Sit right under the pinned header, so it covers the previous event instead of half of it.
-    return header ? header.offsetHeight + 2 : edgeOffset;
-  }, []);
-
  const scrollToComponent = useFollowComponent({
    followRef: selectedRef,
    scrollRef,
    doFollow: !lockAutoScroll,
-    getTopOffset,
+    topOffset: selectedOffset,
    followTrigger: selectedEventId,
  });

@@ -94,16 +82,15 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator

  // prevent considering automated scrolls as user scrolls
  const handleUserScroll = () => {
-    if (!selectedRef.current || !scrollRef.current) {
-      return;
+    if (selectedRef?.current && scrollRef?.current) {
+      const selectedRect = selectedRef.current.getBoundingClientRect();
+      const scrollerRect = scrollRef.current.getBoundingClientRect();
+      if (selectedRect && scrollerRect) {
+        const distanceFromTop = selectedRect.top - scrollerRect.top;
+        const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > selectedOffset;
+        setLockAutoScroll(hasScrolledOutOfThreshold);
+      }
    }
-
-    const selectedRect = selectedRef.current.getBoundingClientRect();
-    const scrollerRect = scrollRef.current.getBoundingClientRect();
-    // Measure the drift from where an automated scroll would place the event.
-    const distanceFromTop = selectedRect.top - scrollerRect.top - getTopOffset();
-    const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > followTolerance;
-    setLockAutoScroll(hasScrolledOutOfThreshold);
  };
  const throttledHandleScroll = throttle(handleUserScroll, 1000);

@@ -199,9 +186,9 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
              }

              return (
-                <div className={style.groupSection} key={entry.id}>
+                <Fragment key={entry.id}>
                  <OperatorGroup
-                    ref={isCurrentParent ? stickyHeaderRef : undefined}
+                    key={entry.id}
                    title={entry.title}
                    colour={entry.colour}
                    count={entry.entries.length}
@@ -252,7 +239,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
                      />
                    );
                  })}
-                </div>
+                </Fragment>
              );
            }
            return null;
@@ -1,20 +1,13 @@
 .group {
  width: 100%;
-  /* Padding is kept under the min-height so a single line fits without the list having to shrink the header,
-     while a taller title still grows the row. */
  min-height: 2.5rem;
-  padding: 0.25rem 0.75rem;
+  padding: 0.4rem 0.75rem;
  border-left: 0.35rem solid var(--group-colour, $gray-500);
  background-color: $gray-1350;
  background: color-mix(in srgb, transparent 88%, var(--group-colour, $gray-500) 12%);
  font-size: 1.25rem;
  font-weight: 600;

-  position: sticky;
-  /* Cover the list padding so rows cannot scroll above the header. */
-  top: -0.25rem;
-  z-index: 1;
-
  display: flex;
  align-items: center;
  gap: 1rem;
@@ -1,4 +1,4 @@
-import { type CSSProperties, type Ref, memo } from 'react';
+import { CSSProperties, memo } from 'react';

 import { getAccessibleColour } from '../../../common/utils/styleUtils';
 import { formatDuration } from '../../../common/utils/time';
@@ -10,16 +10,15 @@ interface OperatorGroup {
  colour: string;
  count: number;
  duration: number;
-  ref?: Ref<HTMLDivElement>;
 }

 export default memo(OperatorGroup);
-function OperatorGroup({ title, colour, count, duration, ref }: OperatorGroup) {
+function OperatorGroup({ title, colour, count, duration }: OperatorGroup) {
  const groupColour = colour || '#929292';
  const groupColours = getAccessibleColour(groupColour);

  return (
-    <div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties} ref={ref}>
+    <div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties}>
      <span className={style.title}>{title}</span>
      <span className={style.meta}>
        <span>{`${count} ${count === 1 ? 'event' : 'events'}`}</span>
@@ -1,7 +1,7 @@
 import { CustomFields, Rundown, Settings } from 'ontime-types';

 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
+import { useLoadedRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { RundownMetadataObject } from '../../common/utils/rundownMetadata';
 import { ViewData, aggregateQueryStatus } from '../../views/utils/viewLoader.utils';
@@ -14,7 +14,7 @@ export interface OperatorData {
 }

 export function useOperatorData(): ViewData<OperatorData> {
-  const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata();
+  const { data: rundown, rundownMetadata, status: rundownStatus } = useLoadedRundownWithMetadata();
  const { data: customFields, status: customFieldStatus } = useCustomFields();
  const { data: settings, status: settingsStatus } = useSettings();

@@ -12,7 +12,7 @@ import {
 } from 'react-icons/tb';

 import Tooltip from '../../../common/components/tooltip/Tooltip';
-import { useEntry } from '../../../common/hooks-query/useRundown';
+import { useLoadedEntry } from '../../../common/hooks-query/useLoadedRundown';
 import { useAutoTickingClock } from '../../../common/hooks/useAutoTickingClock';
 import {
  useCurrentGroupId,
@@ -210,7 +210,7 @@ export function MetadataTimes() {
 function GroupTimes() {
  const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback, phase } = useGroupTimerOverView();
  const currentGroupId = useCurrentGroupId();
-  const group = useEntry(currentGroupId) as OntimeGroup | null;
+  const group = useLoadedEntry(currentGroupId) as OntimeGroup | null;

  const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);

@@ -266,7 +266,7 @@ function GroupTimes() {
 function FlagTimes() {
  const { clock, mode, actualStart, plannedStart, playback, currentDay, phase } = useFlagTimerOverView();
  const { id, expectedStart } = useNextFlag();
-  const entry = useEntry(id) as OntimeEvent | null;
+  const entry = useLoadedEntry(id) as OntimeEvent | null;

  const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);

@@ -1,12 +1,12 @@
+import { useLoadedRundownAuxData } from '../../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../../common/hooks-query/useProjectData';
-import { useRundownAuxData } from '../../../common/hooks-query/useRundown';

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

 export default function TitleOverview() {
  'use memo';
  const { data: projectData } = useProjectData();
-  const { data: rundownData } = useRundownAuxData();
+  const { data: rundownData } = useLoadedRundownAuxData();

  const projectTitle = projectData.title.trim();
  const rundownTitle = rundownData.title.trim();
@@ -67,7 +67,11 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
  const { getIsCollapsed, collapseGroup, expandGroup } = useCollapsedGroups(id);

  const entryActions = useEntryActionsContext();
-  const setEntryCopyId = useEntryCopy((state) => state.setEntryCopyId);
+  const setEntryCopy = useEntryCopy((state) => state.setEntryCopyId);
+  const setEntryCopyId = useCallback(
+    (entryId: EntryId | null, mode?: 'copy' | 'cut') => setEntryCopy(entryId, id, mode),
+    [setEntryCopy, id],
+  );

  // cursor
  const { editorMode } = useEditorFollowMode();
@@ -5,9 +5,6 @@ import * as Editor from '../../common/components/editor-utils/EditorUtils';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
-import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
-import { useLoadedRundownSource } from '../../common/hooks-query/useScopedRundown';
-import { useEntryActions } from '../../common/hooks/useEntryAction';
 import { useIsSmallDevice } from '../../common/hooks/useIsSmallDevice';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
@@ -39,28 +36,25 @@ function RundownExport() {
    defaultValue: RundownViewMode.List,
  });
  const isSmallDevice = useIsSmallDevice();
-  const entryActions = useEntryActions();

  if (isSmallDevice && isExtracted) {
    return (
-      <EntryActionsProvider actions={entryActions}>
-        <ProtectRoute permission='editor'>
-          <div
-            className={cx([style.rundownExport, style.extracted])}
-            data-target='small-device'
-            data-testid='panel-rundown'
-          >
-            <FinderPlacement />
-            <ViewNavigationMenu suppressSettings />
-            <div className={style.rundown}>
-              <ErrorBoundary>
-                <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
-                <RundownContextMenu />
-              </ErrorBoundary>
-            </div>
+      <ProtectRoute permission='editor'>
+        <div
+          className={cx([style.rundownExport, style.extracted])}
+          data-target='small-device'
+          data-testid='panel-rundown'
+        >
+          <FinderPlacement />
+          <ViewNavigationMenu suppressSettings />
+          <div className={style.rundown}>
+            <ErrorBoundary>
+              <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
+              <RundownContextMenu />
+            </ErrorBoundary>
          </div>
-        </ProtectRoute>
-      </EntryActionsProvider>
+        </div>
+      </ProtectRoute>
    );
  }

@@ -70,30 +64,28 @@ function RundownExport() {
    viewMode === RundownViewMode.Table;

  return (
-    <EntryActionsProvider actions={entryActions}>
-      <ProtectRoute permission='editor'>
-        <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
-          <FinderPlacement />
-          {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
-          <div className={style.rundown}>
-            <Editor.Panel className={style.list}>
+    <ProtectRoute permission='editor'>
+      <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
+        <FinderPlacement />
+        {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
+        <div className={style.rundown}>
+          <Editor.Panel className={style.list}>
+            <ErrorBoundary>
+              {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
+              <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
+              <RundownContextMenu />
+            </ErrorBoundary>
+          </Editor.Panel>
+          {!hideSideBar && (
+            <div className={style.side}>
              <ErrorBoundary>
-                {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
-                <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
-                <RundownContextMenu />
+                <RundownEntryEditor />
              </ErrorBoundary>
-            </Editor.Panel>
-            {!hideSideBar && (
-              <div className={style.side}>
-                <ErrorBoundary>
-                  <RundownEntryEditor />
-                </ErrorBoundary>
-              </div>
-            )}
-          </div>
+            </div>
+          )}
        </div>
-      </ProtectRoute>
-    </EntryActionsProvider>
+      </div>
+    </ProtectRoute>
  );
 }

@@ -105,8 +97,6 @@ interface RundownRootProps {
 }

 function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: RundownRootProps) {
-  const source = useLoadedRundownSource();
-
  return (
    <div className={style.rundownRoot}>
      {isSmallDevice ? (
@@ -115,7 +105,7 @@ function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: Rund
        <RundownHeader isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
      )}
      {viewMode === RundownViewMode.List ? <RundownList /> : <RundownTable />}
-      {viewMode === RundownViewMode.Table && <EntryEditModal rundown={source.rundown} />}
+      {viewMode === RundownViewMode.Table && <EntryEditModal />}
      <RenumberCuesDialog />
    </div>
  );
@@ -1,15 +1,22 @@
+import { Playback } from 'ontime-types';
 import { memo } from 'react';

 import EmptyFill from '../../common/components/state/EmptyFill';
+import { useRundownScope } from '../../common/context/RundownScopeContext';
 import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import { useRundownEditor } from '../../common/hooks/useSocket';
 import { useTranslation } from '../../translation/TranslationProvider';
 import Rundown from './Rundown';

+/** a rundown which is not loaded has no playback to follow */
+const idleFeatureData = { playback: Playback.Stop, selectedEventId: null, nextEventId: null };
+
 export default memo(RundownList);
 function RundownList() {
+  const { isLoaded } = useRundownScope();
  const { data, status, rundownMetadata } = useRundownWithMetadata();
-  const featureData = useRundownEditor();
+  const runtimeFeatureData = useRundownEditor();
+  const featureData = isLoaded ? runtimeFeatureData : idleFeatureData;
  const { getLocalizedString } = useTranslation();

  // avoid showing the editable empty state before we know whether the rundown is actually empty
@@ -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;
@@ -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>
@@ -2,6 +2,7 @@ import { type EntryId, type OntimeEntry, type Rundown, SupportedEntry } from 'on
 import { getNextGroupNormal, getNextNormal, getPreviousGroupNormal, getPreviousNormal } from 'ontime-utils';
 import { useCallback } from 'react';

+import { useRundownScope } from '../../../common/context/RundownScopeContext';
 import type { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
 import { SelectionMode } from '../useEventSelection';
@@ -26,6 +27,7 @@ export function useRundownCommands({
  selectEntry: applySelection,
  handleCollapseGroup,
 }: UseRundownCommandsOptions) {
+  const { rundownId } = useRundownScope();
  const { addEntry, clone, deleteEntry, move, reorderEntry } = entryActions;

  const deleteAtCursor = useCallback(
@@ -43,12 +45,17 @@ export function useRundownCommands({
  const insertCopyAtId = useCallback(
    (atId: EntryId | null, above = false) => {
      // lazily get the value from the store
-      const { entryCopyId, entryCopyMode, setEntryCopyId } = useEntryCopy.getState();
+      const { entryCopyId, entryCopyRundownId, entryCopyMode, setEntryCopyId } = useEntryCopy.getState();
      if (entryCopyId === null || !entries[entryCopyId]) {
        // we cant clone without selection
        return;
      }

+      // pasting into a different rundown needs the entry payload, the server clones within a rundown
+      if (entryCopyRundownId !== null && entryCopyRundownId !== rundownId) {
+        return;
+      }
+
      let normalisedAtId = atId;

      const elementToCopy = entries[entryCopyId];
@@ -65,7 +72,7 @@ export function useRundownCommands({
            return;
          }
          reorderEntry(entryCopyId, firstId, 'before')
-            .then(() => setEntryCopyId(null))
+            .then(() => setEntryCopyId(null, null))
            .catch(() => {});
          return;
        }
@@ -74,7 +81,7 @@ export function useRundownCommands({
        }
        const placement = above ? 'before' : 'after';
        reorderEntry(entryCopyId, normalisedAtId, placement)
-          .then(() => setEntryCopyId(null))
+          .then(() => setEntryCopyId(null, null))
          .catch(() => {});
        return;
      }
@@ -85,7 +92,7 @@ export function useRundownCommands({
        before: above ? (normalisedAtId ?? undefined) : undefined,
      });
    },
-    [entries, flatOrder, clone, reorderEntry],
+    [entries, flatOrder, clone, reorderEntry, rundownId],
  );

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

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

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

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

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

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

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

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

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

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

  if (!value) {
    return null;
@@ -1,9 +1,6 @@
 import { memo, useEffect, useMemo } from 'react';

-import { EntryActionsProvider } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
-import { useLoadedRundownSource } from '../../../common/hooks-query/useScopedRundown';
-import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import CuesheetDnd from '../../../views/cuesheet/cuesheet-dnd/CuesheetDnd';
 import CuesheetTable from '../../../views/cuesheet/cuesheet-table/CuesheetTable';
 import { useCuesheetPermissions } from '../../../views/cuesheet/useTablePermissions';
@@ -15,8 +12,6 @@ function RundownTable() {
  const { data: customFields } = useCustomFields();
  const setPermissions = useCuesheetPermissions((state) => state.setPermissions);
  const { editorMode } = useEditorFollowMode();
-  const source = useLoadedRundownSource();
-  const actions = useEntryActions();

  // Editor always has full permissions
  useEffect(() => {
@@ -32,10 +27,8 @@ function RundownTable() {
  const columns = useMemo(() => makeRundownColumns(customFields), [customFields]);

  return (
-    <EntryActionsProvider actions={actions}>
-      <CuesheetDnd columns={columns} tableRoot='editor'>
-        <CuesheetTable columns={columns} source={source} cuesheetMode={editorMode} tableRoot='editor' />
-      </CuesheetDnd>
-    </EntryActionsProvider>
+    <CuesheetDnd columns={columns} tableRoot='editor'>
+      <CuesheetTable columns={columns} cuesheetMode={editorMode} tableRoot='editor' />
+    </CuesheetDnd>
  );
 }
@@ -1,155 +1,15 @@
-import { EntryId, MaybeNumber, ProjectRundownsList, Rundown, isOntimeEvent } from 'ontime-types';
-import { MouseEvent } from 'react';
-import { create } from 'zustand';
+import { useStore } from 'zustand';

-import { PROJECT_RUNDOWNS, getRundownQueryKey } from '../../common/api/constants';
-import { ontimeQueryClient } from '../../common/queryClient';
-import { isMacOS } from '../../common/utils/deviceUtils';
+import { useRundownScope } from '../../common/context/RundownScopeContext';
+import type { EventSelectionStore } from '../../common/stores/eventSelectionStore';

-export type SelectionMode = 'shift' | 'click' | 'ctrl';
-
-interface EventSelectionStore {
-  selectedEvents: Set<EntryId>;
-  anchoredIndex: MaybeNumber;
-  cursor: EntryId | null;
-  entryMode: 'event' | 'single' | null;
-  scrollHandler: ((id: EntryId) => void) | null;
-  setSingleEntrySelection: (selectionArgs: { id: EntryId }) => void;
-  setSelectedEvents: (selectionArgs: { id: EntryId; index: number; selectMode: SelectionMode }) => void;
-  clearSelectedEvents: () => void;
-  clearMultiSelect: () => void;
-  unselect: (id: EntryId) => void;
-  setScrollHandler: (handler: ((id: EntryId) => void) | null) => void;
-  scrollToEntry: (id: EntryId) => void;
-}
+export { getSelectionMode } from '../../common/stores/eventSelectionStore';
+export type { SelectionMode } from '../../common/stores/eventSelectionStore';

 /**
- * Keeps track of the selected entries and selection mode
- * Provides methods to update the selection based on user interactions
+ * Selection and cursor for the rundown of the enclosing scope
 */
-export const useEventSelection = create<EventSelectionStore>()((set, get) => ({
-  selectedEvents: new Set(),
-  anchoredIndex: null,
-  cursor: null,
-  entryMode: null,
-  scrollHandler: null,
-  setSingleEntrySelection: ({ id }) => {
-    set({ selectedEvents: new Set([id]), anchoredIndex: null, cursor: id, entryMode: 'single' });
-  },
-  setSelectedEvents: ({ id, index, selectMode }) => {
-    const { selectedEvents, anchoredIndex, entryMode } = get();
-
-    // if we are in single mode, we replace the selection and change the mode
-    if (entryMode === 'single') {
-      return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
-    }
-
-    // on click, we replace selection with event
-    if (selectMode === 'click') {
-      return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
-    }
-
-    // on ctrl + click, we toggle the selection of that event
-    if (selectMode === 'ctrl') {
-      const rundownData = getLoadedRundownData();
-      if (!rundownData) return;
-
-      // if it doesnt exist, simply add to the list and set an anchor
-      if (!selectedEvents.has(id)) {
-        return set({
-          selectedEvents: selectedEvents.add(id),
-          anchoredIndex: index,
-          cursor: id,
-          entryMode: 'event',
-        });
-      }
-
-      // if event is already selected, we remove it from selection
-      // and set the anchor to the event after
-      selectedEvents.delete(id);
-
-      const nextIndex = rundownData.order.findIndex(
-        (eventId, i) => i > index && isOntimeEvent(rundownData.entries[eventId]) && selectedEvents.has(eventId),
-      );
-
-      // if we didnt find anything after, set the anchor to the last event
-      return set({
-        selectedEvents,
-        anchoredIndex: nextIndex < 0 ? rundownData.order.length - 1 : nextIndex,
-        entryMode: 'event',
-      });
-    }
-
-    // on shift + click, we select a range of events up to the clicked event
-    if (selectMode === 'shift') {
-      const rundownData = getLoadedRundownData();
-      if (!rundownData) return;
-
-      // get list of rundown with only ontime events
-      const eventIds: EntryId[] = [];
-      rundownData.flatOrder.forEach((eventId) => {
-        const event = rundownData.entries[eventId];
-        if (isOntimeEvent(event)) {
-          eventIds.push(event.id);
-        }
-      });
-
-      const start = anchoredIndex === null ? 0 : Math.min(anchoredIndex, index);
-      const end = anchoredIndex === null ? index : Math.max(anchoredIndex, index + 1);
-
-      // create new set with range of ids from start to end
-      const selectedEventIds = eventIds.slice(start, end);
-
-      return set({
-        selectedEvents: new Set([...selectedEvents, ...selectedEventIds]),
-        anchoredIndex: index,
-        entryMode: 'event',
-      });
-    }
-  },
-  clearSelectedEvents: () => set({ selectedEvents: new Set(), anchoredIndex: null, cursor: null, entryMode: null }),
-  clearMultiSelect: () => {
-    const { selectedEvents } = get();
-    const [firstSelected] = selectedEvents;
-    set({
-      selectedEvents: new Set(firstSelected ? [firstSelected] : []),
-      anchoredIndex: null,
-      entryMode: null,
-    });
-  },
-  unselect: (id: string) => {
-    const { entryMode, selectedEvents } = get();
-    selectedEvents.delete(id);
-    set({
-      selectedEvents,
-      entryMode: selectedEvents.size === 0 ? null : entryMode,
-    });
-  },
-  // Sets the scroll handler for programmatic scrolling to entries
-  setScrollHandler: (handler) => set({ scrollHandler: handler }),
-  // Scrolls to the specified entry using the registered scroll handler
-  scrollToEntry: (id: EntryId) => {
-    const handler = get().scrollHandler;
-    if (handler) {
-      handler(id);
-    }
-  },
-}));
-
-function getLoadedRundownData() {
-  const rundownId = ontimeQueryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
-  if (!rundownId) return undefined;
-  return ontimeQueryClient.getQueryData<Rundown>(getRundownQueryKey(rundownId));
-}
-
-export function getSelectionMode(event: MouseEvent): SelectionMode {
-  if ((isMacOS() && event.metaKey) || event.ctrlKey) {
-    return 'ctrl';
-  }
-
-  if (event.shiftKey) {
-    return 'shift';
-  }
-
-  return 'click';
+export function useEventSelection<T>(selector: (state: EventSelectionStore) => T): T {
+  const { selectionStore } = useRundownScope();
+  return useStore(selectionStore, selector);
 }
@@ -1,6 +1,7 @@
 import { EntryId, MaybeString } from 'ontime-types';
 import { useCallback } from 'react';

+import { useRundownScope } from '../../common/context/RundownScopeContext';
 import { useCollapsedGroups } from './useCollapsedGroups';
 import { useEventSelection } from './useEventSelection';

@@ -10,7 +11,8 @@ type SelectAndRevealOptions = {
  parent?: MaybeString;
 };

-export function useSelectAndRevealEntry(rundownId: string) {
+export function useSelectAndRevealEntry() {
+  const { rundownId } = useRundownScope();
  const { expandGroup } = useCollapsedGroups(rundownId);
  const selectEntry = useEventSelection((state) => state.setSelectedEvents);
  const scrollToEntry = useEventSelection((state) => state.scrollToEntry);
@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';

 import useCustomFields from '../../common/hooks-query/useCustomFields';
+import { useLoadedFlatRundown } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import { useFlatRundown } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
 import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';
@@ -20,7 +20,7 @@ export function useBackstageData(): ViewData<BackstageData> {
  const isMirrored = useViewOptionsStore((state) => state.mirror);

  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundown();
+  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundown();
  const { data: projectData, status: projectDataStatus } = useProjectData();
  const { data: settings, status: settingsStatus } = useSettings();
  const { data: customFields, status: customFieldsStatus } = useCustomFields();
@@ -12,7 +12,7 @@ import {
  useState,
 } from 'react';

-import { usePartialRundown } from '../../../common/hooks-query/useRundown';
+import { useLoadedPartialRundown } from '../../../common/hooks-query/useLoadedRundown';
 import { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { useScheduleOptions } from './schedule.options';

@@ -45,7 +45,7 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
    [filter],
  );

-  const { data: events } = usePartialRundown(filterCallback);
+  const { data: events } = useLoadedPartialRundown(filterCallback);

  const [firstIndex, setFirstIndex] = useState(-1);
  const [numPages, setNumPages] = useState(0);
@@ -100,20 +100,7 @@ $item-height: 3.5rem;
    flex-direction: column;
    overflow-y: auto;

-    padding-bottom: 95vh;
-  }
-
-  /* Flex prevents row margins collapsing and bounds the sticky header to its group. */
-  .sub-section {
-    display: flex;
-    flex-direction: column;
-
-    /* The select view renders the same cards in a flat list. */
-    .sub--group {
-      position: sticky;
-      top: 0;
-      z-index: 1;
-    }
+    padding-bottom: max(8rem, calc(5rem + env(safe-area-inset-bottom)));
  }

  /* ====================== LIST-ITEM ======================*/
@@ -209,14 +196,9 @@ $item-height: 3.5rem;

  .sub--group {
    box-shadow: inset 0 0 0 1px var(--user-color, $gray-1325);
-    /* The opaque base prevents rows showing through; background shorthand cannot layer this colour. */
-    background-color: var(--background-color-override, $viewer-background-color);
-    background-image:
+    background:
      linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 18%, transparent), transparent 42%),
-      linear-gradient(
-        var(--card-background-color-override, $viewer-card-bg-color),
-        var(--card-background-color-override, $viewer-card-bg-color)
-      );
+      var(--card-background-color-override, $viewer-card-bg-color);

    .sub__binder {
      background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
@@ -248,16 +230,6 @@ $item-height: 3.5rem;
    }
  }

-  /* Reserve the green fill for the running event. */
-  .sub--group.sub--live {
-    box-shadow: inset 0 0 0 2px $active-green;
-  }
-
-  /* Keep the armed state quieter than the live ring. */
-  .sub--group.sub--armed {
-    box-shadow: inset 0 0 0 2px $gray-1000;
-  }
-
  .sub__title {
    grid-area: title;
    padding-bottom: 0.5rem;
@@ -1,6 +1,6 @@
 import { MaybeNumber, OntimeEvent } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { IoPencil } from 'react-icons/io5';

 import Button from '../../common/components/buttons/Button';
@@ -22,7 +22,6 @@ import {
  CountdownTarget,
  extendEventData,
  getIsLive,
-  groupSubscriptionTargets,
  isOutsideRange,
  preferredFormat12,
  preferredFormat24,
@@ -49,22 +48,11 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
  const [lockAutoScroll, setLockAutoScroll] = useState(false);
  const selectedRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
-  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
-
-  const sections = useMemo(() => groupSubscriptionTargets(subscribedEvents), [subscribedEvents]);
-
-  // Responsive sizing and wrapped titles make the sticky header height variable, so measure it at scroll time.
-  const getStickyOffset = useCallback(() => {
-    const header = stickyHeaderRef.current;
-    // Preserve the combined margins between the header and running event.
-    return header ? header.offsetHeight + 4 : 0;
-  }, []);
-
  const scrollToComponent = useFollowComponent({
    followRef: selectedRef,
    scrollRef,
    doFollow: !lockAutoScroll,
-    getTopOffset: getStickyOffset,
+    topOffset: 0,
    followTrigger: selectedEventId,
  });

@@ -87,16 +75,15 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode

  // prevent considering automated scrolls as user scrolls
  const handleUserScroll = () => {
-    if (!selectedRef.current || !scrollRef.current) {
-      return;
+    if (selectedRef?.current && scrollRef?.current) {
+      const selectedRect = selectedRef.current.getBoundingClientRect();
+      const scrollerRect = scrollRef.current.getBoundingClientRect();
+      if (selectedRect && scrollerRect) {
+        const distanceFromTop = selectedRect.top - scrollerRect.top;
+        const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
+        setLockAutoScroll(hasScrolledOutOfThreshold);
+      }
    }
-
-    const selectedRect = selectedRef.current.getBoundingClientRect();
-    const scrollerRect = scrollRef.current.getBoundingClientRect();
-    // Keep the threshold relative to the visible rows below the sticky header.
-    const distanceFromTop = selectedRect.top - scrollerRect.top - getStickyOffset();
-    const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
-    setLockAutoScroll(hasScrolledOutOfThreshold);
  };
  const throttledHandleScroll = throttle(handleUserScroll, 1000);

@@ -111,63 +98,41 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode

  return (
    <div className='list-container' onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
-      {sections.map((section) => {
-        const rows = section.group ? [section.group, ...section.events] : section.events;
-        // the running event anchors the scroll, the group header stays pinned above it
-        const anchorId = section.events.find((event) => getIsLive(event.id, selectedEventId, playback))?.id ?? null;
-
+      {subscribedEvents.map((event) => {
+        // while a group is live, surface the running event's title as the secondary line
+        const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
+        const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
+        const isGroupedEvent = !event.isGroup && Boolean(event.parent);
+        const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
+        // a subscribed group is live when any of its children is the selected/running event
+        const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
+        const isArmed = !isLive && activeEntryId === selectedEventId;
+        const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
+        const displayTitle = getPropertyValue(event, mainSource ?? 'title');
        return (
-          <div key={section.group?.id ?? rows[0].id} className='sub-section'>
-            {rows.map((event) => {
-              // while a group is live, surface the running event's title as the secondary line
-              const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
-              const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
-              const isGroupedEvent = !event.isGroup && Boolean(event.parent);
-              const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
-              // a subscribed group is live when any of its children is the selected/running event
-              const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
-              const isArmed = !isLive && activeEntryId === selectedEventId;
-              // only ever hand the ref to a single row, sharing it would null it out on the next commit
-              const isAnchor = isLive && (anchorId === null || event.id === anchorId);
-              const rowRef = isAnchor ? selectedRef : event.isGroup && anchorId ? stickyHeaderRef : undefined;
-              const countdownEvent = extendEventData(
-                event,
-                currentDay,
-                actualStart,
-                plannedStart,
-                offset,
-                mode,
-                reportData,
-              );
-              const displayTitle = getPropertyValue(event, mainSource ?? 'title');
-
-              return (
-                <div
-                  key={event.id}
-                  ref={rowRef}
-                  className={cx([
-                    'sub',
-                    isLive && 'sub--live',
-                    isArmed && 'sub--armed',
-                    event.isGroup && 'sub--group',
-                    isGroupedEvent && 'sub--in-group',
-                  ])}
-                  data-testid={event.cue}
-                >
-                  <div
-                    className='sub__binder'
-                    style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
-                  />
-                  <ScheduleTime event={countdownEvent} showExpected={showExpected} />
-                  <SubscriptionStatus event={countdownEvent} />
-                  <div className={cx(['sub__title', !displayTitle && 'subdued'])}>
-                    {event.isGroup && <span className='sub__eyebrow'>Group</span>}
-                    {displayTitle}
-                  </div>
-                  {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
-                </div>
-              );
-            })}
+          <div
+            key={event.id}
+            ref={isLive ? selectedRef : undefined}
+            className={cx([
+              'sub',
+              isLive && 'sub--live',
+              isArmed && 'sub--armed',
+              event.isGroup && 'sub--group',
+              isGroupedEvent && 'sub--in-group',
+            ])}
+            data-testid={event.cue}
+          >
+            <div
+              className='sub__binder'
+              style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
+            />
+            <ScheduleTime event={countdownEvent} showExpected={showExpected} />
+            <SubscriptionStatus event={countdownEvent} />
+            <div className={cx(['sub__title', !displayTitle && 'subdued'])}>
+              {event.isGroup && <span className='sub__eyebrow'>Group</span>}
+              {displayTitle}
+            </div>
+            {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
          </div>
        );
      })}
@@ -1,7 +1,7 @@
 import { OntimeEntry, OntimeEvent, OntimeGroup, SupportedEntry } from 'ontime-types';

 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
-import { CountdownTarget, groupSubscriptionTargets, resolveSubscriptionTarget } from './countdown.utils';
+import { resolveSubscriptionTarget } from './countdown.utils';

 /**
 * Minimal builders for the extended (metadata enriched) entries the countdown view consumes.
@@ -126,89 +126,3 @@ describe('resolveSubscriptionTarget()', () => {
    expect(result?.liveEntry).toBeNull();
  });
 });
-
-describe('groupSubscriptionTargets()', () => {
-  /**
-   * Resolves a group the same way the view does, so that the tests exercise the real target shape
-   * (a resolved group carries type Event, so the helper cannot rely on the entry type)
-   */
-  function resolveGroup(group: ExtendedEntry<OntimeGroup>, flat: ExtendedEntry<OntimeEntry>[]): CountdownTarget {
-    const resolved = resolveSubscriptionTarget(group, flat);
-    if (resolved === null) {
-      throw new Error('test setup: group has no playable children');
-    }
-    return resolved;
-  }
-
-  it('returns no sections for an empty subscription list', () => {
-    expect(groupSubscriptionTargets([])).toEqual([]);
-  });
-
-  it('gives each ungrouped event its own section', () => {
-    const e1 = makeEvent({ id: 'e1' });
-    const e2 = makeEvent({ id: 'e2' });
-
-    expect(groupSubscriptionTargets([e1, e2])).toEqual([
-      { group: null, events: [e1] },
-      { group: null, events: [e2] },
-    ]);
-  });
-
-  it('absorbs the children of a subscribed group into its section', () => {
-    const group = makeGroup({ id: 'g1' });
-    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
-    const c2 = makeEvent({ id: 'c2', parent: 'g1' });
-    const resolved = resolveGroup(group, [group, c1, c2]);
-
-    expect(groupSubscriptionTargets([resolved, c1, c2])).toEqual([{ group: resolved, events: [c1, c2] }]);
-  });
-
-  it('keeps a subscribed group with no subscribed children as an empty section', () => {
-    const group = makeGroup({ id: 'g1' });
-    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
-    const resolved = resolveGroup(group, [group, c1]);
-
-    expect(groupSubscriptionTargets([resolved])).toEqual([{ group: resolved, events: [] }]);
-  });
-
-  it('does not absorb an event which belongs to a different group', () => {
-    const group1 = makeGroup({ id: 'g1' });
-    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
-    const group2 = makeGroup({ id: 'g2' });
-    const c2 = makeEvent({ id: 'c2', parent: 'g2' });
-    const flat = [group1, c1, group2, c2];
-    const resolved1 = resolveGroup(group1, flat);
-    const resolved2 = resolveGroup(group2, flat);
-
-    expect(groupSubscriptionTargets([resolved1, c1, resolved2, c2])).toEqual([
-      { group: resolved1, events: [c1] },
-      { group: resolved2, events: [c2] },
-    ]);
-  });
-
-  it('does not absorb an event whose parent group is not subscribed', () => {
-    const group1 = makeGroup({ id: 'g1' });
-    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
-    const group2 = makeGroup({ id: 'g2' });
-    const c2 = makeEvent({ id: 'c2', parent: 'g2' });
-    const resolved1 = resolveGroup(group1, [group1, c1, group2, c2]);
-
-    // only the first group is subscribed, so the second group's child stands alone
-    expect(groupSubscriptionTargets([resolved1, c1, c2])).toEqual([
-      { group: resolved1, events: [c1] },
-      { group: null, events: [c2] },
-    ]);
-  });
-
-  it('closes a section when an ungrouped event follows a group', () => {
-    const group = makeGroup({ id: 'g1' });
-    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
-    const e1 = makeEvent({ id: 'e1' });
-    const resolved = resolveGroup(group, [group, c1]);
-
-    expect(groupSubscriptionTargets([resolved, c1, e1])).toEqual([
-      { group: resolved, events: [c1] },
-      { group: null, events: [e1] },
-    ]);
-  });
-});
@@ -252,42 +252,6 @@ export function resolveSubscriptionTarget(
  };
 }

-/**
- * A subscribed group along with the subscribed events which belong to it.
- * Events without a subscribed parent group form their own section with no group.
- */
-export type CountdownSection = {
-  group: CountdownTarget | null;
-  events: CountdownTarget[];
-};
-
-/**
- * Folds the flat, rundown ordered subscription targets into sections.
- * A group opens a section which absorbs the following targets that declare it as parent,
- * which allows the group to be rendered as a sticky header for its own events.
- */
-export function groupSubscriptionTargets(targets: CountdownTarget[]): CountdownSection[] {
-  const sections: CountdownSection[] = [];
-
-  for (const target of targets) {
-    // resolveSubscriptionTarget spreads the first child, so we cannot rely on the entry type here
-    if (target.isGroup) {
-      sections.push({ group: target, events: [] });
-      continue;
-    }
-
-    const previousSection = sections.at(-1);
-    if (previousSection?.group?.id === target.parent) {
-      previousSection.events.push(target);
-      continue;
-    }
-
-    sections.push({ group: null, events: [target] });
-  }
-
-  return sections;
-}
-
 export function extendEventData(
  event: CountdownTarget,
  currentDay: number,
@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';

 import useCustomFields from '../../common/hooks-query/useCustomFields';
+import { useLoadedFlatRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
@@ -21,7 +21,7 @@ export function useCountdownData(): ViewData<CountdownData> {
  const isMirrored = useViewOptionsStore((state) => state.mirror);

  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
+  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundownWithMetadata();
  const { data: projectData, status: projectDataStatus } = useProjectData();
  const { data: settings, status: settingsStatus } = useSettings();
  const { data: customFields, status: customFieldsStatus } = useCustomFields();
@@ -3,35 +3,31 @@ import { IoApps } from 'react-icons/io5';

 import IconButton from '../../common/components/buttons/IconButton';
 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
-import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
-import { useScopedRundown } from '../../common/hooks-query/useScopedRundown';
-import { useScopedEntryActions } from '../../common/hooks/useEntryAction';
+import { EditableRundownScopeProvider } from '../../common/context/EditableRundownScopeProvider';
+import { useRundownSelection } from '../../common/hooks/useRundownSelection';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { getIsNavigationLocked } from '../../externals';
 import CuesheetOverview from '../../features/overview/CuesheetOverview';
 import EntryEditModal from './cuesheet-edit-modal/EntryEditModal';
 import CuesheetProgress from './cuesheet-progress/CuesheetProgress';
 import CuesheetTableWrapper from './CuesheetTableWrapper';
-import { FOLLOW_LOADED_RUNDOWN_ID, useCuesheetRundownSelection } from './useCuesheetRundownSelection';

 import styles from './CuesheetPage.module.scss';

 export default function CuesheetPage() {
  'use memo';
  const [isMenuOpen, menuHandler] = useDisclosure();
-  const { selectedRundownId, loadedRundownId, setSelectedRundownId, projectRundowns } = useCuesheetRundownSelection();
-  const source = useScopedRundown(selectedRundownId === FOLLOW_LOADED_RUNDOWN_ID ? loadedRundownId : selectedRundownId);
-
-  const actions = useScopedEntryActions(source.rundownId);
+  const { scopedRundownId, selectedRundownId, loadedRundownId, setSelectedRundownId, projectRundowns } =
+    useRundownSelection('cuesheet');

  useWindowTitle('Cuesheet');

  const isLocked = getIsNavigationLocked();

  return (
-    <EntryActionsProvider actions={actions}>
+    <EditableRundownScopeProvider rundownId={scopedRundownId}>
      <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
-      <EntryEditModal rundown={source.rundown} />
+      <EntryEditModal />
      <div className={styles.tableWrapper} data-testid='cuesheet'>
        <CuesheetOverview>
          {!isLocked && (
@@ -42,13 +38,12 @@ export default function CuesheetPage() {
        </CuesheetOverview>
        <CuesheetProgress />
        <CuesheetTableWrapper
-          source={source}
          selectedRundownId={selectedRundownId}
          loadedRundownId={loadedRundownId}
          setSelectedRundownId={setSelectedRundownId}
          projectRundowns={projectRundowns}
        />
      </div>
-    </EntryActionsProvider>
+    </EditableRundownScopeProvider>
  );
 }
@@ -3,19 +3,18 @@ import { memo, use, useMemo } from 'react';

 import Select from '../../common/components/select/Select';
 import { PresetContext } from '../../common/context/PresetContext';
+import { useRundownScope } from '../../common/context/RundownScopeContext';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import type { RundownSource } from '../../common/hooks-query/useScopedRundown';
+import { FOLLOW_LOADED_RUNDOWN_ID } from '../../common/hooks/useRundownSelection';
 import { AppMode } from '../../ontimeConfig';
 import CuesheetDnd from './cuesheet-dnd/CuesheetDnd';
 import { makeCuesheetColumns } from './cuesheet-table/cuesheet-table-elements/cuesheetColsFactory';
 import CuesheetTable from './cuesheet-table/CuesheetTable';
 import { useApplyCuesheetPolicy } from './useApplyCuesheetPolicy';
-import { FOLLOW_LOADED_RUNDOWN_ID } from './useCuesheetRundownSelection';

 import styles from './CuesheetPage.module.scss';

 interface CuesheetTableWrapperProps {
-  source: RundownSource;
  selectedRundownId: MaybeString;
  loadedRundownId: string;
  setSelectedRundownId: (rundownId: string) => void;
@@ -24,15 +23,14 @@ interface CuesheetTableWrapperProps {

 export default memo(CuesheetTableWrapper);
 function CuesheetTableWrapper({
-  source,
  selectedRundownId,
  setSelectedRundownId,
  loadedRundownId,
  projectRundowns,
 }: CuesheetTableWrapperProps) {
  const preset = use(PresetContext);
-  const isCurrentRundown = source.rundownId !== null && source.rundownId === loadedRundownId;
-  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isCurrentRundown });
+  const { isLoaded } = useRundownScope();
+  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isLoaded });
  const { data: customFields } = useCustomFields();

  const columns = useMemo(
@@ -44,11 +42,9 @@ function CuesheetTableWrapper({
    <CuesheetDnd columns={columns}>
      <CuesheetTable
        columns={columns}
-        source={source}
        cuesheetMode={cuesheetMode}
        tableRoot='cuesheet'
        setCuesheetMode={setCuesheetMode}
-        isCurrentRundown={isCurrentRundown}
        insertElement={
          <>
            <RundownSelect
@@ -1,16 +1,13 @@
-import { Rundown } from 'ontime-types';
 import { memo } from 'react';

 import Modal from '../../../common/components/modal/Modal';
+import useRundown from '../../../common/hooks-query/useRundown';
 import CuesheetEntryEditor from '../../../features/rundown/entry-editor/CuesheetEventEditor';
 import { useEditModal } from './useEditModal';

-interface EntryEditModalProps {
-  rundown: Rundown;
-}
-
 export default memo(EntryEditModal);
-function EntryEditModal({ rundown }: EntryEditModalProps) {
+function EntryEditModal() {
+  const { data: rundown } = useRundown();
  const entryId = useEditModal((state) => state.selectedEntryId);
  const closeModal = useEditModal((state) => state.clearSelection);

@@ -14,7 +14,8 @@ import {
 import EmptyFill from '../../../common/components/state/EmptyFill';
 import EmptyTableBody from '../../../common/components/state/EmptyTableBody';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import type { RundownSource } from '../../../common/hooks-query/useScopedRundown';
+import { useRundownScope } from '../../../common/context/RundownScopeContext';
+import { useFlatRundownWithMetadata, useScopedSelectedEventId } from '../../../common/hooks-query/useRundown';
 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { usePersistedRundownOptions } from '../../../features/rundown/rundown.options';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
@@ -41,20 +42,17 @@ import style from './CuesheetTable.module.scss';
 type CuesheetTableBaseProps = {
  columns: CuesheetColumnDef[];
  cuesheetMode: AppMode;
-  source: RundownSource;
  insertElement?: ReactNode;
 };

 type EditorCuesheetTableProps = CuesheetTableBaseProps & {
  tableRoot: 'editor';
  setCuesheetMode?: undefined;
-  isCurrentRundown?: undefined;
 };

 type ViewCuesheetTableProps = CuesheetTableBaseProps & {
  tableRoot: 'cuesheet';
  setCuesheetMode: (mode: AppMode) => void;
-  isCurrentRundown?: boolean;
 };

 type CuesheetTableProps = EditorCuesheetTableProps | ViewCuesheetTableProps;
@@ -62,13 +60,13 @@ type CuesheetTableProps = EditorCuesheetTableProps | ViewCuesheetTableProps;
 export default function CuesheetTable({
  columns,
  cuesheetMode,
-  source,
  tableRoot,
  setCuesheetMode,
-  isCurrentRundown,
  insertElement,
 }: CuesheetTableProps) {
-  const { flatRundown, status, selectedEventId } = source;
+  const { isLoaded: isCurrentRundown } = useRundownScope();
+  const { data: flatRundown, status } = useFlatRundownWithMetadata();
+  const selectedEventId = useScopedSelectedEventId();
  const { updateEntry, updateTimer, addEntry } = useEntryActionsContext();
  const { getLocalizedString } = useTranslation();
  const canCreateEntries = useCuesheetPermissions((state) => state.canCreateEntries) && cuesheetMode === AppMode.Edit;
@@ -105,10 +105,10 @@ function MakeDuration({ getValue, row, table, column }: CuesheetCellContext) {
    return null;
  }

+  const { hideTableSeconds } = table.options.meta.options;
  const event = row.original;
  if (!isOntimeEvent(event)) {
-    const duration = getValue() as number;
-    return <MutedText numeric>{formatDuration(duration, false)}</MutedText>;
+    return <MutedText numeric>{formatDuration(getValue() as number, hideTableSeconds)}</MutedText>;
  }

  const { handleUpdateTimer } = table.options.meta;
@@ -117,7 +117,7 @@ function MakeDuration({ getValue, row, table, column }: CuesheetCellContext) {

  const duration = getValue() as number;
  const isDurationLocked = event.timeStrategy === TimeStrategy.LockDuration;
-  const formattedDuration = formatDuration(duration, false);
+  const formattedDuration = formatDuration(duration, hideTableSeconds);

  const canWrite = column.columnDef.meta?.canWrite;
  if (!canWrite) {
@@ -1,5 +1,6 @@
 import { lazy } from 'react';

+import { EditableRundownScopeProvider } from '../../common/context/EditableRundownScopeProvider';
 import TrackingPlaybackBar from '../../features/control/playback/tracking-playback-bar/TrackingPlaybackBar';
 import { AppMode } from '../../ontimeConfig';
 import TitleList from './title-list/TitleList';
@@ -21,7 +22,9 @@ export default function Editor() {
          <TimerControl />
          <MessageControl />
        </div>
-        <Rundown />
+        <EditableRundownScopeProvider rundownId={null}>
+          <Rundown />
+        </EditableRundownScopeProvider>
      </div>
    );
  }
@@ -29,14 +32,17 @@ export default function Editor() {
  if (layoutMode === EditorLayoutMode.TRACKING) {
    return (
      <div id='panels' className={`${styles.panelContainer} ${styles.panelContainerTracking}`}>
-        <div className={styles.rundownLayout}>
-          <div className={styles.titlesPanel}>
-            <TitleList mode={AppMode.Run} />
+        {/* the titles and the rundown share a scope, so they follow one cursor */}
+        <EditableRundownScopeProvider rundownId={null}>
+          <div className={styles.rundownLayout}>
+            <div className={styles.titlesPanel}>
+              <TitleList mode={AppMode.Run} />
+            </div>
+            <div className={styles.rundownPanel}>
+              <Rundown />
+            </div>
          </div>
-          <div className={styles.rundownPanel}>
-            <Rundown />
-          </div>
-        </div>
+        </EditableRundownScopeProvider>
        <TrackingPlaybackBar />
      </div>
    );
@@ -44,14 +50,16 @@ export default function Editor() {

  return (
    <div id='panels' className={styles.panelContainer}>
-      <div className={styles.rundownLayout}>
-        <div className={styles.titlesPanel}>
-          <TitleList mode={AppMode.Edit} />
+      <EditableRundownScopeProvider rundownId={null}>
+        <div className={styles.rundownLayout}>
+          <div className={styles.titlesPanel}>
+            <TitleList mode={AppMode.Edit} />
+          </div>
+          <div className={styles.rundownPanel}>
+            <Rundown />
+          </div>
        </div>
-        <div className={styles.rundownPanel}>
-          <Rundown />
-        </div>
-      </div>
+      </EditableRundownScopeProvider>
    </div>
  );
 }
@@ -207,10 +207,10 @@ export function searchByText(
 * @param activeFilter - a field selected from the filter badges, if any
 */
 export default function useFinder(searchValue: string, activeFilter: MaybeString) {
-  const { data, rundownId } = useFlatRundown();
+  const { data } = useFlatRundown();
  const { data: customFields } = useCustomFields();

-  const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);
+  const selectAndRevealEntry = useSelectAndRevealEntry();

  /** The filters offered to the user: the fixed fields plus whatever the project defines */
  const filters = useMemo<FinderFilter[]>(() => {
@@ -46,7 +46,6 @@ export default function TitleList({ mode }: TitleListProps) {
      eventData={eventData}
      selectedEventId={selectedEventId}
      resolvedFollowEventId={resolvedFollowEventId}
-      rundownId={rundown.id}
    />
  );
 }
@@ -56,21 +55,14 @@ interface TitleListContentProps {
  eventData: ExtendedEntry<OntimeEvent>[];
  selectedEventId: string | null;
  resolvedFollowEventId: string | null;
-  rundownId: string;
 }

-function TitleListContent({
-  mode,
-  eventData,
-  selectedEventId,
-  resolvedFollowEventId,
-  rundownId,
-}: TitleListContentProps) {
+function TitleListContent({ mode, eventData, selectedEventId, resolvedFollowEventId }: TitleListContentProps) {
  'use memo';

  const virtuosoRef = useRef<VirtuosoHandle | null>(null);
  const scrollParentRef = useRef<HTMLDivElement | null>(null);
-  const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);
+  const selectAndRevealEntry = useSelectAndRevealEntry();

  // Calculate current event info
  const currentEventInfo = useMemo(() => {
@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';

 import useCustomFields from '../../common/hooks-query/useCustomFields';
+import { useLoadedFlatRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';
@@ -16,7 +16,7 @@ export interface TimelineData {

 export function useTimelineData(): ViewData<TimelineData> {
  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
+  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundownWithMetadata();
  const { data: projectData, status: projectDataStatus } = useProjectData();
  const { data: settings, status: settingsStatus } = useSettings();
  const { data: customFields, status: customFieldsStatus } = useCustomFields();
@@ -1,8 +1,8 @@
 import { CustomFields, ProjectData, RundownEntries, Settings, ViewSettings } from 'ontime-types';

 import useCustomFields from '../../common/hooks-query/useCustomFields';
+import { useLoadedRundown } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import useRundown from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
@@ -26,7 +26,7 @@ export function useTimerData(): ViewData<TimerData> {
  const { data: viewSettings, status: viewSettingsStatus } = useViewSettings();
  const { data: settings, status: settingsStatus } = useSettings();
  const { data: customFields, status: customFieldsStatus } = useCustomFields();
-  const { data: rundown, status: rundownStatus } = useRundown();
+  const { data: rundown, status: rundownStatus } = useLoadedRundown();
  const { entries } = rundown;

  return {
@@ -6,7 +6,7 @@
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; style-src 'unsafe-inline'; script-src 'self'"
    />
-    <title>Ontime</title>
+    <title>ontime</title>
    <style>
      body {
        -webkit-user-select: none;
@@ -92,7 +92,7 @@
  <body>
    <div class="container">
      <img src="../assets/logo.png" />
-      <h1>Ontime · event timers</h1>
+      <h1>ontime · event timers</h1>
      <div class="lds-ellipsis">
        <div></div>
        <div></div>
@@ -225,44 +225,4 @@ describe('deleteAutomation()', () => {
    const removed = getAutomations();
    expect(Object.keys(removed).length).toEqual(0);
  });
-
-  it('takes the automation global triggers with it, and leaves the others alone', async () => {
-    const doomed = Object.keys(getAutomations())[0];
-    const survivor = await addAutomation({ title: 'survivor', filterRule: 'all', filters: [], outputs: [] });
-
-    await addTrigger({ title: 'on start', trigger: TimerLifeCycle.onStart, automationId: doomed });
-    await addTrigger({ title: 'on finish', trigger: TimerLifeCycle.onFinish, automationId: doomed });
-    await addTrigger({ title: 'keep me', trigger: TimerLifeCycle.onStart, automationId: survivor.id });
-
-    await deleteAutomation({}, doomed);
-
-    // a trigger pointing at nothing never fires, so it must not outlive its automation
-    expect(getAutomationTriggers()).toEqual([expect.objectContaining({ title: 'keep me' })]);
-    expect(Object.keys(getAutomations())).toEqual([survivor.id]);
-  });
-
-  it('refuses an automation attached to an event, and keeps its triggers', async () => {
-    const automationId = Object.keys(getAutomations())[0];
-    await addTrigger({ title: 'on start', trigger: TimerLifeCycle.onStart, automationId });
-
-    const projectRundowns: ProjectRundowns = {
-      'rundown-1': {
-        id: 'rundown-1',
-        title: 'Rundown 1',
-        order: ['1'],
-        flatOrder: ['1'],
-        entries: {
-          '1': makeOntimeEvent({
-            id: '1',
-            triggers: [{ id: 'trigger-1', title: 'Trigger 1', trigger: TimerLifeCycle.onClock, automationId }],
-          }),
-        },
-        revision: 1,
-      },
-    };
-
-    await expect(deleteAutomation(projectRundowns, automationId)).rejects.toThrow(/used in rundown/);
-    expect(getAutomationTriggers()).toHaveLength(1);
-    expect(Object.keys(getAutomations())).toEqual([automationId]);
-  });
 });
@@ -145,18 +145,24 @@ export async function deleteAutomation(projectRundowns: ProjectRundowns, automat
    return;
  }

-  // prevent deleting a automation that is in use in events, the user has to unlink it there
+  // prevent deleting a automation that is in use in triggers
+  const triggers = getAutomationTriggers().filter((trigger) => trigger.automationId === automationId);
+  if (triggers.length) {
+    const firstTrigger = triggers[0];
+    const triggerTitle = firstTrigger?.title ?? 'Unknown trigger';
+    throw new Error(
+      `Unable to delete automation used in trigger ${triggerTitle}${triggers.length > 1 ? ` and ${triggers.length - 1} more` : ''}`,
+    );
+  }
+
+  // prevent deleting a automation that is in use in events
  const isInUse = isAutomationUsed(projectRundowns, automationId);
  if (isInUse) {
    throw new Error(`Unable to delete automation used in rundown: ${isInUse[0]}, in event with ID: ${isInUse[1]}`);
  }

-  // a global trigger without its automation is dead data, so it goes with it.
-  // Both are written in a single patch, there is no state where one outlived the other
-  const triggers = getAutomationTriggers().filter((trigger) => trigger.automationId !== automationId);
-
  delete automations[automationId];
-  await saveChanges({ automations, triggers });
+  await saveChanges({ automations });
 }

 /**
@@ -1,164 +0,0 @@
-import type { PlayableEvent } from 'ontime-types';
-import { RefetchKey, TimerLifeCycle } from 'ontime-types';
-import { MILLIS_PER_MINUTE } from 'ontime-utils';
-import { vi } from 'vitest';
-
-import { sendRefetch } from '../../../adapters/WebsocketAdapter.js';
-import { makeRuntimeStateData } from '../../../stores/__mocks__/runtimeState.mocks.js';
-import { makeOntimeEvent, makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
-import { clear, generate, generateReport, triggerReportEntry } from '../report.service.js';
-
-vi.mock('../../../adapters/WebsocketAdapter.js', () => ({ sendRefetch: vi.fn() }));
-
-const eventA = makeOntimeEvent({
-  id: 'event-a',
-  dayOffset: 0,
-  timeStart: 0,
-  timeEnd: MILLIS_PER_MINUTE,
-  duration: MILLIS_PER_MINUTE,
-}) as PlayableEvent;
-const eventB = makeOntimeEvent({
-  id: 'event-b',
-  dayOffset: 0,
-  timeStart: MILLIS_PER_MINUTE,
-  timeEnd: 2 * MILLIS_PER_MINUTE,
-  duration: MILLIS_PER_MINUTE,
-}) as PlayableEvent;
-
-beforeEach(() => {
-  clear();
-  vi.clearAllMocks();
-});
-
-it('records lifecycle times while keeping the schedule captured at start', () => {
-  const start = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 500 }, _startEpoch: 1 });
-  triggerReportEntry(TimerLifeCycle.onStart, start);
-
-  const edited = { ...eventA, timeStart: 999, duration: 999 } as PlayableEvent;
-  const stop = makeRuntimeStateData({ eventNow: edited, clock: 2 * MILLIS_PER_MINUTE, rundown: { currentDay: 1 } });
-  triggerReportEntry(TimerLifeCycle.onStop, stop);
-
-  expect(generate()[eventA.id]).toEqual({
-    startedAt: 500,
-    startedAtDay: 0,
-    endedAt: 2 * MILLIS_PER_MINUTE,
-    endedAtDay: 1,
-    scheduledStart: eventA.timeStart,
-    scheduledDay: eventA.dayOffset,
-    scheduledDuration: eventA.duration,
-  });
-  expect(sendRefetch).toHaveBeenCalledTimes(2);
-  expect(sendRefetch).toHaveBeenLastCalledWith(RefetchKey.Report);
-});
-
-it('falls back to the current event when a stop arrives without a start', () => {
-  const stop = makeRuntimeStateData({ eventNow: eventA, clock: MILLIS_PER_MINUTE });
-  triggerReportEntry(TimerLifeCycle.onStop, stop);
-
-  expect(generate()[eventA.id]).toMatchObject({
-    startedAt: null,
-    endedAt: MILLIS_PER_MINUTE,
-    scheduledDuration: eventA.duration,
-  });
-});
-
-it('captures the rundown plan when a stop is the first report entry', () => {
-  const rundown = makeRundown({
-    id: 'run-1',
-    title: 'Stopped without start',
-    order: [eventA.id],
-    entries: { [eventA.id]: eventA },
-  });
-  const stop = makeRuntimeStateData({
-    eventNow: eventA,
-    clock: MILLIS_PER_MINUTE,
-    rundown: { plannedStart: 0, plannedEnd: MILLIS_PER_MINUTE },
-  });
-
-  triggerReportEntry(TimerLifeCycle.onStop, stop, rundown);
-
-  expect(generateReport()).toMatchObject({
-    eventReports: { [eventA.id]: { endedAt: MILLIS_PER_MINUTE } },
-    rundown: { id: rundown.id, title: rundown.title },
-  });
-});
-
-it('accumulates entries until the report is explicitly cleared', () => {
-  const firstRun = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, _startEpoch: 1 });
-  triggerReportEntry(TimerLifeCycle.onStart, firstRun);
-  triggerReportEntry(TimerLifeCycle.onStart, { ...firstRun, eventNow: eventB, _startEpoch: 2 });
-
-  expect(Object.keys(generate())).toEqual([eventA.id, eventB.id]);
-});
-
-it('returns the report with the rundown plan captured at its first event', () => {
-  const rundown = makeRundown({
-    id: 'run-1',
-    title: 'Original title',
-    order: [eventA.id, eventB.id],
-    entries: { [eventA.id]: eventA, [eventB.id]: eventB },
-  });
-  const start = makeRuntimeStateData({
-    eventNow: eventA,
-    timer: { startedAt: 500 },
-    _startEpoch: 1,
-    rundown: { plannedStart: 0, plannedEnd: 2 * MILLIS_PER_MINUTE },
-  });
-  triggerReportEntry(TimerLifeCycle.onStart, start, rundown);
-  triggerReportEntry(TimerLifeCycle.onStop, { ...start, clock: MILLIS_PER_MINUTE });
-  rundown.title = 'Edited later';
-
-  expect(generateReport()).toMatchObject({
-    rundown: { id: 'run-1', title: 'Original title' },
-    eventReports: { [eventA.id]: { scheduledDuration: MILLIS_PER_MINUTE } },
-    show: {
-      plannedStart: 0,
-      plannedEnd: 2 * MILLIS_PER_MINUTE,
-      plannedDuration: 2 * MILLIS_PER_MINUTE,
-      actualStart: 500,
-      actualEnd: MILLIS_PER_MINUTE,
-    },
-  });
-});
-
-it('clears the retained report and rundown snapshot together', () => {
-  const rundown = makeRundown({ order: [eventA.id], entries: { [eventA.id]: eventA } });
-  const state = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, _startEpoch: 1 });
-  triggerReportEntry(TimerLifeCycle.onStart, state, rundown);
-  vi.clearAllMocks();
-  clear();
-
-  expect(generateReport()).toMatchObject({ eventReports: {}, rundown: null });
-  expect(sendRefetch).toHaveBeenCalledOnce();
-  expect(sendRefetch).toHaveBeenCalledWith(RefetchKey.Report);
-});
-
-it('captures a new plan after removing the final event by id', () => {
-  const firstRundown = makeRundown({
-    id: 'run-1',
-    title: 'First run',
-    order: [eventA.id],
-    entries: { [eventA.id]: eventA },
-  });
-  const secondRundown = makeRundown({
-    id: 'run-2',
-    title: 'Second run',
-    order: [eventB.id],
-    entries: { [eventB.id]: eventB },
-  });
-  const firstStart = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, _startEpoch: 1 });
-  const secondStart = makeRuntimeStateData({
-    eventNow: eventB,
-    timer: { startedAt: MILLIS_PER_MINUTE },
-    _startEpoch: 2,
-  });
-
-  triggerReportEntry(TimerLifeCycle.onStart, firstStart, firstRundown);
-  clear(eventA.id);
-  triggerReportEntry(TimerLifeCycle.onStart, secondStart, secondRundown);
-
-  expect(generateReport()).toMatchObject({
-    eventReports: { [eventB.id]: { startedAt: MILLIS_PER_MINUTE } },
-    rundown: { id: secondRundown.id, title: secondRundown.title },
-  });
-});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Claude	ccdfb64921	perf(rundown): keep entry revisions in step with the server An entry revision advances on every change to that entry, which makes it a cheap marker for what has moved on in a rundown. The client did not maintain it: an optimistic entry carried the old revision, so the entry the server returned always differed from ours by that one field. That difference is enough to defeat structural sharing. A new entries object recomputes the rundown metadata, which fires the effect behind the list, which re-renders every visible row. Editing one title on a fourteen entry rundown cost eight structural and sixty-one attribute mutations, twice over. - optimistic patches apply the same revision bump the server does, so an unchanged entry keeps its identity and a refetch costs nothing to render - the rundown metadata memo keys on the fields the derivation reads, so a change of rundown revision alone no longer churns the list - editing an entry now reads the server response, which is the authority on what was applied, and only writes when it differs from what we predicted Measured on the same edit: eight to four structural, sixty-one to forty-one attribute mutations. Both changes are needed, neither helps on its own. Two bugs found on the way. A swap stored the pre increment revision, so swapped entries were indistinguishable from untouched ones. The optimistic batch edit spread the request envelope onto the entry rather than the patch, so it never applied the edit it was predicting. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011a5cbVjNC5XXF88b2PkUCa	2026-08-30 12:04:47 +00:00
Claude	a5086aed0b	fix(rundown): narrow rundown invalidation Two independent issues in the revision strategy. The client guard only skipped a refetch when the revision matched exactly, while its comment described skipping anything not newer. A message which arrives after a refetch has already brought in a later revision forced a needless refetch. Compare with <= so the guard does what it claims. Renaming a rundown re-initialised it, which stops playback. Renaming the loaded rundown during a show therefore stopped the show. A title has no bearing on the schedule, so it now goes through an ordinary transaction: the title is persisted, the revision bumped and clients notified, with no runtime involvement. Renaming to the current title is a no-op. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011a5cbVjNC5XXF88b2PkUCa	2026-08-30 10:51:20 +00:00
Claude	1fa6175fb8	refactor(rundown): keep runtime views on the loaded rundown Only the editor and the cuesheet can be pointed at a background rundown. Everything else always works against the rundown being played, so it has no business taking part in a rundown scope. Split the readers by that assumption: - useRundownById holds the query and the shared derivation - useRundown reads from the enclosing scope, for the editor and cuesheet - useLoadedRundown resolves the loaded rundown directly, for the viewers, the operator, app settings and the overview This drops the app wide scope provider, so views which read no rundown (studio, project info) no longer subscribe to the rundown list, and a scope becomes what it claims to be: a panel concern which throws when used outside a panel. It also fixes the overview, which reads runtime ids (the playing group, the next flag). Those only exist in the loaded rundown, so resolving them against a scope returned nothing while a background rundown was open in the cuesheet. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011a5cbVjNC5XXF88b2PkUCa	2026-08-29 17:48:42 +00:00
Claude	bc8407c0e6	refactor(rundown): address review on the rundown scope - extract getRundownCacheKey, the fallback to the bootstrap alias for an unresolved rundown id was spelled out in two readers and missing in the selection store, which could not resolve shift/ctrl ranges during startup - an unresolved target is no longer reported as the loaded rundown, it was briefly enabling run mode and playback following before a rundown existed - only the reader which bootstrapped drops the /current alias, a reader on another rundown was evicting a cache others still relied on - the selection store returns a new Set on toggle and unselect, components selecting the set by reference never saw the change - useSelectAndRevealEntry takes its rundown from the scope, callers were threading an id for no other reason Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011a5cbVjNC5XXF88b2PkUCa	2026-08-29 17:21:24 +00:00
Claude	802521c706	refactor(rundown): resolve rundown data from a scope context The editor and cuesheet had three overlapping notions of which rundown they were showing: loaded-only data hooks, a prop-drilled RundownSource, and a selection store which read the loaded rundown out of the query cache. Rendering two rundowns at once was not possible. Introduce a rundown scope: a context carrying the rundown identity (id, isLoaded and a selection store) which the utility hooks read from. useRundown, useEntry and friends keep their signatures and call sites, they simply resolve their rundown from the enclosing scope. The app mounts a scope at the root which follows the loaded rundown, so runtime views are unaffected; the editor and cuesheet mount an editable scope which also binds entry actions to the same rundown. - useEventSelection becomes a per-scope store factory, so panels hold independent cursors and the store is handed its rundown instead of reaching for the loaded one - the cuesheet selection is generalised to useRundownSelection with a namespace, so each surface persists its own choice - the clipboard records the rundown an entry was copied from, leaving room for pasting across rundowns - removes useScopedRundown and the prop-drilled RundownSource Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011a5cbVjNC5XXF88b2PkUCa	2026-08-29 13:21:59 +00:00