Collapsible Wait Stats section (#215 E12) (#271)

Wait Stats card now uses <details>/<summary> and defaults to closed so
it doesn't push improvement items below the fold on 1080p monitors.

- Web viewer (Index.razor): insight-card switches to <details> element.
  app.css styles .insight-card > summary the same as h4, hides the native
  disclosure marker, and shows ▸ / ▾ chevrons tied to the [open] attribute.
- HTML export (HtmlExporter.cs): same pattern on the .card.waits card.

Keeps the chart as a complementary view (Joe's earlier preference) — just
out of the way by default. Click the header to expand.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: erikdarlingdata

src/PlanViewer.Core/Output/HtmlExporter.cs

@@ -109,10 +109,15 @@ .statement h2 {
 /* Insights grid */
 .insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
 .card { border-radius: 6px; border: 1px solid var(--border); overflow: hidden; }
-.card h3 {
+.card h3, .card > summary {
     padding: 0.4rem 0.75rem; font-size: 0.8rem; font-weight: 500;
     border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem;
+    list-style: none; cursor: pointer;
 }
+.card > summary::-webkit-details-marker { display: none; }
+.card > summary::before { content: ""\25B8""; font-size: 0.7rem; color: var(--text-muted); width: 0.7rem; }
+details.card[open] > summary::before { content: ""\25BE""; }
+.card.waits summary { color: #2a4365; }
 .card-body { padding: 0.5rem 0.75rem; font-size: 0.8rem; }
 .card.runtime { background: var(--card-runtime); border-color: var(--card-runtime-border); }
 .card.runtime h3 { color: #2c5282; }
@@ -432,11 +437,12 @@ private static void WriteParametersCard(StringBuilder sb, StatementResult stmt)
 
     private static void WriteWaitStatsCard(StringBuilder sb, StatementResult stmt, bool hasActualStats)
     {
-        sb.AppendLine("<div class=\"card waits\">");
-        sb.Append("<h3>Wait Stats");
+        // Collapsible (#215 E12): default-closed so improvement items aren't pushed below the fold.
+        sb.AppendLine("<details class=\"card waits\">");
+        sb.Append("<summary>Wait Stats");
         if (stmt.WaitStats.Count > 0)
             sb.Append($" <span class=\"card-count\">{stmt.WaitStats.Sum(w => w.WaitTimeMs):N0} ms</span>");
-        sb.AppendLine("</h3>");
+        sb.AppendLine("</summary>");
         sb.AppendLine("<div class=\"card-body\">");
         if (stmt.WaitStats.Count > 0)
         {
@@ -464,7 +470,7 @@ private static void WriteWaitStatsCard(StringBuilder sb, StatementResult stmt, b
             sb.AppendLine($"<div class=\"card-empty\">{(hasActualStats ? "No waits recorded" : "Estimated plan — no wait stats")}</div>");
         }
         sb.AppendLine("</div>");
-        sb.AppendLine("</div>");
+        sb.AppendLine("</details>");
     }
 
     private static void WriteWarnings(StringBuilder sb, StatementResult stmt)

src/PlanViewer.Web/Pages/Index.razor

@@ -299,14 +299,14 @@ else
             </div>
         </div>
 
-        @* Wait Stats *@
-        <div class="insight-card waits @(ActiveStmt!.WaitStats.Count > 0 ? "has-items" : "")">
-            <h4>Wait Stats
+        @* Wait Stats — collapsible (#215 E12): default-closed so it doesn't push improvement items below the fold *@
+        <details class="insight-card waits @(ActiveStmt!.WaitStats.Count > 0 ? "has-items" : "")">
+            <summary>Wait Stats
                 @if (ActiveStmt!.WaitStats.Count > 0)
                 {
                     <span class="insight-count">@ActiveStmt!.WaitStats.Sum(w => w.WaitTimeMs).ToString("N0") ms</span>
                 }
-            </h4>
+            </summary>
             <div class="insight-body">
                 @if (ActiveStmt!.WaitStats.Count > 0)
                 {
@@ -336,7 +336,7 @@ else
                     <div class="insight-empty">@(result.Summary.HasActualStats ? "No waits recorded" : "Estimated plan — no wait stats")</div>
                 }
             </div>
-        </div>
+        </details>
     </div>
 
     @* Warnings strip *@

src/PlanViewer.Web/wwwroot/css/app.css

@@ -541,16 +541,33 @@ textarea::placeholder {
     overflow: hidden;
 }
 
-.insight-card h4 {
+.insight-card h4,
+.insight-card > summary {
     padding: 0.4rem 0.75rem;
     font-size: 0.8rem;
     font-weight: 500;
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    list-style: none;
+    cursor: pointer;
+}
+
+.insight-card > summary::-webkit-details-marker { display: none; }
+
+.insight-card > summary::before {
+    content: "\25B8";
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    transition: transform 0.15s ease;
+    width: 0.7rem;
 }
 
+.insight-card[open] > summary::before { content: "\25BE"; }
+
+details.insight-card:not([open]) { border-bottom: 1px solid var(--border); }
+
 .insight-body {
     padding: 0.5rem 0.75rem;
     font-size: 0.8rem;