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-08-31 11:59:10 +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
181 changed files with 5791 additions and 5320 deletions
@@ -0,0 +1,46 @@
+---
+name: code-review
+description: Review Ontime changes for concrete correctness, architecture, testing, routing, security, and maintenance issues. For GitHub Copilot review.
+---
+
+# Review Ontime changes
+
+Review as a maintainer. Find material defects, not speculative advice, style preferences, or generic checklists. Approve when no material issue remains.
+
+## Load relevant context
+
+Read the full diff, PR description, linked issue, tests, and nearby owning code. Then load only applicable guides:
+
+- Every non-trivial review: [change assessment](../../../docs/agent-guides/change-assessment.md)
+- Module placement, server layers, client state, shared packages: [architecture](../../../docs/agent-guides/architecture.md)
+- Tests or changed behaviour: [testing](../../../docs/agent-guides/testing.md)
+- Comments, abstractions, naming, complexity: [code quality](../../../docs/agent-guides/code-quality.md)
+- Authentication, external input, files, integrations, assets, secrets: [security](../../../docs/agent-guides/security.md)
+- Routes, URLs, websockets, authentication, cookies, presets, assets: [routing and cloud](../../../docs/agent-guides/routing-and-cloud.md)
+- Rundowns, timers, persistence, imports, cache, realtime: [domain invariants](../../../docs/agent-guides/domain-invariants.md)
+- Commands, imports, dependencies, formatting, CI claims: [workflow](../../../docs/agent-guides/workflow.md)
+
+Check a guide and nearby canonical code before citing an Ontime convention. Skip unrelated guides.
+
+## Review order
+
+1. Establish intent and affected runtime surfaces.
+2. Read tests first. Identify claimed behaviour and coverage.
+3. Trace implementation, errors, and state transitions.
+4. Check correctness/data integrity, security, architecture/testability, cloud routing, lifecycle/performance, maintainability.
+5. Verify claimed checks. Never claim unobserved results.
+
+Passing tests do not prove architecture, routing, comments, or error paths. Review changed behaviour only; include existing problems only when the diff worsens or relies on them.
+
+## Findings
+
+Report only concrete, actionable issues. Each finding: tight line range, direct defect, impact and trigger, smallest viable remedy when unclear.
+
+- **P0 — Critical:** data loss, exploitable vulnerability, broadly broken production. Blocks merge.
+- **P1 — High:** likely correctness failure or major supported-deployment regression. Blocks merge.
+- **P2 — Medium:** real edge-case defect, architecture regression, missing business-rule test, stale comment, meaningful maintenance risk. Normally blocks merge.
+- **P3 — Low:** local improvement with limited impact. No subjective style or tool-managed formatting.
+
+Order by priority. Prefer few high-confidence findings. No praise or checklist before findings. If none, say so and note verification gaps or residual risk.
+
+Then give one concise PR-level value/risk/complexity assessment. Never repeat it per finding.
@@ -0,0 +1,22 @@
+# Ontime agent guide
+
+Make the smallest maintainable change. Keep scope narrow. Inspect nearby code first. Reuse helpers and boundaries when semantics match.
+
+## Load only relevant guides
+
+- Commands, validation, formatting, imports, PRs: [workflow](docs/agent-guides/workflow.md).
+- Non-trivial planning, implementation, review: [change assessment](docs/agent-guides/change-assessment.md).
+- Module placement, server layers, client state, shared packages: [architecture](docs/agent-guides/architecture.md).
+- Tests or changed behaviour: [testing](docs/agent-guides/testing.md).
+- Comments, naming, abstractions, maintainability: [code quality](docs/agent-guides/code-quality.md).
+- Authentication, external input, files, integrations, assets, secrets: [security](docs/agent-guides/security.md).
+- Navigation, URLs, API paths, websockets, redirects, cookies, static assets: [routing and cloud](docs/agent-guides/routing-and-cloud.md).
+- Rundowns, timers, imports, persistence, cache, websockets: [domain invariants](docs/agent-guides/domain-invariants.md).
+
+Load multiple guides when needed. Skip unrelated guides for mechanical work.
+
+## Before handoff
+
+- Check the final diff for scope, stale comments, temporary code, redundant tests, generated files.
+- If work reveals a missing, stable, reusable system, domain, or product invariant, update its owning guide. Exclude guesses, one-off bugs, and implementation details.
+- Follow [workflow verification](docs/agent-guides/workflow.md). Report only observed results.
@@ -1,6 +1,6 @@
 {
  "name": "@getontime/cli",
-  "version": "4.11.0",
+  "version": "4.13.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -1,10 +1,10 @@
 {
  "name": "ontime-ui",
-  "version": "4.11.0",
+  "version": "4.13.0",
  "private": true,
  "type": "module",
  "dependencies": {
-    "@base-ui/react": "1.6.0",
+    "@base-ui/react": "1.7.0",
    "@codemirror/commands": "^6.0.0",
    "@codemirror/lang-css": "^6.0.0",
    "@codemirror/state": "^6.0.0",
@@ -13,12 +13,12 @@
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@fontsource/open-sans": "^5.2.7",
-    "@mantine/hooks": "^8.3.7",
+    "@mantine/hooks": "^9.5.1",
    "@sentry/react": "^10.59.0",
    "@table-nav/react": "^0.0.7",
    "@tanstack/react-query": "^5.101.0",
    "@tanstack/react-query-devtools": "^5.101.0",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.1.2",
    "@uiw/codemirror-theme-vscode": "^4.25.10",
    "autosize": "^6.0.1",
    "axios": "^1.18.0",
@@ -29,7 +29,7 @@
    "react-dom": "^19.2.7",
    "react-fast-compare": "^3.2.2",
    "react-hook-form": "^7.80.0",
-    "react-icons": "5.6.0",
+    "react-icons": "5.7.0",
    "react-router": "^8.0.1",
    "react-virtuoso": "^4.18.7",
    "zustand": "^5.0.14"
@@ -60,7 +60,8 @@
    ]
  },
  "devDependencies": {
-    "@sentry/vite-plugin": "5.1.1",
+    "@sentry/vite-plugin": "5.4.0",
+    "@types/node": "catalog:",
    "@types/qrcode": "^1.5.6",
    "@types/react": "^19.1.12",
    "@types/react-dom": "^19.1.9",
@@ -72,8 +73,8 @@
    "ontime-utils": "workspace:*",
    "sass": "^1.57.1",
    "typescript": "catalog:",
-    "vite": "8.0.1",
-    "vite-plugin-compression2": "2.5.1",
+    "vite": "8.2.1",
+    "vite-plugin-compression2": "2.5.3",
    "vite-plugin-svgr": "4.5.0",
    "vitest": "catalog:"
  }
@@ -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`;

@@ -176,6 +176,13 @@ export async function postCloneEntry(
  return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`, options);
 }

+/**
+ * HTTP request events duration to fit inside the group target
+ */
+export async function requestFitGroupTarget(rundownId: RundownId, eventId: EntryId): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/${rundownId}/${eventId}/fit-group-duration`);
+}
+
 /**
 * HTTP request for grouping a list of entries into a group
 */
@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+
+import Button from './Button';
+
+type ToggleButtonProps = Omit<ComponentProps<typeof Button>, 'variant'> & {
+  /** whether the option this button controls is currently on */
+  pressed: boolean;
+};
+
+/**
+ * A button which carries an on / off state.
+ *
+ * Keeps the pressed styling and the accessible state together, so that a toggle
+ * cannot end up looking active without also announcing that it is.
+ */
+export default function ToggleButton({ pressed, ...buttonProps }: ToggleButtonProps) {
+  return <Button variant={pressed ? 'primary' : 'subtle'} aria-pressed={pressed} {...buttonProps} />;
+}
@@ -0,0 +1,6 @@
+.eyebrow {
+  font-size: $aux-text-size;
+  font-weight: 400;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './Eyebrow.module.scss';
+
+interface EyebrowProps {
+  className?: string;
+}
+
+export default function Eyebrow({ children, className }: PropsWithChildren<EyebrowProps>) {
+  return <span className={cx([style.eyebrow, className])}>{children}</span>;
+}
@@ -1,7 +1,3 @@
-.separator {
-  border-color: $border-color-ondark;
-}
-
 .backdrop {
  position: fixed;
  inset: 0;
@@ -23,14 +19,15 @@

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  cursor: pointer;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,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,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,
@@ -49,8 +49,10 @@ import {
  requestEventSwap,
  requestGroupEntries,
  requestUngroup,
+  requestFitGroupTarget,
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
+import { useRundownScope } from '../context/RundownScopeContext';
 import { useEditorSettings } from '../stores/editorSettings';

 export type EventOptions = Partial<{
@@ -63,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,
@@ -92,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
@@ -324,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,
@@ -339,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) {
@@ -466,7 +499,27 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
        return previousEnd;
      }
    },
-    [getCurrentRundownData, updateEntryMutation, queryClient],
+    [getCurrentRundownData, updateEntryMutation, queryClient, resolveCurrentRundownQueryKey],
+  );
+
+  /**
+   * Updates time of existing event so it satisfies the group target duration
+   * @param eventId {EntryId} - id of the event
+   */
+  const matchGroupDuration = useCallback(
+    async (eventId: EntryId) => {
+      const rundownId = getCurrentRundownData()?.id;
+      if (!rundownId) {
+        throw new Error('Rundown not initialised');
+      }
+
+      try {
+        await requestFitGroupTarget(rundownId, eventId);
+      } catch (error) {
+        logAxiosError('Error updating event', error);
+      }
+    },
+    [getCurrentRundownData],
  );

  /**
@@ -491,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);
            }
          }
        });
@@ -1009,6 +1059,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
      swapEvents,
      updateEntry,
      updateTimer,
+      matchGroupDuration,
    }),
    [
      addEntry,
@@ -1026,6 +1077,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
      swapEvents,
      updateEntry,
      updateTimer,
+      matchGroupDuration,
    ],
  );
 }
@@ -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(
@@ -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';
+}
@@ -17,15 +17,9 @@ const logger = createStore<LogStore>(() => ({

 export const useLogData = () => useStore(logger);

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

 export const clearLogs = () => logger.setState({ logs: [] });
@@ -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,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 }));
-}
@@ -4,6 +4,10 @@ export function isKeyEnter<T>(event: KeyboardEvent<T>): boolean {
  return event.key === 'Enter';
 }

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

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

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

    > td:first-child {
      box-shadow: inset 3px 0 $blue-400;
@@ -200,8 +200,7 @@ $card-padding: 2rem;
 .overlay {
  position: absolute;
  z-index: $zindex-backdrop;
-  width: 100%;
-  height: 100%;
+  inset: 0;
  backdrop-filter: blur(2px);
  display: grid;
  place-content: center;
@@ -0,0 +1,7 @@
+.updateIndicator {
+  width: 0.5em;
+  height: 0.5em;
+  flex: 0 0 auto;
+  border-radius: 99px;
+  background-color: $red-400;
+}
@@ -3,6 +3,8 @@ import useAppVersion from '../../../../common/hooks-query/useAppVersion';
 import { appVersion, isOntimeCloud, websiteUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';

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

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

-.titleSection {
+.titleSection,
+.filterSection,
+.oscSection,
+.httpSection,
+.actionSection {
  display: grid;
-  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
+
+  button {
+    align-self: flex-end;
+  }
 }

 .titleSection,
 .ruleSection,
-.card {
-  label {
-    display: block;
+.filterSection,
+.oscSection,
+.httpSection,
+.actionSection {
+  label,
+  div {
+    // we use the div as non-interactive placeholder for button cells
+    // it needs to match the size of the label element
    font-size: calc(1rem - 3px);
+  }
+  label {
    color: $label-gray;
  }
 }

-/** shared shell for a single filter or output */
-.card {
-  border: 1px solid $white-10;
+.titleSection {
+  grid-template-columns: 1fr;
+}
+
+.filterSection {
+  grid-template-columns: 2fr 1fr 2fr auto;
+}
+
+.oscSection {
+  grid-template-columns: 9rem 5rem 3fr 4fr auto;
+}
+
+.httpSection {
+  grid-template-columns: 1fr auto;
+}
+
+.actionSection {
+  grid-template-columns: auto 1fr 1fr auto;
+
+  .test {
+    grid-column: -1;
+  }
+}
+
+.outputCard {
  border-left: 0.25rem solid $gray-1200;
-  border-radius: $component-border-radius-md;
-  background-color: $black-10;
-}
-
-.cardHeader {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid $white-10;
-}
-
-/** pushes the actions to the end of the header, and absorbs any overflow */
-.cardSummary {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: $aux-text-size;
-  color: $secondary-text-gray;
-}
-
-.cardBody {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
-  gap: 0.5rem 0.75rem;
-  padding: 0.75rem;
-}
-
-/** for fields that read badly when narrow: OSC address and args, URLs, message text */
-.spanFull {
-  grid-column: 1 / -1;
-}
-
-.testOk {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: $aux-text-size;
-  color: $green-400;
-}
-
-.testError {
-  padding: 0 0.75rem 0.5rem;
-}
-
-.tagOsc {
-  background-color: $blue-1000;
-  color: $blue-300;
-}
-
-.tagHttp {
-  background-color: $green-1000;
-  color: $green-300;
-}
-
-.tagOntime {
-  background-color: $gray-1000;
-  color: $gray-200;
+  padding-left: 0.5rem;
 }
@@ -1,31 +1,21 @@
 import {
  Automation,
  AutomationDTO,
-  AutomationFilter,
  HTTPOutput,
  OSCOutput,
  OntimeAction,
-  TimerLifeCycle,
-  Trigger,
  isHTTPOutput,
  isOSCOutput,
  isOntimeAction,
 } from 'ontime-types';
-import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
-import { IoAdd, IoCheckmark, IoTrash } from 'react-icons/io5';
+import { IoAdd, IoTrash } from 'react-icons/io5';

-import {
-  addAutomation,
-  addTrigger,
-  deleteTrigger,
-  editAutomation,
-  testOutput,
-} from '../../../../common/api/automation';
+import { addAutomation, editAutomation, testOutput } from '../../../../common/api/automation';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import IconButton from '../../../../common/components/buttons/IconButton';
-import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import Info from '../../../../common/components/info/Info';
 import Input from '../../../../common/components/input/input/Input';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
@@ -37,7 +27,7 @@ import useAutomationSettings from '../../../../common/hooks-query/useAutomationS
 import useCustomFields from '../../../../common/hooks-query/useCustomFields';
 import { startsWithHttp } from '../../../../common/utils/regex';
 import * as Panel from '../../panel-utils/PanelUtils';
-import { cycles, isAutomation, makeFieldList, operators } from './automationUtils';
+import { isAutomation, makeFieldList } from './automationUtils';
 import OntimeActionForm from './OntimeActionForm';
 import TemplateInput from './template-input/TemplateInput';

@@ -46,67 +36,17 @@ import style from './AutomationForm.module.scss';
 const integrationsDocsUrl = 'https://docs.getontime.no/api/automation/#using-variables-in-automation';
 const formId = 'automation-form';

-/** how long a successful test keeps its confirmation on screen */
-const testFeedbackDuration = 2000;
-
-type TestState = { status: 'sending' | 'ok' | 'error'; message?: string };
-
-/** lifecycles that fire continuously, and are worth a warning before a user picks one */
-const continuousCycles: TimerLifeCycle[] = [TimerLifeCycle.onClock, TimerLifeCycle.onUpdate];
-
 interface AutomationFormProps {
  automation: Automation | AutomationDTO;
-  /** global triggers, used to resolve which lifecycles this automation is currently bound to */
-  triggers: Trigger[];
  onClose: () => void;
 }

-export default function AutomationForm({ automation, triggers, onClose }: AutomationFormProps) {
+export default function AutomationForm({ automation, onClose }: AutomationFormProps) {
  const isEdit = isAutomation(automation);
  const { data } = useCustomFields();
  const { refetch } = useAutomationSettings();
  const fieldList = useMemo(() => makeFieldList(data), [data]);

-  /**
-   * Triggers are a separate entity, so they live outside the form state.
-   *
-   * We snapshot the automation's triggers when the form opens and reconcile against that
-   * snapshot, never against the live prop: settings are polled, so a trigger created
-   * elsewhere while this form is open must not be deleted by a save that never saw it.
-   */
-  const [initialTriggers] = useState<Trigger[]>(() =>
-    isAutomation(automation) ? triggers.filter((trigger) => trigger.automationId === automation.id) : [],
-  );
-  const initialCycles = useMemo(
-    () => Array.from(new Set(initialTriggers.map((trigger) => trigger.trigger))),
-    [initialTriggers],
-  );
-  const [selectedCycles, setSelectedCycles] = useState<TimerLifeCycle[]>(initialCycles);
-  /** set once a create succeeds, so a retry after a failed trigger sync edits instead of creating a duplicate */
-  const [createdId, setCreatedId] = useState<string | null>(null);
-
-  const cyclesAreDirty =
-    selectedCycles.length !== initialCycles.length ||
-    selectedCycles.some((cycle) => !initialCycles.includes(cycle)) ||
-    initialCycles.some((cycle) => !selectedCycles.includes(cycle));
-
-  const toggleCycle = (cycle: TimerLifeCycle) => {
-    setSelectedCycles((prev) => (prev.includes(cycle) ? prev.filter((c) => c !== cycle) : [...prev, cycle]));
-  };
-
-  /**
-   * A lifecycle can carry several differently named triggers, which the chips collapse into one.
-   * Unchecking it removes all of them, so say which ones rather than deleting them quietly.
-   */
-  const triggersToRemove = initialTriggers.filter((trigger) => !selectedCycles.includes(trigger.trigger));
-
-  /**
-   * Test results are keyed by the field array id rather than the index:
-   * removing an output shifts every index after it, which would leave feedback on the wrong row
-   */
-  const [testResults, setTestResults] = useState<Record<string, TestState>>({});
-  const feedbackTimers = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
-
  const {
    control,
    handleSubmit,
@@ -153,26 +93,6 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
    setFocus('title');
  }, [setFocus]);

-  // the timers outlive a fast close, clearing them avoids setting state on an unmounted form
-  useEffect(() => {
-    const timers = feedbackTimers.current;
-    return () => Object.values(timers).forEach(clearTimeout);
-  }, []);
-
-  const reportTest = (key: string, state: TestState) => {
-    setTestResults((prev) => ({ ...prev, [key]: state }));
-    clearTimeout(feedbackTimers.current[key]);
-
-    if (state.status === 'ok') {
-      feedbackTimers.current[key] = setTimeout(() => {
-        setTestResults((prev) => {
-          const { [key]: _discarded, ...rest } = prev;
-          return rest;
-        });
-      }, testFeedbackDuration);
-    }
-  };
-
  const handleAddNewFilter = () => {
    appendFilter({ field: '', operator: 'equals', value: '' });
  };
@@ -190,15 +110,12 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
    appendOutput({ type: 'ontime', action: 'aux1-start' });
  };

-  const handleTestOSCOutput = async (index: number, key: string) => {
-    const values = getValues(`outputs.${index}`) as OSCOutput;
-    if (!values.targetIP || !values.targetPort || !values.address) {
-      reportTest(key, { status: 'error', message: 'Fill in the target and address before testing' });
-      return;
-    }
-
-    reportTest(key, { status: 'sending' });
+  const handleTestOSCOutput = async (index: number) => {
    try {
+      const values = getValues(`outputs.${index}`) as OSCOutput;
+      if (!values.targetIP || !values.targetPort || !values.address) {
+        return;
+      }
      await testOutput({
        type: 'osc',
        targetIP: values.targetIP,
@@ -206,110 +123,67 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
        address: values.address,
        args: values.args,
      });
-      // OSC is fire and forget over UDP, the most we can honestly claim is that we sent it
-      reportTest(key, { status: 'ok', message: 'Sent' });
-    } catch (error) {
-      reportTest(key, { status: 'error', message: maybeAxiosError(error) });
+    } catch (_error) {
+      /** we dont handle errors here, users should use the network tab */
    }
  };

-  const handleTestHTTPOutput = async (index: number, key: string) => {
-    const values = getValues(`outputs.${index}`) as HTTPOutput;
-    if (!values.url) {
-      reportTest(key, { status: 'error', message: 'Add a target URL before testing' });
-      return;
-    }
-
-    reportTest(key, { status: 'sending' });
+  const handleTestHTTPOutput = async (index: number) => {
    try {
-      await testOutput({ type: 'http', url: values.url });
-      reportTest(key, { status: 'ok', message: 'Sent' });
-    } catch (error) {
-      reportTest(key, { status: 'error', message: maybeAxiosError(error) });
+      const values = getValues(`outputs.${index}`) as HTTPOutput;
+      if (!values.url) {
+        return;
+      }
+      await testOutput({
+        type: 'http',
+        url: values.url,
+      });
+    } catch (_error) {
+      /** we dont handle errors here, users should use the network tab */
    }
  };

-  const handleTestOntimeAction = async (index: number, key: string) => {
-    const values = getValues(`outputs.${index}`) as OntimeAction;
-
-    reportTest(key, { status: 'sending' });
+  const handleTestOntimeAction = async (index: number) => {
    try {
+      const values = getValues(`outputs.${index}`) as OntimeAction;
      // NOTE: there is no meaningful validation to do here, we let the server deal with the data
-      await testOutput({ ...values, type: 'ontime' });
-      reportTest(key, { status: 'ok', message: 'Done' });
-    } catch (error) {
-      reportTest(key, { status: 'error', message: maybeAxiosError(error) });
-    }
-  };
-
-  /**
-   * Reconciles the lifecycle selection against the global triggers.
-   * Runs after the automation itself is saved: a new automation has no id until then.
-   *
-   * Both sides are diffed against the mount-time snapshot, so this only ever removes
-   * triggers the user could actually see when they made the change.
-   */
-  const syncTriggers = async (automationId: string, title: string) => {
-    for (const trigger of triggersToRemove) {
-      await deleteTrigger(trigger.id);
-    }
-
-    const toAdd = selectedCycles.filter((cycle) => !initialCycles.includes(cycle));
-    for (const cycle of toAdd) {
-      const label = cycles.find(({ value }) => value === cycle)?.label ?? cycle;
-      await addTrigger({ title: `${title} — ${label}`, trigger: cycle, automationId });
+      await testOutput({
+        ...values,
+        type: 'ontime',
+      });
+    } catch (_error) {
+      /** we dont handle errors here */
    }
  };

  const onSubmit = async (values: AutomationDTO) => {
-    // saving happens in two requests, so a retry after a partial failure must edit rather than create again
-    const existingId = isAutomation(automation) ? automation.id : createdId;
-    let automationId: string;
-
-    try {
-      if (existingId) {
-        await editAutomation(existingId, { id: existingId, ...values });
-        automationId = existingId;
-      } else {
-        const created = await addAutomation(values);
-        setCreatedId(created.id);
-        automationId = created.id;
-      }
-    } catch (error) {
-      setError('root', { message: maybeAxiosError(error) });
-      return;
+    if (isAutomation(automation)) {
+      await handleEdit(automation.id, { id: automation.id, ...values });
+    } else {
+      await handleCreate(values);
    }
-
-    try {
-      await syncTriggers(automationId, values.title);
-    } catch (error) {
-      // the automation itself is saved, only its triggers failed. Keep the form open so the user can retry
-      refetch();
-      setError('root', { message: `Automation saved, but its triggers failed: ${maybeAxiosError(error)}` });
-      return;
-    }
-
    refetch();
-    onClose();
-  };

-  /** describes a filter in plain language so the user does not have to read the form back to themselves */
-  const describeFilter = (index: number): string | null => {
-    const field = watch(`filters.${index}.field`);
-    if (!field) {
-      return null;
+    async function handleEdit(id: string, values: Automation) {
+      try {
+        await editAutomation(id, values);
+        onClose();
+      } catch (error) {
+        setError('root', { message: maybeAxiosError(error) });
+      }
    }

-    const fieldLabel = fieldList.find((option) => option.value === field)?.label ?? field;
-    const operator = watch(`filters.${index}.operator`);
-    const operatorLabel = operators.find((option) => option.value === operator)?.label ?? operator;
-    const value = watch(`filters.${index}.value`);
-
-    return `${fieldLabel} ${operatorLabel} ${value ? `“${value}”` : 'nothing'}`;
+    async function handleCreate(values: AutomationDTO) {
+      try {
+        await addAutomation(values);
+        onClose();
+      } catch (error) {
+        setError('root', { message: maybeAxiosError(error) });
+      }
+    }
  };

-  const canSubmit = !isSubmitting && (isDirty || cyclesAreDirty) && isValid;
-  const hasContinuousCycle = selectedCycles.some((cycle) => continuousCycles.includes(cycle));
+  const canSubmit = !isSubmitting && isDirty && isValid;

  return (
    <Modal
@@ -317,7 +191,6 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
      onClose={onClose}
      showBackdrop
      showCloseButton
-      size='wide'
      title={isEdit ? 'Edit automation' : 'Create automation'}
      bodyElements={
        <form id={formId} onSubmit={handleSubmit(onSubmit)} className={style.outerColumn}>
@@ -334,119 +207,87 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
              </label>
              <Panel.Error>{errors.title?.message}</Panel.Error>
            </div>
-
-            <div className={style.titleSection}>
-              <label id='runs-on-label'>Runs on</label>
-              <Panel.Description>
-                Pick the moments in the timer lifecycle that should run this automation. You can also attach it to a
-                single event from the event editor.
-              </Panel.Description>
-              <Panel.InlineElements relation='inner' wrap='wrap' aria-labelledby='runs-on-label' role='group'>
-                {cycles.map(({ id, label, value }) => {
-                  const cycle = value as TimerLifeCycle;
-                  const isSelected = selectedCycles.includes(cycle);
-                  return (
-                    <Button
-                      key={id}
-                      size='small'
-                      variant={isSelected ? 'primary' : 'subtle'}
-                      aria-pressed={isSelected}
-                      onClick={() => toggleCycle(cycle)}
-                    >
-                      {label}
-                    </Button>
-                  );
-                })}
-              </Panel.InlineElements>
-              {hasContinuousCycle && (
-                <Panel.Description tone='warning'>
-                  Every second and On Timer Update fire continuously while the timer runs. Add a filter unless you mean
-                  to send on every tick.
-                </Panel.Description>
-              )}
-              {triggersToRemove.length > 0 && (
-                <Panel.Description tone='warning'>
-                  {`Saving removes ${triggersToRemove.length === 1 ? 'the trigger' : `${triggersToRemove.length} triggers`}: ${triggersToRemove
-                    .map((trigger) => trigger.title)
-                    .join(', ')}`}
-                </Panel.Description>
-              )}
-            </div>
          </div>

          <div className={style.innerColumn}>
            <h3>Filters (optional)</h3>
-            <Panel.Description>
-              Without filters the outputs are sent every time the automation is triggered.
-            </Panel.Description>
            <div className={style.ruleSection}>
-              {fieldFilters.length > 1 && (
-                <label>
-                  Trigger outputs if
-                  <RadioGroup
-                    orientation='horizontal'
-                    value={watch('filterRule')}
-                    onValueChange={(value) => setValue('filterRule', value, { shouldDirty: true })}
-                    items={[
-                      { value: 'all', label: 'All filters pass' },
-                      { value: 'any', label: 'Any filter passes' },
-                    ]}
-                  />
-                </label>
-              )}
+              <label>
+                Trigger outputs if
+                <RadioGroup
+                  orientation='horizontal'
+                  value={watch('filterRule')}
+                  onValueChange={(value) => setValue('filterRule', value, { shouldDirty: true })}
+                  items={[
+                    { value: 'all', label: 'All filters pass' },
+                    { value: 'any', label: 'Any filter passes' },
+                  ]}
+                />
+              </label>
              {fieldFilters.map((field, index) => {
-                const description = describeFilter(index);
+                const key = `filters.${index}.field.${field.id}`;
                return (
-                  <div key={field.id} className={style.card}>
-                    <div className={style.cardHeader}>
-                      <Tag>Filter</Tag>
-                      <span className={style.cardSummary}>{description}</span>
-                      <IconButton
-                        aria-label='Delete filter'
-                        variant='ghosted-destructive'
-                        onClick={() => removeFilter(index)}
-                      >
-                        <IoTrash />
-                      </IconButton>
-                    </div>
-                    <div className={style.cardBody}>
-                      <label>
-                        Runtime data source
-                        <Select<string | null>
-                          // need to normalize '' to null for the Select to show the placeholder
-                          value={watch(`filters.${index}.field`) || null}
-                          onValueChange={(value) => {
-                            if (value === null) return;
-                            setValue(`filters.${index}.field`, value, { shouldDirty: true });
-                          }}
-                          options={fieldList.map(({ value, label }) => ({
-                            value,
-                            label,
-                            disabled: value === null,
-                          }))}
-                          aria-label='Event field'
-                        />
-                        <Panel.Error>{errors.filters?.[index]?.field?.message}</Panel.Error>
-                      </label>
-                      <label>
-                        Matching condition
-                        <Select
-                          value={watch(`filters.${index}.operator`)}
-                          onValueChange={(value: string | null) => {
-                            if (value === null) return;
-                            setValue(`filters.${index}.operator`, value as AutomationFilter['operator'], {
-                              shouldDirty: true,
-                            });
-                          }}
-                          options={operators}
-                          aria-label='Operator'
-                        />
-                        <Panel.Error>{errors.filters?.[index]?.operator?.message}</Panel.Error>
-                      </label>
-                      <label>
-                        Value to match
-                        <Input {...register(`filters.${index}.value`)} fluid placeholder='<empty / no value>' />
-                      </label>
+                  <div key={key} className={style.filterSection}>
+                    <label>
+                      Runtime data source
+                      <Select<string | null>
+                        // need to normalize '' to null for the Select to show the placeholder
+                        value={watch(`filters.${index}.field`) || null}
+                        onValueChange={(value) => {
+                          if (value === null) return;
+                          setValue(`filters.${index}.field`, value, { shouldDirty: true });
+                        }}
+                        options={fieldList.map(({ value, label }) => ({
+                          value,
+                          label,
+                          disabled: value === null,
+                        }))}
+                        aria-label='Event field'
+                      />
+                      <Panel.Error>{errors.filters?.[index]?.field?.message}</Panel.Error>
+                    </label>
+                    <label>
+                      Matching condition
+                      <Select
+                        value={watch(`filters.${index}.operator`)}
+                        onValueChange={(value: string | null) => {
+                          if (value === null) return;
+                          setValue(
+                            `filters.${index}.operator`,
+                            value as
+                              | 'equals'
+                              | 'not_equals'
+                              | 'greater_than'
+                              | 'less_than'
+                              | 'contains'
+                              | 'not_contains',
+                            { shouldDirty: true },
+                          );
+                        }}
+                        options={[
+                          { value: 'equals', label: 'equals' },
+                          { value: 'not_equals', label: 'not equals' },
+                          { value: 'contains', label: 'contains' },
+                        ]}
+                        aria-label='Operator'
+                      />
+                      <Panel.Error>{errors.filters?.[index]?.operator?.message}</Panel.Error>
+                    </label>
+                    <label>
+                      Value to match
+                      <Input {...register(`filters.${index}.value`)} fluid placeholder='<empty / no value>' />
+                    </label>
+                    <div>
+                      <span>&nbsp;</span>
+                      <div>
+                        <IconButton
+                          aria-label='Delete'
+                          variant='ghosted-destructive'
+                          onClick={() => removeFilter(index)}
+                        >
+                          <IoTrash />
+                        </IconButton>
+                      </div>
                    </div>
                  </div>
                );
@@ -468,13 +309,6 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
              <ExternalLink href={integrationsDocsUrl}>read the docs</ExternalLink>
            </Info>

-            {fieldOutputs.length === 0 && (
-              <Panel.EmptyState
-                title='This automation does nothing yet'
-                description='An automation without outputs will be triggered, but it has nothing to send.'
-              />
-            )}
-
            {fieldOutputs.map((output, index) => {
              if (isOSCOutput(output)) {
                const rowErrors = errors.outputs?.[index] as
@@ -487,61 +321,75 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
                  | undefined;

                return (
-                  <OutputCard
-                    key={output.id}
-                    label='OSC'
-                    kindClass={style.tagOsc}
-                    summary={watch(`outputs.${index}.address`)}
-                    testState={testResults[output.id]}
-                    onTest={() => handleTestOSCOutput(index, output.id)}
-                    onDelete={() => removeOutput(index)}
-                  >
-                    <label>
-                      Target IP
-                      <Input
-                        {...register(`outputs.${index}.targetIP`, {
-                          required: { value: true, message: 'Required field' },
-                        })}
-                        fluid
-                        placeholder='127.0.0.1'
-                      />
-                      <Panel.Error>{rowErrors?.targetIP?.message}</Panel.Error>
-                    </label>
-                    <label>
-                      Target Port
-                      <Input
-                        {...register(`outputs.${index}.targetPort`, {
-                          required: { value: true, message: 'Required field' },
-                          setValueAs: (value) => (value === '' ? 0 : Number(value)),
-                          max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
-                          min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
-                        })}
-                        fluid
-                        type='number'
-                        maxLength={5}
-                        placeholder='8000'
-                      />
-                      <Panel.Error>{rowErrors?.targetPort?.message}</Panel.Error>
-                    </label>
-                    <label className={style.spanFull}>
-                      Address
-                      <TemplateInput
-                        {...register(`outputs.${index}.address`)}
-                        value={output.address}
-                        fluid
-                        placeholder='/cue/start'
-                      />
-                      <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
-                    </label>
-                    <label className={style.spanFull}>
-                      Arguments
-                      <TemplateInput {...register(`outputs.${index}.args`)} value={output.args} fluid placeholder='1' />
-                      <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
-                    </label>
-                  </OutputCard>
+                  <div key={output.id} className={style.outputCard}>
+                    <Tag>OSC</Tag>
+                    <div className={style.oscSection}>
+                      <label>
+                        Target IP
+                        <Input
+                          {...register(`outputs.${index}.targetIP`, {
+                            required: { value: true, message: 'Required field' },
+                          })}
+                          fluid
+                          placeholder='127.0.0.1'
+                        />
+                        <Panel.Error>{rowErrors?.targetIP?.message}</Panel.Error>
+                      </label>
+                      <label>
+                        Target Port
+                        <Input
+                          {...register(`outputs.${index}.targetPort`, {
+                            required: { value: true, message: 'Required field' },
+                            setValueAs: (value) => (value === '' ? 0 : Number(value)),
+                            max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
+                            min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
+                          })}
+                          fluid
+                          type='number'
+                          maxLength={5}
+                          placeholder='8000'
+                        />
+                        <Panel.Error>{rowErrors?.targetPort?.message}</Panel.Error>
+                      </label>
+                      <label>
+                        Address
+                        <TemplateInput
+                          {...register(`outputs.${index}.address`)}
+                          value={output.address}
+                          fluid
+                          placeholder='/cue/start'
+                        />
+                        <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
+                      </label>
+                      <label>
+                        Arguments
+                        <TemplateInput
+                          {...register(`outputs.${index}.args`)}
+                          value={output.args}
+                          fluid
+                          placeholder='1'
+                        />
+                        <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
+                      </label>
+                      <div>
+                        <span>&nbsp;</span>
+                        <Panel.InlineElements relation='inner'>
+                          <Button variant='ghosted-white' onClick={() => handleTestOSCOutput(index)}>
+                            Test
+                          </Button>
+                          <IconButton
+                            aria-label='Delete'
+                            variant='ghosted-destructive'
+                            onClick={() => removeOutput(index)}
+                          >
+                            <IoTrash />
+                          </IconButton>
+                        </Panel.InlineElements>
+                      </div>
+                    </div>
+                  </div>
                );
              }
-
              if (isHTTPOutput(output)) {
                const rowErrors = errors.outputs?.[index] as
                  | {
@@ -549,31 +397,42 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
                    }
                  | undefined;
                return (
-                  <OutputCard
-                    key={output.id}
-                    label='HTTP'
-                    kindClass={style.tagHttp}
-                    testState={testResults[output.id]}
-                    onTest={() => handleTestHTTPOutput(index, output.id)}
-                    onDelete={() => removeOutput(index)}
-                  >
-                    <label className={style.spanFull}>
-                      Target URL
-                      <TemplateInput
-                        {...register(`outputs.${index}.url`, {
-                          required: { value: true, message: 'Required field' },
-                          pattern: {
-                            value: startsWithHttp,
-                            message: 'HTTP messages should target http:// or https://',
-                          },
-                        })}
-                        value={output.url}
-                        fluid
-                        placeholder='http://127.0.0.1/start/1'
-                      />
-                      <Panel.Error>{rowErrors?.url?.message}</Panel.Error>
-                    </label>
-                  </OutputCard>
+                  <div key={output.id} className={style.outputCard}>
+                    <Tag>HTTP</Tag>
+                    <div className={style.httpSection}>
+                      <label>
+                        Target URL
+                        <TemplateInput
+                          {...register(`outputs.${index}.url`, {
+                            required: { value: true, message: 'Required field' },
+                            pattern: {
+                              value: startsWithHttp,
+                              message: 'HTTP messages should target http:// or https://',
+                            },
+                          })}
+                          value={output.url}
+                          fluid
+                          placeholder='http://127.0.0.1/start/1'
+                        />
+                        <Panel.Error>{rowErrors?.url?.message}</Panel.Error>
+                      </label>
+                      <div>
+                        <span>&nbsp;</span>
+                        <Panel.InlineElements relation='inner'>
+                          <Button variant='ghosted-white' onClick={() => handleTestHTTPOutput(index)}>
+                            Test
+                          </Button>
+                          <IconButton
+                            aria-label='Delete'
+                            variant='ghosted-destructive'
+                            onClick={() => removeOutput(index)}
+                          >
+                            <IoTrash />
+                          </IconButton>
+                        </Panel.InlineElements>
+                      </div>
+                    </div>
+                  </div>
                );
              }

@@ -588,14 +447,8 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
                    }
                  | undefined;
                return (
-                  <OutputCard
-                    key={output.id}
-                    label='Ontime action'
-                    kindClass={style.tagOntime}
-                    testState={testResults[output.id]}
-                    onTest={() => handleTestOntimeAction(index, output.id)}
-                    onDelete={() => removeOutput(index)}
-                  >
+                  <div key={output.id} className={style.outputCard}>
+                    <Tag>Ontime action</Tag>
                    <OntimeActionForm
                      value={output.action}
                      index={index}
@@ -603,40 +456,38 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
                      rowErrors={rowErrors}
                      setValue={setValue}
                      watch={watch}
-                    />
-                  </OutputCard>
+                    >
+                      <span>&nbsp;</span>
+                      <Panel.InlineElements relation='inner'>
+                        <Button variant='ghosted-white' onClick={() => handleTestOntimeAction(index)}>
+                          Test
+                        </Button>
+                        <IconButton
+                          aria-label='Delete'
+                          variant='ghosted-destructive'
+                          onClick={() => removeOutput(index)}
+                        >
+                          <IoTrash />
+                        </IconButton>
+                      </Panel.InlineElements>
+                    </OntimeActionForm>
+                  </div>
                );
              }

              return null;
            })}
-            <div>
-              <DropdownMenu
-                render={<Button />}
-                items={[
-                  {
-                    type: 'item',
-                    label: 'OSC',
-                    description: 'Send an OSC message to a device on the network',
-                    onClick: handleAddNewOSCOutput,
-                  },
-                  {
-                    type: 'item',
-                    label: 'HTTP',
-                    description: 'Call a URL, for webhooks and REST APIs',
-                    onClick: handleAddNewHTTPOutput,
-                  },
-                  {
-                    type: 'item',
-                    label: 'Ontime action',
-                    description: 'Change something inside Ontime, like a message or an aux timer',
-                    onClick: handleAddnewOntimeAction,
-                  },
-                ]}
-              >
-                Add output <IoAdd />
-              </DropdownMenu>
-            </div>
+            <Panel.InlineElements relation='inner'>
+              <Button onClick={handleAddNewOSCOutput}>
+                OSC <IoAdd />
+              </Button>
+              <Button onClick={handleAddNewHTTPOutput}>
+                HTTP <IoAdd />
+              </Button>
+              <Button onClick={handleAddnewOntimeAction}>
+                Ontime action <IoAdd />
+              </Button>
+            </Panel.InlineElements>
          </div>
        </form>
      }
@@ -652,42 +503,3 @@ export default function AutomationForm({ automation, triggers, onClose }: Automa
    />
  );
 }
-
-interface OutputCardProps {
-  label: string;
-  kindClass?: string;
-  summary?: string;
-  testState?: TestState;
-  onTest: () => void;
-  onDelete: () => void;
-  children: ReactNode;
-}
-
-/**
- * Shared chrome for every output kind: the type tag and the actions live in the header,
- * so they stop competing with the form fields for grid columns
- */
-function OutputCard({ label, kindClass, summary, testState, onTest, onDelete, children }: OutputCardProps) {
-  return (
-    <div className={style.card}>
-      <div className={style.cardHeader}>
-        <Tag className={kindClass}>{label}</Tag>
-        <span className={style.cardSummary}>{summary}</span>
-        {testState?.status === 'ok' && (
-          <span className={style.testOk}>
-            <IoCheckmark />
-            {testState.message}
-          </span>
-        )}
-        <Button variant='ghosted-white' onClick={onTest} loading={testState?.status === 'sending'}>
-          Test
-        </Button>
-        <IconButton aria-label='Delete output' variant='ghosted-destructive' onClick={onDelete}>
-          <IoTrash />
-        </IconButton>
-      </div>
-      {testState?.status === 'error' && <Panel.Error className={style.testError}>{testState.message}</Panel.Error>}
-      <div className={style.cardBody}>{children}</div>
-    </div>
-  );
-}
@@ -30,12 +30,7 @@ export default function AutomationPanel({ location }: PanelBaseProps) {
        />
      </div>
      <div ref={automationsRef}>
-        <AutomationsList
-          automations={data.automations}
-          triggers={data.triggers}
-          enabledAutomations={automationState}
-          isLoading={isLoading}
-        />
+        <AutomationsList automations={data.automations} enabledAutomations={automationState} isLoading={isLoading} />
      </div>
      <div ref={triggersRef}>
        <TriggersList
@@ -12,7 +12,6 @@ import { preventEscape } from '../../../../common/utils/keyEvent';
 import { isOnlyNumbers } from '../../../../common/utils/regex';
 import { isOntimeCloud } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
-import useAppSettingsNavigation from '../../useAppSettingsNavigation';

 const oscApiDocsUrl = 'https://docs.getontime.no/api/protocols/osc/';

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

@@ -1,3 +0,0 @@
-.muted {
-  color: $muted-gray;
-}
@@ -1,21 +1,16 @@
-import { Automation, AutomationDTO, NormalisedAutomation, Trigger } from 'ontime-types';
-import { Fragment, useMemo, useState } from 'react';
-import { IoAdd, IoPencil, IoSparklesOutline, IoTrash } from 'react-icons/io5';
+import { AutomationDTO, NormalisedAutomation } from 'ontime-types';
+import { Fragment, useState } from 'react';
+import { IoAdd, IoPencil, IoTrash } from 'react-icons/io5';

+import { deleteAutomation } from '../../../../common/api/automation';
+import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import IconButton from '../../../../common/components/buttons/IconButton';
 import Info from '../../../../common/components/info/Info';
 import Tag from '../../../../common/components/tag/Tag';
-import { getLifecycleLabel } from '../../../../common/constants/timerLifecycle';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
-import { summariseOutputs } from '../../../../common/utils/automationOutputs';
 import * as Panel from '../../panel-utils/PanelUtils';
 import AutomationForm from './AutomationForm';
-import { groupTriggersByAutomation, isAutomation } from './automationUtils';
-import DeleteAutomationDialog from './DeleteAutomationDialog';
-import RecipeLibraryModal from './recipes/RecipeLibraryModal';
-
-import style from './AutomationsList.module.scss';

 const automationPlaceholder: AutomationDTO = {
  title: '',
@@ -26,79 +21,39 @@ const automationPlaceholder: AutomationDTO = {

 interface AutomationsListProps {
  automations: NormalisedAutomation;
-  triggers: Trigger[];
  enabledAutomations?: boolean;
  isLoading: boolean;
 }

-export default function AutomationsList({
-  automations,
-  triggers,
-  enabledAutomations,
-  isLoading,
-}: AutomationsListProps) {
+export default function AutomationsList({ automations, enabledAutomations, isLoading }: AutomationsListProps) {
  const { refetch } = useAutomationSettings();
  const [automationFormData, setAutomationFormData] = useState<AutomationDTO | null>(null);
-  const [showRecipes, setShowRecipes] = useState(false);
-  const [deleteTarget, setDeleteTarget] = useState<Automation | null>(null);
+  const [deleteError, setDeleteError] = useState<string | null>(null);

-  /**
-   * A recipe lands in the editor rather than only in the list.
-   * Seeing it as an editable automation is the point, and recipes with an
-   * external target are unusable until the user changes it anyway.
-   */
-  const handleRecipeInstalled = async (created: Automation) => {
-    setShowRecipes(false);
-    await refetch();
-    setAutomationFormData(created);
+  const handleDelete = async (id: string) => {
+    try {
+      setDeleteError(null);
+      await deleteAutomation(id);
+    } catch (error) {
+      setDeleteError(maybeAxiosError(error));
+    } finally {
+      refetch();
+    }
  };

-  const handleDeleted = async () => {
-    setDeleteTarget(null);
-    await refetch();
-  };
-
-  const lifecyclesByAutomation = useMemo(() => groupTriggersByAutomation(triggers), [triggers]);
-
  const arrayAutomations = Object.keys(automations);

  return (
    <Panel.Section>
      <Panel.Card>
        {automationFormData !== null && (
-          <AutomationForm
-            // the form snapshots the automation's lifecycles on mount, so it must never be
-            // reused across two different automations
-            key={isAutomation(automationFormData) ? automationFormData.id : 'new'}
-            automation={automationFormData}
-            triggers={triggers}
-            onClose={() => setAutomationFormData(null)}
-          />
-        )}
-        {showRecipes && (
-          <RecipeLibraryModal
-            onClose={() => setShowRecipes(false)}
-            onInstalled={(_recipe, created) => handleRecipeInstalled(created)}
-          />
-        )}
-        {deleteTarget !== null && (
-          <DeleteAutomationDialog
-            automation={deleteTarget}
-            blockingTriggers={triggers.filter((trigger) => trigger.automationId === deleteTarget.id)}
-            onCancel={() => setDeleteTarget(null)}
-            onDeleted={handleDeleted}
-          />
+          <AutomationForm automation={automationFormData} onClose={() => setAutomationFormData(null)} />
        )}
        <Panel.SubHeader>
          Manage automations
-          <Panel.InlineElements relation='inner'>
-            <Button onClick={() => setShowRecipes(true)}>
-              Browse recipes <IoSparklesOutline />
-            </Button>
-            <Button onClick={() => setAutomationFormData(automationPlaceholder)}>
-              New <IoAdd />
-            </Button>
-          </Panel.InlineElements>
+          <Button onClick={() => setAutomationFormData(automationPlaceholder)}>
+            New <IoAdd />
+          </Button>
        </Panel.SubHeader>

        <Panel.Divider />
@@ -114,10 +69,10 @@ export default function AutomationsList({
          <Panel.Table>
            <thead>
              <tr>
-                <th style={{ width: '35%' }}>Title</th>
-                <th style={{ width: '25%' }}>Runs on</th>
-                <th style={{ width: '15%' }}>Filter rule</th>
-                <th style={{ width: '15%' }}>Sends</th>
+                <th style={{ width: '45%' }}>Title</th>
+                <th style={{ width: '15%' }}>Trigger rule</th>
+                <th style={{ width: '15%' }}>Filters</th>
+                <th style={{ width: '15%' }}>Outputs</th>
                <th />
              </tr>
            </thead>
@@ -127,14 +82,9 @@ export default function AutomationsList({
                  title='No automations yet'
                  description='An automation sends OSC or HTTP messages, or runs an Ontime action, whenever a trigger fires.'
                  action={
-                    <Panel.InlineElements relation='inner'>
-                      <Button variant='primary' onClick={() => setShowRecipes(true)}>
-                        Browse recipes <IoSparklesOutline />
-                      </Button>
-                      <Button onClick={() => setAutomationFormData(automationPlaceholder)}>
-                        Create from scratch <IoAdd />
-                      </Button>
-                    </Panel.InlineElements>
+                    <Button variant='primary' onClick={() => setAutomationFormData(automationPlaceholder)}>
+                      Create automation <IoAdd />
+                    </Button>
                  }
                />
              )}
@@ -142,49 +92,27 @@ export default function AutomationsList({
                if (!Object.hasOwn(automations, automationId)) {
                  return null;
                }
-                const automation = automations[automationId];
-                const lifecycles = lifecyclesByAutomation[automationId] ?? [];
-                const outputs = summariseOutputs(automation.outputs);
-
                return (
                  <Fragment key={automationId}>
                    <tr>
-                      <td>{automation.title}</td>
-                      <Panel.InlineElements as='td' relation='inner' wrap='wrap'>
-                        {lifecycles.length === 0 ? (
-                          <Tag variant='warning'>Never runs</Tag>
-                        ) : (
-                          lifecycles.map((cycle) => <Tag key={cycle}>{getLifecycleLabel(cycle)}</Tag>)
-                        )}
-                      </Panel.InlineElements>
+                      <td>{automations[automationId].title}</td>
                      <td>
-                        {automation.filters.length === 0 ? (
-                          <span className={style.muted}>—</span>
-                        ) : (
-                          <Tag>{automation.filterRule === 'all' ? 'All filters' : 'Any filter'}</Tag>
-                        )}
+                        <Tag>{automations[automationId].filterRule}</Tag>
                      </td>
-                      <Panel.InlineElements as='td' relation='inner' wrap='wrap'>
-                        {outputs.length === 0 ? (
-                          <Tag variant='warning'>No outputs</Tag>
-                        ) : (
-                          outputs.map(({ type, label, count }) => (
-                            <Tag key={type}>{count > 1 ? `${label} ×${count}` : label}</Tag>
-                          ))
-                        )}
-                      </Panel.InlineElements>
+                      <td>{automations[automationId].filters.length}</td>
+                      <td>{automations[automationId].outputs.length}</td>
                      <Panel.InlineElements align='end' relation='inner' as='td'>
                        <IconButton
                          variant='ghosted-white'
                          aria-label='Edit entry'
-                          onClick={() => setAutomationFormData(automation)}
+                          onClick={() => setAutomationFormData(automations[automationId])}
                        >
                          <IoPencil />
                        </IconButton>
                        <IconButton
                          variant='ghosted-destructive'
                          aria-label='Delete entry'
-                          onClick={() => setDeleteTarget(automation)}
+                          onClick={() => handleDelete(automationId)}
                        >
                          <IoTrash />
                        </IconButton>
@@ -193,6 +121,13 @@ export default function AutomationsList({
                  </Fragment>
                );
              })}
+              {deleteError && (
+                <tr>
+                  <td colSpan={5}>
+                    <Panel.Error>{deleteError}</Panel.Error>
+                  </td>
+                </tr>
+              )}
            </tbody>
          </Panel.Table>
        </Panel.Section>
@@ -1,101 +0,0 @@
-import type { Automation, Trigger } from 'ontime-types';
-import { useState } from 'react';
-
-import { deleteAutomation } from '../../../../common/api/automation';
-import { maybeAxiosError } from '../../../../common/api/utils';
-import Button from '../../../../common/components/buttons/Button';
-import Dialog from '../../../../common/components/dialog/Dialog';
-import Info from '../../../../common/components/info/Info';
-import { getLifecycleLabel } from '../../../../common/constants/timerLifecycle';
-import * as Panel from '../../panel-utils/PanelUtils';
-
-interface DeleteAutomationDialogProps {
-  automation: Automation;
-  /** global triggers pointing at this automation, they block the delete server side */
-  blockingTriggers: Trigger[];
-  onCancel: () => void;
-  onDeleted: () => void;
-}
-
-/**
- * The server refuses to delete an automation that is still referenced, and the panel used to
- * dump that refusal into a stray row under the table. This dialog confirms first and, on a
- * refusal, names what is blocking it: global triggers to remove from the Global Triggers list,
- * or an event reference to remove from the event editor. It does not delete those triggers for
- * the user — a single extra step there is safer than a delete-then-restore sequence here.
- */
-export default function DeleteAutomationDialog({
-  automation,
-  blockingTriggers,
-  onCancel,
-  onDeleted,
-}: DeleteAutomationDialogProps) {
-  const [error, setError] = useState<string | null>(null);
-  const [isDeleting, setIsDeleting] = useState(false);
-
-  const handleDelete = async () => {
-    setError(null);
-    setIsDeleting(true);
-    try {
-      await deleteAutomation(automation.id);
-      onDeleted();
-    } catch (error) {
-      setError(maybeAxiosError(error));
-    } finally {
-      setIsDeleting(false);
-    }
-  };
-
-  return (
-    <Dialog
-      isOpen
-      onClose={onCancel}
-      showBackdrop
-      showCloseButton
-      title='Delete automation'
-      bodyElements={
-        <Panel.Section>
-          <Panel.Paragraph>
-            Delete <strong>{automation.title}</strong>? This cannot be undone.
-          </Panel.Paragraph>
-
-          {blockingTriggers.length > 0 && (
-            <Info type='warning'>
-              <Info.Title>
-                {blockingTriggers.length === 1
-                  ? 'One trigger points at this automation'
-                  : `${blockingTriggers.length} triggers point at this automation`}
-              </Info.Title>
-              <Info.Body>
-                {blockingTriggers
-                  .map((trigger) => `${trigger.title} (${getLifecycleLabel(trigger.trigger)})`)
-                  .join(', ')}
-              </Info.Body>
-              <Info.Footer>Remove them from Global Triggers first, then delete the automation.</Info.Footer>
-            </Info>
-          )}
-
-          {error && (
-            <Info type='error'>
-              <Info.Title>Could not delete this automation</Info.Title>
-              <Info.Body>{error}</Info.Body>
-              <Info.Footer>
-                Automations attached to a single event have to be removed from that event first, in the event editor.
-              </Info.Footer>
-            </Info>
-          )}
-        </Panel.Section>
-      }
-      footerElements={
-        <>
-          <Button onClick={onCancel} disabled={isDeleting}>
-            Cancel
-          </Button>
-          <Button variant='destructive' onClick={handleDelete} loading={isDeleting}>
-            Delete
-          </Button>
-        </>
-      }
-    />
-  );
-}
@@ -1,5 +1,5 @@
 import { AutomationDTO, OntimeAction, OntimeActionKey, SecondarySource } from 'ontime-types';
-import { useState } from 'react';
+import { PropsWithChildren, useState } from 'react';
 import { UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form';

 import Input from '../../../../common/components/input/input/Input';
@@ -30,8 +30,9 @@ export default function OntimeActionForm({
  setValue,
  rowErrors,
  value,
+  children,
  watch,
-}: OntimeActionFormProps) {
+}: PropsWithChildren<OntimeActionFormProps>) {
  const [selectedAction, setSelectedAction] = useState<string>(value);

  const handleSetAction = (value: OntimeActionKey) => {
@@ -40,7 +41,7 @@ export default function OntimeActionForm({
  };

  return (
-    <>
+    <div className={style.actionSection}>
      <label>
        Action
        <Select
@@ -94,7 +95,7 @@ export default function OntimeActionForm({

      {selectedAction === 'message-set' && (
        <>
-          <label className={style.spanFull}>
+          <label>
            Text (leave empty for no change)
            <TemplateInput
              {...register(`outputs.${index}.text`)}
@@ -126,7 +127,7 @@ export default function OntimeActionForm({

      {selectedAction === 'message-secondary' && (
        <>
-          <label className={style.spanFull}>
+          <label>
            Text (leave empty for no change)
            <TemplateInput
              {...register(`outputs.${index}.text`)}
@@ -168,6 +169,8 @@ export default function OntimeActionForm({
          </label>
        </>
      )}
-    </>
+
+      <div className={style.test}>{children}</div>
+    </div>
  );
 }
@@ -8,7 +8,6 @@ import Button from '../../../../common/components/buttons/Button';
 import Info from '../../../../common/components/info/Info';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
 import * as Panel from '../../panel-utils/PanelUtils';
-import useAppSettingsNavigation from '../../useAppSettingsNavigation';
 import { checkDuplicates } from './automationUtils';
 import TriggerForm from './TriggerForm';
 import TriggersListItem from './TriggersListItem';
@@ -28,7 +27,6 @@ interface TriggersListProps {
 export default function TriggersList({ triggers, automations, enabledAutomations, isLoading }: TriggersListProps) {
  const [formState, setFormState] = useState<FormState>({ isOpen: false, trigger: undefined });
  const { refetch } = useAutomationSettings();
-  const { setLocation } = useAppSettingsNavigation();
  const [deleteError, setDeleteError] = useState<string | null>(null);

  const openNewForm = () => setFormState({ isOpen: true });
@@ -52,10 +50,6 @@ export default function TriggersList({ triggers, automations, enabledAutomations
  };

  const duplicates = useMemo(() => checkDuplicates(triggers), [triggers]);
-  const orphans = useMemo(
-    () => triggers.filter((trigger) => !Object.hasOwn(automations, trigger.automationId)).length,
-    [triggers, automations],
-  );

  // there is no point letting user creating a trigger if there are no automations
  const canAdd = Object.keys(automations).length > 0;
@@ -72,17 +66,13 @@ export default function TriggersList({ triggers, automations, enabledAutomations
          />
        )}
        <Panel.SubHeader>
-          Global triggers
+          Manage triggers
          <Button disabled={!canAdd} onClick={openNewForm}>
            New <IoAdd />
          </Button>
        </Panel.SubHeader>
        <Panel.Divider />
        <Panel.Section>
-          <Panel.Description>
-            Triggers are managed from the automation itself. This list is for naming them, or for pointing several
-            differently named triggers at the same automation.
-          </Panel.Description>
          {enabledAutomations === false && (
            <Info>
              Automations are disabled. You can still manage triggers here, but they will not run until enabled.
@@ -90,15 +80,8 @@ export default function TriggersList({ triggers, automations, enabledAutomations
          )}
          {duplicates && (
            <Panel.Error>
-              You have created multiple links between the same trigger and automation. Duplicate combinations will only
-              fire once per lifecycle event.
-            </Panel.Error>
-          )}
-          {orphans > 0 && (
-            <Panel.Error>
-              {orphans === 1
-                ? '1 trigger points at an automation that no longer exists and will never run.'
-                : `${orphans} triggers point at automations that no longer exist and will never run.`}
+              You have created multiple links between the same trigger and automation which can cause performance
+              issues.
            </Panel.Error>
          )}
          <Panel.Table>
@@ -116,18 +99,14 @@ export default function TriggersList({ triggers, automations, enabledAutomations
                  title='No triggers yet'
                  description={
                    canAdd
-                      ? 'Triggers run an automation at a given point of the timer lifecycle. The usual way to create one is to pick the lifecycles in the automation itself.'
-                      : 'Create an automation first, then pick the lifecycles it should run on.'
+                      ? 'Triggers run an automation at a given point of the timer lifecycle, like when an event starts or finishes.'
+                      : 'Create an automation first, then add a trigger to decide when it should run.'
                  }
                  action={
-                    canAdd ? (
+                    canAdd && (
                      <Button variant='primary' onClick={openNewForm}>
                        Create trigger <IoAdd />
                      </Button>
-                    ) : (
-                      <Button variant='primary' onClick={() => setLocation('automation__automations')}>
-                        Go to automations
-                      </Button>
                    )
                  }
                />
@@ -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,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,6 +1,4 @@
-import { Automation, AutomationDTO, AutomationFilter, CustomFields, TimerLifeCycle, Trigger } from 'ontime-types';
-
-import { lifecycleLabels } from '../../../../common/constants/timerLifecycle';
+import { Automation, AutomationDTO, CustomFields, TimerLifeCycle, Trigger } from 'ontime-types';

 type CycleLabel = {
  id: number;
@@ -9,29 +7,15 @@ type CycleLabel = {
 };

 export const cycles: CycleLabel[] = [
-  { id: 1, label: lifecycleLabels.onLoad, value: 'onLoad' },
-  { id: 2, label: lifecycleLabels.onStart, value: 'onStart' },
-  { id: 3, label: lifecycleLabels.onPause, value: 'onPause' },
-  { id: 4, label: lifecycleLabels.onStop, value: 'onStop' },
-  { id: 5, label: lifecycleLabels.onClock, value: 'onClock' },
-  { id: 6, label: lifecycleLabels.onUpdate, value: 'onUpdate' },
-  { id: 7, label: lifecycleLabels.onFinish, value: 'onFinish' },
-  { id: 8, label: lifecycleLabels.onWarning, value: 'onWarning' },
-  { id: 9, label: lifecycleLabels.onDanger, value: 'onDanger' },
-];
-
-/**
- * Filter operators offered in the automation form
- * NOTE: not_contains is supported by the type and by the runtime, but the server
- * validation list omits it, so an automation using it cannot be saved.
- * It stays out of the UI until the server accepts it.
- */
-export const operators: Array<{ value: AutomationFilter['operator']; label: string }> = [
-  { value: 'equals', label: 'equals' },
-  { value: 'not_equals', label: 'does not equal' },
-  { value: 'contains', label: 'contains' },
-  { value: 'greater_than', label: 'is greater than' },
-  { value: 'less_than', label: 'is less than' },
+  { id: 1, label: 'On Load', value: 'onLoad' },
+  { id: 2, label: 'On Start', value: 'onStart' },
+  { id: 3, label: 'On Pause', value: 'onPause' },
+  { id: 4, label: 'On Stop', value: 'onStop' },
+  { id: 5, label: 'Every second', value: 'onClock' },
+  { id: 6, label: 'On Timer Update', value: 'onUpdate' },
+  { id: 7, label: 'On Finish', value: 'onFinish' },
+  { id: 8, label: 'On Warning', value: 'onWarning' },
+  { id: 9, label: 'On Danger', value: 'onDanger' },
 ];

 /**
@@ -99,23 +83,3 @@ export function checkDuplicates(triggers: Trigger[]) {
  }
  return duplicates.length > 0 ? duplicates : undefined;
 }
-
-/**
- * Groups the lifecycles each automation is bound to
- * Used to show when an automation runs, and to highlight the ones that never will
- */
-export function groupTriggersByAutomation(triggers: Trigger[]): Record<string, TimerLifeCycle[]> {
-  const grouped: Record<string, TimerLifeCycle[]> = {};
-
-  for (const trigger of triggers) {
-    if (!Object.hasOwn(grouped, trigger.automationId)) {
-      grouped[trigger.automationId] = [];
-    }
-    // the runtime fires an automation once per lifecycle, duplicates would be noise here
-    if (!grouped[trigger.automationId].includes(trigger.trigger)) {
-      grouped[trigger.automationId].push(trigger.trigger);
-    }
-  }
-
-  return grouped;
-}
@@ -1,47 +0,0 @@
-.library {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  color: $ui-white;
-  font-size: calc(1rem - 1px);
-  padding-block: 0.5rem;
-}
-
-.category {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.recipeGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
-  gap: 0.75rem;
-}
-
-.recipe {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  border: 1px solid $white-10;
-  border-radius: $component-border-radius-md;
-  background-color: $black-10;
-}
-
-.recipeTitle {
-  font-weight: 600;
-}
-
-.recipeDescription {
-  flex: 1;
-  font-size: $aux-text-size;
-  color: $secondary-text-gray;
-}
-
-.recipeActions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.75rem;
-}
@@ -1,121 +0,0 @@
-import type { Automation } from 'ontime-types';
-import { useState } from 'react';
-
-import { maybeAxiosError } from '../../../../../common/api/utils';
-import Button from '../../../../../common/components/buttons/Button';
-import Info from '../../../../../common/components/info/Info';
-import ExternalLink from '../../../../../common/components/link/external-link/ExternalLink';
-import Modal from '../../../../../common/components/modal/Modal';
-import Tag from '../../../../../common/components/tag/Tag';
-import { getLifecycleLabel } from '../../../../../common/constants/timerLifecycle';
-import { summariseOutputs } from '../../../../../common/utils/automationOutputs';
-import { isOntimeCloud } from '../../../../../externals';
-import * as Panel from '../../../panel-utils/PanelUtils';
-import {
-  automationRecipes,
-  recipeCategoryLabels,
-  recipeCategoryOrder,
-  type AutomationRecipe,
-} from './automationRecipes';
-import { installRecipe } from './recipeUtils';
-
-import style from './RecipeLibraryModal.module.scss';
-
-interface RecipeLibraryModalProps {
-  onClose: () => void;
-  /** called with the installed automation so the caller can open it for editing */
-  onInstalled: (automation: AutomationRecipe, created: Automation) => void;
-}
-
-export default function RecipeLibraryModal({ onClose, onInstalled }: RecipeLibraryModalProps) {
-  const [installing, setInstalling] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  // OSC is not available in the cloud service, offering those recipes there would be a lie
-  const available = isOntimeCloud
-    ? automationRecipes.filter((recipe) => !recipe.automation.outputs.some((output) => output.type === 'osc'))
-    : automationRecipes;
-
-  const handleInstall = async (recipe: AutomationRecipe) => {
-    setError(null);
-    setInstalling(recipe.id);
-    try {
-      const created = await installRecipe(recipe);
-      onInstalled(recipe, created);
-    } catch (error) {
-      setError(maybeAxiosError(error));
-    } finally {
-      setInstalling(null);
-    }
-  };
-
-  return (
-    <Modal
-      isOpen
-      onClose={onClose}
-      showBackdrop
-      showCloseButton
-      size='wide'
-      title='Automation recipes'
-      bodyElements={
-        <div className={style.library}>
-          <Info>
-            <Info.Body>
-              Recipes are a starting point, not a black box. Each one is added as a normal automation that you can edit,
-              test or delete. Recipes that reach external software are set to this machine, so point them at the right
-              device before you rely on them.
-            </Info.Body>
-          </Info>
-
-          {recipeCategoryOrder.map((category) => {
-            const recipes = available.filter((recipe) => recipe.category === category);
-            if (recipes.length === 0) {
-              return null;
-            }
-
-            return (
-              <section key={category} className={style.category}>
-                <Panel.Title>{recipeCategoryLabels[category]}</Panel.Title>
-                <div className={style.recipeGrid}>
-                  {recipes.map((recipe) => (
-                    <article key={recipe.id} className={style.recipe}>
-                      <div className={style.recipeTitle}>{recipe.title}</div>
-                      <div className={style.recipeDescription}>{recipe.description}</div>
-                      <Panel.InlineElements relation='inner' wrap='wrap'>
-                        {recipe.triggers.map((cycle) => (
-                          <Tag key={cycle}>{getLifecycleLabel(cycle)}</Tag>
-                        ))}
-                        {summariseOutputs(recipe.automation.outputs).map(({ type, label, count }) => (
-                          <Tag key={type}>{count > 1 ? `${label} ×${count}` : label}</Tag>
-                        ))}
-                        {recipe.needsSetup && <Tag variant='warning'>Needs a target</Tag>}
-                      </Panel.InlineElements>
-                      <div className={style.recipeActions}>
-                        {recipe.docsUrl && <ExternalLink href={recipe.docsUrl}>Docs</ExternalLink>}
-                        <Button
-                          variant='primary'
-                          size='small'
-                          loading={installing === recipe.id}
-                          disabled={installing !== null}
-                          onClick={() => handleInstall(recipe)}
-                        >
-                          {recipe.needsSetup ? 'Add and configure' : 'Add'}
-                        </Button>
-                      </div>
-                    </article>
-                  ))}
-                </div>
-              </section>
-            );
-          })}
-        </div>
-      }
-      footerElements={
-        <>
-          {error && <Panel.Error>{error}</Panel.Error>}
-          <Button onClick={onClose}>Close</Button>
-        </>
-      }
-    />
-  );
-}
@@ -1,75 +0,0 @@
-import { isHTTPOutput, isOSCOutput, isOntimeAction, timerLifecycleValues } from 'ontime-types';
-
-import { operators } from '../../automationUtils';
-import { automationRecipes, recipeCategoryOrder } from '../automationRecipes';
-
-/**
- * Recipes are shipped as constants but installed through the same endpoints as a
- * hand written automation. These assertions stand in for the server side validation,
- * so a recipe cannot silently rot into something that 400s on install.
- */
-describe('automationRecipes', () => {
-  it('ships recipes', () => {
-    expect(automationRecipes.length).toBeGreaterThan(0);
-  });
-
-  it('has unique ids', () => {
-    const ids = automationRecipes.map(({ id }) => id);
-    expect(new Set(ids).size).toBe(ids.length);
-  });
-
-  it('only uses categories the library knows how to render', () => {
-    for (const recipe of automationRecipes) {
-      expect(recipeCategoryOrder).toContain(recipe.category);
-    }
-  });
-
-  it('binds every recipe to at least one valid lifecycle', () => {
-    for (const recipe of automationRecipes) {
-      expect(recipe.triggers.length).toBeGreaterThan(0);
-      for (const cycle of recipe.triggers) {
-        expect(timerLifecycleValues).toContain(cycle);
-      }
-    }
-  });
-
-  it('gives every recipe something to send', () => {
-    for (const recipe of automationRecipes) {
-      expect(recipe.automation.outputs.length).toBeGreaterThan(0);
-      expect(recipe.automation.title).not.toBe('');
-
-      for (const output of recipe.automation.outputs) {
-        expect(isOSCOutput(output) || isHTTPOutput(output) || isOntimeAction(output)).toBe(true);
-      }
-    }
-  });
-
-  it('only uses filter operators the server accepts', () => {
-    const allowed = operators.map(({ value }) => value);
-    for (const recipe of automationRecipes) {
-      for (const filter of recipe.automation.filters) {
-        expect(allowed).toContain(filter.operator);
-      }
-    }
-  });
-
-  it('defaults every external target to this machine', () => {
-    for (const recipe of automationRecipes) {
-      for (const output of recipe.automation.outputs) {
-        if (isOSCOutput(output)) {
-          expect(output.targetIP).toBe('127.0.0.1');
-        }
-        if (isHTTPOutput(output)) {
-          expect(output.url.startsWith('http://127.0.0.1')).toBe(true);
-        }
-      }
-    }
-  });
-
-  it('marks recipes that reach outside Ontime as needing a target', () => {
-    for (const recipe of automationRecipes) {
-      const reachesOut = recipe.automation.outputs.some((output) => isOSCOutput(output) || isHTTPOutput(output));
-      expect(recipe.needsSetup).toBe(reachesOut);
-    }
-  });
-});
@@ -1,159 +0,0 @@
-import type { AutomationDTO, TimerLifeCycle } from 'ontime-types';
-import { TimerLifeCycle as Cycle } from 'ontime-types';
-
-export type RecipeCategory = 'video' | 'audio' | 'playback' | 'messaging' | 'ontime';
-
-export type AutomationRecipe = {
-  /** stable, client only. Never persisted */
-  id: string;
-  title: string;
-  /** one line, plain language: what this does for the user */
-  description: string;
-  category: RecipeCategory;
-  docsUrl?: string;
-  /** true when the recipe points at external software the user has to locate */
-  needsSetup: boolean;
-  /** typed so the compiler catches drift against the automation schema */
-  automation: AutomationDTO;
-  triggers: TimerLifeCycle[];
-};
-
-export const recipeCategoryLabels: Record<RecipeCategory, string> = {
-  ontime: 'Works out of the box',
-  playback: 'Playback and cue systems',
-  video: 'Video and streaming',
-  audio: 'Audio',
-  messaging: 'Webhooks and messaging',
-};
-
-/** presentation order for the library */
-export const recipeCategoryOrder: RecipeCategory[] = ['ontime', 'video', 'playback', 'audio', 'messaging'];
-
-/**
- * Every recipe targets loopback by default.
- * A recipe added by mistake must not put traffic on a venue network, so the user
- * has to point it somewhere real before it can reach anything.
- */
-export const automationRecipes: AutomationRecipe[] = [
-  {
-    id: 'ontime-aux-timer',
-    title: 'Start Aux Timer 1 with the event',
-    description: 'Sets aux timer 1 to five minutes and starts it whenever an event starts.',
-    category: 'ontime',
-    needsSetup: false,
-    automation: {
-      title: 'Start Aux Timer 1 with the event',
-      filterRule: 'all',
-      filters: [],
-      outputs: [
-        { type: 'ontime', action: 'aux1-set', time: '00:05:00' },
-        { type: 'ontime', action: 'aux1-start' },
-      ],
-    },
-    triggers: [Cycle.onStart],
-  },
-  {
-    id: 'ontime-warn-stage',
-    title: 'Warn the stage when the timer hits danger',
-    description: 'Shows a message on the stage timer as soon as the running event enters its danger window.',
-    category: 'ontime',
-    needsSetup: false,
-    automation: {
-      title: 'Warn the stage at danger',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'ontime', action: 'message-set', text: 'Please wrap up', visible: true }],
-    },
-    triggers: [Cycle.onDanger],
-  },
-  {
-    id: 'ontime-clear-message',
-    title: 'Hide the stage message on finish',
-    description: 'Hides the stage message once the event finishes. Pairs with the danger warning above.',
-    category: 'ontime',
-    needsSetup: false,
-    automation: {
-      title: 'Hide the stage message on finish',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'ontime', action: 'message-set', text: '', visible: false }],
-    },
-    triggers: [Cycle.onFinish],
-  },
-  {
-    id: 'obs-record',
-    title: 'OBS — start recording when the show starts',
-    description:
-      'Presses a Companion button bound to OBS. obs-websocket speaks WebSocket rather than HTTP, so Ontime reaches OBS through Companion or a similar bridge.',
-    category: 'video',
-    docsUrl: 'https://docs.getontime.no/api/automation/',
-    needsSetup: true,
-    automation: {
-      title: 'OBS start recording',
-      filterRule: 'all',
-      filters: [],
-      // Companion HTTP API: /api/location/<page>/<row>/<column>/press
-      outputs: [{ type: 'http', url: 'http://127.0.0.1:8888/api/location/1/0/1/press' }],
-    },
-    triggers: [Cycle.onLoad],
-  },
-  {
-    id: 'vmix-overlay-warning',
-    title: 'vMix — show an overlay on timer warning',
-    description: 'Triggers a vMix overlay through the web controller when the timer enters its warning window.',
-    category: 'video',
-    needsSetup: true,
-    automation: {
-      title: 'vMix overlay on warning',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'http', url: 'http://127.0.0.1:8088/api/?Function=OverlayInput1In' }],
-    },
-    triggers: [Cycle.onWarning],
-  },
-  {
-    id: 'qlab-go',
-    title: 'QLab — fire the matching cue on event start',
-    description: "Sends OSC to QLab to start the cue whose number matches the Ontime event's cue.",
-    category: 'playback',
-    needsSetup: true,
-    automation: {
-      title: 'QLab GO on event start',
-      filterRule: 'all',
-      filters: [],
-      outputs: [
-        { type: 'osc', targetIP: '127.0.0.1', targetPort: 53000, address: '/cue/{{eventNow.cue}}/start', args: '' },
-      ],
-    },
-    triggers: [Cycle.onStart],
-  },
-  {
-    id: 'companion-press',
-    title: 'Companion — press a button on event start',
-    description: 'Presses page 1 button 1 on a Stream Deck through the Companion HTTP API.',
-    category: 'playback',
-    needsSetup: true,
-    automation: {
-      title: 'Companion button press',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'http', url: 'http://127.0.0.1:8888/api/location/1/0/0/press' }],
-    },
-    triggers: [Cycle.onStart],
-  },
-  {
-    id: 'webhook-event-title',
-    title: 'Webhook — send the current event title',
-    description: 'Posts the running event title to any URL. A good place to see template strings at work.',
-    category: 'messaging',
-    docsUrl: 'https://docs.getontime.no/api/automation/#using-variables-in-automation',
-    needsSetup: true,
-    automation: {
-      title: 'Webhook with the current event',
-      filterRule: 'all',
-      filters: [],
-      outputs: [{ type: 'http', url: 'http://127.0.0.1:3000/now?title={{eventNow.title}}' }],
-    },
-    triggers: [Cycle.onStart],
-  },
-];
@@ -1,47 +0,0 @@
-import type { Automation } from 'ontime-types';
-
-import { addAutomation, addTrigger, deleteAutomation, deleteTrigger } from '../../../../../common/api/automation';
-import { cycles } from '../automationUtils';
-import type { AutomationRecipe } from './automationRecipes';
-
-/**
- * Installs a recipe as an ordinary automation, using the same endpoints as the form.
- * There is nothing special about the result: the user owns it and can edit or delete it.
- *
- * The server generates the ids, so the automation has to exist before its triggers can
- * point at it. If a trigger fails half way we undo the whole thing, triggers first:
- * the server refuses to delete an automation that is still referenced.
- */
-export async function installRecipe(recipe: AutomationRecipe): Promise<Automation> {
-  const created = await addAutomation(recipe.automation);
-  const createdTriggerIds: string[] = [];
-
-  try {
-    for (const cycle of recipe.triggers) {
-      const label = cycles.find(({ value }) => value === cycle)?.label ?? cycle;
-      const trigger = await addTrigger({
-        title: `${recipe.automation.title} — ${label}`,
-        trigger: cycle,
-        automationId: created.id,
-      });
-      createdTriggerIds.push(trigger.id);
-    }
-  } catch (error) {
-    await rollback(created.id, createdTriggerIds);
-    throw error;
-  }
-
-  return created;
-}
-
-async function rollback(automationId: string, triggerIds: string[]) {
-  try {
-    for (const id of triggerIds) {
-      await deleteTrigger(id);
-    }
-    await deleteAutomation(automationId);
-  } catch (_error) {
-    // the install already failed and we are reporting that. A failed cleanup leaves an
-    // editable automation behind, which is recoverable, so it should not mask the original error
-  }
-}
@@ -4,8 +4,8 @@ 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 useRundown from '../../../../common/hooks-query/useRundown';
 import { cx } from '../../../../common/utils/styleUtils';
 import { formatTime } from '../../../../common/utils/time';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -15,7 +15,7 @@ import style from './ReportSettings.module.scss';

 export default function ReportSettings() {
  const { data: reportData } = useReport();
-  const { data } = useRundown();
+  const { data } = useLoadedRundown();

  const clearReport = async () => await deleteAllReport();
  const downloadCSV = (combinedReport: CombinedReport[]) => {
@@ -12,20 +12,21 @@ import { useUpdateUrlPreset } from '../../../../../common/hooks-query/useUrlPres
 import { isUrlSafe } from '../../../../../common/utils/regex';
 import { enDash } from '../../../../../common/utils/styleUtils';
 import { generateUrlPresetOptions } from '../../../../../common/utils/urlPresets';
+import { viewLabels } from '../../../../../viewerConfig';
 import CuesheetLinkOptions, { CuesheetPermissionValues } from '../../../../sharing/composite/CuesheetLinkOptions';
 import * as Panel from '../../../panel-utils/PanelUtils';

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

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

 const formId = 'url-preset-form';
@@ -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();

@@ -85,10 +85,10 @@ export default function ServerPortSettings() {
            </Button>
          </Panel.InlineElements>
        </Panel.SubHeader>
-        <Panel.Loader isLoading={status === 'pending'} />
        {rootError && <Panel.Error>{rootError}</Panel.Error>}
        <Panel.Divider />
        <Panel.Section>
+          <Panel.Loader isLoading={status === 'pending'} />
          {data.pendingRestart && (
            <Info type='warning'>A port change is pending and will happen on the next restart.</Info>
          )}
@@ -84,28 +84,11 @@ const staticOptions = [
      {
        id: 'automation__automations',
        label: 'Manage automations',
-        keywords: [
-          'osc',
-          'http',
-          'webhook',
-          'integration',
-          'api',
-          'output',
-          'action',
-          'recipe',
-          'template',
-          'example',
-          'preset',
-          'obs',
-          'qlab',
-          'vmix',
-          'companion',
-          'share',
-        ],
+        keywords: ['osc', 'http', 'webhook', 'integration', 'api', 'output', 'action'],
      },
      {
        id: 'automation__triggers',
-        label: 'Global triggers',
+        label: 'Manage triggers',
        keywords: ['lifecycle', 'on load', 'on start', 'on finish', 'on update'],
      },
    ],
@@ -3,56 +3,113 @@ import { useCallback, useState } from 'react';
 import { IoClose } from 'react-icons/io5';

 import Button from '../../common/components/buttons/Button';
+import ToggleButton from '../../common/components/buttons/ToggleButton';
 import { clearLogs, useLogData } from '../../common/stores/logger';
 import { cx } from '../../common/utils/styleUtils';
 import * as Panel from '../app-settings/panel-utils/PanelUtils';

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

-const origins = Object.values(LogOrigin);
-
-type OriginFilters = Record<LogOrigin, boolean>;
-
-const allEnabled = Object.fromEntries(origins.map((origin) => [origin, true])) as OriginFilters;
-
 export default function Log() {
  const { logs: logData } = useLogData();
  const isExtracted = window.location.pathname.includes('/log');

-  const [filters, setFilters] = useState<OriginFilters>(allEnabled);
+  const [showClient, setShowClient] = useState(true);
+  const [showServer, setShowServer] = useState(true);
+  const [showRx, setShowRx] = useState(true);
+  const [showTx, setShowTx] = useState(true);
+  const [showPlayback, setShowPlayback] = useState(true);
+  const [showUser, setShowUser] = useState(true);

-  const filteredData = logData.filter((entry) => filters[entry.origin as LogOrigin]);
+  const matchers: LogOrigin[] = [];
+  if (showUser) {
+    matchers.push(LogOrigin.User);
+  }
+  if (showClient) {
+    matchers.push(LogOrigin.Client);
+  }
+  if (showServer) {
+    matchers.push(LogOrigin.Server);
+  }
+  if (showRx) {
+    matchers.push(LogOrigin.Rx);
+  }
+  if (showTx) {
+    matchers.push(LogOrigin.Tx);
+  }
+  if (showPlayback) {
+    matchers.push(LogOrigin.Playback);
+  }

-  const toggleOrigin = useCallback((origin: LogOrigin) => {
-    setFilters((prev) => ({ ...prev, [origin]: !prev[origin] }));
-  }, []);
+  const filteredData = logData.filter((entry) => matchers.some((match) => entry.origin === match));

-  /** middle click solos an origin */
-  const soloOrigin = useCallback((toEnable: LogOrigin) => {
-    setFilters(Object.fromEntries(origins.map((origin) => [origin, origin === toEnable])) as OriginFilters);
+  const disableOthers = useCallback((toEnable: LogOrigin) => {
+    setShowUser(toEnable === LogOrigin.User);
+    setShowClient(toEnable === LogOrigin.Client);
+    setShowServer(toEnable === LogOrigin.Server);
+    setShowRx(toEnable === LogOrigin.Rx);
+    setShowTx(toEnable === LogOrigin.Tx);
+    setShowPlayback(toEnable === LogOrigin.Playback);
  }, []);

  return (
    <div className={cx([style.container, isExtracted && style.extracted])}>
      <Panel.InlineElements className={style.buttonBar}>
        <span className={style.filterLabel}>Filter by</span>
-        {origins.map((origin) => {
-          const isEnabled = filters[origin];
-          return (
-            <Button
-              key={origin}
-              variant={isEnabled ? 'primary' : 'subtle'}
-              size='small'
-              aria-pressed={isEnabled}
-              aria-label={`${isEnabled ? 'Hide' : 'Show'} ${origin} events`}
-              onClick={() => toggleOrigin(origin)}
-              onAuxClick={() => soloOrigin(origin)}
-              onContextMenu={(e) => e.preventDefault()}
-            >
-              {origin}
-            </Button>
-          );
-        })}
+        <ToggleButton
+          pressed={showUser}
+          size='small'
+          onClick={() => setShowUser((s) => !s)}
+          onAuxClick={() => disableOthers(LogOrigin.User)}
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {LogOrigin.User}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showClient}
+          size='small'
+          onClick={() => setShowClient((s) => !s)}
+          onAuxClick={() => disableOthers(LogOrigin.Client)}
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {LogOrigin.Client}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showServer}
+          size='small'
+          onClick={() => setShowServer((s) => !s)}
+          onAuxClick={() => disableOthers(LogOrigin.Server)}
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {LogOrigin.Server}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showPlayback}
+          size='small'
+          onClick={() => setShowPlayback((s) => !s)}
+          onAuxClick={() => disableOthers(LogOrigin.Playback)}
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {LogOrigin.Playback}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showRx}
+          size='small'
+          onClick={() => setShowRx((s) => !s)}
+          onAuxClick={() => disableOthers(LogOrigin.Rx)}
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {LogOrigin.Rx}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showTx}
+          size='small'
+          onClick={() => setShowTx((s) => !s)}
+          onAuxClick={() => disableOthers(LogOrigin.Tx)}
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {LogOrigin.Tx}
+        </ToggleButton>
        <Button variant='subtle-destructive' size='small' onClick={clearLogs} className={style.apart}>
          <IoClose /> Clear
        </Button>
@@ -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
@@ -81,7 +81,7 @@ export default function GroupEditor({ group }: GroupEditorProps) {
          <div>
            <Editor.Label htmlFor='eventId'>Plan offset</Editor.Label>
            <TextLikeInput
-              offset={planOffsetLabel}
+              offset={planOffsetLabel === 'under' ? 'over' : planOffsetLabel}
              className={cx([style.textLikeInput, planOffset === null && style.inactive])}
              disabled
            >
@@ -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],
  );

  /**
@@ -8,10 +8,16 @@ export default memo(FinderPlacement);
 function FinderPlacement() {
  const [isOpen, handler] = useDisclosure();

-  useHotkeys([
-    ['mod + f', handler.toggle, { preventDefault: true }],
-    ['Escape', handler.close, { preventDefault: true }],
-  ]);
+  /**
+   * The empty tagsToIgnore is significant: by default the hook skips input elements,
+   * which would make the shortcut dead while editing an entry.
+   *
+   * This opens rather than toggles. Toggling on a key that also mounts and unmounts the
+   * dialog races against it, and browsers treat a repeated find shortcut as "focus the
+   * search again" rather than "close it". The finder selects its input instead, and
+   * Escape closes.
+   */
+  useHotkeys([['mod + f', handler.open, { preventDefault: true }]], []);

  if (isOpen) {
    return <Finder isOpen={isOpen} onClose={handler.close} />;
@@ -1,6 +1,6 @@
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Day, EndAction, EntryId, Playback, TimeStrategy, TimerType } from 'ontime-types';
+import { Day, EndAction, EntryId, Maybe, OntimeGroup, Playback, TimeStrategy, TimerType } from 'ontime-types';
 import { isPlaybackActive } from 'ontime-utils';
 import { MouseEvent, useEffect, useRef } from 'react';
 import {
@@ -13,9 +13,10 @@ import {
  IoTrash,
  IoUnlink,
 } from 'react-icons/io5';
-import { TbFlagFilled, TbListNumbers } from 'react-icons/tb';
+import { TbClockPin, TbFlagFilled, TbListNumbers } from 'react-icons/tb';

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

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

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

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

+  const [enableMatchDuration, groupTargetDurationDescription] = (() => {
+    if (!parentGroup || parentGroup.targetDuration === null || parentGroup.duration === parentGroup.targetDuration)
+      return [false, ''];
+    const { targetDuration, duration } = parentGroup;
+    return targetDuration > duration
+      ? [true, 'Increase event duration to fit the group target']
+      : [true, 'Decrease event duration to fit the group target'];
+  })();
+
  const [onContextMenu] = useContextMenu<HTMLDivElement>(() =>
    selectedEvents.size > 1
      ? [
@@ -172,6 +185,17 @@ export default function RundownEvent({
              updateEntry({ id: eventId, flag: !flag });
            },
          },
+          {
+            type: 'item',
+            label: 'Match Group Target Duration',
+            description: groupTargetDurationDescription,
+            icon: TbClockPin,
+            onClick: () => {
+              if (!parent) return;
+              matchGroupDuration(eventId);
+            },
+            disabled: !enableMatchDuration,
+          },
          { type: 'divider' },
          {
            type: 'item',
@@ -288,6 +312,7 @@ export default function RundownEvent({
      onClick={handleFocusClick}
      onContextMenu={onContextMenu}
      data-testid='rundown-event'
+      data-selected={isSelected}
      {...(isPlaying ? { 'data-running': true } : {})}
    >
      <RundownIndicators timeStart={timeStart} delay={delay} gap={gap} isNextDay={isNextDay} />
@@ -74,42 +74,36 @@
  .metaLabel {
    color: $muted-gray;
    font-size: calc(1rem - 3px);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
  }
 }

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

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

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

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

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

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

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

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

-  const [planOffset, planOffsetLabel] = (() => {
-    if (data.targetDuration === null) {
-      return [null, null];
-    }
-
-    const offset = data.duration - data.targetDuration;
-    if (offset === 0) {
-      return [null, 'under'];
-    }
-    const absOffset = Math.abs(offset);
-    return [
-      `${offset < 0 ? '-' : '+'}${formatDuration(absOffset, absOffset > 2 * MILLIS_PER_MINUTE)}`,
-      getOffsetState(offset),
-    ];
-  })();
-
  const dragStyle = {
    zIndex: isDragging ? 2 : 'inherit',
    transform: CSS.Translate.toString(transform),
@@ -175,20 +191,18 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
            <div className={style.metaLabel}>End</div>
            <div>{formatTime(data.timeEnd)}</div>
          </div>
-          <div className={style.metaEntry}>
-            <div className={style.metaLabel}>Duration</div>
-            <div className={style.duration}>
-              {planOffset === null ? (
-                formatDuration(data.duration)
-              ) : (
-                <span className={cx([planOffsetLabel && style[planOffsetLabel]])}>
-                  <span className={style.strike}>{formatDuration(data.duration)}</span>
-                  <Tag className={style.offsetLabel}>{planOffset}</Tag>
-                </span>
-              )}
-              {data.targetDuration !== null && <IoLockClosed className={style.lockIcon} />}
+          <Tooltip text={'Group has target duration'} disabled={data.targetDuration === null}>
+            <div className={style.metaEntry}>
+              <div className={style.metaLabel}>
+                Duration
+                {data.targetDuration !== null && <IoLockClosed className={style.lockIcon} />}
+              </div>
+              <div className={cx([style.duration, planOffset && style.warning])}>
+                <span className={style.strike}>{formatDuration(data.duration)}</span>
+                {planOffset && <Tag className={style.offsetLabel}>{planOffset}</Tag>}
+              </div>
            </div>
-          </div>
+          </Tooltip>
        </div>
      </div>
    </div>
@@ -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,15 +1,14 @@
-import type { ColumnDef } from '@tanstack/react-table';
 import type { CustomFields } from 'ontime-types';

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

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

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

+export const navigatorConstants = navigatorViews.map((view) => ({ url: view, label: viewLabels[view] }));
+
 // default time format to use for users in 12 hour clocks
 export const FORMAT_12 = 'h:mm:ss a';
 // default time format to use for users in 24 hour clocks
@@ -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();
--- 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
Carlos Valente	9ec12f4927	docs(llm): request for useeffect documentation	2026-08-28 12:29:12 +02:00
Carlos Valente	4c08ca2908	feat(timer): playing sound on time end	2026-08-28 12:29:12 +02:00
Carlos Valente	265b167600	bump version to 4.13.0	2026-08-28 12:04:02 +02:00
Carlos Valente	eb7b2a5c4b	refactor(finder): improve feature UX Search every text field with optional filters, keep result selection stable, and expose clearer match context and counts. Cover query parsing, matching, mixed-entry indexing, and the reveal flow.	2026-08-28 11:41:44 +02:00
Carlos Valente	e0ae9f7f09	refactor(log): use ToggleButton for filters Reuse the shared toggle abstraction while preserving the existing filter behaviour and accessible labels.	2026-08-28 11:41:44 +02:00
Carlos Valente	b0c778fa62	feat(buttons): add ToggleButton component Keep toggle styling and the accessible pressed state coupled in one reusable button.	2026-08-28 11:41:44 +02:00
Carlos Valente	98d3b1f6f3	chore(license): resolver has permissive license	2026-08-28 08:40:17 +02:00
Carlos Valente	d9dd147d4b	refactor(server): replace defensive copies with cow patterns	2026-08-26 20:17:34 +02:00
Carlos Valente	9806f97d27	test(rundown): improve rundown utils coverage	2026-08-25 22:41:37 +02:00
Carlos Valente	b9683f00dc	fix: prevent stale rundown cache on rename	2026-08-25 21:41:34 +02:00
Carlos Valente	63fdc50c50	docs(llms): document ongoing code migrations	2026-08-25 21:41:18 +02:00
Carlos Valente	5acfc4a122	docs(llms): setup agents documentation	2026-08-25 21:41:18 +02:00
Carlos Valente	a84b8b5530	refactor(ui): polish navigation menu and view params editor	2026-08-23 13:42:21 +02:00
Carlos Valente	c19aa4ca28	fix(cuesheet): prevent stale column width on refresh	2026-08-23 13:28:24 +02:00
Carlos Valente	805663e2ea	chore(deps): migrate to @tanstack/react-table v9	2026-08-23 13:28:24 +02:00
Carlos Valente	0f0b32d444	accept bearer token	2026-08-21 20:52:11 +02:00
Carlos Valente	703dee35a4	style: bump oxfmt to 0.63 and reformat	2026-08-18 13:56:53 +02:00
Carlos Valente	2a7f5b7872	chore(deps): upgrade dependencies	2026-08-18 13:56:53 +02:00
Carlos Valente	c6eccec30e	refactor(settings): show new app indicator	2026-08-09 16:48:20 +02:00
Carlos Valente	5220c2c374	fix(settings): prevent loader overflow	2026-08-09 16:48:20 +02:00
Carlos Valente	4eeeb294f7	chore: update electron navigation	2026-08-09 16:48:20 +02:00
Alex Christoffer Rasmussen	a006331fea	Group duration context menu utils (#1748 )	2026-08-09 16:45:47 +02:00
Carlos Valente	ac0ef06459	bump version to 4.12.0	2026-08-09 10:44:13 +02:00
Carlos Valente	4d04fe35c3	refactor(e2e): improve test stability	2026-08-09 10:41:12 +02:00