From 4341aed641e2838b3537ca70bd06e68c7e5ae4e4 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Fri, 13 Feb 2026 19:13:47 -0800
Subject: [PATCH] Wire up full-screen flow builder in PoliciesPanel with edit
 routing

---
 .../src/components/policies/index.tsx         | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/policies/index.tsx b/ui/litellm-dashboard/src/components/policies/index.tsx
index 034135bfcc0..24e1a872bc0 100644
--- a/ui/litellm-dashboard/src/components/policies/index.tsx
+++ b/ui/litellm-dashboard/src/components/policies/index.tsx
@@ -6,6 +6,7 @@ import { isAdminRole } from "@/utils/roles";
 import PolicyTable from "./policy_table";
 import PolicyInfoView from "./policy_info";
 import AddPolicyForm from "./add_policy_form";
+import { FlowBuilderPage } from "./pipeline_flow_builder";
 import AttachmentTable from "./attachment_table";
 import AddAttachmentForm from "./add_attachment_form";
 import PolicyTestPanel from "./policy_test_panel";
@@ -56,6 +57,7 @@ const PoliciesPanel: React.FC<PoliciesPanelProps> = ({
   const [selectedTemplate, setSelectedTemplate] = useState<any>(null);
   const [existingGuardrailNames, setExistingGuardrailNames] = useState<Set<string>>(new Set());
   const [isCreatingGuardrails, setIsCreatingGuardrails] = useState(false);
+  const [showFlowBuilder, setShowFlowBuilder] = useState(false);
 
   const isAdmin = userRole ? isAdminRole(userRole) : false;
 
@@ -349,8 +351,12 @@ const PoliciesPanel: React.FC<PoliciesPanelProps> = ({
                 onClose={() => setSelectedPolicyId(null)}
                 onEdit={(policy) => {
                   setEditingPolicy(policy);
-                  setIsAddPolicyModalVisible(true);
                   setSelectedPolicyId(null);
+                  if (policy.pipeline) {
+                    setShowFlowBuilder(true);
+                  } else {
+                    setIsAddPolicyModalVisible(true);
+                  }
                 }}
                 accessToken={accessToken}
                 isAdmin={isAdmin}
@@ -363,7 +369,11 @@ const PoliciesPanel: React.FC<PoliciesPanelProps> = ({
                 onDeleteClick={handleDeleteClick}
                 onEditClick={(policy) => {
                   setEditingPolicy(policy);
-                  setIsAddPolicyModalVisible(true);
+                  if (policy.pipeline) {
+                    setShowFlowBuilder(true);
+                  } else {
+                    setIsAddPolicyModalVisible(true);
+                  }
                 }}
                 onViewClick={(policyId) => setSelectedPolicyId(policyId)}
                 isAdmin={isAdmin}
@@ -374,6 +384,10 @@ const PoliciesPanel: React.FC<PoliciesPanelProps> = ({
               visible={isAddPolicyModalVisible}
               onClose={handleCloseModal}
               onSuccess={handleSuccess}
+              onOpenFlowBuilder={() => {
+                setIsAddPolicyModalVisible(false);
+                setShowFlowBuilder(true);
+              }}
               accessToken={accessToken}
               editingPolicy={editingPolicy}
               existingPolicies={policiesList}
@@ -473,6 +487,24 @@ const PoliciesPanel: React.FC<PoliciesPanelProps> = ({
           </TabPanel>
         </TabPanels>
       </TabGroup>
+
+      {showFlowBuilder && (
+        <FlowBuilderPage
+          onBack={() => {
+            setShowFlowBuilder(false);
+            setEditingPolicy(null);
+          }}
+          onSuccess={() => {
+            fetchPolicies();
+            setEditingPolicy(null);
+          }}
+          accessToken={accessToken}
+          editingPolicy={editingPolicy}
+          availableGuardrails={guardrailsList}
+          createPolicy={createPolicyCall}
+          updatePolicy={updatePolicyCall}
+        />
+      )}
     </div>
   );
 };