fix(web): interval settings save when editing ends, not per keystroke

apps/web/src/components/settings/BackgroundActivitySettings.tsx

@@ -22,24 +22,17 @@ import {
   DialogPopup,
   DialogTitle,
 } from "../ui/dialog";
-import {
-  NumberField,
-  NumberFieldDecrement,
-  NumberFieldGroup,
-  NumberFieldIncrement,
-  NumberFieldInput,
-} from "../ui/number-field";
 import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
 import { Switch } from "../ui/switch";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import {
   backgroundActivityOverrideSettings,
   backgroundActivitySharedPolicySettings,
   durationToSeconds,
-  normalizeIntervalSeconds,
   PROVIDER_HEALTH_INTERVAL_STEP_SECONDS,
   resolveBackgroundActivityProfileOption,
 } from "./SettingsPanels.logic";
+import { IntervalSecondsField } from "./IntervalSecondsField";
 import { PolicyTooltip, SettingResetButton, SettingsRow } from "./settingsLayout";
 import { searchableSetting } from "./settingsSearch";
 
@@ -185,32 +178,22 @@ function BackgroundActivityAdvancedDialog({
                 </p>
               </div>
               <div className="flex shrink-0 items-center gap-2">
-                <NumberField
+                <IntervalSecondsField
+                  label="Git fetch interval"
                   value={automaticGitFetchIntervalSeconds}
                   min={0}
                   step={5}
-                  size="sm"
-                  className="w-32"
-                  onValueChange={(value) =>
+                  onCommit={(seconds, options) =>
                     updateSettings(
                       backgroundActivityOverrideSettings(
                         settings.backgroundActivity,
                         resolvedBackgroundActivity,
-                        {
-                          automaticGitFetchInterval: Duration.seconds(
-                            normalizeIntervalSeconds(value),
-                          ),
-                        },
+                        { automaticGitFetchInterval: Duration.seconds(seconds) },
                       ),
+                      options,
                     )
                   }
-                >
-                  <NumberFieldGroup>
-                    <NumberFieldDecrement aria-label="Decrease Git fetch interval" />
-                    <NumberFieldInput aria-label="Git fetch interval in seconds" />
-                    <NumberFieldIncrement aria-label="Increase Git fetch interval" />
-                  </NumberFieldGroup>
-                </NumberField>
+                />
                 <span className="text-xs text-muted-foreground">seconds</span>
               </div>
             </div>
@@ -224,32 +207,22 @@ function BackgroundActivityAdvancedDialog({
                 </p>
               </div>
               <div className="flex shrink-0 items-center gap-2">
-                <NumberField
+                <IntervalSecondsField
+                  label="provider health interval"
                   value={providerHealthRefreshIntervalSeconds}
                   min={0}
                   step={PROVIDER_HEALTH_INTERVAL_STEP_SECONDS}
-                  size="sm"
-                  className="w-32"
-                  onValueChange={(value) =>
+                  onCommit={(seconds, options) =>
                     updateSettings(
                       backgroundActivityOverrideSettings(
                         settings.backgroundActivity,
                         resolvedBackgroundActivity,
-                        {
-                          providerHealthRefreshInterval: Duration.seconds(
-                            normalizeIntervalSeconds(value),
-                          ),
-                        },
+                        { providerHealthRefreshInterval: Duration.seconds(seconds) },
                       ),
+                      options,
                     )
                   }
-                >
-                  <NumberFieldGroup>
-                    <NumberFieldDecrement aria-label="Decrease provider health interval" />
-                    <NumberFieldInput aria-label="Provider health interval in seconds" />
-                    <NumberFieldIncrement aria-label="Increase provider health interval" />
-                  </NumberFieldGroup>
-                </NumberField>
+                />
                 <span className="text-xs text-muted-foreground">seconds</span>
               </div>
             </div>
@@ -262,32 +235,22 @@ function BackgroundActivityAdvancedDialog({
                 </p>
               </div>
               <div className="flex shrink-0 items-center gap-2">
-                <NumberField
+                <IntervalSecondsField
+                  label="active host power interval"
                   value={hostPowerMonitorActiveIntervalSeconds}
                   min={5}
                   step={5}
-                  size="sm"
-                  className="w-32"
-                  onValueChange={(value) =>
+                  onCommit={(seconds, options) =>
                     updateSettings(
                       backgroundActivityOverrideSettings(
                         settings.backgroundActivity,
                         resolvedBackgroundActivity,
-                        {
-                          hostPowerMonitorActiveInterval: Duration.seconds(
-                            normalizeIntervalSeconds(value, 5),
-                          ),
-                        },
+                        { hostPowerMonitorActiveInterval: Duration.seconds(seconds) },
                       ),
+                      options,
                     )
                   }
-                >
-                  <NumberFieldGroup>
-                    <NumberFieldDecrement aria-label="Decrease active host power interval" />
-                    <NumberFieldInput aria-label="Active host power interval in seconds" />
-                    <NumberFieldIncrement aria-label="Increase active host power interval" />
-                  </NumberFieldGroup>
-                </NumberField>
+                />
                 <span className="text-xs text-muted-foreground">seconds</span>
               </div>
             </div>
@@ -300,32 +263,22 @@ function BackgroundActivityAdvancedDialog({
                 </p>
               </div>
               <div className="flex shrink-0 items-center gap-2">
-                <NumberField
+                <IntervalSecondsField
+                  label="idle host power interval"
                   value={hostPowerMonitorIdleIntervalSeconds}
                   min={5}
                   step={30}
-                  size="sm"
-                  className="w-32"
-                  onValueChange={(value) =>
+                  onCommit={(seconds, options) =>
                     updateSettings(
                       backgroundActivityOverrideSettings(
                         settings.backgroundActivity,
                         resolvedBackgroundActivity,
-                        {
-                          hostPowerMonitorIdleInterval: Duration.seconds(
-                            normalizeIntervalSeconds(value, 5),
-                          ),
-                        },
+                        { hostPowerMonitorIdleInterval: Duration.seconds(seconds) },
                       ),
+                      options,
                     )
                   }
-                >
-                  <NumberFieldGroup>
-                    <NumberFieldDecrement aria-label="Decrease idle host power interval" />
-                    <NumberFieldInput aria-label="Idle host power interval in seconds" />
-                    <NumberFieldIncrement aria-label="Increase idle host power interval" />
-                  </NumberFieldGroup>
-                </NumberField>
+                />
                 <span className="text-xs text-muted-foreground">seconds</span>
               </div>
             </div>

apps/web/src/components/settings/IntervalSecondsField.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import {
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from "../ui/number-field";
+import { normalizeIntervalSeconds } from "./SettingsPanels.logic";
+
+export function IntervalSecondsField({
+  label,
+  value,
+  min,
+  step,
+  onCommit,
+}: {
+  label: string;
+  value: number;
+  min: number;
+  step: number;
+  onCommit: (seconds: number, options: { onFailed: () => void }) => void;
+}) {
+  const [field, setField] = useState({
+    saved: value,
+    draft: value as number | null,
+    committed: value,
+    revision: 0,
+  });
+  if (field.saved !== value) {
+    setField({ ...field, saved: value, draft: value, committed: value });
+  }
+
+  return (
+    <NumberField
+      value={field.draft}
+      min={min}
+      step={step}
+      size="sm"
+      className="w-32"
+      onValueChange={(draft) => setField((current) => ({ ...current, draft }))}
+      onValueCommitted={(next) => {
+        if (next === null) {
+          setField((current) => ({ ...current, draft: current.saved }));
+          return;
+        }
+        const seconds = normalizeIntervalSeconds(next, min);
+        if (seconds === field.committed) {
+          setField((current) => ({ ...current, draft: seconds }));
+          return;
+        }
+        const revision = field.revision + 1;
+        setField((current) => ({ ...current, draft: seconds, committed: seconds, revision }));
+        onCommit(seconds, {
+          onFailed: () =>
+            setField((current) =>
+              current.revision !== revision
+                ? current
+                : {
+                    ...current,
+                    committed: current.saved,
+                    draft: current.draft === seconds ? current.saved : current.draft,
+                  },
+            ),
+        });
+      }}
+    >
+      <NumberFieldGroup>
+        <NumberFieldDecrement aria-label={`Decrease ${label}`} />
+        <NumberFieldInput
+          aria-label={`${label.charAt(0).toUpperCase()}${label.slice(1)} in seconds`}
+        />
+        <NumberFieldIncrement aria-label={`Increase ${label}`} />
+      </NumberFieldGroup>
+    </NumberField>
+  );
+}

apps/web/src/components/settings/ProviderSettingsPanel.environment.browser.test.tsx

@@ -8,6 +8,7 @@ import {
   type ServerProvider,
   type UnifiedSettings,
 } from "@t3tools/contracts";
+import * as Duration from "effect/Duration";
 import { AsyncResult, type Atom } from "effect/reactivity";
 import type { ReactNode } from "react";
 import { describe, expect, it, vi } from "vite-plus/test";
@@ -357,3 +358,58 @@ describe("EnvironmentProviderSettings routing", () => {
     );
   });
 });
+
+describe("EnvironmentProviderSettings health check interval", () => {
+  it("commits interval drafts and allows retrying rejected edits", async () => {
+    await setup();
+    await using _screen = await render(panel());
+    const input = page.getByRole("textbox", { name: "Provider health check interval in seconds" });
+
+    await userEvent.type(input, "{ArrowUp}{ArrowDown}");
+    expect(
+      state.updateSettings.mock.calls.map(([patch]) =>
+        Duration.toSeconds(patch.backgroundActivity.overrides.providerHealthRefreshInterval),
+      ),
+    ).toEqual([330, 300]);
+    state.updateSettings.mockClear();
+
+    // Replacing 300 with 120 passes through 30, 3, an empty field, 1 and 12.
+    await userEvent.type(input, "{Backspace}{Backspace}{Backspace}120");
+    await expect.element(input).toHaveValue("120");
+    expect(state.updateSettings).not.toHaveBeenCalled();
+
+    await userEvent.tab();
+    expect(
+      state.updateSettings.mock.calls.map(([patch]) =>
+        Duration.toSeconds(patch.backgroundActivity.overrides.providerHealthRefreshInterval),
+      ),
+    ).toEqual([120]);
+
+    await act(() => state.updateSettings.mock.calls.at(-1)?.[1]?.onFailed?.());
+    await expect.element(input).toHaveValue("300");
+    await userEvent.type(input, "{Backspace}{Backspace}{Backspace}120");
+    await userEvent.tab();
+    expect(
+      state.updateSettings.mock.calls.map(([patch]) =>
+        Duration.toSeconds(patch.backgroundActivity.overrides.providerHealthRefreshInterval),
+      ),
+    ).toEqual([120, 120]);
+
+    const rejectPrevious = state.updateSettings.mock.calls.at(-1)?.[1]?.onFailed;
+    await userEvent.type(input, "{ArrowUp}");
+    await act(() => rejectPrevious?.());
+    await expect.element(input).toHaveValue("150");
+  });
+
+  it("restores the saved interval when a cleared field loses focus", async () => {
+    await setup();
+    await using _screen = await render(panel());
+    const input = page.getByRole("textbox", { name: "Provider health check interval in seconds" });
+
+    await userEvent.type(input, "{Backspace}{Backspace}{Backspace}");
+    await userEvent.tab();
+
+    await expect.element(input).toHaveValue("300");
+    expect(state.updateSettings).not.toHaveBeenCalled();
+  });
+});

apps/web/src/components/settings/ProviderSettingsPanel.tsx

@@ -84,19 +84,13 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from "../ui/empty";
-import {
-  NumberField,
-  NumberFieldDecrement,
-  NumberFieldGroup,
-  NumberFieldIncrement,
-  NumberFieldInput,
-} from "../ui/number-field";
 import { ScrollArea } from "../ui/scroll-area";
 import { Toggle, ToggleGroup } from "../ui/toggle-group";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { stackedThreadToast, toastManager } from "../ui/toast";
 import { AddProviderInstanceDialog } from "./AddProviderInstanceDialog";
 import { ExpandableText } from "./ExpandableText";
+import { IntervalSecondsField } from "./IntervalSecondsField";
 import { ProviderInstanceCard } from "./ProviderInstanceCard";
 import { useSecretSources } from "./SecretSourceInput";
 import { UsageProviderSettings } from "./UsageProviderSettings";
@@ -111,7 +105,6 @@ import {
   backgroundActivityOverrideSettings,
   buildProviderInstanceUpdatePatch,
   durationToSeconds,
-  normalizeIntervalSeconds,
   PROVIDER_HEALTH_INTERVAL_STEP_SECONDS,
 } from "./SettingsPanels.logic";
 import {
@@ -1123,32 +1116,22 @@ export function EnvironmentProviderSettings({
                 !canWriteSettings && "opacity-50 select-none",
               )}
             >
-              <NumberField
+              <IntervalSecondsField
+                label="provider health check interval"
                 value={providerHealthRefreshIntervalSeconds}
                 min={0}
                 step={PROVIDER_HEALTH_INTERVAL_STEP_SECONDS}
-                size="sm"
-                className="w-32"
-                onValueChange={(value) =>
+                onCommit={(seconds, options) =>
                   updateSettings(
                     backgroundActivityOverrideSettings(
                       settings.backgroundActivity,
                       resolvedBackgroundActivity,
-                      {
-                        providerHealthRefreshInterval: Duration.seconds(
-                          normalizeIntervalSeconds(value),
-                        ),
-                      },
+                      { providerHealthRefreshInterval: Duration.seconds(seconds) },
                     ),
+                    options,
                   )
                 }
-              >
-                <NumberFieldGroup>
-                  <NumberFieldDecrement aria-label="Decrease provider health check interval" />
-                  <NumberFieldInput aria-label="Provider health check interval in seconds" />
-                  <NumberFieldIncrement aria-label="Increase provider health check interval" />
-                </NumberFieldGroup>
-              </NumberField>
+              />
               <span className="text-xs text-muted-foreground">seconds</span>
             </div>
           }