From 5b78cac7cbc313160eb8ae2f90de9b06158183fe Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Fri, 3 Oct 2025 10:41:36 -0600
Subject: [PATCH 1/6] refactor: update component styles and improve layout

- Adjusted button height in KnowledgeDropdown for better consistency.
- Modified margin and padding in KnowledgeFilterList for improved spacing.
- Refined message handling in ChatPage for cleaner code and better readability.
- Enhanced layout structure in KnowledgeSourcesPage and LayoutWrapper for better responsiveness and alignment.
- Updated various components to use consistent arrow function syntax for state updates.
---
 frontend/components/knowledge-dropdown.tsx    |    2 +-
 frontend/components/knowledge-filter-list.tsx |    6 +-
 frontend/src/app/chat/page.tsx                |  236 +-
 frontend/src/app/knowledge/chunks/page.tsx    |   10 +-
 frontend/src/app/knowledge/page.tsx           |   69 +-
 frontend/src/app/settings/page.tsx            | 2299 ++++++++---------
 frontend/src/components/layout-wrapper.tsx    |   12 +-
 7 files changed, 1313 insertions(+), 1321 deletions(-)

diff --git a/frontend/components/knowledge-dropdown.tsx b/frontend/components/knowledge-dropdown.tsx
index ee49fc3a..ab097138 100644
--- a/frontend/components/knowledge-dropdown.tsx
+++ b/frontend/components/knowledge-dropdown.tsx
@@ -442,7 +442,7 @@ export function KnowledgeDropdown({
           disabled={isLoading}
           className={cn(
             variant === "button"
-              ? "rounded-lg h-12 px-4 flex items-center gap-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              ? "rounded-lg h-10 px-4 flex items-center gap-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               : "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:bg-accent hover:text-accent-foreground rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed",
             variant === "navigation" && active
               ? "bg-accent text-accent-foreground shadow-sm"
diff --git a/frontend/components/knowledge-filter-list.tsx b/frontend/components/knowledge-filter-list.tsx
index 8e62058f..93b57d14 100644
--- a/frontend/components/knowledge-filter-list.tsx
+++ b/frontend/components/knowledge-filter-list.tsx
@@ -67,7 +67,7 @@ export function KnowledgeFilterList({
     <div className="flex-1 min-h-0 flex flex-col">
       <div className="px-3 flex-1 min-h-0 flex flex-col">
         <div className="flex-shrink-0">
-          <div className="flex items-center justify-between mb-3 ml-3 mr-2">
+          <div className="flex items-center justify-between mb-3 mr-2 ml-4">
             <h3 className="text-xs font-medium text-muted-foreground">
               Knowledge Filters
             </h3>
@@ -82,11 +82,11 @@ export function KnowledgeFilterList({
           </div>
           <div className="overflow-y-auto scrollbar-hide space-y-1">
             {loading ? (
-              <div className="text-[13px] text-muted-foreground p-2 ml-1">
+              <div className="text-[13px] text-muted-foreground p-2 ml-2">
                 Loading...
               </div>
             ) : filters.length === 0 ? (
-              <div className="text-[13px] text-muted-foreground p-2 ml-1">
+              <div className="text-[13px] text-muted-foreground pb-2 pt-3 ml-4">
                 {searchQuery ? "No filters found" : "No saved filters"}
               </div>
             ) : (
diff --git a/frontend/src/app/chat/page.tsx b/frontend/src/app/chat/page.tsx
index 01ee43c7..5ac82bfc 100644
--- a/frontend/src/app/chat/page.tsx
+++ b/frontend/src/app/chat/page.tsx
@@ -232,7 +232,7 @@ function ChatPage() {
       content: `🔄 Starting upload of **${file.name}**...`,
       timestamp: new Date(),
     };
-    setMessages((prev) => [...prev, uploadStartMessage]);
+    setMessages(prev => [...prev, uploadStartMessage]);
 
     try {
       const formData = new FormData();
@@ -258,7 +258,7 @@ function ChatPage() {
           "Upload failed with status:",
           response.status,
           "Response:",
-          errorText,
+          errorText
         );
         throw new Error("Failed to process document");
       }
@@ -284,7 +284,7 @@ function ChatPage() {
           content: `⏳ Upload initiated for **${file.name}**. Processing in background... (Task ID: ${taskId})`,
           timestamp: new Date(),
         };
-        setMessages((prev) => [...prev.slice(0, -1), pollingMessage]);
+        setMessages(prev => [...prev.slice(0, -1), pollingMessage]);
       } else if (response.ok) {
         // Original flow: Direct response
 
@@ -298,7 +298,7 @@ function ChatPage() {
           timestamp: new Date(),
         };
 
-        setMessages((prev) => [...prev.slice(0, -1), uploadMessage]);
+        setMessages(prev => [...prev.slice(0, -1), uploadMessage]);
 
         // Add file to conversation docs
         if (result.filename) {
@@ -307,7 +307,7 @@ function ChatPage() {
 
         // Update the response ID for this endpoint
         if (result.response_id) {
-          setPreviousResponseIds((prev) => ({
+          setPreviousResponseIds(prev => ({
             ...prev,
             [endpoint]: result.response_id,
           }));
@@ -331,7 +331,7 @@ function ChatPage() {
         content: `❌ Failed to process document. Please try again.`,
         timestamp: new Date(),
       };
-      setMessages((prev) => [...prev.slice(0, -1), errorMessage]);
+      setMessages(prev => [...prev.slice(0, -1), errorMessage]);
     } finally {
       setIsUploading(false);
       setLoading(false);
@@ -468,7 +468,7 @@ function ChatPage() {
       console.log(
         "Loading conversation with",
         conversationData.messages.length,
-        "messages",
+        "messages"
       );
       // Convert backend message format to frontend Message interface
       const convertedMessages: Message[] = conversationData.messages.map(
@@ -596,7 +596,7 @@ function ChatPage() {
                       ) === "string"
                         ? toolCall.function?.arguments || toolCall.arguments
                         : JSON.stringify(
-                            toolCall.function?.arguments || toolCall.arguments,
+                            toolCall.function?.arguments || toolCall.arguments
                           ),
                     result: toolCall.result,
                     status: "completed",
@@ -615,14 +615,14 @@ function ChatPage() {
           }
 
           return message;
-        },
+        }
       );
 
       setMessages(convertedMessages);
       lastLoadedConversationRef.current = conversationData.response_id;
 
       // Set the previous response ID for this conversation
-      setPreviousResponseIds((prev) => ({
+      setPreviousResponseIds(prev => ({
         ...prev,
         [conversationData.endpoint]: conversationData.response_id,
       }));
@@ -664,7 +664,7 @@ function ChatPage() {
         content: `🔄 Starting upload of **${filename}**...`,
         timestamp: new Date(),
       };
-      setMessages((prev) => [...prev, uploadStartMessage]);
+      setMessages(prev => [...prev, uploadStartMessage]);
     };
 
     const handleFileUploaded = (event: CustomEvent) => {
@@ -682,11 +682,11 @@ function ChatPage() {
         timestamp: new Date(),
       };
 
-      setMessages((prev) => [...prev.slice(0, -1), uploadMessage]);
+      setMessages(prev => [...prev.slice(0, -1), uploadMessage]);
 
       // Update the response ID for this endpoint
       if (result.response_id) {
-        setPreviousResponseIds((prev) => ({
+        setPreviousResponseIds(prev => ({
           ...prev,
           [endpoint]: result.response_id,
         }));
@@ -704,7 +704,7 @@ function ChatPage() {
       console.log(
         "Chat page received file upload error event:",
         filename,
-        error,
+        error
       );
 
       // Replace the last message with error message
@@ -713,48 +713,48 @@ function ChatPage() {
         content: `❌ Upload failed for **${filename}**: ${error}`,
         timestamp: new Date(),
       };
-      setMessages((prev) => [...prev.slice(0, -1), errorMessage]);
+      setMessages(prev => [...prev.slice(0, -1), errorMessage]);
     };
 
     window.addEventListener(
       "fileUploadStart",
-      handleFileUploadStart as EventListener,
+      handleFileUploadStart as EventListener
     );
     window.addEventListener(
       "fileUploaded",
-      handleFileUploaded as EventListener,
+      handleFileUploaded as EventListener
     );
     window.addEventListener(
       "fileUploadComplete",
-      handleFileUploadComplete as EventListener,
+      handleFileUploadComplete as EventListener
     );
     window.addEventListener(
       "fileUploadError",
-      handleFileUploadError as EventListener,
+      handleFileUploadError as EventListener
     );
 
     return () => {
       window.removeEventListener(
         "fileUploadStart",
-        handleFileUploadStart as EventListener,
+        handleFileUploadStart as EventListener
       );
       window.removeEventListener(
         "fileUploaded",
-        handleFileUploaded as EventListener,
+        handleFileUploaded as EventListener
       );
       window.removeEventListener(
         "fileUploadComplete",
-        handleFileUploadComplete as EventListener,
+        handleFileUploadComplete as EventListener
       );
       window.removeEventListener(
         "fileUploadError",
-        handleFileUploadError as EventListener,
+        handleFileUploadError as EventListener
       );
     };
   }, [endpoint, setPreviousResponseIds]);
 
   const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery(
-    previousResponseIds[endpoint],
+    previousResponseIds[endpoint]
   );
 
   const handleSSEStream = async (userMessage: Message) => {
@@ -859,7 +859,7 @@ function ChatPage() {
                 console.log(
                   "Received chunk:",
                   chunk.type || chunk.object,
-                  chunk,
+                  chunk
                 );
 
                 // Extract response ID if present
@@ -875,14 +875,14 @@ function ChatPage() {
                   if (chunk.delta.function_call) {
                     console.log(
                       "Function call in delta:",
-                      chunk.delta.function_call,
+                      chunk.delta.function_call
                     );
 
                     // Check if this is a new function call
                     if (chunk.delta.function_call.name) {
                       console.log(
                         "New function call:",
-                        chunk.delta.function_call.name,
+                        chunk.delta.function_call.name
                       );
                       const functionCall: FunctionCall = {
                         name: chunk.delta.function_call.name,
@@ -898,7 +898,7 @@ function ChatPage() {
                     else if (chunk.delta.function_call.arguments) {
                       console.log(
                         "Function call arguments delta:",
-                        chunk.delta.function_call.arguments,
+                        chunk.delta.function_call.arguments
                       );
                       const lastFunctionCall =
                         currentFunctionCalls[currentFunctionCalls.length - 1];
@@ -910,14 +910,14 @@ function ChatPage() {
                           chunk.delta.function_call.arguments;
                         console.log(
                           "Accumulated arguments:",
-                          lastFunctionCall.argumentsString,
+                          lastFunctionCall.argumentsString
                         );
 
                         // Try to parse arguments if they look complete
                         if (lastFunctionCall.argumentsString.includes("}")) {
                           try {
                             const parsed = JSON.parse(
-                              lastFunctionCall.argumentsString,
+                              lastFunctionCall.argumentsString
                             );
                             lastFunctionCall.arguments = parsed;
                             lastFunctionCall.status = "completed";
@@ -925,7 +925,7 @@ function ChatPage() {
                           } catch (e) {
                             console.log(
                               "Arguments not yet complete or invalid JSON:",
-                              e,
+                              e
                             );
                           }
                         }
@@ -958,7 +958,7 @@ function ChatPage() {
                         else if (toolCall.function.arguments) {
                           console.log(
                             "Tool call arguments delta:",
-                            toolCall.function.arguments,
+                            toolCall.function.arguments
                           );
                           const lastFunctionCall =
                             currentFunctionCalls[
@@ -972,7 +972,7 @@ function ChatPage() {
                               toolCall.function.arguments;
                             console.log(
                               "Accumulated tool arguments:",
-                              lastFunctionCall.argumentsString,
+                              lastFunctionCall.argumentsString
                             );
 
                             // Try to parse arguments if they look complete
@@ -981,7 +981,7 @@ function ChatPage() {
                             ) {
                               try {
                                 const parsed = JSON.parse(
-                                  lastFunctionCall.argumentsString,
+                                  lastFunctionCall.argumentsString
                                 );
                                 lastFunctionCall.arguments = parsed;
                                 lastFunctionCall.status = "completed";
@@ -989,7 +989,7 @@ function ChatPage() {
                               } catch (e) {
                                 console.log(
                                   "Tool arguments not yet complete or invalid JSON:",
-                                  e,
+                                  e
                                 );
                               }
                             }
@@ -1009,7 +1009,7 @@ function ChatPage() {
                   if (chunk.delta.finish_reason) {
                     console.log("Finish reason:", chunk.delta.finish_reason);
                     // Mark any pending function calls as completed
-                    currentFunctionCalls.forEach((fc) => {
+                    currentFunctionCalls.forEach(fc => {
                       if (fc.status === "pending" && fc.argumentsString) {
                         try {
                           fc.arguments = JSON.parse(fc.argumentsString);
@@ -1021,7 +1021,7 @@ function ChatPage() {
                           console.log(
                             "Error parsing function call on finish:",
                             fc,
-                            e,
+                            e
                           );
                         }
                       }
@@ -1037,21 +1037,21 @@ function ChatPage() {
                   console.log(
                     "🟢 CREATING function call (added):",
                     chunk.item.id,
-                    chunk.item.tool_name || chunk.item.name,
+                    chunk.item.tool_name || chunk.item.name
                   );
 
                   // Try to find an existing pending call to update (created by earlier deltas)
                   let existing = currentFunctionCalls.find(
-                    (fc) => fc.id === chunk.item.id,
+                    fc => fc.id === chunk.item.id
                   );
                   if (!existing) {
                     existing = [...currentFunctionCalls]
                       .reverse()
                       .find(
-                        (fc) =>
+                        fc =>
                           fc.status === "pending" &&
                           !fc.id &&
-                          fc.name === (chunk.item.tool_name || chunk.item.name),
+                          fc.name === (chunk.item.tool_name || chunk.item.name)
                       );
                   }
 
@@ -1064,7 +1064,7 @@ function ChatPage() {
                       chunk.item.inputs || existing.arguments;
                     console.log(
                       "🟢 UPDATED existing pending function call with id:",
-                      existing.id,
+                      existing.id
                     );
                   } else {
                     const functionCall: FunctionCall = {
@@ -1079,10 +1079,10 @@ function ChatPage() {
                     currentFunctionCalls.push(functionCall);
                     console.log(
                       "🟢 Function calls now:",
-                      currentFunctionCalls.map((fc) => ({
+                      currentFunctionCalls.map(fc => ({
                         id: fc.id,
                         name: fc.name,
-                      })),
+                      }))
                     );
                   }
                 }
@@ -1093,7 +1093,7 @@ function ChatPage() {
                 ) {
                   console.log(
                     "Function args delta (Realtime API):",
-                    chunk.delta,
+                    chunk.delta
                   );
                   const lastFunctionCall =
                     currentFunctionCalls[currentFunctionCalls.length - 1];
@@ -1104,7 +1104,7 @@ function ChatPage() {
                     lastFunctionCall.argumentsString += chunk.delta || "";
                     console.log(
                       "Accumulated arguments (Realtime API):",
-                      lastFunctionCall.argumentsString,
+                      lastFunctionCall.argumentsString
                     );
                   }
                 }
@@ -1115,26 +1115,26 @@ function ChatPage() {
                 ) {
                   console.log(
                     "Function args done (Realtime API):",
-                    chunk.arguments,
+                    chunk.arguments
                   );
                   const lastFunctionCall =
                     currentFunctionCalls[currentFunctionCalls.length - 1];
                   if (lastFunctionCall) {
                     try {
                       lastFunctionCall.arguments = JSON.parse(
-                        chunk.arguments || "{}",
+                        chunk.arguments || "{}"
                       );
                       lastFunctionCall.status = "completed";
                       console.log(
                         "Parsed function arguments (Realtime API):",
-                        lastFunctionCall.arguments,
+                        lastFunctionCall.arguments
                       );
                     } catch (e) {
                       lastFunctionCall.arguments = { raw: chunk.arguments };
                       lastFunctionCall.status = "error";
                       console.log(
                         "Error parsing function arguments (Realtime API):",
-                        e,
+                        e
                       );
                     }
                   }
@@ -1148,29 +1148,29 @@ function ChatPage() {
                   console.log(
                     "🔵 UPDATING function call (done):",
                     chunk.item.id,
-                    chunk.item.tool_name || chunk.item.name,
+                    chunk.item.tool_name || chunk.item.name
                   );
                   console.log(
                     "🔵 Looking for existing function calls:",
-                    currentFunctionCalls.map((fc) => ({
+                    currentFunctionCalls.map(fc => ({
                       id: fc.id,
                       name: fc.name,
-                    })),
+                    }))
                   );
 
                   // Find existing function call by ID or name
                   const functionCall = currentFunctionCalls.find(
-                    (fc) =>
+                    fc =>
                       fc.id === chunk.item.id ||
                       fc.name === chunk.item.tool_name ||
-                      fc.name === chunk.item.name,
+                      fc.name === chunk.item.name
                   );
 
                   if (functionCall) {
                     console.log(
                       "🔵 FOUND existing function call, updating:",
                       functionCall.id,
-                      functionCall.name,
+                      functionCall.name
                     );
                     // Update existing function call with completion data
                     functionCall.status =
@@ -1193,7 +1193,7 @@ function ChatPage() {
                       "🔴 WARNING: Could not find existing function call to update:",
                       chunk.item.id,
                       chunk.item.tool_name,
-                      chunk.item.name,
+                      chunk.item.name
                     );
                   }
                 }
@@ -1208,13 +1208,13 @@ function ChatPage() {
 
                   // Find existing function call by ID, or by name/type if ID not available
                   const functionCall = currentFunctionCalls.find(
-                    (fc) =>
+                    fc =>
                       fc.id === chunk.item.id ||
                       fc.name === chunk.item.tool_name ||
                       fc.name === chunk.item.name ||
                       fc.name === chunk.item.type ||
                       fc.name.includes(chunk.item.type.replace("_call", "")) ||
-                      chunk.item.type.includes(fc.name),
+                      chunk.item.type.includes(fc.name)
                   );
 
                   if (functionCall) {
@@ -1258,24 +1258,24 @@ function ChatPage() {
                     "🟡 CREATING tool call (added):",
                     chunk.item.id,
                     chunk.item.tool_name || chunk.item.name,
-                    chunk.item.type,
+                    chunk.item.type
                   );
 
                   // Dedupe by id or pending with same name
                   let existing = currentFunctionCalls.find(
-                    (fc) => fc.id === chunk.item.id,
+                    fc => fc.id === chunk.item.id
                   );
                   if (!existing) {
                     existing = [...currentFunctionCalls]
                       .reverse()
                       .find(
-                        (fc) =>
+                        fc =>
                           fc.status === "pending" &&
                           !fc.id &&
                           fc.name ===
                             (chunk.item.tool_name ||
                               chunk.item.name ||
-                              chunk.item.type),
+                              chunk.item.type)
                       );
                   }
 
@@ -1291,7 +1291,7 @@ function ChatPage() {
                       chunk.item.inputs || existing.arguments;
                     console.log(
                       "🟡 UPDATED existing pending tool call with id:",
-                      existing.id,
+                      existing.id
                     );
                   } else {
                     const functionCall = {
@@ -1308,11 +1308,11 @@ function ChatPage() {
                     currentFunctionCalls.push(functionCall);
                     console.log(
                       "🟡 Function calls now:",
-                      currentFunctionCalls.map((fc) => ({
+                      currentFunctionCalls.map(fc => ({
                         id: fc.id,
                         name: fc.name,
                         type: fc.type,
-                      })),
+                      }))
                     );
                   }
                 }
@@ -1406,7 +1406,7 @@ function ChatPage() {
       };
 
       if (!controller.signal.aborted && thisStreamId === streamIdRef.current) {
-        setMessages((prev) => [...prev, finalMessage]);
+        setMessages(prev => [...prev, finalMessage]);
         setStreamingMessage(null);
         if (previousResponseIds[endpoint]) {
           cancelNudges();
@@ -1419,7 +1419,7 @@ function ChatPage() {
         !controller.signal.aborted &&
         thisStreamId === streamIdRef.current
       ) {
-        setPreviousResponseIds((prev) => ({
+        setPreviousResponseIds(prev => ({
           ...prev,
           [endpoint]: newResponseId,
         }));
@@ -1447,7 +1447,7 @@ function ChatPage() {
           "Sorry, I couldn't connect to the chat service. Please try again.",
         timestamp: new Date(),
       };
-      setMessages((prev) => [...prev, errorMessage]);
+      setMessages(prev => [...prev, errorMessage]);
     }
   };
 
@@ -1460,7 +1460,7 @@ function ChatPage() {
       timestamp: new Date(),
     };
 
-    setMessages((prev) => [...prev, userMessage]);
+    setMessages(prev => [...prev, userMessage]);
     setInput("");
     setLoading(true);
     setIsFilterHighlighted(false);
@@ -1526,14 +1526,14 @@ function ChatPage() {
             content: result.response,
             timestamp: new Date(),
           };
-          setMessages((prev) => [...prev, assistantMessage]);
+          setMessages(prev => [...prev, assistantMessage]);
           if (result.response_id) {
             cancelNudges();
           }
 
           // Store the response ID if present for this endpoint
           if (result.response_id) {
-            setPreviousResponseIds((prev) => ({
+            setPreviousResponseIds(prev => ({
               ...prev,
               [endpoint]: result.response_id,
             }));
@@ -1554,7 +1554,7 @@ function ChatPage() {
             content: "Sorry, I encountered an error. Please try again.",
             timestamp: new Date(),
           };
-          setMessages((prev) => [...prev, errorMessage]);
+          setMessages(prev => [...prev, errorMessage]);
         }
       } catch (error) {
         console.error("Chat error:", error);
@@ -1564,7 +1564,7 @@ function ChatPage() {
             "Sorry, I couldn't connect to the chat service. Please try again.",
           timestamp: new Date(),
         };
-        setMessages((prev) => [...prev, errorMessage]);
+        setMessages(prev => [...prev, errorMessage]);
       }
     }
 
@@ -1577,7 +1577,7 @@ function ChatPage() {
   };
 
   const toggleFunctionCall = (functionCallId: string) => {
-    setExpandedFunctionCalls((prev) => {
+    setExpandedFunctionCalls(prev => {
       const newSet = new Set(prev);
       if (newSet.has(functionCallId)) {
         newSet.delete(functionCallId);
@@ -1590,7 +1590,7 @@ function ChatPage() {
 
   const handleForkConversation = (
     messageIndex: number,
-    event?: React.MouseEvent,
+    event?: React.MouseEvent
   ) => {
     // Prevent any default behavior and stop event propagation
     if (event) {
@@ -1634,7 +1634,7 @@ function ChatPage() {
 
       // Set the response_id we want to continue from as the previous response ID
       // This tells the backend to continue the conversation from this point
-      setPreviousResponseIds((prev) => ({
+      setPreviousResponseIds(prev => ({
         ...prev,
         [endpoint]: responseIdToForkFrom,
       }));
@@ -1655,7 +1655,7 @@ function ChatPage() {
 
   const renderFunctionCalls = (
     functionCalls: FunctionCall[],
-    messageIndex?: number,
+    messageIndex?: number
   ) => {
     if (!functionCalls || functionCalls.length === 0) return null;
 
@@ -1905,8 +1905,8 @@ function ChatPage() {
     }
 
     if (isFilterDropdownOpen) {
-      const filteredFilters = availableFilters.filter((filter) =>
-        filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase()),
+      const filteredFilters = availableFilters.filter(filter =>
+        filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase())
       );
 
       if (e.key === "Escape") {
@@ -1923,16 +1923,16 @@ function ChatPage() {
 
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setSelectedFilterIndex((prev) =>
-          prev < filteredFilters.length - 1 ? prev + 1 : 0,
+        setSelectedFilterIndex(prev =>
+          prev < filteredFilters.length - 1 ? prev + 1 : 0
         );
         return;
       }
 
       if (e.key === "ArrowUp") {
         e.preventDefault();
-        setSelectedFilterIndex((prev) =>
-          prev > 0 ? prev - 1 : filteredFilters.length - 1,
+        setSelectedFilterIndex(prev =>
+          prev > 0 ? prev - 1 : filteredFilters.length - 1
         );
         return;
       }
@@ -2029,7 +2029,7 @@ function ChatPage() {
 
       // Get button position for popover anchoring
       const button = document.querySelector(
-        "[data-filter-button]",
+        "[data-filter-button]"
       ) as HTMLElement;
       if (button) {
         const rect = button.getBoundingClientRect();
@@ -2046,7 +2046,7 @@ function ChatPage() {
 
   return (
     <div
-      className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
+      className={`fixed inset-0 md:left-72 top-[40px] flex flex-col transition-all duration-300 container mx-auto ${
         isMenuOpen && isPanelOpen
           ? "md:right-[704px]" // Both open: 384px (menu) + 320px (KF panel)
           : isMenuOpen
@@ -2164,14 +2164,14 @@ function ChatPage() {
                         <div className="flex-1 min-w-0">
                           {renderFunctionCalls(
                             message.functionCalls || [],
-                            index,
+                            index
                           )}
                           <MarkdownRenderer chatMessage={message.content} />
                         </div>
                         {endpoint === "chat" && (
                           <div className="flex-shrink-0 ml-2">
                             <button
-                              onClick={(e) => handleForkConversation(index, e)}
+                              onClick={e => handleForkConversation(index, e)}
                               className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-accent rounded text-muted-foreground hover:text-foreground"
                               title="Fork conversation from here"
                             >
@@ -2193,7 +2193,7 @@ function ChatPage() {
                     <div className="flex-1">
                       {renderFunctionCalls(
                         streamingMessage.functionCalls,
-                        messages.length,
+                        messages.length
                       )}
                       <MarkdownRenderer
                         chatMessage={streamingMessage.content}
@@ -2235,8 +2235,8 @@ function ChatPage() {
       )}
 
       {/* Input Area - Fixed at bottom */}
-      <div className="flex-shrink-0 p-6 pb-8 pt-4 flex justify-center">
-        <div className="w-full max-w-[75%]">
+      <div className="pb-8 pt-4 flex px-6">
+        <div className="w-full">
           <form onSubmit={handleSubmit} className="relative">
             <div className="relative w-full bg-muted/20 rounded-lg border border-border/50 focus-within:ring-1 focus-within:ring-ring">
               {selectedFilter && (
@@ -2260,29 +2260,31 @@ function ChatPage() {
                   </span>
                 </div>
               )}
-              <div className="relative" style={{height: `${textareaHeight + 60}px`}}>
-              <TextareaAutosize
-                ref={inputRef}
-                value={input}
-                onChange={onChange}
-                onKeyDown={handleKeyDown}
-                onHeightChange={(height) => setTextareaHeight(height)}
-                maxRows={7}
-                minRows={2}
-                placeholder="Type to ask a question..."
-                disabled={loading}
-                className={`w-full bg-transparent px-4 ${
-                  selectedFilter ? "pt-2" : "pt-4"
-                } focus-visible:outline-none resize-none`}
-                rows={2}
-              />
+              <div
+                className="relative"
+                style={{ height: `${textareaHeight + 60}px` }}
+              >
+                <TextareaAutosize
+                  ref={inputRef}
+                  value={input}
+                  onChange={onChange}
+                  onKeyDown={handleKeyDown}
+                  onHeightChange={height => setTextareaHeight(height)}
+                  maxRows={7}
+                  minRows={2}
+                  placeholder="Type to ask a question..."
+                  disabled={loading}
+                  className={`w-full bg-transparent px-4 ${
+                    selectedFilter ? "pt-2" : "pt-4"
+                  } focus-visible:outline-none resize-none`}
+                  rows={2}
+                />
                 {/* Safe area at bottom for buttons */}
-                <div 
+                <div
                   className="absolute bottom-0 left-0 right-0 bg-transparent pointer-events-none"
-                  style={{ height: '60px' }}
+                  style={{ height: "60px" }}
                 />
               </div>
-              
             </div>
             <input
               ref={fileInputRef}
@@ -2296,7 +2298,7 @@ function ChatPage() {
               variant="outline"
               size="iconSm"
               className="absolute bottom-3 left-3 h-8 w-8 p-0 rounded-full hover:bg-muted/50"
-              onMouseDown={(e) => {
+              onMouseDown={e => {
                 e.preventDefault();
               }}
               onClick={onAtClick}
@@ -2306,7 +2308,7 @@ function ChatPage() {
             </Button>
             <Popover
               open={isFilterDropdownOpen}
-              onOpenChange={(open) => {
+              onOpenChange={open => {
                 setIsFilterDropdownOpen(open);
               }}
             >
@@ -2331,7 +2333,7 @@ function ChatPage() {
                 align="start"
                 sideOffset={6}
                 alignOffset={-18}
-                onOpenAutoFocus={(e) => {
+                onOpenAutoFocus={e => {
                   // Prevent auto focus on the popover content
                   e.preventDefault();
                   // Keep focus on the input
@@ -2364,10 +2366,10 @@ function ChatPage() {
                         </button>
                       )}
                       {availableFilters
-                        .filter((filter) =>
+                        .filter(filter =>
                           filter.name
                             .toLowerCase()
-                            .includes(filterSearchTerm.toLowerCase()),
+                            .includes(filterSearchTerm.toLowerCase())
                         )
                         .map((filter, index) => (
                           <button
@@ -2393,10 +2395,10 @@ function ChatPage() {
                             )}
                           </button>
                         ))}
-                      {availableFilters.filter((filter) =>
+                      {availableFilters.filter(filter =>
                         filter.name
                           .toLowerCase()
-                          .includes(filterSearchTerm.toLowerCase()),
+                          .includes(filterSearchTerm.toLowerCase())
                       ).length === 0 &&
                         filterSearchTerm && (
                           <div className="px-2 py-3 text-sm text-muted-foreground">
diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index cb96eddc..7d574605 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -60,7 +60,7 @@ function ChunksPageContent() {
       setChunksFilteredByQuery(chunks);
     } else {
       setChunksFilteredByQuery(
-        chunks.filter((chunk) =>
+        chunks.filter(chunk =>
           chunk.text.toLowerCase().includes(queryInputText.toLowerCase())
         )
       );
@@ -103,7 +103,7 @@ function ChunksPageContent() {
 
   const handleChunkCardCheckboxChange = useCallback(
     (index: number) => {
-      setSelectedChunks((prevSelected) => {
+      setSelectedChunks(prevSelected => {
         const newSelected = new Set(prevSelected);
         if (newSelected.has(index)) {
           newSelected.delete(index);
@@ -132,7 +132,7 @@ function ChunksPageContent() {
 
   return (
     <div
-      className={`fixed inset-0 md:left-72 top-[53px] flex flex-row transition-all duration-300 ${
+      className={`fixed inset-0 md:left-72 top-[40px] flex flex-row transition-all duration-300 container mx-auto ${
         isMenuOpen && isPanelOpen
           ? "md:right-[704px]"
           : // Both open: 384px (menu) + 320px (KF panel)
@@ -166,7 +166,7 @@ function ChunksPageContent() {
                 type="text"
                 defaultValue={parsedFilterData?.query}
                 value={queryInputText}
-                onChange={(e) => setQueryInputText(e.target.value)}
+                onChange={e => setQueryInputText(e.target.value)}
                 placeholder="Search chunks..."
               />
             </div>
@@ -174,7 +174,7 @@ function ChunksPageContent() {
               <Checkbox
                 id="selectAllChunks"
                 checked={selectAll}
-                onCheckedChange={(handleSelectAll) =>
+                onCheckedChange={handleSelectAll =>
                   setSelectAll(!!handleSelectAll)
                 }
               />
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 1b8b60ef..03256a95 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -64,7 +64,7 @@ function SearchPage() {
   };
 
   // Convert TaskFiles to File format and merge with backend results
-  const taskFilesAsFiles: File[] = taskFiles.map((taskFile) => {
+  const taskFilesAsFiles: File[] = taskFiles.map(taskFile => {
     return {
       filename: taskFile.filename,
       mimetype: taskFile.mimetype,
@@ -77,11 +77,11 @@ function SearchPage() {
 
   const backendFiles = data as File[];
 
-  const filteredTaskFiles = taskFilesAsFiles.filter((taskFile) => {
+  const filteredTaskFiles = taskFilesAsFiles.filter(taskFile => {
     return (
       taskFile.status !== "active" &&
       !backendFiles.some(
-        (backendFile) => backendFile.filename === taskFile.filename
+        backendFile => backendFile.filename === taskFile.filename
       )
     );
   });
@@ -123,7 +123,7 @@ function SearchPage() {
     {
       field: "size",
       headerName: "Size",
-      valueFormatter: (params) =>
+      valueFormatter: params =>
         params.value ? `${Math.round(params.value / 1024)} KB` : "-",
     },
     {
@@ -133,18 +133,17 @@ function SearchPage() {
     {
       field: "owner",
       headerName: "Owner",
-      valueFormatter: (params) =>
+      valueFormatter: params =>
         params.data?.owner_name || params.data?.owner_email || "—",
     },
     {
       field: "chunkCount",
       headerName: "Chunks",
-      valueFormatter: (params) => params.data?.chunkCount?.toString() || "-",
+      valueFormatter: params => params.data?.chunkCount?.toString() || "-",
     },
     {
       field: "avgScore",
       headerName: "Avg score",
-      initialFlex: 0.5,
       cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
         return (
           <span className="text-xs text-accent-emerald-foreground bg-accent-emerald px-2 py-1 rounded">
@@ -201,7 +200,7 @@ function SearchPage() {
 
     try {
       // Delete each file individually since the API expects one filename at a time
-      const deletePromises = selectedRows.map((row) =>
+      const deletePromises = selectedRows.map(row =>
         deleteDocumentMutation.mutateAsync({ filename: row.filename })
       );
 
@@ -230,7 +229,7 @@ function SearchPage() {
 
   return (
     <div
-      className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
+      className={`fixed inset-0 md:left-72 top-[40px] flex flex-col transition-all duration-300 container mx-auto ${
         isMenuOpen && isPanelOpen
           ? "md:right-[704px]"
           : // Both open: 384px (menu) + 320px (KF panel)
@@ -244,7 +243,7 @@ function SearchPage() {
       }`}
     >
       <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center justify-between mb-6 h-10">
           <h2 className="text-lg font-semibold">Project Knowledge</h2>
           <KnowledgeDropdown variant="button" />
         </div>
@@ -312,30 +311,32 @@ function SearchPage() {
             )}
           </form>
         </div>
-        <AgGridReact
-          className="w-full overflow-auto"
-          columnDefs={columnDefs}
-          defaultColDef={defaultColDef}
-          loading={isFetching}
-          ref={gridRef}
-          rowData={fileResults}
-          rowSelection="multiple"
-          rowMultiSelectWithClick={false}
-          suppressRowClickSelection={true}
-          getRowId={(params) => params.data.filename}
-          domLayout="normal"
-          onSelectionChanged={onSelectionChanged}
-          noRowsOverlayComponent={() => (
-            <div className="text-center pb-[45px]">
-              <div className="text-lg text-primary font-semibold">
-                No knowledge
+        <div className="flex-1 min-h-0 max-h-[700px] overflow-hidden h-full">
+          <AgGridReact
+            className="h-full w-full"
+            columnDefs={columnDefs}
+            defaultColDef={defaultColDef}
+            loading={isFetching}
+            ref={gridRef}
+            rowData={fileResults}
+            rowSelection="multiple"
+            rowMultiSelectWithClick={false}
+            suppressRowClickSelection={true}
+            getRowId={params => params.data.filename}
+            domLayout="normal"
+            onSelectionChanged={onSelectionChanged}
+            noRowsOverlayComponent={() => (
+              <div className="text-center pb-[45px]">
+                <div className="text-lg text-primary font-semibold">
+                  No knowledge
+                </div>
+                <div className="text-sm mt-1 text-muted-foreground">
+                  Add files from local or your preferred cloud.
+                </div>
               </div>
-              <div className="text-sm mt-1 text-muted-foreground">
-                Add files from local or your preferred cloud.
-              </div>
-            </div>
-          )}
-        />
+            )}
+          />
+        </div>
       </div>
 
       {/* Bulk Delete Confirmation Dialog */}
@@ -350,7 +351,7 @@ function SearchPage() {
         }? This will remove all chunks and data associated with these documents. This action cannot be undone.
 
 Documents to be deleted:
-${selectedRows.map((row) => `• ${row.filename}`).join("\n")}`}
+${selectedRows.map(row => `• ${row.filename}`).join("\n")}`}
         confirmText="Delete All"
         onConfirm={handleBulkDelete}
         isLoading={deleteDocumentMutation.isPending}
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index f4649190..8fb91bd2 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -6,9 +6,9 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useState } from "react";
 import { useUpdateFlowSettingMutation } from "@/app/api/mutations/useUpdateFlowSettingMutation";
 import {
-	useGetIBMModelsQuery,
-	useGetOllamaModelsQuery,
-	useGetOpenAIModelsQuery,
+  useGetIBMModelsQuery,
+  useGetOllamaModelsQuery,
+  useGetOpenAIModelsQuery,
 } from "@/app/api/queries/useGetModelsQuery";
 import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery";
 import { ConfirmationDialog } from "@/components/confirmation-dialog";
@@ -17,28 +17,28 @@ import OpenAILogo from "@/components/logo/openai-logo";
 import { ProtectedRoute } from "@/components/protected-route";
 import { Button } from "@/components/ui/button";
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
-	Select,
-	SelectContent,
-	SelectTrigger,
-	SelectValue,
+  Select,
+  SelectContent,
+  SelectTrigger,
+  SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import { useAuth } from "@/contexts/auth-context";
 import { useTask } from "@/contexts/task-context";
 import {
-	DEFAULT_AGENT_SETTINGS,
-	DEFAULT_KNOWLEDGE_SETTINGS,
-	UI_CONSTANTS,
+  DEFAULT_AGENT_SETTINGS,
+  DEFAULT_KNOWLEDGE_SETTINGS,
+  UI_CONSTANTS,
 } from "@/lib/constants";
 import { useDebounce } from "@/lib/debounce";
 import { ModelSelector } from "../onboarding/components/model-selector";
@@ -52,1165 +52,1164 @@ import SharePointIcon from "./icons/share-point-icon";
 const { MAX_SYSTEM_PROMPT_CHARS } = UI_CONSTANTS;
 
 interface GoogleDriveFile {
-	id: string;
-	name: string;
-	mimeType: string;
-	webViewLink?: string;
-	iconLink?: string;
+  id: string;
+  name: string;
+  mimeType: string;
+  webViewLink?: string;
+  iconLink?: string;
 }
 
 interface OneDriveFile {
-	id: string;
-	name: string;
-	mimeType?: string;
-	webUrl?: string;
-	driveItem?: {
-		file?: { mimeType: string };
-		folder?: unknown;
-	};
+  id: string;
+  name: string;
+  mimeType?: string;
+  webUrl?: string;
+  driveItem?: {
+    file?: { mimeType: string };
+    folder?: unknown;
+  };
 }
 
 interface Connector {
-	id: string;
-	name: string;
-	description: string;
-	icon: React.ReactNode;
-	status: "not_connected" | "connecting" | "connected" | "error";
-	type: string;
-	connectionId?: string;
-	access_token?: string;
-	selectedFiles?: GoogleDriveFile[] | OneDriveFile[];
+  id: string;
+  name: string;
+  description: string;
+  icon: React.ReactNode;
+  status: "not_connected" | "connecting" | "connected" | "error";
+  type: string;
+  connectionId?: string;
+  access_token?: string;
+  selectedFiles?: GoogleDriveFile[] | OneDriveFile[];
 }
 
 interface SyncResult {
-	processed?: number;
-	added?: number;
-	errors?: number;
-	skipped?: number;
-	total?: number;
+  processed?: number;
+  added?: number;
+  errors?: number;
+  skipped?: number;
+  total?: number;
 }
 
 interface Connection {
-	connection_id: string;
-	is_active: boolean;
-	created_at: string;
-	last_sync?: string;
+  connection_id: string;
+  is_active: boolean;
+  created_at: string;
+  last_sync?: string;
 }
 
 const DEFAULT_CONNECTORS: Connector[] = [
-	{
-		id: "google_drive",
-		name: "Google Drive",
-		description: "Google Drive is not configured.",
-		icon: <GoogleDriveIcon />,
-		status: "not_connected",
-		type: "google_drive",
-	},
-	{
-		id: "one_drive",
-		name: "OneDrive",
-		description: "OneDrive is not configured.",
-		icon: <OneDriveIcon />,
-		status: "not_connected",
-		type: "one_drive",
-	},
-	{
-		id: "amazon_s3",
-		name: "SharePoint",
-		description: "SharePoint is not configured.",
-		icon: <SharePointIcon />,
-		status: "not_connected",
-		type: "sharepoint",
-	},
+  {
+    id: "google_drive",
+    name: "Google Drive",
+    description: "Google Drive is not configured.",
+    icon: <GoogleDriveIcon />,
+    status: "not_connected",
+    type: "google_drive",
+  },
+  {
+    id: "one_drive",
+    name: "OneDrive",
+    description: "OneDrive is not configured.",
+    icon: <OneDriveIcon />,
+    status: "not_connected",
+    type: "one_drive",
+  },
+  {
+    id: "amazon_s3",
+    name: "SharePoint",
+    description: "SharePoint is not configured.",
+    icon: <SharePointIcon />,
+    status: "not_connected",
+    type: "sharepoint",
+  },
 ];
 
 function KnowledgeSourcesPage() {
-	const { isAuthenticated, isNoAuthMode } = useAuth();
-	const { addTask, tasks } = useTask();
-	const searchParams = useSearchParams();
-	const router = useRouter();
-
-	// Connectors state
-	const [connectors, setConnectors] = useState<Connector[]>([]);
-	const [isConnecting, setIsConnecting] = useState<string | null>(null);
-	const [isSyncing, setIsSyncing] = useState<string | null>(null);
-	const [syncResults, setSyncResults] = useState<{
-		[key: string]: SyncResult | null;
-	}>({});
-	const [maxFiles, setMaxFiles] = useState<number>(10);
-	const [syncAllFiles, setSyncAllFiles] = useState<boolean>(false);
-
-	// Only keep systemPrompt state since it needs manual save button
-	const [systemPrompt, setSystemPrompt] = useState<string>("");
-	const [chunkSize, setChunkSize] = useState<number>(1024);
-	const [chunkOverlap, setChunkOverlap] = useState<number>(50);
-	const [tableStructure, setTableStructure] = useState<boolean>(false);
-	const [ocr, setOcr] = useState<boolean>(false);
-	const [pictureDescriptions, setPictureDescriptions] =
-		useState<boolean>(false);
-
-	// Fetch settings using React Query
-	const { data: settings = {} } = useGetSettingsQuery({
-		enabled: isAuthenticated || isNoAuthMode,
-	});
-
-	// Get the current provider from settings
-	const currentProvider = (settings.provider?.model_provider ||
-		"openai") as ModelProvider;
-
-	// Fetch available models based on provider
-	const { data: openaiModelsData } = useGetOpenAIModelsQuery(
-		undefined, // Let backend use stored API key from configuration
-		{
-			enabled:
-				(isAuthenticated || isNoAuthMode) && currentProvider === "openai",
-		},
-	);
-
-	const { data: ollamaModelsData } = useGetOllamaModelsQuery(
-		undefined, // No params for now, could be extended later
-		{
-			enabled:
-				(isAuthenticated || isNoAuthMode) && currentProvider === "ollama",
-		},
-	);
-
-	const { data: ibmModelsData } = useGetIBMModelsQuery(
-		undefined, // No params for now, could be extended later
-		{
-			enabled:
-				(isAuthenticated || isNoAuthMode) && currentProvider === "watsonx",
-		},
-	);
-
-	// Select the appropriate models data based on provider
-	const modelsData =
-		currentProvider === "openai"
-			? openaiModelsData
-			: currentProvider === "ollama"
-				? ollamaModelsData
-				: currentProvider === "watsonx"
-					? ibmModelsData
-					: openaiModelsData; // fallback to openai
-
-	// Mutations
-	const updateFlowSettingMutation = useUpdateFlowSettingMutation({
-		onSuccess: () => {
-			console.log("Setting updated successfully");
-		},
-		onError: (error) => {
-			console.error("Failed to update setting:", error.message);
-		},
-	});
-
-	// Debounced update function
-	const debouncedUpdate = useDebounce(
-		(variables: Parameters<typeof updateFlowSettingMutation.mutate>[0]) => {
-			updateFlowSettingMutation.mutate(variables);
-		},
-		500,
-	);
-
-	// Sync system prompt state with settings data
-	useEffect(() => {
-		if (settings.agent?.system_prompt) {
-			setSystemPrompt(settings.agent.system_prompt);
-		}
-	}, [settings.agent?.system_prompt]);
-
-	// Sync chunk size and overlap state with settings data
-	useEffect(() => {
-		if (settings.knowledge?.chunk_size) {
-			setChunkSize(settings.knowledge.chunk_size);
-		}
-	}, [settings.knowledge?.chunk_size]);
-
-	useEffect(() => {
-		if (settings.knowledge?.chunk_overlap) {
-			setChunkOverlap(settings.knowledge.chunk_overlap);
-		}
-	}, [settings.knowledge?.chunk_overlap]);
-
-	// Sync docling settings with settings data
-	useEffect(() => {
-		if (settings.knowledge?.table_structure !== undefined) {
-			setTableStructure(settings.knowledge.table_structure);
-		}
-	}, [settings.knowledge?.table_structure]);
-
-	useEffect(() => {
-		if (settings.knowledge?.ocr !== undefined) {
-			setOcr(settings.knowledge.ocr);
-		}
-	}, [settings.knowledge?.ocr]);
-
-	useEffect(() => {
-		if (settings.knowledge?.picture_descriptions !== undefined) {
-			setPictureDescriptions(settings.knowledge.picture_descriptions);
-		}
-	}, [settings.knowledge?.picture_descriptions]);
-
-	// Update model selection immediately
-	const handleModelChange = (newModel: string) => {
-		updateFlowSettingMutation.mutate({ llm_model: newModel });
-	};
-
-	// Update system prompt with save button
-	const handleSystemPromptSave = () => {
-		updateFlowSettingMutation.mutate({ system_prompt: systemPrompt });
-	};
-
-	// Update embedding model selection immediately
-	const handleEmbeddingModelChange = (newModel: string) => {
-		updateFlowSettingMutation.mutate({ embedding_model: newModel });
-	};
-
-	// Update chunk size setting with debounce
-	const handleChunkSizeChange = (value: string) => {
-		const numValue = Math.max(0, parseInt(value) || 0);
-		setChunkSize(numValue);
-		debouncedUpdate({ chunk_size: numValue });
-	};
-
-	// Update chunk overlap setting with debounce
-	const handleChunkOverlapChange = (value: string) => {
-		const numValue = Math.max(0, parseInt(value) || 0);
-		setChunkOverlap(numValue);
-		debouncedUpdate({ chunk_overlap: numValue });
-	};
-
-	// Update docling settings
-	const handleTableStructureChange = (checked: boolean) => {
-		setTableStructure(checked);
-		updateFlowSettingMutation.mutate({ table_structure: checked });
-	};
-
-	const handleOcrChange = (checked: boolean) => {
-		setOcr(checked);
-		updateFlowSettingMutation.mutate({ ocr: checked });
-	};
-
-	const handlePictureDescriptionsChange = (checked: boolean) => {
-		setPictureDescriptions(checked);
-		updateFlowSettingMutation.mutate({ picture_descriptions: checked });
-	};
-
-	// Helper function to get connector icon
-	const getConnectorIcon = useCallback((iconName: string) => {
-		const iconMap: { [key: string]: React.ReactElement } = {
-			"google-drive": <GoogleDriveIcon />,
-			sharepoint: (
-				<div className="w-8 h-8 bg-blue-700 rounded flex items-center justify-center text-white font-bold leading-none shrink-0">
-					SP
-				</div>
-			),
-			onedrive: (
-				<div className="w-8 h-8 bg-white border border-gray-300 rounded flex items-center justify-center">
-					<OneDriveIcon />
-				</div>
-			),
-		};
-		return (
-			iconMap[iconName] || (
-				<div className="w-8 h-8 bg-gray-500 rounded flex items-center justify-center text-white font-bold leading-none shrink-0">
-					?
-				</div>
-			)
-		);
-	}, []);
-
-	// Connector functions
-	const checkConnectorStatuses = useCallback(async () => {
-		try {
-			// Fetch available connectors from backend
-			const connectorsResponse = await fetch("/api/connectors");
-			if (!connectorsResponse.ok) {
-				throw new Error("Failed to load connectors");
-			}
-
-			const connectorsResult = await connectorsResponse.json();
-			const connectorTypes = Object.keys(connectorsResult.connectors);
-
-			// Initialize connectors list with metadata from backend
-			const initialConnectors = connectorTypes
-				.filter((type) => connectorsResult.connectors[type].available) // Only show available connectors
-				.map((type) => ({
-					id: type,
-					name: connectorsResult.connectors[type].name,
-					description: connectorsResult.connectors[type].description,
-					icon: getConnectorIcon(connectorsResult.connectors[type].icon),
-					status: "not_connected" as const,
-					type: type,
-				}));
-
-			setConnectors(initialConnectors);
-
-			// Check status for each connector type
-
-			for (const connectorType of connectorTypes) {
-				const response = await fetch(`/api/connectors/${connectorType}/status`);
-				if (response.ok) {
-					const data = await response.json();
-					const connections = data.connections || [];
-					const activeConnection = connections.find(
-						(conn: Connection) => conn.is_active,
-					);
-					const isConnected = activeConnection !== undefined;
-
-					setConnectors((prev) =>
-						prev.map((c) =>
-							c.type === connectorType
-								? {
-										...c,
-										status: isConnected ? "connected" : "not_connected",
-										connectionId: activeConnection?.connection_id,
-									}
-								: c,
-						),
-					);
-				}
-			}
-		} catch (error) {
-			console.error("Failed to check connector statuses:", error);
-		}
-	}, [getConnectorIcon]);
-
-	const handleConnect = async (connector: Connector) => {
-		setIsConnecting(connector.id);
-		setSyncResults((prev) => ({ ...prev, [connector.id]: null }));
-
-		try {
-			// Use the shared auth callback URL, same as connectors page
-			const redirectUri = `${window.location.origin}/auth/callback`;
-
-			const response = await fetch("/api/auth/init", {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-				body: JSON.stringify({
-					connector_type: connector.type,
-					purpose: "data_source",
-					name: `${connector.name} Connection`,
-					redirect_uri: redirectUri,
-				}),
-			});
-
-			if (response.ok) {
-				const result = await response.json();
-
-				if (result.oauth_config) {
-					localStorage.setItem("connecting_connector_id", result.connection_id);
-					localStorage.setItem("connecting_connector_type", connector.type);
-
-					const authUrl =
-						`${result.oauth_config.authorization_endpoint}?` +
-						`client_id=${result.oauth_config.client_id}&` +
-						`response_type=code&` +
-						`scope=${result.oauth_config.scopes.join(" ")}&` +
-						`redirect_uri=${encodeURIComponent(
-							result.oauth_config.redirect_uri,
-						)}&` +
-						`access_type=offline&` +
-						`prompt=consent&` +
-						`state=${result.connection_id}`;
-
-					window.location.href = authUrl;
-				}
-			} else {
-				console.error("Failed to initiate connection");
-				setIsConnecting(null);
-			}
-		} catch (error) {
-			console.error("Connection error:", error);
-			setIsConnecting(null);
-		}
-	};
-
-	// const handleSync = async (connector: Connector) => {
-	//   if (!connector.connectionId) return;
-
-	//   setIsSyncing(connector.id);
-	//   setSyncResults(prev => ({ ...prev, [connector.id]: null }));
-
-	//   try {
-	//     const syncBody: {
-	//       connection_id: string;
-	//       max_files?: number;
-	//       selected_files?: string[];
-	//     } = {
-	//       connection_id: connector.connectionId,
-	//       max_files: syncAllFiles ? 0 : maxFiles || undefined,
-	//     };
-
-	//     // Note: File selection is now handled via the cloud connectors dialog
-
-	//     const response = await fetch(`/api/connectors/${connector.type}/sync`, {
-	//       method: "POST",
-	//       headers: {
-	//         "Content-Type": "application/json",
-	//       },
-	//       body: JSON.stringify(syncBody),
-	//     });
-
-	//     const result = await response.json();
-
-	//     if (response.status === 201) {
-	//       const taskId = result.task_id;
-	//       if (taskId) {
-	//         addTask(taskId);
-	//         setSyncResults(prev => ({
-	//           ...prev,
-	//           [connector.id]: {
-	//             processed: 0,
-	//             total: result.total_files || 0,
-	//           },
-	//         }));
-	//       }
-	//     } else if (response.ok) {
-	//       setSyncResults(prev => ({ ...prev, [connector.id]: result }));
-	//       // Note: Stats will auto-refresh via task completion watcher for async syncs
-	//     } else {
-	//       console.error("Sync failed:", result.error);
-	//     }
-	//   } catch (error) {
-	//     console.error("Sync error:", error);
-	//   } finally {
-	//     setIsSyncing(null);
-	//   }
-	// };
-
-	const getStatusBadge = (status: Connector["status"]) => {
-		switch (status) {
-			case "connected":
-				return <div className="h-2 w-2 bg-green-500 rounded-full" />;
-			case "connecting":
-				return <div className="h-2 w-2 bg-yellow-500 rounded-full" />;
-			case "error":
-				return <div className="h-2 w-2 bg-red-500 rounded-full" />;
-			default:
-				return <div className="h-2 w-2 bg-muted rounded-full" />;
-		}
-	};
-
-	const navigateToKnowledgePage = (connector: Connector) => {
-		const provider = connector.type.replace(/-/g, "_");
-		router.push(`/upload/${provider}`);
-	};
-
-	// Check connector status on mount and when returning from OAuth
-	useEffect(() => {
-		if (isAuthenticated) {
-			checkConnectorStatuses();
-		}
-
-		if (searchParams.get("oauth_success") === "true") {
-			const url = new URL(window.location.href);
-			url.searchParams.delete("oauth_success");
-			window.history.replaceState({}, "", url.toString());
-		}
-	}, [searchParams, isAuthenticated, checkConnectorStatuses]);
-
-	// Track previous tasks to detect new completions
-	const [prevTasks, setPrevTasks] = useState<typeof tasks>([]);
-
-	// Watch for task completions and refresh stats
-	useEffect(() => {
-		// Find newly completed tasks by comparing with previous state
-		const newlyCompletedTasks = tasks.filter((task) => {
-			const wasCompleted =
-				prevTasks.find((prev) => prev.task_id === task.task_id)?.status ===
-				"completed";
-			return task.status === "completed" && !wasCompleted;
-		});
-
-		if (newlyCompletedTasks.length > 0) {
-			// Task completed - could refresh data here if needed
-			const timeoutId = setTimeout(() => {
-				// Stats refresh removed
-			}, 1000);
-
-			// Update previous tasks state
-			setPrevTasks(tasks);
-
-			return () => clearTimeout(timeoutId);
-		} else {
-			// Always update previous tasks state
-			setPrevTasks(tasks);
-		}
-	}, [tasks, prevTasks]);
-
-	const handleEditInLangflow = (
-		flowType: "chat" | "ingest",
-		closeDialog: () => void,
-	) => {
-		// Select the appropriate flow ID and edit URL based on flow type
-		const targetFlowId =
-			flowType === "ingest" ? settings.ingest_flow_id : settings.flow_id;
-		const editUrl =
-			flowType === "ingest"
-				? settings.langflow_ingest_edit_url
-				: settings.langflow_edit_url;
-
-		const derivedFromWindow =
-			typeof window !== "undefined"
-				? `${window.location.protocol}//${window.location.hostname}:7860`
-				: "";
-		const base = (
-			settings.langflow_public_url ||
-			derivedFromWindow ||
-			"http://localhost:7860"
-		).replace(/\/$/, "");
-		const computed = targetFlowId ? `${base}/flow/${targetFlowId}` : base;
-
-		const url = editUrl || computed;
-
-		window.open(url, "_blank");
-		closeDialog(); // Close immediately after opening Langflow
-	};
-
-	const handleRestoreRetrievalFlow = (closeDialog: () => void) => {
-		fetch(`/api/reset-flow/retrieval`, {
-			method: "POST",
-		})
-			.then((response) => {
-				if (response.ok) {
-					return response.json();
-				}
-				throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-			})
-			.then(() => {
-				// Only reset form values if the API call was successful
-				setSystemPrompt(DEFAULT_AGENT_SETTINGS.system_prompt);
-				// Trigger model update to default model
-				handleModelChange(DEFAULT_AGENT_SETTINGS.llm_model);
-				closeDialog(); // Close after successful completion
-			})
-			.catch((error) => {
-				console.error("Error restoring retrieval flow:", error);
-				closeDialog(); // Close even on error (could show error toast instead)
-			});
-	};
-
-	const handleRestoreIngestFlow = (closeDialog: () => void) => {
-		fetch(`/api/reset-flow/ingest`, {
-			method: "POST",
-		})
-			.then((response) => {
-				if (response.ok) {
-					return response.json();
-				}
-				throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-			})
-			.then(() => {
-				// Only reset form values if the API call was successful
-				setChunkSize(DEFAULT_KNOWLEDGE_SETTINGS.chunk_size);
-				setChunkOverlap(DEFAULT_KNOWLEDGE_SETTINGS.chunk_overlap);
-				setTableStructure(false);
-				setOcr(false);
-				setPictureDescriptions(false);
-				closeDialog(); // Close after successful completion
-			})
-			.catch((error) => {
-				console.error("Error restoring ingest flow:", error);
-				closeDialog(); // Close even on error (could show error toast instead)
-			});
-	};
-
-	return (
-		<div className="space-y-8">
-			{/* Connectors Section */}
-			<div className="space-y-6">
-				<div>
-					<h2 className="text-lg font-semibold tracking-tight mb-2">
-						Cloud Connectors
-					</h2>
-				</div>
-
-				{/* Conditional Sync Settings or No-Auth Message */}
-				{
-					isNoAuthMode ? (
-						<Card className="border-yellow-500/50 bg-yellow-500/5">
-							<CardHeader>
-								<CardTitle className="text-lg text-yellow-600">
-									Cloud connectors are only available with auth mode enabled
-								</CardTitle>
-								<CardDescription className="text-sm">
-									Please provide the following environment variables and
-									restart:
-								</CardDescription>
-							</CardHeader>
-							<CardContent>
-								<div className="bg-muted rounded-md p-4 font-mono text-sm">
-									<div className="text-muted-foreground mb-2">
-										# make here
-										https://console.cloud.google.com/apis/credentials
-									</div>
-									<div>GOOGLE_OAUTH_CLIENT_ID=</div>
-									<div>GOOGLE_OAUTH_CLIENT_SECRET=</div>
-								</div>
-							</CardContent>
-						</Card>
-					) : null
-					// <div className="flex items-center justify-between py-4">
-					//   <div>
-					//     <h3 className="text-lg font-medium">Sync Settings</h3>
-					//     <p className="text-sm text-muted-foreground">
-					//       Configure how many files to sync when manually triggering a sync
-					//     </p>
-					//   </div>
-					//   <div className="flex items-center gap-4">
-					//     <div className="flex items-center space-x-2">
-					//       <Checkbox
-					//         id="syncAllFiles"
-					//         checked={syncAllFiles}
-					//         onCheckedChange={checked => {
-					//           setSyncAllFiles(!!checked);
-					//           if (checked) {
-					//             setMaxFiles(0);
-					//           } else {
-					//             setMaxFiles(10);
-					//           }
-					//         }}
-					//       />
-					//       <Label
-					//         htmlFor="syncAllFiles"
-					//         className="font-medium whitespace-nowrap"
-					//       >
-					//         Sync all files
-					//       </Label>
-					//     </div>
-					//     <Label
-					//       htmlFor="maxFiles"
-					//       className="font-medium whitespace-nowrap"
-					//     >
-					//       Max files per sync:
-					//     </Label>
-					//     <div className="relative">
-					//       <Input
-					//         id="maxFiles"
-					//         type="number"
-					//         value={syncAllFiles ? 0 : maxFiles}
-					//         onChange={e => setMaxFiles(parseInt(e.target.value) || 10)}
-					//         disabled={syncAllFiles}
-					//         className="w-16 min-w-16 max-w-16 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
-					//         min="1"
-					//         max="100"
-					//         title={
-					//           syncAllFiles
-					//             ? "Disabled when 'Sync all files' is checked"
-					//             : "Leave blank or set to 0 for unlimited"
-					//         }
-					//       />
-					//     </div>
-					//   </div>
-					// </div>
-				}
-
-				{/* Connectors Grid */}
-				<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-					{DEFAULT_CONNECTORS.map((connector) => {
-						const actualConnector = connectors.find(
-							(c) => c.id === connector.id,
-						);
-						return (
-							<Card key={connector.id} className="relative flex flex-col">
-								<CardHeader>
-									<div className="flex flex-col items-start justify-between">
-										<div className="flex flex-col gap-3">
-											<div className="mb-1">
-												<div
-													className={`w-8 h-8 ${
-														actualConnector ? "bg-white" : "bg-muted grayscale"
-													} rounded flex items-center justify-center`}
-												>
-													{connector.icon}
-												</div>
-											</div>
-											<CardTitle className="flex flex-row items-center gap-2">
-												{connector.name}
-												{actualConnector &&
-													getStatusBadge(actualConnector.status)}
-											</CardTitle>
-											<CardDescription className="text-[13px]">
-												{actualConnector?.description
-													? `${actualConnector.name} is configured.`
-													: connector.description}
-											</CardDescription>
-										</div>
-									</div>
-								</CardHeader>
-								<CardContent className="flex-1 flex flex-col justify-end space-y-4">
-									{actualConnector?.status === "connected" ? (
-										<div className="space-y-3">
-											<Button
-												onClick={() => navigateToKnowledgePage(connector)}
-												disabled={isSyncing === connector.id}
-												className="w-full cursor-pointer"
-												size="sm"
-											>
-												<Plus className="h-4 w-4" />
-												Add Knowledge
-											</Button>
-
-											{syncResults[connector.id] && (
-												<div className="text-xs text-muted-foreground bg-muted/50 p-2 rounded">
-													<div>
-														Processed:{" "}
-														{syncResults[connector.id]?.processed || 0}
-													</div>
-													<div>
-														Added: {syncResults[connector.id]?.added || 0}
-													</div>
-													{syncResults[connector.id]?.errors && (
-														<div>
-															Errors: {syncResults[connector.id]?.errors}
-														</div>
-													)}
-												</div>
-											)}
-										</div>
-									) : (
-										<div className="text-[13px] text-muted-foreground">
-											<p>
-												See our{" "}
-												<Link
-													className="text-accent-pink-foreground"
-													href="https://github.com/langflow-ai/openrag/pull/96/files#diff-06889aa94ccf8dac64e70c8cc30a2ceed32cc3c0c2c14a6ff0336fe882a9c2ccR41"
-												>
-													Cloud Connectors installation guide
-												</Link>{" "}
-												for more detail.
-											</p>
-										</div>
-									)}
-								</CardContent>
-							</Card>
-						);
-					})}
-				</div>
-			</div>
-			{/* Agent Behavior Section */}
-			<Card>
-				<CardHeader>
-					<div className="flex items-center justify-between">
-						<div>
-							<CardTitle className="text-lg mb-4">Agent</CardTitle>
-							<CardDescription>
-								Quick Agent settings. Edit in Langflow for full control.
-							</CardDescription>
-						</div>
-						<div className="flex gap-2">
-							<ConfirmationDialog
-								trigger={
-									<Button ignoreTitleCase={true} variant="outline">
-										Restore flow
-									</Button>
-								}
-								title="Restore default Retrieval flow"
-								description="This restores defaults and discards all custom settings and overrides. This can’t be undone."
-								confirmText="Restore"
-								variant="destructive"
-								onConfirm={handleRestoreRetrievalFlow}
-							/>
-							<ConfirmationDialog
-								trigger={
-									<Button>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											width="24"
-											height="22"
-											viewBox="0 0 24 22"
-											className="h-4 w-4 mr-2"
-											aria-label="Langflow icon"
-										>
-											<title>Langflow icon</title>
-											<path
-												fill="currentColor"
-												d="M13.0486 0.462158H9.75399C9.44371 0.462158 9.14614 0.586082 8.92674 0.806667L4.03751 5.72232C3.81811 5.9429 3.52054 6.06682 3.21026 6.06682H1.16992C0.511975 6.06682 -0.0165756 6.61212 0.000397655 7.2734L0.0515933 9.26798C0.0679586 9.90556 0.586745 10.4139 1.22111 10.4139H3.59097C3.90124 10.4139 4.19881 10.2899 4.41821 10.0694L9.34823 5.11269C9.56763 4.89211 9.8652 4.76818 10.1755 4.76818H13.0486C13.6947 4.76818 14.2185 4.24157 14.2185 3.59195V1.63839C14.2185 0.988773 13.6947 0.462158 13.0486 0.462158Z"
-											></path>
-											<path
-												fill="currentColor"
-												d="M19.5355 11.5862H22.8301C23.4762 11.5862 24 12.1128 24 12.7624V14.716C24 15.3656 23.4762 15.8922 22.8301 15.8922H19.957C19.6467 15.8922 19.3491 16.0161 19.1297 16.2367L14.1997 21.1934C13.9803 21.414 13.6827 21.5379 13.3725 21.5379H11.0026C10.3682 21.5379 9.84945 21.0296 9.83309 20.392L9.78189 18.3974C9.76492 17.7361 10.2935 17.1908 10.9514 17.1908H12.9918C13.302 17.1908 13.5996 17.0669 13.819 16.8463L18.7082 11.9307C18.9276 11.7101 19.2252 11.5862 19.5355 11.5862Z"
-											></path>
-											<path
-												fill="currentColor"
-												d="M19.5355 2.9796L22.8301 2.9796C23.4762 2.9796 24 3.50622 24 4.15583V6.1094C24 6.75901 23.4762 7.28563 22.8301 7.28563H19.957C19.6467 7.28563 19.3491 7.40955 19.1297 7.63014L14.1997 12.5868C13.9803 12.8074 13.6827 12.9313 13.3725 12.9313H10.493C10.1913 12.9313 9.90126 13.0485 9.68346 13.2583L4.14867 18.5917C3.93087 18.8016 3.64085 18.9187 3.33917 18.9187H1.32174C0.675616 18.9187 0.151832 18.3921 0.151832 17.7425V15.7343C0.151832 15.0846 0.675616 14.558 1.32174 14.558H3.32468C3.63496 14.558 3.93253 14.4341 4.15193 14.2135L9.40827 8.92878C9.62767 8.70819 9.92524 8.58427 10.2355 8.58427H12.9918C13.302 8.58427 13.5996 8.46034 13.819 8.23976L18.7082 3.32411C18.9276 3.10353 19.2252 2.9796 19.5355 2.9796Z"
-											></path>
-										</svg>
-										Edit in Langflow
-									</Button>
-								}
-								title="Edit Retrieval flow in Langflow"
-								description={
-									<>
-										<p className="mb-2">
-											You're entering Langflow. You can edit the{" "}
-											<b>Retrieval flow</b> and other underlying flows. Manual
-											changes to components, wiring, or I/O can break this
-											experience.
-										</p>
-										<p>You can restore this flow from Settings.</p>
-									</>
-								}
-								confirmText="Proceed"
-								confirmIcon={<ArrowUpRight />}
-								onConfirm={(closeDialog) =>
-									handleEditInLangflow("chat", closeDialog)
-								}
-								variant="warning"
-							/>
-						</div>
-					</div>
-				</CardHeader>
-				<CardContent>
-					<div className="space-y-6">
-						<div className="space-y-2">
-						<LabelWrapper
-								label="Language model"
-								helperText="Model used for chat"
-								id="embedding-model"
-								required={true}
-							>
-								<ModelSelector
-									options={modelsData?.language_models || []}
-                  noOptionsPlaceholder={modelsData ? "No language models detected." : "Loading models..."}
-									icon={<OpenAILogo className="w-4 h-4" />}
-									value={modelsData ? settings.agent?.llm_model || "" : ""}
-									onValueChange={handleModelChange}
-								/>
-							</LabelWrapper>
-						</div>
-						<div className="space-y-2">
-							<LabelWrapper label="Agent Instructions" id="system-prompt">
-								<Textarea
-									id="system-prompt"
-									placeholder="Enter your agent instructions here..."
-									value={systemPrompt}
-									onChange={(e) => setSystemPrompt(e.target.value)}
-									rows={6}
-									className={`resize-none ${
-										systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
-											? "border-red-500 focus:border-red-500"
-											: ""
-									}`}
-								/>
-								<div className="flex justify-start">
-									<span
-										className={`text-xs ${
-											systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
-												? "text-red-500"
-												: "text-muted-foreground"
-										}`}
-									>
-										{systemPrompt.length}/{MAX_SYSTEM_PROMPT_CHARS} characters
-									</span>
-								</div>
-							</LabelWrapper>
-						</div>
-						<div className="flex justify-end pt-2">
-							<Button
-								onClick={handleSystemPromptSave}
-								disabled={
-									updateFlowSettingMutation.isPending ||
-									systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
-								}
-								className="min-w-[120px]"
-								size="sm"
-								variant="outline"
-							>
-								{updateFlowSettingMutation.isPending ? (
-									<>
-										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-										Saving...
-									</>
-								) : (
-									"Save Agent Instructions"
-								)}
-							</Button>
-						</div>
-					</div>
-				</CardContent>
-			</Card>
-
-			{/* Knowledge Ingest Section */}
-			<Card>
-				<CardHeader>
-					<div className="flex items-center justify-between">
-						<div>
-							<CardTitle className="text-lg mb-4">
-								Knowledge ingestion and retrieval
-							</CardTitle>
-							<CardDescription>
-								Quick knowledge settings. Edit in Langflow for full control.
-							</CardDescription>
-						</div>
-						<div className="flex gap-2">
-							<ConfirmationDialog
-								trigger={
-									<Button ignoreTitleCase={true} variant="outline">
-										Restore flow
-									</Button>
-								}
-								title="Restore default Ingest flow"
-								description="This restores defaults and discards all custom settings and overrides. This can't be undone."
-								confirmText="Restore"
-								variant="destructive"
-								onConfirm={handleRestoreIngestFlow}
-							/>
-							<ConfirmationDialog
-								trigger={
-									<Button>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											width="24"
-											height="22"
-											viewBox="0 0 24 22"
-											className="h-4 w-4 mr-2"
-											aria-label="Langflow icon"
-										>
-											<title>Langflow icon</title>
-											<path
-												fill="currentColor"
-												d="M13.0486 0.462158H9.75399C9.44371 0.462158 9.14614 0.586082 8.92674 0.806667L4.03751 5.72232C3.81811 5.9429 3.52054 6.06682 3.21026 6.06682H1.16992C0.511975 6.06682 -0.0165756 6.61212 0.000397655 7.2734L0.0515933 9.26798C0.0679586 9.90556 0.586745 10.4139 1.22111 10.4139H3.59097C3.90124 10.4139 4.19881 10.2899 4.41821 10.0694L9.34823 5.11269C9.56763 4.89211 9.8652 4.76818 10.1755 4.76818H13.0486C13.6947 4.76818 14.2185 4.24157 14.2185 3.59195V1.63839C14.2185 0.988773 13.6947 0.462158 13.0486 0.462158Z"
-											></path>
-											<path
-												fill="currentColor"
-												d="M19.5355 11.5862H22.8301C23.4762 11.5862 24 12.1128 24 12.7624V14.716C24 15.3656 23.4762 15.8922 22.8301 15.8922H19.957C19.6467 15.8922 19.3491 16.0161 19.1297 16.2367L14.1997 21.1934C13.9803 21.414 13.6827 21.5379 13.3725 21.5379H11.0026C10.3682 21.5379 9.84945 21.0296 9.83309 20.392L9.78189 18.3974C9.76492 17.7361 10.2935 17.1908 10.9514 17.1908H12.9918C13.302 17.1908 13.5996 17.0669 13.819 16.8463L18.7082 11.9307C18.9276 11.7101 19.2252 11.5862 19.5355 11.5862Z"
-											></path>
-											<path
-												fill="currentColor"
-												d="M19.5355 2.9796L22.8301 2.9796C23.4762 2.9796 24 3.50622 24 4.15583V6.1094C24 6.75901 23.4762 7.28563 22.8301 7.28563H19.957C19.6467 7.28563 19.3491 7.40955 19.1297 7.63014L14.1997 12.5868C13.9803 12.8074 13.6827 12.9313 13.3725 12.9313H10.493C10.1913 12.9313 9.90126 13.0485 9.68346 13.2583L4.14867 18.5917C3.93087 18.8016 3.64085 18.9187 3.33917 18.9187H1.32174C0.675616 18.9187 0.151832 18.3921 0.151832 17.7425V15.7343C0.151832 15.0846 0.675616 14.558 1.32174 14.558H3.32468C3.63496 14.558 3.93253 14.4341 4.15193 14.2135L9.40827 8.92878C9.62767 8.70819 9.92524 8.58427 10.2355 8.58427H12.9918C13.302 8.58427 13.5996 8.46034 13.819 8.23976L18.7082 3.32411C18.9276 3.10353 19.2252 2.9796 19.5355 2.9796Z"
-											></path>
-										</svg>
-										Edit in Langflow
-									</Button>
-								}
-								title="Edit Ingest flow in Langflow"
-								description={
-									<>
-										<p className="mb-2">
-											You're entering Langflow. You can edit the{" "}
-											<b>Ingest flow</b> and other underlying flows. Manual
-											changes to components, wiring, or I/O can break this
-											experience.
-										</p>
-										<p>You can restore this flow from Settings.</p>
-									</>
-								}
-								confirmText="Proceed"
-								confirmIcon={<ArrowUpRight />}
-								variant="warning"
-								onConfirm={(closeDialog) =>
-									handleEditInLangflow("ingest", closeDialog)
-								}
-							/>
-						</div>
-					</div>
-				</CardHeader>
-				<CardContent>
-					<div className="space-y-6">
-						<div className="space-y-2">
-							<LabelWrapper
-								helperText="Model used for knowledge ingest and retrieval"
-								id="embedding-model-select"
-								label="Embedding model"
-							>
-								<Select
-									// Disabled until API supports multiple embedding models
-									disabled={true}
-									value={
-										settings.knowledge?.embedding_model ||
-										modelsData?.embedding_models?.find((m) => m.default)
-											?.value ||
-										"text-embedding-ada-002"
-									}
-									onValueChange={handleEmbeddingModelChange}
-								>
-									{/* <Tooltip>
+  const { isAuthenticated, isNoAuthMode } = useAuth();
+  const { addTask, tasks } = useTask();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  // Connectors state
+  const [connectors, setConnectors] = useState<Connector[]>([]);
+  const [isConnecting, setIsConnecting] = useState<string | null>(null);
+  const [isSyncing, setIsSyncing] = useState<string | null>(null);
+  const [syncResults, setSyncResults] = useState<{
+    [key: string]: SyncResult | null;
+  }>({});
+  const [maxFiles, setMaxFiles] = useState<number>(10);
+  const [syncAllFiles, setSyncAllFiles] = useState<boolean>(false);
+
+  // Only keep systemPrompt state since it needs manual save button
+  const [systemPrompt, setSystemPrompt] = useState<string>("");
+  const [chunkSize, setChunkSize] = useState<number>(1024);
+  const [chunkOverlap, setChunkOverlap] = useState<number>(50);
+  const [tableStructure, setTableStructure] = useState<boolean>(false);
+  const [ocr, setOcr] = useState<boolean>(false);
+  const [pictureDescriptions, setPictureDescriptions] =
+    useState<boolean>(false);
+
+  // Fetch settings using React Query
+  const { data: settings = {} } = useGetSettingsQuery({
+    enabled: isAuthenticated || isNoAuthMode,
+  });
+
+  // Get the current provider from settings
+  const currentProvider = (settings.provider?.model_provider ||
+    "openai") as ModelProvider;
+
+  // Fetch available models based on provider
+  const { data: openaiModelsData } = useGetOpenAIModelsQuery(
+    undefined, // Let backend use stored API key from configuration
+    {
+      enabled:
+        (isAuthenticated || isNoAuthMode) && currentProvider === "openai",
+    }
+  );
+
+  const { data: ollamaModelsData } = useGetOllamaModelsQuery(
+    undefined, // No params for now, could be extended later
+    {
+      enabled:
+        (isAuthenticated || isNoAuthMode) && currentProvider === "ollama",
+    }
+  );
+
+  const { data: ibmModelsData } = useGetIBMModelsQuery(
+    undefined, // No params for now, could be extended later
+    {
+      enabled:
+        (isAuthenticated || isNoAuthMode) && currentProvider === "watsonx",
+    }
+  );
+
+  // Select the appropriate models data based on provider
+  const modelsData =
+    currentProvider === "openai"
+      ? openaiModelsData
+      : currentProvider === "ollama"
+      ? ollamaModelsData
+      : currentProvider === "watsonx"
+      ? ibmModelsData
+      : openaiModelsData; // fallback to openai
+
+  // Mutations
+  const updateFlowSettingMutation = useUpdateFlowSettingMutation({
+    onSuccess: () => {
+      console.log("Setting updated successfully");
+    },
+    onError: error => {
+      console.error("Failed to update setting:", error.message);
+    },
+  });
+
+  // Debounced update function
+  const debouncedUpdate = useDebounce(
+    (variables: Parameters<typeof updateFlowSettingMutation.mutate>[0]) => {
+      updateFlowSettingMutation.mutate(variables);
+    },
+    500
+  );
+
+  // Sync system prompt state with settings data
+  useEffect(() => {
+    if (settings.agent?.system_prompt) {
+      setSystemPrompt(settings.agent.system_prompt);
+    }
+  }, [settings.agent?.system_prompt]);
+
+  // Sync chunk size and overlap state with settings data
+  useEffect(() => {
+    if (settings.knowledge?.chunk_size) {
+      setChunkSize(settings.knowledge.chunk_size);
+    }
+  }, [settings.knowledge?.chunk_size]);
+
+  useEffect(() => {
+    if (settings.knowledge?.chunk_overlap) {
+      setChunkOverlap(settings.knowledge.chunk_overlap);
+    }
+  }, [settings.knowledge?.chunk_overlap]);
+
+  // Sync docling settings with settings data
+  useEffect(() => {
+    if (settings.knowledge?.table_structure !== undefined) {
+      setTableStructure(settings.knowledge.table_structure);
+    }
+  }, [settings.knowledge?.table_structure]);
+
+  useEffect(() => {
+    if (settings.knowledge?.ocr !== undefined) {
+      setOcr(settings.knowledge.ocr);
+    }
+  }, [settings.knowledge?.ocr]);
+
+  useEffect(() => {
+    if (settings.knowledge?.picture_descriptions !== undefined) {
+      setPictureDescriptions(settings.knowledge.picture_descriptions);
+    }
+  }, [settings.knowledge?.picture_descriptions]);
+
+  // Update model selection immediately
+  const handleModelChange = (newModel: string) => {
+    updateFlowSettingMutation.mutate({ llm_model: newModel });
+  };
+
+  // Update system prompt with save button
+  const handleSystemPromptSave = () => {
+    updateFlowSettingMutation.mutate({ system_prompt: systemPrompt });
+  };
+
+  // Update embedding model selection immediately
+  const handleEmbeddingModelChange = (newModel: string) => {
+    updateFlowSettingMutation.mutate({ embedding_model: newModel });
+  };
+
+  // Update chunk size setting with debounce
+  const handleChunkSizeChange = (value: string) => {
+    const numValue = Math.max(0, parseInt(value) || 0);
+    setChunkSize(numValue);
+    debouncedUpdate({ chunk_size: numValue });
+  };
+
+  // Update chunk overlap setting with debounce
+  const handleChunkOverlapChange = (value: string) => {
+    const numValue = Math.max(0, parseInt(value) || 0);
+    setChunkOverlap(numValue);
+    debouncedUpdate({ chunk_overlap: numValue });
+  };
+
+  // Update docling settings
+  const handleTableStructureChange = (checked: boolean) => {
+    setTableStructure(checked);
+    updateFlowSettingMutation.mutate({ table_structure: checked });
+  };
+
+  const handleOcrChange = (checked: boolean) => {
+    setOcr(checked);
+    updateFlowSettingMutation.mutate({ ocr: checked });
+  };
+
+  const handlePictureDescriptionsChange = (checked: boolean) => {
+    setPictureDescriptions(checked);
+    updateFlowSettingMutation.mutate({ picture_descriptions: checked });
+  };
+
+  // Helper function to get connector icon
+  const getConnectorIcon = useCallback((iconName: string) => {
+    const iconMap: { [key: string]: React.ReactElement } = {
+      "google-drive": <GoogleDriveIcon />,
+      sharepoint: (
+        <div className="w-8 h-8 bg-blue-700 rounded flex items-center justify-center text-white font-bold leading-none shrink-0">
+          SP
+        </div>
+      ),
+      onedrive: (
+        <div className="w-8 h-8 bg-white border border-gray-300 rounded flex items-center justify-center">
+          <OneDriveIcon />
+        </div>
+      ),
+    };
+    return (
+      iconMap[iconName] || (
+        <div className="w-8 h-8 bg-gray-500 rounded flex items-center justify-center text-white font-bold leading-none shrink-0">
+          ?
+        </div>
+      )
+    );
+  }, []);
+
+  // Connector functions
+  const checkConnectorStatuses = useCallback(async () => {
+    try {
+      // Fetch available connectors from backend
+      const connectorsResponse = await fetch("/api/connectors");
+      if (!connectorsResponse.ok) {
+        throw new Error("Failed to load connectors");
+      }
+
+      const connectorsResult = await connectorsResponse.json();
+      const connectorTypes = Object.keys(connectorsResult.connectors);
+
+      // Initialize connectors list with metadata from backend
+      const initialConnectors = connectorTypes
+        .filter(type => connectorsResult.connectors[type].available) // Only show available connectors
+        .map(type => ({
+          id: type,
+          name: connectorsResult.connectors[type].name,
+          description: connectorsResult.connectors[type].description,
+          icon: getConnectorIcon(connectorsResult.connectors[type].icon),
+          status: "not_connected" as const,
+          type: type,
+        }));
+
+      setConnectors(initialConnectors);
+
+      // Check status for each connector type
+
+      for (const connectorType of connectorTypes) {
+        const response = await fetch(`/api/connectors/${connectorType}/status`);
+        if (response.ok) {
+          const data = await response.json();
+          const connections = data.connections || [];
+          const activeConnection = connections.find(
+            (conn: Connection) => conn.is_active
+          );
+          const isConnected = activeConnection !== undefined;
+
+          setConnectors(prev =>
+            prev.map(c =>
+              c.type === connectorType
+                ? {
+                    ...c,
+                    status: isConnected ? "connected" : "not_connected",
+                    connectionId: activeConnection?.connection_id,
+                  }
+                : c
+            )
+          );
+        }
+      }
+    } catch (error) {
+      console.error("Failed to check connector statuses:", error);
+    }
+  }, [getConnectorIcon]);
+
+  const handleConnect = async (connector: Connector) => {
+    setIsConnecting(connector.id);
+    setSyncResults(prev => ({ ...prev, [connector.id]: null }));
+
+    try {
+      // Use the shared auth callback URL, same as connectors page
+      const redirectUri = `${window.location.origin}/auth/callback`;
+
+      const response = await fetch("/api/auth/init", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          connector_type: connector.type,
+          purpose: "data_source",
+          name: `${connector.name} Connection`,
+          redirect_uri: redirectUri,
+        }),
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+
+        if (result.oauth_config) {
+          localStorage.setItem("connecting_connector_id", result.connection_id);
+          localStorage.setItem("connecting_connector_type", connector.type);
+
+          const authUrl =
+            `${result.oauth_config.authorization_endpoint}?` +
+            `client_id=${result.oauth_config.client_id}&` +
+            `response_type=code&` +
+            `scope=${result.oauth_config.scopes.join(" ")}&` +
+            `redirect_uri=${encodeURIComponent(
+              result.oauth_config.redirect_uri
+            )}&` +
+            `access_type=offline&` +
+            `prompt=consent&` +
+            `state=${result.connection_id}`;
+
+          window.location.href = authUrl;
+        }
+      } else {
+        console.error("Failed to initiate connection");
+        setIsConnecting(null);
+      }
+    } catch (error) {
+      console.error("Connection error:", error);
+      setIsConnecting(null);
+    }
+  };
+
+  // const handleSync = async (connector: Connector) => {
+  //   if (!connector.connectionId) return;
+
+  //   setIsSyncing(connector.id);
+  //   setSyncResults(prev => ({ ...prev, [connector.id]: null }));
+
+  //   try {
+  //     const syncBody: {
+  //       connection_id: string;
+  //       max_files?: number;
+  //       selected_files?: string[];
+  //     } = {
+  //       connection_id: connector.connectionId,
+  //       max_files: syncAllFiles ? 0 : maxFiles || undefined,
+  //     };
+
+  //     // Note: File selection is now handled via the cloud connectors dialog
+
+  //     const response = await fetch(`/api/connectors/${connector.type}/sync`, {
+  //       method: "POST",
+  //       headers: {
+  //         "Content-Type": "application/json",
+  //       },
+  //       body: JSON.stringify(syncBody),
+  //     });
+
+  //     const result = await response.json();
+
+  //     if (response.status === 201) {
+  //       const taskId = result.task_id;
+  //       if (taskId) {
+  //         addTask(taskId);
+  //         setSyncResults(prev => ({
+  //           ...prev,
+  //           [connector.id]: {
+  //             processed: 0,
+  //             total: result.total_files || 0,
+  //           },
+  //         }));
+  //       }
+  //     } else if (response.ok) {
+  //       setSyncResults(prev => ({ ...prev, [connector.id]: result }));
+  //       // Note: Stats will auto-refresh via task completion watcher for async syncs
+  //     } else {
+  //       console.error("Sync failed:", result.error);
+  //     }
+  //   } catch (error) {
+  //     console.error("Sync error:", error);
+  //   } finally {
+  //     setIsSyncing(null);
+  //   }
+  // };
+
+  const getStatusBadge = (status: Connector["status"]) => {
+    switch (status) {
+      case "connected":
+        return <div className="h-2 w-2 bg-green-500 rounded-full" />;
+      case "connecting":
+        return <div className="h-2 w-2 bg-yellow-500 rounded-full" />;
+      case "error":
+        return <div className="h-2 w-2 bg-red-500 rounded-full" />;
+      default:
+        return <div className="h-2 w-2 bg-muted rounded-full" />;
+    }
+  };
+
+  const navigateToKnowledgePage = (connector: Connector) => {
+    const provider = connector.type.replace(/-/g, "_");
+    router.push(`/upload/${provider}`);
+  };
+
+  // Check connector status on mount and when returning from OAuth
+  useEffect(() => {
+    if (isAuthenticated) {
+      checkConnectorStatuses();
+    }
+
+    if (searchParams.get("oauth_success") === "true") {
+      const url = new URL(window.location.href);
+      url.searchParams.delete("oauth_success");
+      window.history.replaceState({}, "", url.toString());
+    }
+  }, [searchParams, isAuthenticated, checkConnectorStatuses]);
+
+  // Track previous tasks to detect new completions
+  const [prevTasks, setPrevTasks] = useState<typeof tasks>([]);
+
+  // Watch for task completions and refresh stats
+  useEffect(() => {
+    // Find newly completed tasks by comparing with previous state
+    const newlyCompletedTasks = tasks.filter(task => {
+      const wasCompleted =
+        prevTasks.find(prev => prev.task_id === task.task_id)?.status ===
+        "completed";
+      return task.status === "completed" && !wasCompleted;
+    });
+
+    if (newlyCompletedTasks.length > 0) {
+      // Task completed - could refresh data here if needed
+      const timeoutId = setTimeout(() => {
+        // Stats refresh removed
+      }, 1000);
+
+      // Update previous tasks state
+      setPrevTasks(tasks);
+
+      return () => clearTimeout(timeoutId);
+    } else {
+      // Always update previous tasks state
+      setPrevTasks(tasks);
+    }
+  }, [tasks, prevTasks]);
+
+  const handleEditInLangflow = (
+    flowType: "chat" | "ingest",
+    closeDialog: () => void
+  ) => {
+    // Select the appropriate flow ID and edit URL based on flow type
+    const targetFlowId =
+      flowType === "ingest" ? settings.ingest_flow_id : settings.flow_id;
+    const editUrl =
+      flowType === "ingest"
+        ? settings.langflow_ingest_edit_url
+        : settings.langflow_edit_url;
+
+    const derivedFromWindow =
+      typeof window !== "undefined"
+        ? `${window.location.protocol}//${window.location.hostname}:7860`
+        : "";
+    const base = (
+      settings.langflow_public_url ||
+      derivedFromWindow ||
+      "http://localhost:7860"
+    ).replace(/\/$/, "");
+    const computed = targetFlowId ? `${base}/flow/${targetFlowId}` : base;
+
+    const url = editUrl || computed;
+
+    window.open(url, "_blank");
+    closeDialog(); // Close immediately after opening Langflow
+  };
+
+  const handleRestoreRetrievalFlow = (closeDialog: () => void) => {
+    fetch(`/api/reset-flow/retrieval`, {
+      method: "POST",
+    })
+      .then(response => {
+        if (response.ok) {
+          return response.json();
+        }
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      })
+      .then(() => {
+        // Only reset form values if the API call was successful
+        setSystemPrompt(DEFAULT_AGENT_SETTINGS.system_prompt);
+        // Trigger model update to default model
+        handleModelChange(DEFAULT_AGENT_SETTINGS.llm_model);
+        closeDialog(); // Close after successful completion
+      })
+      .catch(error => {
+        console.error("Error restoring retrieval flow:", error);
+        closeDialog(); // Close even on error (could show error toast instead)
+      });
+  };
+
+  const handleRestoreIngestFlow = (closeDialog: () => void) => {
+    fetch(`/api/reset-flow/ingest`, {
+      method: "POST",
+    })
+      .then(response => {
+        if (response.ok) {
+          return response.json();
+        }
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      })
+      .then(() => {
+        // Only reset form values if the API call was successful
+        setChunkSize(DEFAULT_KNOWLEDGE_SETTINGS.chunk_size);
+        setChunkOverlap(DEFAULT_KNOWLEDGE_SETTINGS.chunk_overlap);
+        setTableStructure(false);
+        setOcr(false);
+        setPictureDescriptions(false);
+        closeDialog(); // Close after successful completion
+      })
+      .catch(error => {
+        console.error("Error restoring ingest flow:", error);
+        closeDialog(); // Close even on error (could show error toast instead)
+      });
+  };
+
+  return (
+    <div className="space-y-8 container mx-auto">
+      {/* Connectors Section */}
+      <div className="space-y-6">
+        <div className="flex items-center justify-between mb-6 h-10">
+          <h2 className="text-lg font-semibold">Cloud Connectors</h2>
+        </div>
+
+        {/* Conditional Sync Settings or No-Auth Message */}
+        {
+          isNoAuthMode ? (
+            <Card className="border-yellow-500/50 bg-yellow-500/5">
+              <CardHeader>
+                <CardTitle className="text-lg text-yellow-600">
+                  Cloud connectors are only available with auth mode enabled
+                </CardTitle>
+                <CardDescription className="text-sm">
+                  Please provide the following environment variables and
+                  restart:
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="bg-muted rounded-md p-4 font-mono text-sm">
+                  <div className="text-muted-foreground mb-2">
+                    # make here
+                    https://console.cloud.google.com/apis/credentials
+                  </div>
+                  <div>GOOGLE_OAUTH_CLIENT_ID=</div>
+                  <div>GOOGLE_OAUTH_CLIENT_SECRET=</div>
+                </div>
+              </CardContent>
+            </Card>
+          ) : null
+          // <div className="flex items-center justify-between py-4">
+          //   <div>
+          //     <h3 className="text-lg font-medium">Sync Settings</h3>
+          //     <p className="text-sm text-muted-foreground">
+          //       Configure how many files to sync when manually triggering a sync
+          //     </p>
+          //   </div>
+          //   <div className="flex items-center gap-4">
+          //     <div className="flex items-center space-x-2">
+          //       <Checkbox
+          //         id="syncAllFiles"
+          //         checked={syncAllFiles}
+          //         onCheckedChange={checked => {
+          //           setSyncAllFiles(!!checked);
+          //           if (checked) {
+          //             setMaxFiles(0);
+          //           } else {
+          //             setMaxFiles(10);
+          //           }
+          //         }}
+          //       />
+          //       <Label
+          //         htmlFor="syncAllFiles"
+          //         className="font-medium whitespace-nowrap"
+          //       >
+          //         Sync all files
+          //       </Label>
+          //     </div>
+          //     <Label
+          //       htmlFor="maxFiles"
+          //       className="font-medium whitespace-nowrap"
+          //     >
+          //       Max files per sync:
+          //     </Label>
+          //     <div className="relative">
+          //       <Input
+          //         id="maxFiles"
+          //         type="number"
+          //         value={syncAllFiles ? 0 : maxFiles}
+          //         onChange={e => setMaxFiles(parseInt(e.target.value) || 10)}
+          //         disabled={syncAllFiles}
+          //         className="w-16 min-w-16 max-w-16 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
+          //         min="1"
+          //         max="100"
+          //         title={
+          //           syncAllFiles
+          //             ? "Disabled when 'Sync all files' is checked"
+          //             : "Leave blank or set to 0 for unlimited"
+          //         }
+          //       />
+          //     </div>
+          //   </div>
+          // </div>
+        }
+
+        {/* Connectors Grid */}
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {DEFAULT_CONNECTORS.map(connector => {
+            const actualConnector = connectors.find(c => c.id === connector.id);
+            return (
+              <Card key={connector.id} className="relative flex flex-col">
+                <CardHeader>
+                  <div className="flex flex-col items-start justify-between">
+                    <div className="flex flex-col gap-3">
+                      <div className="mb-1">
+                        <div
+                          className={`w-8 h-8 ${
+                            actualConnector ? "bg-white" : "bg-muted grayscale"
+                          } rounded flex items-center justify-center`}
+                        >
+                          {connector.icon}
+                        </div>
+                      </div>
+                      <CardTitle className="flex flex-row items-center gap-2">
+                        {connector.name}
+                        {actualConnector &&
+                          getStatusBadge(actualConnector.status)}
+                      </CardTitle>
+                      <CardDescription className="text-[13px]">
+                        {actualConnector?.description
+                          ? `${actualConnector.name} is configured.`
+                          : connector.description}
+                      </CardDescription>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent className="flex-1 flex flex-col justify-end space-y-4">
+                  {actualConnector?.status === "connected" ? (
+                    <div className="space-y-3">
+                      <Button
+                        onClick={() => navigateToKnowledgePage(connector)}
+                        disabled={isSyncing === connector.id}
+                        className="w-full cursor-pointer"
+                        size="sm"
+                      >
+                        <Plus className="h-4 w-4" />
+                        Add Knowledge
+                      </Button>
+
+                      {syncResults[connector.id] && (
+                        <div className="text-xs text-muted-foreground bg-muted/50 p-2 rounded">
+                          <div>
+                            Processed:{" "}
+                            {syncResults[connector.id]?.processed || 0}
+                          </div>
+                          <div>
+                            Added: {syncResults[connector.id]?.added || 0}
+                          </div>
+                          {syncResults[connector.id]?.errors && (
+                            <div>
+                              Errors: {syncResults[connector.id]?.errors}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <div className="text-[13px] text-muted-foreground">
+                      <p>
+                        See our{" "}
+                        <Link
+                          className="text-accent-pink-foreground"
+                          href="https://github.com/langflow-ai/openrag/pull/96/files#diff-06889aa94ccf8dac64e70c8cc30a2ceed32cc3c0c2c14a6ff0336fe882a9c2ccR41"
+                        >
+                          Cloud Connectors installation guide
+                        </Link>{" "}
+                        for more detail.
+                      </p>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+      {/* Agent Behavior Section */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-lg mb-4">Agent</CardTitle>
+              <CardDescription>
+                Quick Agent settings. Edit in Langflow for full control.
+              </CardDescription>
+            </div>
+            <div className="flex gap-2">
+              <ConfirmationDialog
+                trigger={
+                  <Button ignoreTitleCase={true} variant="outline">
+                    Restore flow
+                  </Button>
+                }
+                title="Restore default Retrieval flow"
+                description="This restores defaults and discards all custom settings and overrides. This can’t be undone."
+                confirmText="Restore"
+                variant="destructive"
+                onConfirm={handleRestoreRetrievalFlow}
+              />
+              <ConfirmationDialog
+                trigger={
+                  <Button>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="22"
+                      viewBox="0 0 24 22"
+                      className="h-4 w-4 mr-2"
+                      aria-label="Langflow icon"
+                    >
+                      <title>Langflow icon</title>
+                      <path
+                        fill="currentColor"
+                        d="M13.0486 0.462158H9.75399C9.44371 0.462158 9.14614 0.586082 8.92674 0.806667L4.03751 5.72232C3.81811 5.9429 3.52054 6.06682 3.21026 6.06682H1.16992C0.511975 6.06682 -0.0165756 6.61212 0.000397655 7.2734L0.0515933 9.26798C0.0679586 9.90556 0.586745 10.4139 1.22111 10.4139H3.59097C3.90124 10.4139 4.19881 10.2899 4.41821 10.0694L9.34823 5.11269C9.56763 4.89211 9.8652 4.76818 10.1755 4.76818H13.0486C13.6947 4.76818 14.2185 4.24157 14.2185 3.59195V1.63839C14.2185 0.988773 13.6947 0.462158 13.0486 0.462158Z"
+                      ></path>
+                      <path
+                        fill="currentColor"
+                        d="M19.5355 11.5862H22.8301C23.4762 11.5862 24 12.1128 24 12.7624V14.716C24 15.3656 23.4762 15.8922 22.8301 15.8922H19.957C19.6467 15.8922 19.3491 16.0161 19.1297 16.2367L14.1997 21.1934C13.9803 21.414 13.6827 21.5379 13.3725 21.5379H11.0026C10.3682 21.5379 9.84945 21.0296 9.83309 20.392L9.78189 18.3974C9.76492 17.7361 10.2935 17.1908 10.9514 17.1908H12.9918C13.302 17.1908 13.5996 17.0669 13.819 16.8463L18.7082 11.9307C18.9276 11.7101 19.2252 11.5862 19.5355 11.5862Z"
+                      ></path>
+                      <path
+                        fill="currentColor"
+                        d="M19.5355 2.9796L22.8301 2.9796C23.4762 2.9796 24 3.50622 24 4.15583V6.1094C24 6.75901 23.4762 7.28563 22.8301 7.28563H19.957C19.6467 7.28563 19.3491 7.40955 19.1297 7.63014L14.1997 12.5868C13.9803 12.8074 13.6827 12.9313 13.3725 12.9313H10.493C10.1913 12.9313 9.90126 13.0485 9.68346 13.2583L4.14867 18.5917C3.93087 18.8016 3.64085 18.9187 3.33917 18.9187H1.32174C0.675616 18.9187 0.151832 18.3921 0.151832 17.7425V15.7343C0.151832 15.0846 0.675616 14.558 1.32174 14.558H3.32468C3.63496 14.558 3.93253 14.4341 4.15193 14.2135L9.40827 8.92878C9.62767 8.70819 9.92524 8.58427 10.2355 8.58427H12.9918C13.302 8.58427 13.5996 8.46034 13.819 8.23976L18.7082 3.32411C18.9276 3.10353 19.2252 2.9796 19.5355 2.9796Z"
+                      ></path>
+                    </svg>
+                    Edit in Langflow
+                  </Button>
+                }
+                title="Edit Retrieval flow in Langflow"
+                description={
+                  <>
+                    <p className="mb-2">
+                      You're entering Langflow. You can edit the{" "}
+                      <b>Retrieval flow</b> and other underlying flows. Manual
+                      changes to components, wiring, or I/O can break this
+                      experience.
+                    </p>
+                    <p>You can restore this flow from Settings.</p>
+                  </>
+                }
+                confirmText="Proceed"
+                confirmIcon={<ArrowUpRight />}
+                onConfirm={closeDialog =>
+                  handleEditInLangflow("chat", closeDialog)
+                }
+                variant="warning"
+              />
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <LabelWrapper
+                label="Language model"
+                helperText="Model used for chat"
+                id="embedding-model"
+                required={true}
+              >
+                <ModelSelector
+                  options={modelsData?.language_models || []}
+                  noOptionsPlaceholder={
+                    modelsData
+                      ? "No language models detected."
+                      : "Loading models..."
+                  }
+                  icon={<OpenAILogo className="w-4 h-4" />}
+                  value={modelsData ? settings.agent?.llm_model || "" : ""}
+                  onValueChange={handleModelChange}
+                />
+              </LabelWrapper>
+            </div>
+            <div className="space-y-2">
+              <LabelWrapper label="Agent Instructions" id="system-prompt">
+                <Textarea
+                  id="system-prompt"
+                  placeholder="Enter your agent instructions here..."
+                  value={systemPrompt}
+                  onChange={e => setSystemPrompt(e.target.value)}
+                  rows={6}
+                  className={`resize-none ${
+                    systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
+                      ? "border-red-500 focus:border-red-500"
+                      : ""
+                  }`}
+                />
+                <div className="flex justify-start">
+                  <span
+                    className={`text-xs ${
+                      systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
+                        ? "text-red-500"
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    {systemPrompt.length}/{MAX_SYSTEM_PROMPT_CHARS} characters
+                  </span>
+                </div>
+              </LabelWrapper>
+            </div>
+            <div className="flex justify-end pt-2">
+              <Button
+                onClick={handleSystemPromptSave}
+                disabled={
+                  updateFlowSettingMutation.isPending ||
+                  systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
+                }
+                className="min-w-[120px]"
+                size="sm"
+                variant="outline"
+              >
+                {updateFlowSettingMutation.isPending ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  "Save Agent Instructions"
+                )}
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Knowledge Ingest Section */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-lg mb-4">
+                Knowledge ingestion and retrieval
+              </CardTitle>
+              <CardDescription>
+                Quick knowledge settings. Edit in Langflow for full control.
+              </CardDescription>
+            </div>
+            <div className="flex gap-2">
+              <ConfirmationDialog
+                trigger={
+                  <Button ignoreTitleCase={true} variant="outline">
+                    Restore flow
+                  </Button>
+                }
+                title="Restore default Ingest flow"
+                description="This restores defaults and discards all custom settings and overrides. This can't be undone."
+                confirmText="Restore"
+                variant="destructive"
+                onConfirm={handleRestoreIngestFlow}
+              />
+              <ConfirmationDialog
+                trigger={
+                  <Button>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="22"
+                      viewBox="0 0 24 22"
+                      className="h-4 w-4 mr-2"
+                      aria-label="Langflow icon"
+                    >
+                      <title>Langflow icon</title>
+                      <path
+                        fill="currentColor"
+                        d="M13.0486 0.462158H9.75399C9.44371 0.462158 9.14614 0.586082 8.92674 0.806667L4.03751 5.72232C3.81811 5.9429 3.52054 6.06682 3.21026 6.06682H1.16992C0.511975 6.06682 -0.0165756 6.61212 0.000397655 7.2734L0.0515933 9.26798C0.0679586 9.90556 0.586745 10.4139 1.22111 10.4139H3.59097C3.90124 10.4139 4.19881 10.2899 4.41821 10.0694L9.34823 5.11269C9.56763 4.89211 9.8652 4.76818 10.1755 4.76818H13.0486C13.6947 4.76818 14.2185 4.24157 14.2185 3.59195V1.63839C14.2185 0.988773 13.6947 0.462158 13.0486 0.462158Z"
+                      ></path>
+                      <path
+                        fill="currentColor"
+                        d="M19.5355 11.5862H22.8301C23.4762 11.5862 24 12.1128 24 12.7624V14.716C24 15.3656 23.4762 15.8922 22.8301 15.8922H19.957C19.6467 15.8922 19.3491 16.0161 19.1297 16.2367L14.1997 21.1934C13.9803 21.414 13.6827 21.5379 13.3725 21.5379H11.0026C10.3682 21.5379 9.84945 21.0296 9.83309 20.392L9.78189 18.3974C9.76492 17.7361 10.2935 17.1908 10.9514 17.1908H12.9918C13.302 17.1908 13.5996 17.0669 13.819 16.8463L18.7082 11.9307C18.9276 11.7101 19.2252 11.5862 19.5355 11.5862Z"
+                      ></path>
+                      <path
+                        fill="currentColor"
+                        d="M19.5355 2.9796L22.8301 2.9796C23.4762 2.9796 24 3.50622 24 4.15583V6.1094C24 6.75901 23.4762 7.28563 22.8301 7.28563H19.957C19.6467 7.28563 19.3491 7.40955 19.1297 7.63014L14.1997 12.5868C13.9803 12.8074 13.6827 12.9313 13.3725 12.9313H10.493C10.1913 12.9313 9.90126 13.0485 9.68346 13.2583L4.14867 18.5917C3.93087 18.8016 3.64085 18.9187 3.33917 18.9187H1.32174C0.675616 18.9187 0.151832 18.3921 0.151832 17.7425V15.7343C0.151832 15.0846 0.675616 14.558 1.32174 14.558H3.32468C3.63496 14.558 3.93253 14.4341 4.15193 14.2135L9.40827 8.92878C9.62767 8.70819 9.92524 8.58427 10.2355 8.58427H12.9918C13.302 8.58427 13.5996 8.46034 13.819 8.23976L18.7082 3.32411C18.9276 3.10353 19.2252 2.9796 19.5355 2.9796Z"
+                      ></path>
+                    </svg>
+                    Edit in Langflow
+                  </Button>
+                }
+                title="Edit Ingest flow in Langflow"
+                description={
+                  <>
+                    <p className="mb-2">
+                      You're entering Langflow. You can edit the{" "}
+                      <b>Ingest flow</b> and other underlying flows. Manual
+                      changes to components, wiring, or I/O can break this
+                      experience.
+                    </p>
+                    <p>You can restore this flow from Settings.</p>
+                  </>
+                }
+                confirmText="Proceed"
+                confirmIcon={<ArrowUpRight />}
+                variant="warning"
+                onConfirm={closeDialog =>
+                  handleEditInLangflow("ingest", closeDialog)
+                }
+              />
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <LabelWrapper
+                helperText="Model used for knowledge ingest and retrieval"
+                id="embedding-model-select"
+                label="Embedding model"
+              >
+                <Select
+                  // Disabled until API supports multiple embedding models
+                  disabled={true}
+                  value={
+                    settings.knowledge?.embedding_model ||
+                    modelsData?.embedding_models?.find(m => m.default)?.value ||
+                    "text-embedding-ada-002"
+                  }
+                  onValueChange={handleEmbeddingModelChange}
+                >
+                  {/* <Tooltip>
                     <TooltipTrigger> */}
-									<SelectTrigger disabled id="embedding-model-select">
-										<SelectValue placeholder="Select an embedding model" />
-									</SelectTrigger>
-									{/* <TooltipContent>
+                  <SelectTrigger disabled id="embedding-model-select">
+                    <SelectValue placeholder="Select an embedding model" />
+                  </SelectTrigger>
+                  {/* <TooltipContent>
                         Locked to keep embeddings consistent
                       </TooltipContent>
                     </TooltipTrigger>
                   </Tooltip> */}
-									<SelectContent>
-										<ModelSelectItems
-											models={modelsData?.embedding_models}
-											fallbackModels={
-												getFallbackModels(currentProvider).embedding
-											}
-											provider={currentProvider}
-										/>
-									</SelectContent>
-								</Select>
-							</LabelWrapper>
-						</div>
-						<div className="grid grid-cols-2 gap-4">
-							<div className="space-y-2">
-								<LabelWrapper id="chunk-size" label="Chunk size">
-									<div className="relative">
-										<Input
-											id="chunk-size"
-											type="number"
-											min="1"
-											value={chunkSize}
-											onChange={(e) => handleChunkSizeChange(e.target.value)}
-											className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-										/>
-										<div className="absolute inset-y-0 right-0 flex items-center">
-											<span className="text-sm text-placeholder-foreground mr-4 pointer-events-none">
-												characters
-											</span>
-											<div className="flex flex-col">
-												<Button
-													aria-label="Increase value"
-													className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative"
-													variant="outline"
-													size="iconSm"
-													onClick={() =>
-														handleChunkSizeChange((chunkSize + 1).toString())
-													}
-												>
-													<Plus className="text-muted-foreground" size={8} />
-												</Button>
-												<Button
-													aria-label="Decrease value"
-													className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative"
-													variant="outline"
-													size="iconSm"
-													onClick={() =>
-														handleChunkSizeChange((chunkSize - 1).toString())
-													}
-												>
-													<Minus className="text-muted-foreground" size={8} />
-												</Button>
-											</div>
-										</div>
-									</div>
-								</LabelWrapper>
-							</div>
-							<div className="space-y-2">
-								<LabelWrapper id="chunk-overlap" label="Chunk overlap">
-									<div className="relative">
-										<Input
-											id="chunk-overlap"
-											type="number"
-											min="0"
-											value={chunkOverlap}
-											onChange={(e) => handleChunkOverlapChange(e.target.value)}
-											className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-										/>
-										<div className="absolute inset-y-0 right-0 flex items-center">
-											<span className="text-sm text-placeholder-foreground mr-4 pointer-events-none">
-												characters
-											</span>
-											<div className="flex flex-col">
-												<Button
-													aria-label="Increase value"
-													className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative"
-													variant="outline"
-													size="iconSm"
-													onClick={() =>
-														handleChunkOverlapChange(
-															(chunkOverlap + 1).toString(),
-														)
-													}
-												>
-													<Plus className="text-muted-foreground" size={8} />
-												</Button>
-												<Button
-													aria-label="Decrease value"
-													className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative"
-													variant="outline"
-													size="iconSm"
-													onClick={() =>
-														handleChunkOverlapChange(
-															(chunkOverlap - 1).toString(),
-														)
-													}
-												>
-													<Minus className="text-muted-foreground" size={8} />
-												</Button>
-											</div>
-										</div>
-									</div>
-								</LabelWrapper>
-							</div>
-						</div>
-						<div className="">
-							<div className="flex items-center justify-between py-3 border-b border-border">
-								<div className="flex-1">
-									<Label
-										htmlFor="table-structure"
-										className="text-base font-medium cursor-pointer pb-3"
-									>
-										Table Structure
-									</Label>
-									<div className="text-sm text-muted-foreground">
-										Capture table structure during ingest.
-									</div>
-								</div>
-								<Switch
-									id="table-structure"
-									checked={tableStructure}
-									onCheckedChange={handleTableStructureChange}
-								/>
-							</div>
-							<div className="flex items-center justify-between py-3 border-b border-border">
-								<div className="flex-1">
-									<Label
-										htmlFor="ocr"
-										className="text-base font-medium cursor-pointer pb-3"
-									>
-										OCR
-									</Label>
-									<div className="text-sm text-muted-foreground">
-										Extracts text from images/PDFs. Ingest is slower when
-										enabled.
-									</div>
-								</div>
-								<Switch
-									id="ocr"
-									checked={ocr}
-									onCheckedChange={handleOcrChange}
-								/>
-							</div>
-							<div className="flex items-center justify-between py-3">
-								<div className="flex-1">
-									<Label
-										htmlFor="picture-descriptions"
-										className="text-base font-medium cursor-pointer pb-3"
-									>
-										Picture Descriptions
-									</Label>
-									<div className="text-sm text-muted-foreground">
-										Adds captions for images. Ingest is slower when enabled.
-									</div>
-								</div>
-								<Switch
-									id="picture-descriptions"
-									checked={pictureDescriptions}
-									onCheckedChange={handlePictureDescriptionsChange}
-								/>
-							</div>
-						</div>
-					</div>
-				</CardContent>
-			</Card>
-		</div>
-	);
+                  <SelectContent>
+                    <ModelSelectItems
+                      models={modelsData?.embedding_models}
+                      fallbackModels={
+                        getFallbackModels(currentProvider).embedding
+                      }
+                      provider={currentProvider}
+                    />
+                  </SelectContent>
+                </Select>
+              </LabelWrapper>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <LabelWrapper id="chunk-size" label="Chunk size">
+                  <div className="relative">
+                    <Input
+                      id="chunk-size"
+                      type="number"
+                      min="1"
+                      value={chunkSize}
+                      onChange={e => handleChunkSizeChange(e.target.value)}
+                      className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                    <div className="absolute inset-y-0 right-0 flex items-center">
+                      <span className="text-sm text-placeholder-foreground mr-4 pointer-events-none">
+                        characters
+                      </span>
+                      <div className="flex flex-col">
+                        <Button
+                          aria-label="Increase value"
+                          className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative"
+                          variant="outline"
+                          size="iconSm"
+                          onClick={() =>
+                            handleChunkSizeChange((chunkSize + 1).toString())
+                          }
+                        >
+                          <Plus className="text-muted-foreground" size={8} />
+                        </Button>
+                        <Button
+                          aria-label="Decrease value"
+                          className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative"
+                          variant="outline"
+                          size="iconSm"
+                          onClick={() =>
+                            handleChunkSizeChange((chunkSize - 1).toString())
+                          }
+                        >
+                          <Minus className="text-muted-foreground" size={8} />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </LabelWrapper>
+              </div>
+              <div className="space-y-2">
+                <LabelWrapper id="chunk-overlap" label="Chunk overlap">
+                  <div className="relative">
+                    <Input
+                      id="chunk-overlap"
+                      type="number"
+                      min="0"
+                      value={chunkOverlap}
+                      onChange={e => handleChunkOverlapChange(e.target.value)}
+                      className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                    <div className="absolute inset-y-0 right-0 flex items-center">
+                      <span className="text-sm text-placeholder-foreground mr-4 pointer-events-none">
+                        characters
+                      </span>
+                      <div className="flex flex-col">
+                        <Button
+                          aria-label="Increase value"
+                          className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative"
+                          variant="outline"
+                          size="iconSm"
+                          onClick={() =>
+                            handleChunkOverlapChange(
+                              (chunkOverlap + 1).toString()
+                            )
+                          }
+                        >
+                          <Plus className="text-muted-foreground" size={8} />
+                        </Button>
+                        <Button
+                          aria-label="Decrease value"
+                          className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative"
+                          variant="outline"
+                          size="iconSm"
+                          onClick={() =>
+                            handleChunkOverlapChange(
+                              (chunkOverlap - 1).toString()
+                            )
+                          }
+                        >
+                          <Minus className="text-muted-foreground" size={8} />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </LabelWrapper>
+              </div>
+            </div>
+            <div className="">
+              <div className="flex items-center justify-between py-3 border-b border-border">
+                <div className="flex-1">
+                  <Label
+                    htmlFor="table-structure"
+                    className="text-base font-medium cursor-pointer pb-3"
+                  >
+                    Table Structure
+                  </Label>
+                  <div className="text-sm text-muted-foreground">
+                    Capture table structure during ingest.
+                  </div>
+                </div>
+                <Switch
+                  id="table-structure"
+                  checked={tableStructure}
+                  onCheckedChange={handleTableStructureChange}
+                />
+              </div>
+              <div className="flex items-center justify-between py-3 border-b border-border">
+                <div className="flex-1">
+                  <Label
+                    htmlFor="ocr"
+                    className="text-base font-medium cursor-pointer pb-3"
+                  >
+                    OCR
+                  </Label>
+                  <div className="text-sm text-muted-foreground">
+                    Extracts text from images/PDFs. Ingest is slower when
+                    enabled.
+                  </div>
+                </div>
+                <Switch
+                  id="ocr"
+                  checked={ocr}
+                  onCheckedChange={handleOcrChange}
+                />
+              </div>
+              <div className="flex items-center justify-between py-3">
+                <div className="flex-1">
+                  <Label
+                    htmlFor="picture-descriptions"
+                    className="text-base font-medium cursor-pointer pb-3"
+                  >
+                    Picture Descriptions
+                  </Label>
+                  <div className="text-sm text-muted-foreground">
+                    Adds captions for images. Ingest is slower when enabled.
+                  </div>
+                </div>
+                <Switch
+                  id="picture-descriptions"
+                  checked={pictureDescriptions}
+                  onCheckedChange={handlePictureDescriptionsChange}
+                />
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
 }
 
 export default function ProtectedKnowledgeSourcesPage() {
-	return (
-		<ProtectedRoute>
-			<Suspense fallback={<div>Loading knowledge sources...</div>}>
-				<KnowledgeSourcesPage />
-			</Suspense>
-		</ProtectedRoute>
-	);
+  return (
+    <ProtectedRoute>
+      <Suspense fallback={<div>Loading knowledge sources...</div>}>
+        <KnowledgeSourcesPage />
+      </Suspense>
+    </ProtectedRoute>
+  );
 }
diff --git a/frontend/src/components/layout-wrapper.tsx b/frontend/src/components/layout-wrapper.tsx
index cb0794e0..fa1516dd 100644
--- a/frontend/src/components/layout-wrapper.tsx
+++ b/frontend/src/components/layout-wrapper.tsx
@@ -11,7 +11,6 @@ import { KnowledgeFilterPanel } from "@/components/knowledge-filter-panel";
 import Logo from "@/components/logo/logo";
 import { Navigation } from "@/components/navigation";
 import { TaskNotificationMenu } from "@/components/task-notification-menu";
-import { Button } from "@/components/ui/button";
 import { UserNav } from "@/components/user-nav";
 import { useAuth } from "@/contexts/auth-context";
 import { useChat } from "@/contexts/chat-context";
@@ -52,10 +51,6 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
   const authPaths = ["/login", "/auth/callback", "/onboarding"];
   const isAuthPage = authPaths.includes(pathname);
 
-  // List of paths with smaller max-width
-  const smallWidthPaths = ["/settings", "/settings/connector/new"];
-  const isSmallWidthPath = smallWidthPaths.includes(pathname);
-
   // Calculate active tasks for the bell icon
   const activeTasks = tasks.filter(
     task =>
@@ -145,12 +140,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
               "md:pr-0" // Neither open: 24px
         }`}
       >
-        <div
-          className={cn(
-            "py-6 lg:py-8 px-4 lg:px-6",
-            isSmallWidthPath ? "max-w-[850px]" : "container"
-          )}
-        >
+        <div className={cn("pb-6 pt-6 lg:pb-8 px-4 lg:px-6 container mx-auto")}>
           {children}
         </div>
       </main>

From 84558e0b9ac45f8bb3370ab92595bf9f378b666a Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Fri, 3 Oct 2025 10:48:21 -0600
Subject: [PATCH 2/6] same button heights

---
 frontend/components/knowledge-dropdown.tsx | 4 ++--
 frontend/src/app/settings/page.tsx         | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/components/knowledge-dropdown.tsx b/frontend/components/knowledge-dropdown.tsx
index ab097138..2d991e7b 100644
--- a/frontend/components/knowledge-dropdown.tsx
+++ b/frontend/components/knowledge-dropdown.tsx
@@ -442,7 +442,7 @@ export function KnowledgeDropdown({
           disabled={isLoading}
           className={cn(
             variant === "button"
-              ? "rounded-lg h-10 px-4 flex items-center gap-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              ? "rounded-lg h-10 px-4 flex items-center gap-2 bg-primary font-medium text-primary-foreground text-sm hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               : "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:bg-accent hover:text-accent-foreground rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed",
             variant === "navigation" && active
               ? "bg-accent text-accent-foreground shadow-sm"
@@ -458,7 +458,7 @@ export function KnowledgeDropdown({
               ) : (
                 <Plus className="h-4 w-4" />
               )}
-              <span>
+              <span className="text-sm font-medium">
                 {isLoading
                   ? fileUploading
                     ? "Uploading..."
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index 8fb91bd2..689217bd 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -742,8 +742,7 @@ function KnowledgeSourcesPage() {
                       <Button
                         onClick={() => navigateToKnowledgePage(connector)}
                         disabled={isSyncing === connector.id}
-                        className="w-full cursor-pointer"
-                        size="sm"
+                        className="w-full cursor-pointer h-10"
                       >
                         <Plus className="h-4 w-4" />
                         Add Knowledge

From 1d4a91eb7b3f17807a0a4c7207f06020861656ec Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Mon, 6 Oct 2025 10:58:24 -0600
Subject: [PATCH 3/6] added isSmallWidthPath back

---
 frontend/src/components/layout-wrapper.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/components/layout-wrapper.tsx b/frontend/src/components/layout-wrapper.tsx
index 9803fd79..e67995bd 100644
--- a/frontend/src/components/layout-wrapper.tsx
+++ b/frontend/src/components/layout-wrapper.tsx
@@ -55,6 +55,10 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
     startNewConversation();
   };
 
+  // List of paths with smaller max-width
+  const smallWidthPaths = ["/settings", "/settings/connector/new"];
+  const isSmallWidthPath = smallWidthPaths.includes(pathname);
+
   // List of paths that should not show navigation
   const authPaths = ["/login", "/auth/callback", "/onboarding"];
   const isAuthPage = authPaths.includes(pathname);

From 1dc0a370f180da51e72d5a11b8f590c63d581d75 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Mon, 6 Oct 2025 12:49:39 -0600
Subject: [PATCH 4/6] fixed spacing and flex

---
 .../components/knowledge-filter-panel.tsx     |   60 +-
 frontend/src/app/chat/page.tsx                |   15 +-
 frontend/src/app/knowledge/chunks/page.tsx    |   18 +-
 frontend/src/app/knowledge/page.tsx           |  185 ++-
 frontend/src/app/settings/page.tsx            | 1133 ++++++++---------
 frontend/src/components/layout-wrapper.tsx    |   12 +-
 6 files changed, 641 insertions(+), 782 deletions(-)

diff --git a/frontend/components/knowledge-filter-panel.tsx b/frontend/components/knowledge-filter-panel.tsx
index 6bf9285b..8908ab0c 100644
--- a/frontend/components/knowledge-filter-panel.tsx
+++ b/frontend/components/knowledge-filter-panel.tsx
@@ -25,6 +25,7 @@ import {
   FilterIconPopover,
   IconKey,
 } from "@/components/filter-icon-popover";
+import { useLayout } from "@/contexts/layout-context";
 
 interface FacetBucket {
   key: string;
@@ -48,7 +49,15 @@ export const filterAccentClasses: Record<FilterColor, string> = {
   red: "bg-accent-red text-accent-red-foreground",
 };
 
-export function KnowledgeFilterPanel() {
+interface KnowledgeFilterPanelProps {
+  totalTopOffset: number;
+  headerHeight: number;
+}
+
+export function KnowledgeFilterPanel({
+  totalTopOffset,
+  headerHeight,
+}: KnowledgeFilterPanelProps) {
   const {
     selectedFilter,
     parsedFilterData,
@@ -135,7 +144,7 @@ export function KnowledgeFilterPanel() {
   // Load available facets using search aggregations hook
   const { data: aggregations } = useGetSearchAggregations("*", 1, 0, {
     enabled: isPanelOpen,
-    placeholderData: (prev) => prev,
+    placeholderData: prev => prev,
     staleTime: 60_000,
     gcTime: 5 * 60_000,
   });
@@ -213,7 +222,7 @@ export function KnowledgeFilterPanel() {
     facetType: keyof typeof selectedFilters,
     newValues: string[]
   ) => {
-    setSelectedFilters((prev) => ({
+    setSelectedFilters(prev => ({
       ...prev,
       [facetType]: newValues,
     }));
@@ -231,7 +240,10 @@ export function KnowledgeFilterPanel() {
   };
 
   return (
-    <div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l z-40 overflow-y-auto">
+    <div
+      className={`fixed right-0 bottom-0 w-80 bg-background border-l z-40 overflow-y-auto`}
+      style={{ top: `${totalTopOffset}px` }}
+    >
       <Card className="h-full rounded-none border-0 shadow-lg flex flex-col">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
@@ -270,7 +282,7 @@ export function KnowledgeFilterPanel() {
                 <Input
                   id="filter-name"
                   value={name}
-                  onChange={(e) => {
+                  onChange={e => {
                     const v = e.target.value;
                     setName(v);
                     if (nameError && v.trim()) {
@@ -301,7 +313,7 @@ export function KnowledgeFilterPanel() {
               <Textarea
                 id="filter-description"
                 value={description}
-                onChange={(e) => setDescription(e.target.value)}
+                onChange={e => setDescription(e.target.value)}
                 placeholder="Provide a brief description of your knowledge filter..."
                 rows={3}
               />
@@ -318,7 +330,7 @@ export function KnowledgeFilterPanel() {
               placeholder="Enter your search query..."
               value={query}
               className="font-mono placeholder:font-mono"
-              onChange={(e) => setQuery(e.target.value)}
+              onChange={e => setQuery(e.target.value)}
               rows={2}
             />
           </div>
@@ -327,13 +339,13 @@ export function KnowledgeFilterPanel() {
           <div className="space-y-4">
             <div className="space-y-2">
               <MultiSelect
-                options={(availableFacets.data_sources || []).map((bucket) => ({
+                options={(availableFacets.data_sources || []).map(bucket => ({
                   value: bucket.key,
                   label: bucket.key,
                   count: bucket.count,
                 }))}
                 value={selectedFilters.data_sources}
-                onValueChange={(values) =>
+                onValueChange={values =>
                   handleFilterChange("data_sources", values)
                 }
                 placeholder="Select sources..."
@@ -343,15 +355,13 @@ export function KnowledgeFilterPanel() {
 
             <div className="space-y-2">
               <MultiSelect
-                options={(availableFacets.document_types || []).map(
-                  (bucket) => ({
-                    value: bucket.key,
-                    label: bucket.key,
-                    count: bucket.count,
-                  })
-                )}
+                options={(availableFacets.document_types || []).map(bucket => ({
+                  value: bucket.key,
+                  label: bucket.key,
+                  count: bucket.count,
+                }))}
                 value={selectedFilters.document_types}
-                onValueChange={(values) =>
+                onValueChange={values =>
                   handleFilterChange("document_types", values)
                 }
                 placeholder="Select types..."
@@ -361,13 +371,13 @@ export function KnowledgeFilterPanel() {
 
             <div className="space-y-2">
               <MultiSelect
-                options={(availableFacets.owners || []).map((bucket) => ({
+                options={(availableFacets.owners || []).map(bucket => ({
                   value: bucket.key,
                   label: bucket.key,
                   count: bucket.count,
                 }))}
                 value={selectedFilters.owners}
-                onValueChange={(values) => handleFilterChange("owners", values)}
+                onValueChange={values => handleFilterChange("owners", values)}
                 placeholder="Select owners..."
                 allOptionLabel="All Owners"
               />
@@ -376,14 +386,14 @@ export function KnowledgeFilterPanel() {
             <div className="space-y-2">
               <MultiSelect
                 options={(availableFacets.connector_types || []).map(
-                  (bucket) => ({
+                  bucket => ({
                     value: bucket.key,
                     label: bucket.key,
                     count: bucket.count,
                   })
                 )}
                 value={selectedFilters.connector_types}
-                onValueChange={(values) =>
+                onValueChange={values =>
                   handleFilterChange("connector_types", values)
                 }
                 placeholder="Select connectors..."
@@ -403,7 +413,7 @@ export function KnowledgeFilterPanel() {
                     min="1"
                     max="1000"
                     value={resultLimit}
-                    onChange={(e) => {
+                    onChange={e => {
                       const newLimit = Math.max(
                         1,
                         Math.min(1000, parseInt(e.target.value) || 1)
@@ -416,7 +426,7 @@ export function KnowledgeFilterPanel() {
                 </div>
                 <Slider
                   value={[resultLimit]}
-                  onValueChange={(values) => setResultLimit(values[0])}
+                  onValueChange={values => setResultLimit(values[0])}
                   max={1000}
                   min={1}
                   step={1}
@@ -436,7 +446,7 @@ export function KnowledgeFilterPanel() {
                     max="5"
                     step="0.1"
                     value={scoreThreshold}
-                    onChange={(e) =>
+                    onChange={e =>
                       setScoreThreshold(parseFloat(e.target.value) || 0)
                     }
                     className="h-6 text-xs text-right px-2 bg-muted/30 !border-0 rounded ml-auto focus:ring-0 focus:outline-none"
@@ -445,7 +455,7 @@ export function KnowledgeFilterPanel() {
                 </div>
                 <Slider
                   value={[scoreThreshold]}
-                  onValueChange={(values) => setScoreThreshold(values[0])}
+                  onValueChange={values => setScoreThreshold(values[0])}
                   max={5}
                   min={0}
                   step={0.1}
diff --git a/frontend/src/app/chat/page.tsx b/frontend/src/app/chat/page.tsx
index 2eba7d5d..84de0cc8 100644
--- a/frontend/src/app/chat/page.tsx
+++ b/frontend/src/app/chat/page.tsx
@@ -2047,21 +2047,10 @@ function ChatPage() {
   };
 
   return (
-    <div
-      className={`fixed inset-0 md:left-72 flex flex-col transition-all duration-300 ${
-        isMenuOpen && isPanelOpen
-          ? "md:right-[704px]" // Both open: 384px (menu) + 320px (KF panel)
-          : isMenuOpen
-          ? "md:right-96" // Only menu open: 384px
-          : isPanelOpen
-          ? "md:right-80" // Only KF panel open: 320px
-          : "md:right-6" // Neither open: 24px
-      }`}
-      style={{ top: `${totalTopOffset}px` }}
-    >
+    <div className="h-full flex flex-col container">
       {/* Debug header - only show in debug mode */}
       {isDebugMode && (
-        <div className="flex items-center justify-between mb-6 px-6 pt-6">
+        <div className="flex items-center justify-between mb-6 px-6 pt-6 ">
           <div className="flex items-center gap-2"></div>
           <div className="flex items-center gap-4">
             {/* Async Mode Toggle */}
diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 8d727a13..b4823726 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -133,22 +133,8 @@ function ChunksPageContent() {
   }
 
   return (
-    <div
-      className={`fixed inset-0 md:left-72 flex flex-row transition-all duration-300 ${
-        isMenuOpen && isPanelOpen
-          ? "md:right-[704px]"
-          : // Both open: 384px (menu) + 320px (KF panel)
-          isMenuOpen
-          ? "md:right-96"
-          : // Only menu open: 384px
-          isPanelOpen
-          ? "md:right-80"
-          : // Only KF panel open: 320px
-            "md:right-6" // Neither open: 24px
-      }`}
-      style={{ top: `${totalTopOffset}px` }}
-    >
-      <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
+    <div className="flex flex-row h-full">
+      <div className="flex-1 flex flex-col min-h-0">
         {/* Header */}
         <div className="flex flex-col mb-6">
           <div className="flex flex-row items-center gap-3 mb-6">
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 13d0b9a3..692f8a10 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -11,7 +11,6 @@ import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
 import { ProtectedRoute } from "@/components/protected-route";
 import { Button } from "@/components/ui/button";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
-import { useLayout } from "@/contexts/layout-context";
 import { useTask } from "@/contexts/task-context";
 import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
 import "@/components/AgGrid/registerAgGridModules";
@@ -47,9 +46,8 @@ function getSourceIcon(connectorType?: string) {
 
 function SearchPage() {
   const router = useRouter();
-  const { isMenuOpen, files: taskFiles } = useTask();
-  const { totalTopOffset } = useLayout();
-  const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } =
+  const { files: taskFiles } = useTask();
+  const { selectedFilter, setSelectedFilter, parsedFilterData } =
     useKnowledgeFilter();
   const [selectedRows, setSelectedRows] = useState<File[]>([]);
   const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
@@ -230,116 +228,83 @@ function SearchPage() {
   };
 
   return (
-    <div
-      className={`fixed inset-0 md:left-72 flex flex-col transition-all duration-300 ${
-        isMenuOpen && isPanelOpen
-          ? "md:right-[704px]"
-          : // Both open: 384px (menu) + 320px (KF panel)
-          isMenuOpen
-          ? "md:right-96"
-          : // Only menu open: 384px
-          isPanelOpen
-          ? "md:right-80"
-          : // Only KF panel open: 320px
-            "md:right-6" // Neither open: 24px
-      }`}
-      style={{ top: `${totalTopOffset}px` }}
-    >
-      <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
-        <div className="flex items-center justify-between mb-6 h-10">
-          <h2 className="text-lg font-semibold">Project Knowledge</h2>
-          <KnowledgeDropdown variant="button" />
-        </div>
+    <div className="h-full flex flex-col container">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="flex items-center h-[40px] text-lg font-semibold">
+          Project Knowledge
+        </h2>
+        <KnowledgeDropdown variant="button" />
+      </div>
 
-        {/* Search Input Area */}
-        <div className="flex-shrink-0 mb-6 xl:max-w-[75%]">
-          <form className="flex gap-3">
-            <div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
-              {selectedFilter?.name && (
-                <div
-                  className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
-                    filterAccentClasses[parsedFilterData?.color || "zinc"]
-                  }`}
-                >
-                  <span className="truncate">{selectedFilter?.name}</span>
-                  <X
-                    aria-label="Remove filter"
-                    className="h-4 w-4 flex-shrink-0 cursor-pointer"
-                    onClick={() => setSelectedFilter(null)}
-                  />
-                </div>
-              )}
-              <Search
-                className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
-                strokeWidth={1.5}
-              />
-              <input
-                className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
-                name="search-query"
-                id="search-query"
-                type="text"
-                placeholder="Search your documents..."
-                onChange={handleTableSearch}
-              />
-            </div>
-            {/* <Button
-              type="submit"
-              variant="outline"
-              className="rounded-lg p-0 flex-shrink-0"
-            >
-              {isFetching ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <Search className="h-4 w-4" />
-              )}
-            </Button> */}
-            {/* //TODO: Implement sync button */}
-            {/* <Button
-              type="button"
-              variant="outline"
-              className="rounded-lg flex-shrink-0"
-              onClick={() => alert("Not implemented")}
-            >
-              Sync
-            </Button> */}
-            {selectedRows.length > 0 && (
-              <Button
-                type="button"
-                variant="destructive"
-                className="rounded-lg flex-shrink-0"
-                onClick={() => setShowBulkDeleteDialog(true)}
+      {/* Search Input Area */}
+      <div className="flex-shrink-0 mb-6 xl:max-w-[75%]">
+        <form className="flex gap-3">
+          <div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
+            {selectedFilter?.name && (
+              <div
+                className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
+                  filterAccentClasses[parsedFilterData?.color || "zinc"]
+                }`}
               >
-                <Trash2 className="h-4 w-4" /> Delete
-              </Button>
-            )}
-          </form>
-        </div>
-        <div className="flex-1 min-h-0 max-h-[700px] overflow-hidden h-full">
-          <AgGridReact
-            className="h-full w-full"
-            columnDefs={columnDefs}
-            defaultColDef={defaultColDef}
-            loading={isFetching}
-            ref={gridRef}
-            rowData={fileResults}
-            rowSelection="multiple"
-            rowMultiSelectWithClick={false}
-            suppressRowClickSelection={true}
-            getRowId={params => params.data.filename}
-            domLayout="normal"
-            onSelectionChanged={onSelectionChanged}
-            noRowsOverlayComponent={() => (
-              <div className="text-center pb-[45px]">
-                <div className="text-lg text-primary font-semibold">
-                  No knowledge
-                </div>
-                <div className="text-sm mt-1 text-muted-foreground">
-                  Add files from local or your preferred cloud.
-                </div>
+                <span className="truncate">{selectedFilter?.name}</span>
+                <X
+                  aria-label="Remove filter"
+                  className="h-4 w-4 flex-shrink-0 cursor-pointer"
+                  onClick={() => setSelectedFilter(null)}
+                />
               </div>
             )}
-          />
-        </div>
+            <Search
+              className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
+              strokeWidth={1.5}
+            />
+            <input
+              className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
+              name="search-query"
+              id="search-query"
+              type="text"
+              placeholder="Search your documents..."
+              onChange={handleTableSearch}
+            />
+          </div>
+          {selectedRows.length > 0 && (
+            <Button
+              type="button"
+              variant="destructive"
+              className="rounded-lg flex-shrink-0"
+              onClick={() => setShowBulkDeleteDialog(true)}
+            >
+              <Trash2 className="h-4 w-4" /> Delete
+            </Button>
+          )}
+        </form>
+      </div>
+
+      <div className="flex-1 min-h-0">
+        <AgGridReact
+          className="h-full w-full"
+          columnDefs={columnDefs}
+          defaultColDef={defaultColDef}
+          loading={isFetching}
+          ref={gridRef}
+          rowData={fileResults}
+          rowSelection="multiple"
+          rowMultiSelectWithClick={false}
+          suppressRowClickSelection={true}
+          getRowId={params => params.data.filename}
+          domLayout="normal"
+          onSelectionChanged={onSelectionChanged}
+          noRowsOverlayComponent={() => (
+            <div className="text-center pb-[45px]">
+              <div className="text-lg text-primary font-semibold">
+                No knowledge
+              </div>
+              <div className="text-sm mt-1 text-muted-foreground">
+                Add files from local or your preferred cloud.
+              </div>
+            </div>
+          )}
+        />
       </div>
 
       {/* Bulk Delete Confirmation Dialog */}
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index cdeec47f..7c2028b4 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -131,19 +131,16 @@ const DEFAULT_CONNECTORS: Connector[] = [
 
 function KnowledgeSourcesPage() {
   const { isAuthenticated, isNoAuthMode } = useAuth();
-  const { addTask, tasks } = useTask();
+  const { tasks } = useTask();
   const searchParams = useSearchParams();
   const router = useRouter();
 
   // Connectors state
   const [connectors, setConnectors] = useState<Connector[]>([]);
-  const [isConnecting, setIsConnecting] = useState<string | null>(null);
   const [isSyncing, setIsSyncing] = useState<string | null>(null);
   const [syncResults, setSyncResults] = useState<{
     [key: string]: SyncResult | null;
   }>({});
-  const [maxFiles, setMaxFiles] = useState<number>(10);
-  const [syncAllFiles, setSyncAllFiles] = useState<boolean>(false);
 
   // Only keep systemPrompt state since it needs manual save button
   const [systemPrompt, setSystemPrompt] = useState<string>("");
@@ -380,58 +377,6 @@ function KnowledgeSourcesPage() {
     }
   }, [getConnectorIcon]);
 
-  const handleConnect = async (connector: Connector) => {
-    setIsConnecting(connector.id);
-    setSyncResults(prev => ({ ...prev, [connector.id]: null }));
-
-    try {
-      // Use the shared auth callback URL, same as connectors page
-      const redirectUri = `${window.location.origin}/auth/callback`;
-
-      const response = await fetch("/api/auth/init", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          connector_type: connector.type,
-          purpose: "data_source",
-          name: `${connector.name} Connection`,
-          redirect_uri: redirectUri,
-        }),
-      });
-
-      if (response.ok) {
-        const result = await response.json();
-
-        if (result.oauth_config) {
-          localStorage.setItem("connecting_connector_id", result.connection_id);
-          localStorage.setItem("connecting_connector_type", connector.type);
-
-          const authUrl =
-            `${result.oauth_config.authorization_endpoint}?` +
-            `client_id=${result.oauth_config.client_id}&` +
-            `response_type=code&` +
-            `scope=${result.oauth_config.scopes.join(" ")}&` +
-            `redirect_uri=${encodeURIComponent(
-              result.oauth_config.redirect_uri
-            )}&` +
-            `access_type=offline&` +
-            `prompt=consent&` +
-            `state=${result.connection_id}`;
-
-          window.location.href = authUrl;
-        }
-      } else {
-        console.error("Failed to initiate connection");
-        setIsConnecting(null);
-      }
-    } catch (error) {
-      console.error("Connection error:", error);
-      setIsConnecting(null);
-    }
-  };
-
   // const handleSync = async (connector: Connector) => {
   //   if (!connector.connectionId) return;
 
@@ -623,590 +568,556 @@ function KnowledgeSourcesPage() {
   };
 
   return (
-    <div className="space-y-8">
-      {/* Connectors Section */}
-      <div className="space-y-6">
-        <div>
-          <h2 className="text-lg font-semibold tracking-tight mb-2">
-            Cloud Connectors
-          </h2>
-        </div>
+    <div className="h-full flex flex-col container">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="flex items-center h-[40px] text-lg font-semibold">
+          Cloud Connectors
+        </h2>
+      </div>
 
-        {/* Conditional Sync Settings or No-Auth Message */}
-        {
-          isNoAuthMode ? (
-            <Card className="border-yellow-500/50 bg-yellow-500/5">
-              <CardHeader>
-                <CardTitle className="text-lg text-yellow-600">
-                  Cloud connectors are only available with auth mode enabled
-                </CardTitle>
-                <CardDescription className="text-sm">
-                  Please provide the following environment variables and
-                  restart:
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="bg-muted rounded-md p-4 font-mono text-sm">
-                  <div className="text-muted-foreground mb-2">
-                    # make here
-                    https://console.cloud.google.com/apis/credentials
-                  </div>
-                  <div>GOOGLE_OAUTH_CLIENT_ID=</div>
-                  <div>GOOGLE_OAUTH_CLIENT_SECRET=</div>
+      {/* Conditional Sync Settings or No-Auth Message */}
+      {isNoAuthMode ? (
+        <div className="flex-1 flex flex-col pb-2">
+          <Card className="border-yellow-500/50 bg-yellow-500/5">
+            <CardHeader>
+              <CardTitle className="text-lg text-yellow-600">
+                Cloud connectors are only available with auth mode enabled
+              </CardTitle>
+              <CardDescription className="text-sm">
+                Please provide the following environment variables and restart:
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="bg-muted rounded-md p-4 font-mono text-sm">
+                <div className="text-muted-foreground mb-2">
+                  # make here https://console.cloud.google.com/apis/credentials
                 </div>
-              </CardContent>
-            </Card>
-          ) : null
-          // <div className="flex items-center justify-between py-4">
-          //   <div>
-          //     <h3 className="text-lg font-medium">Sync Settings</h3>
-          //     <p className="text-sm text-muted-foreground">
-          //       Configure how many files to sync when manually triggering a sync
-          //     </p>
-          //   </div>
-          //   <div className="flex items-center gap-4">
-          //     <div className="flex items-center space-x-2">
-          //       <Checkbox
-          //         id="syncAllFiles"
-          //         checked={syncAllFiles}
-          //         onCheckedChange={checked => {
-          //           setSyncAllFiles(!!checked);
-          //           if (checked) {
-          //             setMaxFiles(0);
-          //           } else {
-          //             setMaxFiles(10);
-          //           }
-          //         }}
-          //       />
-          //       <Label
-          //         htmlFor="syncAllFiles"
-          //         className="font-medium whitespace-nowrap"
-          //       >
-          //         Sync all files
-          //       </Label>
-          //     </div>
-          //     <Label
-          //       htmlFor="maxFiles"
-          //       className="font-medium whitespace-nowrap"
-          //     >
-          //       Max files per sync:
-          //     </Label>
-          //     <div className="relative">
-          //       <Input
-          //         id="maxFiles"
-          //         type="number"
-          //         value={syncAllFiles ? 0 : maxFiles}
-          //         onChange={e => setMaxFiles(parseInt(e.target.value) || 10)}
-          //         disabled={syncAllFiles}
-          //         className="w-16 min-w-16 max-w-16 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
-          //         min="1"
-          //         max="100"
-          //         title={
-          //           syncAllFiles
-          //             ? "Disabled when 'Sync all files' is checked"
-          //             : "Leave blank or set to 0 for unlimited"
-          //         }
-          //       />
-          //     </div>
-          //   </div>
-          // </div>
-        }
+                <div>GOOGLE_OAUTH_CLIENT_ID=</div>
+                <div>GOOGLE_OAUTH_CLIENT_SECRET=</div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      ) : null}
 
-        {/* Connectors Grid */}
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-          {DEFAULT_CONNECTORS.map(connector => {
-            const actualConnector = connectors.find(c => c.id === connector.id);
-            return (
-              <Card key={connector.id} className="relative flex flex-col">
-                <CardHeader>
-                  <div className="flex flex-col items-start justify-between">
-                    <div className="flex flex-col gap-3">
-                      <div className="mb-1">
-                        <div
-                          className={`w-8 h-8 ${
-                            actualConnector ? "bg-white" : "bg-muted grayscale"
-                          } rounded flex items-center justify-center`}
-                        >
-                          {connector.icon}
+      {/* Connectors Section */}
+      <div className="flex-1 flex flex-col pb-2">
+        <Card>
+          <CardHeader>
+            <div>
+              <CardTitle className="text-lg mb-4">Cloud Connectors</CardTitle>
+              <CardDescription>
+                Connect to cloud storage providers to sync your knowledge.
+              </CardDescription>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {DEFAULT_CONNECTORS.map(connector => {
+                const actualConnector = connectors.find(
+                  c => c.id === connector.id
+                );
+                return (
+                  <Card key={connector.id} className="flex flex-col">
+                    <CardHeader>
+                      <div className="flex flex-col items-start justify-between">
+                        <div className="flex flex-col gap-3">
+                          <div className="mb-1">
+                            <div
+                              className={`w-8 h-8 ${
+                                actualConnector
+                                  ? "bg-white"
+                                  : "bg-muted grayscale"
+                              } rounded flex items-center justify-center`}
+                            >
+                              {connector.icon}
+                            </div>
+                          </div>
+                          <CardTitle className="flex flex-row items-center gap-2">
+                            {connector.name}
+                            {actualConnector &&
+                              getStatusBadge(actualConnector.status)}
+                          </CardTitle>
+                          <CardDescription className="text-[13px]">
+                            {actualConnector?.description
+                              ? `${actualConnector.name} is configured.`
+                              : connector.description}
+                          </CardDescription>
                         </div>
                       </div>
-                      <CardTitle className="flex flex-row items-center gap-2">
-                        {connector.name}
-                        {actualConnector &&
-                          getStatusBadge(actualConnector.status)}
-                      </CardTitle>
-                      <CardDescription className="text-[13px]">
-                        {actualConnector?.description
-                          ? `${actualConnector.name} is configured.`
-                          : connector.description}
-                      </CardDescription>
-                    </div>
-                  </div>
-                </CardHeader>
-                <CardContent className="flex-1 flex flex-col justify-end space-y-4">
-                  {actualConnector?.status === "connected" ? (
-                    <div className="space-y-3">
-                      <Button
-                        onClick={() => navigateToKnowledgePage(connector)}
-                        disabled={isSyncing === connector.id}
-                        className="w-full cursor-pointer"
-                        size="sm"
-                      >
-                        <Plus className="h-4 w-4" />
-                        Add Knowledge
-                      </Button>
+                    </CardHeader>
+                    <CardContent className="flex-1 flex flex-col justify-end space-y-4">
+                      {actualConnector?.status === "connected" ? (
+                        <div className="space-y-3">
+                          <Button
+                            onClick={() => navigateToKnowledgePage(connector)}
+                            disabled={isSyncing === connector.id}
+                            className="w-full cursor-pointer"
+                            size="sm"
+                          >
+                            <Plus className="h-4 w-4" />
+                            Add Knowledge
+                          </Button>
 
-                      {syncResults[connector.id] && (
-                        <div className="text-xs text-muted-foreground bg-muted/50 p-2 rounded">
-                          <div>
-                            Processed:{" "}
-                            {syncResults[connector.id]?.processed || 0}
-                          </div>
-                          <div>
-                            Added: {syncResults[connector.id]?.added || 0}
-                          </div>
-                          {syncResults[connector.id]?.errors && (
-                            <div>
-                              Errors: {syncResults[connector.id]?.errors}
+                          {syncResults[connector.id] && (
+                            <div className="text-xs text-muted-foreground bg-muted/50 p-2 rounded">
+                              <div>
+                                Processed:{" "}
+                                {syncResults[connector.id]?.processed || 0}
+                              </div>
+                              <div>
+                                Added: {syncResults[connector.id]?.added || 0}
+                              </div>
+                              {syncResults[connector.id]?.errors && (
+                                <div>
+                                  Errors: {syncResults[connector.id]?.errors}
+                                </div>
+                              )}
                             </div>
                           )}
                         </div>
+                      ) : (
+                        <div className="text-[13px] text-muted-foreground">
+                          <p>
+                            See our{" "}
+                            <Link
+                              className="text-accent-pink-foreground"
+                              href="https://github.com/langflow-ai/openrag/pull/96/files#diff-06889aa94ccf8dac64e70c8cc30a2ceed32cc3c0c2c14a6ff0336fe882a9c2ccR41"
+                            >
+                              Cloud Connectors installation guide
+                            </Link>{" "}
+                            for more detail.
+                          </p>
+                        </div>
                       )}
-                    </div>
-                  ) : (
-                    <div className="text-[13px] text-muted-foreground">
-                      <p>
-                        See our{" "}
-                        <Link
-                          className="text-accent-pink-foreground"
-                          href="https://github.com/langflow-ai/openrag/pull/96/files#diff-06889aa94ccf8dac64e70c8cc30a2ceed32cc3c0c2c14a6ff0336fe882a9c2ccR41"
-                        >
-                          Cloud Connectors installation guide
-                        </Link>{" "}
-                        for more detail.
-                      </p>
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
-            );
-          })}
-        </div>
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
+          </CardContent>
+        </Card>
       </div>
+
       {/* Agent Behavior Section */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle className="text-lg mb-4">Agent</CardTitle>
-              <CardDescription>
-                Quick Agent settings. Edit in Langflow for full control.
-              </CardDescription>
-            </div>
-            <div className="flex gap-2">
-              <ConfirmationDialog
-                trigger={
-                  <Button ignoreTitleCase={true} variant="outline">
-                    Restore flow
-                  </Button>
-                }
-                title="Restore default Retrieval flow"
-                description="This restores defaults and discards all custom settings and overrides. This can’t be undone."
-                confirmText="Restore"
-                variant="destructive"
-                onConfirm={handleRestoreRetrievalFlow}
-              />
-              <ConfirmationDialog
-                trigger={
-                  <Button>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="22"
-                      viewBox="0 0 24 22"
-                      className="h-4 w-4 mr-2"
-                      aria-label="Langflow icon"
-                    >
-                      <title>Langflow icon</title>
-                      <path
-                        fill="currentColor"
-                        d="M13.0486 0.462158H9.75399C9.44371 0.462158 9.14614 0.586082 8.92674 0.806667L4.03751 5.72232C3.81811 5.9429 3.52054 6.06682 3.21026 6.06682H1.16992C0.511975 6.06682 -0.0165756 6.61212 0.000397655 7.2734L0.0515933 9.26798C0.0679586 9.90556 0.586745 10.4139 1.22111 10.4139H3.59097C3.90124 10.4139 4.19881 10.2899 4.41821 10.0694L9.34823 5.11269C9.56763 4.89211 9.8652 4.76818 10.1755 4.76818H13.0486C13.6947 4.76818 14.2185 4.24157 14.2185 3.59195V1.63839C14.2185 0.988773 13.6947 0.462158 13.0486 0.462158Z"
-                      ></path>
-                      <path
-                        fill="currentColor"
-                        d="M19.5355 11.5862H22.8301C23.4762 11.5862 24 12.1128 24 12.7624V14.716C24 15.3656 23.4762 15.8922 22.8301 15.8922H19.957C19.6467 15.8922 19.3491 16.0161 19.1297 16.2367L14.1997 21.1934C13.9803 21.414 13.6827 21.5379 13.3725 21.5379H11.0026C10.3682 21.5379 9.84945 21.0296 9.83309 20.392L9.78189 18.3974C9.76492 17.7361 10.2935 17.1908 10.9514 17.1908H12.9918C13.302 17.1908 13.5996 17.0669 13.819 16.8463L18.7082 11.9307C18.9276 11.7101 19.2252 11.5862 19.5355 11.5862Z"
-                      ></path>
-                      <path
-                        fill="currentColor"
-                        d="M19.5355 2.9796L22.8301 2.9796C23.4762 2.9796 24 3.50622 24 4.15583V6.1094C24 6.75901 23.4762 7.28563 22.8301 7.28563H19.957C19.6467 7.28563 19.3491 7.40955 19.1297 7.63014L14.1997 12.5868C13.9803 12.8074 13.6827 12.9313 13.3725 12.9313H10.493C10.1913 12.9313 9.90126 13.0485 9.68346 13.2583L4.14867 18.5917C3.93087 18.8016 3.64085 18.9187 3.33917 18.9187H1.32174C0.675616 18.9187 0.151832 18.3921 0.151832 17.7425V15.7343C0.151832 15.0846 0.675616 14.558 1.32174 14.558H3.32468C3.63496 14.558 3.93253 14.4341 4.15193 14.2135L9.40827 8.92878C9.62767 8.70819 9.92524 8.58427 10.2355 8.58427H12.9918C13.302 8.58427 13.5996 8.46034 13.819 8.23976L18.7082 3.32411C18.9276 3.10353 19.2252 2.9796 19.5355 2.9796Z"
-                      ></path>
-                    </svg>
-                    Edit in Langflow
-                  </Button>
-                }
-                title="Edit Retrieval flow in Langflow"
-                description={
-                  <>
-                    <p className="mb-2">
-                      You're entering Langflow. You can edit the{" "}
-                      <b>Retrieval flow</b> and other underlying flows. Manual
-                      changes to components, wiring, or I/O can break this
-                      experience.
-                    </p>
-                    <p>You can restore this flow from Settings.</p>
-                  </>
-                }
-                confirmText="Proceed"
-                confirmIcon={<ArrowUpRight />}
-                onConfirm={closeDialog =>
-                  handleEditInLangflow("chat", closeDialog)
-                }
-                variant="warning"
-              />
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-6">
-            <div className="space-y-2">
-              <LabelWrapper
-                label="Language model"
-                helperText="Model used for chat"
-                id="embedding-model"
-                required={true}
-              >
-                <ModelSelector
-                  options={modelsData?.language_models || []}
-                  noOptionsPlaceholder={
-                    modelsData
-                      ? "No language models detected."
-                      : "Loading models..."
+      <div className="flex-1 flex flex-col py-2">
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-lg mb-4">Agent</CardTitle>
+                <CardDescription>
+                  Quick Agent settings. Edit in Langflow for full control.
+                </CardDescription>
+              </div>
+              <div className="flex gap-2">
+                <ConfirmationDialog
+                  trigger={
+                    <Button ignoreTitleCase={true} variant="outline">
+                      Restore flow
+                    </Button>
                   }
-                  icon={<OpenAILogo className="w-4 h-4" />}
-                  value={modelsData ? settings.agent?.llm_model || "" : ""}
-                  onValueChange={handleModelChange}
+                  title="Restore default Retrieval flow"
+                  description="This restores defaults and discards all custom settings and overrides. This can’t be undone."
+                  confirmText="Restore"
+                  variant="destructive"
+                  onConfirm={handleRestoreRetrievalFlow}
                 />
-              </LabelWrapper>
+                <ConfirmationDialog
+                  trigger={
+                    <Button>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="22"
+                        viewBox="0 0 24 22"
+                        className="h-4 w-4 mr-2"
+                        aria-label="Langflow icon"
+                      >
+                        <title>Langflow icon</title>
+                        <path
+                          fill="currentColor"
+                          d="M13.0486 0.462158H9.75399C9.44371 0.462158 9.14614 0.586082 8.92674 0.806667L4.03751 5.72232C3.81811 5.9429 3.52054 6.06682 3.21026 6.06682H1.16992C0.511975 6.06682 -0.0165756 6.61212 0.000397655 7.2734L0.0515933 9.26798C0.0679586 9.90556 0.586745 10.4139 1.22111 10.4139H3.59097C3.90124 10.4139 4.19881 10.2899 4.41821 10.0694L9.34823 5.11269C9.56763 4.89211 9.8652 4.76818 10.1755 4.76818H13.0486C13.6947 4.76818 14.2185 4.24157 14.2185 3.59195V1.63839C14.2185 0.988773 13.6947 0.462158 13.0486 0.462158Z"
+                        ></path>
+                        <path
+                          fill="currentColor"
+                          d="M19.5355 11.5862H22.8301C23.4762 11.5862 24 12.1128 24 12.7624V14.716C24 15.3656 23.4762 15.8922 22.8301 15.8922H19.957C19.6467 15.8922 19.3491 16.0161 19.1297 16.2367L14.1997 21.1934C13.9803 21.414 13.6827 21.5379 13.3725 21.5379H11.0026C10.3682 21.5379 9.84945 21.0296 9.83309 20.392L9.78189 18.3974C9.76492 17.7361 10.2935 17.1908 10.9514 17.1908H12.9918C13.302 17.1908 13.5996 17.0669 13.819 16.8463L18.7082 11.9307C18.9276 11.7101 19.2252 11.5862 19.5355 11.5862Z"
+                        ></path>
+                        <path
+                          fill="currentColor"
+                          d="M19.5355 2.9796L22.8301 2.9796C23.4762 2.9796 24 3.50622 24 4.15583V6.1094C24 6.75901 23.4762 7.28563 22.8301 7.28563H19.957C19.6467 7.28563 19.3491 7.40955 19.1297 7.63014L14.1997 12.5868C13.9803 12.8074 13.6827 12.9313 13.3725 12.9313H10.493C10.1913 12.9313 9.90126 13.0485 9.68346 13.2583L4.14867 18.5917C3.93087 18.8016 3.64085 18.9187 3.33917 18.9187H1.32174C0.675616 18.9187 0.151832 18.3921 0.151832 17.7425V15.7343C0.151832 15.0846 0.675616 14.558 1.32174 14.558H3.32468C3.63496 14.558 3.93253 14.4341 4.15193 14.2135L9.40827 8.92878C9.62767 8.70819 9.92524 8.58427 10.2355 8.58427H12.9918C13.302 8.58427 13.5996 8.46034 13.819 8.23976L18.7082 3.32411C18.9276 3.10353 19.2252 2.9796 19.5355 2.9796Z"
+                        ></path>
+                      </svg>
+                      Edit in Langflow
+                    </Button>
+                  }
+                  title="Edit Retrieval flow in Langflow"
+                  description={
+                    <>
+                      <p className="mb-2">
+                        You're entering Langflow. You can edit the{" "}
+                        <b>Retrieval flow</b> and other underlying flows. Manual
+                        changes to components, wiring, or I/O can break this
+                        experience.
+                      </p>
+                      <p>You can restore this flow from Settings.</p>
+                    </>
+                  }
+                  confirmText="Proceed"
+                  confirmIcon={<ArrowUpRight />}
+                  onConfirm={closeDialog =>
+                    handleEditInLangflow("chat", closeDialog)
+                  }
+                  variant="warning"
+                />
+              </div>
             </div>
-            <div className="space-y-2">
-              <LabelWrapper label="Agent Instructions" id="system-prompt">
-                <Textarea
-                  id="system-prompt"
-                  placeholder="Enter your agent instructions here..."
-                  value={systemPrompt}
-                  onChange={e => setSystemPrompt(e.target.value)}
-                  rows={6}
-                  className={`resize-none ${
-                    systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
-                      ? "border-red-500 focus:border-red-500"
-                      : ""
-                  }`}
-                />
-                <div className="flex justify-start">
-                  <span
-                    className={`text-xs ${
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-6">
+              <div className="space-y-2">
+                <LabelWrapper
+                  label="Language model"
+                  helperText="Model used for chat"
+                  id="embedding-model"
+                  required={true}
+                >
+                  <ModelSelector
+                    options={modelsData?.language_models || []}
+                    noOptionsPlaceholder={
+                      modelsData
+                        ? "No language models detected."
+                        : "Loading models..."
+                    }
+                    icon={<OpenAILogo className="w-4 h-4" />}
+                    value={modelsData ? settings.agent?.llm_model || "" : ""}
+                    onValueChange={handleModelChange}
+                  />
+                </LabelWrapper>
+              </div>
+              <div className="space-y-2">
+                <LabelWrapper label="Agent Instructions" id="system-prompt">
+                  <Textarea
+                    id="system-prompt"
+                    placeholder="Enter your agent instructions here..."
+                    value={systemPrompt}
+                    onChange={e => setSystemPrompt(e.target.value)}
+                    rows={6}
+                    className={`resize-none ${
                       systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
-                        ? "text-red-500"
-                        : "text-muted-foreground"
+                        ? "border-red-500 focus:border-red-500"
+                        : ""
                     }`}
-                  >
-                    {systemPrompt.length}/{MAX_SYSTEM_PROMPT_CHARS} characters
-                  </span>
-                </div>
-              </LabelWrapper>
+                  />
+                  <div className="flex justify-start">
+                    <span
+                      className={`text-xs ${
+                        systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
+                          ? "text-red-500"
+                          : "text-muted-foreground"
+                      }`}
+                    >
+                      {systemPrompt.length}/{MAX_SYSTEM_PROMPT_CHARS} characters
+                    </span>
+                  </div>
+                </LabelWrapper>
+              </div>
+              <div className="flex justify-end pt-2">
+                <Button
+                  onClick={handleSystemPromptSave}
+                  disabled={
+                    updateFlowSettingMutation.isPending ||
+                    systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
+                  }
+                  className="min-w-[120px]"
+                  size="sm"
+                  variant="outline"
+                >
+                  {updateFlowSettingMutation.isPending ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Saving...
+                    </>
+                  ) : (
+                    "Save Agent Instructions"
+                  )}
+                </Button>
+              </div>
             </div>
-            <div className="flex justify-end pt-2">
-              <Button
-                onClick={handleSystemPromptSave}
-                disabled={
-                  updateFlowSettingMutation.isPending ||
-                  systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
-                }
-                className="min-w-[120px]"
-                size="sm"
-                variant="outline"
-              >
-                {updateFlowSettingMutation.isPending ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Saving...
-                  </>
-                ) : (
-                  "Save Agent Instructions"
-                )}
-              </Button>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+          </CardContent>
+        </Card>
+      </div>
 
       {/* Knowledge Ingest Section */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle className="text-lg mb-4">
-                Knowledge ingestion and retrieval
-              </CardTitle>
-              <CardDescription>
-                Quick knowledge settings. Edit in Langflow for full control.
-              </CardDescription>
-            </div>
-            <div className="flex gap-2">
-              <ConfirmationDialog
-                trigger={
-                  <Button ignoreTitleCase={true} variant="outline">
-                    Restore flow
-                  </Button>
-                }
-                title="Restore default Ingest flow"
-                description="This restores defaults and discards all custom settings and overrides. This can't be undone."
-                confirmText="Restore"
-                variant="destructive"
-                onConfirm={handleRestoreIngestFlow}
-              />
-              <ConfirmationDialog
-                trigger={
-                  <Button>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="22"
-                      viewBox="0 0 24 22"
-                      className="h-4 w-4 mr-2"
-                      aria-label="Langflow icon"
-                    >
-                      <title>Langflow icon</title>
-                      <path
-                        fill="currentColor"
-                        d="M13.0486 0.462158H9.75399C9.44371 0.462158 9.14614 0.586082 8.92674 0.806667L4.03751 5.72232C3.81811 5.9429 3.52054 6.06682 3.21026 6.06682H1.16992C0.511975 6.06682 -0.0165756 6.61212 0.000397655 7.2734L0.0515933 9.26798C0.0679586 9.90556 0.586745 10.4139 1.22111 10.4139H3.59097C3.90124 10.4139 4.19881 10.2899 4.41821 10.0694L9.34823 5.11269C9.56763 4.89211 9.8652 4.76818 10.1755 4.76818H13.0486C13.6947 4.76818 14.2185 4.24157 14.2185 3.59195V1.63839C14.2185 0.988773 13.6947 0.462158 13.0486 0.462158Z"
-                      ></path>
-                      <path
-                        fill="currentColor"
-                        d="M19.5355 11.5862H22.8301C23.4762 11.5862 24 12.1128 24 12.7624V14.716C24 15.3656 23.4762 15.8922 22.8301 15.8922H19.957C19.6467 15.8922 19.3491 16.0161 19.1297 16.2367L14.1997 21.1934C13.9803 21.414 13.6827 21.5379 13.3725 21.5379H11.0026C10.3682 21.5379 9.84945 21.0296 9.83309 20.392L9.78189 18.3974C9.76492 17.7361 10.2935 17.1908 10.9514 17.1908H12.9918C13.302 17.1908 13.5996 17.0669 13.819 16.8463L18.7082 11.9307C18.9276 11.7101 19.2252 11.5862 19.5355 11.5862Z"
-                      ></path>
-                      <path
-                        fill="currentColor"
-                        d="M19.5355 2.9796L22.8301 2.9796C23.4762 2.9796 24 3.50622 24 4.15583V6.1094C24 6.75901 23.4762 7.28563 22.8301 7.28563H19.957C19.6467 7.28563 19.3491 7.40955 19.1297 7.63014L14.1997 12.5868C13.9803 12.8074 13.6827 12.9313 13.3725 12.9313H10.493C10.1913 12.9313 9.90126 13.0485 9.68346 13.2583L4.14867 18.5917C3.93087 18.8016 3.64085 18.9187 3.33917 18.9187H1.32174C0.675616 18.9187 0.151832 18.3921 0.151832 17.7425V15.7343C0.151832 15.0846 0.675616 14.558 1.32174 14.558H3.32468C3.63496 14.558 3.93253 14.4341 4.15193 14.2135L9.40827 8.92878C9.62767 8.70819 9.92524 8.58427 10.2355 8.58427H12.9918C13.302 8.58427 13.5996 8.46034 13.819 8.23976L18.7082 3.32411C18.9276 3.10353 19.2252 2.9796 19.5355 2.9796Z"
-                      ></path>
-                    </svg>
-                    Edit in Langflow
-                  </Button>
-                }
-                title="Edit Ingest flow in Langflow"
-                description={
-                  <>
-                    <p className="mb-2">
-                      You're entering Langflow. You can edit the{" "}
-                      <b>Ingest flow</b> and other underlying flows. Manual
-                      changes to components, wiring, or I/O can break this
-                      experience.
-                    </p>
-                    <p>You can restore this flow from Settings.</p>
-                  </>
-                }
-                confirmText="Proceed"
-                confirmIcon={<ArrowUpRight />}
-                variant="warning"
-                onConfirm={closeDialog =>
-                  handleEditInLangflow("ingest", closeDialog)
-                }
-              />
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-6">
-            <div className="space-y-2">
-              <LabelWrapper
-                helperText="Model used for knowledge ingest and retrieval"
-                id="embedding-model-select"
-                label="Embedding model"
-              >
-                <Select
-                  // Disabled until API supports multiple embedding models
-                  disabled={true}
-                  value={
-                    settings.knowledge?.embedding_model ||
-                    modelsData?.embedding_models?.find(m => m.default)?.value ||
-                    "text-embedding-ada-002"
+      <div className="flex-1 flex flex-col py-2">
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-lg mb-4">
+                  Knowledge ingestion and retrieval
+                </CardTitle>
+                <CardDescription>
+                  Quick knowledge settings. Edit in Langflow for full control.
+                </CardDescription>
+              </div>
+              <div className="flex gap-2">
+                <ConfirmationDialog
+                  trigger={
+                    <Button ignoreTitleCase={true} variant="outline">
+                      Restore flow
+                    </Button>
                   }
-                  onValueChange={handleEmbeddingModelChange}
+                  title="Restore default Ingest flow"
+                  description="This restores defaults and discards all custom settings and overrides. This can't be undone."
+                  confirmText="Restore"
+                  variant="destructive"
+                  onConfirm={handleRestoreIngestFlow}
+                />
+                <ConfirmationDialog
+                  trigger={
+                    <Button>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="22"
+                        viewBox="0 0 24 22"
+                        className="h-4 w-4 mr-2"
+                        aria-label="Langflow icon"
+                      >
+                        <title>Langflow icon</title>
+                        <path
+                          fill="currentColor"
+                          d="M13.0486 0.462158H9.75399C9.44371 0.462158 9.14614 0.586082 8.92674 0.806667L4.03751 5.72232C3.81811 5.9429 3.52054 6.06682 3.21026 6.06682H1.16992C0.511975 6.06682 -0.0165756 6.61212 0.000397655 7.2734L0.0515933 9.26798C0.0679586 9.90556 0.586745 10.4139 1.22111 10.4139H3.59097C3.90124 10.4139 4.19881 10.2899 4.41821 10.0694L9.34823 5.11269C9.56763 4.89211 9.8652 4.76818 10.1755 4.76818H13.0486C13.6947 4.76818 14.2185 4.24157 14.2185 3.59195V1.63839C14.2185 0.988773 13.6947 0.462158 13.0486 0.462158Z"
+                        ></path>
+                        <path
+                          fill="currentColor"
+                          d="M19.5355 11.5862H22.8301C23.4762 11.5862 24 12.1128 24 12.7624V14.716C24 15.3656 23.4762 15.8922 22.8301 15.8922H19.957C19.6467 15.8922 19.3491 16.0161 19.1297 16.2367L14.1997 21.1934C13.9803 21.414 13.6827 21.5379 13.3725 21.5379H11.0026C10.3682 21.5379 9.84945 21.0296 9.83309 20.392L9.78189 18.3974C9.76492 17.7361 10.2935 17.1908 10.9514 17.1908H12.9918C13.302 17.1908 13.5996 17.0669 13.819 16.8463L18.7082 11.9307C18.9276 11.7101 19.2252 11.5862 19.5355 11.5862Z"
+                        ></path>
+                        <path
+                          fill="currentColor"
+                          d="M19.5355 2.9796L22.8301 2.9796C23.4762 2.9796 24 3.50622 24 4.15583V6.1094C24 6.75901 23.4762 7.28563 22.8301 7.28563H19.957C19.6467 7.28563 19.3491 7.40955 19.1297 7.63014L14.1997 12.5868C13.9803 12.8074 13.6827 12.9313 13.3725 12.9313H10.493C10.1913 12.9313 9.90126 13.0485 9.68346 13.2583L4.14867 18.5917C3.93087 18.8016 3.64085 18.9187 3.33917 18.9187H1.32174C0.675616 18.9187 0.151832 18.3921 0.151832 17.7425V15.7343C0.151832 15.0846 0.675616 14.558 1.32174 14.558H3.32468C3.63496 14.558 3.93253 14.4341 4.15193 14.2135L9.40827 8.92878C9.62767 8.70819 9.92524 8.58427 10.2355 8.58427H12.9918C13.302 8.58427 13.5996 8.46034 13.819 8.23976L18.7082 3.32411C18.9276 3.10353 19.2252 2.9796 19.5355 2.9796Z"
+                        ></path>
+                      </svg>
+                      Edit in Langflow
+                    </Button>
+                  }
+                  title="Edit Ingest flow in Langflow"
+                  description={
+                    <>
+                      <p className="mb-2">
+                        You're entering Langflow. You can edit the{" "}
+                        <b>Ingest flow</b> and other underlying flows. Manual
+                        changes to components, wiring, or I/O can break this
+                        experience.
+                      </p>
+                      <p>You can restore this flow from Settings.</p>
+                    </>
+                  }
+                  confirmText="Proceed"
+                  confirmIcon={<ArrowUpRight />}
+                  variant="warning"
+                  onConfirm={closeDialog =>
+                    handleEditInLangflow("ingest", closeDialog)
+                  }
+                />
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-6">
+              <div className="space-y-2">
+                <LabelWrapper
+                  helperText="Model used for knowledge ingest and retrieval"
+                  id="embedding-model-select"
+                  label="Embedding model"
                 >
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <SelectTrigger disabled id="embedding-model-select">
-                        <SelectValue placeholder="Select an embedding model" />
-                      </SelectTrigger>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      Locked to keep embeddings consistent
-                    </TooltipContent>
-                  </Tooltip>
-                  <SelectContent>
-                    <ModelSelectItems
-                      models={modelsData?.embedding_models}
-                      fallbackModels={
-                        getFallbackModels(currentProvider).embedding
-                      }
-                      provider={currentProvider}
-                    />
-                  </SelectContent>
-                </Select>
-              </LabelWrapper>
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <LabelWrapper id="chunk-size" label="Chunk size">
-                  <div className="relative">
-                    <Input
-                      id="chunk-size"
-                      type="number"
-                      min="1"
-                      value={chunkSize}
-                      onChange={e => handleChunkSizeChange(e.target.value)}
-                      className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                    />
-                    <div className="absolute inset-y-0 right-0 flex items-center">
-                      <span className="text-sm text-placeholder-foreground mr-4 pointer-events-none">
-                        characters
-                      </span>
-                      <div className="flex flex-col">
-                        <Button
-                          aria-label="Increase value"
-                          className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative"
-                          variant="outline"
-                          size="iconSm"
-                          onClick={() =>
-                            handleChunkSizeChange((chunkSize + 1).toString())
-                          }
-                        >
-                          <Plus className="text-muted-foreground" size={8} />
-                        </Button>
-                        <Button
-                          aria-label="Decrease value"
-                          className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative"
-                          variant="outline"
-                          size="iconSm"
-                          onClick={() =>
-                            handleChunkSizeChange((chunkSize - 1).toString())
-                          }
-                        >
-                          <Minus className="text-muted-foreground" size={8} />
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
+                  <Select
+                    // Disabled until API supports multiple embedding models
+                    disabled={true}
+                    value={
+                      settings.knowledge?.embedding_model ||
+                      modelsData?.embedding_models?.find(m => m.default)
+                        ?.value ||
+                      "text-embedding-ada-002"
+                    }
+                    onValueChange={handleEmbeddingModelChange}
+                  >
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <SelectTrigger disabled id="embedding-model-select">
+                          <SelectValue placeholder="Select an embedding model" />
+                        </SelectTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        Locked to keep embeddings consistent
+                      </TooltipContent>
+                    </Tooltip>
+                    <SelectContent>
+                      <ModelSelectItems
+                        models={modelsData?.embedding_models}
+                        fallbackModels={
+                          getFallbackModels(currentProvider).embedding
+                        }
+                        provider={currentProvider}
+                      />
+                    </SelectContent>
+                  </Select>
                 </LabelWrapper>
               </div>
-              <div className="space-y-2">
-                <LabelWrapper id="chunk-overlap" label="Chunk overlap">
-                  <div className="relative">
-                    <Input
-                      id="chunk-overlap"
-                      type="number"
-                      min="0"
-                      value={chunkOverlap}
-                      onChange={e => handleChunkOverlapChange(e.target.value)}
-                      className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                    />
-                    <div className="absolute inset-y-0 right-0 flex items-center">
-                      <span className="text-sm text-placeholder-foreground mr-4 pointer-events-none">
-                        characters
-                      </span>
-                      <div className="flex flex-col">
-                        <Button
-                          aria-label="Increase value"
-                          className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative"
-                          variant="outline"
-                          size="iconSm"
-                          onClick={() =>
-                            handleChunkOverlapChange(
-                              (chunkOverlap + 1).toString()
-                            )
-                          }
-                        >
-                          <Plus className="text-muted-foreground" size={8} />
-                        </Button>
-                        <Button
-                          aria-label="Decrease value"
-                          className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative"
-                          variant="outline"
-                          size="iconSm"
-                          onClick={() =>
-                            handleChunkOverlapChange(
-                              (chunkOverlap - 1).toString()
-                            )
-                          }
-                        >
-                          <Minus className="text-muted-foreground" size={8} />
-                        </Button>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <LabelWrapper id="chunk-size" label="Chunk size">
+                    <div className="relative">
+                      <Input
+                        id="chunk-size"
+                        type="number"
+                        min="1"
+                        value={chunkSize}
+                        onChange={e => handleChunkSizeChange(e.target.value)}
+                        className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                      />
+                      <div className="absolute inset-y-0 right-0 flex items-center">
+                        <span className="text-sm text-placeholder-foreground mr-4 pointer-events-none">
+                          characters
+                        </span>
+                        <div className="flex flex-col">
+                          <Button
+                            aria-label="Increase value"
+                            className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative"
+                            variant="outline"
+                            size="iconSm"
+                            onClick={() =>
+                              handleChunkSizeChange((chunkSize + 1).toString())
+                            }
+                          >
+                            <Plus className="text-muted-foreground" size={8} />
+                          </Button>
+                          <Button
+                            aria-label="Decrease value"
+                            className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative"
+                            variant="outline"
+                            size="iconSm"
+                            onClick={() =>
+                              handleChunkSizeChange((chunkSize - 1).toString())
+                            }
+                          >
+                            <Minus className="text-muted-foreground" size={8} />
+                          </Button>
+                        </div>
                       </div>
                     </div>
+                  </LabelWrapper>
+                </div>
+                <div className="space-y-2">
+                  <LabelWrapper id="chunk-overlap" label="Chunk overlap">
+                    <div className="relative">
+                      <Input
+                        id="chunk-overlap"
+                        type="number"
+                        min="0"
+                        value={chunkOverlap}
+                        onChange={e => handleChunkOverlapChange(e.target.value)}
+                        className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                      />
+                      <div className="absolute inset-y-0 right-0 flex items-center">
+                        <span className="text-sm text-placeholder-foreground mr-4 pointer-events-none">
+                          characters
+                        </span>
+                        <div className="flex flex-col">
+                          <Button
+                            aria-label="Increase value"
+                            className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative"
+                            variant="outline"
+                            size="iconSm"
+                            onClick={() =>
+                              handleChunkOverlapChange(
+                                (chunkOverlap + 1).toString()
+                              )
+                            }
+                          >
+                            <Plus className="text-muted-foreground" size={8} />
+                          </Button>
+                          <Button
+                            aria-label="Decrease value"
+                            className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative"
+                            variant="outline"
+                            size="iconSm"
+                            onClick={() =>
+                              handleChunkOverlapChange(
+                                (chunkOverlap - 1).toString()
+                              )
+                            }
+                          >
+                            <Minus className="text-muted-foreground" size={8} />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </LabelWrapper>
+                </div>
+              </div>
+              <div className="">
+                <div className="flex items-center justify-between py-3 border-b border-border">
+                  <div className="flex-1">
+                    <Label
+                      htmlFor="table-structure"
+                      className="text-base font-medium cursor-pointer pb-3"
+                    >
+                      Table Structure
+                    </Label>
+                    <div className="text-sm text-muted-foreground">
+                      Capture table structure during ingest.
+                    </div>
                   </div>
-                </LabelWrapper>
+                  <Switch
+                    id="table-structure"
+                    checked={tableStructure}
+                    onCheckedChange={handleTableStructureChange}
+                  />
+                </div>
+                <div className="flex items-center justify-between py-3 border-b border-border">
+                  <div className="flex-1">
+                    <Label
+                      htmlFor="ocr"
+                      className="text-base font-medium cursor-pointer pb-3"
+                    >
+                      OCR
+                    </Label>
+                    <div className="text-sm text-muted-foreground">
+                      Extracts text from images/PDFs. Ingest is slower when
+                      enabled.
+                    </div>
+                  </div>
+                  <Switch
+                    id="ocr"
+                    checked={ocr}
+                    onCheckedChange={handleOcrChange}
+                  />
+                </div>
+                <div className="flex items-center justify-between py-3">
+                  <div className="flex-1">
+                    <Label
+                      htmlFor="picture-descriptions"
+                      className="text-base font-medium cursor-pointer pb-3"
+                    >
+                      Picture Descriptions
+                    </Label>
+                    <div className="text-sm text-muted-foreground">
+                      Adds captions for images. Ingest is slower when enabled.
+                    </div>
+                  </div>
+                  <Switch
+                    id="picture-descriptions"
+                    checked={pictureDescriptions}
+                    onCheckedChange={handlePictureDescriptionsChange}
+                  />
+                </div>
               </div>
             </div>
-            <div className="">
-              <div className="flex items-center justify-between py-3 border-b border-border">
-                <div className="flex-1">
-                  <Label
-                    htmlFor="table-structure"
-                    className="text-base font-medium cursor-pointer pb-3"
-                  >
-                    Table Structure
-                  </Label>
-                  <div className="text-sm text-muted-foreground">
-                    Capture table structure during ingest.
-                  </div>
-                </div>
-                <Switch
-                  id="table-structure"
-                  checked={tableStructure}
-                  onCheckedChange={handleTableStructureChange}
-                />
-              </div>
-              <div className="flex items-center justify-between py-3 border-b border-border">
-                <div className="flex-1">
-                  <Label
-                    htmlFor="ocr"
-                    className="text-base font-medium cursor-pointer pb-3"
-                  >
-                    OCR
-                  </Label>
-                  <div className="text-sm text-muted-foreground">
-                    Extracts text from images/PDFs. Ingest is slower when
-                    enabled.
-                  </div>
-                </div>
-                <Switch
-                  id="ocr"
-                  checked={ocr}
-                  onCheckedChange={handleOcrChange}
-                />
-              </div>
-              <div className="flex items-center justify-between py-3">
-                <div className="flex-1">
-                  <Label
-                    htmlFor="picture-descriptions"
-                    className="text-base font-medium cursor-pointer pb-3"
-                  >
-                    Picture Descriptions
-                  </Label>
-                  <div className="text-sm text-muted-foreground">
-                    Adds captions for images. Ingest is slower when enabled.
-                  </div>
-                </div>
-                <Switch
-                  id="picture-descriptions"
-                  checked={pictureDescriptions}
-                  onCheckedChange={handlePictureDescriptionsChange}
-                />
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+          </CardContent>
+        </Card>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/layout-wrapper.tsx b/frontend/src/components/layout-wrapper.tsx
index e67995bd..3f8987f9 100644
--- a/frontend/src/components/layout-wrapper.tsx
+++ b/frontend/src/components/layout-wrapper.tsx
@@ -172,18 +172,16 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
           headerHeight={headerHeight}
           totalTopOffset={totalTopOffset}
         >
-          <div
-            className={cn(
-              "py-6 lg:py-8 px-4 lg:px-6",
-              isSmallWidthPath ? "max-w-[850px]" : "container"
-            )}
-          >
+          <div className={cn("py-6 lg:py-8 px-4 lg:px-6 h-full")}>
             {children}
           </div>
         </LayoutProvider>
       </main>
       <TaskNotificationMenu />
-      <KnowledgeFilterPanel />
+      <KnowledgeFilterPanel
+        totalTopOffset={totalTopOffset}
+        headerHeight={headerHeight}
+      />
     </div>
   );
 }

From 4d21d6afbb6eb472045d5ef5a59506d297805517 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Mon, 6 Oct 2025 14:46:39 -0600
Subject: [PATCH 5/6] refactor: simplify KnowledgeFilterPanel by removing
 unused props and layout context import

---
 frontend/components/knowledge-filter-panel.tsx | 11 +----------
 frontend/src/components/layout-wrapper.tsx     |  4 ----
 2 files changed, 1 insertion(+), 14 deletions(-)

diff --git a/frontend/components/knowledge-filter-panel.tsx b/frontend/components/knowledge-filter-panel.tsx
index 046a66bf..5f55d360 100644
--- a/frontend/components/knowledge-filter-panel.tsx
+++ b/frontend/components/knowledge-filter-panel.tsx
@@ -25,7 +25,6 @@ import {
   FilterIconPopover,
   IconKey,
 } from "@/components/filter-icon-popover";
-import { useLayout } from "@/contexts/layout-context";
 
 interface FacetBucket {
   key: string;
@@ -49,15 +48,7 @@ export const filterAccentClasses: Record<FilterColor, string> = {
   red: "bg-accent-red text-accent-red-foreground",
 };
 
-interface KnowledgeFilterPanelProps {
-  totalTopOffset: number;
-  headerHeight: number;
-}
-
-export function KnowledgeFilterPanel({
-  totalTopOffset,
-  headerHeight,
-}: KnowledgeFilterPanelProps) {
+export function KnowledgeFilterPanel() {
   const {
     queryOverride,
     selectedFilter,
diff --git a/frontend/src/components/layout-wrapper.tsx b/frontend/src/components/layout-wrapper.tsx
index 2f433fa2..14693d21 100644
--- a/frontend/src/components/layout-wrapper.tsx
+++ b/frontend/src/components/layout-wrapper.tsx
@@ -63,10 +63,6 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
   const smallWidthPaths = ["/settings", "/settings/connector/new"];
   const isSmallWidthPath = smallWidthPaths.includes(pathname);
 
-  // List of paths that should not show navigation
-  const authPaths = ["/login", "/auth/callback", "/onboarding"];
-  const isAuthPage = authPaths.includes(pathname);
-
   // Calculate active tasks for the bell icon
   const activeTasks = tasks.filter(
     task =>

From 3b48e4c236c8696982cebccc26f11ef66a48326c Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Mon, 6 Oct 2025 14:57:22 -0600
Subject: [PATCH 6/6] style: adjust padding in KnowledgeFilterPanel and update
 smallWidthPaths in LayoutWrapper

---
 frontend/components/knowledge-filter-panel.tsx | 2 +-
 frontend/src/components/layout-wrapper.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/knowledge-filter-panel.tsx b/frontend/components/knowledge-filter-panel.tsx
index 5f55d360..74040dd6 100644
--- a/frontend/components/knowledge-filter-panel.tsx
+++ b/frontend/components/knowledge-filter-panel.tsx
@@ -234,7 +234,7 @@ export function KnowledgeFilterPanel() {
   return (
     <div className="h-full bg-background border-l">
       <Card className="h-full rounded-none border-0 flex flex-col">
-        <CardHeader className="pb-3">
+        <CardHeader className="pb-3 pt-3">
           <div className="flex items-center justify-between">
             <CardTitle className="text-lg flex items-center gap-2">
               Knowledge Filter
diff --git a/frontend/src/components/layout-wrapper.tsx b/frontend/src/components/layout-wrapper.tsx
index 14693d21..fda7c181 100644
--- a/frontend/src/components/layout-wrapper.tsx
+++ b/frontend/src/components/layout-wrapper.tsx
@@ -60,7 +60,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
   const isOnKnowledgePage = pathname.startsWith("/knowledge");
 
   // List of paths with smaller max-width
-  const smallWidthPaths = ["/settings", "/settings/connector/new"];
+  const smallWidthPaths = ["/settings/connector/new"];
   const isSmallWidthPath = smallWidthPaths.includes(pathname);
 
   // Calculate active tasks for the bell icon