Improve pipeline debug styling (#15849)

src/data/voice_assistant.ts

@@ -119,8 +119,6 @@ export const runPipelineFromText = (
         return;
       }
 
-      run.events.push(updateEvent);
-
       if (updateEvent.type === "stt-start") {
         run = { ...run, stage: "stt", stt: updateEvent.data };
       } else if (updateEvent.type === "stt-finish") {
@@ -139,8 +137,12 @@ export const runPipelineFromText = (
       } else if (updateEvent.type === "error") {
         run = { ...run, stage: "error", error: updateEvent.data };
         unsubProm.then((unsub) => unsub());
+      } else {
+        run = { ...run };
       }
 
+      run.events = [...run.events, updateEvent];
+
       callback(run);
     },
     {

src/panels/config/integrations/integration-panels/voice_assistant/assist/assist-pipeline-debug.ts

@@ -2,6 +2,8 @@ import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import "../../../../../../components/ha-card";
 import "../../../../../../components/ha-button";
+import "../../../../../../components/ha-circular-progress";
+import "../../../../../../components/ha-expansion-panel";
 import "../../../../../../components/ha-textfield";
 import {
   PipelineRun,
@@ -12,6 +14,58 @@ import { SubscribeMixin } from "../../../../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../../types";
 
+const RUN_DATA = {
+  pipeline: "Pipeline",
+  language: "Language",
+};
+
+const ERROR_DATA = {
+  code: "Code",
+  message: "Message",
+};
+
+const INTENT_DATA = {
+  engine: "Engine",
+  intent_input: "Input",
+};
+
+const renderProgress = (
+  pipelineRun: PipelineRun,
+  stage: PipelineRun["stage"]
+) =>
+  pipelineRun.stage !== stage && stage in pipelineRun
+    ? html`✅`
+    : pipelineRun.stage === stage
+    ? html`<ha-circular-progress size="tiny" active></ha-circular-progress>`
+    : "";
+
+const renderData = (data: Record<string, any>, keys: Record<string, string>) =>
+  Object.entries(keys).map(
+    ([key, label]) =>
+      html`
+        <div class="row">
+          <div>${label}</div>
+          <div>${data[key]}</div>
+        </div>
+      `
+  );
+
+const dataMinusKeysRender = (
+  data: Record<string, any>,
+  keys: Record<string, string>
+) => {
+  const result = {};
+  let render = false;
+  for (const key in data) {
+    if (key in keys) {
+      continue;
+    }
+    render = true;
+    result[key] = data[key];
+  }
+  return render ? html`<pre>${JSON.stringify(result, null, 2)}</pre>` : "";
+};
+
 @customElement("assist-pipeline-debug")
 export class AssistPipelineDebug extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -52,11 +106,44 @@ export class AssistPipelineDebug extends SubscribeMixin(LitElement) {
           </ha-card>
           ${this._pipelineRun
             ? html`
-                <ha-card heading="Pipeline Run">
+                <ha-card>
                   <div class="card-content">
-                    <pre>${JSON.stringify(this._pipelineRun, null, 2)}</pre>
+                    <div class="row heading">
+                      <div>Run</div>
+                      <div>${this._pipelineRun.stage}</div>
+                    </div>
+
+                    ${renderData(this._pipelineRun.run, RUN_DATA)}
+                    ${this._pipelineRun.error
+                      ? renderData(this._pipelineRun.error, ERROR_DATA)
+                      : ""}
                   </div>
                 </ha-card>
+                <ha-card>
+                  <div class="card-content">
+                    <div class="row heading">
+                      <span>Natural Language Processing</span>
+                      ${renderProgress(this._pipelineRun, "intent")}
+                    </div>
+                    ${this._pipelineRun.intent
+                      ? html`
+                          <div class="card-content">
+                            ${renderData(this._pipelineRun.intent, INTENT_DATA)}
+                            ${dataMinusKeysRender(
+                              this._pipelineRun.intent,
+                              INTENT_DATA
+                            )}
+                          </div>
+                        `
+                      : ""}
+                  </div>
+                </ha-card>
+                <ha-card>
+                  <ha-expansion-panel>
+                    <span slot="header">Raw</span>
+                    <pre>${JSON.stringify(this._pipelineRun, null, 2)}</pre>
+                  </ha-expansion-panel>
+                </ha-card>
               `
             : ""}
         </div>
@@ -92,9 +179,19 @@ export class AssistPipelineDebug extends SubscribeMixin(LitElement) {
       .run-pipeline-card ha-textfield {
         display: block;
       }
+      .row {
+        display: flex;
+        justify-content: space-between;
+      }
       pre {
         margin: 0;
       }
+      ha-expansion-panel {
+        padding-left: 8px;
+      }
+      .heading {
+        font-weight: 500;
+      }
     `,
   ];
 }