feat: add live refresh functionality and configuration status hooks; enhance UI components with new switch and refresh features

src/components/activity/ActivityList.tsx

@@ -105,7 +105,7 @@ export default function ActivityList({
             ? 'Try adjusting your search or filter criteria.'
             : 'No mirroring activities have been recorded yet.'}
         </p>
-        {hasFilter ? (
+        {hasFilter && (
           <Button
             variant='outline'
             onClick={() =>
@@ -114,11 +114,6 @@ export default function ActivityList({
           >
             Clear Filters
           </Button>
-        ) : (
-          <Button>
-            <RefreshCw className='mr-2 h-4 w-4' />
-            Refresh
-          </Button>
         )}
       </div>
     );

src/components/activity/ActivityLog.tsx

@@ -24,6 +24,8 @@ import { ActivityNameCombobox } from './ActivityNameCombobox';
 import { useSSE } from '@/hooks/useSEE';
 import { useFilterParams } from '@/hooks/useFilterParams';
 import { toast } from 'sonner';
+import { useLiveRefresh } from '@/hooks/useLiveRefresh';
+import { useConfigStatus } from '@/hooks/useConfigStatus';
 
 type MirrorJobWithKey = MirrorJob & { _rowKey: string };
 
@@ -37,6 +39,8 @@ function genKey(job: MirrorJob): string {
 
 export function ActivityLog() {
   const { user } = useAuth();
+  const { registerRefreshCallback } = useLiveRefresh();
+  const { isFullyConfigured } = useConfigStatus();
 
   const [activities, setActivities] = useState<MirrorJobWithKey[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -103,6 +107,21 @@ export function ActivityLog() {
     fetchActivities();
   }, [fetchActivities]);
 
+  // Register with global live refresh system
+  useEffect(() => {
+    // Only register for live refresh if configuration is complete
+    // Activity logs can exist from previous runs, but new activities won't be generated without config
+    if (!isFullyConfigured) {
+      return;
+    }
+
+    const unregister = registerRefreshCallback(() => {
+      fetchActivities();
+    });
+
+    return unregister;
+  }, [registerRefreshCallback, fetchActivities, isFullyConfigured]);
+
   /* ---------------------- filtering + exporting ---------------------- */
 
   const applyLightFilter = (list: MirrorJobWithKey[]) => {
@@ -277,9 +296,13 @@ export function ActivityLog() {
         </DropdownMenu>
 
         {/* refresh */}
-        <Button onClick={() => fetchActivities()}>
-          <RefreshCw className='mr-2 h-4 w-4' />
-          Refresh
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => fetchActivities()}
+          title="Refresh activity log"
+        >
+          <RefreshCw className='h-4 w-4' />
         </Button>
       </div>
 

src/components/dashboard/Dashboard.tsx

@@ -2,7 +2,7 @@ import { StatusCard } from "./StatusCard";
 import { RecentActivity } from "./RecentActivity";
 import { RepositoryList } from "./RepositoryList";
 import { GitFork, Clock, FlipHorizontal, Building2 } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { MirrorJob, Organization, Repository } from "@/lib/db/schema";
 import { useAuth } from "@/hooks/useAuth";
 import { apiRequest } from "@/lib/utils";
@@ -11,9 +11,16 @@ import { useSSE } from "@/hooks/useSEE";
 import { toast } from "sonner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useLiveRefresh } from "@/hooks/useLiveRefresh";
+import { usePageVisibility } from "@/hooks/usePageVisibility";
+import { useConfigStatus } from "@/hooks/useConfigStatus";
 
 export function Dashboard() {
   const { user } = useAuth();
+  const { registerRefreshCallback } = useLiveRefresh();
+  const isPageVisible = usePageVisibility();
+  const { isFullyConfigured } = useConfigStatus();
+
   const [repositories, setRepositories] = useState<Repository[]>([]);
   const [organizations, setOrganizations] = useState<Organization[]>([]);
   const [activities, setActivities] = useState<MirrorJob[]>([]);
@@ -23,6 +30,10 @@ export function Dashboard() {
   const [mirroredCount, setMirroredCount] = useState<number>(0);
   const [lastSync, setLastSync] = useState<Date | null>(null);
 
+  // Dashboard auto-refresh timer (30 seconds)
+  const dashboardTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const DASHBOARD_REFRESH_INTERVAL = 30000; // 30 seconds
+
   // Create a stable callback using useCallback
   const handleNewMessage = useCallback((data: MirrorJob) => {
     if (data.repositoryId) {
@@ -54,44 +65,94 @@ export function Dashboard() {
     onMessage: handleNewMessage,
   });
 
+  // Extract fetchDashboardData as a stable callback
+  const fetchDashboardData = useCallback(async (showToast = false) => {
+    try {
+      if (!user || !user.id) {
+        return false;
+      }
+
+      // Don't fetch data if configuration is not complete
+      if (!isFullyConfigured) {
+        if (showToast) {
+          toast.info("Please configure GitHub and Gitea settings first");
+        }
+        return false;
+      }
+
+      const response = await apiRequest<DashboardApiResponse>(
+        `/dashboard?userId=${user.id}`,
+        {
+          method: "GET",
+        }
+      );
+
+      if (response.success) {
+        setRepositories(response.repositories);
+        setOrganizations(response.organizations);
+        setActivities(response.activities);
+        setRepoCount(response.repoCount);
+        setOrgCount(response.orgCount);
+        setMirroredCount(response.mirroredCount);
+        setLastSync(response.lastSync);
+
+        if (showToast) {
+          toast.success("Dashboard data refreshed successfully");
+        }
+        return true;
+      } else {
+        toast.error(response.error || "Error fetching dashboard data");
+        return false;
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : "Error fetching dashboard data"
+      );
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [user, isFullyConfigured]);
+
+  // Initial data fetch
   useEffect(() => {
-    const fetchDashboardData = async () => {
-      try {
-        if (!user || !user.id) {
-          return;
-        }
+    fetchDashboardData();
+  }, [fetchDashboardData]);
 
-        const response = await apiRequest<DashboardApiResponse>(
-          `/dashboard?userId=${user.id}`,
-          {
-            method: "GET",
-          }
-        );
+  // Setup dashboard auto-refresh (30 seconds) and register with live refresh
+  useEffect(() => {
+    // Clear any existing timer
+    if (dashboardTimerRef.current) {
+      clearInterval(dashboardTimerRef.current);
+      dashboardTimerRef.current = null;
+    }
 
-        if (response.success) {
-          setRepositories(response.repositories);
-          setOrganizations(response.organizations);
-          setActivities(response.activities);
-          setRepoCount(response.repoCount);
-          setOrgCount(response.orgCount);
-          setMirroredCount(response.mirroredCount);
-          setLastSync(response.lastSync);
-        } else {
-          toast.error(response.error || "Error fetching dashboard data");
-        }
-      } catch (error) {
-        toast.error(
-          error instanceof Error
-            ? error.message
-            : "Error fetching dashboard data"
-        );
-      } finally {
-        setIsLoading(false);
+    // Set up 30-second auto-refresh only when page is visible and configuration is complete
+    if (isPageVisible && isFullyConfigured) {
+      dashboardTimerRef.current = setInterval(() => {
+        fetchDashboardData();
+      }, DASHBOARD_REFRESH_INTERVAL);
+    }
+
+    // Cleanup on unmount or when page becomes invisible
+    return () => {
+      if (dashboardTimerRef.current) {
+        clearInterval(dashboardTimerRef.current);
+        dashboardTimerRef.current = null;
       }
     };
+  }, [isPageVisible, isFullyConfigured, fetchDashboardData]);
 
-    fetchDashboardData();
-  }, [user]);
+  // Register with global live refresh system
+  useEffect(() => {
+    const unregister = registerRefreshCallback(() => {
+      fetchDashboardData();
+    });
+
+    return unregister;
+  }, [registerRefreshCallback, fetchDashboardData]);
 
   // Status Card Skeleton component
   function StatusCardSkeleton() {
@@ -150,6 +211,7 @@ export function Dashboard() {
     </div>
   ) : (
     <div className="flex flex-col gap-y-6">
+
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         <StatusCard
           title="Total Repositories"

src/components/layout/Header.tsx

@@ -5,9 +5,29 @@ import { ModeToggle } from "@/components/theme/ModeToggle";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { toast } from "sonner";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useLiveRefresh } from "@/hooks/useLiveRefresh";
+import { useConfigStatus } from "@/hooks/useConfigStatus";
 
-export function Header() {
+interface HeaderProps {
+  currentPage?: "dashboard" | "repositories" | "organizations" | "configuration" | "activity-log";
+}
+
+export function Header({ currentPage }: HeaderProps) {
   const { user, logout, isLoading } = useAuth();
+  const { isLiveEnabled, toggleLive } = useLiveRefresh();
+  const { isFullyConfigured, isLoading: configLoading } = useConfigStatus();
+
+  // Show Live button on all pages except configuration
+  const showLiveButton = currentPage && currentPage !== "configuration";
+
+  // Determine button state and tooltip
+  const isLiveActive = isLiveEnabled && isFullyConfigured;
+  const getTooltip = () => {
+    if (!isFullyConfigured && !configLoading) {
+      return 'Configure GitHub and Gitea settings to enable live refresh';
+    }
+    return isLiveEnabled ? 'Disable live refresh' : 'Enable live refresh';
+  };
 
   const handleLogout = async () => {
     toast.success("Logged out successfully");
@@ -35,6 +55,26 @@ export function Header() {
         </a>
 
         <div className="flex items-center gap-4">
+          {showLiveButton && (
+            <Button
+              variant="outline"
+              size="lg"
+              className={`flex items-center gap-2 ${!isFullyConfigured && !configLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
+              onClick={isFullyConfigured || configLoading ? toggleLive : undefined}
+              title={getTooltip()}
+              disabled={!isFullyConfigured && !configLoading}
+            >
+              <div className={`w-3 h-3 rounded-full ${
+                configLoading
+                  ? 'bg-yellow-400 animate-pulse'
+                  : isLiveActive
+                    ? 'bg-emerald-400 animate-pulse'
+                    : 'bg-gray-500'
+              }`} />
+              <span>LIVE</span>
+            </Button>
+          )}
+
           <ModeToggle />
 
           {isLoading ? (

src/components/layout/MainLayout.tsx

@@ -44,7 +44,7 @@ function AppWithProviders({ page }: AppProps) {
 
   return (
     <main className="flex min-h-screen flex-col">
-      <Header />
+      <Header currentPage={page} />
       <div className="flex flex-1">
         <Sidebar />
         <section className="flex-1 p-6 overflow-y-auto h-[calc(100dvh-4.55rem)]">

src/components/layout/Providers.tsx

@@ -1,13 +1,16 @@
 import * as React from "react";
 import { AuthProvider } from "@/hooks/useAuth";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { LiveRefreshProvider } from "@/hooks/useLiveRefresh";
 
 export default function Providers({ children }: { children: React.ReactNode }) {
   return (
     <AuthProvider>
-      <TooltipProvider>
-        {children}
-      </TooltipProvider>
+      <LiveRefreshProvider>
+        <TooltipProvider>
+          {children}
+        </TooltipProvider>
+      </LiveRefreshProvider>
     </AuthProvider>
   );
 }

src/components/organizations/Organization.tsx

@@ -24,12 +24,16 @@ import type { MirrorOrgRequest, MirrorOrgResponse } from "@/types/mirror";
 import { useSSE } from "@/hooks/useSEE";
 import { useFilterParams } from "@/hooks/useFilterParams";
 import { toast } from "sonner";
+import { useLiveRefresh } from "@/hooks/useLiveRefresh";
+import { useConfigStatus } from "@/hooks/useConfigStatus";
 
 export function Organization() {
   const [organizations, setOrganizations] = useState<Organization[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
   const { user } = useAuth();
+  const { registerRefreshCallback } = useLiveRefresh();
+  const { isGitHubConfigured } = useConfigStatus();
   const { filter, setFilter } = useFilterParams({
     searchTerm: "",
     membershipRole: "",
@@ -63,6 +67,12 @@ export function Organization() {
       return false;
     }
 
+    // Don't fetch organizations if GitHub is not configured
+    if (!isGitHubConfigured) {
+      setIsLoading(false);
+      return false;
+    }
+
     try {
       setIsLoading(true);
 
@@ -88,12 +98,26 @@ export function Organization() {
     } finally {
       setIsLoading(false);
     }
-  }, [user]);
+  }, [user, isGitHubConfigured]);
 
   useEffect(() => {
     fetchOrganizations();
   }, [fetchOrganizations]);
 
+  // Register with global live refresh system
+  useEffect(() => {
+    // Only register for live refresh if GitHub is configured
+    if (!isGitHubConfigured) {
+      return;
+    }
+
+    const unregister = registerRefreshCallback(() => {
+      fetchOrganizations();
+    });
+
+    return unregister;
+  }, [registerRefreshCallback, fetchOrganizations, isGitHubConfigured]);
+
   const handleRefresh = async () => {
     const success = await fetchOrganizations();
     if (success) {
@@ -342,9 +366,13 @@ export function Organization() {
           </SelectContent>
         </Select>
 
-        <Button variant="default" onClick={handleRefresh}>
-          <RefreshCw className="h-4 w-4 mr-2" />
-          Refresh
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={handleRefresh}
+          title="Refresh organizations"
+        >
+          <RefreshCw className="h-4 w-4" />
         </Button>
 
         <Button

src/components/repositories/Repository.tsx

@@ -28,12 +28,15 @@ import { OwnerCombobox, OrganizationCombobox } from "./RepositoryComboboxes";
 import type { RetryRepoRequest, RetryRepoResponse } from "@/types/retry";
 import AddRepositoryDialog from "./AddRepositoryDialog";
 import type { ConfigApiResponse } from "@/types/config";
+import { useLiveRefresh } from "@/hooks/useLiveRefresh";
+import { useConfigStatus } from "@/hooks/useConfigStatus";
 
 export default function Repository() {
   const [repositories, setRepositories] = useState<Repository[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [isGitHubConfigured, setIsGitHubConfigured] = useState<boolean>(true);
   const { user } = useAuth();
+  const { registerRefreshCallback } = useLiveRefresh();
+  const { isGitHubConfigured } = useConfigStatus();
   const { filter, setFilter } = useFilterParams({
     searchTerm: "",
     status: "",
@@ -78,25 +81,13 @@ export default function Repository() {
   const fetchRepositories = useCallback(async () => {
     if (!user) return;
 
-    // First, check if GitHub is configured by fetching the user's config
+    // Don't fetch repositories if GitHub is not configured or still loading config
+    if (!isGitHubConfigured) {
+      setIsLoading(false);
+      return false;
+    }
+
     try {
-      const configResponse = await apiRequest<ConfigApiResponse>(
-        `/config?userId=${user.id}`,
-        {
-          method: "GET",
-        }
-      );
-
-      // Check if GitHub credentials are configured
-      if (!configResponse?.githubConfig?.username || !configResponse?.githubConfig?.token) {
-        setIsLoading(false);
-        setIsGitHubConfigured(false);
-        // Don't show error toast for unconfigured GitHub - just return silently
-        return false;
-      }
-
-      // GitHub is configured
-      setIsGitHubConfigured(true);
       setIsLoading(true);
 
       const response = await apiRequest<RepositoryApiResponse>(
@@ -121,12 +112,26 @@ export default function Repository() {
     } finally {
       setIsLoading(false);
     }
-  }, [user]);
+  }, [user, isGitHubConfigured]);
 
   useEffect(() => {
     fetchRepositories();
   }, [fetchRepositories]);
 
+  // Register with global live refresh system
+  useEffect(() => {
+    // Only register for live refresh if GitHub is configured
+    if (!isGitHubConfigured) {
+      return;
+    }
+
+    const unregister = registerRefreshCallback(() => {
+      fetchRepositories();
+    });
+
+    return unregister;
+  }, [registerRefreshCallback, fetchRepositories, isGitHubConfigured]);
+
   const handleRefresh = async () => {
     const success = await fetchRepositories();
     if (success) {
@@ -442,9 +447,13 @@ export default function Repository() {
           </SelectContent>
         </Select>
 
-        <Button variant="default" onClick={handleRefresh}>
-          <RefreshCw className="h-4 w-4 mr-2" />
-          Refresh
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={handleRefresh}
+          title="Refresh repositories"
+        >
+          <RefreshCw className="h-4 w-4" />
         </Button>
 
         <Button

src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }