feat(miner-ui): add a pause-reason input to the governor control (#6186) (#6207)

The dashboard Pause button called pauseGovernor with no arguments, so a reason
could never be recorded from the web UI even though the action and CLI both
support one. Add an optional reason input to GovernorControlSection, wired
through to the pause action; an empty field is passed as undefined, matching
the CLI's optional --reason flag. No change to pauseGovernor's signature or
the CLI's behavior.

Closes #6186

Author: nghetienhiep

apps/loopover-miner-ui/src/ledgers.test.tsx

@@ -156,6 +156,58 @@ describe("LedgersPage (#4855)", () => {
       await waitFor(() => expect(screen.getByRole("button", { name: "Resume governor" })).toBeTruthy());
     });
 
+    it("passes the typed pause reason through to the pause action (#6186)", async () => {
+      const pausedResult: GovernorPauseStateResult = {
+        ok: true,
+        pauseState: { paused: true, reason: "deploying a hotfix", pausedAt: "2026-07-13T12:30:00.000Z" },
+      };
+      const pauseGovernorAction = vi.fn(async (): Promise<GovernorPauseStateResult> => pausedResult);
+      render(
+        <LedgersPage
+          loadLedgers={loadLedgersEmpty}
+          loadGovernorPauseState={loadGovernorPauseStateDefault}
+          pauseGovernorAction={pauseGovernorAction}
+        />,
+      );
+      await waitFor(() => expect(screen.getByText("Not paused")).toBeTruthy());
+      fireEvent.change(screen.getByLabelText("Pause reason"), { target: { value: "deploying a hotfix" } });
+      fireEvent.click(screen.getByRole("button", { name: "Pause governor" }));
+      expect(pauseGovernorAction).toHaveBeenCalledWith("deploying a hotfix");
+      await waitFor(() => expect(screen.getByRole("button", { name: "Resume governor" })).toBeTruthy());
+    });
+
+    it("passes undefined to the pause action when the reason field is left empty (#6186)", async () => {
+      const pauseGovernorAction = vi.fn(async (): Promise<GovernorPauseStateResult> => ({
+        ok: true,
+        pauseState: { paused: true, reason: null, pausedAt: "2026-07-13T12:30:00.000Z" },
+      }));
+      render(
+        <LedgersPage
+          loadLedgers={loadLedgersEmpty}
+          loadGovernorPauseState={loadGovernorPauseStateDefault}
+          pauseGovernorAction={pauseGovernorAction}
+        />,
+      );
+      await waitFor(() => expect(screen.getByText("Not paused")).toBeTruthy());
+      expect((screen.getByLabelText("Pause reason") as HTMLInputElement).value).toBe("");
+      fireEvent.click(screen.getByRole("button", { name: "Pause governor" }));
+      expect(pauseGovernorAction).toHaveBeenCalledWith(undefined);
+    });
+
+    it("shows the reason input only while unpaused, not once the governor is paused (#6186)", async () => {
+      render(
+        <LedgersPage
+          loadLedgers={loadLedgersEmpty}
+          loadGovernorPauseState={async () => ({
+            ok: true,
+            pauseState: { paused: true, reason: "bad PR", pausedAt: "2026-07-13T12:00:00.000Z" },
+          })}
+        />,
+      );
+      await waitFor(() => expect(screen.getByRole("button", { name: "Resume governor" })).toBeTruthy());
+      expect(screen.queryByLabelText("Pause reason")).toBeNull();
+    });
+
     it("clicking Resume governor calls the injected resume action and updates the displayed state from its result", async () => {
       const initiallyPaused: GovernorPauseState = { paused: true, reason: null, pausedAt: "2026-07-13T12:00:00.000Z" };
       const resumeGovernorAction = vi.fn(async (): Promise<GovernorPauseStateResult> => ({

apps/loopover-miner-ui/src/routes/ledgers.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 
 import { Button } from "@loopover/ui-kit/components/button";
 import { Card, CardContent, CardHeader } from "@loopover/ui-kit/components/card";
+import { Input } from "@loopover/ui-kit/components/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@loopover/ui-kit/components/table";
 
 import { CLAIM_STATUSES, fetchLedgers, type ClaimStatus, type LedgersResult } from "../lib/ledgers";
@@ -64,9 +65,12 @@ export function GovernorControlSection({
 }: {
   result: GovernorPauseStateResult | null;
   pending: boolean;
-  onPause: () => void;
+  onPause: (reason?: string) => void;
   onResume: () => void;
 }) {
+  // Optional pause reason, mirroring the CLI's `governor pause [--reason <text>]`; an empty field
+  // is passed through as `undefined` so it matches the CLI's own optional-flag behavior.
+  const [reason, setReason] = useState("");
   return (
     <section className="grid gap-3">
       <h3 className="font-display text-token-base font-semibold">Governor control</h3>
@@ -88,9 +92,20 @@ export function GovernorControlSection({
               Resume governor
             </Button>
           ) : (
-            <Button size="sm" variant="destructive" disabled={pending} onClick={onPause}>
-              Pause governor
-            </Button>
+            <>
+              <Input
+                type="text"
+                value={reason}
+                onChange={(event) => setReason(event.target.value)}
+                disabled={pending}
+                placeholder="Reason (optional)"
+                aria-label="Pause reason"
+                className="w-auto flex-1 min-w-[12rem]"
+              />
+              <Button size="sm" variant="destructive" disabled={pending} onClick={() => onPause(reason || undefined)}>
+                Pause governor
+              </Button>
+            </>
           )}
         </div>
       )}
@@ -183,7 +198,7 @@ export function LedgersPage({
 }: {
   loadLedgers?: () => Promise<LedgersResult>;
   loadGovernorPauseState?: () => Promise<GovernorPauseStateResult>;
-  pauseGovernorAction?: () => Promise<GovernorPauseStateResult>;
+  pauseGovernorAction?: (reason?: string) => Promise<GovernorPauseStateResult>;
   resumeGovernorAction?: () => Promise<GovernorPauseStateResult>;
 }) {
   const [result, setResult] = useState<LedgersResult | null>(null);
@@ -231,7 +246,7 @@ export function LedgersPage({
           <GovernorControlSection
             result={pauseState}
             pending={actionPending}
-            onPause={() => runGovernorAction(pauseGovernorAction)}
+            onPause={(reason) => runGovernorAction(() => pauseGovernorAction(reason))}
             onResume={() => runGovernorAction(resumeGovernorAction)}
           />
           <LedgersView result={result} />