Use yaml to show raw pipeline debug data (#16234)

src/components/ha-yaml-editor.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_SCHEMA, dump, load, Schema } from "js-yaml";
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant } from "../types";
@@ -31,6 +31,8 @@ export class HaYamlEditor extends LitElement {
 
   @property() public label?: string;
 
+  @property({ type: Boolean }) public autoUpdate = false;
+
   @property({ type: Boolean }) public readOnly = false;
 
   @property({ type: Boolean }) public required = false;
@@ -41,7 +43,11 @@ export class HaYamlEditor extends LitElement {
     try {
       this._yaml =
         value && !isEmpty(value)
-          ? dump(value, { schema: this.yamlSchema, quotingType: '"' })
+          ? dump(value, {
+              schema: this.yamlSchema,
+              quotingType: '"',
+              noRefs: true,
+            })
           : "";
     } catch (err: any) {
       // eslint-disable-next-line no-console
@@ -56,6 +62,13 @@ export class HaYamlEditor extends LitElement {
     }
   }
 
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+    if (this.autoUpdate && changedProperties.has("value")) {
+      this.setValue(this.value);
+    }
+  }
+
   protected render() {
     if (this._yaml === undefined) {
       return nothing;

src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts

@@ -8,6 +8,7 @@ import "../../../../components/ha-expansion-panel";
 import type { PipelineRun } from "../../../../data/assist_pipeline";
 import type { HomeAssistant } from "../../../../types";
 import { formatNumber } from "../../../../common/number/format_number";
+import "../../../../components/ha-yaml-editor";
 
 const RUN_DATA = {
   pipeline: "Pipeline",
@@ -118,7 +119,13 @@ const dataMinusKeysRender = (
     render = true;
     result[key] = data[key];
   }
-  return render ? html`<pre>${JSON.stringify(result, null, 2)}</pre>` : "";
+  return render
+    ? html`<ha-yaml-editor
+        readOnly
+        autoUpdate
+        .value=${result}
+      ></ha-yaml-editor>`
+    : "";
 };
 
 @customElement("assist-render-pipeline-run")
@@ -262,7 +269,11 @@ export class AssistPipelineDebug extends LitElement {
       <ha-card>
         <ha-expansion-panel>
           <span slot="header">Raw</span>
-          <pre>${JSON.stringify(this.pipelineRun, null, 2)}</pre>
+          <ha-yaml-editor
+            readOnly
+            autoUpdate
+            .value=${this.pipelineRun}
+          ></ha-yaml-editor>
         </ha-expansion-panel>
       </ha-card>
     `;
@@ -287,9 +298,6 @@ export class AssistPipelineDebug extends LitElement {
       display: flex;
       justify-content: space-between;
     }
-    pre {
-      margin: 0;
-    }
     ha-expansion-panel {
       padding-left: 8px;
     }