From 2a3844f2c6375047563f2224239310d7f8df2f99 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Mon, 8 Jun 2026 14:13:47 +0800
Subject: [PATCH] feat(results): add execution summary view

---
 apps/desktop/src/App.vue                      |   2 +-
 .../src/components/layout/ContentArea.vue     | 129 +++++++++++++++---
 .../src/composables/useSqlExecution.ts        |   5 +-
 apps/desktop/src/i18n/locales/en.ts           |  14 ++
 apps/desktop/src/i18n/locales/zh-CN.ts        |  14 ++
 apps/desktop/src/lib/tabPresentation.ts       |  37 ++++-
 packages/app-tests/tabPresentation.test.ts    |  53 ++++++-
 7 files changed, 231 insertions(+), 23 deletions(-)

diff --git a/apps/desktop/src/App.vue b/apps/desktop/src/App.vue
index e99bd185af..68e96fa127 100644
--- a/apps/desktop/src/App.vue
+++ b/apps/desktop/src/App.vue
@@ -125,7 +125,7 @@ const contentAreaRef = ref<InstanceType<typeof ContentArea> | null>(null);
 const selectedSql = ref("");
 const cursorPos = ref(0);
 const formatSqlRequestId = ref(0);
-const activeOutputView = ref<"result" | "explain" | "chart">("result");
+const activeOutputView = ref<"result" | "summary" | "explain" | "chart">("result");
 const newQueryContextSource = ref<"tab" | "sidebar">("tab");
 const showSaveSqlDialog = ref(false);
 const saveSqlName = ref("");
diff --git a/apps/desktop/src/components/layout/ContentArea.vue b/apps/desktop/src/components/layout/ContentArea.vue
index 6feffd8796..02df3c21d5 100644
--- a/apps/desktop/src/components/layout/ContentArea.vue
+++ b/apps/desktop/src/components/layout/ContentArea.vue
@@ -17,6 +17,7 @@ import {
   Inbox,
   RefreshCcw,
   Wrench,
+  ListChecks,
 } from "@lucide/vue";
 import { Splitpanes, Pane } from "splitpanes";
 import "splitpanes/dist/splitpanes.css";
@@ -54,7 +55,7 @@ const ExplainPlanViewer = defineAsyncComponent(() => import("@/components/explai
 const QueryChart = defineAsyncComponent(() => import("@/components/chart/QueryChart.vue"));
 import { useQueryStore } from "@/stores/queryStore";
 import { canCancelQueryExecution, queryExecutionLabelKey } from "@/lib/queryExecutionState";
-import { databaseDisplayNameForTab } from "@/lib/tabPresentation";
+import { databaseDisplayNameForTab, executionSummaryItems, tabularResultItems } from "@/lib/tabPresentation";
 import { isTableDataEditable } from "@/lib/tableEditing";
 import { tableMetaForDataTab } from "@/lib/tableDataTabMeta";
 import { formatShortcut } from "@/lib/shortcutRegistry";
@@ -90,14 +91,14 @@ const props = defineProps<{
   activeTab: QueryTab;
   activeConnection?: ConnectionConfig;
   executableSql: string;
-  activeOutputView: "result" | "explain" | "chart";
+  activeOutputView: "result" | "summary" | "explain" | "chart";
   formatSqlRequestId: number;
   selectedSql: string;
   cursorPos: number;
 }>();
 
 const emit = defineEmits<{
-  "update:activeOutputView": [value: "result" | "explain" | "chart"];
+  "update:activeOutputView": [value: "result" | "summary" | "explain" | "chart"];
   fixWithAi: [errorMessage: string];
   execute: [sqlOverride?: string];
   saveSql: [];
@@ -207,6 +208,13 @@ const hasQueryOutput = computed(
     props.activeTab.isExecuting === true ||
     props.activeTab.isExplaining === true,
 );
+const tabularResults = computed(() => tabularResultItems(props.activeTab.results));
+const summaryItems = computed(() => executionSummaryItems(props.activeTab));
+const hasExecutionSummary = computed(() => summaryItems.value.length > 0 || props.activeTab.isExecuting);
+const hasTabularResult = computed(() => {
+  if (props.activeTab.result?.columns.length) return true;
+  return tabularResults.value.length > 0;
+});
 const resultsPaneOpen = ref(false);
 
 watch(
@@ -224,6 +232,17 @@ watch(
   },
 );
 
+watch(
+  () => [props.activeTab.id, props.activeTab.result, props.activeTab.results, props.activeTab.isExecuting] as const,
+  () => {
+    if (props.activeTab.isExecuting) return;
+    if (hasExecutionSummary.value && !hasTabularResult.value && props.activeOutputView === "result") {
+      emit("update:activeOutputView", "summary");
+    }
+  },
+  { immediate: true },
+);
+
 watch(
   () => [props.activeTab.isExecuting, props.activeTab.isExplaining],
   ([isExecuting, isExplaining]) => {
@@ -433,33 +452,38 @@ defineExpose({ focusSearch, refreshData, handleModRTarget });
                 size="sm"
                 :variant="activeOutputView === 'result' ? 'secondary' : 'ghost'"
                 class="h-6 px-2 text-xs"
-                :disabled="!activeTab.result && !activeTab.isExecuting"
+                :disabled="!hasTabularResult && !activeTab.isExecuting"
                 @click="emit('update:activeOutputView', 'result')"
               >
                 {{ t("tabs.tableData") }}
               </Button>
-              <template v-if="activeOutputView === 'result' && activeTab.results && activeTab.results.length > 1">
+              <template v-if="tabularResults.length > 1">
                 <span class="mx-1 h-4 w-px bg-border" />
                 <Button
-                  v-for="(_, rIdx) in activeTab.results"
-                  :key="rIdx"
+                  v-for="item in tabularResults"
+                  :key="item.index"
                   size="sm"
-                  :variant="activeTab.activeResultIndex === rIdx ? 'default' : 'ghost'"
+                  :variant="
+                    activeOutputView === 'result' && activeTab.activeResultIndex === item.index ? 'default' : 'ghost'
+                  "
                   class="h-6 px-2 text-xs shrink-0"
-                  @click="queryStore.setActiveResultIndex(activeTab.id, rIdx)"
+                  @click="
+                    queryStore.setActiveResultIndex(activeTab.id, item.index);
+                    emit('update:activeOutputView', 'result');
+                  "
                 >
-                  {{ t("tabs.resultN", { n: rIdx + 1 }) }}
+                  {{ t("tabs.resultN", { n: item.n }) }}
                 </Button>
               </template>
               <Button
                 size="sm"
-                :variant="activeOutputView === 'explain' ? 'secondary' : 'ghost'"
+                :variant="activeOutputView === 'summary' ? 'secondary' : 'ghost'"
                 class="h-6 px-2 text-xs gap-1"
-                :disabled="!activeTab.explainPlan && !activeTab.explainError && !activeTab.isExplaining"
-                @click="emit('update:activeOutputView', 'explain')"
+                :disabled="!hasExecutionSummary"
+                @click="emit('update:activeOutputView', 'summary')"
               >
-                <GitBranch class="h-3.5 w-3.5" />
-                {{ t("explain.title") }}
+                <ListChecks class="h-3.5 w-3.5" />
+                {{ t("tabs.executionSummary") }}
               </Button>
               <Button
                 size="sm"
@@ -471,6 +495,17 @@ defineExpose({ focusSearch, refreshData, handleModRTarget });
                 <BarChart3 class="h-3.5 w-3.5" />
                 {{ t("chart.title") }}
               </Button>
+              <span class="mx-1 h-4 w-px shrink-0 bg-border" />
+              <Button
+                size="sm"
+                :variant="activeOutputView === 'explain' ? 'secondary' : 'ghost'"
+                class="h-6 px-2 text-xs gap-1"
+                :disabled="!activeTab.explainPlan && !activeTab.explainError && !activeTab.isExplaining"
+                @click="emit('update:activeOutputView', 'explain')"
+              >
+                <GitBranch class="h-3.5 w-3.5" />
+                {{ t("explain.title") }}
+              </Button>
               <Popover v-if="activeOutputView === 'result' && activeTab.result">
                 <PopoverTrigger as-child>
                   <Button
@@ -517,7 +552,7 @@ defineExpose({ focusSearch, refreshData, handleModRTarget });
                 </PopoverContent>
               </Popover>
               <Button
-                v-if="activeOutputView === 'result' && activeTab.result"
+                v-if="activeOutputView === 'result' && hasTabularResult"
                 variant="ghost"
                 size="sm"
                 class="h-6 shrink-0 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
@@ -532,7 +567,7 @@ defineExpose({ focusSearch, refreshData, handleModRTarget });
                 variant="ghost"
                 size="sm"
                 class="h-6 shrink-0 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
-                :class="{ 'ml-auto': activeOutputView !== 'result' || !activeTab.result }"
+                :class="{ 'ml-auto': activeOutputView !== 'result' || !hasTabularResult }"
                 @click="resultsPaneOpen = false"
               >
                 <ChevronDown class="h-3.5 w-3.5" />
@@ -556,9 +591,67 @@ defineExpose({ focusSearch, refreshData, handleModRTarget });
               :result="activeTab.result"
             />
 
+            <div v-else-if="activeOutputView === 'summary'" class="flex-1 min-h-0 overflow-auto bg-background">
+              <div
+                v-if="activeTab.isExecuting"
+                class="flex h-full items-center justify-center text-sm text-muted-foreground"
+              >
+                <Loader2 class="mr-2 h-4 w-4 animate-spin" />
+                {{ t("executionSummary.executing") }}
+              </div>
+              <div
+                v-else-if="summaryItems.length === 0"
+                class="flex h-full items-center justify-center text-sm text-muted-foreground"
+              >
+                {{ t("executionSummary.empty") }}
+              </div>
+              <div v-else>
+                <div class="overflow-hidden border-b">
+                  <div
+                    class="grid grid-cols-[4rem_1fr_8rem_8rem_7rem] border-b bg-muted/30 px-3 py-2 text-xs font-medium text-muted-foreground"
+                  >
+                    <div>{{ t("executionSummary.statement") }}</div>
+                    <div>{{ t("executionSummary.type") }}</div>
+                    <div class="text-right">{{ t("executionSummary.rows") }}</div>
+                    <div class="text-right">{{ t("executionSummary.affected") }}</div>
+                    <div class="text-right">{{ t("executionSummary.time") }}</div>
+                  </div>
+                  <div
+                    v-for="item in summaryItems"
+                    :key="item.index"
+                    class="grid grid-cols-[4rem_1fr_8rem_8rem_7rem] items-center border-b px-3 py-2 text-xs last:border-b-0"
+                  >
+                    <div class="font-mono text-muted-foreground">#{{ item.index + 1 }}</div>
+                    <div class="flex min-w-0 items-center gap-2">
+                      <span
+                        class="inline-flex h-5 items-center rounded-full border px-2 text-[10px]"
+                        :class="
+                          item.isError
+                            ? 'border-destructive/40 bg-destructive/10 text-destructive'
+                            : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
+                        "
+                      >
+                        {{ item.isError ? t("executionSummary.error") : t("executionSummary.success") }}
+                      </span>
+                      <span class="truncate">
+                        {{
+                          item.hasTabularResult
+                            ? t("executionSummary.returnedTable", { count: item.returnedColumns })
+                            : t("executionSummary.noTable")
+                        }}
+                      </span>
+                    </div>
+                    <div class="text-right tabular-nums">{{ item.returnedRows.toLocaleString() }}</div>
+                    <div class="text-right tabular-nums">{{ item.affectedRows.toLocaleString() }}</div>
+                    <div class="text-right tabular-nums">{{ item.executionTimeMs }}ms</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
             <template v-else>
               <DataGrid
-                v-if="activeTab.result"
+                v-if="activeTab.result && hasTabularResult"
                 ref="dataGridRef"
                 :key="`${activeTab.id}-${activeTab.activeResultIndex ?? 0}`"
                 :cache-key="`${activeTab.id}-${activeTab.activeResultIndex ?? 0}`"
diff --git a/apps/desktop/src/composables/useSqlExecution.ts b/apps/desktop/src/composables/useSqlExecution.ts
index 8958a6e6e8..47342c00fb 100644
--- a/apps/desktop/src/composables/useSqlExecution.ts
+++ b/apps/desktop/src/composables/useSqlExecution.ts
@@ -37,7 +37,7 @@ export function useSqlExecution(deps: {
   activeConnection: ComputedRef<ConnectionConfig | undefined>;
   executableSql: ComputedRef<string>;
   resolveExecutableSql?: () => Promise<string>;
-  activeOutputView: Ref<"result" | "explain" | "chart">;
+  activeOutputView: Ref<"result" | "summary" | "explain" | "chart">;
 }) {
   const { t } = useI18n();
   const queryStore = useQueryStore();
@@ -78,6 +78,9 @@ export function useSqlExecution(deps: {
     const connName = connectionStore.getConfig(tab.connectionId)?.name || "";
     const start = Date.now();
     await queryStore.executeCurrentSql(sql);
+    if (tab.result && !tab.result.columns.length && !tab.results?.some((result) => result.columns.length > 0)) {
+      deps.activeOutputView.value = "summary";
+    }
     const elapsed = Date.now() - start;
     const success = !tab.result?.columns.includes("Error");
     historyStore.add({
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index 748b304854..cf904fb070 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -393,6 +393,7 @@ export default {
     mongo: "Mongo",
     objects: "Objects",
     users: "Users & Privileges",
+    executionSummary: "Execution Summary",
     tooltipTitle: "Title:",
     tooltipConnection: "Connection:",
     tooltipDatabase: "Database:",
@@ -405,6 +406,19 @@ export default {
     openTabs: "Open tabs",
     openDataTabs: "Open tables",
   },
+  executionSummary: {
+    empty: "No execution summary",
+    executing: "Executing...",
+    statement: "Statement",
+    type: "Type",
+    rows: "Rows",
+    affected: "Affected",
+    time: "Time",
+    success: "Success",
+    error: "Error",
+    returnedTable: "Returned a {count}-column result table",
+    noTable: "No result table returned",
+  },
   chart: {
     title: "Chart",
     type: "Type",
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index e697693146..550d8a930a 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -389,6 +389,7 @@ export default {
     mongo: "Mongo",
     objects: "对象",
     users: "用户与权限",
+    executionSummary: "执行摘要",
     tooltipTitle: "标题：",
     tooltipConnection: "连接：",
     tooltipDatabase: "数据库：",
@@ -401,6 +402,19 @@ export default {
     openTabs: "已打开的标签页",
     openDataTabs: "已打开的数据表",
   },
+  executionSummary: {
+    empty: "暂无执行摘要",
+    executing: "正在执行...",
+    statement: "语句",
+    type: "类型",
+    rows: "返回行",
+    affected: "影响行",
+    time: "耗时",
+    success: "成功",
+    error: "错误",
+    returnedTable: "返回 {count} 列结果表",
+    noTable: "未返回结果表",
+  },
   chart: {
     title: "图表",
     type: "类型",
diff --git a/apps/desktop/src/lib/tabPresentation.ts b/apps/desktop/src/lib/tabPresentation.ts
index b2398f43c0..a3bd57160f 100644
--- a/apps/desktop/src/lib/tabPresentation.ts
+++ b/apps/desktop/src/lib/tabPresentation.ts
@@ -1,6 +1,6 @@
 import { useConnectionStore } from "@/stores/connectionStore";
 import { useSettingsStore } from "@/stores/settingsStore";
-import type { QueryTab } from "@/types/database";
+import type { QueryResult, QueryTab } from "@/types/database";
 
 type Translate = (key: string, params?: Record<string, unknown>) => string;
 
@@ -106,6 +106,41 @@ export function shouldShowTabOverflowControls(
   return tabCount > 0 && (hasTabOverflow || canScrollLeft || canScrollRight);
 }
 
+export function tabularResultItems(
+  results: QueryResult[] | undefined,
+): { result: QueryResult; index: number; n: number }[] {
+  if (!results) return [];
+  return results
+    .map((result, index) => ({ result, index }))
+    .filter((item) => item.result.columns.length > 0)
+    .map((item, ordinal) => ({ ...item, n: ordinal + 1 }));
+}
+
+export interface ExecutionSummaryItem {
+  result: QueryResult;
+  index: number;
+  returnedColumns: number;
+  returnedRows: number;
+  affectedRows: number;
+  executionTimeMs: number;
+  hasTabularResult: boolean;
+  isError: boolean;
+}
+
+export function executionSummaryItems(tab: Pick<QueryTab, "result" | "results">): ExecutionSummaryItem[] {
+  const results = tab.results?.length ? tab.results : tab.result ? [tab.result] : [];
+  return results.map((result, index) => ({
+    result,
+    index,
+    returnedColumns: result.columns.length,
+    returnedRows: result.rows.length,
+    affectedRows: result.affected_rows,
+    executionTimeMs: result.execution_time_ms,
+    hasTabularResult: result.columns.length > 0,
+    isError: result.columns.includes("Error"),
+  }));
+}
+
 export function tabModeLabel(tab: QueryTab, t: Translate): string {
   if (tab.mode === "data") return t("tabs.table");
   if (tab.mode === "query") return t("tabs.sql");
diff --git a/packages/app-tests/tabPresentation.test.ts b/packages/app-tests/tabPresentation.test.ts
index 23c8258466..d07b778347 100644
--- a/packages/app-tests/tabPresentation.test.ts
+++ b/packages/app-tests/tabPresentation.test.ts
@@ -1,9 +1,14 @@
 import { strict as assert } from "node:assert";
 import { test } from "vitest";
 import { createPinia, setActivePinia } from "pinia";
-import { shouldShowTabOverflowControls, tabDisplayTitle } from "../../apps/desktop/src/lib/tabPresentation.ts";
+import {
+  executionSummaryItems,
+  shouldShowTabOverflowControls,
+  tabDisplayTitle,
+  tabularResultItems,
+} from "../../apps/desktop/src/lib/tabPresentation.ts";
 import { useConnectionStore } from "../../apps/desktop/src/stores/connectionStore.ts";
-import type { ConnectionConfig, QueryTab } from "../../apps/desktop/src/types/database.ts";
+import type { ConnectionConfig, QueryResult, QueryTab } from "../../apps/desktop/src/types/database.ts";
 
 function installMemoryStorage() {
   const values = new Map<string, string>();
@@ -48,6 +53,15 @@ function queryTab(overrides: Partial<QueryTab> = {}): QueryTab {
   };
 }
 
+function result(columns: string[]): QueryResult {
+  return {
+    columns,
+    rows: [],
+    affected_rows: 0,
+    execution_time_ms: 1,
+  };
+}
+
 test("tab overflow controls only show when there are hidden tabs to reach", () => {
   assert.equal(shouldShowTabOverflowControls(0, true, true, true), false);
   assert.equal(shouldShowTabOverflowControls(3, false, false, false), false);
@@ -69,3 +83,38 @@ test("query tab display title uses custom title when present", () => {
     restoreStorage();
   }
 });
+
+test("tabular result items hide statement results without returned columns", () => {
+  const results = [result([]), result(["id"]), result([]), result(["name"])];
+
+  assert.deepEqual(
+    tabularResultItems(results).map((item) => ({ index: item.index, n: item.n, columns: item.result.columns })),
+    [
+      { index: 1, n: 1, columns: ["id"] },
+      { index: 3, n: 2, columns: ["name"] },
+    ],
+  );
+  assert.deepEqual(tabularResultItems([result([])]), []);
+  assert.deepEqual(tabularResultItems(undefined), []);
+});
+
+test("execution summary items include table and non-table statement results", () => {
+  const items = executionSummaryItems({
+    results: [result([]), result(["id"]), { ...result(["Error"]), rows: [["boom"]] }],
+  });
+
+  assert.deepEqual(
+    items.map((item) => ({
+      index: item.index,
+      hasTabularResult: item.hasTabularResult,
+      returnedColumns: item.returnedColumns,
+      returnedRows: item.returnedRows,
+      isError: item.isError,
+    })),
+    [
+      { index: 0, hasTabularResult: false, returnedColumns: 0, returnedRows: 0, isError: false },
+      { index: 1, hasTabularResult: true, returnedColumns: 1, returnedRows: 0, isError: false },
+      { index: 2, hasTabularResult: true, returnedColumns: 1, returnedRows: 1, isError: true },
+    ],
+  );
+});