From f28ba54da3637ab5ac72b915c42b2d988ca52906 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Tue, 16 Sep 2025 16:07:49 -0600
Subject: [PATCH 01/10] Implement Delete Confirmation Dialog and Enhance
 Knowledge Dropdown

- Added a new `DeleteConfirmationDialog` component for confirming deletions.
- Updated `KnowledgeDropdown` to include a loading state and improved user feedback during file operations.
- Enhanced the search page to support bulk deletion of documents with confirmation dialog.
- Integrated event dispatching for knowledge updates after file operations.
- Refactored various components for better readability and maintainability.
---
 frontend/components/confirmation-dialog.tsx   |  84 +++
 frontend/components/knowledge-dropdown.tsx    | 165 ++++--
 frontend/components/ui/input.tsx              |  16 +-
 .../src/app/api/queries/useGetNudgesQuery.ts  |  11 +-
 .../src/app/api/queries/useGetSearchQuery.ts  |  21 +-
 frontend/src/app/knowledge/page.tsx           | 495 ++++++++++++++++--
 frontend/src/app/upload/[provider]/page.tsx   | 332 ++++++------
 frontend/src/contexts/task-context.tsx        |  30 +-
 src/api/connectors.py                         |   2 +
 src/api/documents.py                          |  59 +++
 src/main.py                                   |  13 +
 src/services/document_service.py              |   1 +
 src/session_manager.py                        |  13 +-
 13 files changed, 949 insertions(+), 293 deletions(-)
 create mode 100644 frontend/components/confirmation-dialog.tsx
 create mode 100644 src/api/documents.py

diff --git a/frontend/components/confirmation-dialog.tsx b/frontend/components/confirmation-dialog.tsx
new file mode 100644
index 00000000..1ff8a370
--- /dev/null
+++ b/frontend/components/confirmation-dialog.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Button } from "./ui/button";
+import { AlertTriangle } from "lucide-react";
+
+interface ConfirmationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: string;
+  description?: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void | Promise<void>;
+  isLoading?: boolean;
+  variant?: "destructive" | "default";
+}
+
+export const DeleteConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
+  open,
+  onOpenChange,
+  title = "Are you sure?",
+  description = "This action cannot be undone.",
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  onConfirm,
+  isLoading = false,
+  variant = "destructive",
+}) => {
+  const handleConfirm = async () => {
+    try {
+      await onConfirm();
+    } finally {
+      // Only close if not in loading state (let the parent handle this)
+      if (!isLoading) {
+        onOpenChange(false);
+      }
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <div className="flex items-center gap-3">
+            {variant === "destructive" && (
+              <AlertTriangle className="h-6 w-6 text-destructive" />
+            )}
+            <DialogTitle>{title}</DialogTitle>
+          </div>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isLoading}
+          >
+            {cancelText}
+          </Button>
+          <Button
+            type="button"
+            variant={variant}
+            onClick={handleConfirm}
+            loading={isLoading}
+            disabled={isLoading}
+          >
+            {confirmText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/frontend/components/knowledge-dropdown.tsx b/frontend/components/knowledge-dropdown.tsx
index 82581de8..f9176311 100644
--- a/frontend/components/knowledge-dropdown.tsx
+++ b/frontend/components/knowledge-dropdown.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useQueryClient } from "@tanstack/react-query";
 import {
   ChevronDown,
   Cloud,
   FolderOpen,
+  Loader2,
   PlugZap,
   Plus,
   Upload,
@@ -44,6 +44,7 @@ export function KnowledgeDropdown({
   const [folderLoading, setFolderLoading] = useState(false);
   const [s3Loading, setS3Loading] = useState(false);
   const [fileUploading, setFileUploading] = useState(false);
+  const [isNavigatingToCloud, setIsNavigatingToCloud] = useState(false);
   const [cloudConnectors, setCloudConnectors] = useState<{
     [key: string]: {
       name: string;
@@ -55,12 +56,6 @@ export function KnowledgeDropdown({
   const fileInputRef = useRef<HTMLInputElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  const queryClient = useQueryClient();
-
-  const refetchSearch = () => {
-    queryClient.invalidateQueries({ queryKey: ["search"] });
-  };
-
   // Check AWS availability and cloud connectors on mount
   useEffect(() => {
     const checkAvailability = async () => {
@@ -107,7 +102,7 @@ export function KnowledgeDropdown({
                   const connections = statusData.connections || [];
                   const activeConnection = connections.find(
                     (conn: { is_active: boolean; connection_id: string }) =>
-                      conn.is_active,
+                      conn.is_active
                   );
                   const isConnected = activeConnection !== undefined;
 
@@ -117,7 +112,7 @@ export function KnowledgeDropdown({
                     // Check token availability
                     try {
                       const tokenRes = await fetch(
-                        `/api/connectors/${type}/token?connection_id=${activeConnection.connection_id}`,
+                        `/api/connectors/${type}/token?connection_id=${activeConnection.connection_id}`
                       );
                       if (tokenRes.ok) {
                         const tokenData = await tokenRes.json();
@@ -178,7 +173,7 @@ export function KnowledgeDropdown({
       window.dispatchEvent(
         new CustomEvent("fileUploadStart", {
           detail: { filename: files[0].name },
-        }),
+        })
       );
 
       try {
@@ -190,21 +185,38 @@ export function KnowledgeDropdown({
           method: "POST",
           body: formData,
         });
+
         const uploadIngestJson = await uploadIngestRes.json();
+
         if (!uploadIngestRes.ok) {
           throw new Error(
-            uploadIngestJson?.error || "Upload and ingest failed",
+            uploadIngestJson?.error || "Upload and ingest failed"
           );
         }
 
-        // Extract results from the unified response
-        const fileId = uploadIngestJson?.upload?.id;
-        const filePath = uploadIngestJson?.upload?.path;
+        // Extract results from the response - handle both unified and simple formats
+        const fileId = uploadIngestJson?.upload?.id || uploadIngestJson?.id;
+        const filePath =
+          uploadIngestJson?.upload?.path ||
+          uploadIngestJson?.path ||
+          "uploaded";
         const runJson = uploadIngestJson?.ingestion;
         const deleteResult = uploadIngestJson?.deletion;
 
-        if (!fileId || !filePath) {
-          throw new Error("Upload successful but no file id/path returned");
+        if (!fileId) {
+          throw new Error("Upload successful but no file id returned");
+        }
+
+        // Check if ingestion actually succeeded
+        if (
+          runJson &&
+          runJson.status !== "COMPLETED" &&
+          runJson.status !== "SUCCESS"
+        ) {
+          const errorMsg = runJson.error || "Ingestion pipeline failed";
+          throw new Error(
+            `Ingestion failed: ${errorMsg}. Try setting DISABLE_INGEST_WITH_LANGFLOW=true if you're experiencing Langflow component issues.`
+          );
         }
 
         // Log deletion status if provided
@@ -212,12 +224,12 @@ export function KnowledgeDropdown({
           if (deleteResult.status === "deleted") {
             console.log(
               "File successfully cleaned up from Langflow:",
-              deleteResult.file_id,
+              deleteResult.file_id
             );
           } else if (deleteResult.status === "delete_failed") {
             console.warn(
               "Failed to cleanup file from Langflow:",
-              deleteResult.error,
+              deleteResult.error
             );
           }
         }
@@ -235,8 +247,9 @@ export function KnowledgeDropdown({
                 unified: true,
               },
             },
-          }),
+          })
         );
+
         // Trigger search refresh after successful ingestion
         window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
       } catch (error) {
@@ -246,12 +259,12 @@ export function KnowledgeDropdown({
               filename: files[0].name,
               error: error instanceof Error ? error.message : "Upload failed",
             },
-          }),
+          })
         );
       } finally {
         window.dispatchEvent(new CustomEvent("fileUploadComplete"));
         setFileUploading(false);
-        refetchSearch();
+        // Don't call refetchSearch() here - the knowledgeUpdated event will handle it
       }
     }
 
@@ -288,9 +301,15 @@ export function KnowledgeDropdown({
         addTask(taskId);
         setFolderPath("");
         // Trigger search refresh after successful folder processing starts
+        console.log(
+          "Folder upload successful, dispatching knowledgeUpdated event"
+        );
         window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
       } else if (response.ok) {
         setFolderPath("");
+        console.log(
+          "Folder upload successful (direct), dispatching knowledgeUpdated event"
+        );
         window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
       } else {
         console.error("Folder upload failed:", result.error);
@@ -299,7 +318,7 @@ export function KnowledgeDropdown({
       console.error("Folder upload error:", error);
     } finally {
       setFolderLoading(false);
-      refetchSearch();
+      // Don't call refetchSearch() here - the knowledgeUpdated event will handle it
     }
   };
 
@@ -330,6 +349,7 @@ export function KnowledgeDropdown({
         addTask(taskId);
         setBucketUrl("s3://");
         // Trigger search refresh after successful S3 processing starts
+        console.log("S3 upload successful, dispatching knowledgeUpdated event");
         window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
       } else {
         console.error("S3 upload failed:", result.error);
@@ -338,7 +358,7 @@ export function KnowledgeDropdown({
       console.error("S3 upload error:", error);
     } finally {
       setS3Loading(false);
-      refetchSearch();
+      // Don't call refetchSearch() here - the knowledgeUpdated event will handle it
     }
   };
 
@@ -347,10 +367,17 @@ export function KnowledgeDropdown({
     .map(([type, info]) => ({
       label: info.name,
       icon: PlugZap,
-      onClick: () => {
+      onClick: async () => {
         setIsOpen(false);
         if (info.connected && info.hasToken) {
-          router.push(`/upload/${type}`);
+          setIsNavigatingToCloud(true);
+          try {
+            router.push(`/upload/${type}`);
+            // Keep loading state for a short time to show feedback
+            setTimeout(() => setIsNavigatingToCloud(false), 1000);
+          } catch {
+            setIsNavigatingToCloud(false);
+          }
         } else {
           router.push("/settings");
         }
@@ -392,14 +419,16 @@ export function KnowledgeDropdown({
     ...cloudConnectorItems,
   ];
 
+  // Comprehensive loading state
+  const isLoading =
+    fileUploading || folderLoading || s3Loading || isNavigatingToCloud;
+
   return (
     <>
       <div ref={dropdownRef} className="relative">
         <button
-          onClick={() =>
-            !(fileUploading || folderLoading || s3Loading) && setIsOpen(!isOpen)
-          }
-          disabled={fileUploading || folderLoading || s3Loading}
+          onClick={() => !isLoading && setIsOpen(!isOpen)}
+          disabled={isLoading}
           className={cn(
             variant === "button"
               ? "rounded-lg h-12 px-4 flex items-center gap-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
@@ -408,44 +437,68 @@ export function KnowledgeDropdown({
               ? "bg-accent text-accent-foreground shadow-sm"
               : variant === "navigation"
               ? "text-foreground hover:text-accent-foreground"
-              : "",
+              : ""
           )}
         >
           {variant === "button" ? (
             <>
-              <Plus className="h-4 w-4" />
-              <span>Add Knowledge</span>
-              <ChevronDown
-                className={cn(
-                  "h-4 w-4 transition-transform",
-                  isOpen && "rotate-180",
-                )}
-              />
+              {isLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Plus className="h-4 w-4" />
+              )}
+              <span>
+                {isLoading
+                  ? fileUploading
+                    ? "Uploading..."
+                    : folderLoading
+                    ? "Processing Folder..."
+                    : s3Loading
+                    ? "Processing S3..."
+                    : isNavigatingToCloud
+                    ? "Loading..."
+                    : "Processing..."
+                  : "Add Knowledge"}
+              </span>
+              {!isLoading && (
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 transition-transform",
+                    isOpen && "rotate-180"
+                  )}
+                />
+              )}
             </>
           ) : (
             <>
               <div className="flex items-center flex-1">
-                <Upload
-                  className={cn(
-                    "h-4 w-4 mr-3 shrink-0",
-                    active
-                      ? "text-accent-foreground"
-                      : "text-muted-foreground group-hover:text-foreground",
-                  )}
-                />
+                {isLoading ? (
+                  <Loader2 className="h-4 w-4 mr-3 shrink-0 animate-spin" />
+                ) : (
+                  <Upload
+                    className={cn(
+                      "h-4 w-4 mr-3 shrink-0",
+                      active
+                        ? "text-accent-foreground"
+                        : "text-muted-foreground group-hover:text-foreground"
+                    )}
+                  />
+                )}
                 Knowledge
               </div>
-              <ChevronDown
-                className={cn(
-                  "h-4 w-4 transition-transform",
-                  isOpen && "rotate-180",
-                )}
-              />
+              {!isLoading && (
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 transition-transform",
+                    isOpen && "rotate-180"
+                  )}
+                />
+              )}
             </>
           )}
         </button>
 
-        {isOpen && (
+        {isOpen && !isLoading && (
           <div className="absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-md z-50">
             <div className="py-1">
               {menuItems.map((item, index) => (
@@ -458,7 +511,7 @@ export function KnowledgeDropdown({
                     "w-full px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground",
                     "disabled" in item &&
                       item.disabled &&
-                      "opacity-50 cursor-not-allowed hover:bg-transparent hover:text-current",
+                      "opacity-50 cursor-not-allowed hover:bg-transparent hover:text-current"
                   )}
                 >
                   {item.label}
@@ -497,7 +550,7 @@ export function KnowledgeDropdown({
                 type="text"
                 placeholder="/path/to/documents"
                 value={folderPath}
-                onChange={(e) => setFolderPath(e.target.value)}
+                onChange={e => setFolderPath(e.target.value)}
               />
             </div>
             <div className="flex justify-end gap-2">
@@ -539,7 +592,7 @@ export function KnowledgeDropdown({
                 type="text"
                 placeholder="s3://bucket/path"
                 value={bucketUrl}
-                onChange={(e) => setBucketUrl(e.target.value)}
+                onChange={e => setBucketUrl(e.target.value)}
               />
             </div>
             <div className="flex justify-end gap-2">
diff --git a/frontend/components/ui/input.tsx b/frontend/components/ui/input.tsx
index 5c14e593..67fb6727 100644
--- a/frontend/components/ui/input.tsx
+++ b/frontend/components/ui/input.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
   icon?: React.ReactNode;
   inputClassName?: string;
 }
@@ -9,7 +10,12 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, inputClassName, icon, type, placeholder, ...props }, ref) => {
     return (
-      <label className={cn("relative block h-fit w-full text-sm", icon ? className : "")}>
+      <label
+        className={cn(
+          "relative block h-fit w-full text-sm",
+          icon ? className : ""
+        )}
+      >
         {icon && (
           <div className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform text-muted-foreground">
             {icon}
@@ -22,7 +28,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           className={cn(
             "primary-input !placeholder-transparent",
             icon && "pl-9",
-            icon ? inputClassName : className,
+            icon ? inputClassName : className
           )}
           ref={ref}
           {...props}
@@ -31,14 +37,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           className={cn(
             "pointer-events-none absolute top-1/2 -translate-y-1/2 pl-px text-placeholder-foreground",
             icon ? "left-9" : "left-3",
-            props.value && "hidden",
+            props.value && "hidden"
           )}
         >
           {placeholder}
         </span>
       </label>
     );
-  },
+  }
 );
 
 Input.displayName = "Input";
diff --git a/frontend/src/app/api/queries/useGetNudgesQuery.ts b/frontend/src/app/api/queries/useGetNudgesQuery.ts
index 38cc9502..a9fe37a4 100644
--- a/frontend/src/app/api/queries/useGetNudgesQuery.ts
+++ b/frontend/src/app/api/queries/useGetNudgesQuery.ts
@@ -14,7 +14,7 @@ const DEFAULT_NUDGES = [
 
 export const useGetNudgesQuery = (
   chatId?: string | null,
-  options?: Omit<UseQueryOptions, "queryKey" | "queryFn">,
+  options?: Omit<UseQueryOptions, "queryKey" | "queryFn">
 ) => {
   const queryClient = useQueryClient();
 
@@ -26,7 +26,12 @@ export const useGetNudgesQuery = (
     try {
       const response = await fetch(`/api/nudges${chatId ? `/${chatId}` : ""}`);
       const data = await response.json();
-      return data.response.split("\n").filter(Boolean) || DEFAULT_NUDGES;
+
+      if (data.response && typeof data.response === "string") {
+        return data.response.split("\n").filter(Boolean);
+      }
+
+      return DEFAULT_NUDGES;
     } catch (error) {
       console.error("Error getting nudges", error);
       return DEFAULT_NUDGES;
@@ -39,7 +44,7 @@ export const useGetNudgesQuery = (
       queryFn: getNudges,
       ...options,
     },
-    queryClient,
+    queryClient
   );
 
   return { ...queryResult, cancel };
diff --git a/frontend/src/app/api/queries/useGetSearchQuery.ts b/frontend/src/app/api/queries/useGetSearchQuery.ts
index cfe4ed71..de1daeb6 100644
--- a/frontend/src/app/api/queries/useGetSearchQuery.ts
+++ b/frontend/src/app/api/queries/useGetSearchQuery.ts
@@ -48,15 +48,22 @@ export interface File {
 export const useGetSearchQuery = (
   query: string,
   queryData?: ParsedQueryData | null,
-  options?: Omit<UseQueryOptions, "queryKey" | "queryFn">,
+  options?: Omit<UseQueryOptions, "queryKey" | "queryFn">
 ) => {
   const queryClient = useQueryClient();
 
+  // Normalize the query to match what will actually be searched
+  const effectiveQuery = query || queryData?.query || "*";
+
   async function getFiles(): Promise<File[]> {
     try {
       const searchPayload: SearchPayload = {
-        query: query || queryData?.query || "*",
-        limit: queryData?.limit || (query.trim() === "" ? 10000 : 10), // Maximum allowed limit for wildcard searches
+        query: effectiveQuery,
+        limit:
+          queryData?.limit ||
+          (effectiveQuery.trim() === "*" || effectiveQuery.trim() === ""
+            ? 10000
+            : 10), // Maximum allowed limit for wildcard searches
         scoreThreshold: queryData?.scoreThreshold || 0,
       };
       if (queryData?.filters) {
@@ -142,7 +149,7 @@ export const useGetSearchQuery = (
         }
       });
 
-      const files: File[] = Array.from(fileMap.values()).map((file) => ({
+      const files: File[] = Array.from(fileMap.values()).map(file => ({
         filename: file.filename,
         mimetype: file.mimetype,
         chunkCount: file.chunks.length,
@@ -165,12 +172,12 @@ export const useGetSearchQuery = (
 
   const queryResult = useQuery(
     {
-      queryKey: ["search", query],
-      placeholderData: (prev) => prev,
+      queryKey: ["search", effectiveQuery],
+      placeholderData: prev => prev,
       queryFn: getFiles,
       ...options,
     },
-    queryClient,
+    queryClient
   );
 
   return queryResult;
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 88b93671..d72942d7 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -7,17 +7,35 @@ import {
   HardDrive,
   Loader2,
   Search,
+  Trash2,
+  Edit,
+  RefreshCw,
 } from "lucide-react";
-import { type FormEvent, useCallback, useEffect, useState } from "react";
+import {
+  type FormEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { SiGoogledrive } from "react-icons/si";
 import { TbBrandOnedrive } from "react-icons/tb";
-import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
+import { FaEllipsisVertical } from "react-icons/fa6";
+import { useQueryClient } from "@tanstack/react-query";
 import { ProtectedRoute } from "@/components/protected-route";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
 import { useTask } from "@/contexts/task-context";
 import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
+import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
 
 // Function to get the appropriate icon for a connector type
 function getSourceIcon(connectorType?: string) {
@@ -41,12 +59,32 @@ function SearchPage() {
   const [query, setQuery] = useState("");
   const [queryInputText, setQueryInputText] = useState("");
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
 
-  const {
-    data = [],
-    isFetching,
-    refetch: refetchSearch,
-  } = useGetSearchQuery(query, parsedFilterData);
+  // Delete state
+  const [selectedDocuments, setSelectedDocuments] = useState<Set<string>>(
+    new Set()
+  );
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<{
+    type: "bulk" | "single";
+    filenames: string[];
+  } | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [refreshTrigger, setRefreshTrigger] = useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars
+
+  const queryClient = useQueryClient();
+
+  const { data = [], isFetching } = useGetSearchQuery(query, parsedFilterData);
+
+  // Use refs to access current values in event handler
+  const currentQueryRef = useRef(query);
+  const currentParsedFilterRef = useRef(parsedFilterData);
+  const currentDataRef = useRef(data);
+
+  currentQueryRef.current = query;
+  currentParsedFilterRef.current = parsedFilterData;
+  currentDataRef.current = data;
 
   // Update query when global filter changes
   useEffect(() => {
@@ -55,18 +93,203 @@ function SearchPage() {
     }
   }, [parsedFilterData]);
 
+  // Listen for knowledge updates from other sources (uploads, ingestion, etc.)
+  useEffect(() => {
+    const handleKnowledgeUpdate = async () => {
+      // Get the current effective query that matches what the UI is showing (using refs to get current values)
+      const currentEffectiveQuery =
+        currentQueryRef.current || currentParsedFilterRef.current?.query || "*";
+
+      // Be very aggressive about clearing the cache and refetching
+      queryClient.removeQueries({
+        queryKey: ["search"],
+        exact: false,
+      });
+
+      // Force an immediate refetch of the current query
+      await queryClient.refetchQueries({
+        queryKey: ["search", currentEffectiveQuery],
+        exact: true,
+      });
+
+      // Also trigger a state change to force re-render (backup plan)
+      setRefreshTrigger(prev => prev + 1);
+    };
+
+    window.addEventListener("knowledgeUpdated", handleKnowledgeUpdate);
+
+    return () => {
+      window.removeEventListener("knowledgeUpdated", handleKnowledgeUpdate);
+    };
+  }, [queryClient]); // Only depend on queryClient which is stable
+
   const handleSearch = useCallback(
     (e?: FormEvent<HTMLFormElement>) => {
       if (e) e.preventDefault();
       if (query.trim() === queryInputText.trim()) {
-        refetchSearch();
+        // If same query, invalidate cache to ensure fresh data
+        const effectiveQuery =
+          currentQueryRef.current ||
+          currentParsedFilterRef.current?.query ||
+          "*";
+        queryClient.invalidateQueries({
+          queryKey: ["search", effectiveQuery],
+          exact: true,
+        });
         return;
       }
       setQuery(queryInputText);
     },
-    [queryInputText, refetchSearch, query],
+    [queryInputText, query, queryClient]
   );
 
+  // Delete handlers
+  const handleBulkDelete = () => {
+    const filenames = Array.from(selectedDocuments);
+    setDeleteTarget({
+      type: "bulk",
+      filenames,
+    });
+    setDeleteDialogOpen(true);
+  };
+
+  const handleSingleDelete = (filename: string) => {
+    setDeleteTarget({
+      type: "single",
+      filenames: [filename],
+    });
+    setDeleteDialogOpen(true);
+    setOpenDropdown(null); // Close the dropdown
+  };
+
+  const handleRename = (filename: string) => {
+    setOpenDropdown(null); // Close the dropdown
+    alert(`Rename functionality not implemented yet for ${filename}`);
+  };
+
+  const handleSync = (filename: string) => {
+    setOpenDropdown(null); // Close the dropdown
+    alert(`Sync functionality not implemented yet for ${filename}`);
+  };
+
+  const performDelete = async () => {
+    if (!deleteTarget) return;
+
+    setIsDeleting(true);
+
+    // Use the same effective query normalization as the search hook (using current refs)
+    const effectiveQuery =
+      currentQueryRef.current || currentParsedFilterRef.current?.query || "*";
+
+    // Store the original data before optimistic update
+    const originalData =
+      queryClient.getQueryData<File[]>(["search", effectiveQuery]) || [];
+    const filesToDelete = new Set(deleteTarget.filenames);
+
+    // Optimistically update the UI - immediately filter out the files being deleted
+    queryClient.setQueryData<File[]>(["search", effectiveQuery], oldData => {
+      if (!oldData) return [];
+      return oldData.filter(file => !filesToDelete.has(file.filename));
+    });
+
+    try {
+      // Delete documents by filename (since we only have filenames, not document IDs)
+      const filenames = deleteTarget.filenames;
+      const results = [];
+      let successCount = 0;
+      const failedDeletes: string[] = [];
+
+      for (const filename of filenames) {
+        try {
+          const response = await fetch("/api/documents/delete-by-filename", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              filename: filename,
+            }),
+          });
+
+          if (response.ok) {
+            const result = await response.json();
+            results.push({ filename, success: true, ...result });
+            successCount++;
+          } else {
+            const error = await response.json();
+            results.push({ filename, success: false, error: error.error });
+            failedDeletes.push(filename);
+          }
+        } catch (error) {
+          results.push({ filename, success: false, error: String(error) });
+          failedDeletes.push(filename);
+        }
+      }
+
+      // Log results for user feedback
+      console.info(`Deleted ${successCount}/${filenames.length} documents`);
+
+      // If any deletes failed, restore the failed items to the UI
+      if (failedDeletes.length > 0) {
+        console.warn(
+          `Failed to delete ${failedDeletes.length} documents:`,
+          failedDeletes
+        );
+
+        // Restore failed items using the original data
+        queryClient.setQueryData<File[]>(
+          ["search", effectiveQuery],
+          currentData => {
+            if (!currentData) return originalData;
+
+            const failedSet = new Set(failedDeletes);
+            const restoredItems = originalData.filter(file =>
+              failedSet.has(file.filename)
+            );
+
+            // Merge current optimistically updated data with restored failed items
+            return [...currentData, ...restoredItems];
+          }
+        );
+      }
+      // If all deletes succeeded, keep the optimistic update - no need to refetch
+
+      // Clear selection
+      setSelectedDocuments(new Set());
+    } catch (error) {
+      console.error("Delete failed:", error);
+      // Restore the original data on complete failure
+      queryClient.setQueryData<File[]>(
+        ["search", effectiveQuery],
+        originalData
+      );
+      // TODO: Add toast notification for error
+    } finally {
+      setIsDeleting(false);
+      setDeleteDialogOpen(false);
+      setDeleteTarget(null);
+    }
+  };
+
+  const toggleDocumentSelection = (filename: string) => {
+    const newSelection = new Set(selectedDocuments);
+    if (newSelection.has(filename)) {
+      newSelection.delete(filename);
+    } else {
+      newSelection.add(filename);
+    }
+    setSelectedDocuments(newSelection);
+  };
+
+  const selectAllDocuments = () => {
+    const allFilenames = new Set(fileResults.map(file => file.filename));
+    setSelectedDocuments(allFilenames);
+  };
+
+  const clearSelection = () => {
+    setSelectedDocuments(new Set());
+  };
+
   const fileResults = data as File[];
 
   return (
@@ -87,17 +310,25 @@ function SearchPage() {
       <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
         {/* Search Input Area */}
         <div className="flex-shrink-0 mb-6">
+          <div className="flex items-center gap-2 mb-5 justify-between">
+            <span className="text-xl font-semibold text-primary">
+              Knowledge Project
+            </span>
+            <KnowledgeDropdown variant="button" />
+          </div>
           <form onSubmit={handleSearch} className="flex gap-3">
-            <Input
-              name="search-query"
-              id="search-query"
-              type="text"
-              defaultValue={parsedFilterData?.query}
-              value={queryInputText}
-              onChange={(e) => setQueryInputText(e.target.value)}
-              placeholder="Search your documents..."
-              className="flex-1 bg-muted/20 rounded-lg border border-border/50 px-4 py-3 h-12 focus-visible:ring-1 focus-visible:ring-ring"
-            />
+            <div className="lg:w-1/2 w-full">
+              <Input
+                name="search-query"
+                id="search-query"
+                type="text"
+                defaultValue={parsedFilterData?.query}
+                value={queryInputText}
+                onChange={e => setQueryInputText(e.target.value)}
+                placeholder="Search your documents..."
+                className="flex-2 bg-muted/20 rounded-lg border border-border/50 px-4 py-3 h-12 focus-visible:ring-1 focus-visible:ring-ring"
+              />
+            </div>
             <Button
               type="submit"
               variant="secondary"
@@ -109,9 +340,22 @@ function SearchPage() {
                 <Search className="h-4 w-4" />
               )}
             </Button>
-            <div className="flex-shrink-0">
-              <KnowledgeDropdown variant="button" />
-            </div>
+            <Button
+              variant="secondary"
+              className="rounded-lg h-12 px-4 flex items-center gap-2 hover:bg-secondary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={() => alert("Sync not implemented yet")}
+            >
+              Sync
+            </Button>
+
+            <Button
+              variant="destructive"
+              onClick={handleBulkDelete}
+              disabled={selectedDocuments.size === 0}
+              className="rounded-lg h-12 px-4 flex items-center gap-2 hover:bg-destructive/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Delete
+            </Button>
           </form>
         </div>
 
@@ -130,8 +374,8 @@ function SearchPage() {
               </div>
             ) : (
               <div className="space-y-4">
-                {/* Results Count */}
-                <div className="mb-4">
+                {/* Results Count and Bulk Actions */}
+                <div className="mb-4 space-y-4">
                   <div className="text-sm text-muted-foreground">
                     {fileResults.length} file
                     {fileResults.length !== 1 ? "s" : ""} found
@@ -158,8 +402,8 @@ function SearchPage() {
                         </span>
                       </div>
                       {fileResults
-                        .filter((file) => file.filename === selectedFile)
-                        .flatMap((file) => file.chunks)
+                        .filter(file => file.filename === selectedFile)
+                        .flatMap(file => file.chunks)
                         .map((chunk, index) => (
                           <div
                             key={chunk.filename + index}
@@ -187,40 +431,94 @@ function SearchPage() {
                     </>
                   ) : (
                     // Show files table
-                    <div className="bg-muted/20 rounded-lg border border-border/50 overflow-hidden">
-                      <table className="w-full">
+                    <div className="bg-muted/20 rounded-lg border border-border/50 overflow-x-auto">
+                      <table className="w-full min-w-[800px]">
                         <thead>
                           <tr className="border-b border-border/50 bg-muted/10">
-                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
+                            <th className="text-center p-3 text-sm font-medium text-muted-foreground pl-5 w-12">
+                              <Checkbox
+                                className="w-4 h-4 flex"
+                                checked={
+                                  selectedDocuments.size > 0 &&
+                                  selectedDocuments.size ===
+                                    new Set(fileResults.map(f => f.filename))
+                                      .size
+                                }
+                                onCheckedChange={checked => {
+                                  if (checked) {
+                                    selectAllDocuments();
+                                  } else {
+                                    clearSelection();
+                                  }
+                                }}
+                                onClick={e => e.stopPropagation()}
+                              />
+                            </th>
+                            <th className="text-left p-3 text-sm font-medium text-muted-foreground min-w-[200px] max-w-[300px]">
                               Source
                             </th>
-                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
+                            <th className="text-center p-3 text-sm font-medium text-muted-foreground w-32">
                               Type
                             </th>
-                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
+                            <th className="text-center p-3 text-sm font-medium text-muted-foreground w-20">
                               Size
                             </th>
-                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
-                              Matching chunks
+                            <th className="text-center p-3 text-sm font-medium text-muted-foreground w-20">
+                              Chunks
                             </th>
-                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
-                              Average score
-                            </th>
-                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
-                              Owner
+                            <th className="text-center p-3 text-sm font-medium text-muted-foreground w-20">
+                              Score
                             </th>
+
+                            <th className="text-center p-3 text-sm font-medium text-muted-foreground w-12" />
                           </tr>
                         </thead>
                         <tbody>
-                          {fileResults.map((file) => (
+                          {fileResults.map(file => (
                             <tr
                               key={file.filename}
-                              className="border-b border-border/30 hover:bg-muted/20 cursor-pointer transition-colors"
-                              onClick={() => setSelectedFile(file.filename)}
+                              className="border-b border-border/30 hover:bg-muted/20 transition-colors"
                             >
-                              <td className="p-3">
-                                <div className="flex items-center gap-2">
-                                  {getSourceIcon(file.connector_type)}
+                              <td className="pl-5 w-12">
+                                <div
+                                  className="w-4 h-4 cursor-pointer group relative flex items-center justify-center"
+                                  onClick={() =>
+                                    toggleDocumentSelection(file.filename)
+                                  }
+                                >
+                                  {selectedDocuments.has(file.filename) ? (
+                                    <Checkbox
+                                      checked={true}
+                                      onCheckedChange={() =>
+                                        toggleDocumentSelection(file.filename)
+                                      }
+                                      onClick={e => e.stopPropagation()}
+                                    />
+                                  ) : (
+                                    <>
+                                      <div className="group-hover:opacity-0 transition-opacity duration-200">
+                                        {getSourceIcon(file.connector_type)}
+                                      </div>
+                                      <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center">
+                                        <Checkbox
+                                          checked={false}
+                                          onCheckedChange={() =>
+                                            toggleDocumentSelection(
+                                              file.filename
+                                            )
+                                          }
+                                          onClick={e => e.stopPropagation()}
+                                        />
+                                      </div>
+                                    </>
+                                  )}
+                                </div>
+                              </td>
+                              <td
+                                className="p-3 cursor-pointer min-w-[200px] max-w-[300px]"
+                                onClick={() => setSelectedFile(file.filename)}
+                              >
+                                <div className="flex items-center">
                                   <span
                                     className="font-medium truncate"
                                     title={file.filename}
@@ -229,27 +527,90 @@ function SearchPage() {
                                   </span>
                                 </div>
                               </td>
-                              <td className="p-3 text-sm text-muted-foreground">
-                                {file.mimetype}
+                              <td
+                                className="p-3 text-center text-sm text-muted-foreground cursor-pointer w-32"
+                                onClick={() => setSelectedFile(file.filename)}
+                              >
+                                <span className="truncate block">
+                                  {file.mimetype}
+                                </span>
                               </td>
-                              <td className="p-3 text-sm text-muted-foreground">
+                              <td
+                                className="p-3 text-center text-sm text-muted-foreground cursor-pointer w-20"
+                                onClick={() => setSelectedFile(file.filename)}
+                              >
                                 {file.size
                                   ? `${Math.round(file.size / 1024)} KB`
                                   : "—"}
                               </td>
-                              <td className="p-3 text-sm text-muted-foreground">
+                              <td
+                                className="p-3 text-center text-sm text-muted-foreground cursor-pointer w-20"
+                                onClick={() => setSelectedFile(file.filename)}
+                              >
                                 {file.chunkCount}
                               </td>
-                              <td className="p-3">
+                              <td
+                                className="p-3 text-center cursor-pointer w-20"
+                                onClick={() => setSelectedFile(file.filename)}
+                              >
                                 <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
                                   {file.avgScore.toFixed(2)}
                                 </span>
                               </td>
-                              <td
-                                className="p-3 text-sm text-muted-foreground"
-                                title={file.owner_email}
-                              >
-                                {file.owner_name || file.owner || "—"}
+
+                              <td className="p-3 text-center text-sm text-muted-foreground w-12">
+                                <Popover
+                                  open={openDropdown === file.filename}
+                                  onOpenChange={open =>
+                                    setOpenDropdown(open ? file.filename : null)
+                                  }
+                                >
+                                  <PopoverTrigger asChild>
+                                    <Button
+                                      variant="ghost"
+                                      size="sm"
+                                      onClick={e => {
+                                        e.stopPropagation();
+                                      }}
+                                    >
+                                      <FaEllipsisVertical className="h-4 w-4" />
+                                    </Button>
+                                  </PopoverTrigger>
+                                  <PopoverContent
+                                    className="w-40 p-0"
+                                    align="end"
+                                  >
+                                    <div className="py-1">
+                                      <button
+                                        className="w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-muted/50 transition-colors"
+                                        onClick={() =>
+                                          handleRename(file.filename)
+                                        }
+                                      >
+                                        <Edit className="h-4 w-4" />
+                                        <span>Rename</span>
+                                      </button>
+                                      <button
+                                        className="w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-muted/50 transition-colors"
+                                        onClick={() =>
+                                          handleSync(file.filename)
+                                        }
+                                      >
+                                        <RefreshCw className="h-4 w-4" />
+                                        <span>Sync</span>
+                                      </button>
+                                      <button
+                                        className="w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-muted/50 transition-colors"
+                                        onClick={() =>
+                                          handleSingleDelete(file.filename)
+                                        }
+                                      >
+                                        <Trash2 className="h-4 w-4 text-destructive" />
+                                        <span>Delete</span>
+                                      </button>
+                                    </div>
+                                  </PopoverContent>
+                                </Popover>
                               </td>
                             </tr>
                           ))}
@@ -263,6 +624,32 @@ function SearchPage() {
           </div>
         </div>
       </div>
+
+      {/* Delete Confirmation Dialog */}
+      <DeleteConfirmationDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        title={
+          deleteTarget?.type === "single"
+            ? `Delete "${deleteTarget.filenames[0]}"?`
+            : `Delete ${deleteTarget?.filenames?.length || 0} documents?`
+        }
+        description={
+          deleteTarget?.type === "single"
+            ? `Are you sure you want to delete "${deleteTarget.filenames[0]}"? This action cannot be undone and will remove all associated chunks.`
+            : `Are you sure you want to delete ${
+                deleteTarget?.filenames?.length || 0
+              } selected documents? This action cannot be undone and will remove all associated chunks.`
+        }
+        confirmText={
+          deleteTarget?.type === "single"
+            ? "Delete File"
+            : "Delete All Selected"
+        }
+        onConfirm={performDelete}
+        isLoading={isDeleting}
+        variant="destructive"
+      />
     </div>
   );
 }
diff --git a/frontend/src/app/upload/[provider]/page.tsx b/frontend/src/app/upload/[provider]/page.tsx
index 8d26de02..ea2d319e 100644
--- a/frontend/src/app/upload/[provider]/page.tsx
+++ b/frontend/src/app/upload/[provider]/page.tsx
@@ -1,109 +1,124 @@
-"use client"
+"use client";
 
-import { useState, useEffect } from "react"
-import { useParams, useRouter } from "next/navigation"
-import { Button } from "@/components/ui/button"
-import { ArrowLeft, AlertCircle } from "lucide-react"
-import { GoogleDrivePicker } from "@/components/google-drive-picker"
-import { OneDrivePicker } from "@/components/onedrive-picker"
-import { useTask } from "@/contexts/task-context"
-import { Toast } from "@/components/ui/toast"
+import { useState, useEffect } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, AlertCircle } from "lucide-react";
+import { GoogleDrivePicker } from "@/components/google-drive-picker";
+import { OneDrivePicker } from "@/components/onedrive-picker";
+import { useTask } from "@/contexts/task-context";
+import { Toast } from "@/components/ui/toast";
 
 interface GoogleDriveFile {
-  id: string
-  name: string
-  mimeType: string
-  webViewLink?: string
-  iconLink?: string
+  id: string;
+  name: string;
+  mimeType: string;
+  webViewLink?: string;
+  iconLink?: string;
 }
 
 interface OneDriveFile {
-  id: string
-  name: string
-  mimeType?: string
-  webUrl?: string
+  id: string;
+  name: string;
+  mimeType?: string;
+  webUrl?: string;
   driveItem?: {
-    file?: { mimeType: string }
-    folder?: unknown
-  }
+    file?: { mimeType: string };
+    folder?: unknown;
+  };
 }
 
 interface CloudConnector {
-  id: string
-  name: string
-  description: string
-  status: "not_connected" | "connecting" | "connected" | "error"
-  type: string
-  connectionId?: string
-  hasAccessToken: boolean
-  accessTokenError?: string
+  id: string;
+  name: string;
+  description: string;
+  status: "not_connected" | "connecting" | "connected" | "error";
+  type: string;
+  connectionId?: string;
+  hasAccessToken: boolean;
+  accessTokenError?: string;
 }
 
 export default function UploadProviderPage() {
-  const params = useParams()
-  const router = useRouter()
-  const provider = params.provider as string
-  const { addTask, tasks } = useTask()
+  const params = useParams();
+  const router = useRouter();
+  const provider = params.provider as string;
+  const { addTask, tasks } = useTask();
 
-  const [connector, setConnector] = useState<CloudConnector | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [accessToken, setAccessToken] = useState<string | null>(null)
-  const [selectedFiles, setSelectedFiles] = useState<GoogleDriveFile[] | OneDriveFile[]>([])
-  const [isIngesting, setIsIngesting] = useState<boolean>(false)
-  const [currentSyncTaskId, setCurrentSyncTaskId] = useState<string | null>(null)
-  const [showSuccessToast, setShowSuccessToast] = useState(false)
+  const [connector, setConnector] = useState<CloudConnector | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [selectedFiles, setSelectedFiles] = useState<
+    GoogleDriveFile[] | OneDriveFile[]
+  >([]);
+  const [isIngesting, setIsIngesting] = useState<boolean>(false);
+  const [currentSyncTaskId, setCurrentSyncTaskId] = useState<string | null>(
+    null
+  );
+  const [showSuccessToast, setShowSuccessToast] = useState(false);
 
   useEffect(() => {
     const fetchConnectorInfo = async () => {
-      setIsLoading(true)
-      setError(null)
+      setIsLoading(true);
+      setError(null);
 
       try {
         // Fetch available connectors to validate the provider
-        const connectorsResponse = await fetch('/api/connectors')
+        const connectorsResponse = await fetch("/api/connectors");
         if (!connectorsResponse.ok) {
-          throw new Error('Failed to load connectors')
+          throw new Error("Failed to load connectors");
         }
 
-        const connectorsResult = await connectorsResponse.json()
-        const providerInfo = connectorsResult.connectors[provider]
+        const connectorsResult = await connectorsResponse.json();
+        const providerInfo = connectorsResult.connectors[provider];
 
         if (!providerInfo || !providerInfo.available) {
-          setError(`Cloud provider "${provider}" is not available or configured.`)
-          return
+          setError(
+            `Cloud provider "${provider}" is not available or configured.`
+          );
+          return;
         }
 
         // Check connector status
-        const statusResponse = await fetch(`/api/connectors/${provider}/status`)
+        const statusResponse = await fetch(
+          `/api/connectors/${provider}/status`
+        );
         if (!statusResponse.ok) {
-          throw new Error(`Failed to check ${provider} status`)
+          throw new Error(`Failed to check ${provider} status`);
         }
 
-        const statusData = await statusResponse.json()
-        const connections = statusData.connections || []
-        const activeConnection = connections.find((conn: {is_active: boolean, connection_id: string}) => conn.is_active)
-        const isConnected = activeConnection !== undefined
+        const statusData = await statusResponse.json();
+        const connections = statusData.connections || [];
+        const activeConnection = connections.find(
+          (conn: { is_active: boolean; connection_id: string }) =>
+            conn.is_active
+        );
+        const isConnected = activeConnection !== undefined;
 
-        let hasAccessToken = false
-        let accessTokenError: string | undefined = undefined
+        let hasAccessToken = false;
+        let accessTokenError: string | undefined = undefined;
 
         // Try to get access token for connected connectors
         if (isConnected && activeConnection) {
           try {
-            const tokenResponse = await fetch(`/api/connectors/${provider}/token?connection_id=${activeConnection.connection_id}`)
+            const tokenResponse = await fetch(
+              `/api/connectors/${provider}/token?connection_id=${activeConnection.connection_id}`
+            );
             if (tokenResponse.ok) {
-              const tokenData = await tokenResponse.json()
+              const tokenData = await tokenResponse.json();
               if (tokenData.access_token) {
-                hasAccessToken = true
-                setAccessToken(tokenData.access_token)
+                hasAccessToken = true;
+                setAccessToken(tokenData.access_token);
               }
             } else {
-              const errorData = await tokenResponse.json().catch(() => ({ error: 'Token unavailable' }))
-              accessTokenError = errorData.error || 'Access token unavailable'
+              const errorData = await tokenResponse
+                .json()
+                .catch(() => ({ error: "Token unavailable" }));
+              accessTokenError = errorData.error || "Access token unavailable";
             }
           } catch {
-            accessTokenError = 'Failed to fetch access token'
+            accessTokenError = "Failed to fetch access token";
           }
         }
 
@@ -115,61 +130,71 @@ export default function UploadProviderPage() {
           type: provider,
           connectionId: activeConnection?.connection_id,
           hasAccessToken,
-          accessTokenError
-        })
-
+          accessTokenError,
+        });
       } catch (error) {
-        console.error('Failed to load connector info:', error)
-        setError(error instanceof Error ? error.message : 'Failed to load connector information')
+        console.error("Failed to load connector info:", error);
+        setError(
+          error instanceof Error
+            ? error.message
+            : "Failed to load connector information"
+        );
       } finally {
-        setIsLoading(false)
+        setIsLoading(false);
       }
-    }
+    };
 
     if (provider) {
-      fetchConnectorInfo()
+      fetchConnectorInfo();
     }
-  }, [provider])
+  }, [provider]);
 
   // Watch for sync task completion and redirect
   useEffect(() => {
-    if (!currentSyncTaskId) return
-    
-    const currentTask = tasks.find(task => task.task_id === currentSyncTaskId)
-    
-    if (currentTask && currentTask.status === 'completed') {
+    if (!currentSyncTaskId) return;
+
+    const currentTask = tasks.find(task => task.task_id === currentSyncTaskId);
+
+    if (currentTask && currentTask.status === "completed") {
       // Task completed successfully, show toast and redirect
-      setIsIngesting(false)
-      setShowSuccessToast(true)
+      setIsIngesting(false);
+      setShowSuccessToast(true);
+
+      // Dispatch knowledge updated event to refresh the knowledge table
+      console.log(
+        "Cloud provider task completed, dispatching knowledgeUpdated event"
+      );
+      window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
+
       setTimeout(() => {
-        router.push('/knowledge')
-      }, 2000) // 2 second delay to let user see toast
-    } else if (currentTask && currentTask.status === 'failed') {
+        router.push("/knowledge");
+      }, 2000); // 2 second delay to let user see toast
+    } else if (currentTask && currentTask.status === "failed") {
       // Task failed, clear the tracking but don't redirect
-      setIsIngesting(false)
-      setCurrentSyncTaskId(null)
+      setIsIngesting(false);
+      setCurrentSyncTaskId(null);
     }
-  }, [tasks, currentSyncTaskId, router])
+  }, [tasks, currentSyncTaskId, router]);
 
   const handleFileSelected = (files: GoogleDriveFile[] | OneDriveFile[]) => {
-    setSelectedFiles(files)
-    console.log(`Selected ${files.length} files from ${provider}:`, files)
+    setSelectedFiles(files);
+    console.log(`Selected ${files.length} files from ${provider}:`, files);
     // You can add additional handling here like triggering sync, etc.
-  }
+  };
 
   const handleGoogleDriveFileSelected = (files: GoogleDriveFile[]) => {
-    handleFileSelected(files)
-  }
+    handleFileSelected(files);
+  };
 
   const handleOneDriveFileSelected = (files: OneDriveFile[]) => {
-    handleFileSelected(files)
-  }
+    handleFileSelected(files);
+  };
 
   const handleSync = async (connector: CloudConnector) => {
-    if (!connector.connectionId || selectedFiles.length === 0) return
-    
-    setIsIngesting(true)
-    
+    if (!connector.connectionId || selectedFiles.length === 0) return;
+
+    setIsIngesting(true);
+
     try {
       const syncBody: {
         connection_id: string;
@@ -177,43 +202,43 @@ export default function UploadProviderPage() {
         selected_files?: string[];
       } = {
         connection_id: connector.connectionId,
-        selected_files: selectedFiles.map(file => file.id)
-      }
-      
+        selected_files: selectedFiles.map(file => file.id),
+      };
+
       const response = await fetch(`/api/connectors/${connector.type}/sync`, {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
         body: JSON.stringify(syncBody),
-      })
-      
-      const result = await response.json()
-      
+      });
+
+      const result = await response.json();
+
       if (response.status === 201) {
-        const taskIds = result.task_ids
+        const taskIds = result.task_ids;
         if (taskIds && taskIds.length > 0) {
-          const taskId = taskIds[0] // Use the first task ID
-          addTask(taskId)
-          setCurrentSyncTaskId(taskId)
+          const taskId = taskIds[0]; // Use the first task ID
+          addTask(taskId);
+          setCurrentSyncTaskId(taskId);
         }
       } else {
-        console.error('Sync failed:', result.error)
+        console.error("Sync failed:", result.error);
       }
     } catch (error) {
-      console.error('Sync error:', error)
-      setIsIngesting(false)
+      console.error("Sync error:", error);
+      setIsIngesting(false);
     }
-  }
+  };
 
   const getProviderDisplayName = () => {
     const nameMap: { [key: string]: string } = {
-      'google_drive': 'Google Drive',
-      'onedrive': 'OneDrive',
-      'sharepoint': 'SharePoint'
-    }
-    return nameMap[provider] || provider
-  }
+      google_drive: "Google Drive",
+      onedrive: "OneDrive",
+      sharepoint: "SharePoint",
+    };
+    return nameMap[provider] || provider;
+  };
 
   if (isLoading) {
     return (
@@ -225,15 +250,15 @@ export default function UploadProviderPage() {
           </div>
         </div>
       </div>
-    )
+    );
   }
 
   if (error || !connector) {
     return (
       <div className="container mx-auto p-6">
         <div className="mb-6">
-          <Button 
-            variant="ghost" 
+          <Button
+            variant="ghost"
             onClick={() => router.back()}
             className="mb-4"
           >
@@ -241,27 +266,29 @@ export default function UploadProviderPage() {
             Back
           </Button>
         </div>
-        
+
         <div className="flex items-center justify-center py-12">
           <div className="text-center max-w-md">
             <AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
-            <h2 className="text-xl font-semibold mb-2">Provider Not Available</h2>
+            <h2 className="text-xl font-semibold mb-2">
+              Provider Not Available
+            </h2>
             <p className="text-muted-foreground mb-4">{error}</p>
-            <Button onClick={() => router.push('/settings')}>
+            <Button onClick={() => router.push("/settings")}>
               Configure Connectors
             </Button>
           </div>
         </div>
       </div>
-    )
+    );
   }
 
   if (connector.status !== "connected") {
     return (
       <div className="container mx-auto p-6">
         <div className="mb-6">
-          <Button 
-            variant="ghost" 
+          <Button
+            variant="ghost"
             onClick={() => router.back()}
             className="mb-4"
           >
@@ -269,29 +296,32 @@ export default function UploadProviderPage() {
             Back
           </Button>
         </div>
-        
+
         <div className="flex items-center justify-center py-12">
           <div className="text-center max-w-md">
             <AlertCircle className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
-            <h2 className="text-xl font-semibold mb-2">{connector.name} Not Connected</h2>
+            <h2 className="text-xl font-semibold mb-2">
+              {connector.name} Not Connected
+            </h2>
             <p className="text-muted-foreground mb-4">
-              You need to connect your {connector.name} account before you can select files.
+              You need to connect your {connector.name} account before you can
+              select files.
             </p>
-            <Button onClick={() => router.push('/settings')}>
+            <Button onClick={() => router.push("/settings")}>
               Connect {connector.name}
             </Button>
           </div>
         </div>
       </div>
-    )
+    );
   }
 
   if (!connector.hasAccessToken) {
     return (
       <div className="container mx-auto p-6">
         <div className="mb-6">
-          <Button 
-            variant="ghost" 
+          <Button
+            variant="ghost"
             onClick={() => router.back()}
             className="mb-4"
           >
@@ -299,30 +329,30 @@ export default function UploadProviderPage() {
             Back
           </Button>
         </div>
-        
+
         <div className="flex items-center justify-center py-12">
           <div className="text-center max-w-md">
             <AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
-            <h2 className="text-xl font-semibold mb-2">Access Token Required</h2>
+            <h2 className="text-xl font-semibold mb-2">
+              Access Token Required
+            </h2>
             <p className="text-muted-foreground mb-4">
-              {connector.accessTokenError || `Unable to get access token for ${connector.name}. Try reconnecting your account.`}
+              {connector.accessTokenError ||
+                `Unable to get access token for ${connector.name}. Try reconnecting your account.`}
             </p>
-            <Button onClick={() => router.push('/settings')}>
+            <Button onClick={() => router.push("/settings")}>
               Reconnect {connector.name}
             </Button>
           </div>
         </div>
       </div>
-    )
+    );
   }
 
   return (
     <div className="container mx-auto max-w-3xl p-6">
       <div className="mb-6 flex gap-2 items-center">
-        <Button 
-          variant="ghost" 
-          onClick={() => router.back()}
-        >
+        <Button variant="ghost" onClick={() => router.back()}>
           <ArrowLeft className="h-4 w-4 scale-125 mr-2" />
         </Button>
         <h2 className="text-2xl font-bold">Add Cloud Knowledge</h2>
@@ -337,7 +367,7 @@ export default function UploadProviderPage() {
             accessToken={accessToken || undefined}
           />
         )}
-        
+
         {(connector.type === "onedrive" || connector.type === "sharepoint") && (
           <OneDrivePicker
             onFileSelected={handleOneDriveFileSelected}
@@ -352,7 +382,7 @@ export default function UploadProviderPage() {
       {selectedFiles.length > 0 && (
         <div className="max-w-3xl mx-auto mt-8">
           <div className="flex justify-end gap-3 mb-4">
-            <Button 
+            <Button
               onClick={() => handleSync(connector)}
               disabled={selectedFiles.length === 0 || isIngesting}
             >
@@ -365,14 +395,14 @@ export default function UploadProviderPage() {
           </div>
         </div>
       )}
-      
+
       {/* Success toast notification */}
-      <Toast 
+      <Toast
         message="Ingested successfully!."
         show={showSuccessToast}
         onHide={() => setShowSuccessToast(false)}
         duration={20000}
       />
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/src/contexts/task-context.tsx b/frontend/src/contexts/task-context.tsx
index f84b0f95..c58e1d19 100644
--- a/frontend/src/contexts/task-context.tsx
+++ b/frontend/src/contexts/task-context.tsx
@@ -57,7 +57,10 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
   const queryClient = useQueryClient();
 
   const refetchSearch = () => {
-    queryClient.invalidateQueries({ queryKey: ["search"] });
+    queryClient.invalidateQueries({
+      queryKey: ["search"],
+      exact: false,
+    });
   };
 
   const fetchTasks = useCallback(async () => {
@@ -71,12 +74,12 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
         const newTasks = data.tasks || [];
 
         // Update tasks and check for status changes in the same state update
-        setTasks((prevTasks) => {
+        setTasks(prevTasks => {
           // Check for newly completed tasks to show toasts
           if (prevTasks.length > 0) {
             newTasks.forEach((newTask: Task) => {
               const oldTask = prevTasks.find(
-                (t) => t.task_id === newTask.task_id,
+                t => t.task_id === newTask.task_id
               );
               if (
                 oldTask &&
@@ -92,6 +95,11 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
                   },
                 });
                 refetchSearch();
+                // Dispatch knowledge updated event for all knowledge-related pages
+                console.log(
+                  "Task completed successfully, dispatching knowledgeUpdated event"
+                );
+                window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
               } else if (
                 oldTask &&
                 oldTask.status !== "failed" &&
@@ -130,21 +138,19 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
           const data = await response.json();
           const newTasks = data.tasks || [];
           const foundTask = newTasks.find(
-            (task: Task) => task.task_id === taskId,
+            (task: Task) => task.task_id === taskId
           );
 
           if (foundTask) {
             // Task found! Update the tasks state
-            setTasks((prevTasks) => {
+            setTasks(prevTasks => {
               // Check if task is already in the list
-              const exists = prevTasks.some((t) => t.task_id === taskId);
+              const exists = prevTasks.some(t => t.task_id === taskId);
               if (!exists) {
                 return [...prevTasks, foundTask];
               }
               // Update existing task
-              return prevTasks.map((t) =>
-                t.task_id === taskId ? foundTask : t,
-              );
+              return prevTasks.map(t => (t.task_id === taskId ? foundTask : t));
             });
             return; // Stop polling, we found it
           }
@@ -169,7 +175,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
   }, [fetchTasks]);
 
   const removeTask = useCallback((taskId: string) => {
-    setTasks((prev) => prev.filter((task) => task.task_id !== taskId));
+    setTasks(prev => prev.filter(task => task.task_id !== taskId));
   }, []);
 
   const cancelTask = useCallback(
@@ -196,11 +202,11 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
         });
       }
     },
-    [fetchTasks],
+    [fetchTasks]
   );
 
   const toggleMenu = useCallback(() => {
-    setIsMenuOpen((prev) => !prev);
+    setIsMenuOpen(prev => !prev);
   }, []);
 
   // Periodic polling for task updates
diff --git a/src/api/connectors.py b/src/api/connectors.py
index 2696ca08..34872002 100644
--- a/src/api/connectors.py
+++ b/src/api/connectors.py
@@ -373,3 +373,5 @@ async def connector_token(request: Request, connector_service, session_manager):
     except Exception as e:
         logger.error("Error getting connector token", error=str(e))
         return JSONResponse({"error": str(e)}, status_code=500)
+
+
diff --git a/src/api/documents.py b/src/api/documents.py
new file mode 100644
index 00000000..57a4abb3
--- /dev/null
+++ b/src/api/documents.py
@@ -0,0 +1,59 @@
+from starlette.requests import Request
+from starlette.responses import JSONResponse
+from utils.logging_config import get_logger
+from config.settings import INDEX_NAME
+
+logger = get_logger(__name__)
+
+
+async def delete_documents_by_filename(request: Request, document_service, session_manager):
+    """Delete all documents with a specific filename"""
+    data = await request.json()
+    filename = data.get("filename")
+    
+    if not filename:
+        return JSONResponse({"error": "filename is required"}, status_code=400)
+    
+    user = request.state.user
+    jwt_token = request.state.jwt_token
+    
+    try:
+        # Get user's OpenSearch client
+        opensearch_client = session_manager.get_user_opensearch_client(
+            user.user_id, jwt_token
+        )
+        
+        # Delete by query to remove all chunks of this document
+        delete_query = {
+            "query": {
+                "bool": {
+                    "must": [
+                        {"term": {"filename": filename}}
+                    ]
+                }
+            }
+        }
+        
+        result = await opensearch_client.delete_by_query(
+            index=INDEX_NAME,
+            body=delete_query,
+            conflicts="proceed"
+        )
+        
+        deleted_count = result.get("deleted", 0)
+        logger.info(f"Deleted {deleted_count} chunks for filename {filename}", user_id=user.user_id)
+        
+        return JSONResponse({
+            "success": True,
+            "deleted_chunks": deleted_count,
+            "filename": filename,
+            "message": f"All documents with filename '{filename}' deleted successfully"
+        }, status_code=200)
+        
+    except Exception as e:
+        logger.error("Error deleting documents by filename", filename=filename, error=str(e))
+        error_str = str(e)
+        if "AuthenticationException" in error_str:
+            return JSONResponse({"error": "Access denied: insufficient permissions"}, status_code=403)
+        else:
+            return JSONResponse({"error": str(e)}, status_code=500)
diff --git a/src/main.py b/src/main.py
index 1c0dc09f..ebf6cb08 100644
--- a/src/main.py
+++ b/src/main.py
@@ -30,6 +30,7 @@ from api import (
     auth,
     chat,
     connectors,
+    documents,
     flows,
     knowledge_filter,
     langflow_files,
@@ -872,6 +873,18 @@ async def create_app():
             ),
             methods=["POST", "GET"],
         ),
+        # Document endpoints
+        Route(
+            "/documents/delete-by-filename",
+            require_auth(services["session_manager"])(
+                partial(
+                    documents.delete_documents_by_filename,
+                    document_service=services["document_service"],
+                    session_manager=services["session_manager"],
+                )
+            ),
+            methods=["POST"],
+        ),
         # OIDC endpoints
         Route(
             "/.well-known/openid-configuration",
diff --git a/src/services/document_service.py b/src/services/document_service.py
index 70a70942..949515e3 100644
--- a/src/services/document_service.py
+++ b/src/services/document_service.py
@@ -435,3 +435,4 @@ class DocumentService:
 
             if upload_task.processed_files >= upload_task.total_files:
                 upload_task.status = TaskStatus.COMPLETED
+
diff --git a/src/session_manager.py b/src/session_manager.py
index 1008d1fd..b58aa1c4 100644
--- a/src/session_manager.py
+++ b/src/session_manager.py
@@ -191,7 +191,7 @@ class SessionManager:
 
     def get_user_opensearch_client(self, user_id: str, jwt_token: str):
         """Get or create OpenSearch client for user with their JWT"""
-        from config.settings import is_no_auth_mode
+        from config.settings import is_no_auth_mode, clients
 
         logger.debug(
             "get_user_opensearch_client",
@@ -200,8 +200,13 @@ class SessionManager:
             no_auth_mode=is_no_auth_mode(),
         )
 
-        # In no-auth mode, create anonymous JWT for OpenSearch DLS
-        if jwt_token is None and (is_no_auth_mode() or user_id in (None, AnonymousUser().user_id)):
+        # In no-auth mode, use admin client directly (no JWT tokens)
+        if is_no_auth_mode():
+            logger.debug("Using admin OpenSearch client in no-auth mode")
+            return clients.opensearch
+
+        # In auth mode, create anonymous JWT for OpenSearch DLS if needed
+        if jwt_token is None and user_id in (None, AnonymousUser().user_id):
             if not hasattr(self, "_anonymous_jwt"):
                 # Create anonymous JWT token for OpenSearch OIDC
                 logger.debug("Creating anonymous JWT")
@@ -214,8 +219,6 @@ class SessionManager:
 
         # Check if we have a cached client for this user
         if user_id not in self.user_opensearch_clients:
-            from config.settings import clients
-
             self.user_opensearch_clients[user_id] = (
                 clients.create_user_opensearch_client(jwt_token)
             )

From ef39b75da12b1d8233d14d4c6e33ef6639ff450b Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Wed, 17 Sep 2025 17:22:19 -0600
Subject: [PATCH 02/10] Implement document deletion functionality in
 KnowledgeActionsDropdown

- Added a delete confirmation dialog to the KnowledgeActionsDropdown component.
- Integrated useDeleteDocument mutation for handling document deletion.
- Updated the dropdown to pass the filename prop for targeted deletions.
- Enhanced user feedback with success and error messages upon deletion.
---
 .../components/knowledge-actions-dropdown.tsx | 68 +++++++++++++++----
 .../app/api/mutations/useDeleteDocument.ts    | 45 ++++++++++++
 frontend/src/app/knowledge/page.tsx           |  4 +-
 3 files changed, 102 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/app/api/mutations/useDeleteDocument.ts

diff --git a/frontend/components/knowledge-actions-dropdown.tsx b/frontend/components/knowledge-actions-dropdown.tsx
index ecf77e22..d4c0e6c0 100644
--- a/frontend/components/knowledge-actions-dropdown.tsx
+++ b/frontend/components/knowledge-actions-dropdown.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { EllipsisVertical } from "lucide-react";
+import { useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -8,18 +9,59 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "./ui/button";
+import { DeleteConfirmationDialog } from "./confirmation-dialog";
+import { useDeleteDocument } from "@/app/api/mutations/useDeleteDocument";
+import { toast } from "sonner";
 
-export function KnowledgeActionsDropdown() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger>
-        <Button variant="ghost" className="hover:bg-transparent">
-          <EllipsisVertical className="h-4 w-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent side="right" sideOffset={-10}>
-        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
+interface KnowledgeActionsDropdownProps {
+  filename: string;
 }
+
+export const KnowledgeActionsDropdown = ({
+  filename,
+}: KnowledgeActionsDropdownProps) => {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const deleteDocumentMutation = useDeleteDocument();
+
+  const handleDelete = async () => {
+    try {
+      await deleteDocumentMutation.mutateAsync({ filename });
+      toast.success(`Successfully deleted "${filename}"`);
+      setShowDeleteDialog(false);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete document"
+      );
+    }
+  };
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button variant="ghost" className="hover:bg-transparent">
+            <EllipsisVertical className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side="right" sideOffset={-10}>
+          <DropdownMenuItem
+            className="text-destructive focus:text-destructive"
+            onClick={() => setShowDeleteDialog(true)}
+          >
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DeleteConfirmationDialog
+        open={showDeleteDialog}
+        onOpenChange={setShowDeleteDialog}
+        title="Delete Document"
+        description={`Are you sure you want to delete "${filename}"? This will remove all chunks and data associated with this document. This action cannot be undone.`}
+        confirmText="Delete"
+        onConfirm={handleDelete}
+        isLoading={deleteDocumentMutation.isPending}
+      />
+    </>
+  );
+};
diff --git a/frontend/src/app/api/mutations/useDeleteDocument.ts b/frontend/src/app/api/mutations/useDeleteDocument.ts
new file mode 100644
index 00000000..78985498
--- /dev/null
+++ b/frontend/src/app/api/mutations/useDeleteDocument.ts
@@ -0,0 +1,45 @@
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+interface DeleteDocumentRequest {
+  filename: string;
+}
+
+interface DeleteDocumentResponse {
+  success: boolean;
+  deleted_chunks: number;
+  filename: string;
+  message: string;
+}
+
+const deleteDocument = async (
+  data: DeleteDocumentRequest
+): Promise<DeleteDocumentResponse> => {
+  const response = await fetch("/api/documents/delete-by-filename", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || "Failed to delete document");
+  }
+
+  return response.json();
+};
+
+export const useDeleteDocument = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteDocument,
+    onSuccess: () => {
+      // Invalidate and refetch search queries to update the UI
+      queryClient.invalidateQueries({ queryKey: ["search"] });
+    },
+  });
+};
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 2116f4d1..3df72944 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -133,8 +133,8 @@ function SearchPage() {
       },
     },
     {
-      cellRenderer: () => {
-        return <KnowledgeActionsDropdown />;
+      cellRenderer: ({ data }: CustomCellRendererProps<File>) => {
+        return <KnowledgeActionsDropdown filename={data?.filename || ""} />;
       },
       cellStyle: {
         alignItems: "center",

From 3d74edfe3c66f4449f50f198dd6da8b0d26d8316 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Wed, 17 Sep 2025 17:31:51 -0600
Subject: [PATCH 03/10] Enhance Knowledge Page with Bulk Document Deletion

- Implemented bulk selection and deletion functionality in the Knowledge page.
- Added a confirmation dialog for bulk deletions, providing user feedback on success or failure.
- Updated AgGrid configuration to support multiple row selection and checkbox functionality.
- Styled checkboxes for better visibility and user experience.
- Refactored related components to accommodate new bulk actions.
---
 frontend/src/app/knowledge/page.tsx           | 117 +++++++++++++++++-
 .../src/components/AgGrid/agGridStyles.css    |  22 ++++
 .../AgGrid/registerAgGridModules.ts           |   2 +
 src/config/settings.py                        |  19 +--
 4 files changed, 149 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 3df72944..39aefa55 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -7,6 +7,8 @@ import {
   HardDrive,
   Loader2,
   Search,
+  Trash2,
+  X,
 } from "lucide-react";
 import { AgGridReact, CustomCellRendererProps } from "ag-grid-react";
 import {
@@ -29,6 +31,9 @@ import { ColDef, RowClickedEvent } from "ag-grid-community";
 import "@/components/AgGrid/registerAgGridModules";
 import "@/components/AgGrid/agGridStyles.css";
 import { KnowledgeActionsDropdown } from "@/components/knowledge-actions-dropdown";
+import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog";
+import { useDeleteDocument } from "../api/mutations/useDeleteDocument";
+import { toast } from "sonner";
 
 // Function to get the appropriate icon for a connector type
 function getSourceIcon(connectorType?: string) {
@@ -52,6 +57,10 @@ function SearchPage() {
   const [query, setQuery] = useState("");
   const [queryInputText, setQueryInputText] = useState("");
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [selectedRows, setSelectedRows] = useState<File[]>([]);
+  const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
+
+  const deleteDocumentMutation = useDeleteDocument();
 
   const {
     data = [],
@@ -86,9 +95,11 @@ function SearchPage() {
     {
       field: "filename",
       headerName: "Source",
+      checkboxSelection: true,
+      headerCheckboxSelection: true,
       cellRenderer: ({ data, value }: CustomCellRendererProps<File>) => {
         return (
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 ml-2">
             {getSourceIcon(data?.connector_type)}
             <span className="font-medium text-foreground truncate">
               {value}
@@ -96,6 +107,10 @@ function SearchPage() {
           </div>
         );
       },
+      cellStyle: {
+        display: "flex",
+        alignItems: "center",
+      },
     },
     {
       field: "size",
@@ -163,6 +178,52 @@ function SearchPage() {
     suppressMovable: true,
   };
 
+  const onSelectionChanged = useCallback(() => {
+    if (gridRef.current) {
+      const selectedNodes = gridRef.current.api.getSelectedRows();
+      setSelectedRows(selectedNodes);
+    }
+  }, []);
+
+  const handleBulkDelete = async () => {
+    if (selectedRows.length === 0) return;
+
+    try {
+      // Delete each file individually since the API expects one filename at a time
+      const deletePromises = selectedRows.map(row =>
+        deleteDocumentMutation.mutateAsync({ filename: row.filename })
+      );
+
+      await Promise.all(deletePromises);
+
+      toast.success(
+        `Successfully deleted ${selectedRows.length} document${
+          selectedRows.length > 1 ? "s" : ""
+        }`
+      );
+      setSelectedRows([]);
+      setShowBulkDeleteDialog(false);
+
+      // Clear selection in the grid
+      if (gridRef.current) {
+        gridRef.current.api.deselectAll();
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : "Failed to delete some documents"
+      );
+    }
+  };
+
+  const clearSelection = useCallback(() => {
+    setSelectedRows([]);
+    if (gridRef.current) {
+      gridRef.current.api.deselectAll();
+    }
+  }, []);
+
   return (
     <div
       className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
@@ -183,6 +244,33 @@ function SearchPage() {
           <h2 className="text-lg font-semibold">Project Knowledge</h2>
           <KnowledgeDropdown variant="button" />
         </div>
+
+        {/* Bulk Actions Bar */}
+        {selectedRows.length > 0 && (
+          <div className="flex items-center justify-between bg-muted/20 rounded-lg border border-border/50 px-4 py-3 mb-6">
+            <div className="flex items-center gap-3">
+              <span className="text-sm font-medium">
+                {selectedRows.length} document
+                {selectedRows.length > 1 ? "s" : ""} selected
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowBulkDeleteDialog(true)}
+                className="text-destructive border-destructive hover:bg-destructive hover:text-destructive-foreground"
+              >
+                <Trash2 className="h-4 w-4 mr-2" />
+                Delete Selected
+              </Button>
+              <Button variant="ghost" size="sm" onClick={clearSelection}>
+                <X className="h-4 w-4 mr-2" />
+                Clear Selection
+              </Button>
+            </div>
+          </div>
+        )}
         {/* Search Input Area */}
         <div className="flex-shrink-0 mb-6 lg:max-w-[75%] xl:max-w-[50%]">
           <form onSubmit={handleSearch} className="flex gap-3">
@@ -259,8 +347,15 @@ function SearchPage() {
             loading={isFetching}
             ref={gridRef}
             rowData={fileResults}
+            rowSelection="multiple"
+            suppressRowClickSelection={true}
+            getRowId={params => params.data.filename}
+            onSelectionChanged={onSelectionChanged}
             onRowClicked={(params: RowClickedEvent<File>) => {
-              setSelectedFile(params.data?.filename ?? "");
+              // Only navigate to chunks if no rows are selected and not clicking on checkbox
+              if (selectedRows.length === 0) {
+                setSelectedFile(params.data?.filename ?? "");
+              }
             }}
             noRowsOverlayComponent={() => (
               <div className="text-center">
@@ -276,6 +371,24 @@ function SearchPage() {
           />
         )}
       </div>
+
+      {/* Bulk Delete Confirmation Dialog */}
+      <DeleteConfirmationDialog
+        open={showBulkDeleteDialog}
+        onOpenChange={setShowBulkDeleteDialog}
+        title="Delete Documents"
+        description={`Are you sure you want to delete ${
+          selectedRows.length
+        } document${
+          selectedRows.length > 1 ? "s" : ""
+        }? This will remove all chunks and data associated with these documents. This action cannot be undone.
+
+Documents to be deleted:
+${selectedRows.map(row => `• ${row.filename}`).join("\n")}`}
+        confirmText="Delete All"
+        onConfirm={handleBulkDelete}
+        isLoading={deleteDocumentMutation.isPending}
+      />
     </div>
   );
 }
diff --git a/frontend/src/components/AgGrid/agGridStyles.css b/frontend/src/components/AgGrid/agGridStyles.css
index b595e18c..d1d7e07d 100644
--- a/frontend/src/components/AgGrid/agGridStyles.css
+++ b/frontend/src/components/AgGrid/agGridStyles.css
@@ -11,6 +11,12 @@ body {
   --ag-wrapper-border: none;
   --ag-font-family: var(--font-sans);
 
+  /* Checkbox styling */
+  --ag-checkbox-background-color: hsl(var(--background));
+  --ag-checkbox-border-color: hsl(var(--border));
+  --ag-checkbox-checked-color: hsl(var(--primary));
+  --ag-checkbox-unchecked-color: transparent;
+
   .ag-header {
     border-bottom: 1px solid hsl(var(--border));
     margin-bottom: 0.5rem;
@@ -18,4 +24,20 @@ body {
   .ag-row {
     cursor: pointer;
   }
+
+  /* Make sure checkboxes are visible */
+  .ag-selection-checkbox,
+  .ag-header-select-all {
+    opacity: 1 !important;
+  }
+
+  .ag-checkbox-input-wrapper {
+    border: 1px solid hsl(var(--border));
+    background-color: hsl(var(--background));
+  }
+
+  .ag-checkbox-input-wrapper.ag-checked {
+    background-color: hsl(var(--primary));
+    border-color: hsl(var(--primary));
+  }
 }
diff --git a/frontend/src/components/AgGrid/registerAgGridModules.ts b/frontend/src/components/AgGrid/registerAgGridModules.ts
index da2c5280..6f3f7bc2 100644
--- a/frontend/src/components/AgGrid/registerAgGridModules.ts
+++ b/frontend/src/components/AgGrid/registerAgGridModules.ts
@@ -11,6 +11,7 @@ import {
     DateFilterModule,
     EventApiModule,
     GridStateModule,
+    RowSelectionModule,
   } from 'ag-grid-community';
   
   // Importing necessary modules from ag-grid-community
@@ -27,6 +28,7 @@ import {
     DateFilterModule,
     EventApiModule,
     GridStateModule,
+    RowSelectionModule,
     // The ValidationModule adds helpful console warnings/errors that can help identify bad configuration during development.
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
   ]);
diff --git a/src/config/settings.py b/src/config/settings.py
index 715146fb..035ff388 100644
--- a/src/config/settings.py
+++ b/src/config/settings.py
@@ -89,8 +89,8 @@ INDEX_BODY = {
                 "type": "knn_vector",
                 "dimension": VECTOR_DIM,
                 "method": {
-                    "name": "disk_ann",
-                    "engine": "jvector",
+                    "name": "hnsw",
+                    "engine": "lucene",
                     "space_type": "l2",
                     "parameters": {"ef_construction": 100, "m": 16},
                 },
@@ -255,8 +255,8 @@ class AppClients:
         self.opensearch = AsyncOpenSearch(
             hosts=[{"host": OPENSEARCH_HOST, "port": OPENSEARCH_PORT}],
             connection_class=AIOHttpConnection,
-            scheme="https",
-            use_ssl=True,
+            scheme="http",
+            use_ssl=False,
             verify_certs=False,
             ssl_assert_fingerprint=None,
             http_auth=(OPENSEARCH_USERNAME, OPENSEARCH_PASSWORD),
@@ -381,17 +381,18 @@ class AppClients:
             )
 
     def create_user_opensearch_client(self, jwt_token: str):
-        """Create OpenSearch client with user's JWT token for OIDC auth"""
-        headers = {"Authorization": f"Bearer {jwt_token}"}
+        """Create OpenSearch client with basic auth (JWT not used in current setup)"""
+        # Note: jwt_token parameter kept for compatibility but not used
+        # Using basic auth instead of JWT Bearer tokens
 
         return AsyncOpenSearch(
             hosts=[{"host": OPENSEARCH_HOST, "port": OPENSEARCH_PORT}],
             connection_class=AIOHttpConnection,
-            scheme="https",
-            use_ssl=True,
+            scheme="http",
+            use_ssl=False,
             verify_certs=False,
             ssl_assert_fingerprint=None,
-            headers=headers,
+            http_auth=(OPENSEARCH_USERNAME, OPENSEARCH_PASSWORD),  # Use basic auth
             http_compress=True,
         )
 

From ed0306bde3a7d5f43c73b715a46d8299f0ff0f58 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Wed, 17 Sep 2025 17:34:35 -0600
Subject: [PATCH 04/10] revert settings

---
 src/config/settings.py | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/config/settings.py b/src/config/settings.py
index 035ff388..c4e36b51 100644
--- a/src/config/settings.py
+++ b/src/config/settings.py
@@ -89,8 +89,8 @@ INDEX_BODY = {
                 "type": "knn_vector",
                 "dimension": VECTOR_DIM,
                 "method": {
-                    "name": "hnsw",
-                    "engine": "lucene",
+                    "name": "disk_ann",
+                    "engine": "jvector",
                     "space_type": "l2",
                     "parameters": {"ef_construction": 100, "m": 16},
                 },
@@ -255,8 +255,8 @@ class AppClients:
         self.opensearch = AsyncOpenSearch(
             hosts=[{"host": OPENSEARCH_HOST, "port": OPENSEARCH_PORT}],
             connection_class=AIOHttpConnection,
-            scheme="http",
-            use_ssl=False,
+            scheme="https",
+            use_ssl=True,
             verify_certs=False,
             ssl_assert_fingerprint=None,
             http_auth=(OPENSEARCH_USERNAME, OPENSEARCH_PASSWORD),
@@ -381,21 +381,20 @@ class AppClients:
             )
 
     def create_user_opensearch_client(self, jwt_token: str):
-        """Create OpenSearch client with basic auth (JWT not used in current setup)"""
-        # Note: jwt_token parameter kept for compatibility but not used
-        # Using basic auth instead of JWT Bearer tokens
+        """Create OpenSearch client with user's JWT token for OIDC auth"""
+        headers = {"Authorization": f"Bearer {jwt_token}"}
 
         return AsyncOpenSearch(
             hosts=[{"host": OPENSEARCH_HOST, "port": OPENSEARCH_PORT}],
             connection_class=AIOHttpConnection,
-            scheme="http",
-            use_ssl=False,
+            scheme="https",
+            use_ssl=True,
             verify_certs=False,
             ssl_assert_fingerprint=None,
-            http_auth=(OPENSEARCH_USERNAME, OPENSEARCH_PASSWORD),  # Use basic auth
+            headers=headers,
             http_compress=True,
         )
 
 
 # Global clients instance
-clients = AppClients()
+clients = AppClients()
\ No newline at end of file

From a99c5f647d4b1053739d6331eb2e1394ffccaa95 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Wed, 17 Sep 2025 17:38:30 -0600
Subject: [PATCH 05/10] revert

---
 src/session_manager.py | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/session_manager.py b/src/session_manager.py
index b58aa1c4..6b815d72 100644
--- a/src/session_manager.py
+++ b/src/session_manager.py
@@ -191,7 +191,7 @@ class SessionManager:
 
     def get_user_opensearch_client(self, user_id: str, jwt_token: str):
         """Get or create OpenSearch client for user with their JWT"""
-        from config.settings import is_no_auth_mode, clients
+        from config.settings import is_no_auth_mode
 
         logger.debug(
             "get_user_opensearch_client",
@@ -200,13 +200,8 @@ class SessionManager:
             no_auth_mode=is_no_auth_mode(),
         )
 
-        # In no-auth mode, use admin client directly (no JWT tokens)
-        if is_no_auth_mode():
-            logger.debug("Using admin OpenSearch client in no-auth mode")
-            return clients.opensearch
-
-        # In auth mode, create anonymous JWT for OpenSearch DLS if needed
-        if jwt_token is None and user_id in (None, AnonymousUser().user_id):
+        # In no-auth mode, create anonymous JWT for OpenSearch DLS
+        if jwt_token is None and (is_no_auth_mode() or user_id in (None, AnonymousUser().user_id)):
             if not hasattr(self, "_anonymous_jwt"):
                 # Create anonymous JWT token for OpenSearch OIDC
                 logger.debug("Creating anonymous JWT")
@@ -219,6 +214,8 @@ class SessionManager:
 
         # Check if we have a cached client for this user
         if user_id not in self.user_opensearch_clients:
+            from config.settings import clients
+
             self.user_opensearch_clients[user_id] = (
                 clients.create_user_opensearch_client(jwt_token)
             )
@@ -228,4 +225,4 @@ class SessionManager:
     def _create_anonymous_jwt(self) -> str:
         """Create JWT token for anonymous user in no-auth mode"""
         anonymous_user = AnonymousUser()
-        return self.create_jwt_token(anonymous_user)
+        return self.create_jwt_token(anonymous_user)
\ No newline at end of file

From 733e24bf003fabb1a7bb465d6dca8672846aeb48 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Wed, 17 Sep 2025 18:15:01 -0600
Subject: [PATCH 06/10] Refactor SearchPage Component and Update Bulk Actions

- Removed the clear selection functionality and associated UI elements from the SearchPage component.
- Simplified the bulk actions bar by integrating a delete button and a sync button with alert functionality.
- Adjusted button styles for consistency and improved user experience.
- Enhanced the search input area for better accessibility and usability.
---
 frontend/src/app/knowledge/page.tsx | 55 ++++++++++-------------------
 1 file changed, 19 insertions(+), 36 deletions(-)

diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 39aefa55..50f7ff56 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -8,7 +8,6 @@ import {
   Loader2,
   Search,
   Trash2,
-  X,
 } from "lucide-react";
 import { AgGridReact, CustomCellRendererProps } from "ag-grid-react";
 import {
@@ -217,13 +216,6 @@ function SearchPage() {
     }
   };
 
-  const clearSelection = useCallback(() => {
-    setSelectedRows([]);
-    if (gridRef.current) {
-      gridRef.current.api.deselectAll();
-    }
-  }, []);
-
   return (
     <div
       className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
@@ -245,32 +237,6 @@ function SearchPage() {
           <KnowledgeDropdown variant="button" />
         </div>
 
-        {/* Bulk Actions Bar */}
-        {selectedRows.length > 0 && (
-          <div className="flex items-center justify-between bg-muted/20 rounded-lg border border-border/50 px-4 py-3 mb-6">
-            <div className="flex items-center gap-3">
-              <span className="text-sm font-medium">
-                {selectedRows.length} document
-                {selectedRows.length > 1 ? "s" : ""} selected
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setShowBulkDeleteDialog(true)}
-                className="text-destructive border-destructive hover:bg-destructive hover:text-destructive-foreground"
-              >
-                <Trash2 className="h-4 w-4 mr-2" />
-                Delete Selected
-              </Button>
-              <Button variant="ghost" size="sm" onClick={clearSelection}>
-                <X className="h-4 w-4 mr-2" />
-                Clear Selection
-              </Button>
-            </div>
-          </div>
-        )}
         {/* Search Input Area */}
         <div className="flex-shrink-0 mb-6 lg:max-w-[75%] xl:max-w-[50%]">
           <form onSubmit={handleSearch} className="flex gap-3">
@@ -282,12 +248,12 @@ function SearchPage() {
               value={queryInputText}
               onChange={e => setQueryInputText(e.target.value)}
               placeholder="Search your documents..."
-              className="flex-1 bg-muted/20 rounded-lg border border-border/50 px-4 py-3 h-12 focus-visible:ring-1 focus-visible:ring-ring"
+              className="flex-1 bg-muted/20 rounded-lg border border-border/50 px-4 py-3 focus-visible:ring-1 focus-visible:ring-ring"
             />
             <Button
               type="submit"
               variant="outline"
-              className="rounded-lg h-12 w-12 p-0 flex-shrink-0"
+              className="rounded-lg p-0 flex-shrink-0"
             >
               {isFetching ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
@@ -295,6 +261,23 @@ function SearchPage() {
                 <Search className="h-4 w-4" />
               )}
             </Button>
+            <Button
+              type="button"
+              variant="outline"
+              className="rounded-lg flex-shrink-0"
+              onClick={() => alert("Not implemented")}
+            >
+              Sync
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              className="rounded-lg flex-shrink-0"
+              onClick={() => setShowBulkDeleteDialog(true)}
+              disabled={selectedRows.length === 0}
+            >
+              <Trash2 className="h-4 w-4" /> Delete
+            </Button>
           </form>
         </div>
         {selectedFile ? (

From d813733f0c0a80297e5f5709147ebf1cc9876995 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Wed, 17 Sep 2025 18:22:42 -0600
Subject: [PATCH 07/10] Refactor SearchPage Component for Improved File
 Selection

- Updated the file selection UI to allow clicking on file names for selection, enhancing user interaction.
- Changed AgGrid configuration to enable row selection with clicks, improving usability.
- Removed unnecessary row click event handling to streamline the selection process.
---
 frontend/src/app/knowledge/page.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 50f7ff56..0cd3c9f1 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -26,7 +26,7 @@ import { Input } from "@/components/ui/input";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
 import { useTask } from "@/contexts/task-context";
 import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
-import { ColDef, RowClickedEvent } from "ag-grid-community";
+import { ColDef } from "ag-grid-community";
 import "@/components/AgGrid/registerAgGridModules";
 import "@/components/AgGrid/agGridStyles.css";
 import { KnowledgeActionsDropdown } from "@/components/knowledge-actions-dropdown";
@@ -99,10 +99,18 @@ function SearchPage() {
       cellRenderer: ({ data, value }: CustomCellRendererProps<File>) => {
         return (
           <div className="flex items-center gap-2 ml-2">
-            {getSourceIcon(data?.connector_type)}
-            <span className="font-medium text-foreground truncate">
-              {value}
-            </span>
+            <div
+              className="flex items-center gap-2 cursor-pointer hover:text-blue-600 transition-colors"
+              onClick={e => {
+                e.stopPropagation();
+                setSelectedFile(data?.filename ?? "");
+              }}
+            >
+              {getSourceIcon(data?.connector_type)}
+              <span className="font-medium text-foreground truncate">
+                {value}
+              </span>
+            </div>
           </div>
         );
       },
@@ -331,15 +339,10 @@ function SearchPage() {
             ref={gridRef}
             rowData={fileResults}
             rowSelection="multiple"
-            suppressRowClickSelection={true}
+            rowMultiSelectWithClick={true}
+            suppressRowClickSelection={false}
             getRowId={params => params.data.filename}
             onSelectionChanged={onSelectionChanged}
-            onRowClicked={(params: RowClickedEvent<File>) => {
-              // Only navigate to chunks if no rows are selected and not clicking on checkbox
-              if (selectedRows.length === 0) {
-                setSelectedFile(params.data?.filename ?? "");
-              }
-            }}
             noRowsOverlayComponent={() => (
               <div className="text-center">
                 <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />

From 9928cba52128d0a58afc331e9950c258f272d26e Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Thu, 18 Sep 2025 09:20:29 -0600
Subject: [PATCH 08/10] Refactor Knowledge Actions Dropdown and SearchPage
 Component

- Added TODO comments for implementing rename and sync functionalities in the KnowledgeActionsDropdown.
- Adjusted column definitions in the SearchPage component to improve layout with flex and minWidth properties.
- Commented out the sync button in the SearchPage for future implementation, enhancing code clarity.
---
 .../components/knowledge-actions-dropdown.tsx | 13 +++++++
 frontend/src/app/knowledge/page.tsx           | 35 +++++++++++++------
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/frontend/components/knowledge-actions-dropdown.tsx b/frontend/components/knowledge-actions-dropdown.tsx
index d4c0e6c0..9098adec 100644
--- a/frontend/components/knowledge-actions-dropdown.tsx
+++ b/frontend/components/knowledge-actions-dropdown.tsx
@@ -44,6 +44,19 @@ export const KnowledgeActionsDropdown = ({
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent side="right" sideOffset={-10}>
+          {/* //TODO: Implement rename and sync */}
+          {/* <DropdownMenuItem
+            className="text-primary focus:text-primary"
+            onClick={() => alert("Not implemented")}
+          >
+            Rename
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="text-primary focus:text-primary"
+            onClick={() => alert("Not implemented")}
+          >
+            Sync
+          </DropdownMenuItem> */}
           <DropdownMenuItem
             className="text-destructive focus:text-destructive"
             onClick={() => setShowDeleteDialog(true)}
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 0cd3c9f1..701b62c8 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -96,9 +96,11 @@ function SearchPage() {
       headerName: "Source",
       checkboxSelection: true,
       headerCheckboxSelection: true,
+      flex: 3,
+      minWidth: 200,
       cellRenderer: ({ data, value }: CustomCellRendererProps<File>) => {
         return (
-          <div className="flex items-center gap-2 ml-2">
+          <div className="flex items-center gap-2 ml-2 w-full">
             <div
               className="flex items-center gap-2 cursor-pointer hover:text-blue-600 transition-colors"
               onClick={e => {
@@ -122,30 +124,37 @@ function SearchPage() {
     {
       field: "size",
       headerName: "Size",
+      flex: 2,
+      minWidth: 80,
       valueFormatter: params =>
         params.value ? `${Math.round(params.value / 1024)} KB` : "-",
     },
     {
       field: "mimetype",
       headerName: "Type",
+      flex: 2,
+      minWidth: 80,
     },
     {
       field: "owner",
       headerName: "Owner",
+      flex: 2,
+      minWidth: 120,
       valueFormatter: params =>
-        params.value ||
-        params.data?.owner_name ||
-        params.data?.owner_email ||
-        "—",
+        params.data?.owner_name || params.data?.owner_email || "—",
     },
 
     {
       field: "chunkCount",
       headerName: "Chunks",
+      flex: 1,
+      minWidth: 70,
     },
     {
       field: "avgScore",
       headerName: "Avg score",
+      flex: 1,
+      minWidth: 90,
       cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
         return (
           <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
@@ -166,11 +175,12 @@ function SearchPage() {
       },
       colId: "actions",
       filter: false,
-      maxWidth: 60,
+      width: 60,
       minWidth: 60,
+      maxWidth: 60,
       resizable: false,
       sortable: false,
-      initialFlex: 0,
+      flex: 0,
     },
   ]);
 
@@ -179,8 +189,6 @@ function SearchPage() {
       display: "flex",
       alignItems: "center",
     }),
-    initialFlex: 1,
-    minWidth: 100,
     resizable: false,
     suppressMovable: true,
   };
@@ -269,14 +277,15 @@ function SearchPage() {
                 <Search className="h-4 w-4" />
               )}
             </Button>
-            <Button
+            {/* //TODO: Implement sync button */}
+            {/* <Button
               type="button"
               variant="outline"
               className="rounded-lg flex-shrink-0"
               onClick={() => alert("Not implemented")}
             >
               Sync
-            </Button>
+            </Button> */}
             <Button
               type="button"
               variant="destructive"
@@ -332,7 +341,9 @@ function SearchPage() {
               ))}
           </>
         ) : (
+          // <div className="w-full overflow-auto" style={{ maxWidth: "100%" }}>
           <AgGridReact
+            // className="w-full overflow-auto"
             columnDefs={columnDefs}
             defaultColDef={defaultColDef}
             loading={isFetching}
@@ -343,6 +354,7 @@ function SearchPage() {
             suppressRowClickSelection={false}
             getRowId={params => params.data.filename}
             onSelectionChanged={onSelectionChanged}
+            suppressHorizontalScroll={false}
             noRowsOverlayComponent={() => (
               <div className="text-center">
                 <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
@@ -355,6 +367,7 @@ function SearchPage() {
               </div>
             )}
           />
+          // </div>
         )}
       </div>
 

From f65ecf0e68687809eed15ac0167d42316ac6cfb8 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Thu, 18 Sep 2025 09:47:52 -0600
Subject: [PATCH 09/10] Implement Chunks Page and Update SearchPage Component

- Introduced a new ChunksPage component to display chunks of a selected file, enhancing the knowledge management functionality.
- Updated the SearchPage component to navigate to the ChunksPage when a file is selected, improving user flow.
- Removed the previous file selection logic and integrated a more streamlined approach for chunk display.
- Enhanced UI elements for better user experience and accessibility.
---
 frontend/src/app/knowledge/chunks/page.tsx | 212 +++++++++++++++++++++
 frontend/src/app/knowledge/page.tsx        | 110 ++++-------
 2 files changed, 246 insertions(+), 76 deletions(-)
 create mode 100644 frontend/src/app/knowledge/chunks/page.tsx

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
new file mode 100644
index 00000000..9385c474
--- /dev/null
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import {
+  Building2,
+  Cloud,
+  FileText,
+  HardDrive,
+  Loader2,
+  Search,
+} from "lucide-react";
+import { Suspense, useCallback, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { SiGoogledrive } from "react-icons/si";
+import { TbBrandOnedrive } from "react-icons/tb";
+import { ProtectedRoute } from "@/components/protected-route";
+import { Button } from "@/components/ui/button";
+import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
+import { useTask } from "@/contexts/task-context";
+import {
+  type ChunkResult,
+  type File,
+  useGetSearchQuery,
+} from "../../api/queries/useGetSearchQuery";
+
+// 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" />;
+    case "onedrive":
+      return <TbBrandOnedrive className="h-4 w-4 text-foreground" />;
+    case "sharepoint":
+      return <Building2 className="h-4 w-4 text-foreground" />;
+    case "s3":
+      return <Cloud className="h-4 w-4 text-foreground" />;
+    default:
+      return <HardDrive className="h-4 w-4 text-muted-foreground" />;
+  }
+}
+
+function ChunksPageContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { isMenuOpen } = useTask();
+  const { parsedFilterData, isPanelOpen } = useKnowledgeFilter();
+
+  const filename = searchParams.get("filename");
+  const [chunks, setChunks] = useState<ChunkResult[]>([]);
+
+  // Use the same search query as the knowledge page, but we'll filter for the specific file
+  const { data = [], isFetching } = useGetSearchQuery("*", parsedFilterData);
+
+  // Extract chunks for the specific file
+  useEffect(() => {
+    if (!filename || !(data as File[]).length) {
+      setChunks([]);
+      return;
+    }
+
+    const fileData = (data as File[]).find(
+      (file: File) => file.filename === filename
+    );
+    setChunks(fileData?.chunks || []);
+  }, [data, filename]);
+
+  const handleBack = useCallback(() => {
+    router.back();
+  }, [router]);
+
+  if (!filename) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+          <p className="text-lg text-muted-foreground">No file specified</p>
+          <p className="text-sm text-muted-foreground/70 mt-2">
+            Please select a file from the knowledge page
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`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-1 flex flex-col min-h-0 px-6 py-6">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleBack}
+              className="text-muted-foreground hover:text-foreground px-2"
+            >
+              ← Back
+            </Button>
+            <div className="flex flex-col">
+              <h2 className="text-lg font-semibold">Document Chunks</h2>
+              <p className="text-sm text-muted-foreground truncate max-w-md">
+                {decodeURIComponent(filename)}
+              </p>
+            </div>
+          </div>
+          <div className="text-sm text-muted-foreground">
+            {!isFetching && chunks.length > 0 && (
+              <span>
+                {chunks.length} chunk{chunks.length !== 1 ? "s" : ""} found
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Content Area - matches knowledge page structure */}
+        <div className="flex-1 overflow-auto">
+          {isFetching ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="text-center">
+                <Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
+                <p className="text-lg text-muted-foreground">
+                  Loading chunks...
+                </p>
+              </div>
+            </div>
+          ) : chunks.length === 0 ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="text-center">
+                <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+                <p className="text-lg text-muted-foreground">No chunks found</p>
+                <p className="text-sm text-muted-foreground/70 mt-2">
+                  This file may not have been indexed yet
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-4 pb-6">
+              {chunks.map((chunk, index) => (
+                <div
+                  key={chunk.filename + index}
+                  className="bg-muted/20 rounded-lg p-4 border border-border/50"
+                >
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <FileText className="h-4 w-4 text-blue-400" />
+                      <span className="font-medium truncate">
+                        {chunk.filename}
+                      </span>
+                      {chunk.connector_type && (
+                        <div className="ml-2">
+                          {getSourceIcon(chunk.connector_type)}
+                        </div>
+                      )}
+                    </div>
+                    <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
+                      {chunk.score.toFixed(2)}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-4 text-sm text-muted-foreground mb-3">
+                    <span>{chunk.mimetype}</span>
+                    <span>Page {chunk.page}</span>
+                    {chunk.owner_name && <span>Owner: {chunk.owner_name}</span>}
+                  </div>
+                  <p className="text-sm text-foreground/90 leading-relaxed">
+                    {chunk.text}
+                  </p>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ChunksPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center h-64">
+          <div className="text-center">
+            <Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
+            <p className="text-lg text-muted-foreground">Loading...</p>
+          </div>
+        </div>
+      }
+    >
+      <ChunksPageContent />
+    </Suspense>
+  );
+}
+
+export default function ProtectedChunksPage() {
+  return (
+    <ProtectedRoute>
+      <ChunksPage />
+    </ProtectedRoute>
+  );
+}
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 701b62c8..16b0cf6b 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -3,7 +3,6 @@
 import {
   Building2,
   Cloud,
-  FileText,
   HardDrive,
   Loader2,
   Search,
@@ -17,6 +16,7 @@ import {
   useState,
   useRef,
 } from "react";
+import { useRouter } from "next/navigation";
 import { SiGoogledrive } from "react-icons/si";
 import { TbBrandOnedrive } from "react-icons/tb";
 import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
@@ -51,11 +51,11 @@ function getSourceIcon(connectorType?: string) {
 }
 
 function SearchPage() {
+  const router = useRouter();
   const { isMenuOpen } = useTask();
   const { parsedFilterData, isPanelOpen } = useKnowledgeFilter();
   const [query, setQuery] = useState("");
   const [queryInputText, setQueryInputText] = useState("");
-  const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [selectedRows, setSelectedRows] = useState<File[]>([]);
   const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
 
@@ -104,8 +104,13 @@ function SearchPage() {
             <div
               className="flex items-center gap-2 cursor-pointer hover:text-blue-600 transition-colors"
               onClick={e => {
+                e.preventDefault();
                 e.stopPropagation();
-                setSelectedFile(data?.filename ?? "");
+                router.push(
+                  `/knowledge/chunks?filename=${encodeURIComponent(
+                    data?.filename ?? ""
+                  )}`
+                );
               }}
             >
               {getSourceIcon(data?.connector_type)}
@@ -147,13 +152,13 @@ function SearchPage() {
     {
       field: "chunkCount",
       headerName: "Chunks",
-      flex: 1,
+      flex: 2,
       minWidth: 70,
     },
     {
       field: "avgScore",
       headerName: "Avg score",
-      flex: 1,
+      flex: 2,
       minWidth: 90,
       cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
         return (
@@ -297,78 +302,31 @@ function SearchPage() {
             </Button>
           </form>
         </div>
-        {selectedFile ? (
-          // Show chunks for selected file
-          <>
-            <div className="flex items-center gap-2 mb-4">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setSelectedFile(null)}
-              >
-                ← Back to files
-              </Button>
-              <span className="text-sm text-muted-foreground">
-                Chunks from {selectedFile}
-              </span>
+        <AgGridReact
+          className="w-full overflow-auto"
+          columnDefs={columnDefs}
+          defaultColDef={defaultColDef}
+          loading={isFetching}
+          ref={gridRef}
+          rowData={fileResults}
+          rowSelection="multiple"
+          rowMultiSelectWithClick={false}
+          suppressRowClickSelection={true}
+          getRowId={params => params.data.filename}
+          onSelectionChanged={onSelectionChanged}
+          suppressHorizontalScroll={false}
+          noRowsOverlayComponent={() => (
+            <div className="text-center">
+              <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+              <p className="text-lg text-muted-foreground">
+                No documents found
+              </p>
+              <p className="text-sm text-muted-foreground/70 mt-2">
+                Try adjusting your search terms
+              </p>
             </div>
-            {fileResults
-              .filter(file => file.filename === selectedFile)
-              .flatMap(file => file.chunks)
-              .map((chunk, index) => (
-                <div
-                  key={chunk.filename + index}
-                  className="bg-muted/20 rounded-lg p-4 border border-border/50"
-                >
-                  <div className="flex items-center justify-between mb-2">
-                    <div className="flex items-center gap-2">
-                      <FileText className="h-4 w-4 text-blue-400" />
-                      <span className="font-medium truncate">
-                        {chunk.filename}
-                      </span>
-                    </div>
-                    <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
-                      {chunk.score.toFixed(2)}
-                    </span>
-                  </div>
-                  <div className="text-sm text-muted-foreground mb-2">
-                    {chunk.mimetype} • Page {chunk.page}
-                  </div>
-                  <p className="text-sm text-foreground/90 leading-relaxed">
-                    {chunk.text}
-                  </p>
-                </div>
-              ))}
-          </>
-        ) : (
-          // <div className="w-full overflow-auto" style={{ maxWidth: "100%" }}>
-          <AgGridReact
-            // className="w-full overflow-auto"
-            columnDefs={columnDefs}
-            defaultColDef={defaultColDef}
-            loading={isFetching}
-            ref={gridRef}
-            rowData={fileResults}
-            rowSelection="multiple"
-            rowMultiSelectWithClick={true}
-            suppressRowClickSelection={false}
-            getRowId={params => params.data.filename}
-            onSelectionChanged={onSelectionChanged}
-            suppressHorizontalScroll={false}
-            noRowsOverlayComponent={() => (
-              <div className="text-center">
-                <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
-                <p className="text-lg text-muted-foreground">
-                  No documents found
-                </p>
-                <p className="text-sm text-muted-foreground/70 mt-2">
-                  Try adjusting your search terms
-                </p>
-              </div>
-            )}
-          />
-          // </div>
-        )}
+          )}
+        />
       </div>
 
       {/* Bulk Delete Confirmation Dialog */}

From a97c6af0dec1d60164e45b54f7007af3402e5c56 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Thu, 18 Sep 2025 16:56:10 -0500
Subject: [PATCH 10/10] fix grid truncation

---
 frontend/src/app/knowledge/page.tsx           | 87 ++++++++-----------
 .../src/components/AgGrid/agGridStyles.css    |  3 -
 2 files changed, 36 insertions(+), 54 deletions(-)

diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 16b0cf6b..b23acf84 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -38,15 +38,21 @@ import { toast } from "sonner";
 function getSourceIcon(connectorType?: string) {
   switch (connectorType) {
     case "google_drive":
-      return <SiGoogledrive className="h-4 w-4 text-foreground" />;
+      return (
+        <SiGoogledrive className="h-4 w-4 text-foreground flex-shrink-0" />
+      );
     case "onedrive":
-      return <TbBrandOnedrive className="h-4 w-4 text-foreground" />;
+      return (
+        <TbBrandOnedrive className="h-4 w-4 text-foreground flex-shrink-0" />
+      );
     case "sharepoint":
-      return <Building2 className="h-4 w-4 text-foreground" />;
+      return <Building2 className="h-4 w-4 text-foreground flex-shrink-0" />;
     case "s3":
-      return <Cloud className="h-4 w-4 text-foreground" />;
+      return <Cloud className="h-4 w-4 text-foreground flex-shrink-0" />;
     default:
-      return <HardDrive className="h-4 w-4 text-muted-foreground" />;
+      return (
+        <HardDrive className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+      );
   }
 }
 
@@ -96,70 +102,51 @@ function SearchPage() {
       headerName: "Source",
       checkboxSelection: true,
       headerCheckboxSelection: true,
-      flex: 3,
-      minWidth: 200,
+      initialFlex: 2,
+      minWidth: 220,
       cellRenderer: ({ data, value }: CustomCellRendererProps<File>) => {
         return (
-          <div className="flex items-center gap-2 ml-2 w-full">
-            <div
-              className="flex items-center gap-2 cursor-pointer hover:text-blue-600 transition-colors"
-              onClick={e => {
-                e.preventDefault();
-                e.stopPropagation();
-                router.push(
-                  `/knowledge/chunks?filename=${encodeURIComponent(
-                    data?.filename ?? ""
-                  )}`
-                );
-              }}
-            >
-              {getSourceIcon(data?.connector_type)}
-              <span className="font-medium text-foreground truncate">
-                {value}
-              </span>
-            </div>
+          <div
+            className="flex items-center gap-2 cursor-pointer hover:text-blue-600 transition-colors"
+            onClick={() => {
+              router.push(
+                `/knowledge/chunks?filename=${encodeURIComponent(
+                  data?.filename ?? ""
+                )}`
+              );
+            }}
+          >
+            {getSourceIcon(data?.connector_type)}
+            <span className="font-medium text-foreground truncate">
+              {value}
+            </span>
           </div>
         );
       },
-      cellStyle: {
-        display: "flex",
-        alignItems: "center",
-      },
     },
     {
       field: "size",
       headerName: "Size",
-      flex: 2,
-      minWidth: 80,
-      valueFormatter: params =>
+      valueFormatter: (params) =>
         params.value ? `${Math.round(params.value / 1024)} KB` : "-",
     },
     {
       field: "mimetype",
       headerName: "Type",
-      flex: 2,
-      minWidth: 80,
     },
     {
       field: "owner",
       headerName: "Owner",
-      flex: 2,
-      minWidth: 120,
-      valueFormatter: params =>
+      valueFormatter: (params) =>
         params.data?.owner_name || params.data?.owner_email || "—",
     },
-
     {
       field: "chunkCount",
       headerName: "Chunks",
-      flex: 2,
-      minWidth: 70,
     },
     {
       field: "avgScore",
       headerName: "Avg score",
-      flex: 2,
-      minWidth: 90,
       cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
         return (
           <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
@@ -185,17 +172,15 @@ function SearchPage() {
       maxWidth: 60,
       resizable: false,
       sortable: false,
-      flex: 0,
+      initialFlex: 0,
     },
   ]);
 
   const defaultColDef: ColDef<File> = {
-    cellStyle: () => ({
-      display: "flex",
-      alignItems: "center",
-    }),
     resizable: false,
     suppressMovable: true,
+    initialFlex: 1,
+    minWidth: 100,
   };
 
   const onSelectionChanged = useCallback(() => {
@@ -210,7 +195,7 @@ function SearchPage() {
 
     try {
       // Delete each file individually since the API expects one filename at a time
-      const deletePromises = selectedRows.map(row =>
+      const deletePromises = selectedRows.map((row) =>
         deleteDocumentMutation.mutateAsync({ filename: row.filename })
       );
 
@@ -267,7 +252,7 @@ function SearchPage() {
               type="text"
               defaultValue={parsedFilterData?.query}
               value={queryInputText}
-              onChange={e => setQueryInputText(e.target.value)}
+              onChange={(e) => setQueryInputText(e.target.value)}
               placeholder="Search your documents..."
               className="flex-1 bg-muted/20 rounded-lg border border-border/50 px-4 py-3 focus-visible:ring-1 focus-visible:ring-ring"
             />
@@ -312,7 +297,7 @@ function SearchPage() {
           rowSelection="multiple"
           rowMultiSelectWithClick={false}
           suppressRowClickSelection={true}
-          getRowId={params => params.data.filename}
+          getRowId={(params) => params.data.filename}
           onSelectionChanged={onSelectionChanged}
           suppressHorizontalScroll={false}
           noRowsOverlayComponent={() => (
@@ -341,7 +326,7 @@ function SearchPage() {
         }? This will remove all chunks and data associated with these documents. This action cannot be undone.
 
 Documents to be deleted:
-${selectedRows.map(row => `• ${row.filename}`).join("\n")}`}
+${selectedRows.map((row) => `• ${row.filename}`).join("\n")}`}
         confirmText="Delete All"
         onConfirm={handleBulkDelete}
         isLoading={deleteDocumentMutation.isPending}
diff --git a/frontend/src/components/AgGrid/agGridStyles.css b/frontend/src/components/AgGrid/agGridStyles.css
index d1d7e07d..590046c2 100644
--- a/frontend/src/components/AgGrid/agGridStyles.css
+++ b/frontend/src/components/AgGrid/agGridStyles.css
@@ -21,9 +21,6 @@ body {
     border-bottom: 1px solid hsl(var(--border));
     margin-bottom: 0.5rem;
   }
-  .ag-row {
-    cursor: pointer;
-  }
 
   /* Make sure checkboxes are visible */
   .ag-selection-checkbox,