diff --git a/frontend/components/knowledge-dropdown.tsx b/frontend/components/knowledge-dropdown.tsx
index d9f92355..19ddc387 100644
--- a/frontend/components/knowledge-dropdown.tsx
+++ b/frontend/components/knowledge-dropdown.tsx
@@ -2,12 +2,12 @@
 
 import { useQueryClient } from "@tanstack/react-query";
 import {
-	ChevronDown,
-	Cloud,
-	FolderOpen,
-	Loader2,
-	PlugZap,
-	Upload,
+  ChevronDown,
+  Cloud,
+  FolderOpen,
+  Loader2,
+  PlugZap,
+  Upload,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
@@ -16,11 +16,11 @@ import { useGetTasksQuery } from "@/app/api/queries/useGetTasksQuery";
 import { DuplicateHandlingDialog } from "@/components/duplicate-handling-dialog";
 import { Button } from "@/components/ui/button";
 import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -29,620 +29,619 @@ import { cn } from "@/lib/utils";
 import type { File as SearchFile } from "@/src/app/api/queries/useGetSearchQuery";
 
 export function KnowledgeDropdown() {
-	const { addTask } = useTask();
-	const { refetch: refetchTasks } = useGetTasksQuery();
-	const queryClient = useQueryClient();
-	const router = useRouter();
-	const [isOpen, setIsOpen] = useState(false);
-	const [showFolderDialog, setShowFolderDialog] = useState(false);
-	const [showS3Dialog, setShowS3Dialog] = useState(false);
-	const [showDuplicateDialog, setShowDuplicateDialog] = useState(false);
-	const [awsEnabled, setAwsEnabled] = useState(false);
-	const [folderPath, setFolderPath] = useState("/app/documents/");
-	const [bucketUrl, setBucketUrl] = useState("s3://");
-	const [folderLoading, setFolderLoading] = useState(false);
-	const [s3Loading, setS3Loading] = useState(false);
-	const [fileUploading, setFileUploading] = useState(false);
-	const [isNavigatingToCloud, setIsNavigatingToCloud] = useState(false);
-	const [pendingFile, setPendingFile] = useState<File | null>(null);
-	const [duplicateFilename, setDuplicateFilename] = useState<string>("");
-	const [cloudConnectors, setCloudConnectors] = useState<{
-		[key: string]: {
-			name: string;
-			available: boolean;
-			connected: boolean;
-			hasToken: boolean;
-		};
-	}>({});
-	const fileInputRef = useRef<HTMLInputElement>(null);
-	const dropdownRef = useRef<HTMLDivElement>(null);
+  const { addTask } = useTask();
+  const { refetch: refetchTasks } = useGetTasksQuery();
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const [isOpen, setIsOpen] = useState(false);
+  const [showFolderDialog, setShowFolderDialog] = useState(false);
+  const [showS3Dialog, setShowS3Dialog] = useState(false);
+  const [showDuplicateDialog, setShowDuplicateDialog] = useState(false);
+  const [awsEnabled, setAwsEnabled] = useState(false);
+  const [folderPath, setFolderPath] = useState("/app/documents/");
+  const [bucketUrl, setBucketUrl] = useState("s3://");
+  const [folderLoading, setFolderLoading] = useState(false);
+  const [s3Loading, setS3Loading] = useState(false);
+  const [fileUploading, setFileUploading] = useState(false);
+  const [isNavigatingToCloud, setIsNavigatingToCloud] = useState(false);
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
+  const [duplicateFilename, setDuplicateFilename] = useState<string>("");
+  const [cloudConnectors, setCloudConnectors] = useState<{
+    [key: string]: {
+      name: string;
+      available: boolean;
+      connected: boolean;
+      hasToken: boolean;
+    };
+  }>({});
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
-	// Check AWS availability and cloud connectors on mount
-	useEffect(() => {
-		const checkAvailability = async () => {
-			try {
-				// Check AWS
-				const awsRes = await fetch("/api/upload_options");
-				if (awsRes.ok) {
-					const awsData = await awsRes.json();
-					setAwsEnabled(Boolean(awsData.aws));
-				}
+  // Check AWS availability and cloud connectors on mount
+  useEffect(() => {
+    const checkAvailability = async () => {
+      try {
+        // Check AWS
+        const awsRes = await fetch("/api/upload_options");
+        if (awsRes.ok) {
+          const awsData = await awsRes.json();
+          setAwsEnabled(Boolean(awsData.aws));
+        }
 
-				// Check cloud connectors
-				const connectorsRes = await fetch("/api/connectors");
-				if (connectorsRes.ok) {
-					const connectorsResult = await connectorsRes.json();
-					const cloudConnectorTypes = [
-						"google_drive",
-						"onedrive",
-						"sharepoint",
-					];
-					const connectorInfo: {
-						[key: string]: {
-							name: string;
-							available: boolean;
-							connected: boolean;
-							hasToken: boolean;
-						};
-					} = {};
+        // Check cloud connectors
+        const connectorsRes = await fetch("/api/connectors");
+        if (connectorsRes.ok) {
+          const connectorsResult = await connectorsRes.json();
+          const cloudConnectorTypes = [
+            "google_drive",
+            "onedrive",
+            "sharepoint",
+          ];
+          const connectorInfo: {
+            [key: string]: {
+              name: string;
+              available: boolean;
+              connected: boolean;
+              hasToken: boolean;
+            };
+          } = {};
 
-					for (const type of cloudConnectorTypes) {
-						if (connectorsResult.connectors[type]) {
-							connectorInfo[type] = {
-								name: connectorsResult.connectors[type].name,
-								available: connectorsResult.connectors[type].available,
-								connected: false,
-								hasToken: false,
-							};
+          for (const type of cloudConnectorTypes) {
+            if (connectorsResult.connectors[type]) {
+              connectorInfo[type] = {
+                name: connectorsResult.connectors[type].name,
+                available: connectorsResult.connectors[type].available,
+                connected: false,
+                hasToken: false,
+              };
 
-							// Check connection status
-							try {
-								const statusRes = await fetch(`/api/connectors/${type}/status`);
-								if (statusRes.ok) {
-									const statusData = await statusRes.json();
-									const connections = statusData.connections || [];
-									const activeConnection = connections.find(
-										(conn: { is_active: boolean; connection_id: string }) =>
-											conn.is_active,
-									);
-									const isConnected = activeConnection !== undefined;
+              // Check connection status
+              try {
+                const statusRes = await fetch(`/api/connectors/${type}/status`);
+                if (statusRes.ok) {
+                  const statusData = await statusRes.json();
+                  const connections = statusData.connections || [];
+                  const activeConnection = connections.find(
+                    (conn: { is_active: boolean; connection_id: string }) =>
+                      conn.is_active
+                  );
+                  const isConnected = activeConnection !== undefined;
 
-									if (isConnected && activeConnection) {
-										connectorInfo[type].connected = true;
+                  if (isConnected && activeConnection) {
+                    connectorInfo[type].connected = true;
 
-										// Check token availability
-										try {
-											const tokenRes = await fetch(
-												`/api/connectors/${type}/token?connection_id=${activeConnection.connection_id}`,
-											);
-											if (tokenRes.ok) {
-												const tokenData = await tokenRes.json();
-												if (tokenData.access_token) {
-													connectorInfo[type].hasToken = true;
-												}
-											}
-										} catch {
-											// Token check failed
-										}
-									}
-								}
-							} catch {
-								// Status check failed
-							}
-						}
-					}
+                    // Check token availability
+                    try {
+                      const tokenRes = await fetch(
+                        `/api/connectors/${type}/token?connection_id=${activeConnection.connection_id}`
+                      );
+                      if (tokenRes.ok) {
+                        const tokenData = await tokenRes.json();
+                        if (tokenData.access_token) {
+                          connectorInfo[type].hasToken = true;
+                        }
+                      }
+                    } catch {
+                      // Token check failed
+                    }
+                  }
+                }
+              } catch {
+                // Status check failed
+              }
+            }
+          }
 
-					setCloudConnectors(connectorInfo);
-				}
-			} catch (err) {
-				console.error("Failed to check availability", err);
-			}
-		};
-		checkAvailability();
-	}, []);
+          setCloudConnectors(connectorInfo);
+        }
+      } catch (err) {
+        console.error("Failed to check availability", err);
+      }
+    };
+    checkAvailability();
+  }, []);
 
-	// Handle click outside to close dropdown
-	useEffect(() => {
-		const handleClickOutside = (event: MouseEvent) => {
-			if (
-				dropdownRef.current &&
-				!dropdownRef.current.contains(event.target as Node)
-			) {
-				setIsOpen(false);
-			}
-		};
+  // Handle click outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
 
-		if (isOpen) {
-			document.addEventListener("mousedown", handleClickOutside);
-			return () =>
-				document.removeEventListener("mousedown", handleClickOutside);
-		}
-	}, [isOpen]);
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
 
-	const handleFileUpload = () => {
-		fileInputRef.current?.click();
-	};
+  const handleFileUpload = () => {
+    fileInputRef.current?.click();
+  };
 
-	const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-		const files = e.target.files;
-		if (files && files.length > 0) {
-			const file = files[0];
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      const file = files[0];
 
-			// Close dropdown immediately after file selection
-			setIsOpen(false);
+      // Close dropdown immediately after file selection
+      setIsOpen(false);
 
-			try {
-				// Check if filename already exists (using ORIGINAL filename)
-				console.log("[Duplicate Check] Checking file:", file.name);
-				const checkResponse = await fetch(
-					`/api/documents/check-filename?filename=${encodeURIComponent(file.name)}`,
-				);
+      try {
+        // Check if filename already exists (using ORIGINAL filename)
+        console.log("[Duplicate Check] Checking file:", file.name);
+        const checkResponse = await fetch(
+          `/api/documents/check-filename?filename=${encodeURIComponent(
+            file.name
+          )}`
+        );
 
-				console.log("[Duplicate Check] Response status:", checkResponse.status);
+        console.log("[Duplicate Check] Response status:", checkResponse.status);
 
-				if (!checkResponse.ok) {
-					const errorText = await checkResponse.text();
-					console.error("[Duplicate Check] Error response:", errorText);
-					throw new Error(
-						`Failed to check duplicates: ${checkResponse.statusText}`,
-					);
-				}
+        if (!checkResponse.ok) {
+          const errorText = await checkResponse.text();
+          console.error("[Duplicate Check] Error response:", errorText);
+          throw new Error(
+            `Failed to check duplicates: ${checkResponse.statusText}`
+          );
+        }
 
-				const checkData = await checkResponse.json();
-				console.log("[Duplicate Check] Result:", checkData);
+        const checkData = await checkResponse.json();
+        console.log("[Duplicate Check] Result:", checkData);
 
-				if (checkData.exists) {
-					// Show duplicate handling dialog
-					console.log("[Duplicate Check] Duplicate detected, showing dialog");
-					setPendingFile(file);
-					setDuplicateFilename(file.name);
-					setShowDuplicateDialog(true);
-					// Reset file input
-					if (fileInputRef.current) {
-						fileInputRef.current.value = "";
-					}
-					return;
-				}
+        if (checkData.exists) {
+          // Show duplicate handling dialog
+          console.log("[Duplicate Check] Duplicate detected, showing dialog");
+          setPendingFile(file);
+          setDuplicateFilename(file.name);
+          setShowDuplicateDialog(true);
+          // Reset file input
+          if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+          }
+          return;
+        }
 
-				// No duplicate, proceed with upload
-				console.log("[Duplicate Check] No duplicate, proceeding with upload");
-				await uploadFile(file, false);
-			} catch (error) {
-				console.error("[Duplicate Check] Exception:", error);
-				toast.error("Failed to check for duplicates", {
-					description: error instanceof Error ? error.message : "Unknown error",
-				});
-			}
-		}
+        // No duplicate, proceed with upload
+        console.log("[Duplicate Check] No duplicate, proceeding with upload");
+        await uploadFile(file, false);
+      } catch (error) {
+        console.error("[Duplicate Check] Exception:", error);
+        toast.error("Failed to check for duplicates", {
+          description: error instanceof Error ? error.message : "Unknown error",
+        });
+      }
+    }
 
-		// Reset file input
-		if (fileInputRef.current) {
-			fileInputRef.current.value = "";
-		}
-	};
+    // Reset file input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
 
-	const uploadFile = async (file: File, replace: boolean) => {
-		setFileUploading(true);
+  const uploadFile = async (file: File, replace: boolean) => {
+    setFileUploading(true);
 
-		// Trigger the same file upload event as the chat page
-		window.dispatchEvent(
-			new CustomEvent("fileUploadStart", {
-				detail: { filename: file.name },
-			}),
-		);
+    // Trigger the same file upload event as the chat page
+    window.dispatchEvent(
+      new CustomEvent("fileUploadStart", {
+        detail: { filename: file.name },
+      })
+    );
 
-		try {
-			const formData = new FormData();
-			formData.append("file", file);
-			formData.append("replace_duplicates", replace.toString());
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("replace_duplicates", replace.toString());
 
-			// Use router upload and ingest endpoint (automatically routes based on configuration)
-			const uploadIngestRes = await fetch("/api/router/upload_ingest", {
-				method: "POST",
-				body: formData,
-			});
+      // Use router upload and ingest endpoint (automatically routes based on configuration)
+      const uploadIngestRes = await fetch("/api/router/upload_ingest", {
+        method: "POST",
+        body: formData,
+      });
 
-			const uploadIngestJson = await uploadIngestRes.json();
+      const uploadIngestJson = await uploadIngestRes.json();
 
-			if (!uploadIngestRes.ok) {
-				throw new Error(uploadIngestJson?.error || "Upload and ingest failed");
-			}
+      if (!uploadIngestRes.ok) {
+        throw new Error(uploadIngestJson?.error || "Upload and ingest failed");
+      }
 
-			// Extract results from the response - handle both unified and simple formats
-			const fileId =
-				uploadIngestJson?.upload?.id ||
-				uploadIngestJson?.id ||
-				uploadIngestJson?.task_id;
-			const filePath =
-				uploadIngestJson?.upload?.path || uploadIngestJson?.path || "uploaded";
-			const runJson = uploadIngestJson?.ingestion;
-			const deleteResult = uploadIngestJson?.deletion;
-			console.log("c", uploadIngestJson);
-			if (!fileId) {
-				throw new Error("Upload successful but no file id returned");
-			}
-			// Check if ingestion actually succeeded
-			if (
-				runJson &&
-				runJson.status !== "COMPLETED" &&
-				runJson.status !== "SUCCESS"
-			) {
-				const errorMsg = runJson.error || "Ingestion pipeline failed";
-				throw new Error(
-					`Ingestion failed: ${errorMsg}. Try setting DISABLE_INGEST_WITH_LANGFLOW=true if you're experiencing Langflow component issues.`,
-				);
-			}
-			// Log deletion status if provided
-			if (deleteResult) {
-				if (deleteResult.status === "deleted") {
-					console.log(
-						"File successfully cleaned up from Langflow:",
-						deleteResult.file_id,
-					);
-				} else if (deleteResult.status === "delete_failed") {
-					console.warn(
-						"Failed to cleanup file from Langflow:",
-						deleteResult.error,
-					);
-				}
-			}
-			// Notify UI
-			window.dispatchEvent(
-				new CustomEvent("fileUploaded", {
-					detail: {
-						file: file,
-						result: {
-							file_id: fileId,
-							file_path: filePath,
-							run: runJson,
-							deletion: deleteResult,
-							unified: true,
-						},
-					},
-				}),
-			);
+      // Extract results from the response - handle both unified and simple formats
+      const fileId =
+        uploadIngestJson?.upload?.id ||
+        uploadIngestJson?.id ||
+        uploadIngestJson?.task_id;
+      const filePath =
+        uploadIngestJson?.upload?.path || uploadIngestJson?.path || "uploaded";
+      const runJson = uploadIngestJson?.ingestion;
+      const deleteResult = uploadIngestJson?.deletion;
+      console.log("c", uploadIngestJson);
+      if (!fileId) {
+        throw new Error("Upload successful but no file id returned");
+      }
+      // Check if ingestion actually succeeded
+      if (
+        runJson &&
+        runJson.status !== "COMPLETED" &&
+        runJson.status !== "SUCCESS"
+      ) {
+        const errorMsg = runJson.error || "Ingestion pipeline failed";
+        throw new Error(
+          `Ingestion failed: ${errorMsg}. Try setting DISABLE_INGEST_WITH_LANGFLOW=true if you're experiencing Langflow component issues.`
+        );
+      }
+      // Log deletion status if provided
+      if (deleteResult) {
+        if (deleteResult.status === "deleted") {
+          console.log(
+            "File successfully cleaned up from Langflow:",
+            deleteResult.file_id
+          );
+        } else if (deleteResult.status === "delete_failed") {
+          console.warn(
+            "Failed to cleanup file from Langflow:",
+            deleteResult.error
+          );
+        }
+      }
+      // Notify UI
+      window.dispatchEvent(
+        new CustomEvent("fileUploaded", {
+          detail: {
+            file: file,
+            result: {
+              file_id: fileId,
+              file_path: filePath,
+              run: runJson,
+              deletion: deleteResult,
+              unified: true,
+            },
+          },
+        })
+      );
 
-			refetchTasks();
-		} catch (error) {
-			window.dispatchEvent(
-				new CustomEvent("fileUploadError", {
-					detail: {
-						filename: file.name,
-						error: error instanceof Error ? error.message : "Upload failed",
-					},
-				}),
-			);
-		} finally {
-			window.dispatchEvent(new CustomEvent("fileUploadComplete"));
-			setFileUploading(false);
-		}
-	};
+      refetchTasks();
+    } catch (error) {
+      window.dispatchEvent(
+        new CustomEvent("fileUploadError", {
+          detail: {
+            filename: file.name,
+            error: error instanceof Error ? error.message : "Upload failed",
+          },
+        })
+      );
+    } finally {
+      window.dispatchEvent(new CustomEvent("fileUploadComplete"));
+      setFileUploading(false);
+    }
+  };
 
-	const handleOverwriteFile = async () => {
-		if (pendingFile) {
-			// Remove the old file from all search query caches before overwriting
-			queryClient.setQueriesData({ queryKey: ["search"] }, (oldData: []) => {
-				if (!oldData) return oldData;
-				// Filter out the file that's being overwritten
-				return oldData.filter(
-					(file: SearchFile) => file.filename !== pendingFile.name,
-				);
-			});
+  const handleOverwriteFile = async () => {
+    if (pendingFile) {
+      // Remove the old file from all search query caches before overwriting
+      queryClient.setQueriesData({ queryKey: ["search"] }, (oldData: []) => {
+        if (!oldData) return oldData;
+        // Filter out the file that's being overwritten
+        return oldData.filter(
+          (file: SearchFile) => file.filename !== pendingFile.name
+        );
+      });
 
-			await uploadFile(pendingFile, true);
-			setPendingFile(null);
-			setDuplicateFilename("");
-		}
-	};
+      await uploadFile(pendingFile, true);
+      setPendingFile(null);
+      setDuplicateFilename("");
+    }
+  };
 
-	const handleFolderUpload = async () => {
-		if (!folderPath.trim()) return;
+  const handleFolderUpload = async () => {
+    if (!folderPath.trim()) return;
 
-		setFolderLoading(true);
-		setShowFolderDialog(false);
+    setFolderLoading(true);
+    setShowFolderDialog(false);
 
-		try {
-			const response = await fetch("/api/upload_path", {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-				body: JSON.stringify({ path: folderPath }),
-			});
+    try {
+      const response = await fetch("/api/upload_path", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ path: folderPath }),
+      });
 
-			const result = await response.json();
+      const result = await response.json();
 
-			if (response.status === 201) {
-				const taskId = result.task_id || result.id;
+      if (response.status === 201) {
+        const taskId = result.task_id || result.id;
 
-				if (!taskId) {
-					throw new Error("No task ID received from server");
-				}
+        if (!taskId) {
+          throw new Error("No task ID received from server");
+        }
 
-				addTask(taskId);
-				setFolderPath("");
-				// Refetch tasks to show the new task
-				refetchTasks();
-			} else if (response.ok) {
-				setFolderPath("");
-				// Refetch tasks even for direct uploads in case tasks were created
-				refetchTasks();
-			} else {
-				console.error("Folder upload failed:", result.error);
-				if (response.status === 400) {
-					toast.error("Upload failed", {
-						description: result.error || "Bad request",
-					});
-				}
-			}
-		} catch (error) {
-			console.error("Folder upload error:", error);
-		} finally {
-			setFolderLoading(false);
-		}
-	};
+        addTask(taskId);
+        setFolderPath("");
+        // Refetch tasks to show the new task
+        refetchTasks();
+      } else if (response.ok) {
+        setFolderPath("");
+        // Refetch tasks even for direct uploads in case tasks were created
+        refetchTasks();
+      } else {
+        console.error("Folder upload failed:", result.error);
+        if (response.status === 400) {
+          toast.error("Upload failed", {
+            description: result.error || "Bad request",
+          });
+        }
+      }
+    } catch (error) {
+      console.error("Folder upload error:", error);
+    } finally {
+      setFolderLoading(false);
+    }
+  };
 
-	const handleS3Upload = async () => {
-		if (!bucketUrl.trim()) return;
+  const handleS3Upload = async () => {
+    if (!bucketUrl.trim()) return;
 
-		setS3Loading(true);
-		setShowS3Dialog(false);
+    setS3Loading(true);
+    setShowS3Dialog(false);
 
-		try {
-			const response = await fetch("/api/upload_bucket", {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-				body: JSON.stringify({ s3_url: bucketUrl }),
-			});
+    try {
+      const response = await fetch("/api/upload_bucket", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ s3_url: bucketUrl }),
+      });
 
-			const result = await response.json();
+      const result = await response.json();
 
-			if (response.status === 201) {
-				const taskId = result.task_id || result.id;
+      if (response.status === 201) {
+        const taskId = result.task_id || result.id;
 
-				if (!taskId) {
-					throw new Error("No task ID received from server");
-				}
+        if (!taskId) {
+          throw new Error("No task ID received from server");
+        }
 
-				addTask(taskId);
-				setBucketUrl("s3://");
-				// Refetch tasks to show the new task
-				refetchTasks();
-			} else {
-				console.error("S3 upload failed:", result.error);
-				if (response.status === 400) {
-					toast.error("Upload failed", {
-						description: result.error || "Bad request",
-					});
-				}
-			}
-		} catch (error) {
-			console.error("S3 upload error:", error);
-		} finally {
-			setS3Loading(false);
-		}
-	};
+        addTask(taskId);
+        setBucketUrl("s3://");
+        // Refetch tasks to show the new task
+        refetchTasks();
+      } else {
+        console.error("S3 upload failed:", result.error);
+        if (response.status === 400) {
+          toast.error("Upload failed", {
+            description: result.error || "Bad request",
+          });
+        }
+      }
+    } catch (error) {
+      console.error("S3 upload error:", error);
+    } finally {
+      setS3Loading(false);
+    }
+  };
 
-	const cloudConnectorItems = Object.entries(cloudConnectors)
-		.filter(([, info]) => info.available)
-		.map(([type, info]) => ({
-			label: info.name,
-			icon: PlugZap,
-			onClick: async () => {
-				setIsOpen(false);
-				if (info.connected && info.hasToken) {
-					setIsNavigatingToCloud(true);
-					try {
-						router.push(`/upload/${type}`);
-						// Keep loading state for a short time to show feedback
-						setTimeout(() => setIsNavigatingToCloud(false), 1000);
-					} catch {
-						setIsNavigatingToCloud(false);
-					}
-				} else {
-					router.push("/settings");
-				}
-			},
-			disabled: !info.connected || !info.hasToken,
-			tooltip: !info.connected
-				? `Connect ${info.name} in Settings first`
-				: !info.hasToken
-					? `Reconnect ${info.name} - access token required`
-					: undefined,
-		}));
+  const cloudConnectorItems = Object.entries(cloudConnectors)
+    .filter(([, info]) => info.available)
+    .map(([type, info]) => ({
+      label: info.name,
+      icon: PlugZap,
+      onClick: async () => {
+        setIsOpen(false);
+        if (info.connected && info.hasToken) {
+          setIsNavigatingToCloud(true);
+          try {
+            router.push(`/upload/${type}`);
+            // Keep loading state for a short time to show feedback
+            setTimeout(() => setIsNavigatingToCloud(false), 1000);
+          } catch {
+            setIsNavigatingToCloud(false);
+          }
+        } else {
+          router.push("/settings");
+        }
+      },
+      disabled: !info.connected || !info.hasToken,
+      tooltip: !info.connected
+        ? `Connect ${info.name} in Settings first`
+        : !info.hasToken
+        ? `Reconnect ${info.name} - access token required`
+        : undefined,
+    }));
 
-	const menuItems = [
-		{
-			label: "Add File",
-			icon: Upload,
-			onClick: handleFileUpload,
-		},
-		{
-			label: "Process Folder",
-			icon: FolderOpen,
-			onClick: () => {
-				setIsOpen(false);
-				setShowFolderDialog(true);
-			},
-		},
-		...(awsEnabled
-			? [
-					{
-						label: "Process S3 Bucket",
-						icon: Cloud,
-						onClick: () => {
-							setIsOpen(false);
-							setShowS3Dialog(true);
-						},
-					},
-				]
-			: []),
-		...cloudConnectorItems,
-	];
+  const menuItems = [
+    {
+      label: "Add File",
+      icon: Upload,
+      onClick: handleFileUpload,
+    },
+    {
+      label: "Process Folder",
+      icon: FolderOpen,
+      onClick: () => {
+        setIsOpen(false);
+        setShowFolderDialog(true);
+      },
+    },
+    ...(awsEnabled
+      ? [
+          {
+            label: "Process S3 Bucket",
+            icon: Cloud,
+            onClick: () => {
+              setIsOpen(false);
+              setShowS3Dialog(true);
+            },
+          },
+        ]
+      : []),
+    ...cloudConnectorItems,
+  ];
 
-	// Comprehensive loading state
-	const isLoading =
-		fileUploading || folderLoading || s3Loading || isNavigatingToCloud;
+  // Comprehensive loading state
+  const isLoading =
+    fileUploading || folderLoading || s3Loading || isNavigatingToCloud;
 
-	return (
-		<>
-			<div ref={dropdownRef} className="relative">
-				<Button
-					type="button"
-					onClick={() => !isLoading && setIsOpen(!isOpen)}
-					disabled={isLoading}
-				>
-			
-						<>
-							{isLoading && 
-								<Loader2 className="h-4 w-4 animate-spin" />
-							}
-							<span>
-								{isLoading
-									? fileUploading
-										? "Uploading..."
-										: folderLoading
-											? "Processing Folder..."
-											: s3Loading
-												? "Processing S3..."
-												: isNavigatingToCloud
-													? "Loading..."
-													: "Processing..."
-									: "Add Knowledge"}
-							</span>
-							{!isLoading && (
-								<ChevronDown
-									className={cn(
-										"h-4 w-4 transition-transform",
-										isOpen && "rotate-180",
-									)}
-								/>
-							)}
-						</>
-				</Button>
+  return (
+    <>
+      <div ref={dropdownRef} className="relative">
+        <Button
+          type="button"
+          onClick={() => !isLoading && setIsOpen(!isOpen)}
+          disabled={isLoading}
+        >
+          <>
+            {isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
+            <span>
+              {isLoading
+                ? fileUploading
+                  ? "Uploading..."
+                  : folderLoading
+                  ? "Processing Folder..."
+                  : s3Loading
+                  ? "Processing S3..."
+                  : isNavigatingToCloud
+                  ? "Loading..."
+                  : "Processing..."
+                : "Add Knowledge"}
+            </span>
+            {!isLoading && (
+              <ChevronDown
+                className={cn(
+                  "h-4 w-4 transition-transform",
+                  isOpen && "rotate-180"
+                )}
+              />
+            )}
+          </>
+        </Button>
 
-				{isOpen && !isLoading && (
-					<div className="absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-md z-50">
-						<div className="py-1">
-							{menuItems.map((item, index) => (
-								<button
-									key={`${item.label}-${index}`}
-									type="button"
-									onClick={item.onClick}
-									disabled={"disabled" in item ? item.disabled : false}
-									title={"tooltip" in item ? item.tooltip : undefined}
-									className={cn(
-										"w-full px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground",
-										"disabled" in item &&
-											item.disabled &&
-											"opacity-50 cursor-not-allowed hover:bg-transparent hover:text-current",
-									)}
-								>
-									{item.label}
-								</button>
-							))}
-						</div>
-					</div>
-				)}
+        {isOpen && !isLoading && (
+          <div className="absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-md z-50">
+            <div className="py-1">
+              {menuItems.map((item, index) => (
+                <button
+                  key={`${item.label}-${index}`}
+                  type="button"
+                  onClick={item.onClick}
+                  disabled={"disabled" in item ? item.disabled : false}
+                  title={"tooltip" in item ? item.tooltip : undefined}
+                  className={cn(
+                    "w-full px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground",
+                    "disabled" in item &&
+                      item.disabled &&
+                      "opacity-50 cursor-not-allowed hover:bg-transparent hover:text-current"
+                  )}
+                >
+                  {item.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
 
-				<input
-					ref={fileInputRef}
-					type="file"
-					onChange={handleFileChange}
-					className="hidden"
-					accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
-				/>
-			</div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          onChange={handleFileChange}
+          className="hidden"
+          accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
+        />
+      </div>
 
-			{/* Process Folder Dialog */}
-			<Dialog open={showFolderDialog} onOpenChange={setShowFolderDialog}>
-				<DialogContent>
-					<DialogHeader>
-						<DialogTitle className="flex items-center gap-2">
-							<FolderOpen className="h-5 w-5" />
-							Process Folder
-						</DialogTitle>
-						<DialogDescription>
-							Process all documents in a folder path
-						</DialogDescription>
-					</DialogHeader>
-					<div className="space-y-4">
-						<div className="space-y-2">
-							<Label htmlFor="folder-path">Folder Path</Label>
-							<Input
-								id="folder-path"
-								type="text"
-								placeholder="/path/to/documents"
-								value={folderPath}
-								onChange={(e) => setFolderPath(e.target.value)}
-							/>
-						</div>
-						<div className="flex justify-end gap-2">
-							<Button
-								variant="outline"
-								onClick={() => setShowFolderDialog(false)}
-							>
-								Cancel
-							</Button>
-							<Button
-								onClick={handleFolderUpload}
-								disabled={!folderPath.trim() || folderLoading}
-							>
-								{folderLoading ? "Processing..." : "Process Folder"}
-							</Button>
-						</div>
-					</div>
-				</DialogContent>
-			</Dialog>
+      {/* Process Folder Dialog */}
+      <Dialog open={showFolderDialog} onOpenChange={setShowFolderDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <FolderOpen className="h-5 w-5" />
+              Process Folder
+            </DialogTitle>
+            <DialogDescription>
+              Process all documents in a folder path
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="folder-path">Folder Path</Label>
+              <Input
+                id="folder-path"
+                type="text"
+                placeholder="/path/to/documents"
+                value={folderPath}
+                onChange={e => setFolderPath(e.target.value)}
+              />
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="outline"
+                onClick={() => setShowFolderDialog(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleFolderUpload}
+                disabled={!folderPath.trim() || folderLoading}
+              >
+                {folderLoading ? "Processing..." : "Process Folder"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
 
-			{/* Process S3 Bucket Dialog */}
-			<Dialog open={showS3Dialog} onOpenChange={setShowS3Dialog}>
-				<DialogContent>
-					<DialogHeader>
-						<DialogTitle className="flex items-center gap-2">
-							<Cloud className="h-5 w-5" />
-							Process S3 Bucket
-						</DialogTitle>
-						<DialogDescription>
-							Process all documents from an S3 bucket. AWS credentials must be
-							configured.
-						</DialogDescription>
-					</DialogHeader>
-					<div className="space-y-4">
-						<div className="space-y-2">
-							<Label htmlFor="bucket-url">S3 URL</Label>
-							<Input
-								id="bucket-url"
-								type="text"
-								placeholder="s3://bucket/path"
-								value={bucketUrl}
-								onChange={(e) => setBucketUrl(e.target.value)}
-							/>
-						</div>
-						<div className="flex justify-end gap-2">
-							<Button variant="outline" onClick={() => setShowS3Dialog(false)}>
-								Cancel
-							</Button>
-							<Button
-								onClick={handleS3Upload}
-								disabled={!bucketUrl.trim() || s3Loading}
-							>
-								{s3Loading ? "Processing..." : "Process Bucket"}
-							</Button>
-						</div>
-					</div>
-				</DialogContent>
-			</Dialog>
+      {/* Process S3 Bucket Dialog */}
+      <Dialog open={showS3Dialog} onOpenChange={setShowS3Dialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Cloud className="h-5 w-5" />
+              Process S3 Bucket
+            </DialogTitle>
+            <DialogDescription>
+              Process all documents from an S3 bucket. AWS credentials must be
+              configured.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="bucket-url">S3 URL</Label>
+              <Input
+                id="bucket-url"
+                type="text"
+                placeholder="s3://bucket/path"
+                value={bucketUrl}
+                onChange={e => setBucketUrl(e.target.value)}
+              />
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button variant="outline" onClick={() => setShowS3Dialog(false)}>
+                Cancel
+              </Button>
+              <Button
+                onClick={handleS3Upload}
+                disabled={!bucketUrl.trim() || s3Loading}
+              >
+                {s3Loading ? "Processing..." : "Process Bucket"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
 
-			{/* Duplicate Handling Dialog */}
-			<DuplicateHandlingDialog
-				open={showDuplicateDialog}
-				onOpenChange={setShowDuplicateDialog}
-				onOverwrite={handleOverwriteFile}
-				isLoading={fileUploading}
-			/>
-		</>
-	);
+      {/* Duplicate Handling Dialog */}
+      <DuplicateHandlingDialog
+        open={showDuplicateDialog}
+        onOpenChange={setShowDuplicateDialog}
+        onOverwrite={handleOverwriteFile}
+        isLoading={fileUploading}
+      />
+    </>
+  );
 }
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/components/knowledge-filter-panel.tsx b/frontend/components/knowledge-filter-panel.tsx
index d0dd8196..74040dd6 100644
--- a/frontend/components/knowledge-filter-panel.tsx
+++ b/frontend/components/knowledge-filter-panel.tsx
@@ -136,7 +136,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,
   });
@@ -214,7 +214,7 @@ export function KnowledgeFilterPanel() {
     facetType: keyof typeof selectedFilters,
     newValues: string[]
   ) => {
-    setSelectedFilters((prev) => ({
+    setSelectedFilters(prev => ({
       ...prev,
       [facetType]: newValues,
     }));
@@ -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
@@ -271,7 +271,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()) {
@@ -302,7 +302,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}
               />
@@ -319,7 +319,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}
               disabled={!!queryOverride && !createMode}
             />
@@ -329,13 +329,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..."
@@ -345,15 +345,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..."
@@ -363,13 +361,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"
               />
@@ -378,14 +376,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..."
@@ -405,7 +403,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)
@@ -418,7 +416,7 @@ export function KnowledgeFilterPanel() {
                 </div>
                 <Slider
                   value={[resultLimit]}
-                  onValueChange={(values) => setResultLimit(values[0])}
+                  onValueChange={values => setResultLimit(values[0])}
                   max={1000}
                   min={1}
                   step={1}
@@ -438,7 +436,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"
@@ -447,7 +445,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 c543fc35..8bae1e84 100644
--- a/frontend/src/app/chat/page.tsx
+++ b/frontend/src/app/chat/page.tsx
@@ -230,7 +230,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();
@@ -282,7 +282,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
 
@@ -296,7 +296,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) {
@@ -305,7 +305,7 @@ function ChatPage() {
 
         // Update the response ID for this endpoint
         if (result.response_id) {
-          setPreviousResponseIds((prev) => ({
+          setPreviousResponseIds(prev => ({
             ...prev,
             [endpoint]: result.response_id,
           }));
@@ -329,7 +329,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);
@@ -620,7 +620,7 @@ function ChatPage() {
       lastLoadedConversationRef.current = conversationData.response_id;
 
       // Set the previous response ID for this conversation
-      setPreviousResponseIds((prev) => ({
+      setPreviousResponseIds(prev => ({
         ...prev,
         [conversationData.endpoint]: conversationData.response_id,
       }));
@@ -662,7 +662,7 @@ function ChatPage() {
         content: `🔄 Starting upload of **${filename}**...`,
         timestamp: new Date(),
       };
-      setMessages((prev) => [...prev, uploadStartMessage]);
+      setMessages(prev => [...prev, uploadStartMessage]);
     };
 
     const handleFileUploaded = (event: CustomEvent) => {
@@ -680,11 +680,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,
         }));
@@ -711,7 +711,7 @@ 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(
@@ -1007,7 +1007,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);
@@ -1040,13 +1040,13 @@ function ChatPage() {
 
                   // 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)
@@ -1077,7 +1077,7 @@ function ChatPage() {
                     currentFunctionCalls.push(functionCall);
                     console.log(
                       "🟢 Function calls now:",
-                      currentFunctionCalls.map((fc) => ({
+                      currentFunctionCalls.map(fc => ({
                         id: fc.id,
                         name: fc.name,
                       }))
@@ -1150,7 +1150,7 @@ function ChatPage() {
                   );
                   console.log(
                     "🔵 Looking for existing function calls:",
-                    currentFunctionCalls.map((fc) => ({
+                    currentFunctionCalls.map(fc => ({
                       id: fc.id,
                       name: fc.name,
                     }))
@@ -1158,7 +1158,7 @@ function ChatPage() {
 
                   // 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
@@ -1206,7 +1206,7 @@ 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 ||
@@ -1261,13 +1261,13 @@ function ChatPage() {
 
                   // 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 ===
@@ -1306,7 +1306,7 @@ 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,
@@ -1404,7 +1404,7 @@ function ChatPage() {
       };
 
       if (!controller.signal.aborted && thisStreamId === streamIdRef.current) {
-        setMessages((prev) => [...prev, finalMessage]);
+        setMessages(prev => [...prev, finalMessage]);
         setStreamingMessage(null);
         if (previousResponseIds[endpoint]) {
           cancelNudges();
@@ -1417,7 +1417,7 @@ function ChatPage() {
         !controller.signal.aborted &&
         thisStreamId === streamIdRef.current
       ) {
-        setPreviousResponseIds((prev) => ({
+        setPreviousResponseIds(prev => ({
           ...prev,
           [endpoint]: newResponseId,
         }));
@@ -1445,7 +1445,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]);
     }
   };
 
@@ -1458,7 +1458,7 @@ function ChatPage() {
       timestamp: new Date(),
     };
 
-    setMessages((prev) => [...prev, userMessage]);
+    setMessages(prev => [...prev, userMessage]);
     setInput("");
     setLoading(true);
     setIsFilterHighlighted(false);
@@ -1524,14 +1524,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,
             }));
@@ -1552,7 +1552,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);
@@ -1562,7 +1562,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]);
       }
     }
 
@@ -1575,7 +1575,7 @@ function ChatPage() {
   };
 
   const toggleFunctionCall = (functionCallId: string) => {
-    setExpandedFunctionCalls((prev) => {
+    setExpandedFunctionCalls(prev => {
       const newSet = new Set(prev);
       if (newSet.has(functionCallId)) {
         newSet.delete(functionCallId);
@@ -1632,7 +1632,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,
       }));
@@ -1903,7 +1903,7 @@ function ChatPage() {
     }
 
     if (isFilterDropdownOpen) {
-      const filteredFilters = availableFilters.filter((filter) =>
+      const filteredFilters = availableFilters.filter(filter =>
         filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase())
       );
 
@@ -1921,7 +1921,7 @@ function ChatPage() {
 
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setSelectedFilterIndex((prev) =>
+        setSelectedFilterIndex(prev =>
           prev < filteredFilters.length - 1 ? prev + 1 : 0
         );
         return;
@@ -1929,7 +1929,7 @@ function ChatPage() {
 
       if (e.key === "ArrowUp") {
         e.preventDefault();
-        setSelectedFilterIndex((prev) =>
+        setSelectedFilterIndex(prev =>
           prev > 0 ? prev - 1 : filteredFilters.length - 1
         );
         return;
@@ -2159,7 +2159,7 @@ function ChatPage() {
                         {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"
                             >
@@ -2223,8 +2223,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 && (
@@ -2257,7 +2257,7 @@ function ChatPage() {
                   value={input}
                   onChange={onChange}
                   onKeyDown={handleKeyDown}
-                  onHeightChange={(height) => setTextareaHeight(height)}
+                  onHeightChange={height => setTextareaHeight(height)}
                   maxRows={7}
                   minRows={2}
                   placeholder="Type to ask a question..."
@@ -2286,7 +2286,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}
@@ -2296,7 +2296,7 @@ function ChatPage() {
             </Button>
             <Popover
               open={isFilterDropdownOpen}
-              onOpenChange={(open) => {
+              onOpenChange={open => {
                 setIsFilterDropdownOpen(open);
               }}
             >
@@ -2321,7 +2321,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
@@ -2354,7 +2354,7 @@ function ChatPage() {
                         </button>
                       )}
                       {availableFilters
-                        .filter((filter) =>
+                        .filter(filter =>
                           filter.name
                             .toLowerCase()
                             .includes(filterSearchTerm.toLowerCase())
@@ -2383,7 +2383,7 @@ function ChatPage() {
                             )}
                           </button>
                         ))}
-                      {availableFilters.filter((filter) =>
+                      {availableFilters.filter(filter =>
                         filter.name
                           .toLowerCase()
                           .includes(filterSearchTerm.toLowerCase())
diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 0d6d54a4..080120cc 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -14,19 +14,19 @@ import { Label } from "@/components/ui/label";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
 import { useTask } from "@/contexts/task-context";
 import {
-	type ChunkResult,
-	type File,
-	useGetSearchQuery,
+  type ChunkResult,
+  type File,
+  useGetSearchQuery,
 } from "../../api/queries/useGetSearchQuery";
 // import { Label } from "@/components/ui/label";
 // import { Checkbox } from "@/components/ui/checkbox";
 import { KnowledgeSearchInput } from "@/components/knowledge-search-input";
 
 const getFileTypeLabel = (mimetype: string) => {
-	if (mimetype === "application/pdf") return "PDF";
-	if (mimetype === "text/plain") return "Text";
-	if (mimetype === "application/msword") return "Word Document";
-	return "Unknown";
+  if (mimetype === "application/pdf") return "PDF";
+  if (mimetype === "text/plain") return "Text";
+  if (mimetype === "application/msword") return "Word Document";
+  return "Unknown";
 };
 
 function ChunksPageContent() {
@@ -43,13 +43,13 @@ function ChunksPageContent() {
     number | null
   >(null);
 
-	// Calculate average chunk length
-	const averageChunkLength = useMemo(
-		() =>
-			chunks.reduce((acc, chunk) => acc + chunk.text.length, 0) /
-				chunks.length || 0,
-		[chunks],
-	);
+  // Calculate average chunk length
+  const averageChunkLength = useMemo(
+    () =>
+      chunks.reduce((acc, chunk) => acc + chunk.text.length, 0) /
+        chunks.length || 0,
+    [chunks]
+  );
 
   // const [selectAll, setSelectAll] = useState(false);
 
@@ -59,70 +59,70 @@ function ChunksPageContent() {
     parsedFilterData
   );
 
-	const handleCopy = useCallback((text: string, index: number) => {
-		// Trim whitespace and remove new lines/tabs for cleaner copy
-		navigator.clipboard.writeText(text.trim().replace(/[\n\r\t]/gm, ""));
-		setActiveCopiedChunkIndex(index);
-		setTimeout(() => setActiveCopiedChunkIndex(null), 10 * 1000); // 10 seconds
-	}, []);
+  const handleCopy = useCallback((text: string, index: number) => {
+    // Trim whitespace and remove new lines/tabs for cleaner copy
+    navigator.clipboard.writeText(text.trim().replace(/[\n\r\t]/gm, ""));
+    setActiveCopiedChunkIndex(index);
+    setTimeout(() => setActiveCopiedChunkIndex(null), 10 * 1000); // 10 seconds
+  }, []);
 
-	const fileData = (data as File[]).find(
-		(file: File) => file.filename === filename,
-	);
+  const fileData = (data as File[]).find(
+    (file: File) => file.filename === filename
+  );
 
-	// Extract chunks for the specific file
-	useEffect(() => {
-		if (!filename || !(data as File[]).length) {
-			setChunks([]);
-			return;
-		}
+  // Extract chunks for the specific file
+  useEffect(() => {
+    if (!filename || !(data as File[]).length) {
+      setChunks([]);
+      return;
+    }
 
-		setChunks(
-			fileData?.chunks?.map((chunk, i) => ({ ...chunk, index: i + 1 })) || [],
-		);
-	}, [data, filename]);
+    setChunks(
+      fileData?.chunks?.map((chunk, i) => ({ ...chunk, index: i + 1 })) || []
+    );
+  }, [data, filename]);
 
-	// Set selected state for all checkboxes when selectAll changes
-	useEffect(() => {
-		if (selectAll) {
-			setSelectedChunks(new Set(chunks.map((_, index) => index)));
-		} else {
-			setSelectedChunks(new Set());
-		}
-	}, [selectAll, setSelectedChunks, chunks]);
+  // Set selected state for all checkboxes when selectAll changes
+  useEffect(() => {
+    if (selectAll) {
+      setSelectedChunks(new Set(chunks.map((_, index) => index)));
+    } else {
+      setSelectedChunks(new Set());
+    }
+  }, [selectAll, setSelectedChunks, chunks]);
 
-	const handleBack = useCallback(() => {
-		router.push("/knowledge");
-	}, [router]);
+  const handleBack = useCallback(() => {
+    router.push("/knowledge");
+  }, [router]);
 
-	// const handleChunkCardCheckboxChange = useCallback(
-	//   (index: number) => {
-	//     setSelectedChunks((prevSelected) => {
-	//       const newSelected = new Set(prevSelected);
-	//       if (newSelected.has(index)) {
-	//         newSelected.delete(index);
-	//       } else {
-	//         newSelected.add(index);
-	//       }
-	//       return newSelected;
-	//     });
-	//   },
-	//   [setSelectedChunks]
-	// );
+  // const handleChunkCardCheckboxChange = useCallback(
+  //   (index: number) => {
+  //     setSelectedChunks((prevSelected) => {
+  //       const newSelected = new Set(prevSelected);
+  //       if (newSelected.has(index)) {
+  //         newSelected.delete(index);
+  //       } else {
+  //         newSelected.add(index);
+  //       }
+  //       return newSelected;
+  //     });
+  //   },
+  //   [setSelectedChunks]
+  // );
 
-	if (!filename) {
-		return (
-			<div className="flex items-center justify-center h-64">
-				<div className="text-center">
-					<Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
-					<p className="text-lg text-muted-foreground">No file specified</p>
-					<p className="text-sm text-muted-foreground/70 mt-2">
-						Please select a file from the knowledge page
-					</p>
-				</div>
-			</div>
-		);
-	}
+  if (!filename) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+          <p className="text-lg text-muted-foreground">No file specified</p>
+          <p className="text-sm text-muted-foreground/70 mt-2">
+            Please select a file from the knowledge page
+          </p>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="flex flex-col h-full">
@@ -149,7 +149,7 @@ function ChunksPageContent() {
               <Checkbox
                 id="selectAllChunks"
                 checked={selectAll}
-                onCheckedChange={(handleSelectAll) =>
+                onCheckedChange={handleSelectAll =>
                   setSelectAll(!!handleSelectAll)
                 }
               />
@@ -160,8 +160,8 @@ function ChunksPageContent() {
                 Select all
               </Label>
             </div> */}
-					</div>
-				</div>
+          </div>
+        </div>
 
         {/* Content Area - matches knowledge page structure */}
         <div className="flex-1 overflow-auto pr-6">
@@ -200,73 +200,73 @@ function ChunksPageContent() {
                           }
                         />
                       </div> */}
-											<span className="text-sm font-bold">
-												Chunk {chunk.index}
-											</span>
-											<span className="bg-background p-1 rounded text-xs text-muted-foreground/70">
-												{chunk.text.length} chars
-											</span>
-											<div className="py-1">
-												<Button
-													onClick={() => handleCopy(chunk.text, index)}
-													variant="ghost"
-													size="sm"
-												>
-													{activeCopiedChunkIndex === index ? (
-														<Check className="text-muted-foreground" />
-													) : (
-														<Copy className="text-muted-foreground" />
-													)}
-												</Button>
-											</div>
-										</div>
+                      <span className="text-sm font-bold">
+                        Chunk {chunk.index}
+                      </span>
+                      <span className="bg-background p-1 rounded text-xs text-muted-foreground/70">
+                        {chunk.text.length} chars
+                      </span>
+                      <div className="py-1">
+                        <Button
+                          onClick={() => handleCopy(chunk.text, index)}
+                          variant="ghost"
+                          size="sm"
+                        >
+                          {activeCopiedChunkIndex === index ? (
+                            <Check className="text-muted-foreground" />
+                          ) : (
+                            <Copy className="text-muted-foreground" />
+                          )}
+                        </Button>
+                      </div>
+                    </div>
 
-										<span className="bg-background p-1 rounded text-xs text-muted-foreground/70">
-											{chunk.score.toFixed(2)} score
-										</span>
+                    <span className="bg-background p-1 rounded text-xs text-muted-foreground/70">
+                      {chunk.score.toFixed(2)} score
+                    </span>
 
-										{/* TODO: Update to use active toggle */}
-										{/* <span className="px-2 py-1 text-green-500">
+                    {/* TODO: Update to use active toggle */}
+                    {/* <span className="px-2 py-1 text-green-500">
                       <Switch
                         className="ml-2 bg-green-500"
                         checked={true}
                       />
                       Active
                     </span> */}
-									</div>
-									<blockquote className="text-sm text-muted-foreground leading-relaxed ml-1.5">
-										{chunk.text}
-									</blockquote>
-								</div>
-							))}
-						</div>
-					)}
-				</div>
-			</div>
-			{/* Right panel - Summary (TODO), Technical details,  */}
-			{chunks.length > 0 && (
-				<div className="w-[320px] py-20 px-2">
-					<div className="mb-8">
-						<h2 className="text-xl font-semibold mt-3 mb-4">
-							Technical details
-						</h2>
-						<dl>
-							<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
-								<dt className="text-sm/6 text-muted-foreground">
-									Total chunks
-								</dt>
-								<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
-									{chunks.length}
-								</dd>
-							</div>
-							<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
-								<dt className="text-sm/6 text-muted-foreground">Avg length</dt>
-								<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
-									{averageChunkLength.toFixed(0)} chars
-								</dd>
-							</div>
-							{/* TODO: Uncomment after data is available */}
-							{/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+                  </div>
+                  <blockquote className="text-sm text-muted-foreground leading-relaxed ml-1.5">
+                    {chunk.text}
+                  </blockquote>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+      {/* Right panel - Summary (TODO), Technical details,  */}
+      {chunks.length > 0 && (
+        <div className="w-[320px] py-20 px-2">
+          <div className="mb-8">
+            <h2 className="text-xl font-semibold mt-3 mb-4">
+              Technical details
+            </h2>
+            <dl>
+              <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+                <dt className="text-sm/6 text-muted-foreground">
+                  Total chunks
+                </dt>
+                <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                  {chunks.length}
+                </dd>
+              </div>
+              <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+                <dt className="text-sm/6 text-muted-foreground">Avg length</dt>
+                <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                  {averageChunkLength.toFixed(0)} chars
+                </dd>
+              </div>
+              {/* TODO: Uncomment after data is available */}
+              {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
               <dt className="text-sm/6 text-muted-foreground">Process time</dt>
               <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
               </dd>
@@ -276,79 +276,79 @@ function ChunksPageContent() {
               <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
               </dd>
             </div> */}
-						</dl>
-					</div>
-					<div className="mb-8">
-						<h2 className="text-xl font-semibold mt-2 mb-3">
-							Original document
-						</h2>
-						<dl>
-							{/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+            </dl>
+          </div>
+          <div className="mb-8">
+            <h2 className="text-xl font-semibold mt-2 mb-3">
+              Original document
+            </h2>
+            <dl>
+              {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
               <dt className="text-sm/6 text-muted-foreground">Name</dt>
               <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
                 {fileData?.filename}
               </dd>
             </div> */}
-							<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
-								<dt className="text-sm/6 text-muted-foreground">Type</dt>
-								<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
-									{fileData ? getFileTypeLabel(fileData.mimetype) : "Unknown"}
-								</dd>
-							</div>
-							<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
-								<dt className="text-sm/6 text-muted-foreground">Size</dt>
-								<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
-									{fileData?.size
-										? `${Math.round(fileData.size / 1024)} KB`
-										: "Unknown"}
-								</dd>
-							</div>
-							{/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+                <dt className="text-sm/6 text-muted-foreground">Type</dt>
+                <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                  {fileData ? getFileTypeLabel(fileData.mimetype) : "Unknown"}
+                </dd>
+              </div>
+              <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+                <dt className="text-sm/6 text-muted-foreground">Size</dt>
+                <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                  {fileData?.size
+                    ? `${Math.round(fileData.size / 1024)} KB`
+                    : "Unknown"}
+                </dd>
+              </div>
+              {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
               <dt className="text-sm/6 text-muted-foreground">Uploaded</dt>
               <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
                 N/A
               </dd>
             </div> */}
-							{/* TODO: Uncomment after data is available */}
-							{/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              {/* TODO: Uncomment after data is available */}
+              {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
               <dt className="text-sm/6 text-muted-foreground">Source</dt>
               <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"></dd>
             </div> */}
-							{/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
               <dt className="text-sm/6 text-muted-foreground">Updated</dt>
               <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
                 N/A
               </dd>
             </div> */}
-						</dl>
-					</div>
-				</div>
-			)}
-		</div>
-	);
+            </dl>
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }
 
 function ChunksPage() {
-	return (
-		<Suspense
-			fallback={
-				<div className="flex items-center justify-center h-64">
-					<div className="text-center">
-						<Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
-						<p className="text-lg text-muted-foreground">Loading...</p>
-					</div>
-				</div>
-			}
-		>
-			<ChunksPageContent />
-		</Suspense>
-	);
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center h-64">
+          <div className="text-center">
+            <Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
+            <p className="text-lg text-muted-foreground">Loading...</p>
+          </div>
+        </div>
+      }
+    >
+      <ChunksPageContent />
+    </Suspense>
+  );
 }
 
 export default function ProtectedChunksPage() {
-	return (
-		<ProtectedRoute>
-			<ChunksPage />
-		</ProtectedRoute>
-	);
+  return (
+    <ProtectedRoute>
+      <ChunksPage />
+    </ProtectedRoute>
+  );
 }
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index d4aebec8..334f8e6f 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -69,7 +69,7 @@ function SearchPage() {
     parsedFilterData
   );
   // 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,
@@ -82,12 +82,12 @@ function SearchPage() {
 
   // Create a map of task files by filename for quick lookup
   const taskFileMap = new Map(
-    taskFilesAsFiles.map((file) => [file.filename, file])
+    taskFilesAsFiles.map(file => [file.filename, file])
   );
 
   // Override backend files with task file status if they exist
   const backendFiles = (searchData as File[])
-    .map((file) => {
+    .map(file => {
       const taskFile = taskFileMap.get(file.filename);
       if (taskFile) {
         // Override backend file with task file data (includes status)
@@ -95,17 +95,17 @@ function SearchPage() {
       }
       return file;
     })
-    .filter((file) => {
+    .filter(file => {
       // Only filter out files that are currently processing AND in taskFiles
       const taskFile = taskFileMap.get(file.filename);
       return !taskFile || taskFile.status !== "processing";
     });
 
-  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
       )
     );
   });
@@ -184,7 +184,6 @@ function SearchPage() {
     {
       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">
@@ -246,7 +245,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 })
       );
 
@@ -345,7 +344,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 2a5541e7..325ee161 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,33 +17,33 @@ 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 {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from "@/components/ui/tooltip";
 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";
@@ -57,582 +57,582 @@ 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();
+  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);
+  // 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>(true);
-	const [ocr, setOcr] = useState<boolean>(false);
-	const [pictureDescriptions, setPictureDescriptions] =
-		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>(true);
+  const [ocr, setOcr] = useState<boolean>(false);
+  const [pictureDescriptions, setPictureDescriptions] =
+    useState<boolean>(false);
 
-	// Fetch settings using React Query
-	const { data: settings = {} } = useGetSettingsQuery({
-		enabled: isAuthenticated || isNoAuthMode,
-	});
+  // 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;
+  // 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",
-		},
-	);
+  // 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: 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",
-		},
-	);
+  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
+  // 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);
-		},
-	});
+  // 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,
-	);
+  // 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 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]);
+  // 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]);
+  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]);
+  // 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?.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]);
+  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 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 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 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 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 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 });
-	};
+  // 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 handleOcrChange = (checked: boolean) => {
+    setOcr(checked);
+    updateFlowSettingMutation.mutate({ ocr: checked });
+  };
 
-	const handlePictureDescriptionsChange = (checked: boolean) => {
-		setPictureDescriptions(checked);
-		updateFlowSettingMutation.mutate({ picture_descriptions: 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>
-			)
-		);
-	}, []);
+  // 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");
-			}
+  // 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);
+      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,
-				}));
+      // 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);
+      setConnectors(initialConnectors);
 
-			// Check status for each connector type
+      // 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;
+      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]);
+          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 }));
+  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`;
+    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,
-				}),
-			});
+      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 (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);
+        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}`;
+          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);
-		}
-	};
+          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;
+  // const handleSync = async (connector: Connector) => {
+  //   if (!connector.connectionId) return;
 
-	//   setIsSyncing(connector.id);
-	//   setSyncResults(prev => ({ ...prev, [connector.id]: null }));
+  //   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,
-	//     };
+  //   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
+  //     // 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 response = await fetch(`/api/connectors/${connector.type}/sync`, {
+  //       method: "POST",
+  //       headers: {
+  //         "Content-Type": "application/json",
+  //       },
+  //       body: JSON.stringify(syncBody),
+  //     });
 
-	//     const result = await response.json();
+  //     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);
-	//   }
-	// };
+  //     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 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}`);
-	};
+  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();
-		}
+  // 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]);
+    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>([]);
+  // 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;
-		});
+  // 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);
+    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);
+      // Update previous tasks state
+      setPrevTasks(tasks);
 
-			return () => clearTimeout(timeoutId);
-		} else {
-			// Always update previous tasks state
-			setPrevTasks(tasks);
-		}
-	}, [tasks, prevTasks]);
+      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 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 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;
+    const url = editUrl || computed;
 
-		window.open(url, "_blank");
-		closeDialog(); // Close immediately after opening Langflow
-	};
+    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 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)
-			});
-	};
+  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 pb-6">
-			{/* Connectors Section */}
-			<div className="space-y-6">
-				<div>
-					<h2 className="text-lg font-semibold tracking-tight mb-2">
-						Cloud Connectors
-					</h2>
-				</div>
+  return (
+    <div className="space-y-8 pb-6">
+      {/* 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 */}
+        {/* Conditional Sync Settings or No-Auth Message */}
         {
           isNoAuthMode ? (
             <Card className="border-yellow-500">
@@ -681,565 +681,566 @@ function KnowledgeSourcesPage() {
               </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 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>
+        {/* 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>
+                      {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 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>
-								</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>
-	);
+      {/* 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 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>
+                </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 dbd04fea..fda7c181 100644
--- a/frontend/src/components/layout-wrapper.tsx
+++ b/frontend/src/components/layout-wrapper.tsx
@@ -60,12 +60,12 @@ 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
   const activeTasks = tasks.filter(
-    (task) =>
+    task =>
       task.status === "pending" ||
       task.status === "running" ||
       task.status === "processing"
diff --git a/src/api/langflow_files.py b/src/api/langflow_files.py
index 0226d4d5..ba4c9877 100644
--- a/src/api/langflow_files.py
+++ b/src/api/langflow_files.py
@@ -56,6 +56,7 @@ async def run_ingestion(
         payload = await request.json()
         file_ids = payload.get("file_ids")
         file_paths = payload.get("file_paths") or []
+        file_metadata = payload.get("file_metadata") or []  # List of {filename, mimetype, size}
         session_id = payload.get("session_id")
         tweaks = payload.get("tweaks") or {}
         settings = payload.get("settings", {})
@@ -66,6 +67,21 @@ async def run_ingestion(
                 {"error": "Provide file_paths or file_ids"}, status_code=400
             )
 
+        # Build file_tuples from file_metadata if provided, otherwise use empty strings
+        file_tuples = []
+        for i, file_path in enumerate(file_paths):
+            if i < len(file_metadata):
+                meta = file_metadata[i]
+                filename = meta.get("filename", "")
+                mimetype = meta.get("mimetype", "application/octet-stream")
+                # For files already uploaded, we don't have content, so use empty bytes
+                file_tuples.append((filename, b"", mimetype))
+            else:
+                # Extract filename from path if no metadata provided
+                import os
+                filename = os.path.basename(file_path)
+                file_tuples.append((filename, b"", "application/octet-stream"))
+
         # Convert UI settings to component tweaks using exact component IDs
         if settings:
             logger.debug("Applying ingestion settings", settings=settings)
@@ -114,6 +130,7 @@ async def run_ingestion(
 
         result = await langflow_file_service.run_ingestion_flow(
             file_paths=file_paths or [],
+            file_tuples=file_tuples,
             jwt_token=jwt_token,
             session_id=session_id,
             tweaks=tweaks,
diff --git a/src/connectors/langflow_connector_service.py b/src/connectors/langflow_connector_service.py
index 545c6190..d1a62c4b 100644
--- a/src/connectors/langflow_connector_service.py
+++ b/src/connectors/langflow_connector_service.py
@@ -96,6 +96,7 @@ class LangflowConnectorService:
 
                 ingestion_result = await self.langflow_service.run_ingestion_flow(
                     file_paths=[langflow_file_path],
+                    file_tuples=[file_tuple],
                     jwt_token=jwt_token,
                     tweaks=tweaks,
                     owner=owner_user_id,
diff --git a/src/services/langflow_file_service.py b/src/services/langflow_file_service.py
index 1bce86f0..017431bf 100644
--- a/src/services/langflow_file_service.py
+++ b/src/services/langflow_file_service.py
@@ -60,6 +60,7 @@ class LangflowFileService:
     async def run_ingestion_flow(
         self,
         file_paths: List[str],
+        file_tuples: list[tuple[str, str, str]],
         jwt_token: str,
         session_id: Optional[str] = None,
         tweaks: Optional[Dict[str, Any]] = None,
@@ -67,7 +68,6 @@ class LangflowFileService:
         owner_name: Optional[str] = None,
         owner_email: Optional[str] = None,
         connector_type: Optional[str] = None,
-        file_tuples: Optional[list[tuple[str, str, str]]] = None,
     ) -> Dict[str, Any]:
         """
         Trigger the ingestion flow with provided file paths.
@@ -135,14 +135,19 @@ class LangflowFileService:
         # To compute the file size in bytes, use len() on the file content (which should be bytes)
         file_size_bytes = len(file_tuples[0][1]) if file_tuples and len(file_tuples[0]) > 1 else 0
         # Avoid logging full payload to prevent leaking sensitive data (e.g., JWT)
+
+        # Extract file metadata if file_tuples is provided
+        filename = str(file_tuples[0][0]) if file_tuples and len(file_tuples) > 0 else ""
+        mimetype = str(file_tuples[0][2]) if file_tuples and len(file_tuples) > 0 and len(file_tuples[0]) > 2 else ""
+
         headers={
                 "X-Langflow-Global-Var-JWT": str(jwt_token),
                 "X-Langflow-Global-Var-OWNER": str(owner),
                 "X-Langflow-Global-Var-OWNER_NAME": str(owner_name),
                 "X-Langflow-Global-Var-OWNER_EMAIL": str(owner_email),
                 "X-Langflow-Global-Var-CONNECTOR_TYPE": str(connector_type),
-                "X-Langflow-Global-Var-FILENAME": str(file_tuples[0][0]),
-                "X-Langflow-Global-Var-MIMETYPE": str(file_tuples[0][2]),
+                "X-Langflow-Global-Var-FILENAME": filename,
+                "X-Langflow-Global-Var-MIMETYPE": mimetype,
                 "X-Langflow-Global-Var-FILESIZE": str(file_size_bytes),
             }
         logger.info(f"[LF] Headers {headers}")
@@ -271,14 +276,14 @@ class LangflowFileService:
         try:
             ingest_result = await self.run_ingestion_flow(
                 file_paths=[file_path],
+                file_tuples=[file_tuple],
+                jwt_token=jwt_token,
                 session_id=session_id,
                 tweaks=final_tweaks,
-                jwt_token=jwt_token,
                 owner=owner,
                 owner_name=owner_name,
                 owner_email=owner_email,
                 connector_type=connector_type,
-                file_tuples=[file_tuple],
             )
             logger.debug("[LF] Ingestion completed successfully")
         except Exception as e: