feat(network): add session status card

Display server health metrics from the unused /session endpoint: - Connected clients count (live from useClientStore) - Server uptime since last restart - Last client connection time (relative) - Last integration request time (relative) - Server timezone - Cloud latency (Docker only) with warning threshold Adds useSessionStats hook with 60s refetch interval, new NetworkStatus component as first card in Network panel, and navigation menu entries for Server status and Network interfaces sections. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NrhcEgY8mqaxZi8veMPrrx
feat(log): add filters to the event log and cap the log store
2026-08-17 21:24:11 +00:00 · 2026-08-01 18:28:15 +00:00 · 2026-08-01 13:20:46 +00:00 · 2026-08-01 13:18:52 +00:00 · 2026-08-01 13:15:43 +00:00
61 changed files with 913 additions and 806 deletions
@@ -15,6 +15,7 @@ export const RUNDOWN = ['rundown'];
 export const CURRENT_RUNDOWN_QUERY_KEY = ['rundown', 'current'];
 export const getRundownQueryKey = (rundownId: string) => ['rundown', rundownId];
 export const RUNTIME = ['runtimeStore'];
+export const SESSION_STATS = ['sessionStats'];
 export const URL_PRESETS = ['urlpresets'];
 export const VIEW_SETTINGS = ['viewSettings'];
 export const CSS_OVERRIDE = ['cssOverride'];
@@ -1,11 +1,19 @@
 import axios from 'axios';
-import { GetInfo, LinkOptions } from 'ontime-types';
+import { GetInfo, LinkOptions, SessionStats } from 'ontime-types';

 import { apiEntryUrl } from './constants';
 import type { RequestOptions } from './requestOptions';

 const sessionPath = `${apiEntryUrl}/session`;

+/**
+ * HTTP request to retrieve statistics of the running session
+ */
+export async function getSessionStats(options?: RequestOptions): Promise<SessionStats> {
+  const res = await axios.get(sessionPath, { signal: options?.signal });
+  return res.data;
+}
+
 /**
 * HTTP request to retrieve application info
 */
@@ -13,6 +13,9 @@ import Select from '../select/Select';

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

+/** the first navigator view, used as the initial value of the view select */
+const defaultView = `/${navigatorConstants[0].url}`;
+
 interface RedirectClientModalProps {
  id: string;
  name: string;
@@ -25,7 +28,7 @@ interface RedirectClientModalProps {
 export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onClose }: RedirectClientModalProps) {
  const { data } = useUrlPresets();
  const [path, setPath] = useState(currentPath);
-  const [selected, setSelected] = useState('/');
+  const [selected, setSelected] = useState(defaultView);

  const { setRedirect } = setClientRemote;

@@ -97,19 +100,18 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
                <Select
                  fluid
                  options={viewOptions}
-                  defaultValue={viewOptions[0].value}
+                  defaultValue={defaultView}
                  onValueChange={(value) => {
                    if (value === null) return;
                    setSelected(value);
                  }}
-                  disabled={enabledPresets.length === 0}
                />
              </label>
              <Button
                variant='primary'
                aria-label='Redirect to preset'
                className={style.redirect}
-                disabled={enabledPresets.length === 0 || selected === '/'}
+                disabled={selected === currentPath}
                onClick={() => handleRedirect(selected)}
              >
                Redirect <IoArrowForward />
@@ -2,6 +2,7 @@ import { useState } from 'react';

 import Button from '../../../common/components/buttons/Button';
 import { setClientRemote } from '../../hooks/useSocket';
+import { isKeyEnter } from '../../utils/keyEvent';
 import Dialog from '../dialog/Dialog';
 import Input from '../input/input/Input';

@@ -33,7 +34,18 @@ export function RenameClientModal({ id, name: currentName = '', isOpen, onClose
      showCloseButton
      onClose={onClose}
      bodyElements={
-        <Input height='large' placeholder='New name' value={name} onChange={(event) => setName(event.target.value)} />
+        <Input
+          height='large'
+          placeholder='New name'
+          autoFocus
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+          onKeyDown={(event) => {
+            if (isKeyEnter(event) && canSubmit) {
+              handleRename();
+            }
+          }}
+        />
      }
      footerElements={
        <>
@@ -1,15 +1,15 @@
 import { PropsWithChildren, createContext, useContext } from 'react';

-import { useEntryActions, useScopedEntryActions } from '../hooks/useEntryAction';
-import { useRundownSelectionContext } from './RundownSelectionContext';
+import { useEntryActions } from '../hooks/useEntryAction';

 type EntryActionsContextValue = ReturnType<typeof useEntryActions>;
 const EntryActionsContext = createContext<EntryActionsContextValue | null>(null);

-export function EntryActionsProvider({ children }: PropsWithChildren) {
-  const { effectiveRundownId } = useRundownSelectionContext();
-  const actions = useScopedEntryActions(effectiveRundownId);
+interface EntryActionsProviderProps extends PropsWithChildren {
+  actions: EntryActionsContextValue;
+}

+export function EntryActionsProvider({ children, actions }: EntryActionsProviderProps) {
  return <EntryActionsContext.Provider value={actions}>{children}</EntryActionsContext.Provider>;
 }

@@ -1,120 +0,0 @@
-import { Maybe, ProjectRundown } from 'ontime-types';
-import { PropsWithChildren, createContext, startTransition, useCallback, useContext, useEffect, useMemo } from 'react';
-import { useSearchParams } from 'react-router';
-import { useNavigate } from 'react-router';
-
-import { useProjectRundowns } from '../hooks-query/useProjectRundowns';
-
-export type RundownScopeValue = {
-  loadedRundownId: string;
-  selectedRundownId: Maybe<string>;
-  isLoadedRundown: boolean;
-  effectiveRundownId: string;
-  selectRundownId: (val: Maybe<string>) => void;
-  rundowns: ProjectRundown[];
-};
-
-const RundownScopeContext = createContext<RundownScopeValue | null>(null);
-
-export function RundownSelectionContextProvider({ children }: PropsWithChildren) {
-  'use memo';
-  const { data } = useProjectRundowns();
-  const { loaded, rundowns } = data;
-
-  const [selectedRundownId, setSelectedRundownId] = useSelectRundownFromParams();
-
-  const selectRundownId = useCallback(
-    (rundownId: Maybe<string>) => {
-      startTransition(() => {
-        if (rundowns.find((entry) => entry.id === rundownId)) setSelectedRundownId(rundownId);
-        else setSelectedRundownId(null);
-      });
-    },
-    [rundowns, setSelectedRundownId],
-  );
-
-  const effectiveRundownId = selectedRundownId ? selectedRundownId : loaded;
-  const isLoadedRundown = effectiveRundownId === loaded;
-
-  useEffect(() => {
-    if (!rundowns.find((entry) => entry.id === effectiveRundownId)) setSelectedRundownId(null);
-  }, [rundowns, effectiveRundownId, setSelectedRundownId]);
-
-  const value = useMemo(
-    (): RundownScopeValue => ({
-      loadedRundownId: loaded,
-      isLoadedRundown,
-      selectedRundownId,
-      effectiveRundownId,
-      selectRundownId,
-      rundowns,
-    }),
-    [loaded, isLoadedRundown, selectedRundownId, effectiveRundownId, selectRundownId, rundowns],
-  );
-
-  return <RundownScopeContext.Provider value={value}>{children}</RundownScopeContext.Provider>;
-}
-
-export function useRundownSelectionContext() {
-  const context = useContext(RundownScopeContext);
-
-  if (!context) {
-    throw new Error('useRundownScopeSelection requires a RundownSelectionContextProvider');
-  }
-
-  return context;
-}
-
-const rundownParam = 'rundownId';
-
-export function useSelectRundownFromParams(): [Maybe<string>, (id: Maybe<string>) => void] {
-  'use memo';
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const selectedRundownId = searchParams.get(rundownParam);
-  const setSelectedRundownId = useCallback(
-    (id: Maybe<string>) => {
-      if (id === null) {
-        setSearchParams((searchParams) => {
-          searchParams.delete(rundownParam);
-          return searchParams;
-        });
-      } else {
-        setSearchParams((searchParams) => {
-          searchParams.set(rundownParam, id);
-          return searchParams;
-        });
-      }
-    },
-    [setSearchParams],
-  );
-
-  return [selectedRundownId, setSelectedRundownId];
-}
-
-/**
- *
- * mutates the provided `searchParams`
- */
-export function setSelectRundownInParams(id: Maybe<string>, searchParams: URLSearchParams): void {
-  if (id === null) {
-    searchParams.delete(rundownParam);
-  } else {
-    searchParams.set(rundownParam, id);
-  }
-}
-
-export function useDirectLinkToBackgroundEdit() {
-  const navigate = useNavigate();
-  const [search] = useSearchParams();
-  return useCallback(
-    async (rundownId: string) => {
-      setSelectRundownInParams(rundownId, search);
-      navigate({
-        pathname: '/cuesheet',
-        search: search.toString(),
-      });
-    },
-    [navigate, search],
-  );
-}
@@ -1,101 +0,0 @@
-import { isOntimeEvent, OntimeEvent } from 'ontime-types';
-import { useMemo } from 'react';
-
-import { useRundownSelectionContext } from '../context/RundownSelectionContext';
-import { useSelectedEventId } from '../hooks/useSocket';
-import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
-import { useFlatRundown, useRundown } from './useRundown';
-
-export function useContextRundownEditModal() {
-  'use memo';
-  const { effectiveRundownId } = useRundownSelectionContext();
-  const { data: rundown } = useRundown(effectiveRundownId);
-  return { rundown };
-}
-
-export function useContextRundownCueRenumberModal() {
-  'use memo';
-  const { effectiveRundownId } = useRundownSelectionContext();
-  const { data } = useRundown(effectiveRundownId);
-  const { flatOrder } = data;
-  return { flatOrder };
-}
-
-export function useContextRundownList() {
-  'use memo';
-  const { effectiveRundownId, isLoadedRundown } = useRundownSelectionContext();
-  const loadedEventId = useSelectedEventId();
-  const effectiveSelectedEventId = isLoadedRundown ? loadedEventId : null;
-  const { data: rundown, status } = useRundown(effectiveRundownId);
-  const rundownMetadata = useMemo(
-    () => getRundownMetadata(rundown, effectiveSelectedEventId),
-    [effectiveSelectedEventId, rundown],
-  );
-
-  return useMemo(
-    () => ({
-      rundown,
-      rundownMetadata,
-      status,
-      isLoadedRundown,
-    }),
-    [rundown, rundownMetadata, status, isLoadedRundown],
-  );
-}
-
-export function useContextRundownTitleList() {
-  'use memo';
-  const { effectiveRundownId, isLoadedRundown } = useRundownSelectionContext();
-  const loadedEventId = useSelectedEventId();
-  const effectiveSelectedEventId = isLoadedRundown ? loadedEventId : null;
-  const { data: rundown, status } = useRundown(effectiveRundownId);
-  const flatRundown = useMemo(() => {
-    const flatData = getFlatRundownMetadata(rundown, effectiveSelectedEventId);
-    return flatData.filter(isOntimeEvent) as ExtendedEntry<OntimeEvent>[];
-  }, [effectiveSelectedEventId, rundown]);
-
-  return useMemo(
-    () => ({
-      flatRundown,
-      status,
-      isLoadedRundown,
-    }),
-    [status, isLoadedRundown, flatRundown],
-  );
-}
-
-export function useContextRundownTable() {
-  'use memo';
-  const { effectiveRundownId, isLoadedRundown } = useRundownSelectionContext();
-  const loadedEventId = useSelectedEventId();
-  const effectiveSelectedEventId = isLoadedRundown ? loadedEventId : null;
-  const { data: rundown, status } = useRundown(effectiveRundownId);
-  const flatRundown = useMemo(
-    () => getFlatRundownMetadata(rundown, effectiveSelectedEventId),
-    [effectiveSelectedEventId, rundown],
-  );
-
-  return useMemo(
-    () => ({
-      flatRundown,
-      status,
-      loadedEventId,
-    }),
-    [flatRundown, status, loadedEventId],
-  );
-}
-
-export function useContextRundownFinder() {
-  'use memo';
-  const { effectiveRundownId } = useRundownSelectionContext();
-  const { data: rundown, status } = useFlatRundown(effectiveRundownId);
-
-  return useMemo(
-    () => ({
-      rundown,
-      rundownId: effectiveRundownId,
-      status,
-    }),
-    [rundown, status, effectiveRundownId],
-  );
-}
@@ -1,18 +1,24 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
-import { ProjectFile, ProjectFileList } from 'ontime-types';
-import { MILLIS_PER_HOUR } from 'ontime-utils';
+import { useQuery } from '@tanstack/react-query';
+import { ProjectFile, ProjectFileList, ProjectFileListResponse } from 'ontime-types';
 import { useMemo } from 'react';

+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { PROJECT_LIST } from '../api/constants';
 import { getProjects } from '../api/db';

-export function useProjectList() {
-  const { data, status, refetch } = useSuspenseQuery({
+const placeholderProjectList: ProjectFileListResponse = {
+  files: [],
+  lastLoadedProject: '',
+};
+
+function useProjectList() {
+  const { data, status, refetch } = useQuery({
    queryKey: PROJECT_LIST,
    queryFn: ({ signal }) => getProjects({ signal }),
-    staleTime: MILLIS_PER_HOUR,
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
  });
-  return { data, status, refetch };
+  return { data: data ?? placeholderProjectList, status, refetch };
 }

 export type ProjectSortMode = 'alphabetical-asc' | 'alphabetical-desc' | 'modified-asc' | 'modified-desc';
@@ -1,7 +1,7 @@
-import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { ProjectRundownsList } from 'ontime-types';
-import { MILLIS_PER_HOUR } from 'ontime-utils';

+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { PROJECT_RUNDOWNS } from '../api/constants';
 import {
  createRundown,
@@ -11,21 +11,24 @@ import {
  loadRundown,
  renameRundown,
 } from '../api/rundown';
-import { ontimeQueryClient } from '../queryClient';

+//TODO: make suspends so we don't have to deal with no value all over
 /**
 * Project rundowns
 */
 export function useProjectRundowns() {
-  const { data, status, isError, refetch, isFetching } = useSuspenseQuery<ProjectRundownsList>({
+  const { data, status, isError, refetch, isFetching } = useQuery<ProjectRundownsList>({
    queryKey: PROJECT_RUNDOWNS,
    queryFn: ({ signal }) => fetchProjectRundownList({ signal }),
-    staleTime: MILLIS_PER_HOUR,
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
  });
-  return { data, status, isError, refetch, isFetching };
+  return { data: data ?? { loaded: '', rundowns: [] }, status, isError, refetch, isFetching };
 }

 export function useMutateProjectRundowns() {
+  const ontimeQueryClient = useQueryClient();
+
  const { mutateAsync: create } = useMutation({
    mutationFn: createRundown,
    onMutate: () => {
@@ -1,10 +1,10 @@
-import { useQuery } from '@tanstack/react-query';
-import { EntryId, Maybe, OntimeEntry, Rundown } from 'ontime-types';
-import { useMemo } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { EntryId, OntimeEntry, Rundown } from 'ontime-types';
+import { useEffect, useMemo } from 'react';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { getRundownQueryKey } from '../api/constants';
-import { fetchRundown } from '../api/rundown';
+import { CURRENT_RUNDOWN_QUERY_KEY, getRundownQueryKey } from '../api/constants';
+import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
 import { useSelectedEventId } from '../hooks/useSocket';
 import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
 import { useProjectRundowns } from './useProjectRundowns';
@@ -20,36 +20,43 @@ const cachedRundownPlaceholder: Rundown = {
 };

 /**
- * Provides access to a specific rundown by ID.
- * When rundownId is not provided the loaded rundown is provided
+ * Normalised rundown data for the currently loaded rundown.
+ *
+ * Bootstraps via the `/current` alias so the first paint is a single round-trip,
+ * independent of the project rundown list. Once the loaded id is known, the
+ * query key swaps to the id-keyed cache that is shared with `useRundownById`.
 */
-export function useRundown(rundownId: Maybe<string>) {
-  'use memo';
-
+export default function useRundown() {
+  const queryClient = useQueryClient();
  const {
    data: { loaded: loadedRundownId },
  } = useProjectRundowns();

-  const effectiveRundownId = rundownId !== null ? rundownId : loadedRundownId;
-  const isLoadedRundown = effectiveRundownId === loadedRundownId;
-
  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
-    queryKey: getRundownQueryKey(effectiveRundownId),
-    queryFn: ({ signal }) => fetchRundown(effectiveRundownId, { signal }),
-    placeholderData: (previousData, _previousQuery) => previousData,
+    queryKey: loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY,
+    queryFn: ({ signal }) => fetchCurrentRundown({ signal }),
    refetchInterval: queryRefetchIntervalSlow,
  });

-  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching, isLoadedRundown };
+  // Seed the id-keyed cache when fetching via the bootstrap alias
+  useEffect(() => {
+    if (!data || loadedRundownId) return;
+    queryClient.setQueryData(getRundownQueryKey(data.id), data);
+  }, [data, loadedRundownId, queryClient]);
+
+  // Once we have the ID, drop the temporary current cache
+  useEffect(() => {
+    if (!loadedRundownId) return;
+    queryClient.removeQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
+  }, [loadedRundownId, queryClient]);
+
+  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
 }

-export function useRundownWithMetadata(rundownId: Maybe<string>) {
-  'use memo';
-
-  const { data, status, isLoadedRundown } = useRundown(rundownId);
+export function useRundownWithMetadata() {
+  const { data, status } = useRundown();
  const selectedEventId = useSelectedEventId();
-  const effectiveSelectedEventId = isLoadedRundown ? selectedEventId : null;
-  const rundownMetadata = getRundownMetadata(data, effectiveSelectedEventId);
+  const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
  return { data, status, rundownMetadata };
 }

@@ -57,8 +64,8 @@ export function useRundownWithMetadata(rundownId: Maybe<string>) {
 * Provides access to a flat rundown
 * built from the order and rundown fields
 */
-export function useFlatRundown(rundownId: Maybe<string>) {
-  const { data, status } = useRundown(rundownId);
+export function useFlatRundown() {
+  const { data, status } = useRundown();

  const flatRundown = useMemo(() => {
    if (data.revision === -1) {
@@ -70,13 +77,11 @@ export function useFlatRundown(rundownId: Maybe<string>) {
  return { data: flatRundown, rundownId: data.id, status };
 }

-export function useFlatRundownWithMetadata(rundownId: Maybe<string>) {
-  'use memo';
-
-  const { data, status, isLoadedRundown } = useRundown(rundownId);
+export function useFlatRundownWithMetadata() {
+  const { data, status } = useRundown();
  const selectedEventId = useSelectedEventId();
-  const effectiveSelectedEventId = isLoadedRundown ? selectedEventId : null;
-  const rundownWithMetadata = getFlatRundownMetadata(data, effectiveSelectedEventId);
+
+  const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
  return { data: rundownWithMetadata, status };
 }

@@ -87,8 +92,8 @@ export function useFlatRundownWithMetadata(rundownId: Maybe<string>) {
 * re-filtering on every render.
 *
 */
-export function usePartialRundown(rundownId: Maybe<string>, cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
-  const { data, status } = useFlatRundownWithMetadata(rundownId);
+export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
+  const { data, status } = useFlatRundownWithMetadata();
  const filteredData = useMemo(() => {
    return data.filter(cb);
  }, [data, cb]);
@@ -98,20 +103,37 @@ export function usePartialRundown(rundownId: Maybe<string>, cb: (event: Extended

 /**
 * Hook to get a specific entry by ID from the rundown
- * @deprecated
 */
-export function useEntry(rundownId: Maybe<string>, entryId: EntryId | null): OntimeEntry | null {
-  const { data: rundown } = useRundown(rundownId);
+export function useEntry(entryId: EntryId | null): OntimeEntry | null {
+  const { data: rundown } = useRundown();

  if (entryId === null) return null;
  return rundown.entries[entryId] ?? null;
 }

-export function useRundownAuxData(rundownId: Maybe<string>) {
-  const { data, status } = useRundown(rundownId);
+export function useRundownAuxData() {
+  const { data, status } = useRundown();
  const filteredData = useMemo(() => {
    const { title, id } = data;
    return { title, id };
  }, [data]);
  return { data: filteredData, status };
 }
+
+/**
+ * Provides access to a specific rundown by ID.
+ * When rundownId is null/undefined the query is disabled and returns the placeholder.
+ */
+export function useRundownById(rundownId: string | null | undefined) {
+  const enabled = Boolean(rundownId);
+
+  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+    queryKey: getRundownQueryKey(rundownId ?? ''),
+    queryFn: ({ signal }) => fetchRundown(rundownId!, { signal }),
+    enabled,
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
+}
@@ -0,0 +1,54 @@
+import { EntryId, Rundown } from 'ontime-types';
+import { useMemo } from 'react';
+
+import { useSelectedEventId } from '../hooks/useSocket';
+import { getFlatRundownMetadata, type ExtendedEntry } from '../utils/rundownMetadata';
+import { useProjectRundowns } from './useProjectRundowns';
+import { useRundownById } from './useRundown';
+
+export type RundownSource = {
+  rundownId: string | null;
+  rundown: Rundown;
+  flatRundown: ExtendedEntry[];
+  status: string;
+  selectedEventId: EntryId | null;
+};
+
+/**
+ * Explicitly scoped rundown data for views that may operate on a non-loaded rundown.
+ */
+export function useScopedRundown(rundownId: string | null): RundownSource {
+  const { data: projectRundowns } = useProjectRundowns();
+  return useRundownSource(rundownId, projectRundowns.loaded || null);
+}
+
+/**
+ * Loaded-rundown source for views that must follow the active runtime rundown.
+ */
+export function useLoadedRundownSource(): RundownSource {
+  const { data: projectRundowns } = useProjectRundowns();
+  const loadedRundownId = projectRundowns.loaded || null;
+  return useRundownSource(loadedRundownId, loadedRundownId);
+}
+
+function useRundownSource(rundownId: string | null, loadedRundownId: string | null): RundownSource {
+  const isLoadedTarget = rundownId !== null && rundownId === loadedRundownId;
+  const runtimeSelectedEventId = useSelectedEventId();
+  const effectiveSelectedEventId = isLoadedTarget ? runtimeSelectedEventId : null;
+  const { data: rundown, status } = useRundownById(rundownId);
+  const flatRundown = useMemo(
+    () => getFlatRundownMetadata(rundown, effectiveSelectedEventId),
+    [effectiveSelectedEventId, rundown],
+  );
+
+  return useMemo(
+    () => ({
+      rundownId,
+      rundown,
+      flatRundown,
+      status,
+      selectedEventId: effectiveSelectedEventId,
+    }),
+    [effectiveSelectedEventId, flatRundown, rundown, rundownId, status],
+  );
+}
@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { SessionStats } from 'ontime-types';
+
+import { queryRefetchInterval } from '../../ontimeConfig';
+import { SESSION_STATS } from '../api/constants';
+import { getSessionStats } from '../api/session';
+
+export default function useSessionStats() {
+  const { data, status, isError, refetch } = useQuery<SessionStats>({
+    queryKey: SESSION_STATS,
+    queryFn: ({ signal }) => getSessionStats({ signal }),
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchInterval,
+  });
+
+  return { data, status, isError, refetch };
+}
@@ -15,11 +15,14 @@ const logger = createStore<LogStore>(() => ({
  logs: [],
 }));

+/** the log is kept in memory, we cap it to avoid it growing through a long show */
+const maxLogEntries = 500;
+
 export const useLogData = () => useStore(logger);

 export const addLog = (log: Log) =>
  logger.setState((state) => ({
-    logs: [log, ...state.logs],
+    logs: [log, ...state.logs].slice(0, maxLogEntries),
  }));

 export const clearLogs = () => logger.setState({ logs: [] });
@@ -90,7 +90,6 @@ describe('initRundownMetadata()', () => {
      eventIndex: 0,
      isPast: true,
      isNextDay: false,
-      isParentToLoaded: false,
      totalGap: 0,
      isLinkedToLoaded: false,
      isLoaded: false,
@@ -108,7 +107,6 @@ describe('initRundownMetadata()', () => {
      eventIndex: 1, // UI indexes are 1 based
      isPast: true,
      isNextDay: false,
-      isParentToLoaded: false,
      totalGap: 0,
      isLinkedToLoaded: false,
      isLoaded: false,
@@ -126,7 +124,6 @@ describe('initRundownMetadata()', () => {
      eventIndex: 1,
      isPast: true,
      isNextDay: false,
-      isParentToLoaded: true,
      totalGap: 0,
      isLinkedToLoaded: false,
      isLoaded: false,
@@ -143,7 +140,6 @@ describe('initRundownMetadata()', () => {
      eventIndex: 2,
      isPast: true,
      isNextDay: false,
-      isParentToLoaded: false,
      totalGap: 0,
      isLinkedToLoaded: false,
      isLoaded: false,
@@ -160,7 +156,6 @@ describe('initRundownMetadata()', () => {
      eventIndex: 2,
      isPast: true,
      isNextDay: false,
-      isParentToLoaded: false,
      totalGap: 0,
      isLinkedToLoaded: false,
      isLoaded: false,
@@ -177,7 +172,6 @@ describe('initRundownMetadata()', () => {
      eventIndex: 3,
      isPast: false,
      isNextDay: false,
-      isParentToLoaded: false,
      totalGap: 0,
      isLinkedToLoaded: true,
      isLoaded: true,
@@ -194,7 +188,6 @@ describe('initRundownMetadata()', () => {
      eventIndex: 4,
      isPast: false,
      isNextDay: false,
-      isParentToLoaded: false,
      totalGap: 0,
      isLinkedToLoaded: true,
      isLoaded: false,
@@ -211,7 +204,6 @@ describe('initRundownMetadata()', () => {
      eventIndex: 5,
      isPast: false,
      isNextDay: false,
-      isParentToLoaded: false,
      totalGap: 7,
      isLinkedToLoaded: false,
      isLoaded: false,
@@ -264,7 +256,6 @@ describe('initRundownMetadata()', () => {
      eventIndex: 0,
      isPast: false,
      isNextDay: false,
-      isParentToLoaded: false,
      totalGap: 0,
      isLinkedToLoaded: false,
      isLoaded: false,
@@ -282,7 +273,6 @@ describe('initRundownMetadata()', () => {
      eventIndex: 1,
      isPast: false,
      isNextDay: false,
-      isParentToLoaded: false,
      totalGap: 0,
      isLinkedToLoaded: false,
      isLoaded: false,
@@ -300,7 +290,6 @@ describe('initRundownMetadata()', () => {
      eventIndex: 2,
      isPast: false,
      isNextDay: false,
-      isParentToLoaded: false,
      totalGap: 0,
      isLinkedToLoaded: false,
      isLoaded: false,
@@ -27,7 +27,6 @@ export type RundownMetadata = {
  groupColour: string | undefined;
  groupEntries: number | undefined;
  isFirstAfterGroup: boolean;
-  isParentToLoaded: boolean; // if the group contains the loaded event
 };

 export type ExtendedEntry<T extends OntimeEntry = OntimeEntry> = T & RundownMetadata;
@@ -95,7 +94,6 @@ export function initRundownMetadata(selectedEventId: MaybeString) {
    groupColour: undefined,
    groupEntries: undefined,
    isFirstAfterGroup: false,
-    isParentToLoaded: false,
  };

  function process(entry: OntimeEntry): Readonly<RundownMetadata> {
@@ -119,7 +117,6 @@ function processEntry(
  // initialise data to be overridden below
  processedData.isNextDay = false;
  processedData.isLoaded = false;
-  processedData.isParentToLoaded = false;

  processedData.previousEntryId = processedData.thisId; // thisId comes from the previous iteration
  processedData.thisId = entry.id; // we reassign thisId
@@ -135,7 +132,6 @@ function processEntry(
    processedData.groupId = entry.id;
    processedData.groupColour = entry.colour;
    processedData.groupEntries = entry.entries.length;
-    processedData.isParentToLoaded = selectedEventId ? entry.entries.includes(selectedEventId) : false;
  } else {
    // for delays and groups, we insert the group metadata
    if ((entry as OntimeEvent | OntimeDelay | OntimeMilestone).parent !== processedData.groupId) {
@@ -14,6 +14,7 @@ import {
  APP_SETTINGS,
  CLIENT_LIST,
  CSS_OVERRIDE,
+  CURRENT_RUNDOWN_QUERY_KEY,
  CUSTOM_FIELDS,
  PROJECT_DATA,
  REPORT,
@@ -24,7 +25,6 @@ import {
  VIEW_SETTINGS,
  getRundownQueryKey,
  PROJECT_RUNDOWNS,
-  PROJECT_LIST,
 } from '../api/constants';
 import { invalidateAllCaches } from '../api/utils';
 import { ontimeQueryClient } from '../queryClient';
@@ -216,9 +216,6 @@ export const connectSocket = () => {
            case RefetchKey.ProjectRundowns:
              ontimeQueryClient.invalidateQueries({ queryKey: PROJECT_RUNDOWNS });
              break;
-            case RefetchKey.ProjectFiles:
-              ontimeQueryClient.invalidateQueries({ queryKey: PROJECT_LIST });
-              break;
            default: {
              target satisfies never;
              break;
@@ -241,6 +238,7 @@ export function maybeInvalidateRundownCache(revision: MaybeNumber, rundownId?: s
  if (!rundownId) {
    // we omit rundownId to signify invalidate all rundowns
    ontimeQueryClient.invalidateQueries({ queryKey: RUNDOWN });
+    ontimeQueryClient.invalidateQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
    return;
  }

@@ -254,6 +252,12 @@ export function maybeInvalidateRundownCache(revision: MaybeNumber, rundownId?: s
  }

  ontimeQueryClient.invalidateQueries({ queryKey, exact: true });
+
+  // keep current alias in sync with the ID-based cache
+  const loadedRundownId = ontimeQueryClient.getQueryData<{ loaded: string }>(PROJECT_RUNDOWNS)?.loaded;
+  if (!loadedRundownId || loadedRundownId === rundownId) {
+    ontimeQueryClient.invalidateQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
+  }
 }

 export function sendSocket<T extends MessageTag | ApiActionTag>(
@@ -117,6 +117,10 @@ $inner-padding: 1rem;
  td[data-warn='true'] {
    background-color: $orange-1300;
  }
+
+  tr[data-highlight='true'] {
+    background-color: $blue-1100;
+  }
 }

 .listGroup {
@@ -5,7 +5,7 @@ import { deleteAllReport } from '../../../../common/api/report';
 import { createBlob, downloadBlob } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import useReport from '../../../../common/hooks-query/useReport';
-import { useRundown } from '../../../../common/hooks-query/useRundown';
+import useRundown from '../../../../common/hooks-query/useRundown';
 import { cx } from '../../../../common/utils/styleUtils';
 import { formatTime } from '../../../../common/utils/time';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -15,7 +15,7 @@ import style from './ReportSettings.module.scss';

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

  const clearReport = async () => await deleteAllReport();
  const downloadCSV = (combinedReport: CombinedReport[]) => {
@@ -1,5 +1,5 @@
 import { useDisclosure } from '@mantine/hooks';
-import { Suspense, useState } from 'react';
+import { useState } from 'react';
 import {
  IoAdd,
  IoDocumentOutline,
@@ -18,9 +18,9 @@ import IconButton from '../../../../common/components/buttons/IconButton';
 import Dialog from '../../../../common/components/dialog/Dialog';
 import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import Tag from '../../../../common/components/tag/Tag';
-import { useDirectLinkToBackgroundEdit } from '../../../../common/context/RundownSelectionContext';
 import { useMutateProjectRundowns, useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
 import { cx } from '../../../../common/utils/styleUtils';
+import { useDirectLinkToBackgroundEdit } from '../../../../views/cuesheet/useCuesheetRundownSelection';
 import * as Panel from '../../panel-utils/PanelUtils';
 import RundownRenameForm from './composite/RundownRenameForm';
 import { ManageRundownForm } from './ManageRundownForm';
@@ -28,20 +28,6 @@ import { ManageRundownForm } from './ManageRundownForm';
 import style from './ManagePanel.module.scss';

 export default function ManageRundowns() {
-  return (
-    <Suspense
-      fallback={
-        <div className={style.empty}>
-          <Panel.Loader isLoading />
-        </div>
-      }
-    >
-      <ManageRundownsSuspense />
-    </Suspense>
-  );
-}
-
-function ManageRundownsSuspense() {
  const { data } = useProjectRundowns();
  const { duplicate, remove, load, rename } = useMutateProjectRundowns();
  const [isOpenDelete, deleteHandlers] = useDisclosure();
@@ -24,7 +24,7 @@ import Button from '../../../../../common/components/buttons/Button';
 import Info from '../../../../../common/components/info/Info';
 import ExternalLink from '../../../../../common/components/link/external-link/ExternalLink';
 import Modal from '../../../../../common/components/modal/Modal';
-import { useRundown } from '../../../../../common/hooks-query/useRundown';
+import useRundown from '../../../../../common/hooks-query/useRundown';
 import { removeFileExtension, validateExcelImport } from '../../../../../common/utils/uploadUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 import GSheetSetup from './GSheetSetup';
@@ -59,7 +59,7 @@ export default function SourcesPanel() {
  const [activeSource, setActiveSource] = useState<ActiveSource | null>(null);
  const [completedRundownTitle, setCompletedRundownTitle] = useState('');

-  const { data: currentRundown } = useRundown(null);
+  const { data: currentRundown } = useRundown();
  const { applyImport } = useSpreadsheetImport();
  const navigate = useNavigate();

@@ -19,10 +19,12 @@ export default function InfoNif() {
        // interfaces outside localhost wont have access
        if (nif.name === 'localhost' && !isLocalhost) return null;
        const address = linkToOtherHost(nif.address);
+        // we show the address as it would be typed in a browser, including the port
+        const label = new URL(address).host;

        return (
-          <CopyTag key={nif.name} copyValue={address} onClick={() => handleClick(address)}>
-            {`${nif.name} - ${nif.address}`} <IoArrowUp className={style.goIcon} />
+          <CopyTag key={`${nif.name}-${nif.address}`} copyValue={address} onClick={() => handleClick(address)}>
+            {`${nif.name} - ${label}`} <IoArrowUp className={style.goIcon} />
          </CopyTag>
        );
      })}
@@ -19,10 +19,13 @@ export default function LogExport() {
        <Panel.SubHeader>
          Event log
          <Button onClick={extract}>
-            Extract <IoArrowUp className={style.iconRotate} />
+            Open in new window <IoArrowUp className={style.iconRotate} />
          </Button>
        </Panel.SubHeader>
        <Panel.Divider />
+        <Panel.Paragraph>
+          Activity in this session. The log is not saved with the project and is cleared when Ontime restarts.
+        </Panel.Paragraph>
        <Log />
      </Panel.Card>
    </Panel.Section>
@@ -1,26 +1,38 @@
-import { MessageTag } from 'ontime-types';
-import { useEffect } from 'react';
-
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
-import { usePing } from '../../../../common/hooks/useSocket';
-import { sendSocket } from '../../../../common/utils/socket';
-import { isDocker } from '../../../../externals';
+import { isOntimeCloud } from '../../../../externals';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';
 import ClientControlPanel from './client-control/ClientControlPanel';
+import InfoNif from './NetworkInterfaces';
 import LogExport from './NetworkLogExport';
+import NetworkStatus from './NetworkStatus';

 export default function NetworkLogPanel({ location }: PanelBaseProps) {
+  const statusRef = useScrollIntoView<HTMLDivElement>('status', location);
+  const interfacesRef = useScrollIntoView<HTMLDivElement>('interfaces', location);
  const clientsRef = useScrollIntoView<HTMLDivElement>('clients', location);
  const logRef = useScrollIntoView<HTMLDivElement>('log', location);

  return (
    <>
      <Panel.Header>Network</Panel.Header>
-      {isDocker && (
-        <Panel.Section>
-          <OntimeCloudStats />
-        </Panel.Section>
+      <div ref={statusRef}>
+        <NetworkStatus />
+      </div>
+      {!isOntimeCloud && (
+        <div ref={interfacesRef}>
+          <Panel.Section>
+            <Panel.Card>
+              <Panel.SubHeader>Network interfaces</Panel.SubHeader>
+              <Panel.Divider />
+              <Panel.Paragraph>
+                Addresses which can be used to reach Ontime from other devices in the network. <br />
+                Click an address to open it in a new window, or use the icon to copy it to the clipboard.
+              </Panel.Paragraph>
+              <InfoNif />
+            </Panel.Card>
+          </Panel.Section>
+        </div>
      )}
      <div ref={logRef}>
        <LogExport />
@@ -31,29 +43,3 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
    </>
  );
 }
-
-function OntimeCloudStats() {
-  const ping = usePing();
-
-  /**
-   * Send immediate ping request, and keep sending on an interval
-   */
-  useEffect(() => {
-    sendSocket(MessageTag.Ping, new Date());
-
-    const doPing = setInterval(() => {
-      sendSocket(MessageTag.Ping, new Date());
-    }, 5000);
-
-    return () => {
-      clearInterval(doPing);
-    };
-  }, []);
-
-  return (
-    <Panel.SubHeader>
-      Ontime cloud
-      <Panel.Description>Current ping: {ping}ms</Panel.Description>
-    </Panel.SubHeader>
-  );
-}
@@ -0,0 +1,109 @@
+import { MaybeString, MessageTag } from 'ontime-types';
+import { MILLIS_PER_MINUTE } from 'ontime-utils';
+import { useEffect } from 'react';
+
+import Tag from '../../../../common/components/tag/Tag';
+import useSessionStats from '../../../../common/hooks-query/useSessionStats';
+import { usePing } from '../../../../common/hooks/useSocket';
+import { useClientStore } from '../../../../common/stores/clientStore';
+import { formatDuration } from '../../../../common/utils/time';
+import { sendSocket } from '../../../../common/utils/socket';
+import { isDocker } from '../../../../externals';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+/** ping values above this are flagged to the user (ms) */
+const slowPingThreshold = 100;
+
+/** how often we ask the server for a ping (ms) */
+const pingInterval = 5000;
+
+/**
+ * Presents a date as the time elapsed since it happened
+ */
+function timeSince(date: MaybeString): string {
+  if (date === null) {
+    return 'Never';
+  }
+
+  const elapsed = Date.now() - new Date(date).getTime();
+  if (elapsed < MILLIS_PER_MINUTE) {
+    return 'Just now';
+  }
+  return `${formatDuration(elapsed)} ago`;
+}
+
+export default function NetworkStatus() {
+  const { data, status, isError } = useSessionStats();
+  // the client list is kept up to date over websocket, unlike the polled session stats
+  const clients = useClientStore((store) => store.clients);
+
+  return (
+    <Panel.Section>
+      <Panel.Card>
+        <Panel.SubHeader>Server status</Panel.SubHeader>
+        <Panel.Loader isLoading={status === 'pending'} />
+        {isError && <Panel.Error>Failed to load session data</Panel.Error>}
+        <Panel.Divider />
+        <Panel.ListGroup>
+          <Panel.ListItem>
+            <Panel.Field title='Connected clients' description='Clients currently connected to this server' />
+            <Tag>{Object.keys(clients).length}</Tag>
+          </Panel.ListItem>
+          <Panel.ListItem>
+            <Panel.Field title='Server running for' description='Time since the Ontime server was started' />
+            <Tag>{data ? formatDuration(Date.now() - new Date(data.startedAt).getTime()) : '...'}</Tag>
+          </Panel.ListItem>
+          <Panel.ListItem>
+            <Panel.Field title='Last client connection' description='When a client last connected to the server' />
+            <Tag>{data ? timeSince(data.lastConnection) : '...'}</Tag>
+          </Panel.ListItem>
+          <Panel.ListItem>
+            <Panel.Field
+              title='Last integration request'
+              description='When the server last received a request from an integration'
+            />
+            <Tag>{data ? timeSince(data.lastRequest) : '...'}</Tag>
+          </Panel.ListItem>
+          <Panel.ListItem>
+            <Panel.Field title='Server time zone' description='Time zone used by the machine running Ontime' />
+            <Tag>{data ? data.timezone : '...'}</Tag>
+          </Panel.ListItem>
+          {isDocker && <CloudPing />}
+        </Panel.ListGroup>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}
+
+/**
+ * Ontime cloud users are not in the same network as the server
+ * we show the round trip time to help them qualify the connection
+ */
+function CloudPing() {
+  const ping = usePing();
+
+  /**
+   * Send immediate ping request, and keep sending on an interval
+   */
+  useEffect(() => {
+    sendSocket(MessageTag.Ping, new Date());
+
+    const doPing = setInterval(() => {
+      sendSocket(MessageTag.Ping, new Date());
+    }, pingInterval);
+
+    return () => {
+      clearInterval(doPing);
+    };
+  }, []);
+
+  return (
+    <Panel.ListItem>
+      <Panel.Field
+        title='Ontime cloud latency'
+        description='Time for a message to travel to the server and back. Lower is better'
+      />
+      <Tag variant={ping > slowPingThreshold ? 'warning' : 'default'}>{ping}ms</Tag>
+    </Panel.ListItem>
+  );
+}
@@ -1,11 +1,3 @@
-.fullWidth {
-  width: 100%;
-}
-
-.halfWidth {
-  width: 50%;
-}
-
 .halfWidthNoWrap {
  width: 50%;
  white-space: nowrap;
@@ -16,6 +8,11 @@
  user-select: text;
 }

-.self {
-  background-color: $blue-1100;
+.muted {
+  color: $label-gray;
+}
+
+// align section notes with the table contents
+.note {
+  padding: 0 2rem;
 }
@@ -5,14 +5,42 @@ import { useState } from 'react';
 import Button from '../../../../../common/components/buttons/Button';
 import { RedirectClientModal } from '../../../../../common/components/client-modal/RedirectClientModal';
 import { RenameClientModal } from '../../../../../common/components/client-modal/RenameClientModal';
+import CopyTag from '../../../../../common/components/copy-tag/CopyTag';
 import Tag from '../../../../../common/components/tag/Tag';
+import Tooltip from '../../../../../common/components/tooltip/Tooltip';
 import { setClientRemote } from '../../../../../common/hooks/useSocket';
 import { useClientStore } from '../../../../../common/stores/clientStore';
-import { cx } from '../../../../../common/utils/styleUtils';
+import { openLink } from '../../../../../common/utils/linkUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';

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

+/**
+ * Shows the path a client is showing
+ * The full URL is available for copying or opening in a new window
+ */
+function ClientPath({ origin, path }: { origin: string; path: string }) {
+  // clients report their path on connection, we may not have it yet
+  if (!path) {
+    return <span className={style.muted}>unknown</span>;
+  }
+
+  // origin is empty for clients which have not reported their location
+  if (!origin) {
+    return <span className={style.copiable}>{path}</span>;
+  }
+
+  const fullUrl = `${origin}${path}`;
+
+  return (
+    <Tooltip text={fullUrl} render={<span />}>
+      <CopyTag copyValue={fullUrl} size='small' onClick={() => openLink(fullUrl)}>
+        {path}
+      </CopyTag>
+    </Tooltip>
+  );
+}
+
 export default function ClientList() {
  const id = useClientStore((store) => store.id);
  const clients = useClientStore((store) => store.clients);
@@ -32,8 +60,19 @@ export default function ClientList() {
    redirectHandler.open();
  };

-  const ontimeClients = Object.entries(clients).filter(([_, { type }]) => type === 'ontime');
-  const otherClients = Object.entries(clients).filter(([_, { type }]) => type !== 'ontime');
+  /**
+   * Clients are given by the server in connection order, which means rows move
+   * as clients come and go. We keep a stable order: self first, then by name
+   */
+  const sortClients = (clientEntries: [string, Client][]) =>
+    clientEntries.sort(([keyA, clientA], [keyB, clientB]) => {
+      if (keyA === id) return -1;
+      if (keyB === id) return 1;
+      return clientA.name.localeCompare(clientB.name);
+    });
+
+  const ontimeClients = sortClients(Object.entries(clients).filter(([_, { type }]) => type === 'ontime'));
+  const otherClients = sortClients(Object.entries(clients).filter(([_, { type }]) => type !== 'ontime'));

  const targetClient: Client | undefined = clients[targetId];

@@ -59,29 +98,37 @@ export default function ClientList() {
      )}
      <Panel.Section>
        <Panel.Title>Ontime Clients ({ontimeClients.length})</Panel.Title>
+        <div className={style.note}>
+          <Panel.Description>
+            Ontime views connected to this server. Identify shows a marker in the client screen until you turn it off,
+            redirect sends the client to a different view.
+          </Panel.Description>
+        </div>
        <Panel.Table>
          <thead>
            <tr>
-              <td style={{ width: '20%' }}>Client Name</td>
-              <td>Path</td>
-              <td />
+              <th style={{ width: '20%' }}>Client Name</th>
+              <th>Path</th>
+              <th />
            </tr>
          </thead>
          <tbody>
+            {ontimeClients.length === 0 && <Panel.TableEmpty label='No Ontime clients connected' />}
            {ontimeClients.map(([key, client]) => {
              const { identify, name, path } = client;
              const isCurrent = id === key;
              return (
-                <tr key={key} className={cx([isCurrent && style.self])}>
+                <tr key={key} data-highlight={isCurrent}>
                  <Panel.InlineElements relation='inner' as='td'>
                    {isCurrent && <Tag>SELF</Tag>}
                    {name}
                  </Panel.InlineElements>
-                  <td className={style.copiable}>{path}</td>
+                  <td>
+                    <ClientPath origin={client.origin} path={path} />
+                  </td>
                  <Panel.InlineElements relation='inner' as='td'>
                    <Button
                      size='small'
-                      className={`${identify ? style.blink : ''}`}
                      disabled={isCurrent}
                      variant={identify ? 'primary' : 'subtle'}
                      data-testid={isCurrent ? '' : 'not-self-identify'}
@@ -117,14 +164,21 @@ export default function ClientList() {
      <Panel.Divider />
      <Panel.Section>
        <Panel.Title>Other Clients ({otherClients.length})</Panel.Title>
+        <div className={style.note}>
+          <Panel.Description>
+            Connections which are not Ontime views, such as integrations and custom clients. These cannot be controlled
+            from Ontime.
+          </Panel.Description>
+        </div>
        <Panel.Table>
          <thead>
            <tr>
-              <td className={style.halfWidthNoWrap}>Client Name</td>
-              <td className={style.halfWidthNoWrap}>Client type</td>
+              <th className={style.halfWidthNoWrap}>Client Name</th>
+              <th className={style.halfWidthNoWrap}>Client type</th>
            </tr>
          </thead>
          <tbody>
+            {otherClients.length === 0 && <Panel.TableEmpty label='No other clients connected' />}
            {otherClients.map(([key, client]) => {
              const { name, type } = client;

@@ -1,4 +1,4 @@
-import { Suspense, useState } from 'react';
+import { useState } from 'react';
 import { IoArrowDown, IoArrowUp } from 'react-icons/io5';

 import Info from '../../../../common/components/info/Info';
@@ -11,25 +11,11 @@ import style from './ProjectPanel.module.scss';
 type SortParameter = 'alphabetical' | 'modified';

 export default function ProjectList() {
-  return (
-    <Suspense
-      fallback={
-        <div className={style.empty}>
-          <Panel.Loader isLoading />
-        </div>
-      }
-    >
-      <ProjectListSuspend />
-    </Suspense>
-  );
-}
-
-function ProjectListSuspend() {
  const [editingMode, setEditingMode] = useState<EditMode | null>(null);
  const [editingFilename, setEditingFilename] = useState<string | null>(null);
  const [sortMode, setSortMode] = useState<ProjectSortMode>('modified-desc');

-  const { data, refetch } = useOrderedProjectList(sortMode);
+  const { data, refetch, status } = useOrderedProjectList(sortMode);

  const handleToggleEditMode = (editMode: EditMode, filename: string | null) => {
    setEditingMode((prev) => (prev === editMode && filename === editingFilename ? null : editMode));
@@ -52,6 +38,14 @@ function ProjectListSuspend() {
    });
  };

+  if (status === 'pending') {
+    return (
+      <div className={style.empty}>
+        <Panel.Loader isLoading />
+      </div>
+    );
+  }
+
  const numProjects = data.reorderedProjectFiles.length;

  return (
@@ -67,6 +67,14 @@ const staticOptions = [
    id: 'network',
    label: 'Network',
    secondary: [
+      {
+        id: 'network__status',
+        label: 'Server status',
+      },
+      {
+        id: 'network__interfaces',
+        label: 'Network interfaces',
+      },
      {
        id: 'network__log',
        label: 'Event log',
@@ -51,3 +51,13 @@ $info-hover: $section-white;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
 }
+
+.count {
+  color: $info-gray;
+  white-space: nowrap;
+}
+
+.empty {
+  color: $info-gray;
+  padding: 0.5rem 0;
+}
@@ -1,115 +1,90 @@
-import { LogOrigin } from 'ontime-types';
+import { LogLevel, LogOrigin } from 'ontime-types';
 import { useCallback, useState } from 'react';
 import { IoClose } from 'react-icons/io5';

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

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

+const allOrigins = [
+  LogOrigin.User,
+  LogOrigin.Client,
+  LogOrigin.Server,
+  LogOrigin.Playback,
+  LogOrigin.Rx,
+  LogOrigin.Tx,
+];
+
 export default function Log() {
  const { logs: logData } = useLogData();

-  const [showClient, setShowClient] = useState(true);
-  const [showServer, setShowServer] = useState(true);
-  const [showRx, setShowRx] = useState(true);
-  const [showTx, setShowTx] = useState(true);
-  const [showPlayback, setShowPlayback] = useState(true);
-  const [showUser, setShowUser] = useState(true);
+  // log entries are not guaranteed to have an origin from the enum
+  const [origins, setOrigins] = useState<Set<string>>(() => new Set<string>(allOrigins));
+  const [onlyProblems, setOnlyProblems] = useState(false);
+  const [search, setSearch] = useState('');

-  const matchers: LogOrigin[] = [];
-  if (showUser) {
-    matchers.push(LogOrigin.User);
-  }
-  if (showClient) {
-    matchers.push(LogOrigin.Client);
-  }
-  if (showServer) {
-    matchers.push(LogOrigin.Server);
-  }
-  if (showRx) {
-    matchers.push(LogOrigin.Rx);
-  }
-  if (showTx) {
-    matchers.push(LogOrigin.Tx);
-  }
-  if (showPlayback) {
-    matchers.push(LogOrigin.Playback);
-  }
-
-  const filteredData = logData.filter((entry) => matchers.some((match) => entry.origin === match));
-
-  const disableOthers = useCallback((toEnable: LogOrigin) => {
-    setShowUser(toEnable === LogOrigin.User);
-    setShowClient(toEnable === LogOrigin.Client);
-    setShowServer(toEnable === LogOrigin.Server);
-    setShowRx(toEnable === LogOrigin.Rx);
-    setShowTx(toEnable === LogOrigin.Tx);
-    setShowPlayback(toEnable === LogOrigin.Playback);
+  const toggleOrigin = useCallback((origin: LogOrigin) => {
+    setOrigins((previous) => {
+      const newOrigins = new Set(previous);
+      if (newOrigins.has(origin)) {
+        newOrigins.delete(origin);
+      } else {
+        newOrigins.add(origin);
+      }
+      return newOrigins;
+    });
  }, []);

+  /** middle click on an origin shows only that origin */
+  const showOnlyOrigin = useCallback((origin: LogOrigin) => {
+    setOrigins(new Set([origin]));
+  }, []);
+
+  const searchTerm = search.toLowerCase();
+  const filteredData = logData.filter((entry) => {
+    if (!origins.has(entry.origin)) return false;
+    if (onlyProblems && entry.level === LogLevel.Info) return false;
+    if (searchTerm && !entry.text.toLowerCase().includes(searchTerm)) return false;
+    return true;
+  });
+
+  const isFiltered = filteredData.length !== logData.length;
+
  return (
    <>
      <Panel.InlineElements className={style.buttonBar}>
+        {allOrigins.map((origin) => (
+          <Button
+            key={origin}
+            variant={origins.has(origin) ? 'primary' : 'subtle'}
+            size='small'
+            onClick={() => toggleOrigin(origin)}
+            onAuxClick={() => showOnlyOrigin(origin)}
+            onContextMenu={(event) => event.preventDefault()}
+          >
+            {origin}
+          </Button>
+        ))}
        <Button
-          variant={showUser ? 'primary' : 'subtle'}
+          variant={onlyProblems ? 'primary' : 'subtle'}
          size='small'
-          onClick={() => setShowUser((s) => !s)}
-          onAuxClick={() => disableOthers(LogOrigin.User)}
-          onContextMenu={(e) => e.preventDefault()}
+          onClick={() => setOnlyProblems((previous) => !previous)}
        >
-          {LogOrigin.User}
-        </Button>
-        <Button
-          variant={showClient ? 'primary' : 'subtle'}
-          size='small'
-          onClick={() => setShowClient((s) => !s)}
-          onAuxClick={() => disableOthers(LogOrigin.Client)}
-          onContextMenu={(e) => e.preventDefault()}
-        >
-          {LogOrigin.Client}
-        </Button>
-        <Button
-          variant={showServer ? 'primary' : 'subtle'}
-          size='small'
-          onClick={() => setShowServer((s) => !s)}
-          onAuxClick={() => disableOthers(LogOrigin.Server)}
-          onContextMenu={(e) => e.preventDefault()}
-        >
-          {LogOrigin.Server}
-        </Button>
-        <Button
-          variant={showPlayback ? 'primary' : 'subtle'}
-          size='small'
-          onClick={() => setShowPlayback((s) => !s)}
-          onAuxClick={() => disableOthers(LogOrigin.Playback)}
-          onContextMenu={(e) => e.preventDefault()}
-        >
-          {LogOrigin.Playback}
-        </Button>
-        <Button
-          variant={showRx ? 'primary' : 'subtle'}
-          size='small'
-          onClick={() => setShowRx((s) => !s)}
-          onAuxClick={() => disableOthers(LogOrigin.Rx)}
-          onContextMenu={(e) => e.preventDefault()}
-        >
-          {LogOrigin.Rx}
-        </Button>
-        <Button
-          variant={showTx ? 'primary' : 'subtle'}
-          size='small'
-          onClick={() => setShowTx((s) => !s)}
-          onAuxClick={() => disableOthers(LogOrigin.Tx)}
-          onContextMenu={(e) => e.preventDefault()}
-        >
-          {LogOrigin.Tx}
+          Issues only
        </Button>
        <Button variant='subtle-destructive' size='small' onClick={clearLogs} className={style.apart}>
          <IoClose /> Clear
        </Button>
      </Panel.InlineElements>
+      <Panel.InlineElements className={style.buttonBar}>
+        <Input fluid placeholder='Filter messages' value={search} onChange={(event) => setSearch(event.target.value)} />
+        <span className={style.count}>
+          {isFiltered ? `${filteredData.length} of ${logData.length}` : logData.length} entries
+        </span>
+      </Panel.InlineElements>
      <ul className={style.log}>
        {filteredData.map((logEntry) => (
          <li key={logEntry.id} className={`${style.logEntry} ${style[logEntry.level]} `}>
@@ -118,6 +93,9 @@ export default function Log() {
            <span className={style.msg}>{logEntry.text}</span>
          </li>
        ))}
+        {filteredData.length === 0 && (
+          <li className={style.empty}>{logData.length === 0 ? 'No activity yet' : 'No entries match the filters'}</li>
+        )}
      </ul>
    </>
  );
@@ -14,7 +14,7 @@ export interface OperatorData {
 }

 export function useOperatorData(): ViewData<OperatorData> {
-  const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata(null);
+  const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata();
  const { data: customFields, status: customFieldStatus } = useCustomFields();
  const { data: settings, status: settingsStatus } = useSettings();

@@ -1,10 +1,9 @@
 import { ErrorBoundary } from '@sentry/react';
-import { PropsWithChildren, ReactNode, Suspense } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';

 import ScrollArea from '../../common/components/scroll-area/ScrollArea';
 import { useIsOnline } from '../../common/hooks/useSocket';
 import { cx } from '../../common/utils/styleUtils';
-import Loader from '../../views/common/loader/Loader';

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

@@ -16,37 +15,18 @@ export function OverviewWrapper({ navElements, children }: PropsWithChildren<Ove
  const isOnline = useIsOnline();

  return (
-    <Suspense fallback={<OverviewFallback navElements={navElements} />}>
-      <div className={cx([style.overview, !isOnline && style.isOffline])}>
-        <ErrorBoundary>
-          <div className={style.nav}>{navElements}</div>
-          <ScrollArea
-            className={style.infoScroll}
-            contentClassName={style.info}
-            contentStyle={{ minWidth: '100%' }}
-            orientation='horizontal'
-          >
-            {children}
-          </ScrollArea>
-        </ErrorBoundary>
-      </div>
-    </Suspense>
-  );
-}
-
-function OverviewFallback({ navElements }: OverviewWrapperProps) {
-  return (
-    <div className={style.overview}>
-      <div className={style.nav}>{navElements}</div>
-      <ScrollArea
-        className={style.infoScroll}
-        contentClassName={style.info}
-        contentStyle={{ minWidth: '100%' }}
-        orientation='horizontal'
-      >
-        {/* TODO: this could be alined in a nicer way */}
-        <Loader />
-      </ScrollArea>
+    <div className={cx([style.overview, !isOnline && style.isOffline])}>
+      <ErrorBoundary>
+        <div className={style.nav}>{navElements}</div>
+        <ScrollArea
+          className={style.infoScroll}
+          contentClassName={style.info}
+          contentStyle={{ minWidth: '100%' }}
+          orientation='horizontal'
+        >
+          {children}
+        </ScrollArea>
+      </ErrorBoundary>
    </div>
  );
 }
@@ -210,7 +210,7 @@ export function MetadataTimes() {
 function GroupTimes() {
  const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback, phase } = useGroupTimerOverView();
  const currentGroupId = useCurrentGroupId();
-  const group = useEntry(null, currentGroupId) as OntimeGroup | null;
+  const group = useEntry(currentGroupId) as OntimeGroup | null;

  const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);

@@ -266,7 +266,7 @@ function GroupTimes() {
 function FlagTimes() {
  const { clock, mode, actualStart, plannedStart, playback, currentDay, phase } = useFlagTimerOverView();
  const { id, expectedStart } = useNextFlag();
-  const entry = useEntry(null, id) as OntimeEvent | null;
+  const entry = useEntry(id) as OntimeEvent | null;

  const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);

@@ -6,7 +6,7 @@ import style from './TitleOverview.module.scss';
 export default function TitleOverview() {
  'use memo';
  const { data: projectData } = useProjectData();
-  const { data: rundownData } = useRundownAuxData(null);
+  const { data: rundownData } = useRundownAuxData();

  if (!projectData.title && !rundownData.title) {
    return null;
@@ -6,7 +6,8 @@ import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary'
 import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
 import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
-import { RundownSelectionContextProvider } from '../../common/context/RundownSelectionContext';
+import { useLoadedRundownSource } from '../../common/hooks-query/useScopedRundown';
+import { useEntryActions } from '../../common/hooks/useEntryAction';
 import { useIsSmallDevice } from '../../common/hooks/useIsSmallDevice';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
@@ -38,29 +39,28 @@ function RundownExport() {
    defaultValue: RundownViewMode.List,
  });
  const isSmallDevice = useIsSmallDevice();
+  const entryActions = useEntryActions();

  if (isSmallDevice && isExtracted) {
    return (
-      <RundownSelectionContextProvider>
-        <EntryActionsProvider>
-          <ProtectRoute permission='editor'>
-            <div
-              className={cx([style.rundownExport, style.extracted])}
-              data-target='small-device'
-              data-testid='panel-rundown'
-            >
-              <FinderPlacement />
-              <ViewNavigationMenu suppressSettings />
-              <div className={style.rundown}>
-                <ErrorBoundary>
-                  <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
-                  <RundownContextMenu />
-                </ErrorBoundary>
-              </div>
+      <EntryActionsProvider actions={entryActions}>
+        <ProtectRoute permission='editor'>
+          <div
+            className={cx([style.rundownExport, style.extracted])}
+            data-target='small-device'
+            data-testid='panel-rundown'
+          >
+            <FinderPlacement />
+            <ViewNavigationMenu suppressSettings />
+            <div className={style.rundown}>
+              <ErrorBoundary>
+                <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
+                <RundownContextMenu />
+              </ErrorBoundary>
            </div>
-          </ProtectRoute>
-        </EntryActionsProvider>
-      </RundownSelectionContextProvider>
+          </div>
+        </ProtectRoute>
+      </EntryActionsProvider>
    );
  }

@@ -70,32 +70,30 @@ function RundownExport() {
    viewMode === RundownViewMode.Table;

  return (
-    <RundownSelectionContextProvider>
-      <EntryActionsProvider>
-        <ProtectRoute permission='editor'>
-          <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
-            <FinderPlacement />
-            {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
-            <div className={style.rundown}>
-              <Editor.Panel className={style.list}>
+    <EntryActionsProvider actions={entryActions}>
+      <ProtectRoute permission='editor'>
+        <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
+          <FinderPlacement />
+          {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
+          <div className={style.rundown}>
+            <Editor.Panel className={style.list}>
+              <ErrorBoundary>
+                {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
+                <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
+                <RundownContextMenu />
+              </ErrorBoundary>
+            </Editor.Panel>
+            {!hideSideBar && (
+              <div className={style.side}>
                <ErrorBoundary>
-                  {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
-                  <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
-                  <RundownContextMenu />
+                  <RundownEntryEditor />
                </ErrorBoundary>
-              </Editor.Panel>
-              {!hideSideBar && (
-                <div className={style.side}>
-                  <ErrorBoundary>
-                    <RundownEntryEditor />
-                  </ErrorBoundary>
-                </div>
-              )}
-            </div>
+              </div>
+            )}
          </div>
-        </ProtectRoute>
-      </EntryActionsProvider>
-    </RundownSelectionContextProvider>
+        </div>
+      </ProtectRoute>
+    </EntryActionsProvider>
  );
 }

@@ -107,16 +105,17 @@ interface RundownRootProps {
 }

 function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: RundownRootProps) {
+  const source = useLoadedRundownSource();
+
  return (
    <div className={style.rundownRoot}>
      {isSmallDevice ? (
        <RundownHeaderMobile viewMode={viewMode} setViewMode={setViewMode} />
      ) : (
-        // TODO: add data-background-rundown={!isLoadedRundown} styling
        <RundownHeader isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
      )}
      {viewMode === RundownViewMode.List ? <RundownList /> : <RundownTable />}
-      {viewMode === RundownViewMode.Table && <EntryEditModal />}
+      {viewMode === RundownViewMode.Table && <EntryEditModal rundown={source.rundown} />}
      <RenumberCuesDialog />
    </div>
  );
@@ -1,23 +1,16 @@
-import { Playback } from 'ontime-types';
 import { memo } from 'react';

 import Empty from '../../common/components/state/Empty';
-import { useContextRundownList } from '../../common/hooks-query/useContextRundown';
+import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import { useRundownEditor } from '../../common/hooks/useSocket';
 import Rundown from './Rundown';

-const backgroundFeatureData = {
-  playback: Playback.Stop,
-  selectedEventId: null,
-  nextEventId: null,
-};
-
 export default memo(RundownList);
 function RundownList() {
-  const { rundown, status, rundownMetadata, isLoadedRundown } = useContextRundownList();
+  const { data, status, rundownMetadata } = useRundownWithMetadata();
  const featureData = useRundownEditor();

-  const isLoading = status !== 'success' || !rundown || !rundownMetadata;
+  const isLoading = status !== 'success' || !data || !rundownMetadata;

  if (isLoading) {
    return <Empty text='Connecting to server' />;
@@ -25,12 +18,12 @@ function RundownList() {

  return (
    <Rundown
-      order={rundown.order}
-      flatOrder={rundown.flatOrder}
-      entries={rundown.entries}
-      id={rundown.id}
+      order={data.order}
+      flatOrder={data.flatOrder}
+      entries={data.entries}
+      id={data.id}
      rundownMetadata={rundownMetadata}
-      featureData={isLoadedRundown ? featureData : backgroundFeatureData}
+      featureData={featureData}
    />
  );
 }
@@ -1,3 +0,0 @@
-.rundownSelect {
-  min-width: min(20rem, calc(100vw - 6rem));
-}
@@ -1,42 +0,0 @@
-import Select from '../../../common/components/select/Select';
-import { useRundownSelectionContext } from '../../../common/context/RundownSelectionContext';
-import { AppMode } from '../../../ontimeConfig';
-
-import styles from './RundownSelect.module.scss';
-
-const FOLLOW = '___null___';
-
-interface RundownSelectProps {
-  appMode: AppMode;
-}
-
-export function RundownSelect({ appMode }: RundownSelectProps) {
-  'use memo';
-  const { selectRundownId, rundowns, loadedRundownId, selectedRundownId } = useRundownSelectionContext();
-
-  const options = rundowns.map(({ id, title }) => ({
-    value: id,
-    label: loadedRundownId === id ? `${title} (loaded)` : title,
-  }));
-
-  // add a follow option
-  options.unshift({
-    value: FOLLOW,
-    label: 'Follow loaded',
-  });
-
-  return (
-    <div className={styles.rundownSelect}>
-      <Select
-        value={selectedRundownId ?? FOLLOW}
-        options={options}
-        onValueChange={(value) => {
-          if (value === FOLLOW) selectRundownId(null);
-          else selectRundownId(value);
-        }}
-        disabled={appMode === AppMode.Run}
-        fluid
-      />
-    </div>
-  );
-}
@@ -1,7 +1,7 @@
 import { OntimeEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { useMemo } from 'react';

-import { useRundown } from '../../../common/hooks-query/useRundown';
+import useRundown from '../../../common/hooks-query/useRundown';
 import { useEventSelection } from '../useEventSelection';
 import EventEditorFooter from './composite/EventEditorFooter';
 import EventEditor from './EventEditor';
@@ -13,7 +13,7 @@ import style from './EntryEditor.module.scss';

 export default function RundownEntryEditor() {
  const selectedEvents = useEventSelection((state) => state.selectedEvents);
-  const { data } = useRundown(null);
+  const { data } = useRundown();

  const entry = useMemo<OntimeEntry | null>(() => {
    if (data.order.length === 0) {
@@ -7,7 +7,7 @@ import Button from '../../../common/components/buttons/Button';
 import Dialog from '../../../common/components/dialog/Dialog';
 import Input from '../../../common/components/input/input/Input';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import { useContextRundownCueRenumberModal } from '../../../common/hooks-query/useContextRundown';
+import useRundown from '../../../common/hooks-query/useRundown';
 import { orderEntries } from '../rundown.utils';
 import { useEventSelection } from '../useEventSelection';

@@ -17,7 +17,8 @@ type RenumberCueData = Pick<RenumberCues, 'increment' | 'prefix' | 'start'>;

 export default function RenumberCuesDialog() {
  'use memo';
-  const { flatOrder } = useContextRundownCueRenumberModal();
+  const { data } = useRundown();
+  const { flatOrder } = data;
  const { onClose, isOpen } = useRenumberCuesDialogStore();
  const { renumberCues } = useEntryActionsContext();
  const selectedEvents = useEventSelection((state) => state.selectedEvents);
@@ -8,7 +8,6 @@ import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { setOffsetMode, useOffsetMode } from '../../../common/hooks/useSocket';
 import { AppMode } from '../../../ontimeConfig';
 import { EditorLayoutMode, useEditorLayout } from '../../../views/editor/useEditorLayout';
-import { RundownSelect } from '../common/RundownSelect';
 import { RundownViewMode } from '../rundown.options';
 import { useEditorFollowMode } from '../useEditorFollowMode';
 import RundownMenu from './RundownMenu';
@@ -25,7 +24,6 @@ interface HeaderControlsConfig {
  showRunEditToggle: boolean;
  showOffsetToggle: boolean;
  showOverflowMenu: boolean;
-  showRundownSelect: boolean;
 }

 export const HEADER_CONTROLS_CONFIG: Record<EditorLayoutMode, HeaderControlsConfig> = {
@@ -33,19 +31,16 @@ export const HEADER_CONTROLS_CONFIG: Record<EditorLayoutMode, HeaderControlsConf
    showRunEditToggle: true,
    showOffsetToggle: true,
    showOverflowMenu: true,
-    showRundownSelect: false,
  },
  [EditorLayoutMode.PLANNING]: {
    showRunEditToggle: false,
    showOffsetToggle: false,
    showOverflowMenu: true,
-    showRundownSelect: true,
  },
  [EditorLayoutMode.TRACKING]: {
    showRunEditToggle: false,
    showOffsetToggle: true,
    showOverflowMenu: false,
-    showRundownSelect: false,
  },
 } as const;

@@ -55,8 +50,7 @@ function RundownHeader({ isExtracted, viewMode, setViewMode }: RundownHeaderProp
  const offsetMode = useOffsetMode();
  const { layoutMode } = useEditorLayout();

-  const { showRunEditToggle, showOffsetToggle, showOverflowMenu, showRundownSelect } =
-    HEADER_CONTROLS_CONFIG[layoutMode];
+  const { showRunEditToggle, showOffsetToggle, showOverflowMenu } = HEADER_CONTROLS_CONFIG[layoutMode];

  const toggleAppMode = (mode: AppMode[]) => {
    // we need to stop user from deselecting a mode
@@ -128,8 +122,6 @@ function RundownHeader({ isExtracted, viewMode, setViewMode }: RundownHeaderProp
        </ToggleGroup>
      )}

-      {showRundownSelect && <RundownSelect appMode={editorMode} />}
-
      {showOverflowMenu && <RundownMenu allowNavigation={!isExtracted} />}
    </Toolbar.Root>
  );
@@ -1,7 +1,10 @@
 import { memo, useEffect, useMemo } from 'react';

 import EmptyPage from '../../../common/components/state/EmptyPage';
+import { EntryActionsProvider } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
+import { useLoadedRundownSource } from '../../../common/hooks-query/useScopedRundown';
+import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import CuesheetDnd from '../../../views/cuesheet/cuesheet-dnd/CuesheetDnd';
 import CuesheetTable from '../../../views/cuesheet/cuesheet-table/CuesheetTable';
 import { useCuesheetPermissions } from '../../../views/cuesheet/useTablePermissions';
@@ -13,6 +16,8 @@ function RundownTable() {
  const { data: customFields, status: customFieldStatus } = useCustomFields();
  const setPermissions = useCuesheetPermissions((state) => state.setPermissions);
  const { editorMode } = useEditorFollowMode();
+  const source = useLoadedRundownSource();
+  const actions = useEntryActions();

  // Editor always has full permissions
  useEffect(() => {
@@ -30,12 +35,14 @@ function RundownTable() {
  const isLoading = !customFields || customFieldStatus === 'pending';

  return (
-    <CuesheetDnd columns={columns} tableRoot='editor'>
-      {isLoading ? (
-        <EmptyPage text='Loading...' />
-      ) : (
-        <CuesheetTable columns={columns} cuesheetMode={editorMode} tableRoot='editor' />
-      )}
-    </CuesheetDnd>
+    <EntryActionsProvider actions={actions}>
+      <CuesheetDnd columns={columns} tableRoot='editor'>
+        {isLoading ? (
+          <EmptyPage text='Loading...' />
+        ) : (
+          <CuesheetTable columns={columns} source={source} cuesheetMode={editorMode} tableRoot='editor' />
+        )}
+      </CuesheetDnd>
+    </EntryActionsProvider>
  );
 }
@@ -20,7 +20,7 @@ export function useBackstageData(): ViewData<BackstageData> {
  const isMirrored = useViewOptionsStore((state) => state.mirror);

  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundown(null);
+  const { data: rundownData, status: rundownStatus } = useFlatRundown();
  const { data: projectData, status: projectDataStatus } = useProjectData();
  const { data: settings, status: settingsStatus } = useSettings();
  const { data: customFields, status: customFieldsStatus } = useCustomFields();
@@ -45,7 +45,7 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
    [filter],
  );

-  const { data: events } = usePartialRundown(null, filterCallback);
+  const { data: events } = usePartialRundown(filterCallback);

  const [firstIndex, setFirstIndex] = useState(-1);
  const [numPages, setNumPages] = useState(0);
@@ -21,7 +21,7 @@ export function useCountdownData(): ViewData<CountdownData> {
  const isMirrored = useViewOptionsStore((state) => state.mirror);

  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata(null);
+  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
  const { data: projectData, status: projectDataStatus } = useProjectData();
  const { data: settings, status: settingsStatus } = useSettings();
  const { data: customFields, status: customFieldsStatus } = useCustomFields();
@@ -14,3 +14,7 @@
    'table';
  color: $ui-white;
 }
+
+.rundownSelect {
+  min-width: min(20rem, calc(100vw - 6rem));
+}
@@ -4,46 +4,51 @@ import { IoApps } from 'react-icons/io5';
 import IconButton from '../../common/components/buttons/IconButton';
 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
 import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
-import { RundownSelectionContextProvider } from '../../common/context/RundownSelectionContext';
+import { useScopedRundown } from '../../common/hooks-query/useScopedRundown';
+import { useScopedEntryActions } from '../../common/hooks/useEntryAction';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { getIsNavigationLocked } from '../../externals';
 import CuesheetOverview from '../../features/overview/CuesheetOverview';
 import EntryEditModal from './cuesheet-edit-modal/EntryEditModal';
 import CuesheetProgress from './cuesheet-progress/CuesheetProgress';
 import CuesheetTableWrapper from './CuesheetTableWrapper';
+import { FOLLOW_LOADED_RUNDOWN_ID, useCuesheetRundownSelection } from './useCuesheetRundownSelection';

 import styles from './CuesheetPage.module.scss';

 export default function CuesheetPage() {
  'use memo';
  const [isMenuOpen, menuHandler] = useDisclosure();
+  const { selectedRundownId, loadedRundownId, setSelectedRundownId, projectRundowns } = useCuesheetRundownSelection();
+  const source = useScopedRundown(selectedRundownId === FOLLOW_LOADED_RUNDOWN_ID ? loadedRundownId : selectedRundownId);
+
+  const actions = useScopedEntryActions(source.rundownId);

  useWindowTitle('Cuesheet');

  const isLocked = getIsNavigationLocked();

  return (
-    <RundownSelectionContextProvider>
-      <EntryActionsProvider>
-        <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
-        <EntryEditModal />
-        <div className={styles.tableWrapper} data-testid='cuesheet'>
-          <CuesheetOverview>
-            {!isLocked && (
-              <IconButton
-                aria-label='Toggle navigation'
-                variant='subtle-white'
-                size='xlarge'
-                onClick={menuHandler.open}
-              >
-                <IoApps />
-              </IconButton>
-            )}
-          </CuesheetOverview>
-          <CuesheetProgress />
-          <CuesheetTableWrapper />
-        </div>
-      </EntryActionsProvider>
-    </RundownSelectionContextProvider>
+    <EntryActionsProvider actions={actions}>
+      <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
+      <EntryEditModal rundown={source.rundown} />
+      <div className={styles.tableWrapper} data-testid='cuesheet'>
+        <CuesheetOverview>
+          {!isLocked && (
+            <IconButton aria-label='Toggle navigation' variant='subtle-white' size='xlarge' onClick={menuHandler.open}>
+              <IoApps />
+            </IconButton>
+          )}
+        </CuesheetOverview>
+        <CuesheetProgress />
+        <CuesheetTableWrapper
+          source={source}
+          selectedRundownId={selectedRundownId}
+          loadedRundownId={loadedRundownId}
+          setSelectedRundownId={setSelectedRundownId}
+          projectRundowns={projectRundowns}
+        />
+      </div>
+    </EntryActionsProvider>
  );
 }
@@ -1,20 +1,39 @@
+import { MaybeString, ProjectRundown } from 'ontime-types';
 import { memo, use, useMemo } from 'react';

+import Select from '../../common/components/select/Select';
 import EmptyPage from '../../common/components/state/EmptyPage';
 import { PresetContext } from '../../common/context/PresetContext';
-import { useRundownSelectionContext } from '../../common/context/RundownSelectionContext';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
+import type { RundownSource } from '../../common/hooks-query/useScopedRundown';
+import { AppMode } from '../../ontimeConfig';
 import CuesheetDnd from './cuesheet-dnd/CuesheetDnd';
 import { makeCuesheetColumns } from './cuesheet-table/cuesheet-table-elements/cuesheetColsFactory';
 import CuesheetTable from './cuesheet-table/CuesheetTable';
 import { useApplyCuesheetPolicy } from './useApplyCuesheetPolicy';
+import { FOLLOW_LOADED_RUNDOWN_ID } from './useCuesheetRundownSelection';
+
+import styles from './CuesheetPage.module.scss';
+
+interface CuesheetTableWrapperProps {
+  source: RundownSource;
+  selectedRundownId: MaybeString;
+  loadedRundownId: string;
+  setSelectedRundownId: (rundownId: string) => void;
+  projectRundowns: ProjectRundown[];
+}

 export default memo(CuesheetTableWrapper);
-function CuesheetTableWrapper() {
+function CuesheetTableWrapper({
+  source,
+  selectedRundownId,
+  setSelectedRundownId,
+  loadedRundownId,
+  projectRundowns,
+}: CuesheetTableWrapperProps) {
  const preset = use(PresetContext);
-  const { isLoadedRundown } = useRundownSelectionContext();
-
-  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isLoadedRundown });
+  const isCurrentRundown = source.rundownId !== null && source.rundownId === loadedRundownId;
+  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isCurrentRundown });
  const { data: customFields, status: customFieldStatus } = useCustomFields();

  const columns = useMemo(
@@ -31,11 +50,66 @@ function CuesheetTableWrapper() {
      ) : (
        <CuesheetTable
          columns={columns}
+          source={source}
          cuesheetMode={cuesheetMode}
          tableRoot='cuesheet'
          setCuesheetMode={setCuesheetMode}
+          isCurrentRundown={isCurrentRundown}
+          insertElement={
+            <>
+              <RundownSelect
+                cuesheetMode={cuesheetMode}
+                selectedRundownId={selectedRundownId}
+                loadedRundownId={loadedRundownId}
+                setSelectedRundownId={setSelectedRundownId}
+                projectRundowns={projectRundowns}
+              />
+            </>
+          }
        />
      )}
    </CuesheetDnd>
  );
 }
+
+interface RundownSelectProps {
+  cuesheetMode: AppMode;
+  selectedRundownId: MaybeString;
+  loadedRundownId: string;
+  setSelectedRundownId: (rundownId: string) => void;
+  projectRundowns: ProjectRundown[];
+}
+
+function RundownSelect({
+  cuesheetMode,
+  projectRundowns,
+  loadedRundownId,
+  selectedRundownId,
+  setSelectedRundownId,
+}: RundownSelectProps) {
+  'use memo';
+  const options = projectRundowns.map(({ id, title }) => ({
+    value: id,
+    label: loadedRundownId === id ? `${title} (loaded)` : title,
+  }));
+  options.unshift({
+    value: FOLLOW_LOADED_RUNDOWN_ID,
+    label: 'Follow loaded', // TODO: Better wording and maybe icon? and translation
+  });
+
+  return (
+    <div className={styles.rundownSelect}>
+      <Select
+        value={selectedRundownId ?? undefined}
+        options={options}
+        onValueChange={(value) => {
+          if (value) {
+            setSelectedRundownId(value);
+          }
+        }}
+        disabled={cuesheetMode === AppMode.Run}
+        fluid
+      />
+    </div>
+  );
+}
@@ -0,0 +1,21 @@
+import {
+  FOLLOW_LOADED_RUNDOWN_ID,
+  getCuesheetRundownStorageKey,
+  resolveSelectedRundownId,
+} from '../useCuesheetRundownSelection';
+
+describe('useCuesheetRundownSelection helpers', () => {
+  it('builds a project-scoped storage key', () => {
+    expect(getCuesheetRundownStorageKey('http://localhost:4001', 'My Project')).toBe(
+      'cuesheet-selected-rundown:http://localhost:4001:My Project',
+    );
+  });
+
+  it('falls back to the follow loaded rundown when the stored selection is missing', () => {
+    expect(resolveSelectedRundownId('missing', new Set(['loaded', 'other']))).toBe(FOLLOW_LOADED_RUNDOWN_ID);
+  });
+
+  it('keeps the stored selection when it still exists in the current project', () => {
+    expect(resolveSelectedRundownId('other', new Set(['loaded', 'other']))).toBe('other');
+  });
+});
@@ -1,13 +1,16 @@
+import { Rundown } from 'ontime-types';
 import { memo } from 'react';

 import Modal from '../../../common/components/modal/Modal';
-import { useContextRundownEditModal } from '../../../common/hooks-query/useContextRundown';
 import CuesheetEntryEditor from '../../../features/rundown/entry-editor/CuesheetEventEditor';
 import { useEditModal } from './useEditModal';

+interface EntryEditModalProps {
+  rundown: Rundown;
+}
+
 export default memo(EntryEditModal);
-function EntryEditModal() {
-  const { rundown } = useContextRundownEditModal();
+function EntryEditModal({ rundown }: EntryEditModalProps) {
  const entryId = useEditModal((state) => state.selectedEntryId);
  const closeModal = useEditModal((state) => state.clearSelection);

@@ -1,7 +1,7 @@
 import { useTableNav } from '@table-nav/react';
 import { ColumnDef, Table, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { OntimeEntry, SupportedEntry, TimeField, isOntimeDelay, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
-import { ComponentProps, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { ComponentProps, ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
  ContextProp,
  ItemProps,
@@ -14,7 +14,7 @@ import {
 import EmptyPage from '../../../common/components/state/EmptyPage';
 import EmptyTableBody from '../../../common/components/state/EmptyTableBody';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import { useContextRundownTable } from '../../../common/hooks-query/useContextRundown';
+import type { RundownSource } from '../../../common/hooks-query/useScopedRundown';
 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { usePersistedRundownOptions } from '../../../features/rundown/rundown.options';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
@@ -35,22 +35,34 @@ import style from './CuesheetTable.module.scss';
 type CuesheetTableBaseProps = {
  columns: ColumnDef<ExtendedEntry>[];
  cuesheetMode: AppMode;
+  source: RundownSource;
+  insertElement?: ReactNode;
 };

 type EditorCuesheetTableProps = CuesheetTableBaseProps & {
  tableRoot: 'editor';
  setCuesheetMode?: undefined;
+  isCurrentRundown?: undefined;
 };

 type ViewCuesheetTableProps = CuesheetTableBaseProps & {
  tableRoot: 'cuesheet';
  setCuesheetMode: (mode: AppMode) => void;
+  isCurrentRundown?: boolean;
 };

 type CuesheetTableProps = EditorCuesheetTableProps | ViewCuesheetTableProps;

-export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCuesheetMode }: CuesheetTableProps) {
-  const { flatRundown, status, loadedEventId } = useContextRundownTable();
+export default function CuesheetTable({
+  columns,
+  cuesheetMode,
+  source,
+  tableRoot,
+  setCuesheetMode,
+  isCurrentRundown,
+  insertElement,
+}: CuesheetTableProps) {
+  const { flatRundown, status, selectedEventId } = source;
  const { updateEntry, updateTimer, addEntry } = useEntryActionsContext();
  const canCreateEntries = useCuesheetPermissions((state) => state.canCreateEntries) && cuesheetMode === AppMode.Edit;

@@ -131,17 +143,17 @@ export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCue

  // in Run mode, follow the current event
  useEffect(() => {
-    if (virtuosoRef.current === null || cuesheetMode !== AppMode.Run || !loadedEventId) {
+    if (virtuosoRef.current === null || cuesheetMode !== AppMode.Run || !selectedEventId) {
      return;
    }

-    const eventIndex = flatRundown.findIndex((event) => event.id === loadedEventId);
+    const eventIndex = flatRundown.findIndex((event) => event.id === selectedEventId);
    if (eventIndex === -1) {
      return;
    }

    virtuosoRef.current.scrollToIndex({ index: eventIndex, behavior: 'auto', align: 'start', offset: -50 });
-  }, [cuesheetMode, flatRundown, loadedEventId]);
+  }, [cuesheetMode, flatRundown, selectedEventId]);

  // Provide an imperative scroll handler for explicit jumps (finder/keyboard)
  useEffect(() => {
@@ -230,9 +242,17 @@ export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCue
        handleResetResizing={resetColumnResizing}
        handleResetReordering={resetColumnOrder}
        handleClearToggles={setAllVisible}
-        appMode={cuesheetMode}
-        tableRoot={tableRoot}
-        setCuesheetMode={setCuesheetMode}
+        insertElement={insertElement}
+        modeControls={
+          tableRoot === 'cuesheet'
+            ? {
+                cuesheetMode,
+                setCuesheetMode,
+                isCurrentRundown,
+              }
+            : undefined
+        }
+        showShare={tableRoot === 'cuesheet'}
      />
      <TableVirtuoso
        ref={virtuosoRef}
@@ -10,9 +10,7 @@ import Button from '../../../../common/components/buttons/Button';
 import Checkbox from '../../../../common/components/checkbox/Checkbox';
 import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
 import PopoverContents from '../../../../common/components/popover/Popover';
-import { useRundownSelectionContext } from '../../../../common/context/RundownSelectionContext';
 import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
-import { RundownSelect } from '../../../../features/rundown/common/RundownSelect';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetPermissions } from '../../useTablePermissions';
 import CuesheetShareModal from './CuesheetShareModal';
@@ -32,15 +30,21 @@ type TableHeaderOptionValues = Pick<
  'hideTableSeconds' | 'hideIndexColumn' | 'showDelayedTimes' | 'hideDelays'
 >;

+type TableModeControls = {
+  cuesheetMode: AppMode;
+  setCuesheetMode: (mode: AppMode) => void;
+  isCurrentRundown?: boolean;
+};
+
 interface CuesheetTableHeaderToolbarProps {
  columns: Column<ExtendedEntry, unknown>[];
  optionsStore: TableHeaderOptionsStore;
  handleResetResizing: () => void;
  handleResetReordering: () => void;
  handleClearToggles: () => void;
-  setCuesheetMode?: (mode: AppMode) => void;
-  appMode: AppMode;
-  tableRoot: 'editor' | 'cuesheet';
+  insertElement?: ReactNode;
+  modeControls?: TableModeControls;
+  showShare?: boolean;
 }

 export default function CuesheetTableHeaderToolbar({
@@ -49,23 +53,23 @@ export default function CuesheetTableHeaderToolbar({
  handleResetResizing,
  handleResetReordering,
  handleClearToggles,
-  setCuesheetMode,
-  tableRoot,
-  appMode,
+  insertElement,
+  modeControls,
+  showShare = false,
 }: CuesheetTableHeaderToolbarProps) {
-  const canChangeMode = useCuesheetPermissions((state) => state.canChangeMode) && tableRoot === 'cuesheet';
-  const canShare = useCuesheetPermissions((state) => state.canShare) && tableRoot === 'cuesheet';
-  const showRundownSelect = tableRoot === 'cuesheet';
-  const { isLoadedRundown } = useRundownSelectionContext();
+  const canChangeMode = useCuesheetPermissions((state) => state.canChangeMode);
+  const canShare = useCuesheetPermissions((state) => state.canShare);

  const toggleCuesheetMode = (mode: AppMode[]) => {
    const newValue = mode.at(0);
-    if (!newValue || !setCuesheetMode) return;
-    setCuesheetMode(newValue);
+    if (!newValue || !modeControls) return;
+    modeControls.setCuesheetMode(newValue);
  };

+  const isBackground = !(modeControls?.isCurrentRundown ?? true);
+
  return (
-    <Toolbar.Root className={style.tableSettings} data-background-rundown={!isLoadedRundown}>
+    <Toolbar.Root className={style.tableSettings} data-background-rundown={isBackground}>
      <ViewSettings optionsStore={optionsStore} />
      <ColumnSettings
        columns={columns}
@@ -73,14 +77,14 @@ export default function CuesheetTableHeaderToolbar({
        handleResetReordering={handleResetReordering}
        handleClearToggles={handleClearToggles}
      />
-      <div className={style.apart}>
-        {showRundownSelect && <RundownSelect appMode={appMode} />}
-        {canChangeMode && (
+      {modeControls && canChangeMode && (
+        <div className={style.apart}>
+          {insertElement}
          <ToggleGroup
-            value={[appMode]}
+            value={[modeControls.cuesheetMode]}
            onValueChange={toggleCuesheetMode}
            className={style.group}
-            disabled={!isLoadedRundown}
+            disabled={!modeControls.isCurrentRundown}
          >
            <Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton}>
              Run
@@ -89,10 +93,10 @@ export default function CuesheetTableHeaderToolbar({
              Edit
            </Toolbar.Button>
          </ToggleGroup>
-        )}
-      </div>
+        </div>
+      )}

-      {canShare && (
+      {showShare && canShare && (
        <>
          <Editor.Separator orientation='vertical' />
          <CuesheetShareModal />
@@ -0,0 +1,65 @@
+import { useSessionStorage } from '@mantine/hooks';
+import { startTransition, useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router';
+
+import { useOrderedProjectList } from '../../common/hooks-query/useProjectList';
+import { useProjectRundowns } from '../../common/hooks-query/useProjectRundowns';
+import { serverURL } from '../../externals';
+
+export const FOLLOW_LOADED_RUNDOWN_ID = '__follow-loaded__' as const;
+
+export function getCuesheetRundownStorageKey(server: string, projectFilename: string) {
+  return `cuesheet-selected-rundown:${server}:${projectFilename}`;
+}
+
+export function resolveSelectedRundownId(storedSelectedRundownId: string | null, availableRundownIds: Set<string>) {
+  if (storedSelectedRundownId && availableRundownIds.has(storedSelectedRundownId)) return storedSelectedRundownId;
+  return FOLLOW_LOADED_RUNDOWN_ID;
+}
+
+export function useCuesheetRundownSelection() {
+  'use memo';
+
+  const { data: projectRundowns } = useProjectRundowns();
+  const {
+    data: { lastLoadedProject },
+  } = useOrderedProjectList();
+  const storageKey = useMemo(() => getCuesheetRundownStorageKey(serverURL, lastLoadedProject), [lastLoadedProject]);
+  const [storedSelectedRundownId, setStoredSelectedRundownId] = useSessionStorage<string | null>({
+    key: storageKey,
+    defaultValue: FOLLOW_LOADED_RUNDOWN_ID,
+  });
+
+  const availableRundownIds = new Set(projectRundowns.rundowns.map(({ id }) => id)).add(FOLLOW_LOADED_RUNDOWN_ID);
+  const { loaded: loadedRundownId } = projectRundowns;
+
+  const selectedRundownId = resolveSelectedRundownId(storedSelectedRundownId, availableRundownIds);
+
+  return {
+    loadedRundownId,
+    selectedRundownId,
+    projectRundowns: projectRundowns.rundowns,
+    setSelectedRundownId: (rundownId: string) => {
+      startTransition(() => {
+        setStoredSelectedRundownId(rundownId);
+      });
+    },
+  };
+}
+
+export function useDirectLinkToBackgroundEdit() {
+  const {
+    data: { lastLoadedProject },
+  } = useOrderedProjectList();
+  const navigate = useNavigate();
+  const storageKey = getCuesheetRundownStorageKey(serverURL, lastLoadedProject);
+  const [_, setStoredSelectedRundownId] = useSessionStorage<string | null>({ key: storageKey, defaultValue: null });
+
+  return useCallback(
+    async (rundownId: string) => {
+      await navigate('/cuesheet');
+      startTransition(() => setStoredSelectedRundownId(rundownId));
+    },
+    [setStoredSelectedRundownId, navigate],
+  );
+}
@@ -1,6 +1,5 @@
 import { lazy } from 'react';

-import { RundownSelectionContextProvider } from '../../common/context/RundownSelectionContext';
 import TrackingPlaybackBar from '../../features/control/playback/tracking-playback-bar/TrackingPlaybackBar';
 import { AppMode } from '../../ontimeConfig';
 import TitleList from './title-list/TitleList';
@@ -15,51 +14,44 @@ const MessageControl = lazy(() => import('../../features/control/message/Message
 export default function Editor() {
  const { layoutMode } = useEditorLayout();

-  switch (layoutMode) {
-    case EditorLayoutMode.TRACKING: {
-      return (
-        <div id='panels' className={`${styles.panelContainer} ${styles.panelContainerTracking}`}>
-          <div className={styles.rundownLayout}>
-            <div className={styles.titlesPanel}>
-              <RundownSelectionContextProvider>
-                <TitleList mode={AppMode.Run} />
-              </RundownSelectionContextProvider>
-            </div>
-            <div className={styles.rundownPanel}>
-              <Rundown />
-            </div>
-          </div>
-          <TrackingPlaybackBar />
+  if (layoutMode === EditorLayoutMode.CONTROL) {
+    return (
+      <div id='panels' className={styles.panelContainer}>
+        <div className={styles.left}>
+          <TimerControl />
+          <MessageControl />
        </div>
-      );
-    }
-    case EditorLayoutMode.PLANNING: {
-      return (
-        <div id='panels' className={styles.panelContainer}>
-          <div className={styles.rundownLayout}>
-            <div className={styles.titlesPanel}>
-              <RundownSelectionContextProvider>
-                <TitleList mode={AppMode.Edit} />
-              </RundownSelectionContextProvider>
-            </div>
-            <div className={styles.rundownPanel}>
-              <Rundown />
-            </div>
+        <Rundown />
+      </div>
+    );
+  }
+
+  if (layoutMode === EditorLayoutMode.TRACKING) {
+    return (
+      <div id='panels' className={`${styles.panelContainer} ${styles.panelContainerTracking}`}>
+        <div className={styles.rundownLayout}>
+          <div className={styles.titlesPanel}>
+            <TitleList mode={AppMode.Run} />
+          </div>
+          <div className={styles.rundownPanel}>
+            <Rundown />
          </div>
        </div>
-      );
-    }
-    case EditorLayoutMode.CONTROL:
-    default: {
-      return (
-        <div id='panels' className={styles.panelContainer}>
-          <div className={styles.left}>
-            <TimerControl />
-            <MessageControl />
-          </div>
+        <TrackingPlaybackBar />
+      </div>
+    );
+  }
+
+  return (
+    <div id='panels' className={styles.panelContainer}>
+      <div className={styles.rundownLayout}>
+        <div className={styles.titlesPanel}>
+          <TitleList mode={AppMode.Edit} />
+        </div>
+        <div className={styles.rundownPanel}>
          <Rundown />
        </div>
-      );
-    }
-  }
+      </div>
+    </div>
+  );
 }
@@ -1,7 +1,7 @@
 import { EntryId, MaybeString, SupportedEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';

-import { useContextRundownFinder } from '../../../common/hooks-query/useContextRundown';
+import { useFlatRundown } from '../../../common/hooks-query/useRundown';
 import { useSelectAndRevealEntry } from '../../../features/rundown/useSelectAndRevealEntry';

 const maxResults = 12;
@@ -38,7 +38,7 @@ type FilterableMilestone = {
 type FilterableEntry = FilterableGroup | FilterableEvent | FilterableMilestone;

 export default function useFinder() {
-  const { rundown: data, rundownId } = useContextRundownFinder();
+  const { data, rundownId } = useFlatRundown();
  const [results, setResults] = useState<FilterableEntry[]>([]);
  const [error, setError] = useState<MaybeString>(null);
  const lastSearchString = useRef('');
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';

 import ScrollArea from '../../../common/components/scroll-area/ScrollArea';
-import { useContextRundownList } from '../../../common/hooks-query/useContextRundown';
+import useRundown from '../../../common/hooks-query/useRundown';
 import { useSelectedEventId } from '../../../common/hooks/useSocket';
 import { ExtendedEntry, getFlatRundownMetadata } from '../../../common/utils/rundownMetadata';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
@@ -20,7 +20,7 @@ interface TitleListProps {
 }

 export default function TitleList({ mode }: TitleListProps) {
-  const { rundown } = useContextRundownList();
+  const { data: rundown } = useRundown();
  const selectedEventId = useSelectedEventId();
  const cursor = useEventSelection((state) => state.cursor);

@@ -1,9 +1,6 @@
 import { isValueOfEnum } from 'ontime-utils';
-import { useCallback, useEffect } from 'react';
 import { useSearchParams } from 'react-router';

-import { setSelectRundownInParams } from '../../common/context/RundownSelectionContext';
-
 const layoutParam = 'layout';

 export enum EditorLayoutMode {
@@ -23,29 +20,14 @@ function getEditorLayout(value: string | null): EditorLayoutMode {
 }

 export function useEditorLayout() {
-  'use memo';
-
  const [searchParams, setSearchParams] = useSearchParams();
  const layoutMode = getEditorLayout(searchParams.get(layoutParam));

-  useEffect(() => {
-    setSearchParams((searchParams) => {
-      if (layoutMode !== EditorLayoutMode.PLANNING) setSelectRundownInParams(null, searchParams);
-      return searchParams;
-    });
-  }, [setSearchParams, layoutMode]);
-
-  const setLayoutMode = useCallback(
-    (mode: EditorLayoutMode) => {
-      setSearchParams((searchParams) => {
-        searchParams.set(layoutParam, mode);
-        // Only the Planning layout is allowed to look at something other than the current rundown
-        if (mode !== EditorLayoutMode.PLANNING) setSelectRundownInParams(null, searchParams);
-        return searchParams;
-      });
-    },
-    [setSearchParams],
-  );
+  const setLayoutMode = (mode: EditorLayoutMode) => {
+    const nextParams = new URLSearchParams(searchParams);
+    nextParams.set(layoutParam, mode);
+    setSearchParams(nextParams, { replace: true });
+  };

  return { layoutMode, setLayoutMode };
 }
@@ -16,7 +16,7 @@ export interface TimelineData {

 export function useTimelineData(): ViewData<TimelineData> {
  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata(null);
+  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
  const { data: projectData, status: projectDataStatus } = useProjectData();
  const { data: settings, status: settingsStatus } = useSettings();
  const { data: customFields, status: customFieldsStatus } = useCustomFields();
@@ -2,7 +2,7 @@ import { CustomFields, ProjectData, RundownEntries, Settings, ViewSettings } fro

 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import { useRundown } from '../../common/hooks-query/useRundown';
+import useRundown from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
@@ -26,7 +26,7 @@ export function useTimerData(): ViewData<TimerData> {
  const { data: viewSettings, status: viewSettingsStatus } = useViewSettings();
  const { data: settings, status: settingsStatus } = useSettings();
  const { data: customFields, status: customFieldsStatus } = useCustomFields();
-  const { data: rundown, status: rundownStatus } = useRundown(null);
+  const { data: rundown, status: rundownStatus } = useRundown();
  const { entries } = rundown;

  return {
@@ -1,10 +1,9 @@
 import { copyFile } from 'fs/promises';
 import { join } from 'path';

-import { DatabaseModel, LogOrigin, ProjectFileListResponse, RefetchKey } from 'ontime-types';
+import { DatabaseModel, LogOrigin, ProjectFileListResponse } from 'ontime-types';
 import { getErrorMessage, getFirstRundown } from 'ontime-utils';

-import { sendRefetch } from '../../adapters/WebsocketAdapter.js';
 import { parseCustomFields } from '../../api-data/custom-fields/customFields.parser.js';
 import { parseDatabaseModel } from '../../api-data/db/db.parser.js';
 import { getCurrentRundown } from '../../api-data/rundown/rundown.dao.js';
@@ -106,9 +105,6 @@ async function loadProject(projectData: DatabaseModel, fileName: string, rundown
    currentProjectName: fileName,
  };

-  setImmediate(() => {
-    sendRefetch(RefetchKey.ProjectFiles);
-  });
  return fileName;
 }

@@ -267,10 +263,6 @@ export async function duplicateProjectFile(originalFile: string, newFilename: st

  const pathToDuplicate = getPathToProject(newFilename);
  await copyFile(projectFilePath, pathToDuplicate);
-
-  setImmediate(() => {
-    sendRefetch(RefetchKey.ProjectFiles);
-  });
  return;
 }

@@ -301,10 +293,6 @@ export async function renameProjectFile(originalFile: string, newFilename: strin
    const newFileName = await loadProject(projectData.data, newFilename);
    return newFileName;
  }
-
-  setImmediate(() => {
-    sendRefetch(RefetchKey.ProjectFiles);
-  });
  return newFilename;
 }

@@ -344,9 +332,6 @@ export async function deleteProjectFile(filename: string) {
  }

  await deleteFile(projectFilePath);
-  setImmediate(() => {
-    sendRefetch(RefetchKey.ProjectFiles);
-  });
 }

 /**
@@ -389,7 +374,6 @@ export async function patchCurrentProject(data: Partial<DatabaseModel>) {
    }
  }

-  const updatedData = getDataProvider().getData();
-
+  const updatedData = await getDataProvider().getData();
  return updatedData;
 }
@@ -1,7 +1,6 @@
 export enum RefetchKey {
  All = 'all',
  CustomFields = 'custom-fields',
-  ProjectFiles = 'project-files',
  ProjectData = 'project-data',
  ProjectRundowns = 'project-rundowns',
  Report = 'report',
Author	SHA1	Message	Date
Claude	4e2baf1fa1	feat(network): add session status card Display server health metrics from the unused /session endpoint: - Connected clients count (live from useClientStore) - Server uptime since last restart - Last client connection time (relative) - Last integration request time (relative) - Server timezone - Cloud latency (Docker only) with warning threshold Adds useSessionStats hook with 60s refetch interval, new NetworkStatus component as first card in Network panel, and navigation menu entries for Server status and Network interfaces sections. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NrhcEgY8mqaxZi8veMPrrx	2026-08-01 18:28:15 +00:00
Claude	46e4ac94f1	feat(log): add filters to the event log and cap the log store Finding a single error in a stream of RX/TX traffic was not practical with only the origin filters. - add a text filter and an issues only filter - show how many entries are being displayed - add an empty state which distinguishes no activity from no matches - collapse the six origin flags into a single set - cap the log store at 500 entries, it was growing unbounded for the duration of a session - the event log button was labelled Extract, which did not convey that it opens the log in a new window Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NrhcEgY8mqaxZi8veMPrrx	2026-08-01 13:20:46 +00:00
Claude	b5e1bccc70	feat(network): help users orient themselves in the network panel - add a network interfaces card to the network panel. The addresses users need to reach Ontime from other devices were only available in the sharing panel - show the port along with the address, the bare IP is not enough to reach the server - explain what each section does and how the client actions behave - the client path was selectable text but could not be opened or copied. It now uses a copy tag with the full client URL, which also makes the client origin visible in setups with several interfaces Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NrhcEgY8mqaxZi8veMPrrx	2026-08-01 13:18:52 +00:00
Claude	c840add9c5	fix(network): correct defects in client management UI - self row highlight lost a specificity fight with the table zebra striping, so the current client was only highlighted on odd rows. Reuse the data attribute pattern already used for data-warn - drop reference to a `blink` class which was never defined, the button variant already communicates the identify state - use `th` in table headers so the shared table header styling applies, matching the other settings panels - add empty states to both client tables - keep a stable row order (self first, then by name) so rows do not move as clients connect and disconnect - the redirect dialog disabled its view select when no URL presets existed, making it impossible to redirect to a plain view. Its default value also disagreed with component state, leaving the button disabled until the visible value was re-picked - rename dialog now autofocuses and submits on Enter - move the cloud ping into a card, matching the panel conventions, and flag high latency values Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NrhcEgY8mqaxZi8veMPrrx	2026-08-01 13:15:43 +00:00