fix(ui): give the preview a fixed shape and top-align the buttons beside it

The stage was stretched to whatever height the panel had free via a 1fr grid
row, so its size varied with how much vertical room the editor happened to
leave rather than staying predictable. It now keeps a 16:9 box sized from
its own width - the same ratio the embedded timer's font-size estimate
already assumes - so cqw and cqh agree and the min() cap in PipTimer stays
meaningful only for the pip window, which is still freely resizable.

The button column no longer stretches or centers against that height either:
align-items: start on the group top-aligns both the stage and the buttons
when they sit side by side.

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

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

@@ -0,0 +1,46 @@
+---
+name: code-review
+description: Review Ontime changes for concrete correctness, architecture, testing, routing, security, and maintenance issues. For GitHub Copilot review.
+---
+
+# Review Ontime changes
+
+Review as a maintainer. Find material defects, not speculative advice, style preferences, or generic checklists. Approve when no material issue remains.
+
+## Load relevant context
+
+Read the full diff, PR description, linked issue, tests, and nearby owning code. Then load only applicable guides:
+
+- Every non-trivial review: [change assessment](../../../docs/agent-guides/change-assessment.md)
+- Module placement, server layers, client state, shared packages: [architecture](../../../docs/agent-guides/architecture.md)
+- Tests or changed behaviour: [testing](../../../docs/agent-guides/testing.md)
+- Comments, abstractions, naming, complexity: [code quality](../../../docs/agent-guides/code-quality.md)
+- Authentication, external input, files, integrations, assets, secrets: [security](../../../docs/agent-guides/security.md)
+- Routes, URLs, websockets, authentication, cookies, presets, assets: [routing and cloud](../../../docs/agent-guides/routing-and-cloud.md)
+- Rundowns, timers, persistence, imports, cache, realtime: [domain invariants](../../../docs/agent-guides/domain-invariants.md)
+- Commands, imports, dependencies, formatting, CI claims: [workflow](../../../docs/agent-guides/workflow.md)
+
+Check a guide and nearby canonical code before citing an Ontime convention. Skip unrelated guides.
+
+## Review order
+
+1. Establish intent and affected runtime surfaces.
+2. Read tests first. Identify claimed behaviour and coverage.
+3. Trace implementation, errors, and state transitions.
+4. Check correctness/data integrity, security, architecture/testability, cloud routing, lifecycle/performance, maintainability.
+5. Verify claimed checks. Never claim unobserved results.
+
+Passing tests do not prove architecture, routing, comments, or error paths. Review changed behaviour only; include existing problems only when the diff worsens or relies on them.
+
+## Findings
+
+Report only concrete, actionable issues. Each finding: tight line range, direct defect, impact and trigger, smallest viable remedy when unclear.
+
+- **P0 — Critical:** data loss, exploitable vulnerability, broadly broken production. Blocks merge.
+- **P1 — High:** likely correctness failure or major supported-deployment regression. Blocks merge.
+- **P2 — Medium:** real edge-case defect, architecture regression, missing business-rule test, stale comment, meaningful maintenance risk. Normally blocks merge.
+- **P3 — Low:** local improvement with limited impact. No subjective style or tool-managed formatting.
+
+Order by priority. Prefer few high-confidence findings. No praise or checklist before findings. If none, say so and note verification gaps or residual risk.
+
+Then give one concise PR-level value/risk/complexity assessment. Never repeat it per finding.

AGENTS.md

@@ -0,0 +1,22 @@
+# Ontime agent guide
+
+Make the smallest maintainable change. Keep scope narrow. Inspect nearby code first. Reuse helpers and boundaries when semantics match.
+
+## Load only relevant guides
+
+- Commands, validation, formatting, imports, PRs: [workflow](docs/agent-guides/workflow.md).
+- Non-trivial planning, implementation, review: [change assessment](docs/agent-guides/change-assessment.md).
+- Module placement, server layers, client state, shared packages: [architecture](docs/agent-guides/architecture.md).
+- Tests or changed behaviour: [testing](docs/agent-guides/testing.md).
+- Comments, naming, abstractions, maintainability: [code quality](docs/agent-guides/code-quality.md).
+- Authentication, external input, files, integrations, assets, secrets: [security](docs/agent-guides/security.md).
+- Navigation, URLs, API paths, websockets, redirects, cookies, static assets: [routing and cloud](docs/agent-guides/routing-and-cloud.md).
+- Rundowns, timers, imports, persistence, cache, websockets: [domain invariants](docs/agent-guides/domain-invariants.md).
+
+Load multiple guides when needed. Skip unrelated guides for mechanical work.
+
+## Before handoff
+
+- Check the final diff for scope, stale comments, temporary code, redundant tests, generated files.
+- If work reveals a missing, stable, reusable system, domain, or product invariant, update its owning guide. Exclude guesses, one-off bugs, and implementation details.
+- Follow [workflow verification](docs/agent-guides/workflow.md). Report only observed results.

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

@@ -22,10 +22,14 @@ export const useRundownEditor = createSelector((state: RuntimeStore) => ({
   nextEventId: state.eventNext?.id ?? null,
 }));
 
-export const useTimerViewControl = createSelector((state: RuntimeStore) => ({
+export const useScreenControl = createSelector((state: RuntimeStore) => ({
   blackout: state.message.timer.blackout,
   blink: state.message.timer.blink,
-  secondarySource: state.message.timer.secondarySource,
+  isScreenModified:
+    state.message.timer.visible ||
+    state.message.timer.blink ||
+    state.message.timer.blackout ||
+    state.message.timer.secondarySource !== null,
 }));
 
 export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
@@ -33,17 +37,12 @@ export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
   visible: state.message.timer.visible,
 }));
 
-export const useExternalMessageInput = createSelector((state: RuntimeStore) => ({
+export const useSecondaryMessageInput = createSelector((state: RuntimeStore) => ({
   text: state.message.secondary,
-  visible: state.message.timer.secondarySource === 'secondary',
+  source: state.message.timer.secondarySource,
 }));
 
-export const useMessagePreview = createSelector((state: RuntimeStore) => ({
-  blink: state.message.timer.blink,
-  blackout: state.message.timer.blackout,
-  phase: state.timer.phase,
-  secondarySource: state.message.timer.secondarySource,
-  showTimerMessage: state.message.timer.visible && Boolean(state.message.timer.text),
+export const useTimerStatus = createSelector((state: RuntimeStore) => ({
   timerType: state.eventNow?.timerType ?? null,
   countToEnd: state.eventNow?.countToEnd ?? false,
 }));
@@ -52,10 +51,16 @@ export const setMessage = {
   timerText: (payload: string) => sendSocket('message', { timer: { text: payload } }),
   timerVisible: (payload: boolean) => sendSocket('message', { timer: { visible: payload } }),
   secondaryMessage: (payload: string) => sendSocket('message', { secondary: payload }),
-  timerBlink: (payload: boolean) => sendSocket('message', { timer: { blink: payload } }),
-  timerBlackout: (payload: boolean) => sendSocket('message', { timer: { blackout: payload } }),
+  // blink and blackout are mutually exclusive stage states, so turning one on turns the other off
+  timerBlink: (payload: boolean) =>
+    sendSocket('message', payload ? { timer: { blink: true, blackout: false } } : { timer: { blink: false } }),
+  timerBlackout: (payload: boolean) =>
+    sendSocket('message', payload ? { timer: { blackout: true, blink: false } } : { timer: { blackout: false } }),
   timerSecondarySource: (payload: TimerMessage['secondarySource']) =>
     sendSocket('message', { timer: { secondarySource: payload } }),
+  /** returns the stage to a plain timer, keeping whatever the operator has typed */
+  clearScreen: () =>
+    sendSocket('message', { timer: { visible: false, blink: false, blackout: false, secondarySource: null } }),
 };
 
 export const usePlaybackControl = createSelector((state: RuntimeStore) => ({

apps/client/src/features/control/message/InputRow.module.scss

@@ -2,14 +2,12 @@
   display: grid;
   grid-template-columns: 1fr auto;
   gap: $element-spacing;
-  margin-top: $element-inner-spacing;
-}
 
-.label {
-  font-size: $inner-section-text-size;
-  color: $label-gray;
-
-  &.active {
-    color: $action-text-color;
+  &.withSource {
+    grid-template-columns: auto 1fr auto;
   }
 }
+
+.label.active {
+  color: $action-text-color;
+}

apps/client/src/features/control/message/InputRow.tsx

@@ -1,5 +1,6 @@
-import { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
 
+import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import Input from '../../../common/components/input/input/Input';
 import { cx } from '../../../common/utils/styleUtils';
 
@@ -9,12 +10,15 @@ interface InputRowProps {
   label: string;
   placeholder: string;
   text: string;
+  /** whether this text is currently on the audience screen */
   visible: boolean;
   changeHandler: (newValue: string) => void;
+  /** control which picks where the text is shown, rendered before the input */
+  sourcePicker?: ReactNode;
 }
 
 export default function InputRow(props: PropsWithChildren<InputRowProps>) {
-  const { label, placeholder, text, visible, changeHandler, children } = props;
+  const { label, placeholder, text, visible, changeHandler, sourcePicker, children } = props;
 
   const [value, setValue] = useState(text);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -43,10 +47,11 @@ export default function InputRow(props: PropsWithChildren<InputRowProps>) {
 
   return (
     <div>
-      <label className={cx([style.label, visible ?? style.active])} htmlFor={label}>
+      <Editor.Label className={cx([style.label, visible && style.active])} htmlFor={label}>
         {label}
-      </label>
-      <div className={style.inputItems}>
+      </Editor.Label>
+      <div className={cx([style.inputItems, sourcePicker && style.withSource])}>
+        {sourcePicker}
         <Input id={label} ref={inputRef} value={value} onChange={handleInputChange} placeholder={placeholder} />
         {children}
       </div>

apps/client/src/features/control/message/MessageControl.module.scss

@@ -0,0 +1,17 @@
+/* the screen state buttons belong with the preview they act on, not with the message inputs.
+   buttons sit in a column to the right of the stage by default; once the container narrows
+   too far for that (e.g. an extracted window resized narrow), they drop into a row below it.
+   the group is sized by its content, not stretched - the preview keeps a fixed shape rather
+   than growing to whatever height the panel happens to have free */
+.screenGroup {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: start;
+  gap: $element-spacing;
+}
+
+@container (max-width: 22rem) {
+  .screenGroup {
+    grid-template-columns: 1fr;
+  }
+}

apps/client/src/features/control/message/MessageControl.tsx

@@ -1,18 +1,22 @@
+import { SecondarySource } from 'ontime-types';
 import { IoEye, IoEyeOffOutline } from 'react-icons/io5';
 
 import IconButton from '../../../common/components/buttons/IconButton';
-import {
-  setMessage,
-  useExternalMessageInput as useSecondaryMessageInput,
-  useTimerMessageInput,
-} from '../../../common/hooks/useSocket';
+import Select from '../../../common/components/select/Select';
+import { setMessage, useSecondaryMessageInput, useTimerMessageInput } from '../../../common/hooks/useSocket';
 import InputRow from './InputRow';
-import TimerControlsPreview from './TimerViewControl';
+import ScreenControl from './ScreenControl';
+import TimerPreview from './TimerPreview';
+
+import style from './MessageControl.module.scss';
 
 export default function MessageControl() {
   return (
     <>
-      <TimerControlsPreview />
+      <div className={style.screenGroup}>
+        <TimerPreview />
+        <ScreenControl />
+      </div>
       <TimerMessageInput />
       <SecondaryInput />
     </>
@@ -24,7 +28,7 @@ function TimerMessageInput() {
 
   return (
     <InputRow
-      label='Timer Message'
+      label='Timer message'
       placeholder='Message shown fullscreen in stage timer'
       text={text}
       visible={visible}
@@ -32,6 +36,7 @@ function TimerMessageInput() {
     >
       <IconButton
         aria-label='Toggle timer message visibility'
+        aria-pressed={visible}
         onClick={() => setMessage.timerVisible(!visible)}
         variant={visible ? 'primary' : 'subtle'}
       >
@@ -41,31 +46,46 @@ function TimerMessageInput() {
   );
 }
 
+/**
+ * The secondary line of the stage timer shows one of the aux timers or the secondary message.
+ * The select owns which one, the eye owns whether the line is shown at all.
+ */
 function SecondaryInput() {
-  const { text, visible } = useSecondaryMessageInput();
-
-  const toggleSecondary = () => {
-    if (visible) {
-      setMessage.timerSecondarySource(null);
-    } else {
-      setMessage.timerSecondarySource('secondary');
-    }
-  };
+  const { text, source } = useSecondaryMessageInput();
+  const isShowingSecondaryLine = source !== null;
+  const selectedSource = source ?? 'aux1';
 
   return (
     <InputRow
-      label='Secondary Message'
+      label='Secondary'
       placeholder='Message shown as secondary text in stage timer'
       text={text}
-      visible={visible}
+      visible={source === 'secondary'}
       changeHandler={(newValue) => setMessage.secondaryMessage(newValue)}
+      sourcePicker={
+        <Select
+          value={selectedSource}
+          options={[
+            { value: 'aux1', label: 'Aux 1' },
+            { value: 'aux2', label: 'Aux 2' },
+            { value: 'aux3', label: 'Aux 3' },
+            { value: 'secondary', label: 'Message' },
+          ]}
+          onValueChange={(value: SecondarySource | null) => {
+            if (value === null) return;
+            setMessage.timerSecondarySource(value);
+          }}
+        />
+      }
     >
       <IconButton
-        aria-label='Toggle secondary message visibility'
-        onClick={toggleSecondary}
-        variant={visible ? 'primary' : 'subtle'}
+        aria-label='Toggle secondary visibility'
+        aria-pressed={isShowingSecondaryLine}
+        onClick={() => setMessage.timerSecondarySource(isShowingSecondaryLine ? null : selectedSource)}
+        variant={isShowingSecondaryLine ? 'primary' : 'subtle'}
+        data-testid='toggle secondary'
       >
-        {visible ? <IoEye /> : <IoEyeOffOutline />}
+        {isShowingSecondaryLine ? <IoEye /> : <IoEyeOffOutline />}
       </IconButton>
     </InputRow>
   );

apps/client/src/features/control/message/MessageControlExport.module.scss

@@ -1,8 +1,21 @@
 .growPanel {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* the extracted route has no flex parent to grow into */
+.extractedPanel {
+  height: 100%;
 }
 
 .contentLayout {
+  flex: 1;
+  min-height: 0;
+  container-type: inline-size;
+
   display: flex;
   flex-direction: column;
   gap: $section-spacing;

apps/client/src/features/control/message/MessageControlExport.tsx

@@ -5,6 +5,7 @@ import ErrorBoundary from '../../../common/components/error-boundary/ErrorBounda
 import ViewNavigationMenu from '../../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../../common/components/protect-route/ProtectRoute';
 import { handleLinks } from '../../../common/utils/linkUtils';
+import { cx } from '../../../common/utils/styleUtils';
 import { getIsNavigationLocked } from '../../../externals';
 import MessageControl from './MessageControl';
 
@@ -16,7 +17,10 @@ function MessageControlExport() {
 
   return (
     <ProtectRoute permission='editor'>
-      <Editor.Panel className={style.growPanel} data-testid='panel-messages-control'>
+      <Editor.Panel
+        className={cx([style.growPanel, isExtracted && style.extractedPanel])}
+        data-testid='panel-messages-control'
+      >
         {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('messagecontrol', event)} />}
         {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
 

apps/client/src/features/control/message/ScreenControl.module.scss

@@ -0,0 +1,14 @@
+.screenControl {
+  display: grid;
+  grid-auto-flow: row;
+  gap: $element-spacing;
+  width: 8rem;
+}
+
+@container (max-width: 22rem) {
+  .screenControl {
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    width: 100%;
+  }
+}

apps/client/src/features/control/message/ScreenControl.tsx

@@ -0,0 +1,40 @@
+import Button from '../../../common/components/buttons/Button';
+import { setMessage, useScreenControl } from '../../../common/hooks/useSocket';
+
+import style from './ScreenControl.module.scss';
+
+export default function ScreenControl() {
+  const { blackout, blink, isScreenModified } = useScreenControl();
+
+  return (
+    <div className={style.screenControl}>
+      <Button
+        variant={blink ? 'primary' : 'subtle'}
+        aria-pressed={blink}
+        fluid
+        onClick={() => setMessage.timerBlink(!blink)}
+        data-testid='toggle timer blink'
+      >
+        Blink
+      </Button>
+      <Button
+        variant={blackout ? 'destructive' : 'subtle'}
+        aria-pressed={blackout}
+        fluid
+        onClick={() => setMessage.timerBlackout(!blackout)}
+        data-testid='toggle timer blackout'
+      >
+        Blackout
+      </Button>
+      <Button
+        variant='subtle'
+        fluid
+        disabled={!isScreenModified}
+        onClick={() => setMessage.clearScreen()}
+        data-testid='clear screen'
+      >
+        Clear screen
+      </Button>
+    </div>
+  );
+}

apps/client/src/features/control/message/TimerPreview.module.scss

@@ -1,49 +1,26 @@
-.preview {
-  background-color: $ui-black;
-  display: grid;
-  place-content: center;
-  text-align: center;
-  position: relative;
-}
-
-.mainContent {
-  font-size: 1rem;
-  font-weight: 600;
+/* fixed shape, not stretched to whatever height the panel has free - it fills the
+   available width and keeps a 16:9 proportion, which is also what the font size
+   estimate in the embedded timer assumes */
+.stage {
   width: 100%;
-  color: var(--override-colour, $ui-white);
-
-  &[data-phase='pending'] {
-    color: $ontime-roll;
-  }
-  &[data-phase='overtime'] {
-    color: $playback-negative;
-  }
-  &[data-phase='none'] {
-    opacity: $opacity-disabled;
-  }
+  aspect-ratio: 16 / 9;
+  min-width: 0;
+  position: relative;
+  /* a query container so that the embedded timer scales to the preview, not to the viewport */
+  container-type: size;
+  contain: paint;
+  overflow: hidden;
+  border-radius: $component-border-radius-md;
 }
 
-.secondaryContent {
-  border-top: 1px solid $white-7;
-}
-
-.blackout {
-  display: none;
-}
-
-.eventStatus {
+/* editor chrome sits above the blackout and message overlays, so it stays reachable and readable */
+.stageChrome {
   position: absolute;
-  left: 0;
-  margin: 0.5rem 0.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
+  inset: 0;
+  z-index: calc($zindex-floating + 2);
+  pointer-events: none;
 
-.statusIcon {
-  color: $gray-1000;
-
-  &[data-active='true'] {
-    color: $active-indicator;
+  > * {
+    pointer-events: auto;
   }
 }

apps/client/src/features/control/message/TimerPreview.tsx

@@ -1,110 +1,21 @@
-import { TimerPhase, TimerType } from 'ontime-types';
-import { IoArrowDown, IoArrowUp, IoBan, IoTime } from 'react-icons/io5';
-import { LuArrowDownToLine } from 'react-icons/lu';
-
 import { CornerWithPip } from '../../../common/components/editor-utils/EditorUtils';
-import Tooltip from '../../../common/components/tooltip/Tooltip';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
-import { useMessagePreview } from '../../../common/hooks/useSocket';
 import { handleLinks } from '../../../common/utils/linkUtils';
-import { cx, timerPlaceholder } from '../../../common/utils/styleUtils';
 import PipRoot from '../../../views/editor/pip-timer/PipRoot';
+import { PipTimer } from '../../../views/editor/pip-timer/PipTimer';
+import TimerStatus from './TimerStatus';
 
 import style from './TimerPreview.module.scss';
 
-const secondarySourceLabels: Record<string, string> = {
-  aux1: 'Aux 1',
-  aux2: 'Aux 2',
-  aux3: 'Aux 3',
-  secondary: 'Secondary message',
-};
-
 export default function TimerPreview() {
-  const { blink, blackout, countToEnd, phase, secondarySource, showTimerMessage, timerType } = useMessagePreview();
   const { data } = useViewSettings();
 
-  const main = (() => {
-    if (showTimerMessage) return 'Message';
-    if (timerType === TimerType.None) return timerPlaceholder;
-    if (phase === TimerPhase.Pending) return 'Standby to start';
-    if (phase === TimerPhase.Overtime) return 'Timer Overtime';
-    if (timerType === TimerType.Clock) return 'Clock';
-    if (countToEnd) return 'Count to End';
-    return 'Timer';
-  })();
-
-  const secondary = (() => {
-    // message is a fullscreen overlay or secondary is not active
-    if (showTimerMessage || !secondarySource) return null;
-
-    // we need to check aux first since it takes priority
-    return secondarySourceLabels[secondarySource];
-  })();
-
-  const overrideColour = (() => {
-    // override fallback colours from starter project
-    if (phase === TimerPhase.Warning) return data.warningColor ?? '#ffa528';
-    if (phase === TimerPhase.Danger) return data.dangerColor ?? '#ff7300';
-    return data.normalColor ?? '#FFFC';
-  })();
-
-  const showColourOverride = main == 'Timer';
-  const contentClasses = cx([blink && style.blink, blackout && style.blackout]);
-
   return (
-    <div className={style.preview}>
-      <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
-      <div className={contentClasses}>
-        <div
-          className={style.mainContent}
-          data-phase={showColourOverride && phase}
-          style={showColourOverride ? { '--override-colour': overrideColour } : {}}
-        >
-          {main}
-        </div>
-        {secondary !== null && <div className={style.secondaryContent}>{secondary}</div>}
-      </div>
-      <div className={style.eventStatus}>
-        <Tooltip
-          text='Time type: Count down'
-          render={<span />}
-          className={style.statusIcon}
-          data-active={timerType === TimerType.CountDown}
-        >
-          <IoArrowDown />
-        </Tooltip>
-        <Tooltip
-          text='Time type: Count up'
-          render={<span />}
-          className={style.statusIcon}
-          data-active={timerType === TimerType.CountUp}
-        >
-          <IoArrowUp />
-        </Tooltip>
-        <Tooltip
-          text='Time type: Clock'
-          render={<span />}
-          className={style.statusIcon}
-          data-active={timerType === TimerType.Clock}
-        >
-          <IoTime />
-        </Tooltip>
-        <Tooltip
-          text='Time type: None'
-          render={<span />}
-          className={style.statusIcon}
-          data-active={timerType === TimerType.None}
-        >
-          <IoBan />
-        </Tooltip>
-        <Tooltip
-          text={countToEnd ? 'Count to end' : 'Count duration'}
-          render={<span />}
-          className={style.statusIcon}
-          data-active={countToEnd}
-        >
-          <LuArrowDownToLine />
-        </Tooltip>
+    <div className={style.stage}>
+      <PipTimer viewSettings={data} />
+      <div className={style.stageChrome}>
+        <TimerStatus />
+        <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
       </div>
     </div>
   );

apps/client/src/features/control/message/TimerStatus.module.scss

@@ -0,0 +1,17 @@
+.timerStatus {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0.5rem 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.statusIcon {
+  color: $gray-1000;
+
+  &[data-active='true'] {
+    color: $active-indicator;
+  }
+}

apps/client/src/features/control/message/TimerStatus.tsx

@@ -0,0 +1,58 @@
+import { TimerType } from 'ontime-types';
+import { IoArrowDown, IoArrowUp, IoBan, IoTime } from 'react-icons/io5';
+import { LuArrowDownToLine } from 'react-icons/lu';
+
+import Tooltip from '../../../common/components/tooltip/Tooltip';
+import { useTimerStatus } from '../../../common/hooks/useSocket';
+
+import style from './TimerStatus.module.scss';
+
+/** Read only summary of how the loaded event drives the stage timer */
+export default function TimerStatus() {
+  const { countToEnd, timerType } = useTimerStatus();
+
+  return (
+    <div className={style.timerStatus}>
+      <Tooltip
+        text='Time type: Count down'
+        render={<span />}
+        className={style.statusIcon}
+        data-active={timerType === TimerType.CountDown}
+      >
+        <IoArrowDown />
+      </Tooltip>
+      <Tooltip
+        text='Time type: Count up'
+        render={<span />}
+        className={style.statusIcon}
+        data-active={timerType === TimerType.CountUp}
+      >
+        <IoArrowUp />
+      </Tooltip>
+      <Tooltip
+        text='Time type: Clock'
+        render={<span />}
+        className={style.statusIcon}
+        data-active={timerType === TimerType.Clock}
+      >
+        <IoTime />
+      </Tooltip>
+      <Tooltip
+        text='Time type: None'
+        render={<span />}
+        className={style.statusIcon}
+        data-active={timerType === TimerType.None}
+      >
+        <IoBan />
+      </Tooltip>
+      <Tooltip
+        text={countToEnd ? 'Count to end' : 'Count duration'}
+        render={<span />}
+        className={style.statusIcon}
+        data-active={countToEnd}
+      >
+        <LuArrowDownToLine />
+      </Tooltip>
+    </div>
+  );
+}

apps/client/src/features/control/message/TimerViewControl.module.scss

@@ -1,11 +0,0 @@
-.previewContainer {
-  display: grid;
-  gap: $element-spacing;
-  grid-template-columns: 3fr 2fr;
-}
-
-.options {
-  display: flex;
-  flex-direction: column;
-  gap: $element-spacing;
-}

apps/client/src/features/control/message/TimerViewControl.tsx

@@ -1,92 +0,0 @@
-import { SecondarySource } from 'ontime-types';
-import { useEffect, useState } from 'react';
-
-import Button from '../../../common/components/buttons/Button';
-import * as Editor from '../../../common/components/editor-utils/EditorUtils';
-import Select from '../../../common/components/select/Select';
-import { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket';
-import TimerPreview from './TimerPreview';
-
-import style from './TimerViewControl.module.scss';
-
-export default function TimerControlsPreview() {
-  const { blackout, blink } = useTimerViewControl();
-
-  return (
-    <div className={style.previewContainer}>
-      <TimerPreview />
-      <div className={style.options}>
-        <SecondarySourceControl />
-
-        <Editor.Separator orientation='horizontal' />
-
-        <Button
-          variant={blink ? 'primary' : 'subtle'}
-          fluid
-          onClick={() => setMessage.timerBlink(!blink)}
-          data-testid='toggle timer blink'
-        >
-          Blink
-        </Button>
-        <Button
-          variant={blackout ? 'primary' : 'subtle'}
-          fluid
-          onClick={() => setMessage.timerBlackout(!blackout)}
-          data-testid='toggle timer blackout'
-        >
-          Blackout screen
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-function SecondarySourceControl() {
-  const { secondarySource } = useTimerViewControl();
-  const [value, setValue] = useState<SecondarySource>('aux1');
-
-  // sync secondary source with external changes
-  useEffect(() => {
-    if (secondarySource !== null) {
-      setValue(secondarySource);
-    }
-  }, [secondarySource]);
-
-  const toggleSecondary = () => {
-    if (secondarySource === value) {
-      setMessage.timerSecondarySource(null);
-    } else {
-      setMessage.timerSecondarySource(value);
-    }
-  };
-
-  return (
-    <>
-      <Select
-        value={value}
-        options={[
-          { value: 'aux1', label: 'Aux 1' },
-          { value: 'aux2', label: 'Aux 2' },
-          { value: 'aux3', label: 'Aux 3' },
-          { value: 'secondary', label: 'Secondary message' },
-        ]}
-        onValueChange={(value: SecondarySource | null) => {
-          if (value === null) return;
-          // we can only update the remote if it is enabled
-          if (secondarySource !== null) {
-            setMessage.timerSecondarySource(value);
-          }
-          setValue(value);
-        }}
-      />
-      <Button
-        variant={secondarySource !== null ? 'primary' : 'subtle'}
-        fluid
-        onClick={toggleSecondary}
-        data-testid='toggle secondary'
-      >
-        Show secondary
-      </Button>
-    </>
-  );
-}

apps/client/src/views/editor/pip-timer/PipTimer.scss

@@ -6,8 +6,9 @@
   padding: 0;
   box-sizing: border-box; /* reset */
   overflow: hidden;
-  width: 100%; /* restrict the page width to viewport */
-  height: 100vh;
+  width: 100%;
+  height: 100%; /* fill the pip window or the editor preview frame */
+  position: relative; /* anchor for the blackout and message overlays */
   transition: opacity 0.5s ease-in-out;
 
   font-family: $viewer-font-family;
@@ -19,8 +20,8 @@
   flex-direction: column;
 
   &--finished {
-    outline: clamp(4px, 1vw, 16px) solid $timer-finished-color;
-    outline-offset: calc(clamp(4px, 1vw, 16px) * -1);
+    outline: clamp(4px, 1cqw, 16px) solid $timer-finished-color;
+    outline-offset: calc(clamp(4px, 1cqw, 16px) * -1);
     transition: $viewer-transition-time;
   }
 
@@ -107,10 +108,24 @@
 
   /* =================== OVERLAY ===================*/
 
-  .message-overlay {
-    position: fixed;
+  .blackout {
+    position: absolute;
     inset: 0;
-    padding: 2vw;
+    z-index: 0;
+    background-color: #000;
+    opacity: 0;
+    transition: opacity $viewer-transition-time;
+
+    &--active {
+      z-index: calc($zindex-floating + 1);
+      opacity: 1;
+    }
+  }
+
+  .message-overlay {
+    position: absolute;
+    inset: 0;
+    padding: 2cqw;
     background: $viewer-background-color;
     opacity: 0;
     transition: opacity $viewer-transition-time;

apps/client/src/views/editor/pip-timer/PipTimer.tsx

@@ -41,9 +41,10 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
   // gather timer data
   const totalTime = getTotalTime(time.duration, time.addedTime);
   const stageTimer = getTimerByType(false, timerTypeNow, clock, time, timerTypeNow);
+  // match the defaults of the timer view, which is what the preview is standing in for
   const display = getFormattedTimer(stageTimer, timerTypeNow, 'min', {
     removeSeconds: false,
-    removeLeadingZero: false,
+    removeLeadingZero: true,
   });
 
   const currentAux = (() => {
@@ -63,23 +64,27 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
 
   // gather presentation styles
   const resolvedTimerColour = getTimerColour(viewSettings, undefined, showWarning, showDanger);
+  // the estimate is tuned for a 16:9 screen, so cap it by height for containers wider than that
   const timerFontSize = getEstimatedFontSize(display, secondaryContent);
+  const timerFontRule = `min(${timerFontSize}cqw, ${((timerFontSize * 16) / 9).toFixed(2)}cqh)`;
   const userStyles = {
     ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
   };
 
   return (
     <div className={cx(['pip-timer', showFinished && 'pip-timer--finished'])} style={userStyles}>
+      <div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />
+
       <div className={cx(['message-overlay', showOverlay && 'message-overlay--active'])}>
         <FitText mode='multi' min={12} max={256} className={cx(['message', message.timer.blink && 'blink'])}>
           {message.timer.text}
         </FitText>
       </div>
 
-      <div className='timer-container'>
+      <div className={cx(['timer-container', message.timer.blink && !showOverlay && 'blink'])}>
         <div
           className={cx(['timer', !isPlaying && 'timer--paused', showFinished && 'timer--finished'])}
-          style={{ fontSize: `${timerFontSize}vw` }}
+          style={{ fontSize: timerFontRule }}
           data-phase={time.phase}
         >
           {display}

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

@@ -818,7 +818,7 @@ export async function renameRundown(id: string, title: string) {
   const dataProvider = getDataProvider();
   const rundown = dataProvider.getRundown(id);
 
-  await dataProvider.setRundown(id, { ...rundown, title });
+  await dataProvider.setRundown(id, { ...rundown, title, revision: rundown.revision + 1 });
 
   /**
    * If we are modifying the loaded rundown we re-init it

apps/server/src/services/runtime-service/__tests__/runtime.utils.test.ts

@@ -0,0 +1,226 @@
+import { Offset, OffsetMode, Playback, TimerPhase, TimerState, TimerType } from 'ontime-types';
+
+import { makeOntimeEvent, makeRundown } from '../../../api-data/rundown/__mocks__/rundown.mocks.js';
+import {
+  findNextPlayableId,
+  findNextPlayableWithCue,
+  findPreviousPlayableId,
+  getEventAtIndex,
+  getShouldClockUpdate,
+  getShouldOffsetUpdate,
+  getShouldTimerUpdate,
+  isNewSecond,
+} from '../runtime.utils.js';
+
+describe('isNewSecond()', () => {
+  it('is false while the value moves within the same second', () => {
+    // count down rounds up, so both resolve to second 2
+    expect(isNewSecond(1500, 1200)).toBe(false);
+  });
+
+  it('is true once the value crosses a second boundary', () => {
+    expect(isNewSecond(1001, 1000)).toBe(true);
+  });
+
+  it('rounds according to the given direction', () => {
+    // 1200 -> ceil 2 / floor 1, 1800 -> ceil 2 / floor 1
+    expect(isNewSecond(1200, 1800, TimerType.CountDown)).toBe(false);
+    expect(isNewSecond(1200, 1800, TimerType.CountUp)).toBe(false);
+    // 1200 -> ceil 2 / floor 1, 2200 -> ceil 3 / floor 2
+    expect(isNewSecond(1200, 2200, TimerType.CountDown)).toBe(true);
+    expect(isNewSecond(1200, 2200, TimerType.CountUp)).toBe(true);
+  });
+
+  it('treats null and undefined as second zero', () => {
+    expect(isNewSecond(undefined, null)).toBe(false);
+    expect(isNewSecond(null, 0)).toBe(false);
+    expect(isNewSecond(undefined, 500)).toBe(true);
+  });
+});
+
+describe('getShouldClockUpdate()', () => {
+  it('is false within the same second and true across the boundary', () => {
+    expect(getShouldClockUpdate(1000, 1999)).toBe(false);
+    expect(getShouldClockUpdate(1000, 2000)).toBe(true);
+  });
+});
+
+describe('getShouldTimerUpdate()', () => {
+  const baseTimer: TimerState = {
+    addedTime: 0,
+    current: 10000,
+    duration: 10000,
+    elapsed: 0,
+    expectedFinish: 10000,
+    phase: TimerPhase.Default,
+    playback: Playback.Play,
+    secondaryTimer: null,
+    startedAt: 0,
+  };
+
+  it('always updates when there is no previous state', () => {
+    expect(getShouldTimerUpdate(undefined, baseTimer)).toBe(true);
+  });
+
+  it('does not update while the timer ticks within the same second', () => {
+    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, current: 9500 })).toBe(false);
+  });
+
+  it('updates when the timer crosses a second', () => {
+    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, current: 8999 })).toBe(true);
+  });
+
+  it('updates when the secondary timer crosses a second', () => {
+    const previous = { ...baseTimer, secondaryTimer: 2000 };
+    // counting down rounds up, so 1999 is still second 2
+    expect(getShouldTimerUpdate(previous, { ...previous, secondaryTimer: 1999 })).toBe(false);
+    expect(getShouldTimerUpdate(previous, { ...previous, secondaryTimer: 1000 })).toBe(true);
+  });
+
+  it.each([
+    ['addedTime', { addedTime: 1 }],
+    ['duration', { duration: 1 }],
+    ['phase', { phase: TimerPhase.Warning }],
+    ['playback', { playback: Playback.Pause }],
+    ['startedAt', { startedAt: 1 }],
+  ])('updates immediately when %s changes', (_label, patch) => {
+    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, ...patch })).toBe(true);
+  });
+
+  it.each([
+    ['elapsed', { elapsed: 1 }],
+    ['expectedFinish', { expectedFinish: 1 }],
+  ])('does not update on %s alone, since it is derived', (_label, patch) => {
+    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, ...patch })).toBe(false);
+  });
+});
+
+describe('getShouldOffsetUpdate()', () => {
+  const baseOffset: Offset = {
+    absolute: 0,
+    relative: 0,
+    mode: OffsetMode.Absolute,
+    expectedGroupEnd: null,
+    expectedRundownEnd: null,
+    expectedFlagStart: null,
+  };
+
+  it('always updates when there is no previous state', () => {
+    expect(getShouldOffsetUpdate(undefined, baseOffset, false)).toBe(true);
+  });
+
+  it('updates on a mode change even when no dependency ticked', () => {
+    expect(getShouldOffsetUpdate(baseOffset, { ...baseOffset, mode: OffsetMode.Relative }, false)).toBe(true);
+  });
+
+  it('holds back value changes until a dependency ticks', () => {
+    const next = { ...baseOffset, absolute: 1000 };
+    expect(getShouldOffsetUpdate(baseOffset, next, false)).toBe(false);
+    expect(getShouldOffsetUpdate(baseOffset, next, true)).toBe(true);
+  });
+
+  it('does not update when a dependency ticked but nothing changed', () => {
+    expect(getShouldOffsetUpdate(baseOffset, { ...baseOffset }, true)).toBe(false);
+  });
+});
+
+describe('findPreviousPlayableId()', () => {
+  const order = ['1', '2', '3'];
+
+  it('returns undefined when there is nothing to play', () => {
+    expect(findPreviousPlayableId([])).toBeUndefined();
+  });
+
+  it('returns the first event when nothing is loaded', () => {
+    expect(findPreviousPlayableId(order)).toBe('1');
+  });
+
+  it('returns the preceding event', () => {
+    expect(findPreviousPlayableId(order, '3')).toBe('2');
+  });
+
+  it('stays on the first event when already at the top', () => {
+    expect(findPreviousPlayableId(order, '1')).toBe('1');
+  });
+
+  it('falls back to the first event when the loaded id is unknown', () => {
+    expect(findPreviousPlayableId(order, 'not-in-rundown')).toBe('1');
+  });
+});
+
+describe('findNextPlayableId()', () => {
+  const order = ['1', '2', '3'];
+
+  it('returns undefined when there is nothing to play', () => {
+    expect(findNextPlayableId([])).toBeUndefined();
+  });
+
+  it('returns the first event when nothing is loaded', () => {
+    expect(findNextPlayableId(order)).toBe('1');
+  });
+
+  it('returns the following event', () => {
+    expect(findNextPlayableId(order, '1')).toBe('2');
+  });
+
+  it('wraps to the first event from the last', () => {
+    expect(findNextPlayableId(order, '3')).toBe('1');
+  });
+
+  it('falls back to the first event when the loaded id is unknown', () => {
+    expect(findNextPlayableId(order, 'not-in-rundown')).toBe('1');
+  });
+});
+
+describe('findNextPlayableWithCue()', () => {
+  const rundown = makeRundown({
+    order: ['1', '2', '3', '4'],
+    entries: {
+      '1': makeOntimeEvent({ id: '1', cue: 'a' }),
+      '2': makeOntimeEvent({ id: '2', cue: 'b' }),
+      '3': makeOntimeEvent({ id: '3', cue: 'b', skip: true }),
+      '4': makeOntimeEvent({ id: '4', cue: 'b' }),
+    },
+  });
+  const order = ['1', '2', '3', '4'];
+
+  it('finds the next event with the given cue', () => {
+    expect(findNextPlayableWithCue(rundown, order, 'b')?.id).toBe('2');
+  });
+
+  it('skips events which are not playable', () => {
+    expect(findNextPlayableWithCue(rundown, order, 'b', 2)?.id).toBe('4');
+  });
+
+  it('wraps around to the start of the rundown', () => {
+    expect(findNextPlayableWithCue(rundown, order, 'a', 2)?.id).toBe('1');
+  });
+
+  it('excludes the current event unless allowCurrent is set', () => {
+    expect(findNextPlayableWithCue(rundown, order, 'b', 1)?.id).toBe('4');
+    expect(findNextPlayableWithCue(rundown, order, 'b', 1, true)?.id).toBe('2');
+  });
+
+  it('returns undefined when no event carries the cue', () => {
+    expect(findNextPlayableWithCue(rundown, order, 'missing')).toBeUndefined();
+  });
+});
+
+describe('getEventAtIndex()', () => {
+  const rundown = makeRundown({
+    order: ['1', '2'],
+    entries: {
+      '1': makeOntimeEvent({ id: '1' }),
+      '2': makeOntimeEvent({ id: '2' }),
+    },
+  });
+
+  it('returns the event at the given index', () => {
+    expect(getEventAtIndex(rundown, ['1', '2'], 1)?.id).toBe('2');
+  });
+
+  it('returns undefined when the index is out of range', () => {
+    expect(getEventAtIndex(rundown, ['1', '2'], 5)).toBeUndefined();
+    expect(getEventAtIndex(rundown, [], 0)).toBeUndefined();
+  });
+});

docs/agent-guides/architecture.md

@@ -0,0 +1,85 @@
+# Ontime architecture
+
+Use for module placement or cross-boundary changes.
+
+## Direction
+
+Dependencies point toward pure domain logic:
+
+```text
+HTTP request
+  -> validation / router or controller
+  -> service orchestration
+  -> pure domain utilities
+
+service orchestration
+  -> DAO / stores / adapters / external clients
+```
+
+Keep a layer only for clearer ownership, isolated side effects, or direct business-rule tests.
+
+## Reuse and ownership
+
+Before adding a module, helper, service, or interface, find the concept owner and inspect callers.
+
+1. Reuse when the contract already matches.
+2. Extend for the same concept when the contract stays coherent.
+3. Keep local when reuse needs flags, broad optional inputs, unrelated modes, or leaky terms.
+4. Generalise only after stable common behaviour appears across real callers.
+
+Do not duplicate canonical rules or distort an abstraction to force reuse. Small local duplication can beat coupling unrelated concepts.
+
+## Server
+
+### Routers and controllers
+
+Routers declare paths and middleware. Controllers map validated HTTP input to typed service arguments, then results/errors to responses.
+
+Keep reusable calculations, domain decisions, transformations, persistence workflows, and integration coordination out of handlers. Simple reads may stay direct when a service would only pass through.
+
+### Services
+
+Services orchestrate use cases and side-effect boundaries. Make ordering and effects visible. Move substantial branching, calculation, comparison, parsing, and transformation to pure utilities.
+
+### Pure utilities
+
+Pass required state, config, and time explicitly. No I/O, stores/globals, logging, websocket publication, browser inspection, or caller-owned mutation unless explicitly contracted.
+
+Use focused Vitest coverage. Colocate feature logic. Move to `ontime-utils` only for genuine cross-package use.
+
+### State and boundaries
+
+- DAOs/data providers: persistence.
+- Stores: mutable runtime state.
+- Adapters/clients: external protocols and integrations.
+- Validators/parsers: protect boundaries before domain logic.
+- Commit state before dependent notifications or invalidations.
+
+Old layering exceptions are context, not precedent. Improve touched boundaries only through focused, behaviour-preserving moves.
+
+## Client
+
+- `common/api`: HTTP transport.
+- `common/hooks-query`: TanStack Query reads, mutations, keys, cache, invalidation.
+- `features`: reusable product capabilities and domain behaviour.
+- `views`: route-level composition.
+- `common`: genuinely cross-feature code.
+
+Keep substantial rules out of JSX, effects, and handlers. Use tested, colocated pure utilities. TanStack Query owns server state; established Zustand/context owns local state. No parallel caches.
+
+Limit subscriptions with selectors. Keep effect dependencies stable. Clean up listeners, intervals, external resources.
+
+## Shared packages
+
+- `ontime-types`: shared contracts; type-focused.
+- `ontime-utils`: environment-independent, side-effect-free shared logic.
+- Never import application layers into shared packages.
+- Keep feature-specific helpers with their owner, even when used by another file.
+
+## Review prompts
+
+- Business rule understandable/testable without app startup?
+- Transport, orchestration, state, transformation separated?
+- Existing owner reused without forcing unrelated behaviour?
+- Abstraction removes concepts rather than relocating them?
+- Smallest focused remedy clear?

docs/agent-guides/change-assessment.md

@@ -0,0 +1,30 @@
+# Change assessment
+
+Use before non-trivial planning/implementation and during non-trivial review. Let it shape scope and verification; avoid process theatre.
+
+## Rate three dimensions
+
+- **Value** — concrete user, product, operational, or maintenance benefit; include urgency.
+- **Risk** — regression likelihood/impact: data loss, security, cloud incompatibility, disruption, hard rollback.
+- **Complexity** — concepts, dependencies, layers, states, verification surfaces; not line count.
+
+Use `Low`, `Medium`, or `High`. Give one evidence-based sentence each. No pseudo-precise scores.
+
+```markdown
+## Assessment
+
+- Value: High — <concrete benefit>
+- Risk: Medium — <failure modes and reversibility>
+- Complexity: Low — <conceptual and verification burden>
+- Recommendation: Proceed | Reshape | Defer — <why>
+```
+
+One assessment per overall change.
+
+- High value never excuses unmanaged risk/complexity.
+- High risk needs earlier proof, narrower increments, rollback, or stronger checks.
+- High complexity needs clearer boundaries and smaller steps, not automatic abstraction.
+- Low value plus high risk/complexity suggests reshape or defer.
+- Revise after material scope discovery.
+
+Plans: assessment before steps. Reviews: findings first, then assessment. Assessment informs; never replaces user intent or evidence.

docs/agent-guides/code-quality.md

@@ -0,0 +1,48 @@
+# Simplicity and maintainability
+
+Use for abstractions, comments, helpers, naming, or structural complexity.
+
+## Simplicity
+
+Choose the smallest explicit, testable design. No extension points, generic engines, wrappers, or config for hypothetical needs.
+
+- Prefer direct flow over clever expressions or scattered conditions.
+- Extract only to name a rule, enable pure tests, or remove meaningful duplication.
+- Keep abstractions only when they reduce reader-held concepts.
+- Reuse the concept owner when semantics match.
+- Do not add flags, optional branches, generic names, or extension points to merge unlike cases.
+- Prefer focused local helpers over generic APIs exposing unrelated modes.
+- Keep scope narrow; note unrelated cleanup.
+- Delete clearly obsolete branches, harnesses, and shims. Ask when ownership or compatibility is unclear.
+
+## Comments
+
+Keep comments for:
+
+- non-obvious intent or invariants;
+- necessary ordering, timing, mutation, or side effects;
+- browser, Electron, cloud, or protocol constraints;
+- workaround reasons and removal conditions;
+- public contracts names/types cannot express.
+
+Remove comments that:
+
+- narrate code or names;
+- number obvious steps;
+- explain mechanics better expressed by code;
+- preserve removed history;
+- claim untested behaviour;
+- use banners to hide oversized modules.
+
+Update adjacent comments with code. Stale comments are defects.
+
+## Naming and types
+
+- Prefer Ontime terms over vague `data`, `result`, `item`.
+- Prefer explicit/discriminated types over `any`, broad casts, optional fields, non-null assertions, silent fallbacks.
+- Handle unions/enums exhaustively when future cases could be unsafe.
+- Keep public functions focused enough to avoid long contract explanations.
+
+## Review standard
+
+Do not demand personal style. Report complexity only when it risks maintenance, hides rules, blocks focused tests, duplicates ownership, or makes changes unsafe. Suggest reuse only after verifying the existing contract fits without added genericity.

docs/agent-guides/domain-invariants.md

@@ -0,0 +1,46 @@
+# Ontime domain invariants
+
+Load only for touched domains. Add only stable, recurring invariants; not one-off bugs.
+
+## Rundowns and entries
+
+- Keep `entries`, `order`, `flatOrder` normalised.
+- Keep group membership, group entry lists, child `parent` references consistent.
+- Preserve entry identity and supported types across patch, clone, group, ungroup, reorder.
+- Distinguish loaded vs background rundown. Prefer explicit rundown ID over global current state.
+- No caller-owned rundown mutation unless explicitly contracted.
+
+## Persistence, realtime, cache
+
+- No partial commit on failure.
+- Preserve revision/transaction semantics for loaded and background rundowns.
+- Persist before websocket refetches, runtime updates, integration notifications, or cache assumptions.
+- Notify only invalidated consumers; never leave client cache stale.
+- Avoid duplicate listeners, notifications, invalidations, lifecycle effects.
+- Reconnect/refetch must converge on authoritative state.
+- Align query keys and websocket refetch keys with the changed resource.
+
+## Timers
+
+Use temporal values by meaning: `Instant` for epoch time, `TimeOfDay` for local time since midnight, `Duration` for elapsed time, `Day` for calendar offsets. Convert through `timeCore`; never interchange as raw numbers.
+
+Active work: [runtimeState time-core migration](../migrations/runtime-state-time-core.md).
+
+When relevant, cover interactions among:
+
+- midnight/day offsets;
+- linked events/gaps;
+- delays/skipped entries;
+- count-to-end;
+- absolute/relative offsets;
+- warning, danger, finish, roll, end-action transitions;
+- loaded/next-event state.
+
+Pass time/state explicitly to keep rules deterministic and unit-testable.
+
+## Imports and migrations
+
+- Treat project files, spreadsheets, custom fields, migrated data as untrusted.
+- Preserve fields the import/migration does not own.
+- Validate/parse into the current model before runtime logic.
+- Avoid source mutation; test round trips and non-mutation when preservation matters.

docs/agent-guides/routing-and-cloud.md

@@ -0,0 +1,49 @@
+# Routing and Ontime Cloud
+
+Use for navigation, URLs, endpoints, websockets, auth, cookies, assets, redirects, presets, or local-storage scope.
+
+## Deployment invariant
+
+Support root and runtime-prefixed deployments:
+
+```text
+local:  http://localhost:4001/timer
+cloud:  https://cloud.example/client-hash/timer
+```
+
+Prefix is deployment data. Never assume `/`.
+
+## Client
+
+- `apps/client/src/externals.ts`: derives `baseURI`, `serverURL`, `websocketUrl` from document base/current origin.
+- `BrowserRouter`: uses `baseURI` basename.
+- APIs/assets: use `common/api/constants.ts` or base-aware helpers.
+- App navigation: use React Router. Never strip/guess/re-add prefix from `window.location.pathname`.
+- Persisted browser state: use existing base-aware scoping where prefixes need isolation.
+
+## Server
+
+- `updateRouterPrefix()` in `apps/server/src/externals.ts`: normalises `ROUTER_PREFIX`.
+- `apps/server/src/app.ts`: mounts routes below that prefix.
+- Domain routers: paths relative to mount; never derive prefix.
+- Websockets, auth redirects, cookie paths, share URLs: preserve prefix.
+
+## URL rules
+
+Use `URL`, React Router, or existing helpers instead of string manipulation. Preserve:
+
+- leading/trailing slashes and runtime prefix;
+- query params, auth tokens, navigation locks;
+- preset aliases and canonical view paths;
+- `https`/`wss` behind proxies;
+- static/user asset paths.
+
+Never infer Ontime Cloud from hostname alone. Generated base markup marks cloud; runtime prefixes also serve non-cloud reverse proxies.
+
+## Cloud capabilities
+
+Gate unavailable local-network integrations in cloud, including OSC output. Keep server behaviour and UI availability aligned.
+
+## Verification
+
+Test both root and a prefix such as `/client-hash`. Include relevant queries, redirects, cookies, websocket paths, presets, assets. Root-only routing coverage is incomplete.

docs/agent-guides/security.md

@@ -0,0 +1,42 @@
+# Security boundaries
+
+Use for auth, external input, files, integrations, assets, URLs, or secrets.
+
+## Untrusted inputs
+
+Validate/parse before trust:
+
+- HTTP bodies, params, headers, cookies, websocket messages;
+- project files, migrations, spreadsheets, imports;
+- custom HTML/CSS/views, translations, served assets;
+- automation payloads, third-party responses;
+- externally supplied paths/filenames.
+
+Validate shape and domain constraints at the owning boundary. Keep existing parser/validation layers; avoid downstream defensive casts.
+
+## Authentication and authorisation
+
+- Keep protected routers behind auth middleware in `apps/server/src/app.ts`.
+- Preserve auth across prefixed routes, redirects, websockets, generated links.
+- Scope session cookies to runtime prefix; isolate hosted clients.
+- Authentication never grants arbitrary file, path, project, or rundown access.
+
+## Files, URLs, integrations
+
+- Use established path/file helpers. Reject traversal and unexpected types.
+- Build URLs with `URL` or existing helpers. Check open redirects, SSRF, protocol changes, token leaks.
+- Encode/constrain untrusted HTML, CSS, filenames, headers, log values.
+- Preserve cloud limits on local-network capabilities.
+
+## Secrets and diagnostics
+
+- Never commit/log passwords, hashes, tokens, credentials, cookies, private project content.
+- Errors: useful, but no internal paths, stacks, credentials, sensitive payloads.
+- Keep tokens in existing session/authenticated-share flows. Avoid new URL-token patterns.
+
+## Review prompts
+
+- Where does input become trusted?
+- Validation once at owner, then useful type?
+- Can one prefixed client cross another client's session/assets?
+- Can logs, responses, redirects, URLs leak secrets?

docs/agent-guides/testing.md

@@ -0,0 +1,52 @@
+# Testing strategy
+
+Use for changed behaviour or tests.
+
+## Layers
+
+### Pure unit
+
+Put detailed business-rule coverage on pure functions. Test public inputs/outputs with Vitest: relevant boundaries, invalid input, ordering, rollover, errors.
+
+Every bug fix needs a regression test that fails before the fix. Prefer behaviour over mocks/implementation assertions.
+
+### Service and state
+
+Use service, DAO, store, or hook tests for orchestration: transitions, transactions, persistence, cache, notifications, external effects.
+
+Do not repeat all pure cases here. Prove delegation and sequencing.
+
+### End-to-end
+
+Reserve Playwright for key journeys and high-risk cross-layer integrations: edit/run rundown, playback, imports, rundown switching, cloud-prefixed navigation.
+
+No E2E for edges already proven in lower layers. Add E2E only when lower layers cannot prove the user-facing integration.
+
+## Compact before handoff
+
+Development harnesses may be broad, repetitive, diagnostic, temporary. Before handoff:
+
+1. Identify distinct required behaviours/regressions.
+2. Keep the smallest readable set that catches them.
+3. Parameterise repetition only when the table reads better.
+4. Remove diagnostic assertions, redundant permutations, temporary fixtures, private-detail coupling.
+5. Keep rare cases that encode real domain rules.
+
+Optimise for future readers, not minimum line count.
+
+## Quality
+
+- Name tests by observable behaviour.
+- Keep setup local/explicit unless a fixture improves comprehension.
+- Avoid arbitrary waits, wall-clock dependence, cross-test state, weak assertions.
+- Prefer realistic typed fixtures over large snapshots or masking casts.
+- Test non-mutation when promised.
+- No tests for trivial type/format changes or framework behaviour Ontime does not own.
+
+## Review prompts
+
+- Business logic directly unit-testable?
+- Test catches the reported bug/regression?
+- Cases distinct, not repeated path?
+- Temporary harness leaked?
+- E2E justified by cross-layer risk?

docs/agent-guides/workflow.md

@@ -0,0 +1,69 @@
+# Workflow and repository conventions
+
+Use for commands, imports, formatting, CI, dependencies, PRs.
+
+## Workspaces
+
+Confirm names from `package.json`.
+
+| Package          | Workspace name        |
+| ---------------- | --------------------- |
+| Client           | `ontime-ui`           |
+| Server           | `ontime-server`       |
+| Electron         | `ontime-electron`     |
+| Resolver         | `@getontime/resolver` |
+| CLI              | `@getontime/cli`      |
+| Shared types     | `ontime-types`        |
+| Shared utilities | `ontime-utils`        |
+
+Run from repo root: `pnpm --filter <workspace-name> <script>`. Add/install workspaces only when required.
+
+## Verification
+
+Start narrow; expand with risk:
+
+```text
+focused test
+  -> affected package tests
+  -> package lint/typecheck
+  -> required repository checks
+```
+
+```bash
+pnpm --filter ontime-ui test:pipeline <path-to-test>
+pnpm --filter ontime-server test:pipeline <path-to-test>
+pnpm --filter ontime-utils test:pipeline <path-to-test>
+pnpm --filter <workspace-name> lint
+pnpm --filter <workspace-name> typecheck
+
+pnpm format:check
+pnpm lint
+pnpm typecheck
+pnpm test
+pnpm e2e
+```
+
+PR CI: `.github/workflows/test.yml`; runs format, lint, types, unit, Playwright. Run E2E locally only for key flows or E2E infrastructure.
+
+Before code commit: `pnpm lint`, `pnpm test`; add `pnpm typecheck` for TypeScript and `pnpm format:check` for formatted files. Claim only observed results.
+
+## TypeScript and imports
+
+- Strict TypeScript. Prefer `ontime-types` domain types over local copies.
+- Keep client/server payloads aligned through `ontime-types`.
+- Import `ontime-types`/`ontime-utils` from public entry points; Oxlint forbids `src` subpaths.
+- Server relative ESM imports need `.js`.
+- Reuse public exports/canonical helpers before adding utilities.
+
+## Formatting and dependencies
+
+- Use Oxlint/Oxfmt, not ESLint/Prettier.
+- Oxfmt: two spaces, semicolons, single quotes, trailing commas, 120 columns.
+- Add dependencies only when platform/current stack cannot solve the need. Review `package.json` and `pnpm-lock.yaml` together.
+- Never hand-edit lockfile. No build output unless already tracked.
+
+## Pull requests
+
+- Title: `[<workspace-name>] <Title>`.
+- Separate behaviour from unrelated refactors/format churn.
+- State what changed, why, verification.

docs/migrations/runtime-state-time-core.md

@@ -0,0 +1,67 @@
+# runtimeState time-core migration
+
+**Status:** In progress
+
+## Goal
+
+Make temporal meaning explicit across `runtimeState` and timer calculations. Prevent mixing:
+
+- `Instant`: epoch timestamp;
+- `TimeOfDay`: local milliseconds since midnight, range `[0, dayInMs)`;
+- `Duration`: elapsed or remaining milliseconds;
+- `Day`: calendar-day offset.
+
+Use `apps/server/src/lib/time-core/timeCore.ts` for conversions and temporal arithmetic. Branded types remain numbers at serialization boundaries.
+
+## Current state
+
+Completed foundation:
+
+- temporal brands in `ontime-types`;
+- `timeCore` helpers for now, conversion, duration arithmetic, midnight crossing, calendar-day distance;
+- partial `runtimeState` adoption of `Instant`, `TimeOfDay`, `Day`, and `timeCore`.
+
+Remaining ambiguity:
+
+- `TimerState`, `RundownState`, and `Offset` expose temporal fields as `number`/`MaybeNumber`;
+- `timerUtils` accepts/returns raw numbers with different meanings;
+- `runtimeState` retains raw duration fields, manual arithmetic, and `as TimeOfDay`/`as Duration` casts.
+
+## Migration rules
+
+- Classify each temporal field before changing it. No generic `Time` type.
+- Convert only through `timeCore` or an explicit transport adapter.
+- Keep public/websocket JSON numeric where required; brand at the boundary.
+- Keep type migration separate from behaviour changes.
+- Preserve current midnight, rollover, pause, add-time, roll, and offset behaviour per slice.
+- Add helpers only when they encode a named temporal rule and remove caller casts/arithmetic.
+
+## Slices
+
+- [x] Add temporal brands and initial `timeCore` helpers/tests.
+- [ ] Inventory temporal fields in `TimerState`, `RundownState`, `Offset`, and private runtime state; assign intended types.
+- [ ] Migrate pure `timerUtils` functions by temporal concept; add focused midnight/rollover tests.
+- [ ] Migrate private `RuntimeState` fields and calculations; remove local casts/manual conversions.
+- [ ] Migrate shared runtime contracts and add numeric transport adapters where compatibility requires them.
+- [ ] Update remaining callers, fixtures, and mocks.
+- [ ] Remove superseded helpers, casts, and ambiguous temporal numbers.
+
+Each slice must leave old/new boundaries explicit, compile cleanly, and preserve behaviour.
+
+## Required coverage
+
+- before, at, and after midnight;
+- overnight and multi-day rundowns;
+- local-day calculation across timezone/DST offset changes;
+- pause/resume, added time, elapsed/remaining duration;
+- roll secondary targets and expected finish;
+- absolute/relative offsets and day offsets.
+
+## Complete when
+
+- Runtime/timer boundaries use semantic temporal types or documented numeric transport fields.
+- Temporal conversions/arithmetic use `timeCore` or named pure helpers.
+- No unexplained temporal casts or ambiguous numeric fields remain in migrated scope.
+- Focused tests cover the required boundaries.
+
+After completion, remove this migration tracker. Keep durable rules in `docs/agent-guides/domain-invariants.md`.

e2e/tests/features/201-message-control.spec.ts

@@ -19,3 +19,29 @@ test('message control sends messages to screens', async ({ context }) => {
 
   await expect(featurePage.getByText('TIME NOW')).toBeVisible();
 });
+
+test('message control drives the stage screen state', async ({ context }) => {
+  const editorPage = await context.newPage();
+  const featurePage = await context.newPage();
+
+  await editorPage.goto('/messagecontrol');
+  await featurePage.goto('/timer');
+  await featurePage.waitForLoadState('load', { timeout: 5000 });
+
+  // the secondary line defaults to an aux timer, the select is what puts our text on screen
+  await editorPage.getByPlaceholder('Message shown as secondary text in stage timer').fill('testing secondary');
+  await editorPage.getByRole('combobox').click();
+  await editorPage.getByRole('option', { name: 'Message' }).click();
+  await expect(featurePage.getByText('testing secondary')).toBeVisible();
+
+  await editorPage.getByTestId('toggle timer blackout').click();
+  await expect(featurePage.locator('.blackout')).toHaveClass(/blackout--active/);
+
+  // clearing returns the screen to normal, but keeps what the operator typed
+  await editorPage.getByTestId('clear screen').click();
+  await expect(featurePage.locator('.blackout')).not.toHaveClass(/blackout--active/);
+  await expect(featurePage.getByText('testing secondary')).toHaveCount(0);
+  await expect(editorPage.getByPlaceholder('Message shown as secondary text in stage timer')).toHaveValue(
+    'testing secondary',
+  );
+});