Refactor card.ts substantially and test.

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;
+  }
+}

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>`;

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,

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(

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;

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;

src/components/surround.ts

@@ -82,7 +82,6 @@ export class FrigateCardSurround extends LitElement {
     }
     await changeViewToRecentEventsForCameraAndDependents(
       this,
-      this.hass,
       this.cameraManager,
       this.cardWideConfig,
       this.view,

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(),
                   );

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();

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;

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)}"
               >