From 99bf3772b50131ddbdee9e8c09435bb900f0ff3b Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Fri, 19 Sep 2025 12:16:20 -0600
Subject: [PATCH 01/12] updated header for chunks page

---
 frontend/src/app/knowledge/chunks/page.tsx | 67 ++++++++++++++++------
 1 file changed, 50 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 9385c474..254eb511 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -1,8 +1,10 @@
 "use client";
 
 import {
+  ArrowLeft,
   Building2,
   Cloud,
+  File as FileIcon,
   FileText,
   HardDrive,
   Loader2,
@@ -21,6 +23,9 @@ import {
   type File,
   useGetSearchQuery,
 } from "../../api/queries/useGetSearchQuery";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
 
 // Function to get the appropriate icon for a connector type
 function getSourceIcon(connectorType?: string) {
@@ -47,9 +52,14 @@ function ChunksPageContent() {
   const filename = searchParams.get("filename");
   const [chunks, setChunks] = useState<ChunkResult[]>([]);
 
+  const [selectAll, setSelectAll] = useState(false);
+  const [queryInputText, setQueryInputText] = useState(
+    parsedFilterData?.query ?? ""
+  );
+
   // Use the same search query as the knowledge page, but we'll filter for the specific file
   const { data = [], isFetching } = useGetSearchQuery("*", parsedFilterData);
-
+  console.log({ data });
   // Extract chunks for the specific file
   useEffect(() => {
     if (!filename || !(data as File[]).length) {
@@ -98,30 +108,53 @@ function ChunksPageContent() {
     >
       <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
+        <div className="flex flex-col mb-6">
+          <div className="flex items-center gap-3 mb-2">
+            <Button variant="ghost" onClick={handleBack}>
+              <ArrowLeft size={18} />
+              <FileIcon className="text-muted-foreground" size={18} />
+              <h1 className="text-lg font-semibold">
+                {filename.replace(/\.[^/.]+$/, "")}
+              </h1>
             </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 className="flex items-center gap-3 pl-6 mt-2">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="selectAllChunks"
+                checked={selectAll}
+                onCheckedChange={(checked) => setSelectAll(checked === true)}
+              />
+              <Label
+                htmlFor="selectAllChunks"
+                className="font-medium text-muted-foreground whitespace-nowrap"
+              >
+                Select all
+              </Label>
+            </div>
+            <div className="flex-1 flex items-center gap-2">
+              <Input
+                name="search-query"
+                id="search-query"
+                type="text"
+                defaultValue={parsedFilterData?.query}
+                value={queryInputText}
+                onChange={(e) => setQueryInputText(e.target.value)}
+                placeholder="Search chunks..."
+                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 variant="outline" size="sm">
+                <Search />
+              </Button>
             </div>
           </div>
-          <div className="text-sm text-muted-foreground">
+          {/* <div className="text-sm text-muted-foreground">
             {!isFetching && chunks.length > 0 && (
               <span>
                 {chunks.length} chunk{chunks.length !== 1 ? "s" : ""} found
               </span>
             )}
-          </div>
+          </div> */}
         </div>
 
         {/* Content Area - matches knowledge page structure */}

From 9fdec36e9c5c6a7369738c53904a49ed358b6ed5 Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Mon, 22 Sep 2025 13:06:19 -0600
Subject: [PATCH 02/12] make the search filter work

---
 frontend/src/app/knowledge/chunks/page.tsx | 107 +++++++++++----------
 1 file changed, 56 insertions(+), 51 deletions(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 254eb511..450032a8 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -2,18 +2,13 @@
 
 import {
   ArrowLeft,
-  Building2,
-  Cloud,
+  Copy,
   File as FileIcon,
-  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";
@@ -27,22 +22,6 @@ import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 
-// 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();
@@ -51,12 +30,32 @@ function ChunksPageContent() {
 
   const filename = searchParams.get("filename");
   const [chunks, setChunks] = useState<ChunkResult[]>([]);
+  const [chunksFilteredByQuery, setChunksFilteredByQuery] = useState<
+    ChunkResult[]
+  >([]);
 
   const [selectAll, setSelectAll] = useState(false);
   const [queryInputText, setQueryInputText] = useState(
     parsedFilterData?.query ?? ""
   );
 
+  useEffect(() => {
+    if (queryInputText === "") {
+      setChunksFilteredByQuery(chunks);
+    } else {
+      setChunksFilteredByQuery((prevChunks) =>
+        prevChunks.filter((chunk) =>
+          chunk.text.toLowerCase().includes(queryInputText.toLowerCase())
+        )
+      );
+    }
+  }, [queryInputText, chunks]);
+
+  const handleCopy = useCallback((text: string) => {
+    console.log("copying text to clipboard:", text);
+    navigator.clipboard.writeText(text);
+  }, []);
+
   // Use the same search query as the knowledge page, but we'll filter for the specific file
   const { data = [], isFetching } = useGetSearchQuery("*", parsedFilterData);
   console.log({ data });
@@ -118,7 +117,7 @@ function ChunksPageContent() {
               </h1>
             </Button>
           </div>
-          <div className="flex items-center gap-3 pl-6 mt-2">
+          <div className="flex items-center gap-3 pl-4 mt-2">
             <div className="flex items-center gap-2">
               <Checkbox
                 id="selectAllChunks"
@@ -148,13 +147,6 @@ function ChunksPageContent() {
               </Button>
             </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 */}
@@ -180,35 +172,48 @@ function ChunksPageContent() {
             </div>
           ) : (
             <div className="space-y-4 pb-6">
-              {chunks.map((chunk, index) => (
+              {chunksFilteredByQuery.map((chunk, index) => (
                 <div
                   key={chunk.filename + index}
-                  className="bg-muted/20 rounded-lg p-4 border border-border/50"
+                  className="bg-muted 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}
+                    <div className="flex items-center gap-3">
+                      <div>
+                        <Checkbox />
+                      </div>
+                      <span className="text-sm text-bold">
+                        Chunk {chunk.page}
                       </span>
-                      {chunk.connector_type && (
-                        <div className="ml-2">
-                          {getSourceIcon(chunk.connector_type)}
-                        </div>
-                      )}
+                      <span className="bg-background p-1 rounded text-xs text-muted-foreground/70">
+                        {chunk.text.length} chars
+                      </span>
+                      <div className="py-1">
+                        <Button
+                          className="p-1"
+                          onClick={() => handleCopy(chunk.text)}
+                          variant="ghost"
+                          size="xs"
+                        >
+                          <Copy className="text-muted-foreground" />
+                        </Button>
+                      </div>
                     </div>
-                    <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
-                      {chunk.score.toFixed(2)}
-                    </span>
+
+                    {/* TODO: Update to use active toggle */}
+                    {/* <span className="px-2 py-1 text-green-500">
+                      <Switch
+                        className="ml-2 bg-green-500"
+                        checked={true}
+                      />
+                      Active
+                    </span> */}
                   </div>
-                  <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>
+                    <blockquote className="text-sm text-muted-foreground leading-relaxed">
+                      {chunk.text}
+                    </blockquote>
                   </div>
-                  <p className="text-sm text-foreground/90 leading-relaxed">
-                    {chunk.text}
-                  </p>
                 </div>
               ))}
             </div>

From fc5f67e244f02f18523e95824bb7be13d006cdd9 Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Mon, 22 Sep 2025 14:23:03 -0600
Subject: [PATCH 03/12] Added technical details section

---
 frontend/src/app/knowledge/chunks/page.tsx | 112 +++++++++++++++++++--
 1 file changed, 101 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 450032a8..0a5a00a3 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -7,7 +7,7 @@ import {
   Loader2,
   Search,
 } from "lucide-react";
-import { Suspense, useCallback, useEffect, useState } from "react";
+import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { ProtectedRoute } from "@/components/protected-route";
 import { Button } from "@/components/ui/button";
@@ -22,6 +22,12 @@ import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 
+const getFileTypeLabel = (mimetype: string) => {
+  if (mimetype === "application/pdf") return "PDF";
+  if (mimetype === "text/plain") return "Text";
+  if (mimetype === "application/msword") return "Word Document";
+};
+
 function ChunksPageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -33,12 +39,21 @@ function ChunksPageContent() {
   const [chunksFilteredByQuery, setChunksFilteredByQuery] = useState<
     ChunkResult[]
   >([]);
+  const averageChunkLength = useMemo(
+    () =>
+      chunks.reduce((acc, chunk) => acc + chunk.text.length, 0) /
+        chunks.length || 0,
+    [chunks]
+  );
 
   const [selectAll, setSelectAll] = useState(false);
   const [queryInputText, setQueryInputText] = useState(
     parsedFilterData?.query ?? ""
   );
 
+  // Use the same search query as the knowledge page, but we'll filter for the specific file
+  const { data = [], isFetching } = useGetSearchQuery("*", parsedFilterData);
+
   useEffect(() => {
     if (queryInputText === "") {
       setChunksFilteredByQuery(chunks);
@@ -52,13 +67,14 @@ function ChunksPageContent() {
   }, [queryInputText, chunks]);
 
   const handleCopy = useCallback((text: string) => {
-    console.log("copying text to clipboard:", text);
     navigator.clipboard.writeText(text);
   }, []);
 
-  // Use the same search query as the knowledge page, but we'll filter for the specific file
-  const { data = [], isFetching } = useGetSearchQuery("*", parsedFilterData);
-  console.log({ data });
+  const fileData = (data as File[]).find(
+    (file: File) => file.filename === filename
+  );
+
+  console.log({ fileData });
   // Extract chunks for the specific file
   useEffect(() => {
     if (!filename || !(data as File[]).length) {
@@ -66,11 +82,8 @@ function ChunksPageContent() {
       return;
     }
 
-    const fileData = (data as File[]).find(
-      (file: File) => file.filename === filename
-    );
     setChunks(fileData?.chunks || []);
-  }, [data, filename]);
+  }, [data, filename, fileData?.chunks]);
 
   const handleBack = useCallback(() => {
     router.back();
@@ -90,9 +103,11 @@ function ChunksPageContent() {
     );
   }
 
+  console.log({ data });
+
   return (
     <div
-      className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
+      className={`fixed inset-0 md:left-72 top-[53px] flex flex-row transition-all duration-300 ${
         isMenuOpen && isPanelOpen
           ? "md:right-[704px]"
           : // Both open: 384px (menu) + 320px (KF panel)
@@ -210,7 +225,7 @@ function ChunksPageContent() {
                     </span> */}
                   </div>
                   <div>
-                    <blockquote className="text-sm text-muted-foreground leading-relaxed">
+                    <blockquote className="text-sm text-muted-foreground leading-relaxed border-l-2 border-color-input ml-1.5 pl-4">
                       {chunk.text}
                     </blockquote>
                   </div>
@@ -220,6 +235,81 @@ function ChunksPageContent() {
           )}
         </div>
       </div>
+      {/* Right panel - Summary (TODO), Technical details,  */}
+      <div className="w-[320px] py-20 px-2">
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold mt-3 mb-4">Technical details</h2>
+          <dl>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Total chunks</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {chunks.length}
+              </dd>
+            </div>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Avg length</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {averageChunkLength.toFixed(0)} chars
+              </dd>
+            </div>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Process time</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {/* {averageChunkLength.toFixed(0)} chars */}
+              </dd>
+            </div>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Model</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {/* {averageChunkLength.toFixed(0)} chars */}
+              </dd>
+            </div>
+          </dl>
+        </div>
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold mt-2 mb-3">Original document</h2>
+          <dl>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Name</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {fileData?.filename}
+              </dd>
+            </div>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Type</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {fileData ? getFileTypeLabel(fileData.mimetype) : "Unknown"}
+              </dd>
+            </div>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Size</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {fileData?.size
+                  ? `${Math.round(fileData.size / 1024)} KB`
+                  : "Unknown"}
+              </dd>
+            </div>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Uploaded</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {fileData?.uploaded || "Unknown"}
+              </dd>
+            </div>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Source</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {/* {fileData?.uploaded || "Unknown"} */}
+              </dd>
+            </div>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Updated</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                N/A
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
     </div>
   );
 }

From 13f75411900eedb0dee46a960f72c6271ec0f102 Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Mon, 22 Sep 2025 14:23:50 -0600
Subject: [PATCH 04/12] finish stubbing data

---
 frontend/src/app/knowledge/chunks/page.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 0a5a00a3..e9b66187 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -292,14 +292,12 @@ function ChunksPageContent() {
             <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
               <dt className="text-sm/6 text-muted-foreground">Uploaded</dt>
               <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
-                {fileData?.uploaded || "Unknown"}
+                N/A
               </dd>
             </div>
             <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
               <dt className="text-sm/6 text-muted-foreground">Source</dt>
-              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
-                {/* {fileData?.uploaded || "Unknown"} */}
-              </dd>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"></dd>
             </div>
             <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
               <dt className="text-sm/6 text-muted-foreground">Updated</dt>

From 8a17cccf3d7fc87e706bfb26ebaa9c7aecda3bd4 Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Mon, 22 Sep 2025 14:29:13 -0600
Subject: [PATCH 05/12] remove console.logs

---
 frontend/src/app/knowledge/chunks/page.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index e9b66187..b59a8760 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -74,7 +74,6 @@ function ChunksPageContent() {
     (file: File) => file.filename === filename
   );
 
-  console.log({ fileData });
   // Extract chunks for the specific file
   useEffect(() => {
     if (!filename || !(data as File[]).length) {
@@ -103,8 +102,6 @@ function ChunksPageContent() {
     );
   }
 
-  console.log({ data });
-
   return (
     <div
       className={`fixed inset-0 md:left-72 top-[53px] flex flex-row transition-all duration-300 ${

From 70da229e40fb9577f8320abd7841bf66a51c1fc6 Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Tue, 23 Sep 2025 11:53:58 -0600
Subject: [PATCH 06/12] commit and make select work

---
 frontend/src/app/knowledge/chunks/page.tsx | 60 ++++++++++++++++------
 1 file changed, 45 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index b59a8760..9a889dae 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -39,6 +39,9 @@ function ChunksPageContent() {
   const [chunksFilteredByQuery, setChunksFilteredByQuery] = useState<
     ChunkResult[]
   >([]);
+  const [selectedChunks, setSelectedChunks] = useState<Set<number>>(new Set());
+
+  // Calculate average chunk length
   const averageChunkLength = useMemo(
     () =>
       chunks.reduce((acc, chunk) => acc + chunk.text.length, 0) /
@@ -84,10 +87,34 @@ function ChunksPageContent() {
     setChunks(fileData?.chunks || []);
   }, [data, filename, fileData?.chunks]);
 
+  // Set selected state for all checkboxes when selectAll changes
+  useEffect(() => {
+    if (selectAll) {
+      setSelectedChunks(new Set(chunks.map((_, index) => index)));
+    } else {
+      setSelectedChunks(new Set());
+    }
+  }, [selectAll, setSelectedChunks, chunks]);
+
   const handleBack = useCallback(() => {
-    router.back();
+    router.push("/knowledge");
   }, [router]);
 
+  const handleChunkCardCheckboxChange = useCallback(
+    (index: number) => {
+      setSelectedChunks((prevSelected) => {
+        const newSelected = new Set(prevSelected);
+        if (newSelected.has(index)) {
+          newSelected.delete(index);
+        } else {
+          newSelected.add(index);
+        }
+        return newSelected;
+      });
+    },
+    [setSelectedChunks]
+  );
+
   if (!filename) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -134,11 +161,13 @@ function ChunksPageContent() {
               <Checkbox
                 id="selectAllChunks"
                 checked={selectAll}
-                onCheckedChange={(checked) => setSelectAll(checked === true)}
+                onCheckedChange={(handleSelectAll) =>
+                  setSelectAll(!!handleSelectAll)
+                }
               />
               <Label
                 htmlFor="selectAllChunks"
-                className="font-medium text-muted-foreground whitespace-nowrap"
+                className="font-medium text-muted-foreground whitespace-nowrap cursor-pointer"
               >
                 Select all
               </Label>
@@ -192,7 +221,10 @@ function ChunksPageContent() {
                   <div className="flex items-center justify-between mb-2">
                     <div className="flex items-center gap-3">
                       <div>
-                        <Checkbox />
+                        <Checkbox
+                          checked={selectedChunks.has(index)}
+                          onClick={() => handleChunkCardCheckboxChange(index)}
+                        />
                       </div>
                       <span className="text-sm text-bold">
                         Chunk {chunk.page}
@@ -221,11 +253,9 @@ function ChunksPageContent() {
                       Active
                     </span> */}
                   </div>
-                  <div>
-                    <blockquote className="text-sm text-muted-foreground leading-relaxed border-l-2 border-color-input ml-1.5 pl-4">
-                      {chunk.text}
-                    </blockquote>
-                  </div>
+                  <blockquote className="text-sm text-muted-foreground leading-relaxed border-l-2 border-input ml-1.5 pl-4">
+                    {chunk.text}
+                  </blockquote>
                 </div>
               ))}
             </div>
@@ -249,18 +279,17 @@ function ChunksPageContent() {
                 {averageChunkLength.toFixed(0)} chars
               </dd>
             </div>
-            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+            {/* TODO: Uncomment after data is available */}
+            {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
               <dt className="text-sm/6 text-muted-foreground">Process time</dt>
               <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
-                {/* {averageChunkLength.toFixed(0)} chars */}
               </dd>
             </div>
             <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
               <dt className="text-sm/6 text-muted-foreground">Model</dt>
               <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
-                {/* {averageChunkLength.toFixed(0)} chars */}
               </dd>
-            </div>
+            </div> */}
           </dl>
         </div>
         <div className="mb-8">
@@ -292,10 +321,11 @@ function ChunksPageContent() {
                 N/A
               </dd>
             </div>
-            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+            {/* TODO: Uncomment after data is available */}
+            {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
               <dt className="text-sm/6 text-muted-foreground">Source</dt>
               <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"></dd>
-            </div>
+            </div> */}
             <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
               <dt className="text-sm/6 text-muted-foreground">Updated</dt>
               <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">

From a425ba62fbcc34bb3b10281a44ba48edc466fe3e Mon Sep 17 00:00:00 2001
From: boneill-ds <brent.oneill@datastax.com>
Date: Tue, 23 Sep 2025 13:24:25 -0600
Subject: [PATCH 07/12] Update frontend/src/app/knowledge/chunks/page.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 frontend/src/app/knowledge/chunks/page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 9a889dae..c55690c5 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -26,6 +26,7 @@ const getFileTypeLabel = (mimetype: string) => {
   if (mimetype === "application/pdf") return "PDF";
   if (mimetype === "text/plain") return "Text";
   if (mimetype === "application/msword") return "Word Document";
+  return "Unknown";
 };
 
 function ChunksPageContent() {

From 3cb33526dbf1fd9f28a89e2d8895911c027b4a2d Mon Sep 17 00:00:00 2001
From: boneill-ds <brent.oneill@datastax.com>
Date: Tue, 23 Sep 2025 13:24:41 -0600
Subject: [PATCH 08/12] Update frontend/src/app/knowledge/chunks/page.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 frontend/src/app/knowledge/chunks/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index c55690c5..d538ce36 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -62,8 +62,8 @@ function ChunksPageContent() {
     if (queryInputText === "") {
       setChunksFilteredByQuery(chunks);
     } else {
-      setChunksFilteredByQuery((prevChunks) =>
-        prevChunks.filter((chunk) =>
+      setChunksFilteredByQuery(
+        chunks.filter((chunk) =>
           chunk.text.toLowerCase().includes(queryInputText.toLowerCase())
         )
       );

From c33b5bcd4ed265c3e3d57d9b1436fdd2121a1e77 Mon Sep 17 00:00:00 2001
From: boneill-ds <brent.oneill@datastax.com>
Date: Tue, 23 Sep 2025 13:24:49 -0600
Subject: [PATCH 09/12] Update frontend/src/app/knowledge/chunks/page.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 frontend/src/app/knowledge/chunks/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index d538ce36..52b4bcfd 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -86,7 +86,7 @@ function ChunksPageContent() {
     }
 
     setChunks(fileData?.chunks || []);
-  }, [data, filename, fileData?.chunks]);
+  }, [data, filename]);
 
   // Set selected state for all checkboxes when selectAll changes
   useEffect(() => {

From 9caebae22e03b2c795d85dde3f0326c99280ab7b Mon Sep 17 00:00:00 2001
From: boneill-ds <brent.oneill@datastax.com>
Date: Tue, 23 Sep 2025 13:24:57 -0600
Subject: [PATCH 10/12] Update frontend/src/app/knowledge/chunks/page.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 frontend/src/app/knowledge/chunks/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 52b4bcfd..73a687b1 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -227,7 +227,7 @@ function ChunksPageContent() {
                           onClick={() => handleChunkCardCheckboxChange(index)}
                         />
                       </div>
-                      <span className="text-sm text-bold">
+                      <span className="text-sm font-bold">
                         Chunk {chunk.page}
                       </span>
                       <span className="bg-background p-1 rounded text-xs text-muted-foreground/70">

From 5a473541ad0ce934af4c879156745d30c608133f Mon Sep 17 00:00:00 2001
From: boneill-ds <brent.oneill@datastax.com>
Date: Tue, 23 Sep 2025 13:25:40 -0600
Subject: [PATCH 11/12] Update frontend/src/app/knowledge/chunks/page.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 frontend/src/app/knowledge/chunks/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 73a687b1..7de98830 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -224,7 +224,7 @@ function ChunksPageContent() {
                       <div>
                         <Checkbox
                           checked={selectedChunks.has(index)}
-                          onClick={() => handleChunkCardCheckboxChange(index)}
+                          onCheckedChange={(checked) => handleChunkCardCheckboxChange(checked, index)}
                         />
                       </div>
                       <span className="text-sm font-bold">

From 1808ccc149c3dccc490e630b10d10d55d935bf6a Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Tue, 23 Sep 2025 13:59:35 -0600
Subject: [PATCH 12/12] fix selection

---
 frontend/src/app/knowledge/chunks/page.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 7de98830..cdc9fcc3 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -224,7 +224,9 @@ function ChunksPageContent() {
                       <div>
                         <Checkbox
                           checked={selectedChunks.has(index)}
-                          onCheckedChange={(checked) => handleChunkCardCheckboxChange(checked, index)}
+                          onCheckedChange={() =>
+                            handleChunkCardCheckboxChange(index)
+                          }
                         />
                       </div>
                       <span className="text-sm font-bold">