[SPARK-55877][UI] Side-by-side Initial vs Final plan comparison for AQE queries

### What changes were proposed in this pull request?

Add a side-by-side comparison view for AQE plan evolution on the SQL execution detail page.

When AQE rewrites a query plan, the Plan Details section now shows a **Unified | Split** toggle:
- **Unified** (default): full plan text as before
- **Split**: two columns showing Initial Plan (left) vs Final Plan (right)

For non-AQE queries (where initial == final), the raw text is shown directly without the toggle.

### Why are the changes needed?

Understanding how AQE rewrites a plan is important for query performance analysis. Currently the plan text mixes both versions in a single block, making it hard to compare. The split view makes differences immediately visible (e.g., added ShuffleQueryStage, AQEShuffleRead coalescing, statistics).

### Does this PR introduce _any_ user-facing change?

Yes — Plan Details section on the SQL execution page now shows a Unified/Split toggle when AQE has rewritten the plan.

### How was this patch tested?

Compilation verified. Manual testing with AQE-enabled queries.

### Was this patch authored or co-authored using generative AI tooling?

Yes, co-authored with GitHub Copilot.

Closes #54806 from yaooqinn/SPARK-55877.

Authored-by: Kent Yao <kentyao@microsoft.com>
Signed-off-by: Dongjoon Hyun <dongjoon@apache.org>

Author: yaooqinn

sql/core/src/main/scala/org/apache/spark/sql/execution/ui/ExecutionPage.scala

@@ -193,17 +193,87 @@ class ExecutionPage(parent: SQLTab) extends WebUIPage("execution") with Logging
     "%s/jobs/job/?id=%s".format(UIUtils.prependBaseUri(request, parent.basePath), jobId)
 
   private def physicalPlanDescription(physicalPlanDescription: String): Seq[Node] = {
+    val (initialPlan, finalPlan) = extractInitialAndFinalPlans(physicalPlanDescription)
+    val hasDiff = initialPlan.nonEmpty && finalPlan.nonEmpty
+
+    // scalastyle:off line.size.limit
     <div>
-      <span data-action="clickPhysicalPlanDetails">
+      <span class="collapse-table" data-bs-toggle="collapse"
+            data-bs-target="#physical-plan-details"
+            aria-expanded="false" aria-controls="physical-plan-details"
+            data-collapse-name="collapse-plan-details">
         <h4>
-          <span id="physical-plan-details-arrow" class="arrow-closed"></span>
+          <span class="collapse-table-arrow arrow-closed"></span>
           <a>Plan Details</a>
         </h4>
       </span>
+      <div class="collapsible-table collapse" id="physical-plan-details">
+        {if (hasDiff) {
+          <div>
+            <ul class="nav nav-pills nav-pills-sm mb-2" role="tablist">
+              <li class="nav-item" role="presentation">
+                <button class="nav-link active btn-sm" data-bs-toggle="pill"
+                        data-bs-target="#plan-unified-tab" type="button" role="tab">Unified</button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button class="nav-link btn-sm" data-bs-toggle="pill"
+                        data-bs-target="#plan-split-tab" type="button" role="tab">Split</button>
+              </li>
+            </ul>
+            <div class="tab-content">
+              <div class="tab-pane fade show active" id="plan-unified-tab" role="tabpanel">
+                <pre>{physicalPlanDescription}</pre>
+              </div>
+              <div class="tab-pane fade" id="plan-split-tab" role="tabpanel">
+                <div class="row">
+                  <div class="col-6">
+                    <h6 class="fw-bold text-muted">Initial Plan</h6>
+                    <pre class="border rounded p-2" style="font-size: 0.8rem; max-height: 600px; overflow: auto;">{initialPlan}</pre>
+                  </div>
+                  <div class="col-6">
+                    <h6 class="fw-bold text-muted">Final Plan</h6>
+                    <pre class="border rounded p-2" style="font-size: 0.8rem; max-height: 600px; overflow: auto;">{finalPlan}</pre>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        } else {
+          <pre>{physicalPlanDescription}</pre>
+        }}
+      </div>
     </div>
-    <div id="physical-plan-details" style="display: none;">
-      <pre>{physicalPlanDescription}</pre>
-    </div>
+    // scalastyle:on line.size.limit
+  }
+
+  /**
+   * Extract Initial Plan and Final Plan tree sections from the physicalPlanDescription.
+   * Returns (initialPlan, finalPlan). If the plan doesn't contain AQE sections, returns
+   * empty strings.
+   */
+  private def extractInitialAndFinalPlans(
+      description: String): (String, String) = {
+    val lines = description.split("\n")
+    var initialLines = Seq.empty[String]
+    var finalLines = Seq.empty[String]
+    var section = "" // "", "final", "initial"
+
+    for (line <- lines) {
+      val trimmed = line.trim
+      if (trimmed.contains("== Final Plan ==")) {
+        section = "final"
+      } else if (trimmed.contains("== Initial Plan ==")) {
+        section = "initial"
+      } else if (section.nonEmpty && trimmed.startsWith("(") && trimmed.contains(")") &&
+          !trimmed.startsWith("(+") && !trimmed.startsWith("(-")) {
+        section = ""
+      } else if (section == "final") {
+        finalLines :+= line
+      } else if (section == "initial") {
+        initialLines :+= line
+      }
+    }
+    (initialLines.mkString("\n").trim, finalLines.mkString("\n").trim)
   }
 
   private def jobsTable(