refactor: titlecard component

refactor(navigation): clear params from editor drawer
refactor(automation): improve automation UX
2026-07-26 10:38:55 +00:00 · 2026-07-17 19:37:42 +02:00 · 2026-07-17 15:50:42 +02:00 · 2026-07-17 10:53:45 +02:00 · 2026-07-17 10:53:45 +02:00 · 2026-07-16 10:46:10 +02:00
24 changed files with 896 additions and 178 deletions
@@ -0,0 +1,5 @@
+# CodeGraph data files — local to each machine, not for committing.
+# Ignore everything in .codegraph/ except this file itself, so transient
+# files (the database, daemon.pid, sockets, logs) never show up in git.
+*
+!.gitignore
@@ -11,6 +11,7 @@ import {
 } from '../../../stores/savedViewParams';
 import { handleLinks } from '../../../utils/linkUtils';
 import IconButton from '../../buttons/IconButton';
+import Tooltip from '../../tooltip/Tooltip';
 import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';

 import style from './ClientLink.module.scss';
@@ -105,16 +106,20 @@ function BrowserNavigationItem({ current, to, postAction, children }: PropsWithC
      {isCustomised && (
        <span className={style.trailing}>
          <span className={style.indicator} aria-hidden data-testid='client-link__saved-indicator' />
-          <IconButton
-            variant='ghosted-white'
-            size='small'
-            className={style.clear}
-            aria-label='Clear saved view settings'
-            title='Clear saved view settings'
-            onClick={clearViewSettings}
+          <Tooltip
+            text='Reset to default'
+            render={
+              <IconButton
+                variant='ghosted-white'
+                size='small'
+                className={style.clear}
+                aria-label='Reset to default'
+                onClick={clearViewSettings}
+              />
+            }
          >
            <IoCloseOutline />
-          </IconButton>
+          </Tooltip>
        </span>
      )}
    </NavigationMenuItem>
@@ -4,40 +4,60 @@
  position: relative;
  display: flex;
  flex-direction: column;
-}

-.title-card__title,
-.title-card__placeholder {
-  font-weight: 600;
-  font-size: $title-font-size;
-  line-height: 1.2em;
-}
+  background-color: var(--card-background-color-override, $viewer-card-bg-color);
+  padding: $view-card-padding;
+  border-radius: $element-border-radius;

-.title-card__title {
-  color: var(--color-override, $viewer-color);
-  padding-right: 1em;
-  min-height: 1.2em;
-}
+  border-left: 1vw solid;

-.title-card__placeholder {
-  color: var(--label-color-override, $viewer-label-color);
-}
+  .title-card__title:empty::before {
+    color: var(--label-color-override, $viewer-label-color);
+    content: attr(data-placeholder);
+  }

-.title-card__secondary {
-  font-size: $base-font-size;
-  color: var(--secondary-color-override, $viewer-secondary-color);
-  line-height: 1.2em;
-}
+  .title-card__title {
+    font-weight: 600;
+    line-height: 1.4em;
+    padding-right: 1em;
+    color: var(--color-override, $viewer-color);
+  }

-.title-card__label {
-  position: absolute;
-  right: 1rem;
-  top: 0.5rem;
-  font-size: $timer-label-size;
-  color: var(--secondary-color-override, $viewer-secondary-color);
-  text-transform: uppercase;
+  .title-card__secondary {
+    color: var(--secondary-color-override, $viewer-secondary-color);
+    line-height: 1.2em;
+  }

-  &--accent {
-    color: var(--accent-color-override, $accent-color);
+  &.md {
+    .title-card__title {
+      font-size: $title-font-size;
+    }
+    .title-card__secondary {
+      font-size: $base-font-size;
+    }
+  }
+  &.lg {
+    .title-card__title {
+      font-size: $large-font-size;
+    }
+    .title-card__secondary {
+      font-size: $title-font-size;
+    }
+    .schedule__ {
+      font-size: $base-font-size;
+    }
+  }
+
+  .title-card__label {
+    position: absolute;
+    right: 1rem;
+    top: 0.5rem;
+    font-size: $timer-label-size;
+    color: var(--secondary-color-override, $viewer-secondary-color);
+    text-transform: uppercase;
+
+    &--accent {
+      color: var(--accent-color-override, $accent-color);
+    }
  }
 }
@@ -1,33 +1,60 @@
-import { ForwardedRef, forwardRef } from 'react';
+import { OntimeEvent } from 'ontime-types';

 import { useTranslation } from '../../../translation/TranslationProvider';
-import { cx } from '../../utils/styleUtils';
+import { ExtendedEntry } from '../../utils/rundownMetadata';
+import { cx, enDash } from '../../utils/styleUtils';

 import './TitleCard.scss';

-interface TitleCardProps {
+type TitleCardMainProps = {
  title?: string;
  label?: 'now' | 'next';
  secondary?: string;
  className?: string;
-}
+  colour?: string;
+  textAlign?: 'left' | 'right' | 'center';
+  size?: 'md' | 'lg';
+  placeholder?: string;
+};
+
+type TitleCardExpectedProps = TitleCardMainProps & {
+  event: ExtendedEntry<OntimeEvent>;
+  expectedStart: number;
+  showExpected: boolean;
+};
+
+type TitleCardNoExpectedProps = TitleCardMainProps & {
+  event?: undefined;
+  expectedStart?: undefined;
+  showExpected?: false;
+};
+
+type TitleCardProps = TitleCardExpectedProps | TitleCardNoExpectedProps;
+
+export default function TitleCard({
+  label,
+  title,
+  secondary,
+  className = '',
+  colour = 'transparent',
+  textAlign = 'left',
+  size = 'md',
+  placeholder = enDash,
+}: TitleCardProps) {
+  'use memo';

-const TitleCard = forwardRef((props: TitleCardProps, ref: ForwardedRef<HTMLDivElement>) => {
-  const { label, title, secondary, className = '' } = props;
  const { getLocalizedString } = useTranslation();
-
  const accent = label === 'now';

  return (
-    <div className={cx(['title-card', className])} ref={ref}>
-      <span className='title-card__title'>{title}</span>
+    <div className={cx(['title-card', className, size])} style={{ borderColor: colour }}>
+      <span className='title-card__title' style={{ textAlign }} data-placeholder={placeholder}>
+        {title === '' ? null : title}
+      </span>
      <span className={cx(['title-card__label', accent && 'title-card__label--accent'])}>
        {label && getLocalizedString(`common.${label}`)}
      </span>
      <div className='title-card__secondary'>{secondary}</div>
    </div>
  );
-});
-
-TitleCard.displayName = 'TitleCard';
-export default TitleCard;
+}
@@ -6,6 +6,7 @@ import { useSearchParams } from 'react-router';

 import useViewSettings from '../../hooks-query/useViewSettings';
 import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
+import { useSavedViewParams } from '../../stores/savedViewParams';
 import Button from '../buttons/Button';
 import IconButton from '../buttons/IconButton';
 import Info from '../info/Info';
@@ -27,6 +28,7 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
  const [searchParams, setSearchParams] = useSearchParams();
  const { data: viewSettings } = useViewSettings();
  const { isOpen, close } = useViewParamsEditorStore();
+  const clearSavedParams = useSavedViewParams((store) => store.clear);
  const isSmallScreen = useIsSmallScreen();

  const getPreservedParams = () => getPreservedSearchParams(searchParams, viewOptions);
@@ -36,6 +38,7 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
  };

  const resetParams = () => {
+    clearSavedParams(target);
    setSearchParams(getPreservedParams());
  };

@@ -293,8 +293,9 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
        <h3>Outputs</h3>
        <Info>
          Automation outputs can be used to send data from Ontime to external software <br />
-          or to change properties of Ontime itself.
-          <ExternalLink href={integrationsDocsUrl}>See the documentation for templates</ExternalLink>
+          or to change properties of Ontime itself. <br /> <br />
+          Use Ontime runtime data in these fields with template strings. Type {'{{'} to see autocomplete, or{' '}
+          <ExternalLink href={integrationsDocsUrl}>read the docs</ExternalLink>
        </Info>

        {fieldOutputs.map((output, index) => {
@@ -341,12 +342,17 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                  </label>
                  <label>
                    Address
-                    <Input {...register(`outputs.${index}.address`)} fluid placeholder='/cue/start' />
+                    <TemplateInput
+                      {...register(`outputs.${index}.address`)}
+                      value={output.address}
+                      fluid
+                      placeholder='/cue/start'
+                    />
                    <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
                  </label>
                  <label>
                    Arguments
-                    <TemplateInput {...register(`outputs.${index}.args`)} value={output.args} placeholder='1' />
+                    <TemplateInput {...register(`outputs.${index}.args`)} value={output.args} fluid placeholder='1' />
                    <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
                  </label>
                  <div>
@@ -376,7 +382,7 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                <div className={style.httpSection}>
                  <label>
                    Target URL
-                    <Input
+                    <TemplateInput
                      {...register(`outputs.${index}.url`, {
                        required: { value: true, message: 'Required field' },
                        pattern: {
@@ -384,6 +390,7 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                          message: 'HTTP messages should target http:// or https://',
                        },
                      })}
+                      value={output.url}
                      fluid
                      placeholder='http://127.0.0.1/start/1'
                    />
@@ -5,6 +5,7 @@ import { UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form'
 import Input from '../../../../common/components/input/input/Input';
 import Select from '../../../../common/components/select/Select';
 import * as Panel from '../../panel-utils/PanelUtils';
+import TemplateInput from './template-input/TemplateInput';

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

@@ -71,8 +72,8 @@ export default function OntimeActionForm({
            { value: 'playback-pause', label: 'Playback: pause' },
            { value: 'playback-roll', label: 'Playback: roll' },

-            { value: 'message-set', label: 'Primary Message: set' },
-            { value: 'message-secondary', label: 'Secondary Message: source' },
+            { value: 'message-set', label: 'Primary Message' },
+            { value: 'message-secondary', label: 'Secondary Message' },
          ]}
        />
        <Panel.Error>{rowErrors?.action?.message}</Panel.Error>
@@ -96,7 +97,12 @@ export default function OntimeActionForm({
        <>
          <label>
            Text (leave empty for no change)
-            <Input {...register(`outputs.${index}.text`)} fluid placeholder='eg: Timer is finished' />
+            <TemplateInput
+              {...register(`outputs.${index}.text`)}
+              value={watch(`outputs.${index}.text`) ?? ''}
+              fluid
+              placeholder='eg: Timer is finished'
+            />
            <Panel.Error>{rowErrors?.text?.message}</Panel.Error>
          </label>
          <label>
@@ -120,31 +126,48 @@ export default function OntimeActionForm({
      )}

      {selectedAction === 'message-secondary' && (
-        <label>
-          Timer secondary source
-          <Select<SecondarySource | 'null' | null>
-            onValueChange={(value) => {
-              // null -> no selection
-              if (value === null) return;
-              // 'null' -> clear the secondary source
-              if (value === 'null') {
-                setValue(`outputs.${index}.secondarySource`, null, { shouldDirty: true });
-                return;
-              }
-              setValue(`outputs.${index}.secondarySource`, value, { shouldDirty: true });
-            }}
-            value={watch(`outputs.${index}.secondarySource`)}
-            options={[
-              { value: null, label: 'Select secondary source' },
-              { value: 'aux1', label: 'Auxiliary timer 1' },
-              { value: 'aux2', label: 'Auxiliary timer 2' },
-              { value: 'aux3', label: 'Auxiliary timer 3' },
-              { value: 'secondary', label: 'Secondary' },
-              { value: 'null', label: 'None' }, // allow the user to clear the secondary source
-            ]}
-          />
-          <Panel.Error>{rowErrors?.secondarySource?.message}</Panel.Error>
-        </label>
+        <>
+          <label>
+            Text (leave empty for no change)
+            <TemplateInput
+              {...register(`outputs.${index}.text`)}
+              value={watch(`outputs.${index}.text`) ?? ''}
+              fluid
+              placeholder='eg: Next up: keynote'
+            />
+            <Panel.Error>{rowErrors?.text?.message}</Panel.Error>
+          </label>
+          <label>
+            Timer secondary source
+            <Select<SecondarySource | 'no-change' | 'null' | null>
+              onValueChange={(value) => {
+                // null -> no selection
+                if (value === null) return;
+                // no-change -> leave the current secondary source untouched
+                if (value === 'no-change') {
+                  setValue(`outputs.${index}.secondarySource`, undefined, { shouldDirty: true });
+                  return;
+                }
+                // 'null' -> clear the secondary source
+                if (value === 'null') {
+                  setValue(`outputs.${index}.secondarySource`, null, { shouldDirty: true });
+                  return;
+                }
+                setValue(`outputs.${index}.secondarySource`, value, { shouldDirty: true });
+              }}
+              value={watch(`outputs.${index}.secondarySource`) ?? 'no-change'}
+              options={[
+                { value: 'no-change', label: 'No change' },
+                { value: 'aux1', label: 'Auxiliary timer 1' },
+                { value: 'aux2', label: 'Auxiliary timer 2' },
+                { value: 'aux3', label: 'Auxiliary timer 3' },
+                { value: 'secondary', label: 'Secondary' },
+                { value: 'null', label: 'None' }, // allow the user to clear the secondary source
+              ]}
+            />
+            <Panel.Error>{rowErrors?.secondarySource?.message}</Panel.Error>
+          </label>
+        </>
      )}

      <div className={style.test}>{children}</div>
@@ -79,7 +79,7 @@ export default function TriggersList(props: TriggersListProps) {
          <tbody>
            {!showForm && triggers.length === 0 && (
              <Panel.TableEmpty
-                label='Create an automation to attach triggers to'
+                label='Create a trigger to run an automation'
                handleClick={canAdd ? () => setShowForm(true) : undefined}
              />
            )}
@@ -1,29 +1,67 @@
-.wrapper {
+.inputShell {
  position: relative;
 }

-.suggestions {
-  background: $gray-1250;
-  color: $ui-white;
-
-  position: absolute;
-  top: 100%;
-  left: 0;
+.fluid {
  width: 100%;
-  margin: 0;
-  z-index: $zindex-floating;
-  padding-block: 0.25rem;
+}

-  max-height: 200px;
-  overflow-y: auto;
+.input {
+  padding-right: 2rem;
+}
+
+.expandButton {
+  position: absolute;
+  top: 50%;
+  right: 0.25rem;
+  transform: translateY(-50%);
+}
+
+.positioner {
+  outline: 0;
+}
+
+.popup {
+  box-sizing: border-box;
+  min-width: var(--anchor-width);
+  max-width: var(--available-width);
+  border: 1px solid $gray-1000;
+  border-radius: $component-border-radius-md;
+  background: $gray-1250;
  color: $label-gray;
+}

-  li {
-    padding: 0.25rem;
-  }
+.list {
+  box-sizing: border-box;
+  max-height: min(20rem, var(--available-height));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-block: 0.25rem;
+  outline: 0;
+}

-  li:hover {
+.item {
+  box-sizing: border-box;
+  padding: 0.25rem 0.5rem;
+  outline: 0;
+  cursor: default;
+  user-select: none;
+  overflow-wrap: anywhere;
+
+  &[data-highlighted] {
    color: $ui-white;
    background: $blue-700;
  }
 }
+
+.expandedEditor {
+  min-height: min(18rem, 45vh);
+  font-family: monospace;
+  line-height: 1.4;
+}
+
+.footerHint {
+  margin-right: auto;
+  color: $label-gray;
+  font-size: calc(1rem - 2px);
+}
@@ -1,69 +1,258 @@
-import { mergeRefs, useClickOutside } from '@mantine/hooks';
-import { forwardRef, useMemo, useState } from 'react';
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import type { ChangeEvent, ReactNode, Ref } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { IoExpandOutline } from 'react-icons/io5';

-import Input, { type InputProps } from '../../../../../common/components/input/input/Input';
+import Button from '../../../../../common/components/buttons/Button';
+import IconButton from '../../../../../common/components/buttons/IconButton';
+import { type InputProps } from '../../../../../common/components/input/input/Input';
+import Textarea from '../../../../../common/components/input/textarea/Textarea';
+import Modal from '../../../../../common/components/modal/Modal';
 import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
-import { makeAutoCompleteList, matchRemaining, selectFromLastTemplate } from './templateInput.utils';
+import { cx } from '../../../../../common/utils/styleUtils';
+import { makeAutoCompleteList } from './templateInput.utils';
+import { useTemplateAutocomplete } from './useTemplateAutocomplete';

+import inputStyle from '../../../../../common/components/input/input/Input.module.scss';
 import style from './TemplateInput.module.scss';

-interface TemplateInputProps extends InputProps {}
+interface TemplateInputProps extends Omit<InputProps, 'value'> {
+  ref?: Ref<HTMLInputElement>;
+  value?: string;
+}

-const TemplateInput = forwardRef(function TemplateInput(props: TemplateInputProps, ref) {
-  const { value, onChange, ...rest } = props;
+interface TemplateEditorModalProps {
+  autocompleteList: string[];
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (value: string) => void;
+  value: string;
+}
+
+type TemplateAutocompleteState = ReturnType<typeof useTemplateAutocomplete<HTMLInputElement>>;
+
+interface TemplateAutocompleteRootProps {
+  autocomplete: TemplateAutocompleteState;
+  children: ReactNode;
+  value: string;
+}
+
+function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+
+function emitInputChange(name: string | undefined, value: string, onChange: InputProps['onChange']) {
+  onChange?.({
+    target: { name, value },
+    currentTarget: { name, value },
+  } as ChangeEvent<HTMLInputElement>);
+}
+
+export default function TemplateInput({
+  className,
+  disabled,
+  fluid,
+  height = 'medium',
+  onChange,
+  readOnly,
+  ref,
+  value,
+  variant = 'subtle',
+  ...rest
+}: TemplateInputProps) {
  const { data } = useCustomFields();
-  const localRef = useClickOutside(() => setShowSuggestions(false));
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [inputValue, setInputValue] = useState(value || '');
+  const [isExpanded, setIsExpanded] = useState(false);

  const autocompleteList = useMemo(() => {
    return makeAutoCompleteList(data);
  }, [data]);

-  const [inputValue, setInputValue] = useState(value || '');
-  const [suggestions, setSuggestions] = useState<string[]>([]);
-  const [showSuggestions, setShowSuggestions] = useState(false);
+  const updateInputValue = useCallback(
+    (nextValue: string) => {
+      setInputValue(nextValue);
+      emitInputChange(rest.name, nextValue, onChange);
+    },
+    [onChange, rest.name],
+  );

-  const updateSuggestions = (value: string) => {
-    const template = selectFromLastTemplate(value);
-    return autocompleteList.filter((suggestion) => suggestion.startsWith(template));
+  const autocomplete = useTemplateAutocomplete(inputValue, autocompleteList, inputRef, updateInputValue);
+  const { setCursorForValue } = autocomplete;
+
+  // Keep the local autocomplete input in sync when react-hook-form resets or swaps field-array values.
+  useEffect(() => {
+    const nextValue = value || '';
+    setInputValue(nextValue);
+    setCursorForValue(nextValue, nextValue.length);
+  }, [setCursorForValue, value]);
+
+  const setInputRef = useCallback(
+    (element: HTMLInputElement | null) => {
+      inputRef.current = element;
+      assignRef(ref, element);
+    },
+    [ref],
+  );
+
+  const openExpandedEditor = () => {
+    autocomplete.setShowSuggestions(false);
+    setIsExpanded(true);
  };

-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(event.target.value);
-
-    if (event.target.value.endsWith('{')) {
-      setShowSuggestions(true);
-      setSuggestions(updateSuggestions(event.target.value));
-    } else if (event.target.value === '' || event.target.value.endsWith('}}')) {
-      setShowSuggestions(false);
-    } else if (showSuggestions) {
-      setSuggestions(updateSuggestions(event.target.value));
-    }
-
-    onChange?.(event);
+  const closeExpandedEditor = () => {
+    setIsExpanded(false);
  };

-  const handleSuggestion = (value: string) => {
-    setInputValue((prev) => {
-      const remaining = matchRemaining(prev as string, value);
-      return prev + remaining;
-    });
-    setShowSuggestions(false);
+  const saveExpandedEditor = (nextValue: string) => {
+    updateInputValue(nextValue);
+    autocomplete.setCursorForValue(nextValue, nextValue.length);
+    setIsExpanded(false);
  };

  return (
-    <div className={style.wrapper} ref={mergeRefs(localRef, ref)}>
-      <Input value={inputValue} {...rest} onChange={handleInputChange} fluid />
-      {showSuggestions && suggestions.length > 0 && (
-        <ul className={style.suggestions}>
-          {suggestions.map((suggestion) => (
-            <li key={suggestion} onClick={() => handleSuggestion(suggestion)}>
-              {suggestion}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
+    <>
+      <TemplateAutocompleteRoot autocomplete={autocomplete} value={inputValue}>
+        <div className={cx([style.inputShell, fluid && style.fluid])}>
+          <BaseAutocomplete.Input
+            ref={setInputRef}
+            className={cx([
+              inputStyle.input,
+              inputStyle[variant],
+              inputStyle[height],
+              fluid && inputStyle.fluid,
+              style.input,
+              className,
+            ])}
+            {...rest}
+            disabled={disabled}
+            onClick={autocomplete.updateCursor}
+            onFocus={autocomplete.updateCursor}
+            onKeyUp={autocomplete.updateCursor}
+            onSelect={autocomplete.updateCursor}
+            readOnly={readOnly}
+          />
+          <IconButton
+            aria-label='Expand template editor'
+            className={style.expandButton}
+            disabled={disabled || readOnly}
+            onClick={openExpandedEditor}
+            size='small'
+            title='Expand template editor'
+            variant='ghosted-white'
+          >
+            <IoExpandOutline />
+          </IconButton>
+        </div>
+      </TemplateAutocompleteRoot>
+      <TemplateEditorModal
+        autocompleteList={autocompleteList}
+        isOpen={isExpanded}
+        onClose={closeExpandedEditor}
+        onSave={saveExpandedEditor}
+        value={inputValue}
+      />
+    </>
  );
-});
+}

-export default TemplateInput;
+function TemplateAutocompleteRoot({ autocomplete, children, value }: TemplateAutocompleteRootProps) {
+  return (
+    <BaseAutocomplete.Root
+      items={autocomplete.suggestions}
+      autoHighlight
+      highlightItemOnHover
+      mode='none'
+      open={autocomplete.open}
+      value={value}
+      onOpenChange={autocomplete.setShowSuggestions}
+      onValueChange={autocomplete.handleValueChange}
+    >
+      {children}
+      <TemplateSuggestionPopup />
+    </BaseAutocomplete.Root>
+  );
+}
+
+function TemplateEditorModal({ autocompleteList, isOpen, onClose, onSave, value }: TemplateEditorModalProps) {
+  const expandedInputRef = useRef<HTMLTextAreaElement | null>(null);
+  const [draftValue, setDraftValue] = useState(value);
+  const autocomplete = useTemplateAutocomplete(draftValue, autocompleteList, expandedInputRef, setDraftValue);
+  const { setShowSuggestions } = autocomplete;
+
+  // Reset the draft whenever the modal opens so cancel never leaks unsaved changes.
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    setDraftValue(value);
+    setShowSuggestions(false);
+  }, [isOpen, setShowSuggestions, value]);
+
+  const handleClose = () => {
+    setShowSuggestions(false);
+    onClose();
+  };
+
+  const handleSave = () => {
+    setShowSuggestions(false);
+    onSave(draftValue);
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      showBackdrop
+      showCloseButton
+      title='Edit template'
+      bodyElements={
+        <TemplateAutocompleteRoot autocomplete={autocomplete} value={draftValue}>
+          <BaseAutocomplete.Input
+            autoFocus
+            className={style.expandedEditor}
+            onClick={autocomplete.updateCursor}
+            onFocus={autocomplete.updateCursor}
+            onKeyUp={autocomplete.updateCursor}
+            onSelect={autocomplete.updateCursor}
+            render={<Textarea ref={expandedInputRef} fluid resize='none' rows={8} />}
+          />
+        </TemplateAutocompleteRoot>
+      }
+      footerElements={
+        <>
+          <span className={style.footerHint}>Start a template with {'{{'} to see autocomplete.</span>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button onClick={handleSave} variant='primary'>
+            Save
+          </Button>
+        </>
+      }
+    />
+  );
+}
+
+function TemplateSuggestionPopup() {
+  return (
+    <BaseAutocomplete.Portal>
+      <BaseAutocomplete.Positioner side='bottom' align='start' className={style.positioner}>
+        <BaseAutocomplete.Popup className={style.popup}>
+          <BaseAutocomplete.List className={style.list}>
+            <BaseAutocomplete.Collection>
+              {(suggestion: string) => (
+                <BaseAutocomplete.Item key={suggestion} value={suggestion} className={style.item}>
+                  {suggestion}
+                </BaseAutocomplete.Item>
+              )}
+            </BaseAutocomplete.Collection>
+          </BaseAutocomplete.List>
+        </BaseAutocomplete.Popup>
+      </BaseAutocomplete.Positioner>
+    </BaseAutocomplete.Portal>
+  );
+}
@@ -1,4 +1,4 @@
-import { matchRemaining } from '../templateInput.utils';
+import { completeTemplateAtCursor, matchRemaining, selectActiveTemplate } from '../templateInput.utils';

 describe('matchRemaining()', () => {
  it('should return a partial string needed for autocomplete', () => {
@@ -15,3 +15,54 @@ describe('matchRemaining()', () => {
    expect(matchRemaining('test', 'test')).toBe('');
  });
 });
+
+describe('selectActiveTemplate()', () => {
+  it('returns the last unclosed template fragment', () => {
+    expect(selectActiveTemplate('send {{event')).toBe('{{event');
+    expect(selectActiveTemplate('send {{eventNow.title}} and {{event')).toBe('{{event');
+  });
+
+  it('ignores single braces and closed templates', () => {
+    expect(selectActiveTemplate('send {')).toBe('');
+    expect(selectActiveTemplate('send {{eventNow.title}}')).toBe('');
+  });
+
+  it('only considers templates before the cursor', () => {
+    expect(selectActiveTemplate('send {{event}} then {{timer', 14)).toBe('');
+    expect(selectActiveTemplate('send {{event}} then {{timer', 27)).toBe('{{timer');
+  });
+
+  it('selects a partial template when the cursor is inside a completed template', () => {
+    expect(selectActiveTemplate('send {{timer.current}} after', 12)).toBe('{{timer');
+  });
+});
+
+describe('completeTemplateAtCursor()', () => {
+  it('completes the active template before the cursor', () => {
+    expect(completeTemplateAtCursor('send {{timer after', '{{timer.current}}', 12)).toEqual({
+      value: 'send {{timer.current}} after',
+      cursorIndex: 22,
+    });
+  });
+
+  it('preserves text before and after the cursor', () => {
+    expect(completeTemplateAtCursor('before {{event after', '{{eventNow.title}}', 14)).toEqual({
+      value: 'before {{eventNow.title}} after',
+      cursorIndex: 25,
+    });
+  });
+
+  it('preserves a following template when completing between templates', () => {
+    expect(completeTemplateAtCursor('{{clock}} and {{timer then {{eventNow.title}}', '{{timer.current}}', 21)).toEqual({
+      value: '{{clock}} and {{timer.current}} then {{eventNow.title}}',
+      cursorIndex: 31,
+    });
+  });
+
+  it('replaces the whole template when the cursor is inside a completed template', () => {
+    expect(completeTemplateAtCursor('before {{timer.current}} after', '{{timer.duration}}', 15)).toEqual({
+      value: 'before {{timer.duration}} after',
+      cursorIndex: 25,
+    });
+  });
+});
@@ -54,6 +54,16 @@ const eventStaticPropertiesNext = [
  '{{eventNext.delay}}',
 ];

+const groupStaticPropertiesNow = [
+  '{{groupNow.id}}',
+  '{{groupNow.title}}',
+  '{{groupNow.note}}',
+  '{{groupNow.colour}}',
+  '{{groupNow.timeStart}}',
+  '{{groupNow.timeEnd}}',
+  '{{groupNow.duration}}',
+];
+
 const staticAuxProperties = (index: 1 | 2 | 3) => [
  `{{auxtimer${index}.current}}`,
  `{{auxtimer${index}.duration}}`,
@@ -75,12 +85,19 @@ export function makeAutoCompleteList(customFields: CustomFields): string[] {
    ...Object.entries(customFields).map(([key]) => `{{eventNow.custom.${key}}}`),
    ...eventStaticPropertiesNext,
    ...Object.entries(customFields).map(([key]) => `{{eventNext.custom.${key}}}`),
+    ...groupStaticPropertiesNow,
+    ...Object.entries(customFields).map(([key]) => `{{groupNow.custom.${key}}}`),
    ...staticAuxProperties(1),
    ...staticAuxProperties(2),
    ...staticAuxProperties(3),
  ];
 }

+interface TemplateCompletion {
+  cursorIndex: number;
+  value: string;
+}
+
 /**
 * Returns the partial string b needed to autocomplete string a
 * @example matchRemaining('te', 'test') -> 'st'
@@ -111,13 +128,54 @@ export function matchRemaining(a: string, b: string) {
  return '';
 }

-/**
- * Selects the last starting template in a string
- */
-export function selectFromLastTemplate(text: string) {
-  const lastBraceIndex = text.lastIndexOf('{{');
-  if (lastBraceIndex !== -1) {
-    return text.slice(lastBraceIndex);
+function getActiveTemplateRange(text: string, cursorIndex = text.length) {
+  const textBeforeCursor = text.slice(0, cursorIndex);
+  const start = textBeforeCursor.lastIndexOf('{{');
+  if (start === -1) {
+    return null;
  }
-  return '';
+
+  const closeBeforeCursor = textBeforeCursor.lastIndexOf('}}');
+  if (closeBeforeCursor > start) {
+    return null;
+  }
+
+  const closeAfterStart = text.indexOf('}}', start);
+  const nextStartAfterCursor = text.indexOf('{{', cursorIndex);
+  const closesBeforeNextTemplate = nextStartAfterCursor === -1 || closeAfterStart < nextStartAfterCursor;
+  const end = closeAfterStart !== -1 && closesBeforeNextTemplate ? closeAfterStart + 2 : cursorIndex;
+
+  return {
+    end,
+    start,
+    template: text.slice(start, cursorIndex),
+  };
+}
+
+/**
+ * Selects the last unclosed starting template before the cursor.
+ */
+export function selectActiveTemplate(text: string, cursorIndex = text.length) {
+  return getActiveTemplateRange(text, cursorIndex)?.template ?? '';
+}
+
+/**
+ * Replaces the active template fragment before the cursor with the selected suggestion.
+ */
+export function completeTemplateAtCursor(
+  text: string,
+  suggestion: string,
+  cursorIndex = text.length,
+): TemplateCompletion {
+  const activeTemplateRange = getActiveTemplateRange(text, cursorIndex);
+  if (!activeTemplateRange) {
+    const value = text + matchRemaining(text, suggestion);
+    return { value, cursorIndex: value.length };
+  }
+
+  const value = `${text.slice(0, activeTemplateRange.start)}${suggestion}${text.slice(activeTemplateRange.end)}`;
+  return {
+    value,
+    cursorIndex: activeTemplateRange.start + suggestion.length,
+  };
 }
@@ -0,0 +1,72 @@
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { useCallback, useMemo, useState, type RefObject } from 'react';
+
+import { completeTemplateAtCursor, selectActiveTemplate } from './templateInput.utils';
+
+type TemplateElement = HTMLInputElement | HTMLTextAreaElement;
+
+function getCursorIndex(element: TemplateElement | null, fallback: string) {
+  return element?.selectionStart ?? fallback.length;
+}
+
+function focusCursor(element: TemplateElement | null, cursorIndex: number) {
+  requestAnimationFrame(() => {
+    element?.focus();
+    element?.setSelectionRange(cursorIndex, cursorIndex);
+  });
+}
+
+export function useTemplateAutocomplete<T extends TemplateElement>(
+  value: string,
+  autocompleteList: string[],
+  elementRef: RefObject<T | null>,
+  onValueChange: (value: string) => void,
+) {
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [cursor, setCursor] = useState(value.length);
+
+  const activeTemplate = selectActiveTemplate(value, cursor);
+  const suggestions = useMemo(() => {
+    if (!activeTemplate) {
+      return [];
+    }
+    return autocompleteList.filter((suggestion) => suggestion.startsWith(activeTemplate));
+  }, [activeTemplate, autocompleteList]);
+
+  const setCursorForValue = useCallback((nextValue: string, cursorIndex: number) => {
+    setCursor(cursorIndex);
+    setShowSuggestions(Boolean(selectActiveTemplate(nextValue, cursorIndex)));
+  }, []);
+
+  const updateCursor = useCallback(() => {
+    const cursorIndex = getCursorIndex(elementRef.current, value);
+    setCursorForValue(value, cursorIndex);
+  }, [elementRef, setCursorForValue, value]);
+
+  const handleValueChange = useCallback(
+    (nextValue: string, eventDetails: BaseAutocomplete.Root.ChangeEventDetails) => {
+      if (eventDetails.reason === 'item-press') {
+        eventDetails.cancel();
+        const completed = completeTemplateAtCursor(value, nextValue, cursor);
+        setCursorForValue(completed.value, completed.cursorIndex);
+        onValueChange(completed.value);
+        focusCursor(elementRef.current, completed.cursorIndex);
+        return;
+      }
+
+      const cursorIndex = getCursorIndex(elementRef.current, nextValue);
+      setCursorForValue(nextValue, cursorIndex);
+      onValueChange(nextValue);
+    },
+    [cursor, elementRef, onValueChange, setCursorForValue, value],
+  );
+
+  return {
+    handleValueChange,
+    open: showSuggestions && suggestions.length > 0,
+    setCursorForValue,
+    setShowSuggestions,
+    suggestions,
+    updateCursor,
+  };
+}
@@ -12,6 +12,7 @@ $viewer-opacity-disabled: 0.6;
 $timer-label-size: clamp(12px, 1.25vw, 20px);
 $base-font-size: clamp(15px, 1.5vw, 28px);
 $title-font-size: clamp(18px, 2.25vw, 42px);
+$large-font-size: clamp(40px, 4.5vw, 80px);
 $timer-value-size: clamp(24px, 2.5vw, 48px);
 $header-font-size: clamp(24px, 2.5vw, 48px);

@@ -32,6 +32,11 @@
    color: var(--label-color-override, $viewer-label-color);
  }

+  .title-card {
+    // overwrite the title-card bg color so they don't stack as it is transparent
+    background-color: transparent;
+  }
+
  /* =================== HEADER + EXTRAS ===================*/

  .project-header {
@@ -1,6 +1,5 @@
 import { MaybeNumber, OntimeEvent, Playback, TimerPhase } from 'ontime-types';

-import { enDash } from '../../common/utils/styleUtils';
 import { getPropertyValue } from '../common/viewUtils';

 /**
@@ -46,9 +45,9 @@ export function getCardData(
  }

  // if we are loaded, we show the upcoming event as next
-  const nowMain = getPropertyValue(eventNow, mainSource ?? 'title') || enDash;
+  const nowMain = getPropertyValue(eventNow, mainSource ?? 'title');
  const nowSecondary = getPropertyValue(eventNow, secondarySource);
-  const nextMain = getPropertyValue(eventNext, mainSource ?? 'title') || enDash;
+  const nextMain = getPropertyValue(eventNext, mainSource ?? 'title');
  const nextSecondary = getPropertyValue(eventNext, secondarySource);

  return {
@@ -65,10 +65,6 @@
  /* =================== TITLES ===================*/

  .event {
-    background-color: var(--card-background-color-override, $viewer-card-bg-color);
-    padding: $view-card-padding;
-    border-radius: $element-border-radius;
-
    &.now {
      grid-area: now;
    }
@@ -206,8 +206,24 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,

      {!hideCards && (
        <>
-          {showNow && <TitleCard className='event now' label='now' title={nowMain} secondary={nowSecondary} />}
-          {showNext && <TitleCard className='event next' label='next' title={nextMain} secondary={nextSecondary} />}
+          {showNow && (
+            <TitleCard
+              className='event now'
+              label='now'
+              title={nowMain}
+              secondary={nowSecondary}
+              colour={eventNow?.colour}
+            />
+          )}
+          {showNext && (
+            <TitleCard
+              className='event next'
+              label='next'
+              title={nextMain}
+              secondary={nextSecondary}
+              colour={eventNext?.colour}
+            />
+          )}
        </>
      )}
    </div>
@@ -163,5 +163,70 @@ describe('parseOutput', () => {
        secondarySource: 'secondary',
      });
    });
+
+    it('parses message-secondary with a text value', () => {
+      expect(
+        parseOutput({
+          type: 'ontime',
+          action: 'message-secondary',
+          text: 'hello',
+        }),
+      ).toMatchObject({
+        text: 'hello',
+      });
+      expect(
+        parseOutput({
+          type: 'ontime',
+          action: 'message-secondary',
+          secondarySource: undefined,
+          text: 'hello',
+        }),
+      ).toMatchObject({
+        text: 'hello',
+      });
+      expect(
+        parseOutput({
+          type: 'ontime',
+          action: 'message-secondary',
+          secondarySource: 'secondary',
+          text: 'hello',
+        }),
+      ).toMatchObject({
+        secondarySource: 'secondary',
+        text: 'hello',
+      });
+      // an empty text is treated as no change
+      expect(
+        parseOutput({
+          type: 'ontime',
+          action: 'message-secondary',
+          secondarySource: 'secondary',
+          text: '',
+        }),
+      ).toMatchObject({
+        secondarySource: 'secondary',
+        text: undefined,
+      });
+      // text can be set while clearing the secondary source
+      expect(
+        parseOutput({
+          type: 'ontime',
+          action: 'message-secondary',
+          secondarySource: null,
+          text: 'hello',
+        }),
+      ).toMatchObject({
+        secondarySource: null,
+        text: 'hello',
+      });
+      expect(() =>
+        parseOutput({
+          type: 'ontime',
+          action: 'message-secondary',
+          secondarySource: 'secondary',
+          text: 123,
+        }),
+      ).toThrow('Unexpected payload type:');
+    });
  });
 });
@@ -0,0 +1,113 @@
+import { runtimeStorePlaceholder } from 'ontime-types';
+
+import * as messageService from '../../../services/message-service/message.service.js';
+import { toOntimeAction } from '../clients/ontime.client.js';
+
+vi.mock('../../../services/message-service/message.service.js', () => ({
+  patch: vi.fn(),
+}));
+
+describe('toOntimeAction()', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('parses templates in primary message text', () => {
+    toOntimeAction(
+      {
+        type: 'ontime',
+        action: 'message-set',
+        text: 'Current: {{timer.current}}',
+        visible: true,
+      },
+      {
+        ...runtimeStorePlaceholder,
+        timer: {
+          ...runtimeStorePlaceholder.timer,
+          current: 42,
+        },
+      },
+    );
+
+    expect(messageService.patch).toHaveBeenCalledWith({
+      timer: {
+        text: 'Current: 42',
+        visible: true,
+      },
+    });
+  });
+
+  it('parses templates in secondary message text', () => {
+    toOntimeAction(
+      {
+        type: 'ontime',
+        action: 'message-secondary',
+        secondarySource: 'secondary',
+        text: 'Next: {{eventNext.title}}',
+      },
+      {
+        ...runtimeStorePlaceholder,
+        eventNext: {
+          id: 'next-event',
+          type: 'event',
+          cue: '2',
+          title: 'Keynote',
+          note: '',
+          timeStart: 0,
+          timeEnd: 0,
+          duration: 0,
+          timerType: 'count-down',
+          colour: '',
+          delay: 0,
+          isPublic: true,
+          skip: false,
+          endAction: 'none',
+          revision: 0,
+          custom: {},
+        },
+      },
+    );
+
+    expect(messageService.patch).toHaveBeenCalledWith({
+      timer: {
+        secondarySource: 'secondary',
+      },
+      secondary: 'Next: Keynote',
+    });
+  });
+
+  it('can set secondary message text without changing the secondary source', () => {
+    toOntimeAction(
+      {
+        type: 'ontime',
+        action: 'message-secondary',
+        text: 'Next: {{eventNext.title}}',
+      },
+      {
+        ...runtimeStorePlaceholder,
+        eventNext: {
+          id: 'next-event',
+          type: 'event',
+          cue: '2',
+          title: 'Keynote',
+          note: '',
+          timeStart: 0,
+          timeEnd: 0,
+          duration: 0,
+          timerType: 'count-down',
+          colour: '',
+          delay: 0,
+          isPublic: true,
+          skip: false,
+          endAction: 'none',
+          revision: 0,
+          custom: {},
+        },
+      },
+    );
+
+    expect(messageService.patch).toHaveBeenCalledWith({
+      secondary: 'Next: Keynote',
+    });
+  });
+});
@@ -132,7 +132,7 @@ function send(output: AutomationOutput[], store: RuntimeStore) {
    } else if (isHTTPOutput(payload)) {
      emitHTTP(payload, store);
    } else if (isOntimeAction(payload)) {
-      toOntimeAction(payload);
+      toOntimeAction(payload, store);
    } else {
      logger.warning(LogOrigin.Tx, `Unknown output type: ${payload}`);
    }
@@ -225,13 +225,28 @@ function parseOntimeAction(maybeOntimeAction: object): OntimeAction {
  }

  if (maybeOntimeAction.action === 'message-secondary') {
-    assert.hasKeys(maybeOntimeAction, ['secondarySource']);
+    // the secondary text is optional, an empty string is treated as no change
+    let text: string | undefined = undefined;
+    if ('text' in maybeOntimeAction) {
+      assert.isString(maybeOntimeAction.text);
+      text = indeterminateText(maybeOntimeAction.text);
+    }
+
+    if (!('secondarySource' in maybeOntimeAction) || maybeOntimeAction.secondarySource === undefined) {
+      return {
+        type: 'ontime',
+        action: 'message-secondary',
+        text,
+      };
+    }
+
    // null is used to clear the secondary source
    if (maybeOntimeAction.secondarySource === null) {
      return {
        type: 'ontime',
        action: 'message-secondary',
        secondarySource: null,
+        text,
      };
    }

@@ -240,6 +255,7 @@ function parseOntimeAction(maybeOntimeAction: object): OntimeAction {
      type: 'ontime',
      action: 'message-secondary',
      secondarySource: chooseSecondarySource(maybeOntimeAction.secondarySource),
+      text,
    };
  }

@@ -1,12 +1,14 @@
-import { LogOrigin, OntimeAction } from 'ontime-types';
+import { LogOrigin, OntimeAction, RuntimeStore } from 'ontime-types';
 import { parseUserTime } from 'ontime-utils';
+import { DeepReadonly } from 'ts-essentials';

 import { logger } from '../../../classes/Logger.js';
 import { auxTimerService } from '../../../services/aux-timer-service/AuxTimerService.js';
 import * as messageService from '../../../services/message-service/message.service.js';
 import { runtimeService } from '../../../services/runtime-service/runtime.service.js';
+import { parseTemplateNested } from '../automation.utils.js';

-export function toOntimeAction(action: OntimeAction) {
+export function toOntimeAction(action: OntimeAction, store: DeepReadonly<RuntimeStore>) {
  const actionType = action.action;
  switch (actionType) {
    // Aux timer actions
@@ -55,18 +57,25 @@ export function toOntimeAction(action: OntimeAction) {
    case 'message-set': {
      messageService.patch({
        timer: {
-          text: action.text,
+          text: action.text ? parseTemplateNested(action.text, store) : action.text,
          visible: action.visible,
        },
      });
      break;
    }
    case 'message-secondary': {
-      messageService.patch({
-        timer: {
-          secondarySource: action.secondarySource,
-        },
-      });
+      const secondary = action.text ? parseTemplateNested(action.text, store) : action.text;
+      const patch =
+        action.secondarySource === undefined
+          ? { secondary }
+          : {
+              timer: {
+                secondarySource: action.secondarySource,
+              },
+              secondary,
+            };
+
+      messageService.patch(patch);
      break;
    }

@@ -111,9 +111,9 @@ export type OntimeAction =
      text?: string;
      visible?: boolean;
    }
-  // TODO: when setting a secondary source of type secondary we could specify a value to it
  | {
      type: 'ontime';
      action: OntimeMessageSecondary;
-      secondarySource: SecondarySource;
+      secondarySource?: SecondarySource;
+      text?: string;
    };
Author	SHA1	Message	Date
arc-alex	905db382cd	refactor: titlecard component	2026-07-17 19:37:42 +02:00
Carlos Valente	c191786e50	refactor(navigation): clear params from editor drawer	2026-07-17 15:50:42 +02:00
Carlos Valente	6911e37c18	refactor(automation): improve automation UX	2026-07-17 10:53:45 +02:00
Claude	86b2132cdc	feat(automation): expose group title and allow setting secondary text Surface {{groupNow.*}} template variables (title, note, colour, times, custom fields) in the automation template autocomplete so events inside a group can reference their group. The runtime store already carries groupNow, so substitution and filters worked already; this makes it discoverable. Extend the message-secondary action with an optional text field so an automation can set the secondary message content, not just its source. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LZYPZVdZLWowU7DyzGkWyy	2026-07-17 10:53:45 +02:00
Carlos Valente	25f0dba83a	chore: add codegraph to gitignore	2026-07-16 10:46:10 +02:00