Added the functionality for users to save their generated assets in huggingface spaces using write tokens

FILE_STORAGE_GUIDE.md

@@ -1,252 +0,0 @@
-# File Storage Architecture - Implementation Guide
-
-## Overview
-
-This document outlines the complete file storage architecture for persisting user files (plots, CSVs, reports, models) across sessions.
-
-## Architecture
-
-```
-┌─────────────────────────────────────────────────────────────────────────┐
-│                         STORAGE ARCHITECTURE                             │
-├─────────────────────────────────────────────────────────────────────────┤
-│                                                                          │
-│   Frontend (React)                                                       │
-│   ┌─────────────────────────────────────────────────────────────────┐   │
-│   │  • PlotRenderer.tsx - Renders Plotly charts from JSON           │   │
-│   │  • Assets panel - Shows user files from Supabase                │   │
-│   │  • Download buttons - Uses presigned R2 URLs                    │   │
-│   └─────────────────────────────────────────────────────────────────┘   │
-│                              │                                           │
-│                              ▼                                           │
-│   Backend (FastAPI)                                                      │
-│   ┌─────────────────────────────────────────────────────────────────┐   │
-│   │  /api/files - List user files                                   │   │
-│   │  /api/files/{id} - Get file with download URL                   │   │
-│   │  /api/files/stats/{user_id} - Storage statistics                │   │
-│   └─────────────────────────────────────────────────────────────────┘   │
-│                              │                                           │
-│              ┌───────────────┴───────────────┐                          │
-│              ▼                               ▼                          │
-│   Supabase (Metadata)              Cloudflare R2 (Files)                │
-│   ┌─────────────────┐              ┌─────────────────────┐              │
-│   │  user_files     │              │  /users/{user_id}/  │              │
-│   │  - id           │  ──────────► │    /plots/*.json.gz │              │
-│   │  - user_id      │              │    /data/*.csv.gz   │              │
-│   │  - r2_key       │              │    /reports/*.html  │              │
-│   │  - expires_at   │              │    /models/*.pkl.gz │              │
-│   └─────────────────┘              └─────────────────────┘              │
-│                                                                          │
-└─────────────────────────────────────────────────────────────────────────┘
-```
-
-## Setup Steps
-
-### 1. Cloudflare R2 Setup
-
-1. Go to [Cloudflare Dashboard](https://dash.cloudflare.com)
-2. Navigate to R2 → Create Bucket → Name it `ds-agent-files`
-3. Go to R2 → Manage R2 API Tokens → Create API Token
-4. Note down:
-   - Account ID (from URL or overview page)
-   - Access Key ID
-   - Secret Access Key
-
-### 2. Environment Variables
-
-Add to your `.env` file:
-
-```bash
-# Cloudflare R2
-R2_ACCOUNT_ID=your_account_id
-R2_ACCESS_KEY_ID=your_access_key
-R2_SECRET_ACCESS_KEY=your_secret_key
-R2_BUCKET_NAME=ds-agent-files
-R2_PUBLIC_URL=  # Optional: custom domain
-
-# Supabase (existing)
-SUPABASE_URL=your_supabase_url
-SUPABASE_SERVICE_KEY=your_service_key
-```
-
-### 3. Supabase Table
-
-Run this SQL in Supabase SQL Editor:
-
-```sql
-CREATE TABLE user_files (
-    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
-    user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
-    session_id TEXT,
-    file_type TEXT NOT NULL CHECK (file_type IN ('plot', 'csv', 'report', 'model')),
-    file_name TEXT NOT NULL,
-    r2_key TEXT NOT NULL UNIQUE,
-    size_bytes BIGINT,
-    mime_type TEXT,
-    metadata JSONB DEFAULT '{}',
-    created_at TIMESTAMPTZ DEFAULT NOW(),
-    expires_at TIMESTAMPTZ DEFAULT (NOW() + INTERVAL '7 days'),
-    is_deleted BOOLEAN DEFAULT FALSE
-);
-
--- Indexes
-CREATE INDEX idx_user_files_user_id ON user_files(user_id);
-CREATE INDEX idx_user_files_session ON user_files(session_id);
-CREATE INDEX idx_user_files_expires ON user_files(expires_at) WHERE NOT is_deleted;
-
--- RLS Policies
-ALTER TABLE user_files ENABLE ROW LEVEL SECURITY;
-
-CREATE POLICY "Users can view own files" ON user_files
-    FOR SELECT USING (auth.uid() = user_id);
-
-CREATE POLICY "Users can insert own files" ON user_files
-    FOR INSERT WITH CHECK (auth.uid() = user_id);
-
-CREATE POLICY "Users can delete own files" ON user_files
-    FOR DELETE USING (auth.uid() = user_id);
-```
-
-### 4. Python Dependencies
-
-Add to `requirements.txt`:
-
-```
-boto3>=1.28.0
-```
-
-## Usage in Orchestrator
-
-When generating files in the orchestrator, save them to R2:
-
-```python
-from src.storage.r2_storage import store_plotly_figure, store_dataframe_csv
-from src.storage.user_files_service import get_files_service, FileType
-
-# Store a Plotly figure
-def save_plot(user_id: str, session_id: str, fig, plot_name: str):
-    r2_key, size = store_plotly_figure(user_id, fig, plot_name)
-    
-    # Record in Supabase
-    files_service = get_files_service()
-    files_service.create_file_record(
-        user_id=user_id,
-        file_type=FileType.PLOT,
-        file_name=plot_name,
-        r2_key=r2_key,
-        size_bytes=size,
-        session_id=session_id,
-        mime_type='application/json',
-        metadata={'plot_type': 'plotly'}
-    )
-    
-    return r2_key
-
-# Store a CSV
-def save_csv(user_id: str, session_id: str, df, filename: str):
-    r2_key, compressed_size, original_size = store_dataframe_csv(
-        user_id, df, filename, "Processed dataset"
-    )
-    
-    files_service = get_files_service()
-    files_service.create_file_record(
-        user_id=user_id,
-        file_type=FileType.CSV,
-        file_name=filename,
-        r2_key=r2_key,
-        size_bytes=compressed_size,
-        session_id=session_id,
-        mime_type='text/csv',
-        metadata={
-            'original_size': original_size,
-            'compression_ratio': f"{(1 - compressed_size/original_size)*100:.1f}%"
-        }
-    )
-    
-    return r2_key
-```
-
-## Storage Efficiency
-
-### Plot Storage (Before vs After)
-
-| Format | Size | Load Time |
-|--------|------|-----------|
-| Plotly HTML | 200KB - 2MB | 2-5 seconds |
-| Plotly JSON (gzip) | 5KB - 20KB | <0.5 seconds |
-
-**95% reduction in storage!**
-
-### CSV Compression
-
-| Original Size | Compressed (gzip) | Ratio |
-|---------------|-------------------|-------|
-| 10MB | 1-2MB | 80-90% |
-| 100MB | 10-20MB | 80-90% |
-| 1GB | 100-200MB | 80-90% |
-
-## Cleanup Strategy
-
-### Automatic Expiration
-
-Files expire after 7 days by default. Run this cleanup job daily:
-
-```python
-from src.storage.r2_storage import get_r2_service
-from src.storage.user_files_service import get_files_service
-
-def cleanup_expired_files():
-    files_service = get_files_service()
-    r2_service = get_r2_service()
-    
-    # Get expired files from Supabase
-    expired = files_service.get_expired_files()
-    
-    for file in expired:
-        # Delete from R2
-        r2_service.delete_file(file.r2_key)
-        # Delete from Supabase
-        files_service.hard_delete_file(file.id)
-    
-    return len(expired)
-```
-
-### User Download Prompt
-
-When files are about to expire (1 day left), show a notification:
-
-```typescript
-// Frontend
-const expiringFiles = files.filter(f => 
-  new Date(f.expires_at) < new Date(Date.now() + 24 * 60 * 60 * 1000)
-);
-
-if (expiringFiles.length > 0) {
-  showNotification(
-    `${expiringFiles.length} files expiring soon! Download them now.`
-  );
-}
-```
-
-## Cost Estimates
-
-### Cloudflare R2 (10GB free, then $0.015/GB)
-
-| Users | Files/User | Avg Size | Total Storage | Monthly Cost |
-|-------|------------|----------|---------------|--------------|
-| 100 | 50 | 500KB | 2.5GB | FREE |
-| 1,000 | 50 | 500KB | 25GB | $0.23 |
-| 10,000 | 50 | 500KB | 250GB | $3.60 |
-
-**Zero egress fees = users can download unlimited files for free!**
-
-## Next Steps
-
-1. ✅ Created R2StorageService (`src/storage/r2_storage.py`)
-2. ✅ Created UserFilesService (`src/storage/user_files_service.py`)
-3. ✅ Added API endpoints to `app.py`
-4. ✅ Created PlotRenderer component
-5. ⏳ TODO: Integrate with orchestrator to save files during workflow
-6. ⏳ TODO: Update frontend Assets panel to fetch from API
-7. ⏳ TODO: Add expiration notifications
-8. ⏳ TODO: Set up daily cleanup cron job

FRRONTEEEND/components/ChatInterface.tsx

@@ -1,13 +1,24 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Send, Plus, Search, Settings, MoreHorizontal, User, Bot, ArrowLeft, Paperclip, Sparkles, Trash2, X, Upload, Package, FileText, BarChart3, ChevronRight, LogOut } from 'lucide-react';
+import { Send, Plus, Search, Settings, MoreHorizontal, User, Bot, ArrowLeft, Paperclip, Sparkles, Trash2, X, Upload, Package, FileText, BarChart3, ChevronRight, LogOut, AlertTriangle, Loader2, Check, CloudUpload } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { Logo } from './Logo';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { useAuth } from '../lib/AuthContext';
-import { trackQuery, incrementSessionQueries } from '../lib/supabase';
+import { trackQuery, incrementSessionQueries, getHuggingFaceStatus } from '../lib/supabase';
+import { SettingsModal } from './SettingsModal';
+
+// HuggingFace logo SVG component for the export button
+const HuggingFaceLogo = ({ className = "w-4 h-4" }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 120 120" fill="currentColor">
+    <path d="M60 0C26.863 0 0 26.863 0 60s26.863 60 60 60 60-26.863 60-60S93.137 0 60 0zm0 10c27.614 0 50 22.386 50 50s-22.386 50-50 50S10 87.614 10 60 32.386 10 60 10z"/>
+    <circle cx="40" cy="50" r="8"/>
+    <circle cx="80" cy="50" r="8"/>
+    <path d="M40 75c0 11.046 8.954 20 20 20s20-8.954 20-20H40z"/>
+  </svg>
+);
 
 interface Message {
   id: string;
@@ -192,6 +203,11 @@ export const ChatInterface: React.FC<{ onBack: () => void }> = ({ onBack }) => {
   const [reportModalUrl, setReportModalUrl] = useState<string | null>(null);
   const [reportModalTitle, setReportModalTitle] = useState<string>('Visualization');
   const [showAssets, setShowAssets] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+  const [hfConnected, setHfConnected] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+  const [exportSuccess, setExportSuccess] = useState(false);
+  const [exportError, setExportError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
   const eventSourceRef = useRef<EventSource | null>(null);
@@ -202,6 +218,17 @@ export const ChatInterface: React.FC<{ onBack: () => void }> = ({ onBack }) => {
   
   const activeSession = sessions.find(s => s.id === activeSessionId) || sessions[0];
 
+  // Check HuggingFace connection status
+  useEffect(() => {
+    const checkHfStatus = async () => {
+      if (user?.id) {
+        const status = await getHuggingFaceStatus(user.id);
+        setHfConnected(status.connected);
+      }
+    };
+    checkHfStatus();
+  }, [user]);
+
   // Persist sessions to localStorage whenever they change
   useEffect(() => {
     saveSessionsToStorage(sessions);
@@ -317,16 +344,22 @@ export const ChatInterface: React.FC<{ onBack: () => void }> = ({ onBack }) => {
               console.log('❌ Analysis failed', data);
               setIsTyping(false);
               
-              // Show error message to user
-              setMessages((prev) => [
-                ...prev,
-                {
-                  id: Date.now().toString(),
-                  role: 'assistant',
-                  content: data.message || data.error || '❌ Analysis failed',
-                  session_id: activeSessionId,
-                },
-              ]);
+              // Show error message to user - add to sessions
+              setSessions(prev => prev.map(s => {
+                if (s.id === activeSessionId) {
+                  return {
+                    ...s,
+                    messages: [...s.messages, {
+                      id: Date.now().toString(),
+                      role: 'assistant' as const,
+                      content: data.message || data.error || '❌ Analysis failed',
+                      timestamp: new Date(),
+                    }],
+                    updatedAt: new Date()
+                  };
+                }
+                return s;
+              }));
               
               setCurrentStep('');
             } else if (data.type === 'analysis_complete') {
@@ -876,7 +909,11 @@ export const ChatInterface: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                 <ArrowLeft className="w-5 h-5" />
               </button>
               <div className="flex gap-2">
-                <button className="p-2 hover:bg-white/5 rounded-lg transition-colors text-white/40 hover:text-white">
+                <button 
+                  onClick={() => setShowSettings(true)}
+                  className="p-2 hover:bg-white/5 rounded-lg transition-colors text-white/40 hover:text-white"
+                  title="Settings"
+                >
                   <Settings className="w-5 h-5" />
                 </button>
               </div>
@@ -1222,19 +1259,107 @@ export const ChatInterface: React.FC<{ onBack: () => void }> = ({ onBack }) => {
             transition={{ type: "spring", damping: 25, stiffness: 200 }}
             className="w-[320px] border-l border-white/5 bg-[#0a0a0a]/95 backdrop-blur-xl flex flex-col"
           >
-            <div className="p-4 border-b border-white/5 flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Package className="w-5 h-5 text-emerald-400" />
-                <h3 className="font-bold text-sm">Assets</h3>
+            <div className="p-4 border-b border-white/5">
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-2">
+                  <Package className="w-5 h-5 text-emerald-400" />
+                  <h3 className="font-bold text-sm">Assets</h3>
+                </div>
+                <button 
+                  onClick={() => setShowAssets(false)}
+                  className="p-1.5 rounded-lg hover:bg-white/5 transition-colors"
+                >
+                  <X className="w-4 h-4" />
+                </button>
               </div>
-              <button 
-                onClick={() => setShowAssets(false)}
-                className="p-1.5 rounded-lg hover:bg-white/5 transition-colors"
-              >
-                <X className="w-4 h-4" />
-              </button>
+              
+              {/* Export to HuggingFace Button */}
+              {hfConnected ? (
+                <button
+                  onClick={async () => {
+                    setIsExporting(true);
+                    setExportError(null);
+                    setExportSuccess(false);
+                    try {
+                      // Call export API endpoint
+                      const response = await fetch('/api/export/huggingface', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                          user_id: user?.id,
+                          session_id: activeSessionId
+                        })
+                      });
+                      if (response.ok) {
+                        setExportSuccess(true);
+                        setTimeout(() => setExportSuccess(false), 5000);
+                      } else {
+                        const data = await response.json();
+                        setExportError(data.detail || 'Export failed');
+                      }
+                    } catch (err) {
+                      setExportError('Failed to export. Please try again.');
+                    } finally {
+                      setIsExporting(false);
+                    }
+                  }}
+                  disabled={isExporting}
+                  className={cn(
+                    "w-full py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center gap-2 transition-all",
+                    isExporting 
+                      ? "bg-yellow-500/20 text-yellow-300/60 cursor-wait"
+                      : exportSuccess
+                        ? "bg-green-500/20 text-green-400 border border-green-500/30"
+                        : "bg-yellow-500/20 text-yellow-400 border border-yellow-500/30 hover:bg-yellow-500/30"
+                  )}
+                >
+                  {isExporting ? (
+                    <>
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                      Exporting...
+                    </>
+                  ) : exportSuccess ? (
+                    <>
+                      <Check className="w-4 h-4" />
+                      Exported to HuggingFace!
+                    </>
+                  ) : (
+                    <>
+                      <HuggingFaceLogo className="w-4 h-4" />
+                      Export to HuggingFace
+                    </>
+                  )}
+                </button>
+              ) : (
+                <button
+                  onClick={() => setShowSettings(true)}
+                  className="w-full py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center gap-2 bg-white/5 text-white/50 border border-white/10 hover:bg-white/10 hover:text-white/70 transition-all"
+                >
+                  <HuggingFaceLogo className="w-4 h-4" />
+                  Export to HuggingFace
+                </button>
+              )}
+              
+              {exportError && (
+                <p className="text-xs text-red-400 mt-2 text-center">{exportError}</p>
+              )}
             </div>
             
+            {/* Warning Banner */}
+            {!hfConnected && (
+              <div className="px-4 py-3 bg-amber-500/10 border-y border-amber-500/20">
+                <div className="flex items-start gap-2">
+                  <AlertTriangle className="w-4 h-4 text-amber-400 flex-shrink-0 mt-0.5" />
+                  <div>
+                    <p className="text-xs text-amber-300 font-medium">Assets are temporary</p>
+                    <p className="text-[10px] text-amber-300/60 mt-0.5">
+                      Connect HuggingFace in Settings to permanently save your visualizations, models, and datasets.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+            
             <div className="flex-1 overflow-y-auto p-4 space-y-4 custom-scrollbar">
               {(() => {
                 const allPlots: Array<{title: string, url: string, type?: string}> = [];
@@ -1476,6 +1601,18 @@ export const ChatInterface: React.FC<{ onBack: () => void }> = ({ onBack }) => {
           background: rgba(255, 255, 255, 0.1);
         }
       `}</style>
+      
+      {/* Settings Modal */}
+      <SettingsModal 
+        isOpen={showSettings} 
+        onClose={() => {
+          setShowSettings(false);
+          // Refresh HF connection status when settings modal closes
+          if (user?.id) {
+            getHuggingFaceStatus(user.id).then(status => setHfConnected(status.connected));
+          }
+        }} 
+      />
     </div>
   );
 };

FRRONTEEEND/components/SettingsModal.tsx

@@ -0,0 +1,397 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Settings, Eye, EyeOff, Check, Loader2, ExternalLink, AlertTriangle } from 'lucide-react';
+import { useAuth } from '../lib/AuthContext';
+import { updateHuggingFaceToken, getHuggingFaceStatus } from '../lib/supabase';
+
+interface SettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+// HuggingFace logo SVG component
+const HuggingFaceLogo = ({ className = "w-5 h-5" }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 120 120" fill="currentColor">
+    <path d="M60 0C26.863 0 0 26.863 0 60s26.863 60 60 60 60-26.863 60-60S93.137 0 60 0zm0 10c27.614 0 50 22.386 50 50s-22.386 50-50 50S10 87.614 10 60 32.386 10 60 10z"/>
+    <circle cx="40" cy="50" r="8"/>
+    <circle cx="80" cy="50" r="8"/>
+    <path d="M40 75c0 11.046 8.954 20 20 20s20-8.954 20-20H40z"/>
+  </svg>
+);
+
+export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose }) => {
+  const { user } = useAuth();
+  const [activeTab, setActiveTab] = useState<'huggingface' | 'account'>('huggingface');
+  
+  // HuggingFace settings
+  const [hfToken, setHfToken] = useState('');
+  const [hfUsername, setHfUsername] = useState('');
+  const [showToken, setShowToken] = useState(false);
+  const [isConnected, setIsConnected] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isValidating, setIsValidating] = useState(false);
+  const [saveSuccess, setSaveSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [tokenMasked, setTokenMasked] = useState<string | null>(null);
+
+  // Load current HuggingFace status on mount
+  useEffect(() => {
+    const loadHfStatus = async () => {
+      if (user?.id) {
+        const status = await getHuggingFaceStatus(user.id);
+        setIsConnected(status.connected);
+        setHfUsername(status.username || '');
+        setTokenMasked(status.tokenMasked || null);
+      }
+    };
+    
+    if (isOpen) {
+      loadHfStatus();
+    }
+  }, [user, isOpen]);
+
+  // Validate HuggingFace token
+  const validateToken = async (token: string): Promise<{ valid: boolean; username?: string; error?: string }> => {
+    try {
+      const response = await fetch('https://huggingface.co/api/whoami-v2', {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        return { valid: true, username: data.name };
+      } else if (response.status === 401) {
+        return { valid: false, error: 'Invalid token. Please check your token and try again.' };
+      } else {
+        return { valid: false, error: 'Could not validate token. Please try again.' };
+      }
+    } catch (err) {
+      return { valid: false, error: 'Network error. Please check your connection.' };
+    }
+  };
+
+  // Save HuggingFace settings
+  const handleSaveHuggingFace = async () => {
+    if (!user?.id) {
+      setError('You must be logged in to save settings');
+      return;
+    }
+
+    if (!hfToken.trim()) {
+      setError('Please enter a HuggingFace token');
+      return;
+    }
+
+    setIsSaving(true);
+    setError(null);
+    setSaveSuccess(false);
+
+    try {
+      // Validate the token first
+      setIsValidating(true);
+      const validation = await validateToken(hfToken);
+      setIsValidating(false);
+
+      if (!validation.valid) {
+        setError(validation.error || 'Invalid token');
+        setIsSaving(false);
+        return;
+      }
+
+      // Save to Supabase
+      const result = await updateHuggingFaceToken(user.id, hfToken, validation.username);
+      
+      if (result) {
+        setIsConnected(true);
+        setHfUsername(validation.username || '');
+        setTokenMasked(`hf_****${hfToken.slice(-4)}`);
+        setSaveSuccess(true);
+        setHfToken(''); // Clear the input after saving
+        
+        // Hide success message after 3 seconds
+        setTimeout(() => setSaveSuccess(false), 3000);
+      } else {
+        setError('Failed to save token. Please try again.');
+      }
+    } catch (err) {
+      setError('An error occurred. Please try again.');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // Disconnect HuggingFace
+  const handleDisconnect = async () => {
+    if (!user?.id) return;
+
+    setIsSaving(true);
+    try {
+      const result = await updateHuggingFaceToken(user.id, '', '');
+      if (result) {
+        setIsConnected(false);
+        setHfUsername('');
+        setTokenMasked(null);
+        setHfToken('');
+      }
+    } catch (err) {
+      setError('Failed to disconnect. Please try again.');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+        onClick={onClose}
+      >
+        <motion.div
+          initial={{ scale: 0.95, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          exit={{ scale: 0.95, opacity: 0 }}
+          className="bg-[#0a0a0a] border border-white/10 rounded-2xl w-full max-w-lg overflow-hidden shadow-2xl"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b border-white/5">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-white/5 rounded-xl flex items-center justify-center">
+                <Settings className="w-5 h-5 text-white/60" />
+              </div>
+              <div>
+                <h2 className="text-lg font-semibold text-white">Settings</h2>
+                <p className="text-xs text-white/40">Configure your integrations</p>
+              </div>
+            </div>
+            <button
+              onClick={onClose}
+              className="p-2 rounded-lg hover:bg-white/5 transition-colors"
+            >
+              <X className="w-5 h-5 text-white/60" />
+            </button>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex border-b border-white/5">
+            <button
+              onClick={() => setActiveTab('huggingface')}
+              className={`flex-1 px-4 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2 ${
+                activeTab === 'huggingface'
+                  ? 'text-yellow-400 border-b-2 border-yellow-400 bg-yellow-400/5'
+                  : 'text-white/50 hover:text-white/70'
+              }`}
+            >
+              <HuggingFaceLogo className="w-4 h-4" />
+              HuggingFace
+            </button>
+            <button
+              onClick={() => setActiveTab('account')}
+              className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
+                activeTab === 'account'
+                  ? 'text-indigo-400 border-b-2 border-indigo-400 bg-indigo-400/5'
+                  : 'text-white/50 hover:text-white/70'
+              }`}
+            >
+              Account
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="p-6">
+            {activeTab === 'huggingface' && (
+              <div className="space-y-5">
+                {/* Status Card */}
+                <div className={`p-4 rounded-xl border ${
+                  isConnected 
+                    ? 'bg-green-500/10 border-green-500/30' 
+                    : 'bg-yellow-500/10 border-yellow-500/30'
+                }`}>
+                  <div className="flex items-start gap-3">
+                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                      isConnected ? 'bg-green-500/20' : 'bg-yellow-500/20'
+                    }`}>
+                      {isConnected ? (
+                        <Check className="w-4 h-4 text-green-400" />
+                      ) : (
+                        <AlertTriangle className="w-4 h-4 text-yellow-400" />
+                      )}
+                    </div>
+                    <div className="flex-1">
+                      <h4 className={`text-sm font-semibold ${
+                        isConnected ? 'text-green-300' : 'text-yellow-300'
+                      }`}>
+                        {isConnected ? 'Connected to HuggingFace' : 'Not Connected'}
+                      </h4>
+                      {isConnected ? (
+                        <p className="text-xs text-white/50 mt-1">
+                          Connected as <span className="text-white/80 font-medium">{hfUsername}</span>
+                          <br />
+                          Token: <span className="font-mono text-white/60">{tokenMasked}</span>
+                        </p>
+                      ) : (
+                        <p className="text-xs text-white/50 mt-1">
+                          Connect your HuggingFace account to save and export your assets
+                        </p>
+                      )}
+                    </div>
+                    {isConnected && (
+                      <button
+                        onClick={handleDisconnect}
+                        disabled={isSaving}
+                        className="text-xs text-red-400 hover:text-red-300 transition-colors"
+                      >
+                        Disconnect
+                      </button>
+                    )}
+                  </div>
+                </div>
+
+                {/* Why Connect Section */}
+                {!isConnected && (
+                  <div className="p-4 bg-white/5 rounded-xl border border-white/10">
+                    <h4 className="text-sm font-semibold text-white mb-2">🚀 Why connect?</h4>
+                    <ul className="text-xs text-white/60 space-y-1.5">
+                      <li className="flex items-start gap-2">
+                        <span className="text-green-400">✓</span>
+                        <span><strong className="text-white/80">Permanent storage</strong> - Your datasets, models & plots saved forever</span>
+                      </li>
+                      <li className="flex items-start gap-2">
+                        <span className="text-green-400">✓</span>
+                        <span><strong className="text-white/80">One-click deploy</strong> - Turn models into APIs instantly</span>
+                      </li>
+                      <li className="flex items-start gap-2">
+                        <span className="text-green-400">✓</span>
+                        <span><strong className="text-white/80">Version control</strong> - Git-based versioning for free</span>
+                      </li>
+                      <li className="flex items-start gap-2">
+                        <span className="text-green-400">✓</span>
+                        <span><strong className="text-white/80">Your data</strong> - Everything stored in YOUR HuggingFace account</span>
+                      </li>
+                    </ul>
+                  </div>
+                )}
+
+                {/* Token Input */}
+                <div className="space-y-2">
+                  <label className="text-sm text-white/70 flex items-center gap-2">
+                    {isConnected ? 'Update Token' : 'Access Token'}
+                    <span className="text-xs text-white/40">(Write permission required)</span>
+                  </label>
+                  <div className="relative">
+                    <input
+                      type={showToken ? 'text' : 'password'}
+                      value={hfToken}
+                      onChange={(e) => setHfToken(e.target.value)}
+                      placeholder="hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+                      className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 pr-10 text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-yellow-500/50 focus:ring-1 focus:ring-yellow-500/20 font-mono"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowToken(!showToken)}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-white/40 hover:text-white/60"
+                    >
+                      {showToken ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
+                  <p className="text-xs text-white/40">
+                    Get your token from{' '}
+                    <a
+                      href="https://huggingface.co/settings/tokens"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-yellow-400 hover:text-yellow-300 inline-flex items-center gap-1"
+                    >
+                      huggingface.co/settings/tokens
+                      <ExternalLink className="w-3 h-3" />
+                    </a>
+                  </p>
+                </div>
+
+                {/* Error/Success Messages */}
+                {error && (
+                  <div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
+                    {error}
+                  </div>
+                )}
+                {saveSuccess && (
+                  <div className="p-3 bg-green-500/10 border border-green-500/30 rounded-lg text-green-400 text-sm flex items-center gap-2">
+                    <Check className="w-4 h-4" />
+                    Successfully connected to HuggingFace!
+                  </div>
+                )}
+
+                {/* Save Button */}
+                <button
+                  onClick={handleSaveHuggingFace}
+                  disabled={isSaving || !hfToken.trim()}
+                  className={`w-full py-3 rounded-xl text-sm font-semibold transition-all flex items-center justify-center gap-2 ${
+                    isSaving || !hfToken.trim()
+                      ? 'bg-white/5 text-white/30 cursor-not-allowed'
+                      : 'bg-yellow-500 text-black hover:bg-yellow-400'
+                  }`}
+                >
+                  {isSaving ? (
+                    <>
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                      {isValidating ? 'Validating...' : 'Saving...'}
+                    </>
+                  ) : (
+                    <>
+                      <HuggingFaceLogo className="w-4 h-4" />
+                      {isConnected ? 'Update Connection' : 'Connect HuggingFace'}
+                    </>
+                  )}
+                </button>
+
+                {/* Security Note */}
+                <p className="text-xs text-white/30 text-center">
+                  🔒 Your token is encrypted and stored securely. We only use it to save files to your account.
+                </p>
+              </div>
+            )}
+
+            {activeTab === 'account' && (
+              <div className="space-y-4">
+                <div className="p-4 bg-white/5 rounded-xl border border-white/10">
+                  <h4 className="text-sm font-semibold text-white mb-2">Account Information</h4>
+                  {user ? (
+                    <div className="space-y-2 text-sm">
+                      <div className="flex justify-between">
+                        <span className="text-white/50">Email</span>
+                        <span className="text-white/80">{user.email}</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-white/50">User ID</span>
+                        <span className="text-white/60 font-mono text-xs">{user.id.slice(0, 8)}...</span>
+                      </div>
+                    </div>
+                  ) : (
+                    <p className="text-sm text-white/50">Not signed in</p>
+                  )}
+                </div>
+                
+                <div className="p-4 bg-white/5 rounded-xl border border-white/10">
+                  <h4 className="text-sm font-semibold text-white mb-2">Data & Privacy</h4>
+                  <p className="text-xs text-white/50">
+                    Your chat history is stored locally in your browser. 
+                    Connect HuggingFace to permanently save your generated assets.
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default SettingsModal;

src/api/app.py

@@ -1373,6 +1373,158 @@ async def serve_output_files(file_path: str):
     return FileResponse(output_path, media_type=media_type)
 
 
+# ============== HUGGINGFACE EXPORT ENDPOINT ==============
+
+class HuggingFaceExportRequest(BaseModel):
+    """Request model for HuggingFace export."""
+    user_id: str
+    session_id: str
+
+@app.post("/api/export/huggingface")
+async def export_to_huggingface(request: HuggingFaceExportRequest):
+    """
+    Export session assets (datasets, models, plots) to user's HuggingFace account.
+    
+    Requires user to have connected their HuggingFace token in settings.
+    """
+    from supabase import create_client, Client
+    import glob
+    
+    try:
+        # Get user's HuggingFace credentials from Supabase
+        supabase_url = os.getenv("VITE_SUPABASE_URL") or os.getenv("SUPABASE_URL")
+        supabase_key = os.getenv("SUPABASE_SERVICE_ROLE_KEY") or os.getenv("VITE_SUPABASE_ANON_KEY")
+        
+        if not supabase_url or not supabase_key:
+            raise HTTPException(status_code=500, detail="Supabase configuration missing")
+        
+        supabase: Client = create_client(supabase_url, supabase_key)
+        
+        # Fetch user's HuggingFace token from profiles
+        result = supabase.table("user_profiles").select(
+            "huggingface_token, huggingface_username"
+        ).eq("user_id", request.user_id).single().execute()
+        
+        if not result.data:
+            raise HTTPException(status_code=404, detail="User profile not found")
+        
+        hf_token = result.data.get("huggingface_token")
+        hf_username = result.data.get("huggingface_username")
+        
+        if not hf_token or not hf_username:
+            raise HTTPException(
+                status_code=400, 
+                detail="HuggingFace not connected. Please connect in Settings."
+            )
+        
+        # Import HuggingFace storage service
+        from src.storage.huggingface_storage import HuggingFaceStorageService
+        
+        hf_service = HuggingFaceStorageService(token=hf_token, username=hf_username)
+        
+        # Collect all session assets
+        uploaded_files = []
+        errors = []
+        
+        # Session-specific output directory
+        session_outputs_dir = Path(f"./outputs/{request.session_id}")
+        global_outputs_dir = Path("./outputs")
+        
+        # Upload datasets (CSVs)
+        csv_patterns = [
+            session_outputs_dir / "*.csv",
+            global_outputs_dir / "*.csv"
+        ]
+        for pattern in csv_patterns:
+            for csv_file in glob.glob(str(pattern)):
+                try:
+                    result = hf_service.upload_dataset(
+                        file_path=csv_file,
+                        dataset_name=Path(csv_file).stem,
+                        description=f"Dataset from DS Agent session {request.session_id[:8]}"
+                    )
+                    uploaded_files.append({"type": "dataset", "name": Path(csv_file).name, "url": result.get("url")})
+                except Exception as e:
+                    errors.append(f"Dataset {Path(csv_file).name}: {str(e)}")
+        
+        # Upload models (PKL files)
+        model_patterns = [
+            session_outputs_dir / "models" / "*.pkl",
+            global_outputs_dir / "models" / "*.pkl"
+        ]
+        for pattern in model_patterns:
+            for model_file in glob.glob(str(pattern)):
+                try:
+                    result = hf_service.upload_model(
+                        model_path=model_file,
+                        model_name=Path(model_file).stem,
+                        description=f"Model from DS Agent session {request.session_id[:8]}"
+                    )
+                    uploaded_files.append({"type": "model", "name": Path(model_file).name, "url": result.get("url")})
+                except Exception as e:
+                    errors.append(f"Model {Path(model_file).name}: {str(e)}")
+        
+        # Upload visualizations (HTML plots)
+        plot_patterns = [
+            session_outputs_dir / "*.html",
+            global_outputs_dir / "*.html",
+            session_outputs_dir / "plots" / "*.html",
+            global_outputs_dir / "plots" / "*.html"
+        ]
+        for pattern in plot_patterns:
+            for plot_file in glob.glob(str(pattern)):
+                # Skip index.html or other non-plot files
+                if "index" in Path(plot_file).name.lower():
+                    continue
+                try:
+                    result = hf_service.upload_plot(
+                        plot_path=plot_file,
+                        plot_name=Path(plot_file).stem,
+                        plot_type="interactive"
+                    )
+                    uploaded_files.append({"type": "plot", "name": Path(plot_file).name, "url": result.get("url")})
+                except Exception as e:
+                    errors.append(f"Plot {Path(plot_file).name}: {str(e)}")
+        
+        # Upload PNG images
+        image_patterns = [
+            session_outputs_dir / "*.png",
+            global_outputs_dir / "*.png",
+            session_outputs_dir / "plots" / "*.png",
+            global_outputs_dir / "plots" / "*.png"
+        ]
+        for pattern in image_patterns:
+            for image_file in glob.glob(str(pattern)):
+                try:
+                    result = hf_service.upload_plot(
+                        plot_path=image_file,
+                        plot_name=Path(image_file).stem,
+                        plot_type="static"
+                    )
+                    uploaded_files.append({"type": "image", "name": Path(image_file).name, "url": result.get("url")})
+                except Exception as e:
+                    errors.append(f"Image {Path(image_file).name}: {str(e)}")
+        
+        if not uploaded_files and errors:
+            raise HTTPException(
+                status_code=500, 
+                detail=f"Export failed: {'; '.join(errors)}"
+            )
+        
+        return JSONResponse({
+            "success": True,
+            "uploaded_files": uploaded_files,
+            "errors": errors if errors else None,
+            "message": f"Successfully exported {len(uploaded_files)} files to HuggingFace"
+        })
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"HuggingFace export failed: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Export failed: {str(e)}")
+
+
 @app.get("/{full_path:path}")
 async def serve_frontend(full_path: str):
     """