From 2dec6ebeb8c5922e4a6dfd5b337926a9f2ccc875 Mon Sep 17 00:00:00 2001
From: Bagus Wahyu Aprianto <antwa@users.noreply.github.com>
Date: Mon, 13 Jul 2026 18:07:05 +0700
Subject: [PATCH] feat(mysql): add process list viewer

---
 .../src/components/admin/MySqlProcessList.vue | 288 ++++++++++++++++++
 .../src/components/layout/AppTabBar.vue       |   5 +-
 .../src/components/layout/ContentArea.vue     |   5 +
 .../src/components/sidebar/TreeItem.vue       |  17 ++
 apps/desktop/src/i18n/locales/en.ts           |  25 ++
 apps/desktop/src/i18n/locales/es.ts           |  25 ++
 apps/desktop/src/i18n/locales/it.ts           |  25 ++
 apps/desktop/src/i18n/locales/ja.ts           |  25 ++
 apps/desktop/src/i18n/locales/pt-BR.ts        |  25 ++
 apps/desktop/src/i18n/locales/zh-CN.ts        |  25 ++
 apps/desktop/src/i18n/locales/zh-TW.ts        |  25 ++
 .../database/mysqlProcessList.spec.ts         |  76 +++++
 .../src/lib/database/mysqlProcessList.ts      | 116 +++++++
 apps/desktop/src/stores/queryStore.ts         |  26 ++
 apps/desktop/src/types/database.ts            |   2 +-
 15 files changed, 708 insertions(+), 2 deletions(-)
 create mode 100644 apps/desktop/src/components/admin/MySqlProcessList.vue
 create mode 100644 apps/desktop/src/lib/__tests__/database/mysqlProcessList.spec.ts
 create mode 100644 apps/desktop/src/lib/database/mysqlProcessList.ts

diff --git a/apps/desktop/src/components/admin/MySqlProcessList.vue b/apps/desktop/src/components/admin/MySqlProcessList.vue
new file mode 100644
index 000000000..4cb6f3578
--- /dev/null
+++ b/apps/desktop/src/components/admin/MySqlProcessList.vue
@@ -0,0 +1,288 @@
+<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 { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { useConnectionStore } from "@/stores/connectionStore";
+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, DEFAULT_REFRESH_SECONDS, mapProcessRows, PROCESS_LIST_SQL, type ProcessRow } from "@/lib/database/mysqlProcessList";
+
+const props = defineProps<{
+  connection: ConnectionConfig;
+}>();
+
+const { t } = useI18n();
+const connectionStore = useConnectionStore();
+const { toast } = useToast();
+
+type SortKey = keyof ProcessRow;
+
+const rows = ref<ProcessRow[]>([]);
+const ownSessionId = ref<number | null>(null);
+const loading = ref(false);
+const loadError = ref("");
+const search = ref("");
+const sortKey = ref<SortKey>("time");
+const sortDir = ref<"asc" | "desc">("desc");
+
+const autoRefresh = ref(false);
+const intervalSeconds = ref(DEFAULT_REFRESH_SECONDS);
+let timer: ReturnType<typeof setInterval> | undefined;
+
+const killTarget = ref<ProcessRow | null>(null);
+const killing = ref(false);
+
+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" },
+];
+
+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 key = sortKey.value;
+  const dir = sortDir.value === "asc" ? 1 : -1;
+  return base.sort((a, b) => {
+    const av = a[key];
+    const bv = b[key];
+    if (av === bv) return 0;
+    if (av === null || av === undefined) return 1;
+    if (bv === null || bv === undefined) return -1;
+    if (typeof av === "number" && typeof bv === "number") return (av - bv) * dir;
+    return String(av).localeCompare(String(bv)) * dir;
+  });
+});
+
+function toggleSort(key: SortKey) {
+  if (sortKey.value === key) {
+    sortDir.value = sortDir.value === "asc" ? "desc" : "asc";
+  } else {
+    sortKey.value = key;
+    sortDir.value = key === "time" || key === "id" ? "desc" : "asc";
+  }
+}
+
+async function load(options: { silent?: boolean } = {}) {
+  if (loading.value) return;
+  if (!options.silent) loading.value = true;
+  loadError.value = "";
+  try {
+    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 raw = idResult?.rows?.[0]?.[0];
+        const parsed = Number(raw);
+        if (Number.isFinite(parsed)) ownSessionId.value = parsed;
+      } catch {
+        // 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);
+  } catch (error: any) {
+    loadError.value = error?.message || String(error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function isOwnSession(row: ProcessRow): boolean {
+  return ownSessionId.value !== null && row.id === ownSessionId.value;
+}
+
+function requestKill(row: ProcessRow) {
+  if (isOwnSession(row)) return;
+  killTarget.value = row;
+}
+
+async function confirmKill() {
+  const target = killTarget.value;
+  if (!target) return;
+  killing.value = true;
+  try {
+    const killSql = buildKillSql(target.id);
+    const result = await executeWithProductionSqlGuard({
+      connection: props.connection,
+      database: "",
+      sql: killSql,
+      source: t("production.sourceAdmin"),
+      execute: () => api.executeMulti(props.connection.id, "", killSql, undefined, undefined, { maxRows: 1 }),
+    });
+    if (result === undefined) return;
+    toast(t("processList.killSuccess", { id: target.id }), 2500);
+    killTarget.value = null;
+    await load({ silent: true });
+  } catch (error: any) {
+    toast(t("processList.killFailed", { message: error?.message || String(error) }), 5000);
+  } finally {
+    killing.value = false;
+  }
+}
+
+function stopTimer() {
+  if (timer) {
+    clearInterval(timer);
+    timer = undefined;
+  }
+}
+
+function restartTimer() {
+  stopTimer();
+  if (!autoRefresh.value) return;
+  const seconds = clampInterval(intervalSeconds.value);
+  timer = setInterval(() => {
+    // Skip polling while the window is hidden to avoid needless server load.
+    if (document.hidden) return;
+    void load({ silent: true });
+  }, seconds * 1000);
+}
+
+function onIntervalInput() {
+  intervalSeconds.value = clampInterval(Number(intervalSeconds.value));
+  if (autoRefresh.value) restartTimer();
+}
+
+watch(autoRefresh, restartTimer);
+
+watch(intervalSeconds, () => {
+  if (autoRefresh.value) restartTimer();
+});
+
+watch(
+  () => props.connection.id,
+  () => {
+    rows.value = [];
+    ownSessionId.value = null;
+    search.value = "";
+    void load();
+  },
+);
+
+onMounted(() => void load());
+onBeforeUnmount(stopTimer);
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col bg-background">
+    <div class="flex h-11 shrink-0 items-center gap-2 border-b bg-muted/20 px-3">
+      <div class="flex min-w-0 items-center gap-2">
+        <Activity class="h-4 w-4 text-primary" />
+        <div class="truncate text-sm font-semibold">{{ t("processList.title") }}</div>
+        <Badge variant="outline" class="h-5 rounded-md px-1.5 text-[11px]">{{ connection.name }}</Badge>
+        <Badge variant="secondary" class="h-5 rounded-md px-1.5 text-[11px]">{{ t("processList.sessionCount", { count: filteredRows.length }) }}</Badge>
+      </div>
+      <div class="ml-auto flex items-center gap-2">
+        <div class="flex h-7 items-center gap-1.5 rounded-md border bg-background px-2">
+          <Search class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+          <input v-model="search" class="h-full w-40 min-w-0 bg-transparent text-xs outline-none placeholder:text-muted-foreground" :placeholder="t('processList.filter')" />
+        </div>
+        <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <input v-model="autoRefresh" type="checkbox" class="h-3.5 w-3.5 accent-primary" />
+          {{ t("processList.autoRefresh") }}
+        </label>
+        <div class="flex h-7 items-center gap-1 rounded-md border bg-background px-1.5">
+          <Input v-model.number="intervalSeconds" type="number" min="1" max="3600" class="h-6 w-14 border-0 px-1 text-xs shadow-none focus-visible:ring-0" @change="onIntervalInput" />
+          <span class="pr-1 text-[11px] text-muted-foreground">{{ t("processList.seconds") }}</span>
+        </div>
+        <Button variant="outline" size="sm" class="h-7 gap-1.5 px-2 text-xs" :disabled="loading" @click="load()">
+          <Loader2 v-if="loading" class="h-3.5 w-3.5 animate-spin" />
+          <RefreshCcw v-else class="h-3.5 w-3.5" />
+          {{ t("grid.refresh") }}
+        </Button>
+      </div>
+    </div>
+
+    <div v-if="loadError" class="border-b bg-destructive/10 px-3 py-2 text-xs text-destructive">{{ loadError }}</div>
+
+    <div class="min-h-0 flex-1 overflow-auto">
+      <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)">
+              <span class="inline-flex items-center gap-1">
+                {{ t(column.labelKey) }}
+                <ArrowUp v-if="sortKey === column.key && sortDir === 'asc'" class="h-3 w-3" />
+                <ArrowDown v-else-if="sortKey === column.key && sortDir === 'desc'" class="h-3 w-3" />
+              </span>
+            </th>
+            <th class="w-16 whitespace-nowrap border-b px-3 py-2 text-right font-medium">{{ t("processList.colActions") }}</th>
+          </tr>
+        </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>
+            <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"
+                size="sm"
+                class="h-6 gap-1 px-1.5 text-[11px] text-destructive hover:bg-destructive/10 hover:text-destructive disabled:opacity-40"
+                :disabled="isOwnSession(row)"
+                :title="isOwnSession(row) ? t('processList.cannotKillSelf') : t('processList.kill')"
+                @click="requestKill(row)"
+              >
+                <Ban class="h-3.5 w-3.5" />
+                {{ t("processList.kill") }}
+              </Button>
+            </td>
+          </tr>
+          <tr v-if="!loading && filteredRows.length === 0">
+            <td :colspan="COLUMNS.length + 1" class="px-3 py-10 text-center text-muted-foreground">
+              {{ search ? t("grid.noSearchResults") : t("processList.empty") }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <Dialog
+      :open="killTarget !== null"
+      @update:open="
+        (open) => {
+          if (!open) killTarget = null;
+        }
+      "
+    >
+      <DialogContent class="max-w-sm">
+        <DialogHeader>
+          <DialogTitle class="flex items-center gap-2">
+            <AlertTriangle class="h-4 w-4 text-destructive" />
+            {{ t("processList.killTitle") }}
+          </DialogTitle>
+        </DialogHeader>
+        <p v-if="killTarget" class="text-sm text-muted-foreground">
+          {{ t("processList.killConfirm", { id: killTarget.id, user: killTarget.user }) }}
+        </p>
+        <DialogFooter>
+          <Button variant="outline" @click="killTarget = null">{{ t("dangerDialog.cancel") }}</Button>
+          <Button variant="destructive" :disabled="killing" @click="confirmKill">
+            <Loader2 v-if="killing" class="mr-1.5 h-3.5 w-3.5 animate-spin" />
+            {{ t("processList.kill") }}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>
diff --git a/apps/desktop/src/components/layout/AppTabBar.vue b/apps/desktop/src/components/layout/AppTabBar.vue
index 3f3002890..c6b6a4984 100644
--- a/apps/desktop/src/components/layout/AppTabBar.vue
+++ b/apps/desktop/src/components/layout/AppTabBar.vue
@@ -2,7 +2,7 @@
 import { computed, ref, watch, nextTick, onUnmounted } from "vue";
 import type { CSSProperties } from "vue";
 import { useI18n } from "vue-i18n";
-import { X, Pin, ChevronDown, Table2, Code2, TableProperties, PencilRuler, KeyRound, Pencil, Package, Lock, Copy, AlertTriangle, Network, Minimize2, Maximize2, Settings, CalendarClock } from "@lucide/vue";
+import { X, Pin, ChevronDown, Table2, Code2, TableProperties, PencilRuler, KeyRound, Pencil, Package, Lock, Copy, AlertTriangle, Network, Minimize2, Maximize2, Settings, CalendarClock, Activity } from "@lucide/vue";
 import CustomContextMenu, { type ContextMenuItem } from "@/components/ui/CustomContextMenu.vue";
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
@@ -450,6 +450,7 @@ function tabMenuIcon(tab: QueryTab) {
   if (tab.mode === "objects") return TableProperties;
   if (tab.mode === "structure") return PencilRuler;
   if (tab.mode === "dameng-jobs") return CalendarClock;
+  if (tab.mode === "processlist") return Activity;
   return Code2;
 }
 
@@ -584,6 +585,7 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
                       <TableProperties v-else-if="tab.mode === 'objects'" class="h-3.5 w-3.5" />
                       <PencilRuler v-else-if="tab.mode === 'structure'" class="h-3.5 w-3.5" />
                       <CalendarClock v-else-if="tab.mode === 'dameng-jobs'" class="h-3.5 w-3.5" />
+                      <Activity v-else-if="tab.mode === 'processlist'" class="h-3.5 w-3.5" />
                       <Code2 v-else class="h-3.5 w-3.5" />
                     </span>
                     <input
@@ -766,6 +768,7 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
                       <TableProperties v-else-if="tab.mode === 'objects'" class="h-3.5 w-3.5" />
                       <PencilRuler v-else-if="tab.mode === 'structure'" class="h-3.5 w-3.5" />
                       <CalendarClock v-else-if="tab.mode === 'dameng-jobs'" class="h-3.5 w-3.5" />
+                      <Activity v-else-if="tab.mode === 'processlist'" class="h-3.5 w-3.5" />
                       <Code2 v-else class="h-3.5 w-3.5" />
                     </span>
                     <input
diff --git a/apps/desktop/src/components/layout/ContentArea.vue b/apps/desktop/src/components/layout/ContentArea.vue
index fdcfc0281..311baa78d 100644
--- a/apps/desktop/src/components/layout/ContentArea.vue
+++ b/apps/desktop/src/components/layout/ContentArea.vue
@@ -54,6 +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 DamengJobAdmin = defineAsyncComponent(() => import("@/components/admin/DamengJobAdmin.vue"));
 const ExplainPlanViewer = defineAsyncComponent(() => import("@/components/explain/ExplainPlanViewer.vue"));
 const QueryChart = defineAsyncComponent(() => import("@/components/chart/QueryChart.vue"));
@@ -1578,6 +1579,10 @@ defineExpose({ focusSearch, refreshData, handleModRTarget, requestQueryEditorExe
       <DatabaseUserAdmin :key="activeTab.id" :connection="activeConnection" />
     </template>
 
+    <template v-else-if="activeTab.mode === 'processlist' && activeConnection">
+      <MySqlProcessList :key="activeTab.id" :connection="activeConnection" />
+    </template>
+
     <template v-else-if="activeTab.mode === 'dameng-jobs' && activeConnection">
       <DamengJobAdmin :key="activeTab.id" :connection="activeConnection" />
     </template>
diff --git a/apps/desktop/src/components/sidebar/TreeItem.vue b/apps/desktop/src/components/sidebar/TreeItem.vue
index 62d8cecac..5e6b5c9f4 100644
--- a/apps/desktop/src/components/sidebar/TreeItem.vue
+++ b/apps/desktop/src/components/sidebar/TreeItem.vue
@@ -50,6 +50,7 @@ import {
   Clipboard,
   Check,
   UsersRound,
+  Activity,
   CalendarClock,
   Lock,
   HardDriveDownload,
@@ -144,6 +145,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 { canCloseSidebarDatabaseConnection, isSidebarDatabaseOpened } from "@/lib/sidebar/sidebarDatabaseOpenState";
 import { sidebarTreeContextKey } from "@/lib/sidebar/sidebarTreeContext";
 import { batchTableEmptyFeedback, runBatchTableEmpty } from "@/lib/sidebar/batchTableEmpty";
@@ -1152,6 +1154,18 @@ async function openUserAdmin() {
   }
 }
 
+async function openProcessList() {
+  const node = props.node;
+  if (!node.connectionId) return;
+  try {
+    await connectionStore.ensureConnected(node.connectionId);
+    connectionStore.activeConnectionId = node.connectionId;
+    queryStore.openProcessList(node.connectionId);
+  } catch (e: any) {
+    toast(t("connection.connectFailed", { message: translateBackendError(t, e?.message || String(e)) }), 5000);
+  }
+}
+
 async function openDamengJobAdmin() {
   const node = props.node;
   if (!node.connectionId) return;
@@ -4695,6 +4709,9 @@ function treeItemMenuItems(): ContextMenuItem[] {
     if (supportsDatabaseUserAdmin(currentDatabaseType())) {
       items.push({ label: t("contextMenu.userAdmin"), action: openUserAdmin, icon: UsersRound });
     }
+    if (supportsProcessList(currentDatabaseType())) {
+      items.push({ label: t("contextMenu.processList"), action: openProcessList, icon: Activity });
+    }
     if (currentDatabaseType() === "dameng") {
       items.push({ label: t("contextMenu.damengJobAdmin"), action: openDamengJobAdmin, icon: CalendarClock });
     }
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index 168cb9e40..98645be84 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -1398,6 +1398,7 @@ export default {
     configureVisibleObjects: "Visible Object Filter",
     userAdmin: "Users & Privileges",
     openUserAdmin: "Open Users & Privileges",
+    processList: "Process List",
     damengJobAdmin: "Dameng Agent Jobs",
     openDamengJobAdmin: "Open Dameng Agent Jobs",
     duplicateConnection: "Duplicate Connection",
@@ -1694,6 +1695,30 @@ export default {
     noAvailable: "All available extensions are already installed.",
     noInstalled: "No extensions installed.",
   },
+  processList: {
+    title: "Process List",
+    sessionCount: "{count} sessions",
+    filter: "Filter sessions",
+    autoRefresh: "Auto-refresh",
+    seconds: "s",
+    colId: "Id",
+    colUser: "User",
+    colHost: "Host",
+    colDb: "DB",
+    colCommand: "Command",
+    colTime: "Time",
+    colState: "State",
+    colInfo: "Info",
+    colActions: "Actions",
+    self: "you",
+    kill: "Kill",
+    cannotKillSelf: "You cannot kill your own session",
+    empty: "No active sessions.",
+    killTitle: "Kill session",
+    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}",
+  },
   userAdmin: {
     title: "Users & Privileges",
     unsupported: "MySQL-compatible and PostgreSQL-compatible connections are supported. SQL Server, Oracle, and other permission models can be added next.",
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index 596a2d4fb..a8a5c8094 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -1573,6 +1573,7 @@ export default withEnglishFallback({
     editSchemaCommentSuccess: 'Comentario del esquema "{name}" actualizado',
     manageExtension: "Administrar extensión...",
     dropExtension: "Eliminar extensión",
+    processList: "Lista de procesos",
   },
   visibleDatabases: {
     title: "Bases de datos visibles",
@@ -3837,4 +3838,28 @@ export default withEnglishFallback({
     sourceAdmin: "Administración de bases de datos",
     aiReviewRequired: "El SQL de producción se ha colocado en el editor. Revíselo primero y luego ejecútelo manualmente para confirmar.",
   },
+  processList: {
+    title: "Lista de procesos",
+    sessionCount: "{count} sesiones",
+    filter: "Filtrar sesiones",
+    autoRefresh: "Actualización automática",
+    seconds: "segundos",
+    colId: "Id",
+    colUser: "Usuario",
+    colHost: "Host",
+    colDb: "Base de datos",
+    colCommand: "Comando",
+    colTime: "Tiempo",
+    colState: "Estado",
+    colInfo: "SQL",
+    colActions: "Acciones",
+    self: "Actual",
+    kill: "Terminar",
+    cannotKillSelf: "No se puede terminar la sesión actual",
+    empty: "No hay sesiones activas.",
+    killTitle: "Terminar sesión",
+    killConfirm: "¿Está seguro de que desea terminar la sesión {id} ({user})? La sentencia actual se cancelará y la conexión se cerrará.",
+    killSuccess: "Sesión {id} terminada",
+    killFailed: "Error al terminar la sesión: {message}",
+  },
 });
diff --git a/apps/desktop/src/i18n/locales/it.ts b/apps/desktop/src/i18n/locales/it.ts
index 9ebebdb1e..636157df1 100644
--- a/apps/desktop/src/i18n/locales/it.ts
+++ b/apps/desktop/src/i18n/locales/it.ts
@@ -1571,6 +1571,7 @@ export default withEnglishFallback({
     editSchemaCommentSuccess: 'Commento dello schema "{name}" aggiornato',
     manageExtension: "Gestisci estensione...",
     dropExtension: "Elimina estensione",
+    processList: "Elenco processi",
   },
   visibleDatabases: {
     title: "Database Visibili",
@@ -3835,4 +3836,28 @@ export default withEnglishFallback({
     sourceAdmin: "Amministrazione database",
     aiReviewRequired: "La SQL di produzione è stata inserita nell'editor. Controllare prima, quindi eseguire manualmente per confermare.",
   },
+  processList: {
+    title: "Elenco processi",
+    sessionCount: "{count} sessioni",
+    filter: "Filtra sessioni",
+    autoRefresh: "Aggiornamento automatico",
+    seconds: "secondi",
+    colId: "Id",
+    colUser: "Utente",
+    colHost: "Host",
+    colDb: "Database",
+    colCommand: "Comando",
+    colTime: "Durata",
+    colState: "Stato",
+    colInfo: "SQL",
+    colActions: "Azioni",
+    self: "Corrente",
+    kill: "Termina",
+    cannotKillSelf: "Impossibile terminare la sessione corrente",
+    empty: "Nessuna sessione attiva.",
+    killTitle: "Termina sessione",
+    killConfirm: "Sei sicuro di voler terminare la sessione {id} ({user})? La dichiarazione corrente verrà interrotta e la connessione verrà chiusa.",
+    killSuccess: "Sessione {id} terminata",
+    killFailed: "Terminazione sessione non riuscita: {message}",
+  },
 });
diff --git a/apps/desktop/src/i18n/locales/ja.ts b/apps/desktop/src/i18n/locales/ja.ts
index 0e8f9c54e..76c2ae716 100644
--- a/apps/desktop/src/i18n/locales/ja.ts
+++ b/apps/desktop/src/i18n/locales/ja.ts
@@ -1572,6 +1572,7 @@ export default withEnglishFallback({
     ddlCopied: "DDLをコピーしました",
     manageExtension: "拡張機能を管理...",
     dropExtension: "拡張機能を削除",
+    processList: "プロセス一覧",
   },
   visibleDatabases: {
     title: "表示するデータベース",
@@ -3836,4 +3837,28 @@ export default withEnglishFallback({
     sourceAdmin: "データベース管理",
     aiReviewRequired: "本番SQLがエディターに配置されました。まず確認し、手動で実行して確定してください。",
   },
+  processList: {
+    title: "プロセス一覧",
+    sessionCount: "{count} セッション",
+    filter: "セッションをフィルター",
+    autoRefresh: "自動更新",
+    seconds: "秒",
+    colId: "ID",
+    colUser: "ユーザー",
+    colHost: "ホスト",
+    colDb: "データベース",
+    colCommand: "コマンド",
+    colTime: "経過時間",
+    colState: "状態",
+    colInfo: "SQL",
+    colActions: "操作",
+    self: "現在",
+    kill: "強制終了",
+    cannotKillSelf: "現在のセッションは強制終了できません",
+    empty: "アクティブなセッションはありません。",
+    killTitle: "セッションの強制終了",
+    killConfirm: "セッション {id}（{user}）を強制終了しますか？現在のステートメントは中断され、接続が閉じられます。",
+    killSuccess: "セッション {id} を強制終了しました。",
+    killFailed: "セッションの強制終了に失敗しました：{message}",
+  },
 });
diff --git a/apps/desktop/src/i18n/locales/pt-BR.ts b/apps/desktop/src/i18n/locales/pt-BR.ts
index 9b233a52d..28bd12d18 100644
--- a/apps/desktop/src/i18n/locales/pt-BR.ts
+++ b/apps/desktop/src/i18n/locales/pt-BR.ts
@@ -1573,6 +1573,7 @@ export default withEnglishFallback({
     editSchemaCommentSuccess: 'Comentário do schema "{name}" atualizado',
     manageExtension: "Gerenciar extensão...",
     dropExtension: "Remover extensão",
+    processList: "Lista de Processos",
   },
   visibleDatabases: {
     title: "Bancos de dados visíveis",
@@ -3837,4 +3838,28 @@ export default withEnglishFallback({
     sourceAdmin: "Administração de banco de dados",
     aiReviewRequired: "O SQL de produção foi colocado no editor. Verifique-o primeiro e execute manualmente para confirmar.",
   },
+  processList: {
+    title: "Lista de Processos",
+    sessionCount: "{count} sessões",
+    filter: "Filtrar sessões",
+    autoRefresh: "Atualização automática",
+    seconds: "segundos",
+    colId: "Id",
+    colUser: "Usuário",
+    colHost: "Host",
+    colDb: "Banco de dados",
+    colCommand: "Comando",
+    colTime: "Duração",
+    colState: "Estado",
+    colInfo: "SQL",
+    colActions: "Ações",
+    self: "Atual",
+    kill: "Encerrar",
+    cannotKillSelf: "Não é possível encerrar a sessão atual",
+    empty: "Nenhuma sessão ativa.",
+    killTitle: "Encerrar sessão",
+    killConfirm: "Tem certeza de que deseja encerrar a sessão {id} ({user})? Sua instrução atual será abortada e a conexão será fechada.",
+    killSuccess: "Sessão {id} encerrada.",
+    killFailed: "Falha ao encerrar a sessão: {message}",
+  },
 });
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index 0d6bc765a..d8d110603 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -1401,6 +1401,7 @@ export default withEnglishFallback({
     duplicateSelectedConnections: "复制选中的 {count} 个连接",
     userAdmin: "用户与权限",
     openUserAdmin: "打开用户与权限",
+    processList: "进程列表",
     damengJobAdmin: "达梦代理作业",
     openDamengJobAdmin: "打开达梦代理作业",
     newQuery: "新建查询",
@@ -1693,6 +1694,30 @@ export default withEnglishFallback({
     noAvailable: "所有可用扩展均已安装。",
     noInstalled: "暂无已安装的扩展。",
   },
+  processList: {
+    title: "进程列表",
+    sessionCount: "{count} 个会话",
+    filter: "筛选会话",
+    autoRefresh: "自动刷新",
+    seconds: "秒",
+    colId: "Id",
+    colUser: "用户",
+    colHost: "主机",
+    colDb: "数据库",
+    colCommand: "命令",
+    colTime: "时长",
+    colState: "状态",
+    colInfo: "SQL",
+    colActions: "操作",
+    self: "当前",
+    kill: "终止",
+    cannotKillSelf: "无法终止当前会话",
+    empty: "没有活动会话。",
+    killTitle: "终止会话",
+    killConfirm: "确定终止会话 {id}（{user}）？其当前语句将被中止，连接将被关闭。",
+    killSuccess: "已终止会话 {id}",
+    killFailed: "终止会话失败：{message}",
+  },
   userAdmin: {
     title: "用户与权限",
     unsupported: "当前支持 MySQL 兼容与 PostgreSQL 兼容连接。SQL Server、Oracle 等会按各自权限模型继续扩展。",
diff --git a/apps/desktop/src/i18n/locales/zh-TW.ts b/apps/desktop/src/i18n/locales/zh-TW.ts
index 893871db5..a5ce719aa 100644
--- a/apps/desktop/src/i18n/locales/zh-TW.ts
+++ b/apps/desktop/src/i18n/locales/zh-TW.ts
@@ -1572,6 +1572,7 @@ export default withEnglishFallback({
     editSchemaCommentSuccess: "Schema「{name}」註解已更新",
     manageExtension: "管理擴展...",
     dropExtension: "刪除擴展",
+    processList: "處理程序清單",
   },
   visibleDatabases: {
     title: "顯示資料庫",
@@ -3836,4 +3837,28 @@ export default withEnglishFallback({
     sourceAdmin: "資料庫管理",
     aiReviewRequired: "生產 SQL 已放入編輯器。請先檢查，再手動執行以確認。",
   },
+  processList: {
+    title: "處理程序清單",
+    sessionCount: "{count} 個會話",
+    filter: "篩選會話",
+    autoRefresh: "自動重新整理",
+    seconds: "秒",
+    colId: "ID",
+    colUser: "使用者",
+    colHost: "主機",
+    colDb: "資料庫",
+    colCommand: "指令",
+    colTime: "持續時間",
+    colState: "狀態",
+    colInfo: "SQL",
+    colActions: "操作",
+    self: "目前",
+    kill: "終止",
+    cannotKillSelf: "無法終止目前會話",
+    empty: "沒有活動會話。",
+    killTitle: "終止會話",
+    killConfirm: "確定終止會話 {id}（{user}）？其目前的陳述式將被中止，連線將被關閉。",
+    killSuccess: "已終止會話 {id}",
+    killFailed: "終止會話失敗：{message}",
+  },
 });
diff --git a/apps/desktop/src/lib/__tests__/database/mysqlProcessList.spec.ts b/apps/desktop/src/lib/__tests__/database/mysqlProcessList.spec.ts
new file mode 100644
index 000000000..4d556be5f
--- /dev/null
+++ b/apps/desktop/src/lib/__tests__/database/mysqlProcessList.spec.ts
@@ -0,0 +1,76 @@
+import { describe, expect, it } from "vitest";
+import type { QueryResult } from "@/types/database";
+import { buildKillSql, clampInterval, mapProcessRows, supportsProcessList } from "@/lib/database/mysqlProcessList";
+
+function result(columns: string[], rows: (string | number | boolean | null)[][]): QueryResult {
+  return { columns, rows, affected_rows: 0, execution_time_ms: 0 };
+}
+
+describe("mapProcessRows", () => {
+  it("maps a SHOW FULL PROCESSLIST result into typed rows", () => {
+    const rows = mapProcessRows(result(["Id", "User", "Host", "db", "Command", "Time", "State", "Info"], [[8213, "app", "10.0.0.4:5123", "shop", "Query", 12, "Sending data", "SELECT * FROM orders"]]));
+    expect(rows).toEqual([
+      {
+        id: 8213,
+        user: "app",
+        host: "10.0.0.4:5123",
+        db: "shop",
+        command: "Query",
+        time: 12,
+        state: "Sending data",
+        info: "SELECT * FROM orders",
+      },
+    ]);
+  });
+
+  it("tolerates NULL db/state/info and case-variant column names", () => {
+    const rows = mapProcessRows(result(["ID", "USER", "HOST", "DB", "COMMAND", "TIME", "STATE", "INFO"], [["8199", "root", "localhost", null, "Sleep", "340", null, null]]));
+    expect(rows[0]).toMatchObject({ id: 8199, user: "root", db: null, state: null, info: null, time: 340 });
+  });
+
+  it("returns an empty array for empty or malformed input", () => {
+    expect(mapProcessRows(null)).toEqual([]);
+    expect(mapProcessRows(undefined)).toEqual([]);
+    expect(mapProcessRows(result([], []))).toEqual([]);
+  });
+});
+
+describe("buildKillSql", () => {
+  it("builds KILL CONNECTION for a valid id", () => {
+    expect(buildKillSql(8213)).toBe("KILL CONNECTION 8213");
+  });
+
+  it("rejects non-integer or negative ids", () => {
+    expect(() => buildKillSql(1.5)).toThrow();
+    expect(() => buildKillSql(-1)).toThrow();
+    expect(() => buildKillSql(Number.NaN)).toThrow();
+  });
+});
+
+describe("clampInterval", () => {
+  it("clamps below the minimum to 1 second", () => {
+    expect(clampInterval(0)).toBe(1);
+    expect(clampInterval(-5)).toBe(1);
+  });
+
+  it("caps at the maximum", () => {
+    expect(clampInterval(999999)).toBe(3600);
+  });
+
+  it("floors fractional seconds and falls back for non-finite input", () => {
+    expect(clampInterval(4.9)).toBe(4);
+    expect(clampInterval(Number.NaN)).toBe(5);
+  });
+});
+
+describe("supportsProcessList", () => {
+  it("is limited to connections using the MySQL driver type", () => {
+    expect(supportsProcessList("mysql")).toBe(true);
+    expect(supportsProcessList("doris")).toBe(false);
+    expect(supportsProcessList("starrocks")).toBe(false);
+    expect(supportsProcessList("goldendb")).toBe(false);
+    expect(supportsProcessList("postgres")).toBe(false);
+    expect(supportsProcessList("sqlite")).toBe(false);
+    expect(supportsProcessList(undefined)).toBe(false);
+  });
+});
diff --git a/apps/desktop/src/lib/database/mysqlProcessList.ts b/apps/desktop/src/lib/database/mysqlProcessList.ts
new file mode 100644
index 000000000..81b59f19e
--- /dev/null
+++ b/apps/desktop/src/lib/database/mysqlProcessList.ts
@@ -0,0 +1,116 @@
+import type { DatabaseType, QueryResult } from "@/types/database";
+
+/**
+ * Engines that speak the MySQL protocol and support `SHOW FULL PROCESSLIST` /
+ * `KILL CONNECTION`. MariaDB, TiDB, and OceanBase ride the `mysql` dbType via a
+ * driver profile, so they are covered by the `"mysql"` entry.
+ */
+const PROCESS_LIST_DB_TYPES = new Set<DatabaseType>(["mysql"]);
+
+/**
+ * MySQL "current connections / process list" helpers. Pure and framework-free so
+ * they can be unit-tested in isolation; the panel component wires them to the
+ * generic SQL bridge and the production-safety guard.
+ */
+
+/**
+ * `SHOW FULL PROCESSLIST` is available on every MySQL-family server without extra
+ * privileges (it only reveals the caller's own sessions when PROCESS is missing),
+ * and the backend already forces the correct text protocol for it. `FULL` keeps
+ * the `Info` column from being truncated at 100 chars.
+ */
+export const PROCESS_LIST_SQL = "SHOW FULL PROCESSLIST";
+
+/** Bounds for the auto-refresh interval, in seconds. */
+export const MIN_REFRESH_SECONDS = 1;
+export const MAX_REFRESH_SECONDS = 3600;
+export const DEFAULT_REFRESH_SECONDS = 5;
+
+export interface ProcessRow {
+  id: number;
+  user: string;
+  host: string;
+  db: string | null;
+  command: string;
+  time: number;
+  state: string | null;
+  info: 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 generic `SHOW FULL PROCESSLIST` result into typed rows. Column names are
+ * matched case-insensitively because forks differ (e.g. `Id` vs `ID`), and any
+ * missing column degrades to a sensible empty value rather than throwing.
+ */
+export function mapProcessRows(result: QueryResult | null | undefined): ProcessRow[] {
+  if (!result || !Array.isArray(result.columns) || !Array.isArray(result.rows)) return [];
+  const columns = result.columns;
+  const idIdx = columnIndex(columns, "Id");
+  const userIdx = columnIndex(columns, "User");
+  const hostIdx = columnIndex(columns, "Host");
+  const dbIdx = columnIndex(columns, "db");
+  const commandIdx = columnIndex(columns, "Command");
+  const timeIdx = columnIndex(columns, "Time");
+  const stateIdx = columnIndex(columns, "State");
+  const infoIdx = columnIndex(columns, "Info");
+
+  const cell = (row: (string | number | boolean | null)[], idx: number) => (idx >= 0 ? row[idx] : null);
+
+  return result.rows.map((row) => ({
+    id: asNumber(cell(row, idIdx)),
+    user: asString(cell(row, userIdx)),
+    host: asString(cell(row, hostIdx)),
+    db: asNullableString(cell(row, dbIdx)),
+    command: asString(cell(row, commandIdx)),
+    time: asNumber(cell(row, timeIdx)),
+    state: asNullableString(cell(row, stateIdx)),
+    info: asNullableString(cell(row, infoIdx)),
+  }));
+}
+
+/**
+ * Build the `KILL CONNECTION <id>` statement. `id` must be a finite integer; it
+ * is validated (never interpolated as free text) so there is no injection path.
+ */
+export function buildKillSql(id: number): string {
+  if (!Number.isInteger(id) || id < 0) {
+    throw new Error(`Invalid session id: ${id}`);
+  }
+  return `KILL CONNECTION ${id}`;
+}
+
+/** Clamp a user-entered refresh interval to a safe integer range of seconds. */
+export function clampInterval(seconds: number): number {
+  if (!Number.isFinite(seconds)) return DEFAULT_REFRESH_SECONDS;
+  const floored = Math.floor(seconds);
+  if (floored < MIN_REFRESH_SECONDS) return MIN_REFRESH_SECONDS;
+  if (floored > MAX_REFRESH_SECONDS) return MAX_REFRESH_SECONDS;
+  return floored;
+}
+
+/** Whether the given database type exposes a process-list viewer (MySQL family). */
+export function supportsProcessList(dbType: DatabaseType | undefined): boolean {
+  return !!dbType && PROCESS_LIST_DB_TYPES.has(dbType);
+}
diff --git a/apps/desktop/src/stores/queryStore.ts b/apps/desktop/src/stores/queryStore.ts
index b6b7dcbe6..f9b876997 100644
--- a/apps/desktop/src/stores/queryStore.ts
+++ b/apps/desktop/src/stores/queryStore.ts
@@ -996,6 +996,31 @@ export const useQueryStore = defineStore("query", () => {
     return id;
   }
 
+  function openProcessList(connectionId: string) {
+    const existing = tabs.value.find((tab) => tab.mode === "processlist" && tab.connectionId === connectionId);
+    if (existing) {
+      switchTab(existing.id);
+      return existing.id;
+    }
+
+    const conn = useConnectionStore().getConfig(connectionId);
+    const id = uuid();
+    const tab: QueryTab = {
+      id,
+      title: t("processList.title"),
+      connectionId,
+      database: conn?.database || "",
+      sql: "",
+      isExecuting: false,
+      isCancelling: false,
+      isExplaining: false,
+      mode: "processlist",
+    };
+    tabs.value.push(tab);
+    activeTabId.value = id;
+    return id;
+  }
+
   function openDamengJobAdmin(connectionId: string) {
     const existing = tabs.value.find((tab) => tab.mode === "dameng-jobs" && tab.connectionId === connectionId);
     if (existing) {
@@ -3812,6 +3837,7 @@ export const useQueryStore = defineStore("query", () => {
     openMongoGridFs,
     openMongoBucket,
     openUserAdmin,
+    openProcessList,
     openDamengJobAdmin,
     openMqAdmin,
     openNacosAdmin,
diff --git a/apps/desktop/src/types/database.ts b/apps/desktop/src/types/database.ts
index 6b59e0d8f..4c2b04d0d 100644
--- a/apps/desktop/src/types/database.ts
+++ b/apps/desktop/src/types/database.ts
@@ -775,7 +775,7 @@ export interface QueryTab {
   explainExecutionId?: string;
   /** Per-run connection session for sequential MySQL explain formats. */
   explainClientSessionId?: string;
-  mode: "data" | "query" | "redis" | "redis-dashboard" | "mongo" | "mongo-gridfs" | "mongo-bucket" | "vector" | "etcd" | "zookeeper" | "mq" | "nacos" | "objects" | "structure" | "users" | "dameng-jobs";
+  mode: "data" | "query" | "redis" | "redis-dashboard" | "mongo" | "mongo-gridfs" | "mongo-bucket" | "vector" | "etcd" | "zookeeper" | "mq" | "nacos" | "objects" | "structure" | "users" | "dameng-jobs" | "processlist";
   mqTenant?: string;
   mqInitialTab?: "topics";
   nacosNamespace?: string;