From 3e1b0ffc5390da6a66c0e6436868019097a6ea76 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Mon, 1 Jun 2026 15:00:23 +0530
Subject: [PATCH 1/3] fix(guardrails): remove edit and delete functionality

---
 app/(main)/guardrails/page.tsx                |  80 +---
 .../validators/configs/[config_id]/route.ts   |  68 ----
 .../guardrails/DeleteConfigModal.tsx          |  53 ---
 .../guardrails/SavedConfigsList.tsx           |  76 ++--
 .../guardrails/ValidatorConfigPanel.tsx       | 344 ++++++++++--------
 app/components/ui/MultiSelect.tsx             |  31 +-
 app/globals.css                               |  24 ++
 app/lib/types/guardrails.ts                   |   8 -
 app/lib/utils/guardrails.ts                   |  14 -
 9 files changed, 271 insertions(+), 427 deletions(-)
 delete mode 100644 app/api/guardrails/validators/configs/[config_id]/route.ts
 delete mode 100644 app/components/guardrails/DeleteConfigModal.tsx

diff --git a/app/(main)/guardrails/page.tsx b/app/(main)/guardrails/page.tsx
index f731de71..0089db5e 100644
--- a/app/(main)/guardrails/page.tsx
+++ b/app/(main)/guardrails/page.tsx
@@ -17,10 +17,8 @@ import {
   SavedValidatorConfig,
   OrgContext,
 } from "@/app/lib/types/guardrails";
-import { buildValidatorUpdatePayload } from "@/app/lib/utils/guardrails";
 import ValidatorConfigPanel from "@/app/components/guardrails/ValidatorConfigPanel";
 import SavedConfigsList from "@/app/components/guardrails/SavedConfigsList";
-import DeleteConfigModal from "@/app/components/guardrails/DeleteConfigModal";
 
 export default function GuardrailsPage() {
   const { sidebarCollapsed } = useApp();
@@ -38,8 +36,6 @@ export default function GuardrailsPage() {
   const [selectedSavedConfig, setSelectedSavedConfig] =
     useState<SavedValidatorConfig | null>(null);
   const [isSaving, setIsSaving] = useState(false);
-  const [configPendingDelete, setConfigPendingDelete] =
-    useState<SavedValidatorConfig | null>(null);
 
   useEffect(() => {
     if (!isHydrated) return;
@@ -122,39 +118,11 @@ export default function GuardrailsPage() {
     setSelectedSavedConfig(null);
   };
 
-  const handleRequestDeleteConfig = (configId: string) => {
-    const cfg = savedConfigs.find((c) => c.id === configId);
-    if (cfg) setConfigPendingDelete(cfg);
-  };
-
-  const handleConfirmDeleteConfig = async () => {
-    if (!configPendingDelete) return;
-    if (!configsQueryString) {
-      setConfigPendingDelete(null);
-      return;
-    }
-    const configId = configPendingDelete.id;
-    setConfigPendingDelete(null);
-    try {
-      await guardrailsFetch(
-        `/api/guardrails/validators/configs/${configId}${configsQueryString}`,
-        apiKey,
-        { method: "DELETE" },
-      );
-      toast.success("Config deleted");
-      if (selectedSavedConfig?.id === configId) {
-        handleClearForm();
-      }
-      fetchSavedConfigs();
-    } catch {
-      toast.error("Failed to delete config");
-    }
-  };
-
   const handleSaveConfig = async (
     name: string,
     configValues: Record<string, unknown>,
   ) => {
+    if (selectedSavedConfig) return;
     if (!name.trim()) {
       toast.error("Please enter a config name");
       return;
@@ -165,33 +133,18 @@ export default function GuardrailsPage() {
     }
     setIsSaving(true);
     try {
-      const isUpdate = !!selectedSavedConfig;
-      const base = `/api/guardrails/validators/configs`;
-      const url = isUpdate
-        ? `${base}/${selectedSavedConfig!.id}${configsQueryString}`
-        : `${base}${configsQueryString}`;
-
-      const body = isUpdate
-        ? buildValidatorUpdatePayload(configValues)
-        : configValues;
-
-      await guardrailsFetch(url, apiKey, {
-        method: isUpdate ? "PATCH" : "POST",
-        body: JSON.stringify(body),
-      });
-      toast.success(
-        isUpdate ? `Config "${name}" updated` : `Config "${name}" saved`,
+      await guardrailsFetch(
+        `/api/guardrails/validators/configs${configsQueryString}`,
+        apiKey,
+        {
+          method: "POST",
+          body: JSON.stringify(configValues),
+        },
       );
-      const savedConfigId = selectedSavedConfig?.id;
-      const freshList = await fetchSavedConfigs();
-      if (isUpdate && savedConfigId) {
-        setSelectedSavedConfig(
-          freshList.find((c) => c.id === savedConfigId) ?? null,
-        );
-      } else {
-        setSelectedSavedConfig(null);
-        setSelectedValidatorType(null);
-      }
+      toast.success(`Config "${name}" saved`);
+      await fetchSavedConfigs();
+      setSelectedSavedConfig(null);
+      setSelectedValidatorType(null);
     } catch (e) {
       toast.error(e instanceof Error ? e.message : "Failed to save config");
     } finally {
@@ -234,7 +187,6 @@ export default function GuardrailsPage() {
               isLoading={savedConfigsLoading}
               selectedConfigId={selectedSavedConfig?.id ?? null}
               onSelectConfig={handleSelectSavedConfig}
-              onDeleteConfig={handleRequestDeleteConfig}
               onNewConfig={handleClearForm}
             />
           </div>
@@ -250,17 +202,11 @@ export default function GuardrailsPage() {
               isSaving={isSaving}
               onSave={handleSaveConfig}
               onClear={handleClearForm}
+              readOnly={!!selectedSavedConfig}
             />
           </div>
         </div>
       </div>
-
-      <DeleteConfigModal
-        open={!!configPendingDelete}
-        configName={configPendingDelete?.name}
-        onClose={() => setConfigPendingDelete(null)}
-        onConfirm={handleConfirmDeleteConfig}
-      />
     </div>
   );
 }
diff --git a/app/api/guardrails/validators/configs/[config_id]/route.ts b/app/api/guardrails/validators/configs/[config_id]/route.ts
deleted file mode 100644
index 2fb1aa02..00000000
--- a/app/api/guardrails/validators/configs/[config_id]/route.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { guardrailsClient } from "@/app/lib/guardrailsClient";
-import { buildValidatorConfigEndpoint } from "@/app/lib/utils/guardrails";
-import { NextResponse, NextRequest } from "next/server";
-
-export async function GET(
-  request: NextRequest,
-  { params }: { params: Promise<{ config_id: string }> },
-) {
-  try {
-    const { config_id } = await params;
-    const { status, data } = await guardrailsClient(
-      request,
-      buildValidatorConfigEndpoint(request, config_id),
-    );
-    return NextResponse.json(data, { status });
-  } catch (e: unknown) {
-    return NextResponse.json(
-      { error: e instanceof Error ? e.message : String(e) },
-      { status: 500 },
-    );
-  }
-}
-
-export async function PATCH(
-  request: NextRequest,
-  { params }: { params: Promise<{ config_id: string }> },
-) {
-  try {
-    const { config_id } = await params;
-    const body = await request.json();
-    const { status, data } = await guardrailsClient(
-      request,
-      buildValidatorConfigEndpoint(request, config_id),
-      {
-        method: "PATCH",
-        body: JSON.stringify(body),
-      },
-    );
-    return NextResponse.json(data, { status });
-  } catch (e: unknown) {
-    return NextResponse.json(
-      { error: e instanceof Error ? e.message : String(e) },
-      { status: 500 },
-    );
-  }
-}
-
-export async function DELETE(
-  request: NextRequest,
-  { params }: { params: Promise<{ config_id: string }> },
-) {
-  try {
-    const { config_id } = await params;
-    const { status, data } = await guardrailsClient(
-      request,
-      buildValidatorConfigEndpoint(request, config_id),
-      {
-        method: "DELETE",
-      },
-    );
-    return NextResponse.json(data, { status });
-  } catch (e: unknown) {
-    return NextResponse.json(
-      { error: e instanceof Error ? e.message : String(e) },
-      { status: 500 },
-    );
-  }
-}
diff --git a/app/components/guardrails/DeleteConfigModal.tsx b/app/components/guardrails/DeleteConfigModal.tsx
deleted file mode 100644
index 63ced310..00000000
--- a/app/components/guardrails/DeleteConfigModal.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client";
-
-import { Button, Modal } from "@/app/components/ui";
-
-interface DeleteConfigModalProps {
-  open: boolean;
-  configName?: string;
-  onClose: () => void;
-  onConfirm: () => void;
-}
-
-export default function DeleteConfigModal({
-  open,
-  configName,
-  onClose,
-  onConfirm,
-}: DeleteConfigModalProps) {
-  return (
-    <Modal
-      open={open}
-      onClose={onClose}
-      title="Delete Configuration"
-      maxWidth="max-w-md"
-    >
-      <div className="px-6 pb-6">
-        <p className="text-sm text-text-secondary mb-6">
-          {configName ? (
-            <>
-              Are you sure you want to delete{" "}
-              <span className="font-medium text-text-primary">
-                &ldquo;{configName}&rdquo;
-              </span>
-              ? This action cannot be undone.
-            </>
-          ) : (
-            <>
-              Are you sure you want to delete this configuration? This action
-              cannot be undone.
-            </>
-          )}
-        </p>
-        <div className="flex justify-end gap-3">
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="danger" onClick={onConfirm}>
-            Delete
-          </Button>
-        </div>
-      </div>
-    </Modal>
-  );
-}
diff --git a/app/components/guardrails/SavedConfigsList.tsx b/app/components/guardrails/SavedConfigsList.tsx
index c88c9da5..8f99cd90 100644
--- a/app/components/guardrails/SavedConfigsList.tsx
+++ b/app/components/guardrails/SavedConfigsList.tsx
@@ -2,7 +2,7 @@ import {
   SavedValidatorConfig,
   formatValidatorName,
 } from "@/app/lib/types/guardrails";
-import { TrashIcon, GuardrailsShieldCheckIcon } from "@/app/components/icons";
+import { GuardrailsShieldCheckIcon } from "@/app/components/icons";
 import { Button } from "@/app/components/ui";
 import { VALIDATOR_META_BY_TYPE } from "@/app/lib/utils/guardrails";
 import SavedConfigsListSkeleton from "./SavedConfigsListSkeleton";
@@ -12,7 +12,6 @@ interface SavedConfigsListProps {
   isLoading: boolean;
   selectedConfigId: string | null;
   onSelectConfig: (cfg: SavedValidatorConfig) => void;
-  onDeleteConfig: (id: string) => void;
   onNewConfig: () => void;
 }
 
@@ -21,7 +20,6 @@ export default function SavedConfigsList({
   isLoading,
   selectedConfigId,
   onSelectConfig,
-  onDeleteConfig,
   onNewConfig,
 }: SavedConfigsListProps) {
   return (
@@ -84,51 +82,37 @@ export default function SavedConfigsList({
                       : "bg-bg-primary shadow-[0_4px_12px_rgba(0,0,0,0.08),0_2px_4px_rgba(0,0,0,0.05)] hover:shadow-[0_8px_22px_rgba(0,0,0,0.12),0_2px_4px_rgba(0,0,0,0.06)]"
                   }`}
                 >
-                  <div className="flex items-center justify-between gap-2">
-                    <div className="flex-1 min-w-0">
-                      <h3
-                        title={cfg.name}
-                        className={`text-sm truncate max-w-[18rem] ${
-                          isSelected
-                            ? "font-semibold text-accent-primary"
-                            : "font-medium text-text-primary"
-                        }`}
-                      >
-                        {cfg.name}
-                      </h3>
-                      <div className="flex flex-wrap items-center gap-1.5 mt-2">
-                        <span className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-accent-primary/10 text-accent-primary border border-accent-primary/20">
-                          {displayName}
+                  <div className="flex-1 min-w-0">
+                    <h3
+                      title={cfg.name}
+                      className={`text-sm truncate max-w-[18rem] ${
+                        isSelected
+                          ? "font-semibold text-accent-primary"
+                          : "font-medium text-text-primary"
+                      }`}
+                    >
+                      {cfg.name}
+                    </h3>
+                    <div className="flex flex-wrap items-center gap-1.5 mt-2">
+                      <span className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-accent-primary/10 text-accent-primary border border-accent-primary/20">
+                        {displayName}
+                      </span>
+                      {cfg.stage && (
+                        <span className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-bg-secondary text-text-primary border border-border">
+                          {cfg.stage}
+                        </span>
+                      )}
+                      {cfg.on_fail_action && (
+                        <span className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-status-warning-bg text-status-warning-text border border-status-warning-border">
+                          on fail: {cfg.on_fail_action}
                         </span>
-                        {cfg.stage && (
-                          <span className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-bg-secondary text-text-primary border border-border">
-                            {cfg.stage}
-                          </span>
-                        )}
-                        {cfg.on_fail_action && (
-                          <span className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-status-warning-bg text-status-warning-text border border-status-warning-border">
-                            on fail: {cfg.on_fail_action}
-                          </span>
-                        )}
-                        {cfg.is_enabled === false && (
-                          <span className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-status-error-bg text-status-error-text border border-status-error-border">
-                            disabled
-                          </span>
-                        )}
-                      </div>
+                      )}
+                      {cfg.is_enabled === false && (
+                        <span className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-status-error-bg text-status-error-text border border-status-error-border">
+                          disabled
+                        </span>
+                      )}
                     </div>
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onDeleteConfig(cfg.id);
-                      }}
-                      className="p-1.5 rounded-md border border-status-error-border bg-bg-primary text-status-error-text hover:bg-status-error-bg transition-colors shrink-0 cursor-pointer"
-                      title="Delete configuration"
-                      aria-label={`Delete configuration ${cfg.name}`}
-                    >
-                      <TrashIcon className="w-3.5 h-3.5" />
-                    </button>
                   </div>
                 </div>
               );
diff --git a/app/components/guardrails/ValidatorConfigPanel.tsx b/app/components/guardrails/ValidatorConfigPanel.tsx
index 768d4590..e80c7014 100644
--- a/app/components/guardrails/ValidatorConfigPanel.tsx
+++ b/app/components/guardrails/ValidatorConfigPanel.tsx
@@ -8,6 +8,7 @@ import {
   MultiSelect,
   Loader,
 } from "@/app/components/ui";
+import { CloseIcon } from "@/app/components/icons";
 import {
   GUARDRAILS_FIELD_TOOLTIPS,
   KNOWN_ARRAY_OPTIONS,
@@ -31,6 +32,7 @@ interface ValidatorConfigPanelProps {
   isSaving: boolean;
   onSave: (name: string, configValues: Record<string, unknown>) => void;
   onClear: () => void;
+  readOnly?: boolean;
 }
 
 export default function ValidatorConfigPanel({
@@ -43,6 +45,7 @@ export default function ValidatorConfigPanel({
   isSaving,
   onSave,
   onClear,
+  readOnly = false,
 }: ValidatorConfigPanelProps) {
   const [configName, setConfigName] = useState("");
   const [stage, setStage] = useState<"input" | "output">("output");
@@ -145,180 +148,205 @@ export default function ValidatorConfigPanel({
 
   return (
     <div className="flex flex-col h-full overflow-hidden bg-bg-primary">
-      <div className="border-b border-border px-4 py-3 shrink-0">
-        <h2 className="text-base font-semibold text-text-primary truncate">
-          {existingName ? existingName : "New Validator Config"}
-        </h2>
-        <p className="text-xs text-text-secondary mt-0.5">
-          {existingName
-            ? "Update this validator configuration"
-            : "Configure and save a validator"}
-        </p>
+      <div className="border-b border-border px-4 py-3 shrink-0 flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h2 className="text-base font-semibold text-text-primary truncate">
+            {existingName ? existingName : "New Validator Config"}
+          </h2>
+          <p className="text-xs text-text-secondary mt-0.5">
+            {readOnly
+              ? "Viewing this validator configuration (read-only)"
+              : existingName
+                ? "Update this validator configuration"
+                : "Configure and save a validator"}
+          </p>
+        </div>
+        {readOnly && (
+          <button
+            type="button"
+            onClick={onClear}
+            aria-label="Close"
+            title="Close"
+            className="shrink-0 p-1 rounded-md text-text-secondary transition-colors hover:bg-neutral-100 hover:text-text-primary cursor-pointer"
+          >
+            <CloseIcon className="w-5 h-5" />
+          </button>
+        )}
       </div>
 
       <div className="flex-1 overflow-y-auto px-6 py-5 space-y-4">
-        <Field
-          label="Config Name *"
-          value={configName}
-          onChange={setConfigName}
-          placeholder="e.g. my-pii-remover-config"
-        />
-
-        <div>
-          <label className="block text-xs font-medium text-text-secondary mb-1">
-            Stage
-            <InfoTooltip text={GUARDRAILS_FIELD_TOOLTIPS.stage} />
-          </label>
-          <Select
-            value={stage}
-            onChange={(e) => setStage(e.target.value as "input" | "output")}
-            options={[
-              { value: "input", label: "Input" },
-              { value: "output", label: "Output" },
-            ]}
+        <fieldset
+          disabled={readOnly}
+          className="space-y-4 m-0 p-0 border-0 min-w-0 read-only-fields"
+        >
+          <Field
+            label="Config Name *"
+            value={configName}
+            onChange={setConfigName}
+            placeholder="e.g. my-pii-remover-config"
           />
-        </div>
-
-        <div>
-          <label className="block text-xs font-medium text-text-secondary mb-1">
-            On Fail Action
-            <InfoTooltip text={GUARDRAILS_FIELD_TOOLTIPS.on_fail_action} />
-          </label>
-          <Select
-            value={onFailAction}
-            onChange={(e) => setOnFailAction(e.target.value)}
-            options={[
-              { value: "fix", label: "Fix" },
-              { value: "exception", label: "Exception" },
-              { value: "rephrase", label: "Rephrase" },
-            ]}
-          />
-        </div>
 
-        <label className="flex items-center gap-2.5 cursor-pointer">
-          <input
-            type="checkbox"
-            checked={isEnabled}
-            onChange={(e) => setIsEnabled(e.target.checked)}
-            className="w-4 h-4 rounded"
-          />
-          <span className="text-sm text-text-primary">Enabled</span>
-        </label>
+          <div>
+            <label className="block text-xs font-medium text-text-secondary mb-1">
+              Stage
+              <InfoTooltip text={GUARDRAILS_FIELD_TOOLTIPS.stage} />
+            </label>
+            <Select
+              value={stage}
+              onChange={(e) => setStage(e.target.value as "input" | "output")}
+              options={[
+                { value: "input", label: "Input" },
+                { value: "output", label: "Output" },
+              ]}
+            />
+          </div>
 
-        <div>
-          <label className="block text-xs font-medium text-text-secondary mb-1">
-            Validator Type *
-            <InfoTooltip text={GUARDRAILS_FIELD_TOOLTIPS.validator_type} />
-          </label>
-          {validatorsLoading ? (
-            <div
-              className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-bg-secondary text-sm text-text-secondary"
-              role="status"
-              aria-live="polite"
-            >
-              <Loader size="sm" />
-              <span>Loading validator types…</span>
-            </div>
-          ) : (
+          <div>
+            <label className="block text-xs font-medium text-text-secondary mb-1">
+              On Fail Action
+              <InfoTooltip text={GUARDRAILS_FIELD_TOOLTIPS.on_fail_action} />
+            </label>
             <Select
-              value={selectedType ?? ""}
-              onChange={(e) => onTypeChange(e.target.value || null)}
-              placeholder="Select a validator type…"
-              options={validators.map((v) => ({
-                value: v.type,
-                label:
-                  VALIDATOR_META_BY_TYPE[v.type]?.validator_name ??
-                  formatValidatorName(v.type),
-              }))}
+              value={onFailAction}
+              onChange={(e) => setOnFailAction(e.target.value)}
+              options={[
+                { value: "fix", label: "Fix" },
+                { value: "exception", label: "Exception" },
+                { value: "rephrase", label: "Rephrase" },
+              ]}
             />
-          )}
-          {typeDescription && (
-            <p className="text-xs mt-1.5 text-text-secondary">
-              {typeDescription}
-            </p>
-          )}
-        </div>
+          </div>
 
-        {validator && (
-          <>
-            {isBanList && (
-              <div>
-                <BanListField
-                  value={(fieldValues["ban_list_id"] as string | null) ?? null}
-                  onChange={(id) => handleFieldChange("ban_list_id", id)}
-                />
-              </div>
-            )}
+          <label className="flex items-center gap-2.5 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={isEnabled}
+              onChange={(e) => setIsEnabled(e.target.checked)}
+              className="w-4 h-4 rounded"
+            />
+            <span className="text-sm text-text-primary">Enabled</span>
+          </label>
 
-            {isTopicRelevance && (
-              <div>
-                <TopicRelevanceField
-                  value={
-                    (fieldValues["topic_relevance_config_id"] as
-                      | string
-                      | null) ?? null
-                  }
-                  onChange={(id) =>
-                    handleFieldChange("topic_relevance_config_id", id)
-                  }
-                />
+          <div>
+            <label className="block text-xs font-medium text-text-secondary mb-1">
+              Validator Type *
+              <InfoTooltip text={GUARDRAILS_FIELD_TOOLTIPS.validator_type} />
+            </label>
+            {validatorsLoading ? (
+              <div
+                className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-bg-secondary text-sm text-text-secondary"
+                role="status"
+                aria-live="polite"
+              >
+                <Loader size="sm" />
+                <span>Loading validator types…</span>
               </div>
+            ) : (
+              <Select
+                value={selectedType ?? ""}
+                onChange={(e) => onTypeChange(e.target.value || null)}
+                placeholder="Select a validator type…"
+                options={validators.map((v) => ({
+                  value: v.type,
+                  label:
+                    VALIDATOR_META_BY_TYPE[v.type]?.validator_name ??
+                    formatValidatorName(v.type),
+                }))}
+              />
             )}
-
-            {isLlamaGuard && (
-              <div>
-                <label className="block text-xs font-medium text-text-secondary mb-1">
-                  Policies
-                  <InfoTooltip text={GUARDRAILS_FIELD_TOOLTIPS.policies} />
-                </label>
-                <MultiSelect
-                  options={KNOWN_ARRAY_OPTIONS.policies}
-                  value={
-                    Array.isArray(fieldValues["policies"])
-                      ? (fieldValues["policies"] as string[])
-                      : []
-                  }
-                  onChange={(v) =>
-                    handleFieldChange("policies", v.length > 0 ? v : null)
-                  }
-                  placeholder="Select policies…"
-                />
-              </div>
+            {typeDescription && (
+              <p className="text-xs mt-1.5 text-text-secondary">
+                {typeDescription}
+              </p>
             )}
+          </div>
 
-            {editableProperties.length > 0 && (
-              <div>
-                <div className="space-y-4">
-                  {editableProperties.map(([key, prop]) => (
-                    <SchemaField
-                      key={key}
-                      name={key}
-                      schema={prop}
-                      defs={validator.config.$defs}
-                      value={fieldValues[key]}
-                      onChange={handleFieldChange}
-                      validatorType={selectedType ?? undefined}
-                    />
-                  ))}
+          {validator && (
+            <>
+              {isBanList && (
+                <div>
+                  <BanListField
+                    value={
+                      (fieldValues["ban_list_id"] as string | null) ?? null
+                    }
+                    onChange={(id) => handleFieldChange("ban_list_id", id)}
+                  />
                 </div>
-              </div>
-            )}
-          </>
-        )}
+              )}
 
-        <div className="pt-2 flex items-center justify-end gap-2">
-          <Button variant="outline" size="md" onClick={onClear}>
-            Cancel
-          </Button>
-          <Button
-            variant="primary"
-            size="md"
-            onClick={handleSave}
-            disabled={isSaving || !configName.trim() || !selectedType}
-          >
-            {isSaving ? "Saving…" : "Save Config"}
-          </Button>
-        </div>
+              {isTopicRelevance && (
+                <div>
+                  <TopicRelevanceField
+                    value={
+                      (fieldValues["topic_relevance_config_id"] as
+                        | string
+                        | null) ?? null
+                    }
+                    onChange={(id) =>
+                      handleFieldChange("topic_relevance_config_id", id)
+                    }
+                  />
+                </div>
+              )}
+
+              {isLlamaGuard && (
+                <div>
+                  <label className="block text-xs font-medium text-text-secondary mb-1">
+                    Policies
+                    <InfoTooltip text={GUARDRAILS_FIELD_TOOLTIPS.policies} />
+                  </label>
+                  <MultiSelect
+                    options={KNOWN_ARRAY_OPTIONS.policies}
+                    value={
+                      Array.isArray(fieldValues["policies"])
+                        ? (fieldValues["policies"] as string[])
+                        : []
+                    }
+                    onChange={(v) =>
+                      handleFieldChange("policies", v.length > 0 ? v : null)
+                    }
+                    placeholder="Select policies…"
+                    disabled={readOnly}
+                  />
+                </div>
+              )}
+
+              {editableProperties.length > 0 && (
+                <div>
+                  <div className="space-y-4">
+                    {editableProperties.map(([key, prop]) => (
+                      <SchemaField
+                        key={key}
+                        name={key}
+                        schema={prop}
+                        defs={validator.config.$defs}
+                        value={fieldValues[key]}
+                        onChange={handleFieldChange}
+                        validatorType={selectedType ?? undefined}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </fieldset>
+
+        {!readOnly && (
+          <div className="pt-2 flex items-center justify-end gap-2">
+            <Button variant="outline" size="md" onClick={onClear}>
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              onClick={handleSave}
+              disabled={isSaving || !configName.trim() || !selectedType}
+            >
+              {isSaving ? "Saving…" : "Save Config"}
+            </Button>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/app/components/ui/MultiSelect.tsx b/app/components/ui/MultiSelect.tsx
index f9cce714..4f059da3 100644
--- a/app/components/ui/MultiSelect.tsx
+++ b/app/components/ui/MultiSelect.tsx
@@ -10,6 +10,7 @@ interface MultiSelectProps {
   value: string[];
   onChange: (value: string[]) => void;
   placeholder?: string;
+  disabled?: boolean;
 }
 
 const getValue = (opt: MultiSelectOption) =>
@@ -22,6 +23,7 @@ export default function MultiSelect({
   value,
   onChange,
   placeholder,
+  disabled = false,
 }: MultiSelectProps) {
   const labelFor = (val: string) => {
     const match = options.find((o) => getValue(o) === val);
@@ -128,9 +130,10 @@ export default function MultiSelect({
         aria-expanded={open}
         aria-haspopup="listbox"
         aria-controls={listboxId}
+        disabled={disabled}
         onClick={() => setOpen((v) => !v)}
         onKeyDown={handleTriggerKeyDown}
-        className={`min-h-9 w-full flex flex-wrap items-center gap-1.5 rounded-md border px-2.5 py-1.5 cursor-pointer text-left bg-bg-primary transition-colors ${
+        className={`min-h-9 w-full flex flex-wrap items-center gap-1.5 rounded-md border px-2.5 py-1.5 cursor-pointer text-left bg-bg-primary transition-colors disabled:cursor-not-allowed ${
           open ? "border-accent-primary ring-accent-primary" : "border-border"
         }`}
       >
@@ -141,18 +144,20 @@ export default function MultiSelect({
             onClick={(e) => e.stopPropagation()}
           >
             {labelFor(v)}
-            <span
-              role="button"
-              tabIndex={0}
-              onClick={(e) => remove(v, e)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") remove(v, e);
-              }}
-              className="leading-none opacity-60 hover:opacity-100 text-text-primary cursor-pointer"
-              aria-label={`Remove ${v}`}
-            >
-              ×
-            </span>
+            {!disabled && (
+              <span
+                role="button"
+                tabIndex={0}
+                onClick={(e) => remove(v, e)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") remove(v, e);
+                }}
+                className="inline-flex items-center justify-center leading-none opacity-60 hover:opacity-100 cursor-pointer text-[#356581]"
+                aria-label={`Remove ${v}`}
+              >
+                ×
+              </span>
+            )}
           </span>
         ))}
 
diff --git a/app/globals.css b/app/globals.css
index bd9ea2e3..5726abae 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -225,3 +225,27 @@ a {
     transform: translateY(-2px);
   }
 }
+
+/**
+ * Read-only form styling.
+ * Usage:
+ *   <fieldset disabled={readOnly} className="read-only-fields">…</fieldset>
+ */
+.read-only-fields
+  :where(input, select, textarea, button[role="combobox"]):disabled {
+  background-color: color-mix(in srgb, var(--color-accent-primary) 4%, white);
+  border-color: color-mix(in srgb, var(--color-accent-primary) 15%, white);
+  color: color-mix(
+    in srgb,
+    var(--color-accent-primary) 55%,
+    var(--color-text-primary)
+  );
+  font-weight: 500;
+  opacity: 1;
+  cursor: not-allowed;
+}
+
+.read-only-fields button:disabled {
+  opacity: 1;
+  cursor: not-allowed;
+}
diff --git a/app/lib/types/guardrails.ts b/app/lib/types/guardrails.ts
index a93ddfbc..b493db92 100644
--- a/app/lib/types/guardrails.ts
+++ b/app/lib/types/guardrails.ts
@@ -62,11 +62,3 @@ export interface OrgContext {
   organization_id: number;
   project_id: number;
 }
-
-export interface ValidatorUpdatePayload {
-  name?: string;
-  type?: string;
-  stage?: string;
-  on_fail_action?: string; //todo: to consider in future if this variable should be renamed as "on" prefix makes it seems like it is a function
-  is_enabled?: boolean;
-}
diff --git a/app/lib/utils/guardrails.ts b/app/lib/utils/guardrails.ts
index 7b505153..d3743071 100644
--- a/app/lib/utils/guardrails.ts
+++ b/app/lib/utils/guardrails.ts
@@ -2,7 +2,6 @@ import { NextRequest } from "next/server";
 import type {
   ValidatorConfigSchema,
   ValidatorMeta,
-  ValidatorUpdatePayload,
 } from "@/app/lib/types/guardrails";
 import { VALIDATOR_META } from "@/app/lib/data/guardrails/validators";
 
@@ -58,16 +57,3 @@ export function buildDefaultValues(
   }
   return values;
 }
-
-export function buildValidatorUpdatePayload(
-  configValues: Record<string, unknown>,
-): ValidatorUpdatePayload {
-  const { name, type, stage, on_fail_action, is_enabled } = configValues;
-  return {
-    name: name as string,
-    type: type as string,
-    stage: stage as string,
-    on_fail_action: on_fail_action as string,
-    is_enabled: is_enabled as boolean,
-  };
-}

From b2cb6f3e0b5ba065c9c502e298c8e7fb11a3a693 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Mon, 1 Jun 2026 16:29:22 +0530
Subject: [PATCH 2/3] fix(guardrails): few updates on the ban list ui config

---
 app/components/guardrails/BanListField.tsx    |  84 +++++++++--
 app/components/guardrails/BanListModal.tsx    |  20 ++-
 .../guardrails/TopicRelevanceField.tsx        | 137 +++++++++++++++---
 .../guardrails/TopicRelevanceModal.tsx        |   2 +-
 .../guardrails/ValidatorConfigPanel.tsx       |   1 +
 app/lib/types/guardrails.ts                   |  26 ++++
 6 files changed, 230 insertions(+), 40 deletions(-)

diff --git a/app/components/guardrails/BanListField.tsx b/app/components/guardrails/BanListField.tsx
index 9b2642f6..7a07e62a 100644
--- a/app/components/guardrails/BanListField.tsx
+++ b/app/components/guardrails/BanListField.tsx
@@ -1,18 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import BanListModal from "./BanListModal";
 import { guardrailsFetch } from "@/app/lib/guardrailsClient";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { Loader, Select } from "@/app/components/ui";
+import { CheckLineIcon, CopyIcon } from "@/app/components/icons";
+import { BanList, BanListFieldProps } from "@/app/lib/types/guardrails";
 
-interface BanList {
-  id: string;
-  name: string;
-}
-
-interface BanListFieldProps {
-  value: string | null;
-  onChange: (id: string | null) => void;
-}
+const WORDS_MIN_PX = 44;
+const WORDS_MAX_PX = 220;
 
 export default function BanListField({ value, onChange }: BanListFieldProps) {
   const { activeKey } = useAuth();
@@ -24,6 +19,31 @@ export default function BanListField({ value, onChange }: BanListFieldProps) {
   const [bannedWords, setBannedWords] = useState<string[]>([]);
   const [wordsLoading, setWordsLoading] = useState(false);
   const [wordsError, setWordsError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const wordsRef = useRef<HTMLTextAreaElement>(null);
+
+  const autoSize = (
+    el: HTMLTextAreaElement | null,
+    minPx: number,
+    maxPx: number,
+  ) => {
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(Math.max(el.scrollHeight, minPx), maxPx)}px`;
+  };
+
+  const wordsAsText = bannedWords.join(", ");
+
+  const handleCopy = async () => {
+    if (!wordsAsText) return;
+    try {
+      await navigator.clipboard.writeText(wordsAsText);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // ignore
+    }
+  };
 
   const fetchBanLists = () => {
     setLoading(true);
@@ -87,6 +107,10 @@ export default function BanListField({ value, onChange }: BanListFieldProps) {
     }
   }, [value]);
 
+  useEffect(() => {
+    autoSize(wordsRef.current, WORDS_MIN_PX, WORDS_MAX_PX);
+  }, [wordsAsText, wordsLoading]);
+
   const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     onChange(e.target.value || null);
   };
@@ -168,15 +192,43 @@ export default function BanListField({ value, onChange }: BanListFieldProps) {
     }
     if (bannedWords.length > 0) {
       return (
-        <div className="flex flex-wrap gap-1">
-          {bannedWords.map((word) => (
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-[11px] font-medium text-text-secondary">
+              {bannedWords.length} word{bannedWords.length !== 1 ? "s" : ""} ·
+              select text to copy, or use the copy button
+            </span>
             <span
-              key={word}
-              className="inline-block text-xs px-2 py-0.5 rounded-full bg-status-success-bg text-status-success-text border border-status-success-border"
+              role="button"
+              tabIndex={0}
+              onClick={handleCopy}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleCopy();
+                }
+              }}
+              aria-label={copied ? "Copied" : "Copy banned words"}
+              title={copied ? "Copied" : "Copy comma-separated list"}
+              className="shrink-0 inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] font-medium text-accent-primary bg-accent-primary/5 hover:bg-accent-primary/10 transition-colors cursor-pointer"
             >
-              {word}
+              {copied ? (
+                <CheckLineIcon className="w-3 h-3 text-status-success" />
+              ) : (
+                <CopyIcon className="w-3 h-3" />
+              )}
+              {copied ? "Copied" : "Copy"}
             </span>
-          ))}
+          </div>
+          <textarea
+            ref={wordsRef}
+            value={wordsAsText}
+            readOnly
+            rows={2}
+            spellCheck={false}
+            onFocus={(e) => e.currentTarget.select()}
+            className="w-full text-sm rounded-md border border-status-success-border bg-status-success-bg text-status-success-text px-2.5 py-1.5 outline-none resize-none font-mono leading-relaxed overflow-hidden cursor-text"
+          />
         </div>
       );
     }
diff --git a/app/components/guardrails/BanListModal.tsx b/app/components/guardrails/BanListModal.tsx
index fc21ea0c..a0813949 100644
--- a/app/components/guardrails/BanListModal.tsx
+++ b/app/components/guardrails/BanListModal.tsx
@@ -21,6 +21,7 @@ export default function BanListModal({
   const [isPublic, setIsPublic] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [nameError, setNameError] = useState("");
+  const [descriptionError, setDescriptionError] = useState("");
   const [wordsError, setWordsError] = useState("");
 
   const handleCreate = async () => {
@@ -31,6 +32,12 @@ export default function BanListModal({
     } else {
       setNameError("");
     }
+    if (!description.trim()) {
+      setDescriptionError("Description is required");
+      hasError = true;
+    } else {
+      setDescriptionError("");
+    }
     if (!bannedWords.trim()) {
       setWordsError("At least one banned word is required");
       hasError = true;
@@ -85,15 +92,20 @@ export default function BanListModal({
 
           <div>
             <label className="block text-xs font-medium mb-1 text-text-secondary">
-              Description
+              Description *
             </label>
             <textarea
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder="Describe what this ban list covers…"
               rows={2}
-              className={textareaClass}
+              className={`${textareaClass} ${descriptionError ? "border-status-error-border" : ""}`}
             />
+            {descriptionError && (
+              <p className="text-xs text-status-error-text">
+                {descriptionError}
+              </p>
+            )}
           </div>
 
           <div>
@@ -109,9 +121,7 @@ export default function BanListModal({
               className={`${textareaClass} ${wordsError ? "border-status-error-border" : ""}`}
             />
             {wordsError && (
-              <p className="text-xs text-status-error-text mt-1">
-                {wordsError}
-              </p>
+              <p className="text-xs text-status-error-text">{wordsError}</p>
             )}
           </div>
 
diff --git a/app/components/guardrails/TopicRelevanceField.tsx b/app/components/guardrails/TopicRelevanceField.tsx
index 18226a7a..9db72ed1 100644
--- a/app/components/guardrails/TopicRelevanceField.tsx
+++ b/app/components/guardrails/TopicRelevanceField.tsx
@@ -1,22 +1,23 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import TopicRelevanceModal from "./TopicRelevanceModal";
 import { guardrailsFetch } from "@/app/lib/guardrailsClient";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { Loader, Select } from "@/app/components/ui";
+import {
+  TopicRelevanceConfig,
+  TopicRelevanceConfigDetails,
+  TopicRelevanceFieldProps,
+} from "@/app/lib/types/guardrails";
 
-interface TopicRelevanceConfig {
-  id: string;
-  name: string;
-}
-
-interface TopicRelevanceFieldProps {
-  value: string | null;
-  onChange: (id: string | null) => void;
-}
+const DESC_MIN_PX = 44;
+const DESC_MAX_PX = 240;
+const CONFIG_MIN_PX = 100;
+const CONFIG_MAX_PX = 380;
 
 export default function TopicRelevanceField({
   value,
   onChange,
+  disabled = false,
 }: TopicRelevanceFieldProps) {
   const { activeKey } = useAuth();
   const apiKey = activeKey?.key ?? "";
@@ -24,6 +25,23 @@ export default function TopicRelevanceField({
   const [loading, setLoading] = useState(true);
   const [fetchError, setFetchError] = useState<string | null>(null);
   const [showModal, setShowModal] = useState(false);
+  const [details, setDetails] = useState<TopicRelevanceConfigDetails | null>(
+    null,
+  );
+  const [detailsLoading, setDetailsLoading] = useState(false);
+  const descRef = useRef<HTMLTextAreaElement>(null);
+  const configRef = useRef<HTMLTextAreaElement>(null);
+
+  const autoSize = (
+    el: HTMLTextAreaElement | null,
+    minPx: number,
+    maxPx: number,
+  ) => {
+    if (!el) return;
+    el.style.height = "auto";
+    const next = Math.min(Math.max(el.scrollHeight, minPx), maxPx);
+    el.style.height = `${next}px`;
+  };
 
   const fetchConfigs = () => {
     setLoading(true);
@@ -63,6 +81,49 @@ export default function TopicRelevanceField({
     fetchConfigs();
   }, [apiKey]);
 
+  useEffect(() => {
+    if (!disabled || !value) return;
+    autoSize(descRef.current, DESC_MIN_PX, DESC_MAX_PX);
+    autoSize(configRef.current, CONFIG_MIN_PX, CONFIG_MAX_PX);
+  }, [
+    disabled,
+    value,
+    detailsLoading,
+    details?.description,
+    details?.configuration,
+  ]);
+
+  useEffect(() => {
+    if (!disabled || !value) {
+      setDetails(null);
+      return;
+    }
+    let cancelled = false;
+    setDetailsLoading(true);
+    guardrailsFetch<{
+      data?: TopicRelevanceConfigDetails;
+      description?: string | null;
+      configuration?: string | null;
+    }>(`/api/guardrails/topic_relevance_configs/${value}`, apiKey)
+      .then((d) => {
+        if (cancelled) return;
+        const entity = d?.data ?? d;
+        setDetails({
+          description: entity?.description ?? null,
+          configuration: entity?.configuration ?? null,
+        });
+      })
+      .catch(() => {
+        if (!cancelled) setDetails(null);
+      })
+      .finally(() => {
+        if (!cancelled) setDetailsLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [disabled, value, apiKey]);
+
   const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     onChange(e.target.value || null);
   };
@@ -104,18 +165,23 @@ export default function TopicRelevanceField({
             options={options}
           />
         </div>
-        <button
-          type="button"
-          onClick={() => setShowModal(true)}
-          className="shrink-0 inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium text-accent-primary bg-accent-primary/5 hover:bg-accent-primary/10 transition-colors cursor-pointer"
-          title="Create a new topic relevance config"
-        >
-          + New
-        </button>
+        {!disabled && (
+          <button
+            type="button"
+            onClick={() => setShowModal(true)}
+            className="shrink-0 inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium text-accent-primary bg-accent-primary/5 hover:bg-accent-primary/10 transition-colors cursor-pointer"
+            title="Create a new topic relevance config"
+          >
+            + New
+          </button>
+        )}
       </div>
     );
   }
 
+  const textareaReadOnlyClass =
+    "w-full text-sm rounded-md border border-border bg-bg-primary text-text-primary px-2.5 py-1.5 outline-none resize-none";
+
   return (
     <>
       <div>
@@ -123,6 +189,41 @@ export default function TopicRelevanceField({
           Topic Relevance Config
         </label>
         {renderSelect()}
+
+        {disabled && value && (
+          <div className="mt-4 space-y-3">
+            {(detailsLoading || (details?.description ?? "").trim() !== "") && (
+              <div>
+                <label className="block text-xs font-medium text-text-secondary mb-1">
+                  Description
+                </label>
+                <textarea
+                  ref={descRef}
+                  value={
+                    detailsLoading ? "Loading…" : (details?.description ?? "")
+                  }
+                  disabled
+                  rows={2}
+                  className={`${textareaReadOnlyClass} overflow-hidden`}
+                />
+              </div>
+            )}
+            <div>
+              <label className="block text-xs font-medium text-text-secondary mb-1">
+                Topic relevance Configuration
+              </label>
+              <textarea
+                ref={configRef}
+                value={
+                  detailsLoading ? "Loading…" : (details?.configuration ?? "")
+                }
+                disabled
+                rows={4}
+                className={`${textareaReadOnlyClass} font-mono text-[12.5px] overflow-auto`}
+              />
+            </div>
+          </div>
+        )}
       </div>
 
       {showModal && (
diff --git a/app/components/guardrails/TopicRelevanceModal.tsx b/app/components/guardrails/TopicRelevanceModal.tsx
index 7148866a..0321cbda 100644
--- a/app/components/guardrails/TopicRelevanceModal.tsx
+++ b/app/components/guardrails/TopicRelevanceModal.tsx
@@ -98,7 +98,7 @@ export default function TopicRelevanceModal({
 
           <div>
             <label className="block text-xs font-medium mb-1 text-text-secondary">
-              Configuration *
+              Topic relevance Configuration *
             </label>
             <textarea
               value={configuration}
diff --git a/app/components/guardrails/ValidatorConfigPanel.tsx b/app/components/guardrails/ValidatorConfigPanel.tsx
index e80c7014..2c44f080 100644
--- a/app/components/guardrails/ValidatorConfigPanel.tsx
+++ b/app/components/guardrails/ValidatorConfigPanel.tsx
@@ -285,6 +285,7 @@ export default function ValidatorConfigPanel({
                     onChange={(id) =>
                       handleFieldChange("topic_relevance_config_id", id)
                     }
+                    disabled={readOnly}
                   />
                 </div>
               )}
diff --git a/app/lib/types/guardrails.ts b/app/lib/types/guardrails.ts
index b493db92..0d9e9059 100644
--- a/app/lib/types/guardrails.ts
+++ b/app/lib/types/guardrails.ts
@@ -58,6 +58,32 @@ export function formatValidatorName(type: string): string {
     .join(" ");
 }
 
+export interface BanList {
+  id: string;
+  name: string;
+}
+
+export interface BanListFieldProps {
+  value: string | null;
+  onChange: (id: string | null) => void;
+}
+
+export interface TopicRelevanceConfig {
+  id: string;
+  name: string;
+}
+
+export interface TopicRelevanceConfigDetails {
+  description?: string | null;
+  configuration?: string | null;
+}
+
+export interface TopicRelevanceFieldProps {
+  value: string | null;
+  onChange: (id: string | null) => void;
+  disabled?: boolean;
+}
+
 export interface OrgContext {
   organization_id: number;
   project_id: number;

From bacbbd793aabf1fc69c0c27874fb7c51d81ce45b Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Mon, 1 Jun 2026 17:00:18 +0530
Subject: [PATCH 3/3] fix(guardrails): make the coderabbit suggestion

---
 app/(main)/guardrails/page.tsx                     | 9 ++++-----
 app/components/guardrails/ValidatorConfigPanel.tsx | 6 +++---
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/(main)/guardrails/page.tsx b/app/(main)/guardrails/page.tsx
index 0089db5e..dd4ec8c0 100644
--- a/app/(main)/guardrails/page.tsx
+++ b/app/(main)/guardrails/page.tsx
@@ -118,12 +118,11 @@ export default function GuardrailsPage() {
     setSelectedSavedConfig(null);
   };
 
-  const handleSaveConfig = async (
-    name: string,
-    configValues: Record<string, unknown>,
-  ) => {
+  const handleSaveConfig = async (configValues: Record<string, unknown>) => {
     if (selectedSavedConfig) return;
-    if (!name.trim()) {
+    const name =
+      typeof configValues.name === "string" ? configValues.name.trim() : "";
+    if (!name) {
       toast.error("Please enter a config name");
       return;
     }
diff --git a/app/components/guardrails/ValidatorConfigPanel.tsx b/app/components/guardrails/ValidatorConfigPanel.tsx
index 2c44f080..78535251 100644
--- a/app/components/guardrails/ValidatorConfigPanel.tsx
+++ b/app/components/guardrails/ValidatorConfigPanel.tsx
@@ -30,7 +30,7 @@ interface ValidatorConfigPanelProps {
   existingValues?: Record<string, unknown> | null;
   existingName?: string;
   isSaving: boolean;
-  onSave: (name: string, configValues: Record<string, unknown>) => void;
+  onSave: (configValues: Record<string, unknown>) => void;
   onClear: () => void;
   readOnly?: boolean;
 }
@@ -136,14 +136,14 @@ export default function ValidatorConfigPanel({
     );
 
     const payload: Record<string, unknown> = {
-      name: configName,
+      name: configName.trim(),
       type: selectedType,
       stage,
       on_fail_action: onFailAction,
       is_enabled: isEnabled,
       ...cleanFieldValues,
     };
-    onSave(configName, payload);
+    onSave(payload);
   };
 
   return (