feat(qr-code): render QR codes as dots with a dark theme

Restyle the shared QrCode component (used in the Backstage view and the share-link dialog) to render each module as a circle instead of a square, and switch to light dots on a dark card to match Ontime's dark theme. The QR is generated manually from qrcode's create() output rather than its default SVG renderer, so we can draw dots for data modules while keeping the three finder patterns (position detection eyes) as solid rounded squares - scanners rely on their crisp edges to lock onto the code. Verified decoding still works reliably with jsQR at typical in-app sizes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0128gEVvzXHyJFNNU9n8gUyQ
fix(report): harden empty report check
2026-09-09 16:19:47 +00:00 · 2026-09-09 15:41:53 +00:00 · 2026-09-05 20:51:53 +02:00 · 2026-09-05 20:35:44 +02:00 · 2026-09-05 20:32:02 +02:00 · 2026-09-05 09:24:42 +02:00
53 changed files with 1906 additions and 526 deletions
@@ -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>
@@ -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"
 }
@@ -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"
-}
@@ -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 });
@@ -2,7 +2,7 @@

 .square {
  border-radius: $component-border-radius-sm;
-  background-color: $viewer-color;
+  background-color: $ui-black;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -1,4 +1,4 @@
-import { toString } from 'qrcode';
+import { create } from 'qrcode';
 import { Suspense, use } from 'react';

 import { cx } from '../../utils/styleUtils';
@@ -10,13 +10,21 @@ interface QRCodeProps {
  size: number;
 }

+// Quiet zone around the code, in modules
+const margin = 2;
+// Dot diameter as a fraction of a module. Close to 1 keeps the code reliably scannable
+// while still reading as dots rather than solid squares
+const dotScale = 0.94;
+// Light dots on a dark card, to match Ontime's dark theme
+const dotColor = '#f6f6f6';
+const backgroundColor = '#101010';
+// Position detection patterns (the three corner "eyes") are drawn as solid squares
+// instead of dots, since scanners rely on their crisp edges to find the code
+const finderPatternSize = 7;
+
 export default function QRCode({ value, size }: QRCodeProps) {
  'use memo';
-  const svgPromise = toString(value, {
-    width: size,
-    margin: 2,
-    color: { dark: '#101010', light: '#cfcfcf' },
-  });
+  const svgPromise = toDottedSvgString(value, size);

  return (
    <Suspense fallback={<QrFallback size={size} />}>
@@ -41,3 +49,56 @@ function QrSvg({ svgPromise, size }: { svgPromise: Promise<string>; size: number
    />
  );
 }
+
+/**
+ * Encodes the given value and renders it as a dotted QR code (SVG string):
+ * data modules become circles, while the three finder patterns stay solid for reliable scanning.
+ */
+async function toDottedSvgString(value: string, size: number): Promise<string> {
+  const { modules } = create(value);
+  const moduleCount = modules.size;
+  const viewBoxSize = moduleCount + margin * 2;
+  const dotRadius = dotScale / 2;
+
+  let dots = '';
+  for (let row = 0; row < moduleCount; row++) {
+    for (let col = 0; col < moduleCount; col++) {
+      if (isInFinderPattern(row, col, moduleCount) || !modules.get(row, col)) {
+        continue;
+      }
+      const x = col + margin + 0.5;
+      const y = row + margin + 0.5;
+      dots += `<circle cx="${x}" cy="${y}" r="${dotRadius}"/>`;
+    }
+  }
+
+  const finderPatterns =
+    finderPattern(0, 0) +
+    finderPattern(0, moduleCount - finderPatternSize) +
+    finderPattern(moduleCount - finderPatternSize, 0);
+
+  return (
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${viewBoxSize} ${viewBoxSize}">` +
+    `<rect width="${viewBoxSize}" height="${viewBoxSize}" rx="3" fill="${backgroundColor}"/>` +
+    `<g fill="${dotColor}">${dots}</g>${finderPatterns}</svg>`
+  );
+}
+
+function isInFinderPattern(row: number, col: number, moduleCount: number) {
+  const inTopRows = row < finderPatternSize;
+  const inBottomRows = row >= moduleCount - finderPatternSize;
+  const inLeftCols = col < finderPatternSize;
+  const inRightCols = col >= moduleCount - finderPatternSize;
+  return (inTopRows && inLeftCols) || (inTopRows && inRightCols) || (inBottomRows && inLeftCols);
+}
+
+/** Renders one of the three corner "eyes" as nested rounded squares, at (row, col) in module units */
+function finderPattern(row: number, col: number) {
+  const x = col + margin;
+  const y = row + margin;
+  return (
+    `<rect x="${x}" y="${y}" width="7" height="7" rx="1.6" fill="${dotColor}"/>` +
+    `<rect x="${x + 1}" y="${y + 1}" width="5" height="5" rx="1.1" fill="${backgroundColor}"/>` +
+    `<rect x="${x + 2}" y="${y + 2}" width="3" height="3" rx="0.7" fill="${dotColor}"/>`
+  );
+}
@@ -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,
+  };
 }
@@ -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;
 }
@@ -6,6 +6,6 @@ import { useEffect } from 'react';
 */
 export function useWindowTitle(title: string) {
  useEffect(() => {
-    document.title = `ontime - ${title}`;
+    document.title = `Ontime - ${title}`;
  }, []);
 }
@@ -1,26 +0,0 @@
-import { getRememberedDimensions, rememberDimensions } from '../imageDimensions';
-
-/** stand-in for a loaded HTMLImageElement */
-function makeImage(naturalWidth: number, naturalHeight: number) {
-  return { naturalWidth, naturalHeight } as HTMLImageElement;
-}
-
-test('We remember the size of an image, so that we can reserve its space when it comes back', () => {
-  expect(getRememberedDimensions('http://ontime.local/unseen.png')).toBe(null);
-
-  rememberDimensions('http://ontime.local/image.png', makeImage(1920, 1080));
-  expect(getRememberedDimensions('http://ontime.local/image.png')).toMatchObject({ width: 1920, height: 1080 });
-
-  // an image which failed to load has no size to offer
-  rememberDimensions('http://ontime.local/broken.png', makeImage(0, 0));
-  expect(getRememberedDimensions('http://ontime.local/broken.png')).toBe(null);
-});
-
-test('We keep the most recently seen images, older entries are forgotten', () => {
-  for (let i = 0; i < 600; i++) {
-    rememberDimensions(`http://ontime.local/${i}.png`, makeImage(100, 50));
-  }
-
-  expect(getRememberedDimensions('http://ontime.local/0.png')).toBe(null);
-  expect(getRememberedDimensions('http://ontime.local/599.png')).toMatchObject({ width: 100, height: 50 });
-});
@@ -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' });
+});
@@ -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');
+  });
 });
@@ -1,49 +0,0 @@
-/**
- * Images in the cuesheet live inside a virtualised table:
- * rows are unmounted when they leave the viewport and mounted again when they come back.
- * A re-mounted image has no dimensions until it is available,
- * which makes the row change height and the table shift under the user.
- *
- * We remember the size of the images we have already seen
- * so that we can reserve the space they will take.
- * This only holds two numbers per image: we leave the image data itself to the browser cache,
- * which knows better than us when memory should be released.
- */
-
-export interface ImageDimensions {
-  width: number;
-  height: number;
-}
-
-/** how many sizes we remember, this is only a few bytes per entry */
-const maxSize = 500;
-
-const dimensions = new Map<string, ImageDimensions>();
-
-/**
- * @returns the size of a previously loaded image, if we have seen it before
- */
-export function getRememberedDimensions(src: string): ImageDimensions | null {
-  return dimensions.get(src) ?? null;
-}
-
-/**
- * Records the size of a loaded image
- */
-export function rememberDimensions(src: string, image: HTMLImageElement) {
-  if (image.naturalHeight === 0) {
-    return;
-  }
-
-  // the map iteration order is our LRU queue, re-adding the entry marks it as recently used
-  dimensions.delete(src);
-  dimensions.set(src, { width: image.naturalWidth, height: image.naturalHeight });
-
-  while (dimensions.size > maxSize) {
-    const oldest = dimensions.keys().next();
-    if (oldest.done) {
-      return;
-    }
-    dimensions.delete(oldest.value);
-  }
-}
@@ -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' };
+}
@@ -1,7 +0,0 @@
-th.over {
-  color: $playback-over;
-}
-
-th.under {
-  color: $playback-under;
-}
@@ -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>
  );
@@ -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('');
+  });
+});
@@ -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;
+}
@@ -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);
+}
@@ -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;
+}
@@ -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;
+}
@@ -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]);
 }
@@ -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>
@@ -18,6 +18,12 @@
  padding-bottom: 95vh;
 }

+.groupSection {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 .editPrompt {
  position: fixed;
  z-index: $zindex-dialog;
@@ -1,5 +1,5 @@
 import { OntimeView, isOntimeEvent, isOntimeGroup } from 'ontime-types';
-import { 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;
@@ -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;
@@ -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>
@@ -141,7 +141,6 @@ function RundownEventInner({
          isPast={isPast}
          isLoaded={loaded}
          totalGap={totalGap}
-          duration={duration}
        />
      )}
      <div className={style.statusElements} id='entry-status' data-timertype={timerType}>
@@ -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;
@@ -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;
@@ -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>
        );
      })}
@@ -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] },
+    ]);
+  });
+});
@@ -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,
@@ -1,18 +0,0 @@
-import { isValidImageSource } from '../cuesheet-table/cuesheet-table-elements/EditableImage';
-
-test('An image is referenced by link, anything else is rejected', () => {
-  const testCases = [
-    { value: 'https://example.com/image.png', isValid: true },
-    { value: 'http://example.com/image.png', isValid: true },
-    // a file is local to the machine running ontime, it would not resolve for the clients we serve
-    { value: '/user/image.png', isValid: false },
-    { value: 'file:///Users/me/image.png', isValid: false },
-    { value: 'C:\\images\\image.png', isValid: false },
-    // values which do not describe a location we can reach
-    { value: 'www.example.com/image.png', isValid: false },
-    { value: 'https://', isValid: false },
-    { value: 'some text', isValid: false },
-  ];
-
-  testCases.forEach((t) => expect(isValidImageSource(t.value)).toBe(t.isValid));
-});
@@ -5,19 +5,6 @@
  &:not(:read-only):hover::placeholder {
    opacity: 1;
  }
-
-  &[data-invalid] {
-    outline: 1px solid $red-500;
-  }
-}
-
-/** feedback on a value we cannot use, either rejected or failed to load */
-.message {
-  display: block;
-  padding: 0.25rem 0;
-  color: $red-500;
-  font-size: calc(1rem - 3px);
-  line-height: 1.2;
 }

 .imageCell {
@@ -1,54 +1,27 @@
-import { memo, useState } from 'react';
+import { memo } from 'react';

 import Button from '../../../../common/components/buttons/Button';
 import Input from '../../../../common/components/input/input/Input';
-import { getRememberedDimensions, rememberDimensions } from '../../../../common/utils/imageDimensions';

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

 interface EditableImageProps {
  initialValue: string;
-  fieldLabel: string;
  readOnly?: boolean;
  updateValue: (newValue: string) => void;
 }

 export default memo(EditableImage);

-/**
- * Images are referenced by link: anything local to the machine running ontime
- * would not resolve for the clients we serve the cuesheet to
- */
-export function isValidImageSource(value: string): boolean {
-  try {
-    const url = new URL(value);
-    return url.protocol === 'http:' || url.protocol === 'https:';
-  } catch {
-    return false;
-  }
-}
-
-function EditableImage({ initialValue, fieldLabel, readOnly, updateValue }: EditableImageProps) {
-  const [isRejected, setIsRejected] = useState(false);
-  /** we keep track of the source itself, so that the state follows the value being shown */
-  const [failedSource, setFailedSource] = useState<string | null>(null);
-  const [loadedSource, setLoadedSource] = useState<string | null>(null);
-
+function EditableImage({ initialValue, readOnly, updateValue }: EditableImageProps) {
  const handleUpdate = (newValue: string) => {
-    const value = newValue.trim();
-
-    if (value === initialValue) {
-      setIsRejected(false);
+    if (newValue === initialValue) {
      return;
    }
-
-    if (value !== '' && !isValidImageSource(value)) {
-      setIsRejected(true);
+    if (newValue !== '' && !newValue.startsWith('http')) {
      return;
    }
-
-    setIsRejected(false);
-    updateValue(value);
+    updateValue(newValue);
  };

  const openInNewTab = () => {
@@ -63,42 +36,22 @@ function EditableImage({ initialValue, fieldLabel, readOnly, updateValue }: Edit

  if (!initialValue) {
    return (
-      <>
-        <Input
-          variant='ghosted'
-          className={style.imageInput}
-          fluid
-          placeholder='Paste image URL'
-          data-invalid={isRejected || undefined}
-          onChange={() => setIsRejected(false)}
-          onBlur={(event) => handleUpdate(event.currentTarget.value)}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              handleUpdate(event.currentTarget.value);
-            }
-          }}
-        />
-        {isRejected && <span className={style.message}>Images are referenced by link (https://...)</span>}
-      </>
+      <Input
+        variant='ghosted'
+        className={style.imageInput}
+        fluid
+        placeholder='Paste image URL'
+        onBlur={(event) => handleUpdate(event.currentTarget.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            handleUpdate(event.currentTarget.value);
+          }
+        }}
+        defaultValue={initialValue}
+      />
    );
  }

-  /**
-   * The cuesheet is virtualised: rows are unmounted once they leave the viewport.
-   * When the row comes back, we reserve the space the image took
-   * so that the table does not shift while the browser makes it available.
-   * The reservation is given in CSS so that it follows the column being resized,
-   * the same way the image itself does once it is shown.
-   */
-  const knownDimensions = getRememberedDimensions(initialValue);
-  const isLoaded = loadedSource === initialValue;
-  const reservedSpace = knownDimensions
-    ? {
-        aspectRatio: knownDimensions.width / knownDimensions.height,
-        width: `min(100%, ${knownDimensions.width}px)`,
-      }
-    : undefined;
-
  return (
    <div className={style.imageCell}>
      {!readOnly && (
@@ -109,22 +62,7 @@ function EditableImage({ initialValue, fieldLabel, readOnly, updateValue }: Edit
          </Button>
        </div>
      )}
-      {failedSource === initialValue ? (
-        <span className={style.message}>Could not load image</span>
-      ) : (
-        <img
-          src={initialValue}
-          alt={fieldLabel}
-          className={style.image}
-          onLoad={(event) => {
-            rememberDimensions(initialValue, event.currentTarget);
-            setLoadedSource(initialValue);
-          }}
-          onError={() => setFailedSource(initialValue)}
-          /** until the image is available, we reserve the space it took the last time we saw it */
-          style={isLoaded ? undefined : reservedSpace}
-        />
-      )}
+      {Boolean(initialValue) && <img loading='lazy' src={initialValue} className={style.image} />}
    </div>
  );
 }
@@ -105,10 +105,10 @@ function MakeDuration({ getValue, row, table, column }: CuesheetCellContext) {
    return null;
  }

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

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

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

  const canWrite = column.columnDef.meta?.canWrite;
  if (!canWrite) {
@@ -175,14 +175,7 @@ function LazyImage({ row, column, table }: CuesheetCellContext) {

  const canWrite = column.columnDef.meta?.canWrite;
  const initialValue = event.custom[column.id];
-  return (
-    <EditableImage
-      initialValue={initialValue}
-      fieldLabel={getColumnLabel(column)}
-      updateValue={update}
-      readOnly={!canWrite}
-    />
-  );
+  return <EditableImage initialValue={initialValue} updateValue={update} readOnly={!canWrite} />;
 }

 function MakeSingleLineField({ row, column, table }: CuesheetCellContext) {
@@ -6,7 +6,7 @@
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; style-src 'unsafe-inline'; script-src 'self'"
    />
-    <title>ontime</title>
+    <title>Ontime</title>
    <style>
      body {
        -webkit-user-select: none;
@@ -92,7 +92,7 @@
  <body>
    <div class="container">
      <img src="../assets/logo.png" />
-      <h1>ontime · event timers</h1>
+      <h1>Ontime · event timers</h1>
      <div class="lds-ellipsis">
        <div></div>
        <div></div>
@@ -0,0 +1,164 @@
+import type { PlayableEvent } from 'ontime-types';
+import { RefetchKey, TimerLifeCycle } from 'ontime-types';
+import { MILLIS_PER_MINUTE } from 'ontime-utils';
+import { vi } from 'vitest';
+
+import { sendRefetch } from '../../../adapters/WebsocketAdapter.js';
+import { makeRuntimeStateData } from '../../../stores/__mocks__/runtimeState.mocks.js';
+import { makeOntimeEvent, makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
+import { clear, generate, generateReport, triggerReportEntry } from '../report.service.js';
+
+vi.mock('../../../adapters/WebsocketAdapter.js', () => ({ sendRefetch: vi.fn() }));
+
+const eventA = makeOntimeEvent({
+  id: 'event-a',
+  dayOffset: 0,
+  timeStart: 0,
+  timeEnd: MILLIS_PER_MINUTE,
+  duration: MILLIS_PER_MINUTE,
+}) as PlayableEvent;
+const eventB = makeOntimeEvent({
+  id: 'event-b',
+  dayOffset: 0,
+  timeStart: MILLIS_PER_MINUTE,
+  timeEnd: 2 * MILLIS_PER_MINUTE,
+  duration: MILLIS_PER_MINUTE,
+}) as PlayableEvent;
+
+beforeEach(() => {
+  clear();
+  vi.clearAllMocks();
+});
+
+it('records lifecycle times while keeping the schedule captured at start', () => {
+  const start = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 500 }, _startEpoch: 1 });
+  triggerReportEntry(TimerLifeCycle.onStart, start);
+
+  const edited = { ...eventA, timeStart: 999, duration: 999 } as PlayableEvent;
+  const stop = makeRuntimeStateData({ eventNow: edited, clock: 2 * MILLIS_PER_MINUTE, rundown: { currentDay: 1 } });
+  triggerReportEntry(TimerLifeCycle.onStop, stop);
+
+  expect(generate()[eventA.id]).toEqual({
+    startedAt: 500,
+    startedAtDay: 0,
+    endedAt: 2 * MILLIS_PER_MINUTE,
+    endedAtDay: 1,
+    scheduledStart: eventA.timeStart,
+    scheduledDay: eventA.dayOffset,
+    scheduledDuration: eventA.duration,
+  });
+  expect(sendRefetch).toHaveBeenCalledTimes(2);
+  expect(sendRefetch).toHaveBeenLastCalledWith(RefetchKey.Report);
+});
+
+it('falls back to the current event when a stop arrives without a start', () => {
+  const stop = makeRuntimeStateData({ eventNow: eventA, clock: MILLIS_PER_MINUTE });
+  triggerReportEntry(TimerLifeCycle.onStop, stop);
+
+  expect(generate()[eventA.id]).toMatchObject({
+    startedAt: null,
+    endedAt: MILLIS_PER_MINUTE,
+    scheduledDuration: eventA.duration,
+  });
+});
+
+it('captures the rundown plan when a stop is the first report entry', () => {
+  const rundown = makeRundown({
+    id: 'run-1',
+    title: 'Stopped without start',
+    order: [eventA.id],
+    entries: { [eventA.id]: eventA },
+  });
+  const stop = makeRuntimeStateData({
+    eventNow: eventA,
+    clock: MILLIS_PER_MINUTE,
+    rundown: { plannedStart: 0, plannedEnd: MILLIS_PER_MINUTE },
+  });
+
+  triggerReportEntry(TimerLifeCycle.onStop, stop, rundown);
+
+  expect(generateReport()).toMatchObject({
+    eventReports: { [eventA.id]: { endedAt: MILLIS_PER_MINUTE } },
+    rundown: { id: rundown.id, title: rundown.title },
+  });
+});
+
+it('accumulates entries until the report is explicitly cleared', () => {
+  const firstRun = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, _startEpoch: 1 });
+  triggerReportEntry(TimerLifeCycle.onStart, firstRun);
+  triggerReportEntry(TimerLifeCycle.onStart, { ...firstRun, eventNow: eventB, _startEpoch: 2 });
+
+  expect(Object.keys(generate())).toEqual([eventA.id, eventB.id]);
+});
+
+it('returns the report with the rundown plan captured at its first event', () => {
+  const rundown = makeRundown({
+    id: 'run-1',
+    title: 'Original title',
+    order: [eventA.id, eventB.id],
+    entries: { [eventA.id]: eventA, [eventB.id]: eventB },
+  });
+  const start = makeRuntimeStateData({
+    eventNow: eventA,
+    timer: { startedAt: 500 },
+    _startEpoch: 1,
+    rundown: { plannedStart: 0, plannedEnd: 2 * MILLIS_PER_MINUTE },
+  });
+  triggerReportEntry(TimerLifeCycle.onStart, start, rundown);
+  triggerReportEntry(TimerLifeCycle.onStop, { ...start, clock: MILLIS_PER_MINUTE });
+  rundown.title = 'Edited later';
+
+  expect(generateReport()).toMatchObject({
+    rundown: { id: 'run-1', title: 'Original title' },
+    eventReports: { [eventA.id]: { scheduledDuration: MILLIS_PER_MINUTE } },
+    show: {
+      plannedStart: 0,
+      plannedEnd: 2 * MILLIS_PER_MINUTE,
+      plannedDuration: 2 * MILLIS_PER_MINUTE,
+      actualStart: 500,
+      actualEnd: MILLIS_PER_MINUTE,
+    },
+  });
+});
+
+it('clears the retained report and rundown snapshot together', () => {
+  const rundown = makeRundown({ order: [eventA.id], entries: { [eventA.id]: eventA } });
+  const state = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, _startEpoch: 1 });
+  triggerReportEntry(TimerLifeCycle.onStart, state, rundown);
+  vi.clearAllMocks();
+  clear();
+
+  expect(generateReport()).toMatchObject({ eventReports: {}, rundown: null });
+  expect(sendRefetch).toHaveBeenCalledOnce();
+  expect(sendRefetch).toHaveBeenCalledWith(RefetchKey.Report);
+});
+
+it('captures a new plan after removing the final event by id', () => {
+  const firstRundown = makeRundown({
+    id: 'run-1',
+    title: 'First run',
+    order: [eventA.id],
+    entries: { [eventA.id]: eventA },
+  });
+  const secondRundown = makeRundown({
+    id: 'run-2',
+    title: 'Second run',
+    order: [eventB.id],
+    entries: { [eventB.id]: eventB },
+  });
+  const firstStart = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, _startEpoch: 1 });
+  const secondStart = makeRuntimeStateData({
+    eventNow: eventB,
+    timer: { startedAt: MILLIS_PER_MINUTE },
+    _startEpoch: 2,
+  });
+
+  triggerReportEntry(TimerLifeCycle.onStart, firstStart, firstRundown);
+  clear(eventA.id);
+  triggerReportEntry(TimerLifeCycle.onStart, secondStart, secondRundown);
+
+  expect(generateReport()).toMatchObject({
+    eventReports: { [eventB.id]: { startedAt: MILLIS_PER_MINUTE } },
+    rundown: { id: secondRundown.id, title: secondRundown.title },
+  });
+});
@@ -0,0 +1,72 @@
+import type { OntimeEventReport, OntimeReport, PlayableEvent } from 'ontime-types';
+import { dayInMs, MILLIS_PER_HOUR, MILLIS_PER_MINUTE } from 'ontime-utils';
+
+import { makeOntimeEvent, makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
+import { getActualShowTimes, getPlannedShowDuration } from '../report.utils.js';
+
+function makeReport(patch: Partial<OntimeEventReport>): OntimeEventReport {
+  return {
+    startedAt: 0,
+    startedAtDay: 0,
+    endedAt: 0,
+    endedAtDay: 0,
+    scheduledStart: 0,
+    scheduledDay: 0,
+    scheduledDuration: 0,
+    ...patch,
+  };
+}
+
+describe('getActualShowTimes()', () => {
+  it('preserves long gaps within the same day', () => {
+    const report: OntimeReport = {
+      morning: makeReport({ startedAt: 6 * MILLIS_PER_HOUR, endedAt: 7 * MILLIS_PER_HOUR }),
+      evening: makeReport({ startedAt: 20 * MILLIS_PER_HOUR, endedAt: 21 * MILLIS_PER_HOUR }),
+    };
+
+    expect(getActualShowTimes(report)).toEqual({
+      actualStart: 6 * MILLIS_PER_HOUR,
+      actualEnd: 21 * MILLIS_PER_HOUR,
+      actualDuration: 15 * MILLIS_PER_HOUR,
+    });
+  });
+
+  it('orders events by their captured day across midnight', () => {
+    const report: OntimeReport = {
+      beforeMidnight: makeReport({
+        startedAt: dayInMs - 10 * MILLIS_PER_MINUTE,
+        endedAt: dayInMs - 5 * MILLIS_PER_MINUTE,
+      }),
+      afterMidnight: makeReport({
+        startedAt: 0,
+        startedAtDay: 1,
+        endedAt: 10 * MILLIS_PER_MINUTE,
+        endedAtDay: 1,
+      }),
+    };
+
+    expect(getActualShowTimes(report).actualDuration).toBe(20 * MILLIS_PER_MINUTE);
+  });
+});
+
+it('derives planned duration from playable, non-skipped events', () => {
+  const first = makeOntimeEvent({
+    id: 'first',
+    dayOffset: 0,
+    timeStart: 23 * MILLIS_PER_HOUR,
+    duration: MILLIS_PER_HOUR,
+  }) as PlayableEvent;
+  const last = makeOntimeEvent({
+    id: 'last',
+    dayOffset: 1,
+    timeStart: MILLIS_PER_HOUR,
+    duration: MILLIS_PER_HOUR,
+  }) as PlayableEvent;
+  const skipped = makeOntimeEvent({ id: 'skipped', dayOffset: 2, timeStart: 0, duration: MILLIS_PER_HOUR, skip: true });
+  const rundown = makeRundown({
+    order: [first.id, last.id, skipped.id],
+    entries: { [first.id]: first, [last.id]: last, [skipped.id]: skipped },
+  });
+
+  expect(getPlannedShowDuration(rundown)).toBe(3 * MILLIS_PER_HOUR);
+});
@@ -7,7 +7,7 @@ import * as report from './report.service.js';
 export const router: Router = express.Router();

 router.get('/', (_req: Request, res: Response) => {
-  res.status(200).json(report.generate());
+  res.status(200).json(report.generateReport());
 });

 router.delete('/all', (_req: Request, res: Response) => {
@@ -1,12 +1,28 @@
-import { OntimeEventReport, OntimeReport, RefetchKey, TimerLifeCycle } from 'ontime-types';
-import { DeepReadonly } from 'ts-essentials';
+import type { OntimeEventReport, OntimeReport, PlayableEvent, ReportData, Rundown, ShowReport } from 'ontime-types';
+import { RefetchKey, TimerLifeCycle } from 'ontime-types';
+import type { DeepReadonly } from 'ts-essentials';

 import { sendRefetch } from '../../adapters/WebsocketAdapter.js';
-import { RuntimeState } from '../../stores/runtimeState.js';
+import type { RuntimeState } from '../../stores/runtimeState.js';
+import { getCurrentRundown } from '../rundown/rundown.dao.js';
+import { getActualShowTimes, getPlannedShowDuration } from './report.utils.js';

 const report = new Map<string, OntimeEventReport>();

 let formattedReport: OntimeReport | null = null;
+const emptyPlannedTimes: Pick<ShowReport, 'plannedStart' | 'plannedEnd' | 'plannedDuration'> = {
+  plannedStart: null,
+  plannedEnd: null,
+  plannedDuration: null,
+};
+
+/**
+ * The plan the show was measured against, taken when it starts.
+ * Snapshotted for the same reason the per event schedule is: editing the
+ * rundown afterwards must not move the target a past show was judged by.
+ */
+let plannedTimes = emptyPlannedTimes;
+let rundownSnapshot: Rundown | null = null;

 /**
 * generates a full report
@@ -27,9 +43,14 @@ export function clear(id?: string) {
  formattedReport = null;
  if (id) {
    report.delete(id);
+    if (report.size === 0) resetReportPlan();
  } else {
+    // A full clear makes the next event start a new report instead of resuming this run.
    report.clear();
+    resetReportPlan();
  }
+
+  sendRefetch(RefetchKey.Report);
 }

 /**
@@ -41,6 +62,7 @@ export function clear(id?: string) {
 export function triggerReportEntry(
  cycle: TimerLifeCycle.onStart | TimerLifeCycle.onStop,
  state: DeepReadonly<RuntimeState>,
+  rundown: Readonly<Rundown> = getCurrentRundown(),
 ) {
  if (!state.eventNow?.id) {
    return;
@@ -49,15 +71,80 @@ export function triggerReportEntry(
  const eventId = state.eventNow.id;

  if (cycle === TimerLifeCycle.onStart) {
-    report.set(eventId, { startedAt: state.timer.startedAt, endedAt: null });
+    captureReportPlan(state, rundown);
+
+    report.set(eventId, {
+      ...getScheduleSnapshot(state.eventNow),
+      startedAt: state.timer.startedAt,
+      startedAtDay: state.rundown.currentDay ?? state.eventNow.dayOffset,
+      endedAt: null,
+      endedAtDay: null,
+    });
    formattedReport = null;
+    sendRefetch(RefetchKey.Report);
    return;
  }

  if (cycle === TimerLifeCycle.onStop) {
-    const startedAt = report.get(eventId)?.startedAt ?? null;
-    report.set(eventId, { startedAt, endedAt: state.clock });
+    captureReportPlan(state, rundown);
+    const previous = report.get(eventId);
+    const schedule = previous ?? getScheduleSnapshot(state.eventNow);
+    report.set(eventId, {
+      startedAt: previous?.startedAt ?? null,
+      startedAtDay: previous?.startedAtDay ?? null,
+      endedAt: state.clock,
+      endedAtDay: state.rundown.currentDay ?? state.eventNow.dayOffset,
+      scheduledStart: schedule.scheduledStart,
+      scheduledDay: schedule.scheduledDay,
+      scheduledDuration: schedule.scheduledDuration,
+    });
    formattedReport = null;
    sendRefetch(RefetchKey.Report);
  }
 }
+
+function getScheduleSnapshot(
+  event: Pick<PlayableEvent, 'timeStart' | 'dayOffset' | 'duration'>,
+): Pick<OntimeEventReport, 'scheduledStart' | 'scheduledDay' | 'scheduledDuration'> {
+  return {
+    scheduledStart: event.timeStart,
+    scheduledDay: event.dayOffset,
+    scheduledDuration: event.duration,
+  };
+}
+
+/**
+ * Captures the plan once, when the first event in the report is recorded.
+ */
+function captureReportPlan(state: DeepReadonly<RuntimeState>, rundown: Readonly<Rundown>) {
+  if (rundownSnapshot !== null) return;
+
+  rundownSnapshot = structuredClone(rundown);
+  plannedTimes = {
+    plannedStart: state.rundown.plannedStart,
+    plannedEnd: state.rundown.plannedEnd,
+    plannedDuration: getPlannedShowDuration(rundownSnapshot),
+  };
+}
+
+function resetReportPlan() {
+  plannedTimes = emptyPlannedTimes;
+  rundownSnapshot = null;
+}
+
+/**
+ * Show level times for the report.
+ * Planned times are the ones captured when the show started, actual times are
+ * derived from the events that ran.
+ */
+function generateShowReport(): ShowReport {
+  return { ...plannedTimes, ...getActualShowTimes(generate()) };
+}
+
+export function generateReport(): ReportData {
+  return {
+    eventReports: generate(),
+    rundown: rundownSnapshot,
+    show: generateShowReport(),
+  };
+}
@@ -0,0 +1,52 @@
+import type { OntimeReport, Rundown, ShowReport } from 'ontime-types';
+import { isOntimeEvent } from 'ontime-types';
+import { dayInMs } from 'ontime-utils';
+
+export function getActualShowTimes(
+  report: OntimeReport,
+): Pick<ShowReport, 'actualStart' | 'actualEnd' | 'actualDuration'> {
+  let firstStart = Number.POSITIVE_INFINITY;
+  let lastEnd = Number.NEGATIVE_INFINITY;
+  let actualStart: number | null = null;
+  let actualEnd: number | null = null;
+
+  for (const entry of Object.values(report)) {
+    if (entry.startedAt !== null && entry.startedAtDay !== null) {
+      const start = entry.startedAtDay * dayInMs + entry.startedAt;
+      if (start < firstStart) {
+        firstStart = start;
+        actualStart = entry.startedAt;
+      }
+    }
+
+    if (entry.endedAt !== null && entry.endedAtDay !== null) {
+      const end = entry.endedAtDay * dayInMs + entry.endedAt;
+      if (end > lastEnd) {
+        lastEnd = end;
+        actualEnd = entry.endedAt;
+      }
+    }
+  }
+
+  return {
+    actualStart,
+    actualEnd,
+    actualDuration: actualStart === null || actualEnd === null ? null : lastEnd - firstStart,
+  };
+}
+
+export function getPlannedShowDuration(rundown: Rundown): number | null {
+  let firstStart = Number.POSITIVE_INFINITY;
+  let lastEnd = Number.NEGATIVE_INFINITY;
+
+  for (const id of rundown.flatOrder) {
+    const entry = rundown.entries[id];
+    if (!entry || !isOntimeEvent(entry) || entry.skip) continue;
+
+    const start = entry.dayOffset * dayInMs + entry.timeStart;
+    firstStart = Math.min(firstStart, start);
+    lastEnd = Math.max(lastEnd, start + entry.duration);
+  }
+
+  return Number.isFinite(firstStart) ? lastEnd - firstStart : null;
+}
@@ -16,7 +16,7 @@
      body {
        width: 100%;
        height: 100%;
-        background: #121212;
+        background: #101010;
        color: #ffffff;
        font-family: sans-serif;
        overflow: hidden;
@@ -29,15 +29,19 @@ function makeHeadersWithFailingAuthorization(cookie?: string) {

 describe('isPublicAssetRequest()', () => {
  it('allows root public assets without a prefix', () => {
-    expect(isPublicAssetRequest('/site.webmanifest', '')).toBe(true);
    expect(isPublicAssetRequest('/manifest.json', '')).toBe(true);
  });

  it('allows prefixed public assets in cloud deployments', () => {
-    expect(isPublicAssetRequest('/stage-hash/site.webmanifest', '/stage-hash')).toBe(true);
+    expect(isPublicAssetRequest('/stage-hash/manifest.json', '/stage-hash')).toBe(true);
    expect(isPublicAssetRequest('/stage-hash/ontime-logo.png?cache=1', '/stage-hash')).toBe(true);
  });

+  it('allows the PWA install icons', () => {
+    expect(isPublicAssetRequest('/ontime-logo-192.png', '')).toBe(true);
+    expect(isPublicAssetRequest('/ontime-logo-512.png', '')).toBe(true);
+  });
+
  it('keeps non-public paths protected', () => {
    expect(isPublicAssetRequest('/stage-hash/data', '/stage-hash')).toBe(false);
    expect(isPublicAssetRequest('/backstage', '')).toBe(false);
@@ -17,8 +17,9 @@ const publicAssets = new Set([
  '/favicon.ico',
  '/manifest.json',
  '/ontime-logo.png',
+  '/ontime-logo-192.png',
+  '/ontime-logo-512.png',
  '/robots.txt',
-  '/site.webmanifest',
 ]);

 export function isPublicAssetRequest(originalUrl: string, prefix: string): boolean {
@@ -38,6 +38,12 @@ When relevant, cover interactions among:

 Pass time/state explicitly to keep rules deterministic and unit-testable.

+## Reports
+
+- A report is one aggregate containing its event records, show timing, and rundown snapshot.
+- Capture the rundown plan when the report starts; later rundown edits must not change it.
+- Store day offsets with report timestamps. Use absolute timeline positions for ordering and duration, and wall-clock values only for display.
+
 ## Imports and migrations

 - Treat project files, spreadsheets, custom fields, migrated data as untrusted.
@@ -6,7 +6,7 @@ test.describe('pages routes are available', () => {
    test('editor', async ({ page }) => {
      await page.goto('/editor');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);
      await expect(page.getByTestId('editor-container')).toBeVisible();
      await expect(page.getByTestId('panel-rundown')).toBeVisible();
      await expect(page.getByTestId('panel-timer-control')).toBeVisible();
@@ -16,38 +16,38 @@ test.describe('pages routes are available', () => {
    test('cuesheet', async ({ page }) => {
      await page.goto('/cuesheet');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);
      await expect(page.getByTestId('cuesheet')).toBeVisible();
    });

    test('operator', async ({ page }) => {
      await page.goto('/op');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);
    });

    test('timer', async ({ page }) => {
      await page.goto('/timer');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);
    });

    test('backstage', async ({ page }) => {
      await page.goto('/backstage');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);
    });

    test('studio', async ({ page }) => {
      await page.goto('/studio');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);
    });

    test('countdown', async ({ page }) => {
      await page.goto('/countdown?sub=32d31');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);

      await expect(page.getByText('Albania')).toBeVisible();
      await expect(page.getByText('Latvia')).toBeHidden();
@@ -92,12 +92,12 @@ test.describe('test view navigation feature', () => {
  test('not-found', async ({ page }) => {
    await page.goto('/not-found');

-    await expect(page).toHaveTitle(/ontime/);
+    await expect(page).toHaveTitle(/ontime/i);
    await expect(page.getByRole('heading', { name: 'Not found' })).toBeVisible();

    await page.goto('/preset/not-found');

-    await expect(page).toHaveTitle(/ontime/);
+    await expect(page).toHaveTitle(/ontime/i);
    await expect(page.getByRole('heading', { name: 'Not found' })).toBeVisible();
  });
 });
@@ -1,8 +1,42 @@
 import type { MaybeNumber } from '../../utils/utils.type.js';
+import type { EntryId } from './OntimeEntry.js';
+import type { Rundown } from './Rundown.type.js';

 export type OntimeEventReport = {
  startedAt: MaybeNumber;
+  startedAtDay: number | null;
  endedAt: MaybeNumber;
+  endedAtDay: number | null;
+  /**
+   * Snapshot of the schedule taken when the event ran.
+   * Keeping a copy is what makes a report a record: editing the rundown
+   * afterwards no longer changes how a show that already happened is reported.
+   */
+  scheduledStart: number;
+  scheduledDay: number;
+  scheduledDuration: number;
 };

-export type OntimeReport = Record<string, OntimeEventReport>;
+export type OntimeReport = Record<EntryId, OntimeEventReport>;
+
+/**
+ * Show level times for the report.
+ *
+ * Planned times are snapshotted when the show starts, for the same reason the
+ * per event schedule is. Actual times are derived from the events that ran.
+ */
+export type ShowReport = {
+  plannedStart: MaybeNumber;
+  plannedEnd: MaybeNumber;
+  plannedDuration: MaybeNumber;
+  actualStart: MaybeNumber;
+  actualEnd: MaybeNumber;
+  actualDuration: MaybeNumber;
+};
+
+/** Recorded event timings together with the rundown plan they are measured against. */
+export type ReportData = {
+  eventReports: OntimeReport;
+  rundown: Rundown | null;
+  show: ShowReport;
+};
@@ -24,7 +24,7 @@ export { TimerType } from './definitions/TimerType.type.js';
 export type { Day, Duration, Instant, TimeOfDay } from './definitions/core/Temporal.js';

 // ---> Report
-export type { OntimeReport, OntimeEventReport } from './definitions/core/Report.type.js';
+export type { OntimeReport, OntimeEventReport, ReportData, ShowReport } from './definitions/core/Report.type.js';

 // ---> Automations
 export { ontimeActionKeyValues } from './definitions/core/Automation.type.js';
Author	SHA1	Message	Date
Claude	e6dd4c7f4c	feat(qr-code): render QR codes as dots with a dark theme Restyle the shared QrCode component (used in the Backstage view and the share-link dialog) to render each module as a circle instead of a square, and switch to light dots on a dark card to match Ontime's dark theme. The QR is generated manually from qrcode's create() output rather than its default SVG renderer, so we can draw dots for data modules while keeping the three finder patterns (position detection eyes) as solid rounded squares - scanners rely on their crisp edges to lock onto the code. Verified decoding still works reliably with jsQR at typical in-app sizes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0128gEVvzXHyJFNNU9n8gUyQ	2026-09-09 15:41:53 +00:00
Carlos Valente	1175b3c641	fix(report): harden empty report check	2026-09-05 20:51:53 +02:00
Carlos Valente	afc3a44455	refactor(report): improve report summary	2026-09-05 20:35:44 +02:00
Carlos Valente	bc6a321172	fix(cuesheet): prevent empty seconds field	2026-09-05 20:32:02 +02:00
Carlos Valente	977b01a072	fix: keep group visible as header for the running event	2026-09-05 09:24:42 +02:00
SMPTY	dd718230ad	fix(client): fix PWA manifest so "Install as App" works properly (#2192 )	2026-09-05 09:15:08 +02:00