From 85de6c8026f89e7421827c4b61762fbb6d0f70b0 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Fri, 3 Oct 2025 15:56:08 -0500
Subject: [PATCH] sweeeeeeeep

---
 frontend/components/knowledge-dropdown.tsx    |  18 +-
 .../src/app/api/queries/useGetSearchQuery.ts  |   2 +-
 frontend/src/app/chat/page.tsx                | 176 +++++++++---------
 frontend/src/app/knowledge/page.tsx           |  59 ++++--
 .../app/settings/icons/google-drive-icon.tsx  |   3 +-
 .../src/app/settings/icons/one-drive-icon.tsx |   3 +-
 .../app/settings/icons/share-point-icon.tsx   |   3 +-
 .../src/components/AgGrid/agGridStyles.css    |   3 +
 .../ui/animated-processing-icon.tsx           |  99 ++++++----
 frontend/src/components/ui/status-badge.tsx   |   4 +-
 .../src/contexts/knowledge-filter-context.tsx |   5 +
 11 files changed, 215 insertions(+), 160 deletions(-)

diff --git a/frontend/components/knowledge-dropdown.tsx b/frontend/components/knowledge-dropdown.tsx
index b6a9fea5..6a1f7df0 100644
--- a/frontend/components/knowledge-dropdown.tsx
+++ b/frontend/components/knowledge-dropdown.tsx
@@ -3,10 +3,10 @@
 import {
   ChevronDown,
   Cloud,
+  File,
   FolderOpen,
   Loader2,
   PlugZap,
-  Upload,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
@@ -23,6 +23,9 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useTask } from "@/contexts/task-context";
 import { cn } from "@/lib/utils";
+import GoogleDriveIcon from "@/app/settings/icons/google-drive-icon";
+import SharePointIcon from "@/app/settings/icons/share-point-icon";
+import OneDriveIcon from "@/app/settings/icons/one-drive-icon";
 
 export function KnowledgeDropdown() {
   const { addTask } = useTask();
@@ -48,6 +51,15 @@ export function KnowledgeDropdown() {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
+  const connectorIconMap: Record<
+    string,
+    React.ComponentType<{ className?: string }>
+  > = {
+    google_drive: GoogleDriveIcon,
+    sharepoint: SharePointIcon,
+    onedrive: OneDriveIcon,
+  };
+
   // Check AWS availability and cloud connectors on mount
   useEffect(() => {
     const checkAvailability = async () => {
@@ -368,7 +380,7 @@ export function KnowledgeDropdown() {
     .filter(([, info]) => info.available)
     .map(([type, info]) => ({
       label: info.name,
-      icon: PlugZap,
+      icon: connectorIconMap[type] || PlugZap,
       onClick: async () => {
         setIsOpen(false);
         if (info.connected && info.hasToken) {
@@ -395,7 +407,7 @@ export function KnowledgeDropdown() {
   const menuItems = [
     {
       label: "Add File",
-      icon: Upload,
+      icon: File,
       onClick: handleFileUpload,
     },
     {
diff --git a/frontend/src/app/api/queries/useGetSearchQuery.ts b/frontend/src/app/api/queries/useGetSearchQuery.ts
index 5383178d..15aec51c 100644
--- a/frontend/src/app/api/queries/useGetSearchQuery.ts
+++ b/frontend/src/app/api/queries/useGetSearchQuery.ts
@@ -179,7 +179,7 @@ export const useGetSearchQuery = (
 
   const queryResult = useQuery(
     {
-      queryKey: ["search", queryData],
+      queryKey: ["search", queryData, query],
       placeholderData: (prev) => prev,
       queryFn: getFiles,
       ...options,
diff --git a/frontend/src/app/chat/page.tsx b/frontend/src/app/chat/page.tsx
index 01ee43c7..c543fc35 100644
--- a/frontend/src/app/chat/page.tsx
+++ b/frontend/src/app/chat/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import {
-  AtSign,
   Bot,
   Check,
   ChevronDown,
@@ -11,7 +10,6 @@ import {
   Loader2,
   Plus,
   Settings,
-  Upload,
   User,
   X,
   Zap,
@@ -150,8 +148,8 @@ function ChatPage() {
   const streamAbortRef = useRef<AbortController | null>(null);
   const streamIdRef = useRef(0);
   const lastLoadedConversationRef = useRef<string | null>(null);
-  const { addTask, isMenuOpen } = useTask();
-  const { selectedFilter, parsedFilterData, isPanelOpen, setSelectedFilter } =
+  const { addTask } = useTask();
+  const { selectedFilter, parsedFilterData, setSelectedFilter } =
     useKnowledgeFilter();
 
   const scrollToBottom = () => {
@@ -258,7 +256,7 @@ function ChatPage() {
           "Upload failed with status:",
           response.status,
           "Response:",
-          errorText,
+          errorText
         );
         throw new Error("Failed to process document");
       }
@@ -468,7 +466,7 @@ function ChatPage() {
       console.log(
         "Loading conversation with",
         conversationData.messages.length,
-        "messages",
+        "messages"
       );
       // Convert backend message format to frontend Message interface
       const convertedMessages: Message[] = conversationData.messages.map(
@@ -596,7 +594,7 @@ function ChatPage() {
                       ) === "string"
                         ? toolCall.function?.arguments || toolCall.arguments
                         : JSON.stringify(
-                            toolCall.function?.arguments || toolCall.arguments,
+                            toolCall.function?.arguments || toolCall.arguments
                           ),
                     result: toolCall.result,
                     status: "completed",
@@ -615,7 +613,7 @@ function ChatPage() {
           }
 
           return message;
-        },
+        }
       );
 
       setMessages(convertedMessages);
@@ -704,7 +702,7 @@ function ChatPage() {
       console.log(
         "Chat page received file upload error event:",
         filename,
-        error,
+        error
       );
 
       // Replace the last message with error message
@@ -718,43 +716,43 @@ function ChatPage() {
 
     window.addEventListener(
       "fileUploadStart",
-      handleFileUploadStart as EventListener,
+      handleFileUploadStart as EventListener
     );
     window.addEventListener(
       "fileUploaded",
-      handleFileUploaded as EventListener,
+      handleFileUploaded as EventListener
     );
     window.addEventListener(
       "fileUploadComplete",
-      handleFileUploadComplete as EventListener,
+      handleFileUploadComplete as EventListener
     );
     window.addEventListener(
       "fileUploadError",
-      handleFileUploadError as EventListener,
+      handleFileUploadError as EventListener
     );
 
     return () => {
       window.removeEventListener(
         "fileUploadStart",
-        handleFileUploadStart as EventListener,
+        handleFileUploadStart as EventListener
       );
       window.removeEventListener(
         "fileUploaded",
-        handleFileUploaded as EventListener,
+        handleFileUploaded as EventListener
       );
       window.removeEventListener(
         "fileUploadComplete",
-        handleFileUploadComplete as EventListener,
+        handleFileUploadComplete as EventListener
       );
       window.removeEventListener(
         "fileUploadError",
-        handleFileUploadError as EventListener,
+        handleFileUploadError as EventListener
       );
     };
   }, [endpoint, setPreviousResponseIds]);
 
   const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery(
-    previousResponseIds[endpoint],
+    previousResponseIds[endpoint]
   );
 
   const handleSSEStream = async (userMessage: Message) => {
@@ -859,7 +857,7 @@ function ChatPage() {
                 console.log(
                   "Received chunk:",
                   chunk.type || chunk.object,
-                  chunk,
+                  chunk
                 );
 
                 // Extract response ID if present
@@ -875,14 +873,14 @@ function ChatPage() {
                   if (chunk.delta.function_call) {
                     console.log(
                       "Function call in delta:",
-                      chunk.delta.function_call,
+                      chunk.delta.function_call
                     );
 
                     // Check if this is a new function call
                     if (chunk.delta.function_call.name) {
                       console.log(
                         "New function call:",
-                        chunk.delta.function_call.name,
+                        chunk.delta.function_call.name
                       );
                       const functionCall: FunctionCall = {
                         name: chunk.delta.function_call.name,
@@ -898,7 +896,7 @@ function ChatPage() {
                     else if (chunk.delta.function_call.arguments) {
                       console.log(
                         "Function call arguments delta:",
-                        chunk.delta.function_call.arguments,
+                        chunk.delta.function_call.arguments
                       );
                       const lastFunctionCall =
                         currentFunctionCalls[currentFunctionCalls.length - 1];
@@ -910,14 +908,14 @@ function ChatPage() {
                           chunk.delta.function_call.arguments;
                         console.log(
                           "Accumulated arguments:",
-                          lastFunctionCall.argumentsString,
+                          lastFunctionCall.argumentsString
                         );
 
                         // Try to parse arguments if they look complete
                         if (lastFunctionCall.argumentsString.includes("}")) {
                           try {
                             const parsed = JSON.parse(
-                              lastFunctionCall.argumentsString,
+                              lastFunctionCall.argumentsString
                             );
                             lastFunctionCall.arguments = parsed;
                             lastFunctionCall.status = "completed";
@@ -925,7 +923,7 @@ function ChatPage() {
                           } catch (e) {
                             console.log(
                               "Arguments not yet complete or invalid JSON:",
-                              e,
+                              e
                             );
                           }
                         }
@@ -958,7 +956,7 @@ function ChatPage() {
                         else if (toolCall.function.arguments) {
                           console.log(
                             "Tool call arguments delta:",
-                            toolCall.function.arguments,
+                            toolCall.function.arguments
                           );
                           const lastFunctionCall =
                             currentFunctionCalls[
@@ -972,7 +970,7 @@ function ChatPage() {
                               toolCall.function.arguments;
                             console.log(
                               "Accumulated tool arguments:",
-                              lastFunctionCall.argumentsString,
+                              lastFunctionCall.argumentsString
                             );
 
                             // Try to parse arguments if they look complete
@@ -981,7 +979,7 @@ function ChatPage() {
                             ) {
                               try {
                                 const parsed = JSON.parse(
-                                  lastFunctionCall.argumentsString,
+                                  lastFunctionCall.argumentsString
                                 );
                                 lastFunctionCall.arguments = parsed;
                                 lastFunctionCall.status = "completed";
@@ -989,7 +987,7 @@ function ChatPage() {
                               } catch (e) {
                                 console.log(
                                   "Tool arguments not yet complete or invalid JSON:",
-                                  e,
+                                  e
                                 );
                               }
                             }
@@ -1021,7 +1019,7 @@ function ChatPage() {
                           console.log(
                             "Error parsing function call on finish:",
                             fc,
-                            e,
+                            e
                           );
                         }
                       }
@@ -1037,12 +1035,12 @@ function ChatPage() {
                   console.log(
                     "🟢 CREATING function call (added):",
                     chunk.item.id,
-                    chunk.item.tool_name || chunk.item.name,
+                    chunk.item.tool_name || chunk.item.name
                   );
 
                   // Try to find an existing pending call to update (created by earlier deltas)
                   let existing = currentFunctionCalls.find(
-                    (fc) => fc.id === chunk.item.id,
+                    (fc) => fc.id === chunk.item.id
                   );
                   if (!existing) {
                     existing = [...currentFunctionCalls]
@@ -1051,7 +1049,7 @@ function ChatPage() {
                         (fc) =>
                           fc.status === "pending" &&
                           !fc.id &&
-                          fc.name === (chunk.item.tool_name || chunk.item.name),
+                          fc.name === (chunk.item.tool_name || chunk.item.name)
                       );
                   }
 
@@ -1064,7 +1062,7 @@ function ChatPage() {
                       chunk.item.inputs || existing.arguments;
                     console.log(
                       "🟢 UPDATED existing pending function call with id:",
-                      existing.id,
+                      existing.id
                     );
                   } else {
                     const functionCall: FunctionCall = {
@@ -1082,7 +1080,7 @@ function ChatPage() {
                       currentFunctionCalls.map((fc) => ({
                         id: fc.id,
                         name: fc.name,
-                      })),
+                      }))
                     );
                   }
                 }
@@ -1093,7 +1091,7 @@ function ChatPage() {
                 ) {
                   console.log(
                     "Function args delta (Realtime API):",
-                    chunk.delta,
+                    chunk.delta
                   );
                   const lastFunctionCall =
                     currentFunctionCalls[currentFunctionCalls.length - 1];
@@ -1104,7 +1102,7 @@ function ChatPage() {
                     lastFunctionCall.argumentsString += chunk.delta || "";
                     console.log(
                       "Accumulated arguments (Realtime API):",
-                      lastFunctionCall.argumentsString,
+                      lastFunctionCall.argumentsString
                     );
                   }
                 }
@@ -1115,26 +1113,26 @@ function ChatPage() {
                 ) {
                   console.log(
                     "Function args done (Realtime API):",
-                    chunk.arguments,
+                    chunk.arguments
                   );
                   const lastFunctionCall =
                     currentFunctionCalls[currentFunctionCalls.length - 1];
                   if (lastFunctionCall) {
                     try {
                       lastFunctionCall.arguments = JSON.parse(
-                        chunk.arguments || "{}",
+                        chunk.arguments || "{}"
                       );
                       lastFunctionCall.status = "completed";
                       console.log(
                         "Parsed function arguments (Realtime API):",
-                        lastFunctionCall.arguments,
+                        lastFunctionCall.arguments
                       );
                     } catch (e) {
                       lastFunctionCall.arguments = { raw: chunk.arguments };
                       lastFunctionCall.status = "error";
                       console.log(
                         "Error parsing function arguments (Realtime API):",
-                        e,
+                        e
                       );
                     }
                   }
@@ -1148,14 +1146,14 @@ function ChatPage() {
                   console.log(
                     "🔵 UPDATING function call (done):",
                     chunk.item.id,
-                    chunk.item.tool_name || chunk.item.name,
+                    chunk.item.tool_name || chunk.item.name
                   );
                   console.log(
                     "🔵 Looking for existing function calls:",
                     currentFunctionCalls.map((fc) => ({
                       id: fc.id,
                       name: fc.name,
-                    })),
+                    }))
                   );
 
                   // Find existing function call by ID or name
@@ -1163,14 +1161,14 @@ function ChatPage() {
                     (fc) =>
                       fc.id === chunk.item.id ||
                       fc.name === chunk.item.tool_name ||
-                      fc.name === chunk.item.name,
+                      fc.name === chunk.item.name
                   );
 
                   if (functionCall) {
                     console.log(
                       "🔵 FOUND existing function call, updating:",
                       functionCall.id,
-                      functionCall.name,
+                      functionCall.name
                     );
                     // Update existing function call with completion data
                     functionCall.status =
@@ -1193,7 +1191,7 @@ function ChatPage() {
                       "🔴 WARNING: Could not find existing function call to update:",
                       chunk.item.id,
                       chunk.item.tool_name,
-                      chunk.item.name,
+                      chunk.item.name
                     );
                   }
                 }
@@ -1214,7 +1212,7 @@ function ChatPage() {
                       fc.name === chunk.item.name ||
                       fc.name === chunk.item.type ||
                       fc.name.includes(chunk.item.type.replace("_call", "")) ||
-                      chunk.item.type.includes(fc.name),
+                      chunk.item.type.includes(fc.name)
                   );
 
                   if (functionCall) {
@@ -1258,12 +1256,12 @@ function ChatPage() {
                     "🟡 CREATING tool call (added):",
                     chunk.item.id,
                     chunk.item.tool_name || chunk.item.name,
-                    chunk.item.type,
+                    chunk.item.type
                   );
 
                   // Dedupe by id or pending with same name
                   let existing = currentFunctionCalls.find(
-                    (fc) => fc.id === chunk.item.id,
+                    (fc) => fc.id === chunk.item.id
                   );
                   if (!existing) {
                     existing = [...currentFunctionCalls]
@@ -1275,7 +1273,7 @@ function ChatPage() {
                           fc.name ===
                             (chunk.item.tool_name ||
                               chunk.item.name ||
-                              chunk.item.type),
+                              chunk.item.type)
                       );
                   }
 
@@ -1291,7 +1289,7 @@ function ChatPage() {
                       chunk.item.inputs || existing.arguments;
                     console.log(
                       "🟡 UPDATED existing pending tool call with id:",
-                      existing.id,
+                      existing.id
                     );
                   } else {
                     const functionCall = {
@@ -1312,7 +1310,7 @@ function ChatPage() {
                         id: fc.id,
                         name: fc.name,
                         type: fc.type,
-                      })),
+                      }))
                     );
                   }
                 }
@@ -1590,7 +1588,7 @@ function ChatPage() {
 
   const handleForkConversation = (
     messageIndex: number,
-    event?: React.MouseEvent,
+    event?: React.MouseEvent
   ) => {
     // Prevent any default behavior and stop event propagation
     if (event) {
@@ -1655,7 +1653,7 @@ function ChatPage() {
 
   const renderFunctionCalls = (
     functionCalls: FunctionCall[],
-    messageIndex?: number,
+    messageIndex?: number
   ) => {
     if (!functionCalls || functionCalls.length === 0) return null;
 
@@ -1906,7 +1904,7 @@ function ChatPage() {
 
     if (isFilterDropdownOpen) {
       const filteredFilters = availableFilters.filter((filter) =>
-        filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase()),
+        filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase())
       );
 
       if (e.key === "Escape") {
@@ -1924,7 +1922,7 @@ function ChatPage() {
       if (e.key === "ArrowDown") {
         e.preventDefault();
         setSelectedFilterIndex((prev) =>
-          prev < filteredFilters.length - 1 ? prev + 1 : 0,
+          prev < filteredFilters.length - 1 ? prev + 1 : 0
         );
         return;
       }
@@ -1932,7 +1930,7 @@ function ChatPage() {
       if (e.key === "ArrowUp") {
         e.preventDefault();
         setSelectedFilterIndex((prev) =>
-          prev > 0 ? prev - 1 : filteredFilters.length - 1,
+          prev > 0 ? prev - 1 : filteredFilters.length - 1
         );
         return;
       }
@@ -2029,7 +2027,7 @@ function ChatPage() {
 
       // Get button position for popover anchoring
       const button = document.querySelector(
-        "[data-filter-button]",
+        "[data-filter-button]"
       ) as HTMLElement;
       if (button) {
         const rect = button.getBoundingClientRect();
@@ -2045,20 +2043,10 @@ function ChatPage() {
   };
 
   return (
-    <div
-      className={`fixed inset-0 md:left-72 top-[53px] 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
-      }`}
-    >
+    <div className="flex flex-col h-full">
       {/* 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">
           <div className="flex items-center gap-2"></div>
           <div className="flex items-center gap-4">
             {/* Async Mode Toggle */}
@@ -2164,7 +2152,7 @@ function ChatPage() {
                         <div className="flex-1 min-w-0">
                           {renderFunctionCalls(
                             message.functionCalls || [],
-                            index,
+                            index
                           )}
                           <MarkdownRenderer chatMessage={message.content} />
                         </div>
@@ -2193,7 +2181,7 @@ function ChatPage() {
                     <div className="flex-1">
                       {renderFunctionCalls(
                         streamingMessage.functionCalls,
-                        messages.length,
+                        messages.length
                       )}
                       <MarkdownRenderer
                         chatMessage={streamingMessage.content}
@@ -2260,29 +2248,31 @@ function ChatPage() {
                   </span>
                 </div>
               )}
-              <div className="relative" style={{height: `${textareaHeight + 60}px`}}>
-              <TextareaAutosize
-                ref={inputRef}
-                value={input}
-                onChange={onChange}
-                onKeyDown={handleKeyDown}
-                onHeightChange={(height) => setTextareaHeight(height)}
-                maxRows={7}
-                minRows={2}
-                placeholder="Type to ask a question..."
-                disabled={loading}
-                className={`w-full bg-transparent px-4 ${
-                  selectedFilter ? "pt-2" : "pt-4"
-                } focus-visible:outline-none resize-none`}
-                rows={2}
-              />
+              <div
+                className="relative"
+                style={{ height: `${textareaHeight + 60}px` }}
+              >
+                <TextareaAutosize
+                  ref={inputRef}
+                  value={input}
+                  onChange={onChange}
+                  onKeyDown={handleKeyDown}
+                  onHeightChange={(height) => setTextareaHeight(height)}
+                  maxRows={7}
+                  minRows={2}
+                  placeholder="Type to ask a question..."
+                  disabled={loading}
+                  className={`w-full bg-transparent px-4 ${
+                    selectedFilter ? "pt-2" : "pt-4"
+                  } focus-visible:outline-none resize-none`}
+                  rows={2}
+                />
                 {/* Safe area at bottom for buttons */}
-                <div 
+                <div
                   className="absolute bottom-0 left-0 right-0 bg-transparent pointer-events-none"
-                  style={{ height: '60px' }}
+                  style={{ height: "60px" }}
                 />
               </div>
-              
             </div>
             <input
               ref={fileInputRef}
@@ -2367,7 +2357,7 @@ function ChatPage() {
                         .filter((filter) =>
                           filter.name
                             .toLowerCase()
-                            .includes(filterSearchTerm.toLowerCase()),
+                            .includes(filterSearchTerm.toLowerCase())
                         )
                         .map((filter, index) => (
                           <button
@@ -2396,7 +2386,7 @@ function ChatPage() {
                       {availableFilters.filter((filter) =>
                         filter.name
                           .toLowerCase()
-                          .includes(filterSearchTerm.toLowerCase()),
+                          .includes(filterSearchTerm.toLowerCase())
                       ).length === 0 &&
                         filterSearchTerm && (
                           <div className="px-2 py-3 text-sm text-muted-foreground">
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 34595eb2..9e135ddd 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -2,11 +2,15 @@
 
 import { themeQuartz, type ColDef } from "ag-grid-community";
 import { AgGridReact, type CustomCellRendererProps } from "ag-grid-react";
-import { Building2, Cloud, HardDrive, Search, X } from "lucide-react";
+import { Cloud, FileIcon, Search, X } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { type ChangeEvent, useCallback, useRef, useState } from "react";
-import { SiGoogledrive } from "react-icons/si";
-import { TbBrandOnedrive } from "react-icons/tb";
+import {
+  type ChangeEvent,
+  FormEvent,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
 import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
 import { ProtectedRoute } from "@/components/protected-route";
 import { Button } from "@/components/ui/button";
@@ -21,25 +25,28 @@ import { StatusBadge } from "@/components/ui/status-badge";
 import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog";
 import { useDeleteDocument } from "../api/mutations/useDeleteDocument";
 import { filterAccentClasses } from "@/components/knowledge-filter-panel";
+import GoogleDriveIcon from "../settings/icons/google-drive-icon";
+import OneDriveIcon from "../settings/icons/one-drive-icon";
+import SharePointIcon from "../settings/icons/share-point-icon";
 
 // Function to get the appropriate icon for a connector type
 function getSourceIcon(connectorType?: string) {
   switch (connectorType) {
     case "google_drive":
       return (
-        <SiGoogledrive className="h-4 w-4 text-foreground flex-shrink-0" />
+        <GoogleDriveIcon className="h-4 w-4 text-foreground flex-shrink-0" />
       );
     case "onedrive":
-      return (
-        <TbBrandOnedrive className="h-4 w-4 text-foreground flex-shrink-0" />
-      );
+      return <OneDriveIcon className="h-4 w-4 text-foreground flex-shrink-0" />;
     case "sharepoint":
-      return <Building2 className="h-4 w-4 text-foreground flex-shrink-0" />;
+      return (
+        <SharePointIcon className="h-4 w-4 text-foreground flex-shrink-0" />
+      );
     case "s3":
       return <Cloud className="h-4 w-4 text-foreground flex-shrink-0" />;
     default:
       return (
-        <HardDrive className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+        <FileIcon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
       );
   }
 }
@@ -47,21 +54,31 @@ function getSourceIcon(connectorType?: string) {
 function SearchPage() {
   const router = useRouter();
   const { files: taskFiles } = useTask();
-  const { selectedFilter, setSelectedFilter, parsedFilterData } =
-    useKnowledgeFilter();
+  const {
+    selectedFilter,
+    setSelectedFilter,
+    parsedFilterData,
+    queryOverride,
+    setQueryOverride,
+  } = useKnowledgeFilter();
+  const [searchQueryInput, setSearchQueryInput] = useState(queryOverride || "");
   const [selectedRows, setSelectedRows] = useState<File[]>([]);
   const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
 
   const deleteDocumentMutation = useDeleteDocument();
 
   const { data = [], isFetching } = useGetSearchQuery(
-    parsedFilterData?.query || "*",
+    queryOverride,
     parsedFilterData
   );
 
-  const handleTableSearch = (e: ChangeEvent<HTMLInputElement>) => {
-    gridRef.current?.api.setGridOption("quickFilterText", e.target.value);
-  };
+  const handleSearch = useCallback(
+    (e?: FormEvent<HTMLFormElement>) => {
+      if (e) e.preventDefault();
+      setQueryOverride(searchQueryInput.trim());
+    },
+    [searchQueryInput, setQueryOverride]
+  );
 
   // Convert TaskFiles to File format and merge with backend results
   const taskFilesAsFiles: File[] = taskFiles.map((taskFile) => {
@@ -236,7 +253,10 @@ function SearchPage() {
 
         {/* Search Input Area */}
         <div className="flex-1 flex flex-shrink-0 flex-wrap-reverse gap-3 mb-6">
-          <form className="flex flex-1 gap-3 max-w-full">
+          <form
+            className="flex flex-1 gap-3 max-w-full"
+            onSubmit={handleSearch}
+          >
             <div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem] max-w-[min(640px,100%)] min-w-[100px]">
               {selectedFilter?.name && (
                 <div
@@ -263,7 +283,10 @@ function SearchPage() {
                 id="search-query"
                 type="text"
                 placeholder="Search your documents..."
-                onChange={handleTableSearch}
+                value={searchQueryInput}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  setSearchQueryInput(e.target.value)
+                }
               />
             </div>
             {/* <Button
diff --git a/frontend/src/app/settings/icons/google-drive-icon.tsx b/frontend/src/app/settings/icons/google-drive-icon.tsx
index 0980e644..d345c98c 100644
--- a/frontend/src/app/settings/icons/google-drive-icon.tsx
+++ b/frontend/src/app/settings/icons/google-drive-icon.tsx
@@ -1,10 +1,11 @@
-const GoogleDriveIcon = () => (
+const GoogleDriveIcon = ({ className }: { className?: string }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="18"
     height="16"
     viewBox="0 0 18 16"
     fill="none"
+    className={className}
   >
     <path
       d="M2.03338 13.2368L2.75732 14.4872C2.90774 14.7504 3.12398 14.9573 3.37783 15.1077L5.9633 10.6325H0.792358C0.792358 10.9239 0.867572 11.2154 1.018 11.4786L2.03338 13.2368Z"
diff --git a/frontend/src/app/settings/icons/one-drive-icon.tsx b/frontend/src/app/settings/icons/one-drive-icon.tsx
index 30b77a65..fcebc6d6 100644
--- a/frontend/src/app/settings/icons/one-drive-icon.tsx
+++ b/frontend/src/app/settings/icons/one-drive-icon.tsx
@@ -1,10 +1,11 @@
-const OneDriveIcon = () => (
+const OneDriveIcon = ({ className }: { className?: string }) => (
   <svg
     width="17"
     height="12"
     viewBox="0 0 17 12"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className={className}
   >
     <g clip-path="url(#clip0_3016_367)">
       <path
diff --git a/frontend/src/app/settings/icons/share-point-icon.tsx b/frontend/src/app/settings/icons/share-point-icon.tsx
index 3f51dfae..5a89b27f 100644
--- a/frontend/src/app/settings/icons/share-point-icon.tsx
+++ b/frontend/src/app/settings/icons/share-point-icon.tsx
@@ -1,10 +1,11 @@
-const SharePointIcon = () => (
+const SharePointIcon = ({ className }: { className?: string }) => (
   <svg
     width="15"
     height="16"
     viewBox="0 0 15 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className={className}
   >
     <g clip-path="url(#clip0_3016_409)">
       <path
diff --git a/frontend/src/components/AgGrid/agGridStyles.css b/frontend/src/components/AgGrid/agGridStyles.css
index 590046c2..e307f617 100644
--- a/frontend/src/components/AgGrid/agGridStyles.css
+++ b/frontend/src/components/AgGrid/agGridStyles.css
@@ -10,6 +10,9 @@ body {
   --ag-row-hover-color: hsl(var(--muted));
   --ag-wrapper-border: none;
   --ag-font-family: var(--font-sans);
+  --ag-selected-row-background-color: hsl(var(--accent));
+  --ag-focus-shadow: none;
+  --ag-range-selection-border-color: hsl(var(--primary));
 
   /* Checkbox styling */
   --ag-checkbox-background-color: hsl(var(--background));
diff --git a/frontend/src/components/ui/animated-processing-icon.tsx b/frontend/src/components/ui/animated-processing-icon.tsx
index eb36b2ab..431202c1 100644
--- a/frontend/src/components/ui/animated-processing-icon.tsx
+++ b/frontend/src/components/ui/animated-processing-icon.tsx
@@ -1,49 +1,70 @@
-interface AnimatedProcessingIconProps {
-  className?: string;
-  size?: number;
-}
+import { cn } from "@/lib/utils";
+import { motion, easeInOut } from "framer-motion";
 
 export const AnimatedProcessingIcon = ({
-  className = "",
-  size = 10,
-}: AnimatedProcessingIconProps) => {
-  const width = Math.round((size * 6) / 10);
-  const height = size;
+  className,
+}: {
+  className?: string;
+}) => {
+  const createAnimationFrames = (delay: number) => ({
+    opacity: [1, 1, 0.5, 0], // Opacity Steps
+    transition: {
+      delay,
+      duration: 1,
+      ease: easeInOut,
+      repeat: Infinity,
+      times: [0, 0.33, 0.66, 1], // Duration Percentages that Correspond to opacity Array
+    },
+  });
 
   return (
     <svg
-      width={width}
-      height={height}
+      data-testid="rotating-dot-animation"
+      className={cn("h-[10px] w-[6px]", className)}
       viewBox="0 0 6 10"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
     >
-      <style>
-        {`
-          .dot-1 { animation: pulse-wave 1.5s infinite; animation-delay: 0s; }
-          .dot-2 { animation: pulse-wave 1.5s infinite; animation-delay: 0.1s; }
-          .dot-3 { animation: pulse-wave 1.5s infinite; animation-delay: 0.2s; }
-          .dot-4 { animation: pulse-wave 1.5s infinite; animation-delay: 0.3s; }
-          .dot-5 { animation: pulse-wave 1.5s infinite; animation-delay: 0.4s; }
-          
-          @keyframes pulse-wave {
-            0%, 60%, 100% { 
-              opacity: 0.25; 
-              transform: scale(1);
-            }
-            30% { 
-              opacity: 1; 
-              transform: scale(1.2);
-            }
-          }
-        `}
-      </style>
-      <circle className="dot-1" cx="1" cy="5" r="1" fill="currentColor" />
-      <circle className="dot-2" cx="1" cy="9" r="1" fill="currentColor" />
-      <circle className="dot-3" cx="5" cy="1" r="1" fill="currentColor" />
-      <circle className="dot-4" cx="5" cy="5" r="1" fill="currentColor" />
-      <circle className="dot-5" cx="5" cy="9" r="1" fill="currentColor" />
+      <motion.circle
+        animate={createAnimationFrames(0)}
+        fill="currentColor"
+        cx="1"
+        cy="1"
+        r="1"
+      />
+      <motion.circle
+        animate={createAnimationFrames(0.16)}
+        fill="currentColor"
+        cx="1"
+        cy="5"
+        r="1"
+      />
+      <motion.circle
+        animate={createAnimationFrames(0.33)}
+        fill="currentColor"
+        cx="1"
+        cy="9"
+        r="1"
+      />
+      <motion.circle
+        animate={createAnimationFrames(0.83)}
+        fill="currentColor"
+        cx="5"
+        cy="1"
+        r="1"
+      />
+      <motion.circle
+        animate={createAnimationFrames(0.66)}
+        fill="currentColor"
+        cx="5"
+        cy="5"
+        r="1"
+      />
+      <motion.circle
+        animate={createAnimationFrames(0.5)}
+        fill="currentColor"
+        cx="5"
+        cy="9"
+        r="1"
+      />
     </svg>
   );
 };
diff --git a/frontend/src/components/ui/status-badge.tsx b/frontend/src/components/ui/status-badge.tsx
index d3b1a323..16f5c908 100644
--- a/frontend/src/components/ui/status-badge.tsx
+++ b/frontend/src/components/ui/status-badge.tsx
@@ -49,9 +49,7 @@ export const StatusBadge = ({ status, className }: StatusBadgeProps) => {
         className || ""
       }`}
     >
-      {status === "processing" && (
-        <AnimatedProcessingIcon className="text-current mr-2" size={10} />
-      )}
+      {status === "processing" && <AnimatedProcessingIcon className="mr-1.5" />}
       {config.label}
     </div>
   );
diff --git a/frontend/src/contexts/knowledge-filter-context.tsx b/frontend/src/contexts/knowledge-filter-context.tsx
index 043f6fae..1e23fdf0 100644
--- a/frontend/src/contexts/knowledge-filter-context.tsx
+++ b/frontend/src/contexts/knowledge-filter-context.tsx
@@ -44,6 +44,8 @@ interface KnowledgeFilterContextType {
   createMode: boolean;
   startCreateMode: () => void;
   endCreateMode: () => void;
+  queryOverride: string;
+  setQueryOverride: (query: string) => void;
 }
 
 const KnowledgeFilterContext = createContext<
@@ -73,6 +75,7 @@ export function KnowledgeFilterProvider({
     useState<ParsedQueryData | null>(null);
   const [isPanelOpen, setIsPanelOpen] = useState(false);
   const [createMode, setCreateMode] = useState(false);
+  const [queryOverride, setQueryOverride] = useState('');
 
   const setSelectedFilter = (filter: KnowledgeFilter | null) => {
     setSelectedFilterState(filter);
@@ -148,6 +151,8 @@ export function KnowledgeFilterProvider({
     createMode,
     startCreateMode,
     endCreateMode,
+    queryOverride,
+    setQueryOverride,
   };
 
   return (