fix(web): an invalid "Auto-compact after" value is rejected in the field instead of taking Claude offline

apps/web/src/components/settings/ProviderSettingsForm.browser.test.tsx

@@ -0,0 +1,35 @@
+import { ProviderDriverKind } from "@t3tools/contracts";
+import { userEvent } from "vite-plus/test/browser";
+import { describe, expect, it } from "vite-plus/test";
+
+import { render } from "../../../test/render";
+import { providerClients } from "./providerDriverMeta";
+import { ProviderSettingsForm } from "./ProviderSettingsForm";
+
+describe("ProviderSettingsForm text fields", () => {
+  it("drops a rejected draft once the saved value changes", async () => {
+    const claude = providerClients.get(ProviderDriverKind.make("claudeAgent"))!;
+    const form = (autoCompactWindow: string) => (
+      <ProviderSettingsForm
+        definition={claude}
+        value={{ autoCompactWindow }}
+        idPrefix="claude"
+        variant="settings"
+        onChange={() => {}}
+      />
+    );
+    await using screen = await render(form("300000"));
+    const input = screen.getByRole("textbox", { name: "Auto-compact after" });
+
+    await userEvent.fill(input, "300k");
+    await userEvent.keyboard("{Enter}");
+    await expect.element(input).toHaveValue("300k");
+    await expect.element(input).toHaveAttribute("aria-invalid", "true");
+
+    await screen.rerender(form("500000"));
+    await expect.element(input).toHaveValue("500000");
+    await screen.rerender(form("300000"));
+    await expect.element(input).toHaveValue("300000");
+    await expect.element(input).toHaveAttribute("aria-invalid", "false");
+  });
+});

apps/web/src/components/settings/ProviderSettingsForm.test.ts

@@ -52,6 +52,20 @@ describe("ProviderSettingsForm helpers", () => {
     expect(next).toEqual({ forkOwned: 1 });
   });
 
+  it("accepts only text values the field schema decodes", () => {
+    const claude = providerClients.get(ProviderDriverKind.make("claudeAgent"));
+    expect(claude).toBeDefined();
+
+    const autoCompactWindow = deriveProviderSettingsFields(claude!).find(
+      (field) => field.key === "autoCompactWindow",
+    );
+    expect(autoCompactWindow?.isValid).toBeDefined();
+
+    const isValid = autoCompactWindow!.isValid;
+    expect(["50000", "300,000", "300k"].map(isValid)).toEqual([false, false, false]);
+    expect(["300000", " 300000 ", "1000000", ""].map(isValid)).toEqual([true, true, true, true]);
+  });
+
   it("stores false boolean fields when true is the default", () => {
     const next = nextProviderConfigWithFieldValue(
       undefined,
@@ -60,6 +74,7 @@ describe("ProviderSettingsForm helpers", () => {
         control: "switch",
         label: "Experimental",
         clearWhenEmpty: "omit",
+        isValid: () => true,
         defaultBooleanValue: true,
       },
       false,

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

@@ -42,6 +42,7 @@ export interface ProviderSettingsFieldModel {
   /** Typed `SettingsSecretValue`: may name a secret provider reference instead of a value. */
   readonly acceptsSecretReference?: boolean | undefined;
   readonly defaultBooleanValue?: boolean | undefined;
+  readonly isValid: (value: string) => boolean;
 
   readonly options?: ReadonlyArray<ProviderSettingsFormOption> | undefined;
 }
@@ -89,6 +90,15 @@ function readFieldBooleanDefault(
   return Option.isSome(decoded) && typeof decoded.value === "boolean" ? decoded.value : undefined;
 }
 
+function makeFieldTextValidator(
+  fieldSchema: ProviderClientDefinition["settingsSchema"]["fields"][string],
+  clearWhenEmpty: ProviderSettingsFieldModel["clearWhenEmpty"],
+) {
+  const decode = Schema.decodeUnknownOption(fieldSchema as Schema.Decoder<unknown>);
+  return (value: string) =>
+    (clearWhenEmpty === "omit" && value.trim().length === 0) || Option.isSome(decode(value));
+}
+
 export function deriveProviderSettingsFields(
   definition: SettingsFormDefinition,
   value?: unknown,
@@ -118,6 +128,7 @@ export function deriveProviderSettingsFields(
 
       const annotatedTitle = readFieldAnnotationString(fieldSchema, "title");
       const annotatedDescription = readFieldAnnotationString(fieldSchema, "description");
+      const clearWhenEmpty = formAnnotation.clearWhenEmpty ?? "omit";
       return [
         {
           key,
@@ -136,7 +147,8 @@ export function deriveProviderSettingsFields(
             : formAnnotation.placeholder !== undefined
               ? { placeholder: formAnnotation.placeholder }
               : {}),
-          clearWhenEmpty: formAnnotation.clearWhenEmpty ?? "omit",
+          clearWhenEmpty,
+          isValid: makeFieldTextValidator(fieldSchema, clearWhenEmpty),
           ...(isSecretSetting(fieldSchema) ? { secret: true } : {}),
           ...(acceptsSecretReference(fieldSchema) ? { acceptsSecretReference: true } : {}),
           ...(formAnnotation.control === "switch"
@@ -393,6 +405,57 @@ function SecretSettingsControl({
   );
 }
 
+function ProviderSettingsTextInput({
+  field,
+  value,
+  inputId,
+  descriptionId,
+  onChange,
+}: {
+  readonly field: ProviderSettingsFieldModel;
+  readonly value: unknown;
+  readonly inputId: string;
+  readonly descriptionId: string | undefined;
+  readonly onChange: ProviderSettingsFormProps["onChange"];
+}) {
+  const saved = readProviderConfigString(value, field.key);
+  const [rejection, setRejection] = useState<{ draft: string; saved: string } | null>(null);
+  // A rejected draft stays only until the saved value changes underneath it.
+  if (rejection !== null && rejection.saved !== saved) setRejection(null);
+  const rejected = rejection?.draft ?? null;
+  const errorId = `${inputId}-error`;
+  return (
+    <div className="flex w-full min-w-0 flex-col gap-1 @min-[32rem]/settings-row:w-56">
+      <DraftInput
+        id={inputId}
+        aria-describedby={
+          rejected === null ? descriptionId : [descriptionId, errorId].filter(Boolean).join(" ")
+        }
+        aria-invalid={rejected !== null}
+        size="sm"
+        type={field.control === "password" ? "password" : undefined}
+        autoComplete={field.control === "password" ? "off" : undefined}
+        value={rejected ?? saved}
+        placeholder={field.placeholder}
+        onCommit={(next) => {
+          if (!field.isValid(next)) {
+            setRejection({ draft: next, saved });
+            return;
+          }
+          setRejection(null);
+          onChange(nextProviderConfigWithFieldValue(value, field, next));
+        }}
+        spellCheck={false}
+      />
+      {rejected !== null ? (
+        <p id={errorId} className="text-2xs text-destructive">
+          Enter a valid value.
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
 function ProviderSettingsSelect({
   field,
   value,
@@ -541,19 +604,12 @@ function ProviderSettingsFieldRow({
           ) : null}
         </div>
       ) : (
-        <DraftInput
-          id={inputId}
-          aria-describedby={descriptionId}
-          size="sm"
-          className="w-full max-w-full @min-[32rem]/settings-row:w-56"
-          type={field.control === "password" ? "password" : undefined}
-          autoComplete={field.control === "password" ? "off" : undefined}
-          value={readProviderConfigString(value, field.key)}
-          placeholder={field.placeholder}
-          onCommit={(next) => {
-            onChange(nextProviderConfigWithFieldValue(value, field, next));
-          }}
-          spellCheck={false}
+        <ProviderSettingsTextInput
+          field={field}
+          value={value}
+          inputId={inputId}
+          descriptionId={descriptionId}
+          onChange={onChange}
         />
       );