feat: complete data syncing, import/export, file manager, and chat history

Co-authored-by: akborana3 <88649979+akborana3@users.noreply.github.com>

backend/database.py

@@ -1,11 +1,15 @@
 import sqlite3
 import os
 
-DB_FILE = "devportal.db"
-USERS_DIR = "user_spaces"
-PUBLISHED_DIR = "published_projects"
+DATA_DIR = "data"
+DB_FILE = os.path.join(DATA_DIR, "devportal.db")
+USERS_DIR = os.path.join(DATA_DIR, "user_spaces")
+PUBLISHED_DIR = os.path.join(DATA_DIR, "published_projects")
 
 def init_db():
+    if not os.path.exists(DATA_DIR):
+        os.makedirs(DATA_DIR)
+
     conn = sqlite3.connect(DB_FILE)
     c = conn.cursor()
     # Create users table
@@ -16,6 +20,10 @@ def init_db():
     c.execute('''CREATE TABLE IF NOT EXISTS projects
                  (id TEXT PRIMARY KEY, username TEXT, name TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP)''')
 
+    # Create AI history table
+    c.execute('''CREATE TABLE IF NOT EXISTS ai_history
+                 (id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT, role TEXT, content TEXT, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP)''')
+
     conn.commit()
     conn.close()
     

backend/main.py

@@ -20,6 +20,7 @@ from backend.routes_auth import router as auth_router
 from backend.routes_files import router as files_router
 from backend.routes_ai import router as ai_router
 from backend.routes_terminal import router as terminal_router
+from backend.routes_sync import router as sync_router
 
 app = FastAPI()
 
@@ -35,6 +36,7 @@ app.include_router(auth_router)
 app.include_router(files_router)
 app.include_router(ai_router)
 app.include_router(terminal_router)
+app.include_router(sync_router)
 
 @app.get("/", response_class=HTMLResponse)
 async def get(request: Request):

backend/routes_ai.py

@@ -6,6 +6,8 @@ import subprocess
 import asyncio
 from fastapi import APIRouter
 from fastapi.responses import StreamingResponse
+from backend.database import get_username, DB_FILE
+import sqlite3
 
 router = APIRouter()
 
@@ -124,16 +126,56 @@ async def chat_with_ai(data: dict):
                         yield f"API Error: {err.decode('utf-8')}"
                         return
 
+                    full_reply = ""
                     async for line in response.aiter_lines():
                         if line.startswith("data: ") and line != "data: [DONE]":
                             try:
                                 data_chunk = json.loads(line[6:])
-                                content = data_chunk.get("choices", [{}])[0].get("delta", {}).get("content", "")
-                                if content:
-                                    yield content
+                                content_chunk = data_chunk.get("choices", [{}])[0].get("delta", {}).get("content", "")
+                                if content_chunk:
+                                    full_reply += content_chunk
+                                    yield content_chunk
                             except json.JSONDecodeError:
                                 pass
+
+                    # After successful stream, save to DB
+                    if full_reply:
+                        from backend.database import get_username
+                        username = get_username(token)
+                        if username:
+                            conn = sqlite3.connect(DB_FILE)
+                            c = conn.cursor()
+                            c.execute("INSERT INTO ai_history (username, role, content) VALUES (?, ?, ?)", (username, 'user', user_msg))
+                            c.execute("INSERT INTO ai_history (username, role, content) VALUES (?, ?, ?)", (username, 'assistant', full_reply))
+                            conn.commit()
+                            conn.close()
+
         except Exception as e:
             yield f"\n\n**Network Error:** {str(e)}"
-
     return StreamingResponse(stream_generator(), media_type="text/plain")
+
+@router.post("/api/chat/history")
+async def get_chat_history(data: dict):
+    username = get_username(data.get("token"))
+    if not username: return {"error": "Unauthorized"}
+
+    conn = sqlite3.connect(DB_FILE)
+    c = conn.cursor()
+    c.execute("SELECT role, content FROM ai_history WHERE username=? ORDER BY timestamp ASC", (username,))
+    history = [{"role": row[0], "content": row[1]} for row in c.fetchall()]
+    conn.close()
+
+    return {"history": history}
+
+@router.post("/api/chat/history/clear")
+async def clear_chat_history(data: dict):
+    username = get_username(data.get("token"))
+    if not username: return {"error": "Unauthorized"}
+
+    conn = sqlite3.connect(DB_FILE)
+    c = conn.cursor()
+    c.execute("DELETE FROM ai_history WHERE username=?", (username,))
+    conn.commit()
+    conn.close()
+
+    return {"success": True}

backend/routes_files.py

@@ -59,6 +59,42 @@ async def rename_file(data: FileReq):
     os.rename(old_path, new_path)
     return {"success": True}
 
+@router.post("/api/file/delete")
+async def delete_file(data: FileReq):
+    user_dir = get_user_dir(data.token)
+    if not user_dir: return {"error": "Unauthorized"}
+    filepath = os.path.abspath(os.path.join(user_dir, data.filename))
+    if not filepath.startswith(user_dir): return {"error": "Access denied"}
+    try:
+        os.remove(filepath)
+        return {"success": True}
+    except Exception as e:
+        return {"error": str(e)}
+
+@router.post("/api/folder/create")
+async def create_folder(data: FileReq):
+    user_dir = get_user_dir(data.token)
+    if not user_dir: return {"error": "Unauthorized"}
+    folderpath = os.path.abspath(os.path.join(user_dir, data.filename))
+    if not folderpath.startswith(user_dir): return {"error": "Access denied"}
+    try:
+        os.makedirs(folderpath, exist_ok=True)
+        return {"success": True}
+    except Exception as e:
+        return {"error": str(e)}
+
+@router.post("/api/folder/delete")
+async def delete_folder(data: FileReq):
+    user_dir = get_user_dir(data.token)
+    if not user_dir: return {"error": "Unauthorized"}
+    folderpath = os.path.abspath(os.path.join(user_dir, data.filename))
+    if not folderpath.startswith(user_dir): return {"error": "Access denied"}
+    try:
+        shutil.rmtree(folderpath)
+        return {"success": True}
+    except Exception as e:
+        return {"error": str(e)}
+
 @router.get("/preview/{token}/{file_path:path}")
 async def serve_preview_file(token: str, file_path: str):
     user_dir = get_user_dir(token)
@@ -67,15 +103,16 @@ async def serve_preview_file(token: str, file_path: str):
 
     full_path = os.path.abspath(os.path.join(user_dir, file_path))
     if not full_path.startswith(user_dir) or not os.path.exists(full_path):
-        return HTMLResponse("<h1>File Not Found</h1><p>Please create an 'index.html' file first to view the live preview.</p>", status_code=404)
+        return HTMLResponse("<h1>File Not Found</h1><p>The selected file does not exist.</p>", status_code=404)
 
     return FileResponse(full_path)
 
 class PublishReq(BaseModel):
     token: str
     project_name: str
-    project_id: str | None = None  # if updating
-    files: list = []        # list of selected files
+    project_id: str | None = None
+    files: list = []
+    main_html_file: str = "index.html" # Used to determine the entry point URL
 
 @router.post("/api/publish")
 async def publish_project(data: PublishReq):
@@ -87,7 +124,6 @@ async def publish_project(data: PublishReq):
     if not data.files:
         return {"error": "No files selected to publish."}
 
-    # Verify all selected files exist in the user's workspace securely
     for f in data.files:
         p = os.path.abspath(os.path.join(user_dir, f))
         if not p.startswith(user_dir) or not os.path.isfile(p):
@@ -99,41 +135,36 @@ async def publish_project(data: PublishReq):
     project_id = data.project_id
     pub_path = ""
 
-    # If the user is explicitly updating a project via the UI button
     if project_id:
-        # Verify ownership
         c.execute("SELECT id FROM projects WHERE username=? AND id=?", (username, project_id))
         if not c.fetchone():
             conn.close()
             return {"error": "Project not found or you don't have permission."}
 
         pub_path = os.path.join(PUBLISHED_DIR, project_id)
-        # We wipe the old directory to ensure files that were un-ticked are actually removed from the published site
         if os.path.exists(pub_path):
             shutil.rmtree(pub_path)
 
         c.execute("UPDATE projects SET name=?, created_at=CURRENT_TIMESTAMP WHERE id=?", (data.project_name, project_id))
-
     else:
-        # Creating a brand new project record
-        project_id = str(uuid.uuid4())[:8] # short unique id
+        project_id = str(uuid.uuid4())[:8]
         pub_path = os.path.join(PUBLISHED_DIR, project_id)
         c.execute("INSERT INTO projects (id, username, name) VALUES (?, ?, ?)", (project_id, username, data.project_name))
 
     conn.commit()
     conn.close()
 
-    # Create empty directory
     os.makedirs(pub_path, exist_ok=True)
 
-    # Selectively copy ONLY the files requested by the user
     for f in data.files:
         src = os.path.join(user_dir, f)
         dst = os.path.join(pub_path, f)
         os.makedirs(os.path.dirname(dst), exist_ok=True)
         shutil.copy2(src, dst)
 
-    return {"success": True, "project_id": project_id, "url": f"/p/{project_id}/index.html"}
+    # Return the URL pointing to the user's primary HTML file (e.g. index.html, app.html)
+    entry_file = data.main_html_file if data.main_html_file else "index.html"
+    return {"success": True, "project_id": project_id, "url": f"/p/{project_id}/{entry_file}"}
 
 @router.post("/api/projects")
 async def list_published_projects(data: dict):
@@ -146,7 +177,23 @@ async def list_published_projects(data: dict):
     projects = c.fetchall()
     conn.close()
 
-    return {"projects": [{"id": p[0], "name": p[1], "created_at": p[2], "url": f"/p/{p[0]}/index.html"} for p in projects]}
+    # We dynamically check which .html file is inside to generate the link
+    # This is slightly heavier, but accurate
+    proj_list = []
+    for p in projects:
+        pid, name, created_at = p
+        pub_path = os.path.join(PUBLISHED_DIR, pid)
+        entry = "index.html"
+        if os.path.exists(pub_path):
+            all_files = os.listdir(pub_path)
+            if "index.html" not in all_files:
+                html_files = [f for f in all_files if f.endswith(".html")]
+                if html_files:
+                    entry = html_files[0]
+
+        proj_list.append({"id": pid, "name": name, "created_at": created_at, "url": f"/p/{pid}/{entry}"})
+
+    return {"projects": proj_list}
 
 @router.post("/api/project/files")
 async def list_project_files(data: dict):
@@ -154,7 +201,6 @@ async def list_project_files(data: dict):
     project_id = data.get("project_id")
     if not username or not project_id: return {"error": "Unauthorized"}
 
-    # Verify ownership
     conn = sqlite3.connect(DB_FILE)
     c = conn.cursor()
     c.execute("SELECT id FROM projects WHERE username=? AND id=?", (username, project_id))
@@ -182,7 +228,6 @@ async def serve_published_file(project_id: str, file_path: str):
     if not full_path.startswith(pub_path) or not os.path.exists(full_path):
         return HTMLResponse("<h1>404 Not Found</h1>", status_code=404)
 
-    # If it's an HTML file, inject the badge
     if file_path.endswith(".html"):
         with open(full_path, "r", encoding="utf-8") as f:
             content = f.read()
@@ -192,7 +237,6 @@ async def serve_published_file(project_id: str, file_path: str):
             ⚡ Created using <span style="color: #ffc107; font-weight: bold;">DEVPORTAL</span>
         </div>
         """
-        # Inject just before </body> if it exists, else append
         if "</body>" in content:
             content = content.replace("</body>", badge + "\n</body>")
         else:

backend/routes_sync.py

@@ -0,0 +1,95 @@
+import os
+import subprocess
+from fastapi import APIRouter
+from pydantic import BaseModel
+from backend.database import get_username
+
+router = APIRouter()
+
+class SyncReq(BaseModel):
+    token: str
+
+@router.post("/api/sync/hf")
+async def sync_huggingface(data: SyncReq):
+    username = get_username(data.token)
+    if not username: return {"error": "Unauthorized"}
+
+    # Assuming HF CLI is installed and user provided token in ENV or we just run the command
+    # Using the command format provided by the user
+    # `hf sync ./data hf://buckets/Ajitdoval/devportal2-storage`
+
+    try:
+        # Check if huggingface-cli is available
+        result = subprocess.run(["huggingface-cli", "upload", "Ajitdoval/devportal2-storage", "./data", ".", "--repo-type", "dataset"], capture_output=True, text=True, timeout=120)
+
+        if result.returncode == 0:
+            return {"success": True, "message": "Successfully synced to HuggingFace Datasets."}
+        else:
+            return {"error": f"Sync failed: {result.stderr}"}
+    except Exception as e:
+        return {"error": f"Failed to execute sync command: {str(e)}"}
+
+import zipfile
+import shutil
+from fastapi.responses import FileResponse
+from backend.database import get_user_dir
+
+class ImportReq(BaseModel):
+    token: str
+    github_url: str
+
+@router.get("/api/export/{token}")
+async def export_workspace(token: str):
+    user_dir = get_user_dir(token)
+    if not user_dir: return {"error": "Unauthorized"}
+
+    zip_path = f"/tmp/workspace_{token}.zip"
+
+    # Zip the contents of the user directory
+    with zipfile.ZipFile(zip_path, 'w', zipfile.ZIP_DEFLATED) as zipf:
+        for root, _, files in os.walk(user_dir):
+            for file in files:
+                file_path = os.path.join(root, file)
+                rel_path = os.path.relpath(file_path, user_dir)
+                zipf.write(file_path, rel_path)
+
+    return FileResponse(path=zip_path, filename="workspace.zip", media_type='application/zip')
+
+@router.post("/api/import/github")
+async def import_github(data: ImportReq):
+    user_dir = get_user_dir(data.token)
+    if not user_dir: return {"error": "Unauthorized"}
+
+    # Very basic validation of github url
+    if not data.github_url.startswith("https://github.com/"):
+        return {"error": "Invalid GitHub URL"}
+
+    try:
+        # Clone into a temp directory
+        tmp_dir = f"/tmp/clone_{data.token}"
+        if os.path.exists(tmp_dir):
+            shutil.rmtree(tmp_dir)
+
+        result = subprocess.run(["git", "clone", data.github_url, tmp_dir], capture_output=True, text=True, timeout=60)
+
+        if result.returncode != 0:
+            return {"error": f"Failed to clone: {result.stderr}"}
+
+        # Copy contents to user_dir, removing .git to keep it clean
+        git_dir = os.path.join(tmp_dir, ".git")
+        if os.path.exists(git_dir):
+            shutil.rmtree(git_dir)
+
+        for item in os.listdir(tmp_dir):
+            s = os.path.join(tmp_dir, item)
+            d = os.path.join(user_dir, item)
+            if os.path.isdir(s):
+                shutil.copytree(s, d, dirs_exist_ok=True)
+            else:
+                shutil.copy2(s, d)
+
+        shutil.rmtree(tmp_dir)
+        return {"success": True, "message": "Repository imported successfully!"}
+
+    except Exception as e:
+        return {"error": f"Import error: {str(e)}"}

static/css/editor.css

@@ -240,3 +240,30 @@
     background: rgba(0,0,0,0.05);
     color: var(--text-primary);
 }
+
+/* File Item Actions */
+.file-item {
+    position: relative;
+    padding-right: 30px; /* Room for delete button */
+}
+
+.file-item-delete {
+    display: none;
+    position: absolute;
+    right: 8px;
+    background: transparent;
+    border: none;
+    color: var(--error-color);
+    cursor: pointer;
+    font-size: 11px;
+    padding: 2px 4px;
+    border-radius: 4px;
+}
+
+.file-item:hover .file-item-delete {
+    display: inline-block;
+}
+
+.file-item-delete:hover {
+    background: rgba(255, 51, 102, 0.2);
+}

static/js/app.js

@@ -12,6 +12,7 @@ function switchView(viewId, navItem) {
         // Close mobile sidebar
         // Load projects if switching to projects view
         if (viewId === 'projects-view') loadPublishedProjects();
+        if (viewId === 'ai-chat-view') loadAIChatHistory();
 
         if(window.innerWidth <= 768) {
              document.getElementById('sidebar').classList.remove('open');
@@ -255,3 +256,60 @@ function handleChatInput(e) {
         sendChatMessage();
     }
 }
+
+async function loadAIChatHistory() {
+    if (!currentToken) return;
+
+    try {
+        const res = await fetch('/api/chat/history', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({token: currentToken})
+        });
+
+        const data = await res.json();
+        if (data.history) {
+            aiChatHistory = data.history;
+            const historyDiv = document.getElementById('ai-chat-history');
+
+            // Clear default messages
+            historyDiv.innerHTML = '';
+
+            if (data.history.length === 0) {
+                 appendChatMsg('system', 'Hello! I am your AI coding assistant. How can I help you build today?');
+            } else {
+                 data.history.forEach(msg => {
+                      if (msg.role === 'system') return; // Hide system prompt from UI
+
+                      let rawHtml = msg.role === 'assistant' ? marked.parse(msg.content) : msg.content;
+                      let safeHtml = msg.role === 'assistant' ? DOMPurify.sanitize(rawHtml) : msg.content;
+                      appendChatMsg(msg.role, safeHtml);
+                 });
+            }
+        }
+    } catch(e) {
+        console.error("Failed to load chat history.", e);
+    }
+}
+
+async function clearAIChatHistory() {
+    if (!confirm("Are you sure you want to clear your chat history?")) return;
+
+    try {
+        const res = await fetch('/api/chat/history/clear', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({token: currentToken})
+        });
+
+        const data = await res.json();
+        if (data.success) {
+            aiChatHistory = [];
+            const historyDiv = document.getElementById('ai-chat-history');
+            historyDiv.innerHTML = '';
+            appendChatMsg('system', 'Chat history cleared. How can I help you build today?');
+        }
+    } catch(e) {
+        showToast("Failed to clear chat history", "error");
+    }
+}

static/js/editor.js

@@ -50,7 +50,7 @@ async function loadFiles() {
             data.files.forEach(f => {
                 const div = document.createElement('div');
                 div.className = 'file-item';
-                div.innerHTML = `${getIconForFile(f)} ${f}`;
+                div.innerHTML = `${getIconForFile(f)} <span style="flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">${f}</span> <button class="file-item-delete" title="Delete" onclick="deleteFile(event, '${f}')"><i class="fa-solid fa-trash"></i></button>`;
                 div.onclick = () => openFile(f);
                 list.appendChild(div);
             });
@@ -262,3 +262,80 @@ function toggleFullScreenPreview() {
         icon.classList.add('fa-compress');
     }
 }
+
+async function deleteFile(e, filename) {
+    e.stopPropagation(); // Don't trigger the row click
+    if (!confirm(`Are you sure you want to delete ${filename}?`)) return;
+
+    try {
+        const res = await fetch('/api/file/delete', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({token: currentToken, filename: filename})
+        });
+        const data = await res.json();
+
+        if (data.success) {
+            showToast(`Deleted ${filename}`, "success");
+            if (document.getElementById('current-filename').value === filename) {
+                document.getElementById('current-filename').value = '';
+                editor.setValue('', -1);
+                checkRunVisibility();
+            }
+            loadFiles();
+        } else {
+            showToast(`Failed to delete: ${data.error}`, "error");
+        }
+    } catch(err) {
+        showToast("Network error while deleting.", "error");
+    }
+}
+
+async function createFolder() {
+    const folderName = prompt("Enter new folder name (e.g. 'src' or 'src/components'):");
+    if (!folderName) return;
+
+    try {
+        const res = await fetch('/api/folder/create', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({token: currentToken, filename: folderName})
+        });
+        const data = await res.json();
+
+        if (data.success) {
+            showToast(`Created folder ${folderName}`, "success");
+            loadFiles();
+        } else {
+            showToast(`Failed to create folder: ${data.error}`, "error");
+        }
+    } catch(err) {
+        showToast("Network error while creating folder.", "error");
+    }
+}
+
+
+async function deleteFolder() {
+    const folderName = prompt("Enter folder path to delete (e.g. 'src/components'):");
+    if (!folderName) return;
+
+    if (!confirm(`Are you absolutely sure you want to delete the folder '${folderName}' AND all of its contents?`)) return;
+
+    try {
+        const res = await fetch('/api/folder/delete', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({token: currentToken, filename: folderName})
+        });
+        const data = await res.json();
+
+        if (data.success) {
+            showToast(`Deleted folder ${folderName}`, "success");
+            loadFiles();
+        } else {
+            showToast(`Failed to delete folder: ${data.error}`, "error");
+        }
+    } catch(err) {
+        showToast("Network error while deleting folder.", "error");
+    }
+}

static/js/projects.js

@@ -101,6 +101,8 @@ async function publishCurrentWorkspace(existingName = null, existingId = null) {
         }
 
         fileListDiv.innerHTML = '';
+        let primaryHtmlFile = null;
+
         if (wsData.files && wsData.files.length > 0) {
             wsData.files.forEach(f => {
                 const label = document.createElement('label');
@@ -111,6 +113,11 @@ async function publishCurrentWorkspace(existingName = null, existingId = null) {
                 checkbox.value = f;
                 checkbox.className = 'publish-file-checkbox';
 
+                // Track primary HTML file for preview
+                if (f.endsWith('.html') && (!primaryHtmlFile || f === 'index.html')) {
+                    primaryHtmlFile = f;
+                }
+
                 // If it's a new project, check all by default.
                 // If it's an update, check only the ones that were published before.
                 if (!existingId || previouslyPublished.includes(f)) {
@@ -125,13 +132,19 @@ async function publishCurrentWorkspace(existingName = null, existingId = null) {
             fileListDiv.innerHTML = '<span style="color: var(--error-color);">Workspace is empty. Add files in Code Editor.</span>';
         }
 
+        // Set up live preview to use the dynamically found HTML file
+        const iframe = document.getElementById('publish-preview-frame');
+        if (primaryHtmlFile) {
+            iframe.src = `/preview/${currentToken}/${primaryHtmlFile}`;
+            document.querySelector('#publish-modal .fa-html5').nextSibling.textContent = ` Live Preview (${primaryHtmlFile})`;
+        } else {
+            iframe.src = 'about:blank';
+            document.querySelector('#publish-modal .fa-html5').nextSibling.textContent = ` Live Preview (No HTML Found)`;
+        }
+
     } catch (e) {
         fileListDiv.innerHTML = '<span style="color: var(--error-color);">Failed to load files.</span>';
     }
-
-    // Set up live preview
-    const iframe = document.getElementById('publish-preview-frame');
-    iframe.src = `/preview/${currentToken}/index.html`; // Will return 404 naturally if not there
 }
 
 function closePublishModal() {
@@ -154,9 +167,15 @@ async function confirmPublish() {
         return;
     }
 
-    if (!selectedFiles.includes('index.html')) {
-        const proceed = confirm("Warning: You did not select an 'index.html' file. The site will not work correctly when visited. Publish anyway?");
+    let mainHtmlFile = null;
+    const htmlFiles = selectedFiles.filter(f => f.endsWith('.html'));
+
+    if (htmlFiles.length === 0) {
+        const proceed = confirm("Warning: You did not select any HTML files. The published link may not display anything visually. Publish anyway?");
         if(!proceed) return;
+    } else {
+        // Prefer index.html if selected, otherwise just pick the first html file
+        mainHtmlFile = htmlFiles.includes('index.html') ? 'index.html' : htmlFiles[0];
     }
 
     const btn = document.getElementById('publish-confirm-btn');
@@ -170,8 +189,9 @@ async function confirmPublish() {
             body: JSON.stringify({
                 token: currentToken,
                 project_name: nameInput,
-                project_id: publishingProjectID, // If this is an update, tell the backend
-                files: selectedFiles // The exact files to copy
+                project_id: publishingProjectID,
+                files: selectedFiles,
+                main_html_file: mainHtmlFile
             })
         });
         const data = await res.json();

static/js/settings.js

@@ -158,3 +158,71 @@ function updateAIModelBadge() {
         badge.innerText = el.options[el.selectedIndex].text;
     }
 }
+
+async function syncHuggingFace() {
+    const btn = document.getElementById('hf-sync-btn');
+    const status = document.getElementById('sync-status');
+
+    btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Syncing... Please wait.';
+    btn.disabled = true;
+    status.innerText = "Executing hf sync. This may take a minute...";
+
+    try {
+        const res = await fetch('/api/sync/hf', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({token: currentToken})
+        });
+        const data = await res.json();
+
+        if(data.success) {
+            showToast("Successfully synced to Hugging Face!", "success");
+            status.innerText = data.message;
+            status.style.color = "var(--success-color)";
+        } else {
+            showToast("Failed to sync.", "error");
+            status.innerText = data.error;
+            status.style.color = "var(--error-color)";
+        }
+    } catch(e) {
+        showToast("Network error during sync.", "error");
+        status.innerText = "Network error occurred.";
+        status.style.color = "var(--error-color)";
+    } finally {
+        btn.innerHTML = '<i class="fa-solid fa-rotate"></i> Sync Data to Hugging Face Bucket';
+        btn.disabled = false;
+    }
+}
+
+function downloadWorkspace() {
+    if (!currentToken) return;
+    window.location.href = `/api/export/${currentToken}`;
+}
+
+async function importGithubRepo() {
+    if (!currentToken) return;
+
+    const url = prompt("Enter a public GitHub repository URL to clone into your workspace (e.g., https://github.com/user/repo):");
+    if (!url) return;
+
+    showToast("Cloning repository... this may take a moment.", "info");
+
+    try {
+        const res = await fetch('/api/import/github', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({token: currentToken, github_url: url})
+        });
+
+        const data = await res.json();
+        if (data.success) {
+            showToast("Repository imported successfully!", "success");
+            // If they are on the editor view, reload files
+            if (typeof loadFiles !== 'undefined') loadFiles();
+        } else {
+            showToast("Failed to import: " + (data.error || "Unknown error"), "error");
+        }
+    } catch(e) {
+        showToast("Network error during import.", "error");
+    }
+}

templates/views/ai_chat.html

@@ -3,7 +3,8 @@
     <!-- Header -->
     <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: var(--glass-border); padding-bottom: 15px;">
         <h2 style="margin: 0; color: var(--text-primary);"><i class="fa-solid fa-sparkles" style="color: var(--accent-main);"></i> AI Assistant</h2>
-        <div style="font-size: 12px; color: var(--text-secondary); background: rgba(0,0,0,0.3); padding: 5px 10px; border-radius: 4px; border: var(--glass-border);">
+        <button class="editor-btn error" style="margin-right:10px; font-size:12px; padding:4px 8px;" onclick="clearAIChatHistory()"><i class="fa-solid fa-trash"></i> New Chat</button>
+        <div style="font-size: 12px; color: var(--text-secondary); background: rgba(0,0,0,0.3); padding: 5px 10px; border-radius: 4px; border: var(--glass-border); display:inline-block;">
             Model: <span id="current-ai-model" style="color: var(--accent-main);">default</span>
         </div>
     </div>

templates/views/editor.html

@@ -4,7 +4,7 @@
     <div class="file-explorer">
         <div class="explorer-header">
             <span><i class="fa-solid fa-folder-tree"></i> EXPLORER</span>
-            <button class="editor-btn" onclick="newFile()" style="padding: 2px 6px;" title="New File"><i class="fa-solid fa-plus"></i></button>
+            <div style="display:flex; gap:3px;"><button class="editor-btn" onclick="newFile()" style="padding: 2px 6px;" title="New File"><i class="fa-solid fa-file-circle-plus"></i></button><button class="editor-btn" onclick="createFolder()" style="padding: 2px 6px;" title="New Folder"><i class="fa-solid fa-folder-plus"></i></button><button class="editor-btn error" onclick="deleteFolder()" style="padding: 2px 6px; margin-left:10px;" title="Delete Folder"><i class="fa-solid fa-folder-minus"></i></button></div>
         </div>
         <div id="file-list" class="file-list">
             <div style="color: var(--text-muted); font-size: 12px; text-align: center; margin-top: 20px;">

templates/views/settings.html

@@ -7,6 +7,7 @@
         <div class="settings-tab" onclick="switchSettingsPanel('panel-editor', this)"><i class="fa-solid fa-keyboard"></i> Editor Settings</div>
         <div class="settings-tab" onclick="switchSettingsPanel('panel-terminal', this)"><i class="fa-solid fa-terminal"></i> Terminal Settings</div>
         <div class="settings-tab" onclick="switchSettingsPanel('panel-ai', this)"><i class="fa-solid fa-brain"></i> AI Settings</div>
+        <div class="settings-tab" onclick="switchSettingsPanel('panel-sync', this)"><i class="fa-solid fa-cloud-arrow-up"></i> Data & Sync</div>
     </div>
 
     <div class="settings-content-wrapper">
@@ -137,6 +138,27 @@
             </div>
         </div>
 
+        <div id="panel-sync" class="settings-section">
+            <h2 class="settings-title">Data Backup & Sync</h2>
+            <div style="background: rgba(255, 193, 7, 0.1); border: 1px solid var(--accent-main); padding: 15px; border-radius: 8px; margin-bottom: 20px;">
+                <p style="margin: 0 0 10px 0; color: var(--accent-main); font-weight: bold;"><i class="fa-solid fa-triangle-exclamation"></i> Hugging Face Storage</p>
+                <p style="margin: 0; font-size: 13px; color: var(--text-secondary);">Your code is deployed on a Hugging Face Space Docker container. Data may be lost on restart. Sync your data to your permanent HF bucket regularly to prevent data loss.</p>
+            </div>
+
+            <button class="editor-btn success" id="hf-sync-btn" onclick="syncHuggingFace()" style="padding: 10px 20px; font-size: 14px;">
+                <i class="fa-solid fa-rotate"></i> Sync Data to Hugging Face Bucket
+            </button>
+            <div id="sync-status" style="margin-top: 10px; font-size: 12px; color: var(--text-muted);"></div>
+
+            <div style="margin-top: 30px; border-top: var(--glass-border); padding-top: 20px;">
+                <h3 class="settings-title">Import/Export</h3>
+                <div style="display: flex; gap: 10px; margin-top: 10px;">
+                    <button class="editor-btn" onclick="downloadWorkspace()"><i class="fa-solid fa-download"></i> Download Workspace (.zip)</button>
+                    <button class="editor-btn" onclick="importGithubRepo()"><i class="fa-brands fa-github"></i> Import GitHub Repo</button>
+                </div>
+            </div>
+        </div>
+
         <div class="settings-actions">
             <button class="editor-btn primary" id="save-settings-btn" onclick="saveSettings()">Save Settings</button>
             <button class="editor-btn" onclick="loadSettings()">Reset Changes</button>