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

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

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