fix(mysql): support compatible explain formats

apps/desktop/src/components/explain/ExplainPlanViewer.vue

@@ -22,9 +22,15 @@ const { t } = useI18n();
 const activeView = ref<"tree" | "summary" | "raw" | "table">("tree");
 const hasTableView = computed(() => !!props.tableResult || !!props.tableError);
 
-watch(hasTableView, (available) => {
-  if (!available && activeView.value === "table") activeView.value = "tree";
-});
+watch(
+  [hasTableView, () => !!props.tableResult, () => !!props.plan, () => props.loading],
+  ([available, hasTableResult, hasPlan, loading]) => {
+    if (!available && activeView.value === "table") activeView.value = "tree";
+    // Wait for JSON EXPLAIN to finish so regular MySQL still defaults to its visual tree.
+    if (!loading && hasTableResult && !hasPlan) activeView.value = "table";
+  },
+  { immediate: true },
+);
 
 const flatRows = computed(() => {
   const rows: Array<{ node: ExplainPlanNode; depth: number }> = [];

apps/desktop/src/components/explain/__tests__/ExplainPlanViewer.spec.ts

@@ -0,0 +1,18 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const viewerSource = readFileSync(new URL("../ExplainPlanViewer.vue", import.meta.url), "utf8");
+
+describe("ExplainPlanViewer MySQL fallback", () => {
+  it("selects the table only after loading finishes without a visual plan", () => {
+    expect(viewerSource).toContain("const hasTableView = computed(() => !!props.tableResult || !!props.tableError);");
+    expect(viewerSource).toContain("[hasTableView, () => !!props.tableResult, () => !!props.plan, () => props.loading]");
+    expect(viewerSource).toContain('if (!loading && hasTableResult && !hasPlan) activeView.value = "table";');
+    expect(viewerSource).toContain("{ immediate: true },");
+  });
+
+  it("keeps the regular tree default when the visual plan arrives", () => {
+    expect(viewerSource).toContain('if (!loading && hasTableResult && !hasPlan) activeView.value = "table";');
+    expect(viewerSource).toContain('if (!available && activeView.value === "table") activeView.value = "tree";');
+  });
+});