🏗 Added a real time import stats panel

src/client/components/Import/Import.tsx

@@ -7,9 +7,10 @@ import { useShallow } from "zustand/react/shallow";
 import axios from "axios";
 import {
   useGetJobResultStatisticsQuery,
-  useGetImportStatisticsQuery,
+  useGetCachedImportStatisticsQuery,
   useStartIncrementalImportMutation
 } from "../../graphql/generated";
+import { RealTimeImportStats } from "./RealTimeImportStats";
 
 interface ImportProps {
   path: string;
@@ -22,7 +23,6 @@ interface ImportProps {
 export const Import = (props: ImportProps): ReactElement => {
   const queryClient = useQueryClient();
   const [socketReconnectTrigger, setSocketReconnectTrigger] = useState(0);
-  const [showPreview, setShowPreview] = useState(false);
   const { importJobQueue, getSocket, disconnectSocket } = useStore(
     useShallow((state) => ({
       importJobQueue: state.importJobQueue,
@@ -31,23 +31,10 @@ export const Import = (props: ImportProps): ReactElement => {
     })),
   );
 
-  const {
-    data: importStats,
-    isLoading: isLoadingStats,
-    refetch: refetchStats
-  } = useGetImportStatisticsQuery(
-    {},
-    {
-      enabled: showPreview,
-      refetchOnWindowFocus: false,
-    }
-  );
-
   const { mutate: startIncrementalImport, isPending: isStartingImport } = useStartIncrementalImportMutation({
     onSuccess: (data) => {
       if (data.startIncrementalImport.success) {
         importJobQueue.setStatus("running");
-        setShowPreview(false);
       }
     },
   });
@@ -64,6 +51,21 @@ export const Import = (props: ImportProps): ReactElement => {
   });
 
   const { data, isError, isLoading, refetch } = useGetJobResultStatisticsQuery();
+  
+  // Get cached import statistics to determine if Start Import button should be shown
+  const { data: cachedStats } = useGetCachedImportStatisticsQuery(
+    {},
+    {
+      refetchOnWindowFocus: false,
+      refetchInterval: false,
+    }
+  );
+
+  // Determine if we should show the Start Import button
+  const hasNewFiles = cachedStats?.getCachedImportStatistics?.success &&
+    cachedStats.getCachedImportStatistics.stats &&
+    cachedStats.getCachedImportStatistics.stats.newFiles > 0 &&
+    cachedStats.getCachedImportStatistics.stats.pendingFiles === 0;
 
   useEffect(() => {
     const socket = getSocket("/");
@@ -94,11 +96,6 @@ export const Import = (props: ImportProps): ReactElement => {
     );
   };
 
-  const handleShowPreview = () => {
-    setShowPreview(true);
-    refetchStats();
-  };
-
   /**
    * Starts smart import, resetting session if queue was drained
    */
@@ -188,6 +185,11 @@ export const Import = (props: ImportProps): ReactElement => {
         </header>
 
         <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
+          {/* Real-Time Import Statistics Widget */}
+          <div className="mb-6 max-w-screen-lg">
+            <RealTimeImportStats />
+          </div>
+
           <article
             role="alert"
             className="rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
@@ -207,144 +209,24 @@ export const Import = (props: ImportProps): ReactElement => {
             </div>
           </article>
 
-          {!showPreview && (importJobQueue.status === "drained" || importJobQueue.status === undefined) && (
+          {/* Start Smart Import Button - shown when there are new files and no import is running */}
-            <div className="my-4 flex gap-3">
+          {hasNewFiles &&
+           (importJobQueue.status === "drained" || importJobQueue.status === undefined) && (
+            <div className="my-6 max-w-screen-lg">
               <button
-                className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-blue-400 dark:border-blue-200 bg-blue-200 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-blue-600 focus:outline-none focus:ring active:text-blue-500"
+                className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
-                onClick={handleShowPreview}
+                onClick={handleStartSmartImport}
+                disabled={isStartingImport}
               >
-                <span className="text-md">Preview Import</span>
+                <span className="text-md font-medium">
+                  {isStartingImport ? "Starting Import..." : `Start Smart Import (${cachedStats?.getCachedImportStatistics?.stats?.newFiles} new files)`}
+                </span>
                 <span className="w-6 h-6">
-                  <i className="h-6 w-6 icon-[solar--eye-bold-duotone]"></i>
+                  <i className="h-6 w-6 icon-[solar--file-left-bold-duotone]"></i>
                 </span>
               </button>
             </div>
           )}
-          {/* Import Preview Panel */}
-          {showPreview && !isLoadingStats && importStats?.getImportStatistics && (
-            <div className="my-6 max-w-screen-lg">
-              <span className="flex items-center my-5">
-                <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
-                  Import Preview
-                </span>
-                <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
-              </span>
-
-              <div className="rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-slate-700 p-6">
-                <div className="mb-4">
-                  <p className="text-sm text-gray-600 dark:text-gray-300">
-                    <span className="font-semibold">Directory:</span> {importStats.getImportStatistics.directory}
-                  </p>
-                </div>
-
-                <dl className="grid grid-cols-2 gap-4 sm:grid-cols-4">
-                  <div className="flex flex-col rounded-lg bg-blue-100 dark:bg-blue-200 px-4 py-6 text-center">
-                    <dd className="text-3xl text-blue-600 md:text-5xl">
-                      {importStats.getImportStatistics.stats.totalLocalFiles}
-                    </dd>
-                    <dt className="text-lg font-medium text-gray-500">
-                      Total Files
-                    </dt>
-                  </div>
-
-                  <div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-200 px-4 py-6 text-center">
-                    <dd className="text-3xl text-green-600 md:text-5xl">
-                      {importStats.getImportStatistics.stats.newFiles}
-                    </dd>
-                    <dt className="text-lg font-medium text-gray-500">
-                      New Comics
-                    </dt>
-                  </div>
-
-                  <div className="flex flex-col rounded-lg bg-yellow-100 dark:bg-yellow-200 px-4 py-6 text-center">
-                    <dd className="text-3xl text-yellow-600 md:text-5xl">
-                      {importStats.getImportStatistics.stats.alreadyImported}
-                    </dd>
-                    <dt className="text-lg font-medium text-gray-500">
-                      Already Imported
-                    </dt>
-                  </div>
-
-                  <div className="flex flex-col rounded-lg bg-purple-100 dark:bg-purple-200 px-4 py-6 text-center">
-                    <dd className="text-3xl text-purple-600 md:text-5xl">
-                      {(() => {
-                        const percentage = importStats.getImportStatistics.stats.percentageImported;
-                        const numValue = typeof percentage === 'number' ? percentage : parseFloat(percentage);
-                        return !isNaN(numValue) ? numValue.toFixed(1) : '0.0';
-                      })()}%
-                    </dd>
-                    <dt className="text-lg font-medium text-gray-500">
-                      Already in Library
-                    </dt>
-                  </div>
-                </dl>
-
-                {importStats.getImportStatistics.stats.newFiles > 0 && (
-                  <div className="mt-6">
-                    <article
-                      role="alert"
-                      className="rounded-lg border-s-4 border-green-500 bg-green-50 p-4 dark:border-s-4 dark:border-green-600 dark:bg-green-300 dark:text-slate-600"
-                    >
-                      <p className="font-medium">
-                        Ready to import {importStats.getImportStatistics.stats.newFiles} new comic{importStats.getImportStatistics.stats.newFiles !== 1 ? 's' : ''}!
-                      </p>
-                      <p className="text-sm mt-1">
-                        {importStats.getImportStatistics.stats.alreadyImported} comic{importStats.getImportStatistics.stats.alreadyImported !== 1 ? 's' : ''} will be skipped (already in library).
-                      </p>
-                    </article>
-                  </div>
-                )}
-
-                {importStats.getImportStatistics.stats.newFiles === 0 && (
-                  <div className="mt-6">
-                    <article
-                      role="alert"
-                      className="rounded-lg border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
-                    >
-                      <p className="font-medium">
-                        No new comics to import!
-                      </p>
-                      <p className="text-sm mt-1">
-                        All {importStats.getImportStatistics.stats.totalLocalFiles} comic{importStats.getImportStatistics.stats.totalLocalFiles !== 1 ? 's' : ''} in the directory {importStats.getImportStatistics.stats.totalLocalFiles !== 1 ? 'are' : 'is'} already in your library.
-                      </p>
-                    </article>
-                  </div>
-                )}
-
-                <div className="mt-6 flex gap-3">
-                  {importStats.getImportStatistics.stats.newFiles > 0 && (
-                    <button
-                      className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-green-500"
-                      onClick={handleStartSmartImport}
-                      disabled={isStartingImport}
-                    >
-                      <span className="text-md">
-                        {isStartingImport ? "Starting..." : "Start Smart Import"}
-                      </span>
-                      <span className="w-6 h-6">
-                        <i className="h-6 w-6 icon-[solar--file-left-bold-duotone]"></i>
-                      </span>
-                    </button>
-                  )}
-                  <button
-                    className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-gray-400 dark:border-gray-200 bg-gray-200 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-gray-600 focus:outline-none focus:ring active:text-gray-500"
-                    onClick={() => setShowPreview(false)}
-                  >
-                    <span className="text-md">Cancel</span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {showPreview && isLoadingStats && (
-            <div className="my-6 flex justify-center items-center">
-              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
-              <span className="ml-3 text-gray-600 dark:text-gray-300">
-                Analyzing comics folder...
-              </span>
-            </div>
-          )}
 
           {(importJobQueue.status === "running" ||
             importJobQueue.status === "paused") && (

src/client/components/Import/RealTimeImportStats.tsx

@@ -0,0 +1,290 @@
+import React, { ReactElement, useEffect, useState } from "react";
+import { useGetCachedImportStatisticsQuery } from "../../graphql/generated";
+import { useStore } from "../../store";
+import { format } from "date-fns";
+
+interface ImportStatsData {
+  totalLocalFiles: number;
+  alreadyImported: number;
+  newFiles: number;
+  percentageImported: string;
+  pendingFiles: number;
+  lastUpdated: string;
+}
+
+/**
+ * Real-time import statistics widget
+ * Displays live statistics from the file watcher and updates via Socket.IO
+ */
+export const RealTimeImportStats = (): ReactElement => {
+  const [stats, setStats] = useState<ImportStatsData | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const getSocket = useStore((state) => state.getSocket);
+
+  // Fetch initial cached statistics
+  const {
+    data: cachedStats,
+    isLoading,
+    error,
+    refetch,
+  } = useGetCachedImportStatisticsQuery(
+    {},
+    {
+      refetchOnWindowFocus: false,
+      refetchInterval: false,
+    }
+  );
+
+  // Set initial stats from GraphQL query
+  useEffect(() => {
+    if (cachedStats?.getCachedImportStatistics?.success && cachedStats.getCachedImportStatistics.stats) {
+      setStats({
+        totalLocalFiles: cachedStats.getCachedImportStatistics.stats.totalLocalFiles,
+        alreadyImported: cachedStats.getCachedImportStatistics.stats.alreadyImported,
+        newFiles: cachedStats.getCachedImportStatistics.stats.newFiles,
+        percentageImported: cachedStats.getCachedImportStatistics.stats.percentageImported,
+        pendingFiles: cachedStats.getCachedImportStatistics.stats.pendingFiles,
+        lastUpdated: cachedStats.getCachedImportStatistics.lastUpdated || new Date().toISOString(),
+      });
+    }
+  }, [cachedStats]);
+
+  // Setup Socket.IO listener for real-time updates
+  useEffect(() => {
+    const socket = getSocket("/");
+    
+    const handleConnect = () => {
+      setIsConnected(true);
+      console.log("Real-time import stats: Socket connected");
+    };
+
+    const handleDisconnect = () => {
+      setIsConnected(false);
+      console.log("Real-time import stats: Socket disconnected");
+    };
+
+    const handleStatsUpdate = (data: any) => {
+      console.log("Real-time import stats update received:", data);
+      if (data.stats) {
+        setStats({
+          totalLocalFiles: data.stats.totalLocalFiles,
+          alreadyImported: data.stats.alreadyImported,
+          newFiles: data.stats.newFiles,
+          percentageImported: data.stats.percentageImported,
+          pendingFiles: data.stats.pendingFiles || 0,
+          lastUpdated: data.lastUpdated || new Date().toISOString(),
+        });
+      }
+    };
+
+    socket.on("connect", handleConnect);
+    socket.on("disconnect", handleDisconnect);
+    socket.on("IMPORT_STATISTICS_UPDATED", handleStatsUpdate);
+
+    // Check initial connection state
+    if (socket.connected) {
+      setIsConnected(true);
+    }
+
+    return () => {
+      socket.off("connect", handleConnect);
+      socket.off("disconnect", handleDisconnect);
+      socket.off("IMPORT_STATISTICS_UPDATED", handleStatsUpdate);
+    };
+  }, [getSocket]);
+
+  if (isLoading) {
+    return (
+      <div className="rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-slate-700 p-6">
+        <div className="flex justify-center items-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+          <span className="ml-3 text-gray-600 dark:text-gray-300">
+            Loading statistics...
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-lg border border-red-200 dark:border-red-600 bg-red-50 dark:bg-red-900/20 p-6">
+        <div className="flex items-center">
+          <span className="w-6 h-6 text-red-600">
+            <i className="h-6 w-6 icon-[solar--danger-circle-bold]"></i>
+          </span>
+          <span className="ml-3 text-red-600 dark:text-red-400">
+            Error loading statistics
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  // Handle cache not initialized or no stats available
+  if (!stats || cachedStats?.getCachedImportStatistics?.success === false) {
+    return (
+      <div className="rounded-lg border border-yellow-200 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-900/20 p-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            <span className="w-6 h-6 text-yellow-600">
+              <i className="h-6 w-6 icon-[solar--info-circle-bold]"></i>
+            </span>
+            <div className="ml-3">
+              <p className="font-medium text-yellow-800 dark:text-yellow-300">
+                Statistics Cache Initializing
+              </p>
+              <p className="text-sm text-yellow-700 dark:text-yellow-400 mt-1">
+                {cachedStats?.getCachedImportStatistics?.message || "The file watcher is starting up. Statistics will appear shortly."}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={() => refetch()}
+            className="flex items-center gap-1 px-3 py-2 text-sm rounded-lg border border-yellow-400 bg-yellow-100 dark:bg-yellow-800 text-yellow-700 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-700 transition-colors"
+            title="Retry"
+          >
+            <span className="w-4 h-4">
+              <i className="h-4 w-4 icon-[solar--refresh-bold]"></i>
+            </span>
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const percentageValue = typeof stats.percentageImported === 'number' 
+    ? stats.percentageImported 
+    : parseFloat(stats.percentageImported);
+
+  return (
+    <div className="rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-slate-700 p-6">
+      {/* Header with connection status */}
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+          <span className="w-6 h-6 mr-2">
+            <i className="h-6 w-6 icon-[solar--chart-bold-duotone]"></i>
+          </span>
+          Real-Time Folder Statistics
+        </h3>
+        <div className="flex items-center gap-2">
+          <span
+            className={`inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-semibold ${
+              isConnected
+                ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+                : "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400"
+            }`}
+          >
+            <span
+              className={`h-2 w-2 rounded-full ${
+                isConnected ? "bg-green-600 animate-pulse" : "bg-gray-400"
+              }`}
+            ></span>
+            {isConnected ? "Live" : "Offline"}
+          </span>
+        </div>
+      </div>
+
+      {/* Statistics Grid */}
+      <dl className="grid grid-cols-2 gap-4 sm:grid-cols-5 mb-4">
+        <div className="flex flex-col rounded-lg bg-blue-100 dark:bg-blue-900/30 px-4 py-4 text-center">
+          <dd className="text-2xl font-bold text-blue-600 dark:text-blue-400 md:text-3xl">
+            {stats.totalLocalFiles}
+          </dd>
+          <dt className="text-sm font-medium text-gray-600 dark:text-gray-300">
+            Total Files
+          </dt>
+        </div>
+
+        <div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-900/30 px-4 py-4 text-center">
+          <dd className="text-2xl font-bold text-green-600 dark:text-green-400 md:text-3xl">
+            {stats.newFiles}
+          </dd>
+          <dt className="text-sm font-medium text-gray-600 dark:text-gray-300">
+            New Files
+          </dt>
+        </div>
+
+        <div className="flex flex-col rounded-lg bg-yellow-100 dark:bg-yellow-900/30 px-4 py-4 text-center">
+          <dd className="text-2xl font-bold text-yellow-600 dark:text-yellow-400 md:text-3xl">
+            {stats.alreadyImported}
+          </dd>
+          <dt className="text-sm font-medium text-gray-600 dark:text-gray-300">
+            Imported
+          </dt>
+        </div>
+
+        <div className="flex flex-col rounded-lg bg-orange-100 dark:bg-orange-900/30 px-4 py-4 text-center">
+          <dd className="text-2xl font-bold text-orange-600 dark:text-orange-400 md:text-3xl">
+            {stats.pendingFiles}
+          </dd>
+          <dt className="text-sm font-medium text-gray-600 dark:text-gray-300">
+            Pending
+          </dt>
+        </div>
+
+        <div className="flex flex-col rounded-lg bg-purple-100 dark:bg-purple-900/30 px-4 py-4 text-center">
+          <dd className="text-2xl font-bold text-purple-600 dark:text-purple-400 md:text-3xl">
+            {!isNaN(percentageValue) ? percentageValue.toFixed(1) : '0.0'}%
+          </dd>
+          <dt className="text-sm font-medium text-gray-600 dark:text-gray-300">
+            In Library
+          </dt>
+        </div>
+      </dl>
+
+      {/* Last Updated */}
+      <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 pt-2 border-t border-gray-200 dark:border-gray-600">
+        <span className="flex items-center">
+          <span className="w-4 h-4 mr-1">
+            <i className="h-4 w-4 icon-[solar--clock-circle-line-duotone]"></i>
+          </span>
+          Last updated: {format(new Date(stats.lastUpdated), "MMM d, yyyy 'at' h:mm:ss a")}
+        </span>
+        <button
+          onClick={() => refetch()}
+          className="flex items-center gap-1 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+          title="Refresh statistics"
+        >
+          <span className="w-4 h-4">
+            <i className="h-4 w-4 icon-[solar--refresh-bold]"></i>
+          </span>
+          Refresh
+        </button>
+      </div>
+
+      {/* Info message about pending files */}
+      {stats.pendingFiles > 0 && (
+        <div className="mt-4 rounded-lg border-s-4 border-orange-500 bg-orange-50 dark:bg-orange-900/20 p-3">
+          <p className="text-sm text-orange-700 dark:text-orange-300">
+            <span className="font-semibold">{stats.pendingFiles}</span> file{stats.pendingFiles !== 1 ? 's are' : ' is'} being stabilized before import (write in progress).
+          </p>
+        </div>
+      )}
+
+      {/* Info message about new files */}
+      {stats.newFiles > 0 && stats.pendingFiles === 0 && (
+        <div className="mt-4 rounded-lg border-s-4 border-green-500 bg-green-50 dark:bg-green-900/20 p-3">
+          <p className="text-sm text-green-700 dark:text-green-300">
+            <span className="font-semibold">{stats.newFiles}</span> new file{stats.newFiles !== 1 ? 's are' : ' is'} ready to be imported.
+          </p>
+        </div>
+      )}
+
+      {/* All caught up message */}
+      {stats.newFiles === 0 && stats.pendingFiles === 0 && stats.totalLocalFiles > 0 && (
+        <div className="mt-4 rounded-lg border-s-4 border-blue-500 bg-blue-50 dark:bg-blue-900/20 p-3">
+          <p className="text-sm text-blue-700 dark:text-blue-300 flex items-center">
+            <span className="w-5 h-5 mr-2">
+              <i className="h-5 w-5 icon-[solar--check-circle-bold]"></i>
+            </span>
+            All files in the folder are already imported!
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RealTimeImportStats;

src/client/graphql/generated.ts

@@ -52,6 +52,23 @@ export type AutoMergeSettingsInput = {
   onMetadataUpdate?: InputMaybe<Scalars['Boolean']['input']>;
 };
 
+export type CachedImportStatistics = {
+  __typename?: 'CachedImportStatistics';
+  lastUpdated?: Maybe<Scalars['String']['output']>;
+  message?: Maybe<Scalars['String']['output']>;
+  stats?: Maybe<CachedImportStats>;
+  success: Scalars['Boolean']['output'];
+};
+
+export type CachedImportStats = {
+  __typename?: 'CachedImportStats';
+  alreadyImported: Scalars['Int']['output'];
+  newFiles: Scalars['Int']['output'];
+  pendingFiles: Scalars['Int']['output'];
+  percentageImported: Scalars['String']['output'];
+  totalLocalFiles: Scalars['Int']['output'];
+};
+
 export type CanonicalMetadata = {
   __typename?: 'CanonicalMetadata';
   ageRating?: Maybe<MetadataField>;
@@ -615,6 +632,7 @@ export type Query = {
   comics: ComicConnection;
   /** Fetch resource from Metron API */
   fetchMetronResource: MetronResponse;
+  getCachedImportStatistics: CachedImportStatistics;
   getComicBookGroups: Array<ComicBookGroup>;
   getComicBooks: ComicBooksResult;
   /** Get generic ComicVine resource (issues, volumes, etc.) */
@@ -1084,6 +1102,11 @@ export type GetImportStatisticsQueryVariables = Exact<{
 
 export type GetImportStatisticsQuery = { __typename?: 'Query', getImportStatistics: { __typename?: 'ImportStatistics', success: boolean, directory: string, stats: { __typename?: 'ImportStats', totalLocalFiles: number, alreadyImported: number, newFiles: number, percentageImported: string } } };
 
+export type GetCachedImportStatisticsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetCachedImportStatisticsQuery = { __typename?: 'Query', getCachedImportStatistics: { __typename?: 'CachedImportStatistics', success: boolean, message?: string | null, lastUpdated?: string | null, stats?: { __typename?: 'CachedImportStats', totalLocalFiles: number, alreadyImported: number, newFiles: number, percentageImported: string, pendingFiles: number } | null } };
+
 export type StartNewImportMutationVariables = Exact<{
   sessionId: Scalars['String']['input'];
 }>;
@@ -1884,6 +1907,65 @@ useInfiniteGetImportStatisticsQuery.getKey = (variables?: GetImportStatisticsQue
 
 useGetImportStatisticsQuery.fetcher = (variables?: GetImportStatisticsQueryVariables, options?: RequestInit['headers']) => fetcher<GetImportStatisticsQuery, GetImportStatisticsQueryVariables>(GetImportStatisticsDocument, variables, options);
 
+export const GetCachedImportStatisticsDocument = `
+    query GetCachedImportStatistics {
+  getCachedImportStatistics {
+    success
+    message
+    stats {
+      totalLocalFiles
+      alreadyImported
+      newFiles
+      percentageImported
+      pendingFiles
+    }
+    lastUpdated
+  }
+}
+    `;
+
+export const useGetCachedImportStatisticsQuery = <
+      TData = GetCachedImportStatisticsQuery,
+      TError = unknown
+    >(
+      variables?: GetCachedImportStatisticsQueryVariables,
+      options?: Omit<UseQueryOptions<GetCachedImportStatisticsQuery, TError, TData>, 'queryKey'> & { queryKey?: UseQueryOptions<GetCachedImportStatisticsQuery, TError, TData>['queryKey'] }
+    ) => {
+    
+    return useQuery<GetCachedImportStatisticsQuery, TError, TData>(
+      {
+    queryKey: variables === undefined ? ['GetCachedImportStatistics'] : ['GetCachedImportStatistics', variables],
+    queryFn: fetcher<GetCachedImportStatisticsQuery, GetCachedImportStatisticsQueryVariables>(GetCachedImportStatisticsDocument, variables),
+    ...options
+  }
+    )};
+
+useGetCachedImportStatisticsQuery.getKey = (variables?: GetCachedImportStatisticsQueryVariables) => variables === undefined ? ['GetCachedImportStatistics'] : ['GetCachedImportStatistics', variables];
+
+export const useInfiniteGetCachedImportStatisticsQuery = <
+      TData = InfiniteData<GetCachedImportStatisticsQuery>,
+      TError = unknown
+    >(
+      variables: GetCachedImportStatisticsQueryVariables,
+      options: Omit<UseInfiniteQueryOptions<GetCachedImportStatisticsQuery, TError, TData>, 'queryKey'> & { queryKey?: UseInfiniteQueryOptions<GetCachedImportStatisticsQuery, TError, TData>['queryKey'] }
+    ) => {
+    
+    return useInfiniteQuery<GetCachedImportStatisticsQuery, TError, TData>(
+      (() => {
+    const { queryKey: optionsQueryKey, ...restOptions } = options;
+    return {
+      queryKey: optionsQueryKey ?? variables === undefined ? ['GetCachedImportStatistics.infinite'] : ['GetCachedImportStatistics.infinite', variables],
+      queryFn: (metaData) => fetcher<GetCachedImportStatisticsQuery, GetCachedImportStatisticsQueryVariables>(GetCachedImportStatisticsDocument, {...variables, ...(metaData.pageParam ?? {})})(),
+      ...restOptions
+    }
+  })()
+    )};
+
+useInfiniteGetCachedImportStatisticsQuery.getKey = (variables?: GetCachedImportStatisticsQueryVariables) => variables === undefined ? ['GetCachedImportStatistics.infinite'] : ['GetCachedImportStatistics.infinite', variables];
+
+
+useGetCachedImportStatisticsQuery.fetcher = (variables?: GetCachedImportStatisticsQueryVariables, options?: RequestInit['headers']) => fetcher<GetCachedImportStatisticsQuery, GetCachedImportStatisticsQueryVariables>(GetCachedImportStatisticsDocument, variables, options);
+
 export const StartNewImportDocument = `
     mutation StartNewImport($sessionId: String!) {
   startNewImport(sessionId: $sessionId) {

src/client/graphql/queries/import.graphql

@@ -11,6 +11,21 @@ query GetImportStatistics($directoryPath: String) {
   }
 }
 
+query GetCachedImportStatistics {
+  getCachedImportStatistics {
+    success
+    message
+    stats {
+      totalLocalFiles
+      alreadyImported
+      newFiles
+      percentageImported
+      pendingFiles
+    }
+    lastUpdated
+  }
+}
+
 mutation StartNewImport($sessionId: String!) {
   startNewImport(sessionId: $sessionId) {
     success

src/client/store/index.ts

@@ -49,7 +49,9 @@ export const useStore = create<StoreState>((set, get) => ({
   getSocket: (namespace = "/") => {
     const ns = namespace === "/" ? "" : namespace;
     const existing = get().socketInstances[namespace];
-    if (existing?.connected) return existing;
+    // Return existing socket if it exists, regardless of connection state
+    // This prevents creating duplicate sockets during connection phase
+    if (existing) return existing;
 
     const sessionId = localStorage.getItem("sessionId");
     const socket = io(`${SOCKET_BASE_URI}${ns}`, {