diff --git a/src/action-handler-directive.ts b/src/action-handler-directive.ts
index 170c3e41..fdfd0472 100644
--- a/src/action-handler-directive.ts
+++ b/src/action-handler-directive.ts
@@ -180,6 +180,29 @@ export const actionHandler = directive(
   },
 );
 
+export interface ActionEventTarget extends EventTarget {
+  addEventListener(
+    event: '@action',
+    listener: (this: ActionEventTarget, ev: CustomEvent<ActionHandlerDetail>) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+  addEventListener(
+    type: string,
+    callback: EventListenerOrEventListenerObject,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+  removeEventListener(
+    event: '@action',
+    listener: (this: ActionEventTarget, ev: CustomEvent<ActionHandlerDetail>) => void,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  removeEventListener(
+    type: string,
+    callback: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions,
+  ): void;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'action-handler-frigate-card': ActionHandler;
diff --git a/src/automations.ts b/src/automations.ts
deleted file mode 100644
index 643b610d..00000000
--- a/src/automations.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { HomeAssistant } from 'custom-card-helpers';
-import { AutomationActions, FrigateCardError } from './types.js';
-import { ConditionController } from './conditions.js';
-import { Automation, Automations } from './types.js';
-import { frigateCardHandleAction } from './utils/action.js';
-import { localize } from './localize/localize.js';
-
-const MAX_NESTED_AUTOMATION_EXECUTIONS = 10;
-
-export class AutomationsControllerError extends FrigateCardError {}
-
-export class AutomationsController {
-  protected _automations: Automations;
-  protected _priorEvaluations: Map<Automation, boolean> = new Map();
-
-  // A counter to avoid infinite loops, increases every time actions are run,
-  // decreases every time actions are complete.
-  protected _nestedAutomationExecutions = 0;
-
-  constructor(automations: Automations) {
-    this._automations = automations;
-  }
-
-  public execute(
-    element: HTMLElement,
-    hass: HomeAssistant,
-    conditionController: ConditionController,
-  ): void {
-    const actionsToRun: AutomationActions[] = [];
-    for (const automation of this._automations ?? []) {
-      const shouldExecute = conditionController.evaluateCondition(automation.conditions);
-      const actions = shouldExecute ? automation.actions : automation.actions_not;
-      const priorEvaluation = this._priorEvaluations.get(automation);
-      this._priorEvaluations.set(automation, shouldExecute);
-      if (shouldExecute !== priorEvaluation && actions) {
-        actionsToRun.push(actions);
-      }
-    }
-
-    ++this._nestedAutomationExecutions;
-    if (this._nestedAutomationExecutions > MAX_NESTED_AUTOMATION_EXECUTIONS) {
-      throw new AutomationsControllerError(localize('error.too_many_automations'));
-    }
-
-    actionsToRun.forEach((actions) => {
-      frigateCardHandleAction(element, hass, {}, actions);
-    });
-    --this._nestedAutomationExecutions;
-  }
-}
diff --git a/src/camera-manager/engine-factory.ts b/src/camera-manager/engine-factory.ts
index 61dd5901..e7381b1d 100644
--- a/src/camera-manager/engine-factory.ts
+++ b/src/camera-manager/engine-factory.ts
@@ -1,6 +1,6 @@
 import { HomeAssistant } from 'custom-card-helpers';
 import { localize } from '../localize/localize';
-import { CameraConfig, CardWideConfig } from '../types';
+import { CameraConfig } from '../types';
 import { BrowseMediaManager } from '../utils/ha/browse-media/browse-media-manager';
 import { BrowseMedia } from '../utils/ha/browse-media/types';
 import { EntityRegistryManager } from '../utils/ha/entity-registry';
@@ -15,15 +15,12 @@ import { getCameraEntityFromConfig } from './util';
 export class CameraManagerEngineFactory {
   protected _entityRegistryManager: EntityRegistryManager;
   protected _resolvedMediaCache: ResolvedMediaCache;
-  protected _cardWideConfig: CardWideConfig;
 
   constructor(
     entityRegistryManager: EntityRegistryManager,
     resolvedMediaCache: ResolvedMediaCache,
-    cardWideConfig: CardWideConfig,
   ) {
     this._entityRegistryManager = entityRegistryManager;
-    this._cardWideConfig = cardWideConfig;
     this._resolvedMediaCache = resolvedMediaCache;
   }
 
@@ -37,7 +34,6 @@ export class CameraManagerEngineFactory {
       case Engine.Frigate:
         const { FrigateCameraManagerEngine } = await import('./frigate/engine-frigate');
         cameraManagerEngine = new FrigateCameraManagerEngine(
-          this._cardWideConfig,
           new RecordingSegmentsCache(),
           new RequestCache(),
         );
diff --git a/src/camera-manager/frigate/engine-frigate.ts b/src/camera-manager/frigate/engine-frigate.ts
index e4c43492..8305911b 100644
--- a/src/camera-manager/frigate/engine-frigate.ts
+++ b/src/camera-manager/frigate/engine-frigate.ts
@@ -1,24 +1,52 @@
 import { HomeAssistant } from 'custom-card-helpers';
 import add from 'date-fns/add';
 import endOfHour from 'date-fns/endOfHour';
+import format from 'date-fns/format';
+import fromUnixTime from 'date-fns/fromUnixTime';
 import startOfHour from 'date-fns/startOfHour';
-import { CameraConfig, CardWideConfig, ExtendedHomeAssistant } from '../../types';
+import isEqual from 'lodash-es/isEqual';
+import orderBy from 'lodash-es/orderBy';
+import throttle from 'lodash-es/throttle';
+import uniq from 'lodash-es/uniq';
+import uniqWith from 'lodash-es/uniqWith';
+import { localize } from '../../localize/localize';
+import { CameraConfig, ExtendedHomeAssistant } from '../../types';
+import {
+  allPromises,
+  formatDate,
+  prettifyTitle,
+  runWhenIdleIfSupported,
+} from '../../utils/basic';
+import { getEntityTitle } from '../../utils/ha';
+import { EntityRegistryManager } from '../../utils/ha/entity-registry';
+import { Entity } from '../../utils/ha/entity-registry/types';
 import { ViewMedia } from '../../view/media';
+import { ViewMediaClassifier } from '../../view/media-classifier';
 import { RecordingSegmentsCache, RequestCache } from '../cache';
 import {
-  CameraManagerEngine,
   CAMERA_MANAGER_ENGINE_EVENT_LIMIT_DEFAULT,
+  CameraManagerEngine,
 } from '../engine';
+import { CameraInitializationError } from '../error';
+import { GenericCameraManagerEngine } from '../generic/engine-generic';
 import { DateRange } from '../range';
 import {
-  CameraManagerCameraMetadata,
+  CameraConfigs,
+  CameraEndpoint,
+  CameraEndpoints,
+  CameraEndpointsContext,
   CameraManagerCameraCapabilities,
+  CameraManagerCameraMetadata,
   CameraManagerMediaCapabilities,
   DataQuery,
   Engine,
+  EngineOptions,
   EventQuery,
   EventQueryResults,
   EventQueryResultsMap,
+  MediaMetadataQuery,
+  MediaMetadataQueryResults,
+  MediaMetadataQueryResultsMap,
   PartialEventQuery,
   PartialRecordingQuery,
   PartialRecordingSegmentsQuery,
@@ -32,56 +60,26 @@ import {
   RecordingSegment,
   RecordingSegmentsQuery,
   RecordingSegmentsQueryResultsMap,
-  CameraEndpointsContext,
-  CameraConfigs,
-  CameraEndpoints,
-  CameraEndpoint,
-  MediaMetadataQuery,
-  MediaMetadataQueryResults,
-  MediaMetadataQueryResultsMap,
-  EngineOptions,
 } from '../types';
+import { getCameraEntityFromConfig } from '../util';
+import frigateLogo from './assets/frigate-logo-dark.svg';
+import { FrigateViewMediaFactory } from './media';
+import { FrigateViewMediaClassifier } from './media-classifier';
 import {
-  FrigateEventQueryResults,
-  FrigateRecordingQueryResults,
-  FrigateRecordingSegmentsQueryResults,
-  FrigateRecording,
-} from './types';
-import {
-  getEvents,
-  getEventSummary,
-  getRecordingSegments,
-  getRecordingsSummary,
   NativeFrigateEventQuery,
   NativeFrigateRecordingSegmentsQuery,
+  getEventSummary,
+  getEvents,
+  getRecordingSegments,
+  getRecordingsSummary,
   retainEvent,
 } from './requests';
-import isEqual from 'lodash-es/isEqual';
-import orderBy from 'lodash-es/orderBy';
-import throttle from 'lodash-es/throttle';
-import uniqWith from 'lodash-es/uniqWith';
 import {
-  allPromises,
-  formatDate,
-  prettifyTitle,
-  runWhenIdleIfSupported,
-} from '../../utils/basic';
-import fromUnixTime from 'date-fns/fromUnixTime';
-import sum from 'lodash-es/sum';
-import { FrigateViewMediaClassifier } from './media-classifier';
-import { ViewMediaClassifier } from '../../view/media-classifier';
-import { FrigateViewMediaFactory } from './media';
-import { log } from '../../utils/debug';
-import { getEntityTitle } from '../../utils/ha';
-import { EntityRegistryManager } from '../../utils/ha/entity-registry';
-import { Entity } from '../../utils/ha/entity-registry/types';
-import { CameraInitializationError } from '../error';
-import { localize } from '../../localize/localize';
-import uniq from 'lodash-es/uniq';
-import format from 'date-fns/format';
-import { GenericCameraManagerEngine } from '../generic/engine-generic';
-import frigateLogo from './assets/frigate-logo-dark.svg';
-import { getCameraEntityFromConfig } from '../util';
+  FrigateEventQueryResults,
+  FrigateRecording,
+  FrigateRecordingQueryResults,
+  FrigateRecordingSegmentsQueryResults,
+} from './types';
 
 const EVENT_REQUEST_CACHE_MAX_AGE_SECONDS = 60;
 const RECORDING_SUMMARY_REQUEST_CACHE_MAX_AGE_SECONDS = 60;
@@ -120,7 +118,6 @@ export class FrigateCameraManagerEngine
 {
   protected _recordingSegmentsCache: RecordingSegmentsCache;
   protected _requestCache: RequestCache;
-  protected _cardWideConfig: CardWideConfig;
 
   // Garbage collect segments at most once an hour.
   protected _throttledSegmentGarbageCollector = throttle(
@@ -130,12 +127,10 @@ export class FrigateCameraManagerEngine
   );
 
   constructor(
-    cardWideConfig: CardWideConfig,
     recordingSegmentsCache: RecordingSegmentsCache,
     requestCache: RequestCache,
   ) {
     super();
-    this._cardWideConfig = cardWideConfig;
     this._recordingSegmentsCache = recordingSegmentsCache;
     this._requestCache = requestCache;
   }
@@ -989,12 +984,6 @@ export class FrigateCameraManagerEngine
       type: QueryType.Recording,
     };
 
-    const countSegments = () =>
-      sum(
-        cameraIDs.map((cameraID) => this._recordingSegmentsCache.getSize(cameraID) ?? 0),
-      );
-    const segmentsStart = countSegments();
-
     // Performance: _recordingSegments is potentially very large (e.g. 10K - 1M
     // items) and each item must be examined, so care required here to stick to
     // nothing worse than O(n) performance.
@@ -1029,12 +1018,6 @@ export class FrigateCameraManagerEngine
         },
       );
     }
-
-    log(
-      this._cardWideConfig,
-      'Frigate Card recording segment garbage collection: ' +
-        `Released ${segmentsStart - countSegments()} segment(s)`,
-    );
   }
 
   /**
diff --git a/src/camera-manager/manager.ts b/src/camera-manager/manager.ts
index b686082f..f2c7bc67 100644
--- a/src/camera-manager/manager.ts
+++ b/src/camera-manager/manager.ts
@@ -1,23 +1,30 @@
 import { HomeAssistant } from 'custom-card-helpers';
-import {
-  CameraConfig,
-  CamerasConfig,
-  CardWideConfig,
-  ExtendedHomeAssistant,
-} from '../types.js';
+import add from 'date-fns/add';
+import cloneDeep from 'lodash-es/cloneDeep';
+import merge from 'lodash-es/merge.js';
+import sum from 'lodash-es/sum';
+import { MEDIA_CHUNK_SIZE_DEFAULT } from '../const.js';
+import { localize } from '../localize/localize.js';
+import { CameraConfig, CamerasConfig } from '../types.js';
 import { allPromises, arrayify, setify } from '../utils/basic.js';
+import { getCameraID } from '../utils/camera.js';
+import { CardCameraAPI } from '../utils/card-controller/types.js';
+import { log } from '../utils/debug.js';
+import { EntityRegistryManager } from '../utils/ha/entity-registry/index.js';
+import { ViewMedia } from '../view/media.js';
+import { CameraManagerEngineFactory } from './engine-factory.js';
+import { CameraManagerEngine } from './engine.js';
+import { CameraInitializationError } from './error.js';
+import { CameraManagerReadOnlyConfigStore, CameraManagerStore } from './store.js';
 import {
-  CameraManagerCameraCapabilities,
+  CameraEndpoint, CameraEndpoints, CameraEndpointsContext, CameraManagerCameraCapabilities,
   CameraManagerCameraMetadata,
   CameraManagerCapabilities,
-  CameraManagerMediaCapabilities,
-  CameraEndpointsContext,
-  DataQuery,
-  EventQuery,
+  CameraManagerMediaCapabilities, DataQuery, Engine, EngineOptions, EventQuery,
   EventQueryResults,
   EventQueryResultsMap,
-  MediaMetadata,
-  MediaQuery,
+  MediaMetadata, MediaMetadataQuery,
+  MediaMetadataQueryResults, MediaQuery,
   PartialDataQuery,
   PartialEventQuery,
   PartialQueryConcreteType,
@@ -33,27 +40,8 @@ import {
   RecordingSegmentsQuery,
   RecordingSegmentsQueryResults,
   RecordingSegmentsQueryResultsMap,
-  ResultsMap,
-  CameraEndpoints,
-  Engine,
-  MediaMetadataQuery,
-  MediaMetadataQueryResults,
-  EngineOptions,
-  CameraEndpoint,
+  ResultsMap
 } from './types.js';
-import { CameraManagerEngineFactory } from './engine-factory.js';
-import { ViewMedia } from '../view/media.js';
-import { CameraManagerEngine } from './engine.js';
-import sum from 'lodash-es/sum';
-import add from 'date-fns/add';
-import { log } from '../utils/debug.js';
-import { EntityRegistryManager } from '../utils/ha/entity-registry/index.js';
-import { getCameraID } from '../utils/camera.js';
-import { localize } from '../localize/localize.js';
-import { CameraInitializationError } from './error.js';
-import { CameraManagerReadOnlyConfigStore, CameraManagerStore } from './store.js';
-import cloneDeep from 'lodash-es/cloneDeep';
-import { MEDIA_CHUNK_SIZE_DEFAULT } from '../const.js';
 import { sortMedia } from './util.js';
 
 class QueryClassifier {
@@ -112,25 +100,51 @@ interface InitializedCamera {
 }
 
 export class CameraManager {
+  protected _api: CardCameraAPI;
   protected _engineFactory: CameraManagerEngineFactory;
-  protected _cardWideConfig?: CardWideConfig;
-  protected _store: CameraManagerStore;
+  protected _store = new CameraManagerStore();
 
-  constructor(
-    engineFactory: CameraManagerEngineFactory,
-    cardWideConfig?: CardWideConfig,
-  ) {
-    this._engineFactory = engineFactory;
-    this._cardWideConfig = cardWideConfig;
-    this._store = new CameraManagerStore();
+  constructor(api: CardCameraAPI) {
+    this._api = api;
+    this._engineFactory = new CameraManagerEngineFactory(
+      this._api.getEntityRegistryManager(),
+      this._api.getResolvedMediaCache(),
+    );
+  }
+
+  public async initializeCamerasFromConfig(): Promise<void> {
+    const config = this._api.getConfigManager().getConfig();
+    const hass = this._api.getHASSManager().getHASS();
+
+    if (!config || !hass) {
+      return;
+    }
+
+    // For each camera merge the config (which has no defaults) into the camera
+    // global config (which does have defaults). The merging must happen in this
+    // order, to ensure that the defaults in the cameras global config do not
+    // override the values specified in the per-camera config.
+    const cameras = config.cameras.map((camera) =>
+      merge(cloneDeep(config?.cameras_global), camera),
+    );
+
+    try {
+      await this._initializeCameras(cameras);
+    } catch (e: unknown) {
+      this._api.getMessageManager().setErrorIfHigherPriority(e);
+    }
   }
 
   protected async _getEnginesForCameras(
-    hass: HomeAssistant,
     camerasConfig: CamerasConfig,
   ): Promise<Map<CameraConfig, CameraManagerEngine>> {
     const output: Map<CameraConfig, CameraManagerEngine> = new Map();
     const engines: Map<Engine, CameraManagerEngine> = new Map();
+    const hass = this._api.getHASSManager().getHASS();
+
+    if (!hass) {
+      return output;
+    }
 
     const getEngineTypes = async (configs: CameraConfig[]) => {
       return await allPromises(configs, (config) =>
@@ -142,7 +156,7 @@ export class CameraManager {
     for (const [index, cameraConfig] of camerasConfig.entries()) {
       const engineType = engineTypes[index];
       const engine = engineType
-        ? engines.get(engineType) ?? await this._engineFactory.createEngine(engineType)
+        ? engines.get(engineType) ?? (await this._engineFactory.createEngine(engineType))
         : null;
       if (!engine || !engineType) {
         throw new CameraInitializationError(
@@ -177,12 +191,13 @@ export class CameraManager {
     };
   }
 
-  public async initializeCameras(
-    hass: HomeAssistant,
-    entityRegistryManager: EntityRegistryManager,
-    camerasConfig: CamerasConfig,
-  ): Promise<void> {
+  protected async _initializeCameras(camerasConfig: CamerasConfig): Promise<void> {
     const initializationStartTime = new Date();
+    const hass = this._api.getHASSManager().getHASS();
+
+    if (!hass) {
+      return;
+    }
 
     const hasAutoTriggers = (config: CameraConfig): boolean => {
       return config.triggers.motion || config.triggers.occupancy;
@@ -195,18 +210,23 @@ export class CameraManager {
       // ... then we need to populate the entity cache by fetching all entities
       // from Home Assistant. Do this once upfront, to avoid each camera doing
       // it.
-      await entityRegistryManager.fetchEntityList(hass);
+      await this._api.getEntityRegistryManager().fetchEntityList(hass);
     }
 
     // Engines are created sequentially, to avoid duplicate creation of the same
     // engine. See: https://github.com/dermotduffy/frigate-hass-card/issues/941
-    const engineByConfig = await this._getEnginesForCameras(hass, camerasConfig);
+    const engineByConfig = await this._getEnginesForCameras(camerasConfig);
 
     // Configuration is initialized in parallel.
     const results = await allPromises(
       engineByConfig.entries(),
       async ([cameraConfig, engine]) =>
-        await this._initializeCamera(hass, engine, entityRegistryManager, cameraConfig),
+        await this._initializeCamera(
+          hass,
+          engine,
+          this._api.getEntityRegistryManager(),
+          cameraConfig,
+        ),
     );
 
     // Do the additions based off the result-order, to ensure the map order is
@@ -236,7 +256,7 @@ export class CameraManager {
     }
 
     log(
-      this._cardWideConfig,
+      this._api.getConfigManager().getCardWideConfig(),
       'Frigate Card CameraManager initialized (Cameras: ',
       this._store.getCameras(),
       `, Duration: ${
@@ -284,7 +304,7 @@ export class CameraManager {
     });
   }
 
-  public async getMediaMetadata(hass: HomeAssistant): Promise<MediaMetadata | null> {
+  public async getMediaMetadata(): Promise<MediaMetadata | null> {
     const tags: Set<string> = new Set();
     const what: Set<string> = new Set();
     const where: Set<string> = new Set();
@@ -295,7 +315,7 @@ export class CameraManager {
       cameraIDs: this._store.getCameraIDs(),
     };
 
-    const results = await this._handleQuery(hass, query);
+    const results = await this._handleQuery(query);
 
     for (const result of results?.values() ?? []) {
       if (result.metadata.tags) {
@@ -365,47 +385,46 @@ export class CameraManager {
   }
 
   public async getEvents(
-    hass: HomeAssistant,
     query: EventQuery | EventQuery[],
     engineOptions?: EngineOptions,
   ): Promise<EventQueryResultsMap> {
-    return await this._handleQuery(hass, query, engineOptions);
+    return await this._handleQuery(query, engineOptions);
   }
 
   public async getRecordings(
-    hass: HomeAssistant,
     query: RecordingQuery | RecordingQuery[],
     engineOptions?: EngineOptions,
   ): Promise<RecordingQueryResultsMap> {
-    return await this._handleQuery(hass, query, engineOptions);
+    return await this._handleQuery(query, engineOptions);
   }
 
   public async getRecordingSegments(
-    hass: HomeAssistant,
     query: RecordingSegmentsQuery | RecordingSegmentsQuery[],
     engineOptions?: EngineOptions,
   ): Promise<RecordingSegmentsQueryResultsMap> {
-    return await this._handleQuery(hass, query, engineOptions);
+    return await this._handleQuery(query, engineOptions);
   }
 
   public async executeMediaQueries<T extends MediaQuery>(
-    hass: HomeAssistant,
     queries: T[],
     engineOptions?: EngineOptions,
   ): Promise<ViewMedia[] | null> {
     return this._convertQueryResultsToMedia(
-      hass,
-      await this._handleQuery(hass, queries, engineOptions),
+      await this._handleQuery(queries, engineOptions),
     );
   }
 
   public async extendMediaQueries<T extends MediaQuery>(
-    hass: HomeAssistant,
     queries: T[],
     results: ViewMedia[],
     direction: 'earlier' | 'later',
     engineOptions?: EngineOptions,
   ): Promise<ExtendedMediaQueryResult<T> | null> {
+    const hass = this._api.getHASSManager().getHASS();
+    if (!hass) {
+      return null;
+    }
+
     const getTimeFromResults = (want: 'earliest' | 'latest'): Date | null => {
       let output: Date | null = null;
       for (const result of results) {
@@ -423,8 +442,8 @@ export class CameraManager {
     };
 
     const chunkSize =
-      this._cardWideConfig?.performance?.features.media_chunk_size ??
-      MEDIA_CHUNK_SIZE_DEFAULT;
+      this._api.getConfigManager().getCardWideConfig()?.performance?.features
+        .media_chunk_size ?? MEDIA_CHUNK_SIZE_DEFAULT;
 
     // The queries associated with the chunk to fetch.
     const newChunkQueries: T[] = [];
@@ -456,8 +475,7 @@ export class CameraManager {
     }
 
     const newChunkMedia = this._convertQueryResultsToMedia(
-      hass,
-      await this._handleQuery(hass, newChunkQueries, engineOptions),
+      await this._handleQuery(newChunkQueries, engineOptions),
     );
 
     if (!newChunkMedia.length) {
@@ -478,14 +496,12 @@ export class CameraManager {
     };
   }
 
-  public async getMediaDownloadPath(
-    hass: ExtendedHomeAssistant,
-    media: ViewMedia,
-  ): Promise<CameraEndpoint | null> {
+  public async getMediaDownloadPath(media: ViewMedia): Promise<CameraEndpoint | null> {
     const cameraConfig = this._store.getCameraConfigForMedia(media);
     const engine = this._store.getEngineForMedia(media);
+    const hass = this._api.getHASSManager().getHASS();
 
-    if (!cameraConfig || !engine) {
+    if (!cameraConfig || !engine || !hass) {
       return null;
     }
     return await engine.getMediaDownloadPath(hass, cameraConfig, media);
@@ -499,15 +515,12 @@ export class CameraManager {
     return engine.getMediaCapabilities(media);
   }
 
-  public async favoriteMedia(
-    hass: HomeAssistant,
-    media: ViewMedia,
-    favorite: boolean,
-  ): Promise<void> {
+  public async favoriteMedia(media: ViewMedia, favorite: boolean): Promise<void> {
     const cameraConfig = this._store.getCameraConfigForMedia(media);
     const engine = this._store.getEngineForMedia(media);
+    const hass = this._api.getHASSManager().getHASS();
 
-    if (!cameraConfig || !engine) {
+    if (!cameraConfig || !engine || !hass) {
       return;
     }
 
@@ -515,7 +528,7 @@ export class CameraManager {
     await engine.favoriteMedia(hass, cameraConfig, media, favorite);
 
     log(
-      this._cardWideConfig,
+      this._api.getConfigManager().getCardWideConfig(),
       'Frigate Card CameraManager favorite request (',
       `Duration: ${(new Date().getTime() - queryStartTime.getTime()) / 1000}s,`,
       'Media:',
@@ -550,16 +563,15 @@ export class CameraManager {
     return true;
   }
 
-  public async getMediaSeekTime(
-    hass: HomeAssistant,
-    media: ViewMedia,
-    target: Date,
-  ): Promise<number | null> {
+  public async getMediaSeekTime(media: ViewMedia, target: Date): Promise<number | null> {
     const startTime = media.getStartTime();
     const endTime = media.getEndTime();
     const cameraConfig = this._store.getCameraConfigForMedia(media);
     const engine = this._store.getEngineForMedia(media);
+    const hass = this._api.getHASSManager().getHASS();
+
     if (
+      !hass ||
       !cameraConfig ||
       !engine ||
       !startTime ||
@@ -574,13 +586,17 @@ export class CameraManager {
   }
 
   protected async _handleQuery<QT extends DataQuery>(
-    hass: HomeAssistant,
     query: QT | QT[],
     engineOptions?: EngineOptions,
   ): Promise<Map<QT, QueryReturnType<QT>>> {
     const _queries = arrayify(query);
     const results = new Map<QT, QueryReturnType<QT>>();
     const queryStartTime = new Date();
+    const hass = this._api.getHASSManager().getHASS();
+
+    if (!hass) {
+      return results;
+    }
 
     const processEngineQuery = async (
       engine: CameraManagerEngine,
@@ -643,7 +659,7 @@ export class CameraManager {
     );
 
     log(
-      this._cardWideConfig,
+      this._api.getConfigManager().getCardWideConfig(),
       'Frigate Card CameraManager request [Input queries:',
       _queries.length,
       ', Cached output queries:',
@@ -662,10 +678,15 @@ export class CameraManager {
   }
 
   protected _convertQueryResultsToMedia<QT extends DataQuery>(
-    hass: HomeAssistant,
     results: ResultsMap<QT>,
   ): ViewMedia[] {
     const mediaArray: ViewMedia[] = [];
+    const hass = this._api.getHASSManager().getHASS();
+
+    if (!hass) {
+      return mediaArray;
+    }
+
     for (const [query, result] of results.entries()) {
       const engine = this._store.getEngineOfType(result.engine);
 
@@ -712,13 +733,12 @@ export class CameraManager {
     return engine.getCameraEndpoints(cameraConfig, context);
   }
 
-  public getCameraMetadata(
-    hass: HomeAssistant,
-    cameraID: string,
-  ): CameraManagerCameraMetadata | null {
+  public getCameraMetadata(cameraID: string): CameraManagerCameraMetadata | null {
     const cameraConfig = this._store.getCameraConfig(cameraID);
     const engine = this._store.getEngineForCameraID(cameraID);
-    if (!cameraConfig || !engine) {
+    const hass = this._api.getHASSManager().getHASS();
+
+    if (!cameraConfig || !engine || !hass) {
       return null;
     }
     return engine.getCameraMetadata(hass, cameraConfig);
@@ -747,9 +767,7 @@ export class CameraManager {
       canFavoriteRecordings: perCameraCapabilities.some(
         (cap) => cap?.canFavoriteRecordings,
       ),
-      canSeek: perCameraCapabilities.some(
-        (cap) => cap?.canSeek,
-      ),
+      canSeek: perCameraCapabilities.some((cap) => cap?.canSeek),
 
       supportsClips: perCameraCapabilities.some((cap) => cap?.supportsClips),
       supportsRecordings: perCameraCapabilities.some((cap) => cap?.supportsRecordings),
diff --git a/src/card.ts b/src/card.ts
index cecbbbc3..283e3cf7 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -1,28 +1,13 @@
-import { getLovelace, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
-import {
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-  unsafeCSS,
-} from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
+import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { createRef, ref, Ref } from 'lit/directives/ref.js';
+import { Ref, createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import cloneDeep from 'lodash-es/cloneDeep';
-import isEqual from 'lodash-es/isEqual';
-import merge from 'lodash-es/merge';
-import throttle from 'lodash-es/throttle';
-import screenfull from 'screenfull';
 import { ViewContext } from 'view';
 import 'web-dialog';
 import pkg from '../package.json';
 import { actionHandler } from './action-handler-directive.js';
-import { AutomationsController } from './automations';
-import { CameraManagerEngineFactory } from './camera-manager/engine-factory.js';
-import { CameraManager } from './camera-manager/manager.js';
 import './components/elements.js';
 import { FrigateCardElements } from './components/elements.js';
 import './components/menu.js';
@@ -32,77 +17,28 @@ import { renderMessage, renderProgressIndicator } from './components/message.js'
 import './components/thumbnail-carousel.js';
 import './components/views.js';
 import { FrigateCardViews } from './components/views.js';
-import {
-  ConditionController,
-  ConditionEvaluateRequestEvent,
-  getOverriddenConfig,
-} from './conditions.js';
-import { isConfigUpgradeable } from './config-mgmt.js';
-import { MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA, REPO_URL } from './const.js';
-import { getLanguage, loadLanguages, localize } from './localize/localize.js';
-import { setLowPerformanceProfile, setPerformanceCSSStyles } from './performance.js';
+import { REPO_URL } from './const.js';
+import { localize } from './localize/localize.js';
 import cardStyle from './scss/card.scss';
 import {
-  Actions,
-  ActionsConfig,
-  CameraConfig,
-  CardWideConfig,
   ExtendedHomeAssistant,
-  FRIGATE_CARD_VIEW_DEFAULT,
   FrigateCardConfig,
-  frigateCardConfigSchema,
-  FrigateCardCustomAction,
-  FrigateCardError,
-  FrigateCardView,
   MediaLoadedInfo,
   MenuButton,
   Message,
-  MESSAGE_TYPE_PRIORITIES,
   RawFrigateCardConfig,
-  ViewDisplayMode,
 } from './types.js';
-import {
-  convertActionToFrigateCardCustomAction,
-  frigateCardHandleActionConfig,
-  frigateCardHasAction,
-  getActionConfigGivenAction,
-  isViewAction,
-} from './utils/action.js';
-import { errorToConsole } from './utils/basic.js';
-import { log } from './utils/debug.js';
-import { downloadMedia, downloadURL } from './utils/download.js';
-import {
-  getHassDifferences,
-  isCardInPanel,
-  isHassDifferent,
-  isTriggeredState,
-  sideLoadHomeAssistantElements,
-} from './utils/ha';
-import { DeviceList, getAllDevices } from './utils/ha/device-registry.js';
-import { EntityCache } from './utils/ha/entity-registry/cache.js';
-import { EntityRegistryManager } from './utils/ha/entity-registry/index.js';
-import { Entity } from './utils/ha/entity-registry/types.js';
-import { ResolvedMediaCache } from './utils/ha/resolved-media.js';
-import { supportsFeature } from './utils/ha/update.js';
-import { FrigateCardInitializer } from './utils/initializer.js';
-import { MediaLoadedInfoController } from './utils/media-info-controller';
-import { isValidMediaLoadedInfo } from './utils/media-info.js';
-import { executeMediaQueryForView } from './utils/media-to-view';
+import { frigateCardHasAction } from './utils/action.js';
+import { ConditionEvaluateRequestEvent } from './utils/card-controller/conditions-manager.js';
+import { CardController } from './utils/card-controller/controller';
 import { MenuButtonController } from './utils/menu-controller';
-import { MicrophoneController } from './utils/microphone';
-import { getActionsFromQueryString } from './utils/querystring.js';
-import { generateScreenshotTitle } from './utils/screenshot';
-import {
-  createViewWithNextStream,
-  createViewWithoutSubstream,
-  createViewWithSelectedSubstream,
-} from './utils/substream';
-import { Timer } from './utils/timer';
-import { getParseErrorPaths } from './utils/zod.js';
-import { ViewMediaClassifier } from './view/media-classifier';
 import { View } from './view/view.js';
 
-/** A note on media callbacks:
+// ***************************************************************************
+//                         General Card-Wide Notes
+// ***************************************************************************
+
+/** Media callbacks:
  *
  * Media elements (e.g. <video>, <img> or <canvas>) need to callback when:
  *  - Metadata is loaded / dimensions are known (for aspect-ratio)
@@ -119,7 +55,7 @@ import { View } from './view/view.js';
  *  - Directly specifying hooks (e.g. for snapshot viewing with simple <img> tags)
  */
 
-/** A note on action/menu/ll-custom events:
+/** Actions (action/menu/ll-custom events):
  *
  * The card supports actions being configured in a number of places (e.g. tap on
  * an element, double_tap on a menu item, hold on the live view). These actions
@@ -128,7 +64,10 @@ import { View } from './view/view.js';
  * DOM event being fired, which needs to be caught at the card level to handle.
  */
 
-/* eslint no-console: 0 */
+// ***************************************************************************
+//                          Static Initializers
+// ***************************************************************************
+
 console.info(
   `%c FRIGATE-HASS-CARD \n` +
     `%c ${localize('common.version')} ` +
@@ -140,6 +79,7 @@ console.info(
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (window as any).customCards = (window as any).customCards || [];
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (window as any).customCards.push({
   type: 'frigate-card',
@@ -149,147 +89,64 @@ console.info(
   documentationURL: REPO_URL,
 });
 
-enum InitializationAspect {
-  LANGUAGES = 'languages',
-  SIDE_LOAD_ELEMENTS = 'side-load-elements',
-  MEDIA_PLAYERS = 'media-players',
-  CAMERAS = 'cameras',
-  MICROPHONE = 'microphone',
-}
+// ***************************************************************************
+//                    Main FrigateCard Webcomponent
+//
+// Any non-rendering / non-lit related functionality should be added to
+// CardController instead of this file.
+// ***************************************************************************
 
-/**
- * Main FrigateCard class.
- */
 @customElement('frigate-card')
 class FrigateCard extends LitElement {
-  @state()
-  protected _hass?: ExtendedHomeAssistant;
+  protected _controller = new CardController(
+    this,
+    // Callback to scroll the main pane back to the top (example usecase: scrolling
+    // half way down the gallery, then viewing diagnostics should result in
+    // diagnostics starting at the top).
+    () => this._refMain.value?.scroll({ top: 0 }),
+    () => this._refMenu.value?.toggleMenu(),
+    this._requestUpdateForComponentsThatUseConditions.bind(this),
+  );
 
-  // The main base configuration object. For most usecases use getConfig() to
-  // get the correct configuration (which will return overrides as appropriate).
-  // This variable must be called `_config` or `config` to be compatible with
-  // card-mod.
-  @state()
-  protected _config!: FrigateCardConfig;
-  protected _rawConfig?: RawFrigateCardConfig;
-
-  @state()
-  protected _cardWideConfig?: CardWideConfig;
-
-  @state()
-  protected _overriddenConfig?: FrigateCardConfig;
-
-  @state()
-  protected _view?: View;
-
-  // Whether or not the card is in panel mode on the dashboard.
-  @property({ attribute: 'panel', type: Boolean, reflect: true })
-  protected _panel = false;
-
-  @state()
-  protected _expand = false;
-
-  protected _microphoneController?: MicrophoneController;
-  protected _conditionController?: ConditionController;
-  protected _automationsController?: AutomationsController;
   protected _menuButtonController = new MenuButtonController();
-  protected _mediaLoadedInfoController = new MediaLoadedInfoController();
 
   protected _refMenu: Ref<FrigateCardMenu> = createRef();
   protected _refMain: Ref<HTMLElement> = createRef();
   protected _refElements: Ref<FrigateCardElements> = createRef();
   protected _refViews: Ref<FrigateCardViews> = createRef();
 
-  protected _interactionTimer = new Timer();
-  protected _updateTimer = new Timer();
-  protected _untriggerTimer = new Timer();
+  // Convenience methods for very frequently accessed attributes.
+  get _config(): FrigateCardConfig | null {
+    return this._controller.getConfigManager().getConfig();
+  }
 
-  // Error/info message to render.
-  protected _message: Message | null = null;
-
-  // A cache of resolved media URLs/mimetypes for use in the whole card.
-  protected _resolvedMediaCache = new ResolvedMediaCache();
-
-  protected _cameraManager?: CameraManager;
-
-  protected _entityRegistryManager: EntityRegistryManager;
-
-  // The mouse handler may be called continually, throttle it to at most once
-  // per second for performance reasons.
-  protected _boundMouseHandler = throttle(this._mouseHandler.bind(this), 1 * 1000);
-  protected _boundCardActionEventHandler = this._cardActionEventHandler.bind(this);
-  protected _boundFullscreenHandler = this._fullscreenHandler.bind(this);
-
-  protected _triggers: Map<string, Date> = new Map();
-
-  protected _mediaPlayers?: string[];
-
-  protected _initializer = new FrigateCardInitializer();
-
-  constructor() {
-    super();
-    this._entityRegistryManager = new EntityRegistryManager(new EntityCache());
+  get _hass(): ExtendedHomeAssistant | null {
+    return this._controller.getHASSManager().getHASS();
   }
 
-  /**
-   * Set the Home Assistant object.
-   */
   set hass(hass: ExtendedHomeAssistant) {
-    this._hass = hass;
+    this._controller.getHASSManager().setHASS(hass);
 
     // Manually set hass in the menu, elements and image. This is to allow these
     // to update, without necessarily re-rendering the entire card (re-rendering
     // is expensive).
-    if (this._hass) {
-      if (this._refMenu.value) {
-        this._refMenu.value.hass = this._hass;
-      }
-      if (this._refElements.value) {
-        this._refElements.value.hass = this._hass;
-      }
-      if (this._refViews.value) {
-        this._refViews.value.hass = this._hass;
-      }
+    if (this._refMenu.value) {
+      this._refMenu.value.hass = hass;
     }
-
-    if (this._conditionController?.hasHAStateConditions) {
-      this._conditionController.setState({ state: this._hass.states });
+    if (this._refElements.value) {
+      this._refElements.value.hass = hass;
+    }
+    if (this._refViews.value) {
+      this._refViews.value.hass = hass;
     }
-
-    // Dark mode may depend on HASS.
-    this._setLightOrDarkMode();
   }
 
-  /**
-   * Get the card editor element.
-   * @returns A LovelaceCardEditor element.
-   */
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
-    await import('./editor.js');
-    return document.createElement('frigate-card-editor');
+    return await CardController.getConfigElement();
   }
 
-  /**
-   * Get a stub basic config using the first available camera of any kind.
-   * @param _hass The Home Assistant object.
-   * @param entities The entities available to Home Assistant.
-   * @returns A valid stub card configuration.
-   */
-  public static getStubConfig(
-    _hass: HomeAssistant,
-    entities: string[],
-  ): FrigateCardConfig {
-    const cameraEntity = entities.find((element) => element.startsWith('camera.'));
-    return {
-      cameras: [
-        {
-          camera_entity: cameraEntity,
-        },
-      ],
-      // Need to use 'as unknown' to convince Typescript that this really isn't a
-      // mistake, despite the miniscule size of the configuration vs the full type
-      // description.
-    } as unknown as FrigateCardConfig;
+  public static getStubConfig(_: HomeAssistant, entities: string[]): FrigateCardConfig {
+    return CardController.getStubConfig(entities);
   }
 
   protected _requestUpdateForComponentsThatUseConditions(): void {
@@ -298,1472 +155,71 @@ class FrigateCard extends LitElement {
     // card re-render (esp. when using card-mod).
     // https://github.com/dermotduffy/frigate-hass-card/issues/678
     if (this._refViews.value) {
-      this._refViews.value.conditionControllerEpoch =
-        this._conditionController?.getEpoch();
+      this._refViews.value.conditionsManagerEpoch =
+        this._controller.getConditionsManager().getEpoch() ?? undefined;
     }
     if (this._refElements.value) {
-      this._refElements.value.conditionControllerEpoch =
-        this._conditionController?.getEpoch();
+      this._refElements.value.conditionsManagerEpoch =
+        this._controller.getConditionsManager().getEpoch() ?? undefined;
     }
   }
 
-  protected _overrideConfig(): void {
-    if (!this._conditionController) {
-      return;
-    }
-
-    const overriddenConfig = getOverriddenConfig(
-      this._conditionController,
-      this._config,
-      this._config.overrides,
-    ) as FrigateCardConfig;
-
-    // Save on Lit re-rendering costs by only updating the configuration if it
-    // actually changes.
-    if (!isEqual(overriddenConfig, this._overriddenConfig)) {
-      if (
-        !isEqual(overriddenConfig.cameras, this._overriddenConfig?.cameras) ||
-        !isEqual(overriddenConfig.cameras_global, this._overriddenConfig?.cameras_global)
-      ) {
-        // Uninitialize the cameras (they will be re-initialized on the render
-        // cycle triggered by updating the overridden config) below.
-        this._initializer.uninitialize(InitializationAspect.CAMERAS);
-      }
-      this._overriddenConfig = overriddenConfig;
-    }
+  public setConfig(config: RawFrigateCardConfig): void {
+    this._controller.getConfigManager().setConfig(config);
   }
 
-  /**
-   * Get the camera configuration for the selected camera.
-   * @returns The CameraConfig object or null if not found.
-   */
-  protected _getSelectedCameraConfig(): CameraConfig | null {
-    if (!this._view || !this._cameraManager) {
-      return null;
-    }
-    return this._cameraManager.getStore().getCameraConfig(this._view.camera);
-  }
-
-  /**
-   * Set the card configuration.
-   * @param inputConfig The card configuration.
-   */
-  public setConfig(inputConfig: RawFrigateCardConfig): void {
-    if (!inputConfig) {
-      throw new Error(localize('error.invalid_configuration'));
-    }
-
-    const parseResult = frigateCardConfigSchema.safeParse(inputConfig);
-    if (!parseResult.success) {
-      const configUpgradeable = isConfigUpgradeable(inputConfig);
-      const hint = getParseErrorPaths(parseResult.error);
-      let upgradeMessage = '';
-      if (configUpgradeable && getLovelace().mode !== 'yaml') {
-        upgradeMessage = `${localize('error.upgrade_available')}. `;
-      }
-      throw new Error(
-        upgradeMessage +
-          `${localize('error.invalid_configuration')}: ` +
-          (hint && hint.size
-            ? JSON.stringify([...hint], null, ' ')
-            : localize('error.invalid_configuration_no_hint')),
-      );
-    }
-    const config =
-      parseResult.data.performance.profile !== 'low'
-        ? parseResult.data
-        : setLowPerformanceProfile(inputConfig, parseResult.data);
-
-    if (config.test_gui) {
-      getLovelace().setEditMode(true);
-    }
-
-    this._rawConfig = inputConfig;
-    this._config = config;
-    this._cardWideConfig = {
-      performance: config.performance,
-      debug: config.debug,
-    };
-
-    this._overriddenConfig = undefined;
-    this._cameraManager = undefined;
-    this._view = undefined;
-    this._message = null;
-
-    this._setupConditionController();
-
-    this._automationsController = new AutomationsController(this._config.automations);
-    this._setLightOrDarkMode();
-    this._setPropertiesForMinMaxHeight();
-    this._untrigger();
-  }
-
-  protected _setupConditionController(): void {
-    this._conditionController?.destroy();
-    this._conditionController = new ConditionController(this._config);
-    this._conditionController.addStateListener(this._overrideConfig.bind(this));
-    this._conditionController.addStateListener(
-      this._requestUpdateForComponentsThatUseConditions.bind(this),
-    );
-    this._conditionController.addStateListener(this._executeAutomations.bind(this));
-
-    this._conditionController.setState({
-      view: undefined,
-      fullscreen: this._isInFullscreen(),
-      expand: this._expand,
-      camera: undefined,
-      ...(this._hass &&
-        this._conditionController?.hasHAStateConditions && {
-          state: this._hass.states,
-        }),
-      media_loaded: this._mediaLoadedInfoController.has(),
-      displayMode: undefined,
-    });
-  }
-
-  protected _executeAutomations(): void {
-    // Never execute automations if there's an error (as our automation loop
-    // avoidance -- which shows as an error -- does not work).
-    if (this._message?.type !== 'error' && this._hass && this._conditionController) {
-      try {
-        this._automationsController?.execute(
-          this,
-          this._hass,
-          this._conditionController,
-        );
-      } catch (e: unknown) {
-        this._handleThrownError(e);
-      }
-    }
-  }
-
-  /**
-   * Card the card config, prioritizing the overriden config if present.
-   * @returns A FrigateCardConfig.
-   */
-  protected _getConfig(): FrigateCardConfig {
-    return this._overriddenConfig || this._config;
-  }
-
-  protected _changeView(args?: {
-    view?: View;
-    viewName?: FrigateCardView;
-    cameraID?: string;
-    resetMessage?: boolean;
-  }): void {
-    log(
-      this._cardWideConfig,
-      `Frigate Card view change: `,
-      args?.view ?? args?.viewName ?? '[default]',
-    );
-    const changeView = (view: View): void => {
-      if (View.isMajorMediaChange(this._view, view)) {
-        this._mediaLoadedInfoController.clear();
-      }
-      if (this._view?.view !== view.view) {
-        this._resetMainScroll();
-      }
-
-      View.adoptFromViewIfAppropriate(view, this._view);
-
-      this._view = view;
-      this._conditionController?.setState({
-        view: this._view.view,
-        camera: this._view.camera,
-        displayMode: this._view.displayMode ?? undefined,
-      });
-    };
-
-    if (args?.resetMessage ?? true) {
-      this._message = null;
-    }
-
-    if (!args?.view) {
-      let cameraID: string | null = null;
-      if (this._cameraManager) {
-        const cameras = this._cameraManager.getStore().getVisibleCameras();
-        if (cameras) {
-          if (args?.cameraID && cameras.has(args.cameraID)) {
-            cameraID = args.cameraID;
-          } else if (this._view?.camera && this._getConfig().view.update_cycle_camera) {
-            const keys = Array.from(cameras.keys());
-            const currentIndex = keys.indexOf(this._view.camera);
-            const targetIndex = currentIndex + 1 >= keys.length ? 0 : currentIndex + 1;
-            cameraID = keys[targetIndex];
-          } else {
-            // Reset to the default camera.
-            cameraID = cameras.keys().next().value;
-          }
-        }
-      }
-
-      if (cameraID) {
-        const viewName = args?.viewName ?? this._getConfig().view.default;
-        const displayMode =
-          this._view?.displayMode ?? this._getDefaultDisplayModeForView(viewName);
-        changeView(
-          new View({
-            view: viewName,
-            camera: cameraID,
-            displayMode: displayMode,
-          }),
-        );
-
-        // Restart the update timer, so the default view is refreshed at a fixed
-        // interval from now (if so configured).
-        this._startUpdateTimer();
-      }
-    } else {
-      changeView(args.view);
-    }
-  }
-
-  /**
-   * Set the light or dark mode.
-   */
-  protected _setLightOrDarkMode(): void {
-    const needDarkMode =
-      this._getConfig().view.dark_mode === 'on' ||
-      (this._getConfig().view.dark_mode === 'auto' &&
-        (!this._interactionTimer.isRunning() || this._hass?.themes.darkMode));
-
-    if (needDarkMode) {
-      this.setAttribute('dark', '');
-    } else {
-      this.removeAttribute('dark');
-    }
-  }
-
-  /**
-   * Handle a change view event.
-   * @param e The change view event.
-   */
-  protected _changeViewHandler(e: CustomEvent<View>): void {
-    this._changeView({ view: e.detail });
-  }
-
-  /**
-   * Add view context to the current view.
-   * @param ev A ViewContext event.
-   */
-  protected _addViewContextHandler(ev: CustomEvent<ViewContext>): void {
-    this._changeView({
-      view: this._view?.clone().mergeInContext(ev.detail),
-    });
-  }
-
-  /**
-   * Called before each update.
-   */
-  protected willUpdate(changedProps: PropertyValues): void {
-    if (changedProps.has('_cardWideConfig')) {
-      setPerformanceCSSStyles(this, this._cardWideConfig?.performance);
-    }
-
-    if (changedProps.has('_view')) {
-      this._setPropertiesForExpandedMode();
-    }
-
-    const oldConfig: FrigateCardConfig | undefined =
-      changedProps.get('_overriddenConfig') ?? changedProps.get('_config');
-    const newConfig = this._getConfig();
-    if (
-      (!this._microphoneController ||
-        changedProps.has('_overriddenConfig') ||
-        changedProps.has('_config')) &&
-      oldConfig?.live.microphone.disconnect_seconds !==
-        newConfig.live.microphone.disconnect_seconds
-    ) {
-      const config = this._getConfig();
-      this._microphoneController = new MicrophoneController(
-        config.live.microphone.always_connected
-          ? undefined
-          : config.live.microphone.disconnect_seconds,
-      );
-    }
-
-    // Must be called after the microphoneController is created.
-    this._initializeBackground();
-  }
-
-  protected _setPropertiesForMinMaxHeight(): void {
-    this.style.setProperty(
-      '--frigate-card-max-height',
-      this._getConfig().dimensions.max_height,
-    );
-
-    this.style.setProperty(
-      '--frigate-card-min-height',
-      this._getConfig().dimensions.min_height,
-    );
-  }
-
-  /**
-   * Get the most recent triggered camera.
-   */
-  protected _getMostRecentTrigger(): string | null {
-    const sorted = [...this._triggers.entries()].sort(
-      (a: [string, Date], b: [string, Date]) => b[1].getTime() - a[1].getTime(),
-    );
-    return sorted.length ? sorted[0][0] : null;
-  }
-
-  /**
-   * Determine if a camera has been triggered.
-   * @param oldHass The old HA object.
-   * @returns A boolean indicating whether the camera was changed.
-   */
-  protected _updateTriggeredCameras(oldHass: HomeAssistant): boolean {
-    if (!this._view || !this._isAutomatedViewUpdateAllowed(true)) {
+  protected shouldUpdate(): boolean {
+    if (!this._controller.getInitializationManager().isInitializedMandatory()) {
+      this._controller.getInitializationManager().initializeMandatory();
       return false;
     }
-
-    const now = new Date();
-    let changedCamera = false;
-    let triggerChanges = false;
-
-    const cameras = this._cameraManager?.getStore().getVisibleCameras();
-    for (const [cameraID, config] of cameras?.entries() ?? []) {
-      const triggerEntities = config.triggers.entities ?? [];
-      const diffs = getHassDifferences(this._hass, oldHass, triggerEntities, {
-        stateOnly: true,
-      });
-      const shouldTrigger = diffs.some((diff) => isTriggeredState(diff.newState));
-      const shouldUntrigger = triggerEntities.every(
-        (entity) => !isTriggeredState(this._hass?.states[entity]),
-      );
-      if (shouldTrigger) {
-        this._triggers.set(cameraID, now);
-        triggerChanges = true;
-      } else if (shouldUntrigger && this._triggers.has(cameraID)) {
-        this._triggers.delete(cameraID);
-        triggerChanges = true;
-      }
-    }
-
-    if (triggerChanges) {
-      if (!this._triggers.size) {
-        this._startUntriggerTimer();
-      } else {
-        const targetCamera = this._getMostRecentTrigger();
-        if (
-          targetCamera &&
-          (this._view.camera !== targetCamera || !this._view.is('live'))
-        ) {
-          this._changeView({
-            viewName: 'live',
-            cameraID: targetCamera,
-          });
-          changedCamera = true;
-        }
-      }
-    }
-    return changedCamera;
+    return true;
   }
 
-  /**
-   * Determine if the scan mode is currently triggered.
-   * @returns
-   */
-  protected _isTriggered(): boolean {
-    return !!this._triggers.size || this._untriggerTimer.isRunning();
+  protected willUpdate(): void {
+    this._controller.getInitializationManager().initializeBackgroundIfNecessary();
   }
 
-  /**
-   * Untrigger the card.
-   */
-  protected _untrigger(): void {
-    const wasTriggered = this._isTriggered();
-    this._triggers.clear();
-    this._untriggerTimer.stop();
-
-    if (wasTriggered) {
-      this.requestUpdate();
-    }
-  }
-
-  /**
-   * Start the untrigger timer.
-   */
-  protected _startUntriggerTimer(): void {
-    this._untriggerTimer.start(this._getConfig().view.scan.untrigger_seconds, () => {
-      this._untrigger();
-      if (
-        this._isAutomatedViewUpdateAllowed() &&
-        this._getConfig().view.scan.untrigger_reset
-      ) {
-        this._changeView();
-      }
-    });
-  }
-
-  protected _handleThrownError(error: unknown) {
-    if (error instanceof Error) {
-      errorToConsole(error);
-    }
-    if (error instanceof FrigateCardError) {
-      this._setMessageAndUpdate({
-        message: error.message,
-        type: 'error',
-        context: error.context,
-      });
-    }
-  }
-
-  protected async _initializeCameras(
-    hass: HomeAssistant,
-    config: FrigateCardConfig,
-    cardWideConfig: CardWideConfig,
-  ): Promise<void> {
-    this._cameraManager = new CameraManager(
-      new CameraManagerEngineFactory(
-        this._entityRegistryManager,
-        this._resolvedMediaCache,
-        cardWideConfig,
-      ),
-      this._cardWideConfig,
-    );
-
-    // For each camera merge the config (which has no defaults) into the camera
-    // global config (which does have defaults). The merging must happen in this
-    // order, to ensure that the defaults in the cameras global config do not
-    // override the values specified in the per-camera config.
-    const cameras = config.cameras.map((camera) =>
-      merge(cloneDeep(config.cameras_global), camera),
-    );
-
-    try {
-      await this._cameraManager.initializeCameras(
-        hass,
-        this._entityRegistryManager,
-        cameras,
-      );
-    } catch (e: unknown) {
-      this._handleThrownError(e);
-    }
-
-    // Set a view on initial load. However, if the query string contains an
-    // action that needs to render content (e.g. a view action or diagnostics),
-    // we don't set any view here and allow that content to be triggered by the
-    // firstUpdated() call. To do otherwise may cause a race condition between
-    // the default view and the querystring view, see:
-    // https://github.com/dermotduffy/frigate-hass-card/issues/1200
-    if (!this._view) {
-      const querystringActions = getActionsFromQueryString(window.location.search);
-      if (
-        !querystringActions.find(
-          (action) =>
-            isViewAction(action) || action.frigate_card_action === 'diagnostics',
-        )
-      ) {
-        this._changeView({
-          // Don't reset the message which may be set to an error above. This sets the
-          // first view using the newly loaded cameras.
-          resetMessage: false,
-        });
-      }
-    }
-  }
-
-  protected async _initializeMicrophone(): Promise<void> {
-    await this._microphoneController?.connect();
-  }
-
-  protected async _initializeMediaPlayers(hass: HomeAssistant): Promise<void> {
-    const isValidMediaPlayer = (entityID: string): boolean => {
-      if (entityID.startsWith('media_player.')) {
-        const stateObj = this._hass?.states[entityID];
-        if (
-          stateObj &&
-          stateObj.state !== 'unavailable' &&
-          supportsFeature(stateObj, MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA)
-        ) {
-          return true;
-        }
-      }
-      return false;
-    };
-
-    const mediaPlayers = Object.keys(this._hass?.states || {}).filter(
-      isValidMediaPlayer,
-    );
-    let mediaPlayerEntities: Map<string, Entity>;
-    try {
-      mediaPlayerEntities = await this._entityRegistryManager.getEntities(
-        hass,
-        mediaPlayers,
-      );
-    } catch (e) {
-      // Failing to fetch media player information is not considered
-      // sufficiently serious to block card startup.
-      errorToConsole(e as Error);
-      return;
-    }
-
-    // Filter out entities that are marked as hidden (this information is not
-    // available in the HA state, only in the registry).
-    this._mediaPlayers = mediaPlayers.filter((entityID) => {
-      // Specifically allow for media players that are not found in the entity registry:
-      // See: https://github.com/dermotduffy/frigate-hass-card/issues/1016
-      const entity = mediaPlayerEntities.get(entityID);
-      return !entity || !entity.hidden_by;
-    });
-  }
-
-  /**
-   * Initialize the hard requirements for rendering anything.
-   * @returns `true` if card rendering can continue.
-   */
-  protected _initializeMandatory(): boolean {
-    if (
-      this._initializer.isInitializedMultiple([
-        InitializationAspect.LANGUAGES,
-        InitializationAspect.SIDE_LOAD_ELEMENTS,
-        InitializationAspect.CAMERAS,
-      ])
-    ) {
-      return true;
-    }
-
-    const hass = this._hass;
-    const config = this._getConfig();
-    const cardWideConfig = this._cardWideConfig;
-    if (!hass || !config || !cardWideConfig) {
-      return false;
-    }
-
-    this._initializer
-      .initializeMultipleIfNecessary({
-        // Caution: Ensure nothing in this set of initializers requires
-        // languages since they will not yet have been initialized.
-        [InitializationAspect.LANGUAGES]: async () => await loadLanguages(hass),
-        [InitializationAspect.SIDE_LOAD_ELEMENTS]: async () =>
-          await sideLoadHomeAssistantElements(),
-      })
-      .then((initialized) => {
-        if (!initialized) {
-          return false;
-        }
-        return this._initializer.initializeIfNecessary(
-          InitializationAspect.CAMERAS,
-          async () => await this._initializeCameras(hass, config, cardWideConfig),
-        );
-      })
-      .then((initialized) => {
-        if (initialized) {
-          return this.requestUpdate();
-        }
-      });
-    return false;
-  }
-
-  /**
-   * Initialize aspects of the card that can load in the 'background'.
-   * @returns `true` if card rendering can continue.
-   */
-  protected _initializeBackground(): void {
-    const hass = this._hass;
-    const config = this._getConfig();
-    if (!hass || !config) {
-      return;
-    }
-
-    if (
-      this._initializer.isInitializedMultiple([
-        ...(config.menu.buttons.media_player.enabled
-          ? [InitializationAspect.MEDIA_PLAYERS]
-          : []),
-        ...(config.live.microphone.always_connected
-          ? [InitializationAspect.MICROPHONE]
-          : []),
-      ])
-    ) {
-      return;
-    }
-
-    this._initializer
-      .initializeMultipleIfNecessary({
-        ...(config.menu.buttons.media_player.enabled && {
-          [InitializationAspect.MEDIA_PLAYERS]: async () =>
-            await this._initializeMediaPlayers(hass),
-        }),
-        ...(config.live.microphone.always_connected && {
-          [InitializationAspect.MICROPHONE]: async () =>
-            await this._initializeMicrophone(),
-        }),
-      })
-      .then((initialized) => {
-        if (initialized) {
-          this.requestUpdate();
-        }
-      });
-    return;
-  }
-
-  /**
-   * Determine whether the element should be updated.
-   * @param changedProps The changed properties if any.
-   * @returns `true` if the element should be updated.
-   */
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (!this._initializeMandatory()) {
-      return false;
-    }
-    const oldHass = changedProps.get('_hass') as HomeAssistant | undefined;
-    let shouldUpdate = !oldHass || changedProps.size != 1;
-
-    // If this is the first HA state and it is disconnected, or there's been a
-    // change in connection state, then show the reconnection message.
-    if (
-      (!oldHass && !this._hass?.connected) ||
-      (!!oldHass && oldHass.connected !== !!this._hass?.connected)
-    ) {
-      if (!this._hass?.connected) {
-        this._setMessageAndUpdate(
-          {
-            message: localize('error.reconnecting'),
-            icon: 'mdi:lan-disconnect',
-            type: 'connection',
-            dotdotdot: true,
-          },
-          true,
-        );
-      } else {
-        this._changeView();
-      }
-      return true;
-    }
-
-    if (oldHass) {
-      const selectedCamera = this._getSelectedCameraConfig();
-      if (this._getConfig().view.scan.enabled && this._updateTriggeredCameras(oldHass)) {
-        shouldUpdate = true;
-      } else if (
-        // Home Assistant pumps a lot of updates through. Re-rendering the card is
-        // necessary at times (e.g. to update the 'clip' view as new clips
-        // arrive), but also is a jarring experience for the user (e.g. if they
-        // are browsing the mini-gallery). Do not allow re-rendering from a Home
-        // Assistant update if there's been recent interaction (e.g. clicks on the
-        // card) or if there is media active playing.
-        this._isAutomatedViewUpdateAllowed() &&
-        isHassDifferent(this._hass, oldHass, [
-          ...(this._getConfig().view.update_entities || []),
-          ...(selectedCamera?.triggers.entities || []),
-        ])
-      ) {
-        // If entities being monitored have changed then reset the view to the
-        // default. Note that as per the Lit lifecycle, the setting of the view
-        // itself will not trigger an *additional* re-render here.
-        this._changeView();
-        shouldUpdate = true;
-      } else {
-        shouldUpdate ||= isHassDifferent(this._hass, oldHass, [
-          ...(this._getConfig().view.render_entities ?? []),
-
-          // Refresh the card if media player state changes:
-          // https://github.com/dermotduffy/frigate-hass-card/issues/881
-          ...(this._mediaPlayers ?? []),
-        ]);
-      }
-    }
-    return shouldUpdate;
-  }
-
-  /**
-   * Download media being displayed in the viewer.
-   */
-  protected async _downloadViewerMedia(): Promise<void> {
-    const media = this._view?.queryResults?.getSelectedResult();
-    if (!this._hass || !this._cameraManager || !media) {
-      return;
-    }
-
-    try {
-      await downloadMedia(this._hass, this._cameraManager, media);
-    } catch (error) {
-      this._handleThrownError(error);
-    }
-  }
-
-  /**
-   * Take a media player action.
-   * @param mediaPlayer The entity ID of the media player.
-   * @param action The action to take (currently only 'play' is supported).
-   * @returns
-   */
-  protected _mediaPlayerAction(mediaPlayer: string, action: 'play' | 'stop'): void {
-    if (
-      !['play', 'stop'].includes(action) ||
-      !this._view ||
-      !this._hass ||
-      !this._cameraManager
-    ) {
-      return;
-    }
-
-    let media_content_id: string | null = null;
-    let media_content_type: string | null = null;
-    let title: string | null = null;
-    let thumbnail: string | null = null;
-
-    const cameraConfig = this._getSelectedCameraConfig();
-    if (!cameraConfig) {
-      return;
-    }
-    const cameraEntity = cameraConfig.camera_entity ?? null;
-    const media = this._view.queryResults?.getSelectedResult();
-
-    if (this._view.isViewerView() && media) {
-      media_content_id = media.getContentID();
-      media_content_type = ViewMediaClassifier.isVideo(media) ? 'video' : 'image';
-      title = media.getTitle();
-      thumbnail = media.getThumbnail();
-    } else if (this._view?.is('live') && cameraEntity) {
-      media_content_id = `media-source://camera/${cameraEntity}`;
-      media_content_type = 'application/vnd.apple.mpegurl';
-      title =
-        this._cameraManager.getCameraMetadata(this._hass, this._view.camera)?.title ??
-        null;
-      thumbnail = this._hass?.states[cameraEntity]?.attributes?.entity_picture ?? null;
-    }
-
-    if (!media_content_id || !media_content_type) {
-      return;
-    }
-
-    if (action === 'play') {
-      this._hass?.callService('media_player', 'play_media', {
-        entity_id: mediaPlayer,
-        media_content_id: media_content_id,
-        media_content_type: media_content_type,
-        extra: {
-          ...(title && { title: title }),
-          ...(thumbnail && { thumb: thumbnail }),
-        },
-      });
-    } else if (action === 'stop') {
-      this._hass?.callService('media_player', 'media_stop', {
-        entity_id: mediaPlayer,
-      });
-    }
-  }
-
-  protected _cardActionEventHandler(ev: Event): void {
-    // The event may not actually be a CustomEvent object, but may still have a
-    // detail field (see:
-    // https://github.com/custom-cards/custom-card-helpers/blob/master/src/fire-event.ts#L70
-    // )
-    if ('detail' in ev) {
-      const frigateCardAction = convertActionToFrigateCardCustomAction(ev.detail);
-      if (frigateCardAction) {
-        this._cardActionHandler(frigateCardAction);
-      }
-    }
-  }
-
-  protected _getDefaultDisplayModeForView(view: FrigateCardView): ViewDisplayMode {
-    let mode: ViewDisplayMode | null = null;
-    switch (view) {
-      case 'media':
-      case 'clip':
-      case 'clips':
-      case 'recording':
-      case 'recordings':
-      case 'snapshot':
-      case 'snapshots':
-        mode = this._getConfig().media_viewer.display?.mode ?? null;
-        break;
-      case 'live':
-        mode = this._getConfig().live.display?.mode ?? null;
-        break;
-    }
-    return mode ?? 'single';
-  }
-
-  protected _cardActionHandler(frigateCardAction: FrigateCardCustomAction): void {
-    // Note: This function needs to process (view-related) commands even when
-    // _view has not yet been initialized (since it may be used to set a view
-    // via the querystring).
-    if (!this._cameraManager || !this._hass) {
-      return;
-    }
-
-    if (
-      frigateCardAction.card_id &&
-      this._getConfig().card_id !== frigateCardAction.card_id
-    ) {
-      // Command not intended for this card (e.g. query string command).
-      return;
-    }
-
-    const action = frigateCardAction.frigate_card_action;
-
-    switch (action) {
-      case 'default':
-        this._changeView();
-        break;
-      case 'clip':
-      case 'clips':
-      case 'image':
-      case 'live':
-      case 'recording':
-      case 'recordings':
-      case 'snapshot':
-      case 'snapshots':
-      case 'timeline':
-        this._changeView({
-          viewName: action,
-          cameraID: this._view?.camera,
-        });
-        break;
-      case 'download':
-        this._downloadViewerMedia();
-        break;
-      case 'camera_ui':
-        const url = this._getCameraURLFromContext();
-        if (url) {
-          window.open(url);
-        }
-        break;
-      case 'expand':
-        this._setExpand(!this._expand);
-        break;
-      case 'fullscreen':
-        screenfull.toggle(this);
-        break;
-      case 'menu_toggle':
-        // This is a rare code path: this would only be used if someone has a
-        // menu toggle action configured outside of the menu itself (e.g.
-        // picture elements).
-        this._refMenu.value?.toggleMenu();
-        break;
-      case 'camera_select':
-        const selectCameraID = frigateCardAction.camera;
-        if (
-          this._view &&
-          this._cameraManager?.getStore().hasVisibleCameraID(selectCameraID)
-        ) {
-          const viewOnCameraSelect = this._getConfig().view.camera_select;
-          const targetView =
-            viewOnCameraSelect === 'current' ? this._view.view : viewOnCameraSelect;
-          const actualView = this.isViewSupportedByCamera(selectCameraID, targetView)
-            ? targetView
-            : FRIGATE_CARD_VIEW_DEFAULT;
-          this._changeView({
-            viewName: actualView,
-            cameraID: selectCameraID,
-          });
-        }
-        break;
-      case 'live_substream_select': {
-        if (this._view) {
-          const view = createViewWithSelectedSubstream(
-            this._view,
-            frigateCardAction.camera,
-          );
-          view && this._changeView({ view: view });
-        }
-        break;
-      }
-      case 'live_substream_off': {
-        if (this._view) {
-          const view = createViewWithoutSubstream(this._view);
-          view && this._changeView({ view: view });
-        }
-        break;
-      }
-      case 'live_substream_on': {
-        if (this._view) {
-          const view = createViewWithNextStream(this._cameraManager, this._view);
-          view && this._changeView({ view: view });
-        }
-        break;
-      }
-      case 'media_player':
-        this._mediaPlayerAction(
-          frigateCardAction.media_player,
-          frigateCardAction.media_player_action,
-        );
-        break;
-      case 'diagnostics':
-        this._diagnostics();
-        break;
-      case 'microphone_mute':
-        this._microphoneController?.mute();
-        this.requestUpdate();
-        break;
-      case 'microphone_unmute':
-        if (
-          !this._microphoneController?.isConnected() &&
-          !this._microphoneController?.isForbidden()
-        ) {
-          // The connect() call is async and make take an arbitrary amount of
-          // time for the user to grant access to their microphone. With a
-          // momentary microphone button the mute call (on mouse release) may
-          // arrive before the connection is even granted, so we unmute first
-          // before the connection is made, so the mute call on release will not
-          // be 'overwritten' incorrectly.
-          this._microphoneController?.unmute();
-
-          // Must requestUpdate to show the correct microphone state in the
-          // menu.
-          this._initializeMicrophone().then(() => this.requestUpdate());
-        } else if (this._microphoneController?.isConnected()) {
-          this._microphoneController.unmute();
-          this.requestUpdate();
-        }
-        break;
-      case 'mute':
-        this._mediaLoadedInfoController.get()?.player?.mute();
-        break;
-      case 'unmute':
-        this._mediaLoadedInfoController.get()?.player?.unmute();
-        break;
-      case 'play':
-        this._mediaLoadedInfoController.get()?.player?.play();
-        break;
-      case 'pause':
-        this._mediaLoadedInfoController.get()?.player?.pause();
-        break;
-      case 'screenshot':
-        this._mediaLoadedInfoController
-          .get()
-          ?.player?.getScreenshotURL()
-          .then((url: string | null) => {
-            if (url) {
-              downloadURL(url, generateScreenshotTitle(this._view));
-            }
-          });
-        break;
-      case 'display_mode_select':
-        const newView = this._view?.evolve({
-          displayMode: frigateCardAction.display_mode,
-        });
-
-        const generateNewQuery =
-          newView?.query &&
-          ((newView.isGrid() && (newView.query.getQueryCameraIDs()?.size ?? 0) <= 1) ||
-            (!newView.isGrid() && (newView.query.getQueryCameraIDs()?.size ?? 0) > 1));
-
-        if (generateNewQuery && newView && newView.query) {
-          // If the user requests a grid but the current query does not have a
-          // query for more than one camera, reset the query results, change the
-          // existing query to refer to all cameras and execute it to fetch new
-          // results.
-          executeMediaQueryForView(
-            this,
-            this._hass,
-            this._cameraManager,
-            newView,
-            newView.query
-              .clone()
-              .setQueryCameraIDs(
-                newView.isGrid()
-                  ? this._cameraManager.getStore().getVisibleCameraIDs()
-                  : newView.camera,
-              ),
-          ).then((view) => view && this._changeView({ view: view }));
-        } else {
-          this._changeView({ view: newView });
-        }
-        break;
-      default:
-        console.warn(`Frigate card received unknown card action: ${action}`);
-    }
-  }
-
-  public isViewSupportedByCamera(cameraID: string, view: FrigateCardView): boolean {
-    const capabilities = this._cameraManager?.getCameraCapabilities(cameraID);
-    switch (view) {
-      case 'live':
-      case 'image':
-        return true;
-      case 'clip':
-      case 'clips':
-        return !!capabilities?.supportsClips;
-      case 'snapshot':
-      case 'snapshots':
-        return !!capabilities?.supportsSnapshots;
-      case 'recording':
-      case 'recordings':
-        return !!capabilities?.supportsRecordings;
-      case 'timeline':
-        return !!capabilities?.supportsTimeline;
-      case 'media':
-        return (
-          !!capabilities?.supportsClips ||
-          !!capabilities?.supportsSnapshots ||
-          !!capabilities?.supportsRecordings
-        );
-    }
-    return false;
-  }
-
-  /**
-   * Generate diagnostics for issue reports.
-   */
-  protected async _diagnostics(): Promise<void> {
-    if (this._hass) {
-      let devices: DeviceList = [];
-      try {
-        devices = await getAllDevices(this._hass);
-      } catch (e) {
-        // Pass. This is optional.
-      }
-
-      // Get the Frigate devices in order to extract the Frigate integration and
-      // server version numbers.
-      const frigateDevices = devices.filter(
-        (device) => device.manufacturer === 'Frigate',
-      );
-      const frigateVersionMap: Map<string, string> = new Map();
-      frigateDevices.forEach((device) => {
-        device.config_entries.forEach((configEntry) => {
-          if (device.model) {
-            frigateVersionMap.set(configEntry, device.model);
-          }
-        });
-      });
-
-      this._setMessageAndUpdate({
-        message: localize('error.diagnostics'),
-        type: 'diagnostics',
-        icon: 'mdi:information',
-        context: {
-          ha_version: this._hass.config.version,
-          card_version: pkg.version,
-          browser: navigator.userAgent,
-          date: new Date(),
-          frigate_version: Object.fromEntries(frigateVersionMap),
-          lang: getLanguage(),
-          timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-          git: {
-            ...(pkg['gitVersion'] && { build_version: pkg['gitVersion'] }),
-            ...(pkg['buildDate'] && { build_date: pkg['buildDate'] }),
-            ...(pkg['gitDate'] && { commit_date: pkg['gitDate'] }),
-          },
-          ...(this._rawConfig && { config: this._rawConfig }),
-        },
-      });
-    }
-  }
-
-  /**
-   * Get the Frigate UI URL from context.
-   * @returns The URL or null if unavailable.
-   */
-  protected _getCameraURLFromContext(): string | null {
-    if (!this._view) {
-      return null;
-    }
-
-    const selectedCameraID = this._view.camera;
-    const media = this._view.queryResults?.getSelectedResult() ?? null;
-    const endpoints =
-      this._cameraManager?.getCameraEndpoints(selectedCameraID, {
-        view: this._view.view,
-        ...(media && { media: media }),
-      }) ?? null;
-    return endpoints?.ui?.endpoint ?? null;
-  }
-
-  /**
-   * Handle an action called on an element.
-   * @param ev The actionHandler event.
-   */
-  protected _actionHandler(ev: CustomEvent, config?: ActionsConfig): void {
-    const interaction = ev.detail.action;
-    const node: HTMLElement | null = ev.currentTarget as HTMLElement | null;
-    const actionConfig = getActionConfigGivenAction(interaction, config);
-    if (
-      this._hass &&
-      config &&
-      node &&
-      interaction &&
-      // Don't call frigateCardHandleActionConfig() unless there is explicitly an
-      // action defined (as it uses a default that is unhelpful for views that
-      // have default tap/click actions).
-      actionConfig
-    ) {
-      frigateCardHandleActionConfig(
-        node,
-        this._hass,
-        config,
-        ev.detail.action,
-        actionConfig,
-      );
-    }
-
-    // Set the 'screensaver' timer.
-    this._startInteractionTimer();
-  }
-
-  /**
-   * Handle mouse movements.
-   */
-  protected _mouseHandler(): void {
-    this._startInteractionTimer();
-  }
-
-  /**
-   * Start the user interaction ('screensaver') timer to reset the view to
-   * default `view.timeout_seconds` after user interaction.
-   */
-  protected _startInteractionTimer(): void {
-    this._interactionTimer.stop();
-
-    // Interactions reset the trigger state.
-    this._untrigger();
-
-    if (this._getConfig().view.timeout_seconds) {
-      this._interactionTimer.start(this._getConfig().view.timeout_seconds, () => {
-        if (this._isAutomatedViewUpdateAllowed()) {
-          this._changeView();
-          this._setLightOrDarkMode();
-        }
-      });
-    }
-    this._setLightOrDarkMode();
-  }
-
-  /**
-   * Set the update timer to trigger an update refresh every
-   * `view.update_seconds`.
-   */
-  protected _startUpdateTimer(): void {
-    this._updateTimer.stop();
-    if (this._getConfig().view.update_seconds) {
-      this._updateTimer.start(this._getConfig().view.update_seconds, () => {
-        if (this._isAutomatedViewUpdateAllowed()) {
-          this._changeView();
-        } else {
-          // Not allowed to update this time around, but try again at the next
-          // interval.
-          this._startUpdateTimer();
-        }
-      });
-    }
-  }
-
-  /**
-   * Determine if an automated view update is allowed.
-   * @returns `true` if it's allowed, `false` otherwise.
-   */
-  protected _isAutomatedViewUpdateAllowed(ignoreTriggers?: boolean): boolean {
-    return (
-      (ignoreTriggers || !this._isTriggered()) &&
-      (this._getConfig().view.update_force || !this._interactionTimer.isRunning())
-    );
-  }
-
-  /**
-   * Render the card menu.
-   * @returns A rendered template.
-   */
   protected _renderMenu(): TemplateResult | void {
-    if (!this._hass || !this._cameraManager || !this._view) {
+    const view = this._controller.getViewManager().getView();
+    if (!this._hass || !this._config || !view) {
       return;
     }
     return html`
       <frigate-card-menu
         ${ref(this._refMenu)}
         .hass=${this._hass}
-        .menuConfig=${this._getConfig().menu}
+        .menuConfig=${this._config.menu}
         .buttons=${this._menuButtonController.calculateButtons(
           this._hass,
-          this._getConfig(),
-          this._cameraManager,
-          this._view,
-          this._expand,
+          this._config,
+          this._controller.getCameraManager(),
+          view,
+          this._controller.getExpandManager().isExpanded(),
           {
-            currentMediaLoadedInfo: this._mediaLoadedInfoController.get(),
-            mediaPlayers: this._mediaPlayers,
-            cameraURL: this._getCameraURLFromContext(),
-            microphoneController: this._microphoneController,
+            currentMediaLoadedInfo: this._controller.getMediaLoadedInfoManager().get(),
+            showCameraUIButton: this._controller.getCameraURLManager().hasCameraURL(),
+            mediaPlayerController: this._controller.getMediaPlayerManager(),
+            microphoneManager: this._controller.getMicrophoneManager(),
           },
         )}
-        .entityRegistryManager=${this._entityRegistryManager}
+        .entityRegistryManager=${this._controller.getEntityRegistryManager()}
       ></frigate-card-menu>
     `;
   }
 
-  /**
-   * Set the message to display and trigger an update.
-   * @param message The message to display.
-   * @param skipUpdate If true an update request is skipped.
-   */
-  protected _setMessageAndUpdate(message: Message, skipUpdate?: boolean): void {
-    const currentPriority = this._message
-      ? MESSAGE_TYPE_PRIORITIES[this._message.type] ?? 0
-      : 0;
-    const newPriority = MESSAGE_TYPE_PRIORITIES[message.type] ?? 0;
-
-    if (!this._message || newPriority >= currentPriority) {
-      this._message = message;
-
-      // When a message is displayed it is effectively unloading the media.
-      this._mediaUnloadedHandler();
-
-      if (!skipUpdate) {
-        this.requestUpdate();
-        this._resetMainScroll();
-      }
-    }
-  }
-
-  /**
-   * Reset the scroll of the main pane to the top (example usecase: scrolling
-   * half way down the gallery, then viewing diagnostics should result in
-   * diagnostics starting at the top).
-   */
-  protected _resetMainScroll(): void {
-    // Reset the scroll on the main div to the top.
-    this._refMain.value?.scroll({ top: 0 });
-  }
-
-  /**
-   * Handle a message event to render to the user.
-   * @param e The message event.
-   */
-  protected _messageHandler(e: CustomEvent<Message>): void {
-    return this._setMessageAndUpdate(e.detail);
-  }
-
-  /**
-   * Handle a new piece of media being shown.
-   * @param ev Event with MediaLoadedInfo details for the media.
-   */
-  protected _mediaLoadedHandler(ev: CustomEvent<MediaLoadedInfo>): void {
-    const mediaLoadedInfo = ev.detail;
-    // In Safari, with WebRTC, 0x0 is occasionally returned during loading,
-    // so treat anything less than a safety cutoff as bogus.
-    if (!isValidMediaLoadedInfo(mediaLoadedInfo)) {
-      return;
-    }
-
-    log(this._cardWideConfig, `Frigate Card media load: `, mediaLoadedInfo);
-
-    this._mediaLoadedInfoController.set(mediaLoadedInfo);
-
-    this._setPropertiesForExpandedMode();
-
-    this._conditionController?.setState({
-      media_loaded: this._mediaLoadedInfoController.has(),
-    });
-
-    this.requestUpdate();
-  }
-
-  protected _setPropertiesForExpandedMode(): void {
-    // When a new media loads, set the aspect ratio for when the card is
-    // expanded/popped-up. This is based exclusively on last media content,
-    // as dimension configuration does not apply in fullscreen or expanded mode.
-    const lastKnown = this._mediaLoadedInfoController.getLastKnown();
-    this.style.setProperty(
-      '--frigate-card-expand-aspect-ratio',
-      this._view?.isAnyMediaView() && lastKnown
-        ? `${lastKnown.width} / ${lastKnown.height}`
-        : 'unset',
-    );
-    // Non-media may have no intrinsic dimensions (or multiple media items in a
-    // grid) and so we need to explicit request the dialog to use all available
-    // space.
-    const isGrid = this._view?.isGrid();
-    this.style.setProperty(
-      '--frigate-card-expand-width',
-      !isGrid && this._view?.isAnyMediaView()
-        ? 'none'
-        : 'var(--frigate-card-expand-max-width)',
-    );
-    this.style.setProperty(
-      '--frigate-card-expand-height',
-      !isGrid && this._view?.isAnyMediaView()
-        ? 'none'
-        : 'var(--frigate-card-expand-max-height)',
-    );
-  }
-
-  /**
-   * Unload a media item.
-   */
-  protected _mediaUnloadedHandler(): void {
-    this._mediaLoadedInfoController.clear();
-    this._conditionController?.setState({ media_loaded: false });
-  }
-
-  protected _locationChangeHandler = (): void => {
-    // Only execute actions when the card has rendered at least once.
-    if (this.hasUpdated) {
-      getActionsFromQueryString(window.location.search).forEach((action) =>
-        this._cardActionHandler(action),
-      );
-    }
-  };
-
   protected firstUpdated(): void {
     // Execute query string actions after first render is complete.
-    this._locationChangeHandler();
-  }
-
-  /**
-   * Component connected callback.
-   */
-  connectedCallback(): void {
-    super.connectedCallback();
-    if (screenfull.isEnabled) {
-      screenfull.on('change', this._boundFullscreenHandler);
-    }
-    this.addEventListener('mousemove', this._boundMouseHandler);
-    this.addEventListener('ll-custom', this._boundCardActionEventHandler);
-    this._panel = isCardInPanel(this);
-
-    // Listen for HA `navigate` actions.
-    // See: https://github.com/home-assistant/frontend/blob/273992c8e9c3062c6e49481b6d7d688a07067232/src/common/navigate.ts#L43
-    window.addEventListener('location-changed', this._locationChangeHandler);
-
-    // Listen for history state changes (i.e. user using the browser
-    // back/forward controls).
-    window.addEventListener('popstate', this._locationChangeHandler);
-
-    // Manually call the location change handler as the card will be
-    // disconnected/reconnected when dashboard 'tab' changes happen within HA.
-    this._locationChangeHandler();
-  }
-
-  /**
-   * Component disconnected callback.
-   */
-  disconnectedCallback(): void {
-    // When the dashboard 'tab' is changed, the media is effectively unloaded.
-    this._mediaUnloadedHandler();
-
-    if (screenfull.isEnabled) {
-      screenfull.off('change', this._boundFullscreenHandler);
-    }
-    this.removeEventListener('mousemove', this._boundMouseHandler);
-    this.removeEventListener('ll-custom', this._boundCardActionEventHandler);
-
-    window.removeEventListener('location-changed', this._locationChangeHandler);
-    window.removeEventListener('popstate', this._locationChangeHandler);
-
-    super.disconnectedCallback();
-  }
-
-  /**
-   * Determine if the aspect ratio should be enforced given the current view and
-   * context.
-   */
-  protected _isAspectRatioEnforced(): boolean {
-    const aspectRatioMode = this._getConfig().dimensions.aspect_ratio_mode;
-
-    // Do not artifically constrain aspect ratio if:
-    // - It's fullscreen.
-    // - It's in expanded mode.
-    // - Aspect ratio enforcement is disabled.
-    // - Aspect ratio enforcement is dynamic and it's a media view (i.e. not the
-    //   gallery) or timeline.
-
-    return !(
-      (screenfull.isEnabled && screenfull.isFullscreen) ||
-      this._expand ||
-      aspectRatioMode == 'unconstrained' ||
-      (aspectRatioMode == 'dynamic' &&
-        (this._view?.isAnyMediaView() || this._view?.is('timeline')))
-    );
-  }
-
-  /**
-   * Get the aspect ratio padding required to enforce the aspect ratio (if it is
-   * required).
-   * @returns A padding percentage.
-   */
-  protected _getAspectRatioStyle(): string {
-    if (!this._isAspectRatioEnforced()) {
-      return 'auto';
-    }
-
-    const aspectRatioMode = this._getConfig().dimensions.aspect_ratio_mode;
-
-    const lastKnown = this._mediaLoadedInfoController.getLastKnown();
-    if (lastKnown && aspectRatioMode === 'dynamic') {
-      return `${lastKnown.width} / ${lastKnown.height}`;
-    }
-
-    const defaultAspectRatio = this._getConfig().dimensions.aspect_ratio;
-    if (defaultAspectRatio) {
-      return `${defaultAspectRatio[0]} / ${defaultAspectRatio[1]}`;
-    } else {
-      return '16 / 9';
-    }
-  }
-
-  /**
-   * Merge card-wide and view-specific actions.
-   * @returns A combined set of action.
-   */
-  protected _getMergedActions(): Actions {
-    if (this._message || this._view?.is('timeline')) {
-      // Timeline does not support actions as it is not possible to prevent
-      // touch actions on the timeline surface from triggering card-wide actions
-      // inappropriately, whilst also maintaining touch interaction with the
-      // timeline itself (and almost the entire timeline surface can be
-      // interacted with). This causes duplicate/inappropriate card-wide actions
-      // on touch surfaces.
-      return {};
-    }
-
-    let specificActions: Actions | undefined = undefined;
-    if (this._view?.is('live')) {
-      specificActions = this._getConfig().live.actions;
-    } else if (this._view?.isGalleryView()) {
-      specificActions = this._getConfig().media_gallery?.actions;
-    } else if (this._view?.isViewerView()) {
-      specificActions = this._getConfig().media_viewer.actions;
-    } else if (this._view?.is('image')) {
-      specificActions = this._getConfig().image?.actions;
-    }
-    return { ...this._getConfig().view.actions, ...specificActions };
-  }
-
-  protected _isInFullscreen(): boolean {
-    return screenfull.isEnabled && screenfull.isFullscreen;
-  }
-
-  protected _setExpand(expand: boolean): void {
-    if (expand && this._isInFullscreen()) {
-      // Fullscreen and expanded mode are mutually exclusive.
-      screenfull.exit();
-    }
-
-    this._expand = expand;
-    this._conditionController?.setState({
-      expand: this._expand,
-    });
-  }
-
-  protected _fullscreenHandler(): void {
-    if (this._isInFullscreen()) {
-      this._expand = false;
-    }
-
-    this._conditionController?.setState({
-      fullscreen: this._isInFullscreen(),
-      expand: this._expand,
-    });
-
-    // Re-render after a change to fullscreen mode to take advantage of
-    // the expanded screen real-estate (vs staying in aspect-ratio locked
-    // modes).
-    this.requestUpdate();
+    this._controller.getQueryStringManager().executeNonViewRelated();
   }
 
   protected _renderInDialogIfNecessary(contents: TemplateResult): TemplateResult | void {
-    if (this._expand) {
+    if (this._controller.getExpandManager().isExpanded()) {
       return html` <web-dialog
         open
         center
         @close=${() => {
-          this._setExpand(false);
+          this._controller.getExpandManager().setExpanded(false);
         }}
       >
         ${contents}
@@ -1773,36 +229,31 @@ class FrigateCard extends LitElement {
     }
   }
 
-  /**
-   * Master render method for the card.
-   */
   protected render(): TemplateResult | void {
     if (!this._hass) {
       return;
     }
 
     const cardStyle = {
-      'aspect-ratio': this._getAspectRatioStyle(),
+      'aspect-ratio': this._controller.getStyleManager().getAspectRatioStyle(),
     };
     const cardClasses = {
       triggered:
-        !!this._isTriggered() && this._getConfig().view.scan.show_trigger_status,
+        !!this._controller.getTriggersManager().isTriggered() &&
+        !!this._config?.view.scan.show_trigger_status,
     };
-
     const mainClasses = {
       main: true,
       'curve-top':
-        this._getConfig().menu.style !== 'outside' ||
-        this._getConfig().menu.position !== 'top',
+        this._config?.menu.style !== 'outside' || this._config?.menu.position !== 'top',
       'curve-bottom':
-        this._getConfig().menu.style !== 'outside' ||
-        this._getConfig().menu.position === 'top',
+        this._config?.menu.style !== 'outside' || this._config?.menu.position === 'top',
     };
 
-    const actions = this._getMergedActions();
+    const actions = this._controller.getActionsManager().getMergedActions();
     const renderMenuAbove =
-      this._getConfig().menu.style === 'outside' &&
-      this._getConfig().menu.position === 'top';
+      this._config?.menu.style === 'outside' && this._config?.menu.position === 'top';
+    const cameraManager = this._controller.getCameraManager();
 
     // Caution: Keep the main div and the menu next to one another in order to
     // ensure the hover menu styling continues to work.
@@ -1814,12 +265,16 @@ class FrigateCard extends LitElement {
       })}
       class="${classMap(cardClasses)}"
       style="${styleMap(cardStyle)}"
-      @action=${(ev: CustomEvent) => this._actionHandler(ev, actions)}
-      @frigate-card:message=${this._messageHandler.bind(this)}
-      @frigate-card:view:change=${this._changeViewHandler.bind(this)}
-      @frigate-card:view:change-context=${this._addViewContextHandler.bind(this)}
-      @frigate-card:media:loaded=${this._mediaLoadedHandler.bind(this)}
-      @frigate-card:media:unloaded=${this._mediaUnloadedHandler.bind(this)}
+      @frigate-card:message=${(ev: CustomEvent<Message>) =>
+        this._controller.getMessageManager().setMessageIfHigherPriority(ev.detail)}
+      @frigate-card:view:change=${(ev: CustomEvent<View>) =>
+        this._controller.getViewManager().setView(ev.detail)}
+      @frigate-card:view:change-context=${(ev: CustomEvent<ViewContext>) =>
+        this._controller.getViewManager().setViewWithNewContext(ev.detail)}
+      @frigate-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) =>
+        this._controller.getMediaLoadedInfoManager().set(ev.detail)}
+      @frigate-card:media:unloaded=${() =>
+        this._controller.getMediaLoadedInfoManager().clear()}
       @frigate-card:media:volumechange=${
         () => this.requestUpdate() /* Refresh mute menu button */
       }
@@ -1829,42 +284,46 @@ class FrigateCard extends LitElement {
       @frigate-card:media:pause=${
         () => this.requestUpdate() /* Refresh play/pause menu button */
       }
-      @frigate-card:render=${() => this.requestUpdate()}
     >
       ${renderMenuAbove ? this._renderMenu() : ''}
       <div ${ref(this._refMain)} class="${classMap(mainClasses)}">
-        ${!this._cameraManager?.isInitialized() && !this._message
-          ? renderProgressIndicator({ cardWideConfig: this._cardWideConfig })
-          : // Always want to call render even if there's a message, to
+        ${!cameraManager.isInitialized() &&
+        !this._controller.getMessageManager().hasMessage()
+          ? renderProgressIndicator({
+              cardWideConfig: this._controller.getConfigManager().getCardWideConfig(),
+            })
+          : // Always want to render <frigate-card-views> even if there's a message, to
             // ensure live preload is always present (even if not displayed).
             html`<frigate-card-views
               ${ref(this._refViews)}
               .hass=${this._hass}
-              .view=${this._view}
-              .cardWideConfig=${this._cardWideConfig}
-              .cameraManager=${this._cameraManager}
-              .resolvedMediaCache=${this._resolvedMediaCache}
-              .config=${this._getConfig()}
-              .nonOverriddenConfig=${this._config}
-              .conditionControllerEpoch=${this._conditionController?.getEpoch()}
-              .hide=${!!this._message}
-              .microphoneStream=${this._microphoneController?.getStream()}
+              .view=${this._controller.getViewManager().getView()}
+              .cameraManager=${cameraManager}
+              .resolvedMediaCache=${this._controller.getResolvedMediaCache()}
+              .configManager=${this._controller.getConfigManager()}
+              .conditionsManagerEpoch=${this._controller
+                .getConditionsManager()
+                ?.getEpoch()}
+              .hide=${!!this._controller.getMessageManager().hasMessage()}
+              .microphoneStream=${this._controller.getMicrophoneManager()?.getStream()}
             ></frigate-card-views>`}
         ${
           // Keep message rendering to last to show messages that may have been
           // generated during the render.
-          this._message ? renderMessage(this._message) : ''
+          renderMessage(this._controller.getMessageManager().getMessage())
         }
       </div>
       ${!renderMenuAbove ? this._renderMenu() : ''}
-      ${this._getConfig().elements
+      ${this._config?.elements
         ? // Elements need to render after the main views so it can render 'on
           // top'.
           html` <frigate-card-elements
             ${ref(this._refElements)}
             .hass=${this._hass}
-            .elements=${this._getConfig().elements}
-            .conditionControllerEpoch=${this._conditionController?.getEpoch()}
+            .elements=${this._config?.elements}
+            .conditionsManagerEpoch=${this._controller
+              .getConditionsManager()
+              ?.getEpoch()}
             @frigate-card:menu-add=${(ev: CustomEvent<MenuButton>) => {
               this._menuButtonController.addDynamicMenuButton(ev.detail);
               this.requestUpdate();
@@ -1874,7 +333,9 @@ class FrigateCard extends LitElement {
               this.requestUpdate();
             }}
             @frigate-card:condition:evaluate=${(ev: ConditionEvaluateRequestEvent) => {
-              ev.evaluation = this._conditionController?.evaluateCondition(ev.condition);
+              ev.evaluation = this._controller
+                .getConditionsManager()
+                ?.evaluateCondition(ev.condition);
             }}
           >
           </frigate-card-elements>`
@@ -1882,23 +343,13 @@ class FrigateCard extends LitElement {
     </ha-card>`);
   }
 
-  /**
-   * Return compiled CSS styles (thus safe to use with unsafeCSS).
-   */
   static get styles(): CSSResultGroup {
     return unsafeCSS(cardStyle);
   }
 
-  /**
-   * Get the Lovelace card size.
-   * @returns The Lovelace card size in units of 50px.
-   */
   public getCardSize(): number {
-    const lastKnown = this._mediaLoadedInfoController.getLastKnown();
-    if (lastKnown) {
-      return lastKnown.height / 50;
-    }
-    return 6;
+    // Lovelace card size is expressed in units of 50px.
+    return this._controller.getCardElementManager().getCardHeight() / 50;
   }
 }
 
diff --git a/src/components/diagnostics.ts b/src/components/diagnostics.ts
new file mode 100644
index 00000000..7e487566
--- /dev/null
+++ b/src/components/diagnostics.ts
@@ -0,0 +1,47 @@
+import { HomeAssistant } from 'custom-card-helpers';
+import { CSSResultGroup, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { localize } from '../localize/localize';
+import basicBlockStyle from '../scss/basic-block.scss';
+import { RawFrigateCardConfig } from '../types';
+import { Diagnostics, getDiagnostics } from '../utils/diagnostics';
+import { renderMessage } from './message';
+
+@customElement('frigate-card-diagnostics')
+export class FrigateCardDiagnostics extends LitElement {
+  @property({ attribute: false })
+  public hass?: HomeAssistant;
+
+  @property({ attribute: false })
+  public rawConfig?: RawFrigateCardConfig;
+
+  @state()
+  protected _diagnostics: Diagnostics | null = null;
+
+  protected async _fetchDiagnostics(): Promise<void> {
+    this._diagnostics = await getDiagnostics(this.hass, this.rawConfig);
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this._diagnostics) {
+      this._fetchDiagnostics().then(() => this.requestUpdate());
+      return;
+    }
+    return renderMessage({
+      message: localize('error.diagnostics'),
+      type: 'diagnostics',
+      icon: 'mdi:information',
+      context: this._diagnostics,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(basicBlockStyle);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'frigate-card-diagnostics': FrigateCardDiagnostics;
+  }
+}
diff --git a/src/components/elements.ts b/src/components/elements.ts
index 66e9b8d6..dccdc0ea 100644
--- a/src/components/elements.ts
+++ b/src/components/elements.ts
@@ -8,9 +8,11 @@ import {
   unsafeCSS,
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { actionHandler } from '../action-handler-directive.js';
 import { localize } from '../localize/localize.js';
-import elementsStyle from '../scss/elements.scss';
 import ptzStyle from '../scss/elements-ptz.scss';
+import elementsStyle from '../scss/elements.scss';
 import {
   Actions,
   ActionsConfig,
@@ -24,16 +26,17 @@ import {
   MenuSubmenuSelect,
   PictureElements,
 } from '../types.js';
-import { dispatchFrigateCardEvent } from '../utils/basic.js';
-import { dispatchFrigateCardErrorEvent } from './message.js';
-import { actionHandler } from '../action-handler-directive.js';
 import {
   frigateCardHandleActionConfig,
   frigateCardHasAction,
   getActionConfigGivenAction,
 } from '../utils/action.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ConditionControllerEpoch, evaluateConditionViaEvent } from '../conditions.js';
+import { dispatchFrigateCardEvent } from '../utils/basic.js';
+import {
+  ConditionsManagerEpoch,
+  evaluateConditionViaEvent,
+} from '../utils/card-controller/conditions-manager.js';
+import { dispatchFrigateCardErrorEvent } from './message.js';
 
 /* A note on picture element rendering:
  *
@@ -85,7 +88,7 @@ export class FrigateCardElementsCore extends LitElement {
    * property even though it is not currently directly used by this class.
    */
   @property({ attribute: false })
-  public conditionControllerEpoch?: ConditionControllerEpoch;
+  public conditionsManagerEpoch?: ConditionsManagerEpoch;
 
   protected _root: HuiConditionalElement | null = null;
 
@@ -167,7 +170,7 @@ export class FrigateCardElements extends LitElement {
   public hass?: HomeAssistant;
 
   @property({ attribute: false })
-  public conditionControllerEpoch?: ConditionControllerEpoch;
+  public conditionsManagerEpoch?: ConditionsManagerEpoch;
 
   @property({ attribute: false })
   public elements: PictureElements;
@@ -226,7 +229,7 @@ export class FrigateCardElements extends LitElement {
   protected render(): TemplateResult {
     return html`<frigate-card-elements-core
       .hass=${this.hass}
-      .conditionControllerEpoch=${this.conditionControllerEpoch}
+      .conditionsManagerEpoch=${this.conditionsManagerEpoch}
       .elements=${this.elements}
     >
     </frigate-card-elements-core>`;
diff --git a/src/components/gallery.ts b/src/components/gallery.ts
index fcf6fed6..c53f885d 100644
--- a/src/components/gallery.ts
+++ b/src/components/gallery.ts
@@ -82,7 +82,6 @@ export class FrigateCardGallery extends LitElement {
       if (this.view.is('recordings')) {
         changeViewToRecentRecordingForCameraAndDependents(
           this,
-          this.hass,
           this.cameraManager,
           this.cardWideConfig,
           this.view,
@@ -95,7 +94,6 @@ export class FrigateCardGallery extends LitElement {
           : null;
         changeViewToRecentEventsForCameraAndDependents(
           this,
-          this.hass,
           this.cameraManager,
           this.cardWideConfig,
           this.view,
@@ -344,7 +342,6 @@ export class FrigateCardGalleryCore extends LitElement {
     let extension: ExtendedMediaQueryResult<MediaQuery> | null;
     try {
       extension = await this.cameraManager.extendMediaQueries<MediaQuery>(
-        this.hass,
         rawQueries,
         existingMedia,
         direction,
diff --git a/src/components/live/live.ts b/src/components/live/live.ts
index f68bdbdc..2df1e729 100644
--- a/src/components/live/live.ts
+++ b/src/components/live/live.ts
@@ -16,7 +16,10 @@ import { keyed } from 'lit/directives/keyed.js';
 import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import { CameraManager } from '../../camera-manager/manager.js';
 import { CameraConfigs, CameraEndpoints } from '../../camera-manager/types.js';
-import { ConditionControllerEpoch, getOverriddenConfig } from '../../conditions.js';
+import {
+  ConditionsManagerEpoch,
+  getOverriddenConfig,
+} from '../../utils/card-controller/conditions-manager.js';
 import { localize } from '../../localize/localize.js';
 import basicBlockStyle from '../../scss/basic-block.scss';
 import liveCarouselStyle from '../../scss/live-carousel.scss';
@@ -121,7 +124,7 @@ export const getStateObjOrDispatchError = (
 @customElement('frigate-card-live')
 export class FrigateCardLive extends LitElement {
   @property({ attribute: false })
-  public conditionControllerEpoch?: ConditionControllerEpoch;
+  public conditionsManagerEpoch?: ConditionsManagerEpoch;
 
   @property({ attribute: false })
   public hass?: ExtendedHomeAssistant;
@@ -247,7 +250,7 @@ export class FrigateCardLive extends LitElement {
           .nonOverriddenLiveConfig=${this.nonOverriddenLiveConfig}
           .overriddenLiveConfig=${this.overriddenLiveConfig}
           .inBackground=${this._inBackground}
-          .conditionControllerEpoch=${this.conditionControllerEpoch}
+          .conditionsManagerEpoch=${this.conditionsManagerEpoch}
           .liveOverrides=${this.liveOverrides}
           .cardWideConfig=${this.cardWideConfig}
           .cameraManager=${this.cameraManager}
@@ -305,7 +308,7 @@ export class FrigateCardLiveGrid extends LitElement {
   public liveOverrides?: LiveOverrides;
 
   @property({ attribute: false })
-  public conditionControllerEpoch?: ConditionControllerEpoch;
+  public conditionsManagerEpoch?: ConditionsManagerEpoch;
 
   @property({ attribute: false })
   public cardWideConfig?: CardWideConfig;
@@ -325,7 +328,7 @@ export class FrigateCardLiveGrid extends LitElement {
         .viewFilterCameraID=${cameraID}
         .nonOverriddenLiveConfig=${this.nonOverriddenLiveConfig}
         .overriddenLiveConfig=${this.overriddenLiveConfig}
-        .conditionControllerEpoch=${this.conditionControllerEpoch}
+        .conditionsManagerEpoch=${this.conditionsManagerEpoch}
         .liveOverrides=${this.liveOverrides}
         .cardWideConfig=${this.cardWideConfig}
         .cameraManager=${this.cameraManager}
@@ -360,7 +363,7 @@ export class FrigateCardLiveGrid extends LitElement {
   }
 
   protected render(): TemplateResult | void {
-    if (!this.conditionControllerEpoch || !this.nonOverriddenLiveConfig) {
+    if (!this.conditionsManagerEpoch || !this.nonOverriddenLiveConfig) {
       return;
     }
     const cameraIDs = this.cameraManager?.getStore().getVisibleCameraIDs();
@@ -406,7 +409,7 @@ export class FrigateCardLiveCarousel extends LitElement {
   public liveOverrides?: LiveOverrides;
 
   @property({ attribute: false })
-  public conditionControllerEpoch?: ConditionControllerEpoch;
+  public conditionsManagerEpoch?: ConditionsManagerEpoch;
 
   @property({ attribute: false })
   public cardWideConfig?: CardWideConfig;
@@ -572,7 +575,7 @@ export class FrigateCardLiveCarousel extends LitElement {
       !this.nonOverriddenLiveConfig ||
       !this.hass ||
       !this.cameraManager ||
-      !this.conditionControllerEpoch
+      !this.conditionsManagerEpoch
     ) {
       return;
     }
@@ -581,13 +584,13 @@ export class FrigateCardLiveCarousel extends LitElement {
     // <frigate-card-live-provider> is rendering right now, so we provide a
     // stateOverride to evaluate the condition in that context.
     const config = getOverriddenConfig(
-      this.conditionControllerEpoch.controller,
+      this.conditionsManagerEpoch.manager,
       this.nonOverriddenLiveConfig,
       this.liveOverrides,
       { camera: cameraID },
     ) as LiveConfig;
 
-    const cameraMetadata = this.cameraManager.getCameraMetadata(this.hass, cameraID);
+    const cameraMetadata = this.cameraManager.getCameraMetadata(cameraID);
 
     return html`
       <div class="embla__slide">
@@ -650,14 +653,13 @@ export class FrigateCardLiveCarousel extends LitElement {
     };
 
     const cameraMetadataPrevious = prevID
-      ? this.cameraManager.getCameraMetadata(this.hass, overrideCameraID(prevID))
+      ? this.cameraManager.getCameraMetadata(overrideCameraID(prevID))
       : null;
     const cameraMetadataCurrent = this.cameraManager.getCameraMetadata(
-      this.hass,
       overrideCameraID(this.viewFilterCameraID ?? this.view.camera),
     );
     const cameraMetadataNext = nextID
-      ? this.cameraManager.getCameraMetadata(this.hass, overrideCameraID(nextID))
+      ? this.cameraManager.getCameraMetadata(overrideCameraID(nextID))
       : null;
 
     const titleConfig = getDefaultTitleConfigForView(
diff --git a/src/components/media-filter.ts b/src/components/media-filter.ts
index 739ccd3c..fb8ef755 100644
--- a/src/components/media-filter.ts
+++ b/src/components/media-filter.ts
@@ -230,7 +230,6 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
       (
         await executeMediaQueryForView(
           this,
-          this.hass,
           this.cameraManager,
           this.view,
           queries,
@@ -254,7 +253,6 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
       (
         await executeMediaQueryForView(
           this,
-          this.hass,
           this.cameraManager,
           this.view,
           queries,
@@ -275,7 +273,7 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
         this._cameraOptions = Array.from(cameras.keys()).map((cameraID) => ({
           value: cameraID,
           label: this.hass
-            ? this.cameraManager?.getCameraMetadata(this.hass, cameraID)?.title ?? ''
+            ? this.cameraManager?.getCameraMetadata(cameraID)?.title ?? ''
             : '',
         }));
       }
@@ -284,7 +282,6 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
     if (changedProps.has('cameraManager') && this.hass && this.cameraManager) {
       this._mediaMetadataController = new MediaMetadataController(
         this,
-        this.hass,
         this.cameraManager,
       );
     }
@@ -523,7 +520,6 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
 
 export class MediaMetadataController implements ReactiveController {
   protected _host: ReactiveControllerHost;
-  protected _hass: HomeAssistant;
   protected _cameraManager: CameraManager;
 
   public tagsOptions: SelectOption[] = [];
@@ -533,11 +529,9 @@ export class MediaMetadataController implements ReactiveController {
 
   constructor(
     host: ReactiveControllerHost,
-    hass: HomeAssistant,
     cameraManager: CameraManager,
   ) {
     this._host = host;
-    this._hass = hass;
     this._cameraManager = cameraManager;
     host.addController(this);
   }
@@ -549,7 +543,7 @@ export class MediaMetadataController implements ReactiveController {
   async hostConnected() {
     let metadata: MediaMetadata | null;
     try {
-      metadata = await this._cameraManager.getMediaMetadata(this._hass);
+      metadata = await this._cameraManager.getMediaMetadata();
     } catch (e) {
       errorToConsole(e as Error);
       return;
diff --git a/src/components/message.ts b/src/components/message.ts
index e233379e..dceb2b84 100644
--- a/src/components/message.ts
+++ b/src/components/message.ts
@@ -106,12 +106,12 @@ export class FrigateCardProgressIndicator extends LitElement {
   }
 }
 
-export function renderMessage(message: Message): TemplateResult {
-  if (message.type === 'error') {
+export function renderMessage(message: Message | null): TemplateResult {
+  if (message?.type === 'error') {
     return html` <frigate-card-error-message
       .message=${message}
     ></frigate-card-error-message>`;
-  } else {
+  } else if (message) {
     return html` <frigate-card-message
       .message=${message.message}
       .icon=${message.icon}
@@ -124,7 +124,7 @@ export function renderMessage(message: Message): TemplateResult {
 
 export function renderProgressIndicator(options?: {
   message?: string;
-  cardWideConfig?: CardWideConfig;
+  cardWideConfig?: CardWideConfig | null;
   componentRef?: Ref<HTMLElement>;
   classes?: ClassInfo;
   size?: FrigateCardProgressIndicatorSize;
diff --git a/src/components/surround.ts b/src/components/surround.ts
index 7d1c246c..9d25f06b 100644
--- a/src/components/surround.ts
+++ b/src/components/surround.ts
@@ -82,7 +82,6 @@ export class FrigateCardSurround extends LitElement {
     }
     await changeViewToRecentEventsForCameraAndDependents(
       this,
-      this.hass,
       this.cameraManager,
       this.cardWideConfig,
       this.view,
diff --git a/src/components/thumbnail.ts b/src/components/thumbnail.ts
index edc157e2..50cafd75 100644
--- a/src/components/thumbnail.ts
+++ b/src/components/thumbnail.ts
@@ -271,7 +271,9 @@ export class FrigateCardThumbnailDetailsRecording extends LitElement {
     const rawEndTime = this.media.getEndTime();
     const duration =
       rawStartTime && rawEndTime ? getDurationString(rawStartTime, rawEndTime) : null;
-    const inProgress = this.media.inProgress() ? localize('recording.in_progress') : null;
+    const inProgress = this.media.inProgress()
+      ? localize('recording.in_progress')
+      : null;
 
     const seek = this.seek ? format(this.seek, 'HH:mm:ss') : null;
 
@@ -404,7 +406,6 @@ export class FrigateCardThumbnail extends LitElement {
       mediaCapabilities?.canDownload;
 
     const cameraTitle = this.cameraManager.getCameraMetadata(
-      this.hass,
       this.media.getCameraID(),
     )?.title;
 
@@ -434,7 +435,6 @@ export class FrigateCardThumbnail extends LitElement {
               if (this.hass && this.media) {
                 try {
                   await this.cameraManager?.favoriteMedia(
-                    this.hass,
                     this.media,
                     !this.media?.isFavorite(),
                   );
diff --git a/src/components/timeline-core.ts b/src/components/timeline-core.ts
index 25dcc462..cca9aaf2 100644
--- a/src/components/timeline-core.ts
+++ b/src/components/timeline-core.ts
@@ -582,7 +582,6 @@ export class FrigateCardTimelineCore extends LitElement {
       if (query) {
         view = await executeMediaQueryForView(
           this,
-          this.hass,
           this.cameraManager,
           this.view,
           query,
@@ -675,11 +674,11 @@ export class FrigateCardTimelineCore extends LitElement {
     }
     this._removeTargetBar();
 
-    if (!this.hass || !this._timeline || !this.view) {
+    if (!this._timeline || !this.view) {
       return;
     }
 
-    await this._timelineSource?.refresh(this.hass, this._getPrefetchWindow(properties));
+    await this._timelineSource?.refresh(this._getPrefetchWindow(properties));
 
     const queryType = MediaQueriesClassifier.getQueriesType(this.view.query);
     if (!queryType) {
@@ -737,7 +736,6 @@ export class FrigateCardTimelineCore extends LitElement {
     }
     const view = await executeMediaQueryForView(
       this,
-      this.hass,
       this.cameraManager,
       this.view,
       query,
@@ -776,7 +774,7 @@ export class FrigateCardTimelineCore extends LitElement {
       if (!this.hass || !this.cameraManager) {
         return;
       }
-      const cameraMetadata = this.cameraManager.getCameraMetadata(this.hass, cameraID);
+      const cameraMetadata = this.cameraManager.getCameraMetadata(cameraID);
       const cameraCapabilities = this.cameraManager.getCameraCapabilities(cameraID);
 
       if (cameraMetadata && cameraCapabilities?.supportsTimeline) {
@@ -974,7 +972,6 @@ export class FrigateCardTimelineCore extends LitElement {
    */
   protected async _updateTimelineFromView(): Promise<void> {
     if (
-      !this.hass ||
       !this.view ||
       !this.timelineConfig ||
       !this._timelineSource ||
@@ -1029,7 +1026,7 @@ export class FrigateCardTimelineCore extends LitElement {
       // (via fetchIfNecessary) may update the timeline contents which causes
       // the visjs timeline to stop dragging/panning operations which is very
       // disruptive to the user.
-      await this._timelineSource?.refresh(this.hass, prefetchedWindow);
+      await this._timelineSource?.refresh(prefetchedWindow);
     }
 
     const currentSelection = this._timeline.getSelection();
diff --git a/src/components/viewer.ts b/src/components/viewer.ts
index a676a3ae..1927b84f 100644
--- a/src/components/viewer.ts
+++ b/src/components/viewer.ts
@@ -151,7 +151,6 @@ export class FrigateCardViewer extends LitElement {
       if (mediaType === 'recordings') {
         changeViewToRecentRecordingForCameraAndDependents(
           this,
-          this.hass,
           this.cameraManager,
           this.cardWideConfig,
           this.view,
@@ -163,7 +162,6 @@ export class FrigateCardViewer extends LitElement {
       } else {
         changeViewToRecentEventsForCameraAndDependents(
           this,
-          this.hass,
           this.cameraManager,
           this.cardWideConfig,
           this.view,
@@ -447,7 +445,6 @@ export class FrigateCardViewerCarousel extends LitElement {
     };
 
     const cameraMetadata = this.cameraManager.getCameraMetadata(
-      this.hass,
       selectedMedia.getCameraID(),
     );
 
@@ -526,12 +523,7 @@ export class FrigateCardViewerCarousel extends LitElement {
    */
   protected async _seekHandler(): Promise<void> {
     const seek = this.view?.context?.mediaViewer?.seek;
-    if (
-      !this.hass ||
-      !seek ||
-      !this._media ||
-      !this._player
-    ) {
+    if (!this.hass || !seek || !this._media || !this._player) {
       return;
     }
     const selectedMedia = this._media[this._selected];
@@ -548,8 +540,7 @@ export class FrigateCardViewerCarousel extends LitElement {
     }
 
     const seekTime =
-      (await this.cameraManager?.getMediaSeekTime(this.hass, selectedMedia, seek)) ??
-      null;
+      (await this.cameraManager?.getMediaSeekTime(selectedMedia, seek)) ?? null;
 
     if (seekTime !== null) {
       this._player.seek(seekTime);
@@ -813,7 +804,7 @@ export class FrigateCardViewerProvider
 
     let mediaArray: ViewMedia[] | null;
     try {
-      mediaArray = await this.cameraManager.executeMediaQueries(this.hass, queries);
+      mediaArray = await this.cameraManager.executeMediaQueries(queries);
     } catch (e) {
       errorToConsole(e as Error);
       return;
diff --git a/src/components/views.ts b/src/components/views.ts
index 97a9a54b..949acc95 100644
--- a/src/components/views.ts
+++ b/src/components/views.ts
@@ -9,13 +9,17 @@ import {
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { CameraManager } from '../camera-manager/manager.js';
-import { ConditionControllerEpoch, getOverridesByKey } from '../conditions';
+import { ConditionsManagerEpoch, getOverridesByKey } from '../utils/card-controller/conditions-manager';
 import viewsStyle from '../scss/views.scss';
-import { CardWideConfig, ExtendedHomeAssistant, FrigateCardConfig } from '../types.js';
-import { ResolvedMediaCache } from '../utils/ha/resolved-media';
+import { ExtendedHomeAssistant } from '../types.js';
+import { ConfigManager } from '../utils/card-controller/config-manager.js';
+import { ResolvedMediaCache } from '../utils/ha/resolved-media.js';
 import { View } from '../view/view.js';
 import './surround.js';
 
+// As a special case: Diagnostics is not dynamically loaded in case something goes wrong.
+import './diagnostics.js';
+
 @customElement('frigate-card-views')
 export class FrigateCardViews extends LitElement {
   @property({ attribute: false })
@@ -28,19 +32,13 @@ export class FrigateCardViews extends LitElement {
   public cameraManager?: CameraManager;
 
   @property({ attribute: false })
-  public config?: FrigateCardConfig;
-
-  @property({ attribute: false })
-  public nonOverriddenConfig?: FrigateCardConfig;
-
-  @property({ attribute: false })
-  public cardWideConfig?: CardWideConfig;
+  public configManager?: ConfigManager;
 
   @property({ attribute: false })
   public resolvedMediaCache?: ResolvedMediaCache;
 
   @property({ attribute: false })
-  public conditionControllerEpoch?: ConditionControllerEpoch;
+  public conditionsManagerEpoch?: ConditionsManagerEpoch;
 
   @property({ attribute: false })
   public hide?: boolean;
@@ -93,15 +91,24 @@ export class FrigateCardViews extends LitElement {
   }
 
   protected _shouldLivePreload(): boolean {
-    return !!this.config?.live.preload;
+    return (
+      // Special case: Never preload for diagnostics -- we want that to be as
+      // minimal as possible.
+      !!this.configManager?.getConfig()?.live.preload && !this.view?.is('diagnostics')
+    );
   }
 
   protected render(): TemplateResult | void {
+    const config = this.configManager?.getConfig();
+    const nonOverriddenConfig = this.configManager?.getNonOverriddenConfig();
+    const cardWideConfig = this.configManager?.getCardWideConfig();
+    const rawConfig = this.configManager?.getRawConfig();
+
     // Only essential items should be added to the below list, since we want the
     // overall views pane to render in ~almost all cases (e.g. for a camera
     // initialization error to display, `view` and `cameraConfig` may both be
     // undefined, but we still want to render).
-    if (!this.hass || !this.config || !this.nonOverriddenConfig) {
+    if (!this.hass || !config || !nonOverriddenConfig || !cardWideConfig) {
       return html``;
     }
 
@@ -115,17 +122,17 @@ export class FrigateCardViews extends LitElement {
     };
 
     const thumbnailConfig = this.view?.is('live')
-      ? this.config.live.controls.thumbnails
+      ? config.live.controls.thumbnails
       : this.view?.isViewerView()
-      ? this.config.media_viewer.controls.thumbnails
+      ? config.media_viewer.controls.thumbnails
       : this.view?.is('timeline')
-      ? this.config.timeline.controls.thumbnails
+      ? config.timeline.controls.thumbnails
       : undefined;
 
     const miniTimelineConfig = this.view?.is('live')
-      ? this.config.live.controls.timeline
+      ? config.live.controls.timeline
       : this.view?.isViewerView()
-      ? this.config.media_viewer.controls.timeline
+      ? config.media_viewer.controls.timeline
       : undefined;
 
     const cameraConfig = this.view
@@ -137,16 +144,16 @@ export class FrigateCardViews extends LitElement {
       .hass=${this.hass}
       .view=${this.view}
       .fetchMedia=${this.view?.is('live')
-        ? this.config.live.controls.thumbnails.media
+        ? config.live.controls.thumbnails.media
         : undefined}
       .thumbnailConfig=${!this.hide ? thumbnailConfig : undefined}
       .timelineConfig=${!this.hide ? miniTimelineConfig : undefined}
       .cameraManager=${this.cameraManager}
-      .cardWideConfig=${this.cardWideConfig}
+      .cardWideConfig=${cardWideConfig}
     >
       ${!this.hide && this.view?.is('image') && cameraConfig
         ? html` <frigate-card-image
-            .imageConfig=${this.config.image}
+            .imageConfig=${config.image}
             .view=${this.view}
             .hass=${this.hass}
             .cameraConfig=${cameraConfig}
@@ -158,9 +165,9 @@ export class FrigateCardViews extends LitElement {
         ? html` <frigate-card-gallery
             .hass=${this.hass}
             .view=${this.view}
-            .galleryConfig=${this.config.media_gallery}
+            .galleryConfig=${config.media_gallery}
             .cameraManager=${this.cameraManager}
-            .cardWideConfig=${this.cardWideConfig}
+            .cardWideConfig=${cardWideConfig}
           >
           </frigate-card-gallery>`
         : ``}
@@ -169,10 +176,10 @@ export class FrigateCardViews extends LitElement {
             <frigate-card-viewer
               .hass=${this.hass}
               .view=${this.view}
-              .viewerConfig=${this.config.media_viewer}
+              .viewerConfig=${config.media_viewer}
               .resolvedMediaCache=${this.resolvedMediaCache}
               .cameraManager=${this.cameraManager}
-              .cardWideConfig=${this.cardWideConfig}
+              .cardWideConfig=${cardWideConfig}
             >
             </frigate-card-viewer>
           `
@@ -181,12 +188,19 @@ export class FrigateCardViews extends LitElement {
         ? html` <frigate-card-timeline
             .hass=${this.hass}
             .view=${this.view}
-            .timelineConfig=${this.config.timeline}
+            .timelineConfig=${config.timeline}
             .cameraManager=${this.cameraManager}
-            .cardWideConfig=${this.cardWideConfig}
+            .cardWideConfig=${cardWideConfig}
           >
           </frigate-card-timeline>`
         : ``}
+      ${!this.hide && this.view?.is('diagnostics')
+        ? html` <frigate-card-diagnostics
+            .hass=${this.hass}
+            .rawConfig=${rawConfig}
+          >
+          </frigate-card-diagnostics>`
+        : ``}
       ${
         // Note: Subtle difference in condition below vs the other views in order
         // to always render the live view for live.preload mode.
@@ -199,12 +213,12 @@ export class FrigateCardViews extends LitElement {
               <frigate-card-live
                 .hass=${this.hass}
                 .view=${this.view}
-                .nonOverriddenLiveConfig=${this.nonOverriddenConfig.live}
-                .overriddenLiveConfig=${this.config.live}
-                .conditionControllerEpoch=${this.conditionControllerEpoch}
-                .liveOverrides=${getOverridesByKey('live', this.config.overrides)}
+                .nonOverriddenLiveConfig=${nonOverriddenConfig.live}
+                .overriddenLiveConfig=${config.live}
+                .conditionsManagerEpoch=${this.conditionsManagerEpoch}
+                .liveOverrides=${getOverridesByKey('live', config.overrides)}
                 .cameraManager=${this.cameraManager}
-                .cardWideConfig=${this.cardWideConfig}
+                .cardWideConfig=${cardWideConfig}
                 .microphoneStream=${this.microphoneStream}
                 class="${classMap(liveClasses)}"
               >
diff --git a/src/types.ts b/src/types.ts
index 3b5c572f..2c1c6dd8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -43,6 +43,7 @@ export const FRIGATE_CARD_VIEWS_USER_SPECIFIED = [
 
 const FRIGATE_CARD_VIEWS = [
   ...FRIGATE_CARD_VIEWS_USER_SPECIFIED,
+  'diagnostics',
 
   // Media: A generic piece of media (could be clip, snapshot, recording).
   'media',
@@ -777,6 +778,14 @@ const viewConfigDefault = {
     untrigger_reset: true,
   },
 };
+const scanSchema = z.object({
+  enabled: z.boolean().default(viewConfigDefault.scan.enabled).optional(),
+  show_trigger_status: z.boolean().default(viewConfigDefault.scan.show_trigger_status).optional(),
+  untrigger_seconds: z.number().default(viewConfigDefault.scan.untrigger_seconds).optional(),
+  untrigger_reset: z.boolean().default(viewConfigDefault.scan.untrigger_reset).optional(),
+});
+export type ScanOptions = z.infer<typeof scanSchema>;
+
 const viewConfigSchema = z
   .object({
     default: z
@@ -792,16 +801,7 @@ const viewConfigSchema = z
     update_entities: z.string().array().optional(),
     render_entities: z.string().array().optional(),
     dark_mode: z.enum(['on', 'off', 'auto']).optional(),
-    scan: z
-      .object({
-        enabled: z.boolean().default(viewConfigDefault.scan.enabled),
-        show_trigger_status: z
-          .boolean()
-          .default(viewConfigDefault.scan.show_trigger_status),
-        untrigger_seconds: z.number().default(viewConfigDefault.scan.untrigger_seconds),
-        untrigger_reset: z.boolean().default(viewConfigDefault.scan.untrigger_reset),
-      })
-      .default(viewConfigDefault.scan),
+    scan: scanSchema.default(viewConfigDefault.scan),
   })
   .merge(actionsSchema)
   .default(viewConfigDefault);
@@ -1365,7 +1365,7 @@ const automationSchema = z.object({
 });
 export type Automation = z.infer<typeof automationSchema>;
 
-export const automationsSchema = automationSchema.array().optional();
+const automationsSchema = automationSchema.array().optional();
 export type Automations = z.infer<typeof automationsSchema>;
 
 const performanceConfigDefault = {
@@ -1458,7 +1458,6 @@ export const frigateCardConfigSchema = z.object({
 
   // Stock lovelace card config.
   type: z.string(),
-  test_gui: z.boolean().optional(),
 });
 export type FrigateCardConfig = z.infer<typeof frigateCardConfigSchema>;
 export type RawFrigateCardConfig = Record<string, unknown>;
@@ -1504,15 +1503,19 @@ export interface MediaLoadedInfo {
   capabilities?: MediaLoadedCapabilities;
 }
 
-export const MESSAGE_TYPE_PRIORITIES = {
+export type MessageType = 'info' | 'error' | 'connection' | 'diagnostics';
+
+type MessagePriority = {
+  [type in MessageType]: number;
+};
+
+export const MESSAGE_TYPE_PRIORITIES: MessagePriority = {
   info: 10,
   error: 20,
   connection: 30,
   diagnostics: 40,
 };
 
-export type MessageType = 'info' | 'error' | 'connection' | 'diagnostics';
-
 export interface Message {
   message: string;
   type: MessageType;
diff --git a/src/utils/action.ts b/src/utils/action.ts
index 2c7ce74a..ea228c57 100644
--- a/src/utils/action.ts
+++ b/src/utils/action.ts
@@ -10,7 +10,6 @@ import {
   FrigateCardAction,
   FrigateCardCustomAction,
   frigateCardCustomActionSchema,
-  FrigateCardViewAction,
   ViewDisplayMode,
 } from '../types.js';
 
@@ -187,21 +186,3 @@ export const frigateCardHasAction = (config?: ActionType | ActionType[]): boolea
 export const stopEventFromActivatingCardWideActions = (ev: Event): void => {
   ev.stopPropagation();
 };
-
-export const isViewAction = (
-  action: FrigateCardCustomAction,
-): action is FrigateCardViewAction => {
-  switch (action.frigate_card_action) {
-    case 'clip':
-    case 'clips':
-    case 'image':
-    case 'live':
-    case 'recording':
-    case 'recordings':
-    case 'snapshot':
-    case 'snapshots':
-    case 'timeline':
-      return true;
-  }
-  return false;
-};
diff --git a/src/utils/card-controller/actions-manager.ts b/src/utils/card-controller/actions-manager.ts
new file mode 100644
index 00000000..6ca97cb3
--- /dev/null
+++ b/src/utils/card-controller/actions-manager.ts
@@ -0,0 +1,221 @@
+import {
+  Actions,
+  ActionsConfig, FrigateCardCustomAction, FRIGATE_CARD_VIEW_DEFAULT
+} from '../../types.js';
+import {
+  convertActionToFrigateCardCustomAction,
+  frigateCardHandleActionConfig,
+  getActionConfigGivenAction
+} from '../action.js';
+import { getStreamCameraID } from '../substream.js';
+import { CardActionsManagerAPI } from './types.js';
+
+export class ActionsManager {
+  protected _api: CardActionsManagerAPI;
+
+  constructor(api: CardActionsManagerAPI) {
+    this._api = api;
+  }
+
+  /**
+   * Merge card-wide and view-specific actions.
+   * @returns A combined set of action.
+   */
+  public getMergedActions(): ActionsConfig {
+    const view = this._api.getViewManager().getView();
+    if (this._api.getMessageManager().hasMessage()) {
+      return {};
+    }
+
+    const config = this._api.getConfigManager().getConfig();
+    let specificActions: Actions | undefined = undefined;
+    if (view?.is('live')) {
+      specificActions = config?.live.actions;
+    } else if (view?.isGalleryView()) {
+      specificActions = config?.media_gallery?.actions;
+    } else if (view?.isViewerView()) {
+      specificActions = config?.media_viewer.actions;
+    } else if (view?.is('image')) {
+      specificActions = config?.image?.actions;
+    } else {
+      return {};
+    }
+    return { ...config?.view.actions, ...specificActions };
+  }
+
+  /**
+   * Handle an human interaction called on an element (e.g. 'tap').
+   */
+  public handleInteraction(interaction: string): void {
+    const hass = this._api.getHASSManager().getHASS();
+    const config = this.getMergedActions();
+    const actionConfig = getActionConfigGivenAction(interaction, config);
+    if (
+      hass &&
+      config &&
+      interaction &&
+      // Don't call frigateCardHandleActionConfig() unless there is explicitly an
+      // action defined (as it uses a default that is unhelpful for views that
+      // have default tap/click actions).
+      actionConfig
+    ) {
+      frigateCardHandleActionConfig(
+        this._api.getCardElementManager().getElement(),
+        hass,
+        config,
+        interaction,
+        actionConfig,
+      );
+    }
+  }
+
+  public handleActionEvent = (ev: Event): void => {
+    if (!('detail' in ev)) {
+      // The event may not actually be a CustomEvent object, but may still have a
+      // detail field. See:
+      // https://github.com/custom-cards/custom-card-helpers/blob/master/src/fire-event.ts#L70
+      return;
+    }
+
+    const frigateCardAction = convertActionToFrigateCardCustomAction(ev.detail);
+    if (frigateCardAction) {
+      this.executeAction(frigateCardAction);
+    }
+  };
+
+  /**
+   * Execute a card action.
+   * @param frigateCardAction
+   * @returns `true` if an action is executed.
+   */
+  public async executeAction(frigateCardAction: FrigateCardCustomAction): Promise<void> {
+    const config = this._api.getConfigManager().getConfig();
+    const mediaLoadedInfoManager = this._api.getMediaLoadedInfoManager();
+
+    if (
+      // Command not intended for this card (e.g. query string command).
+      frigateCardAction.card_id &&
+      config?.card_id !== frigateCardAction.card_id
+    ) {
+      return;
+    }
+
+    // Note: This function needs to process (view-related) commands even when
+    // _view has not yet been initialized (since it may be used to set a view
+    // via the querystring).
+    const view = this._api.getViewManager().getView();
+
+    const action = frigateCardAction.frigate_card_action;
+
+    switch (action) {
+      case 'default':
+        this._api.getViewManager().setViewDefault();
+        break;
+      case 'clip':
+      case 'clips':
+      case 'image':
+      case 'live':
+      case 'recording':
+      case 'recordings':
+      case 'snapshot':
+      case 'snapshots':
+      case 'timeline':
+        this._api.getViewManager().setViewByParameters({
+          viewName: action,
+          cameraID: view?.camera,
+        });
+        break;
+      case 'download':
+        await this._api.getDownloadManager().downloadViewerMedia();
+        break;
+      case 'camera_ui':
+        this._api.getCameraURLManager().openURL();
+        break;
+      case 'expand':
+        this._api.getExpandManager().toggleExpanded();
+        break;
+      case 'fullscreen':
+        this._api.getFullscreenManager().toggleFullscreen();
+        break;
+      case 'menu_toggle':
+        // This is a rare code path: this would only be used if someone has a
+        // menu toggle action configured outside of the menu itself (e.g.
+        // picture elements).
+        this._api.getCardElementManager().toggleMenu();
+        break;
+      case 'camera_select':
+        const selectCameraID = frigateCardAction.camera;
+        if (view) {
+          const viewOnCameraSelect = config?.view.camera_select ?? 'current';
+          const targetViewName =
+            viewOnCameraSelect === 'current' ? view.view : viewOnCameraSelect;
+          const verifiedViewName = this._api
+            .getViewManager()
+            .isViewSupportedByCamera(selectCameraID, targetViewName)
+            ? targetViewName
+            : FRIGATE_CARD_VIEW_DEFAULT;
+          this._api.getViewManager().setViewByParameters({
+            viewName: verifiedViewName,
+            cameraID: selectCameraID,
+          });
+        }
+        break;
+      case 'live_substream_select': {
+        this._api.getViewManager().setViewWithSubstream(frigateCardAction.camera);
+        break;
+      }
+      case 'live_substream_off': {
+        this._api.getViewManager().setViewWithoutSubstream();
+        break;
+      }
+      case 'live_substream_on': {
+        this._api.getViewManager().setViewWithSubstream();
+        break;
+      }
+      case 'media_player':
+        const mediaPlayer = frigateCardAction.media_player;
+        const mediaPlayerController = this._api.getMediaPlayerManager();
+        const media = view?.queryResults?.getSelectedResult() ?? null;
+
+        if (frigateCardAction.media_player_action === 'stop') {
+          await mediaPlayerController.stop(mediaPlayer);
+        } else if (view?.is('live')) {
+          await mediaPlayerController.playLive(mediaPlayer, getStreamCameraID(view));
+        } else if (view?.isViewerView() && media) {
+          await mediaPlayerController.playMedia(mediaPlayer, media);
+        }
+        break;
+      case 'diagnostics':
+        this._api.getViewManager().setViewByParameters({ viewName: 'diagnostics' });
+        break;
+      case 'microphone_mute':
+        this._api.getMicrophoneManager().mute();
+        break;
+      case 'microphone_unmute':
+        await this._api.getMicrophoneManager().unmute();
+        break;
+      case 'mute':
+        await mediaLoadedInfoManager.get()?.player?.mute();
+        break;
+      case 'unmute':
+        await mediaLoadedInfoManager.get()?.player?.unmute();
+        break;
+      case 'play':
+        await mediaLoadedInfoManager.get()?.player?.play();
+        break;
+      case 'pause':
+        await mediaLoadedInfoManager.get()?.player?.pause();
+        break;
+      case 'screenshot':
+        await this._api.getDownloadManager().downloadScreenshot();
+        break;
+      case 'display_mode_select':
+        this._api
+          .getViewManager()
+          .setViewWithNewDisplayMode(frigateCardAction.display_mode);
+        break;
+      default:
+        console.warn(`Frigate card received unknown card action: ${action}`);
+    }
+  }
+}
diff --git a/src/utils/card-controller/auto-update-manager.ts b/src/utils/card-controller/auto-update-manager.ts
new file mode 100644
index 00000000..bfefc5b0
--- /dev/null
+++ b/src/utils/card-controller/auto-update-manager.ts
@@ -0,0 +1,43 @@
+import { Timer } from '../timer';
+import { CardAutoRefreshAPI } from './types';
+
+export class AutoUpdateManager {
+  protected _timer = new Timer();
+  protected _api: CardAutoRefreshAPI;
+
+  constructor(api: CardAutoRefreshAPI) {
+    this._api = api;
+  }
+
+  /**
+   * Set the update timer to trigger an update refresh every
+   * `view.update_seconds`.
+   */
+  public startDefaultViewTimer(): void {
+    this._timer.stop();
+    const updateSeconds = this._api.getConfigManager().getConfig()
+      ?.view.update_seconds;
+    if (updateSeconds) {
+      this._timer.start(updateSeconds, () => {
+        if (this._isAutomatedUpdateAllowed()) {
+          this._api.getViewManager().setViewDefault();
+        } else {
+          // Not allowed to update this time around, but try again at the next
+          // interval.
+          this.startDefaultViewTimer();
+        }
+      });
+    }
+  }
+
+  protected _isAutomatedUpdateAllowed(): boolean {
+    const triggers = this._api.getTriggersManager();
+    const config = this._api.getConfigManager().getConfig();
+    const interactionManager = this._api.getInteractionManager();
+
+    return (
+      !triggers.isTriggered() &&
+      (config?.view.update_force || !interactionManager.hasInteraction())
+    );
+  }
+}
diff --git a/src/utils/card-controller/automations-manager.ts b/src/utils/card-controller/automations-manager.ts
new file mode 100644
index 00000000..35251d61
--- /dev/null
+++ b/src/utils/card-controller/automations-manager.ts
@@ -0,0 +1,73 @@
+import { localize } from '../../localize/localize.js';
+import {
+  Automation,
+  AutomationActions,
+  Automations,
+} from '../../types.js';
+import { frigateCardHandleAction } from '../action.js';
+import { CardAutomationsAPI } from './types.js';
+
+const MAX_NESTED_AUTOMATION_EXECUTIONS = 10;
+
+export class AutomationsManager {
+  protected _api: CardAutomationsAPI;
+
+  protected _automations: Automations;
+  protected _priorEvaluations: Map<Automation, boolean> = new Map();
+
+  // A counter to avoid infinite loops, increases every time actions are run,
+  // decreases every time actions are complete.
+  protected _nestedAutomationExecutions = 0;
+
+  constructor(api: CardAutomationsAPI) {
+    this._api = api;
+  }
+
+  public setAutomationsFromConfig() {
+    this._automations = this._api
+      .getConfigManager()
+      .getNonOverriddenConfig()?.automations;
+  }
+
+  public execute(): void {
+    const hass = this._api.getHASSManager().getHASS();
+
+    // Never execute automations if there's an error (as our automation loop
+    // avoidance -- which shows as an error -- would not work!).
+    if (!hass || this._api.getMessageManager().hasErrorMessage()) {
+      return;
+    }
+
+    const actionsToRun: AutomationActions[] = [];
+    for (const automation of this._automations ?? []) {
+      const shouldExecute = this._api
+        .getConditionsManager()
+        .evaluateCondition(automation.conditions);
+      const actions = shouldExecute ? automation.actions : automation.actions_not;
+      const priorEvaluation = this._priorEvaluations.get(automation);
+      this._priorEvaluations.set(automation, shouldExecute);
+      if (shouldExecute !== priorEvaluation && actions) {
+        actionsToRun.push(actions);
+      }
+    }
+
+    ++this._nestedAutomationExecutions;
+    if (this._nestedAutomationExecutions > MAX_NESTED_AUTOMATION_EXECUTIONS) {
+      this._api.getMessageManager().setMessageIfHigherPriority({
+        type: 'error',
+        message: localize('error.too_many_automations'),
+      });
+      return;
+    }
+
+    actionsToRun.forEach((actions) => {
+      frigateCardHandleAction(
+        this._api.getCardElementManager().getElement(),
+        hass,
+        {},
+        actions,
+      );
+    });
+    --this._nestedAutomationExecutions;
+  }
+}
diff --git a/src/utils/card-controller/camera-url-manager.ts b/src/utils/card-controller/camera-url-manager.ts
new file mode 100644
index 00000000..58d9e782
--- /dev/null
+++ b/src/utils/card-controller/camera-url-manager.ts
@@ -0,0 +1,32 @@
+import { CardCameraURLAPI } from './types';
+
+export class CameraURLManager {
+  protected _api: CardCameraURLAPI;
+
+  constructor(api: CardCameraURLAPI) {
+    this._api = api;
+  }
+
+  public openURL(): void {
+    const url = this.getCameraURL();
+    if (url) {
+      window.open(url);
+    }
+  }
+
+  public hasCameraURL(): boolean {
+    return !!this.getCameraURL();
+  }
+
+  public getCameraURL(): string | null {
+    const view = this._api.getViewManager().getView();
+    const media = view?.queryResults?.getSelectedResult() ?? null;
+    const endpoints = view?.camera
+      ? this._api.getCameraManager().getCameraEndpoints(view.camera, {
+          view: view.view,
+          ...(media && { media: media }),
+        }) ?? null
+      : null;
+    return endpoints?.ui?.endpoint ?? null;
+  }
+}
diff --git a/src/utils/card-controller/card-element-manager.ts b/src/utils/card-controller/card-element-manager.ts
new file mode 100644
index 00000000..2caa067e
--- /dev/null
+++ b/src/utils/card-controller/card-element-manager.ts
@@ -0,0 +1,117 @@
+import { LitElement, ReactiveControllerHost } from 'lit';
+import { ActionEventTarget } from '../../action-handler-directive';
+import { setOrRemoveAttribute } from '../basic';
+import { isCardInPanel } from '../ha';
+import { CardElementAPI } from './types';
+
+export type ScrollCallback = () => void;
+export type MenuToggleCallback = () => void;
+
+export type CardHTMLElement = LitElement & ReactiveControllerHost & ActionEventTarget;
+
+export class CardElementManager {
+  protected _api: CardElementAPI;
+
+  protected _element: CardHTMLElement;
+  protected _scrollCallback: ScrollCallback;
+  protected _menuToggleCallback: MenuToggleCallback;
+
+  constructor(
+    api: CardElementAPI,
+    element: CardHTMLElement,
+    scrollCallback: ScrollCallback,
+    menuToggleCallback: MenuToggleCallback,
+  ) {
+    this._api = api;
+
+    this._element = element;
+    this._scrollCallback = scrollCallback;
+    this._menuToggleCallback = menuToggleCallback;
+  }
+
+  public getElement(): HTMLElement {
+    return this._element;
+  }
+
+  public scrollReset(): void {
+    this._scrollCallback();
+  }
+
+  public toggleMenu(): void {
+    this._menuToggleCallback();
+  }
+
+  public update(): void {
+    this._element.requestUpdate();
+  }
+
+  public hasUpdated(): boolean {
+    return this._element.hasUpdated;
+  }
+
+  public getCardHeight(): number {
+    return this._element.getBoundingClientRect().height;
+  }
+
+  public elementConnected(): void {
+    // Whether or not the card is in panel mode on the dashboard.
+    setOrRemoveAttribute(this._element, isCardInPanel(this._element), 'panel');
+
+    this._api.getFullscreenManager().connect();
+
+    this._element.addEventListener(
+      'mousemove',
+      this._api.getInteractionManager().reportInteraction,
+    );
+    this._element.addEventListener(
+      'll-custom',
+      this._api.getActionsManager().handleActionEvent,
+    );
+    this._element.addEventListener(
+      '@action',
+      this._api.getInteractionManager().reportInteraction,
+    );
+
+    // Listen for HA `navigate` actions.
+    // See: https://github.com/home-assistant/frontend/blob/273992c8e9c3062c6e49481b6d7d688a07067232/src/common/navigate.ts#L43
+    window.addEventListener(
+      'location-changed',
+      this._api.getQueryStringManager().executeAll,
+    );
+
+    // Listen for history state changes (i.e. user using the browser
+    // back/forward controls).
+    window.addEventListener('popstate', this._api.getQueryStringManager().executeAll);
+
+    // Manually call the location change handler as the card will be
+    // disconnected/reconnected when dashboard 'tab' changes happen within HA.
+    this._api.getQueryStringManager().executeAll();
+  }
+
+  public elementDisconnected(): void {
+    setOrRemoveAttribute(this._element, false, 'panel');
+
+    // When the dashboard 'tab' is changed, the media is effectively unloaded.
+    this._api.getMediaLoadedInfoManager().clear();
+    this._api.getFullscreenManager().disconnect();
+
+    this._element.removeEventListener(
+      'mousemove',
+      this._api.getInteractionManager().reportInteraction,
+    );
+    this._element.removeEventListener(
+      'll-custom',
+      this._api.getActionsManager().handleActionEvent,
+    );
+    this._element.removeEventListener(
+      '@action',
+      this._api.getInteractionManager().reportInteraction,
+    );
+
+    window.removeEventListener(
+      'location-changed',
+      this._api.getQueryStringManager().executeAll,
+    );
+    window.removeEventListener('popstate', this._api.getQueryStringManager().executeAll);
+  }
+}
diff --git a/src/conditions.ts b/src/utils/card-controller/conditions-manager.ts
similarity index 80%
rename from src/conditions.ts
rename to src/utils/card-controller/conditions-manager.ts
index 174f4c72..8857ba39 100644
--- a/src/conditions.ts
+++ b/src/utils/card-controller/conditions-manager.ts
@@ -1,14 +1,14 @@
 import { HassEntities } from 'home-assistant-js-websocket';
 import merge from 'lodash-es/merge';
-import { copyConfig } from './config-mgmt';
+import { copyConfig } from '../../config-mgmt';
 import {
   FrigateCardCondition,
-  FrigateCardConfig,
   frigateConditionalSchema,
   OverrideConfigurationKey,
   RawFrigateCardConfig,
-  ViewDisplayMode
-} from './types';
+  ViewDisplayMode,
+} from '../../types';
+import { CardConditionAPI } from './types';
 
 interface ConditionState {
   view?: string;
@@ -69,7 +69,7 @@ type RawOverrides = {
 }[];
 
 export function getOverriddenConfig(
-  controller: Readonly<ConditionController>,
+  manager: Readonly<ConditionsManager>,
   config: Readonly<RawFrigateCardConfig>,
   configOverrides?: Readonly<RawOverrides>,
   stateOverrides?: Partial<ConditionState>,
@@ -78,7 +78,7 @@ export function getOverriddenConfig(
   let overridden = false;
   if (configOverrides) {
     for (const override of configOverrides) {
-      if (controller.evaluateCondition(override.conditions, stateOverrides)) {
+      if (manager.evaluateCondition(override.conditions, stateOverrides)) {
         merge(output, override.overrides);
         overridden = true;
       }
@@ -103,19 +103,23 @@ export function getOverridesByKey(
   );
 }
 
-// A tiny wrapper interface to allow the same controller to be passed around
+// A tiny wrapper interface to allow the same manager to be passed around
 // immutably within objects that will not be equal (===). Every state change
 // generates a new epoch. This is used for Lit rendering to ensure changes to
-// condition state are recognized as changes even though the controller is the
+// condition state are recognized as changes even though the manager is the
 // same.
-export interface ConditionControllerEpoch {
-  controller: Readonly<ConditionController>;
+export interface ConditionsManagerEpoch {
+  manager: Readonly<ConditionsManager>;
 }
 
-export class ConditionController {
+export type ConditionsManagerListener = () => void;
+
+export class ConditionsManager {
+  protected _api: CardConditionAPI;
+
   protected _state: ConditionState = {};
-  protected _epoch: ConditionControllerEpoch = this._createEpoch();
-  protected _stateListeners: (() => void)[] = [];
+  protected _epoch: ConditionsManagerEpoch = this._createEpoch();
+  protected _listeners: ConditionsManagerListener[];
 
   // Whether or not to include HA state in ConditionState. Doing so increases
   // CPU usage as HA state is pumped out very fast, so this is only enabled if
@@ -124,29 +128,59 @@ export class ConditionController {
   protected _mediaQueries: MediaQueryList[] = [];
   protected _mediaQueryTrigger = () => this._triggerChange();
 
-  constructor(config?: FrigateCardConfig) {
-    if (config) {
-      this._initConditions(config);
-    }
+  constructor(api: CardConditionAPI, listener?: ConditionsManagerListener) {
+    this._api = api;
+    this._listeners = [
+      () => this._api.getConfigManager().computeOverrideConfig(),
+      () => this._api.getAutomationsManager().execute(),
+      ...(listener ? [listener] : [])
+    ];
   }
 
-  public addStateListener(callback: () => void): void {
-    this._stateListeners.push(callback);
-  }
-
-  public removeStateListener(callback: () => void): void {
-    this._stateListeners = this._stateListeners.filter(
-      (listener) => listener != callback,
-    );
-  }
-
-  public destroy(): void {
+  public removeConditions(): void {
     this._mediaQueries.forEach((mql) =>
       mql.removeEventListener('change', this._mediaQueryTrigger),
     );
     this._mediaQueries = [];
   }
 
+  public setConditionsFromConfig(): void {
+    this.removeConditions();
+
+    const getAllConditions = (): FrigateCardCondition[] => {
+      const config = this._api.getConfigManager().getConfig();
+      const conditions: FrigateCardCondition[] = [];
+      config?.overrides?.forEach((override) => conditions.push(override.conditions));
+
+      // Element conditions can be arbitrarily nested underneath conditionals and
+      // custom elements that this card may not known. Here we recursively parse
+      // down the elements tree, parsing as we go to find valid conditions.
+      const getElementsConditions = (data: unknown): void => {
+        const parseResult = frigateConditionalSchema.safeParse(data);
+        if (parseResult.success) {
+          conditions.push(parseResult.data.conditions);
+          parseResult.data.elements?.forEach(getElementsConditions);
+        } else if (data && typeof data === 'object') {
+          Object.keys(data).forEach((key) => getElementsConditions(data[key]));
+        }
+      };
+      config?.elements?.forEach(getElementsConditions);
+      return conditions;
+    };
+
+    const conditions = getAllConditions();
+    this._hasHAStateConditions = conditions.some(
+      (condition) => !!condition.state?.length,
+    );
+    conditions.forEach((condition) => {
+      if (condition.media_query) {
+        const mql = window.matchMedia(condition.media_query);
+        mql.addEventListener('change', this._mediaQueryTrigger);
+        this._mediaQueries.push(mql);
+      }
+    });
+  }
+
   public setState(state: Partial<ConditionState>): void {
     this._state = {
       ...this._state,
@@ -155,11 +189,11 @@ export class ConditionController {
     this._triggerChange();
   }
 
-  get hasHAStateConditions(): boolean {
+  public hasHAStateConditions(): boolean {
     return this._hasHAStateConditions;
   }
 
-  public getEpoch(): ConditionControllerEpoch {
+  public getEpoch(): ConditionsManagerEpoch {
     return this._epoch;
   }
 
@@ -212,46 +246,12 @@ export class ConditionController {
     return result;
   }
 
-  protected _createEpoch(): ConditionControllerEpoch {
-    return { controller: this };
+  protected _createEpoch(): ConditionsManagerEpoch {
+    return { manager: this };
   }
 
   protected _triggerChange(): void {
     this._epoch = this._createEpoch();
-    this._stateListeners.forEach((listener) => listener());
-  }
-
-  protected _initConditions(config: FrigateCardConfig): void {
-    const getAllConditions = (config: FrigateCardConfig): FrigateCardCondition[] => {
-      const conditions: FrigateCardCondition[] = [];
-      config.overrides?.forEach((override) => conditions.push(override.conditions));
-
-      // Element conditions can be arbitrarily nested underneath conditionals and
-      // custom elements that this card may not known. Here we recursively parse
-      // down the elements tree, parsing as we go to find valid conditions.
-      const getElementsConditions = (data: unknown): void => {
-        const parseResult = frigateConditionalSchema.safeParse(data);
-        if (parseResult.success) {
-          conditions.push(parseResult.data.conditions);
-          parseResult.data.elements?.forEach(getElementsConditions);
-        } else if (data && typeof data === 'object') {
-          Object.keys(data).forEach((key) => getElementsConditions(data[key]));
-        }
-      };
-      config.elements?.forEach(getElementsConditions);
-      return conditions;
-    };
-
-    const conditions = getAllConditions(config);
-    this._hasHAStateConditions = conditions.some(
-      (condition) => !!condition.state?.length,
-    );
-    conditions.forEach((condition) => {
-      if (condition.media_query) {
-        const mql = window.matchMedia(condition.media_query);
-        mql.addEventListener('change', this._mediaQueryTrigger);
-        this._mediaQueries.push(mql);
-      }
-    });
+    this._listeners.forEach((listener) => listener());
   }
 }
diff --git a/src/utils/card-controller/config-manager.ts b/src/utils/card-controller/config-manager.ts
new file mode 100644
index 00000000..da146b9e
--- /dev/null
+++ b/src/utils/card-controller/config-manager.ts
@@ -0,0 +1,147 @@
+import isEqual from 'lodash-es/isEqual';
+import { isConfigUpgradeable } from '../../config-mgmt';
+import { localize } from '../../localize/localize';
+import { setLowPerformanceProfile } from '../../performance.js';
+import {
+  CardWideConfig,
+  FrigateCardConfig,
+  frigateCardConfigSchema,
+  RawFrigateCardConfig,
+} from '../../types';
+import { getParseErrorPaths } from '../zod.js';
+import { getOverriddenConfig } from './conditions-manager';
+import { InitializationAspect } from './initialization-manager';
+import { CardConfigAPI } from './types';
+
+export class ConfigManager {
+  protected _api: CardConfigAPI;
+
+  // The main base configuration object. For most usecases use getConfig() to
+  // get the correct configuration (which will return overrides as appropriate).
+  // This variable must be called `_config` or `config` to be compatible with
+  // card-mod.
+  protected _config: FrigateCardConfig | null = null;
+  protected _overriddenConfig: FrigateCardConfig | null = null;
+  protected _rawConfig: RawFrigateCardConfig | null = null;
+  protected _cardWideConfig: CardWideConfig | null = null;
+
+  constructor(api) {
+    this._api = api;
+  }
+
+  public hasConfig(): boolean {
+    return !!this.getConfig();
+  }
+
+  public getConfig(): FrigateCardConfig | null {
+    return this._overriddenConfig ?? this._config;
+  }
+
+  public getCardWideConfig(): CardWideConfig | null {
+    return this._cardWideConfig;
+  }
+
+  public getNonOverriddenConfig(): FrigateCardConfig | null {
+    return this._config;
+  }
+
+  public getRawConfig(): RawFrigateCardConfig | null {
+    return this._rawConfig;
+  }
+
+  public setConfig(inputConfig?: RawFrigateCardConfig): void {
+    if (!inputConfig) {
+      throw new Error(localize('error.invalid_configuration'));
+    }
+
+    const parseResult = frigateCardConfigSchema.safeParse(inputConfig);
+    if (!parseResult.success) {
+      const configUpgradeable = isConfigUpgradeable(inputConfig);
+      const hint = getParseErrorPaths(parseResult.error);
+      let upgradeMessage = '';
+      if (configUpgradeable) {
+        upgradeMessage = `${localize('error.upgrade_available')}. `;
+      }
+      throw new Error(
+        upgradeMessage +
+          `${localize('error.invalid_configuration')}: ` +
+          (hint && hint.size
+            ? JSON.stringify([...hint], null, ' ')
+            : localize('error.invalid_configuration_no_hint')),
+      );
+    }
+    const config =
+      parseResult.data.performance.profile !== 'low'
+        ? parseResult.data
+        : setLowPerformanceProfile(inputConfig, parseResult.data);
+
+    this._rawConfig = inputConfig;
+    if (isEqual(this._config, config)) {
+      return;
+    }
+
+    this._config = config;
+    this._cardWideConfig = {
+      performance: config.performance,
+      debug: config.debug,
+    };
+
+    this._api.getConditionsManager().setConditionsFromConfig();
+    this._api.getConditionsManager().setState({
+      view: undefined,
+      displayMode: undefined,
+      camera: undefined,
+    });
+    this._api.getMediaLoadedInfoManager().clear();
+    this._api.getViewManager().reset();
+    this._api.getMessageManager().reset();
+    this._api.getAutomationsManager().setAutomationsFromConfig();
+    this._api.getStyleManager().setPerformance();
+    this._api.getCardElementManager().update();
+
+    this.computeOverrideConfig();
+  }
+
+  public computeOverrideConfig(): void {
+    const conditionsManager = this._api.getConditionsManager();
+    if (!this._config) {
+      return;
+    }
+    const overriddenConfig = getOverriddenConfig(
+      conditionsManager,
+      this._config,
+      this._config.overrides,
+    ) as FrigateCardConfig;
+
+    // Save on Lit re-rendering costs by only updating the configuration if it
+    // actually changes.
+    if (isEqual(overriddenConfig, this._overriddenConfig)) {
+      return;
+    }
+
+    const previousConfig = this._overriddenConfig;
+    this._overriddenConfig = overriddenConfig;
+
+    this._api.getStyleManager().setMinMaxHeight();
+
+    if (
+      previousConfig &&
+      (!isEqual(previousConfig?.cameras, this._overriddenConfig?.cameras) ||
+        !isEqual(previousConfig?.cameras_global, this._overriddenConfig?.cameras_global))
+    ) {
+      this._api.getInitializationManager().uninitialize(InitializationAspect.CAMERAS);
+    }
+
+    if (
+      previousConfig &&
+      previousConfig?.live.microphone.always_connected !==
+        this._overriddenConfig?.live.microphone.always_connected
+    ) {
+      this._api
+        .getInitializationManager()
+        .uninitialize(InitializationAspect.MICROPHONE_CONNECT);
+    }
+
+    this._api.getCardElementManager().update();
+  }
+}
diff --git a/src/utils/card-controller/controller.ts b/src/utils/card-controller/controller.ts
new file mode 100644
index 00000000..62874cdf
--- /dev/null
+++ b/src/utils/card-controller/controller.ts
@@ -0,0 +1,264 @@
+// TODO: test errors during rendering to make sure resetMessage is no longer necessary.
+// TODO: Test HA state connection/disconnect logic in real life.
+// TODO: Should not need to import screenfull anywhere except the fullscreen manager.
+// TODO: executeMediaQueryForView should not need a HTMLElement host parameter see the view-manager.ts call in particular.
+
+import { LovelaceCardEditor } from 'custom-card-helpers';
+import { ReactiveController } from 'lit';
+import { CameraManager } from '../../camera-manager/manager';
+import { FrigateCardConfig } from '../../types';
+import { EntityRegistryManager } from '../ha/entity-registry';
+import { EntityCache } from '../ha/entity-registry/cache';
+import { ResolvedMediaCache } from '../ha/resolved-media';
+import { ActionsManager } from './actions-manager';
+import { AutoUpdateManager } from './auto-update-manager';
+import { AutomationsManager } from './automations-manager';
+import { CameraURLManager } from './camera-url-manager';
+import {
+  CardElementManager,
+  CardHTMLElement,
+  MenuToggleCallback,
+  ScrollCallback,
+} from './card-element-manager';
+import { ConditionsManager, ConditionsManagerListener } from './conditions-manager';
+import { ConfigManager } from './config-manager';
+import { DownloadManager } from './download-manager';
+import { ExpandManager } from './expand-manager';
+import { FullscreenManager } from './fullscreen-manager';
+import { HASSManager } from './hass-manager';
+import { InitializationManager } from './initialization-manager';
+import { InteractionManager } from './interaction-manager';
+import { MediaLoadedInfoManager } from './media-info-manager';
+import { MediaPlayerManager } from './media-player-manager';
+import { MessageManager } from './message-manager';
+import { MicrophoneManager } from './microphone-manager';
+import { QueryStringManager } from './query-string-manager';
+import { StyleManager } from './style-manager';
+import { TriggersManager } from './triggers-manager';
+import {
+  CardActionsManagerAPI,
+  CardAutomationsAPI,
+  CardAutoRefreshAPI,
+  CardCameraAPI,
+  CardCameraURLAPI,
+  CardConditionAPI,
+  CardConfigAPI,
+  CardDownloadAPI,
+  CardElementAPI,
+  CardExpandAPI,
+  CardFullscreenAPI,
+  CardHASSAPI,
+  CardInitializerAPI,
+  CardInteractionAPI,
+  CardMediaLoadedAPI,
+  CardMediaPlayerAPI,
+  CardMessageAPI,
+  CardMicrophoneAPI,
+  CardQueryStringAPI,
+  CardStyleAPI,
+  CardTriggersAPI,
+  CardViewAPI,
+} from './types';
+import { ViewManager } from './view-manager';
+
+export class CardController
+  implements
+    CardActionsManagerAPI,
+    CardAutomationsAPI,
+    CardAutoRefreshAPI,
+    CardCameraAPI,
+    CardCameraURLAPI,
+    CardConditionAPI,
+    CardConfigAPI,
+    CardDownloadAPI,
+    CardElementAPI,
+    CardExpandAPI,
+    CardFullscreenAPI,
+    CardHASSAPI,
+    CardInitializerAPI,
+    CardInteractionAPI,
+    CardMediaLoadedAPI,
+    CardMediaPlayerAPI,
+    CardMessageAPI,
+    CardMicrophoneAPI,
+    CardQueryStringAPI,
+    CardStyleAPI,
+    CardTriggersAPI,
+    CardViewAPI,
+    ReactiveController
+{
+  // These properties may be used in the construction of 'managers' (and should
+  // be created first).
+  protected _entityRegistryManager = new EntityRegistryManager(new EntityCache());
+  protected _resolvedMediaCache = new ResolvedMediaCache();
+
+  protected _actionsManager = new ActionsManager(this);
+  protected _automationsManager = new AutomationsManager(this);
+  protected _autoUpdateManager = new AutoUpdateManager(this);
+  protected _cameraManager: CameraManager = new CameraManager(this);
+  protected _cameraURLManager = new CameraURLManager(this);
+  protected _cardElementManager: CardElementManager;
+  protected _conditionsManager: ConditionsManager;
+  protected _configManager = new ConfigManager(this);
+  protected _downloadManager: DownloadManager = new DownloadManager(this);
+  protected _expandManager = new ExpandManager(this);
+  protected _fullscreenManager = new FullscreenManager(this);
+  protected _hassManager = new HASSManager(this);
+  protected _initializationManager = new InitializationManager(this);
+  protected _interactionManager = new InteractionManager(this);
+  protected _mediaLoadedInfoManager = new MediaLoadedInfoManager(this);
+  protected _mediaPlayerManager = new MediaPlayerManager(this);
+  protected _messageManager = new MessageManager(this);
+  protected _microphoneManager = new MicrophoneManager(this);
+  protected _queryStringManager = new QueryStringManager(this);
+  protected _styleManager = new StyleManager(this);
+  protected _triggersManager: TriggersManager = new TriggersManager(this);
+  protected _viewManager = new ViewManager(this);
+
+  constructor(
+    host: CardHTMLElement,
+    scrollCallback: ScrollCallback,
+    menuToggleCallback: MenuToggleCallback,
+    conditionListener: ConditionsManagerListener,
+  ) {
+    host.addController(this);
+
+    this._conditionsManager = new ConditionsManager(this, conditionListener);
+    this._cardElementManager = new CardElementManager(
+      this,
+      host,
+      scrollCallback,
+      menuToggleCallback,
+    );
+  }
+
+  // *************************************************************************
+  //                           Accessors
+  // *************************************************************************
+
+  public getActionsManager(): ActionsManager {
+    return this._actionsManager;
+  }
+
+  public getAutomationsManager(): AutomationsManager {
+    return this._automationsManager;
+  }
+
+  public getAutoUpdateManager(): AutoUpdateManager {
+    return this._autoUpdateManager;
+  }
+
+  public getCameraManager(): CameraManager {
+    return this._cameraManager;
+  }
+
+  public getCameraURLManager(): CameraURLManager {
+    return this._cameraURLManager;
+  }
+
+  public getCardElementManager(): CardElementManager {
+    return this._cardElementManager;
+  }
+
+  public getConditionsManager(): ConditionsManager {
+    return this._conditionsManager;
+  }
+
+  public static async getConfigElement(): Promise<LovelaceCardEditor> {
+    await import('../../editor.js');
+    return document.createElement('frigate-card-editor');
+  }
+
+  public getConfigManager(): ConfigManager {
+    return this._configManager;
+  }
+  public getDownloadManager(): DownloadManager {
+    return this._downloadManager;
+  }
+
+  public getEntityRegistryManager(): EntityRegistryManager {
+    return this._entityRegistryManager;
+  }
+
+  public getExpandManager(): ExpandManager {
+    return this._expandManager;
+  }
+
+  public getFullscreenManager(): FullscreenManager {
+    return this._fullscreenManager;
+  }
+
+  public getHASSManager(): HASSManager {
+    return this._hassManager;
+  }
+
+  public getInitializationManager(): InitializationManager {
+    return this._initializationManager;
+  }
+
+  public getInteractionManager(): InteractionManager {
+    return this._interactionManager;
+  }
+
+  public getMediaLoadedInfoManager(): MediaLoadedInfoManager {
+    return this._mediaLoadedInfoManager;
+  }
+
+  public getMediaPlayerManager(): MediaPlayerManager {
+    return this._mediaPlayerManager;
+  }
+
+  public getMessageManager(): MessageManager {
+    return this._messageManager;
+  }
+
+  public getMicrophoneManager(): MicrophoneManager {
+    return this._microphoneManager;
+  }
+
+  public getQueryStringManager(): QueryStringManager {
+    return this._queryStringManager;
+  }
+
+  public getResolvedMediaCache(): ResolvedMediaCache {
+    return this._resolvedMediaCache;
+  }
+
+  public static getStubConfig(entities: string[]): FrigateCardConfig {
+    const cameraEntity = entities.find((element) => element.startsWith('camera.'));
+    return {
+      cameras: [
+        {
+          camera_entity: cameraEntity ?? 'camera.demo'
+        },
+      ],
+      // Need to use 'as unknown' to convince Typescript that this really isn't a
+      // mistake, despite the miniscule size of the configuration vs the full type
+      // description.
+    } as unknown as FrigateCardConfig;
+  }
+
+  public getStyleManager(): StyleManager {
+    return this._styleManager;
+  }
+
+  public getTriggersManager(): TriggersManager {
+    return this._triggersManager;
+  }
+
+  public getViewManager(): ViewManager {
+    return this._viewManager;
+  }
+
+  // *************************************************************************
+  //                            Handlers
+  // *************************************************************************
+
+  public hostConnected(): void {
+    this.getCardElementManager().elementConnected();
+  }
+
+  public hostDisconnected(): void {
+    this.getCardElementManager().elementDisconnected();
+  }
+}
diff --git a/src/utils/card-controller/download-manager.ts b/src/utils/card-controller/download-manager.ts
new file mode 100644
index 00000000..adc929ba
--- /dev/null
+++ b/src/utils/card-controller/download-manager.ts
@@ -0,0 +1,41 @@
+import { downloadMedia, downloadURL } from '../download';
+import { generateScreenshotTitle } from '../screenshot';
+import { CardDownloadAPI } from './types';
+
+export class DownloadManager {
+  protected _api: CardDownloadAPI;
+
+  constructor(api: CardDownloadAPI) {
+    this._api = api;
+  }
+
+  public async downloadViewerMedia(): Promise<boolean> {
+    const media = this._api
+      .getViewManager()
+      .getView()
+      ?.queryResults?.getSelectedResult();
+    const hass = this._api.getHASSManager().getHASS();
+
+    if (!media || !hass) {
+      return false;
+    }
+
+    try {
+      await downloadMedia(hass, this._api.getCameraManager(), media);
+    } catch (error: unknown) {
+      this._api.getMessageManager().setErrorIfHigherPriority(error);
+      return false;
+    }
+    return true;
+  }
+
+  public async downloadScreenshot(): Promise<void> {
+    const url = await this._api
+      .getMediaLoadedInfoManager()
+      .get()
+      ?.player?.getScreenshotURL();
+    if (url) {
+      downloadURL(url, generateScreenshotTitle(this._api.getViewManager().getView()));
+    }
+  }
+}
diff --git a/src/utils/card-controller/expand-manager.ts b/src/utils/card-controller/expand-manager.ts
new file mode 100644
index 00000000..9516a9f0
--- /dev/null
+++ b/src/utils/card-controller/expand-manager.ts
@@ -0,0 +1,31 @@
+import { CardExpandAPI } from './types';
+
+export class ExpandManager {
+  protected _expanded = false;
+  protected _api: CardExpandAPI;
+
+  constructor(api: CardExpandAPI) {
+    this._api = api;
+  }
+
+  public isExpanded(): boolean {
+    return this._expanded;
+  }
+
+  public toggleExpanded(): void {
+    this.setExpanded(!this._expanded);
+  }
+
+  public setExpanded(expanded: boolean): void {
+    if (expanded && this._api.getFullscreenManager().isInFullscreen()) {
+      // Fullscreen and expanded mode are mutually exclusive.
+      this._api.getFullscreenManager().stopFullscreen();
+    }
+
+    this._expanded = expanded;
+    this._api.getConditionsManager()?.setState({
+      expand: expanded,
+    });
+    this._api.getCardElementManager().update();
+  }
+}
diff --git a/src/utils/card-controller/fullscreen-manager.ts b/src/utils/card-controller/fullscreen-manager.ts
new file mode 100644
index 00000000..418bf72f
--- /dev/null
+++ b/src/utils/card-controller/fullscreen-manager.ts
@@ -0,0 +1,47 @@
+import screenfull from 'screenfull';
+import { CardFullscreenAPI } from './types';
+
+export class FullscreenManager {
+  protected _api: CardFullscreenAPI;
+
+  constructor(api: CardFullscreenAPI) {
+    this._api = api;
+  }
+
+  public connect(): void {
+    if (screenfull.isEnabled) {
+      screenfull.on('change', this._fullscreenHandler);
+    }
+  }
+
+  public disconnect(): void {
+    if (screenfull.isEnabled) {
+      screenfull.off('change', this._fullscreenHandler);
+    }
+  }
+
+  public isInFullscreen(): boolean {
+    return screenfull.isEnabled && screenfull.isFullscreen;
+  }
+
+  public toggleFullscreen(): void {
+    screenfull.toggle(this._api.getCardElementManager().getElement());
+  }
+
+  public stopFullscreen(): void {
+    screenfull.exit();
+  }
+
+  protected _fullscreenHandler = (): void => {
+    this._api.getExpandManager().setExpanded(false);
+
+    this._api.getConditionsManager()?.setState({
+      fullscreen: this.isInFullscreen(),
+    });
+
+    // Re-render after a change to fullscreen mode to take advantage of
+    // the expanded screen real-estate (vs staying in aspect-ratio locked
+    // modes).
+    this._api.getCardElementManager().update();
+  };
+}
diff --git a/src/utils/card-controller/hass-manager.ts b/src/utils/card-controller/hass-manager.ts
new file mode 100644
index 00000000..ac682583
--- /dev/null
+++ b/src/utils/card-controller/hass-manager.ts
@@ -0,0 +1,88 @@
+import { localize } from '../../localize/localize';
+import { CameraConfig, ExtendedHomeAssistant } from '../../types';
+import { hasHAConnectionStateChanged, isHassDifferent } from '../ha';
+import { CardHASSAPI } from './types';
+
+export class HASSManager {
+  protected _hass: ExtendedHomeAssistant | null = null;
+  protected _api: CardHASSAPI;
+
+  constructor(api: CardHASSAPI) {
+    this._api = api;
+  }
+
+  public getHASS(): ExtendedHomeAssistant | null {
+    return this._hass;
+  }
+
+  public setHASS(hass: ExtendedHomeAssistant): void {
+    const getSelectedCameraConfig = (): CameraConfig | null => {
+      const view = this._api.getViewManager().getView();
+      const cameraManager = this._api.getCameraManager();
+
+      return view && cameraManager
+        ? cameraManager?.getStore().getCameraConfig(view.camera) ?? null
+        : null;
+    };
+
+    const oldHass = this._hass;
+    this._hass = hass;
+
+    const selectedCamera = getSelectedCameraConfig();
+
+    if (hasHAConnectionStateChanged(oldHass, hass)) {
+      if (!this._hass?.connected) {
+        this._api.getMessageManager().setMessageIfHigherPriority({
+          message: localize('error.reconnecting'),
+          icon: 'mdi:lan-disconnect',
+          type: 'connection',
+          dotdotdot: true,
+        });
+      } else {
+        this._api.getViewManager().setViewDefault();
+      }
+    } else if (
+      // Home Assistant pumps a lot of updates through. Re-rendering the card is
+      // necessary at times (e.g. to update the 'clip' view as new clips
+      // arrive), but also is a jarring experience for the user (e.g. if they
+      // are browsing the mini-gallery). Do not allow re-rendering from a Home
+      // Assistant update if there's been recent interaction (e.g. clicks on the
+      // card) or if there is media active playing.
+      this._isAutomatedViewUpdateAllowed() &&
+      isHassDifferent(this._hass, oldHass, [
+        ...(this._api.getConfigManager().getConfig()?.view.update_entities ?? []),
+        ...(selectedCamera?.triggers.entities ?? []),
+      ])
+    ) {
+      // If entities being monitored have changed then reset the view to the
+      // default.
+      this._api.getViewManager().setViewDefault();
+    } else if (
+      isHassDifferent(this._hass, oldHass, [
+        ...(this._api.getConfigManager().getConfig()?.view.render_entities ?? []),
+
+        // Refresh the card if media player state changes:
+        // https://github.com/dermotduffy/frigate-hass-card/issues/881
+        ...this._api.getMediaPlayerManager().getMediaPlayers(),
+      ])
+    ) {
+      this._api.getCardElementManager().update();
+    }
+
+    this._api.getTriggersManager().updateTriggeredCameras(oldHass);
+
+    if (this._api.getConditionsManager().hasHAStateConditions()) {
+      this._api.getConditionsManager().setState({ state: this._hass.states });
+    }
+
+    // Dark mode may depend on HASS.
+    this._api.getStyleManager().setLightOrDarkMode();
+  }
+
+  protected _isAutomatedViewUpdateAllowed(): boolean {
+    return (
+      this._api.getConfigManager().getConfig()?.view.update_force ||
+      !this._api.getInteractionManager().hasInteraction()
+    );
+  }
+}
diff --git a/src/utils/card-controller/initialization-manager.ts b/src/utils/card-controller/initialization-manager.ts
new file mode 100644
index 00000000..cb553a79
--- /dev/null
+++ b/src/utils/card-controller/initialization-manager.ts
@@ -0,0 +1,134 @@
+import { loadLanguages } from '../../localize/localize';
+import { sideLoadHomeAssistantElements } from '../ha';
+import { Initializer } from '../initializer/initializer';
+import { CardInitializerAPI } from './types';
+
+export enum InitializationAspect {
+  LANGUAGES = 'languages',
+  SIDE_LOAD_ELEMENTS = 'side-load-elements',
+  MEDIA_PLAYERS = 'media-players',
+  CAMERAS = 'cameras',
+  MICROPHONE_CONNECT = 'microphone-connect',
+}
+
+export class InitializationManager {
+  protected _api: CardInitializerAPI;
+  protected _initializer;
+
+  constructor(api: CardInitializerAPI, initializer?: Initializer) {
+    this._api = api;
+    this._initializer = initializer ?? new Initializer();
+  }
+
+  public isInitializedMandatory(): boolean {
+    return this._initializer.isInitializedMultiple([
+      InitializationAspect.LANGUAGES,
+      InitializationAspect.SIDE_LOAD_ELEMENTS,
+      InitializationAspect.CAMERAS,
+    ]);
+  }
+
+  /**
+   * Initialize the hard requirements for rendering anything.
+   * @returns `true` if card rendering can continue.
+   */
+  public async initializeMandatory(): Promise<boolean> {
+    const hass = this._api.getHASSManager().getHASS();
+    if (!hass) {
+      return false;
+    }
+
+    if (
+      !(await this._initializer.initializeMultipleIfNecessary({
+        // Caution: Ensure nothing in this set of initializers requires
+        // config or languages since they will not yet have been initialized.
+        [InitializationAspect.LANGUAGES]: async () => await loadLanguages(hass),
+        [InitializationAspect.SIDE_LOAD_ELEMENTS]: async () =>
+          await sideLoadHomeAssistantElements(),
+      }))
+    ) {
+      return false;
+    }
+
+    if (!this._api.getConfigManager().hasConfig()) {
+      return false;
+    }
+
+    if (
+      !(await this._initializer.initializeIfNecessary(
+        InitializationAspect.CAMERAS,
+        async () => await this._api.getCameraManager().initializeCamerasFromConfig(),
+      ))
+    ) {
+      return false;
+    }
+
+    if (!this._api.getMessageManager().hasMessage()) {
+      // Set a view on initial load. However, if the query string contains a
+      // view related action, we don't set any view here and allow that content
+      // to be triggered by the firstUpdated() call that runs query string
+      // actions. To do otherwise may cause a race condition between the default
+      // view and the querystring view, see:
+      // https://github.com/dermotduffy/frigate-hass-card/issues/1200
+      const hasViewRelatedActions = this._api
+        .getQueryStringManager()
+        .hasViewRelatedActions();
+      if (hasViewRelatedActions) {
+        this._api.getQueryStringManager().executeViewRelated();
+      } else {
+        this._api.getViewManager().setViewDefault();
+      }
+    }
+
+    this._api.getCardElementManager().update();
+    return true;
+  }
+
+  /**
+   * Initialize aspects of the card that can load in the 'background'.
+   * @returns `true` if card rendering can continue.
+   */
+  public async initializeBackgroundIfNecessary(): Promise<boolean> {
+    const hass = this._api.getHASSManager().getHASS();
+    const config = this._api.getConfigManager().getConfig();
+
+    if (!hass || !config) {
+      return false;
+    }
+
+    if (
+      this._initializer.isInitializedMultiple([
+        ...(config.menu.buttons.media_player.enabled
+          ? [InitializationAspect.MEDIA_PLAYERS]
+          : []),
+        ...(config.live.microphone.always_connected
+          ? [InitializationAspect.MICROPHONE_CONNECT]
+          : []),
+      ])
+    ) {
+      return true;
+    }
+
+    if (
+      !(await this._initializer.initializeMultipleIfNecessary({
+        ...(config.menu.buttons.media_player.enabled && {
+          [InitializationAspect.MEDIA_PLAYERS]: async () =>
+            await this._api.getMediaPlayerManager().initialize(),
+        }),
+        ...(config.live.microphone.always_connected && {
+          [InitializationAspect.MICROPHONE_CONNECT]: async () =>
+            await this._api.getMicrophoneManager().connect(),
+        }),
+      }))
+    ) {
+      return false;
+    }
+
+    this._api.getCardElementManager().update();
+    return true;
+  }
+
+  public uninitialize(aspect: InitializationAspect) {
+    return this._initializer.uninitialize(aspect);
+  }
+}
diff --git a/src/utils/card-controller/interaction-manager.ts b/src/utils/card-controller/interaction-manager.ts
new file mode 100644
index 00000000..290f85be
--- /dev/null
+++ b/src/utils/card-controller/interaction-manager.ts
@@ -0,0 +1,50 @@
+import throttle from 'lodash-es/throttle';
+import { Timer } from '../timer';
+import { CardInteractionAPI } from './types';
+
+export class InteractionManager {
+  protected _timer = new Timer();
+  protected _api: CardInteractionAPI;
+
+  constructor(api: CardInteractionAPI) {
+    this._api = api;
+  }
+
+  // The mouse handler may be called continually, throttle it to at most once
+  // per second for performance reasons.
+  public reportInteraction = throttle(() => {
+    this._reportInteraction();
+  }, 1 * 1000);
+
+  public hasInteraction(): boolean {
+    return this._timer.isRunning();
+  }
+
+  /**
+   * Start the user interaction ('screensaver') timer to reset the view to
+   * default `view.timeout_seconds` after user interaction.
+   */
+  protected _reportInteraction(): void {
+    this._timer.stop();
+
+    // Interactions reset the trigger state.
+    this._api.getTriggersManager().untrigger();
+
+    const timeoutSeconds = this._api.getConfigManager().getConfig()
+      ?.view.timeout_seconds;
+
+    if (timeoutSeconds) {
+      this._timer.start(timeoutSeconds, () => {
+        if (this._isAutomatedUpdateAllowed()) {
+          this._api.getViewManager().setViewDefault();
+          this._api.getStyleManager().setLightOrDarkMode();
+        }
+      });
+    }
+    this._api.getStyleManager().setLightOrDarkMode();
+  }
+
+  protected _isAutomatedUpdateAllowed(): boolean {
+    return !this._api.getTriggersManager().isTriggered();
+  }
+}
diff --git a/src/utils/card-controller/media-info-manager.ts b/src/utils/card-controller/media-info-manager.ts
new file mode 100644
index 00000000..ec00c1a9
--- /dev/null
+++ b/src/utils/card-controller/media-info-manager.ts
@@ -0,0 +1,52 @@
+import { MediaLoadedInfo } from '../../types';
+import { log } from '../debug';
+import { isValidMediaLoadedInfo } from '../media-info';
+import { CardMediaLoadedAPI } from './types';
+
+export class MediaLoadedInfoManager {
+  protected _api: CardMediaLoadedAPI;
+  protected _current: MediaLoadedInfo | null = null;
+  protected _lastKnown: MediaLoadedInfo | null = null;
+
+  constructor(api: CardMediaLoadedAPI) {
+    this._api = api;
+  }
+
+  public set(mediaInfo: MediaLoadedInfo): void {
+    if (!isValidMediaLoadedInfo(mediaInfo)) {
+      return;
+    }
+
+    log(
+      this._api.getConfigManager().getCardWideConfig(),
+      `Frigate Card media load: `,
+      mediaInfo,
+    );
+
+    this._current = mediaInfo;
+    this._lastKnown = mediaInfo;
+
+    this._api.getConditionsManager().setState({ media_loaded: true });
+
+    // Fresh media information may change how the card is rendered.
+    this._api.getStyleManager().setExpandedMode();
+    this._api.getCardElementManager().update();
+  }
+
+  public get(): MediaLoadedInfo | null {
+    return this._current;
+  }
+
+  public getLastKnown(): MediaLoadedInfo | null {
+    return this._lastKnown;
+  }
+
+  public clear(): void {
+    this._current = null;
+    this._api.getConditionsManager().setState({ media_loaded: false });
+  }
+
+  public has(): boolean {
+    return !!this._current;
+  }
+}
diff --git a/src/utils/card-controller/media-player-manager.ts b/src/utils/card-controller/media-player-manager.ts
new file mode 100644
index 00000000..58b2099a
--- /dev/null
+++ b/src/utils/card-controller/media-player-manager.ts
@@ -0,0 +1,125 @@
+import { MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA } from '../../const';
+import { ViewMedia } from '../../view/media';
+import { ViewMediaClassifier } from '../../view/media-classifier';
+import { errorToConsole } from '../basic';
+import { Entity } from '../ha/entity-registry/types';
+import { supportsFeature } from '../ha/update';
+import { CardMediaPlayerAPI } from './types';
+
+export class MediaPlayerManager {
+  protected _mediaPlayers: string[] = [];
+
+  protected _api: CardMediaPlayerAPI;
+
+  constructor(api: CardMediaPlayerAPI) {
+    this._api = api;
+  }
+
+  public getMediaPlayers(): string[] {
+    return this._mediaPlayers;
+  }
+
+  public hasMediaPlayers(): boolean {
+    return this._mediaPlayers.length > 0;
+  }
+
+  public async initialize(): Promise<void> {
+    const hass = this._api.getHASSManager().getHASS();
+    if (!hass) {
+      return;
+    }
+
+    const isValidMediaPlayer = (entityID: string): boolean => {
+      if (entityID.startsWith('media_player.')) {
+        const stateObj = hass.states[entityID];
+        if (
+          stateObj &&
+          stateObj.state !== 'unavailable' &&
+          supportsFeature(stateObj, MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA)
+        ) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    const mediaPlayers = Object.keys(hass.states).filter(isValidMediaPlayer);
+    let mediaPlayerEntities: Map<string, Entity> | null = null;
+    try {
+      mediaPlayerEntities = await this._api
+        .getEntityRegistryManager()
+        .getEntities(hass, mediaPlayers);
+    } catch (e) {
+      // Failing to fetch media player information is not considered
+      // sufficiently serious to block card startup -- it is just logged and we
+      // move on.
+      errorToConsole(e as Error);
+    }
+
+    // Filter out entities that are marked as hidden (this information is not
+    // available in the HA state, only in the registry).
+    this._mediaPlayers = mediaPlayers.filter((entityID) => {
+      // Specifically allow for media players that are not found in the entity registry:
+      // See: https://github.com/dermotduffy/frigate-hass-card/issues/1016
+      const entity = mediaPlayerEntities?.get(entityID);
+      return !entity || !entity.hidden_by;
+    });
+  }
+
+  public async stop(mediaPlayer: string): Promise<void> {
+    await this._api
+      .getHASSManager()
+      .getHASS()
+      ?.callService('media_player', 'media_stop', {
+        entity_id: mediaPlayer,
+      });
+  }
+
+  public async playLive(mediaPlayer: string, cameraID: string): Promise<void> {
+    const hass = this._api.getHASSManager().getHASS();
+    const cameraConfig = this._api
+      .getCameraManager()
+      .getStore()
+      .getCameraConfig(cameraID);
+    const cameraEntity = cameraConfig?.camera_entity ?? null;
+
+    if (!hass || !cameraEntity) {
+      return;
+    }
+
+    const title =
+      this._api.getCameraManager().getCameraMetadata(cameraID)?.title ?? null;
+    const thumbnail = hass.states[cameraEntity]?.attributes?.entity_picture ?? null;
+
+    await hass.callService('media_player', 'play_media', {
+      entity_id: mediaPlayer,
+      media_content_id: `media-source://camera/${cameraEntity}`,
+      media_content_type: 'application/vnd.apple.mpegurl',
+      extra: {
+        ...(title && { title: title }),
+        ...(thumbnail && { thumb: thumbnail }),
+      },
+    });
+  }
+
+  public async playMedia(mediaPlayer: string, media?: ViewMedia | null): Promise<void> {
+    const hass = this._api.getHASSManager().getHASS();
+
+    if (!hass || !media) {
+      return;
+    }
+
+    const title = media.getTitle();
+    const thumbnail = media.getThumbnail();
+
+    await hass.callService('media_player', 'play_media', {
+      entity_id: mediaPlayer,
+      media_content_id: media.getContentID(),
+      media_content_type: ViewMediaClassifier.isVideo(media) ? 'video' : 'image',
+      extra: {
+        ...(title && { title: title }),
+        ...(thumbnail && { thumb: thumbnail }),
+      },
+    });
+  }
+}
diff --git a/src/utils/card-controller/message-manager.ts b/src/utils/card-controller/message-manager.ts
new file mode 100644
index 00000000..1c52a257
--- /dev/null
+++ b/src/utils/card-controller/message-manager.ts
@@ -0,0 +1,67 @@
+import { FrigateCardError, MESSAGE_TYPE_PRIORITIES, Message } from '../../types';
+import { errorToConsole } from '../basic';
+import { CardMessageAPI } from './types';
+
+export class MessageManager {
+  protected _message: Message | null = null;
+  protected _api: CardMessageAPI;
+
+  constructor(api: CardMessageAPI) {
+    this._api = api;
+  }
+
+  public getMessage(): Message | null {
+    return this._message;
+  }
+
+  public hasMessage(): boolean {
+    return !!this._message;
+  }
+
+  public hasErrorMessage(): boolean {
+    return this._message?.type === 'error';
+  }
+
+  public reset(): void {
+    const hadMessage = this.hasMessage();
+    this._message = null;
+
+    if (hadMessage) {
+      this._api.getCardElementManager().update();
+    }
+  }
+
+  public setErrorIfHigherPriority(error: unknown): void {
+    // This object should accept unknown objects to be able to seamlessly
+    // process arguments to catch() which can only be unknown/any.
+    if (!(error instanceof Error)) {
+      return;
+    }
+
+    errorToConsole(error);
+    this.setMessageIfHigherPriority({
+      message: error.message,
+      type: 'error',
+      ...(error instanceof FrigateCardError && { context: error.context }),
+    });
+  }
+
+  public setMessageIfHigherPriority(message: Message): boolean {
+    const currentPriority = this._message
+      ? MESSAGE_TYPE_PRIORITIES[this._message.type]
+      : 0;
+    const newPriority = MESSAGE_TYPE_PRIORITIES[message.type];
+
+    if (this._message && newPriority < currentPriority) {
+      return false;
+    }
+
+    this._message = message;
+
+    // When a message is displayed it effectively unloads the media.
+    this._api.getMediaLoadedInfoManager().clear();
+    this._api.getCardElementManager().scrollReset();
+    this._api.getCardElementManager().update();
+    return true;
+  }
+}
diff --git a/src/utils/microphone.ts b/src/utils/card-controller/microphone-manager.ts
similarity index 52%
rename from src/utils/microphone.ts
rename to src/utils/card-controller/microphone-manager.ts
index 97d5f436..85a7917c 100644
--- a/src/utils/microphone.ts
+++ b/src/utils/card-controller/microphone-manager.ts
@@ -1,7 +1,9 @@
-import { errorToConsole } from './basic';
-import { Timer } from './timer';
+import { errorToConsole } from '../basic';
+import { Timer } from '../timer';
+import { CardMicrophoneAPI } from './types';
 
-export class MicrophoneController {
+export class MicrophoneManager {
+  protected _api: CardMicrophoneAPI;
   protected _stream?: MediaStream | null;
   protected _timer = new Timer();
 
@@ -10,10 +12,8 @@ export class MicrophoneController {
   // have the right mute status.
   protected _mute = true;
 
-  protected _disconnectSeconds: number;
-
-  constructor(disconnectSeconds?: number) {
-    this._disconnectSeconds = disconnectSeconds ?? 0;
+  constructor(api: CardMicrophoneAPI) {
+    this._api = api;
   }
 
   public async connect(): Promise<void> {
@@ -32,6 +32,8 @@ export class MicrophoneController {
   public async disconnect(): Promise<void> {
     this._stream?.getTracks().forEach((track) => track.stop());
     this._stream = undefined;
+
+    this._api.getCardElementManager().update();
   }
 
   public getStream(): MediaStream | undefined {
@@ -43,6 +45,8 @@ export class MicrophoneController {
       track.enabled = !this._mute;
     });
     this._startTimer();
+
+    this._api.getCardElementManager().update();
   }
 
   public mute(): void {
@@ -50,9 +54,24 @@ export class MicrophoneController {
     this._setMute();
   }
 
-  public unmute(): void {
-    this._mute = false;
-    this._setMute();
+  public async unmute(): Promise<void> {
+    const unmute = (): void => {
+      this._mute = false;
+      this._setMute();
+    };
+
+    if (!this.isConnected() && !this.isForbidden()) {
+      // The connect() call is async and make take an arbitrary amount of
+      // time for the user to grant access to their microphone. With a
+      // momentary microphone button the mute call (on mouse release) may
+      // arrive before the connection is even granted, so we unmute first
+      // before the connection is made, so the mute call on release will not
+      // be 'overwritten' incorrectly.
+      unmute();
+      await this.connect();
+    } else if (this.isConnected()) {
+      unmute();
+    }
   }
 
   public isConnected(): boolean {
@@ -70,8 +89,17 @@ export class MicrophoneController {
   }
 
   protected _startTimer(): void {
-    if (this._disconnectSeconds) {
-      this._timer.start(this._disconnectSeconds, () => {
+    const microphoneConfig = this._api.getConfigManager().getConfig()
+      ?.live.microphone;
+
+    if (microphoneConfig?.always_connected) {
+      return;
+    }
+
+    const disconnectSeconds = microphoneConfig?.disconnect_seconds ?? 0;
+
+    if (disconnectSeconds) {
+      this._timer.start(disconnectSeconds, () => {
         this.disconnect();
       });
     }
diff --git a/src/utils/card-controller/query-string-manager.ts b/src/utils/card-controller/query-string-manager.ts
new file mode 100644
index 00000000..ded00c7a
--- /dev/null
+++ b/src/utils/card-controller/query-string-manager.ts
@@ -0,0 +1,160 @@
+import { FrigateCardCustomAction, FrigateCardViewAction } from '../../types';
+import { createFrigateCardCustomAction } from '../action.js';
+import { CardQueryStringAPI } from './types';
+import { ViewManagerSetViewParameters } from './view-manager';
+
+interface QueryStringViewIntent {
+  view?: ViewManagerSetViewParameters & {
+    default?: boolean;
+  };
+  other?: FrigateCardCustomAction[];
+}
+
+export class QueryStringManager {
+  protected _api: CardQueryStringAPI;
+
+  constructor(api: CardQueryStringAPI) {
+    this._api = api;
+  }
+
+  public hasViewRelatedActions(): boolean {
+    return !!this._calculateIntent().view;
+  }
+
+  public executeNonViewRelated(): void {
+    this._executeNonViewRelated(this._calculateIntent());
+  }
+
+  public executeViewRelated(): void {
+    this._executeViewRelated(this._calculateIntent());
+  }
+
+  public executeAll(): void {
+    const intent = this._calculateIntent();
+    this._executeViewRelated(intent);
+    this._executeNonViewRelated(intent);
+  }
+
+  protected _executeViewRelated(intent: QueryStringViewIntent): void {
+    if (intent.view) {
+      if (intent.view.default) {
+        this._api.getViewManager().setViewDefault({
+          ...(intent.view.cameraID && { cameraID: intent.view.cameraID }),
+          ...(intent.view.substream && { substream: intent.view.substream }),
+        });
+      } else {
+        this._api.getViewManager().setViewByParameters({
+          ...(intent.view.viewName && { viewName: intent.view.viewName }),
+          ...(intent.view.cameraID && { cameraID: intent.view.cameraID }),
+          ...(intent.view.substream && { substream: intent.view.substream }),
+        });
+      }
+    }
+  }
+
+  protected _executeNonViewRelated(intent: QueryStringViewIntent): void {
+    // Only execute non-view actions when the card has rendered at least once.
+    if (!this._api.getCardElementManager().hasUpdated()) {
+      return;
+    }
+
+    intent.other?.forEach((action) =>
+      this._api.getActionsManager().executeAction(action),
+    );
+  }
+
+  protected _calculateIntent(): QueryStringViewIntent {
+    const result: QueryStringViewIntent = {};
+    for (const action of this._getActions()) {
+      if (this._isViewAction(action)) {
+        (result.view ??= {}).viewName = action.frigate_card_action;
+        (result.view ??= {}).default = undefined;
+      } else if (action.frigate_card_action === 'default') {
+        (result.view ??= {}).default = true;
+        (result.view ??= {}).viewName = undefined;
+      } else if (action.frigate_card_action === 'camera_select') {
+        (result.view ??= {}).cameraID = action.camera;
+      } else if (action.frigate_card_action === 'live_substream_select') {
+        (result.view ??= {}).substream = action.camera;
+      } else {
+        (result.other ??= []).push(action);
+      }
+    }
+    return result;
+  }
+
+  protected _getActions(): FrigateCardCustomAction[] {
+    const params = new URLSearchParams(window.location.search);
+    const actions: FrigateCardCustomAction[] = [];
+    const actionRE = new RegExp(
+      /^frigate-card-action([.:](?<cardID>\w+))?[.:](?<action>\w+)/,
+    );
+    for (const [key, value] of params.entries()) {
+      const match = key.match(actionRE);
+      if (!match || !match.groups) {
+        continue;
+      }
+      const cardID: string | undefined = match.groups['cardID'];
+      const action = match.groups['action'];
+
+      let customAction: FrigateCardCustomAction | null = null;
+      switch (action) {
+        case 'camera_select':
+        case 'live_substream_select':
+          if (value) {
+            customAction = createFrigateCardCustomAction(action, {
+              camera: value,
+              cardID: cardID,
+            });
+          }
+          break;
+        case 'camera_ui':
+        case 'clip':
+        case 'clips':
+        case 'default':
+        case 'diagnostics':
+        case 'download':
+        case 'expand':
+        case 'image':
+        case 'live':
+        case 'menu_toggle':
+        case 'recording':
+        case 'recordings':
+        case 'snapshot':
+        case 'snapshots':
+        case 'timeline':
+          customAction = createFrigateCardCustomAction(action, {
+            cardID: cardID,
+          });
+          break;
+        default:
+          console.warn(
+            `Frigate card received unknown card action in query string: ${action}`,
+          );
+      }
+      if (customAction) {
+        actions.push(customAction);
+      }
+    }
+    return actions;
+  }
+
+  protected _isViewAction = (
+    action: FrigateCardCustomAction,
+  ): action is FrigateCardViewAction => {
+    switch (action.frigate_card_action) {
+      case 'clip':
+      case 'clips':
+      case 'diagnostics':
+      case 'image':
+      case 'live':
+      case 'recording':
+      case 'recordings':
+      case 'snapshot':
+      case 'snapshots':
+      case 'timeline':
+        return true;
+    }
+    return false;
+  };
+}
diff --git a/src/utils/card-controller/style-manager.ts b/src/utils/card-controller/style-manager.ts
new file mode 100644
index 00000000..a55695fd
--- /dev/null
+++ b/src/utils/card-controller/style-manager.ts
@@ -0,0 +1,121 @@
+import { setPerformanceCSSStyles } from '../../performance';
+import { FrigateCardConfig } from '../../types';
+import { View } from '../../view/view';
+import { setOrRemoveAttribute } from '../basic';
+import { CardStyleAPI } from './types';
+
+export class StyleManager {
+  protected _api: CardStyleAPI;
+
+  constructor(api: CardStyleAPI) {
+    this._api = api;
+  }
+
+  public setLightOrDarkMode(): void {
+    const config = this._api.getConfigManager().getConfig();
+    const isDarkMode =
+      config?.view.dark_mode === 'on' ||
+      (config?.view.dark_mode === 'auto' &&
+        (!this._api.getInteractionManager().hasInteraction() ||
+          !!this._api.getHASSManager().getHASS()?.themes.darkMode));
+
+    setOrRemoveAttribute(
+      this._api.getCardElementManager().getElement(),
+      isDarkMode,
+      'dark',
+    );
+  }
+
+  public setExpandedMode(): void {
+    const card = this._api.getCardElementManager().getElement();
+    const view = this._api.getViewManager().getView();
+
+    // When a new media loads, set the aspect ratio for when the card is
+    // expanded/popped-up. This is based exclusively on last media content,
+    // as dimension configuration does not apply in fullscreen or expanded mode.
+    const lastKnown = this._api.getMediaLoadedInfoManager().getLastKnown();
+    card.style.setProperty(
+      '--frigate-card-expand-aspect-ratio',
+      view?.isAnyMediaView() && lastKnown
+        ? `${lastKnown.width} / ${lastKnown.height}`
+        : 'unset',
+    );
+    // Non-media may have no intrinsic dimensions (or multiple media items in a
+    // grid) and so we need to explicit request the dialog to use all available
+    // space.
+    const isGrid = view?.isGrid();
+    card.style.setProperty(
+      '--frigate-card-expand-width',
+      !isGrid && view?.isAnyMediaView()
+        ? 'none'
+        : 'var(--frigate-card-expand-max-width)',
+    );
+    card.style.setProperty(
+      '--frigate-card-expand-height',
+      !isGrid && view?.isAnyMediaView()
+        ? 'none'
+        : 'var(--frigate-card-expand-max-height)',
+    );
+  }
+
+  public setMinMaxHeight(): void {
+    const config = this._api.getConfigManager().getConfig();
+    if (config) {
+      const card = this._api.getCardElementManager().getElement();
+      card.style.setProperty('--frigate-card-min-height', config.dimensions.min_height);
+      card.style.setProperty('--frigate-card-max-height', config.dimensions.max_height);
+    }
+  }
+
+  public setPerformance(): void {
+    setPerformanceCSSStyles(
+      this._api.getCardElementManager().getElement(),
+      this._api.getConfigManager().getCardWideConfig()?.performance,
+    );
+  }
+
+  protected _isAspectRatioEnforced(config: FrigateCardConfig, view: View): boolean {
+    const aspectRatioMode = config.dimensions.aspect_ratio_mode;
+
+    // Do not artifically constrain aspect ratio if:
+    // - It's fullscreen.
+    // - It's in expanded mode.
+    // - Aspect ratio enforcement is disabled.
+    // - Aspect ratio enforcement is dynamic and it's a media view (i.e. not the
+    //   gallery) or diagnostics / timeline.
+    return !(
+      this._api.getFullscreenManager().isInFullscreen() ||
+      this._api.getExpandManager().isExpanded() ||
+      aspectRatioMode === 'unconstrained' ||
+      (aspectRatioMode === 'dynamic' &&
+        (view.isAnyMediaView() || view.is('timeline'))) ||
+      view.is('diagnostics')
+    );
+  }
+
+  /**
+   * Get the aspect ratio padding required to enforce the aspect ratio (if it is
+   * required).
+   * @returns A padding percentage.
+   */
+  public getAspectRatioStyle(): string {
+    const config = this._api.getConfigManager().getConfig();
+    const view = this._api.getViewManager().getView();
+
+    if (config && view) {
+      if (!this._isAspectRatioEnforced(config, view)) {
+        return 'auto';
+      }
+
+      const aspectRatioMode = config.dimensions.aspect_ratio_mode;
+
+      const lastKnown = this._api.getMediaLoadedInfoManager().getLastKnown();
+      if (lastKnown && aspectRatioMode === 'dynamic') {
+        return `${lastKnown.width} / ${lastKnown.height}`;
+      }
+
+      return `${config.dimensions.aspect_ratio[0]} / ${config.dimensions.aspect_ratio[1]}`;
+    }
+    return '16 / 9';
+  }
+}
diff --git a/src/utils/card-controller/triggers-manager.ts b/src/utils/card-controller/triggers-manager.ts
new file mode 100644
index 00000000..af938adb
--- /dev/null
+++ b/src/utils/card-controller/triggers-manager.ts
@@ -0,0 +1,126 @@
+import { HomeAssistant } from 'custom-card-helpers';
+import orderBy from 'lodash-es/orderBy';
+import { getHassDifferences, isTriggeredState } from '../ha';
+import { Timer } from '../timer';
+import { CardTriggersAPI } from './types';
+
+export class TriggersManager {
+  protected _api: CardTriggersAPI;
+
+  protected _triggers: Map<string, Date> = new Map();
+  protected _untriggerTimer = new Timer();
+
+  constructor(api: CardTriggersAPI) {
+    this._api = api;
+  }
+
+  public isTriggered(): boolean {
+    return !!this._triggers.size || this._untriggerTimer.isRunning();
+  }
+
+  public updateTriggeredCameras(oldHass?: HomeAssistant | null): boolean {
+    if (!this._shouldTrackTriggers()) {
+      return false;
+    }
+
+    const hass = this._api.getHASSManager().getHASS();
+
+    const now = new Date();
+    let triggerChanges = false;
+
+    const cameras = this._api.getCameraManager().getStore().getVisibleCameras();
+    for (const [cameraID, config] of cameras?.entries()) {
+      const triggerEntities = config.triggers.entities;
+      const diffs = getHassDifferences(hass, oldHass, triggerEntities, {
+        stateOnly: true,
+      });
+      const shouldTrigger = diffs.some((diff) => isTriggeredState(diff.newState));
+      const shouldUntrigger = triggerEntities.every(
+        (entity) => !isTriggeredState(hass?.states[entity]),
+      );
+      if (shouldTrigger) {
+        this._triggers.set(cameraID, now);
+        triggerChanges = true;
+      } else if (shouldUntrigger && this._triggers.has(cameraID)) {
+        this._triggers.delete(cameraID);
+        triggerChanges = true;
+      }
+    }
+
+    if (triggerChanges) {
+      const targetCameraID = this._getMostRecentTrigger();
+      if (targetCameraID) {
+        this._triggerAction(targetCameraID);
+        return true;
+      } else {
+        this._startUntriggerTimer();
+      }
+    }
+    return false;
+  }
+
+  public untrigger(): void {
+    const wasTriggered = this.isTriggered();
+    this._triggers.clear();
+    this._untriggerTimer.stop();
+
+    if (wasTriggered) {
+      this._untriggerAction();
+    }
+  }
+
+  protected _triggerAction(cameraID: string): void {
+    const view = this._api.getViewManager().getView();
+    if (
+      this._isAutomatedViewUpdateAllowed() &&
+      (view?.camera !== cameraID || !view?.is('live'))
+    ) {
+      this._api.getViewManager().setViewByParameters({
+        viewName: 'live',
+        cameraID: cameraID,
+      });
+    }
+  }
+
+  protected _untriggerAction(): void {
+    if (
+      !this.isTriggered() &&
+      this._isAutomatedViewUpdateAllowed() &&
+      this._api.getConfigManager().getConfig()?.view.scan.untrigger_reset
+    ) {
+      this._api.getViewManager().setViewDefault();
+    }
+  }
+
+  protected _isAutomatedViewUpdateAllowed(): boolean {
+    return (
+      this._api.getConfigManager().getConfig()?.view.update_force ||
+      !this._api.getInteractionManager().hasInteraction()
+    );
+  }
+
+  protected _shouldTrackTriggers(): boolean {
+    return !!this._api.getConfigManager().getConfig()?.view.scan.enabled;
+  }
+
+  protected _startUntriggerTimer(): void {
+    this._untriggerTimer.start(
+      /* istanbul ignore next: the case of config being null here cannot be
+         reached, as there's no way to have the untrigger call happen without
+         a config. -- @preserve */
+      this._api.getConfigManager().getConfig()?.view.scan.untrigger_seconds ?? 0,
+      () => {
+        this._untriggerAction();
+      },
+    );
+  }
+
+  protected _getMostRecentTrigger(): string | null {
+    const sorted = orderBy(
+      [...this._triggers.entries()],
+      (entry) => entry[1].getTime(),
+      'desc',
+    );
+    return sorted.length ? sorted[0][0] : null;
+  }
+}
diff --git a/src/utils/card-controller/types.ts b/src/utils/card-controller/types.ts
new file mode 100644
index 00000000..f914c4c6
--- /dev/null
+++ b/src/utils/card-controller/types.ts
@@ -0,0 +1,214 @@
+import { CameraManager } from '../../camera-manager/manager';
+import { ConditionsManager } from './conditions-manager';
+import { EntityRegistryManager } from '../ha/entity-registry';
+import { ResolvedMediaCache } from '../ha/resolved-media';
+import { ActionsManager } from './actions-manager';
+import { AutoUpdateManager } from './auto-update-manager';
+import { AutomationsManager } from './automations-manager';
+import { CameraURLManager } from './camera-url-manager';
+import { CardElementManager } from './card-element-manager';
+import { ConfigManager } from './config-manager';
+import { DownloadManager } from './download-manager';
+import { ExpandManager } from './expand-manager';
+import { FullscreenManager } from './fullscreen-manager';
+import { HASSManager } from './hass-manager';
+import { InitializationManager } from './initialization-manager';
+import { InteractionManager } from './interaction-manager';
+import { MediaLoadedInfoManager } from './media-info-manager';
+import { MediaPlayerManager } from './media-player-manager';
+import { MessageManager } from './message-manager';
+import { MicrophoneManager } from './microphone-manager';
+import { StyleManager } from './style-manager';
+import { TriggersManager } from './triggers-manager';
+import { ViewManager } from './view-manager';
+import { QueryStringManager } from './query-string-manager';
+
+/**
+ * This defines a series of limited APIs that various manager helpers use to
+ * control the card. Explicitly specifying them helps make coupling intentional
+ * and avoids cyclic importing.
+ */
+
+export interface CardActionsManagerAPI {
+  getCameraManager(): CameraManager;
+  getCameraURLManager(): CameraURLManager;
+  getCardElementManager(): CardElementManager;
+  getConfigManager(): ConfigManager;
+  getDownloadManager(): DownloadManager;
+  getExpandManager(): ExpandManager;
+  getFullscreenManager(): FullscreenManager;
+  getHASSManager(): HASSManager;
+  getMediaLoadedInfoManager(): MediaLoadedInfoManager;
+  getMediaPlayerManager(): MediaPlayerManager;
+  getMessageManager(): MessageManager;
+  getViewManager(): ViewManager;
+  getMicrophoneManager(): MicrophoneManager;
+}
+
+export interface CardAutomationsAPI {
+  getCardElementManager(): CardElementManager;
+  getConditionsManager(): ConditionsManager;
+  getConfigManager(): ConfigManager;
+  getHASSManager(): HASSManager;
+  getMessageManager(): MessageManager;
+}
+
+export interface CardAutoRefreshAPI {
+  getConfigManager(): ConfigManager;
+  getViewManager(): ViewManager;
+  getTriggersManager(): TriggersManager;
+  getInteractionManager(): InteractionManager;
+}
+
+export interface CardCameraAPI {
+  getConfigManager(): ConfigManager;
+  getEntityRegistryManager(): EntityRegistryManager;
+  getResolvedMediaCache(): ResolvedMediaCache;
+  getHASSManager(): HASSManager;
+  getMessageManager(): MessageManager;
+}
+
+export interface CardCameraURLAPI {
+  getCameraManager(): CameraManager;
+  getViewManager(): ViewManager;
+}
+
+export interface CardConditionAPI {
+  getAutomationsManager(): AutomationsManager;
+  getConfigManager(): ConfigManager;
+}
+
+export interface CardConfigAPI {
+  getAutomationsManager(): AutomationsManager;
+  getCardElementManager(): CardElementManager;
+  getConditionsManager(): ConditionsManager;
+  getInitializationManager(): InitializationManager;
+  getMediaLoadedInfoManager(): MediaLoadedInfoManager;
+  getMessageManager(): MessageManager;
+  getStyleManager(): StyleManager;
+  getViewManager(): ViewManager;
+}
+
+export interface CardDownloadAPI {
+  getCameraManager(): CameraManager;
+  getHASSManager(): HASSManager;
+  getMediaLoadedInfoManager(): MediaLoadedInfoManager;
+  getMessageManager(): MessageManager;
+  getViewManager(): ViewManager;
+}
+
+export interface CardElementAPI {
+  getActionsManager(): ActionsManager;
+  getFullscreenManager(): FullscreenManager;
+  getInteractionManager(): InteractionManager;
+  getMediaLoadedInfoManager(): MediaLoadedInfoManager;
+  getQueryStringManager(): QueryStringManager;
+}
+
+export interface CardExpandAPI {
+  getFullscreenManager(): FullscreenManager;
+  getConditionsManager(): ConditionsManager;
+  getCardElementManager(): CardElementManager;
+}
+
+export interface CardFullscreenAPI {
+  getCardElementManager(): CardElementManager;
+  getExpandManager(): ExpandManager;
+  getConditionsManager(): ConditionsManager;
+  getMediaPlayerManager(): MediaPlayerManager;
+}
+
+export interface CardHASSAPI {
+  getCameraManager(): CameraManager;
+  getCardElementManager(): CardElementManager;
+  getConditionsManager(): ConditionsManager;
+  getConfigManager(): ConfigManager;
+  getInteractionManager(): InteractionManager;
+  getMediaPlayerManager(): MediaPlayerManager;
+  getMessageManager(): MessageManager;
+  getStyleManager(): StyleManager;
+  getTriggersManager(): TriggersManager;
+  getViewManager(): ViewManager;
+}
+
+export interface CardInitializerAPI {
+  getCameraManager(): CameraManager;
+  getCardElementManager(): CardElementManager;
+  getConfigManager(): ConfigManager;
+  getEntityRegistryManager(): EntityRegistryManager;
+  getHASSManager(): HASSManager;
+  getMediaPlayerManager(): MediaPlayerManager;
+  getMessageManager(): MessageManager;
+  getMicrophoneManager(): MicrophoneManager;
+  getQueryStringManager(): QueryStringManager;
+  getResolvedMediaCache(): ResolvedMediaCache;
+  getViewManager(): ViewManager;
+}
+
+export interface CardInteractionAPI {
+  getConfigManager(): ConfigManager;
+  getStyleManager(): StyleManager;
+  getTriggersManager(): TriggersManager;
+  getViewManager(): ViewManager;
+}
+
+export interface CardMediaLoadedAPI {
+  getConditionsManager(): ConditionsManager;
+  getConfigManager(): ConfigManager;
+  getCardElementManager(): CardElementManager;
+  getStyleManager(): StyleManager;
+}
+
+export interface CardMediaPlayerAPI {
+  getHASSManager(): HASSManager;
+  getCameraManager(): CameraManager;
+  getEntityRegistryManager(): EntityRegistryManager;
+}
+
+export interface CardMessageAPI {
+  getConditionsManager(): ConditionsManager;
+  getCardElementManager(): CardElementManager;
+  getMediaLoadedInfoManager(): MediaLoadedInfoManager;
+}
+
+export interface CardMicrophoneAPI {
+  getCardElementManager(): CardElementManager;
+  getConfigManager(): ConfigManager;
+}
+
+export interface CardQueryStringAPI {
+  getCardElementManager(): CardElementManager;
+  getViewManager(): ViewManager;
+  getActionsManager(): ActionsManager;
+}
+
+export interface CardStyleAPI {
+  getCardElementManager(): CardElementManager;
+  getConfigManager(): ConfigManager;
+  getExpandManager(): ExpandManager;
+  getFullscreenManager(): FullscreenManager;
+  getHASSManager(): HASSManager;
+  getInteractionManager(): InteractionManager;
+  getMediaLoadedInfoManager(): MediaLoadedInfoManager;
+  getViewManager(): ViewManager;
+}
+
+export interface CardTriggersAPI {
+  getCameraManager(): CameraManager;
+  getConfigManager(): ConfigManager;
+  getHASSManager(): HASSManager;
+  getInteractionManager(): InteractionManager;
+  getViewManager(): ViewManager;
+}
+
+export interface CardViewAPI {
+  getAutoUpdateManager(): AutoUpdateManager;
+  getCameraManager(): CameraManager;
+  getConfigManager(): ConfigManager;
+  getHASSManager(): HASSManager;
+  getMediaLoadedInfoManager(): MediaLoadedInfoManager;
+  getMessageManager(): MessageManager;
+  getStyleManager(): StyleManager;
+  getConditionsManager(): ConditionsManager;
+  getCardElementManager(): CardElementManager;
+}
diff --git a/src/utils/card-controller/view-manager.ts b/src/utils/card-controller/view-manager.ts
new file mode 100644
index 00000000..3600ea7e
--- /dev/null
+++ b/src/utils/card-controller/view-manager.ts
@@ -0,0 +1,283 @@
+import { ViewContext } from 'view';
+import { FrigateCardConfig, FrigateCardView, ViewDisplayMode } from '../../types';
+import { View } from '../../view/view';
+import { getAllDependentCameras } from '../camera';
+import { log } from '../debug';
+import { executeMediaQueryForView } from '../media-to-view';
+import { CardViewAPI } from './types';
+
+interface ViewManagerSetViewDefaultParameters {
+  cameraID?: string;
+  substream?: string;
+}
+
+export interface ViewManagerSetViewParameters
+  extends ViewManagerSetViewDefaultParameters {
+  viewName?: FrigateCardView;
+}
+
+export class ViewManager {
+  protected _view: View | null = null;
+  protected _api: CardViewAPI;
+
+  constructor(api: CardViewAPI) {
+    this._api = api;
+  }
+
+  public getView(): View | null {
+    return this._view;
+  }
+
+  public setView(view: View): void {
+    this._setView(view);
+  }
+
+  public setViewDefault(params?: ViewManagerSetViewDefaultParameters): void {
+    const config = this._api.getConfigManager().getConfig();
+    if (config) {
+      let forceCameraID: string | null = params?.cameraID ?? null;
+      if (!forceCameraID && this._view?.camera && config.view.update_cycle_camera) {
+        const cameraIDs = [
+          ...this._api.getCameraManager().getStore().getVisibleCameraIDs(),
+        ];
+        const currentIndex = cameraIDs.indexOf(this._view.camera);
+        const targetIndex = currentIndex + 1 >= cameraIDs.length ? 0 : currentIndex + 1;
+        forceCameraID = cameraIDs[targetIndex];
+      }
+
+      this.setViewByParameters({
+        ...params,
+        viewName: config.view.default,
+        ...(forceCameraID && { cameraID: forceCameraID }),
+      });
+
+      // Restart the refresh timer, so the default view is refreshed at a fixed
+      // interval from now (if so configured).
+      this._api.getAutoUpdateManager().startDefaultViewTimer();
+    }
+  }
+
+  public setViewByParameters(params: ViewManagerSetViewParameters): void {
+    const config = this._api.getConfigManager().getConfig();
+
+    if (config) {
+      let cameraID: string | null = null;
+
+      const cameras = this._api.getCameraManager().getStore().getVisibleCameraIDs();
+      if (cameras.size) {
+        if (params?.cameraID && cameras.has(params.cameraID)) {
+          cameraID = params.cameraID;
+        } else {
+          // Reset to the default camera.
+          cameraID = cameras.keys().next().value;
+        }
+      }
+      const viewName = params?.viewName ?? this._view?.view ?? config.view.default;
+      if (cameraID && viewName && this.isViewSupportedByCamera(cameraID, viewName)) {
+        const displayMode =
+          this._view?.displayMode ??
+          this._getDefaultDisplayModeForView(viewName, config);
+        let view: View = new View({
+          view: viewName,
+          camera: cameraID,
+          displayMode: displayMode,
+        });
+        if (params.substream) {
+          view = this._createViewWithSelectedSubstream(view, params.substream);
+        }
+        this._setView(view);
+      }
+    }
+  }
+
+  public setViewWithNewContext(context: ViewContext): void {
+    if (this._view) {
+      return this._setView(this._view?.clone().mergeInContext(context));
+    }
+  }
+
+  public reset(): void {
+    this._view = null;
+  }
+
+  public async setViewWithNewDisplayMode(displayMode: ViewDisplayMode): Promise<void> {
+    const host = this._api.getCardElementManager().getElement();
+    const hass = this._api.getHASSManager().getHASS();
+
+    if (this._view && hass) {
+      const view = this._view.evolve({
+        displayMode: displayMode,
+      });
+
+      const cameraCount = this._api
+        .getCameraManager()
+        .getStore()
+        .getVisibleCameraCount();
+      const queryCameraCount = view.query?.getQueryCameraIDs()?.size ?? 0;
+      const generateNewQuery =
+        view?.query &&
+        queryCameraCount &&
+        ((view.isGrid() && queryCameraCount < cameraCount) ||
+          (!view.isGrid() && queryCameraCount > 1));
+
+      if (generateNewQuery && view && view.query) {
+        // If the user requests a grid but the current query does not have a
+        // query for more than one camera, reset the query results, change the
+        // existing query to refer to all cameras and execute it to fetch new
+        // results.
+        const viewWithNewQuery = await executeMediaQueryForView(
+          host,
+          this._api.getCameraManager(),
+          view,
+          view.query
+            .clone()
+            .setQueryCameraIDs(
+              view.isGrid()
+                ? this._api.getCameraManager().getStore().getVisibleCameraIDs()
+                : view.camera,
+            ),
+        );
+
+        if (viewWithNewQuery) {
+          return this._setView(viewWithNewQuery);
+        }
+      } else {
+        return this._setView(view);
+      }
+    }
+  }
+
+  public setViewWithSubstream(substream?: string): void {
+    if (!this._view) {
+      return;
+    }
+    this._setView(
+      substream
+        ? this._createViewWithSelectedSubstream(this._view, substream)
+        : this._createViewWithNextStream(this._view),
+    );
+  }
+
+  public setViewWithoutSubstream(): void {
+    const view = this._createViewWithoutSubstream();
+    if (view) {
+      return this._setView(view);
+    }
+  }
+
+  public isViewSupportedByCamera(cameraID: string, view: FrigateCardView): boolean {
+    const capabilities = this._api.getCameraManager().getCameraCapabilities(cameraID);
+    switch (view) {
+      case 'live':
+      case 'image':
+      case 'diagnostics':
+        return true;
+      case 'clip':
+      case 'clips':
+        return !!capabilities?.supportsClips;
+      case 'snapshot':
+      case 'snapshots':
+        return !!capabilities?.supportsSnapshots;
+      case 'recording':
+      case 'recordings':
+        return !!capabilities?.supportsRecordings;
+      case 'timeline':
+        return !!capabilities?.supportsTimeline;
+      case 'media':
+        return (
+          !!capabilities?.supportsClips ||
+          !!capabilities?.supportsSnapshots ||
+          !!capabilities?.supportsRecordings
+        );
+    }
+  }
+
+  protected _getDefaultDisplayModeForView(
+    viewName: FrigateCardView,
+    config?: FrigateCardConfig,
+  ): ViewDisplayMode {
+    let mode: ViewDisplayMode | null = null;
+    switch (viewName) {
+      case 'media':
+      case 'clip':
+      case 'recording':
+      case 'snapshot':
+        mode = config?.media_viewer.display?.mode ?? null;
+        break;
+      case 'live':
+        mode = config?.live.display?.mode ?? null;
+        break;
+    }
+    return mode ?? 'single';
+  }
+
+  protected _setView(view: View): void {
+    const oldView = this._view;
+    View.adoptFromViewIfAppropriate(view, oldView);
+
+    log(
+      this._api.getConfigManager().getCardWideConfig(),
+      `Frigate Card view change: `,
+      view.view,
+    );
+    this._view = view;
+
+    if (View.isMajorMediaChange(oldView, view)) {
+      this._api.getMediaLoadedInfoManager().clear();
+    }
+
+    if (oldView?.view !== view.view) {
+      this._api.getCardElementManager().scrollReset();
+    }
+
+    this._api.getMessageManager().reset();
+    this._api.getStyleManager().setExpandedMode();
+
+    this._api.getConditionsManager()?.setState({
+      view: view.view,
+      camera: view.camera,
+      displayMode: view.displayMode ?? undefined,
+    });
+    this._api.getCardElementManager().update();
+  }
+
+  protected _createViewWithSelectedSubstream(baseView: View, substreamID: string): View {
+    const overrides: Map<string, string> =
+      baseView?.context?.live?.overrides ?? new Map();
+    overrides.set(baseView.camera, substreamID);
+    return baseView.clone().mergeInContext({
+      live: { overrides: overrides },
+    });
+  }
+
+  protected _createViewWithNextStream(baseView: View): View {
+    const dependencies = [
+      ...getAllDependentCameras(this._api.getCameraManager(), baseView.camera),
+    ];
+    if (dependencies.length <= 1) {
+      return baseView.clone();
+    }
+
+    const view = baseView.clone();
+    const overrides: Map<string, string> = view.context?.live?.overrides ?? new Map();
+    const currentOverride = overrides.get(view.camera) ?? view.camera;
+    const currentIndex = dependencies.indexOf(currentOverride);
+    const newIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % dependencies.length;
+    overrides.set(view.camera, dependencies[newIndex]);
+    view.mergeInContext({ live: { overrides: overrides } });
+
+    return view;
+  }
+
+  protected _createViewWithoutSubstream(): View | null {
+    if (!this._view) {
+      return null;
+    }
+    const view = this._view.clone();
+    const overrides: Map<string, string> | undefined = view.context?.live?.overrides;
+    if (overrides && overrides.has(view.camera)) {
+      view.context?.live?.overrides?.delete(view.camera);
+    }
+    return view;
+  }
+}
diff --git a/src/utils/debug.ts b/src/utils/debug.ts
index 42060166..dcc9e704 100644
--- a/src/utils/debug.ts
+++ b/src/utils/debug.ts
@@ -1,6 +1,6 @@
 import { CardWideConfig } from '../types';
 
-export const log = (cardWideConfig?: CardWideConfig, ...args: unknown[]) => {
+export const log = (cardWideConfig?: CardWideConfig | null, ...args: unknown[]) => {
   if (cardWideConfig?.debug?.logging) {
     console.debug(...args);
   }
diff --git a/src/utils/diagnostics.ts b/src/utils/diagnostics.ts
new file mode 100644
index 00000000..1ec18a5a
--- /dev/null
+++ b/src/utils/diagnostics.ts
@@ -0,0 +1,70 @@
+import { HomeAssistant } from 'custom-card-helpers';
+import pkg from '../../package.json';
+import { getLanguage } from '../localize/localize';
+import { RawFrigateCardConfig } from '../types';
+import { DeviceList, getAllDevices } from './ha/device-registry';
+
+type FrigateVersions = Record<string, string>;
+
+interface GitDiagnostics {
+  build_version?: string;
+  build_date?: string;
+  commit_date?: string;
+}
+
+export interface Diagnostics {
+  card_version: string;
+  browser: string;
+  date: Date;
+  lang: string;
+  timezone: string;
+  git: GitDiagnostics;
+
+  frigate_versions?: FrigateVersions;
+  ha_version?: string;
+  config?: RawFrigateCardConfig;
+}
+
+export const getDiagnostics = async (
+  hass?: HomeAssistant,
+  rawConfig?: RawFrigateCardConfig,
+): Promise<Diagnostics> => {
+  let devices: DeviceList | undefined = [];
+  if (hass) {
+    try {
+      devices = await getAllDevices(hass);
+    } catch (e) {
+      // Pass. This is optional.
+    }
+  }
+
+  // Get the Frigate devices in order to extract the Frigate integration and
+  // server version numbers.
+  const frigateDevices = devices?.filter((device) => device.manufacturer === 'Frigate');
+  const frigateVersionMap: Map<string, string> = new Map();
+  frigateDevices?.forEach((device) => {
+    device.config_entries.forEach((configEntry) => {
+      if (device.model) {
+        frigateVersionMap.set(configEntry, device.model);
+      }
+    });
+  });
+
+  return {
+    card_version: pkg.version,
+    browser: navigator.userAgent,
+    date: new Date(),
+    ...(frigateVersionMap.size && {
+      frigate_versions: Object.fromEntries(frigateVersionMap),
+    }),
+    lang: getLanguage(),
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    git: {
+      ...(pkg['gitVersion'] && { build_version: pkg['gitVersion'] }),
+      ...(pkg['buildDate'] && { build_date: pkg['buildDate'] }),
+      ...(pkg['gitDate'] && { commit_date: pkg['gitDate'] }),
+    },
+    ...(hass && { ha_version: hass.config.version }),
+    ...(rawConfig && { config: rawConfig }),
+  };
+};
diff --git a/src/utils/download.ts b/src/utils/download.ts
index fd213771..1200f0c0 100644
--- a/src/utils/download.ts
+++ b/src/utils/download.ts
@@ -39,7 +39,7 @@ export const downloadMedia = async (
   cameraManager: CameraManager,
   media: ViewMedia,
 ): Promise<void> => {
-  const download = await cameraManager.getMediaDownloadPath(hass, media);
+  const download = await cameraManager.getMediaDownloadPath(media);
   if (!download) {
     throw new FrigateCardError(localize('error.download_no_media'));
   }
diff --git a/src/utils/ha/index.ts b/src/utils/ha/index.ts
index 880291d5..5c671932 100644
--- a/src/utils/ha/index.ts
+++ b/src/utils/ha/index.ts
@@ -364,3 +364,19 @@ export function canonicalizeHAURL(
   }
   return url ?? null;
 }
+
+/**
+ * Determine if HA connection state has changed.
+ * @param newHass The new HA object.
+ * @param oldHass The old HA object.
+ * @returns `true` if the connection state has changed.
+ */
+export const hasHAConnectionStateChanged = (
+  oldHass: HomeAssistant | undefined | null,
+  newHass: HomeAssistant | undefined | null,
+): boolean => {
+  return (
+    (!oldHass && !newHass?.connected) ||
+    (!!oldHass && oldHass.connected !== !!newHass?.connected)
+  );
+};
diff --git a/src/utils/initializer.ts b/src/utils/initializer/initializer.ts
similarity index 88%
rename from src/utils/initializer.ts
rename to src/utils/initializer/initializer.ts
index 02107126..a8033865 100644
--- a/src/utils/initializer.ts
+++ b/src/utils/initializer/initializer.ts
@@ -1,16 +1,16 @@
-import { allPromises } from './basic';
+import { allPromises } from '../basic';
 
 enum InitializationState {
   INITIALIZING = 'initializing',
   INITIALIZED = 'initialized',
 }
 
-type Initializer = () => Promise<unknown>;
+type InitializationCallback = () => Promise<unknown>;
 
 /**
  * Manages initialization state & calling initializers.
  */
-export class FrigateCardInitializer {
+export class Initializer {
   protected _state: Map<string, InitializationState>;
 
   constructor() {
@@ -18,7 +18,7 @@ export class FrigateCardInitializer {
   }
 
   public async initializeMultipleIfNecessary(
-    aspects: Record<string, Initializer>,
+    aspects: Record<string, InitializationCallback>,
   ): Promise<boolean> {
     const results = await allPromises(
       Object.entries(aspects),
@@ -36,7 +36,7 @@ export class FrigateCardInitializer {
    */
   public async initializeIfNecessary(
     aspect: string,
-    initializer?: Initializer,
+    initializer?: InitializationCallback,
   ): Promise<boolean> {
     const state = this._state.get(aspect);
     if (state !== InitializationState.INITIALIZED) {
diff --git a/src/utils/media-info-controller.ts b/src/utils/media-info-controller.ts
deleted file mode 100644
index f35bc525..00000000
--- a/src/utils/media-info-controller.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { MediaLoadedInfo } from '../types';
-
-export class MediaLoadedInfoController {
-  protected _current: MediaLoadedInfo | null = null;
-  protected _lastKnown: MediaLoadedInfo | null = null;
-
-  public set(current: MediaLoadedInfo): void {
-    this._current = current;
-    this._lastKnown = current;
-  }
-
-  public get(): MediaLoadedInfo | null {
-    return this._current;
-  }
-
-  public getLastKnown(): MediaLoadedInfo | null {
-    return this._lastKnown;
-  }
-
-  public clear(): void {
-    this._current = null;
-  }
-
-  public has(): boolean {
-    return !!this._current;
-  }
-}
diff --git a/src/utils/media-to-view.ts b/src/utils/media-to-view.ts
index b47b7a8b..89e5b25a 100644
--- a/src/utils/media-to-view.ts
+++ b/src/utils/media-to-view.ts
@@ -1,4 +1,3 @@
-import { HomeAssistant } from 'custom-card-helpers';
 import { ViewContext } from 'view';
 import { CameraManager } from '../camera-manager/manager';
 import { MediaQuery } from '../camera-manager/types';
@@ -20,7 +19,6 @@ type ResultSelectType = 'latest' | 'time' | 'none';
 
 export const changeViewToRecentEventsForCameraAndDependents = async (
   element: HTMLElement,
-  hass: HomeAssistant,
   cameraManager: CameraManager,
   cardWideConfig: CardWideConfig,
   view: View,
@@ -46,7 +44,7 @@ export const changeViewToRecentEventsForCameraAndDependents = async (
   }
 
   (
-    await executeMediaQueryForView(element, hass, cameraManager, view, queries, {
+    await executeMediaQueryForView(element, cameraManager, view, queries, {
       targetView: options?.targetView,
       select: options?.select,
     })
@@ -82,7 +80,6 @@ const createQueriesForEventsView = (
  */
 export const changeViewToRecentRecordingForCameraAndDependents = async (
   element: HTMLElement,
-  hass: HomeAssistant,
   cameraManager: CameraManager,
   cardWideConfig: CardWideConfig,
   view: View,
@@ -109,7 +106,7 @@ export const changeViewToRecentRecordingForCameraAndDependents = async (
   }
 
   (
-    await executeMediaQueryForView(element, hass, cameraManager, view, queries, {
+    await executeMediaQueryForView(element, cameraManager, view, queries, {
       targetView: options?.targetView,
       select: options?.select,
     })
@@ -131,7 +128,6 @@ const createQueriesForRecordingsView = (
 
 export const executeMediaQueryForView = async (
   element: HTMLElement,
-  hass: HomeAssistant,
   cameraManager: CameraManager,
   view: View,
   query: MediaQueries,
@@ -150,7 +146,7 @@ export const executeMediaQueryForView = async (
   }
 
   try {
-    mediaArray = await cameraManager.executeMediaQueries<MediaQuery>(hass, queries);
+    mediaArray = await cameraManager.executeMediaQueries<MediaQuery>(queries);
   } catch (e) {
     errorToConsole(e as Error);
     dispatchFrigateCardErrorEvent(element, e as Error);
diff --git a/src/utils/menu-controller.ts b/src/utils/menu-controller.ts
index 92ca9bdc..0b426e7c 100644
--- a/src/utils/menu-controller.ts
+++ b/src/utils/menu-controller.ts
@@ -15,7 +15,8 @@ import { View } from '../view/view';
 import { createFrigateCardCustomAction } from './action';
 import { getAllDependentCameras } from './camera';
 import { getEntityIcon, getEntityTitle } from './ha';
-import { MicrophoneController } from './microphone';
+import { MediaPlayerManager } from './card-controller/media-player-manager';
+import { MicrophoneManager } from './card-controller/microphone-manager';
 import { hasSubstream } from './substream';
 
 export class MenuButtonController {
@@ -46,9 +47,9 @@ export class MenuButtonController {
     expanded: boolean,
     options?: {
       currentMediaLoadedInfo?: MediaLoadedInfo | null;
-      mediaPlayers?: string[];
-      cameraURL?: string | null;
-      microphoneController?: MicrophoneController;
+      showCameraUIButton?: boolean,
+      microphoneManager?: MicrophoneManager | null;
+      mediaPlayerController?: MediaPlayerManager | null;
     },
   ): MenuButton[] {
     const visibleCameras = cameraManager.getStore().getVisibleCameras();
@@ -87,7 +88,7 @@ export class MenuButtonController {
         const action = createFrigateCardCustomAction('camera_select', {
           camera: cameraID,
         });
-        const metadata = cameraManager.getCameraMetadata(hass, cameraID) ?? undefined;
+        const metadata = cameraManager.getCameraMetadata(cameraID) ?? undefined;
 
         return {
           enabled: true,
@@ -132,7 +133,7 @@ export class MenuButtonController {
           const action = createFrigateCardCustomAction('live_substream_select', {
             camera: cameraID,
           });
-          const metadata = cameraManager.getCameraMetadata(hass, cameraID) ?? undefined;
+          const metadata = cameraManager.getCameraMetadata(cameraID) ?? undefined;
           const cameraConfig = cameraManager.getStore().getCameraConfig(cameraID);
           return {
             enabled: true,
@@ -244,7 +245,7 @@ export class MenuButtonController {
       });
     }
 
-    if (options?.cameraURL) {
+    if (options?.showCameraUIButton) {
       buttons.push({
         icon: 'mdi:web',
         ...config.menu.buttons.camera_ui,
@@ -257,11 +258,11 @@ export class MenuButtonController {
     }
 
     if (
-      options?.microphoneController &&
+      options?.microphoneManager &&
       options?.currentMediaLoadedInfo?.capabilities?.supports2WayAudio
     ) {
-      const forbidden = options.microphoneController.isForbidden();
-      const muted = options.microphoneController.isMuted();
+      const forbidden = options.microphoneManager.isForbidden();
+      const muted = options.microphoneManager.isMuted();
       const buttonType = config.menu.buttons.microphone.type;
       buttons.push({
         icon: forbidden
@@ -285,7 +286,7 @@ export class MenuButtonController {
         ...(!forbidden &&
           buttonType === 'toggle' && {
             tap_action: createFrigateCardCustomAction(
-              options.microphoneController.isMuted()
+              options.microphoneManager.isMuted()
                 ? 'microphone_unmute'
                 : 'microphone_mute',
             ) as FrigateCardCustomAction,
@@ -316,34 +317,36 @@ export class MenuButtonController {
     });
 
     if (
-      options?.mediaPlayers?.length &&
+      options?.mediaPlayerController?.hasMediaPlayers() &&
       (view?.isViewerView() || (view.is('live') && selectedCameraConfig?.camera_entity))
     ) {
-      const mediaPlayerItems = options.mediaPlayers.map((playerEntityID) => {
-        const title = getEntityTitle(hass, playerEntityID) || playerEntityID;
-        const state = hass.states[playerEntityID];
-        const playAction = createFrigateCardCustomAction('media_player', {
-          media_player: playerEntityID,
-          media_player_action: 'play',
-        });
-        const stopAction = createFrigateCardCustomAction('media_player', {
-          media_player: playerEntityID,
-          media_player_action: 'stop',
-        });
-        const disabled = !state || state.state === 'unavailable';
+      const mediaPlayerItems = options.mediaPlayerController
+        .getMediaPlayers()
+        .map((playerEntityID) => {
+          const title = getEntityTitle(hass, playerEntityID) || playerEntityID;
+          const state = hass.states[playerEntityID];
+          const playAction = createFrigateCardCustomAction('media_player', {
+            media_player: playerEntityID,
+            media_player_action: 'play',
+          });
+          const stopAction = createFrigateCardCustomAction('media_player', {
+            media_player: playerEntityID,
+            media_player_action: 'stop',
+          });
+          const disabled = !state || state.state === 'unavailable';
 
-        return {
-          enabled: true,
-          selected: false,
-          icon: getEntityIcon(hass, playerEntityID),
-          entity: playerEntityID,
-          state_color: false,
-          title: title,
-          disabled: disabled,
-          ...(!disabled && playAction && { tap_action: playAction }),
-          ...(!disabled && stopAction && { hold_action: stopAction }),
-        };
-      });
+          return {
+            enabled: true,
+            selected: false,
+            icon: getEntityIcon(hass, playerEntityID),
+            entity: playerEntityID,
+            state_color: false,
+            title: title,
+            disabled: disabled,
+            ...(!disabled && playAction && { tap_action: playAction }),
+            ...(!disabled && stopAction && { hold_action: stopAction }),
+          };
+        });
 
       buttons.push({
         icon: 'mdi:cast',
diff --git a/src/utils/querystring.ts b/src/utils/querystring.ts
deleted file mode 100644
index 85225cd8..00000000
--- a/src/utils/querystring.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { FrigateCardCustomAction } from '../types';
-import { createFrigateCardCustomAction } from './action.js';
-
-export const getActionsFromQueryString = (
-  queryString: string,
-): FrigateCardCustomAction[] => {
-  const params = new URLSearchParams(queryString);
-  const actions: FrigateCardCustomAction[] = [];
-  const actionRE = new RegExp(
-    /^frigate-card-action([.:](?<cardID>\w+))?[.:](?<action>\w+)/,
-  );
-  for (const [key, value] of params.entries()) {
-    const match = key.match(actionRE);
-    if (!match || !match.groups) {
-      continue;
-    }
-    const cardID: string | undefined = match.groups['cardID'];
-    const action = match.groups['action'];
-
-    let customAction: FrigateCardCustomAction | null = null;
-    switch (action) {
-      case 'camera_select':
-      case 'live_substream_select':
-        if (value) {
-          customAction = createFrigateCardCustomAction(action, {
-            camera: value,
-            cardID: cardID,
-          });
-        }
-        break;
-      case 'camera_ui':
-      case 'clip':
-      case 'clips':
-      case 'default':
-      case 'diagnostics':
-      case 'download':
-      case 'expand':
-      case 'image':
-      case 'live':
-      case 'menu_toggle':
-      case 'recording':
-      case 'recordings':
-      case 'snapshot':
-      case 'snapshots':
-      case 'timeline':
-        customAction = createFrigateCardCustomAction(action, {
-          cardID: cardID,
-        });
-        break;
-      default:
-        console.warn(
-          `Frigate card received unknown card action in query string: ${action}`,
-        );
-    }
-    if (customAction) {
-      actions.push(customAction);
-    }
-  }
-  return actions;
-};
diff --git a/src/utils/screenshot.ts b/src/utils/screenshot.ts
index ce19b830..4cf6105b 100644
--- a/src/utils/screenshot.ts
+++ b/src/utils/screenshot.ts
@@ -14,7 +14,7 @@ export const screenshotMedia = (video: HTMLVideoElement): string | null => {
   return canvas.toDataURL('image/jpeg');
 };
 
-export const generateScreenshotTitle = (view?: View): string => {
+export const generateScreenshotTitle = (view?: View | null): string => {
   if (view?.is('live') || view?.is('image')) {
     return `${view.view}-${view.camera}-${format(
       new Date(),
diff --git a/src/utils/substream.ts b/src/utils/substream.ts
index 715e022b..8ada684e 100644
--- a/src/utils/substream.ts
+++ b/src/utils/substream.ts
@@ -1,48 +1,9 @@
-import { CameraManager } from '../camera-manager/manager';
 import { View } from '../view/view';
-import { getAllDependentCameras } from './camera';
 
-export const createViewWithSelectedSubstream = (
-  view: View,
-  substreamID: string,
-): View | null => {
-  const overrides: Map<string, string> = view.context?.live?.overrides ?? new Map();
-  overrides.set(view.camera, substreamID);
-  return view.clone().mergeInContext({
-    live: { overrides: overrides },
-  });
-};
-
-export const createViewWithoutSubstream = (view: View): View => {
-  const newView = view.clone();
-  const overrides: Map<string, string> | undefined = newView.context?.live?.overrides;
-  if (overrides && overrides.has(view.camera)) {
-    newView.context?.live?.overrides?.delete(view.camera);
-  }
-  return newView;
+export const getStreamCameraID = (view: View): string => {
+  return view?.context?.live?.overrides?.get(view.camera) ?? view.camera;
 };
 
 export const hasSubstream = (view: View): boolean => {
-  const override = view?.context?.live?.overrides?.get(view.camera);
-  return !!override && override !== view.camera;
-};
-
-export const createViewWithNextStream = (
-  cameraManager: CameraManager,
-  view: View,
-): View => {
-  const dependencies = [...getAllDependentCameras(cameraManager, view.camera)];
-  if (dependencies.length <= 1) {
-    return view.clone();
-  }
-
-  const newView = view.clone();
-  const overrides: Map<string, string> = newView.context?.live?.overrides ?? new Map();
-  const currentOverride = overrides.get(newView.camera) ?? newView.camera;
-  const currentIndex = dependencies.indexOf(currentOverride);
-  const newIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % dependencies.length;
-  overrides.set(view.camera, dependencies[newIndex]);
-  newView.mergeInContext({ live: { overrides: overrides } });
-
-  return newView;
+  return getStreamCameraID(view) !== view.camera;
 };
diff --git a/src/utils/timeline-source.ts b/src/utils/timeline-source.ts
index ba8ba6f7..714356be 100644
--- a/src/utils/timeline-source.ts
+++ b/src/utils/timeline-source.ts
@@ -1,19 +1,18 @@
-import { HomeAssistant } from 'custom-card-helpers';
 import add from 'date-fns/add';
 import sub from 'date-fns/sub';
 import { DataSet } from 'vis-data';
 import { IdType, TimelineItem, TimelineWindow } from 'vis-timeline/esnext';
-import { ClipsOrSnapshotsOrAll } from '../types';
 import { CameraManager } from '../camera-manager/manager';
-import { EventQuery, RecordingQuery, RecordingSegment } from '../camera-manager/types';
-import { capEndDate, convertRangeToCacheFriendlyTimes } from '../camera-manager/util';
-import { ViewMedia } from '../view/media';
 import {
-  compressRanges,
   ExpiringMemoryRangeSet,
   MemoryRangeSet,
+  compressRanges,
 } from '../camera-manager/range';
-import { errorToConsole, ModifyInterface } from './basic.js';
+import { EventQuery, RecordingQuery, RecordingSegment } from '../camera-manager/types';
+import { capEndDate, convertRangeToCacheFriendlyTimes } from '../camera-manager/util';
+import { ClipsOrSnapshotsOrAll } from '../types';
+import { ViewMedia } from '../view/media';
+import { ModifyInterface, errorToConsole } from './basic.js';
 
 // Allow timeline freshness to be at least this number of seconds out of date
 // (caching times in the data-engine may increase the effective delay).
@@ -82,11 +81,11 @@ export class TimelineDataSource {
     }
   }
 
-  public async refresh(hass: HomeAssistant, window: TimelineWindow): Promise<void> {
+  public async refresh(window: TimelineWindow): Promise<void> {
     try {
       await Promise.all([
-        this._refreshEvents(hass, window),
-        ...(this._showRecordings ? [this._refreshRecordings(hass, window)] : []),
+        this._refreshEvents(window),
+        ...(this._showRecordings ? [this._refreshRecordings(window)] : []),
       ]);
     } catch (e) {
       errorToConsole(e as Error);
@@ -114,10 +113,7 @@ export class TimelineDataSource {
     });
   }
 
-  protected async _refreshEvents(
-    hass: HomeAssistant,
-    window: TimelineWindow,
-  ): Promise<void> {
+  protected async _refreshEvents(window: TimelineWindow): Promise<void> {
     if (
       this._eventRanges.hasCoverage({
         start: window.start,
@@ -134,7 +130,7 @@ export class TimelineDataSource {
       return;
     }
 
-    const mediaArray = await this._cameraManager.executeMediaQueries(hass, eventQueries);
+    const mediaArray = await this._cameraManager.executeMediaQueries(eventQueries);
     const data: FrigateCardTimelineItem[] = [];
     for (const media of mediaArray ?? []) {
       const startTime = media.getStartTime();
@@ -159,10 +155,7 @@ export class TimelineDataSource {
     });
   }
 
-  protected async _refreshRecordings(
-    hass: HomeAssistant,
-    window: TimelineWindow,
-  ): Promise<void> {
+  protected async _refreshRecordings(window: TimelineWindow): Promise<void> {
     type FrigateCardTimelineItemWithEnd = ModifyInterface<
       FrigateCardTimelineItem,
       { end: number }
@@ -228,10 +221,7 @@ export class TimelineDataSource {
     if (!recordingQueries) {
       return;
     }
-    const results = await this._cameraManager.getRecordingSegments(
-      hass,
-      recordingQueries,
-    );
+    const results = await this._cameraManager.getRecordingSegments(recordingQueries);
 
     const newSegments: Map<string, RecordingSegment[]> = new Map();
     for (const [query, result] of results) {
diff --git a/src/utils/timer.ts b/src/utils/timer.ts
index 96a3aaaa..358d3808 100644
--- a/src/utils/timer.ts
+++ b/src/utils/timer.ts
@@ -1,9 +1,14 @@
 export class Timer {
   protected _timer: number | null = null;
+  protected _repeated = false;
 
   public stop(): void {
     if (this._timer) {
-      window.clearTimeout(this._timer);
+      if (this._repeated) {
+        window.clearInterval(this._timer);
+      } else {
+        window.clearTimeout(this._timer);
+      }
       this._timer = null;
     }
   }
@@ -18,6 +23,7 @@ export class Timer {
       this._timer = null;
       func();
     }, seconds * 1000);
+    this._repeated = false;
   }
 
   public startRepeated(seconds: number, func: () => void): void {
@@ -25,5 +31,6 @@ export class Timer {
     this._timer = window.setInterval(() => {
       func();
     }, seconds * 1000);
+    this._repeated = true;
   }
 }
diff --git a/src/utils/zod.ts b/src/utils/zod.ts
index 9f8037d6..03de3a50 100644
--- a/src/utils/zod.ts
+++ b/src/utils/zod.ts
@@ -62,7 +62,7 @@ export function getParseErrorKeys<T>(error: z.ZodError<T>): string[] {
  * @param error The ZodError object from parsing.
  * @returns An array of string error paths.
  */
-export const getParseErrorPaths = <T>(error: z.ZodError<T>): Set<string> | null => {
+export const getParseErrorPaths = <T>(error: z.ZodError<T>): Set<string> => {
   /* Zod errors involving unions are complex, as Zod may not be able to tell
    * where the 'real' error is vs simply a union option not matching. This
    * function finds all ZodError "issues" that don't have an error with 'type'
@@ -79,16 +79,8 @@ export const getParseErrorPaths = <T>(error: z.ZodError<T>): Set<string> | null
       if (issue.code === 'invalid_union') {
         const unionErrors = (issue as z.ZodInvalidUnionIssue).unionErrors;
         for (const unionError of unionErrors) {
-          const nestedErrors = getParseErrorPaths(unionError);
-          if (nestedErrors && nestedErrors.size) {
-            nestedErrors.forEach(contenders.add, contenders);
-          }
+          getParseErrorPaths(unionError).forEach(contenders.add, contenders);
         }
-      } else if (issue.code === 'invalid_type') {
-        if (issue.path[issue.path.length - 1] === 'type') {
-          return null;
-        }
-        contenders.add(getParseErrorPathString(issue.path));
       } else {
         contenders.add(getParseErrorPathString(issue.path));
       }
diff --git a/src/view/view.ts b/src/view/view.ts
index e89d010f..444c5405 100644
--- a/src/view/view.ts
+++ b/src/view/view.ts
@@ -43,7 +43,7 @@ export class View {
    * @param curr The current view.
    * @returns True if the view change is a real media change.
    */
-  public static isMajorMediaChange(prev?: View, curr?: View): boolean {
+  public static isMajorMediaChange(prev?: View | null, curr?: View): boolean {
     return (
       !prev ||
       !curr ||
@@ -61,7 +61,7 @@ export class View {
     );
   }
 
-  public static adoptFromViewIfAppropriate(next: View, curr?: View): void {
+  public static adoptFromViewIfAppropriate(next: View, curr?: View | null): void {
     if (!curr) {
       return;
     }
@@ -229,7 +229,7 @@ export class View {
    * Determine if a view is for the media viewer.
    */
   public isViewerView(): boolean {
-    return ['clip', 'snapshot', 'media', 'recording'].includes(this.view);
+    return ['media', 'clip', 'snapshot', 'recording'].includes(this.view);
   }
 
   public supportsMultipleDisplayModes(): boolean {
diff --git a/tests/automations.test.ts b/tests/automations.test.ts
deleted file mode 100644
index c5051188..00000000
--- a/tests/automations.test.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { mock } from 'vitest-mock-extended';
-import { AutomationsController, AutomationsControllerError } from '../src/automations';
-import { ConditionController } from '../src/conditions';
-import { automationsSchema, FrigateCardError } from '../src/types';
-import { frigateCardHandleAction } from '../src/utils/action.js';
-import { createHASS } from './test-utils';
-
-vi.mock('../src/utils/action.js');
-
-describe('AutomationsController', () => {
-  const actions = [
-    {
-      action: 'custom:frigate-card-action',
-      frigate_card_action: 'clips',
-    },
-  ];
-  const conditions = { fullscreen: true };
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('should do nothing without automations', () => {
-    const automationController = new AutomationsController(undefined);
-    automationController.execute(
-      mock<HTMLElement>(),
-      createHASS(),
-      new ConditionController(),
-    );
-    expect(frigateCardHandleAction).not.toBeCalled();
-  });
-
-  it('should execute actions', () => {
-    const automations = automationsSchema.parse([
-      {
-        conditions: conditions,
-        actions: actions,
-      },
-    ]);
-
-    const automationController = new AutomationsController(automations);
-    const conditionController = new ConditionController();
-    const element = mock<HTMLElement>();
-    const hass = createHASS();
-
-    automationController.execute(element, hass, conditionController);
-    expect(frigateCardHandleAction).not.toBeCalled();
-
-    conditionController.setState({ fullscreen: true });
-    automationController.execute(element, hass, conditionController);
-    expect(frigateCardHandleAction).toBeCalledTimes(1);
-
-    // Automation will not re-fire when condition continues to evaluate the
-    // same.
-    automationController.execute(element, hass, conditionController);
-    expect(frigateCardHandleAction).toBeCalledTimes(1);
-
-    conditionController.setState({ fullscreen: false });
-    automationController.execute(element, hass, conditionController);
-    expect(frigateCardHandleAction).toBeCalledTimes(1);
-
-    conditionController.setState({ fullscreen: true });
-    automationController.execute(element, hass, conditionController);
-    expect(frigateCardHandleAction).toBeCalledTimes(2);
-  });
-
-  it('should execute actions_not', () => {
-    const automations = automationsSchema.parse([
-      {
-        conditions: conditions,
-        actions_not: actions,
-      },
-    ]);
-
-    const automationController = new AutomationsController(automations);
-    automationController.execute(
-      mock<HTMLElement>(),
-      createHASS(),
-      new ConditionController(),
-    );
-    expect(frigateCardHandleAction).toBeCalled();
-  });
-
-  it('should prevent automation loops', () => {
-    const automations = automationsSchema.parse([
-      {
-        conditions: { fullscreen: true },
-        actions: actions,
-      },
-      {
-        conditions: { fullscreen: false },
-        actions: actions,
-      },
-    ]);
-
-    const automationController = new AutomationsController(automations);
-    const conditionController = new ConditionController();
-    const element = mock<HTMLElement>();
-    const hass = createHASS();
-
-    // Create a setup where one automation action causes another...
-    let fullscreen = true;
-    vi.mocked(frigateCardHandleAction).mockImplementation(() => {
-      fullscreen = !fullscreen;
-      conditionController.setState({ fullscreen: fullscreen });
-      automationController.execute(element, hass, conditionController);
-    });
-
-    conditionController.setState({ fullscreen: fullscreen });
-
-    expect(() =>
-      automationController.execute(element, hass, conditionController),
-    ).toThrowError(/Too many nested automation calls/);
-    expect(frigateCardHandleAction).toBeCalledTimes(10);
-  }); 
-
-  it('should be able to construct error', () => {
-    const error = new AutomationsControllerError('message');
-    expect(error).toBeTruthy();
-    expect(error instanceof FrigateCardError).toBeTruthy();
-  });
-});
diff --git a/tests/camera-manager/engine-factory.test.ts b/tests/camera-manager/engine-factory.test.ts
index db8df3e0..340eff08 100644
--- a/tests/camera-manager/engine-factory.test.ts
+++ b/tests/camera-manager/engine-factory.test.ts
@@ -8,7 +8,12 @@ import { CardWideConfig } from '../../src/types.js';
 import { EntityRegistryManager } from '../../src/utils/ha/entity-registry';
 import { EntityCache } from '../../src/utils/ha/entity-registry/cache';
 import { ResolvedMediaCache } from '../../src/utils/ha/resolved-media';
-import { createCameraConfig, createHASS, createRegistryEntity } from '../test-utils';
+import {
+  createCameraConfig,
+  createHASS,
+  createRegistryEntity,
+  createStateEntity,
+} from '../test-utils';
 
 vi.mock('../../src/utils/ha/entity-registry');
 vi.mock('../../src/utils/ha/entity-registry/cache');
@@ -21,7 +26,6 @@ const createFactory = (options?: {
   return new CameraManagerEngineFactory(
     options?.entityRegistryManager ?? new EntityRegistryManager(new EntityCache()),
     options?.resolvedMediaCache ?? new ResolvedMediaCache(),
-    options?.cardWideConfig ?? {},
   );
 };
 
@@ -131,18 +135,7 @@ describe('CameraManagerEngineFactory.getEngineForCamera()', () => {
         entityRegistryManager: entityRegistryManager,
       }).getEngineForCamera(
         createHASS({
-          'camera.foo': {
-            entity_id: 'camera.foo',
-            state: 'streaming',
-            last_changed: 'bar',
-            last_updated: 'baz',
-            attributes: {},
-            context: {
-              id: 'context',
-              user_id: null,
-              parent_id: null,
-            },
-          },
+          'camera.foo': createStateEntity(),
         }),
         config,
       ),
diff --git a/tests/camera-manager/frigate/engine-frigate.test.ts b/tests/camera-manager/frigate/engine-frigate.test.ts
index 171f38e1..0ae26b5d 100644
--- a/tests/camera-manager/frigate/engine-frigate.test.ts
+++ b/tests/camera-manager/frigate/engine-frigate.test.ts
@@ -12,7 +12,6 @@ import { createCameraConfig, createHASS } from '../../test-utils';
 
 const createEngine = (): FrigateCameraManagerEngine => {
   return new FrigateCameraManagerEngine(
-    {},
     new RecordingSegmentsCache(),
     new RequestCache(),
   );
diff --git a/tests/test-utils.ts b/tests/test-utils.ts
index d55088ec..f7d83369 100644
--- a/tests/test-utils.ts
+++ b/tests/test-utils.ts
@@ -1,7 +1,6 @@
 import { HassEntities, HassEntity } from 'home-assistant-js-websocket';
 import { vi } from 'vitest';
 import { mock } from 'vitest-mock-extended';
-import { CameraManagerEngineFactory } from '../src/camera-manager/engine-factory';
 import { FrigateEvent, FrigateRecording } from '../src/camera-manager/frigate/types';
 import { CameraManager } from '../src/camera-manager/manager';
 import { CameraManagerStore } from '../src/camera-manager/store';
@@ -24,8 +23,31 @@ import {
   frigateCardConfigSchema,
   performanceConfigSchema,
 } from '../src/types';
+import { ActionsManager } from '../src/utils/card-controller/actions-manager';
+import { AutoUpdateManager } from '../src/utils/card-controller/auto-update-manager';
+import { AutomationsManager } from '../src/utils/card-controller/automations-manager';
+import { CameraURLManager } from '../src/utils/card-controller/camera-url-manager';
+import { CardElementManager } from '../src/utils/card-controller/card-element-manager';
+import { ConditionsManager } from '../src/utils/card-controller/conditions-manager';
+import { ConfigManager } from '../src/utils/card-controller/config-manager';
+import { CardController } from '../src/utils/card-controller/controller';
+import { DownloadManager } from '../src/utils/card-controller/download-manager';
+import { ExpandManager } from '../src/utils/card-controller/expand-manager';
+import { FullscreenManager } from '../src/utils/card-controller/fullscreen-manager';
+import { HASSManager } from '../src/utils/card-controller/hass-manager';
+import { InitializationManager } from '../src/utils/card-controller/initialization-manager';
+import { InteractionManager } from '../src/utils/card-controller/interaction-manager';
+import { MediaLoadedInfoManager } from '../src/utils/card-controller/media-info-manager';
+import { MediaPlayerManager } from '../src/utils/card-controller/media-player-manager';
+import { MessageManager } from '../src/utils/card-controller/message-manager';
+import { MicrophoneManager } from '../src/utils/card-controller/microphone-manager';
+import { QueryStringManager } from '../src/utils/card-controller/query-string-manager';
+import { StyleManager } from '../src/utils/card-controller/style-manager';
+import { TriggersManager } from '../src/utils/card-controller/triggers-manager';
+import { ViewManager } from '../src/utils/card-controller/view-manager';
 import { Entity } from '../src/utils/ha/entity-registry/types';
 import { ViewMedia, ViewMediaType } from '../src/view/media';
+import { MediaQueriesResults } from '../src/view/media-queries-results';
 import { View, ViewParameters } from '../src/view/view';
 
 export const createCameraConfig = (config?: unknown): CameraConfig => {
@@ -118,11 +140,22 @@ export const createView = (options?: Partial<ViewParameters>): View => {
   });
 };
 
+export const createViewWithMedia = (options?: Partial<ViewParameters>): View => {
+  const media = generateViewMediaArray({ count: 5 });
+  return createView({
+    queryResults: new MediaQueriesResults({
+      results: media,
+      selectedIndex: 0,
+    }),
+    ...options,
+  });
+};
+
 export const createCameraManager = (options?: {
   store?: CameraManagerStore;
   configs?: CameraConfigs;
 }): CameraManager => {
-  const cameraManager = new CameraManager(mock<CameraManagerEngineFactory>(), {});
+  const cameraManager = new CameraManager(createCardAPI());
   let store: CameraManagerStore | undefined = options?.store;
   if (!store) {
     store = mock<CameraManagerStore>();
@@ -130,9 +163,14 @@ export const createCameraManager = (options?: {
     vi.mocked(store.getCameras).mockReturnValue(configs);
     vi.mocked(store.getVisibleCameras).mockReturnValue(configs);
     vi.mocked(store.getVisibleCameraIDs).mockReturnValue(new Set(configs.keys()));
-    vi.mocked(store.getCameraConfig).mockImplementation((cameraID): CameraConfig => {
-      return configs.get(cameraID) ?? createCameraConfig();
-    });
+    vi.mocked(store.hasVisibleCameraID).mockImplementation((cameraID: string) =>
+      [...configs.keys()].includes(cameraID),
+    );
+    vi.mocked(store.getCameraConfig).mockImplementation(
+      (cameraID): CameraConfig | null => {
+        return configs.get(cameraID) ?? null;
+      },
+    );
   }
   vi.mocked(cameraManager.getStore).mockReturnValue(store);
   vi.mocked(cameraManager.generateDefaultEventQueries).mockReturnValue([
@@ -147,6 +185,15 @@ export const createCameraManager = (options?: {
       type: QueryType.Recording,
     },
   ]);
+  vi.mocked(cameraManager.getCameraCapabilities).mockReturnValue({
+    canFavoriteEvents: true,
+    canFavoriteRecordings: true,
+    canSeek: true,
+    supportsClips: true,
+    supportsRecordings: true,
+    supportsSnapshots: true,
+    supportsTimeline: true,
+  });
 
   return cameraManager;
 };
@@ -210,6 +257,9 @@ export class TestViewMedia extends ViewMedia {
   protected _startTime: Date | null;
   protected _endTime: Date | null;
   protected _inProgress: boolean | null;
+  protected _contentID: string | null;
+  protected _title: string | null;
+  protected _thumbnail: string | null;
 
   constructor(options?: {
     id?: string | null;
@@ -218,12 +268,18 @@ export class TestViewMedia extends ViewMedia {
     cameraID?: string;
     endTime?: Date;
     inProgress?: boolean;
+    contentID?: string;
+    title?: string;
+    thumbnail?: string;
   }) {
     super(options?.mediaType ?? 'clip', options?.cameraID ?? 'camera');
     this._id = options?.id !== undefined ? options.id : 'id';
     this._startTime = options?.startTime ?? null;
     this._endTime = options?.endTime ?? null;
     this._inProgress = options?.inProgress !== undefined ? options.inProgress : false;
+    this._contentID = options?.contentID ?? null;
+    this._title = options?.title ?? null;
+    this._thumbnail = options?.thumbnail ?? null;
   }
   public getID(): string | null {
     return this._id;
@@ -237,6 +293,15 @@ export class TestViewMedia extends ViewMedia {
   public inProgress(): boolean | null {
     return this._inProgress;
   }
+  public getContentID(): string | null {
+    return this._contentID;
+  }
+  public getTitle(): string | null {
+    return this._title;
+  }
+  public getThumbnail(): string | null {
+    return this._thumbnail;
+  }
 }
 
 export const ResizeObserverMock = vi.fn(() => ({
@@ -289,3 +354,32 @@ export const createParent = (options?: { children?: HTMLElement[] }): HTMLElemen
   parent.append(...(options?.children ?? []));
   return parent;
 };
+
+export const createCardAPI = (): CardController => {
+  const api = mock<CardController>();
+
+  api.getActionsManager.mockReturnValue(mock<ActionsManager>());
+  api.getAutomationsManager.mockReturnValue(mock<AutomationsManager>());
+  api.getAutoUpdateManager.mockReturnValue(mock<AutoUpdateManager>());
+  api.getCameraManager.mockReturnValue(mock<CameraManager>());
+  api.getCameraURLManager.mockReturnValue(mock<CameraURLManager>());
+  api.getCardElementManager.mockReturnValue(mock<CardElementManager>());
+  api.getConditionsManager.mockReturnValue(mock<ConditionsManager>());
+  api.getConfigManager.mockReturnValue(mock<ConfigManager>());
+  api.getDownloadManager.mockReturnValue(mock<DownloadManager>());
+  api.getExpandManager.mockReturnValue(mock<ExpandManager>());
+  api.getFullscreenManager.mockReturnValue(mock<FullscreenManager>());
+  api.getHASSManager.mockReturnValue(mock<HASSManager>());
+  api.getInitializationManager.mockReturnValue(mock<InitializationManager>());
+  api.getInteractionManager.mockReturnValue(mock<InteractionManager>());
+  api.getMediaLoadedInfoManager.mockReturnValue(mock<MediaLoadedInfoManager>());
+  api.getMediaPlayerManager.mockReturnValue(mock<MediaPlayerManager>());
+  api.getMessageManager.mockReturnValue(mock<MessageManager>());
+  api.getMicrophoneManager.mockReturnValue(mock<MicrophoneManager>());
+  api.getQueryStringManager.mockReturnValue(mock<QueryStringManager>());
+  api.getStyleManager.mockReturnValue(mock<StyleManager>());
+  api.getTriggersManager.mockReturnValue(mock<TriggersManager>());
+  api.getViewManager.mockReturnValue(mock<ViewManager>());
+
+  return api;
+};
diff --git a/tests/utils/action.test.ts b/tests/utils/action.test.ts
index 3b0e6970..7bb9b74a 100644
--- a/tests/utils/action.test.ts
+++ b/tests/utils/action.test.ts
@@ -14,7 +14,6 @@ import {
   frigateCardHandleActionConfig,
   frigateCardHasAction,
   getActionConfigGivenAction,
-  isViewAction,
   stopEventFromActivatingCardWideActions,
 } from '../../src/utils/action';
 import { createHASS } from '../test-utils';
@@ -242,45 +241,3 @@ describe('stopEventFromActivatingCardWideActions', () => {
     expect(event.stopPropagation).toBeCalled();
   });
 });
-
-describe('isViewAction', () => {
-  const createAction = (action: FrigateCardAction): FrigateCardCustomAction => {
-    return frigateCardCustomActionSchema.parse({
-      action: 'fire-dom-event' as const,
-      frigate_card_action: action,
-    });
-  };
-  it('should return true for clip view ', () => {
-    expect(isViewAction(createAction('clip'))).toBeTruthy();
-  });
-  it('should return true for clips view ', () => {
-    expect(isViewAction(createAction('clips'))).toBeTruthy();
-  });
-  it('should return true for image view ', () => {
-    expect(isViewAction(createAction('image'))).toBeTruthy();
-  });
-  it('should return true for live view ', () => {
-    expect(isViewAction(createAction('live'))).toBeTruthy();
-  });
-  it('should return true for recording view ', () => {
-    expect(isViewAction(createAction('recording'))).toBeTruthy();
-  });
-  it('should return true for live view ', () => {
-    expect(isViewAction(createAction('live'))).toBeTruthy();
-  });
-  it('should return true for recordings view ', () => {
-    expect(isViewAction(createAction('recordings'))).toBeTruthy();
-  });
-  it('should return true for snapshot view ', () => {
-    expect(isViewAction(createAction('snapshot'))).toBeTruthy();
-  });
-  it('should return true for snapshots view ', () => {
-    expect(isViewAction(createAction('snapshots'))).toBeTruthy();
-  });
-  it('should return true for timeline view ', () => {
-    expect(isViewAction(createAction('timeline'))).toBeTruthy();
-  });
-  it('should return false for anything else', () => {
-    expect(isViewAction(createAction('diagnostics'))).toBeFalsy();
-  });
-});
diff --git a/tests/utils/card-controller/actions-manager.test.ts b/tests/utils/card-controller/actions-manager.test.ts
new file mode 100644
index 00000000..93d00887
--- /dev/null
+++ b/tests/utils/card-controller/actions-manager.test.ts
@@ -0,0 +1,730 @@
+import { afterAll, describe, expect, it, vi } from 'vitest';
+import { mock } from 'vitest-mock-extended';
+import {
+  ActionType,
+  FrigateCardCustomAction,
+  FrigateCardMediaPlayer,
+  FrigateCardView,
+  frigateCardCustomActionSchema,
+} from '../../../src/types';
+import {
+  convertActionToFrigateCardCustomAction,
+  frigateCardHandleActionConfig,
+  getActionConfigGivenAction,
+} from '../../../src/utils/action.js';
+import { ActionsManager } from '../../../src/utils/card-controller/actions-manager';
+import {
+  createCardAPI,
+  createConfig,
+  createHASS,
+  createMediaLoadedInfo,
+  createView,
+  createViewWithMedia,
+} from '../../test-utils';
+
+vi.mock('../../../src/utils/action.js');
+vi.mock('../../../src/camera-manager/manager.js');
+
+const createAction = (
+  action: Record<string, unknown>,
+): FrigateCardCustomAction | null => {
+  const result = frigateCardCustomActionSchema.safeParse({
+    action: 'custom:frigate-card-action',
+    ...action,
+  });
+  return result.success ? result.data : null;
+};
+
+describe('ActionsManager.getMergedActions', () => {
+  const config = {
+    view: {
+      actions: {
+        tap_action: {
+          action: 'navigate',
+          navigation_path: '1',
+        },
+      },
+    },
+    live: {
+      actions: {
+        tap_action: {
+          action: 'navigate',
+          navigation_path: '2',
+        },
+      },
+    },
+    media_gallery: {
+      actions: {
+        tap_action: {
+          action: 'navigate',
+          navigation_path: '3',
+        },
+      },
+    },
+    media_viewer: {
+      actions: {
+        tap_action: {
+          action: 'navigate',
+          navigation_path: '4',
+        },
+      },
+    },
+    image: {
+      actions: {
+        tap_action: {
+          action: 'navigate',
+          navigation_path: '5',
+        },
+      },
+    },
+  };
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should get no merged actions with a message', () => {
+    const api = createCardAPI();
+    vi.mocked(api.getViewManager().getView).mockReturnValue(
+      createView({ view: 'live' }),
+    );
+    vi.mocked(api.getMessageManager().hasMessage).mockReturnValue(true);
+
+    const manager = new ActionsManager(api);
+
+    expect(manager.getMergedActions()).toEqual({});
+  });
+
+  describe('should get merged actions with live view', () => {
+    it.each([
+      [
+        'live' as const,
+        {
+          tap_action: {
+            action: 'navigate',
+            navigation_path: '2',
+          },
+        },
+      ],
+      [
+        'clips' as const,
+        {
+          tap_action: {
+            action: 'navigate',
+            navigation_path: '3',
+          },
+        },
+      ],
+      [
+        'clip' as const,
+        {
+          tap_action: {
+            action: 'navigate',
+            navigation_path: '4',
+          },
+        },
+      ],
+      [
+        'image' as const,
+        {
+          tap_action: {
+            action: 'navigate',
+            navigation_path: '5',
+          },
+        },
+      ],
+      ['timeline' as const, {}],
+    ])('%s', (viewName: FrigateCardView, result: Record<string, unknown>) => {
+      const api = createCardAPI();
+      vi.mocked(api.getViewManager().getView).mockReturnValue(
+        createView({ view: viewName }),
+      );
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig(config),
+      );
+
+      const manager = new ActionsManager(api);
+
+      expect(manager.getMergedActions()).toEqual(result);
+    });
+  });
+});
+
+// @vitest-environment jsdom
+describe('ActionsManager.handleInteraction', () => {
+  it('should handle interaction', () => {
+    const api = createCardAPI();
+    const element = document.createElement('div');
+    vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+    const manager = new ActionsManager(api);
+
+    const hass = createHASS();
+    vi.mocked(api.getHASSManager().getHASS).mockReturnValue(hass);
+
+    const actionForThisInteraction: ActionType = {
+      action: 'none',
+    };
+    vi.mocked(getActionConfigGivenAction).mockReturnValue(actionForThisInteraction);
+
+    manager.handleInteraction('tap');
+
+    expect(frigateCardHandleActionConfig).toBeCalledWith(
+      element,
+      hass,
+      manager.getMergedActions(),
+      'tap',
+      actionForThisInteraction,
+    );
+  });
+
+  it('should not handle interaction', () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+    vi.mocked(api.getHASSManager().getHASS).mockReturnValue(null);
+
+    // No values of hass.
+    manager.handleInteraction('tap');
+    expect(frigateCardHandleActionConfig).not.toBeCalledWith();
+  });
+});
+
+describe('ActionsManager.handleActionEvent', () => {
+  it('should handle event', () => {
+    const action = createAction({ frigate_card_action: 'default' })!;
+    const event: CustomEvent<FrigateCardCustomAction> = new CustomEvent('ll-custom', {
+      detail: action,
+    });
+
+    // The file containing convertActionToFrigateCardCustomAction (action.ts) is
+    // mocked, so need to provide a value here.
+    vi.mocked(convertActionToFrigateCardCustomAction).mockReturnValue(action);
+
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    manager.handleActionEvent(event);
+    expect(api.getViewManager().setViewDefault).toBeCalled();
+  });
+
+  it('should not handle event without detail', () => {
+    const action = createAction({ frigate_card_action: 'default' })!;
+    const event = new Event('ll-custom');
+
+    // Mock this out just so that if the sentinel in handleActionEvent failed,
+    // it would still trigger a test failure below.
+    vi.mocked(convertActionToFrigateCardCustomAction).mockReturnValue(action);
+
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+    manager.handleActionEvent(event);
+
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+  });
+
+  it('should not handle malformed action', () => {
+    const action = createAction({ frigate_card_action: 'default' })!;
+    const event: CustomEvent<FrigateCardCustomAction> = new CustomEvent('ll-custom', {
+      detail: action,
+    });
+
+    vi.mocked(convertActionToFrigateCardCustomAction).mockReturnValue(null);
+
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+    manager.handleActionEvent(event);
+
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+  });
+});
+
+describe('ActionsManager.executeAction', () => {
+  it('should not handle actions with different card_id', async () => {
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+      createConfig({
+        card_id: 'foo',
+      }),
+    );
+
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        card_id: 'NOT_foo',
+        frigate_card_action: 'default',
+      })!,
+    );
+
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+  });
+
+  it('should handle default action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'default',
+      })!,
+    );
+
+    expect(api.getViewManager().setViewDefault).toBeCalled();
+  });
+
+  describe('should handle view action', async () => {
+    it.each([
+      ['clip' as const],
+      ['clips' as const],
+      ['image' as const],
+      ['live' as const],
+      ['recording' as const],
+      ['recordings' as const],
+      ['snapshot' as const],
+      ['snapshots' as const],
+      ['timeline' as const],
+    ])('%s', async (viewName: FrigateCardView) => {
+      const api = createCardAPI();
+      const manager = new ActionsManager(api);
+
+      await manager.executeAction(
+        createAction({
+          frigate_card_action: viewName,
+        })!,
+      );
+
+      expect(api.getViewManager().setViewByParameters).toBeCalledWith(
+        expect.objectContaining({
+          viewName: viewName,
+        }),
+      );
+    });
+  });
+
+  it('should handle download action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'download',
+      })!,
+    );
+
+    expect(api.getDownloadManager().downloadViewerMedia).toBeCalled();
+  });
+
+  it('should handle camera ui action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'camera_ui',
+      })!,
+    );
+
+    expect(api.getCameraURLManager().openURL).toBeCalled();
+  });
+
+  it('should handle expand action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'expand',
+      })!,
+    );
+
+    expect(api.getExpandManager().toggleExpanded).toBeCalled();
+  });
+
+  it('should handle fullscreen action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'fullscreen',
+      })!,
+    );
+
+    expect(api.getFullscreenManager().toggleFullscreen).toBeCalled();
+  });
+
+  it('should handle menu toggle action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'menu_toggle',
+      })!,
+    );
+
+    expect(api.getCardElementManager().toggleMenu).toBeCalled();
+  });
+
+  describe('should handle camera_select action', () => {
+    it('with valid camera and view', async () => {
+      const api = createCardAPI();
+      const manager = new ActionsManager(api);
+
+      vi.mocked(api.getViewManager().getView).mockReturnValue(createView());
+      vi.mocked(api.getViewManager().isViewSupportedByCamera).mockReturnValue(true);
+
+      await manager.executeAction(
+        createAction({
+          frigate_card_action: 'camera_select',
+          camera: 'camera',
+        })!,
+      );
+
+      expect(api.getViewManager().setViewByParameters).toBeCalledWith(
+        expect.objectContaining({
+          viewName: 'live',
+          cameraID: 'camera',
+        }),
+      );
+    });
+
+    it('without config', async () => {
+      const api = createCardAPI();
+      const manager = new ActionsManager(api);
+
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(null);
+      vi.mocked(api.getViewManager().getView).mockReturnValue(
+        createView({
+          view: 'timeline',
+        }),
+      );
+      vi.mocked(api.getViewManager().isViewSupportedByCamera).mockReturnValue(true);
+
+      await manager.executeAction(
+        createAction({
+          frigate_card_action: 'camera_select',
+          camera: 'camera',
+        })!,
+      );
+
+      expect(api.getViewManager().setViewByParameters).toBeCalledWith(
+        expect.objectContaining({
+          viewName: 'timeline',
+          cameraID: 'camera',
+        }),
+      );
+    });
+
+    it('with target view', async () => {
+      const api = createCardAPI();
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig({
+          view: {
+            // Change to clips view when the camera changes.
+            camera_select: 'clips',
+          },
+        }),
+      );
+      vi.mocked(api.getViewManager().getView).mockReturnValue(
+        createView({
+          view: 'live',
+        }),
+      );
+      vi.mocked(api.getViewManager().isViewSupportedByCamera).mockReturnValue(true);
+      const manager = new ActionsManager(api);
+
+      await manager.executeAction(
+        createAction({
+          frigate_card_action: 'camera_select',
+          camera: 'camera',
+        })!,
+      );
+
+      expect(api.getViewManager().setViewByParameters).toBeCalledWith(
+        expect.objectContaining({
+          viewName: 'clips',
+          cameraID: 'camera',
+        }),
+      );
+    });
+
+    it('without a current view', async () => {
+      const api = createCardAPI();
+      const manager = new ActionsManager(api);
+
+      await manager.executeAction(
+        createAction({
+          frigate_card_action: 'camera_select',
+          camera: 'camera',
+        })!,
+      );
+
+      expect(api.getViewManager().setViewByParameters).not.toBeCalled();
+    });
+
+    it('with an unsupported view', async () => {
+      const api = createCardAPI();
+      const manager = new ActionsManager(api);
+
+      vi.mocked(api.getViewManager().getView).mockReturnValue(
+        createView({
+          view: 'timeline',
+        }),
+      );
+
+      await manager.executeAction(
+        createAction({
+          frigate_card_action: 'camera_select',
+          camera: 'camera',
+        })!,
+      );
+
+      expect(api.getViewManager().setViewByParameters).toBeCalledWith(
+        expect.objectContaining({
+          // Should have fallen back to the default view.
+          viewName: 'live',
+          cameraID: 'camera',
+        }),
+      );
+    });
+  });
+
+  it('should handle live_substream_select action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'live_substream_select',
+        camera: 'substream',
+      })!,
+    );
+
+    expect(api.getViewManager().setViewWithSubstream).toBeCalledWith('substream');
+  });
+
+  it('should handle live_substream_off action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'live_substream_off',
+      })!,
+    );
+
+    expect(api.getViewManager().setViewWithoutSubstream).toBeCalled();
+  });
+
+  it('should handle live_substream_on action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'live_substream_on',
+      })!,
+    );
+
+    expect(api.getViewManager().setViewWithSubstream).toBeCalledWith();
+  });
+
+  describe('should handle media_player action', () => {
+    it('to stop', async () => {
+      const api = createCardAPI();
+      const manager = new ActionsManager(api);
+
+      await manager.executeAction(
+        createAction({
+          frigate_card_action: 'media_player',
+          media_player_action: 'stop',
+          media_player: 'this_is_a_media_player',
+        })!,
+      );
+
+      expect(api.getMediaPlayerManager().stop).toBeCalledWith('this_is_a_media_player');
+    });
+
+    it('to play live', async () => {
+      const api = createCardAPI();
+      vi.mocked(api.getViewManager().getView).mockReturnValue(
+        createView({
+          camera: 'camera',
+          view: 'live',
+        }),
+      );
+      const manager = new ActionsManager(api);
+
+      await manager.executeAction(
+        createAction({
+          frigate_card_action: 'media_player',
+          media_player_action: 'play',
+          media_player: 'this_is_a_media_player',
+        })!,
+      );
+
+      expect(api.getMediaPlayerManager().playLive).toBeCalledWith(
+        'this_is_a_media_player',
+        'camera',
+      );
+    });
+
+    it('to play media', async () => {
+      const api = createCardAPI();
+      const view = createViewWithMedia({
+        camera: 'camera',
+        view: 'media',
+      });
+
+      vi.mocked(api.getViewManager().getView).mockReturnValue(view);
+      const manager = new ActionsManager(api);
+
+      await manager.executeAction(
+        createAction({
+          frigate_card_action: 'media_player',
+          media_player_action: 'play',
+          media_player: 'this_is_a_media_player',
+        })!,
+      );
+
+      expect(api.getMediaPlayerManager().playMedia).toBeCalledWith(
+        'this_is_a_media_player',
+        view.queryResults?.getSelectedResult(),
+      );
+    });
+
+    it('to play media without selected media', async () => {
+      const api = createCardAPI();
+      vi.mocked(api.getViewManager().getView).mockReturnValue(
+        createView({
+          view: 'media',
+        }),
+      );
+      const manager = new ActionsManager(api);
+
+      await manager.executeAction(
+        createAction({
+          frigate_card_action: 'media_player',
+          media_player_action: 'play',
+          media_player: 'this_is_a_media_player',
+        })!,
+      );
+
+      expect(api.getMediaPlayerManager().playMedia).not.toBeCalled();
+    });
+  });
+
+  it('should handle diagnostics action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'diagnostics',
+      })!,
+    );
+
+    expect(api.getViewManager().setViewByParameters).toBeCalledWith(
+      expect.objectContaining({
+        viewName: 'diagnostics',
+      }),
+    );
+  });
+
+  it('should handle microphone_mute action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'microphone_mute',
+      })!,
+    );
+
+    expect(api.getMicrophoneManager().mute).toBeCalled();
+  });
+
+  it('should handle microphone_unmute action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'microphone_unmute',
+      })!,
+    );
+
+    expect(api.getMicrophoneManager().unmute).toBeCalled();
+  });
+
+  describe('should handle media player action', () => {
+    it.each([
+      ['mute' as const],
+      ['unmute' as const],
+      ['play' as const],
+      ['pause' as const],
+    ])('%s', async (action: 'mute' | 'unmute' | 'play' | 'pause') => {
+      const api = createCardAPI();
+      const player = mock<FrigateCardMediaPlayer>();
+      vi.mocked(api.getMediaLoadedInfoManager().get).mockReturnValue(
+        createMediaLoadedInfo({
+          player: player,
+        }),
+      );
+      const manager = new ActionsManager(api);
+
+      await manager.executeAction(
+        createAction({
+          frigate_card_action: action,
+        })!,
+      );
+
+      expect(player[action]).toBeCalled();
+    });
+  });
+
+  it('should handle screenshot action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'screenshot',
+      })!,
+    );
+
+    expect(api.getDownloadManager().downloadScreenshot).toBeCalled();
+  });
+
+  it('should handle display_mode_select action', async () => {
+    const api = createCardAPI();
+    const manager = new ActionsManager(api);
+
+    await manager.executeAction(
+      createAction({
+        frigate_card_action: 'display_mode_select',
+        display_mode: 'grid',
+      })!,
+    );
+
+    expect(api.getViewManager().setViewWithNewDisplayMode).toBeCalledWith('grid');
+  });
+
+  it('should handle unknown action', async () => {
+    const manager = new ActionsManager(createCardAPI());
+
+    const spy = vi.spyOn(global.console, 'warn').mockImplementation(() => true);
+
+    await manager.executeAction(
+      // Have to manually create the action (vs using `createAction()`) since
+      // it's malformed.
+      {
+        frigate_card_action: 'not_a_real_action',
+      } as unknown as FrigateCardCustomAction,
+    );
+
+    expect(spy).toBeCalledWith(
+      'Frigate card received unknown card action: not_a_real_action',
+    );
+  });
+});
diff --git a/tests/utils/card-controller/auto-update-manager.test.ts b/tests/utils/card-controller/auto-update-manager.test.ts
new file mode 100644
index 00000000..b7799a7c
--- /dev/null
+++ b/tests/utils/card-controller/auto-update-manager.test.ts
@@ -0,0 +1,73 @@
+import add from 'date-fns/add';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { AutoUpdateManager } from '../../../src/utils/card-controller/auto-update-manager';
+import { createCardAPI, createConfig } from '../../test-utils';
+
+// @vitest-environment jsdom
+describe('AutoUpdateManager', () => {
+  const start = new Date('2023-09-23T19:12:00');
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should set default view when allowed', () => {
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+      createConfig({
+        view: {
+          update_seconds: 10,
+        },
+      }),
+    );
+    // Card is triggered.
+    vi.mocked(api.getTriggersManager().isTriggered).mockReturnValue(true);
+    vi.mocked(api.getInteractionManager().hasInteraction).mockReturnValue(false);
+
+    vi.useFakeTimers();
+    vi.setSystemTime(start);
+
+    const manager = new AutoUpdateManager(api);
+    manager.startDefaultViewTimer();
+
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+    
+    vi.setSystemTime(add(start, { seconds: 10 }));
+    vi.runOnlyPendingTimers();
+
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+
+    vi.mocked(api.getTriggersManager().isTriggered).mockReturnValue(false);
+
+    vi.setSystemTime(add(start, { seconds: 20 }));
+    vi.runOnlyPendingTimers();
+
+    expect(api.getViewManager().setViewDefault).toBeCalled();
+  });
+
+  it('should not set default view when not configured', () => {
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+      createConfig({
+        view: {
+          update_seconds: 0,
+        },
+      }),
+    );
+    vi.mocked(api.getTriggersManager().isTriggered).mockReturnValue(false);
+    vi.mocked(api.getInteractionManager().hasInteraction).mockReturnValue(false);
+
+    vi.useFakeTimers();
+    vi.setSystemTime(start);
+
+    const manager = new AutoUpdateManager(api);
+    manager.startDefaultViewTimer();
+
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+    
+    vi.setSystemTime(add(start, { seconds: 10 }));
+    vi.runOnlyPendingTimers();
+
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+  });
+});
diff --git a/tests/utils/card-controller/automations-manager.test.ts b/tests/utils/card-controller/automations-manager.test.ts
new file mode 100644
index 00000000..1194a935
--- /dev/null
+++ b/tests/utils/card-controller/automations-manager.test.ts
@@ -0,0 +1,150 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { frigateCardHandleAction } from '../../../src/utils/action.js';
+import {
+  AutomationsManager,
+} from '../../../src/utils/card-controller/automations-manager';
+import { createCardAPI, createConfig, createHASS } from '../../test-utils';
+
+vi.mock('../../../src/utils/action.js');
+
+describe('AutomationsManager', () => {
+  const actions = [
+    {
+      action: 'custom:frigate-card-action',
+      frigate_card_action: 'clips',
+    },
+  ];
+  const conditions = { fullscreen: true };
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should do nothing without hass', () => {
+    const api = createCardAPI();
+
+    const automationsManager = new AutomationsManager(api);
+    automationsManager.execute();
+    expect(frigateCardHandleAction).not.toBeCalled();
+  });
+
+  it('should do nothing without automations', () => {
+    const api = createCardAPI();
+    vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+
+    const automationsManager = new AutomationsManager(api);
+    automationsManager.setAutomationsFromConfig();
+    automationsManager.execute();
+    expect(frigateCardHandleAction).not.toBeCalled();
+  });
+
+  it('should execute actions', () => {
+    const config = createConfig({
+      automations: [
+        {
+          conditions: conditions,
+          actions: actions,
+        },
+      ],
+    });
+
+    const api = createCardAPI();
+    vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+    vi.mocked(api.getConfigManager().getNonOverriddenConfig).mockReturnValue(config);
+
+    const automationsManager = new AutomationsManager(api);
+    automationsManager.setAutomationsFromConfig();
+
+    automationsManager.execute();
+    expect(frigateCardHandleAction).not.toBeCalled();
+
+    vi.mocked(api.getConditionsManager().evaluateCondition).mockReturnValue(true);
+
+    automationsManager.execute();
+    expect(frigateCardHandleAction).toBeCalledTimes(1);
+
+    // Automation will not re-fire when condition continues to evaluate the
+    // same.
+    automationsManager.execute();
+    expect(frigateCardHandleAction).toBeCalledTimes(1);
+
+    vi.mocked(api.getConditionsManager().evaluateCondition).mockReturnValue(false);
+
+    automationsManager.execute();
+    expect(frigateCardHandleAction).toBeCalledTimes(1);
+
+    vi.mocked(api.getConditionsManager().evaluateCondition).mockReturnValue(true);
+
+    automationsManager.execute();
+    expect(frigateCardHandleAction).toBeCalledTimes(2);
+  });
+
+  it('should execute actions_not', () => {
+    const config = createConfig({
+      automations: [
+        {
+          conditions: conditions,
+          actions_not: actions,
+        },
+      ],
+    });
+
+    const api = createCardAPI();
+    vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+    vi.mocked(api.getConfigManager().getNonOverriddenConfig).mockReturnValue(config);
+    vi.mocked(api.getConditionsManager().evaluateCondition).mockReturnValue(false);
+
+    const automationsManager = new AutomationsManager(api);
+    automationsManager.setAutomationsFromConfig();
+
+    automationsManager.execute();
+
+    expect(frigateCardHandleAction).toBeCalled();
+  });
+
+  it('should prevent automation loops', () => {
+    const config = createConfig({
+      automations: [
+        {
+          conditions: { fullscreen: true },
+          actions: actions,
+        },
+        {
+          conditions: { fullscreen: true },
+          actions_not: actions,
+        },
+      ],
+    });
+
+    const api = createCardAPI();
+    vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+    vi.mocked(api.getConfigManager().getNonOverriddenConfig).mockReturnValue(config);
+
+    const automationsManager = new AutomationsManager(api);
+    automationsManager.setAutomationsFromConfig();
+
+    // Create a setup where one automation action causes another...
+    let evaluation = true;
+    vi.mocked(frigateCardHandleAction).mockImplementation(() => {
+      evaluation = !evaluation;
+      vi.mocked(api.getConditionsManager().evaluateCondition).mockReturnValue(
+        evaluation,
+      );
+      automationsManager.execute();
+    });
+
+    vi.mocked(api.getConditionsManager().evaluateCondition).mockReturnValue(evaluation);
+
+    automationsManager.execute();
+
+    expect(api.getMessageManager().setMessageIfHigherPriority).toBeCalledWith(
+      expect.objectContaining({
+        type: 'error',
+        message:
+          'Too many nested automation calls, please check your configuration for loops',
+      }),
+    );
+
+    expect(frigateCardHandleAction).toBeCalledTimes(10);
+  });
+});
diff --git a/tests/utils/card-controller/camera-url-manager.test.ts b/tests/utils/card-controller/camera-url-manager.test.ts
new file mode 100644
index 00000000..12c88c63
--- /dev/null
+++ b/tests/utils/card-controller/camera-url-manager.test.ts
@@ -0,0 +1,58 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CameraEndpoint } from '../../../src/camera-manager/types';
+import { CameraURLManager } from '../../../src/utils/card-controller/camera-url-manager';
+import {
+  CardCameraURLAPI
+} from '../../../src/utils/card-controller/types';
+import { createCardAPI, createViewWithMedia } from '../../test-utils';
+
+const createAPIWithMedia = (): CardCameraURLAPI => {
+  const api = createCardAPI();
+  vi.mocked(api.getViewManager().getView).mockReturnValue(
+    createViewWithMedia()
+  )
+  return api;
+};
+
+// @vitest-environment jsdom
+describe('CameraURLManager', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should get URL', () => {
+    const api = createAPIWithMedia();
+    const manager = new CameraURLManager(api);
+
+    const endpoint: CameraEndpoint = {
+      endpoint: 'http://frigate',
+    };
+
+    vi.mocked(api.getCameraManager().getCameraEndpoints)?.mockReturnValue({
+      ui: endpoint,
+    });
+
+    expect(manager.getCameraURL()).toBe('http://frigate');
+    expect(manager.hasCameraURL()).toBeTruthy();
+
+    const windowSpy = vi.spyOn(window, 'open').mockReturnValue(null);
+    manager.openURL();
+    expect(windowSpy).toBeCalledWith('http://frigate');
+  });
+
+  it('should not get URL without view', () => {
+    const manager = new CameraURLManager(createCardAPI());
+    expect(manager.getCameraURL()).toBeNull();
+
+    const windowSpy = vi.spyOn(window, 'open').mockReturnValue(null);
+    manager.openURL();
+    expect(windowSpy).not.toBeCalled();
+  });
+
+  it('should not get URL without cameraManager endpoints', () => {
+    const api = createAPIWithMedia();
+    vi.mocked(api.getCameraManager().getCameraEndpoints)?.mockReturnValue(null);
+    const manager = new CameraURLManager(api);
+    expect(manager.getCameraURL()).toBeNull();
+  });
+});
diff --git a/tests/utils/card-controller/card-element-manager.test.ts b/tests/utils/card-controller/card-element-manager.test.ts
new file mode 100644
index 00000000..bea938a3
--- /dev/null
+++ b/tests/utils/card-controller/card-element-manager.test.ts
@@ -0,0 +1,182 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  CardElementManager,
+  CardHTMLElement,
+} from '../../../src/utils/card-controller/card-element-manager';
+import { createCardAPI } from '../../test-utils';
+import { mock } from 'vitest-mock-extended';
+
+const createElement = (): CardHTMLElement => {
+  const element = document.createElement('div') as unknown as CardHTMLElement;
+  element.requestUpdate = vi.fn();
+  return element as CardHTMLElement;
+};
+
+// @vitest-environment jsdom
+describe('CardElementManager', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    global.window.location = mock<Location>();
+  });
+
+  it('should get element', () => {
+    const element = createElement();
+    const manager = new CardElementManager(
+      createCardAPI(),
+      element,
+      () => undefined,
+      () => undefined,
+    );
+
+    expect(manager.getElement()).toBe(element);
+  });
+
+  it('should reset scroll', () => {
+    const callback = vi.fn();
+    const manager = new CardElementManager(
+      createCardAPI(),
+      createElement(),
+      callback,
+      () => undefined,
+    );
+
+    manager.scrollReset();
+
+    expect(callback).toBeCalled();
+  });
+
+  it('should toggle menu', () => {
+    const callback = vi.fn();
+    const manager = new CardElementManager(
+      createCardAPI(),
+      createElement(),
+      () => undefined,
+      callback,
+    );
+
+    manager.toggleMenu();
+
+    expect(callback).toBeCalled();
+  });
+
+  it('should update', () => {
+    const element = createElement();
+    const manager = new CardElementManager(
+      createCardAPI(),
+      element,
+      () => undefined,
+      () => undefined,
+    );
+
+    manager.update();
+    expect(element.requestUpdate).toBeCalled();
+  });
+
+  it('should get hasUpdated', () => {
+    const element = createElement();
+    element.hasUpdated = true;
+    const manager = new CardElementManager(
+      createCardAPI(),
+      element,
+      () => undefined,
+      () => undefined,
+    );
+
+    expect(manager.hasUpdated()).toBeTruthy();
+  });
+
+  it('should get height', () => {
+    const element = createElement();
+    element.getBoundingClientRect = vi.fn().mockReturnValue({
+      width: 200,
+      height: 800,
+    });
+
+    const manager = new CardElementManager(
+      createCardAPI(),
+      element,
+      () => undefined,
+      () => undefined,
+    );
+
+    expect(manager.getCardHeight()).toBe(800);
+  });
+
+  it('should connect', () => {
+    const windowAddEventListener = vi.spyOn(global.window, 'addEventListener');
+
+    const addEventListener = vi.fn();
+    const element = createElement();
+    element.addEventListener = addEventListener;
+
+    const api = createCardAPI();
+    const manager = new CardElementManager(
+      api,
+      element,
+      () => undefined,
+      () => undefined,
+    );
+
+    manager.elementConnected();
+
+    expect(element.getAttribute('panel')).toBeNull();
+    expect(api.getFullscreenManager().connect).toBeCalled();
+
+    expect(addEventListener).toBeCalledWith(
+      'mousemove',
+      api.getInteractionManager().reportInteraction,
+    );
+    expect(addEventListener).toBeCalledWith(
+      'll-custom',
+      api.getActionsManager().handleActionEvent,
+    );
+    expect(addEventListener).toBeCalledWith(
+      '@action',
+      api.getInteractionManager().reportInteraction,
+    );
+    expect(windowAddEventListener).toBeCalledWith('location-changed', expect.anything());
+    expect(windowAddEventListener).toBeCalledWith('popstate', expect.anything());
+  });
+
+  it('should disconnect', () => {
+    const windowRemoveEventListener = vi.spyOn(global.window, 'removeEventListener');
+
+    const element = createElement();
+    element.setAttribute('panel', '');
+
+    const removeEventListener = vi.fn();
+    element.removeEventListener = removeEventListener;
+
+    const api = createCardAPI();
+    const manager = new CardElementManager(
+      api,
+      element,
+      () => undefined,
+      () => undefined,
+    );
+
+    manager.elementDisconnected();
+
+    expect(element.getAttribute('panel')).toBeNull();
+    expect(api.getMediaLoadedInfoManager().clear).toBeCalled();
+    expect(api.getFullscreenManager().disconnect).toBeCalled();
+
+    expect(removeEventListener).toBeCalledWith(
+      'mousemove',
+      api.getInteractionManager().reportInteraction,
+    );
+    expect(removeEventListener).toBeCalledWith(
+      'll-custom',
+      api.getActionsManager().handleActionEvent,
+    );
+    expect(removeEventListener).toBeCalledWith(
+      '@action',
+      api.getInteractionManager().reportInteraction,
+    );
+    expect(windowRemoveEventListener).toBeCalledWith(
+      'location-changed',
+      expect.anything(),
+    );
+    expect(windowRemoveEventListener).toBeCalledWith('popstate', expect.anything());
+  });
+});
diff --git a/tests/conditions.test.ts b/tests/utils/card-controller/conditions-manager.test.ts
similarity index 59%
rename from tests/conditions.test.ts
rename to tests/utils/card-controller/conditions-manager.test.ts
index de76966b..d7799030 100644
--- a/tests/conditions.test.ts
+++ b/tests/utils/card-controller/conditions-manager.test.ts
@@ -1,13 +1,18 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import {
-  ConditionController,
+  ConditionsManager,
   ConditionEvaluateRequestEvent,
   evaluateConditionViaEvent,
   getOverriddenConfig,
   getOverridesByKey,
-} from '../src/conditions';
-import { FrigateCardCondition } from '../src/types';
-import { createCondition, createConfig, createStateEntity } from './test-utils';
+} from '../../../src/utils/card-controller/conditions-manager';
+import { FrigateCardCondition } from '../../../src/types';
+import {
+  createCardAPI,
+  createCondition,
+  createConfig,
+  createStateEntity,
+} from '../../test-utils';
 
 // @vitest-environment jsdom
 describe('ConditionEvaluateRequestEvent', () => {
@@ -85,15 +90,15 @@ describe('getOverriddenConfig', () => {
   ];
 
   it('should not override config', () => {
-    const controller = new ConditionController();
-    expect(getOverriddenConfig(controller, config, overrides)).toBe(config);
+    const manager = new ConditionsManager(createCardAPI());
+    expect(getOverriddenConfig(manager, config, overrides)).toBe(config);
   });
 
   it('should override config', () => {
-    const controller = new ConditionController();
-    controller.setState({ fullscreen: true });
+    const manager = new ConditionsManager(createCardAPI());
+    manager.setState({ fullscreen: true });
 
-    expect(getOverriddenConfig(controller, config, overrides)).toEqual({
+    expect(getOverriddenConfig(manager, config, overrides)).toEqual({
       menu: {
         style: 'above',
       },
@@ -101,10 +106,10 @@ describe('getOverriddenConfig', () => {
   });
 
   it('should do nothing without overrides', () => {
-    const controller = new ConditionController();
-    controller.setState({ fullscreen: true });
+    const manager = new ConditionsManager(createCardAPI());
+    manager.setState({ fullscreen: true });
 
-    expect(getOverriddenConfig(controller, config)).toBe(config);
+    expect(getOverriddenConfig(manager, config)).toBe(config);
   });
 });
 
@@ -139,7 +144,7 @@ describe('getOverridesByKey', () => {
   });
 });
 
-describe('ConditionController', () => {
+describe('ConditionsManager', () => {
   const config = {
     type: 'custom:frigate-card',
     cameras: [],
@@ -187,40 +192,23 @@ describe('ConditionController', () => {
     vi.restoreAllMocks();
   });
 
-  it('should add listener', () => {
-    const controller = new ConditionController();
-    const handler = vi.fn();
-    controller.addStateListener(handler);
-    controller.setState({ fullscreen: true });
-    expect(handler).toBeCalled();
-  });
+  it('should get epoch', () => {
+    const manager = new ConditionsManager(createCardAPI());
+    const epoch_1 = manager.getEpoch();
+    expect(epoch_1).toEqual({ manager: manager });
 
-  it('should remove listener', () => {
-    const controller = new ConditionController();
-    const handler = vi.fn();
-    controller.addStateListener(handler);
-    controller.removeStateListener(handler);
-    controller.setState({ fullscreen: true });
-    expect(handler).not.toBeCalled();
-  });
+    manager.setState({ fullscreen: true });
 
-  it('should get wrapper', () => {
-    const controller = new ConditionController();
-    const wrapper_1 = controller.getEpoch();
-    expect(wrapper_1).toEqual({ controller: controller });
-
-    controller.setState({ fullscreen: true });
-
-    const wrapper_2 = controller.getEpoch();
-    expect(wrapper_2).toEqual({ controller: controller });
+    const epoch_2 = manager.getEpoch();
+    expect(epoch_2).toEqual({ manager: manager });
 
     // Since the state was set the wrappers should be different.
-    expect(wrapper_1).not.toBe(wrapper_2);
+    expect(epoch_1).not.toBe(epoch_2);
   });
 
   it('should not return hasHAStateConditions without HA state conditions', () => {
-    const controller = new ConditionController();
-    expect(controller.hasHAStateConditions).toBeFalsy();
+    const manager = new ConditionsManager(createCardAPI());
+    expect(manager.hasHAStateConditions()).toBeFalsy();
   });
 
   it('should return hasHAStateConditions with HA state conditions', () => {
@@ -228,50 +216,55 @@ describe('ConditionController', () => {
       matches: false,
       addEventListener: vi.fn(),
     } as unknown as MediaQueryList);
-    const controller = new ConditionController(createConfig(config));
-    expect(controller.hasHAStateConditions).toBeTruthy();
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig(config));
+    const manager = new ConditionsManager(api);
+
+    manager.setConditionsFromConfig();
+
+    expect(manager.hasHAStateConditions()).toBeTruthy();
   });
 
   it('should evaluate conditions with a view', () => {
-    const controller = new ConditionController();
+    const manager = new ConditionsManager(createCardAPI());
     const condition = { view: ['foo'] };
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
-    controller.setState({ view: 'foo' });
-    expect(controller.evaluateCondition(condition)).toBeTruthy();
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
+    manager.setState({ view: 'foo' });
+    expect(manager.evaluateCondition(condition)).toBeTruthy();
   });
 
   it('should evaluate conditions with fullscreen', () => {
-    const controller = new ConditionController();
+    const manager = new ConditionsManager(createCardAPI());
     const condition = { fullscreen: true };
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
-    controller.setState({ fullscreen: true });
-    expect(controller.evaluateCondition(condition)).toBeTruthy();
-    controller.setState({ fullscreen: false });
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
+    manager.setState({ fullscreen: true });
+    expect(manager.evaluateCondition(condition)).toBeTruthy();
+    manager.setState({ fullscreen: false });
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
   });
 
   it('should evaluate conditions with expand', () => {
-    const controller = new ConditionController();
+    const manager = new ConditionsManager(createCardAPI());
     const condition = { expand: true };
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
-    controller.setState({ expand: true });
-    expect(controller.evaluateCondition(condition)).toBeTruthy();
-    controller.setState({ expand: false });
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
+    manager.setState({ expand: true });
+    expect(manager.evaluateCondition(condition)).toBeTruthy();
+    manager.setState({ expand: false });
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
   });
 
   it('should evaluate conditions with camera', () => {
-    const controller = new ConditionController();
+    const manager = new ConditionsManager(createCardAPI());
     const condition = { camera: ['bar'] };
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
-    controller.setState({ camera: 'bar' });
-    expect(controller.evaluateCondition(condition)).toBeTruthy();
-    controller.setState({ camera: 'will-not-match' });
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
+    manager.setState({ camera: 'bar' });
+    expect(manager.evaluateCondition(condition)).toBeTruthy();
+    manager.setState({ camera: 'will-not-match' });
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
   });
 
   it('should evaluate conditions with ha state positive check', () => {
-    const controller = new ConditionController();
+    const manager = new ConditionsManager(createCardAPI());
     const condition = {
       state: [
         {
@@ -280,17 +273,17 @@ describe('ConditionController', () => {
         },
       ],
     };
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
-    controller.setState({ state: { 'binary_sensor.foo': createStateEntity() } });
-    expect(controller.evaluateCondition(condition)).toBeTruthy();
-    controller.setState({
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
+    manager.setState({ state: { 'binary_sensor.foo': createStateEntity() } });
+    expect(manager.evaluateCondition(condition)).toBeTruthy();
+    manager.setState({
       state: { 'binary_sensor.foo': createStateEntity({ state: 'off' }) },
     });
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
   });
 
   it('should evaluate conditions with ha state negative check', () => {
-    const controller = new ConditionController();
+    const manager = new ConditionsManager(createCardAPI());
     const condition = {
       state: [
         {
@@ -299,23 +292,23 @@ describe('ConditionController', () => {
         },
       ],
     };
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
-    controller.setState({ state: { 'binary_sensor.foo': createStateEntity() } });
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
-    controller.setState({
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
+    manager.setState({ state: { 'binary_sensor.foo': createStateEntity() } });
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
+    manager.setState({
       state: { 'binary_sensor.foo': createStateEntity({ state: 'off' }) },
     });
-    expect(controller.evaluateCondition(condition)).toBeTruthy();
+    expect(manager.evaluateCondition(condition)).toBeTruthy();
   });
 
   it('should evaluate conditions with media_loaded', () => {
-    const controller = new ConditionController();
+    const manager = new ConditionsManager(createCardAPI());
     const condition = { media_loaded: true };
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
-    controller.setState({ media_loaded: true });
-    expect(controller.evaluateCondition(condition)).toBeTruthy();
-    controller.setState({ media_loaded: false });
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
+    manager.setState({ media_loaded: true });
+    expect(manager.evaluateCondition(condition)).toBeTruthy();
+    manager.setState({ media_loaded: false });
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
   });
 
   it('should evaluate conditions with media query', () => {
@@ -323,10 +316,10 @@ describe('ConditionController', () => {
       .mockReturnValueOnce(<MediaQueryList>{ matches: true })
       .mockReturnValueOnce(<MediaQueryList>{ matches: false });
 
-    const controller = new ConditionController();
+    const manager = new ConditionsManager(createCardAPI());
     const condition = { media_query: 'whatever' };
-    expect(controller.evaluateCondition(condition)).toBeTruthy();
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
+    expect(manager.evaluateCondition(condition)).toBeTruthy();
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
   });
 
   it('should trigger on changes to media query conditions', () => {
@@ -337,12 +330,14 @@ describe('ConditionController', () => {
       addEventListener: addEventListener,
       removeEventListener: removeEventListener,
     } as unknown as MediaQueryList);
-
-    const controller = new ConditionController(createConfig(config));
-    expect(addEventListener).toHaveBeenCalledWith('change', expect.anything());
-
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig(config));
     const callback = vi.fn();
-    controller.addStateListener(callback);
+    const manager = new ConditionsManager(api, callback);
+
+    manager.setConditionsFromConfig();
+
+    expect(addEventListener).toHaveBeenCalledWith('change', expect.anything());
 
     // Call the media query callback and use it to pretend a match happened. The
     // callback is the 0th mock innvocation and the 1st argument.
@@ -351,18 +346,18 @@ describe('ConditionController', () => {
     // This should result in a callback to our state listener.
     expect(callback).toBeCalled();
 
-    // Destroy the controller, which should remove the media query listener.
-    controller.destroy();
+    // Remove the conditions, which should remove the media query listener.
+    manager.removeConditions();
     expect(removeEventListener).toBeCalled();
   });
 
   it('should evaluate conditions with display mode', () => {
-    const controller = new ConditionController();
+    const manager = new ConditionsManager(createCardAPI());
     const condition: FrigateCardCondition = { display_mode: 'grid' };
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
-    controller.setState({ displayMode: 'grid' });
-    expect(controller.evaluateCondition(condition)).toBeTruthy();
-    controller.setState({ displayMode: 'single' });
-    expect(controller.evaluateCondition(condition)).toBeFalsy();
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
+    manager.setState({ displayMode: 'grid' });
+    expect(manager.evaluateCondition(condition)).toBeTruthy();
+    manager.setState({ displayMode: 'single' });
+    expect(manager.evaluateCondition(condition)).toBeFalsy();
   });
 });
diff --git a/tests/utils/card-controller/config-manager.test.ts b/tests/utils/card-controller/config-manager.test.ts
new file mode 100644
index 00000000..3e515871
--- /dev/null
+++ b/tests/utils/card-controller/config-manager.test.ts
@@ -0,0 +1,304 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ZodError } from 'zod';
+import { frigateCardConfigSchema } from '../../../src/types';
+import { getOverriddenConfig } from '../../../src/utils/card-controller/conditions-manager';
+import { ConfigManager } from '../../../src/utils/card-controller/config-manager';
+import { InitializationAspect } from '../../../src/utils/card-controller/initialization-manager';
+import { createCardAPI, createConfig } from '../../test-utils';
+
+vi.mock('../../../src/utils/card-controller/conditions-manager.js');
+
+describe('ConfigManager', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('should handle error when', () => {
+    it('no input', () => {
+      const manager = new ConfigManager(createCardAPI());
+      expect(() => manager.setConfig()).toThrowError(/Invalid configuration/);
+    });
+
+    it('invalid configuration', () => {
+      const spy = vi.spyOn(frigateCardConfigSchema, 'safeParse').mockReturnValue({
+        success: false,
+        error: new ZodError([]),
+      });
+
+      const manager = new ConfigManager(createCardAPI());
+      expect(() => manager.setConfig({})).toThrowError(
+        'Invalid configuration: No location hint available (bad or missing type?)',
+      );
+
+      spy.mockRestore();
+    });
+
+    it('invalid configuration with hint', () => {
+      const manager = new ConfigManager(createCardAPI());
+      expect(() => manager.setConfig({})).toThrowError(
+        'Invalid configuration: [\n "cameras",\n "type"\n]',
+      );
+    });
+
+    it('upgradeable', () => {
+      const manager = new ConfigManager(createCardAPI());
+      expect(() =>
+        manager.setConfig({
+          cameras: [
+            {
+              frigate: {
+                label: 'foo',
+              },
+            },
+          ],
+        }),
+      ).toThrowError(
+        'An automated card configuration upgrade is ' +
+          'available, please visit the visual card editor. ' +
+          'Invalid configuration: [\n "type"\n]',
+      );
+    });
+  });
+
+  it('should have initial state', () => {
+    const manager = new ConfigManager(createCardAPI());
+
+    expect(manager.getConfig()).toBeNull();
+    expect(manager.getNonOverriddenConfig()).toBeNull();
+    expect(manager.getRawConfig()).toBeNull();
+  });
+
+  it('should successfully parse basic config', () => {
+    const api = createCardAPI();
+    const manager = new ConfigManager(api);
+    const config = {
+      type: 'custom:frigate-card',
+      cameras: [{ camera_entity: 'camera.office' }],
+    };
+
+    manager.setConfig(config);
+
+    expect(manager.hasConfig()).toBeTruthy()
+    expect(manager.getRawConfig()).toBe(config);
+
+    // Verify at least the camera is set.
+    expect(manager.getConfig()?.cameras[0].camera_entity).toBe('camera.office');
+
+    // Verify at least one default was set.
+    expect(manager.getConfig()?.menu.alignment).toBe('left');
+
+    // Verify appropriate API calls are made.
+    expect(api.getConditionsManager().setConditionsFromConfig).toBeCalled();
+    expect(api.getConditionsManager().setState).toBeCalledWith({
+      view: undefined,
+      displayMode: undefined,
+      camera: undefined,
+    });
+    expect(api.getMediaLoadedInfoManager().clear).toBeCalled();
+    expect(api.getViewManager().reset).toBeCalled();
+    expect(api.getMessageManager().reset).toBeCalled();
+    expect(api.getAutomationsManager().setAutomationsFromConfig).toBeCalled();
+    expect(api.getStyleManager().setPerformance).toBeCalled();
+    expect(api.getCardElementManager().update).toBeCalled();
+  });
+
+  it('should apply low performance defaults', () => {
+    const manager = new ConfigManager(createCardAPI());
+    const config = {
+      type: 'custom:frigate-card',
+      cameras: [{ camera_entity: 'camera.office' }],
+      performance: { profile: 'low' },
+    };
+
+    manager.setConfig(config);
+
+    // Verify at least one low performance default.
+    expect(manager.getConfig()?.live.draggable).toBeFalsy();
+  });
+
+  it('should skip identical configs', () => {
+    const api = createCardAPI();
+    const manager = new ConfigManager(api);
+    const config = {
+      type: 'custom:frigate-card',
+      cameras: [{ camera_entity: 'camera.office' }],
+    };
+
+    manager.setConfig(config);
+    expect(api.getViewManager().reset).toBeCalled();
+
+    vi.mocked(api.getViewManager().reset).mockClear();
+
+    manager.setConfig(config);
+    expect(api.getViewManager().reset).not.toBeCalled();
+  });
+
+  it('should get card wide config', () => {
+    const api = createCardAPI();
+    const manager = new ConfigManager(api);
+    const config = {
+      type: 'custom:frigate-card',
+      cameras: [{ camera_entity: 'camera.office' }],
+      debug: {
+        logging: true,
+      },
+      performance: {
+        profile: 'low',
+      },
+    };
+
+    manager.setConfig(config);
+
+    expect(manager.getCardWideConfig()).toEqual({
+      debug: {
+        logging: true,
+      },
+      performance: {
+        features: {
+          animated_progress_indicator: false,
+          media_chunk_size: 10,
+        },
+        profile: 'low',
+        style: {
+          border_radius: false,
+          box_shadow: false,
+        },
+      },
+    });
+  });
+
+  it('should ignore overrides without a config', () => {
+    const api = createCardAPI();
+    const manager = new ConfigManager(api);
+
+    manager.computeOverrideConfig();
+
+    expect(manager.getConfig()).toBeNull();
+    expect(api.getStyleManager().setMinMaxHeight).not.toBeCalled();
+  });
+
+  it('should ignore overrides with same config', () => {
+    const api = createCardAPI();
+    const manager = new ConfigManager(api);
+    const config = {
+      type: 'custom:frigate-card',
+      cameras: [{ camera_entity: 'camera.office' }],
+    };
+    vi.mocked(getOverriddenConfig).mockReturnValue(config);
+
+    manager.setConfig(config);
+    expect(api.getStyleManager().setMinMaxHeight).toBeCalled();
+
+    vi.mocked(api.getStyleManager().setMinMaxHeight).mockClear();
+    manager.computeOverrideConfig();
+
+    expect(api.getStyleManager().setMinMaxHeight).not.toBeCalled();
+  });
+
+  it('should override', () => {
+    const api = createCardAPI();
+    const manager = new ConfigManager(api);
+    const config_1 = {
+      type: 'custom:frigate-card',
+      cameras: [{ camera_entity: 'camera.office' }],
+    };
+    manager.setConfig(config_1);
+    vi.mocked(api.getStyleManager().setMinMaxHeight).mockClear();
+
+    const config_2 = {
+      type: 'custom:frigate-card',
+      cameras: [{ camera_entity: 'camera.kitchen' }],
+    };
+    vi.mocked(getOverriddenConfig).mockReturnValue(config_2);
+    manager.computeOverrideConfig();
+
+    expect(api.getStyleManager().setMinMaxHeight).toBeCalled();
+    expect(api.getCardElementManager().update).toBeCalled();
+    expect(manager.getConfig()).not.toEqual(manager.getNonOverriddenConfig());
+  });
+
+  describe('should uninitialize on override', () => {
+    it('cameras', () => {
+      const api = createCardAPI();
+      const manager = new ConfigManager(api);
+      const config_1 = {
+        type: 'custom:frigate-card',
+        cameras: [{ camera_entity: 'camera.office' }],
+      };
+      vi.mocked(getOverriddenConfig).mockReturnValue(createConfig(config_1));
+
+      manager.setConfig(config_1);
+      expect(api.getInitializationManager().uninitialize).not.toBeCalled();
+
+      const config_2 = {
+        type: 'custom:frigate-card',
+        cameras: [{ camera_entity: 'camera.kitchen' }],
+      };
+      vi.mocked(getOverriddenConfig).mockReturnValue(createConfig(config_2));
+      manager.computeOverrideConfig();
+
+      expect(api.getInitializationManager().uninitialize).toBeCalledWith(
+        InitializationAspect.CAMERAS,
+      );
+    });
+
+    it('cameras_global', () => {
+      const api = createCardAPI();
+      const manager = new ConfigManager(api);
+      const config_1 = {
+        type: 'custom:frigate-card',
+        cameras: [{ camera_entity: 'camera.office' }],
+      };
+      vi.mocked(getOverriddenConfig).mockReturnValue(createConfig(config_1));
+
+      manager.setConfig(config_1);
+      expect(api.getInitializationManager().uninitialize).not.toBeCalled();
+
+      const config_2 = {
+        ...config_1,
+        cameras_global: {
+          live_provider: 'jsmpeg'
+        }
+      };
+      vi.mocked(getOverriddenConfig).mockReturnValue(createConfig(config_2));
+      manager.computeOverrideConfig();
+
+      expect(api.getInitializationManager().uninitialize).toBeCalledWith(
+        InitializationAspect.CAMERAS,
+      );
+    });
+
+    it('live.microphone.always_connected', () => {
+      const api = createCardAPI();
+      const manager = new ConfigManager(api);
+      const config_1 = {
+        type: 'custom:frigate-card',
+        cameras: [{ camera_entity: 'camera.office' }],
+        live: {
+          microphone: {
+            always_connected: false
+          }
+        }
+      };
+      vi.mocked(getOverriddenConfig).mockReturnValue(createConfig(config_1));
+
+      manager.setConfig(config_1);
+      expect(api.getInitializationManager().uninitialize).not.toBeCalled();
+
+      const config_2 = {
+        ...config_1,
+        live: {
+          microphone: {
+            always_connected: true
+          }
+        }
+      };
+      vi.mocked(getOverriddenConfig).mockReturnValue(createConfig(config_2));
+      manager.computeOverrideConfig();
+
+      expect(api.getInitializationManager().uninitialize).toBeCalledWith(
+        InitializationAspect.MICROPHONE_CONNECT,
+      );
+    });
+  });
+});
diff --git a/tests/utils/card-controller/controller.test.ts b/tests/utils/card-controller/controller.test.ts
new file mode 100644
index 00000000..ca200db7
--- /dev/null
+++ b/tests/utils/card-controller/controller.test.ts
@@ -0,0 +1,276 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CameraManager } from '../../../src/camera-manager/manager';
+import { FrigateCardEditor } from '../../../src/editor';
+import { ActionsManager } from '../../../src/utils/card-controller/actions-manager';
+import { AutoUpdateManager } from '../../../src/utils/card-controller/auto-update-manager';
+import { AutomationsManager } from '../../../src/utils/card-controller/automations-manager';
+import { CameraURLManager } from '../../../src/utils/card-controller/camera-url-manager';
+import {
+  CardElementManager,
+  CardHTMLElement,
+} from '../../../src/utils/card-controller/card-element-manager';
+import { ConditionsManager } from '../../../src/utils/card-controller/conditions-manager';
+import { ConfigManager } from '../../../src/utils/card-controller/config-manager';
+import { CardController } from '../../../src/utils/card-controller/controller';
+import { DownloadManager } from '../../../src/utils/card-controller/download-manager';
+import { ExpandManager } from '../../../src/utils/card-controller/expand-manager';
+import { FullscreenManager } from '../../../src/utils/card-controller/fullscreen-manager';
+import { HASSManager } from '../../../src/utils/card-controller/hass-manager';
+import { InitializationManager } from '../../../src/utils/card-controller/initialization-manager';
+import { InteractionManager } from '../../../src/utils/card-controller/interaction-manager';
+import { MediaLoadedInfoManager } from '../../../src/utils/card-controller/media-info-manager';
+import { MediaPlayerManager } from '../../../src/utils/card-controller/media-player-manager';
+import { MessageManager } from '../../../src/utils/card-controller/message-manager';
+import { MicrophoneManager } from '../../../src/utils/card-controller/microphone-manager';
+import { QueryStringManager } from '../../../src/utils/card-controller/query-string-manager';
+import { StyleManager } from '../../../src/utils/card-controller/style-manager';
+import { TriggersManager } from '../../../src/utils/card-controller/triggers-manager';
+import { ViewManager } from '../../../src/utils/card-controller/view-manager';
+import { EntityRegistryManager } from '../../../src/utils/ha/entity-registry';
+import { ResolvedMediaCache } from '../../../src/utils/ha/resolved-media';
+
+vi.mock('../../../src/camera-manager/manager');
+vi.mock('../../../src/utils/card-controller/actions-manager');
+vi.mock('../../../src/utils/card-controller/auto-update-manager');
+vi.mock('../../../src/utils/card-controller/automations-manager');
+vi.mock('../../../src/utils/card-controller/camera-url-manager');
+vi.mock('../../../src/utils/card-controller/card-element-manager');
+vi.mock('../../../src/utils/card-controller/conditions-manager');
+vi.mock('../../../src/utils/card-controller/config-manager');
+vi.mock('../../../src/utils/card-controller/download-manager');
+vi.mock('../../../src/utils/card-controller/expand-manager');
+vi.mock('../../../src/utils/card-controller/fullscreen-manager');
+vi.mock('../../../src/utils/card-controller/hass-manager');
+vi.mock('../../../src/utils/card-controller/initialization-manager');
+vi.mock('../../../src/utils/card-controller/interaction-manager');
+vi.mock('../../../src/utils/card-controller/media-info-manager');
+vi.mock('../../../src/utils/card-controller/media-player-manager');
+vi.mock('../../../src/utils/card-controller/message-manager');
+vi.mock('../../../src/utils/card-controller/microphone-manager');
+vi.mock('../../../src/utils/card-controller/query-string-manager');
+vi.mock('../../../src/utils/card-controller/style-manager');
+vi.mock('../../../src/utils/card-controller/triggers-manager');
+vi.mock('../../../src/utils/card-controller/view-manager');
+vi.mock('../../../src/utils/ha/entity-registry');
+vi.mock('../../../src/utils/ha/resolved-media');
+
+const createCardElement = (): CardHTMLElement => {
+  const element = document.createElement('div') as unknown as CardHTMLElement;
+  element.addController = vi.fn();
+  return element;
+};
+
+const createController = (): CardController => {
+  return new CardController(createCardElement(), vi.fn(), vi.fn(), vi.fn());
+};
+
+// @vitest-environment jsdom
+describe('CardController', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should construct correctly', () => {
+    const element = createCardElement();
+    const scrollCallback = vi.fn();
+    const menuToggleCallback = vi.fn();
+    const conditionListener = vi.fn();
+
+    const manager = new CardController(
+      element,
+      scrollCallback,
+      menuToggleCallback,
+      conditionListener,
+    );
+
+    expect(ConditionsManager).toBeCalledWith(manager, conditionListener);
+    expect(CardElementManager).toBeCalledWith(
+      manager,
+      element,
+      scrollCallback,
+      menuToggleCallback,
+    );
+  });
+
+  describe('accessors', () => {
+    it('getActionsManager', () => {
+      expect(createController().getActionsManager()).toBe(
+        vi.mocked(ActionsManager).mock.instances[0],
+      );
+    });
+
+    it('getAutomationsManager', () => {
+      expect(createController().getAutomationsManager()).toBe(
+        vi.mocked(AutomationsManager).mock.instances[0],
+      );
+    });
+
+    it('getAutoUpdateManager', () => {
+      expect(createController().getAutoUpdateManager()).toBe(
+        vi.mocked(AutoUpdateManager).mock.instances[0],
+      );
+    });
+
+    it('getCameraManager', () => {
+      expect(createController().getCameraManager()).toBe(
+        vi.mocked(CameraManager).mock.instances[0],
+      );
+    });
+
+    it('getCameraURLManager', () => {
+      expect(createController().getCameraURLManager()).toBe(
+        vi.mocked(CameraURLManager).mock.instances[0],
+      );
+    });
+
+    it('getCardElementManager', () => {
+      expect(createController().getCardElementManager()).toBe(
+        vi.mocked(CardElementManager).mock.instances[0],
+      );
+    });
+
+    it('getConditionsManager', () => {
+      expect(createController().getConditionsManager()).toBe(
+        vi.mocked(ConditionsManager).mock.instances[0],
+      );
+    });
+
+    it('getConfigElement', async () => {
+      expect((await CardController.getConfigElement()) instanceof FrigateCardEditor);
+    });
+
+    it('getConfigManager', () => {
+      expect(createController().getConfigManager()).toBe(
+        vi.mocked(ConfigManager).mock.instances[0],
+      );
+    });
+
+    it('getDownloadManager', () => {
+      expect(createController().getDownloadManager()).toBe(
+        vi.mocked(DownloadManager).mock.instances[0],
+      );
+    });
+
+    it('getEntityRegistryManager', () => {
+      expect(createController().getEntityRegistryManager()).toBe(
+        vi.mocked(EntityRegistryManager).mock.instances[0],
+      );
+    });
+
+    it('getExpandManager', () => {
+      expect(createController().getExpandManager()).toBe(
+        vi.mocked(ExpandManager).mock.instances[0],
+      );
+    });
+
+    it('getFullscreenManager', () => {
+      expect(createController().getFullscreenManager()).toBe(
+        vi.mocked(FullscreenManager).mock.instances[0],
+      );
+    });
+
+    it('getHASSManager', () => {
+      expect(createController().getHASSManager()).toBe(
+        vi.mocked(HASSManager).mock.instances[0],
+      );
+    });
+
+    it('getInitializationManager', () => {
+      expect(createController().getInitializationManager()).toBe(
+        vi.mocked(InitializationManager).mock.instances[0],
+      );
+    });
+
+    it('getInteractionManager', () => {
+      expect(createController().getInteractionManager()).toBe(
+        vi.mocked(InteractionManager).mock.instances[0],
+      );
+    });
+
+    it('getMediaLoadedInfoManager', () => {
+      expect(createController().getMediaLoadedInfoManager()).toBe(
+        vi.mocked(MediaLoadedInfoManager).mock.instances[0],
+      );
+    });
+
+    it('getMediaPlayerManager', () => {
+      expect(createController().getMediaPlayerManager()).toBe(
+        vi.mocked(MediaPlayerManager).mock.instances[0],
+      );
+    });
+
+    it('getMessageManager', () => {
+      expect(createController().getMessageManager()).toBe(
+        vi.mocked(MessageManager).mock.instances[0],
+      );
+    });
+
+    it('getMicrophoneManager', () => {
+      expect(createController().getMicrophoneManager()).toBe(
+        vi.mocked(MicrophoneManager).mock.instances[0],
+      );
+    });
+
+    it('getResolvedMediaCache', () => {
+      expect(createController().getResolvedMediaCache()).toBe(
+        vi.mocked(ResolvedMediaCache).mock.instances[0],
+      );
+    });
+
+    describe('getStubConfig', () => {
+      it('with camera entities', () => {
+        expect(
+          CardController.getStubConfig(['camera.office', 'binary_sensor.motion']),
+        ).toEqual({
+          cameras: [{ camera_entity: 'camera.office' }],
+        });
+      });
+
+      it('without camera entities', () => {
+        expect(CardController.getStubConfig(['binary_sensor.motion'])).toEqual({
+          cameras: [{ camera_entity: 'camera.demo' }],
+        });
+      });
+    });
+
+    it('getQueryStringManager', () => {
+      expect(createController().getQueryStringManager()).toBe(
+        vi.mocked(QueryStringManager).mock.instances[0],
+      );
+    });
+
+    it('getStyleManager', () => {
+      expect(createController().getStyleManager()).toBe(
+        vi.mocked(StyleManager).mock.instances[0],
+      );
+    });
+
+    it('getTriggersManager', () => {
+      expect(createController().getTriggersManager()).toBe(
+        vi.mocked(TriggersManager).mock.instances[0],
+      );
+    });
+
+    it('getViewManager', () => {
+      expect(createController().getViewManager()).toBe(
+        vi.mocked(ViewManager).mock.instances[0],
+      );
+    });
+  });
+
+  describe('handlers', () => {
+    it('hostConnected', () => {
+      createController().hostConnected();
+      expect(
+        vi.mocked(CardElementManager).mock.instances[0].elementConnected,
+      ).toBeCalled();
+    });
+
+    it('hostDisconnected', () => {
+      createController().hostDisconnected();
+      expect(
+        vi.mocked(CardElementManager).mock.instances[0].elementDisconnected,
+      ).toBeCalled();
+    });
+  });
+});
diff --git a/tests/utils/card-controller/download-manager.test.ts b/tests/utils/card-controller/download-manager.test.ts
new file mode 100644
index 00000000..88ca0237
--- /dev/null
+++ b/tests/utils/card-controller/download-manager.test.ts
@@ -0,0 +1,94 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mock } from 'vitest-mock-extended';
+import { FrigateCardMediaPlayer } from '../../../src/types';
+import { DownloadManager } from '../../../src/utils/card-controller/download-manager';
+import { downloadMedia, downloadURL } from '../../../src/utils/download.js';
+import {
+  createCardAPI,
+  createHASS,
+  createMediaLoadedInfo,
+  createViewWithMedia,
+} from '../../test-utils';
+
+vi.mock('../../../src/utils/download.js');
+
+describe('DownloadManager.downloadViewerMedia', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('should download', async () => {
+    const api = createCardAPI();
+    vi.mocked(api.getViewManager().getView).mockReturnValue(createViewWithMedia());
+    vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+    const manager = new DownloadManager(api);
+
+    expect(await manager.downloadViewerMedia()).toBeTruthy();
+    expect(downloadMedia).toBeCalledWith(
+      api.getHASSManager().getHASS(),
+      api.getCameraManager(),
+      api.getViewManager().getView()?.queryResults?.getResult(0),
+    );
+  });
+
+  it('should not download due to exception thrown', async () => {
+    const api = createCardAPI();
+    vi.mocked(api.getViewManager().getView).mockReturnValue(createViewWithMedia());
+    vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+    const manager = new DownloadManager(api);
+
+    const error = new Error();
+    vi.mocked(downloadMedia).mockRejectedValue(error);
+
+    expect(await manager.downloadViewerMedia()).toBeFalsy();
+    expect(api.getMessageManager().setErrorIfHigherPriority).toBeCalledWith(error);
+  });
+
+  it('should not download without hass', async () => {
+    const api = createCardAPI();
+    vi.mocked(api.getViewManager().getView).mockReturnValue(createViewWithMedia());
+    vi.mocked(api.getHASSManager().getHASS).mockReturnValue(null);
+    const manager = new DownloadManager(api);
+
+    expect(await manager.downloadViewerMedia()).toBeFalsy();
+    expect(downloadMedia).not.toBeCalled();
+  });
+});
+
+describe('DownloadManager.downloadScreenshot', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('with url', async () => {
+    const api = createCardAPI();
+    const player = mock<FrigateCardMediaPlayer>();
+    player.getScreenshotURL.mockResolvedValue('http://screenshot');
+
+    vi.mocked(api.getMediaLoadedInfoManager().get).mockReturnValue(
+      createMediaLoadedInfo({
+        player: player,
+      }),
+    );
+    const manager = new DownloadManager(api);
+    await manager.downloadScreenshot();
+
+    expect(downloadURL).toBeCalledWith('http://screenshot', 'screenshot.jpg');
+  });
+
+  it('without url', async () => {
+    const api = createCardAPI();
+    const player = mock<FrigateCardMediaPlayer>();
+    player.getScreenshotURL.mockResolvedValue(null);
+
+    vi.mocked(api.getMediaLoadedInfoManager().get).mockReturnValue(
+      createMediaLoadedInfo({
+        player: player,
+      }),
+    );
+    const manager = new DownloadManager(api);
+    await manager.downloadScreenshot();
+
+    expect(downloadURL).not.toBeCalled();
+  });
+});
diff --git a/tests/utils/card-controller/expand-manager.test.ts b/tests/utils/card-controller/expand-manager.test.ts
new file mode 100644
index 00000000..4679ab9d
--- /dev/null
+++ b/tests/utils/card-controller/expand-manager.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it, vi } from 'vitest';
+import { ExpandManager } from '../../../src/utils/card-controller/expand-manager';
+import { createCardAPI } from '../../test-utils';
+
+describe('ExpandManager', () => {
+  it('should construct', () => {
+    const api = createCardAPI();
+    const manager = new ExpandManager(api);
+    expect(manager.isExpanded()).toBeFalsy();
+  });
+
+  it('should set expanded', () => {
+    const api = createCardAPI();
+    vi.mocked(api.getFullscreenManager().isInFullscreen).mockReturnValue(true);
+    const manager = new ExpandManager(api);
+
+    manager.setExpanded(true);
+
+    expect(manager.isExpanded()).toBeTruthy();
+    expect(api.getFullscreenManager().stopFullscreen).toBeCalled();
+    expect(api.getConditionsManager().setState).toBeCalledWith({ expand: true });
+    expect(api.getCardElementManager().update).toBeCalled();
+  });
+
+  it('should not exit fullscreen when not in fullscreen', () => {
+    const api = createCardAPI();
+    vi.mocked(api.getFullscreenManager().isInFullscreen).mockReturnValue(false);
+    const manager = new ExpandManager(api);
+
+    manager.setExpanded(true);
+
+    expect(api.getFullscreenManager().stopFullscreen).not.toBeCalled();
+  });
+
+  it('should toggle expanded', () => {
+    const api = createCardAPI();
+    vi.mocked(api.getFullscreenManager().isInFullscreen).mockReturnValue(false);
+    const manager = new ExpandManager(api);
+
+    manager.toggleExpanded();
+    expect(manager.isExpanded()).toBeTruthy();
+
+    manager.toggleExpanded();
+    expect(manager.isExpanded()).toBeFalsy();
+  });
+});
diff --git a/tests/utils/card-controller/fullscreen-manager.test.ts b/tests/utils/card-controller/fullscreen-manager.test.ts
new file mode 100644
index 00000000..93fe4c00
--- /dev/null
+++ b/tests/utils/card-controller/fullscreen-manager.test.ts
@@ -0,0 +1,129 @@
+import screenfull from 'screenfull';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { FullscreenManager } from '../../../src/utils/card-controller/fullscreen-manager';
+import { createCardAPI } from '../../test-utils';
+
+vi.mock('screenfull', () => ({
+  default: {
+    exit: vi.fn(),
+    toggle: vi.fn(),
+    off: vi.fn(),
+    on: vi.fn(),
+  },
+}));
+
+const setScreenfulEnabled = (enabled: boolean): void => {
+  Object.defineProperty(screenfull, 'isEnabled', { value: enabled, writable: true });
+};
+
+const setScreenfulFullscreen = (fullscreen: boolean): void => {
+  Object.defineProperty(screenfull, 'isFullscreen', {
+    value: fullscreen,
+    writable: true,
+  });
+};
+
+// @vitest-environment jsdom
+describe('FullscreenManager', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should correctly determine whether in fullscreen', () => {
+    const manager = new FullscreenManager(createCardAPI());
+
+    setScreenfulEnabled(true);
+    setScreenfulFullscreen(true);
+    expect(manager.isInFullscreen()).toBeTruthy();
+
+    setScreenfulFullscreen(false);
+    expect(manager.isInFullscreen()).toBeFalsy();
+  });
+
+  it('should toggle fullscreen', () => {
+    const toggle = vi.mocked(screenfull.toggle);
+    const element = document.createElement('div')
+    const api = createCardAPI();
+    vi.mocked(api.getCardElementManager().getElement).mockReturnValue(
+      element,
+    );
+    const manager = new FullscreenManager(api);
+
+    manager.toggleFullscreen();
+
+    expect(toggle).toBeCalledWith(element);
+  });
+
+  it('should stop fullscreen', () => {
+    const manager = new FullscreenManager(createCardAPI());
+    const exit = vi.mocked(screenfull.exit);
+
+    manager.stopFullscreen();
+
+    expect(exit).toBeCalled();
+  });
+
+  it('should disconnect', () => {
+    const manager = new FullscreenManager(createCardAPI());
+    const off = vi.mocked(screenfull.off);
+
+    setScreenfulEnabled(true);
+
+    manager.disconnect();
+
+    expect(off).toBeCalledWith('change', expect.anything());
+  });
+
+  it('should not disconnect when screenfull disabled', () => {
+    const manager = new FullscreenManager(createCardAPI());
+    const off = vi.mocked(screenfull.off);
+
+    setScreenfulEnabled(false);
+
+    manager.disconnect();
+
+    expect(off).not.toBeCalled();
+  });
+
+  it('should connect', () => {
+    const manager = new FullscreenManager(createCardAPI());
+    const on = vi.mocked(screenfull.on);
+
+    setScreenfulEnabled(true);
+
+    manager.connect();
+
+    expect(on).toBeCalledWith('change', expect.anything());
+  });
+
+  it('should not connect when screenfull disabled', () => {
+    const manager = new FullscreenManager(createCardAPI());
+    const on = vi.mocked(screenfull.on);
+
+    setScreenfulEnabled(false);
+
+    manager.connect();
+
+    expect(on).not.toBeCalled();
+  });
+
+  it('should make correct api calls on fullscreen change', () => {
+    const api = createCardAPI();
+    const manager = new FullscreenManager(api);
+    const on = vi.mocked(screenfull.on);
+
+    setScreenfulEnabled(true);
+    setScreenfulFullscreen(true);
+
+    manager.connect();
+
+    expect(on).toBeCalled();
+    on.mock.calls[0][1](new Event('fullscreen'));
+
+    expect(api.getExpandManager().setExpanded).toBeCalledWith(false);
+    expect(api.getConditionsManager().setState).toBeCalledWith({
+      fullscreen: true,
+    });
+    expect(api.getCardElementManager().update).toBeCalled();
+  });
+});
diff --git a/tests/utils/card-controller/hass-manager.test.ts b/tests/utils/card-controller/hass-manager.test.ts
new file mode 100644
index 00000000..01fc6992
--- /dev/null
+++ b/tests/utils/card-controller/hass-manager.test.ts
@@ -0,0 +1,279 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { HASSManager } from '../../../src/utils/card-controller/hass-manager';
+import { CardHASSAPI } from '../../../src/utils/card-controller/types';
+import {
+  createCameraConfig,
+  createCameraManager,
+  createCardAPI,
+  createConfig,
+  createHASS,
+  createStateEntity,
+  createView,
+} from '../../test-utils';
+
+vi.mock('../../../src/camera-manager/manager.js');
+
+const createAPIWithoutMediaPlayers = (): CardHASSAPI => {
+  const api = createCardAPI();
+  vi.mocked(api.getMediaPlayerManager().getMediaPlayers).mockReturnValue([]);
+  return api;
+};
+
+describe('HASSManager', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('should have null hass on construction', () => {
+    const manager = new HASSManager(createCardAPI());
+    expect(manager.getHASS()).toBeNull();
+  });
+
+  it('should set light or dark mode upon setting hass', () => {
+    const api = createAPIWithoutMediaPlayers();
+    const manager = new HASSManager(api);
+
+    manager.setHASS(createHASS());
+
+    expect(api.getStyleManager().setLightOrDarkMode).toBeCalled();
+  });
+
+  describe('should set condition manager state', () => {
+    it('positively', () => {
+      const api = createAPIWithoutMediaPlayers();
+      const manager = new HASSManager(api);
+      vi.mocked(api.getConditionsManager().hasHAStateConditions).mockReturnValue(true);
+
+      const states = { 'switch.foo': createStateEntity() };
+      const hass = createHASS(states);
+
+      manager.setHASS(hass);
+
+      expect(api.getConditionsManager().setState).toBeCalledWith(
+        expect.objectContaining({
+          state: states,
+        }),
+      );
+    });
+
+    it('negatively', () => {
+      const api = createAPIWithoutMediaPlayers();
+      const manager = new HASSManager(api);
+      vi.mocked(api.getConditionsManager().hasHAStateConditions).mockReturnValue(false);
+
+      manager.setHASS(createHASS());
+
+      expect(api.getConditionsManager().setState).not.toBeCalled();
+    });
+  });
+
+  it('should update triggered cameras', () => {
+    const api = createAPIWithoutMediaPlayers();
+    const manager = new HASSManager(api);
+
+    const originalHASS = createHASS();
+    manager.setHASS(originalHASS);
+    expect(api.getTriggersManager().updateTriggeredCameras).toBeCalledWith(null);
+
+    manager.setHASS(createHASS());
+    expect(api.getTriggersManager().updateTriggeredCameras).toBeCalledWith(originalHASS);
+  });
+
+  describe('should handle connection state change when', () => {
+    it('initially disconnected', () => {
+      const api = createAPIWithoutMediaPlayers();
+      const manager = new HASSManager(api);
+
+      const disconnectedHASS = createHASS();
+      disconnectedHASS.connected = false;
+
+      manager.setHASS(disconnectedHASS);
+
+      expect(api.getMessageManager().setMessageIfHigherPriority).toBeCalledWith(
+        expect.objectContaining({
+          message: 'Reconnecting',
+          icon: 'mdi:lan-disconnect',
+          type: 'connection',
+          dotdotdot: true,
+        }),
+      );
+    });
+
+    it('disconnected', () => {
+      const api = createAPIWithoutMediaPlayers();
+      const manager = new HASSManager(api);
+
+      manager.setHASS(createHASS());
+
+      const disconnectedHASS = createHASS();
+      disconnectedHASS.connected = false;
+      manager.setHASS(disconnectedHASS);
+
+      expect(api.getMessageManager().setMessageIfHigherPriority).toBeCalledWith(
+        expect.objectContaining({
+          message: 'Reconnecting',
+          icon: 'mdi:lan-disconnect',
+          type: 'connection',
+          dotdotdot: true,
+        }),
+      );
+    });
+
+    it('reconnected', () => {
+      const api = createAPIWithoutMediaPlayers();
+      const manager = new HASSManager(api);
+
+      const disconnectedHASS = createHASS();
+      disconnectedHASS.connected = false;
+      manager.setHASS(disconnectedHASS);
+
+      const reconnectedHASS = createHASS();
+      manager.setHASS(reconnectedHASS);
+
+      expect(api.getViewManager().setViewDefault).toBeCalled();
+    });
+  });
+
+  describe('should set default view when', () => {
+    it('selected camera trigger entity changes', () => {
+      const cameraManager = createCameraManager({
+        configs: new Map([
+          [
+            'camera.foo',
+            createCameraConfig({
+              triggers: {
+                entities: ['binary_sensor.motion'],
+              },
+            }),
+          ],
+        ]),
+      });
+      const api = createAPIWithoutMediaPlayers();
+      vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+      vi.mocked(api.getViewManager().getView).mockReturnValue(
+        createView({
+          camera: 'camera.foo',
+        }),
+      );
+
+      const manager = new HASSManager(api);
+      const hass = createHASS({
+        'binary_sensor.motion': createStateEntity(),
+      });
+
+      manager.setHASS(hass);
+
+      expect(api.getViewManager().setViewDefault).toBeCalled();
+    });
+
+    it('selected camera is unknown', () => {
+      const cameraManager = createCameraManager({
+        configs: new Map([
+          [
+            'camera.foo',
+            createCameraConfig({
+              triggers: {
+                entities: ['binary_sensor.motion'],
+              },
+            }),
+          ],
+        ]),
+      });
+      const api = createAPIWithoutMediaPlayers();
+      vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+      vi.mocked(api.getViewManager().getView).mockReturnValue(
+        createView({
+          camera: 'camera.UNKNOWN',
+        }),
+      );
+
+      const manager = new HASSManager(api);
+      const hass = createHASS({
+        'binary_sensor.motion': createStateEntity(),
+      });
+
+      manager.setHASS(hass);
+
+      expect(api.getViewManager().setViewDefault).not.toBeCalled();
+    });
+
+    it('view.update_entities changes', () => {
+      const api = createAPIWithoutMediaPlayers();
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig({
+          view: {
+            update_entities: ['sensor.force_default_view'],
+          },
+        }),
+      );
+
+      const manager = new HASSManager(api);
+      const hass = createHASS({
+        'sensor.force_default_view': createStateEntity(),
+      });
+
+      manager.setHASS(hass);
+
+      expect(api.getViewManager().setViewDefault).toBeCalled();
+    });
+  });
+
+  describe('should update card when', () => {
+    it('render entity changes', () => {
+      const api = createAPIWithoutMediaPlayers();
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig({
+          view: {
+            render_entities: ['sensor.force_update'],
+          },
+        }),
+      );
+
+      const manager = new HASSManager(api);
+      const hass = createHASS({
+        'sensor.force_update': createStateEntity(),
+      });
+
+      manager.setHASS(hass);
+
+      expect(api.getCardElementManager().update).toBeCalled();
+    });
+
+    it('media player entity changes', () => {
+      const api = createCardAPI();
+      vi.mocked(api.getMediaPlayerManager().getMediaPlayers).mockReturnValue([
+        'media_player.foo',
+      ]);
+
+      const manager = new HASSManager(api);
+      const hass = createHASS({
+        'media_player.foo': createStateEntity(),
+      });
+
+      manager.setHASS(hass);
+
+      expect(api.getCardElementManager().update).toBeCalled();
+    });
+  });
+
+  it('set view default is not called when there is card interaction', () => {
+    const api = createAPIWithoutMediaPlayers();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+      createConfig({
+        view: {
+          update_entities: ['sensor.force_default_view'],
+        },
+      }),
+    );
+    vi.mocked(api.getInteractionManager().hasInteraction).mockReturnValue(true);
+
+    const manager = new HASSManager(api);
+    const hass = createHASS({
+      'sensor.force_default_view': createStateEntity(),
+    });
+
+    manager.setHASS(hass);
+
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+  });
+});
diff --git a/tests/utils/card-controller/initialization-manager.test.ts b/tests/utils/card-controller/initialization-manager.test.ts
new file mode 100644
index 00000000..721f93bc
--- /dev/null
+++ b/tests/utils/card-controller/initialization-manager.test.ts
@@ -0,0 +1,203 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mock } from 'vitest-mock-extended';
+import { loadLanguages } from '../../../src/localize/localize';
+import {
+  InitializationAspect,
+  InitializationManager,
+} from '../../../src/utils/card-controller/initialization-manager';
+import { sideLoadHomeAssistantElements } from '../../../src/utils/ha';
+import { Initializer } from '../../../src/utils/initializer/initializer';
+import { createCardAPI, createConfig, createHASS } from '../../test-utils';
+
+vi.mock('../../../src/localize/localize.js');
+vi.mock('../../../src/utils/ha/index.js');
+
+// @vitest-environment jsdom
+describe('InitializationManager', () => {
+  beforeEach(async () => {
+    vi.resetAllMocks();
+  });
+
+  it('should not be initialized', () => {
+    const manager = new InitializationManager(createCardAPI());
+    expect(manager.isInitializedMandatory()).toBeFalsy();
+  });
+
+  describe('should initialize mandatory', () => {
+    it('without hass', async () => {
+      const manager = new InitializationManager(createCardAPI());
+      expect(await manager.initializeMandatory()).toBeFalsy();
+    });
+
+    it('without config', async () => {
+      const api = createCardAPI();
+      const manager = new InitializationManager(api);
+      vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+      expect(await manager.initializeMandatory()).toBeFalsy();
+    });
+
+    it('successfully', async () => {
+      const api = createCardAPI();
+      vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+      vi.mocked(api.getConfigManager().hasConfig).mockReturnValue(true);
+      vi.mocked(api.getMessageManager().hasMessage).mockReturnValue(false);
+      vi.mocked(api.getQueryStringManager().hasViewRelatedActions).mockReturnValue(false);
+      const manager = new InitializationManager(api);
+
+      expect(await manager.initializeMandatory()).toBeTruthy();
+
+      expect(loadLanguages).toBeCalled();
+      expect(sideLoadHomeAssistantElements).toBeCalled();
+      expect(api.getCameraManager().initializeCamerasFromConfig).toBeCalled();
+      expect(api.getViewManager().setViewDefault).toBeCalled();
+      expect(api.getCardElementManager().update).toBeCalled();
+    });
+
+    it('successfully with querystring view', async () => {
+      const api = createCardAPI();
+      vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+      vi.mocked(api.getConfigManager().hasConfig).mockReturnValue(true);
+      vi.mocked(api.getMessageManager().hasMessage).mockReturnValue(false);
+      vi.mocked(api.getQueryStringManager().hasViewRelatedActions).mockReturnValue(true);
+      const manager = new InitializationManager(api);
+
+      expect(await manager.initializeMandatory()).toBeTruthy();
+
+      expect(api.getQueryStringManager().executeViewRelated).toBeCalled();
+    });
+
+    it('with message set during initialization', async () => {
+      const api = createCardAPI();
+      vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+      vi.mocked(api.getConfigManager().hasConfig).mockReturnValue(true);
+      vi.mocked(api.getMessageManager().hasMessage).mockReturnValue(true);
+      vi.mocked(api.getQueryStringManager().hasViewRelatedActions).mockReturnValue(false);
+      const manager = new InitializationManager(api);
+
+      expect(await manager.initializeMandatory()).toBeTruthy();
+
+      expect(api.getViewManager().setViewByParameters).not.toBeCalled();
+      expect(api.getViewManager().setViewDefault).not.toBeCalled();
+    });
+
+    it('with languages and side load elements in progress', async () => {
+      const api = createCardAPI();
+      vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+      const initializer = mock<Initializer>();
+      const manager = new InitializationManager(api, initializer);
+      initializer.initializeMultipleIfNecessary.mockResolvedValue(false);
+
+      expect(await manager.initializeMandatory()).toBeFalsy();
+    });
+
+    it('with cameras in progress', async () => {
+      const api = createCardAPI();
+      vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+      vi.mocked(api.getConfigManager().hasConfig).mockReturnValue(true);
+
+      const initializer = mock<Initializer>();
+      const manager = new InitializationManager(api, initializer);
+      initializer.initializeMultipleIfNecessary.mockResolvedValue(true);
+      initializer.initializeIfNecessary.mockResolvedValue(false);
+
+      expect(await manager.initializeMandatory()).toBeFalsy();
+    });
+  });
+
+  describe('should initialize background', () => {
+    it('without hass and config', async () => {
+      const manager = new InitializationManager(createCardAPI());
+      expect(await manager.initializeBackgroundIfNecessary()).toBeFalsy();
+    });
+
+    it('successfully with minimal initializers', async () => {
+      const api = createCardAPI();
+      const manager = new InitializationManager(api);
+      vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig({
+          menu: {
+            buttons: {
+              media_player: {
+                enabled: false,
+              },
+            },
+          },
+          live: {
+            microphone: {
+              always_connected: false,
+            },
+          },
+        }),
+      );
+
+      expect(await manager.initializeBackgroundIfNecessary()).toBeTruthy();
+      expect(api.getMediaPlayerManager().initialize).not.toBeCalled();
+      expect(api.getMicrophoneManager().connect).not.toBeCalled();
+      expect(api.getCardElementManager().update).not.toBeCalled();
+    });
+
+    it('successfully with all inititalizers', async () => {
+      const api = createCardAPI();
+      const manager = new InitializationManager(api);
+      vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig({
+          menu: {
+            buttons: {
+              media_player: {
+                enabled: true,
+              },
+            },
+          },
+          live: {
+            microphone: {
+              always_connected: true,
+            },
+          },
+        }),
+      );
+
+      expect(await manager.initializeBackgroundIfNecessary()).toBeTruthy();
+      expect(api.getMediaPlayerManager().initialize).toBeCalled();
+      expect(api.getMicrophoneManager().connect).toBeCalled();
+      expect(api.getCardElementManager().update).toBeCalled();
+    });
+
+    it('with media player and microphone connect in progress', async () => {
+      const api = createCardAPI();
+      vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig({
+          menu: {
+            buttons: {
+              media_player: {
+                enabled: true,
+              },
+            },
+          },
+          live: {
+            microphone: {
+              always_connected: true,
+            },
+          },
+        }),
+      );
+      const initializer = mock<Initializer>();
+
+      const manager = new InitializationManager(api, initializer);
+      initializer.initializeMultipleIfNecessary.mockResolvedValue(false);
+
+      expect(await manager.initializeBackgroundIfNecessary()).toBeFalsy();
+    });
+  });
+
+  it('should uninitialize', () => {
+    const initializer = mock<Initializer>();
+    const manager = new InitializationManager(createCardAPI(), initializer);
+
+    manager.uninitialize(InitializationAspect.CAMERAS);
+
+    expect(initializer.uninitialize).toBeCalledWith(InitializationAspect.CAMERAS);
+  });
+});
diff --git a/tests/utils/card-controller/interaction-manager.test.ts b/tests/utils/card-controller/interaction-manager.test.ts
new file mode 100644
index 00000000..83080cee
--- /dev/null
+++ b/tests/utils/card-controller/interaction-manager.test.ts
@@ -0,0 +1,85 @@
+import add from 'date-fns/add';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { InteractionManager } from '../../../src/utils/card-controller/interaction-manager';
+import { createCardAPI, createConfig } from '../../test-utils';
+
+vi.mock('lodash-es/throttle', () => ({
+  default: vi.fn((fn) => fn),
+}));
+
+// @vitest-environment jsdom
+describe('InteractionManager', () => {
+  const start = new Date('2023-09-24T20:20:00');
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should take action when interaction is reported', () => {
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+      createConfig({
+        view: {
+          timeout_seconds: 10,
+        },
+      }),
+    );
+    const manager = new InteractionManager(api);
+    vi.useFakeTimers();
+    vi.setSystemTime(start);
+
+    manager.reportInteraction();
+
+    expect(api.getTriggersManager().untrigger).toBeCalled();
+    expect(manager.hasInteraction()).toBeTruthy();
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+
+    vi.mocked(api.getTriggersManager().isTriggered).mockReturnValue(false);
+    vi.setSystemTime(add(start, { seconds: 10 }));
+    vi.runOnlyPendingTimers();
+
+    expect(api.getViewManager().setViewDefault).toBeCalled();
+  });
+
+  it('should not take action when triggered', () => {
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+      createConfig({
+        view: {
+          timeout_seconds: 10,
+        },
+      }),
+    );
+    const manager = new InteractionManager(api);
+    vi.useFakeTimers();
+    vi.setSystemTime(start);
+
+    manager.reportInteraction();
+
+    vi.mocked(api.getTriggersManager().isTriggered).mockReturnValue(true);
+    vi.setSystemTime(add(start, { seconds: 10 }));
+    vi.runOnlyPendingTimers();
+
+    // First call is blocked by triggers (above), so interaction will report
+    // true but the default view will not have been set.
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+  });
+
+  it('should not take action when not configured', () => {
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+      createConfig({
+        view: {
+          timeout_seconds: 0,
+        },
+      }),
+    );
+    const manager = new InteractionManager(api);
+
+    manager.reportInteraction();
+
+    // First call is blocked by triggers (above), so interaction will report
+    // true but the default view will not have been set.
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+  });
+});
diff --git a/tests/utils/card-controller/media-info-manager.test.ts b/tests/utils/card-controller/media-info-manager.test.ts
new file mode 100644
index 00000000..8fd04e0c
--- /dev/null
+++ b/tests/utils/card-controller/media-info-manager.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import { MediaLoadedInfoManager } from '../../../src/utils/card-controller/media-info-manager';
+import { createCardAPI, createMediaLoadedInfo } from '../../test-utils.js';
+
+describe('MediaLoadedInfoManager', () => {
+  it('should set', () => {
+    const api = createCardAPI();
+    const manager = new MediaLoadedInfoManager(api);
+    const mediaInfo = createMediaLoadedInfo();
+
+    manager.set(mediaInfo);
+
+    expect(manager.has()).toBeTruthy();
+    expect(manager.get()).toBe(mediaInfo);
+    expect(api.getConditionsManager().setState).toBeCalledWith(
+      expect.objectContaining({ media_loaded: true }),
+    );
+    expect(api.getStyleManager().setExpandedMode).toBeCalled();
+    expect(api.getCardElementManager().update).toBeCalled();
+  });
+
+  it('should not set invalid media info', () => {
+    const api = createCardAPI();
+    const manager = new MediaLoadedInfoManager(api);
+    const mediaInfo = createMediaLoadedInfo({ width: 0, height: 0 });
+
+    manager.set(mediaInfo);
+
+    expect(manager.has()).toBeFalsy();
+    expect(manager.get()).toBeNull();
+    expect(api.getConditionsManager().setState).not.toBeCalled();
+  });
+
+  it('should get last known', () => {
+    const api = createCardAPI();
+    const manager = new MediaLoadedInfoManager(api);
+    const mediaInfo = createMediaLoadedInfo();
+
+    manager.set(mediaInfo);
+
+    expect(manager.has()).toBeTruthy();
+
+    manager.clear();
+
+    expect(manager.has()).toBeFalsy();
+    expect(manager.getLastKnown()).toBe(mediaInfo);
+    expect(api.getConditionsManager().setState).toBeCalledWith(
+      expect.objectContaining({ media_loaded: false }),
+    );
+  });
+});
diff --git a/tests/utils/card-controller/media-player-manager.test.ts b/tests/utils/card-controller/media-player-manager.test.ts
new file mode 100644
index 00000000..53a2df3d
--- /dev/null
+++ b/tests/utils/card-controller/media-player-manager.test.ts
@@ -0,0 +1,278 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  TestViewMedia,
+  createCameraConfig,
+  createCameraManager,
+  createCardAPI,
+  createHASS,
+  createRegistryEntity,
+  createStateEntity,
+} from '../../test-utils';
+import { MediaPlayerManager } from '../../../src/utils/card-controller/media-player-manager';
+import { ExtendedHomeAssistant } from '../../../src/types';
+import { MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA } from '../../../src/const';
+import { EntityRegistryManager } from '../../../src/utils/ha/entity-registry';
+import { mock } from 'vitest-mock-extended';
+
+vi.mock('../../../src/camera-manager/manager.js');
+
+const createHASSWithMediaPlayers = (): ExtendedHomeAssistant => {
+  const attributesSupported = {
+    supported_features: MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA,
+  };
+  const attributesUnsupported = {
+    supported_features: 0,
+  };
+
+  return createHASS({
+    'media_player.ok1': createStateEntity({
+      entity_id: 'media_player.ok1',
+      state: 'on',
+      attributes: attributesSupported,
+    }),
+    'media_player.ok2': createStateEntity({
+      entity_id: 'media_player.ok2',
+      state: 'on',
+      attributes: attributesSupported,
+    }),
+    'media_player.ok3': createStateEntity({
+      entity_id: 'media_player.ok3',
+      state: 'on',
+      attributes: attributesSupported,
+    }),
+    'media_player.unavailable': createStateEntity({
+      entity_id: 'media_player.sitting_room',
+      state: 'unavailable',
+      attributes: attributesSupported,
+    }),
+    'media_player.unsupported': createStateEntity({
+      entity_id: 'media_player.sitting_room',
+      state: 'on',
+      attributes: attributesUnsupported,
+    }),
+    'switch.unrelated': createStateEntity({
+      entity_id: 'switch.unrelated',
+      state: 'on',
+    }),
+  });
+};
+
+describe('MediaPlayerManager', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('should initialize', () => {
+    it('correctly', async () => {
+      const entityRegistryManager = mock<EntityRegistryManager>();
+      entityRegistryManager.getEntities.mockResolvedValue(
+        new Map([
+          ['media_player.ok1', createRegistryEntity({ hidden_by: '' })],
+          ['media_player.ok2', createRegistryEntity({ hidden_by: 'user' })],
+        ]),
+      );
+
+      const api = createCardAPI();
+      vi.mocked(api.getHASSManager().getHASS).mockReturnValue(
+        createHASSWithMediaPlayers(),
+      );
+      vi.mocked(api.getEntityRegistryManager).mockReturnValue(entityRegistryManager);
+      const manager = new MediaPlayerManager(api);
+
+      await manager.initialize();
+
+      expect(manager.getMediaPlayers()).toEqual([
+        'media_player.ok1',
+        'media_player.ok3',
+      ]);
+      expect(manager.hasMediaPlayers()).toBeTruthy();
+    });
+
+    it('without hass', async () => {
+      const api = createCardAPI();
+      vi.mocked(api.getHASSManager().getHASS).mockReturnValue(null);
+      const manager = new MediaPlayerManager(api);
+
+      await manager.initialize();
+
+      expect(manager.getMediaPlayers()).toEqual([]);
+      expect(manager.hasMediaPlayers()).toBeFalsy();
+    });
+
+    it('even if entity registry call fails', async () => {
+      const spy = vi.spyOn(global.console, 'warn').mockImplementation(() => true);
+
+      const entityRegistryManager = mock<EntityRegistryManager>();
+      entityRegistryManager.getEntities.mockRejectedValue(new Error('message'));
+
+      const api = createCardAPI();
+      vi.mocked(api.getHASSManager().getHASS).mockReturnValue(
+        createHASSWithMediaPlayers(),
+      );
+      vi.mocked(api.getEntityRegistryManager).mockReturnValue(entityRegistryManager);
+      const manager = new MediaPlayerManager(api);
+
+      await manager.initialize();
+
+      expect(manager.getMediaPlayers()).toEqual([
+        'media_player.ok1',
+        'media_player.ok2',
+        'media_player.ok3',
+      ]);
+      expect(manager.hasMediaPlayers()).toBeTruthy();
+      expect(spy).toBeCalled();
+    });
+  });
+
+  it('should stop', async () => {
+    const api = createCardAPI();
+    vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+
+    const manager = new MediaPlayerManager(api);
+
+    await manager.stop('media_player.foo');
+
+    expect(api.getHASSManager().getHASS()?.callService).toBeCalledWith(
+      'media_player',
+      'media_stop',
+      {
+        entity_id: 'media_player.foo',
+      },
+    );
+  });
+
+  describe('should play', () => {
+    describe('live', () => {
+      it('successfully', async () => {
+        const api = createCardAPI();
+        const cameraManager = createCameraManager();
+        vi.mocked(cameraManager.getStore().getCameraConfig).mockReturnValue(
+          createCameraConfig({
+            camera_entity: 'camera.foo',
+          }),
+        );
+        vi.mocked(cameraManager.getCameraMetadata).mockReturnValue({
+          title: 'camera title',
+          icon: 'icon',
+        });
+        vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+        const hass = createHASS({
+          'camera.foo': createStateEntity({
+            attributes: {
+              entity_picture: 'http://thumbnail',
+            },
+          }),
+        });
+        vi.mocked(api.getHASSManager().getHASS).mockReturnValue(hass);
+        const manager = new MediaPlayerManager(api);
+
+        await manager.playLive('media_player.foo', 'camera');
+
+        expect(api.getHASSManager().getHASS()?.callService).toBeCalledWith(
+          'media_player',
+          'play_media',
+          {
+            entity_id: 'media_player.foo',
+            media_content_id: 'media-source://camera/camera.foo',
+            media_content_type: 'application/vnd.apple.mpegurl',
+            extra: {
+              title: 'camera title',
+              thumb: 'http://thumbnail',
+            },
+          },
+        );
+      });
+
+      it('without camera_entity', async () => {
+        const api = createCardAPI();
+        const cameraManager = createCameraManager();
+        vi.mocked(cameraManager.getStore().getCameraConfig).mockReturnValue(
+          createCameraConfig({}),
+        );
+        vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+        vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+        const manager = new MediaPlayerManager(api);
+
+        await manager.playLive('media_player.foo', 'camera');
+
+        expect(api.getHASSManager().getHASS()?.callService).not.toBeCalled();
+      });
+
+      it('without title and thumbnail', async () => {
+        const api = createCardAPI();
+        const cameraManager = createCameraManager();
+        vi.mocked(cameraManager.getStore().getCameraConfig).mockReturnValue(
+          createCameraConfig({
+            camera_entity: 'camera.foo',
+          }),
+        );
+        vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+        vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+        const manager = new MediaPlayerManager(api);
+
+        await manager.playLive('media_player.foo', 'camera');
+
+        expect(api.getHASSManager().getHASS()?.callService).toBeCalledWith(
+          'media_player',
+          'play_media',
+          {
+            entity_id: 'media_player.foo',
+            media_content_id: 'media-source://camera/camera.foo',
+            media_content_type: 'application/vnd.apple.mpegurl',
+            extra: {},
+          },
+        );
+      });
+    });
+
+    describe('media', () => {
+      describe('successfully with', () => {
+        it.each([
+          ['clip' as const, 'video' as const],
+          ['snapshot' as const, 'image' as const],
+        ])(
+          '%s',
+          async (mediaType: 'clip' | 'snapshot', contentType: 'video' | 'image') => {
+            const media = new TestViewMedia({
+              title: 'media title',
+              thumbnail: 'http://thumbnail',
+              contentID: 'media-source://contentid',
+              mediaType: mediaType,
+            });
+            const api = createCardAPI();
+            vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+            const manager = new MediaPlayerManager(api);
+
+            await manager.playMedia('media_player.foo', media);
+
+            expect(api.getHASSManager().getHASS()?.callService).toBeCalledWith(
+              'media_player',
+              'play_media',
+              {
+                entity_id: 'media_player.foo',
+                media_content_id: 'media-source://contentid',
+                media_content_type: contentType,
+                extra: {
+                  title: 'media title',
+                  thumb: 'http://thumbnail',
+                },
+              },
+            );
+          },
+        );
+      });
+
+      it('without hass', async () => {
+        const api = createCardAPI();
+        vi.mocked(api.getHASSManager().getHASS).mockReturnValue(null);
+        const manager = new MediaPlayerManager(api);
+        const media = new TestViewMedia();
+
+        await manager.playMedia('media_player.foo', media);
+
+        // No actual test can be performed here as nothing observable happens.
+        // This test serves only as code-coverage long-tail.
+      });
+    });
+  });
+});
diff --git a/tests/utils/card-controller/message-manager.test.ts b/tests/utils/card-controller/message-manager.test.ts
new file mode 100644
index 00000000..ed893c80
--- /dev/null
+++ b/tests/utils/card-controller/message-manager.test.ts
@@ -0,0 +1,141 @@
+import { afterAll, describe, expect, it, vi } from 'vitest';
+import { FrigateCardError, Message } from '../../../src/types';
+import { MessageManager } from '../../../src/utils/card-controller/message-manager';
+import { createCardAPI } from '../../test-utils';
+
+const createMessage = (options?: Partial<Message>): Message => {
+  return {
+    message: options?.message ?? 'message',
+    type: options?.type ?? 'info',
+    ...(!!options?.icon && { icon: options.icon }),
+    ...(!!options?.context && { context: options.context }),
+    ...(!!options?.dotdotdot && { dotdotdot: options.dotdotdot }),
+  };
+};
+
+describe('MessageManager', () => {
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should construct', () => {
+    const manager = new MessageManager(createCardAPI());
+    expect(manager.hasMessage()).toBeFalsy();
+    expect(manager.getMessage()).toBeNull();
+    expect(manager.hasErrorMessage()).toBeFalsy();
+  });
+
+  it('should set info message', () => {
+    const api = createCardAPI();
+    const manager = new MessageManager(api);
+    const message = createMessage();
+    manager.setMessageIfHigherPriority(message);
+    expect(manager.hasMessage()).toBeTruthy();
+    expect(manager.getMessage()).toBe(message);
+    expect(manager.hasErrorMessage()).toBeFalsy();
+
+    expect(api.getMediaLoadedInfoManager().clear).toBeCalled();
+    expect(api.getCardElementManager().scrollReset).toBeCalled();
+    expect(api.getCardElementManager().update).toBeCalled();
+  });
+
+  it('should set error message', () => {
+    const api = createCardAPI();
+    const manager = new MessageManager(api);
+    const message = createMessage({ type: 'error' });
+    manager.setMessageIfHigherPriority(message);
+    expect(manager.hasMessage()).toBeTruthy();
+    expect(manager.getMessage()).toBe(message);
+    expect(manager.hasErrorMessage()).toBeTruthy();
+
+    expect(api.getMediaLoadedInfoManager().clear).toBeCalled();
+    expect(api.getCardElementManager().scrollReset).toBeCalled();
+    expect(api.getCardElementManager().update).toBeCalled();
+  });
+
+  it('should reset message', () => {
+    const api = createCardAPI();
+    const manager = new MessageManager(api);
+
+    manager.reset();
+    expect(manager.hasMessage()).toBeFalsy();
+
+    const message = createMessage({ type: 'error' });
+    manager.setMessageIfHigherPriority(message);
+    expect(manager.hasMessage()).toBeTruthy();
+
+    vi.mocked(api.getCardElementManager().update).mockClear();
+    manager.reset();
+
+    expect(manager.hasMessage()).toBeFalsy();
+    expect(api.getCardElementManager().update).toBeCalled();
+  });
+
+  it('should respect priority', () => {
+    const api = createCardAPI();
+    const manager = new MessageManager(api);
+
+    manager.reset();
+    expect(manager.hasMessage()).toBeFalsy();
+
+    const errorMessage = createMessage({ type: 'error' });
+    manager.setMessageIfHigherPriority(errorMessage);
+
+    const infoMessage = createMessage({ type: 'info' });
+    manager.setMessageIfHigherPriority(infoMessage);
+
+    expect(manager.getMessage()).toBe(errorMessage);
+
+    const connectionMessage = createMessage({ type: 'connection' });
+    manager.setMessageIfHigherPriority(connectionMessage);
+
+    expect(manager.getMessage()).toBe(connectionMessage);
+  });
+
+  it('should set FrigateCardError object', () => {
+    const consoleSpy = vi.spyOn(global.console, 'warn').mockReturnValue(undefined);
+
+    const api = createCardAPI();
+    const manager = new MessageManager(api);
+    const context = { foo: 'bar' };
+
+    manager.setErrorIfHigherPriority(
+      new FrigateCardError('frigate card message', context),
+    );
+    expect(manager.hasMessage()).toBeTruthy();
+    expect(manager.getMessage()).toEqual({
+      message: 'frigate card message',
+      type: 'error',
+      context: context,
+    });
+
+    expect(consoleSpy).toBeCalled();
+  });
+
+  it('should set Error object', () => {
+    const consoleSpy = vi.spyOn(global.console, 'warn').mockReturnValue(undefined);
+
+    const api = createCardAPI();
+    const manager = new MessageManager(api);
+
+    manager.setErrorIfHigherPriority(new Error('generic error message'));
+    expect(manager.hasMessage()).toBeTruthy();
+    expect(manager.getMessage()).toEqual({
+      message: 'generic error message',
+      type: 'error',
+    });
+
+    expect(consoleSpy).toBeCalled();
+  });
+
+  it('should not set unknown error type', () => {
+    const consoleSpy = vi.spyOn(global.console, 'warn').mockReturnValue(undefined);
+
+    const api = createCardAPI();
+    const manager = new MessageManager(api);
+
+    manager.setErrorIfHigherPriority('not_an_error_object');
+    expect(manager.hasMessage()).toBeFalsy();
+    expect(consoleSpy).not.toBeCalled();
+  });
+});
diff --git a/tests/utils/card-controller/microphone-manager.test.ts b/tests/utils/card-controller/microphone-manager.test.ts
new file mode 100644
index 00000000..69063ad4
--- /dev/null
+++ b/tests/utils/card-controller/microphone-manager.test.ts
@@ -0,0 +1,193 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { mock } from 'vitest-mock-extended';
+import { MicrophoneManager } from '../../../src/utils/card-controller/microphone-manager';
+import { createCardAPI, createConfig } from '../../test-utils';
+
+const navigatorMock = {
+  mediaDevices: {
+    getUserMedia: vi.fn(),
+  },
+};
+
+// @vitest-environment jsdom
+describe('MicrophoneManager', () => {
+  beforeEach(() => {
+    vi.stubGlobal('navigator', navigatorMock);
+    vi.useRealTimers();
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+    vi.unstubAllGlobals;
+  });
+
+  const createMockStream = (mute?: boolean): MediaStream => {
+    const stream = mock<MediaStream>();
+    const track = mock<MediaStreamTrack>();
+    track.enabled = !mute;
+    stream.getTracks.mockImplementation(() => [track]);
+    return stream;
+  };
+
+  it('should be muted on creation', () => {
+    const manager = new MicrophoneManager(createCardAPI());
+    expect(manager).toBeTruthy();
+    expect(manager.isMuted()).toBeTruthy();
+  });
+
+  it('should be undefined without creation', () => {
+    const manager = new MicrophoneManager(createCardAPI());
+    expect(manager.getStream()).toBeUndefined();
+  });
+
+  it('should connect', async () => {
+    const api = createCardAPI();
+    const manager = new MicrophoneManager(api);
+
+    const stream = createMockStream();
+    navigatorMock.mediaDevices.getUserMedia.mockReturnValue(stream);
+
+    await manager.connect();
+
+    expect(manager.isConnected()).toBeTruthy();
+    expect(manager.getStream()).toBe(stream);
+    expect(manager.isMuted()).toBeTruthy();
+    expect(api.getCardElementManager().update).toBeCalled();
+  });
+
+  it('should be forbidden when permission denied', async () => {
+    // Don't actually log messages to the console during the test.
+    vi.spyOn(global.console, 'warn').mockReturnValue(undefined);
+
+    const api = createCardAPI();
+    const manager = new MicrophoneManager(api);
+    navigatorMock.mediaDevices.getUserMedia.mockRejectedValue(new Error());
+
+    await manager.connect();
+
+    expect(manager.isConnected()).toBeFalsy();
+    expect(manager.isForbidden()).toBeTruthy();
+    expect(api.getCardElementManager().update).toBeCalled();
+  });
+
+  it('should mute and unmute', async () => {
+    const api = createCardAPI();
+    const manager = new MicrophoneManager(api);
+    navigatorMock.mediaDevices.getUserMedia.mockReturnValue(createMockStream());
+
+    await manager.connect();
+    expect(manager.isMuted()).toBeTruthy();
+    expect(api.getCardElementManager().update).toBeCalledTimes(1);
+
+    manager.mute();
+    expect(manager.isMuted()).toBeTruthy();
+    expect(api.getCardElementManager().update).toBeCalledTimes(2);
+
+    await manager.unmute();
+    expect(manager.isMuted()).toBeFalsy();
+    expect(api.getCardElementManager().update).toBeCalledTimes(3);
+  });
+
+  it('should not unmute when microphone forbidden', async () => {
+    const api = createCardAPI();
+    const manager = new MicrophoneManager(api);
+    navigatorMock.mediaDevices.getUserMedia.mockReturnValue(null);
+
+    await manager.connect();
+
+    expect(manager.isMuted()).toBeTruthy();
+    expect(api.getCardElementManager().update).toBeCalledTimes(1);
+
+    await manager.unmute();
+    expect(manager.isMuted()).toBeTruthy();
+    expect(api.getCardElementManager().update).toBeCalledTimes(1);
+  });
+
+  it('should connect on unmute', async () => {
+    const api = createCardAPI();
+    const manager = new MicrophoneManager(api);
+    navigatorMock.mediaDevices.getUserMedia.mockReturnValue(createMockStream());
+
+    expect(manager.isConnected()).toBeFalsy();
+
+    await manager.unmute();
+
+    expect(manager.isConnected()).toBeTruthy();
+    expect(manager.isMuted()).toBeFalsy();
+
+    expect(api.getCardElementManager().update).toBeCalledTimes(2);
+  });
+
+  it('should disconnect', async () => {
+    const api = createCardAPI();
+    const manager = new MicrophoneManager(api);
+
+    navigatorMock.mediaDevices.getUserMedia.mockReturnValue(createMockStream());
+
+    await manager.connect();
+    expect(manager.isConnected()).toBeTruthy();
+    expect(api.getCardElementManager().update).toBeCalledTimes(1);
+
+    await manager.disconnect();
+    expect(manager.isConnected()).toBeFalsy();
+    expect(api.getCardElementManager().update).toBeCalledTimes(2);
+  });
+
+  it('should automatically disconnect', async () => {
+    vi.useFakeTimers();
+
+    const disconnectSeconds = 10;
+    const api = createCardAPI();
+    const manager = new MicrophoneManager(api);
+    navigatorMock.mediaDevices.getUserMedia.mockReturnValue(createMockStream());
+
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+      createConfig({
+        live: {
+          microphone: {
+            always_connected: false,
+            disconnect_seconds: disconnectSeconds,
+          },
+        },
+      }),
+    );
+
+    await manager.connect();
+    expect(manager.isConnected()).toBeTruthy();
+    expect(api.getCardElementManager().update).toBeCalledTimes(1);
+
+    vi.advanceTimersByTime(disconnectSeconds * 1000);
+
+    expect(manager.isConnected()).toBeFalsy();
+    expect(api.getCardElementManager().update).toBeCalledTimes(2);
+  });
+
+  it('should not automatically disconnect when always connected', async () => {
+    vi.useFakeTimers();
+
+    const disconnectSeconds = 10;
+    const api = createCardAPI();
+    const manager = new MicrophoneManager(api);
+    navigatorMock.mediaDevices.getUserMedia.mockReturnValue(createMockStream());
+
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+      createConfig({
+        live: {
+          microphone: {
+            always_connected: true,
+            disconnect_seconds: disconnectSeconds,
+          },
+        },
+      }),
+    );
+
+    await manager.connect();
+    expect(manager.isConnected()).toBeTruthy();
+    expect(api.getCardElementManager().update).toBeCalledTimes(1);
+
+    vi.advanceTimersByTime(disconnectSeconds * 1000);
+
+    expect(manager.isConnected()).toBeTruthy();
+    expect(api.getCardElementManager().update).toBeCalledTimes(1);
+  });
+});
diff --git a/tests/utils/card-controller/query-string-manager.test.ts b/tests/utils/card-controller/query-string-manager.test.ts
new file mode 100644
index 00000000..1cd6f361
--- /dev/null
+++ b/tests/utils/card-controller/query-string-manager.test.ts
@@ -0,0 +1,298 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { createCardAPI } from '../../test-utils';
+import { QueryStringManager } from '../../../src/utils/card-controller/query-string-manager';
+import { mock } from 'vitest-mock-extended';
+
+const setQueryString = (qs: string): void => {
+  const location: Location = mock<Location>();
+  location.search = qs;
+  global.window.location = location;
+};
+
+// @vitest-environment jsdom
+describe('QueryStringManager', () => {
+  beforeEach(() => {
+    global.window.location = mock<Location>();
+  });
+
+  it('should reject malformed query string', () => {
+    setQueryString('BOGUS_KEY=BOGUS_VALUE');
+    const api = createCardAPI();
+    vi.mocked(api.getMessageManager().hasMessage).mockReturnValue(true);
+    const manager = new QueryStringManager(api);
+
+    manager.executeAll();
+
+    expect(manager.hasViewRelatedActions()).toBeFalsy();
+    expect(api.getActionsManager().executeAction).not.toBeCalled();
+    expect(api.getViewManager().setViewByParameters).not.toBeCalled();
+  });
+
+  describe('should execute view name action from query string', () => {
+    it.each([
+      ['clip' as const],
+      ['clips' as const],
+      ['diagnostics' as const],
+      ['image' as const],
+      ['live' as const],
+      ['recording' as const],
+      ['recordings' as const],
+      ['snapshot' as const],
+      ['snapshots' as const],
+      ['timeline' as const],
+    ])('%s', (viewName: string) => {
+      setQueryString(`?frigate-card-action.id.${viewName}=`);
+      const api = createCardAPI();
+
+      // View actions do not need the card to have been updated.
+      vi.mocked(api.getCardElementManager().hasUpdated).mockReturnValue(false);
+      const manager = new QueryStringManager(api);
+
+      manager.executeAll();
+
+      expect(manager.hasViewRelatedActions()).toBeTruthy();
+      expect(api.getViewManager().setViewByParameters).toBeCalledWith({
+        viewName: viewName,
+      });
+    });
+  });
+
+  describe('should execute non-view action from query string', () => {
+    it.each([
+      ['camera_ui' as const],
+      ['download' as const],
+      ['expand' as const],
+      ['menu_toggle' as const],
+    ])('%s', (action: string) => {
+      setQueryString(`?frigate-card-action.id.${action}=`);
+      const api = createCardAPI();
+      vi.mocked(api.getCardElementManager().hasUpdated).mockReturnValue(true);
+      const manager = new QueryStringManager(api);
+
+      manager.executeAll();
+
+      expect(manager.hasViewRelatedActions()).toBeFalsy();
+      expect(api.getActionsManager().executeAction).toBeCalledWith({
+        action: 'fire-dom-event',
+        card_id: 'id',
+        frigate_card_action: action,
+      });
+    });
+  });
+
+  it('should execute view default action', () => {
+    setQueryString('?frigate-card-action.id.default=');
+    const api = createCardAPI();
+    // View actions do not need the card to have been updated.
+    vi.mocked(api.getCardElementManager().hasUpdated).mockReturnValue(false);
+
+    const manager = new QueryStringManager(api);
+
+    manager.executeAll();
+
+    expect(api.getViewManager().setViewDefault).toBeCalled();
+
+    expect(manager.hasViewRelatedActions()).toBeTruthy();
+    expect(api.getActionsManager().executeAction).not.toBeCalled();
+    expect(api.getViewManager().setViewByParameters).not.toBeCalled();
+  });
+
+  it('should execute camera_select action', () => {
+    setQueryString('?frigate-card-action.id.camera_select=camera.office');
+    const api = createCardAPI();
+    vi.mocked(api.getCardElementManager().hasUpdated).mockReturnValue(true);
+    const manager = new QueryStringManager(api);
+
+    manager.executeAll();
+
+    expect(api.getViewManager().setViewByParameters).toBeCalledWith({
+      cameraID: 'camera.office',
+    });
+
+    expect(manager.hasViewRelatedActions()).toBeTruthy();
+    expect(api.getActionsManager().executeAction).not.toBeCalled();
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+  });
+
+  it('should execute live_substream_select action', () => {
+    setQueryString('?frigate-card-action.id.live_substream_select=camera.office_hd');
+    const api = createCardAPI();
+    vi.mocked(api.getCardElementManager().hasUpdated).mockReturnValue(true);
+    const manager = new QueryStringManager(api);
+
+    manager.executeAll();
+
+    expect(api.getViewManager().setViewByParameters).toBeCalledWith({
+      substream: 'camera.office_hd',
+    });
+
+    expect(manager.hasViewRelatedActions()).toBeTruthy();
+    expect(api.getActionsManager().executeAction).not.toBeCalled();
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+  });
+
+  describe('should ignore action without value', () => {
+    it.each([['camera_select' as const], ['live_substream_select' as const]])(
+      '%s',
+      (action: string) => {
+        setQueryString(`?frigate-card-action.id.${action}=`);
+        const api = createCardAPI();
+        vi.mocked(api.getCardElementManager().hasUpdated).mockReturnValue(true);
+        const manager = new QueryStringManager(api);
+
+        manager.executeAll();
+
+        expect(manager.hasViewRelatedActions()).toBeFalsy();
+        expect(api.getActionsManager().executeAction).not.toBeCalled();
+        expect(api.getViewManager().setViewDefault).not.toBeCalled();
+        expect(api.getViewManager().setViewByParameters).not.toBeCalled();
+      },
+    );
+  });
+
+  it('should handle unknown action', () => {
+    const consoleSpy = vi.spyOn(global.console, 'warn').mockReturnValue(undefined);
+
+    setQueryString('?frigate-card-action.id.not_an_action=value');
+    const api = createCardAPI();
+    vi.mocked(api.getCardElementManager().hasUpdated).mockReturnValue(true);
+    const manager = new QueryStringManager(api);
+
+    manager.executeAll();
+
+    expect(manager.hasViewRelatedActions()).toBeFalsy();
+    expect(api.getActionsManager().executeAction).not.toBeCalled();
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+    expect(api.getViewManager().setViewByParameters).not.toBeCalled();
+    expect(consoleSpy).toBeCalled();
+  });
+
+  describe('should execute view name action from query string', () => {
+    it.each([
+      ['clip' as const],
+      ['clips' as const],
+      ['diagnostics' as const],
+      ['image' as const],
+      ['live' as const],
+      ['recording' as const],
+      ['recordings' as const],
+      ['snapshot' as const],
+      ['snapshots' as const],
+      ['timeline' as const],
+    ])('%s', (viewName: string) => {
+      setQueryString(`?frigate-card-action.id.${viewName}=`);
+      const api = createCardAPI();
+      vi.mocked(api.getCardElementManager().hasUpdated).mockReturnValue(true);
+      const manager = new QueryStringManager(api);
+
+      manager.executeAll();
+
+      expect(manager.hasViewRelatedActions()).toBeTruthy();
+      expect(api.getViewManager().setViewByParameters).toBeCalledWith({
+        viewName: viewName,
+      });
+    });
+  });
+
+  describe('should not execute non-view actions without an initial update', () => {
+    it.each([
+      ['camera_ui' as const],
+      ['download' as const],
+      ['expand' as const],
+      ['menu_toggle' as const],
+    ])('%s', (action: string) => {
+      setQueryString(`?frigate-card-action.id.${action}=value`);
+      const api = createCardAPI();
+      vi.mocked(api.getCardElementManager().hasUpdated).mockReturnValue(false);
+      const manager = new QueryStringManager(api);
+
+      manager.executeAll();
+
+      expect(api.getActionsManager().executeAction).not.toBeCalled();
+      expect(api.getViewManager().setViewDefault).not.toBeCalled();
+      expect(api.getViewManager().setViewByParameters).not.toBeCalled();
+    });
+  });
+
+  describe('should handle conflicting but valid actions', () => {
+    it('view and default with camera and substream specified', () => {
+      setQueryString(
+        '?frigate-card-action.id.clips=' +
+          '&frigate-card-action.id.live_substream_select=camera.kitchen_hd' +
+          '&frigate-card-action.id.default=' +
+          '&frigate-card-action.id.camera_select=camera.kitchen',
+      );
+      const api = createCardAPI();
+      vi.mocked(api.getCardElementManager().hasUpdated).mockReturnValue(true);
+      const manager = new QueryStringManager(api);
+
+      manager.executeAll();
+
+      expect(api.getViewManager().setViewDefault).toBeCalledWith({
+        cameraID: 'camera.kitchen',
+        substream: 'camera.kitchen_hd',
+      });
+      expect(api.getViewManager().setViewByParameters).not.toBeCalled();
+    });
+
+    it('multiple cameras specified', () => {
+      setQueryString(
+        '?frigate-card-action.id.camera_select=camera.kitchen' +
+          '&frigate-card-action.id.camera_select=camera.office',
+      );
+      const api = createCardAPI();
+      vi.mocked(api.getCardElementManager().hasUpdated).mockReturnValue(true);
+      const manager = new QueryStringManager(api);
+
+      manager.executeAll();
+
+      expect(api.getViewManager().setViewByParameters).toBeCalledWith({
+        cameraID: 'camera.office',
+      });
+    });
+  });
+
+  describe('should not execute view related actions', () => {
+    it.each([
+      ['clip' as const],
+      ['clips' as const],
+      ['default' as const],
+      ['diagnostics' as const],
+      ['image' as const],
+      ['live' as const],
+      ['recording' as const],
+      ['recordings' as const],
+      ['snapshot' as const],
+      ['snapshots' as const],
+      ['timeline' as const],
+    ])('%s', (viewName: string) => {
+      setQueryString(`?frigate-card-action.id.${viewName}=`);
+      const api = createCardAPI();
+      vi.mocked(api.getCardElementManager().hasUpdated).mockReturnValue(true);
+      const manager = new QueryStringManager(api);
+
+      manager.executeNonViewRelated();
+
+      expect(api.getViewManager().setViewByParameters).not.toBeCalled();
+      expect(api.getViewManager().setViewDefault).not.toBeCalled();
+    });
+  });
+
+  describe('should not execute non-view related actions', () => {
+    it.each([
+      ['camera_ui' as const],
+      ['download' as const],
+      ['expand' as const],
+      ['menu_toggle' as const],
+    ])('%s', (viewName: string) => {
+      setQueryString(`?frigate-card-action.id.${viewName}=`);
+      const api = createCardAPI();
+      vi.mocked(api.getCardElementManager().hasUpdated).mockReturnValue(true);
+      const manager = new QueryStringManager(api);
+
+      manager.executeViewRelated();
+
+      expect(api.getActionsManager().executeAction).not.toBeCalled();
+    });
+  });
+});
diff --git a/tests/utils/card-controller/style-manager.test.ts b/tests/utils/card-controller/style-manager.test.ts
new file mode 100644
index 00000000..01ddd8b8
--- /dev/null
+++ b/tests/utils/card-controller/style-manager.test.ts
@@ -0,0 +1,378 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { setPerformanceCSSStyles } from '../../../src/performance';
+import { FrigateCardView } from '../../../src/types';
+import { StyleManager } from '../../../src/utils/card-controller/style-manager';
+import { createCardAPI, createConfig, createHASS, createView } from '../../test-utils';
+
+vi.mock('../../../src/performance');
+
+// @vitest-environment jsdom
+describe('StyleManager', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe('setLightOrDarkMode', () => {
+    it('dark mode unspecified', () => {
+      const api = createCardAPI();
+      const element = document.createElement('div');
+      vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+      const manager = new StyleManager(api);
+
+      manager.setLightOrDarkMode();
+
+      expect(element.getAttribute('dark')).toBeNull();
+    });
+
+    it('dark mode explicitly off', () => {
+      const api = createCardAPI();
+      const element = document.createElement('div');
+      vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig({
+          view: {
+            dark_mode: 'off',
+          },
+        }),
+      );
+      const manager = new StyleManager(api);
+
+      manager.setLightOrDarkMode();
+
+      expect(element.getAttribute('dark')).toBeNull();
+    });
+
+    it('dark mode explicitly set', () => {
+      const api = createCardAPI();
+      const element = document.createElement('div');
+      vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig({
+          view: {
+            dark_mode: 'on',
+          },
+        }),
+      );
+      const manager = new StyleManager(api);
+
+      manager.setLightOrDarkMode();
+
+      expect(element.getAttribute('dark')).not.toBeNull();
+    });
+
+    it('dark mode auto without interaction', () => {
+      const api = createCardAPI();
+      const element = document.createElement('div');
+      vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig({
+          view: {
+            dark_mode: 'auto',
+          },
+        }),
+      );
+      vi.mocked(api.getInteractionManager().hasInteraction).mockReturnValue(false);
+      const manager = new StyleManager(api);
+
+      manager.setLightOrDarkMode();
+
+      expect(element.getAttribute('dark')).not.toBeNull();
+    });
+
+    it('dark mode auto with HA dark mode', () => {
+      const api = createCardAPI();
+      const element = document.createElement('div');
+      vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig({
+          view: {
+            dark_mode: 'auto',
+          },
+        }),
+      );
+      vi.mocked(api.getInteractionManager().hasInteraction).mockReturnValue(true);
+      const hass = createHASS();
+      hass.themes.darkMode = true;
+      vi.mocked(api.getHASSManager().getHASS).mockReturnValue(hass);
+      const manager = new StyleManager(api);
+
+      manager.setLightOrDarkMode();
+
+      expect(element.getAttribute('dark')).not.toBeNull();
+    });
+  });
+
+  describe('setExpandedMode', () => {
+    it('with no view or known media', () => {
+      const api = createCardAPI();
+      const element = document.createElement('div');
+      vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+      vi.mocked(api.getMediaLoadedInfoManager().getLastKnown).mockReturnValue(null);
+      const manager = new StyleManager(api);
+
+      manager.setExpandedMode();
+
+      expect(element.style.getPropertyValue('--frigate-card-expand-aspect-ratio')).toBe(
+        'unset',
+      );
+      expect(element.style.getPropertyValue('--frigate-card-expand-width')).toBe(
+        'var(--frigate-card-expand-max-width)',
+      );
+      expect(element.style.getPropertyValue('--frigate-card-expand-height')).toBe(
+        'var(--frigate-card-expand-max-height)',
+      );
+    });
+
+    it('with view but without media', () => {
+      const api = createCardAPI();
+      const element = document.createElement('div');
+      vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+      const view = createView({ view: 'media', displayMode: 'single' });
+      vi.mocked(api.getViewManager().getView).mockReturnValue(view);
+      vi.mocked(api.getMediaLoadedInfoManager().getLastKnown).mockReturnValue(null);
+      const manager = new StyleManager(api);
+
+      manager.setExpandedMode();
+
+      expect(element.style.getPropertyValue('--frigate-card-expand-aspect-ratio')).toBe(
+        'unset',
+      );
+      expect(element.style.getPropertyValue('--frigate-card-expand-width')).toBe('none');
+      expect(element.style.getPropertyValue('--frigate-card-expand-height')).toBe(
+        'none',
+      );
+    });
+
+    it('with view and media', () => {
+      const api = createCardAPI();
+      const element = document.createElement('div');
+      vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+      const view = createView({ view: 'media', displayMode: 'single' });
+      vi.mocked(api.getViewManager().getView).mockReturnValue(view);
+      vi.mocked(api.getMediaLoadedInfoManager().getLastKnown).mockReturnValue({
+        width: 800,
+        height: 600,
+      });
+      const manager = new StyleManager(api);
+
+      manager.setExpandedMode();
+
+      expect(element.style.getPropertyValue('--frigate-card-expand-aspect-ratio')).toBe(
+        '800 / 600',
+      );
+      expect(element.style.getPropertyValue('--frigate-card-expand-width')).toBe('none');
+      expect(element.style.getPropertyValue('--frigate-card-expand-height')).toBe(
+        'none',
+      );
+    });
+
+    it('with view and grid display mode', () => {
+      const api = createCardAPI();
+      const element = document.createElement('div');
+      vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+      const view = createView({ view: 'media', displayMode: 'grid' });
+      vi.mocked(api.getViewManager().getView).mockReturnValue(view);
+      vi.mocked(api.getMediaLoadedInfoManager().getLastKnown).mockReturnValue({
+        width: 800,
+        height: 600,
+      });
+      const manager = new StyleManager(api);
+
+      manager.setExpandedMode();
+
+      expect(element.style.getPropertyValue('--frigate-card-expand-aspect-ratio')).toBe(
+        '800 / 600',
+      );
+      expect(element.style.getPropertyValue('--frigate-card-expand-width')).toBe(
+        'var(--frigate-card-expand-max-width)',
+      );
+      expect(element.style.getPropertyValue('--frigate-card-expand-height')).toBe(
+        'var(--frigate-card-expand-max-height)',
+      );
+    });
+  });
+
+  describe('setMinMaxHeight', () => {
+    it('without a config', () => {
+      const api = createCardAPI();
+      const element = document.createElement('div');
+      vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+      const manager = new StyleManager(api);
+
+      manager.setMinMaxHeight();
+
+      expect(element.style.getPropertyValue('--frigate-card-max-height')).toBeFalsy();
+      expect(element.style.getPropertyValue('--frigate-card-expand-height')).toBeFalsy();
+    });
+
+    it('with a config', () => {
+      const api = createCardAPI();
+      const element = document.createElement('div');
+      vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig({
+          dimensions: {
+            max_height: '800px',
+            min_height: '400px',
+          },
+        }),
+      );
+      const manager = new StyleManager(api);
+
+      manager.setMinMaxHeight();
+
+      expect(element.style.getPropertyValue('--frigate-card-min-height')).toBe('400px');
+      expect(element.style.getPropertyValue('--frigate-card-max-height')).toBe('800px');
+    });
+  });
+
+  it('setPerformance', () => {
+    const api = createCardAPI();
+    const element = document.createElement('div');
+    vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+    const config = createConfig();
+    vi.mocked(api.getConfigManager().getCardWideConfig).mockReturnValue({
+      performance: config.performance,
+    });
+    const manager = new StyleManager(api);
+
+    manager.setPerformance();
+
+    expect(setPerformanceCSSStyles).toBeCalledWith(element, config.performance);
+  });
+
+  describe('getAspectRatioStyle', () => {
+    it('without config or view', () => {
+      const api = createCardAPI();
+      const manager = new StyleManager(api);
+      expect(manager.getAspectRatioStyle()).toBe('16 / 9');
+    });
+
+    it('should be auto with unconstrained aspect ratio', () => {
+      const api = createCardAPI();
+      const view = createView({ view: 'media' });
+      vi.mocked(api.getViewManager().getView).mockReturnValue(view);
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig({
+          dimensions: {
+            aspect_ratio_mode: 'unconstrained',
+          },
+        }),
+      );
+      const manager = new StyleManager(api);
+      expect(manager.getAspectRatioStyle()).toBe('auto');
+    });
+
+    it('should be auto in fullscreen', () => {
+      const api = createCardAPI();
+      const view = createView({ view: 'media' });
+      vi.mocked(api.getViewManager().getView).mockReturnValue(view);
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig());
+      vi.mocked(api.getFullscreenManager().isInFullscreen).mockReturnValue(true);
+      const manager = new StyleManager(api);
+
+      expect(manager.getAspectRatioStyle()).toBe('auto');
+    });
+
+    it('should be auto when expanded', () => {
+      const api = createCardAPI();
+      const view = createView({ view: 'media' });
+      vi.mocked(api.getViewManager().getView).mockReturnValue(view);
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig());
+      vi.mocked(api.getExpandManager().isExpanded).mockReturnValue(true);
+      const manager = new StyleManager(api);
+
+      expect(manager.getAspectRatioStyle()).toBe('auto');
+    });
+
+    describe('should be auto when dynamic in certain views', () => {
+      it.each([
+        ['clip' as const],
+        ['diagnostics' as const],
+        ['image' as const],
+        ['media' as const],
+        ['live' as const],
+        ['recording' as const],
+        ['snapshot' as const],
+        ['timeline' as const],
+      ])('%s', (viewName: FrigateCardView) => {
+        const api = createCardAPI();
+        const view = createView({ view: viewName });
+        vi.mocked(api.getViewManager().getView).mockReturnValue(view);
+        vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+          createConfig({
+            dimensions: {
+              aspect_ratio_mode: 'dynamic',
+            },
+          }),
+        );
+        const manager = new StyleManager(api);
+
+        expect(manager.getAspectRatioStyle()).toBe('auto');
+      });
+    });
+
+    describe('should be enforced when dynamic in certain views', () => {
+      it.each([['clips' as const], ['recordings' as const], ['snapshots' as const]])(
+        '%s',
+        (viewName: FrigateCardView) => {
+          const api = createCardAPI();
+          const view = createView({ view: viewName });
+          vi.mocked(api.getViewManager().getView).mockReturnValue(view);
+          vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+            createConfig({
+              dimensions: {
+                aspect_ratio_mode: 'dynamic',
+              },
+            }),
+          );
+          const manager = new StyleManager(api);
+
+          expect(manager.getAspectRatioStyle()).toBe('16 / 9');
+        },
+      );
+    });
+
+    describe('should use media dimensions in dynamic', () => {
+      it.each([['clips' as const], ['recordings' as const], ['snapshots' as const]])(
+        '%s',
+        (viewName: FrigateCardView) => {
+          const api = createCardAPI();
+          const view = createView({ view: viewName });
+          vi.mocked(api.getViewManager().getView).mockReturnValue(view);
+          vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+            createConfig({
+              dimensions: {
+                aspect_ratio_mode: 'dynamic',
+              },
+            }),
+          );
+          vi.mocked(api.getMediaLoadedInfoManager().getLastKnown).mockReturnValue({
+            width: 800,
+            height: 600,
+          });
+          const manager = new StyleManager(api);
+
+          expect(manager.getAspectRatioStyle()).toBe('800 / 600');
+        },
+      );
+    });
+
+    it('should respect default aspect ratio', () => {
+      const api = createCardAPI();
+      const view = createView({ view: 'clips' });
+      vi.mocked(api.getViewManager().getView).mockReturnValue(view);
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+        createConfig({
+          dimensions: {
+            aspect_ratio_mode: 'dynamic',
+            aspect_ratio: '4:3',
+          },
+        }),
+      );
+      const manager = new StyleManager(api);
+
+      expect(manager.getAspectRatioStyle()).toBe('4 / 3');
+    });
+  });
+});
diff --git a/tests/utils/card-controller/triggers-manager.test.ts b/tests/utils/card-controller/triggers-manager.test.ts
new file mode 100644
index 00000000..d65c0724
--- /dev/null
+++ b/tests/utils/card-controller/triggers-manager.test.ts
@@ -0,0 +1,190 @@
+import add from 'date-fns/add';
+import { HassEntities } from 'home-assistant-js-websocket';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ScanOptions } from '../../../src/types';
+import { TriggersManager } from '../../../src/utils/card-controller/triggers-manager';
+import {
+  createCameraConfig,
+  createCameraManager,
+  createCardAPI,
+  createConfig,
+  createHASS,
+  createStateEntity,
+  createView,
+} from '../../test-utils';
+
+vi.mock('../../../src/camera-manager/manager.js');
+
+// Creating and mocking a trigger API is a lot of boilerplate, this convenience
+// function reduces it.
+const createTriggerAPI = (options?: {
+  config?: ScanOptions;
+  hassStates?: HassEntities;
+  interaction?: boolean;
+}) => {
+  const api = createCardAPI();
+  vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+    createConfig({
+      view: {
+        scan: options?.config ?? {
+          enabled: true,
+          untrigger_reset: true,
+          untrigger_seconds: 10,
+        },
+      },
+    }),
+  );
+  vi.mocked(api.getHASSManager().getHASS).mockReturnValue(
+    createHASS(options?.hassStates),
+  );
+  vi.mocked(api.getCameraManager).mockReturnValue(
+    createCameraManager({
+      configs: new Map([
+        [
+          'camera_1',
+          createCameraConfig({
+            triggers: {
+              entities: ['binary_sensor.motion'],
+            },
+          }),
+        ],
+      ]),
+    }),
+  );
+  vi.mocked(api.getInteractionManager().hasInteraction).mockReturnValue(
+    options?.interaction ?? false,
+  );
+
+  return api;
+};
+
+// @vitest-environment jsdom
+describe('TriggersManager', () => {
+  const hassActiveState = {
+    'binary_sensor.motion': createStateEntity({ state: 'on' }),
+  };
+  const hassInactiveState = {
+    'binary_sensor.motion': createStateEntity({ state: 'off' }),
+  };
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+    vi.useFakeTimers();
+  });
+
+  it('should not be triggered by default', () => {
+    const manager = new TriggersManager(createCardAPI());
+    expect(manager.isTriggered()).toBeFalsy();
+  });
+
+  it('should not trigger when scan mode disabled default', () => {
+    const api = createTriggerAPI({
+      config: { enabled: false },
+      hassStates: hassActiveState,
+    });
+    const manager = new TriggersManager(api);
+
+    manager.updateTriggeredCameras(null);
+
+    expect(manager.isTriggered()).toBeFalsy();
+  });
+
+  it('should trigger and untrigger based on entity state', () => {
+    const start = new Date('2023-10-01T17:14');
+    vi.setSystemTime(start);
+    const api = createTriggerAPI({
+      hassStates: hassActiveState,
+    });
+    const manager = new TriggersManager(api);
+
+    manager.updateTriggeredCameras(createHASS(hassInactiveState));
+
+    expect(manager.isTriggered()).toBeTruthy();
+    expect(api.getViewManager().setViewByParameters).toBeCalledWith({
+      viewName: 'live',
+      cameraID: 'camera_1',
+    });
+
+    vi.mocked(api.getHASSManager().getHASS).mockReturnValue(
+      createHASS(hassInactiveState),
+    );
+
+    manager.updateTriggeredCameras(createHASS(hassActiveState));
+
+    // Intentional state update with no change.
+    manager.updateTriggeredCameras(createHASS(hassActiveState));
+
+    // Will still be triggered, but untrigger timer will be running.
+    expect(manager.isTriggered()).toBeTruthy();
+
+    vi.setSystemTime(add(start, { seconds: 10 }));
+    vi.runOnlyPendingTimers();
+
+    expect(manager.isTriggered()).toBeFalsy();
+    expect(api.getViewManager().setViewDefault).toBeCalled();
+  });
+
+  it('should trigger and set view if current view is wrong', () => {
+    const api = createTriggerAPI({
+      hassStates: hassActiveState,
+    });
+    vi.mocked(api.getViewManager().getView).mockReturnValue(
+      createView({
+        // Correct camera, but wrong view.
+        view: 'clips',
+        camera: 'camera_1',
+      }),
+    );
+    const manager = new TriggersManager(api);
+    manager.updateTriggeredCameras(null);
+
+    expect(api.getViewManager().setViewByParameters).toBeCalledWith({
+      viewName: 'live',
+      cameraID: 'camera_1',
+    });
+  });
+
+  it('should trigger when entity state is active on startup', () => {
+    const api = createTriggerAPI({
+      hassStates: hassActiveState,
+    });
+    const manager = new TriggersManager(api);
+    expect(manager.isTriggered()).toBeFalsy();
+
+    manager.updateTriggeredCameras(null);
+    expect(manager.isTriggered()).toBeTruthy();
+  });
+
+  it('should untrigger manually', () => {
+    const api = createTriggerAPI({
+      hassStates: hassActiveState,
+    });
+    const manager = new TriggersManager(api);
+
+    // Untriggering when not triggered.
+    manager.untrigger();
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+
+    manager.updateTriggeredCameras(null);
+    expect(manager.isTriggered()).toBeTruthy();
+
+    manager.untrigger();
+    expect(manager.isTriggered()).toBeFalsy();
+    expect(api.getViewManager().setViewDefault).toBeCalled();
+  });
+
+  it('should take no actions when automated actions are not allowed', () => {
+    const api = createTriggerAPI({
+      hassStates: hassActiveState,
+      // Interaction present.
+      interaction: true,
+    });
+    const manager = new TriggersManager(api);
+    manager.updateTriggeredCameras(null);
+    expect(manager.isTriggered()).toBeTruthy();
+    expect(api.getViewManager().setViewByParameters).not.toBeCalled();
+
+    manager.untrigger();
+    expect(api.getViewManager().setViewDefault).not.toBeCalled();
+  });
+});
diff --git a/tests/utils/card-controller/view-manager.test.ts b/tests/utils/card-controller/view-manager.test.ts
new file mode 100644
index 00000000..00db236e
--- /dev/null
+++ b/tests/utils/card-controller/view-manager.test.ts
@@ -0,0 +1,698 @@
+import { describe, expect, it, vi } from 'vitest';
+import { QueryType } from '../../../src/camera-manager/types';
+import { FrigateCardView } from '../../../src/types';
+import { getAllDependentCameras } from '../../../src/utils/camera';
+import { ViewManager } from '../../../src/utils/card-controller/view-manager';
+import { EventMediaQueries } from '../../../src/view/media-queries';
+import {
+  createCameraManager,
+  createCardAPI,
+  createConfig,
+  createHASS,
+  createView,
+  generateViewMediaArray,
+} from '../../test-utils';
+
+vi.mock('../../../src/camera-manager/manager.js');
+vi.mock('../../../src/utils/camera');
+
+describe('ViewManager.setView', () => {
+  it('should set view', () => {
+    const api = createCardAPI();
+    const manager = new ViewManager(api);
+
+    const view = createView({
+      view: 'live',
+      camera: 'camera',
+      displayMode: 'grid',
+    });
+    manager.setView(view);
+
+    expect(manager.getView()).toBe(view);
+    expect(api.getMediaLoadedInfoManager().clear).toBeCalled();
+    expect(api.getCardElementManager().scrollReset).toBeCalled();
+    expect(api.getMessageManager().reset).toBeCalled();
+    expect(api.getStyleManager().setExpandedMode).toBeCalled();
+    expect(api.getConditionsManager()?.setState).toBeCalledWith({
+      view: 'live',
+      camera: 'camera',
+      displayMode: 'grid',
+    });
+    expect(api.getCardElementManager().update).toBeCalled();
+  });
+
+  it('should set view with minor changes without media clearing or scroll', () => {
+    const api = createCardAPI();
+    const manager = new ViewManager(api);
+
+    const view_1 = createView({
+      view: 'live',
+      camera: 'camera',
+    });
+    manager.setView(view_1);
+
+    vi.mocked(api.getMediaLoadedInfoManager().clear).mockClear();
+    vi.mocked(api.getCardElementManager().scrollReset).mockClear();
+
+    const view_2 = createView({
+      view: 'live',
+      camera: 'camera',
+      displayMode: 'single',
+    });
+
+    manager.setView(view_2);
+
+    expect(manager.getView()).toBe(view_2);
+
+    // The new view is neither a major media change, nor a different view name,
+    // so media clearing and scrolling should not happen.
+    expect(api.getMediaLoadedInfoManager().clear).not.toBeCalled();
+    expect(api.getCardElementManager().scrollReset).not.toBeCalled();
+  });
+
+  it('should set view with new context', () => {
+    const api = createCardAPI();
+    const manager = new ViewManager(api);
+    const context = { thumbnails: { fetch: false } };
+
+    // Setting context with no existing view does nothing.
+    manager.setViewWithNewContext(context);
+    expect(manager.getView()).toBeNull();
+
+    const view = createView({
+      view: 'live',
+      camera: 'camera',
+    });
+    manager.setView(view);
+    manager.setViewWithNewContext(context);
+
+    expect(manager.getView()?.camera).toBe('camera');
+    expect(manager.getView()?.view).toBe('live');
+    expect(manager.getView()?.context).toEqual(context);
+  });
+});
+
+describe('ViewManager.reset', () => {
+  it('should reset', () => {
+    const manager = new ViewManager(createCardAPI());
+
+    const view = createView();
+    manager.setView(view);
+    manager.reset();
+
+    expect(manager.getView()).toBeNull();
+  });
+});
+
+describe('ViewManager.setViewDefault', () => {
+  it('should set default view', () => {
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig());
+    vi.mocked(api.getCameraManager).mockReturnValue(createCameraManager());
+
+    const manager = new ViewManager(api);
+    manager.setViewDefault();
+
+    expect(manager.getView()?.view).toBe('live');
+    expect(manager.getView()?.camera).toBe('camera');
+    expect(api.getAutoUpdateManager().startDefaultViewTimer).toBeCalled();
+  });
+
+  it('should not set default view without config', () => {
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(null);
+
+    const manager = new ViewManager(api);
+    manager.setViewDefault();
+
+    expect(manager.getView()).toBeNull();
+    expect(api.getAutoUpdateManager().startDefaultViewTimer).not.toBeCalled();
+  });
+
+  it('should cycle camera when configured', () => {
+    const cameraManager = createCameraManager();
+    vi.mocked(cameraManager.getStore().getVisibleCameraIDs).mockReturnValue(
+      new Set(['camera_1', 'camera_2']),
+    );
+    const api = createCardAPI();
+    vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(
+      createConfig({
+        view: {
+          update_cycle_camera: true,
+        },
+      }),
+    );
+    const manager = new ViewManager(api);
+
+    manager.setViewDefault();
+    expect(manager.getView()?.camera).toBe('camera_1');
+
+    manager.setViewDefault();
+    expect(manager.getView()?.camera).toBe('camera_2');
+
+    manager.setViewDefault();
+    expect(manager.getView()?.camera).toBe('camera_1');
+
+    // When a parameter is specified, it will not cycle.
+    manager.setViewDefault({ cameraID: 'camera_1' });
+    expect(manager.getView()?.camera).toBe('camera_1');
+  });
+
+  it('should respect parameters', () => {
+    const cameraManager = createCameraManager();
+    vi.mocked(cameraManager.getStore().getVisibleCameraIDs).mockReturnValue(
+      new Set(['camera.kitchen', 'camera.office']),
+    );
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig());
+    vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+    const manager = new ViewManager(api);
+
+    manager.setViewDefault({
+      cameraID: 'camera.office',
+      substream: 'camera.office_hd',
+    });
+    expect(manager.getView()?.view).toBe('live');
+    expect(manager.getView()?.camera).toBe('camera.office');
+    expect(manager.getView()?.context?.live?.overrides).toEqual(
+      new Map([['camera.office', 'camera.office_hd']]),
+    );
+  });
+});
+
+describe('ViewManager.setViewByParameters', () => {
+  it('should set view by parameters specifying camera and view', () => {
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig());
+    vi.mocked(api.getCameraManager).mockReturnValue(createCameraManager());
+
+    const manager = new ViewManager(api);
+    manager.setViewByParameters({
+      cameraID: 'camera',
+      viewName: 'clips',
+    });
+
+    expect(manager.getView()?.view).toBe('clips');
+    expect(manager.getView()?.camera).toBe('camera');
+  });
+
+  it('should set view by parameters using existing view if unspecified', () => {
+    const cameraManager = createCameraManager();
+    vi.mocked(cameraManager.getStore().getVisibleCameraIDs).mockReturnValue(
+      new Set(['camera_1', 'camera_2']),
+    );
+
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig());
+    vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+
+    const manager = new ViewManager(api);
+    manager.setViewByParameters({
+      cameraID: 'camera_1',
+      viewName: 'clips',
+    });
+
+    manager.setViewByParameters({
+      cameraID: 'camera_2',
+    });
+
+    expect(manager.getView()?.view).toBe('clips');
+    expect(manager.getView()?.camera).toBe('camera_2');
+  });
+
+  it('should set view by parameters using config as fallback', () => {
+    const cameraManager = createCameraManager();
+    vi.mocked(cameraManager.getStore().getVisibleCameraIDs).mockReturnValue(
+      new Set(['camera_1', 'camera_2']),
+    );
+
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig());
+    vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+
+    const manager = new ViewManager(api);
+    manager.setViewByParameters({
+      cameraID: 'camera_1',
+      // No prior view, and no specified view. This could happen during query
+      // string based initialization.
+    });
+
+    expect(manager.getView()?.view).toBe('live');
+    expect(manager.getView()?.camera).toBe('camera_1');
+  });
+
+  it('should not set view by parameters without config', () => {
+    const manager = new ViewManager(createCardAPI());
+
+    manager.setViewByParameters({
+      viewName: 'live',
+    });
+
+    expect(manager.getView()).toBeNull();
+  });
+
+  it('should not set view by parameters without visible cameras', () => {
+    const cameraManager = createCameraManager();
+    vi.mocked(cameraManager.getStore().getVisibleCameraIDs).mockReturnValue(new Set());
+
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig());
+    vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+
+    const manager = new ViewManager(api);
+    manager.setViewByParameters({
+      viewName: 'live',
+    });
+
+    expect(manager.getView()).toBeNull();
+  });
+
+  describe('should set view by parameters and respect display mode in config for view', () => {
+    it.each([
+      ['media' as const],
+      ['clip' as const],
+      ['recording' as const],
+      ['snapshot' as const],
+      ['live' as const],
+    ])('%s', (viewName: FrigateCardView) => {
+      const api = createCardAPI();
+      vi.mocked(api.getCameraManager).mockReturnValue(createCameraManager());
+      vi.mocked(api.getConfigManager()).getConfig.mockReturnValue(
+        createConfig({
+          media_viewer: {
+            display: {
+              mode: 'grid',
+            },
+          },
+          live: {
+            display: {
+              mode: 'grid',
+            },
+          },
+        }),
+      );
+      const manager = new ViewManager(api);
+
+      manager.setViewByParameters({
+        cameraID: 'camera',
+        viewName: viewName,
+      });
+
+      expect(manager.getView()?.displayMode).toBe('grid');
+    });
+  });
+
+  describe('should set view by parameters and leave display mode unset for view', () => {
+    it.each([
+      ['media' as const],
+      ['clip' as const],
+      ['recording' as const],
+      ['snapshot' as const],
+      ['live' as const],
+    ])('%s', (viewName: FrigateCardView) => {
+      const api = createCardAPI();
+      vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig());
+      vi.mocked(api.getCameraManager).mockReturnValue(createCameraManager());
+      const manager = new ViewManager(api);
+
+      manager.setViewByParameters({
+        cameraID: 'camera',
+        viewName: viewName,
+      });
+
+      expect(manager.getView()?.displayMode).toBe('single');
+    });
+  });
+
+  it('should set view by parameters using config as fallback', () => {
+    const cameraManager = createCameraManager();
+    vi.mocked(cameraManager.getStore().getVisibleCameraIDs).mockReturnValue(
+      new Set(['camera_1', 'camera_2']),
+    );
+
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig());
+    vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+    vi.mocked(getAllDependentCameras).mockReturnValue(
+      new Set(['camera_1', 'camera_1_hd']),
+    );
+
+    const manager = new ViewManager(api);
+    manager.setViewByParameters({
+      cameraID: 'camera_1',
+      viewName: 'live',
+      substream: 'camera_1_hd',
+    });
+
+    expect(manager.getView()?.view).toBe('live');
+    expect(manager.getView()?.camera).toBe('camera_1');
+    expect(manager.getView()?.context?.live?.overrides).toEqual(
+      new Map([['camera_1', 'camera_1_hd']]),
+    );
+  });
+});
+
+// @vitest-environment jsdom
+describe('ViewManager.setViewWithNewDisplayMode', () => {
+  it('should set display mode', async () => {
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig());
+    vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+    vi.mocked(api.getCameraManager).mockReturnValue(createCameraManager());
+    const manager = new ViewManager(api);
+    manager.setView(createView());
+
+    await manager.setViewWithNewDisplayMode('grid');
+
+    expect(manager.getView()?.displayMode).toBe('grid');
+  });
+
+  it('should not set display mode without view', async () => {
+    const api = createCardAPI();
+    vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig());
+    vi.mocked(api.getCameraManager).mockReturnValue(createCameraManager());
+    const manager = new ViewManager(api);
+
+    manager.setViewWithNewDisplayMode('grid');
+
+    expect(manager.getView()).toBeNull();
+  });
+
+  it('should set display mode to grid and create new query', async () => {
+    const cameraManager = createCameraManager();
+    vi.mocked(cameraManager.getStore().getVisibleCameraCount).mockReturnValue(2);
+    vi.mocked(cameraManager.getStore().getVisibleCameraIDs).mockReturnValue(
+      new Set(['camera_1', 'camera_2']),
+    );
+
+    const api = createCardAPI();
+    vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+
+    const hass = createHASS();
+    vi.mocked(api.getHASSManager()).getHASS.mockReturnValue(hass);
+
+    const media = generateViewMediaArray({ count: 5 });
+    vi.mocked(cameraManager.executeMediaQueries).mockResolvedValue(media);
+
+    const manager = new ViewManager(api);
+    const query = new EventMediaQueries([
+      { type: QueryType.Event, cameraIDs: new Set(['camera_1']), hasClip: true },
+    ]);
+
+    manager.setView(
+      createView({
+        camera: 'camera_1',
+        view: 'clip',
+        query: query,
+      }),
+    );
+
+    await manager.setViewWithNewDisplayMode('grid');
+
+    expect(manager.getView()?.queryResults?.getResults()).toBe(media);
+    expect(cameraManager.executeMediaQueries).toBeCalledWith(
+      expect.arrayContaining([
+        expect.objectContaining({
+          type: 'event-query',
+          cameraIDs: new Set(['camera_1', 'camera_2']),
+          hasClip: true,
+        }),
+      ]),
+    );
+  });
+
+  it('should set display mode to single and create new query', async () => {
+    const cameraManager = createCameraManager();
+    vi.mocked(cameraManager.getStore().getVisibleCameraCount).mockReturnValue(2);
+    vi.mocked(cameraManager.getStore().getVisibleCameraIDs).mockReturnValue(
+      new Set(['camera_1', 'camera_2']),
+    );
+
+    const api = createCardAPI();
+    vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+
+    const hass = createHASS();
+    vi.mocked(api.getHASSManager()).getHASS.mockReturnValue(hass);
+
+    const media = generateViewMediaArray({ count: 5 });
+    vi.mocked(cameraManager.executeMediaQueries).mockResolvedValue(media);
+
+    const manager = new ViewManager(api);
+    const query = new EventMediaQueries([
+      {
+        type: QueryType.Event,
+        cameraIDs: new Set(['camera_1', 'camera_2']),
+        hasClip: true,
+      },
+    ]);
+
+    manager.setView(
+      createView({
+        view: 'clip',
+        camera: 'camera_2',
+        query: query,
+      }),
+    );
+
+    await manager.setViewWithNewDisplayMode('single');
+
+    expect(manager.getView()?.queryResults?.getResults()).toBe(media);
+    expect(cameraManager.executeMediaQueries).toBeCalledWith(
+      expect.arrayContaining([
+        expect.objectContaining({
+          type: 'event-query',
+          cameraIDs: new Set(['camera_2']),
+          hasClip: true,
+        }),
+      ]),
+    );
+  });
+
+  it('should set display mode to single and handle failed new query', async () => {
+    const cameraManager = createCameraManager();
+    vi.mocked(cameraManager.getStore().getVisibleCameraCount).mockReturnValue(2);
+    vi.mocked(cameraManager.getStore().getVisibleCameraIDs).mockReturnValue(
+      new Set(['camera_1', 'camera_2']),
+    );
+
+    const api = createCardAPI();
+    vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+
+    const manager = new ViewManager(api);
+    const query = new EventMediaQueries([
+      {
+        type: QueryType.Event,
+        cameraIDs: new Set(['camera_1', 'camera_2']),
+        hasClip: true,
+      },
+    ]);
+
+    const originalView = createView({
+      view: 'clip',
+      camera: 'camera_2',
+      query: query,
+    });
+    manager.setView(originalView);
+
+    // Query execution fails / returns null.
+    vi.mocked(cameraManager.executeMediaQueries).mockResolvedValue(null);
+
+    await manager.setViewWithNewDisplayMode('single');
+
+    expect(manager.getView()).toBe(originalView);
+  });
+
+  it('should set display mode and handle empty new query results', async () => {
+    const cameraManager = createCameraManager();
+    vi.mocked(cameraManager.getStore().getVisibleCameraCount).mockReturnValue(2);
+    vi.mocked(cameraManager.getStore().getVisibleCameraIDs).mockReturnValue(
+      new Set(['camera_1', 'camera_2']),
+    );
+
+    const api = createCardAPI();
+    vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+    vi.mocked(api.getHASSManager().getHASS).mockReturnValue(createHASS());
+
+    const manager = new ViewManager(api);
+
+    const query = new EventMediaQueries([
+      {
+        type: QueryType.Event,
+        cameraIDs: new Set(['camera_1']),
+        hasClip: true,
+      },
+    ]);
+    const originalView = createView({
+      view: 'clip',
+      camera: 'camera_2',
+      query: query,
+    });
+    manager.setView(originalView);
+
+    await manager.setViewWithNewDisplayMode('grid');
+
+    vi.mocked(cameraManager.executeMediaQueries).mockResolvedValue(null);
+
+    // Empty queries will not be executed, so view will not be changed.
+    expect(manager.getView()?.displayMode).toBeNull();
+  });
+});
+
+describe('ViewManager.setViewWithSubstream', () => {
+  it('should set new equal view with no dependencies', () => {
+    const view = createView({
+      view: 'live',
+      camera: 'camera',
+    });
+    vi.mocked(getAllDependentCameras).mockReturnValue(new Set(['camera']));
+
+    const manager = new ViewManager(createCardAPI());
+    manager.setView(view);
+    manager.setViewWithSubstream();
+
+    expect(manager.getView()?.camera).toBe(view.camera);
+    expect(manager.getView()?.view).toBe(view.view);
+    expect(manager.getView()?.context).toEqual(view.context);
+  });
+
+  it('should set new view with next substream', () => {
+    const view = createView({
+      view: 'live',
+      camera: 'camera',
+    });
+    vi.mocked(getAllDependentCameras).mockReturnValue(new Set(['camera', 'camera2']));
+
+    const manager = new ViewManager(createCardAPI());
+    manager.setView(view);
+    manager.setViewWithSubstream();
+
+    expect(manager.getView()?.context?.live?.overrides).toEqual(
+      new Map([['camera', 'camera2']]),
+    );
+  });
+
+  it('should set new view with next substream when view has invalid substream', () => {
+    const view = createView({
+      view: 'live',
+      camera: 'camera',
+      context: {
+        live: {
+          overrides: new Map([['camera', 'camera-that-does-not-exist']]),
+        },
+      },
+    });
+    vi.mocked(getAllDependentCameras).mockReturnValue(new Set(['camera', 'camera2']));
+
+    const manager = new ViewManager(createCardAPI());
+    manager.setView(view);
+    manager.setViewWithSubstream();
+
+    expect(manager.getView()?.context?.live?.overrides).toEqual(
+      new Map([['camera', 'camera']]),
+    );
+  });
+
+  it('should set new view with selected substream', () => {
+    const view = createView({
+      view: 'live',
+      camera: 'camera',
+    });
+
+    const manager = new ViewManager(createCardAPI());
+    manager.setView(view);
+    manager.setViewWithSubstream('substream');
+
+    expect(manager.getView()?.context?.live?.overrides).toEqual(
+      new Map([['camera', 'substream']]),
+    );
+  });
+
+  it('should not set view with next substream without an existing view', () => {
+    const manager = new ViewManager(createCardAPI());
+    manager.setViewWithSubstream();
+    expect(manager.getView()).toBeNull();
+  });
+
+  it('should not set view with selected substream without an existing view', () => {
+    const manager = new ViewManager(createCardAPI());
+    manager.setViewWithSubstream('substream');
+    expect(manager.getView()).toBeNull();
+  });
+
+  it('should not set view without substream without an existing view', () => {
+    const manager = new ViewManager(createCardAPI());
+    manager.setViewWithoutSubstream();
+    expect(manager.getView()).toBeNull();
+  });
+
+  it('should set new view without substream', () => {
+    const view = createView({
+      view: 'live',
+      camera: 'camera',
+      context: {
+        live: {
+          overrides: new Map([['camera', 'camera']]),
+        },
+      },
+    });
+
+    const manager = new ViewManager(createCardAPI());
+    manager.setView(view);
+    manager.setViewWithoutSubstream();
+
+    expect(manager.getView()?.context?.live?.overrides).toEqual(new Map());
+  });
+
+  it('should set new view without substream', () => {
+    const view = createView({
+      view: 'live',
+      camera: 'camera',
+      context: {
+        live: {
+          overrides: new Map([['camera-2', 'camera-3']]),
+        },
+      },
+    });
+
+    const manager = new ViewManager(createCardAPI());
+    manager.setView(view);
+    manager.setViewWithoutSubstream();
+
+    expect(manager.getView()?.context?.live?.overrides).toEqual(
+      view.context?.live?.overrides,
+    );
+  });
+});
+
+describe('ViewManager.isViewSupportedByCamera', () => {
+  it.each([
+    ['live' as const, true],
+    ['image' as const, true],
+    ['diagnostics' as const, true],
+    ['clip' as const, false],
+    ['clips' as const, false],
+    ['snapshot' as const, false],
+    ['snapshots' as const, false],
+    ['recording' as const, false],
+    ['recordings' as const, false],
+    ['timeline' as const, false],
+    ['media' as const, false],
+  ])('%s', (viewName: FrigateCardView, expected: boolean) => {
+    const api = createCardAPI();
+    const cameraManager = createCameraManager();
+    vi.mocked(cameraManager.getCameraCapabilities).mockReturnValue({
+      canFavoriteEvents: false,
+      canFavoriteRecordings: false,
+      canSeek: false,
+      supportsClips: false,
+      supportsRecordings: false,
+      supportsSnapshots: false,
+      supportsTimeline: false,
+    });
+    vi.mocked(api.getCameraManager).mockReturnValue(cameraManager);
+    const manager = new ViewManager(api);
+
+    expect(manager.isViewSupportedByCamera('camera', viewName)).toBe(expected);
+  });
+});
diff --git a/tests/utils/diagnostics.test.ts b/tests/utils/diagnostics.test.ts
new file mode 100644
index 00000000..d56a6080
--- /dev/null
+++ b/tests/utils/diagnostics.test.ts
@@ -0,0 +1,137 @@
+import { HassConfig } from 'home-assistant-js-websocket';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { getLanguage } from '../../src/localize/localize';
+import { getDiagnostics } from '../../src/utils/diagnostics.js';
+import { getAllDevices } from '../../src/utils/ha/device-registry.js';
+import { createHASS } from '../test-utils';
+
+vi.mock('../../package.json', () => ({
+  default: {
+    version: '5.2.0',
+    gitVersion: '5.2.0-dev+g4cf13b1',
+    buildDate: 'Tue, 19 Sep 2023 04:59:27 GMT',
+    gitDate: 'Wed, 6 Sep 2023 21:27:28 -0700',
+  },
+}));
+vi.mock('../../src/camera-manager/manager.js');
+vi.mock('../../src/utils/ha');
+vi.mock('../../src/localize/localize.js');
+vi.mock('../../src/utils/ha/device-registry');
+
+// @vitest-environment jsdom
+describe('getDiagnostics', () => {
+  const now = new Date('2023-10-01T21:53Z');
+  const hass = createHASS();
+  hass.config = { version: '2023.9.0' } as HassConfig;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(now);
+
+    vi.mocked(getLanguage).mockReturnValue('en');
+    vi.stubGlobal('navigator', { userAgent: 'FrigateCardTest/1.0' });
+
+    vi.mocked(getAllDevices).mockResolvedValue([
+      {
+        model: '4.0.0/0.13.0-aded314',
+        config_entries: [
+          'ac4e79d258449a83bc0cf6d47a021c46',
+          'b03e70c659d58ae2ce7f2dc76fed2929',
+        ],
+        manufacturer: 'Frigate',
+      },
+    ]);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it('should fetch diagnostics', async () => {
+    expect(
+      await getDiagnostics(hass, {
+        cameras: [{ camera_entity: 'camera.office' }],
+      }),
+    ).toEqual({
+      browser: 'FrigateCardTest/1.0',
+      card_version: '5.2.0',
+      config: {
+        cameras: [{ camera_entity: 'camera.office' }],
+      },
+      frigate_versions: {
+        ac4e79d258449a83bc0cf6d47a021c46: '4.0.0/0.13.0-aded314',
+        b03e70c659d58ae2ce7f2dc76fed2929: '4.0.0/0.13.0-aded314',
+      },
+      git: {
+        build_date: 'Tue, 19 Sep 2023 04:59:27 GMT',
+        build_version: '5.2.0-dev+g4cf13b1',
+        commit_date: 'Wed, 6 Sep 2023 21:27:28 -0700',
+      },
+      date: now,
+      lang: 'en',
+      ha_version: '2023.9.0',
+      timezone: expect.anything(),
+    });
+  });
+
+  it('should fetch diagnostics without hass or config', async () => {
+    expect(await getDiagnostics()).toEqual({
+      browser: 'FrigateCardTest/1.0',
+      card_version: '5.2.0',
+      git: {
+        build_date: 'Tue, 19 Sep 2023 04:59:27 GMT',
+        build_version: '5.2.0-dev+g4cf13b1',
+        commit_date: 'Wed, 6 Sep 2023 21:27:28 -0700',
+      },
+      date: now,
+      lang: 'en',
+      timezone: expect.anything(),
+    });
+  });
+
+  it('should fetch diagnostics without device model', async () => {
+    vi.mocked(getAllDevices).mockResolvedValue([
+      {
+        model: null,
+        config_entries: [
+          'ac4e79d258449a83bc0cf6d47a021c46',
+          'b03e70c659d58ae2ce7f2dc76fed2929',
+        ],
+        manufacturer: 'Frigate',
+      },
+    ]);
+
+    expect(await getDiagnostics(hass)).toEqual({
+      browser: 'FrigateCardTest/1.0',
+      card_version: '5.2.0',
+      git: {
+        build_date: 'Tue, 19 Sep 2023 04:59:27 GMT',
+        build_version: '5.2.0-dev+g4cf13b1',
+        commit_date: 'Wed, 6 Sep 2023 21:27:28 -0700',
+      },
+      ha_version: '2023.9.0',
+      date: now,
+      lang: 'en',
+      timezone: expect.anything(),
+    });
+  });
+
+  it('should fetch diagnostics if getAllDevices errors', async () => {
+    vi.mocked(getAllDevices).mockRejectedValue(new Error());
+
+    expect(await getDiagnostics(hass)).toEqual({
+      browser: 'FrigateCardTest/1.0',
+      card_version: '5.2.0',
+      git: {
+        build_date: 'Tue, 19 Sep 2023 04:59:27 GMT',
+        build_version: '5.2.0-dev+g4cf13b1',
+        commit_date: 'Wed, 6 Sep 2023 21:27:28 -0700',
+      },
+      ha_version: '2023.9.0',
+      date: now,
+      lang: 'en',
+      timezone: expect.anything(),
+    });
+  });
+});
diff --git a/tests/utils/media-info-controller.test.ts b/tests/utils/media-info-controller.test.ts
deleted file mode 100644
index 2815efe7..00000000
--- a/tests/utils/media-info-controller.test.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { beforeEach, describe, expect, it } from 'vitest';
-import { MediaLoadedInfoController } from '../../src/utils/media-info-controller';
-import { createMediaLoadedInfo } from '../test-utils.js';
-
-describe('MediaLoadedInfoController', () => {
-  let controller: MediaLoadedInfoController;
-  beforeEach(() => {
-    controller = new MediaLoadedInfoController();
-  });
-
-  it('should set', () => {
-    const info = createMediaLoadedInfo();
-    controller.set(info);
-    expect(controller.has());
-    expect(controller.get()).toBe(info);
-  });
-
-  it('should get last known', () => {
-    const info = createMediaLoadedInfo();
-    controller.set(info);
-    expect(controller.has()).toBeTruthy();
-    controller.clear();
-    expect(controller.has()).toBeFalsy();
-    expect(controller.getLastKnown()).toBe(info);
-  });
-});
diff --git a/tests/utils/media-to-view.test.ts b/tests/utils/media-to-view.test.ts
index 5e8974d5..a1c5d3f6 100644
--- a/tests/utils/media-to-view.test.ts
+++ b/tests/utils/media-to-view.test.ts
@@ -12,7 +12,6 @@ import { ViewMedia } from '../../src/view/media';
 import { EventMediaQueries } from '../../src/view/media-queries';
 import {
   createCameraManager,
-  createHASS,
   createPerformanceConfig,
   createView,
   TestViewMedia,
@@ -70,7 +69,6 @@ describe('changeViewToRecentEventsForCameraAndDependents', () => {
 
     await changeViewToRecentEventsForCameraAndDependents(
       elementHandler.element,
-      createHASS(),
       cameraManager,
       {},
       createView(),
@@ -84,7 +82,6 @@ describe('changeViewToRecentEventsForCameraAndDependents', () => {
 
     await changeViewToRecentEventsForCameraAndDependents(
       elementHandler.element,
-      createHASS(),
       cameraManager,
       {},
       createView(),
@@ -102,7 +99,6 @@ describe('changeViewToRecentEventsForCameraAndDependents', () => {
 
     await changeViewToRecentEventsForCameraAndDependents(
       elementHandler.element,
-      createHASS(),
       cameraManager,
       {},
       createView(),
@@ -122,7 +118,6 @@ describe('changeViewToRecentEventsForCameraAndDependents', () => {
 
     await changeViewToRecentEventsForCameraAndDependents(
       elementHandler.element,
-      createHASS(),
       cameraManager,
       {},
       createView(),
@@ -144,7 +139,6 @@ describe('changeViewToRecentEventsForCameraAndDependents', () => {
 
     await changeViewToRecentEventsForCameraAndDependents(
       elementHandler.element,
-      createHASS(),
       cameraManager,
       {},
       createView(),
@@ -158,7 +152,6 @@ describe('changeViewToRecentEventsForCameraAndDependents', () => {
 
     await changeViewToRecentEventsForCameraAndDependents(
       createElementListenForView().element,
-      createHASS(),
       cameraManager,
       {
         performance: createPerformanceConfig({
@@ -187,7 +180,6 @@ describe('changeViewToRecentEventsForCameraAndDependents', () => {
 
       await changeViewToRecentEventsForCameraAndDependents(
         createElementListenForView().element,
-        createHASS(),
         cameraManager,
         {},
         createView(),
@@ -220,7 +212,6 @@ describe('executeMediaQueryForView', () => {
     expect(
       await executeMediaQueryForView(
         elementHandler.element,
-        createHASS(),
         cameraManager,
         createView(),
         new EventMediaQueries(),
@@ -243,7 +234,6 @@ describe('executeMediaQueryForView', () => {
 
     const view = await executeMediaQueryForView(
       elementHandler.element,
-      createHASS(),
       cameraManager,
       createView(),
       new EventMediaQueries(
@@ -276,7 +266,6 @@ describe('executeMediaQueryForView', () => {
 
     const view = await executeMediaQueryForView(
       elementHandler.element,
-      createHASS(),
       cameraManager,
       createView(),
       new EventMediaQueries(
@@ -306,7 +295,6 @@ describe('changeViewToRecentRecordingForCameraAndDependents', () => {
 
     await changeViewToRecentRecordingForCameraAndDependents(
       elementHandler.element,
-      createHASS(),
       cameraManager,
       {},
       createView(),
@@ -320,7 +308,6 @@ describe('changeViewToRecentRecordingForCameraAndDependents', () => {
 
     await changeViewToRecentRecordingForCameraAndDependents(
       elementHandler.element,
-      createHASS(),
       cameraManager,
       {},
       createView(),
@@ -338,7 +325,6 @@ describe('changeViewToRecentRecordingForCameraAndDependents', () => {
 
     await changeViewToRecentRecordingForCameraAndDependents(
       elementHandler.element,
-      createHASS(),
       cameraManager,
       {},
       createView(),
@@ -355,7 +341,6 @@ describe('changeViewToRecentRecordingForCameraAndDependents', () => {
 
     await changeViewToRecentRecordingForCameraAndDependents(
       elementHandler.element,
-      createHASS(),
       cameraManager,
       {},
       createView(),
@@ -373,7 +358,6 @@ describe('changeViewToRecentRecordingForCameraAndDependents', () => {
 
     await changeViewToRecentRecordingForCameraAndDependents(
       createElementListenForView().element,
-      createHASS(),
       cameraManager,
       {
         performance: createPerformanceConfig({
diff --git a/tests/utils/menu-controller.test.ts b/tests/utils/menu-controller.test.ts
index ef193ef0..8c3dca47 100644
--- a/tests/utils/menu-controller.test.ts
+++ b/tests/utils/menu-controller.test.ts
@@ -13,8 +13,9 @@ import {
   ViewDisplayMode,
 } from '../../src/types';
 import { createFrigateCardCustomAction } from '../../src/utils/action';
+import { MediaPlayerManager } from '../../src/utils/card-controller/media-player-manager';
+import { MicrophoneManager } from '../../src/utils/card-controller/microphone-manager';
 import { MenuButtonController } from '../../src/utils/menu-controller';
-import { MicrophoneController } from '../../src/utils/microphone';
 import { ViewMedia } from '../../src/view/media';
 import { MediaQueriesResults } from '../../src/view/media-queries-results';
 import { View } from '../../src/view/view';
@@ -22,6 +23,7 @@ import {
   createCameraCapabilities,
   createCameraConfig,
   createCameraManager,
+  createCardAPI,
   createConfig,
   createHASS,
   createMediaCapabilities,
@@ -31,7 +33,8 @@ import {
 } from '../test-utils';
 
 vi.mock('../../src/camera-manager/manager.js');
-vi.mock('../../src/utils/microphone');
+vi.mock('../../src/utils/media-player-controller.js');
+vi.mock('../../src/utils/card-controller/microphone-manager.js');
 vi.mock('screenfull');
 
 const calculateButtons = (
@@ -43,9 +46,9 @@ const calculateButtons = (
     view?: View;
     expanded?: boolean;
     currentMediaLoadedInfo?: MediaLoadedInfo | null;
-    mediaPlayers?: string[];
-    cameraURL?: string | null;
-    microphoneController?: MicrophoneController;
+    mediaPlayerController?: MediaPlayerManager;
+    showCameraUIButton?: boolean;
+    microphoneManager?: MicrophoneManager;
   },
 ): MenuButton[] => {
   return controller.calculateButtons(
@@ -62,9 +65,9 @@ const calculateButtons = (
     options?.expanded ?? false,
     {
       currentMediaLoadedInfo: options?.currentMediaLoadedInfo,
-      mediaPlayers: options?.mediaPlayers,
-      cameraURL: options?.cameraURL,
-      microphoneController: options?.microphoneController,
+      mediaPlayerController: options?.mediaPlayerController,
+      showCameraUIButton: options?.showCameraUIButton,
+      microphoneManager: options?.microphoneManager,
     },
   );
 };
@@ -265,7 +268,7 @@ describe('MenuButtonController', () => {
     // Return different metadata depending on the camera to test multiple code
     // paths.
     mock<CameraManager>(cameraManager).getCameraMetadata.mockImplementation(
-      (_hass: unknown, cameraID: string): CameraManagerCameraMetadata | null => {
+      (cameraID: string): CameraManagerCameraMetadata | null => {
         return cameraID === 'camera-1'
           ? {
               title: 'title',
@@ -685,7 +688,7 @@ describe('MenuButtonController', () => {
 
   it('should have camera UI button', () => {
     const buttons = calculateButtons(controller, {
-      cameraURL: 'http://frigate.domain',
+      showCameraUIButton: true,
     });
     expect(buttons).toContainEqual({
       icon: 'mdi:web',
@@ -698,9 +701,9 @@ describe('MenuButtonController', () => {
   });
 
   it('should have microphone button', () => {
-    const microphoneController = new MicrophoneController();
+    const microphoneManager = new MicrophoneManager(createCardAPI());
     const buttons = calculateButtons(controller, {
-      microphoneController: microphoneController,
+      microphoneManager: microphoneManager,
       currentMediaLoadedInfo: createMediaLoadedInfo({
         capabilities: {
           supports2WayAudio: true,
@@ -730,9 +733,9 @@ describe('MenuButtonController', () => {
   });
 
   it('should not have microphone button when media does not support it', () => {
-    const microphoneController = new MicrophoneController();
+    const microphoneManager = new MicrophoneManager(createCardAPI());
     const buttons = calculateButtons(controller, {
-      microphoneController: microphoneController,
+      microphoneManager: microphoneManager,
       currentMediaLoadedInfo: createMediaLoadedInfo({
         capabilities: {
           supports2WayAudio: false,
@@ -746,10 +749,10 @@ describe('MenuButtonController', () => {
   });
 
   it('should have microphone button when microphone forbidden', () => {
-    const microphoneController = new MicrophoneController();
-    mock<MicrophoneController>(microphoneController).isForbidden.mockReturnValue(true);
+    const microphoneManager = new MicrophoneManager(createCardAPI());
+    mock<MicrophoneManager>(microphoneManager).isForbidden.mockReturnValue(true);
     const buttons = calculateButtons(controller, {
-      microphoneController: microphoneController,
+      microphoneManager: microphoneManager,
       currentMediaLoadedInfo: createMediaLoadedInfo({
         capabilities: {
           supports2WayAudio: true,
@@ -768,10 +771,10 @@ describe('MenuButtonController', () => {
   });
 
   it('should have microphone button when microphone muted', () => {
-    const microphoneController = new MicrophoneController();
-    mock<MicrophoneController>(microphoneController).isMuted.mockReturnValue(true);
+    const microphoneManager = new MicrophoneManager(createCardAPI());
+    mock<MicrophoneManager>(microphoneManager).isMuted.mockReturnValue(true);
     const buttons = calculateButtons(controller, {
-      microphoneController: microphoneController,
+      microphoneManager: microphoneManager,
       currentMediaLoadedInfo: createMediaLoadedInfo({
         capabilities: {
           supports2WayAudio: true,
@@ -798,10 +801,10 @@ describe('MenuButtonController', () => {
   });
 
   it('should have microphone button when microphone muted with toggle type', () => {
-    const microphoneController = new MicrophoneController();
-    mock<MicrophoneController>(microphoneController).isMuted.mockReturnValue(true);
+    const microphoneManager = new MicrophoneManager(createCardAPI());
+    mock<MicrophoneManager>(microphoneManager).isMuted.mockReturnValue(true);
     const buttons = calculateButtons(controller, {
-      microphoneController: microphoneController,
+      microphoneManager: microphoneManager,
       currentMediaLoadedInfo: createMediaLoadedInfo({
         capabilities: {
           supports2WayAudio: true,
@@ -827,10 +830,10 @@ describe('MenuButtonController', () => {
   });
 
   it('should have microphone button when microphone unmuted with toggle type', () => {
-    const microphoneController = new MicrophoneController();
-    mock<MicrophoneController>(microphoneController).isMuted.mockReturnValue(false);
+    const microphoneManager = new MicrophoneManager(createCardAPI());
+    mock<MicrophoneManager>(microphoneManager).isMuted.mockReturnValue(false);
     const buttons = calculateButtons(controller, {
-      microphoneController: microphoneController,
+      microphoneManager: microphoneManager,
       currentMediaLoadedInfo: createMediaLoadedInfo({
         capabilities: {
           supports2WayAudio: true,
@@ -932,10 +935,13 @@ describe('MenuButtonController', () => {
         ],
       ]),
     });
+    const mediaPlayerController = mock<MediaPlayerManager>();
+    mediaPlayerController.hasMediaPlayers.mockReturnValue(true);
+    mediaPlayerController.getMediaPlayers.mockReturnValue(['media_player.tv']);
 
     const buttons = calculateButtons(controller, {
       cameraManager: cameraManager,
-      mediaPlayers: ['media_player.tv'],
+      mediaPlayerController: mediaPlayerController,
       hass: createHASS({
         'media_player.tv': createStateEntity({ entity_id: 'media_player.tv' }),
       }),
@@ -984,9 +990,13 @@ describe('MenuButtonController', () => {
         ],
       ]),
     });
+    const mediaPlayerController = mock<MediaPlayerManager>();
+    mediaPlayerController.hasMediaPlayers.mockReturnValue(true);
+    mediaPlayerController.getMediaPlayers.mockReturnValue(['not_a_real_player']);
+
     const buttons = calculateButtons(controller, {
       cameraManager: cameraManager,
-      mediaPlayers: ['player'],
+      mediaPlayerController: mediaPlayerController,
       hass: createHASS(),
     });
 
@@ -1001,9 +1011,9 @@ describe('MenuButtonController', () => {
           enabled: true,
           selected: false,
           icon: 'mdi:bookmark',
-          entity: 'player',
+          entity: 'not_a_real_player',
           state_color: false,
-          title: 'player',
+          title: 'not_a_real_player',
           disabled: true,
         },
       ],
diff --git a/tests/utils/microphone.test.ts b/tests/utils/microphone.test.ts
deleted file mode 100644
index 36b5197e..00000000
--- a/tests/utils/microphone.test.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { describe, it, expect, afterEach, beforeEach, vi } from 'vitest';
-import { MicrophoneController } from '../../src/utils/microphone';
-import { mock } from 'vitest-mock-extended';
-
-const navigatorMock = {
-  mediaDevices: {
-    getUserMedia: vi.fn(),
-  },
-};
-
-// @vitest-environment jsdom
-describe('MicrophoneController', () => {
-  beforeEach(() => {
-    vi.stubGlobal('navigator', navigatorMock);
-  });
-
-  afterEach(() => {
-    vi.resetAllMocks();
-    vi.unstubAllGlobals;
-  });
-
-  const createMockStream = (mute?: boolean): MediaStream => {
-    const stream = mock<MediaStream>();
-    const track = mock<MediaStreamTrack>();
-    track.enabled = !mute;
-    stream.getTracks.mockImplementation(() => [track]);
-    return stream;
-  };
-
-  it('should be muted on creation', () => {
-    const controller = new MicrophoneController();
-    expect(controller).toBeTruthy();
-    expect(controller.isMuted()).toBeTruthy();
-  });
-
-  it('should be undefined without creation', () => {
-    const controller = new MicrophoneController();
-    expect(controller.getStream()).toBeUndefined();
-  });
-
-  it('should connect', async () => {
-    const controller = new MicrophoneController();
-    const stream = createMockStream();
-    navigatorMock.mediaDevices.getUserMedia.mockReturnValue(stream);
-    await controller.connect();
-    expect(controller.isConnected()).toBeTruthy();
-    expect(controller.getStream()).toBe(stream);
-    expect(controller.isMuted()).toBeTruthy();
-  });
-
-  it('should be forbidden when permission denied', async () => {
-    // Don't actually log messages to the console during the test.
-    vi.spyOn(global.console, 'warn').mockReturnValue(undefined);
-    const controller = new MicrophoneController();
-    navigatorMock.mediaDevices.getUserMedia.mockRejectedValue(new Error());
-    await controller.connect();
-    expect(controller.isConnected()).toBeFalsy();
-    expect(controller.isForbidden()).toBeTruthy();
-  });
-
-  it('should mute', async () => {
-    const controller = new MicrophoneController();
-    navigatorMock.mediaDevices.getUserMedia.mockReturnValue(createMockStream());
-    await controller.connect();
-    controller.mute();
-    expect(controller.isMuted()).toBeTruthy();
-
-    controller.unmute();
-    expect(controller.isMuted()).toBeFalsy();
-  });
-
-  it('should be unmuted on creation if unmute called first', async () => {
-    const controller = new MicrophoneController();
-    controller.unmute();
-    navigatorMock.mediaDevices.getUserMedia.mockReturnValue(createMockStream());
-    await controller.connect();
-    expect(controller.isMuted()).toBeFalsy();
-  });
-
-  it('should disconnect', async () => {
-    const controller = new MicrophoneController();
-    navigatorMock.mediaDevices.getUserMedia.mockReturnValue(createMockStream());
-    await controller.connect();
-    expect(controller.isConnected()).toBeTruthy();
-
-    await controller.disconnect();
-    expect(controller.isConnected()).toBeFalsy();
-  });
-
-  it('should automatically disconnect', async () => {
-    const seconds = 10;
-    vi.useFakeTimers();
-
-    const controller = new MicrophoneController(seconds);
-    navigatorMock.mediaDevices.getUserMedia.mockReturnValue(createMockStream());
-
-    await controller.connect();
-    expect(controller.isConnected()).toBeTruthy();
-
-    vi.advanceTimersByTime(seconds * 1000);
-
-    expect(controller.isConnected()).toBeFalsy();
-    vi.useRealTimers();
-  });
-});
diff --git a/tests/utils/querystring.test.ts b/tests/utils/querystring.test.ts
deleted file mode 100644
index 5b04ddad..00000000
--- a/tests/utils/querystring.test.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { getActionsFromQueryString } from '../../src/utils/querystring';
-
-// @vitest-environment jsdom
-describe('getActionsFromQueryString', () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('should reject malformed query string', () => {
-    expect(getActionsFromQueryString(`?BOGUS_KEY=BOGUS_VALUE`)).toEqual([]);
-  });
-
-  it('should accept colon as delimiter', () => {
-    expect(getActionsFromQueryString(`?frigate-card-action:id:clips=`)).toEqual([
-      {
-        action: 'fire-dom-event',
-        card_id: 'id',
-        frigate_card_action: 'clips',
-      },
-    ]);
-  });
-
-  describe('should get simple action from query string', () => {
-    it.each([
-      ['camera_ui' as const],
-      ['clip' as const],
-      ['clips' as const],
-      ['default' as const],
-      ['diagnostics' as const],
-      ['download' as const],
-      ['expand' as const],
-      ['image' as const],
-      ['live' as const],
-      ['menu_toggle' as const],
-      ['recording' as const],
-      ['recordings' as const],
-      ['snapshot' as const],
-      ['snapshots' as const],
-      ['timeline' as const],
-    ])('%s', (action: string) => {
-      expect(getActionsFromQueryString(`?frigate-card-action.id.${action}=`)).toEqual([
-        {
-          action: 'fire-dom-event',
-          card_id: 'id',
-          frigate_card_action: action,
-        },
-      ]);
-    });
-  });
-
-  it('should get camera_select action', () => {
-    expect(
-      getActionsFromQueryString(`?frigate-card-action.id.camera_select=camera.foo`),
-    ).toEqual([
-      {
-        action: 'fire-dom-event',
-        card_id: 'id',
-        frigate_card_action: 'camera_select',
-        camera: 'camera.foo',
-      },
-    ]);
-  });
-
-  it('should get live_substream_select action', () => {
-    expect(
-      getActionsFromQueryString(
-        `?frigate-card-action.id.live_substream_select=camera.bar`,
-      ),
-    ).toEqual([
-      {
-        action: 'fire-dom-event',
-        card_id: 'id',
-        frigate_card_action: 'live_substream_select',
-        camera: 'camera.bar',
-      },
-    ]);
-  });
-
-  describe('should reject value-based actions without value', () => {
-    it.each([['camera_select' as const], ['live_substream_select' as const]])(
-      '%s',
-      (action: string) => {
-        expect(getActionsFromQueryString(`?frigate-card-action.id.${action}=`)).toEqual(
-          [],
-        );
-      },
-    );
-  });
-
-  it('should log unknown but correctly formed action', () => {
-    const spy = vi.spyOn(global.console, 'warn').mockImplementation(() => true);
-
-    expect(
-      getActionsFromQueryString(`?frigate-card-action.id.not_a_real_action}=`),
-    ).toEqual([]);
-
-    expect(spy).toBeCalledWith(
-      'Frigate card received unknown card action in query string: not_a_real_action',
-    );
-  });
-});
diff --git a/tests/utils/substream.test.ts b/tests/utils/substream.test.ts
index bc0227b1..873dfe1b 100644
--- a/tests/utils/substream.test.ts
+++ b/tests/utils/substream.test.ts
@@ -1,74 +1,8 @@
-import { describe, expect, it, vi } from 'vitest';
-import { getAllDependentCameras } from '../../src/utils/camera';
-import {
-  createViewWithNextStream,
-  createViewWithSelectedSubstream,
-  createViewWithoutSubstream,
-  hasSubstream,
-} from '../../src/utils/substream';
+import { describe, expect, it } from 'vitest';
+import { getStreamCameraID, hasSubstream } from '../../src/utils/substream';
 import { View } from '../../src/view/view';
-import { createCameraManager } from '../test-utils';
 
-vi.mock('../../src/camera-manager/manager.js');
-vi.mock('../../src/utils/camera');
-
-describe('createViewWithSelectedSubstream', () => {
-  it('should create view with selected substream', () => {
-    const view = new View({ view: 'live', camera: 'camera' });
-    const newView = createViewWithSelectedSubstream(view, 'substream');
-    expect(newView?.context?.live?.overrides).toEqual(
-      new Map([['camera', 'substream']]),
-    );
-  });
-
-  it('should create view with selected substream with existing overrides', () => {
-    const view = new View({
-      view: 'live',
-      camera: 'camera',
-      context: {
-        live: {
-          overrides: new Map([['camera', 'camera']]),
-        },
-      },
-    });
-    const newView = createViewWithSelectedSubstream(view, 'substream');
-    expect(newView?.context?.live?.overrides).toEqual(
-      new Map([['camera', 'substream']]),
-    );
-  });
-});
-
-describe('createViewWithoutSubstream', () => {
-  it('should create view without substream', () => {
-    const view = new View({
-      view: 'live',
-      camera: 'camera',
-      context: {
-        live: {
-          overrides: new Map([['camera', 'camera']]),
-        },
-      },
-    });
-    const newView = createViewWithoutSubstream(view);
-    expect(newView?.context?.live?.overrides).toEqual(new Map());
-  });
-
-  it('should create view with overrides untouched', () => {
-    const view = new View({
-      view: 'live',
-      camera: 'camera-1',
-      context: {
-        live: {
-          overrides: new Map([['camera-2', 'camera-3']]),
-        },
-      },
-    });
-    const newView = createViewWithoutSubstream(view);
-    expect(newView?.context?.live?.overrides).toEqual(view.context?.live?.overrides);
-  });
-});
-
-describe('hasSubstream', () => {
+describe('hasSubstream/getStreamCameraID', () => {
   it('should detect substream', () => {
     const view = new View({
       view: 'live',
@@ -80,6 +14,7 @@ describe('hasSubstream', () => {
       },
     });
     expect(hasSubstream(view)).toBeTruthy();
+    expect(getStreamCameraID(view)).toBe('camera2');
   });
   it('should not detect substream when absent', () => {
     const view = new View({
@@ -87,6 +22,7 @@ describe('hasSubstream', () => {
       camera: 'camera',
     });
     expect(hasSubstream(view)).toBeFalsy();
+    expect(getStreamCameraID(view)).toBe('camera');
   });
   it('should not detect substream when main stream', () => {
     const view = new View({
@@ -99,60 +35,6 @@ describe('hasSubstream', () => {
       },
     });
     expect(hasSubstream(view)).toBeFalsy();
-  });
-});
-
-describe('createViewWithNextStream', () => {
-  it('should create new equal view with no dependencies', () => {
-    const view = new View({
-      view: 'live',
-      camera: 'camera',
-    });
-    vi.mocked(getAllDependentCameras).mockReturnValue(new Set(['camera']));
-    const cameraManager = createCameraManager();
-    const newView = createViewWithNextStream(cameraManager, view);
-    expect(newView.camera).toBe(view.camera);
-    expect(newView.view).toBe(view.view);
-    expect(newView.context).toEqual(view.context);
-  });
-  it('should create new view with next stream', () => {
-    const view = new View({
-      view: 'live',
-      camera: 'camera',
-    });
-    vi.mocked(getAllDependentCameras).mockReturnValue(new Set(['camera', 'camera2']));
-    const cameraManager = createCameraManager();
-    const newView = createViewWithNextStream(cameraManager, view);
-    expect(newView.context?.live?.overrides).toEqual(new Map([['camera', 'camera2']]));
-  });
-  it('should create new view with next stream that cycles back', () => {
-    const view = new View({
-      view: 'live',
-      camera: 'camera',
-      context: {
-        live: {
-          overrides: new Map([['camera', 'camera2']]),
-        },
-      },
-    });
-    vi.mocked(getAllDependentCameras).mockReturnValue(new Set(['camera', 'camera2']));
-    const cameraManager = createCameraManager();
-    const newView = createViewWithNextStream(cameraManager, view);
-    expect(newView.context?.live?.overrides).toEqual(new Map([['camera', 'camera']]));
-  });
-  it('should create new view with first stream with invalid substream', () => {
-    const view = new View({
-      view: 'live',
-      camera: 'camera',
-      context: {
-        live: {
-          overrides: new Map([['camera', 'camera-that-does-not-exist']]),
-        },
-      },
-    });
-    vi.mocked(getAllDependentCameras).mockReturnValue(new Set(['camera', 'camera2']));
-    const cameraManager = createCameraManager();
-    const newView = createViewWithNextStream(cameraManager, view);
-    expect(newView.context?.live?.overrides).toEqual(new Map([['camera', 'camera']]));
+    expect(getStreamCameraID(view)).toBe('camera');
   });
 });
diff --git a/tests/utils/timer.test.ts b/tests/utils/timer.test.ts
index 4bfe0983..703a995c 100644
--- a/tests/utils/timer.test.ts
+++ b/tests/utils/timer.test.ts
@@ -30,6 +30,22 @@ describe('Timer', () => {
     expect(handler).toBeCalled();
   });
 
+  it('should not fire when stopped', () => {
+    const timer = new Timer();
+    const handler = vi.fn();
+    timer.start(10, handler);
+
+    expect(timer.isRunning()).toBeTruthy();
+    expect(handler).not.toBeCalled();
+
+    timer.stop();
+
+    vi.runOnlyPendingTimers();
+
+    expect(timer.isRunning()).toBeFalsy();
+    expect(handler).not.toBeCalled();
+  });
+
   it('should fire repeatedly when started', () => {
     const timer = new Timer();
     const handler = vi.fn();
@@ -49,10 +65,10 @@ describe('Timer', () => {
     expect(handler).toBeCalledTimes(2);
   });
 
-  it('should not fire when stopped', () => {
+  it('should not fire repeatedly when stopped', () => {
     const timer = new Timer();
     const handler = vi.fn();
-    timer.start(10, handler);
+    timer.startRepeated(10, handler);
 
     expect(timer.isRunning()).toBeTruthy();
     expect(handler).not.toBeCalled();