From 7f096653dbf2329395649bc634ada3ff055642f7 Mon Sep 17 00:00:00 2001
From: Bagus Wahyu Aprianto <antwa@users.noreply.github.com>
Date: Tue, 14 Jul 2026 17:03:50 +0700
Subject: [PATCH] feat(postgres): add process list viewer

---
 ...qlProcessList.vue => ProcessListPanel.vue} | 123 +++++++++++----
 .../src/components/layout/ContentArea.vue     |   4 +-
 .../src/components/sidebar/TreeItem.vue       |   4 +-
 apps/desktop/src/i18n/locales/en.ts           |   8 +
 .../database/postgresProcessList.spec.ts      | 133 ++++++++++++++++
 .../src/lib/database/postgresProcessList.ts   | 146 ++++++++++++++++++
 .../src/lib/database/processListDrivers.ts    | 133 ++++++++++++++++
 apps/desktop/src/stores/queryStore.ts         |   2 +-
 8 files changed, 514 insertions(+), 39 deletions(-)
 rename apps/desktop/src/components/admin/{MySqlProcessList.vue => ProcessListPanel.vue} (66%)
 create mode 100644 apps/desktop/src/lib/__tests__/database/postgresProcessList.spec.ts
 create mode 100644 apps/desktop/src/lib/database/postgresProcessList.ts
 create mode 100644 apps/desktop/src/lib/database/processListDrivers.ts

diff --git a/apps/desktop/src/components/admin/MySqlProcessList.vue b/apps/desktop/src/components/admin/ProcessListPanel.vue
similarity index 66%
rename from apps/desktop/src/components/admin/MySqlProcessList.vue
rename to apps/desktop/src/components/admin/ProcessListPanel.vue
index 864347c2b..881dc88af 100644
--- a/apps/desktop/src/components/admin/MySqlProcessList.vue
+++ b/apps/desktop/src/components/admin/ProcessListPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import { Activity, AlertTriangle, ArrowDown, ArrowUp, Ban, Loader2, RefreshCcw, Search } from "@lucide/vue";
+import { Activity, AlertTriangle, ArrowDown, ArrowUp, Ban, Copy, Loader2, RefreshCcw, Search } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
@@ -11,7 +11,8 @@ import { useToast } from "@/composables/useToast";
 import type { ConnectionConfig } from "@/types/database";
 import * as api from "@/lib/backend/api";
 import { executeWithProductionSqlGuard } from "@/lib/database/productionExecutionGuard";
-import { buildKillSql, clampInterval, createProcessListLoadCoordinator, DEFAULT_REFRESH_SECONDS, mapProcessRows, processListExecutionError, processListSessionCount, PROCESS_LIST_SQL, type ProcessRow } from "@/lib/database/mysqlProcessList";
+import { clampInterval, createProcessListLoadCoordinator, DEFAULT_REFRESH_SECONDS, processListExecutionError, processListSessionCount } from "@/lib/database/mysqlProcessList";
+import { resolveProcessListDriverForConnection, type ProcessRow } from "@/lib/database/processListDrivers";
 
 const props = defineProps<{
   connection: ConnectionConfig;
@@ -21,7 +22,11 @@ const { t } = useI18n();
 const connectionStore = useConnectionStore();
 const { toast } = useToast();
 
-type SortKey = keyof ProcessRow;
+// The panel is only opened for supported engines; guard the driver defensively so
+// a missing one degrades to an empty table rather than crashing the render.
+const driver = computed(() => resolveProcessListDriverForConnection(props.connection));
+const columns = computed(() => driver.value?.columns ?? []);
+const numericKeys = computed(() => new Set(columns.value.filter((column) => column.numeric).map((column) => column.key)));
 
 const rows = ref<ProcessRow[]>([]);
 const truncated = ref(false);
@@ -30,7 +35,7 @@ const loading = ref(false);
 const loadCoordinator = createProcessListLoadCoordinator();
 const loadError = ref("");
 const search = ref("");
-const sortKey = ref<SortKey>("time");
+const sortKey = ref<string>(driver.value?.defaultSortKey ?? "time");
 const sortDir = ref<"asc" | "desc">("desc");
 
 const autoRefresh = ref(false);
@@ -39,21 +44,29 @@ let timer: ReturnType<typeof setInterval> | undefined;
 
 const killTarget = ref<ProcessRow | null>(null);
 const killing = ref(false);
+const fallbackListSql = ref<string | null>(null);
 
-const COLUMNS: { key: SortKey; labelKey: string; mono?: boolean }[] = [
-  { key: "id", labelKey: "processList.colId", mono: true },
-  { key: "user", labelKey: "processList.colUser" },
-  { key: "host", labelKey: "processList.colHost" },
-  { key: "db", labelKey: "processList.colDb" },
-  { key: "command", labelKey: "processList.colCommand" },
-  { key: "time", labelKey: "processList.colTime", mono: true },
-  { key: "state", labelKey: "processList.colState" },
-  { key: "info", labelKey: "processList.colInfo" },
-];
+// Full-text preview for long cells (SQL statement / info), opened by clicking them.
+const previewText = ref<string | null>(null);
+
+function openPreview(value: string | number | null) {
+  if (value === null || value === undefined || String(value).length === 0) return;
+  previewText.value = String(value);
+}
+
+async function copyPreview() {
+  if (previewText.value === null) return;
+  try {
+    await navigator.clipboard.writeText(previewText.value);
+    toast(t("processList.copied"), 1500);
+  } catch (error: any) {
+    toast(error?.message || String(error), 3000);
+  }
+}
 
 const filteredRows = computed(() => {
   const query = search.value.trim().toLowerCase();
-  const base = query ? rows.value.filter((row) => [row.id, row.user, row.host, row.db, row.command, row.state, row.info].some((value) => value !== null && value !== undefined && String(value).toLowerCase().includes(query))) : rows.value.slice();
+  const base = query ? rows.value.filter((row) => Object.values(row).some((value) => value !== null && value !== undefined && String(value).toLowerCase().includes(query))) : rows.value.slice();
   const key = sortKey.value;
   const dir = sortDir.value === "asc" ? 1 : -1;
   return base.sort((a, b) => {
@@ -67,16 +80,18 @@ const filteredRows = computed(() => {
   });
 });
 
-function toggleSort(key: SortKey) {
+function toggleSort(key: string) {
   if (sortKey.value === key) {
     sortDir.value = sortDir.value === "asc" ? "desc" : "asc";
   } else {
     sortKey.value = key;
-    sortDir.value = key === "time" || key === "id" ? "desc" : "asc";
+    sortDir.value = numericKeys.value.has(key) ? "desc" : "asc";
   }
 }
 
 async function load(options: { silent?: boolean } = {}) {
+  const activeDriver = driver.value;
+  if (!activeDriver) return;
   if (!loadCoordinator.tryStart()) return;
   if (!options.silent) loading.value = true;
   loadError.value = "";
@@ -84,7 +99,7 @@ async function load(options: { silent?: boolean } = {}) {
     await connectionStore.ensureConnected(props.connection.id);
     if (ownSessionId.value === null) {
       try {
-        const idResult = await api.executeQuery(props.connection.id, "", "SELECT CONNECTION_ID()", undefined, undefined, { maxRows: 1 });
+        const idResult = await api.executeQuery(props.connection.id, "", activeDriver.ownSessionSql, undefined, undefined, { maxRows: 1 });
         const raw = idResult?.rows?.[0]?.[0];
         const parsed = Number(raw);
         if (Number.isFinite(parsed)) ownSessionId.value = parsed;
@@ -92,8 +107,17 @@ async function load(options: { silent?: boolean } = {}) {
         // Non-fatal: without our own id we simply cannot dim the self row.
       }
     }
-    const result = await api.executeQuery(props.connection.id, "", PROCESS_LIST_SQL, undefined, undefined, { maxRows: 5000 });
-    rows.value = mapProcessRows(result);
+    const listSql = fallbackListSql.value ?? activeDriver.listSql;
+    let result;
+    try {
+      result = await api.executeQuery(props.connection.id, "", listSql, undefined, undefined, { maxRows: activeDriver.maxRows });
+    } catch (error) {
+      if (fallbackListSql.value || !activeDriver.fallbackListSql || !activeDriver.shouldUseFallbackListSql?.(error)) throw error;
+      result = await api.executeQuery(props.connection.id, "", activeDriver.fallbackListSql, undefined, undefined, { maxRows: activeDriver.maxRows });
+      // Cache the compatible query so old servers do not fail once per refresh.
+      fallbackListSql.value = activeDriver.fallbackListSql;
+    }
+    rows.value = activeDriver.mapRows(result);
     truncated.value = result.truncated === true;
   } catch (error: any) {
     loadError.value = error?.message || String(error);
@@ -114,10 +138,11 @@ function requestKill(row: ProcessRow) {
 
 async function confirmKill() {
   const target = killTarget.value;
-  if (!target) return;
+  const activeDriver = driver.value;
+  if (!target || !activeDriver) return;
   killing.value = true;
   try {
-    const killSql = buildKillSql(target.id);
+    const killSql = activeDriver.buildKillSql(target.id);
     const result = await executeWithProductionSqlGuard({
       connection: props.connection,
       database: "",
@@ -128,6 +153,8 @@ async function confirmKill() {
     if (result === undefined) return;
     const executionError = processListExecutionError(result);
     if (executionError) throw new Error(executionError);
+    const killResultError = activeDriver.killResultError?.(result);
+    if (killResultError) throw new Error(killResultError);
     toast(t("processList.killSuccess", { id: target.id }), 2500);
     killTarget.value = null;
     await load({ silent: true });
@@ -174,6 +201,8 @@ watch(
     truncated.value = false;
     ownSessionId.value = null;
     search.value = "";
+    sortKey.value = driver.value?.defaultSortKey ?? "time";
+    sortDir.value = "desc";
     void load();
   },
 );
@@ -218,7 +247,7 @@ onBeforeUnmount(stopTimer);
       <table class="w-full border-collapse text-xs">
         <thead class="sticky top-0 z-10 bg-muted/40 backdrop-blur">
           <tr>
-            <th v-for="column in COLUMNS" :key="column.key" class="cursor-pointer select-none whitespace-nowrap border-b px-3 py-2 text-left font-medium hover:bg-accent" @click="toggleSort(column.key)">
+            <th v-for="column in columns" :key="column.key" class="cursor-pointer select-none whitespace-nowrap border-b px-3 py-2 text-left font-medium hover:bg-accent" @click="toggleSort(column.key)">
               <span class="inline-flex items-center gap-1">
                 {{ t(column.labelKey) }}
                 <ArrowUp v-if="sortKey === column.key && sortDir === 'asc'" class="h-3 w-3" />
@@ -230,17 +259,20 @@ onBeforeUnmount(stopTimer);
         </thead>
         <tbody>
           <tr v-for="row in filteredRows" :key="row.id" class="border-b hover:bg-accent/40" :class="{ 'bg-primary/5': isOwnSession(row) }">
-            <td class="whitespace-nowrap px-3 py-1.5 font-mono">
-              {{ row.id }}
-              <Badge v-if="isOwnSession(row)" variant="outline" class="ml-1 h-4 rounded px-1 text-[10px]">{{ t("processList.self") }}</Badge>
+            <td
+              v-for="column in columns"
+              :key="column.key"
+              class="px-3 py-1.5"
+              :class="[column.mono ? 'font-mono' : '', column.wide ? 'max-w-md cursor-pointer truncate hover:text-foreground hover:underline' : 'whitespace-nowrap', column.wide || column.key === 'db' || column.key === 'state' || column.key === 'wait' ? 'text-muted-foreground' : '']"
+              :title="column.wide ? (row[column.key] === null || row[column.key] === undefined ? '' : t('processList.previewTitle')) : undefined"
+              @click="column.wide ? openPreview(row[column.key]) : undefined"
+            >
+              <template v-if="column.key === 'id'">
+                {{ row.id }}
+                <Badge v-if="isOwnSession(row)" variant="outline" class="ml-1 h-4 rounded px-1 text-[10px]">{{ t("processList.self") }}</Badge>
+              </template>
+              <template v-else>{{ row[column.key] === null || row[column.key] === undefined ? "—" : row[column.key] }}</template>
             </td>
-            <td class="whitespace-nowrap px-3 py-1.5">{{ row.user }}</td>
-            <td class="whitespace-nowrap px-3 py-1.5">{{ row.host }}</td>
-            <td class="whitespace-nowrap px-3 py-1.5 text-muted-foreground">{{ row.db ?? "—" }}</td>
-            <td class="whitespace-nowrap px-3 py-1.5">{{ row.command }}</td>
-            <td class="whitespace-nowrap px-3 py-1.5 font-mono">{{ row.time }}</td>
-            <td class="whitespace-nowrap px-3 py-1.5 text-muted-foreground">{{ row.state ?? "—" }}</td>
-            <td class="max-w-md truncate px-3 py-1.5 font-mono text-muted-foreground" :title="row.info ?? ''">{{ row.info ?? "—" }}</td>
             <td class="px-3 py-1.5 text-right">
               <Button
                 variant="ghost"
@@ -256,7 +288,7 @@ onBeforeUnmount(stopTimer);
             </td>
           </tr>
           <tr v-if="!loading && filteredRows.length === 0">
-            <td :colspan="COLUMNS.length + 1" class="px-3 py-10 text-center text-muted-foreground">
+            <td :colspan="columns.length + 1" class="px-3 py-10 text-center text-muted-foreground">
               {{ search ? t("grid.noSearchResults") : t("processList.empty") }}
             </td>
           </tr>
@@ -291,5 +323,28 @@ onBeforeUnmount(stopTimer);
         </DialogFooter>
       </DialogContent>
     </Dialog>
+
+    <Dialog
+      :open="previewText !== null"
+      @update:open="
+        (open) => {
+          if (!open) previewText = null;
+        }
+      "
+    >
+      <DialogContent class="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{{ t("processList.previewTitle") }}</DialogTitle>
+        </DialogHeader>
+        <pre class="max-h-[60vh] overflow-auto whitespace-pre-wrap break-words rounded-md border bg-muted/30 p-3 font-mono text-xs">{{ previewText }}</pre>
+        <DialogFooter>
+          <Button variant="outline" class="gap-1.5" @click="copyPreview">
+            <Copy class="h-3.5 w-3.5" />
+            {{ t("processList.copy") }}
+          </Button>
+          <Button variant="secondary" @click="previewText = null">{{ t("dangerDialog.cancel") }}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>
diff --git a/apps/desktop/src/components/layout/ContentArea.vue b/apps/desktop/src/components/layout/ContentArea.vue
index efaa8220f..905be936c 100644
--- a/apps/desktop/src/components/layout/ContentArea.vue
+++ b/apps/desktop/src/components/layout/ContentArea.vue
@@ -54,7 +54,7 @@ const NacosAdminConsole = defineAsyncComponent(() => import("@/components/nacos/
 const ObjectBrowser = defineAsyncComponent(() => import("@/components/objects/ObjectBrowser.vue"));
 const TableStructureEditor = defineAsyncComponent(() => import("@/components/structure/TableStructureEditor.vue"));
 const DatabaseUserAdmin = defineAsyncComponent(() => import("@/components/admin/DatabaseUserAdmin.vue"));
-const MySqlProcessList = defineAsyncComponent(() => import("@/components/admin/MySqlProcessList.vue"));
+const ProcessListPanel = defineAsyncComponent(() => import("@/components/admin/ProcessListPanel.vue"));
 const MySqlDashboard = defineAsyncComponent(() => import("@/components/admin/MySqlDashboard.vue"));
 const DamengJobAdmin = defineAsyncComponent(() => import("@/components/admin/DamengJobAdmin.vue"));
 const ExplainPlanViewer = defineAsyncComponent(() => import("@/components/explain/ExplainPlanViewer.vue"));
@@ -1595,7 +1595,7 @@ defineExpose({ focusSearch, refreshData, handleModRTarget, requestQueryEditorExe
     </template>
 
     <template v-else-if="activeTab.mode === 'processlist' && activeConnection">
-      <MySqlProcessList :key="activeTab.id" :connection="activeConnection" />
+      <ProcessListPanel :key="activeTab.id" :connection="activeConnection" />
     </template>
 
     <template v-else-if="activeTab.mode === 'mysql-dashboard'">
diff --git a/apps/desktop/src/components/sidebar/TreeItem.vue b/apps/desktop/src/components/sidebar/TreeItem.vue
index eaa18dc10..417e48026 100644
--- a/apps/desktop/src/components/sidebar/TreeItem.vue
+++ b/apps/desktop/src/components/sidebar/TreeItem.vue
@@ -146,7 +146,7 @@ import { shouldMeasureSidebarLabelOverflow } from "@/lib/sidebar/sidebarLabelToo
 import { selectedTreeNodesInVisibleOrder as orderSelectedTreeNodes, treeSelectionRangeIdsByIndex, treeSelectionRangeIds } from "@/lib/sidebar/sidebarTreeSelection";
 import { connectionPasteTargetGroupId, selectedConnectionClipboardTargets, selectedConnectionDeleteTargets, selectedConnectionDuplicateTargets, selectedConnectionEditTarget } from "@/lib/sidebar/sidebarConnectionSelection";
 import { supportsDatabaseUserAdmin } from "@/lib/database/databaseUserAdmin";
-import { supportsProcessList } from "@/lib/database/mysqlProcessList";
+import { connectionSupportsProcessList } from "@/lib/database/processListDrivers";
 import { connectionSupportsServerDashboard } from "@/lib/database/mysqlServerStatus";
 import { canCloseSidebarDatabaseConnection, isSidebarDatabaseOpened } from "@/lib/sidebar/sidebarDatabaseOpenState";
 import { sidebarTreeContextKey } from "@/lib/sidebar/sidebarTreeContext";
@@ -4727,7 +4727,7 @@ function treeItemMenuItems(): ContextMenuItem[] {
     if (supportsDatabaseUserAdmin(currentDatabaseType())) {
       items.push({ label: t("contextMenu.userAdmin"), action: openUserAdmin, icon: UsersRound });
     }
-    if (supportsProcessList(currentDatabaseType())) {
+    if (node.connectionId && connectionSupportsProcessList(connectionStore.getConfig(node.connectionId))) {
       items.push({ label: t("contextMenu.processList"), action: openProcessList, icon: Activity });
     }
     if (node.connectionId && connectionSupportsServerDashboard(connectionStore.getConfig(node.connectionId))) {
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index 5502f9b1e..e08495188 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -1717,6 +1717,11 @@ export default {
     colTime: "Time",
     colState: "State",
     colInfo: "Info",
+    colPid: "PID",
+    colClient: "Client",
+    colApp: "Application",
+    colWait: "Wait",
+    colQuery: "Query",
     colActions: "Actions",
     self: "you",
     kill: "Kill",
@@ -1726,6 +1731,9 @@ export default {
     killConfirm: "Kill session {id} ({user})? Its current statement will be aborted and the connection closed.",
     killSuccess: "Session {id} killed",
     killFailed: "Failed to kill session: {message}",
+    previewTitle: "Statement",
+    copy: "Copy",
+    copied: "Copied",
   },
   serverDashboard: {
     title: "Server Dashboard",
diff --git a/apps/desktop/src/lib/__tests__/database/postgresProcessList.spec.ts b/apps/desktop/src/lib/__tests__/database/postgresProcessList.spec.ts
new file mode 100644
index 000000000..f6efa8ce2
--- /dev/null
+++ b/apps/desktop/src/lib/__tests__/database/postgresProcessList.spec.ts
@@ -0,0 +1,133 @@
+import { describe, expect, it } from "vitest";
+import type { QueryResult } from "@/types/database";
+import { buildPgKillSql, isPgProcessListCompatibilityError, mapPgProcessRows, pgKillResultError, PG_PROCESS_LIST_LEGACY_SQL, PG_PROCESS_LIST_SQL, supportsPgProcessList } from "@/lib/database/postgresProcessList";
+import { connectionSupportsProcessList, resolveProcessListDriver, resolveProcessListDriverForConnection, supportsProcessList } from "@/lib/database/processListDrivers";
+import type { ConnectionConfig } from "@/types/database";
+
+function result(columns: string[], rows: (string | number | boolean | null)[][]): QueryResult {
+  return { columns, rows, affected_rows: 0, execution_time_ms: 0 };
+}
+
+describe("mapPgProcessRows", () => {
+  it("maps a pg_stat_activity result into typed rows", () => {
+    const rows = mapPgProcessRows(result(["pid", "user", "db", "client", "app", "state", "wait", "time", "query"], [[4211, "app", "shop", "10.0.0.4", "psql", "active", "Client:ClientRead", 12, "SELECT * FROM orders"]]));
+    expect(rows).toEqual([
+      {
+        id: 4211,
+        user: "app",
+        db: "shop",
+        client: "10.0.0.4",
+        app: "psql",
+        state: "active",
+        wait: "Client:ClientRead",
+        time: 12,
+        query: "SELECT * FROM orders",
+      },
+    ]);
+  });
+
+  it("tolerates NULL columns and case-variant names", () => {
+    const rows = mapPgProcessRows(result(["PID", "USER", "DB", "CLIENT", "APP", "STATE", "WAIT", "TIME", "QUERY"], [["4200", "postgres", null, "local", null, "idle", null, "340", null]]));
+    expect(rows[0]).toMatchObject({ id: 4200, user: "postgres", db: null, app: null, state: "idle", wait: null, time: 340, query: null });
+  });
+
+  it("returns an empty array for empty or malformed input", () => {
+    expect(mapPgProcessRows(null)).toEqual([]);
+    expect(mapPgProcessRows(undefined)).toEqual([]);
+    expect(mapPgProcessRows(result([], []))).toEqual([]);
+  });
+});
+
+describe("buildPgKillSql", () => {
+  it("builds pg_terminate_backend for a valid pid", () => {
+    expect(buildPgKillSql(4211)).toBe("SELECT pg_terminate_backend(4211)");
+  });
+
+  it("rejects non-integer, zero, or negative pids", () => {
+    expect(() => buildPgKillSql(1.5)).toThrow();
+    expect(() => buildPgKillSql(0)).toThrow();
+    expect(() => buildPgKillSql(-1)).toThrow();
+    expect(() => buildPgKillSql(Number.NaN)).toThrow();
+  });
+});
+
+describe("Postgres compatibility", () => {
+  it("provides a pre-9.6 query and only falls back for missing wait-event columns", () => {
+    expect(PG_PROCESS_LIST_SQL).toContain("wait_event_type");
+    expect(PG_PROCESS_LIST_LEGACY_SQL).toContain("CASE WHEN waiting THEN 'Lock'");
+    expect(PG_PROCESS_LIST_LEGACY_SQL).not.toContain("wait_event_type");
+    expect(isPgProcessListCompatibilityError(new Error('column "wait_event_type" does not exist'))).toBe(true);
+    expect(isPgProcessListCompatibilityError({ code: "42703" })).toBe(true);
+    expect(isPgProcessListCompatibilityError(new Error("permission denied for view pg_stat_activity"))).toBe(false);
+  });
+
+  it("requires pg_terminate_backend to confirm termination", () => {
+    expect(pgKillResultError([result(["pg_terminate_backend"], [[true]])])).toBeNull();
+    expect(pgKillResultError([result(["pg_terminate_backend"], [["t"]])])).toBeNull();
+    expect(pgKillResultError([result(["pg_terminate_backend"], [[false]])])).toContain("did not terminate");
+    expect(pgKillResultError([result(["pg_terminate_backend"], [])])).toContain("did not terminate");
+  });
+});
+
+describe("supportsPgProcessList", () => {
+  it("covers the Postgres-kernel family and excludes divergent wire-protocol engines", () => {
+    expect(supportsPgProcessList("postgres")).toBe(true);
+    // Postgres-kernel forks are unverified for now, so they stay excluded.
+    expect(supportsPgProcessList("opengauss")).toBe(false);
+    expect(supportsPgProcessList("kingbase")).toBe(false);
+    expect(supportsPgProcessList("redshift")).toBe(false);
+    expect(supportsPgProcessList("questdb")).toBe(false);
+    expect(supportsPgProcessList("mysql")).toBe(false);
+    expect(supportsPgProcessList(undefined)).toBe(false);
+  });
+});
+
+describe("resolveProcessListDriver", () => {
+  it("routes MySQL and Postgres engines to distinct drivers", () => {
+    const mysql = resolveProcessListDriver("mysql");
+    const postgres = resolveProcessListDriver("postgres");
+    expect(mysql?.buildKillSql(7)).toBe("KILL CONNECTION 7");
+    expect(postgres?.buildKillSql(7)).toBe("SELECT pg_terminate_backend(7)");
+    expect(postgres?.fallbackListSql).toBe(PG_PROCESS_LIST_LEGACY_SQL);
+    expect(postgres?.shouldUseFallbackListSql?.(new Error('column "wait_event" does not exist'))).toBe(true);
+    expect(postgres?.killResultError?.([result(["pg_terminate_backend"], [[false]])])).toContain("did not terminate");
+    expect(resolveProcessListDriver("sqlite")).toBeNull();
+  });
+
+  it("unifies process-list support across both families", () => {
+    expect(supportsProcessList("mysql")).toBe(true);
+    expect(supportsProcessList("postgres")).toBe(true);
+    expect(supportsProcessList("sqlite")).toBe(false);
+    expect(supportsProcessList(undefined)).toBe(false);
+  });
+});
+
+function conn(partial: Partial<ConnectionConfig>): ConnectionConfig {
+  return { db_type: "mysql", ...partial } as ConnectionConfig;
+}
+
+describe("connectionSupportsProcessList", () => {
+  it("gates on the real connection profile", () => {
+    expect(connectionSupportsProcessList(conn({ db_type: "mysql" }))).toBe(true);
+    expect(connectionSupportsProcessList(conn({ db_type: "postgres" }))).toBe(true);
+    expect(connectionSupportsProcessList(conn({ db_type: "sqlite" }))).toBe(false);
+    expect(connectionSupportsProcessList(undefined)).toBe(false);
+  });
+
+  it("resolves JDBC connections by their effective engine", () => {
+    expect(connectionSupportsProcessList(conn({ db_type: "jdbc", connection_string: "jdbc:mysql://db:3306/app" }))).toBe(true);
+    expect(connectionSupportsProcessList(conn({ db_type: "jdbc", connection_string: "jdbc:postgresql://db:5432/app" }))).toBe(true);
+  });
+
+  it("excludes Kyuubi / Hive2 JDBC that infer as MySQL but cannot serve SHOW PROCESSLIST", () => {
+    expect(connectionSupportsProcessList(conn({ db_type: "jdbc", connection_string: "jdbc:kyuubi://gw:10009/" }))).toBe(false);
+    expect(connectionSupportsProcessList(conn({ db_type: "jdbc", connection_string: "jdbc:hive2://hs2:10000/default" }))).toBe(false);
+  });
+});
+
+describe("resolveProcessListDriverForConnection", () => {
+  it("returns the engine driver for a JDBC MySQL connection and null for lookalikes", () => {
+    expect(resolveProcessListDriverForConnection(conn({ db_type: "jdbc", connection_string: "jdbc:mysql://db/app" }))?.buildKillSql(9)).toBe("KILL CONNECTION 9");
+    expect(resolveProcessListDriverForConnection(conn({ db_type: "jdbc", connection_string: "jdbc:hive2://hs2/default" }))).toBeNull();
+  });
+});
diff --git a/apps/desktop/src/lib/database/postgresProcessList.ts b/apps/desktop/src/lib/database/postgresProcessList.ts
new file mode 100644
index 000000000..7e89c2ae2
--- /dev/null
+++ b/apps/desktop/src/lib/database/postgresProcessList.ts
@@ -0,0 +1,146 @@
+import type { DatabaseType, QueryResult } from "@/types/database";
+
+/**
+ * PostgreSQL "current activity / process list" helpers. Pure and framework-free
+ * so they can be unit-tested in isolation; the generic panel component wires them
+ * to the SQL bridge and the production-safety guard via the driver registry.
+ *
+ * The MySQL family lives in `./mysqlProcessList`; the generic, engine-agnostic
+ * bits (coordinator, interval clamping, session counting) are shared from there.
+ */
+
+const PG_PROCESS_LIST_DB_TYPES = new Set<DatabaseType>(["postgres"]);
+
+/**
+ * One row per server-side backend. `now() - query_start` gives the age of the
+ * currently running (or last) statement; we fall back to the transaction and
+ * backend start so idle sessions still report a sensible age. Own session is
+ * kept in the result set so the panel can dim it rather than hide it.
+ */
+export const PG_PROCESS_LIST_SQL = `SELECT pid,
+       usename AS "user",
+       datname AS db,
+       coalesce(host(client_addr), client_hostname, 'local') AS client,
+       application_name AS app,
+       state,
+       coalesce(nullif(wait_event_type, '') || ':' || wait_event, wait_event_type, '') AS wait,
+       floor(extract(epoch FROM (now() - coalesce(query_start, xact_start, backend_start))))::bigint AS time,
+       query
+FROM pg_stat_activity
+ORDER BY time DESC NULLS LAST`;
+
+/** PostgreSQL 9.2-9.5 expose `waiting` instead of wait-event detail columns. */
+export const PG_PROCESS_LIST_LEGACY_SQL = `SELECT pid,
+       usename AS "user",
+       datname AS db,
+       coalesce(host(client_addr), client_hostname, 'local') AS client,
+       application_name AS app,
+       state,
+       CASE WHEN waiting THEN 'Lock' ELSE '' END AS wait,
+       floor(extract(epoch FROM (now() - coalesce(query_start, xact_start, backend_start))))::bigint AS time,
+       query
+FROM pg_stat_activity
+ORDER BY time DESC NULLS LAST`;
+
+/** Scalar query that returns the viewer's own backend pid. */
+export const PG_OWN_SESSION_SQL = "SELECT pg_backend_pid()";
+
+export interface PgProcessRow {
+  id: number;
+  user: string;
+  db: string | null;
+  client: string;
+  app: string | null;
+  state: string | null;
+  wait: string | null;
+  time: number;
+  query: string | null;
+}
+
+function columnIndex(columns: string[], name: string): number {
+  const target = name.toLowerCase();
+  return columns.findIndex((column) => column.toLowerCase() === target);
+}
+
+function asString(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  return String(value);
+}
+
+function asNullableString(value: unknown): string | null {
+  if (value === null || value === undefined) return null;
+  const text = String(value);
+  return text.length === 0 ? null : text;
+}
+
+function asNumber(value: unknown): number {
+  if (typeof value === "number") return value;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+/**
+ * Map a `pg_stat_activity` result into typed rows. Column names are matched
+ * case-insensitively and any missing column degrades to an empty value rather
+ * than throwing, so forks that rename or drop a column still render.
+ */
+export function mapPgProcessRows(result: QueryResult | null | undefined): PgProcessRow[] {
+  if (!result || !Array.isArray(result.columns) || !Array.isArray(result.rows)) return [];
+  const columns = result.columns;
+  const pidIdx = columnIndex(columns, "pid");
+  const userIdx = columnIndex(columns, "user");
+  const dbIdx = columnIndex(columns, "db");
+  const clientIdx = columnIndex(columns, "client");
+  const appIdx = columnIndex(columns, "app");
+  const stateIdx = columnIndex(columns, "state");
+  const waitIdx = columnIndex(columns, "wait");
+  const timeIdx = columnIndex(columns, "time");
+  const queryIdx = columnIndex(columns, "query");
+
+  const cell = (row: (string | number | boolean | null)[], idx: number) => (idx >= 0 ? row[idx] : null);
+
+  return result.rows.map((row) => ({
+    id: asNumber(cell(row, pidIdx)),
+    user: asString(cell(row, userIdx)),
+    db: asNullableString(cell(row, dbIdx)),
+    client: asString(cell(row, clientIdx)),
+    app: asNullableString(cell(row, appIdx)),
+    state: asNullableString(cell(row, stateIdx)),
+    wait: asNullableString(cell(row, waitIdx)),
+    time: asNumber(cell(row, timeIdx)),
+    query: asNullableString(cell(row, queryIdx)),
+  }));
+}
+
+/**
+ * Build a `SELECT pg_terminate_backend(<pid>)` statement. `pid` is validated as a
+ * finite positive integer (never interpolated as free text) so there is no
+ * injection path.
+ */
+export function buildPgKillSql(pid: number): string {
+  if (!Number.isInteger(pid) || pid <= 0) {
+    throw new Error(`Invalid backend pid: ${pid}`);
+  }
+  return `SELECT pg_terminate_backend(${pid})`;
+}
+
+/** Return an error when PostgreSQL declines to terminate the target backend. */
+export function pgKillResultError(results: QueryResult[]): string | null {
+  const result = results.find((item) => item.execution_error !== true);
+  const value = result?.rows?.[0]?.[0];
+  if (value === true || value === 1 || String(value).toLowerCase() === "t" || String(value).toLowerCase() === "true") return null;
+  return "pg_terminate_backend did not terminate the backend";
+}
+
+/** Detect the undefined-column failure produced by pre-9.6 pg_stat_activity. */
+export function isPgProcessListCompatibilityError(error: unknown): boolean {
+  const code = typeof error === "object" && error !== null && "code" in error ? String((error as { code?: unknown }).code ?? "") : "";
+  if (code === "42703") return true;
+  const message = error instanceof Error ? error.message : String(error);
+  return /(?:wait_event_type|wait_event).*(?:does not exist|42703)|(?:does not exist|42703).*(?:wait_event_type|wait_event)/i.test(message);
+}
+
+/** Whether the given database type exposes the Postgres process-list viewer. */
+export function supportsPgProcessList(dbType: DatabaseType | undefined): boolean {
+  return !!dbType && PG_PROCESS_LIST_DB_TYPES.has(dbType);
+}
diff --git a/apps/desktop/src/lib/database/processListDrivers.ts b/apps/desktop/src/lib/database/processListDrivers.ts
new file mode 100644
index 000000000..e22c2bd90
--- /dev/null
+++ b/apps/desktop/src/lib/database/processListDrivers.ts
@@ -0,0 +1,133 @@
+import type { ConnectionConfig, DatabaseType, QueryResult } from "@/types/database";
+import { effectiveDatabaseTypeForConnection } from "@/lib/database/jdbcDialect";
+import { buildKillSql as buildMysqlKillSql, mapProcessRows as mapMysqlProcessRows, PROCESS_LIST_SQL as MYSQL_PROCESS_LIST_SQL, supportsProcessList as supportsMysqlProcessList } from "./mysqlProcessList";
+import { buildPgKillSql, isPgProcessListCompatibilityError, mapPgProcessRows, pgKillResultError, PG_OWN_SESSION_SQL, PG_PROCESS_LIST_LEGACY_SQL, PG_PROCESS_LIST_SQL, supportsPgProcessList } from "./postgresProcessList";
+
+/**
+ * Engine-agnostic process-list model. Each supported engine contributes a driver
+ * describing how to list sessions, identify the caller's own session, render the
+ * columns, and kill a session. The panel component stays entirely generic.
+ */
+
+/** A displayable session row. `id` is the value passed to the driver's kill SQL. */
+export type ProcessRow = { id: number } & Record<string, string | number | null>;
+
+export interface ProcessColumn {
+  /** Key into the mapped row. */
+  key: string;
+  /** i18n key for the header label. */
+  labelKey: string;
+  /** Render the cell in a monospace font. */
+  mono?: boolean;
+  /** Sort numerically and default to descending on first click. */
+  numeric?: boolean;
+  /** Long free text (SQL statement) — truncate with a hover title. */
+  wide?: boolean;
+}
+
+export interface ProcessListDriver {
+  /** SQL that lists current sessions, one row each. */
+  listSql: string;
+  /** Compatibility query used when the primary list SQL references newer columns. */
+  fallbackListSql?: string;
+  /** Restrict fallback attempts to known version-compatibility failures. */
+  shouldUseFallbackListSql?(error: unknown): boolean;
+  /** Scalar SQL returning the caller's own session id (nullable path tolerated). */
+  ownSessionSql: string;
+  /** Columns to render, in display order. */
+  columns: ProcessColumn[];
+  /** Column key used for the initial sort. */
+  defaultSortKey: string;
+  /** Upper bound on rows fetched per refresh. */
+  maxRows: number;
+  /** Map a raw list result into typed rows. */
+  mapRows(result: QueryResult | null | undefined): ProcessRow[];
+  /** Build the validated statement that kills the given session id. */
+  buildKillSql(id: number): string;
+  /** Validate any engine-specific success value returned by the kill statement. */
+  killResultError?(results: QueryResult[]): string | null;
+}
+
+const MYSQL_COLUMNS: ProcessColumn[] = [
+  { key: "id", labelKey: "processList.colId", mono: true, numeric: true },
+  { key: "user", labelKey: "processList.colUser" },
+  { key: "host", labelKey: "processList.colHost" },
+  { key: "db", labelKey: "processList.colDb" },
+  { key: "command", labelKey: "processList.colCommand" },
+  { key: "time", labelKey: "processList.colTime", mono: true, numeric: true },
+  { key: "state", labelKey: "processList.colState" },
+  { key: "info", labelKey: "processList.colInfo", mono: true, wide: true },
+];
+
+const POSTGRES_COLUMNS: ProcessColumn[] = [
+  { key: "id", labelKey: "processList.colPid", mono: true, numeric: true },
+  { key: "user", labelKey: "processList.colUser" },
+  { key: "db", labelKey: "processList.colDb" },
+  { key: "client", labelKey: "processList.colClient" },
+  { key: "app", labelKey: "processList.colApp" },
+  { key: "state", labelKey: "processList.colState" },
+  { key: "wait", labelKey: "processList.colWait" },
+  { key: "time", labelKey: "processList.colTime", mono: true, numeric: true },
+  { key: "query", labelKey: "processList.colQuery", mono: true, wide: true },
+];
+
+const MYSQL_DRIVER: ProcessListDriver = {
+  listSql: MYSQL_PROCESS_LIST_SQL,
+  ownSessionSql: "SELECT CONNECTION_ID()",
+  columns: MYSQL_COLUMNS,
+  defaultSortKey: "time",
+  maxRows: 5000,
+  // Typed structs carry no index signature; they are plain string-keyed objects at runtime.
+  mapRows: (result) => mapMysqlProcessRows(result) as unknown as ProcessRow[],
+  buildKillSql: buildMysqlKillSql,
+};
+
+const POSTGRES_DRIVER: ProcessListDriver = {
+  listSql: PG_PROCESS_LIST_SQL,
+  fallbackListSql: PG_PROCESS_LIST_LEGACY_SQL,
+  shouldUseFallbackListSql: isPgProcessListCompatibilityError,
+  ownSessionSql: PG_OWN_SESSION_SQL,
+  columns: POSTGRES_COLUMNS,
+  defaultSortKey: "time",
+  maxRows: 5000,
+  mapRows: (result) => mapPgProcessRows(result) as unknown as ProcessRow[],
+  buildKillSql: buildPgKillSql,
+  killResultError: pgKillResultError,
+};
+
+/** Resolve the process-list driver for a connection, or null if unsupported. */
+export function resolveProcessListDriver(dbType: DatabaseType | undefined): ProcessListDriver | null {
+  if (supportsMysqlProcessList(dbType)) return MYSQL_DRIVER;
+  if (supportsPgProcessList(dbType)) return POSTGRES_DRIVER;
+  return null;
+}
+
+/** Whether any process-list viewer (MySQL or Postgres family) covers this engine. */
+export function supportsProcessList(dbType: DatabaseType | undefined): boolean {
+  return resolveProcessListDriver(dbType) !== null;
+}
+
+/**
+ * JDBC profiles that only borrow MySQL SQL syntax (Kyuubi / HiveServer2) infer as
+ * `mysql` but are Spark/Hive engines that cannot serve `SHOW FULL PROCESSLIST`.
+ */
+const MYSQL_LOOKALIKE_JDBC = /(?:kyuubi|hive2|org\.apache\.hive\.jdbc\.HiveDriver|hive-jdbc)/i;
+
+/**
+ * Resolve the process-list driver from the real connection profile. Uses the
+ * effective engine (so JDBC connections that resolve to MySQL/Postgres work) and
+ * excludes MySQL-lookalike JDBC engines that cannot serve the process list.
+ */
+export function resolveProcessListDriverForConnection(connection: ConnectionConfig | undefined): ProcessListDriver | null {
+  if (!connection) return null;
+  if (connection.db_type === "jdbc") {
+    const profile = [connection.driver_profile, connection.connection_string, connection.jdbc_driver_class, ...(connection.jdbc_driver_paths ?? [])].filter(Boolean).join("\n");
+    if (MYSQL_LOOKALIKE_JDBC.test(profile)) return null;
+  }
+  return resolveProcessListDriver(effectiveDatabaseTypeForConnection(connection));
+}
+
+/** Connection-aware process-list gate (mirrors the server-dashboard gate). */
+export function connectionSupportsProcessList(connection: ConnectionConfig | undefined): boolean {
+  return resolveProcessListDriverForConnection(connection) !== null;
+}
diff --git a/apps/desktop/src/stores/queryStore.ts b/apps/desktop/src/stores/queryStore.ts
index d1a5dc36c..7f240603d 100644
--- a/apps/desktop/src/stores/queryStore.ts
+++ b/apps/desktop/src/stores/queryStore.ts
@@ -1013,7 +1013,7 @@ export const useQueryStore = defineStore("query", () => {
     const id = uuid();
     const tab: QueryTab = {
       id,
-      title: t("processList.title"),
+      title: conn?.name ? `${conn.name} - ${t("processList.title")}` : t("processList.title"),
       connectionId,
       database: conn?.database || "",
       sql: "",