Fix automation traces (#23524)

src/common/array/ensure-array.ts

@@ -1,14 +1,19 @@
-type NonUndefined<T> = T extends undefined ? never : T;
+type NonNullUndefined<T> = T extends undefined
+  ? never
+  : T extends null
+    ? never
+    : T;
 
 /**
  * Ensure that the input is an array or wrap it in an array
  * @param value - The value to ensure is an array
  */
 export function ensureArray(value: undefined): undefined;
-export function ensureArray<T>(value: T | T[]): NonUndefined<T>[];
-export function ensureArray<T>(value: T | readonly T[]): NonUndefined<T>[];
+export function ensureArray(value: null): null;
+export function ensureArray<T>(value: T | T[]): NonNullUndefined<T>[];
+export function ensureArray<T>(value: T | readonly T[]): NonNullUndefined<T>[];
 export function ensureArray(value) {
-  if (value === undefined || Array.isArray(value)) {
+  if (value === undefined || value === null || Array.isArray(value)) {
     return value;
   }
   return [value];

src/components/trace/hat-graph-node.ts

@@ -20,8 +20,8 @@ export class HatGraphNode extends LitElement {
   @property({ attribute: false, reflect: true, type: Boolean }) notEnabled =
     false;
 
-  @property({ attribute: false, reflect: true, type: Boolean }) graphStart =
-    false;
+  @property({ attribute: "graph-start", reflect: true, type: Boolean })
+  graphStart = false;
 
   @property({ type: Boolean, attribute: "nofocus" }) noFocus = false;
 
@@ -112,7 +112,7 @@ export class HatGraphNode extends LitElement {
           var(--hat-graph-node-size) + var(--hat-graph-spacing) + 1px
         );
       }
-      :host([graphStart]) {
+      :host([graph-start]) {
         height: calc(var(--hat-graph-node-size) + 2px);
       }
       :host([track]) {

src/components/trace/hat-script-graph.ts

@@ -91,7 +91,7 @@ export class HatScriptGraph extends LitElement {
     }
     return html`
       <hat-graph-node
-        graphStart
+        graph-start
         ?track=${track}
         @focus=${this._selectNode(config, path)}
         ?active=${this.selected === path}
@@ -354,8 +354,8 @@ export class HatScriptGraph extends LitElement {
         ></hat-graph-node>
         <div
           style=${`width: ${NODE_SIZE + SPACING}px;`}
-          graphStart
-          graphEnd
+          graph-start
+          graph-end
         ></div>
         <div ?track=${trackPass}></div>
         <hat-graph-node