Implement One-Time Privacy Notice Modal for HF Spaces - Replace persistent banner with elegant popup that shows once per user

frontend/src/components/layout/MainWorkspace.tsx

@@ -16,7 +16,7 @@ import { ConnectionsView } from "../features/connections/ConnectionsView";
 import { UploadView } from "../features/upload/UploadView";
 import { Button } from "@/components/ui/button";
 import { ArrowLeft } from "lucide-react";
-import { IS_HF_SPACES } from "@/lib/config";
+import { PrivacyNoticeModal } from "@/components/shared/modals/PrivacyNoticeModal";
 
 interface MainWorkspaceProps {
   isSidebarCollapsed: boolean;
@@ -330,6 +330,9 @@ export function MainWorkspace({
       <div className="fixed inset-0 bg-background z-50 flex flex-col">
         {/* Global Floating Action Widget for temporal view */}
         <FloatingActionWidget />
+        
+        {/* Privacy Notice Modal */}
+        <PrivacyNoticeModal />
 
         {/* Breadcrumb Navigation */}
         <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -392,17 +395,8 @@ export function MainWorkspace({
         </div>
       )}
 
-      {/* HF Spaces Privacy Notice */}
-      {IS_HF_SPACES && (
-        <div className="bg-amber-50 border-b border-amber-200 px-6 py-3 text-sm text-amber-800 flex items-center gap-2">
-          <span className="text-amber-600">🔒</span>
-          <span>
-            <strong>Privacy Notice:</strong> You're using AgentGraph on Hugging Face Spaces. 
-            Your data is stored in a temporary session and will be cleared when the container restarts. 
-            Data is not shared between users or sessions.
-          </span>
-        </div>
-      )}
+      {/* Privacy Notice Modal */}
+      <PrivacyNoticeModal />
 
       {/* Main Content */}
       <div className="flex-1 flex flex-col min-h-0">{renderView()}</div>

frontend/src/components/shared/modals/PrivacyNoticeModal.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Shield, Info, Database, RefreshCw } from "lucide-react";
+import { IS_HF_SPACES } from "@/lib/config";
+
+const PRIVACY_NOTICE_KEY = "agentgraph_privacy_notice_seen";
+
+export function PrivacyNoticeModal() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    // Only show on HF Spaces and if not seen before
+    if (IS_HF_SPACES) {
+      const hasSeenNotice = localStorage.getItem(PRIVACY_NOTICE_KEY);
+      if (!hasSeenNotice) {
+        // Show modal after a short delay to ensure the app is loaded
+        const timer = setTimeout(() => {
+          setIsOpen(true);
+        }, 1000);
+        return () => clearTimeout(timer);
+      }
+    }
+  }, []);
+
+  const handleAccept = () => {
+    localStorage.setItem(PRIVACY_NOTICE_KEY, "true");
+    setIsOpen(false);
+  };
+
+  const handleDismiss = () => {
+    // Don't set localStorage, so it shows again next time
+    setIsOpen(false);
+  };
+
+  // Don't render anything if not on HF Spaces
+  if (!IS_HF_SPACES) {
+    return null;
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-lg">
+            <Shield className="h-5 w-5 text-blue-600" />
+            Privacy Notice - Hugging Face Spaces
+          </DialogTitle>
+          <DialogDescription className="text-left space-y-3 pt-2">
+            <div className="flex items-start gap-3">
+              <Database className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
+              <div className="text-sm">
+                <strong>Temporary Data Storage:</strong> Your data is stored in a private, temporary session that is automatically cleared when the container restarts.
+              </div>
+            </div>
+            
+            <div className="flex items-start gap-3">
+              <Shield className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
+              <div className="text-sm">
+                <strong>Complete Privacy:</strong> Your traces and analysis results are not shared between users or sessions. Each user has their own isolated environment.
+              </div>
+            </div>
+            
+            <div className="flex items-start gap-3">
+              <RefreshCw className="h-4 w-4 text-blue-600 mt-0.5 flex-shrink-0" />
+              <div className="text-sm">
+                <strong>Data Lifecycle:</strong> All uploaded traces, knowledge graphs, and analysis results will be permanently deleted when the Hugging Face Spaces container restarts.
+              </div>
+            </div>
+            
+            <div className="flex items-start gap-3">
+              <Info className="h-4 w-4 text-gray-600 mt-0.5 flex-shrink-0" />
+              <div className="text-sm">
+                <strong>Recommendation:</strong> For persistent data storage and analysis, consider running AgentGraph locally or on your own infrastructure.
+              </div>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+        
+        <DialogFooter className="flex gap-2 sm:gap-2">
+          <Button
+            variant="outline" 
+            onClick={handleDismiss}
+            className="flex-1"
+          >
+            Remind Me Later
+          </Button>
+          <Button 
+            onClick={handleAccept}
+            className="flex-1 bg-blue-600 hover:bg-blue-700"
+          >
+            I Understand
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/lib/config.ts

@@ -28,10 +28,12 @@ export const API_BASE = getApiBase();
 // Check if running on Hugging Face Spaces
 export const isHuggingFaceSpaces = () => {
   if (typeof window === "undefined") return false;
-  
-  return window.location.hostname.includes("huggingface.co") ||
-         window.location.hostname.includes("hf.space") ||
-         window.location.hostname.endsWith(".hf.space");
+
+  return (
+    window.location.hostname.includes("huggingface.co") ||
+    window.location.hostname.includes("hf.space") ||
+    window.location.hostname.endsWith(".hf.space")
+  );
 };
 
 export const IS_HF_SPACES = isHuggingFaceSpaces();