feat: show completion statistics in reports

Author: devversion

report-app/src/app/pages/report-viewer/report-viewer.html

@@ -146,6 +146,32 @@ <h3>Usage Details</h3>
             </li>
           }
         </ul>
+
+        @if (details.summary.completionStats) {
+          @let stats = details.summary.completionStats;
+          <h3>Evaluation Stats</h3>
+          <ul class="status-badge-group">
+            <li class="status-badge neutral">
+              <b>Executed evaluations:</b>
+              {{stats.allPromptsCount - stats.failedPrompts.length}}/{{stats.allPromptsCount}}
+            </li>
+          </ul>
+          <div>
+            @if (stats.failedPrompts.length > 0) {
+              <details>
+                <summary class="neutral-button failed-prompt-button">
+                  Inspect evaluation errors
+                </summary>
+                <div>
+                  @for (prompt of stats.failedPrompts; track prompt) {
+                    <b>{{ prompt.promptName }}</b>
+                    <pre class="callout neutral code">{{ prompt.error }}</pre>
+                  }
+                </div>
+              </details>
+            }
+          </div>
+        }
       }
     </div>
   </section>
@@ -390,8 +416,7 @@ <h5>
                   [class.warn]="totalPercent < 90 && totalPercent >= 80"
                   [class.error]="totalPercent < 80"
                 >
-                  {{ result.score.totalPoints }} / {{ result.score.maxOverallPoints }} points ({{totalPercent
-                  }}%)
+                  {{ result.score.totalPoints }} / {{ result.score.maxOverallPoints }} points ({{totalPercent}}%)
                 </span>
               </div>
             </div>

report-app/src/app/pages/report-viewer/report-viewer.scss

@@ -246,3 +246,18 @@ lighthouse-category + lighthouse-category {
 .hidden {
   visibility: hidden;
 }
+
+.failed-prompt-button.neutral-button {
+  font-size: 0.8rem;
+  padding: 0.8rem;
+  height: 1.4rem;
+  margin: 0.5rem 0;
+  background-color: var(--button-active-bg-color);
+  color: color-mix(in srgb, var(--accent-yellow) 75%, transparent);
+  border-color: var(--button-active-bg-color);
+  font-weight: bold;
+
+  &:active, &:hover {
+    background-color: transparent;
+  }
+}