From 6088c8104cfda0c11eafd1e1f636d47106fee136 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Thu, 17 Sep 2026 20:19:16 -0700
Subject: [PATCH] refactor(web): share diagnostic process actions (#12358)

---
 .../settings/DiagnosticsSettings.tsx          | 51 ++-----------------
 .../settings/ProcessSignalActions.tsx         | 48 +++++++++++++++++
 .../settings/ResourceTelemetryDiagnostics.tsx | 20 +-------
 3 files changed, 53 insertions(+), 66 deletions(-)
 create mode 100644 apps/web/src/components/settings/ProcessSignalActions.tsx

diff --git a/apps/web/src/components/settings/DiagnosticsSettings.tsx b/apps/web/src/components/settings/DiagnosticsSettings.tsx
index ab22c40b5c687e511fb8a45a4bca69253dc13da7..0a987eca8c1d3ada3c65a78e9e8b5cbb348c9be8 100644
--- a/apps/web/src/components/settings/DiagnosticsSettings.tsx
+++ b/apps/web/src/components/settings/DiagnosticsSettings.tsx
@@ -1,3 +1,4 @@
+import { ProcessSignalActions } from "./ProcessSignalActions";
 import { RefreshIcon } from "~/components/ui/refresh-icon";
 import {
   AlertTriangleIcon,
@@ -309,51 +310,6 @@ function ProcessNameCell({
   );
 }
 
-function ProcessSignalActions({
-  process,
-  isSignaling,
-  onSignal,
-}: {
-  process: ServerProcessDiagnosticsEntry;
-  isSignaling: boolean;
-  onSignal: (pid: number, signal: ServerProcessSignal) => void;
-}) {
-  return (
-    <div className="flex items-center justify-end gap-1.5">
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <button
-              type="button"
-              disabled={isSignaling}
-              className="cursor-pointer text-[11px] font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline disabled:pointer-events-none disabled:opacity-50"
-              onClick={() => onSignal(process.pid, "SIGINT")}
-            >
-              INT
-            </button>
-          }
-        />
-        <TooltipPopup side="top">Send SIGINT</TooltipPopup>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <button
-              type="button"
-              disabled={isSignaling}
-              className="cursor-pointer text-[11px] font-medium text-destructive underline-offset-2 hover:underline disabled:pointer-events-none disabled:opacity-50"
-              onClick={() => onSignal(process.pid, "SIGKILL")}
-            >
-              KILL
-            </button>
-          }
-        />
-        <TooltipPopup side="top">Send SIGKILL</TooltipPopup>
-      </Tooltip>
-    </div>
-  );
-}
-
 function ProcessDiagnosticsTable({
   processes,
   signalingPid,
@@ -469,9 +425,8 @@ function ProcessDiagnosticsTable({
               </td>
               <td className="p-2 align-middle sm:pr-4">
                 <ProcessSignalActions
-                  process={process}
-                  isSignaling={signalingPid === process.pid}
-                  onSignal={onSignal}
+                  disabled={signalingPid === process.pid}
+                  onSignal={(signal) => onSignal(process.pid, signal)}
                 />
               </td>
             </tr>
diff --git a/apps/web/src/components/settings/ProcessSignalActions.tsx b/apps/web/src/components/settings/ProcessSignalActions.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ab96e019ef34e5931d5dcf604da37d83fd5bba39
--- /dev/null
+++ b/apps/web/src/components/settings/ProcessSignalActions.tsx
@@ -0,0 +1,48 @@
+import type { ServerProcessSignal } from "@t3tools/contracts";
+
+import { InlineButton } from "../ui/button";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+
+/** Process ownership and confirmation stay with the diagnostics view. */
+export function ProcessSignalActions({
+  disabled,
+  onSignal,
+}: {
+  disabled: boolean;
+  onSignal: (signal: ServerProcessSignal) => void;
+}) {
+  return (
+    <div className="flex items-center justify-end gap-1.5">
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <InlineButton
+              disabled={disabled}
+              aria-label="Send SIGINT"
+              className="text-[11px] font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
+              onClick={() => onSignal("SIGINT")}
+            >
+              INT
+            </InlineButton>
+          }
+        />
+        <TooltipPopup side="top">Send SIGINT</TooltipPopup>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <InlineButton
+              disabled={disabled}
+              aria-label="Send SIGKILL"
+              className="text-[11px] font-medium text-destructive underline-offset-2 hover:underline"
+              onClick={() => onSignal("SIGKILL")}
+            >
+              KILL
+            </InlineButton>
+          }
+        />
+        <TooltipPopup side="top">Send SIGKILL</TooltipPopup>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx b/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx
index b52e54bb5f7d149d31a96aa45e23d2587978af6d..b10ed02c477ee6d05521041c82ef0ad3ae763e84 100644
--- a/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx
+++ b/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx
@@ -1,3 +1,4 @@
+import { ProcessSignalActions } from "./ProcessSignalActions";
 import { RefreshIcon } from "~/components/ui/refresh-icon";
 import {
   ActivityIcon,
@@ -535,24 +536,7 @@ function ProcessActions({
   }
   const isSignaling = signalingKeys.has(processIdentityKey(process));
   return (
-    <div className="flex items-center justify-end gap-1.5">
-      <button
-        type="button"
-        disabled={isSignaling}
-        className="cursor-pointer text-[10px] font-semibold text-muted-foreground hover:text-foreground disabled:opacity-50"
-        onClick={() => onSignal(process, "SIGINT")}
-      >
-        INT
-      </button>
-      <button
-        type="button"
-        disabled={isSignaling}
-        className="cursor-pointer text-[10px] font-semibold text-destructive hover:underline disabled:opacity-50"
-        onClick={() => onSignal(process, "SIGKILL")}
-      >
-        KILL
-      </button>
-    </div>
+    <ProcessSignalActions disabled={isSignaling} onSignal={(signal) => onSignal(process, signal)} />
   );
 }
 
-- 
2.54.0