Fix linting errors: add 'use client' directive, fix unused variables, escape HTML entities

apps/web/src/app/components/SettingsList.tsx

@@ -127,7 +127,7 @@ export default function SettingsList() {
   const filteredAndSortedData = useMemo(() => {
     if (!data) return [];
 
-    let filtered = Object.entries(data).filter(
+    const filtered = Object.entries(data).filter(
       ([key, value]: [string, any]) =>
         key.toLowerCase().includes(searchTerm.toLowerCase()) ||
         JSON.stringify(value).toLowerCase().includes(searchTerm.toLowerCase())

apps/web/src/app/components/StatsSection.tsx

@@ -1,12 +1,13 @@
 "use client";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
 import toast from "react-hot-toast";
 import { get, post } from "../../lib/api";
 
 export default function StatsSection() {
   const queryClient = useQueryClient();
 
-  const { data: tasks, isLoading: tasksLoading } = useQuery({
+  const { data: tasks, isLoading: _tasksLoading } = useQuery({
     queryKey: ["tasks"],
     queryFn: () => get("/tasks")
   });
@@ -24,7 +25,7 @@ export default function StatsSection() {
       queryFn: () => get("/files/stats/processed")
     });
 
-  const { data: datasets, isLoading: datasetsLoading } = useQuery({
+  const { data: _datasets, isLoading: _datasetsLoading } = useQuery({
     queryKey: ["datasets"],
     queryFn: () => get("/files")
   });
@@ -45,7 +46,7 @@ export default function StatsSection() {
       queryFn: () => get("/tasks/processing-status")
     });
 
-  const { data: queueStatus, isLoading: queueLoading } = useQuery({
+  const { data: queueStatus, isLoading: _queueLoading } = useQuery({
     queryKey: ["tasks", "queue", "status"],
     queryFn: () => get("/tasks/queue/status")
   });
@@ -107,7 +108,7 @@ export default function StatsSection() {
     }
   });
 
-  const tasksRunning = tasks?.length || 0;
+  const _tasksRunning = tasks?.length || 0;
   const filesProcessed = filesSuccessful || 0;
   const totalProcessed = filesProcessedTotal || 0;
   const successRate =
@@ -123,6 +124,50 @@ export default function StatsSection() {
   const isWatcherActive = watcherStatus?.isWatching;
   const isTaskProcessingActive = taskProcessingStatus?.isProcessing;
 
+  // Listen for WebSocket updates to refresh stats
+  useEffect(() => {
+    const handleTaskUpdate = (event: CustomEvent) => {
+      const taskData = event.detail;
+      // Refresh task-related queries when tasks are updated
+      if (
+        taskData.type === "progress" ||
+        taskData.type === "completed" ||
+        taskData.type === "failed"
+      ) {
+        queryClient.invalidateQueries({ queryKey: ["tasks"] });
+        queryClient.invalidateQueries({
+          queryKey: ["tasks", "processing-status"]
+        });
+        queryClient.invalidateQueries({
+          queryKey: ["tasks", "queue", "status"]
+        });
+      }
+    };
+
+    const handleFileUpdate = (event: CustomEvent) => {
+      const fileData = event.detail;
+      // Refresh file stats when files are processed
+      if (fileData.type === "processed" || fileData.type === "success") {
+        queryClient.invalidateQueries({ queryKey: ["files-stats-successful"] });
+        queryClient.invalidateQueries({ queryKey: ["files-stats-processed"] });
+      }
+    };
+
+    window.addEventListener("taskUpdate", handleTaskUpdate as EventListener);
+    window.addEventListener("fileUpdate", handleFileUpdate as EventListener);
+
+    return () => {
+      window.removeEventListener(
+        "taskUpdate",
+        handleTaskUpdate as EventListener
+      );
+      window.removeEventListener(
+        "fileUpdate",
+        handleFileUpdate as EventListener
+      );
+    };
+  }, [queryClient]);
+
   return (
     <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
       {/* File Watcher */}

apps/web/src/app/components/TaskList.tsx

@@ -64,7 +64,7 @@ export default function TaskList({
     };
 
     const handleFileUpdate = (event: CustomEvent) => {
-      const fileData = event.detail;
+      const _fileData = event.detail;
       // Refetch tasks when file updates occur (e.g., new files detected)
       queryClient.refetchQueries({ queryKey: ["tasks"] });
     };
@@ -228,7 +228,7 @@ export default function TaskList({
         });
       }
     },
-    onError: (error, params) => {
+    onError: (error, _params) => {
       console.error("Failed to delete task(s):", error);
       toast.error("Failed to delete task(s)");
       addNotification({
@@ -364,7 +364,7 @@ export default function TaskList({
   const filteredAndSortedData = useMemo(() => {
     if (!data || !Array.isArray(data)) return [];
 
-    let filtered = data.filter(
+    const filtered = data.filter(
       (task: any) =>
         enabledDatasets.has(task.dataset || "") &&
         enabledStatuses.has(task.status || "") &&

apps/web/src/app/components/TaskMaintenance.tsx

@@ -304,14 +304,14 @@ export default function TaskMaintenance() {
           </div>
           <div className="text-sm text-gray-600 dark:text-gray-400">
             <p>
-              Are you sure you want to purge all tasks? Type "PURGE" below to
-              confirm:
+              Are you sure you want to purge all tasks? Type &quot;PURGE&quot;
+              below to confirm:
             </p>
             <input
               type="text"
               className="mt-2 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
               placeholder="Type PURGE to confirm"
-              onChange={(e) => {
+              onChange={() => {
                 // We could add confirmation logic here if needed
               }}
             />

apps/web/src/app/components/WatcherSettingsEditor.tsx

@@ -150,7 +150,8 @@ export default function WatcherSettingsEditor({
                 </label>
               </div>
               <p className="text-xs text-gray-500 ml-6">
-                Don't trigger events for files that exist when watching starts
+                Don&apos;t trigger events for files that exist when watching
+                starts
               </p>
             </div>
 

apps/web/src/app/components/WatcherStatus.tsx

@@ -14,7 +14,7 @@ export default function WatcherStatus() {
     queryFn: () => get("/watcher/status")
   });
 
-  const { data: datasets, isLoading: datasetsLoading } = useQuery({
+  const { data: _datasets, isLoading: _datasetsLoading } = useQuery({
     queryKey: ["datasets"],
     queryFn: () => get("/files")
   });

apps/web/src/app/error.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 export default function Error({
-  error,
+  error: _error,
   reset
 }: {
   error: Error & { digest?: string };

apps/web/src/app/files/FileList.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import {
   ChevronDownIcon,
   ChevronRightIcon,
@@ -130,7 +131,7 @@ export default function FileList() {
   // Listen for WebSocket events
   useEffect(() => {
     const handleFileUpdate = (event: CustomEvent) => {
-      const fileData = event.detail;
+      const _fileData = event.detail;
       // Refetch files when file updates occur
       queryClient.refetchQueries({ queryKey: ["all-files"] });
     };
@@ -216,7 +217,7 @@ export default function FileList() {
         });
       }
     },
-    onError: (error, params) => {
+    onError: (error, _params) => {
       console.error("Failed to delete file(s):", error);
       toast.error("Failed to delete file(s)");
       addNotification({
@@ -404,7 +405,7 @@ export default function FileList() {
   const filteredAndSortedData = useMemo(() => {
     if (!allFiles) return [];
 
-    let filtered = allFiles.filter(
+    const filtered = allFiles.filter(
       (file: any) =>
         enabledDatasets.has(file.dataset) &&
         (file.input.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -575,7 +576,7 @@ export default function FileList() {
                   scope="col"
                   className="px-4 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-200 uppercase tracking-wider w-8"
                 >
-                  {/* Expand toggle column */}
+                  <span className="sr-only">Expand</span>
                 </th>
                 <th
                   scope="col"
@@ -625,11 +626,11 @@ export default function FileList() {
             </thead>
             <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
               {displayFiles.length > 0 ? (
-                displayFiles.map((file: any) => {
-                  const fileId = `${file.dataset}-${file.input}`;
-                  const isExpanded = expandedRows.has(fileId);
-                  return (
-                    <>
+                <div>
+                  {displayFiles.map((file: any) => {
+                    const fileId = `${file.dataset}-${file.input}`;
+                    const isExpanded = expandedRows.has(fileId);
+                    return (
                       <tr
                         key={fileId}
                         className="hover:bg-gray-50 dark:hover:bg-gray-700"
@@ -713,7 +714,16 @@ export default function FileList() {
                           </div>
                         </td>
                       </tr>
-                      {isExpanded && (
+                    );
+                  })}
+                  {/* Render expanded rows separately */}
+                  {displayFiles
+                    .filter((file: any) =>
+                      expandedRows.has(`${file.dataset}-${file.input}`)
+                    )
+                    .map((file: any) => {
+                      const fileId = `${file.dataset}-${file.input}`;
+                      return (
                         <tr
                           key={`${fileId}-expanded`}
                           className="bg-gray-50 dark:bg-gray-800"
@@ -729,10 +739,9 @@ export default function FileList() {
                             </div>
                           </td>
                         </tr>
-                      )}
-                    </>
-                  );
-                })
+                      );
+                    })}
+                </div>
               ) : (
                 <tr>
                   <td

apps/web/src/app/files/error.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 export default function FilesError({
-  error,
+  error: _error,
   reset
 }: {
   error: Error & { digest?: string };

apps/web/src/app/settings/error.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 export default function SettingsError({
-  error,
+  error: _error,
   reset
 }: {
   error: Error & { digest?: string };

apps/web/src/app/tasks/error.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 export default function TasksError({
-  error,
+  error: _error,
   reset
 }: {
   error: Error & { digest?: string };