fix(automation): stop the list claiming an automation never runs

An automation can be triggered two ways, and they are stored in different
places: global triggers live in the automation settings, event triggers live
on the event itself, inside the rundown. The panel only ever receives the
first list.

So the Runs on column was reading an automation attached to ten events as
having no triggers at all, and saying "Never runs" about something that runs
perfectly well. Worse than a missing hint: it taught that event triggers do
not count.

The client cannot honestly answer the question either, since it holds only
the rundown that is currently loaded and a project can have several. So the
column no longer answers it. An empty cell now reads as an em dash, the same
as the filter rule column beside it, and claims nothing.

The "No outputs" tag stays. An automation with nothing to send does nothing
whatever triggers it, and that the panel can see for itself.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AfDKsy6PE3Rbyt32Fg4YKf

.github/skills/code-review/SKILL.md

@@ -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.

AGENTS.md

@@ -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.

apps/cli/package.json

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

apps/client/index.html

@@ -7,13 +7,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="theme-color" content="#101010" />
     <meta name="ontime" content="ontime - time keeping for live events" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="Ontime" />
     <link rel="apple-touch-icon" href="ontime-logo.png" />
     <link rel="icon" type="image/png" href="ontime-logo.png" />
-    <link rel="manifest" href="site.webmanifest" />
     <link rel="manifest" href="manifest.json" />
     <meta name="robots" content="noindex" />
-    <title>ontime</title>
+    <title>Ontime</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

apps/client/package.json

@@ -1,10 +1,10 @@
 {
   "name": "ontime-ui",
-  "version": "4.12.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:"
   }

apps/client/public/manifest.json

@@ -1,19 +1,21 @@
 {
-  "name": "ontime",
-  "short_name": "ontime",
+  "name": "Ontime",
+  "short_name": "Ontime",
   "icons": [
     {
-      "src": "favicon.ico",
-      "type": "image/x-icon"
+      "src": "ontime-logo-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
     },
     {
-      "src": "ontime-logo.png",
+      "src": "ontime-logo-512.png",
+      "sizes": "512x512",
       "type": "image/png"
     }
   ],
   "scope": "./",
   "start_url": "./",
-  "display": "",
-  "theme_color": "#121212",
+  "display": "standalone",
+  "theme_color": "#101010",
   "background_color": "#101010"
 }

apps/client/public/site.webmanifest

@@ -1,8 +0,0 @@
-{
-  "name": "",
-  "short_name": "",
-  "icons": [{ "src": "ontime-logo.png", "sizes": "295x295", "type": "image/png" }],
-  "theme_color": "#121212",
-  "background_color": "#101010",
-  "display": "standalone"
-}

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

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { OntimeReport } from 'ontime-types';
+import type { ReportData } from 'ontime-types';
 
 import { ontimeQueryClient } from '../../common/queryClient';
 import { REPORT, apiEntryUrl } from './constants';
@@ -8,18 +8,13 @@ import type { RequestOptions } from './requestOptions';
 export const reportUrl = `${apiEntryUrl}/report`;
 
 /**
- * HTTP request to fetch all reports
+ * HTTP request to fetch the report
  */
-export async function fetchReport(options?: RequestOptions): Promise<OntimeReport> {
+export async function fetchReport(options?: RequestOptions): Promise<ReportData> {
   const res = await axios.get(reportUrl, { signal: options?.signal });
   return res.data;
 }
 
-export async function deleteReport(id: string) {
-  await axios.delete(`${reportUrl}/${id}`);
-  await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
-}
-
 export async function deleteAllReport() {
   await axios.delete(`${reportUrl}/all`);
   await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });

apps/client/src/common/components/buttons/ToggleButton.tsx

@@ -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} />;
+}

apps/client/src/common/components/eyebrow/Eyebrow.module.scss

@@ -0,0 +1,6 @@
+.eyebrow {
+  font-size: $aux-text-size;
+  font-weight: 400;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}

apps/client/src/common/components/eyebrow/Eyebrow.tsx

@@ -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>;
+}

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

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

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

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

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

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

apps/client/src/common/components/navigation-menu/navigation-menu-item/NavigationMenuItem.module.scss

@@ -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;
+}

apps/client/src/common/components/navigation-menu/navigation-menu-item/NavigationMenuItem.tsx

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

apps/client/src/common/components/navigation-menu/navigation-menu-item/NavigationMenuToggle.tsx

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

apps/client/src/common/components/navigation-menu/other-addresses/OtherAddresses.module.scss

@@ -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;

apps/client/src/common/components/navigation-menu/other-addresses/OtherAddresses.tsx

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

apps/client/src/common/components/navigation-menu/other-addresses/__tests__/otherAddresses.utils.test.ts

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

apps/client/src/common/components/navigation-menu/other-addresses/otherAddresses.utils.ts

@@ -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');
+}

apps/client/src/common/components/view-params-editor/InlineColourPicker.module.scss

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

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

@@ -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%;
   }

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

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

apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss

@@ -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 {

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

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

apps/client/src/common/components/view-params-editor/ViewParamsPresets.module.scss

@@ -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;
+}

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

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

apps/client/src/common/components/view-params-editor/ViewParamsSection.module.scss

@@ -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 {

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

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

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

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

apps/client/src/common/hooks-query/useReport.ts

@@ -1,17 +1,34 @@
 import { useQuery } from '@tanstack/react-query';
-import { OntimeReport } from 'ontime-types';
+import type { ReportData } from 'ontime-types';
 import { MILLIS_PER_HOUR } from 'ontime-utils';
 
 import { REPORT } from '../api/constants';
 import { fetchReport } from '../api/report';
 
+const emptyReport: ReportData = {
+  eventReports: {},
+  rundown: null,
+  show: {
+    plannedStart: null,
+    plannedEnd: null,
+    plannedDuration: null,
+    actualStart: null,
+    actualEnd: null,
+    actualDuration: null,
+  },
+};
+
 export default function useReport() {
-  const { data, refetch } = useQuery<OntimeReport>({
+  const { data: report, refetch } = useQuery<ReportData>({
     queryKey: REPORT,
     queryFn: ({ signal }) => fetchReport({ signal }),
-    placeholderData: (previousData, _previousQuery) => previousData,
+    placeholderData: (previousData) => previousData,
     staleTime: MILLIS_PER_HOUR,
   });
 
-  return { data: data ?? {}, refetch };
+  return {
+    data: report?.eventReports ?? emptyReport.eventReports,
+    report: report ?? emptyReport,
+    refetch,
+  };
 }

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

@@ -2,8 +2,8 @@ import { MaybeString } from 'ontime-types';
 import { RefObject, useCallback, useEffect } from 'react';
 
 function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
-  componentRef: RefObject<ComponentRef>,
-  scrollRef: RefObject<ScrollRef>,
+  componentRef: RefObject<ComponentRef | null>,
+  scrollRef: RefObject<ScrollRef | null>,
   topOffset: number,
 ) {
   if (!componentRef.current || !scrollRef.current) {
@@ -21,18 +21,16 @@ interface UseFollowComponentProps {
   followRef: RefObject<HTMLElement | null>;
   scrollRef: RefObject<HTMLElement | null>;
   doFollow: boolean;
-  topOffset?: number;
-  setScrollFlag?: (newValue: boolean) => void;
-  followTrigger?: MaybeString; // this would be an entry id or null
+  followTrigger: MaybeString; // this would be an entry id or null
+  getTopOffset: () => number;
 }
 
 export default function useFollowComponent({
   followRef,
   scrollRef,
   doFollow,
-  topOffset = 100,
-  setScrollFlag,
   followTrigger,
+  getTopOffset,
 }: UseFollowComponentProps) {
   // when trigger moves, view should follow
   useEffect(() => {
@@ -41,25 +39,17 @@ export default function useFollowComponent({
     }
 
     if (followRef.current && scrollRef.current) {
-      setScrollFlag?.(true);
       // Use requestAnimationFrame to ensure the component is fully loaded
       window.requestAnimationFrame(() => {
-        scrollToComponent(followRef as RefObject<HTMLElement>, scrollRef as RefObject<HTMLElement>, topOffset);
-        setScrollFlag?.(false);
+        // resolve the offset after layout, so that measured values are up to date
+        scrollToComponent(followRef, scrollRef, getTopOffset());
       });
     }
-  }, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);
+  }, [followTrigger, doFollow, followRef, scrollRef, getTopOffset]);
 
-  const scrollToRefComponent = useCallback(
-    (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
-      if (componentRef && containerRef) {
-        // @ts-expect-error -- we know this are not null
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        scrollToComponent(componentRef!, containerRef!, offset);
-      }
-    },
-    [followRef, scrollRef, topOffset],
-  );
+  const scrollToRefComponent = useCallback(() => {
+    scrollToComponent(followRef, scrollRef, getTopOffset());
+  }, [followRef, scrollRef, getTopOffset]);
 
   return scrollToRefComponent;
 }

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

@@ -6,6 +6,6 @@ import { useEffect } from 'react';
  */
 export function useWindowTitle(title: string) {
   useEffect(() => {
-    document.title = `ontime - ${title}`;
+    document.title = `Ontime - ${title}`;
   }, []);
 }

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

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

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

@@ -0,0 +1,23 @@
+import type { OntimeEventReport } from 'ontime-types';
+import { dayInMs, MILLIS_PER_MINUTE } from 'ontime-utils';
+
+import { getEventVariance } from '../report';
+
+it('uses captured days when measuring an event across midnight', () => {
+  const report: OntimeEventReport = {
+    startedAt: dayInMs - 5 * MILLIS_PER_MINUTE,
+    startedAtDay: 0,
+    endedAt: 5 * MILLIS_PER_MINUTE,
+    endedAtDay: 1,
+    scheduledStart: dayInMs - 5 * MILLIS_PER_MINUTE,
+    scheduledDay: 0,
+    scheduledDuration: 10 * MILLIS_PER_MINUTE,
+  };
+
+  expect(getEventVariance(report)).toMatchObject({
+    actualDuration: 10 * MILLIS_PER_MINUTE,
+    delta: 0,
+    status: 'ontime',
+  });
+  expect(getEventVariance({ ...report, endedAt: null })).toMatchObject({ status: 'not-run' });
+});

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

@@ -58,4 +58,16 @@ describe('formatDuration()', () => {
     expect(formatDuration(2 * MILLIS_PER_HOUR + 6 * MILLIS_PER_MINUTE + 45 * MILLIS_PER_SECOND, false)).toBe('2h6m45s');
     expect(formatDuration(599702, false)).toBe('9m59s');
   });
+  it('formats durations differently with and without seconds', () => {
+    expect(formatDuration(0, false)).toBe('0m');
+    expect(formatDuration(0, true)).toBe('0m');
+    expect(formatDuration(30 * MILLIS_PER_SECOND, false)).toBe('30s');
+    expect(formatDuration(30 * MILLIS_PER_SECOND, true)).toBe('');
+    expect(formatDuration(2 * MILLIS_PER_HOUR + 30 * MILLIS_PER_SECOND, false)).toBe('2h30s');
+    expect(formatDuration(2 * MILLIS_PER_HOUR + 30 * MILLIS_PER_SECOND, true)).toBe('2h');
+    expect(formatDuration(2 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 30 * MILLIS_PER_SECOND, false)).toBe(
+      '2h10m30s',
+    );
+    expect(formatDuration(2 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 30 * MILLIS_PER_SECOND, true)).toBe('2h10m');
+  });
 });

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

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

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

@@ -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';
 }

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

@@ -0,0 +1,29 @@
+import type { MaybeNumber, OntimeEventReport } from 'ontime-types';
+import { dayInMs, MILLIS_PER_SECOND } from 'ontime-utils';
+
+type EventVariance = {
+  actualDuration: MaybeNumber;
+  delta: number;
+  status: 'ontime' | 'over' | 'under' | 'not-run';
+};
+
+const notRun: EventVariance = { actualDuration: null, delta: 0, status: 'not-run' };
+
+export function getReportTimePosition(time: number, day: number): number;
+export function getReportTimePosition(time: MaybeNumber, day: number | null): MaybeNumber;
+export function getReportTimePosition(time: MaybeNumber, day: number | null): MaybeNumber {
+  return time === null || day === null ? null : day * dayInMs + time;
+}
+
+export function getEventVariance(entry: OntimeEventReport | undefined): EventVariance {
+  if (!entry) return notRun;
+
+  const start = getReportTimePosition(entry.startedAt, entry.startedAtDay);
+  const end = getReportTimePosition(entry.endedAt, entry.endedAtDay);
+  if (start === null || end === null) return notRun;
+
+  const actualDuration = end - start;
+  const delta = actualDuration - entry.scheduledDuration;
+  if (Math.abs(delta) < MILLIS_PER_SECOND) return { actualDuration, delta, status: 'ontime' };
+  return { actualDuration, delta, status: delta > 0 ? 'over' : 'under' };
+}

apps/client/src/declarations/declaration.d.ts

@@ -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
  */

apps/client/src/features/app-settings/panel-list/PanelList.module.scss

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

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

@@ -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;

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

@@ -1,13 +1,27 @@
+/**
+ * The wide modal body does not scroll, so the form owns it.
+ * Without this the form is simply clipped: four outputs is enough to put Save out of reach.
+ */
+.form {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.formScroll {
+  height: 100%;
+}
+
 .outerColumn {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   font-size: calc(1rem - 1px);
   color: $ui-white;
-
-  // the shared modal body owns scrolling for this regular form modal
-  min-height: 100%;
   padding-block: 0.5rem;
+  // leaves the overlay scrollbar somewhere to sit without covering a field
+  padding-right: 0.5rem;
 
   h3 {
     font-size: 1rem;
@@ -26,61 +40,84 @@
   gap: 1rem;
 }
 
-.titleSection,
-.filterSection,
-.oscSection,
-.httpSection,
-.actionSection {
+.titleSection {
   display: grid;
+  grid-template-columns: 1fr;
   grid-gap: 0.5rem;
-
-  button {
-    align-self: flex-end;
-  }
 }
 
 .titleSection,
 .ruleSection,
-.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);
-  }
+.card {
   label {
+    display: block;
+    font-size: calc(1rem - 3px);
     color: $label-gray;
   }
 }
 
-.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 {
+/** shared shell for a single filter or output */
+.card {
+  border: 1px solid $white-10;
   border-left: 0.25rem solid $gray-1200;
-  padding-left: 0.5rem;
+  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;
 }

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

@@ -1,52 +1,109 @@
 import {
   Automation,
   AutomationDTO,
-  HTTPOutput,
-  OSCOutput,
-  OntimeAction,
+  AutomationFilter,
+  TimerLifeCycle,
+  Trigger,
   isHTTPOutput,
   isOSCOutput,
   isOntimeAction,
 } from 'ontime-types';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { IoAdd, IoTrash } from 'react-icons/io5';
 
-import { addAutomation, editAutomation, testOutput } from '../../../../common/api/automation';
+import {
+  addAutomation,
+  addTrigger,
+  deleteTrigger,
+  editAutomation,
+  testOutput,
+} from '../../../../common/api/automation';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import IconButton from '../../../../common/components/buttons/IconButton';
+import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import Info from '../../../../common/components/info/Info';
 import Input from '../../../../common/components/input/input/Input';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
 import Modal from '../../../../common/components/modal/Modal';
 import RadioGroup from '../../../../common/components/radio-group/RadioGroup';
+import ScrollArea from '../../../../common/components/scroll-area/ScrollArea';
 import Select from '../../../../common/components/select/Select';
 import Tag from '../../../../common/components/tag/Tag';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
 import useCustomFields from '../../../../common/hooks-query/useCustomFields';
-import { startsWithHttp } from '../../../../common/utils/regex';
 import * as Panel from '../../panel-utils/PanelUtils';
-import { isAutomation, makeFieldList } from './automationUtils';
+import { cycles, isAutomation, makeFieldList, makeTriggerTitle, operators, type OutputErrors } from './automationUtils';
+import HttpOutputForm from './HttpOutputForm';
 import OntimeActionForm from './OntimeActionForm';
-import TemplateInput from './template-input/TemplateInput';
+import OscOutputForm from './OscOutputForm';
+import OutputCard, { type TestState } from './OutputCard';
 
 import style from './AutomationForm.module.scss';
 
 const integrationsDocsUrl = 'https://docs.getontime.no/api/automation/#using-variables-in-automation';
 const formId = 'automation-form';
 
+/** how long a successful test keeps its confirmation on screen */
+const testFeedbackDuration = 2000;
+
+/** lifecycles that fire continuously, and are worth a warning before a user picks one */
+const continuousCycles: TimerLifeCycle[] = [TimerLifeCycle.onClock, TimerLifeCycle.onUpdate];
+
 interface AutomationFormProps {
   automation: Automation | AutomationDTO;
+  /** global triggers, used to resolve which lifecycles this automation is currently bound to */
+  triggers: Trigger[];
   onClose: () => void;
 }
 
-export default function AutomationForm({ automation, onClose }: AutomationFormProps) {
+export default function AutomationForm({ automation, triggers, 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,
@@ -93,6 +150,28 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
     setFocus('title');
   }, [setFocus]);
 
+  // the timers outlive a fast close, clearing them avoids setting state on an unmounted form
+  useEffect(() => {
+    const timers = feedbackTimers.current;
+    return () => Object.values(timers).forEach(clearTimeout);
+  }, []);
+
+  const reportTest = (key: string, state: TestState) => {
+    setTestResults((prev) => ({ ...prev, [key]: state }));
+    clearTimeout(feedbackTimers.current[key]);
+
+    if (state.status === 'ok') {
+      feedbackTimers.current[key] = setTimeout(() => {
+        setTestResults((prev) => {
+          const { [key]: _discarded, ...rest } = prev;
+          return rest;
+        });
+      }, testFeedbackDuration);
+    }
+  };
+
+  const getOutputErrors = (index: number) => errors.outputs?.[index] as OutputErrors | undefined;
+
   const handleAddNewFilter = () => {
     appendFilter({ field: '', operator: 'equals', value: '' });
   };
@@ -110,80 +189,99 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
     appendOutput({ type: 'ontime', action: 'aux1-start' });
   };
 
-  const handleTestOSCOutput = async (index: number) => {
+  /**
+   * Sends a single output as configured, without saving the automation.
+   * OSC is fire and forget over UDP, so the most we can honestly claim is that we sent it.
+   */
+  const handleTest = async (index: number, key: string) => {
+    const values = getValues(`outputs.${index}`);
+
+    if (isOSCOutput(values) && (!values.targetIP || !values.targetPort || !values.address)) {
+      reportTest(key, { status: 'error', message: 'Fill in the target and address before testing' });
+      return;
+    }
+    if (isHTTPOutput(values) && !values.url) {
+      reportTest(key, { status: 'error', message: 'Add a target URL before testing' });
+      return;
+    }
+
+    reportTest(key, { status: 'sending' });
     try {
-      const values = getValues(`outputs.${index}`) as OSCOutput;
-      if (!values.targetIP || !values.targetPort || !values.address) {
-        return;
-      }
-      await testOutput({
-        type: 'osc',
-        targetIP: values.targetIP,
-        targetPort: values.targetPort,
-        address: values.address,
-        args: values.args,
-      });
-    } catch (_error) {
-      /** we dont handle errors here, users should use the network tab */
+      // NOTE: there is no meaningful validation to do on an Ontime action, we let the server deal with the data
+      await testOutput(values);
+      reportTest(key, { status: 'ok', message: 'Sent' });
+    } catch (error) {
+      reportTest(key, { status: 'error', message: maybeAxiosError(error) });
     }
   };
 
-  const handleTestHTTPOutput = async (index: number) => {
-    try {
-      const values = getValues(`outputs.${index}`) as HTTPOutput;
-      if (!values.url) {
-        return;
-      }
-      await testOutput({
-        type: 'http',
-        url: values.url,
-      });
-    } catch (_error) {
-      /** we dont handle errors here, users should use the network tab */
+  /**
+   * 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 handleTestOntimeAction = async (index: number) => {
-    try {
-      const values = getValues(`outputs.${index}`) as OntimeAction;
-      // NOTE: there is no meaningful validation to do here, we let the server deal with the data
-      await testOutput({
-        ...values,
-        type: 'ontime',
-      });
-    } catch (_error) {
-      /** we dont handle errors here */
+    const toAdd = selectedCycles.filter((cycle) => !initialCycles.includes(cycle));
+    for (const cycle of toAdd) {
+      await addTrigger({ title: makeTriggerTitle(title, cycle), trigger: cycle, automationId });
     }
   };
 
   const onSubmit = async (values: AutomationDTO) => {
-    if (isAutomation(automation)) {
-      await handleEdit(automation.id, { id: automation.id, ...values });
-    } else {
-      await handleCreate(values);
+    // 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;
     }
+
+    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();
-
-    async function handleEdit(id: string, values: Automation) {
-      try {
-        await editAutomation(id, values);
-        onClose();
-      } catch (error) {
-        setError('root', { message: maybeAxiosError(error) });
-      }
-    }
-
-    async function handleCreate(values: AutomationDTO) {
-      try {
-        await addAutomation(values);
-        onClose();
-      } catch (error) {
-        setError('root', { message: maybeAxiosError(error) });
-      }
-    }
+    onClose();
   };
 
-  const canSubmit = !isSubmitting && isDirty && isValid;
+  /** 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;
+    }
+
+    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'}`;
+  };
+
+  const canSubmit = !isSubmitting && (isDirty || cyclesAreDirty) && isValid;
+  const hasContinuousCycle = selectedCycles.some((cycle) => continuousCycles.includes(cycle));
 
   return (
     <Modal
@@ -191,304 +289,239 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
       onClose={onClose}
       showBackdrop
       showCloseButton
+      size='wide'
       title={isEdit ? 'Edit automation' : 'Create automation'}
       bodyElements={
-        <form id={formId} onSubmit={handleSubmit(onSubmit)} className={style.outerColumn}>
-          <div className={style.innerColumn}>
-            <h3>Automation options</h3>
-            <div className={style.titleSection}>
-              <label>
-                Title
-                <Input
-                  {...register('title', { required: { value: true, message: 'Required field' } })}
-                  fluid
-                  placeholder='Load preset'
-                />
-              </label>
-              <Panel.Error>{errors.title?.message}</Panel.Error>
-            </div>
-          </div>
+        <form id={formId} onSubmit={handleSubmit(onSubmit)} className={style.form}>
+          <ScrollArea className={style.formScroll} contentClassName={style.outerColumn}>
+            <div className={style.innerColumn}>
+              <h3>Automation options</h3>
+              <div className={style.titleSection}>
+                <label>
+                  Title
+                  <Input
+                    {...register('title', { required: { value: true, message: 'Required field' } })}
+                    fluid
+                    placeholder='Load preset'
+                  />
+                </label>
+                <Panel.Error>{errors.title?.message}</Panel.Error>
+              </div>
 
-          <div className={style.innerColumn}>
-            <h3>Filters (optional)</h3>
-            <div className={style.ruleSection}>
-              <label>
-                Trigger outputs if
-                <RadioGroup
-                  orientation='horizontal'
-                  value={watch('filterRule')}
-                  onValueChange={(value) => setValue('filterRule', value, { shouldDirty: true })}
-                  items={[
-                    { value: 'all', label: 'All filters pass' },
-                    { value: 'any', label: 'Any filter passes' },
-                  ]}
-                />
-              </label>
-              {fieldFilters.map((field, index) => {
-                const key = `filters.${index}.field.${field.id}`;
-                return (
-                  <div key={key} className={style.filterSection}>
-                    <label>
-                      Runtime data source
-                      <Select<string | null>
-                        // need to normalize '' to null for the Select to show the placeholder
-                        value={watch(`filters.${index}.field`) || null}
-                        onValueChange={(value) => {
-                          if (value === null) return;
-                          setValue(`filters.${index}.field`, value, { shouldDirty: true });
-                        }}
-                        options={fieldList.map(({ value, label }) => ({
-                          value,
-                          label,
-                          disabled: value === null,
-                        }))}
-                        aria-label='Event field'
-                      />
-                      <Panel.Error>{errors.filters?.[index]?.field?.message}</Panel.Error>
-                    </label>
-                    <label>
-                      Matching condition
-                      <Select
-                        value={watch(`filters.${index}.operator`)}
-                        onValueChange={(value: string | null) => {
-                          if (value === null) return;
-                          setValue(
-                            `filters.${index}.operator`,
-                            value as
-                              | 'equals'
-                              | 'not_equals'
-                              | 'greater_than'
-                              | 'less_than'
-                              | 'contains'
-                              | 'not_contains',
-                            { shouldDirty: true },
-                          );
-                        }}
-                        options={[
-                          { value: 'equals', label: 'equals' },
-                          { value: 'not_equals', label: 'not equals' },
-                          { value: 'contains', label: 'contains' },
-                        ]}
-                        aria-label='Operator'
-                      />
-                      <Panel.Error>{errors.filters?.[index]?.operator?.message}</Panel.Error>
-                    </label>
-                    <label>
-                      Value to match
-                      <Input {...register(`filters.${index}.value`)} fluid placeholder='<empty / no value>' />
-                    </label>
-                    <div>
-                      <span>&nbsp;</span>
-                      <div>
+              <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>
+                )}
+                {fieldFilters.map((field, index) => {
+                  const description = describeFilter(index);
+                  return (
+                    <div key={field.id} className={style.card}>
+                      <div className={style.cardHeader}>
+                        <Tag>Filter</Tag>
+                        <span className={style.cardSummary}>{description}</span>
                         <IconButton
-                          aria-label='Delete'
+                          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>
                     </div>
-                  </div>
-                );
-              })}
-              <div>
-                <Button onClick={handleAddNewFilter}>
-                  Add filter <IoAdd />
-                </Button>
+                  );
+                })}
+                <div>
+                  <Button onClick={handleAddNewFilter}>
+                    Add filter <IoAdd />
+                  </Button>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div className={style.innerColumn}>
-            <h3>Outputs</h3>
-            <Info>
-              Automation outputs can be used to send data from Ontime to external software <br />
-              or to change properties of Ontime itself. <br /> <br />
-              Use Ontime runtime data in these fields with template strings. Type {'{{'} to see autocomplete, or{' '}
-              <ExternalLink href={integrationsDocsUrl}>read the docs</ExternalLink>
-            </Info>
+            <div className={style.innerColumn}>
+              <h3>Outputs</h3>
+              <Info>
+                Type {'{{'} in any field to drop in Ontime runtime data, like the running event title.{' '}
+                <ExternalLink href={integrationsDocsUrl}>read the docs</ExternalLink>
+              </Info>
 
-            {fieldOutputs.map((output, index) => {
-              if (isOSCOutput(output)) {
-                const rowErrors = errors.outputs?.[index] as
-                  | {
-                      targetIP?: { message?: string };
-                      targetPort?: { message?: string };
-                      address?: { message?: string };
-                      args?: { message?: string };
-                    }
-                  | undefined;
+              {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.'
+                />
+              )}
 
-                return (
-                  <div key={output.id} className={style.outputCard}>
-                    <Tag>OSC</Tag>
-                    <div className={style.oscSection}>
-                      <label>
-                        Target IP
-                        <Input
-                          {...register(`outputs.${index}.targetIP`, {
-                            required: { value: true, message: 'Required field' },
-                          })}
-                          fluid
-                          placeholder='127.0.0.1'
-                        />
-                        <Panel.Error>{rowErrors?.targetIP?.message}</Panel.Error>
-                      </label>
-                      <label>
-                        Target Port
-                        <Input
-                          {...register(`outputs.${index}.targetPort`, {
-                            required: { value: true, message: 'Required field' },
-                            setValueAs: (value) => (value === '' ? 0 : Number(value)),
-                            max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
-                            min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
-                          })}
-                          fluid
-                          type='number'
-                          maxLength={5}
-                          placeholder='8000'
-                        />
-                        <Panel.Error>{rowErrors?.targetPort?.message}</Panel.Error>
-                      </label>
-                      <label>
-                        Address
-                        <TemplateInput
-                          {...register(`outputs.${index}.address`)}
-                          value={output.address}
-                          fluid
-                          placeholder='/cue/start'
-                        />
-                        <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
-                      </label>
-                      <label>
-                        Arguments
-                        <TemplateInput
-                          {...register(`outputs.${index}.args`)}
-                          value={output.args}
-                          fluid
-                          placeholder='1'
-                        />
-                        <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
-                      </label>
-                      <div>
-                        <span>&nbsp;</span>
-                        <Panel.InlineElements relation='inner'>
-                          <Button variant='ghosted-white' onClick={() => handleTestOSCOutput(index)}>
-                            Test
-                          </Button>
-                          <IconButton
-                            aria-label='Delete'
-                            variant='ghosted-destructive'
-                            onClick={() => removeOutput(index)}
-                          >
-                            <IoTrash />
-                          </IconButton>
-                        </Panel.InlineElements>
-                      </div>
-                    </div>
-                  </div>
-                );
-              }
-              if (isHTTPOutput(output)) {
-                const rowErrors = errors.outputs?.[index] as
-                  | {
-                      url?: { message?: string };
-                    }
-                  | undefined;
-                return (
-                  <div key={output.id} className={style.outputCard}>
-                    <Tag>HTTP</Tag>
-                    <div className={style.httpSection}>
-                      <label>
-                        Target URL
-                        <TemplateInput
-                          {...register(`outputs.${index}.url`, {
-                            required: { value: true, message: 'Required field' },
-                            pattern: {
-                              value: startsWithHttp,
-                              message: 'HTTP messages should target http:// or https://',
-                            },
-                          })}
-                          value={output.url}
-                          fluid
-                          placeholder='http://127.0.0.1/start/1'
-                        />
-                        <Panel.Error>{rowErrors?.url?.message}</Panel.Error>
-                      </label>
-                      <div>
-                        <span>&nbsp;</span>
-                        <Panel.InlineElements relation='inner'>
-                          <Button variant='ghosted-white' onClick={() => handleTestHTTPOutput(index)}>
-                            Test
-                          </Button>
-                          <IconButton
-                            aria-label='Delete'
-                            variant='ghosted-destructive'
-                            onClick={() => removeOutput(index)}
-                          >
-                            <IoTrash />
-                          </IconButton>
-                        </Panel.InlineElements>
-                      </div>
-                    </div>
-                  </div>
-                );
-              }
+              {fieldOutputs.map((output, index) => {
+                const rowErrors = getOutputErrors(index);
+                const cardProps = {
+                  testState: testResults[output.id],
+                  onTest: () => handleTest(index, output.id),
+                  onDelete: () => removeOutput(index),
+                };
 
-              if (isOntimeAction(output)) {
-                const rowErrors = errors.outputs?.[index] as
-                  | {
-                      action?: { message?: string };
-                      time?: { message?: string };
-                      text?: { message?: string };
-                      visible?: { message?: string };
-                      secondarySource?: { message?: string };
-                    }
-                  | undefined;
-                return (
-                  <div key={output.id} className={style.outputCard}>
-                    <Tag>Ontime action</Tag>
-                    <OntimeActionForm
-                      value={output.action}
-                      index={index}
-                      register={register}
-                      rowErrors={rowErrors}
-                      setValue={setValue}
-                      watch={watch}
+                if (isOSCOutput(output)) {
+                  return (
+                    <OutputCard
+                      key={output.id}
+                      label='OSC'
+                      kindClass={style.tagOsc}
+                      summary={watch(`outputs.${index}.address`)}
+                      {...cardProps}
                     >
-                      <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>
-                );
-              }
+                      <OscOutputForm index={index} output={output} register={register} rowErrors={rowErrors} />
+                    </OutputCard>
+                  );
+                }
 
-              return null;
-            })}
-            <Panel.InlineElements relation='inner'>
-              <Button onClick={handleAddNewOSCOutput}>
-                OSC <IoAdd />
-              </Button>
-              <Button onClick={handleAddNewHTTPOutput}>
-                HTTP <IoAdd />
-              </Button>
-              <Button onClick={handleAddnewOntimeAction}>
-                Ontime action <IoAdd />
-              </Button>
-            </Panel.InlineElements>
-          </div>
+                if (isHTTPOutput(output)) {
+                  return (
+                    <OutputCard key={output.id} label='HTTP' kindClass={style.tagHttp} {...cardProps}>
+                      <HttpOutputForm index={index} output={output} register={register} rowErrors={rowErrors} />
+                    </OutputCard>
+                  );
+                }
+
+                if (isOntimeAction(output)) {
+                  return (
+                    <OutputCard key={output.id} label='Ontime action' kindClass={style.tagOntime} {...cardProps}>
+                      <OntimeActionForm
+                        value={output.action}
+                        index={index}
+                        register={register}
+                        rowErrors={rowErrors}
+                        setValue={setValue}
+                        watch={watch}
+                      />
+                    </OutputCard>
+                  );
+                }
+
+                return null;
+              })}
+              <div>
+                <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>
+            </div>
+          </ScrollArea>
         </form>
       }
       footerElements={

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

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

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

@@ -94,7 +94,8 @@ export default function AutomationSettingsForm({
         <Panel.Section>
           <Info>
             <span>Control Ontime and share its data with external systems in your workflow.</span>
-            <span>- Automations allow Ontime to send its data on lifecycle triggers.</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>- OSC Input tells Ontime to listen to messages on the specific port.</span>
             <ExternalLink href={oscApiDocsUrl}>See the docs</ExternalLink>
           </Info>

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

@@ -0,0 +1,20 @@
+/** tags make a cell taller than the title beside it, which staggers on the default baseline */
+.table td {
+  vertical-align: middle;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.actions {
+  justify-content: flex-end;
+  flex-wrap: nowrap;
+}
+
+.muted {
+  color: $muted-gray;
+}

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

@@ -1,18 +1,25 @@
-import { AutomationDTO, NormalisedAutomation } from 'ontime-types';
-import { Fragment, useState } from 'react';
+import { Automation, AutomationDTO, NormalisedAutomation, Trigger } from 'ontime-types';
+import { useMemo, useState } from 'react';
 import { IoAdd, IoPencil, IoTrash } from 'react-icons/io5';
 
-import { deleteAutomation } from '../../../../common/api/automation';
-import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import IconButton from '../../../../common/components/buttons/IconButton';
 import Info from '../../../../common/components/info/Info';
 import Tag from '../../../../common/components/tag/Tag';
+import { getLifecycleLabel } from '../../../../common/constants/timerLifecycle';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
+import { summariseOutputs } from '../../../../common/utils/automationOutputs';
+import { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
+import useAppSettingsNavigation from '../../useAppSettingsNavigation';
 import AutomationForm from './AutomationForm';
+import { groupTriggersByAutomation, isAutomation } from './automationUtils';
+import DeleteAutomationDialog from './DeleteAutomationDialog';
+import NewAutomationDialog from './NewAutomationDialog';
 
-const automationPlaceholder: AutomationDTO = {
+import style from './AutomationsList.module.scss';
+
+const emptyAutomation: AutomationDTO = {
   title: '',
   filterRule: 'all',
   filters: [],
@@ -21,37 +28,73 @@ const automationPlaceholder: AutomationDTO = {
 
 interface AutomationsListProps {
   automations: NormalisedAutomation;
+  triggers: Trigger[];
   enabledAutomations?: boolean;
   isLoading: boolean;
 }
 
-export default function AutomationsList({ automations, enabledAutomations, isLoading }: AutomationsListProps) {
+export default function AutomationsList({
+  automations,
+  triggers,
+  enabledAutomations,
+  isLoading,
+}: AutomationsListProps) {
   const { refetch } = useAutomationSettings();
-  const [automationFormData, setAutomationFormData] = useState<AutomationDTO | null>(null);
-  const [deleteError, setDeleteError] = useState<string | null>(null);
+  const { setLocation } = useAppSettingsNavigation();
+  const [editing, setEditing] = useState<Automation | AutomationDTO | null>(null);
+  const [isPickingStart, setIsPickingStart] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<Automation | null>(null);
 
-  const handleDelete = async (id: string) => {
-    try {
-      setDeleteError(null);
-      await deleteAutomation(id);
-    } catch (error) {
-      setDeleteError(maybeAxiosError(error));
-    } finally {
-      refetch();
-    }
+  const lifecyclesByAutomation = useMemo(() => groupTriggersByAutomation(triggers), [triggers]);
+  const automationIds = Object.keys(automations);
+
+  /** a recipe creates the automation itself, so it lands in the list rather than in a form */
+  const handleCreated = async () => {
+    setIsPickingStart(false);
+    await refetch();
   };
 
-  const arrayAutomations = Object.keys(automations);
+  const handleStartEmpty = () => {
+    setIsPickingStart(false);
+    setEditing(emptyAutomation);
+  };
+
+  const handleDeleted = async () => {
+    setDeleteTarget(null);
+    await refetch();
+  };
 
   return (
     <Panel.Section>
       <Panel.Card>
-        {automationFormData !== null && (
-          <AutomationForm automation={automationFormData} onClose={() => setAutomationFormData(null)} />
+        {editing !== null && (
+          <AutomationForm
+            // the form snapshots the automation's lifecycles on mount, so it must never be
+            // reused across two different automations
+            key={isAutomation(editing) ? editing.id : 'new'}
+            automation={editing}
+            triggers={triggers}
+            onClose={() => setEditing(null)}
+          />
+        )}
+        {isPickingStart && (
+          <NewAutomationDialog
+            onClose={() => setIsPickingStart(false)}
+            onStartEmpty={handleStartEmpty}
+            onCreated={handleCreated}
+          />
+        )}
+        {deleteTarget !== null && (
+          <DeleteAutomationDialog
+            automation={deleteTarget}
+            attachedTriggers={triggers.filter((trigger) => trigger.automationId === deleteTarget.id)}
+            onCancel={() => setDeleteTarget(null)}
+            onDeleted={handleDeleted}
+          />
         )}
         <Panel.SubHeader>
           Manage automations
-          <Button onClick={() => setAutomationFormData(automationPlaceholder)}>
+          <Button onClick={() => setIsPickingStart(true)}>
             New <IoAdd />
           </Button>
         </Panel.SubHeader>
@@ -60,74 +103,102 @@ export default function AutomationsList({ automations, enabledAutomations, isLoa
 
         <Panel.Section>
           {enabledAutomations === false && (
-            <Info>
-              Automations are disabled. You can still manage automation definitions here, but they will not run until
-              enabled.
+            <Info type='warning'>
+              <Info.Body>Automations are off, so nothing in this list will run.</Info.Body>
+              <Info.Footer>
+                {/* the master switch is at the top of the panel, out of sight once the list has rows */}
+                <Button size='small' onClick={() => setLocation('automation__settings')}>
+                  Go to automation settings
+                </Button>
+              </Info.Footer>
             </Info>
           )}
 
-          <Panel.Table>
+          <Panel.Table className={style.table}>
             <thead>
               <tr>
-                <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 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 />
               </tr>
             </thead>
             <tbody>
-              {!isLoading && arrayAutomations.length === 0 && (
+              {!isLoading && automationIds.length === 0 && (
                 <Panel.TableEmpty
                   title='No automations yet'
-                  description='An automation sends OSC or HTTP messages, or runs an Ontime action, whenever a trigger fires.'
+                  description='An automation sends OSC or HTTP messages, or runs an Ontime action, whenever a trigger fires. Start from a recipe to see one working.'
                   action={
-                    <Button variant='primary' onClick={() => setAutomationFormData(automationPlaceholder)}>
-                      Create automation <IoAdd />
+                    <Button variant='primary' onClick={() => setIsPickingStart(true)}>
+                      New automation <IoAdd />
                     </Button>
                   }
                 />
               )}
-              {arrayAutomations.map((automationId) => {
-                if (!Object.hasOwn(automations, automationId)) {
-                  return null;
-                }
+              {automationIds.map((automationId) => {
+                const automation = automations[automationId];
+                const lifecycles = lifecyclesByAutomation[automationId] ?? [];
+                const outputs = summariseOutputs(automation.outputs);
+
                 return (
-                  <Fragment key={automationId}>
-                    <tr>
-                      <td>{automations[automationId].title}</td>
-                      <td>
-                        <Tag>{automations[automationId].filterRule}</Tag>
-                      </td>
-                      <td>{automations[automationId].filters.length}</td>
-                      <td>{automations[automationId].outputs.length}</td>
-                      <Panel.InlineElements align='end' relation='inner' as='td'>
+                  <tr key={automationId}>
+                    <td>{automation.title}</td>
+                    <td>
+                      {/*
+                       * Only global triggers are visible here: an automation can also be attached to
+                       * single events, which live in the rundown. An empty cell is therefore not the
+                       * same as never running, so it says nothing rather than claiming that.
+                       */}
+                      {lifecycles.length === 0 ? (
+                        <span className={style.muted}>—</span>
+                      ) : (
+                        <div className={style.tags}>
+                          {lifecycles.map((cycle) => (
+                            <Tag key={cycle}>{getLifecycleLabel(cycle)}</Tag>
+                          ))}
+                        </div>
+                      )}
+                    </td>
+                    <td>
+                      {automation.filters.length === 0 ? (
+                        <span className={style.muted}>—</span>
+                      ) : (
+                        <Tag>{automation.filterRule === 'all' ? 'All filters' : 'Any filter'}</Tag>
+                      )}
+                    </td>
+                    <td>
+                      <div className={style.tags}>
+                        {outputs.length === 0 ? (
+                          <Tag variant='warning'>No outputs</Tag>
+                        ) : (
+                          outputs.map(({ type, label, count }) => (
+                            <Tag key={type}>{count > 1 ? `${label} ×${count}` : label}</Tag>
+                          ))
+                        )}
+                      </div>
+                    </td>
+                    <td>
+                      <div className={cx([style.tags, style.actions])}>
                         <IconButton
                           variant='ghosted-white'
                           aria-label='Edit entry'
-                          onClick={() => setAutomationFormData(automations[automationId])}
+                          onClick={() => setEditing(automation)}
                         >
                           <IoPencil />
                         </IconButton>
                         <IconButton
                           variant='ghosted-destructive'
                           aria-label='Delete entry'
-                          onClick={() => handleDelete(automationId)}
+                          onClick={() => setDeleteTarget(automation)}
                         >
                           <IoTrash />
                         </IconButton>
-                      </Panel.InlineElements>
-                    </tr>
-                  </Fragment>
+                      </div>
+                    </td>
+                  </tr>
                 );
               })}
-              {deleteError && (
-                <tr>
-                  <td colSpan={5}>
-                    <Panel.Error>{deleteError}</Panel.Error>
-                  </td>
-                </tr>
-              )}
             </tbody>
           </Panel.Table>
         </Panel.Section>

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

@@ -0,0 +1,96 @@
+import type { Automation, Trigger } from 'ontime-types';
+import { useState } from 'react';
+
+import { deleteAutomation } from '../../../../common/api/automation';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import Dialog from '../../../../common/components/dialog/Dialog';
+import Info from '../../../../common/components/info/Info';
+import { getLifecycleLabel } from '../../../../common/constants/timerLifecycle';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+interface DeleteAutomationDialogProps {
+  automation: Automation;
+  /** global triggers pointing at this automation, they are deleted along with it */
+  attachedTriggers: Trigger[];
+  onCancel: () => void;
+  onDeleted: () => void;
+}
+
+/**
+ * Deleting takes the automation's global triggers with it, so say so before it happens rather
+ * than leaving the user to discover it in the triggers list.
+ *
+ * An automation attached to an event is still refused by the server: that reference lives in
+ * the rundown and removing it is an edit to the show, not to this panel.
+ */
+export default function DeleteAutomationDialog({
+  automation,
+  attachedTriggers,
+  onCancel,
+  onDeleted,
+}: DeleteAutomationDialogProps) {
+  const [error, setError] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = async () => {
+    setError(null);
+    setIsDeleting(true);
+    try {
+      await deleteAutomation(automation.id);
+      onDeleted();
+    } catch (error) {
+      setError(maybeAxiosError(error));
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <Dialog
+      isOpen
+      onClose={onCancel}
+      showBackdrop
+      showCloseButton
+      title='Delete automation'
+      bodyElements={
+        <Panel.Section>
+          <Panel.Paragraph>
+            Delete <strong>{automation.title}</strong>? This cannot be undone.
+          </Panel.Paragraph>
+
+          {attachedTriggers.length > 0 && (
+            <Info type='warning'>
+              <Info.Title>
+                {attachedTriggers.length === 1
+                  ? 'Its trigger is deleted with it'
+                  : `Its ${attachedTriggers.length} triggers are deleted with it`}
+              </Info.Title>
+              <Info.Body>{attachedTriggers.map((trigger) => getLifecycleLabel(trigger.trigger)).join(', ')}</Info.Body>
+            </Info>
+          )}
+
+          {error && (
+            <Info type='error'>
+              <Info.Title>Could not delete this automation</Info.Title>
+              <Info.Body>{error}</Info.Body>
+              <Info.Footer>
+                An automation attached to a single event has to be removed from that event first, in the event editor.
+              </Info.Footer>
+            </Info>
+          )}
+        </Panel.Section>
+      }
+      footerElements={
+        <>
+          <Button onClick={onCancel} disabled={isDeleting}>
+            Cancel
+          </Button>
+          <Button variant='destructive' onClick={handleDelete} loading={isDeleting}>
+            Delete
+          </Button>
+        </>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,34 @@
+import type { AutomationDTO, HTTPOutput } from 'ontime-types';
+import type { UseFormRegister } from 'react-hook-form';
+
+import { startsWithHttp } from '../../../../common/utils/regex';
+import * as Panel from '../../panel-utils/PanelUtils';
+import type { OutputErrors } from './automationUtils';
+import TemplateInput from './template-input/TemplateInput';
+
+import style from './AutomationForm.module.scss';
+
+interface HttpOutputFormProps {
+  index: number;
+  output: HTTPOutput;
+  register: UseFormRegister<AutomationDTO>;
+  rowErrors?: OutputErrors;
+}
+
+export default function HttpOutputForm({ index, output, register, rowErrors }: HttpOutputFormProps) {
+  return (
+    <label className={style.spanFull}>
+      Target URL
+      <TemplateInput
+        {...register(`outputs.${index}.url`, {
+          required: { value: true, message: 'Required field' },
+          pattern: { value: startsWithHttp, message: 'HTTP messages should target http:// or https://' },
+        })}
+        value={output.url}
+        fluid
+        placeholder='http://127.0.0.1/start/1'
+      />
+      <Panel.Error>{rowErrors?.url?.message}</Panel.Error>
+    </label>
+  );
+}

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

@@ -0,0 +1,196 @@
+/* ---------- step one: pick a recipe ---------- */
+
+.picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  color: $ui-white;
+}
+
+/** outside the scrolling list, so it stays put however many recipes there are */
+.search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-block: 0.5rem;
+}
+
+/**
+ * Caps the list rather than fixing its height, so the dialog still shrinks to two results
+ * when a search narrows it down.
+ */
+.listViewport {
+  height: auto;
+  max-height: min(52vh, 30rem);
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  // room for the overlay scrollbar beside the chevrons
+  padding-right: 0.5rem;
+}
+
+.searchIcon {
+  position: absolute;
+  left: 0.625rem;
+  color: $gray-400;
+  pointer-events: none;
+}
+
+.searchInput {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.searchClear {
+  position: absolute;
+  right: 0.25rem;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-top: 0.75rem;
+
+  &:first-child {
+    padding-top: 0;
+  }
+}
+
+.groupTitle {
+  margin: 0;
+  padding-inline: 0.125rem;
+  font-size: $aux-text-size;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: $gray-400;
+}
+
+.recipe {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  text-align: left;
+  color: inherit;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: $component-border-radius-md;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $white-3;
+    border-color: $white-10;
+  }
+
+  &:focus-visible {
+    outline: 1px solid $action-blue;
+    outline-offset: -1px;
+  }
+}
+
+.recipeText {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.recipeTitle {
+  font-weight: 600;
+}
+
+.recipeDescription {
+  font-size: $aux-text-size;
+  color: $secondary-text-gray;
+}
+
+.recipeTags {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.chevron {
+  color: $gray-400;
+}
+
+/* ---------- step two: answer what the recipe cannot know ---------- */
+
+.setup {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  color: $ui-white;
+  padding-block: 0.25rem;
+}
+
+.setupDescription {
+  margin: 0;
+  color: $secondary-text-gray;
+}
+
+/** the two facts a recipe decides for you, stated before the fields you can change */
+.summary {
+  display: grid;
+  grid-template-columns: 5rem 1fr;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+  margin: 0;
+  padding: 0.75rem;
+  background-color: $black-10;
+  border: 1px solid $white-10;
+  border-radius: $component-border-radius-md;
+
+  dt {
+    font-size: $aux-text-size;
+    color: $label-gray;
+  }
+
+  dd {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin: 0;
+  }
+}
+
+/* three columns, so a recipe's small numeric fields fill a row instead of leaving a hole */
+.fields {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  align-items: start;
+  gap: 0.75rem;
+
+  @media (width < 40rem) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* an address or a sentence, which a third of a row cannot hold */
+.wide {
+  grid-column: 1 / -1;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: $aux-text-size;
+  color: $label-gray;
+}
+
+.hint {
+  color: $secondary-text-gray;
+}
+
+/* pushes the leading action away from the confirming ones */
+.apart {
+  margin-right: auto;
+}

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

@@ -0,0 +1,309 @@
+import type { Automation } from 'ontime-types';
+import { useMemo, useState, type KeyboardEvent } from 'react';
+import { IoAdd, IoArrowBack, IoChevronForward, IoClose, IoSearch } from 'react-icons/io5';
+
+import { addAutomation, addTrigger } from '../../../../common/api/automation';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import IconButton from '../../../../common/components/buttons/IconButton';
+import Input from '../../../../common/components/input/input/Input';
+import Modal from '../../../../common/components/modal/Modal';
+import ScrollArea from '../../../../common/components/scroll-area/ScrollArea';
+import Select from '../../../../common/components/select/Select';
+import Tag from '../../../../common/components/tag/Tag';
+import { getLifecycleLabel } from '../../../../common/constants/timerLifecycle';
+import { summariseOutputs } from '../../../../common/utils/automationOutputs';
+import { cx } from '../../../../common/utils/styleUtils';
+import { isOntimeCloud } from '../../../../externals';
+import * as Panel from '../../panel-utils/PanelUtils';
+import {
+  automationRecipes,
+  defaultValues,
+  needsTarget,
+  recipeCategoryLabels,
+  recipeCategoryOrder,
+  type AutomationRecipe,
+  type RecipeValues,
+} from './automationRecipes';
+import { makeTriggerTitle } from './automationUtils';
+
+import style from './NewAutomationDialog.module.scss';
+
+interface NewAutomationDialogProps {
+  onClose: () => void;
+  /** hands over to the full automation form for someone who wants to start empty */
+  onStartEmpty: () => void;
+  onCreated: (automation: Automation) => void;
+}
+
+/**
+ * The single entry point for making an automation.
+ *
+ * Two steps in one dialog rather than two stacked ones: pick a recipe, then answer only
+ * what that recipe cannot know — where your gear is, how long the timer runs. Everything
+ * else the recipe already decided, which is the point of having recipes at all.
+ */
+export default function NewAutomationDialog({ onClose, onStartEmpty, onCreated }: NewAutomationDialogProps) {
+  const [selected, setSelected] = useState<AutomationRecipe | null>(null);
+
+  return selected === null ? (
+    <RecipePicker onClose={onClose} onStartEmpty={onStartEmpty} onSelect={setSelected} />
+  ) : (
+    <RecipeSetup recipe={selected} onClose={onClose} onBack={() => setSelected(null)} onCreated={onCreated} />
+  );
+}
+
+/** matches on everything the user might type: the software, its protocol, the job it does */
+function matches(recipe: AutomationRecipe, query: string): boolean {
+  const haystack = [recipe.title, recipe.description, recipeCategoryLabels[recipe.category], ...(recipe.keywords ?? [])]
+    .join(' ')
+    .toLowerCase();
+  return query
+    .toLowerCase()
+    .split(/\s+/)
+    .every((term) => haystack.includes(term));
+}
+
+interface RecipePickerProps {
+  onClose: () => void;
+  onStartEmpty: () => void;
+  onSelect: (recipe: AutomationRecipe) => void;
+}
+
+function RecipePicker({ onClose, onStartEmpty, onSelect }: RecipePickerProps) {
+  const [query, setQuery] = useState('');
+
+  const available = useMemo(
+    () =>
+      // OSC is not available in the cloud service, offering those recipes there would be a lie
+      isOntimeCloud
+        ? automationRecipes.filter(
+            (recipe) => !recipe.build(defaultValues(recipe)).outputs.some((output) => output.type === 'osc'),
+          )
+        : automationRecipes,
+    [],
+  );
+
+  const trimmed = query.trim();
+  const results = trimmed ? available.filter((recipe) => matches(recipe, trimmed)) : available;
+
+  const handleSearchKey = (event: KeyboardEvent<HTMLInputElement>) => {
+    // the dialog is the only thing listening for escape, and losing it while clearing a
+    // search would be a bigger surprise than the search staying put
+    if (event.key === 'Escape' && trimmed.length > 0) {
+      event.stopPropagation();
+      setQuery('');
+      return;
+    }
+
+    if (event.key === 'Enter' && results.length > 0) {
+      onSelect(results[0]);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen
+      onClose={onClose}
+      showBackdrop
+      showCloseButton
+      size='compact'
+      title='New automation'
+      bodyElements={
+        <div className={style.picker}>
+          <div className={style.search}>
+            <IoSearch className={style.searchIcon} />
+            <Input
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              onKeyDown={handleSearchKey}
+              placeholder='Search recipes, eg. QLab, OSC, message'
+              className={style.searchInput}
+              aria-label='Search recipes'
+              fluid
+              autoFocus
+            />
+            {trimmed.length > 0 && (
+              <IconButton
+                variant='ghosted-white'
+                size='small'
+                aria-label='Clear search'
+                className={style.searchClear}
+                onClick={() => setQuery('')}
+              >
+                <IoClose />
+              </IconButton>
+            )}
+          </div>
+
+          {results.length === 0 && (
+            <Panel.EmptyState
+              title='No recipe matches that'
+              description='Try the name of the software, or start from an empty automation.'
+            />
+          )}
+
+          <ScrollArea viewportClassName={style.listViewport} contentClassName={style.list}>
+            {recipeCategoryOrder.map((category) => {
+              const inCategory = results.filter((recipe) => recipe.category === category);
+              if (inCategory.length === 0) {
+                return null;
+              }
+
+              return (
+                <section key={category} className={style.group}>
+                  <h4 className={style.groupTitle}>{recipeCategoryLabels[category]}</h4>
+                  {inCategory.map((recipe) => (
+                    <button type='button' key={recipe.id} className={style.recipe} onClick={() => onSelect(recipe)}>
+                      <div className={style.recipeText}>
+                        <div className={style.recipeTitle}>{recipe.title}</div>
+                        <div className={style.recipeDescription}>{recipe.description}</div>
+                      </div>
+                      <div className={style.recipeTags}>
+                        {recipe.triggers.map((cycle) => (
+                          <Tag key={cycle}>{getLifecycleLabel(cycle)}</Tag>
+                        ))}
+                        <IoChevronForward className={style.chevron} />
+                      </div>
+                    </button>
+                  ))}
+                </section>
+              );
+            })}
+          </ScrollArea>
+        </div>
+      }
+      footerElements={
+        <>
+          <Button variant='ghosted-white' className={style.apart} onClick={onStartEmpty}>
+            Start from an empty automation
+          </Button>
+          <Button onClick={onClose}>Cancel</Button>
+        </>
+      }
+    />
+  );
+}
+
+interface RecipeSetupProps {
+  recipe: AutomationRecipe;
+  onClose: () => void;
+  onBack: () => void;
+  onCreated: (automation: Automation) => void;
+}
+
+function RecipeSetup({ recipe, onClose, onBack, onCreated }: RecipeSetupProps) {
+  const [values, setValues] = useState<RecipeValues>(() => defaultValues(recipe));
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const automation = recipe.build(values);
+  const isComplete = recipe.params.every(({ name }) => values[name]?.trim());
+
+  const setValue = (name: string, value: string) => setValues((prev) => ({ ...prev, [name]: value }));
+
+  const handleCreate = async () => {
+    setError(null);
+    setIsCreating(true);
+    try {
+      // the same two steps the automation form takes when it saves a new automation:
+      // the server generates the id, so the automation has to exist before a trigger can point at it
+      const created = await addAutomation(automation);
+      for (const cycle of recipe.triggers) {
+        await addTrigger({
+          title: makeTriggerTitle(automation.title, cycle),
+          trigger: cycle,
+          automationId: created.id,
+        });
+      }
+      onCreated(created);
+    } catch (error) {
+      // a half created automation is visible in the list and flagged there, so say what
+      // happened and let the user finish it in the form rather than undoing their work
+      setError(maybeAxiosError(error));
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen
+      onClose={onClose}
+      showBackdrop
+      showCloseButton
+      size='compact'
+      title={recipe.title}
+      bodyElements={
+        <div className={style.setup}>
+          <p className={style.setupDescription}>{recipe.description}</p>
+
+          <dl className={style.summary}>
+            <dt>Runs on</dt>
+            <dd>
+              {recipe.triggers.map((cycle) => (
+                <Tag key={cycle}>{getLifecycleLabel(cycle)}</Tag>
+              ))}
+            </dd>
+            <dt>Sends</dt>
+            <dd>
+              {summariseOutputs(automation.outputs).map(({ type, label, count }) => (
+                <Tag key={type}>{count > 1 ? `${label} ×${count}` : label}</Tag>
+              ))}
+            </dd>
+          </dl>
+
+          {recipe.params.length > 0 && (
+            <div className={style.fields}>
+              {recipe.params.map((param) => (
+                <label key={param.name} className={cx([style.field, param.wide && style.wide])}>
+                  {param.label}
+                  {param.type === 'choice' ? (
+                    <Select
+                      value={values[param.name]}
+                      onValueChange={(value: string | null) => {
+                        if (value === null) return;
+                        setValue(param.name, value);
+                      }}
+                      options={param.options ?? []}
+                      aria-label={param.label}
+                      fluid
+                    />
+                  ) : (
+                    <Input
+                      type={param.type === 'number' ? 'number' : 'text'}
+                      value={values[param.name]}
+                      onChange={(event) => setValue(param.name, event.target.value)}
+                      fluid
+                    />
+                  )}
+                  {param.hint && <span className={style.hint}>{param.hint}</span>}
+                </label>
+              ))}
+            </div>
+          )}
+
+          <Panel.Description>
+            {needsTarget(recipe)
+              ? 'Created as a normal automation. Nothing is sent until an event triggers it.'
+              : 'Created as a normal automation, which you can edit or delete like any other.'}
+          </Panel.Description>
+        </div>
+      }
+      footerElements={
+        <>
+          {error && <Panel.Error>{error}</Panel.Error>}
+          <Button variant='ghosted-white' className={style.apart} onClick={onBack} disabled={isCreating}>
+            <IoArrowBack /> All recipes
+          </Button>
+          <Button onClick={onClose} disabled={isCreating}>
+            Cancel
+          </Button>
+          <Button variant='primary' onClick={handleCreate} loading={isCreating} disabled={!isComplete}>
+            Create automation <IoAdd />
+          </Button>
+        </>
+      }
+    />
+  );
+}

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

@@ -1,10 +1,11 @@
 import { AutomationDTO, OntimeAction, OntimeActionKey, SecondarySource } from 'ontime-types';
-import { PropsWithChildren, useState } from 'react';
+import { useState } from 'react';
 import { UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form';
 
 import Input from '../../../../common/components/input/input/Input';
 import Select from '../../../../common/components/select/Select';
 import * as Panel from '../../panel-utils/PanelUtils';
+import type { OutputErrors } from './automationUtils';
 import TemplateInput from './template-input/TemplateInput';
 
 import style from './AutomationForm.module.scss';
@@ -12,13 +13,7 @@ import style from './AutomationForm.module.scss';
 interface OntimeActionFormProps {
   index: number;
   register: UseFormRegister<AutomationDTO>;
-  rowErrors?: {
-    action?: { message?: string };
-    time?: { message?: string };
-    text?: { message?: string };
-    visible?: { message?: string };
-    secondarySource?: { message?: string };
-  };
+  rowErrors?: OutputErrors;
   value: OntimeAction['action'];
   watch: UseFormWatch<AutomationDTO>;
   setValue: UseFormSetValue<AutomationDTO>;
@@ -30,9 +25,8 @@ export default function OntimeActionForm({
   setValue,
   rowErrors,
   value,
-  children,
   watch,
-}: PropsWithChildren<OntimeActionFormProps>) {
+}: OntimeActionFormProps) {
   const [selectedAction, setSelectedAction] = useState<string>(value);
 
   const handleSetAction = (value: OntimeActionKey) => {
@@ -41,7 +35,7 @@ export default function OntimeActionForm({
   };
 
   return (
-    <div className={style.actionSection}>
+    <>
       <label>
         Action
         <Select
@@ -95,7 +89,7 @@ export default function OntimeActionForm({
 
       {selectedAction === 'message-set' && (
         <>
-          <label>
+          <label className={style.spanFull}>
             Text (leave empty for no change)
             <TemplateInput
               {...register(`outputs.${index}.text`)}
@@ -127,7 +121,7 @@ export default function OntimeActionForm({
 
       {selectedAction === 'message-secondary' && (
         <>
-          <label>
+          <label className={style.spanFull}>
             Text (leave empty for no change)
             <TemplateInput
               {...register(`outputs.${index}.text`)}
@@ -169,8 +163,6 @@ export default function OntimeActionForm({
           </label>
         </>
       )}
-
-      <div className={style.test}>{children}</div>
-    </div>
+    </>
   );
 }

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

@@ -0,0 +1,63 @@
+import type { AutomationDTO, OSCOutput } from 'ontime-types';
+import type { UseFormRegister } from 'react-hook-form';
+
+import Input from '../../../../common/components/input/input/Input';
+import * as Panel from '../../panel-utils/PanelUtils';
+import type { OutputErrors } from './automationUtils';
+import TemplateInput from './template-input/TemplateInput';
+
+import style from './AutomationForm.module.scss';
+
+interface OscOutputFormProps {
+  index: number;
+  output: OSCOutput;
+  register: UseFormRegister<AutomationDTO>;
+  rowErrors?: OutputErrors;
+}
+
+export default function OscOutputForm({ index, output, register, rowErrors }: OscOutputFormProps) {
+  return (
+    <>
+      <label>
+        Target IP
+        <Input
+          {...register(`outputs.${index}.targetIP`, { required: { value: true, message: 'Required field' } })}
+          fluid
+          placeholder='127.0.0.1'
+        />
+        <Panel.Error>{rowErrors?.targetIP?.message}</Panel.Error>
+      </label>
+      <label>
+        Target Port
+        <Input
+          {...register(`outputs.${index}.targetPort`, {
+            required: { value: true, message: 'Required field' },
+            setValueAs: (value) => (value === '' ? 0 : Number(value)),
+            max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
+            min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
+          })}
+          fluid
+          type='number'
+          maxLength={5}
+          placeholder='8000'
+        />
+        <Panel.Error>{rowErrors?.targetPort?.message}</Panel.Error>
+      </label>
+      <label className={style.spanFull}>
+        Address
+        <TemplateInput
+          {...register(`outputs.${index}.address`)}
+          value={output.address}
+          fluid
+          placeholder='/cue/start'
+        />
+        <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
+      </label>
+      <label className={style.spanFull}>
+        Arguments
+        <TemplateInput {...register(`outputs.${index}.args`)} value={output.args} fluid placeholder='1' />
+        <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
+      </label>
+    </>
+  );
+}

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

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import { IoCheckmark, IoTrash } from 'react-icons/io5';
+
+import Button from '../../../../common/components/buttons/Button';
+import IconButton from '../../../../common/components/buttons/IconButton';
+import Tag from '../../../../common/components/tag/Tag';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+import style from './AutomationForm.module.scss';
+
+export type TestState = { status: 'sending' | 'ok' | 'error'; message?: string };
+
+interface OutputCardProps {
+  label: string;
+  kindClass?: string;
+  summary?: string;
+  testState?: TestState;
+  onTest: () => void;
+  onDelete: () => void;
+  children: ReactNode;
+}
+
+/**
+ * Shared chrome for every output kind: the type tag and the actions live in the header,
+ * so they stop competing with the form fields for grid columns
+ */
+export default function OutputCard({
+  label,
+  kindClass,
+  summary,
+  testState,
+  onTest,
+  onDelete,
+  children,
+}: OutputCardProps) {
+  return (
+    <div className={style.card}>
+      <div className={style.cardHeader}>
+        <Tag className={kindClass}>{label}</Tag>
+        <span className={style.cardSummary}>{summary}</span>
+        {testState?.status === 'ok' && (
+          <span className={style.testOk}>
+            <IoCheckmark />
+            {testState.message}
+          </span>
+        )}
+        <Button variant='ghosted-white' onClick={onTest} loading={testState?.status === 'sending'}>
+          Test
+        </Button>
+        <IconButton aria-label='Delete output' variant='ghosted-destructive' onClick={onDelete}>
+          <IoTrash />
+        </IconButton>
+      </div>
+      {testState?.status === 'error' && <Panel.Error className={style.testError}>{testState.message}</Panel.Error>}
+      <div className={style.cardBody}>{children}</div>
+    </div>
+  );
+}

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

@@ -5,9 +5,9 @@ import { IoAdd } from 'react-icons/io5';
 import { deleteTrigger } from '../../../../common/api/automation';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
-import Info from '../../../../common/components/info/Info';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
 import * as Panel from '../../panel-utils/PanelUtils';
+import useAppSettingsNavigation from '../../useAppSettingsNavigation';
 import { checkDuplicates } from './automationUtils';
 import TriggerForm from './TriggerForm';
 import TriggersListItem from './TriggersListItem';
@@ -20,13 +20,13 @@ type FormState = {
 interface TriggersListProps {
   triggers: Trigger[];
   automations: NormalisedAutomation;
-  enabledAutomations?: boolean;
   isLoading: boolean;
 }
 
-export default function TriggersList({ triggers, automations, enabledAutomations, isLoading }: TriggersListProps) {
+export default function TriggersList({ triggers, automations, isLoading }: TriggersListProps) {
   const [formState, setFormState] = useState<FormState>({ isOpen: false, trigger: undefined });
   const { refetch } = useAutomationSettings();
+  const { setLocation } = useAppSettingsNavigation();
   const [deleteError, setDeleteError] = useState<string | null>(null);
 
   const openNewForm = () => setFormState({ isOpen: true });
@@ -50,6 +50,10 @@ 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;
@@ -66,22 +70,28 @@ export default function TriggersList({ triggers, automations, enabledAutomations
           />
         )}
         <Panel.SubHeader>
-          Manage triggers
+          Global triggers
           <Button disabled={!canAdd} onClick={openNewForm}>
             New <IoAdd />
           </Button>
         </Panel.SubHeader>
         <Panel.Divider />
         <Panel.Section>
-          {enabledAutomations === false && (
-            <Info>
-              Automations are disabled. You can still manage triggers here, but they will not run until enabled.
-            </Info>
-          )}
+          <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>
           {duplicates && (
             <Panel.Error>
-              You have created multiple links between the same trigger and automation which can cause performance
-              issues.
+              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.`}
             </Panel.Error>
           )}
           <Panel.Table>
@@ -99,14 +109,18 @@ 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, like when an event starts or finishes.'
-                      : 'Create an automation first, then add a trigger to decide when it should run.'
+                      ? '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.'
                   }
                   action={
-                    canAdd && (
+                    canAdd ? (
                       <Button variant='primary' onClick={openNewForm}>
                         Create trigger <IoAdd />
                       </Button>
+                    ) : (
+                      <Button variant='primary' onClick={() => setLocation('automation__automations')}>
+                        Go to automations
+                      </Button>
                     )
                   }
                 />

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

@@ -31,7 +31,12 @@ export default function TriggersListItem(props: TriggersListItemProps) {
         <Tag>{cycles.find((cycle) => cycle.value === trigger.trigger)?.label}</Tag>
       </td>
       <td>
-        <Tag>{automations?.[trigger.automationId]?.title}</Tag>
+        {/* 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>
+        )}
       </td>
       <Panel.InlineElements align='end' relation='inner' as='td'>
         <IconButton variant='ghosted-white' aria-label='Edit entry' onClick={handleEdit}>

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

@@ -0,0 +1,113 @@
+import { isHTTPOutput, isOSCOutput, isOntimeAction, timerLifecycleValues } from 'ontime-types';
+
+import { automationRecipes, defaultValues, needsTarget, recipeCategoryOrder } from '../automationRecipes';
+import { operators } from '../automationUtils';
+
+/**
+ * Recipes are shipped as constants but created through the same endpoint as a hand written
+ * automation. These assertions stand in for the server side validation, so a recipe cannot
+ * silently rot into something that 400s when the user presses create.
+ */
+describe('automationRecipes', () => {
+  const built = automationRecipes.map((recipe) => ({ recipe, automation: recipe.build(defaultValues(recipe)) }));
+
+  it('has unique ids', () => {
+    const ids = automationRecipes.map(({ id }) => id);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+
+  it('only uses categories the picker knows how to render', () => {
+    for (const { recipe } of built) {
+      expect(recipeCategoryOrder).toContain(recipe.category);
+    }
+  });
+
+  it('binds every recipe to at least one valid lifecycle', () => {
+    for (const { recipe } of built) {
+      expect(recipe.triggers.length).toBeGreaterThan(0);
+      for (const cycle of recipe.triggers) {
+        expect(timerLifecycleValues).toContain(cycle);
+      }
+    }
+  });
+
+  it('builds a titled automation with something to send, from its own defaults', () => {
+    for (const { automation } of built) {
+      expect(automation.title).not.toBe('');
+      expect(automation.outputs.length).toBeGreaterThan(0);
+
+      for (const output of automation.outputs) {
+        expect(isOSCOutput(output) || isHTTPOutput(output) || isOntimeAction(output)).toBe(true);
+      }
+    }
+  });
+
+  it('gives every choice parameter options, and a default that is one of them', () => {
+    const choices = automationRecipes.flatMap(({ params }) => params.filter(({ type }) => type === 'choice'));
+    expect(choices.filter(({ options }) => !options?.length)).toEqual([]);
+    expect(choices.filter(({ options, defaultValue }) => !options?.some((o) => o.value === defaultValue))).toEqual([]);
+  });
+
+  it('reads every parameter it declares', () => {
+    // a param the builder ignores is a field the user fills in for nothing, and a typo in
+    // either half would put the literal 'undefined' inside a URL
+    for (const { recipe } of built) {
+      for (const param of recipe.params) {
+        // a choice can only take one of its own options, so probe with the last one
+        if (param.type === 'choice') {
+          const last = param.options?.at(-1)?.value ?? '';
+          expect(JSON.stringify(recipe.build({ ...defaultValues(recipe), [param.name]: last }))).toContain(last);
+          continue;
+        }
+        const marker = param.type === 'number' ? '4242' : 'ontime-probe';
+        const probed = { ...defaultValues(recipe), [param.name]: marker };
+        expect(JSON.stringify(recipe.build(probed))).toContain(marker);
+      }
+    }
+  });
+
+  it('only uses filter operators the server accepts', () => {
+    const allowed = operators.map(({ value }) => value);
+    for (const { automation } of built) {
+      for (const filter of automation.filters) {
+        expect(allowed).toContain(filter.operator);
+      }
+    }
+  });
+
+  it('defaults every external target to this machine', () => {
+    const outputs = built.flatMap(({ automation }) => automation.outputs);
+    const osc = outputs.filter(isOSCOutput);
+    const http = outputs.filter(isHTTPOutput);
+
+    // filtering rather than asserting in a branch, so a failure names the offending recipe
+    expect(osc.filter(({ targetIP }) => targetIP !== '127.0.0.1')).toEqual([]);
+    expect(osc.filter(({ targetPort }) => !Number.isFinite(targetPort))).toEqual([]);
+    expect(http.filter(({ url }) => !url.startsWith('http://127.0.0.1'))).toEqual([]);
+  });
+
+  it('flags the recipes that reach outside Ontime', () => {
+    for (const { recipe, automation } of built) {
+      const reachesOut = automation.outputs.some((output) => isOSCOutput(output) || isHTTPOutput(output));
+      expect(needsTarget(recipe)).toBe(reachesOut);
+    }
+  });
+
+  /** the outputs a recipe builds from the given answers, as plain JSON to assert against */
+  function buildWith(id: string, values: Record<string, string>) {
+    const recipe = automationRecipes.find((candidate) => candidate.id === id);
+    return JSON.stringify(recipe?.build(values).outputs);
+  }
+
+  it('tolerates a URL that already carries a query', () => {
+    expect(buildWith('webhook-event-title', { url: 'http://127.0.0.1:3000/now?source=ontime' })).toContain(
+      '/now?source=ontime&title=',
+    );
+  });
+
+  it('tolerates an address pasted with a trailing slash', () => {
+    expect(
+      buildWith('companion-press', { host: 'http://127.0.0.1:8888/', page: '1', row: '0', column: '0' }),
+    ).toContain('http://127.0.0.1:8888/api/location/1/0/0/press');
+  });
+});

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

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

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

@@ -0,0 +1,282 @@
+import type { AutomationDTO, TimerLifeCycle } from 'ontime-types';
+import { TimerLifeCycle as Cycle } from 'ontime-types';
+
+export type RecipeCategory = 'ontime' | 'playback' | 'video' | 'messaging';
+
+export const recipeCategoryLabels: Record<RecipeCategory, string> = {
+  ontime: 'Ontime automations',
+  playback: 'Playback and cue systems',
+  video: 'Video and streaming',
+  messaging: 'Webhooks and messaging',
+};
+
+/** presentation order, empty categories are not rendered */
+export const recipeCategoryOrder: RecipeCategory[] = ['ontime', 'playback', 'video', 'messaging'];
+
+export type RecipeParam = {
+  name: string;
+  label: string;
+  /** one line under the field, for anything the label cannot say */
+  hint?: string;
+  type?: 'text' | 'number' | 'choice';
+  /** required by 'choice', which renders a select rather than a free field */
+  options?: { value: string; label: string }[];
+  /** takes a whole row: addresses and free text read badly in a narrow column */
+  wide?: boolean;
+  /** every default points at this machine, so a recipe cannot reach a venue network unasked */
+  defaultValue: string;
+};
+
+export type RecipeValues = Record<string, string>;
+
+export type AutomationRecipe = {
+  /** stable, client only. Never persisted */
+  id: string;
+  title: string;
+  /** one line, plain language: what this does for the user */
+  description: string;
+  category: RecipeCategory;
+  /** extra search terms: other names for the software, its protocol, the job it does */
+  keywords?: string[];
+  /** what the dialog asks for. Empty when the recipe needs nothing */
+  params: RecipeParam[];
+  triggers: TimerLifeCycle[];
+  /** typed, so the compiler catches a recipe drifting from the automation schema */
+  build: (values: RecipeValues) => AutomationDTO;
+};
+
+const auxTimers = [
+  { value: '1', label: 'Aux timer 1' },
+  { value: '2', label: 'Aux timer 2' },
+  { value: '3', label: 'Aux timer 3' },
+];
+
+type AuxNumber = '1' | '2' | '3';
+
+/**
+ * Action keys are a union the compiler checks against the automation schema, so the aux
+ * number is resolved through maps rather than string interpolation. Anything unexpected
+ * falls back to the first timer instead of building an action the server would reject.
+ */
+function toAux(value: string): AuxNumber {
+  return value === '2' || value === '3' ? value : '1';
+}
+
+const auxSet = { 1: 'aux1-set', 2: 'aux2-set', 3: 'aux3-set' } as const;
+const auxStart = { 1: 'aux1-start', 2: 'aux2-start', 3: 'aux3-start' } as const;
+const auxStop = { 1: 'aux1-stop', 2: 'aux2-stop', 3: 'aux3-stop' } as const;
+const auxSource = { 1: 'aux1', 2: 'aux2', 3: 'aux3' } as const;
+
+/** a user pasting an address is as likely to include the trailing slash as not */
+function origin(value: string): string {
+  return value.trim().replace(/\/+$/, '');
+}
+
+/** the recipe cannot know whether the user's URL already carries a query */
+function withQuery(url: string, query: string): string {
+  const trimmed = url.trim();
+  return trimmed.includes('?') ? `${trimmed}&${query}` : `${trimmed}?${query}`;
+}
+
+export const automationRecipes: AutomationRecipe[] = [
+  {
+    id: 'ontime-aux-timer',
+    title: 'Run an aux timer with the event',
+    description: 'Sets an aux timer and starts it whenever an event starts.',
+    category: 'ontime',
+    keywords: ['countdown', 'stage timer', 'speaker'],
+    params: [
+      { name: 'aux', label: 'Which timer', type: 'choice', options: auxTimers, defaultValue: '1' },
+      { name: 'duration', label: 'Duration', hint: 'hh:mm:ss', defaultValue: '00:05:00' },
+    ],
+    triggers: [Cycle.onStart],
+    build: ({ aux, duration }) => ({
+      title: `Run Aux Timer ${toAux(aux)} with the event`,
+      filterRule: 'all',
+      filters: [],
+      outputs: [
+        { type: 'ontime', action: auxSet[toAux(aux)], time: duration.trim() },
+        { type: 'ontime', action: auxStart[toAux(aux)] },
+      ],
+    }),
+  },
+  {
+    id: 'ontime-aux-stop',
+    title: 'Stop the aux timer when the event ends',
+    description: 'Stops an aux timer on finish, so it does not keep running into the next event.',
+    category: 'ontime',
+    keywords: ['countdown', 'stage timer', 'reset'],
+    params: [{ name: 'aux', label: 'Which timer', type: 'choice', options: auxTimers, defaultValue: '1' }],
+    triggers: [Cycle.onFinish],
+    build: ({ aux }) => ({
+      title: `Stop Aux Timer ${toAux(aux)} on finish`,
+      filterRule: 'all',
+      filters: [],
+      outputs: [{ type: 'ontime', action: auxStop[toAux(aux)] }],
+    }),
+  },
+  {
+    id: 'ontime-warn-stage',
+    title: 'Warn the stage when time runs low',
+    description: 'Shows a message on the stage timer as the running event enters its danger window.',
+    category: 'ontime',
+    keywords: ['message', 'danger', 'wrap up', 'presenter'],
+    params: [{ name: 'message', label: 'Message', wide: true, defaultValue: 'Please wrap up' }],
+    triggers: [Cycle.onDanger],
+    build: ({ message }) => ({
+      title: 'Warn the stage at danger',
+      filterRule: 'all',
+      filters: [],
+      outputs: [{ type: 'ontime', action: 'message-set', text: message, visible: true }],
+    }),
+  },
+  {
+    id: 'ontime-clear-message',
+    title: 'Hide the stage message on finish',
+    description: 'Clears the stage message once the event finishes. Pairs with the warning above.',
+    category: 'ontime',
+    keywords: ['message', 'clear', 'presenter'],
+    params: [],
+    triggers: [Cycle.onFinish],
+    build: () => ({
+      title: 'Hide the stage message on finish',
+      filterRule: 'all',
+      filters: [],
+      outputs: [{ type: 'ontime', action: 'message-set', text: '', visible: false }],
+    }),
+  },
+  {
+    id: 'ontime-secondary-message',
+    title: 'Show an aux timer beside the stage message',
+    description: 'Points the secondary field on the stage timer at an aux timer when an event loads.',
+    category: 'ontime',
+    keywords: ['message', 'secondary', 'stage', 'countdown'],
+    params: [{ name: 'aux', label: 'Which timer', type: 'choice', options: auxTimers, defaultValue: '1' }],
+    triggers: [Cycle.onLoad],
+    build: ({ aux }) => ({
+      title: `Show Aux Timer ${toAux(aux)} as the secondary message`,
+      filterRule: 'all',
+      filters: [],
+      outputs: [{ type: 'ontime', action: 'message-secondary', secondarySource: auxSource[toAux(aux)] }],
+    }),
+  },
+  {
+    id: 'qlab-go',
+    title: 'QLab — fire the matching cue',
+    description: "Starts the QLab cue whose number matches the Ontime event's cue.",
+    category: 'playback',
+    keywords: ['osc', 'sound', 'audio', 'mac', 'figure 53'],
+    params: [
+      {
+        name: 'ip',
+        label: 'QLab computer',
+        hint: 'IP address of the machine running QLab',
+        wide: true,
+        defaultValue: '127.0.0.1',
+      },
+      { name: 'port', label: 'OSC port', type: 'number', hint: "QLab's default is 53000", defaultValue: '53000' },
+    ],
+    triggers: [Cycle.onStart],
+    build: ({ ip, port }) => ({
+      title: 'QLab GO on event start',
+      filterRule: 'all',
+      filters: [],
+      outputs: [
+        {
+          type: 'osc',
+          targetIP: ip.trim(),
+          targetPort: Number(port),
+          address: '/cue/{{eventNow.cue}}/start',
+          args: '',
+        },
+      ],
+    }),
+  },
+  {
+    id: 'companion-press',
+    title: 'Companion — press a button',
+    description: 'Presses a Stream Deck button through the Companion HTTP API when an event starts.',
+    category: 'playback',
+    keywords: ['stream deck', 'bitfocus', 'obs', 'http', 'elgato'],
+    params: [
+      {
+        name: 'host',
+        label: 'Companion address',
+        hint: 'Where the Companion HTTP API is listening',
+        wide: true,
+        defaultValue: 'http://127.0.0.1:8888',
+      },
+      { name: 'page', label: 'Page', type: 'number', defaultValue: '1' },
+      { name: 'row', label: 'Row', type: 'number', defaultValue: '0' },
+      { name: 'column', label: 'Column', type: 'number', defaultValue: '0' },
+    ],
+    triggers: [Cycle.onStart],
+    build: ({ host, page, row, column }) => ({
+      title: 'Companion button press',
+      filterRule: 'all',
+      filters: [],
+      // Companion HTTP API: /api/location/<page>/<row>/<column>/press
+      outputs: [{ type: 'http', url: `${origin(host)}/api/location/${page}/${row}/${column}/press` }],
+    }),
+  },
+  {
+    id: 'vmix-overlay-warning',
+    title: 'vMix — show an overlay on warning',
+    description: 'Triggers a vMix overlay through the web controller when the timer enters its warning window.',
+    category: 'video',
+    keywords: ['streaming', 'http', 'lower third', 'graphics'],
+    params: [
+      {
+        name: 'host',
+        label: 'vMix address',
+        hint: 'The vMix web controller',
+        wide: true,
+        defaultValue: 'http://127.0.0.1:8088',
+      },
+      { name: 'overlay', label: 'Overlay number', type: 'number', defaultValue: '1' },
+    ],
+    triggers: [Cycle.onWarning],
+    build: ({ host, overlay }) => ({
+      title: 'vMix overlay on warning',
+      filterRule: 'all',
+      filters: [],
+      outputs: [{ type: 'http', url: `${origin(host)}/api/?Function=OverlayInput${overlay}In` }],
+    }),
+  },
+  {
+    id: 'webhook-event-title',
+    title: 'Webhook — post the running event',
+    description: 'Calls any URL with the running event title, as a template string you can edit afterwards.',
+    category: 'messaging',
+    keywords: ['http', 'rest', 'api', 'integration', 'slack'],
+    params: [
+      {
+        name: 'url',
+        label: 'URL',
+        hint: 'The event title is added as a title parameter',
+        wide: true,
+        defaultValue: 'http://127.0.0.1:3000/now',
+      },
+    ],
+    triggers: [Cycle.onStart],
+    build: ({ url }) => ({
+      title: 'Webhook with the current event',
+      filterRule: 'all',
+      filters: [],
+      outputs: [{ type: 'http', url: withQuery(url, 'title={{eventNow.title}}') }],
+    }),
+  },
+];
+
+/** the values the dialog starts with, so a recipe can be created without touching a field */
+export function defaultValues(recipe: AutomationRecipe): RecipeValues {
+  return Object.fromEntries(recipe.params.map(({ name, defaultValue }) => [name, defaultValue]));
+}
+
+/**
+ * A recipe that only sends Ontime actions works the moment it is created.
+ * Anything else points at software we cannot locate for the user.
+ */
+export function needsTarget(recipe: AutomationRecipe): boolean {
+  return !recipe.build(defaultValues(recipe)).outputs.every((output) => output.type === 'ontime');
+}

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

@@ -1,4 +1,20 @@
-import { Automation, AutomationDTO, CustomFields, TimerLifeCycle, Trigger } from 'ontime-types';
+import { Automation, AutomationDTO, AutomationFilter, CustomFields, TimerLifeCycle, Trigger } from 'ontime-types';
+
+import { getLifecycleLabel, lifecycleLabels } from '../../../../common/constants/timerLifecycle';
+
+/**
+ * Names a trigger created from an automation's lifecycle picker.
+ * Shared so a trigger made by the form and one made by a recipe read the same in the list.
+ */
+export function makeTriggerTitle(automationTitle: string, cycle: TimerLifeCycle): string {
+  return `${automationTitle} — ${getLifecycleLabel(cycle)}`;
+}
+
+/**
+ * Outputs are a union, so react-hook-form cannot resolve a field's error by name.
+ * Every output card knows which fields it registered, this just makes them reachable.
+ */
+export type OutputErrors = Partial<Record<string, { message?: string }>>;
 
 type CycleLabel = {
   id: number;
@@ -7,15 +23,29 @@ type CycleLabel = {
 };
 
 export const cycles: CycleLabel[] = [
-  { 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' },
+  { 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' },
 ];
 
 /**
@@ -83,3 +113,23 @@ export function checkDuplicates(triggers: Trigger[]) {
   }
   return duplicates.length > 0 ? duplicates : undefined;
 }
+
+/**
+ * Groups the lifecycles each automation is bound to
+ * Used to show when an automation runs, and to highlight the ones that never will
+ */
+export function groupTriggersByAutomation(triggers: Trigger[]): Record<string, TimerLifeCycle[]> {
+  const grouped: Record<string, TimerLifeCycle[]> = {};
+
+  for (const trigger of triggers) {
+    if (!Object.hasOwn(grouped, trigger.automationId)) {
+      grouped[trigger.automationId] = [];
+    }
+    // the runtime fires an automation once per lifecycle, duplicates would be noise here
+    if (!grouped[trigger.automationId].includes(trigger.trigger)) {
+      grouped[trigger.automationId].push(trigger.trigger);
+    }
+  }
+
+  return grouped;
+}

apps/client/src/features/app-settings/panel/feature-panel/ReportSettings.module.scss

@@ -1,7 +0,0 @@
-th.over {
-  color: $playback-over;
-}
-
-th.under {
-  color: $playback-under;
-}

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

@@ -1,103 +1,72 @@
 import { useMemo } from 'react';
-import { IoTrashBin } from 'react-icons/io5';
+import { IoDownloadOutline, IoTrashBin } from 'react-icons/io5';
 
 import { deleteAllReport } from '../../../../common/api/report';
 import { createBlob, downloadBlob } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import useReport from '../../../../common/hooks-query/useReport';
-import useRundown from '../../../../common/hooks-query/useRundown';
-import { cx } from '../../../../common/utils/styleUtils';
-import { formatTime } from '../../../../common/utils/time';
 import * as Panel from '../../panel-utils/PanelUtils';
-import { CombinedReport, getCombinedReport, makeReportCSV } from './reportSettings.utils';
-
-import style from './ReportSettings.module.scss';
+import ReportShowSummary from './composite/ReportShowSummary';
+import ReportTable from './composite/ReportTable';
+import { getCombinedReport, getGroupReports, getRunSummary, makeReportCSV } from './reportSettings.utils';
 
 export default function ReportSettings() {
-  const { data: reportData } = useReport();
-  const { data } = useRundown();
+  const { report } = useReport();
+  const { eventReports, rundown, show } = report;
+
+  const { combinedReport, groups, summary } = useMemo(() => {
+    const entries = rundown?.entries ?? {};
+    return {
+      combinedReport: rundown ? getCombinedReport(eventReports, entries, rundown.flatOrder) : [],
+      groups: rundown ? getGroupReports(eventReports, entries, rundown.order) : [],
+      summary: getRunSummary(eventReports, entries, rundown?.flatOrder ?? []),
+    };
+  }, [eventReports, rundown]);
+
+  const hasReport = rundown !== null && Object.keys(eventReports).length > 0;
+  const downloadCSV = () => {
+    if (!hasReport) return;
 
-  const clearReport = async () => await deleteAllReport();
-  const downloadCSV = (combinedReport: CombinedReport[]) => {
-    if (!combinedReport) {
-      return;
-    }
     const csv = makeReportCSV(combinedReport);
     const blob = createBlob(csv, 'text/csv;charset=utf-8;');
     downloadBlob(blob, 'ontime-report.csv');
   };
 
-  const combinedReport = useMemo(() => {
-    return getCombinedReport(reportData, data.entries, data.flatOrder);
-  }, [reportData, data.entries, data.flatOrder]);
-
   return (
     <Panel.Section>
       <Panel.Card>
-        <Panel.SubHeader>Report</Panel.SubHeader>
+        <Panel.SubHeader>
+          Report
+          <Panel.InlineElements>
+            <Button onClick={downloadCSV} disabled={!hasReport}>
+              <IoDownloadOutline />
+              Export CSV
+            </Button>
+            <Button variant='subtle-destructive' onClick={deleteAllReport} disabled={!hasReport}>
+              <IoTrashBin />
+              Clear Report
+            </Button>
+          </Panel.InlineElements>
+        </Panel.SubHeader>
         <Panel.Divider />
-        <Panel.Section>
-          <Panel.Title>
-            Manage report
-            <Panel.InlineElements>
-              <Button onClick={() => downloadCSV(combinedReport)} disabled={combinedReport.length === 0}>
-                <IoTrashBin />
-                Export CSV
-              </Button>
-              <Button variant='subtle-destructive' onClick={clearReport} disabled={combinedReport.length === 0}>
-                <IoTrashBin />
-                Clear All
-              </Button>
-            </Panel.InlineElements>
-          </Panel.Title>
-        </Panel.Section>
-        <Panel.Section>
-          <Panel.Table>
-            <thead>
-              <tr>
-                <th>#</th>
-                <th>Cue</th>
-                <th>Title</th>
-                <th>Scheduled Start</th>
-                <th>Actual Start</th>
-                <th>Scheduled End</th>
-                <th>Actual End</th>
-              </tr>
-            </thead>
-            <tbody>
-              {combinedReport.length === 0 && (
-                <Panel.TableEmpty
-                  title='No report data yet'
-                  description='Reports are generated as you run through the show, comparing scheduled times against what actually happened.'
-                />
-              )}
 
-              {combinedReport.map((entry) => {
-                const start = (() => {
-                  if (entry.actualStart === null) return null;
-                  if (entry.actualStart <= entry.scheduledStart) return 'under';
-                  return 'over';
-                })();
-                const end = (() => {
-                  if (entry.actualEnd === null) return null;
-                  if (entry.actualEnd <= entry.scheduledEnd) return 'under';
-                  return 'over';
-                })();
-                return (
-                  <tr key={entry.id}>
-                    <th>{entry.index}</th>
-                    <th>{entry.cue}</th>
-                    <th>{entry.title}</th>
-                    <th className={cx([start && style[start]])}>{formatTime(entry.scheduledStart)}</th>
-                    <th className={cx([start && style[start]])}>{formatTime(entry.actualStart)}</th>
-                    <th className={cx([end && style[end]])}>{formatTime(entry.scheduledEnd)}</th>
-                    <th className={cx([end && style[end]])}>{formatTime(entry.actualEnd)}</th>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </Panel.Table>
-        </Panel.Section>
+        {!hasReport ? (
+          <Panel.Section>
+            <Panel.EmptyState
+              title='No report yet'
+              description='Start an event to record actual timings against the schedule.'
+            />
+          </Panel.Section>
+        ) : (
+          <>
+            <Panel.Section>
+              <ReportShowSummary rundownTitle={rundown.title} show={show} summary={summary} />
+            </Panel.Section>
+            <Panel.Section>
+              <ReportTable rows={combinedReport} groups={groups} />
+            </Panel.Section>
+          </>
+        )}
       </Panel.Card>
     </Panel.Section>
   );

apps/client/src/features/app-settings/panel/feature-panel/__tests__/reportSettings.utils.test.ts

@@ -0,0 +1,156 @@
+import type { OntimeEventReport, OntimeReport } from 'ontime-types';
+import {
+  createDelay,
+  createEvent,
+  createGroup,
+  dayInMs,
+  MILLIS_PER_HOUR,
+  MILLIS_PER_MINUTE,
+  MILLIS_PER_SECOND,
+} from 'ontime-utils';
+
+import {
+  formatOffset,
+  getCombinedReport,
+  getGroupReports,
+  getRunSummary,
+  getShowOffsets,
+  makeReportCSV,
+} from '../reportSettings.utils';
+
+function makeEvent(id: string, patch = {}) {
+  const event = createEvent({ id, title: id, ...patch });
+  if (!event) throw new Error('Failed to create test event');
+  return event;
+}
+
+function makeReport(patch: Partial<OntimeEventReport> = {}): OntimeEventReport {
+  return {
+    startedAt: 5 * MILLIS_PER_MINUTE,
+    startedAtDay: 1,
+    endedAt: 15 * MILLIS_PER_MINUTE,
+    endedAtDay: 1,
+    scheduledStart: dayInMs - 5 * MILLIS_PER_MINUTE,
+    scheduledDay: 0,
+    scheduledDuration: 10 * MILLIS_PER_MINUTE,
+    ...patch,
+  };
+}
+
+describe('getCombinedReport()', () => {
+  it('uses the captured schedule and absolute day when calculating offsets', () => {
+    const entry = makeEvent('a', { timeStart: 0, duration: 99 * MILLIS_PER_MINUTE });
+    const rows = getCombinedReport({ a: makeReport() }, { a: entry }, ['a']);
+
+    expect(rows[0]).toMatchObject({
+      scheduledStart: dayInMs - 5 * MILLIS_PER_MINUTE,
+      scheduledEnd: dayInMs + 5 * MILLIS_PER_MINUTE,
+      startOffset: 10 * MILLIS_PER_MINUTE,
+      endOffset: 10 * MILLIS_PER_MINUTE,
+    });
+  });
+
+  it('includes unplayed events but excludes skipped and non-event entries', () => {
+    const ran = makeEvent('ran');
+    const unplayed = makeEvent('unplayed', { timeStart: 20 * MILLIS_PER_MINUTE });
+    const skipped = makeEvent('skipped', { skip: true });
+    const delay = createDelay({ id: 'delay' });
+    const report: OntimeReport = { ran: makeReport({ scheduledStart: 0, scheduledDay: 0 }) };
+
+    const rows = getCombinedReport(report, { ran, unplayed, skipped, delay }, ['ran', 'unplayed', 'skipped', 'delay']);
+
+    expect(rows.map(({ id }) => id)).toEqual(['ran', 'unplayed']);
+    expect(rows[1]).toMatchObject({ scheduledStart: unplayed.timeStart, actualStart: null, actualEnd: null });
+  });
+});
+
+describe('report calculations', () => {
+  it('keeps finishing time separate from running time', () => {
+    const offsets = getShowOffsets({
+      plannedStart: 19 * MILLIS_PER_HOUR,
+      plannedEnd: 21 * MILLIS_PER_HOUR,
+      plannedDuration: 2 * MILLIS_PER_HOUR,
+      actualStart: 19 * MILLIS_PER_HOUR - 10 * MILLIS_PER_MINUTE,
+      actualEnd: 21 * MILLIS_PER_HOUR - 6 * MILLIS_PER_MINUTE,
+      actualDuration: 2 * MILLIS_PER_HOUR + 4 * MILLIS_PER_MINUTE,
+    });
+
+    expect(offsets).toMatchObject({
+      startOffset: -10 * MILLIS_PER_MINUTE,
+      endOffset: -6 * MILLIS_PER_MINUTE,
+      durationOffset: 4 * MILLIS_PER_MINUTE,
+    });
+  });
+
+  it('measures completed groups against their target', () => {
+    const group = createGroup({ id: 'group', entries: ['a', 'b'], targetDuration: 30 * MILLIS_PER_MINUTE });
+    const entries = {
+      group,
+      a: makeEvent('a', { parent: group.id, duration: 10 * MILLIS_PER_MINUTE }),
+      b: makeEvent('b', { parent: group.id, duration: 10 * MILLIS_PER_MINUTE }),
+    };
+    const report: OntimeReport = {
+      a: makeReport({ startedAt: 0, startedAtDay: 0, endedAt: 10 * MILLIS_PER_MINUTE, endedAtDay: 0 }),
+      b: makeReport({
+        startedAt: 15 * MILLIS_PER_MINUTE,
+        startedAtDay: 0,
+        endedAt: 25 * MILLIS_PER_MINUTE,
+        endedAtDay: 0,
+      }),
+    };
+
+    expect(getGroupReports(report, entries, [group.id])[0]).toMatchObject({
+      elapsed: 25 * MILLIS_PER_MINUTE,
+      variance: -5 * MILLIS_PER_MINUTE,
+      eventsRun: 2,
+      eventsPlanned: 2,
+    });
+    expect(getGroupReports({ a: report.a }, entries, [group.id])[0].variance).toBeNull();
+  });
+
+  it('summarises completed events and excludes skipped events from the plan', () => {
+    const entries = { a: makeEvent('a'), b: makeEvent('b', { skip: true }) };
+    const report = {
+      a: makeReport({ startedAt: 0, startedAtDay: 0, endedAt: 15 * MILLIS_PER_MINUTE, endedAtDay: 0 }),
+      b: makeReport({ startedAt: 0, startedAtDay: 0, endedAt: 30 * MILLIS_PER_MINUTE, endedAtDay: 0 }),
+    };
+
+    expect(getRunSummary(report, entries, ['a', 'b'])).toEqual({ eventsRun: 2, eventsPlanned: 1 });
+  });
+});
+
+describe('report formatting', () => {
+  it.each([
+    [null, '–'],
+    [MILLIS_PER_SECOND / 2, 'On time'],
+    [4 * MILLIS_PER_MINUTE + 12 * MILLIS_PER_SECOND, '+4m12s'],
+    [-MILLIS_PER_MINUTE, '-1m'],
+  ])('formats offset %s', (value, expected) => {
+    expect(formatOffset(value)).toBe(expected);
+  });
+
+  it('exports group context and leaves missing actual times empty', () => {
+    const csv = makeReportCSV([
+      {
+        id: 'a',
+        index: 1,
+        title: 'Welcome',
+        cue: '1',
+        parent: 'act1',
+        groupTitle: 'Act 1',
+        scheduledStart: 0,
+        scheduledEnd: 10 * MILLIS_PER_MINUTE,
+        actualStart: null,
+        startOffset: null,
+        actualEnd: null,
+        endOffset: null,
+      },
+    ]);
+
+    const fields = csv.trim().split('\n')[1].split(',');
+    expect(csv).toContain('Group');
+    expect(fields[1]).toBe('Act 1');
+    expect(fields[5]).toBe('');
+    expect(fields[7]).toBe('');
+  });
+});

apps/client/src/features/app-settings/panel/feature-panel/composite/ReportShowSummary.module.scss

@@ -0,0 +1,104 @@
+// Panel.Table nests its own padding inside the section it sits in, so the
+// summary takes the same inset to keep one left edge down the whole panel
+.inset {
+  padding: 0 var(--panel-card-padding, 2rem);
+}
+
+.summary {
+  padding: 1.25rem;
+  background-color: $gray-1200;
+  border-radius: 3px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.title {
+  margin: 0;
+  color: $ui-white;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.body {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem 2.5rem;
+}
+
+.headline {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.headlineLabel,
+.metricLabel {
+  color: $gray-300;
+  font-size: calc(1rem - 2px);
+}
+
+.headlineValue {
+  font-size: 1.75rem;
+  font-weight: 600;
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+
+.unavailable {
+  max-width: 32rem;
+  color: $warning-orange;
+  font-size: calc(1rem - 2px);
+  line-height: 1.4;
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  align-items: baseline;
+  gap: 0.375rem 1.5rem;
+  margin: 0;
+}
+
+.metricValue,
+.metricOffset {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.metricValue {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.planned,
+.arrow {
+  color: $gray-300;
+}
+
+.actual {
+  color: $ui-white;
+  font-weight: 600;
+}
+
+.metricOffset {
+  justify-self: end;
+  font-weight: 600;
+}
+
+.over {
+  color: $playback-over;
+}
+
+.under {
+  color: $playback-under;
+}
+
+.none {
+  color: $gray-300;
+}

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

@@ -0,0 +1,118 @@
+import type { MaybeNumber, ShowReport } from 'ontime-types';
+
+import { cx, enDash } from '../../../../../common/utils/styleUtils';
+import { formatDuration, formatTime } from '../../../../../common/utils/time';
+import { formatOffset, getShowOffsets, offsetTone } from '../reportSettings.utils';
+import type { RunSummary } from '../reportSettings.utils';
+
+import style from './ReportShowSummary.module.scss';
+
+interface ReportShowSummaryProps {
+  rundownTitle: string;
+  show: ShowReport;
+  summary: RunSummary;
+}
+
+/**
+ * Leads the report with whether the show ran to the length it was planned for.
+ *
+ * Running time is the headline rather than finishing time because it is the
+ * part the team controls and the part that carries into the next run of the
+ * same rundown. Finishing time is the other question a report is asked, and
+ * the two can point opposite ways, so it stays beside it as its own row
+ * rather than being folded into a single figure.
+ */
+export default function ReportShowSummary({ rundownTitle, show, summary }: ReportShowSummaryProps) {
+  const offsets = getShowOffsets(show);
+
+  /**
+   * A show that stopped early has no meaningful end: its last event is simply
+   * where it got to. Measuring that against the plan would report a show which
+   * never finished as having come in comfortably short.
+   */
+  const didReachEnd = summary.eventsRun > 0 && summary.eventsRun === summary.eventsPlanned;
+  const hasPlan = offsets.startOffset !== null;
+
+  return (
+    <div className={style.inset}>
+      <section className={style.summary} aria-labelledby='report-summary-title'>
+        <h4 id='report-summary-title' className={style.title}>
+          {rundownTitle || 'Untitled rundown'}
+        </h4>
+
+        <div className={style.body}>
+          <div className={style.headline}>
+            <span className={style.headlineLabel}>{didReachEnd ? 'Show duration' : 'Show incomplete'}</span>
+            {didReachEnd && offsets.durationOffset !== null ? (
+              <span className={cx([style.headlineValue, style[offsetTone(offsets.durationOffset)]])}>
+                {formatOffset(offsets.durationOffset)}
+              </span>
+            ) : (
+              <span className={style.unavailable}>The show did not reach the end of the rundown.</span>
+            )}
+          </div>
+
+          <dl className={style.metrics}>
+            {hasPlan && (
+              <Metric
+                label='Started'
+                planned={formatMaybeTime(show.plannedStart)}
+                actual={formatMaybeTime(show.actualStart)}
+                offset={offsets.startOffset}
+              />
+            )}
+            {hasPlan && didReachEnd && (
+              <Metric
+                label='Ended'
+                planned={formatMaybeTime(show.plannedEnd)}
+                actual={formatMaybeTime(show.actualEnd)}
+                offset={offsets.endOffset}
+              />
+            )}
+            {didReachEnd && (
+              <Metric
+                label='Duration'
+                planned={formatMaybeDuration(show.plannedDuration)}
+                actual={formatMaybeDuration(show.actualDuration)}
+              />
+            )}
+          </dl>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function Metric({
+  label,
+  planned,
+  actual,
+  offset,
+}: {
+  label: string;
+  planned: string;
+  actual: string;
+  offset?: MaybeNumber;
+}) {
+  return (
+    <>
+      <dt className={style.metricLabel}>{label}</dt>
+      <dd className={style.metricValue}>
+        <span className={style.planned}>{planned}</span>
+        <span className={style.arrow}>→</span>
+        <span className={style.actual}>{actual}</span>
+      </dd>
+      <dd className={cx([style.metricOffset, offset !== undefined && style[offsetTone(offset)]])}>
+        {offset === undefined ? '' : formatOffset(offset)}
+      </dd>
+    </>
+  );
+}
+
+function formatMaybeTime(value: MaybeNumber): string {
+  return value === null ? enDash : formatTime(value);
+}
+
+function formatMaybeDuration(value: MaybeNumber): string {
+  return value === null ? enDash : formatDuration(value, false);
+}

apps/client/src/features/app-settings/panel/feature-panel/composite/ReportTable.module.scss

@@ -0,0 +1,144 @@
+$rail: var(--user-bg, #{$gray-500});
+$event-wash: var(--event-bg, transparent);
+
+// event rows carry their values in td, not th: the panel's th styling is meant
+// for column headings and renders whatever it holds small, bold and upper case
+td.over {
+  color: $playback-over;
+}
+
+td.under {
+  color: $playback-under;
+}
+
+.eventRow td {
+  background-color: color-mix(in srgb, #{$gray-1300} 96%, #{$event-wash} 4%);
+}
+
+.groupedRow td:first-child {
+  box-shadow: inset 2px 0 $rail;
+  // clear the rail rather than sitting against it
+  padding-left: 0.75rem;
+}
+
+.groupRow > * {
+  background-color: color-mix(in srgb, #{$gray-1300} 88%, #{$rail} 12%);
+  vertical-align: top;
+}
+
+.groupSpacer {
+  height: 0.75rem;
+  background: transparent !important;
+
+  td {
+    height: 0.75rem;
+    padding: 0;
+    background: transparent !important;
+  }
+}
+
+th.groupSummary {
+  padding: 0.5rem 1rem;
+  box-shadow: inset 4px 0 $rail;
+
+  text-align: left;
+  text-transform: none;
+  letter-spacing: normal;
+
+  > * {
+    text-transform: none;
+  }
+}
+
+.groupTitle,
+.groupLabel,
+.groupValues {
+  display: block;
+}
+
+.groupTitle {
+  color: $ui-white;
+  font-size: 1rem;
+  font-weight: 600;
+  text-transform: none;
+}
+
+.groupBody {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.75rem 2.5rem;
+  margin-top: 0.75rem;
+}
+
+.groupHeadline {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.groupLabel,
+.groupMetrics dt {
+  color: $gray-400;
+  font-size: calc(1rem - 3px);
+  font-weight: 400;
+}
+
+.groupHeadlineValue {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+
+.groupMetrics {
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: baseline;
+  gap: 0.375rem 1.5rem;
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.groupMetrics dd {
+  margin: 0;
+}
+
+.groupValues {
+  display: flex;
+  gap: 0.5rem;
+  color: $gray-300;
+
+  b {
+    color: $ui-white;
+    font-weight: 600;
+  }
+}
+
+.unavailable {
+  color: $gray-400;
+  font-size: calc(1rem - 3px);
+  font-weight: 400;
+}
+
+.arrow {
+  color: $gray-500;
+}
+
+.over {
+  color: $playback-over;
+}
+
+.under {
+  color: $playback-under;
+}
+
+.none {
+  color: $ui-white;
+}
+
+.eventCue,
+.eventIndex {
+  color: $gray-300;
+}

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

@@ -0,0 +1,182 @@
+import type { EntryId } from 'ontime-types';
+import { useMemo } from 'react';
+
+import { cx, enDash } from '../../../../../common/utils/styleUtils';
+import { formatDuration, formatTime } from '../../../../../common/utils/time';
+import * as Panel from '../../../panel-utils/PanelUtils';
+import { formatOffset, offsetTone } from '../reportSettings.utils';
+import type { CombinedReport, GroupReport } from '../reportSettings.utils';
+
+import style from './ReportTable.module.scss';
+
+interface ReportTableProps {
+  rows: CombinedReport[];
+  groups: GroupReport[];
+}
+
+type ReportColourStyle = React.CSSProperties & Partial<Record<'--event-bg' | '--user-bg', string | undefined>>;
+
+/**
+ * The report laid out the way the show was planned: blocks, then the events
+ * inside them. Each block carries how it ran against the budget set for it.
+ */
+export default function ReportTable({ rows, groups }: ReportTableProps) {
+  // groups are rendered where their first event appears, so the table follows
+  // the rundown rather than a separate ordering
+  const sections = useMemo(() => makeSections(rows, groups), [rows, groups]);
+
+  return (
+    <Panel.Table>
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Cue</th>
+          <th>Title</th>
+          <th>Scheduled Start</th>
+          <th>Actual Start</th>
+          <th>Scheduled End</th>
+          <th>Actual End</th>
+        </tr>
+      </thead>
+      {sections.map((section, index) => (
+        <tbody key={section.key}>
+          {section.group && index > 0 && <GroupSpacer />}
+          {section.group && <GroupRow group={section.group} />}
+          {section.rows.map((entry) => (
+            <EventRow
+              key={entry.id}
+              entry={entry}
+              groupColour={section.group?.colour}
+              grouped={section.group !== null}
+            />
+          ))}
+        </tbody>
+      ))}
+    </Panel.Table>
+  );
+}
+
+function GroupSpacer() {
+  return (
+    <tr aria-hidden='true' className={style.groupSpacer}>
+      <td colSpan={7} />
+    </tr>
+  );
+}
+
+/**
+ * A group read the same way as the show above it: what it was measured
+ * against, what it actually did, and how much of it ran.
+ */
+function GroupRow({ group }: { group: GroupReport }) {
+  const hasTarget = group.targetDuration !== null;
+  const measuredAgainst = group.targetDuration ?? group.scheduledDuration;
+  const unavailableReason = group.eventsRun === 0 ? 'Did not run' : 'Still running';
+
+  return (
+    <tr className={style.groupRow} style={groupColourStyle(group.colour)}>
+      <th scope='rowgroup' colSpan={7} className={style.groupSummary}>
+        <span className={style.groupTitle}>{group.title || 'Untitled group'}</span>
+        <div className={style.groupBody}>
+          <div className={style.groupHeadline}>
+            <span className={style.groupLabel}>{hasTarget ? 'Against target' : 'Against schedule'}</span>
+            {group.variance === null ? (
+              <span className={style.unavailable}>{unavailableReason}</span>
+            ) : (
+              <span className={cx([style.groupHeadlineValue, style[offsetTone(group.variance)]])}>
+                {formatOffset(group.variance)}
+              </span>
+            )}
+          </div>
+          <dl className={style.groupMetrics}>
+            <dt>{hasTarget ? 'Target' : 'Scheduled'}</dt>
+            <dd className={style.groupValues}>
+              <span>{formatDuration(measuredAgainst, false)}</span>
+              <span className={style.arrow}>→</span>
+              <b>{group.elapsed === null ? enDash : formatDuration(group.elapsed, false)}</b>
+            </dd>
+            {group.actualStart !== null && group.actualEnd !== null && (
+              <>
+                <dt>Ran</dt>
+                <dd className={style.groupValues}>
+                  <span>{formatTime(group.actualStart)}</span>
+                  <span className={style.arrow}>→</span>
+                  <b>{formatTime(group.actualEnd)}</b>
+                </dd>
+              </>
+            )}
+          </dl>
+        </div>
+      </th>
+    </tr>
+  );
+}
+
+function EventRow({ entry, groupColour, grouped }: { entry: CombinedReport; groupColour?: string; grouped: boolean }) {
+  const start = offsetTone(entry.startOffset);
+  const end = offsetTone(entry.endOffset);
+
+  return (
+    <tr className={cx([style.eventRow, grouped && style.groupedRow])} style={eventColours(entry.colour, groupColour)}>
+      <td className={style.eventIndex}>{entry.index}</td>
+      <td className={style.eventCue}>{entry.cue}</td>
+      <td>{entry.title}</td>
+      <td>{formatTime(entry.scheduledStart)}</td>
+      <td className={cx([style[start]])}>{formatTime(entry.actualStart)}</td>
+      <td>{formatTime(entry.scheduledEnd)}</td>
+      <td className={cx([style[end]])}>{formatTime(entry.actualEnd)}</td>
+    </tr>
+  );
+}
+
+/**
+ * Uses the cuesheet's custom property for group colour. Left unset when the
+ * group has none so the stylesheet can provide a neutral edge.
+ */
+function groupColourStyle(colour?: string): ReportColourStyle {
+  const style: ReportColourStyle = {};
+  if (colour) style['--user-bg'] = colour;
+  return style;
+}
+
+/** Keeps the event wash distinct from its parent group's identifying rail. */
+function eventColours(eventColour: string, groupColour?: string): ReportColourStyle {
+  const style: ReportColourStyle = {};
+  if (eventColour) style['--event-bg'] = eventColour;
+  if (groupColour) style['--user-bg'] = groupColour;
+  return style;
+}
+
+type Section = {
+  key: string;
+  group: GroupReport | null;
+  rows: CombinedReport[];
+};
+
+/**
+ * Splits the rows into the blocks they belong to, keeping rundown order and
+ * leaving ungrouped events in their own run of rows.
+ */
+function makeSections(rows: CombinedReport[], groups: GroupReport[]): Section[] {
+  const byId = new Map<EntryId, GroupReport>(groups.map((group) => [group.id, group]));
+  const sections: Section[] = [];
+  let current: Section | null = null;
+
+  let currentParent: EntryId | null | undefined;
+
+  for (const row of rows) {
+    if (current === null || row.parent !== currentParent) {
+      currentParent = row.parent;
+      // index keeps the key unique even if a group were to appear twice
+      current = {
+        key: `${row.parent ?? 'ungrouped'}-${sections.length}`,
+        group: row.parent ? (byId.get(row.parent) ?? null) : null,
+        rows: [],
+      };
+      sections.push(current);
+    }
+    current.rows.push(row);
+  }
+
+  return sections;
+}

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

@@ -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';

apps/client/src/features/app-settings/panel/feature-panel/reportSettings.utils.ts

@@ -1,89 +1,241 @@
-import { EntryId, MaybeNumber, OntimeReport, RundownEntries, isOntimeEvent } from 'ontime-types';
+import type { EntryId, MaybeNumber, OntimeGroup, OntimeReport, RundownEntries, ShowReport } from 'ontime-types';
+import { isOntimeEvent, isOntimeGroup } from 'ontime-types';
+import { dayInMs, MILLIS_PER_SECOND } from 'ontime-utils';
 
 import { makeCSVFromArrayOfArrays } from '../../../../common/utils/csv';
-import { formatTime } from '../../../../common/utils/time';
+import { getEventVariance, getReportTimePosition } from '../../../../common/utils/report';
+import { enDash } from '../../../../common/utils/styleUtils';
+import { formatDuration, formatTime } from '../../../../common/utils/time';
 
 export type CombinedReport = {
   id: EntryId;
   index: number;
   title: string;
   cue: string;
+  colour: string;
+  /** the group this event belongs to, so the report can mirror the rundown */
+  parent: EntryId | null;
+  groupTitle: string;
   scheduledStart: number;
   actualStart: MaybeNumber;
+  startOffset: MaybeNumber;
   scheduledEnd: number;
   actualEnd: MaybeNumber;
+  endOffset: MaybeNumber;
+};
+
+type ShowOffsets = {
+  startOffset: MaybeNumber;
+  endOffset: MaybeNumber;
+  durationOffset: MaybeNumber;
+};
+
+export type GroupReport = {
+  id: EntryId;
+  title: string;
+  colour: string;
+  targetDuration: MaybeNumber;
+  scheduledDuration: number;
+  actualStart: MaybeNumber;
+  actualEnd: MaybeNumber;
+  elapsed: MaybeNumber;
+  variance: MaybeNumber;
+  eventsRun: number;
+  eventsPlanned: number;
+};
+
+export type RunSummary = {
+  eventsRun: number;
+  eventsPlanned: number;
 };
 
 /**
- * Creates a combined report with the rundown data
+ * Creates a combined report with the rundown data.
+ *
+ * Events that ran are measured against the schedule recorded at the time,
+ * not the rundown's current values, so editing the rundown afterwards does
+ * not change how a show that already happened is reported. Events that never
+ * ran have no snapshot and fall back to the rundown.
  */
 export function getCombinedReport(
   report: OntimeReport,
   rundown: RundownEntries,
   flatOrder: EntryId[],
 ): CombinedReport[] {
-  if (Object.keys(report).length === 0) return [];
-  if (flatOrder.length === 0) return [];
+  if (Object.keys(report).length === 0 || flatOrder.length === 0) return [];
 
   const combinedReport: CombinedReport[] = [];
 
   let index = 1;
-  for (let i = 0; i < flatOrder.length; i++) {
-    const id = flatOrder[i];
+  for (const id of flatOrder) {
     const entry = rundown[id];
-    if (!entry || !isOntimeEvent(entry)) continue;
+    // skipped events were never meant to run, listing them alongside events
+    // that did would also disagree with the summary, which excludes them
+    if (!entry || !isOntimeEvent(entry) || entry.skip) continue;
 
-    if (!(id in report)) {
-      combinedReport.push({
-        id: id,
-        index: index,
-        title: entry.title,
-        cue: entry.cue,
-        scheduledStart: entry.timeStart,
-        actualEnd: null,
-        scheduledEnd: entry.timeEnd,
-        actualStart: null,
-      });
-    }
+    const parent = entry.parent;
+    const group = parent ? rundown[parent] : undefined;
+    const reported = report[id];
+    const scheduledStart = reported?.scheduledStart ?? entry.timeStart;
+    const scheduledDay = reported?.scheduledDay ?? entry.dayOffset;
+    const scheduledStartPosition = getReportTimePosition(scheduledStart, scheduledDay);
+    const actualStartPosition = reported ? getReportTimePosition(reported.startedAt, reported.startedAtDay) : null;
+    const actualEndPosition = reported ? getReportTimePosition(reported.endedAt, reported.endedAtDay) : null;
+    const scheduledDuration = reported?.scheduledDuration ?? entry.duration;
 
-    if (id in report) {
-      combinedReport.push({
-        id: id,
-        index: index,
-        title: entry.title,
-        cue: entry.cue,
-        scheduledStart: entry.timeStart,
-        actualEnd: report[id].endedAt,
-        scheduledEnd: entry.timeEnd,
-        actualStart: report[id].startedAt,
-      });
-    }
+    combinedReport.push({
+      id,
+      index,
+      title: entry.title,
+      cue: entry.cue,
+      colour: entry.colour,
+      parent,
+      groupTitle: group && isOntimeGroup(group) ? group.title : '',
+      // an event that ran is measured against the plan it ran on, one that
+      // did not has no snapshot and falls back to the rundown
+      scheduledStart,
+      scheduledEnd: scheduledStart + scheduledDuration,
+      actualStart: reported?.startedAt ?? null,
+      startOffset: getOffset(actualStartPosition, scheduledStartPosition),
+      actualEnd: reported?.endedAt ?? null,
+      endOffset: getOffset(actualEndPosition, scheduledStartPosition + scheduledDuration),
+    });
     index++;
   }
 
   return combinedReport;
 }
 
-const csvHeader = ['Index', 'Title', 'Cue', 'Scheduled Start', 'Actual Start', 'Scheduled End', 'Actual End'];
+function getOffset(actual: MaybeNumber, scheduled: number): MaybeNumber {
+  return actual === null ? null : actual - scheduled;
+}
 
-/**
- * Transforms a CombinedReport into a CSV string
- */
-export function makeReportCSV(combinedReport: CombinedReport[]) {
-  const csv: string[][] = [];
-  csv.push(csvHeader);
+export function getShowOffsets(show: ShowReport): ShowOffsets {
+  const { plannedDuration, actualDuration } = show;
+  return {
+    startOffset: getWallClockOffset(show.plannedStart, show.actualStart),
+    endOffset: getWallClockOffset(show.plannedEnd, show.actualEnd),
+    durationOffset: plannedDuration === null || actualDuration === null ? null : actualDuration - plannedDuration,
+  };
+}
 
-  for (const entry of combinedReport) {
-    csv.push([
-      String(entry.index),
-      entry.title,
-      entry.cue,
-      formatTime(entry.scheduledStart),
-      formatTime(entry.actualStart),
-      formatTime(entry.scheduledEnd),
-      formatTime(entry.actualEnd),
-    ]);
+function getWallClockOffset(planned: MaybeNumber, actual: MaybeNumber): MaybeNumber {
+  if (planned === null || actual === null) return null;
+
+  const offset = actual - planned;
+  if (offset < -dayInMs / 2) return offset + dayInMs;
+  if (offset > dayInMs / 2) return offset - dayInMs;
+  return offset;
+}
+
+export function getGroupReports(report: OntimeReport, entries: RundownEntries, order: EntryId[]): GroupReport[] {
+  const groups: GroupReport[] = [];
+  for (const id of order) {
+    const group = entries[id];
+    if (group && isOntimeGroup(group)) groups.push(getGroupReport(group, report, entries));
+  }
+  return groups;
+}
+
+function getGroupReport(group: OntimeGroup, report: OntimeReport, entries: RundownEntries): GroupReport {
+  let scheduledDuration = 0;
+  let eventsPlanned = 0;
+  let eventsRun = 0;
+  let firstStart = Number.POSITIVE_INFINITY;
+  let lastEnd = Number.NEGATIVE_INFINITY;
+  let actualStart: MaybeNumber = null;
+  let actualEnd: MaybeNumber = null;
+
+  for (const childId of group.entries) {
+    const child = entries[childId];
+    if (!child || !isOntimeEvent(child) || child.skip) continue;
+
+    eventsPlanned += 1;
+    const reported = report[childId];
+    scheduledDuration += reported?.scheduledDuration ?? child.duration;
+
+    const variance = getEventVariance(reported);
+    if (variance.actualDuration === null || !reported) continue;
+
+    eventsRun += 1;
+    const start = getReportTimePosition(reported.startedAt, reported.startedAtDay);
+    const end = getReportTimePosition(reported.endedAt, reported.endedAtDay);
+    if (start !== null && start < firstStart) {
+      firstStart = start;
+      actualStart = reported.startedAt;
+    }
+    if (end !== null && end > lastEnd) {
+      lastEnd = end;
+      actualEnd = reported.endedAt;
+    }
   }
 
-  return makeCSVFromArrayOfArrays(csv);
+  const elapsed = actualStart === null || actualEnd === null ? null : lastEnd - firstStart;
+  const measuredAgainst = group.targetDuration ?? scheduledDuration;
+  const isComplete = eventsRun > 0 && eventsRun === eventsPlanned;
+
+  return {
+    id: group.id,
+    title: group.title,
+    colour: group.colour,
+    targetDuration: group.targetDuration,
+    scheduledDuration,
+    actualStart,
+    actualEnd,
+    elapsed,
+    variance: elapsed === null || !isComplete ? null : elapsed - measuredAgainst,
+    eventsRun,
+    eventsPlanned,
+  };
+}
+
+export function getRunSummary(report: OntimeReport, entries: RundownEntries, order: EntryId[]): RunSummary {
+  const eventsPlanned = order.filter((id) => {
+    const entry = entries[id];
+    return entry && isOntimeEvent(entry) && !entry.skip;
+  }).length;
+  const eventsRun = Object.values(report).filter((entry) => getEventVariance(entry).status !== 'not-run').length;
+  return { eventsRun, eventsPlanned };
+}
+
+/**
+ * Signed offset, eg "+4m12s" / "-1m", following Ontime's convention that
+ * positive means behind schedule.
+ */
+export function formatOffset(value: MaybeNumber): string {
+  if (value === null) return enDash;
+  if (Math.abs(value) < MILLIS_PER_SECOND) return 'On time';
+  return `${value > 0 ? '+' : '-'}${formatDuration(Math.abs(value), false)}`;
+}
+
+export function offsetTone(value: MaybeNumber): 'over' | 'under' | 'none' {
+  if (value === null || Math.abs(value) < MILLIS_PER_SECOND) return 'none';
+  return value > 0 ? 'over' : 'under';
+}
+
+function formatCsvTime(value: MaybeNumber): string {
+  return value === null ? '' : formatTime(value);
+}
+
+const csvHeader = ['Index', 'Group', 'Cue', 'Title', 'Scheduled Start', 'Actual Start', 'Scheduled End', 'Actual End'];
+
+/**
+ * Transforms a CombinedReport into a CSV string.
+ *
+ * Exported as one row per event with its group named, rather than with
+ * rollups baked in, so it stays the dataset a report is built from.
+ */
+export function makeReportCSV(combinedReport: CombinedReport[]) {
+  const csv = combinedReport.map((entry) => [
+    String(entry.index),
+    entry.groupTitle,
+    entry.cue,
+    entry.title,
+    formatTime(entry.scheduledStart),
+    formatCsvTime(entry.actualStart),
+    formatTime(entry.scheduledEnd),
+    formatCsvTime(entry.actualEnd),
+  ]);
+
+  return makeCSVFromArrayOfArrays([csvHeader, ...csv]);
 }

apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx

@@ -40,7 +40,7 @@ export default function ShutdownPanel() {
           {!isOntimeCloud && (
             <Panel.Section>
               <Button variant='destructive' onClick={handler.open} disabled={!canShutdown}>
-                Shutdown ontime
+                Shutdown Ontime
               </Button>
               {!canShutdown && <Panel.Description>Only available from the machine running Ontime.</Panel.Description>}
             </Panel.Section>

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

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

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

@@ -3,6 +3,7 @@ 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';
@@ -55,72 +56,60 @@ export default function Log() {
     <div className={cx([style.container, isExtracted && style.extracted])}>
       <Panel.InlineElements className={style.buttonBar}>
         <span className={style.filterLabel}>Filter by</span>
-        <Button
-          variant={showUser ? 'primary' : 'subtle'}
+        <ToggleButton
+          pressed={showUser}
           size='small'
-          aria-pressed={showUser}
-          aria-label={`${showUser ? 'Hide' : 'Show'} ${LogOrigin.User} events`}
           onClick={() => setShowUser((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.User)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.User}
-        </Button>
-        <Button
-          variant={showClient ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showClient}
           size='small'
-          aria-pressed={showClient}
-          aria-label={`${showClient ? 'Hide' : 'Show'} ${LogOrigin.Client} events`}
           onClick={() => setShowClient((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Client)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Client}
-        </Button>
-        <Button
-          variant={showServer ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showServer}
           size='small'
-          aria-pressed={showServer}
-          aria-label={`${showServer ? 'Hide' : 'Show'} ${LogOrigin.Server} events`}
           onClick={() => setShowServer((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Server)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Server}
-        </Button>
-        <Button
-          variant={showPlayback ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showPlayback}
           size='small'
-          aria-pressed={showPlayback}
-          aria-label={`${showPlayback ? 'Hide' : 'Show'} ${LogOrigin.Playback} events`}
           onClick={() => setShowPlayback((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Playback)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Playback}
-        </Button>
-        <Button
-          variant={showRx ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showRx}
           size='small'
-          aria-pressed={showRx}
-          aria-label={`${showRx ? 'Hide' : 'Show'} ${LogOrigin.Rx} events`}
           onClick={() => setShowRx((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Rx)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Rx}
-        </Button>
-        <Button
-          variant={showTx ? 'primary' : 'subtle'}
+        </ToggleButton>
+        <ToggleButton
+          pressed={showTx}
           size='small'
-          aria-pressed={showTx}
-          aria-label={`${showTx ? 'Hide' : 'Show'} ${LogOrigin.Tx} events`}
           onClick={() => setShowTx((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Tx)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Tx}
-        </Button>
+        </ToggleButton>
         <Button variant='subtle-destructive' size='small' onClick={clearLogs} className={style.apart}>
           <IoClose /> Clear
         </Button>

apps/client/src/features/operator/Operator.module.scss

@@ -18,6 +18,12 @@
   padding-bottom: 95vh;
 }
 
+.groupSection {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 .editPrompt {
   position: fixed;
   z-index: $zindex-dialog;

apps/client/src/features/operator/Operator.tsx

@@ -1,5 +1,5 @@
 import { OntimeView, isOntimeEvent, isOntimeGroup } from 'ontime-types';
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import EmptyFill from '../../common/components/state/EmptyFill';
 import EmptyPage from '../../common/components/state/EmptyPage';
@@ -25,7 +25,10 @@ import { OperatorData, useOperatorData } from './useOperatorData';
 
 import style from './Operator.module.scss';
 
-const selectedOffset = 50;
+/** Keeps the running event clear of the list edge when no group header is pinned above it */
+const edgeOffset = 50;
+/** How far the running event may drift from where we placed it before we stop following */
+const followTolerance = 50;
 
 export default function OperatorLoader() {
   const { data, status } = useOperatorData();
@@ -54,11 +57,20 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
   const [lockAutoScroll, setLockAutoScroll] = useState(false);
   const selectedRef = useRef<HTMLDivElement | null>(null);
   const scrollRef = useRef<HTMLDivElement | null>(null);
+  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
+
+  // The header height varies with the viewport, so measure it at scroll time.
+  const getTopOffset = useCallback(() => {
+    const header = stickyHeaderRef.current;
+    // Sit right under the pinned header, so it covers the previous event instead of half of it.
+    return header ? header.offsetHeight + 2 : edgeOffset;
+  }, []);
+
   const scrollToComponent = useFollowComponent({
     followRef: selectedRef,
     scrollRef,
     doFollow: !lockAutoScroll,
-    topOffset: selectedOffset,
+    getTopOffset,
     followTrigger: selectedEventId,
   });
 
@@ -82,15 +94,16 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
 
   // prevent considering automated scrolls as user scrolls
   const handleUserScroll = () => {
-    if (selectedRef?.current && scrollRef?.current) {
-      const selectedRect = selectedRef.current.getBoundingClientRect();
-      const scrollerRect = scrollRef.current.getBoundingClientRect();
-      if (selectedRect && scrollerRect) {
-        const distanceFromTop = selectedRect.top - scrollerRect.top;
-        const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > selectedOffset;
-        setLockAutoScroll(hasScrolledOutOfThreshold);
-      }
+    if (!selectedRef.current || !scrollRef.current) {
+      return;
     }
+
+    const selectedRect = selectedRef.current.getBoundingClientRect();
+    const scrollerRect = scrollRef.current.getBoundingClientRect();
+    // Measure the drift from where an automated scroll would place the event.
+    const distanceFromTop = selectedRect.top - scrollerRect.top - getTopOffset();
+    const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > followTolerance;
+    setLockAutoScroll(hasScrolledOutOfThreshold);
   };
   const throttledHandleScroll = throttle(handleUserScroll, 1000);
 
@@ -186,9 +199,9 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
               }
 
               return (
-                <Fragment key={entry.id}>
+                <div className={style.groupSection} key={entry.id}>
                   <OperatorGroup
-                    key={entry.id}
+                    ref={isCurrentParent ? stickyHeaderRef : undefined}
                     title={entry.title}
                     colour={entry.colour}
                     count={entry.entries.length}
@@ -239,7 +252,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
                       />
                     );
                   })}
-                </Fragment>
+                </div>
               );
             }
             return null;

apps/client/src/features/operator/operator-group/OperatorGroup.module.scss

@@ -1,13 +1,20 @@
 .group {
   width: 100%;
+  /* Padding is kept under the min-height so a single line fits without the list having to shrink the header,
+     while a taller title still grows the row. */
   min-height: 2.5rem;
-  padding: 0.4rem 0.75rem;
+  padding: 0.25rem 0.75rem;
   border-left: 0.35rem solid var(--group-colour, $gray-500);
   background-color: $gray-1350;
   background: color-mix(in srgb, transparent 88%, var(--group-colour, $gray-500) 12%);
   font-size: 1.25rem;
   font-weight: 600;
 
+  position: sticky;
+  /* Cover the list padding so rows cannot scroll above the header. */
+  top: -0.25rem;
+  z-index: 1;
+
   display: flex;
   align-items: center;
   gap: 1rem;

apps/client/src/features/operator/operator-group/OperatorGroup.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, memo } from 'react';
+import { type CSSProperties, type Ref, memo } from 'react';
 
 import { getAccessibleColour } from '../../../common/utils/styleUtils';
 import { formatDuration } from '../../../common/utils/time';
@@ -10,15 +10,16 @@ interface OperatorGroup {
   colour: string;
   count: number;
   duration: number;
+  ref?: Ref<HTMLDivElement>;
 }
 
 export default memo(OperatorGroup);
-function OperatorGroup({ title, colour, count, duration }: OperatorGroup) {
+function OperatorGroup({ title, colour, count, duration, ref }: OperatorGroup) {
   const groupColour = colour || '#929292';
   const groupColours = getAccessibleColour(groupColour);
 
   return (
-    <div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties}>
+    <div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties} ref={ref}>
       <span className={style.title}>{title}</span>
       <span className={style.meta}>
         <span>{`${count} ${count === 1 ? 'event' : 'events'}`}</span>

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

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

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

@@ -6,8 +6,11 @@ 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';
@@ -27,7 +30,7 @@ export default function EventEditorTriggers({ triggers, eventId }: EventEditorTr
     label: title,
   }));
   const hasAutomationOptions = allAutomationOptions.length > 0;
-  const triggerOptions = eventTriggerOptions.map((cycle) => ({ value: cycle, label: cycle }));
+  const triggerOptions = eventTriggerOptions.map((cycle) => ({ value: cycle, label: getLifecycleLabel(cycle) }));
 
   const duplicateIds = new Set<string>();
   const seen = new Map<string, string>();
@@ -76,6 +79,7 @@ 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);
@@ -103,6 +107,13 @@ export default function EventEditorTriggers({ triggers, eventId }: EventEditorTr
                   }}
                   options={automationOptions}
                 />
+                <div className={style.outputTags}>
+                  {summariseOutputs(automationSettings.automations[trigger.automationId]?.outputs ?? []).map(
+                    ({ type, label, count }) => (
+                      <Tag key={type}>{count > 1 ? `${label} ×${count}` : label}</Tag>
+                    ),
+                  )}
+                </div>
                 <IconButton variant='ghosted-destructive' onClick={() => handleDelete(trigger.id)}>
                   <IoTrash />
                 </IconButton>

apps/client/src/features/rundown/placements/FinderPlacement.tsx

@@ -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} />;

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

@@ -312,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} />

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

@@ -141,7 +141,6 @@ function RundownEventInner({
           isPast={isPast}
           isLoaded={loaded}
           totalGap={totalGap}
-          duration={duration}
         />
       )}
       <div className={style.statusElements} id='entry-status' data-timertype={timerType}>

apps/client/src/features/rundown/rundown-event/composite/RundownEventChip.tsx

@@ -6,6 +6,7 @@ import { IoCheckmarkCircle } from 'react-icons/io5';
 import Tooltip from '../../../../common/components/tooltip/Tooltip';
 import useReport from '../../../../common/hooks-query/useReport';
 import { usePlayback } from '../../../../common/hooks/useSocket';
+import { getEventVariance } from '../../../../common/utils/report';
 import { cx } from '../../../../common/utils/styleUtils';
 import { formatDuration, useTimeUntilExpectedStart } from '../../../../common/utils/time';
 
@@ -20,7 +21,6 @@ interface RundownEventChipProps {
   isLoaded: boolean;
   className: string;
   totalGap: number;
-  duration: number;
   isLinkedToLoaded: boolean;
 }
 
@@ -33,7 +33,6 @@ export default function RundownEventChip({
   className,
   totalGap,
   id,
-  duration,
   isLinkedToLoaded,
 }: RundownEventChipProps) {
   const playback = usePlayback();
@@ -45,25 +44,20 @@ export default function RundownEventChip({
   const playbackActive = isPlaybackActive(playback);
 
   if (!playbackActive || isPast) {
-    return <EventReport className={className} id={id} duration={duration} />;
+    return <EventReport className={className} id={id} />;
   }
 
-  if (playbackActive) {
-    // we extracted the component to avoid unnecessary calculations and re-renders
-    return (
-      <Tooltip text='Expected time until start' render={<span />} className={className}>
-        <EventUntil
-          timeStart={timeStart}
-          delay={delay}
-          dayOffset={dayOffset}
-          totalGap={totalGap}
-          isLinkedToLoaded={isLinkedToLoaded}
-        />
-      </Tooltip>
-    );
-  }
-
-  return null;
+  return (
+    <Tooltip text='Expected time until start' render={<span />} className={className}>
+      <EventUntil
+        timeStart={timeStart}
+        delay={delay}
+        dayOffset={dayOffset}
+        totalGap={totalGap}
+        isLinkedToLoaded={isLinkedToLoaded}
+      />
+    </Tooltip>
+  );
 }
 
 interface EventUntilProps {
@@ -86,41 +80,30 @@ function EventUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }:
 interface EventReportProps {
   className: string;
   id: string;
-  duration: number;
 }
 
-function EventReport(props: EventReportProps) {
-  const { className, id, duration } = props;
+function EventReport({ className, id }: EventReportProps) {
   const { data } = useReport();
   const currentReport = data[id];
 
   const [value, overUnderStyle, tooltip] = useMemo(() => {
-    if (!currentReport) {
+    // Use the schedule recorded when the event ran so later rundown edits do
+    // not change its report.
+    const variance = getEventVariance(currentReport);
+    if (variance.status === 'not-run') {
       return [null, 'none', ''];
     }
 
-    const { startedAt, endedAt } = currentReport;
-    if (!startedAt || !endedAt) {
-      return [null, 'none', ''];
-    }
-
-    const actualDuration = endedAt - startedAt;
-    const difference = actualDuration - duration;
-    const absDifference = Math.abs(difference);
-
-    if (absDifference < MILLIS_PER_SECOND) {
+    if (variance.status === 'ontime') {
       return ['ontime', 'under', 'Event finished on time'];
     }
 
-    const isOver = difference > 0;
-
-    const fullTimeValue = millisToString(absDifference);
-
-    const tooltip = `Event ran ${isOver ? 'over' : 'under'} time by ${fullTimeValue}`;
-
+    const absDifference = Math.abs(variance.delta);
+    const isOver = variance.status === 'over';
+    const tooltip = `Event ran ${isOver ? 'over' : 'under'} time by ${millisToString(absDifference)}`;
     const value = `${isOver ? '+' : '-'}${formatDuration(absDifference, absDifference > 2 * MILLIS_PER_MINUTE)}`;
-    return [value, isOver ? 'over' : 'under', tooltip];
-  }, [currentReport, duration]);
+    return [value, variance.status, tooltip];
+  }, [currentReport]);
 
   if (!value) {
     return null;

apps/client/src/features/rundown/rundown-table/makeRundownColumns.tsx

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

apps/client/src/theme/_ontimeStyles.scss

@@ -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;

apps/client/src/viewerConfig.ts

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

apps/client/src/views/countdown/Countdown.scss

@@ -100,7 +100,20 @@ $item-height: 3.5rem;
     flex-direction: column;
     overflow-y: auto;
 
-    padding-bottom: max(8rem, calc(5rem + env(safe-area-inset-bottom)));
+    padding-bottom: 95vh;
+  }
+
+  /* Flex prevents row margins collapsing and bounds the sticky header to its group. */
+  .sub-section {
+    display: flex;
+    flex-direction: column;
+
+    /* The select view renders the same cards in a flat list. */
+    .sub--group {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
   }
 
   /* ====================== LIST-ITEM ======================*/
@@ -196,9 +209,14 @@ $item-height: 3.5rem;
 
   .sub--group {
     box-shadow: inset 0 0 0 1px var(--user-color, $gray-1325);
-    background:
+    /* The opaque base prevents rows showing through; background shorthand cannot layer this colour. */
+    background-color: var(--background-color-override, $viewer-background-color);
+    background-image:
       linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 18%, transparent), transparent 42%),
-      var(--card-background-color-override, $viewer-card-bg-color);
+      linear-gradient(
+        var(--card-background-color-override, $viewer-card-bg-color),
+        var(--card-background-color-override, $viewer-card-bg-color)
+      );
 
     .sub__binder {
       background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
@@ -230,6 +248,16 @@ $item-height: 3.5rem;
     }
   }
 
+  /* Reserve the green fill for the running event. */
+  .sub--group.sub--live {
+    box-shadow: inset 0 0 0 2px $active-green;
+  }
+
+  /* Keep the armed state quieter than the live ring. */
+  .sub--group.sub--armed {
+    box-shadow: inset 0 0 0 2px $gray-1000;
+  }
+
   .sub__title {
     grid-area: title;
     padding-bottom: 0.5rem;

apps/client/src/views/countdown/CountdownSubscriptions.tsx

@@ -1,6 +1,6 @@
 import { MaybeNumber, OntimeEvent } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { IoPencil } from 'react-icons/io5';
 
 import Button from '../../common/components/buttons/Button';
@@ -22,6 +22,7 @@ import {
   CountdownTarget,
   extendEventData,
   getIsLive,
+  groupSubscriptionTargets,
   isOutsideRange,
   preferredFormat12,
   preferredFormat24,
@@ -48,11 +49,22 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
   const [lockAutoScroll, setLockAutoScroll] = useState(false);
   const selectedRef = useRef<HTMLDivElement | null>(null);
   const scrollRef = useRef<HTMLDivElement | null>(null);
+  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
+
+  const sections = useMemo(() => groupSubscriptionTargets(subscribedEvents), [subscribedEvents]);
+
+  // Responsive sizing and wrapped titles make the sticky header height variable, so measure it at scroll time.
+  const getStickyOffset = useCallback(() => {
+    const header = stickyHeaderRef.current;
+    // Preserve the combined margins between the header and running event.
+    return header ? header.offsetHeight + 4 : 0;
+  }, []);
+
   const scrollToComponent = useFollowComponent({
     followRef: selectedRef,
     scrollRef,
     doFollow: !lockAutoScroll,
-    topOffset: 0,
+    getTopOffset: getStickyOffset,
     followTrigger: selectedEventId,
   });
 
@@ -75,15 +87,16 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
 
   // prevent considering automated scrolls as user scrolls
   const handleUserScroll = () => {
-    if (selectedRef?.current && scrollRef?.current) {
-      const selectedRect = selectedRef.current.getBoundingClientRect();
-      const scrollerRect = scrollRef.current.getBoundingClientRect();
-      if (selectedRect && scrollerRect) {
-        const distanceFromTop = selectedRect.top - scrollerRect.top;
-        const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
-        setLockAutoScroll(hasScrolledOutOfThreshold);
-      }
+    if (!selectedRef.current || !scrollRef.current) {
+      return;
     }
+
+    const selectedRect = selectedRef.current.getBoundingClientRect();
+    const scrollerRect = scrollRef.current.getBoundingClientRect();
+    // Keep the threshold relative to the visible rows below the sticky header.
+    const distanceFromTop = selectedRect.top - scrollerRect.top - getStickyOffset();
+    const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
+    setLockAutoScroll(hasScrolledOutOfThreshold);
   };
   const throttledHandleScroll = throttle(handleUserScroll, 1000);
 
@@ -98,41 +111,63 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
 
   return (
     <div className='list-container' onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
-      {subscribedEvents.map((event) => {
-        // while a group is live, surface the running event's title as the secondary line
-        const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
-        const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
-        const isGroupedEvent = !event.isGroup && Boolean(event.parent);
-        const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
-        // a subscribed group is live when any of its children is the selected/running event
-        const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
-        const isArmed = !isLive && activeEntryId === selectedEventId;
-        const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
-        const displayTitle = getPropertyValue(event, mainSource ?? 'title');
+      {sections.map((section) => {
+        const rows = section.group ? [section.group, ...section.events] : section.events;
+        // the running event anchors the scroll, the group header stays pinned above it
+        const anchorId = section.events.find((event) => getIsLive(event.id, selectedEventId, playback))?.id ?? null;
+
         return (
-          <div
-            key={event.id}
-            ref={isLive ? selectedRef : undefined}
-            className={cx([
-              'sub',
-              isLive && 'sub--live',
-              isArmed && 'sub--armed',
-              event.isGroup && 'sub--group',
-              isGroupedEvent && 'sub--in-group',
-            ])}
-            data-testid={event.cue}
-          >
-            <div
-              className='sub__binder'
-              style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
-            />
-            <ScheduleTime event={countdownEvent} showExpected={showExpected} />
-            <SubscriptionStatus event={countdownEvent} />
-            <div className={cx(['sub__title', !displayTitle && 'subdued'])}>
-              {event.isGroup && <span className='sub__eyebrow'>Group</span>}
-              {displayTitle}
-            </div>
-            {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
+          <div key={section.group?.id ?? rows[0].id} className='sub-section'>
+            {rows.map((event) => {
+              // while a group is live, surface the running event's title as the secondary line
+              const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
+              const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
+              const isGroupedEvent = !event.isGroup && Boolean(event.parent);
+              const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
+              // a subscribed group is live when any of its children is the selected/running event
+              const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
+              const isArmed = !isLive && activeEntryId === selectedEventId;
+              // only ever hand the ref to a single row, sharing it would null it out on the next commit
+              const isAnchor = isLive && (anchorId === null || event.id === anchorId);
+              const rowRef = isAnchor ? selectedRef : event.isGroup && anchorId ? stickyHeaderRef : undefined;
+              const countdownEvent = extendEventData(
+                event,
+                currentDay,
+                actualStart,
+                plannedStart,
+                offset,
+                mode,
+                reportData,
+              );
+              const displayTitle = getPropertyValue(event, mainSource ?? 'title');
+
+              return (
+                <div
+                  key={event.id}
+                  ref={rowRef}
+                  className={cx([
+                    'sub',
+                    isLive && 'sub--live',
+                    isArmed && 'sub--armed',
+                    event.isGroup && 'sub--group',
+                    isGroupedEvent && 'sub--in-group',
+                  ])}
+                  data-testid={event.cue}
+                >
+                  <div
+                    className='sub__binder'
+                    style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
+                  />
+                  <ScheduleTime event={countdownEvent} showExpected={showExpected} />
+                  <SubscriptionStatus event={countdownEvent} />
+                  <div className={cx(['sub__title', !displayTitle && 'subdued'])}>
+                    {event.isGroup && <span className='sub__eyebrow'>Group</span>}
+                    {displayTitle}
+                  </div>
+                  {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
+                </div>
+              );
+            })}
           </div>
         );
       })}

apps/client/src/views/countdown/countdown.utils.test.ts

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

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

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

apps/client/src/views/cuesheet/cuesheet-dnd/CuesheetDnd.tsx

@@ -7,14 +7,13 @@ import {
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
-import { ColumnDef } from '@tanstack/react-table';
 import { PropsWithChildren } from 'react';
 
-import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
+import type { CuesheetColumnDef } from '../cuesheet-table/cuesheetTable.features';
 import { useColumnOrder } from '../cuesheet-table/useColumnManager';
 
 interface CuesheetDndProps {
-  columns: ColumnDef<ExtendedEntry>[];
+  columns: CuesheetColumnDef[];
   tableRoot?: 'editor' | 'cuesheet';
 }
 

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -1,5 +1,5 @@
 import { useTableNav } from '@table-nav/react';
-import { ColumnDef, Table, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { useTable } from '@tanstack/react-table';
 import { OntimeEntry, SupportedEntry, TimeField, isOntimeDelay, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { ComponentProps, ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
@@ -29,12 +29,17 @@ import GroupRow from './cuesheet-table-elements/GroupRow';
 import MilestoneRow from './cuesheet-table-elements/MilestoneRow';
 import TableMenu from './cuesheet-table-menu/TableMenu';
 import CuesheetTableHeaderToolbar from './cuesheet-table-settings/CuesheetTableHeaderToolbar';
+import {
+  CuesheetColumnDef,
+  CuesheetTable as CuesheetTableInstance,
+  cuesheetTableFeatures,
+} from './cuesheetTable.features';
 import { useColumnOrder, useColumnSizes, useColumnVisibility } from './useColumnManager';
 
 import style from './CuesheetTable.module.scss';
 
 type CuesheetTableBaseProps = {
-  columns: ColumnDef<ExtendedEntry>[];
+  columns: CuesheetColumnDef[];
   cuesheetMode: AppMode;
   source: RundownSource;
   insertElement?: ReactNode;
@@ -120,7 +125,8 @@ export default function CuesheetTable({
   const { columnSizing, setColumnSizing } = useColumnSizes(tableRoot);
   const { columnVisibility, setColumnVisibility } = useColumnVisibility(tableRoot);
 
-  const table = useReactTable({
+  const table = useTable({
+    features: cuesheetTableFeatures,
     data: flatRundown,
     columns,
     columnResizeMode: 'onChange',
@@ -131,7 +137,6 @@ export default function CuesheetTable({
     },
     onColumnVisibilityChange: setColumnVisibility,
     onColumnSizingChange: setColumnSizing,
-    getCoreRowModel: getCoreRowModel(),
     meta,
   });
 
@@ -195,7 +200,7 @@ export default function CuesheetTable({
     return colSizes;
     // eslint-disable-next-line react-compiler/react-compiler -- unfortunately this is what we need
     // eslint-disable-next-line react-hooks/exhaustive-deps -- this works well and follows documentation
-  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
+  }, [columns, table.state.columnResizing, table.state.columnSizing]);
 
   const allLeafColumns = table.getAllLeafColumns();
   const { rows } = table.getRowModel();
@@ -214,9 +219,7 @@ export default function CuesheetTable({
   const computeItemKey = useCallback((_: number, item: ExtendedEntry) => item.id, []);
   const fixedHeaderContent = useCallback(() => {
     return table.getHeaderGroups().map((headerGroup) => {
-      const HeaderComponent = table.getState().columnSizingInfo.isResizingColumn
-        ? CuesheetHeader
-        : SortableCuesheetHeader;
+      const HeaderComponent = table.state.columnResizing.isResizingColumn ? CuesheetHeader : SortableCuesheetHeader;
 
       // if the table is being resized, we render non-sortable headers to avoid performance issues
       return (
@@ -279,8 +282,8 @@ interface CuesheetVirtuosoContext {
   columnSizeVars: { [key: string]: number };
   cursor: string | null;
   listeners: ReturnType<typeof useTableNav>['listeners'];
-  rows: ReturnType<Table<ExtendedEntry>['getRowModel']>['rows'];
-  table: Table<ExtendedEntry>;
+  rows: ReturnType<CuesheetTableInstance['getRowModel']>['rows'];
+  table: CuesheetTableInstance;
   handleAddNew?: (type: SupportedEntry) => void;
 }
 

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx

@@ -1,16 +1,16 @@
 import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { HeaderGroup, flexRender } from '@tanstack/react-table';
+import { FlexRender } from '@tanstack/react-table';
 import { CSSProperties } from 'react';
 
-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
+import type { CuesheetHeaderGroup } from '../cuesheetTable.features';
 import { Draggable, SortableCell, TableCell } from './SortableCell';
 
 import style from '../CuesheetTable.module.scss';
 
 interface CuesheetHeaderProps {
-  headerGroup: HeaderGroup<ExtendedEntry>;
+  headerGroup: CuesheetHeaderGroup;
   cuesheetMode: AppMode;
   hideIndexColumn: boolean;
 }
@@ -46,7 +46,7 @@ export function SortableCuesheetHeader({ headerGroup, cuesheetMode, hideIndexCol
               injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
               draggable={<Draggable header={header} />}
             >
-              {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+              {header.isPlaceholder ? null : <FlexRender header={header} />}
             </SortableCell>
           );
         })}
@@ -85,7 +85,7 @@ export function CuesheetHeader({ headerGroup, cuesheetMode, hideIndexColumn }: C
             injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
             draggable={<Draggable header={header} />}
           >
-            {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+            {header.isPlaceholder ? null : <FlexRender header={header} />}
           </TableCell>
         );
       })}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx

@@ -1,14 +1,14 @@
-import { Table, flexRender } from '@tanstack/react-table';
-import { EntryId, OntimeEntry, RGBColour, SupportedEntry } from 'ontime-types';
+import { FlexRender } from '@tanstack/react-table';
+import { EntryId, RGBColour, SupportedEntry } from 'ontime-types';
 import { colourToHex, cssOrHexToColour } from 'ontime-utils';
 import { CSSProperties, memo, useMemo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 
 import IconButton from '../../../../common/components/buttons/IconButton';
-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
+import type { CuesheetTable } from '../cuesheetTable.features';
 
 import style from './EventRow.module.scss';
 
@@ -25,7 +25,7 @@ interface EventRowProps {
   skip: boolean;
   parent: EntryId | null;
   rowIndex: number;
-  table: Table<ExtendedEntry<OntimeEntry>>;
+  table: CuesheetTable;
   injectedStyles?: CSSProperties;
   hasCursor?: boolean;
 }
@@ -133,7 +133,7 @@ function EventRow({
               data-testid={`cuesheet-cell-${cell.column.id}`}
               data-column-id={cell.column.id}
             >
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <FlexRender cell={cell} />
             </td>
           );
         })}