Upload 44 files

.gitignore

@@ -0,0 +1,46 @@
+#test file
+test.py
+
+# Root
+*.log
+.env
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+*.sqlite3
+
+# Environment Variables
+.env/
+
+# Backend (Python/Flask)
+virtual-env/
+venv/
+backend/__pycache__/
+backend/*.pyc
+backend/*.db
+
+# React Frontend (Node)
+fontend/node_modules/
+fontend/build/
+fontend/.env
+
+
+# OS Files
+.DS_Store
+Thumbs.db
+
+# IDEs and Editors
+.vscode/
+.idea/
+*.swp
+
+# Coverage / Testing
+coverage/
+*.cover
+*.lcov
+htmlcov/
+
+# Logs
+logs/
+*.log

Dockerfile

@@ -0,0 +1,62 @@
+# Use official Python 3.10 image as base
+FROM python:3.10-slim
+
+# Install Node.js (for React build) and other dependencies
+RUN apt-get update && \
+    apt-get install -y curl build-essential git && \
+    curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \
+    apt-get install -y nodejs && \
+    apt-get clean && rm -rf /var/lib/apt/lists/*
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+
+# Set environment variables
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+
+# Copy requirements first for better caching
+COPY --chown=user requirements.txt $HOME/app/requirements.txt
+
+# Install Python dependencies
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the code
+COPY --chown=user . $HOME/app
+
+# Build the React frontend
+WORKDIR $HOME/app/frontend
+RUN npm install --legacy-peer-deps && npm run build
+
+# Move build to a static directory for Flask to serve
+RUN mkdir -p $HOME/app/static && \
+    cp -r build/* $HOME/app/static/
+
+# Switch back to backend directory
+WORKDIR $HOME/app
+
+# Install supervisor
+RUN apt-get update && apt-get install -y supervisor
+
+# Create supervisor config directory
+RUN mkdir -p /etc/supervisor/conf.d
+
+# Copy supervisor config
+COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf
+
+# Switch to the "user" user
+USER user
+
+# Expose both ports (adjust as needed)
+EXPOSE 7860 3000
+
+# Set environment for React dev server
+ENV HOST=0.0.0.0
+ENV PORT=3000
+
+# Start supervisor (which starts both Flask and React)
+CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

README

@@ -0,0 +1,170 @@
+Here’s a full summary of your mind map app project, including the core idea, tech stack, features, and architecture for your XMind-like clone built with FastAPI + React Flow.
+
+
+---
+
+PROJECT NAME:
+
+MindMapX (or any name of your choice)
+
+
+---
+
+CORE IDEA:
+
+Build a web-based XMind-like application where users can:
+
+Create, edit, and visualize hierarchical mind maps (drag-drop nodes).
+
+Save, export, and import maps as .json files.
+
+Use basic authentication (login/signup) to store maps per user securely.
+
+Support real-time interactions and modern UI using React Flow.
+
+Backend powered by FastAPI for speed, structure, and API logic.
+
+
+
+---
+
+TECH STACK
+
+Frontend (React + React Flow):
+
+React (with Hooks & Axios)
+
+React Flow for node/edge diagramming
+
+JSON file export/import support
+
+Token-based Auth using localStorage
+
+
+Backend (FastAPI):
+
+FastAPI for API and Auth
+
+JWT-based Authentication
+
+In-memory or file/DB-based storage for user maps
+
+CORS and secure endpoints
+
+
+
+---
+
+FEATURES
+
+1. Mind Map Editor
+
+Add/edit/delete nodes and edges
+
+Drag-and-drop visual interface using React Flow
+
+Central root node support
+
+
+2. JSON Import/Export
+
+Export mind map to .json file
+
+Import .json file and restore full map (nodes + edges)
+
+
+3. User Authentication
+
+Signup/login using FastAPI backend
+
+Passwords hashed using bcrypt
+
+JWT tokens issued on login
+
+Authenticated routes for saving/loading maps
+
+
+4. Mind Map Persistence
+
+Each user’s maps are stored independently
+
+Save and load from backend using token-based access
+
+
+
+---
+
+ARCHITECTURE
+
+Frontend Flow
+
+Login Page → Token → Mind Map Canvas (React Flow)
+                    ↘ Import JSON
+                    ↘ Export JSON
+                    ↘ Save/Load using token
+
+Backend (FastAPI) Routes
+
+POST /signup          -> Create user
+POST /login           -> Return JWT token
+POST /save            -> Save mind map (token required)
+GET /load             -> Load map by user (token required)
+POST /upload          -> Optional JSON upload endpoint
+
+
+---
+
+JSON Structure
+
+{
+  "id": "map1",
+  "nodes": [
+    {
+      "id": "1",
+      "data": { "label": "Root" },
+      "position": { "x": 250, "y": 0 }
+    }
+  ],
+  "edges": [
+    {
+      "id": "e1-2",
+      "source": "1",
+      "target": "2"
+    }
+  ]
+}
+
+
+---
+
+POTENTIAL FUTURE FEATURES
+
+Cloud storage with database
+
+Collaboration (WebSocket/Socket.IO)
+
+Mind map templates
+
+Rich text & icons in nodes
+
+Zoom, pan, collapse branches
+
+
+
+---
+
+GOAL:
+
+Build the first version in a day with:
+
+Fully working frontend editor (React Flow)
+
+Working backend (FastAPI Auth + Save/Load)
+
+Export/import JSON support
+
+
+
+---
+
+Would you like me to generate the full project folder with boilerplate files for frontend and backend to get you started immediately?

backend/.env

@@ -0,0 +1,5 @@
+MISTRAL_API_KEY=nMXmEJvYwiSyXrPVJdBTKjRMqhbbhwmY
+SECRET_KEY=your_super_secret_key_here
+MONGODB_URL=mongodb://localhost:27017
+DATABASE_NAME=mindmap_db
+CORS_ORIGINS=http://localhost:3000

backend/main.py

@@ -0,0 +1,394 @@
+# requirements: fastapi, uvicorn, beanie, motor, pydantic, passlib[bcrypt], python-dotenv, jose, mistralai
+from fastapi import FastAPI, Depends, HTTPException, status, Path, Request
+from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse, StreamingResponse
+from jose import JWTError, jwt
+from passlib.context import CryptContext
+from datetime import datetime, timedelta
+from typing import Optional, List, Dict, Any
+from pydantic import BaseModel, EmailStr, ValidationError
+import os
+from dotenv import load_dotenv
+from beanie import Document, init_beanie
+from motor.motor_asyncio import AsyncIOMotorClient
+
+# Mistral API
+from mistralai import Mistral
+import uvicorn
+
+# Load environment variables
+load_dotenv()
+
+MONGODB_URL = os.getenv("MONGODB_URL", "mongodb://localhost:27017")
+DATABASE_NAME = os.getenv("DATABASE_NAME", "mindmap_db")
+SECRET_KEY = os.getenv("SECRET_KEY")
+MISTRAL_API_KEY = os.getenv("MISTRAL_API_KEY")
+ALLOWED_ORIGINS = os.getenv("CORS_ORIGINS", "http://localhost:3000").split(",")
+
+if not SECRET_KEY:
+    raise RuntimeError("SECRET_KEY environment variable must be set for security!")
+
+ALGORITHM = "HS256"
+ACCESS_TOKEN_EXPIRE_MINUTES = 30
+
+# Initialize FastAPI app
+app = FastAPI(title="MindMapX API")
+
+# CORS configuration
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=ALLOWED_ORIGINS,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Add rate limiting
+try:
+    from slowapi import Limiter, _rate_limit_exceeded_handler
+    from slowapi.util import get_remote_address
+    limiter = Limiter(key_func=get_remote_address)
+    app.state.limiter = limiter
+    app.add_exception_handler(429, _rate_limit_exceeded_handler)
+except ImportError:
+    limiter = None
+
+# Add validation error handler
+@app.exception_handler(ValidationError)
+async def validation_exception_handler(request: Request, exc: ValidationError):
+    return JSONResponse(
+        status_code=422,
+        content={"detail": [{"msg": str(err), "loc": err["loc"]} for err in exc.errors()]},
+    )
+
+@app.exception_handler(HTTPException)
+async def http_exception_handler(request: Request, exc: HTTPException):
+    return JSONResponse(
+        status_code=exc.status_code,
+        content={"detail": exc.detail},
+    )
+
+# Security configuration
+pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/login")
+
+# Mistral client
+client = Mistral(api_key=MISTRAL_API_KEY) if MISTRAL_API_KEY else None
+
+# Models
+class UserBase(BaseModel):
+    username: str
+    email: Optional[EmailStr] = None
+
+class UserCreate(UserBase):
+    password: str
+
+class User(Document, UserBase):
+    hashed_password: str
+    created_at: datetime
+    updated_at: datetime
+
+    class Settings:
+        name = "users"
+        indexes = ["username", "email"]
+
+class Node(BaseModel):
+    id: str
+    data: Dict[str, Any]
+    position: Dict[str, float]
+
+class Edge(BaseModel):
+    id: str
+    source: str
+    target: str
+
+class MindMapBase(BaseModel):
+    name: str = "Untitled"
+    nodes: List[Node] = []
+    edges: List[Edge] = []
+
+class MindMap(Document, MindMapBase):
+    user_id: str
+    created_at: datetime
+    updated_at: datetime
+
+    class Settings:
+        name = "mindmaps"
+        indexes = ["user_id", "created_at"]
+
+# Token models
+class Token(BaseModel):
+    access_token: str
+    token_type: str
+
+class TokenData(BaseModel):
+    username: Optional[str] = None
+
+# DB init
+async def init_db():
+    client = AsyncIOMotorClient(MONGODB_URL)
+    await init_beanie(
+        database=client[DATABASE_NAME],
+        document_models=[User, MindMap],
+    )
+
+# Helper functions
+def verify_password(plain_password: str, hashed_password: str) -> bool:
+    return pwd_context.verify(plain_password, hashed_password)
+
+def get_password_hash(password: str) -> str:
+    return pwd_context.hash(password)
+
+async def get_user(username: str) -> Optional[User]:
+    return await User.find_one({"username": username})
+
+async def authenticate_user(username: str, password: str) -> Optional[User]:
+    user = await get_user(username)
+    if not user:
+        return None
+    if not verify_password(password, user.hashed_password):
+        return None
+    return user
+
+def create_access_token(data: dict, expires_delta: Optional[timedelta] = None) -> str:
+    to_encode = data.copy()
+    if expires_delta:
+        expire = datetime.utcnow() + expires_delta
+    else:
+        expire = datetime.utcnow() + timedelta(minutes=15)
+    to_encode.update({"exp": expire})
+    encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
+    return encoded_jwt
+
+async def get_current_user(token: str = Depends(oauth2_scheme)) -> User:
+    credentials_exception = HTTPException(
+        status_code=status.HTTP_401_UNAUTHORIZED,
+        detail="Could not validate credentials",
+        headers={"WWW-Authenticate": "Bearer"},
+    )
+    try:
+        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
+        username: str = payload.get("sub")
+        if username is None:
+            raise credentials_exception
+        token_data = TokenData(username=username)
+    except JWTError:
+        raise credentials_exception
+    user = await get_user(username=token_data.username)
+    if user is None:
+        raise credentials_exception
+    return user
+
+# Startup event
+@app.on_event("startup")
+async def on_startup():
+    await init_db()
+
+# Auth endpoints
+@app.post("/signup", response_model=Token)
+async def signup(user: UserCreate):
+    existing_user = await User.find_one({"username": user.username})
+    if existing_user:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Username already registered",
+        )
+    if user.email:
+        existing_email = await User.find_one({"email": user.email})
+        if existing_email:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail="Email already registered",
+            )
+    hashed_password = get_password_hash(user.password)
+    new_user = User(
+        username=user.username,
+        email=user.email,
+        hashed_password=hashed_password,
+        created_at=datetime.utcnow(),
+        updated_at=datetime.utcnow(),
+    )
+    await new_user.insert()
+    access_token = create_access_token(
+        data={"sub": user.username},
+        expires_delta=timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES),
+    )
+    return {"access_token": access_token, "token_type": "bearer"}
+    
+@app.post("/login", response_model=Token)
+async def login(form_data: OAuth2PasswordRequestForm = Depends()):
+    user = await authenticate_user(form_data.username, form_data.password)
+    if not user:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect username or password",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+    access_token = create_access_token(
+        data={"sub": user.username},
+        expires_delta=timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES),
+    )
+    return {"access_token": access_token, "token_type": "bearer"}
+    
+@app.post("/logout")
+async def logout(current_user: User = Depends(get_current_user)):
+    return {"message": "Successfully logged out"}
+
+# MindMap CRUD endpoints (all under /api/workflows)
+@app.get("/api/workflows", response_model=List[Dict[str, Any]])
+async def get_workflows(current_user: User = Depends(get_current_user)):
+    mindmaps = await MindMap.find({"user_id": current_user.username}).to_list()
+    return [
+        {
+            "id": str(m.id),
+            "name": m.name,
+            "nodes": m.nodes,
+            "edges": m.edges,
+            "updatedAt": m.updated_at.isoformat() if m.updated_at else None,
+            "createdAt": m.created_at.isoformat() if m.created_at else None,
+        }
+        for m in mindmaps
+    ]
+
+@app.post("/api/workflows", response_model=Dict[str, Any])
+async def create_workflow(
+    workflow: MindMapBase, current_user: User = Depends(get_current_user)
+):
+    # Validate unique node IDs
+    node_ids = [node.id for node in workflow.nodes]
+    if len(node_ids) != len(set(node_ids)):
+        raise HTTPException(status_code=400, detail="Duplicate node IDs are not allowed")
+    new_map = MindMap(
+        user_id=current_user.username,
+        name=workflow.name,
+        nodes=workflow.nodes,
+        edges=workflow.edges,
+        created_at=datetime.utcnow(),
+        updated_at=datetime.utcnow(),
+    )
+    await new_map.insert()
+    return {
+        "id": str(new_map.id),
+        "name": new_map.name,
+        "nodes": new_map.nodes,
+        "edges": new_map.edges,
+        "updatedAt": new_map.updated_at.isoformat() if new_map.updated_at else None,
+        "createdAt": new_map.created_at.isoformat() if new_map.created_at else None,
+    }
+
+@app.get("/api/workflows/{workflow_id}", response_model=Dict[str, Any])
+async def get_workflow(
+    workflow_id: str, current_user: User = Depends(get_current_user)
+):
+    mind_map = await MindMap.get(workflow_id)
+    if not mind_map or mind_map.user_id != current_user.username:
+        raise HTTPException(status_code=404, detail="Workflow not found")
+    return {
+        "id": str(mind_map.id),
+        "name": mind_map.name,
+        "nodes": mind_map.nodes,
+        "edges": mind_map.edges,
+        "updatedAt": mind_map.updated_at.isoformat() if mind_map.updated_at else None,
+        "createdAt": mind_map.created_at.isoformat() if mind_map.created_at else None,
+    }
+
+@app.put("/api/workflows/{workflow_id}", response_model=Dict[str, Any])
+async def update_workflow(
+    workflow_id: str,
+    workflow: MindMapBase,
+    current_user: User = Depends(get_current_user),
+):
+    mind_map = await MindMap.get(workflow_id)
+    if not mind_map or mind_map.user_id != current_user.username:
+        raise HTTPException(status_code=404, detail="Workflow not found")
+    # Validate unique node IDs
+    node_ids = [node.id for node in workflow.nodes]
+    if len(node_ids) != len(set(node_ids)):
+        raise HTTPException(status_code=400, detail="Duplicate node IDs are not allowed")
+    mind_map.name = workflow.name
+    mind_map.nodes = workflow.nodes
+    mind_map.edges = workflow.edges
+    mind_map.updated_at = datetime.utcnow()
+    await mind_map.save()
+    return {
+        "id": str(mind_map.id),
+        "name": mind_map.name,
+        "nodes": mind_map.nodes,
+        "edges": mind_map.edges,
+        "updatedAt": mind_map.updated_at.isoformat() if mind_map.updated_at else None,
+        "createdAt": mind_map.created_at.isoformat() if mind_map.created_at else None,
+    }
+
+@app.delete("/api/workflows/{workflow_id}")
+async def delete_workflow(
+    workflow_id: str, current_user: User = Depends(get_current_user)
+):
+    mind_map = await MindMap.get(workflow_id)
+    if not mind_map or mind_map.user_id != current_user.username:
+        raise HTTPException(status_code=404, detail="Workflow not found")
+    await mind_map.delete()
+    return {"message": "Workflow deleted successfully"}
+
+# Mistral API endpoints
+class ChatMessage(BaseModel):
+    role: str  # Options: 'user', 'assistant', 'system'
+    content: str
+
+class ChatRequest(BaseModel):
+    messages: List[ChatMessage]
+    model: str = "mistral-large-latest"
+    stream: bool = False
+    safe_prompt: Optional[bool] = False
+    stop: Optional[List[str]] = None
+
+@app.get("/models")
+def list_models():
+    if not client:
+        raise HTTPException(status_code=500, detail="Mistral API key not configured.")
+    models = client.models.list()
+    return {"models": [model.id for model in models.data]}
+
+@app.post("/chat")
+async def chat(request: ChatRequest):
+    if not client:
+        raise HTTPException(status_code=500, detail="Mistral API key not configured.")
+    # If streaming is requested
+    if request.stream:
+        def stream_response():
+            response = client.chat.stream(
+                model=request.model,
+                messages=[msg.dict() for msg in request.messages],
+                safe_prompt=request.safe_prompt,
+                stop=request.stop
+            )
+            for chunk in response:
+                content = chunk.data.choices[0].delta.content
+                if content:
+                    yield content
+        return StreamingResponse(stream_response(), media_type="text/plain")
+    # Non-streaming (standard) completion
+    else:
+        response = client.chat.complete(
+            model=request.model,
+            messages=[msg.dict() for msg in request.messages],
+            safe_prompt=request.safe_prompt,
+            stop=request.stop
+        )
+        return JSONResponse({
+            "response": response.choices[0].message.content
+        })
+
+# Misc endpoints
+@app.get("/")
+async def root():
+    return {"message": "Mind Map API"}
+
+@app.get("/health")
+async def health():
+    return {"status": "ok"}
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000) 
+

backend/requirements.txt

@@ -0,0 +1,11 @@
+fastapi
+uvicorn
+beanie
+motor
+pydantic
+passlib[bcrypt]
+python-dotenv
+python-jose 
+mistralai
+pydantic[email]
+python-multipart

frontend/.gitignore

@@ -0,0 +1 @@
+node_modules

frontend/README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

frontend/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-router-dom": "^5.3.3",
+    "ajv": "8.12.0",
+    "ajv-keywords": "5.1.0",
+    "axios": "^1.6.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0",
+    "react-router-dom": "^6.21.1",
+    "react-scripts": "5.0.1",
+    "reactflow": "^11.10.1",
+    "typescript": "^5.3.3",
+    "uuid": "^9.0.1",
+    "web-vitals": "^3.5.0"
+  },
+  "resolutions": {
+    "ajv": "8.12.0",
+    "ajv-keywords": "5.1.0",
+    "nth-check": "2.1.1",
+    "postcss": "8.4.32",
+    "svgo": "3.0.2",
+    "@svgr/plugin-svgo": "8.1.0",
+    "@svgr/webpack": "8.1.0",
+    "resolve-url-loader": "5.0.0",
+    "glob": "10.3.10",
+    "semver": "7.5.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "preinstall": "npx npm-force-resolutions",
+    "security-check": "npm audit"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/uuid": "^9.0.7",
+    "npm-force-resolutions": "^0.0.10"
+  },
+  "overrides": {
+    "glob": "10.3.10",
+    "semver": "7.5.4"
+  }
+}

frontend/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

frontend/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

frontend/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

frontend/src/App.css

@@ -0,0 +1,167 @@
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #f5f7fa;
+  color: #222;
+  min-height: 100vh;
+  min-width: 100vw;
+  overflow-x: hidden;
+}
+#root {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ReactFlow customizations */
+.react-flow__node {
+  padding: 10px;
+  border-radius: 5px;
+  width: 150px;
+  font-size: 12px;
+  color: #222;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+  background: white;
+  border-color: #1a192b;
+}
+.react-flow__node-input {
+  background: #f6f6f6;
+  border-color: #0041d0;
+}
+.react-flow__node-default {
+  background: #f6f6f6;
+  border-color: #1a192b;
+}
+.react-flow__node-output {
+  background: #f6f6f6;
+  border-color: #ff0072;
+}
+.react-flow__handle {
+  width: 8px;
+  height: 8px;
+  background: #1a192b;
+  border: 1px solid white;
+}
+.react-flow__handle-top { top: -4px; }
+.react-flow__handle-bottom { bottom: -4px; }
+.react-flow__handle-left { left: -4px; }
+.react-flow__handle-right { right: -4px; }
+.react-flow__edge-path {
+  stroke: #b1b1b7;
+  stroke-width: 2;
+}
+.react-flow__edge.selected .react-flow__edge-path {
+  stroke: #0041d0;
+}
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+}
+.react-flow__controls-button {
+  border: none;
+  background: #f8f8f8;
+  border-bottom: 1px solid #eee;
+  box-sizing: content-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  user-select: none;
+  padding: 5px;
+}
+.react-flow__controls-button:hover {
+  background: #f1f1f1;
+}
+
+.mindmap-editor-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+}
+@media (max-width: 700px) {
+  .mindmap-editor-container {
+    flex-direction: column;
+    height: 100dvh;
+  }
+}
+.toolbar {
+  display: flex;
+  gap: 8px;
+  padding: 8px;
+  background: #f5faff;
+  border-bottom: 1px solid #eaf4ff;
+  z-index: 10;
+}
+.toolbar button {
+  background: #fff;
+  border: 1px solid #cce3ff;
+  border-radius: 4px;
+  padding: 6px 12px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.toolbar button:focus {
+  outline: 2px solid #007bff;
+}
+.toolbar button:hover {
+  background: #eaf4ff;
+}
+.error-toast {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #dc3545;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 4px;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 200px;
+}
+.error-toast button {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1.2rem;
+  cursor: pointer;
+  margin-left: 8px;
+}
+.touch-friendly .toolbar button {
+  min-width: 44px;
+  min-height: 44px;
+  font-size: 1.1rem;
+}
+@media (max-width: 700px) {
+  .toolbar {
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 4px;
+  }
+  .error-toast {
+    top: 60px;
+    min-width: 120px;
+    font-size: 0.95rem;
+    padding: 8px 10px;
+  }
+} 

frontend/src/App.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import Auth from './components/Auth';
+import { ReactFlowProvider } from 'reactflow';
+import MindMapEditor from './components/MindMapEditor';
+import LandingPage from './components/LandingPage';
+
+interface PrivateRouteProps {
+  children: React.ReactNode;
+  redirectTo?: string;
+}
+
+const PrivateRoute: React.FC<PrivateRouteProps> = ({ 
+  children, 
+  redirectTo = "/" 
+}) => {
+  const token = localStorage.getItem('token');
+  return token ? <>{children}</> : <Navigate to={redirectTo} />;
+};
+
+const App: React.FC = () => {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/login" element={<Auth isLogin={true} />} />
+        <Route path="/signup" element={<Auth isLogin={false} />} />
+        <Route
+          path="/editor"
+          element={
+            <PrivateRoute>
+              <ReactFlowProvider>
+                <MindMapEditor />
+              </ReactFlowProvider>
+            </PrivateRoute>
+          }
+        />
+      </Routes>
+    </Router>
+  );
+};
+
+export default App; 

frontend/src/components/Auth.module.css

@@ -0,0 +1,126 @@
+.authContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  padding: 20px;
+}
+
+.authForm {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 400px;
+}
+
+.authForm h2 {
+  text-align: center;
+  color: #2c3e50;
+  margin-bottom: 1.5rem;
+  font-size: 1.8rem;
+}
+
+.formGroup {
+  margin-bottom: 1.2rem;
+}
+
+.formGroup label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #4a5568;
+  font-weight: 500;
+}
+
+.formGroup input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  font-size: 1rem;
+  transition: all 0.2s ease;
+}
+
+.formGroup input:focus {
+  outline: none;
+  border-color: #4299e1;
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
+}
+
+.formGroup input:disabled {
+  background-color: #f7fafc;
+  cursor: not-allowed;
+}
+
+.error {
+  background-color: #fff5f5;
+  color: #c53030;
+  padding: 0.75rem;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+  border: 1px solid #feb2b2;
+}
+
+.submitButton {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: #4299e1;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.submitButton:hover:not(:disabled) {
+  background-color: #3182ce;
+}
+
+.submitButton:disabled {
+  background-color: #a0aec0;
+  cursor: not-allowed;
+}
+
+.submitButton:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
+}
+
+@media (max-width: 480px) {
+  .authForm {
+    padding: 1.5rem;
+  }
+
+  .authForm h2 {
+    font-size: 1.5rem;
+  }
+
+  .formGroup input {
+    padding: 0.625rem;
+  }
+
+  .submitButton {
+    padding: 0.625rem;
+  }
+}
+
+.switchText {
+  text-align: center;
+  margin-top: 1.2rem;
+  color: #6c757d;
+}
+
+.switchText a {
+  color: #007bff;
+  text-decoration: none;
+  font-weight: 700;
+}
+
+.switchText a:hover {
+  text-decoration: underline;
+} 

frontend/src/components/Auth.tsx

@@ -0,0 +1,141 @@
+import React, { useState, useCallback } from 'react';
+import axios, { handleApiError } from '../utils/axios';
+import styles from './Auth.module.css';
+
+interface AuthForm {
+  username: string;
+  email: string;
+  password: string;
+}
+
+interface AuthProps {
+  isLogin: boolean;
+}
+
+const Auth: React.FC<AuthProps> = ({ isLogin }) => {
+  const [form, setForm] = useState<AuthForm>({ username: '', email: '', password: '' });
+  const [error, setError] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
+    setError(''); // Clear error when user starts typing
+  }, []);
+
+  const validateForm = useCallback((): boolean => {
+    if (!form.username.trim()) {
+      setError('Username is required');
+      return false;
+    }
+    if (!form.password.trim()) {
+      setError('Password is required');
+      return false;
+    }
+    if (!isLogin && !form.email.trim()) {
+      setError('Email is required');
+      return false;
+    }
+    if (!isLogin && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
+      setError('Please enter a valid email address');
+      return false;
+    }
+    return true;
+  }, [form, isLogin]);
+
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      if (isLogin) {
+        const formData = new FormData();
+        formData.append('username', form.username);
+        formData.append('password', form.password);
+        
+        const res = await axios.post('/login', formData, {
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+        });
+
+        const { access_token, refresh_token } = res.data;
+        localStorage.setItem('token', access_token);
+        localStorage.setItem('refreshToken', refresh_token);
+        window.location.href = '/editor';
+      } else {
+        await axios.post('/signup', form);
+        window.location.href = '/login';
+      }
+    } catch (error) {
+      setError(handleApiError(error));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [form, isLogin, validateForm]);
+
+  return (
+    <div className={styles.authContainer}>
+      <form onSubmit={handleSubmit} className={styles.authForm}>
+        <h2>{isLogin ? 'Login' : 'Sign Up'}</h2>
+        
+        <div className={styles.formGroup}>
+          <label htmlFor="username">Username</label>
+          <input
+            type="text"
+            id="username"
+            name="username"
+            value={form.username}
+            onChange={handleChange}
+            disabled={isLoading}
+            required
+          />
+        </div>
+
+        {!isLogin && (
+          <div className={styles.formGroup}>
+            <label htmlFor="email">Email</label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              value={form.email}
+              onChange={handleChange}
+              disabled={isLoading}
+              required
+            />
+          </div>
+        )}
+
+        <div className={styles.formGroup}>
+          <label htmlFor="password">Password</label>
+          <input
+            type="password"
+            id="password"
+            name="password"
+            value={form.password}
+            onChange={handleChange}
+            disabled={isLoading}
+            required
+          />
+        </div>
+
+        {error && <div className={styles.error}>{error}</div>}
+
+        <button 
+          type="submit" 
+          className={styles.submitButton}
+          disabled={isLoading}
+        >
+          {isLoading ? 'Processing...' : (isLogin ? 'Login' : 'Sign Up')}
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default Auth; 

frontend/src/components/ChatModal.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export interface MindMapData {
+  nodes: any[];
+  edges: any[];
+  config: any;
+  mindMapName: string;
+}
+
+export interface ChatModalProps {
+  open: boolean;
+  onClose: () => void;
+  onImportJSON: (event: any) => void;
+  currentMindMapData: MindMapData;
+}
+
+declare const ChatModal: React.FC<ChatModalProps>;
+export default ChatModal; 

frontend/src/components/ChatModal.tsx

@@ -0,0 +1,185 @@
+import React, { useState } from 'react';
+import { MindMapData } from './ChatModal.d';
+
+interface ChatModalProps {
+  open: boolean;
+  onClose: () => void;
+  onImportJSON: (event: any) => void;
+  currentMindMapData: MindMapData;
+}
+
+const createSystemPrompt = (currentData: MindMapData) => {
+  return `You are the best mindmap builder to build and optimize mindmap content to return the best organized json response for reactflow library.
+
+Current Mindmap State:
+- Name: ${currentData.mindMapName}
+- Number of Nodes: ${currentData.nodes.length}
+- Number of Connections: ${currentData.edges.length}
+- Current Configuration: ${JSON.stringify(currentData.config)}
+
+IMPORTANT: Your response must be a valid JSON object that follows this exact structure:
+{
+  "id": "string (optional)",
+  "name": "string",
+  "updatedAt": "string (ISO date)",
+  "nodes": [
+    {
+      "id": "string",
+      "type": "editableColor",
+      "data": {
+        "label": "string",
+        "bgColor": "string (hex color)",
+        "textColor": "string (hex color)"
+      },
+      "position": {
+        "x": number,
+        "y": number
+      },
+      "width": number,
+      "height": number
+    }
+  ],
+  "edges": [
+    {
+      "id": "string (reactflow__edge-{source}-{target})",
+      "source": "string (node id)",
+      "target": "string (node id)"
+    }
+  ],
+  "config": {
+    "nodeBgColor": "string (hex color)",
+    "nodeTextColor": "string (hex color)"
+  }
+}
+
+Please analyze the current mindmap structure and provide optimized suggestions or modifications based on the user's input. Return ONLY the JSON object without any additional text or markdown formatting.`;
+};
+
+const ChatModal: React.FC<ChatModalProps> = ({ open, onClose, onImportJSON, currentMindMapData }) => {
+  const [userInput, setUserInput] = useState('');
+  const [response, setResponse] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [jsonReady, setJsonReady] = useState(false);
+
+  if (!open) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setResponse('');
+    setJsonReady(false);
+    try {
+      // Use the correct API endpoint from environment variables
+      const apiUrl = process.env.REACT_APP_CHAT_API_URL || 'http://localhost:3001/api/chat';
+      console.log('Sending request to:', apiUrl);
+      
+      const systemPrompt = createSystemPrompt(currentMindMapData);
+      
+      const res = await fetch(apiUrl, {
+        method: 'POST',
+        headers: { 
+          'Content-Type': 'application/json',
+          'Accept': 'application/json'
+        },
+        body: JSON.stringify({
+          model: 'mistral-large-latest',
+          stream: false,
+          messages: [
+            { role: 'system', content: systemPrompt },
+            { role: 'user', content: userInput },
+          ],
+        }),
+      });
+
+      if (!res.ok) {
+        throw new Error(`HTTP error! status: ${res.status}`);
+      }
+
+      const data = await res.json();
+      console.log('API Response:', data);
+      
+      let content = data.choices?.[0]?.message?.content || data.content || JSON.stringify(data);
+      setResponse(content);
+
+      // Try to extract JSON from markdown/code block if present
+      let jsonText = content;
+      const match = content.match(/```json\s*([\s\S]*?)```/i) || content.match(/```([\s\S]*?)```/i);
+      if (match) {
+        jsonText = match[1].trim();
+      }
+
+      // Try to parse as JSON for import
+      try {
+        // Log the content for debugging
+        console.log('Raw content:', content);
+        console.log('Extracted JSON text:', jsonText);
+        
+        // Clean the JSON text
+        jsonText = jsonText.replace(/[\u0000-\u001F\u007F-\u009F]/g, ''); // Remove control characters
+        jsonText = jsonText.replace(/\n/g, ' ').replace(/\r/g, ''); // Remove newlines
+        jsonText = jsonText.replace(/\s+/g, ' ').trim(); // Normalize whitespace
+        
+        const parsedJson = JSON.parse(jsonText);
+        console.log('Parsed JSON:', parsedJson);
+        setJsonReady(true);
+      } catch (parseError) {
+        console.error('JSON Parse Error:', parseError);
+        console.error('Failed JSON text:', jsonText);
+        setJsonReady(false);
+        setResponse(prev => prev + '\n\n[Error: Invalid JSON format. Please try rephrasing your prompt or check the AI output.]');
+      }
+    } catch (err) {
+      console.error('API Error:', err);
+      setResponse(`Error: ${err instanceof Error ? err.message : 'Failed to connect to chat service'}`);
+      setJsonReady(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleImport = () => {
+    try {
+      let jsonText = response;
+      const match = response.match(/```json\s*([\s\S]*?)```/i) || response.match(/```([\s\S]*?)```/i);
+      if (match) {
+        jsonText = match[1].trim();
+      }
+      const file = new File([jsonText], 'mindmap.json', { type: 'application/json' });
+      const event = { target: { files: [file] } };
+      onImportJSON(event);
+      onClose();
+    } catch {}
+  };
+
+  return (
+    <div style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', background: 'rgba(0,0,0,0.25)', zIndex: 20000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div style={{ background: '#fff', borderRadius: 12, boxShadow: '0 4px 24px rgba(0,0,0,0.18)', padding: 32, minWidth: 340, maxWidth: 480, width: '100%', position: 'relative' }}>
+        <button onClick={onClose} style={{ position: 'absolute', top: 12, right: 16, background: 'none', border: 'none', fontSize: 22, cursor: 'pointer' }} aria-label="Close chat">×</button>
+        <h3 style={{ marginTop: 0 }}>Mind Map Chat Assistant</h3>
+        <form onSubmit={handleSubmit} style={{ marginBottom: 16 }}>
+          <textarea
+            value={userInput}
+            onChange={e => setUserInput(e.target.value)}
+            rows={4}
+            style={{ width: '100%', borderRadius: 6, border: '1.5px solid #e0e0e0', padding: 8, fontSize: 15, marginBottom: 8 }}
+            placeholder="Describe your mind map or ask for optimization..."
+            required
+          />
+          <button type="submit" style={{ background: '#007bff', color: '#fff', border: 'none', borderRadius: 6, padding: '8px 18px', fontWeight: 600, fontSize: 15, cursor: 'pointer' }} disabled={loading}>
+            {loading ? 'Thinking...' : 'Send'}
+          </button>
+        </form>
+        <div style={{ minHeight: 60, background: '#f7fafc', borderRadius: 6, padding: 10, fontSize: 14, color: '#222', marginBottom: 8, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+          {loading ? 'Loading...' : response}
+        </div>
+        {jsonReady && (
+          <button onClick={handleImport} style={{ background: '#28a745', color: '#fff', border: 'none', borderRadius: 6, padding: '8px 18px', fontWeight: 600, fontSize: 15, cursor: 'pointer', marginTop: 4 }}>
+            Import to Mind Map
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ChatModal; 

frontend/src/components/EditableColorNode.css

@@ -0,0 +1,47 @@
+/* Simple one-box layout for React Flow node */
+.editable-color-node {
+    padding: 10px 20px;
+    border-radius: 8px;
+    min-width: 150px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+}
+
+.editable-color-node:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.editable-color-node.selected {
+    border-color: #2196f3;
+}
+
+/* Label style inside the node */
+.editable-color-node-label {
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+    cursor: text;
+    padding: 4px;
+    border-radius: 4px;
+}
+
+.editable-color-node-label:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Input style for editing the label */
+.editable-color-node-label-input {
+    width: 100%;
+    padding: 4px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+    outline: none;
+}
+
+.editable-color-node-label-input:focus {
+    border-color: #2196f3;
+    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
+}
+  

frontend/src/components/EditableColorNode.tsx

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react';
+import { Handle, NodeProps, Position } from 'reactflow';
+import './EditableColorNode.css';
+import * as MdIcons from 'react-icons/md';
+
+const icons = MdIcons as Record<string, React.ComponentType<any>>;
+
+const EditableColorNode: React.FC<NodeProps> = ({ id, data, selected, isConnectable, ...props }) => {
+  const [editing, setEditing] = useState(false);
+  const [label, setLabel] = useState(data.label || '');
+  const [nodeStyle, setNodeStyle] = useState({
+    backgroundColor: data.bgColor || '#fff',
+    color: data.textColor || '#222',
+  });
+
+  useEffect(() => {
+    setNodeStyle({
+      backgroundColor: data.bgColor || '#fff',
+      color: data.textColor || '#222',
+    });
+  }, [data.bgColor, data.textColor]);
+
+  // Save label on blur or Enter
+  const handleLabelChange = (e: React.ChangeEvent<HTMLInputElement>) => setLabel(e.target.value);
+  const handleLabelBlur = () => {
+    setEditing(false);
+    if (data.onChange) data.onChange(id, { ...data, label });
+  };
+  const handleLabelKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') handleLabelBlur();
+  };
+
+  // Drag-and-drop icon support
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    const iconName = e.dataTransfer.getData('icon');
+    if (iconName && data.onChange) {
+      data.onChange(id, { ...data, icon: iconName });
+    }
+  };
+  const handleDragOver = (e: React.DragEvent) => e.preventDefault();
+
+  // Render icon if present
+  let IconComponent = null;
+  if (data.icon && icons[data.icon]) {
+    IconComponent = React.createElement(icons[data.icon], { size: 24, style: { marginBottom: 4 } });
+  }
+
+  return (
+    <div
+      className={`editable-color-node ${selected ? 'selected' : ''}`}
+      style={{
+        ...nodeStyle,
+        boxShadow: selected ? '0 0 0 3px #007bff' : undefined,
+        border: selected ? '2px solid #007bff' : '1px solid #ccc',
+        transition: 'box-shadow 0.2s, border 0.2s',
+      }}
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+    >
+      <Handle type="target" position={Position.Top} isConnectable={isConnectable} />
+      {IconComponent && <div style={{ display: 'flex', justifyContent: 'center' }}>{IconComponent}</div>}
+      <div
+        className="editable-color-node-label"
+        title={label}
+        style={{ color: data.textColor || '#222' }}
+      >
+        {label}
+      </div>
+      <Handle type="source" position={Position.Bottom} isConnectable={isConnectable} />
+    </div>
+  );
+};
+
+export default EditableColorNode;

frontend/src/components/LandingPage.module.css

@@ -0,0 +1,136 @@
+.container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+.header {
+  width: 100%;
+  padding: 1.2rem 2rem;
+  background: white;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  margin: 0;
+  color: #1a2947;
+  font-size: 2rem;
+  font-weight: 900;
+}
+
+.navButtons {
+  display: flex;
+  gap: 1.2rem;
+}
+
+.button {
+  padding: 0.6rem 1.2rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 1rem;
+  transition: background 0.2s, color 0.2s, transform 0.2s;
+}
+
+.buttonPrimary {
+  background: #007bff;
+  color: white;
+}
+
+.buttonPrimary:hover {
+  background: #0056b3;
+  transform: translateY(-2px) scale(1.03);
+}
+
+.buttonSecondary {
+  background: #6c757d;
+  color: white;
+}
+
+.buttonSecondary:hover {
+  background: #5a6268;
+}
+
+.hero {
+  text-align: center;
+  padding: 5rem 2rem 3rem 2rem;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.title {
+  font-size: 2.8rem;
+  color: #1a2947;
+  margin-bottom: 1.2rem;
+  font-weight: 900;
+}
+
+.description {
+  font-size: 1.25rem;
+  color: #34495e;
+  line-height: 1.7;
+  margin-bottom: 2.2rem;
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 2.2rem;
+  padding: 2.2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.featureCard {
+  background: white;
+  padding: 2.2rem 1.5rem;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
+  text-align: center;
+}
+
+.featureTitle {
+  color: #1a2947;
+  margin-bottom: 1.2rem;
+  font-size: 1.2rem;
+  font-weight: 800;
+}
+
+.featureDescription {
+  color: #7f8c8d;
+  line-height: 1.5;
+  font-size: 1rem;
+}
+
+.ctaButton {
+  background: #007bff;
+  color: white;
+  padding: 1.1rem 2.2rem;
+  font-size: 1.15rem;
+  border: none;
+  border-radius: 8px;
+  font-weight: 800;
+  margin-top: 2rem;
+  transition: background 0.2s, transform 0.2s;
+}
+
+.ctaButton:hover {
+  background: #0056b3;
+  transform: translateY(-2px) scale(1.03);
+}
+
+@media (max-width: 700px) {
+  .hero {
+    padding: 3rem 1rem 2rem 1rem;
+  }
+  .features {
+    padding: 1rem;
+    gap: 1.2rem;
+  }
+} 

frontend/src/components/LandingPage.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import styles from './LandingPage.module.css';
+
+const LandingPage: React.FC = () => {
+  const navigate = useNavigate();
+  const isAuthenticated = !!localStorage.getItem('token');
+
+  return (
+    <div className={styles.container}>
+      <header className={styles.header}>
+        <h1 className={styles.logo}>MindMapX</h1>
+        <div className={styles.navButtons}>
+          {isAuthenticated ? (
+            <button 
+              className={styles.buttonPrimary}
+              onClick={() => navigate('/editor')}
+            >
+              Go to Dashboard
+            </button>
+          ) : (
+            <>
+              <button 
+                className={styles.buttonSecondary}
+                onClick={() => navigate('/login')}
+              >
+                Login
+              </button>
+              <button 
+                className={styles.buttonPrimary}
+                onClick={() => navigate('/signup')}
+              >
+                Sign Up
+              </button>
+            </>
+          )}
+        </div>
+      </header>
+
+      <section className={styles.hero}>
+        <h2 className={styles.title}>Create Beautiful Mind Maps</h2>
+        <p className={styles.description}>
+          MindMapX is a powerful tool for creating, sharing, and collaborating on mind maps.
+          Organize your thoughts, plan projects, and visualize complex ideas with our intuitive interface.
+        </p>
+        {!isAuthenticated && (
+          <button 
+            className={styles.ctaButton}
+            onClick={() => navigate('/signup')}
+          >
+            Get Started Free
+          </button>
+        )}
+      </section>
+
+      <section className={styles.features}>
+        <div className={styles.featureCard}>
+          <h3 className={styles.featureTitle}>Intuitive Interface</h3>
+          <p className={styles.featureDescription}>
+            Drag and drop nodes, create connections, and organize your ideas with ease.
+          </p>
+        </div>
+        <div className={styles.featureCard}>
+          <h3 className={styles.featureTitle}>Real-time Collaboration</h3>
+          <p className={styles.featureDescription}>
+            Work together with your team in real-time, share your mind maps, and get instant feedback.
+          </p>
+        </div>
+        <div className={styles.featureCard}>
+          <h3 className={styles.featureTitle}>Cloud Storage</h3>
+          <p className={styles.featureDescription}>
+            Access your mind maps from anywhere, anytime. Your work is automatically saved and synced.
+          </p>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default LandingPage; 

frontend/src/components/MindMapEditor.module.css

@@ -0,0 +1,460 @@
+.flowContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.errorToast {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  padding: 1rem;
+  background-color: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+  border-radius: 4px;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  animation: slideIn 0.3s ease-out;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.errorToast button {
+  background: none;
+  border: none;
+  color: #721c24;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 0.5rem;
+  transition: color 0.2s ease;
+}
+
+.errorToast button:hover {
+  color: #dc3545;
+}
+
+.errorToast button:focus {
+  outline: 2px solid #dc3545;
+  outline-offset: 2px;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.editOverlay {
+  position: absolute;
+  z-index: 1000;
+  background-color: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.editInput {
+  padding: 0.5rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  font-size: 1rem;
+  width: 200px;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.editInput:focus {
+  border-color: #4299e1;
+  box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.2);
+}
+
+.actionButton {
+  padding: 8px 16px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background-color 0.2s ease, transform 0.1s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100px;
+}
+
+.actionButton:hover {
+  background-color: #0056b3;
+  transform: translateY(-1px);
+}
+
+.actionButton:active {
+  transform: translateY(0);
+}
+
+.actionButton:focus {
+  outline: 2px solid #0056b3;
+  outline-offset: 2px;
+}
+
+.actionButton:disabled {
+  background-color: #6c757d;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.actionButton.saving {
+  background-color: #6c757d;
+  cursor: wait;
+}
+
+.actionButton.dirty {
+  background-color: #28a745;
+}
+
+.actionButton.dirty:hover {
+  background-color: #218838;
+}
+
+/* Loading state styles */
+.loading {
+  position: relative;
+  pointer-events: none;
+}
+
+.loading::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+/* Accessibility focus styles */
+:focus-visible {
+  outline: 2px solid #007bff;
+  outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (forced-colors: active) {
+  .actionButton {
+    border: 2px solid currentColor;
+  }
+  
+  .errorToast {
+    border: 2px solid currentColor;
+  }
+  
+  .editInput {
+    border: 2px solid currentColor;
+  }
+}
+
+/* Reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .errorToast {
+    animation: none;
+  }
+  
+  .actionButton {
+    transition: none;
+  }
+  
+  .editInput {
+    transition: none;
+  }
+}
+
+.verticalToolbar {
+  position: absolute;
+  top: 24px;
+  right: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 1100;
+  background: rgba(255,255,255,0.55);
+  backdrop-filter: blur(8px);
+  border-radius: 14px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
+  padding: 18px 12px 18px 12px;
+  align-items: stretch;
+  min-width: 120px;
+}
+
+.toolbarDivider {
+  height: 1px;
+  background: #e0e0e0;
+  margin: 10px 0;
+  border: none;
+}
+
+.verticalToolbar .actionButton {
+  width: 100%;
+  margin-bottom: 2px;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.verticalToolbar .actionButton.saving {
+  background-color: #6c757d;
+  cursor: wait;
+}
+
+.verticalToolbar .actionButton.dirty {
+  background-color: #28a745;
+}
+
+.verticalToolbar .actionButton.dirty:hover {
+  background-color: #218838;
+}
+
+.verticalToolbar .toolButton {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto;
+  margin-bottom: 2px;
+  border-radius: 8px;
+  font-size: 1.3rem;
+  background: #f7fafc;
+  color: #222;
+  border: 1px solid #e0e0e0;
+}
+
+.verticalToolbar .toolButton:hover {
+  background: #eaf4ff;
+  color: #007bff;
+  border-color: #007bff;
+}
+
+.verticalToolbar .toolButton:active {
+  background: #d0e7ff;
+  color: #0056b3;
+}
+
+.mindMapHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1.5rem 0.5rem 1rem;
+  background: rgba(255,255,255,0.45);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+  z-index: 1050;
+  position: relative;
+}
+
+.titleInput {
+  font-size: 1.25rem;
+  font-weight: 600;
+  padding: 0.5rem;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 4px;
+  background-color: #fff;
+  color: #222;
+  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
+  min-width: 220px;
+}
+
+.titleInput:focus {
+  outline: none;
+  border-color: var(--primary-color, #007bff);
+}
+
+.colorControls {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.colorButton {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 4px;
+  background-color: #fff;
+  color: #222;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.colorButton:hover {
+  background-color: #f0f4fa;
+}
+
+.colorButton.active {
+  background-color: #eaf4ff;
+}
+
+.colorPicker {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 0.5rem;
+  padding: 1rem;
+  background-color: #fff;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  min-width: 300px;
+  animation: slideDown 0.2s ease-out;
+}
+
+.colorPresets {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.colorPreset {
+  width: 100%;
+  aspect-ratio: 1;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: transform 0.15s, border-color 0.15s;
+}
+
+.colorPreset:hover {
+  transform: scale(1.05);
+}
+
+.colorPreset.selected {
+  border-color: var(--primary-color, #007bff);
+  transform: scale(1.05);
+}
+
+.customColors {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.colorControl {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.colorInputWrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.colorInput {
+  width: 50px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.colorValue {
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+
+.colorPickerToolbar {
+  position: absolute;
+  top: 60px;
+  right: 110%;
+  margin-right: 12px;
+  padding: 1rem;
+  background-color: #fff;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  z-index: 2000;
+  min-width: 300px;
+  animation: slideDown 0.2s ease-out;
+}
+
+.nodeLabelInput {
+  width: 100%;
+  padding: 8px 10px;
+  font-size: 1rem;
+  border: 1.5px solid #e0e0e0;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  background: #f7fafc;
+  color: #222;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.nodeLabelInput:focus {
+  border-color: #007bff;
+  outline: none;
+  box-shadow: 0 0 0 2px #eaf4ff;
+}
+
+@media (max-width: 700px) {
+  .verticalToolbar {
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    min-width: 0;
+    width: 100vw;
+    border-radius: 0;
+    box-shadow: 0 -2px 12px rgba(0,0,0,0.10);
+    padding: 10px 6px 10px 6px;
+    gap: 8px;
+    z-index: 1200;
+    background: rgba(255,255,255,0.98);
+  }
+  .verticalToolbar .actionButton,
+  .verticalToolbar .toolButton {
+    width: auto;
+    min-width: 20px;
+    margin-bottom: 0;
+    margin-right: 2px;
+    margin-left: 2px;
+  }
+  .toolbarDivider {
+    width: 1px;
+    height: 16px;
+    margin: 0 8px;
+    /* background: #e0e0e0; */
+    border: none;
+  }
+  .colorPickerToolbar {
+    position: fixed;
+    bottom: 60px;
+    right: 16px;
+    left: auto;
+    top: auto;
+    margin: 0;
+    z-index: 2001;
+    min-width: 90vw;
+    max-width: 98vw;
+  }
+} 

frontend/src/components/MindMapEditor.tsx

@@ -0,0 +1,801 @@
+import React, { useCallback, useState, useRef, useEffect, useMemo } from 'react';
+import ReactFlow, {
+  Node,
+  Edge,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  Connection,
+  Panel,
+  NodeMouseHandler,
+  ReactFlowInstance,
+  MiniMap,
+  NodeTypes,
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import axios from '../utils/axios';
+import SidePane from './SidePane';
+import { v4 as uuidv4 } from 'uuid';
+import EditableColorNode from './EditableColorNode';
+import { saveMindMapToJSON, loadMindMapFromJSON, MindMapData } from '../utils/jsonUtils';
+import styles from './MindMapEditor.module.css';
+import * as MdIcons from 'react-icons/md';
+import ChatModal from './ChatModal';
+
+// Types
+interface NodeData {
+  label: string;
+  bgColor: string;
+  textColor: string;
+  onChange: (nodeId: string, data: Partial<NodeData>) => void;
+}
+
+interface HistoryState {
+  nodes: Node[];
+  edges: Edge[];
+  config: any;
+}
+
+// Constants
+const MAX_HISTORY_SIZE = 50;
+const AUTO_SAVE_DELAY = 1000;
+
+const initialEdges: Edge[] = [];
+
+const FALLBACK_COLOR_CONFIG = { nodeBgColor: '#ffffff', nodeTextColor: '#000000' };
+
+const initialNodesWithHandler: Node[] = [
+  {
+    id: '1',
+    type: 'editableColor',
+    data: { 
+      label: 'Main Idea', 
+      bgColor: FALLBACK_COLOR_CONFIG.nodeBgColor,
+      textColor: FALLBACK_COLOR_CONFIG.nodeTextColor,
+      onChange: () => {} // Will be replaced with actual handler
+    },
+    position: { x: 250, y: 25 },
+  },
+];
+
+const nodeTypes: NodeTypes = {
+  editableColor: EditableColorNode,
+};
+
+// Add color presets
+const COLOR_PRESETS = [
+  { name: 'Default', bg: '#ffffff', text: '#000000' },
+  { name: 'Dark', bg: '#2d3748', text: '#ffffff' },
+  { name: 'Light Blue', bg: '#ebf8ff', text: '#2b6cb0' },
+  { name: 'Warm', bg: '#fffaf0', text: '#744210' },
+  { name: 'Cool', bg: '#f0fff4', text: '#22543d' },
+  { name: 'Modern', bg: '#f7fafc', text: '#1a202c' },
+];
+
+const MindMapEditor = () => {
+  // State declarations
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [currentMindMapId, setCurrentMindMapId] = useState<string | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [mindMapName, setMindMapName] = useState<string>('Untitled Mind Map');
+  const [isSidePaneCollapsed, setIsSidePaneCollapsed] = useState(false);
+  const [isDirty, setIsDirty] = useState(false);
+  const [errorStack, setErrorStack] = useState<string[]>([]);
+  const [history, setHistory] = useState<HistoryState[]>([]);
+  const [future, setFuture] = useState<HistoryState[]>([]);
+  const [config, setConfig] = useState(() => FALLBACK_COLOR_CONFIG);
+  const [saveTimeout, setSaveTimeout] = useState<NodeJS.Timeout | null>(null);
+  const reactFlowWrapper = useRef<HTMLDivElement>(null);
+  const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance | null>(null);
+  const [selectedNode, setSelectedNode] = useState<Node | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState('');
+  const [editPosition, setEditPosition] = useState({ x: 0, y: 0 });
+  const editInputRef = useRef<HTMLInputElement>(null);
+  const [isHistoryEnabled, setIsHistoryEnabled] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const [isChatOpen, setIsChatOpen] = useState(false);
+  const [selectedNodes, setSelectedNodes] = useState<Node[]>([]);
+  const [copiedNodes, setCopiedNodes] = useState<Node[] | null>(null);
+
+  // Refs
+  const errorTimeout = useRef<NodeJS.Timeout | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Node data change handler - Moved before initialNodes
+  const handleNodeDataChange = useCallback((nodeId: string, newData: Partial<NodeData>) => {
+    setNodes((nds) =>
+      nds.map((node) => {
+        if (node.id === nodeId) {
+          return {
+            ...node,
+            data: {
+              ...node.data,
+              ...newData,
+              bgColor: newData.bgColor || config.nodeBgColor,
+              textColor: newData.textColor || config.nodeTextColor,
+            },
+          };
+        }
+        return node;
+      })
+    );
+    setIsDirty(true);
+  }, [setNodes, config]);
+
+  // Memoized initial nodes
+  const initialNodes = useMemo(() => [{
+    id: '1',
+    type: 'editableColor',
+    data: { 
+      label: 'Main Idea', 
+      bgColor: config.nodeBgColor,
+      textColor: config.nodeTextColor,
+      onChange: handleNodeDataChange
+    },
+    position: { x: 250, y: 25 },
+  }], [handleNodeDataChange]);
+
+  // Initialize nodes with handler
+  useEffect(() => {
+    setNodes(initialNodes);
+  }, [initialNodes, setNodes]);
+
+  // History management
+  const pushHistory = useCallback((state: HistoryState) => {
+    setHistory((h) => {
+      const newHistory = [...h, state];
+      if (newHistory.length > MAX_HISTORY_SIZE) {
+        return newHistory.slice(-MAX_HISTORY_SIZE);
+      }
+      return newHistory;
+    });
+    setFuture([]);
+  }, []);
+
+  // Error handling
+  const addError = useCallback((msg: string, details?: string) => {
+    const errorMessage = details ? `${msg}: ${details}` : msg;
+    setErrorStack((stack) => [...stack, errorMessage]);
+  }, []);
+
+  const removeError = useCallback((idx: number) => {
+    setErrorStack((stack) => stack.filter((_, i) => i !== idx));
+  }, []);
+
+  // Auto-save functionality
+  const debouncedAutoSave = useCallback(async () => {
+    if (saveTimeout) {
+      clearTimeout(saveTimeout);
+    }
+
+    const timeout = setTimeout(async () => {
+      if (!isDirty) return;
+
+      setIsSaving(true);
+      try {
+        const data = {
+          nodes,
+          edges,
+          name: mindMapName,
+          config,
+        };
+
+        const apiBase = process.env.REACT_APP_API_URL || '';
+        if (currentMindMapId) {
+          await axios.put(`${apiBase}/api/workflows/${currentMindMapId}`, data);
+        } else {
+          const response = await axios.post(`${apiBase}/api/workflows`, data);
+          setCurrentMindMapId(response.data.id);
+        }
+        setIsDirty(false);
+      } catch (error) {
+        addError('Failed to save mind map', error instanceof Error ? error.message : 'Unknown error');
+      } finally {
+        setIsSaving(false);
+      }
+    }, 1000);
+
+    setSaveTimeout(timeout);
+  }, [isDirty, nodes, edges, mindMapName, config, currentMindMapId, addError]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (saveTimeout) {
+        clearTimeout(saveTimeout);
+      }
+      if (errorTimeout.current) {
+        clearTimeout(errorTimeout.current);
+      }
+    };
+  }, [saveTimeout]);
+
+  // Event handlers
+  const handleConfigChange = useCallback((newConfig: any) => {
+    const currentState = { nodes, edges, config };
+    pushHistory(currentState);
+    setConfig(newConfig);
+    setNodes((nds) => nds.map((node: any) => ({
+      ...node,
+      data: {
+        ...node.data,
+        bgColor: newConfig.nodeBgColor,
+        textColor: newConfig.nodeTextColor,
+      },
+    })));
+    setIsDirty(true);
+  }, [nodes, edges, config, pushHistory, setNodes]);
+
+  const handleNameChange = useCallback(async (newName: string) => {
+    if (newName.trim().length === 0) {
+      addError('Mind map name cannot be empty');
+      return;
+    }
+    setMindMapName(newName);
+    setIsDirty(true);
+  }, [addError]);
+
+  const handleSelectMindMap = useCallback(async (mindMap: any) => {
+    setIsLoading(true);
+    try {
+      setError(null);
+      const loadedConfig = mindMap.config || FALLBACK_COLOR_CONFIG;
+      React.startTransition(() => {
+        setConfig(loadedConfig);
+        setNodes(
+          mindMap.nodes.map((node: any) => ({
+              ...node,
+              type: 'editableColor',
+              data: {
+                ...node.data,
+                onChange: handleNodeDataChange,
+              },
+          }))
+        );
+        setEdges(mindMap.edges);
+        setCurrentMindMapId(mindMap.id);
+        setMindMapName(mindMap.name || 'Untitled Mind Map');
+      });
+    } catch (error) {
+      console.error('Error loading mind map:', error);
+      addError('Failed to load mind map', error instanceof Error ? error.message : 'Unknown error');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [setNodes, setEdges, handleNodeDataChange, addError]);
+
+  const handleNewMindMap = useCallback(() => {
+    setConfig(config || FALLBACK_COLOR_CONFIG);
+    setNodes([
+      {
+        id: '1',
+        type: 'editableColor',
+        data: {
+          label: 'Main Idea',
+          bgColor: (config && config.nodeBgColor) || FALLBACK_COLOR_CONFIG.nodeBgColor,
+          textColor: (config && config.nodeTextColor) || FALLBACK_COLOR_CONFIG.nodeTextColor,
+          onChange: handleNodeDataChange,
+        },
+        position: { x: 250, y: 25 },
+      },
+    ]);
+    setEdges([]);
+    setCurrentMindMapId(null);
+    setMindMapName('Untitled Mind Map');
+    setError(null);
+  }, [setNodes, setEdges, handleNodeDataChange, config]);
+
+  const handleExportJSON = useCallback(() => {
+    try {
+      const mindMapData: MindMapData = {
+        id: currentMindMapId || uuidv4(),
+        name: mindMapName,
+        updatedAt: new Date().toISOString(),
+        nodes,
+        edges,
+        config,
+      };
+      saveMindMapToJSON(mindMapData);
+    } catch (error) {
+      addError('Failed to export mind map', error instanceof Error ? error.message : 'Unknown error');
+    }
+  }, [currentMindMapId, mindMapName, nodes, edges, config, addError]);
+
+  const handleImportJSON = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target?.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const json = JSON.parse(e.target?.result as string);
+        if (json.nodes && json.edges) {
+          const importedNodes = json.nodes.map((node: any) => ({
+            ...node,
+            type: 'editableColor',
+            data: {
+              ...node.data,
+              onChange: handleNodeDataChange,
+              bgColor: node.data?.bgColor || (json.config?.nodeBgColor || FALLBACK_COLOR_CONFIG.nodeBgColor),
+              textColor: node.data?.textColor || (json.config?.nodeTextColor || FALLBACK_COLOR_CONFIG.nodeTextColor),
+            },
+          }));
+          setNodes(importedNodes);
+          setEdges(json.edges);
+        } else {
+          addError('Invalid mind map JSON: Missing nodes or edges');
+        }
+        if (json.config) setConfig(json.config);
+        if (json.name) setMindMapName(json.name);
+      } catch (err) {
+        addError('Invalid mind map JSON', err instanceof Error ? err.message : 'Unknown error');
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  const handleDeleteMindMap = useCallback(async (id: string) => {
+    if (currentMindMapId === id) {
+      // Create a new mind map before deleting the current one
+      const data = {
+        nodes,
+        edges,
+        name: mindMapName,
+        config,
+      };
+      try {
+        const response = await axios.post('/api/workflows', data);
+        setCurrentMindMapId(response.data.id);
+        setIsDirty(false);
+      } catch (error) {
+        console.error('Error creating new mind map:', error);
+        addError('Failed to create new mind map');
+      }
+    }
+  }, [currentMindMapId, nodes, edges, mindMapName, config, addError]);
+
+  // Effects
+  useEffect(() => {
+    if (isDirty) {
+      debouncedAutoSave();
+    }
+  }, [isDirty, debouncedAutoSave]);
+
+  useEffect(() => {
+    if (errorStack.length > 0) {
+      const timeout = setTimeout(() => removeError(0), 3000);
+      return () => clearTimeout(timeout);
+    }
+  }, [errorStack, removeError]);
+
+  useEffect(() => {
+    return () => {
+      if (saveTimeout) {
+        clearTimeout(saveTimeout);
+      }
+    };
+  }, [saveTimeout]);
+
+  const onConnect = useCallback(
+    (params: Connection) => {
+      setEdges((eds) => addEdge(params, eds));
+    },
+    [setEdges]
+  );
+
+  const onAddNode = useCallback(() => {
+    pushHistory({ nodes, edges, config });
+    const newNode: Node = {
+      id: uuidv4(),
+      type: 'editableColor',
+      data: { label: `Node ${nodes.length + 1}`, bgColor: config.nodeBgColor, textColor: config.nodeTextColor, onChange: handleNodeDataChange },
+      position: {
+        x: Math.random() * 500,
+        y: Math.random() * 500,
+      },
+    };
+    setNodes((nds) => [...nds, newNode]);
+    setIsDirty(true);
+  }, [nodes.length, setNodes, handleNodeDataChange, config, pushHistory]);
+
+  const undo = useCallback(() => {
+    if (history.length > 0) {
+      setFuture((f) => [ { nodes, edges, config }, ...f ]);
+      const prev = history[history.length - 1];
+      setNodes(prev.nodes);
+      setEdges(prev.edges);
+      setConfig(prev.config);
+      setHistory((h) => h.slice(0, -1));
+    }
+  }, [history, nodes, edges, config, setNodes, setEdges, setConfig]);
+
+  const redo = useCallback(() => {
+    if (future.length > 0) {
+      setHistory((h) => [...h, { nodes, edges, config }]);
+      const next = future[0];
+      setNodes(next.nodes);
+      setEdges(next.edges);
+      setConfig(next.config);
+      setFuture((f) => f.slice(1));
+    }
+  }, [future, nodes, edges, config, setNodes, setEdges, setConfig]);
+
+  const zoomIn = useCallback(() => {
+    reactFlowInstance?.zoomIn();
+  }, [reactFlowInstance]);
+
+  const zoomOut = useCallback(() => {
+    reactFlowInstance?.zoomOut();
+  }, [reactFlowInstance]);
+
+  const centerView = useCallback(() => {
+    reactFlowInstance?.fitView();
+  }, [reactFlowInstance]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+        e.preventDefault();
+        undo();
+      } else if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.shiftKey && e.key === 'z'))) {
+        e.preventDefault();
+        redo();
+      } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'c') {
+        // Copy selected nodes and their connecting edges
+        if (selectedNodes.length > 0) {
+          const selectedIds = selectedNodes.map(n => n.id);
+          const copied = selectedNodes.map(n => ({ ...n, position: { ...n.position } }));
+          const copiedEdges = edges.filter(e => selectedIds.includes(e.source) && selectedIds.includes(e.target));
+          setCopiedNodes(copied);
+          // Store copied edges in a ref for pasting
+          (window as any)._copiedEdges = copiedEdges;
+        }
+        e.preventDefault();
+      } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v') {
+        // Paste nodes and edges
+        if (copiedNodes && copiedNodes.length > 0) {
+          const idMap: Record<string, string> = {};
+          const newNodes = copiedNodes.map(n => {
+            const newId = uuidv4();
+            idMap[n.id] = newId;
+            return {
+              ...n,
+              id: newId,
+              position: { x: n.position.x + 40, y: n.position.y + 40 },
+              data: { ...n.data, label: n.data.label + ' (copy)', onChange: handleNodeDataChange },
+            };
+          });
+          // Paste only edges between copied nodes
+          const copiedEdges = (window as any)._copiedEdges || [];
+          const newEdges = copiedEdges.map((e: Edge) => ({
+            ...e,
+            id: uuidv4(),
+            source: idMap[e.source],
+            target: idMap[e.target],
+          }));
+          setNodes(nds => [...nds, ...newNodes]);
+          setEdges(eds => [...eds, ...newEdges]);
+          setSelectedNodes(newNodes);
+          setIsDirty(true);
+        }
+        e.preventDefault();
+      } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a') {
+        setSelectedNodes(nodes);
+        e.preventDefault();
+      } else if ((e.key === 'Delete' || e.key === 'Backspace') && selectedNodes.length > 0) {
+        const idsToDelete = selectedNodes.map(n => n.id);
+        setNodes(nds => nds.filter(n => !idsToDelete.includes(n.id)));
+        setEdges(eds => eds.filter(e => !idsToDelete.includes(e.source) && !idsToDelete.includes(e.target)));
+        setSelectedNodes([]);
+        setSelectedNode(null);
+        setIsDirty(true);
+        e.preventDefault();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [undo, redo, selectedNodes, copiedNodes, nodes, edges, setNodes, setEdges, handleNodeDataChange]);
+
+  // Warn before leaving with unsaved changes
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (isDirty) {
+        e.preventDefault();
+        e.returnValue = '';
+      }
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, [isDirty]);
+
+  // Auto-dismiss error
+  useEffect(() => {
+    if (error) {
+      if (errorTimeout.current) clearTimeout(errorTimeout.current);
+      errorTimeout.current = setTimeout(() => setError(null), 3000);
+    }
+    return () => {
+      if (errorTimeout.current) clearTimeout(errorTimeout.current);
+    };
+  }, [error]);
+
+  // Add missing handlers
+  const handleNodeClick: NodeMouseHandler = useCallback((event, node) => {
+    if (event.ctrlKey || event.metaKey) {
+      setSelectedNodes((prev) => {
+        if (prev.find((n) => n.id === node.id)) {
+          return prev.filter((n) => n.id !== node.id);
+        } else {
+          return [...prev, node];
+        }
+      });
+    } else {
+      setSelectedNodes([node]);
+    }
+    setSelectedNode(node);
+  }, []);
+
+  const handlePaneClick = useCallback(() => {
+    setSelectedNode(null);
+    setSelectedNodes([]);
+  }, []);
+
+  const handleNodeDragStop: NodeMouseHandler = useCallback((_, node) => {
+    setNodes((nds) =>
+      nds.map((n) => {
+        if (n.id === node.id) {
+          return {
+            ...n,
+            position: node.position,
+          };
+        }
+        return n;
+      })
+    );
+    setIsDirty(true);
+  }, [setNodes]);
+
+  const handleNodeDoubleClick: NodeMouseHandler = useCallback((_, node) => {
+    setSelectedNode(node);
+  }, []);
+
+  // Add handlePresetSelect
+  const handlePresetSelect = (preset: { name: string; bg: string; text: string }) => {
+    handleConfigChange({ ...config, nodeBgColor: preset.bg, nodeTextColor: preset.text });
+    setShowColorPicker(false);
+  };
+
+  return (
+    <div style={{ width: '100vw', height: '100vh', display: 'flex', flexDirection: 'row' }}>
+      <div style={{
+        width: isSidePaneCollapsed ? '64px' : '260px',
+        minWidth: isSidePaneCollapsed ? '64px' : '260px',
+        maxWidth: isSidePaneCollapsed ? '64px' : '260px',
+        transition: 'width 0.3s cubic-bezier(0.4,0,0.2,1)',
+        height: '100%',
+        zIndex: 1000,
+      }}>
+        <SidePane
+          onSelectMindMap={handleSelectMindMap}
+          onNewMindMap={handleNewMindMap}
+          isCollapsed={isSidePaneCollapsed}
+          setIsCollapsed={setIsSidePaneCollapsed}
+          onDeleteMindMap={handleDeleteMindMap}
+        />
+      </div>
+      <div
+        style={{
+          flexGrow: 1,
+          minWidth: 0,
+          height: '100%',
+          overflow: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+          position: 'relative',
+        }}
+      >
+        <div className={styles.mindMapHeader}>
+          <input
+            type="text"
+            value={mindMapName}
+            onChange={e => handleNameChange(e.target.value)}
+            className={styles.titleInput}
+            placeholder="Untitled Mind Map"
+            aria-label="Mind Map Title"
+          />
+        </div>
+        <div className={styles.verticalToolbar}>
+          {selectedNode && (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 8 }}>
+              <label style={{ fontSize: 12 }}>Node Background:</label>
+              <input
+                type="color"
+                value={selectedNode.data.bgColor}
+                onChange={e => handleNodeDataChange(selectedNode.id, { bgColor: e.target.value })}
+                aria-label="Node background color"
+                title="Node background color"
+                style={{ width: 32, height: 24, border: 'none', background: 'none' }}
+              />
+              <label style={{ fontSize: 12 }}>Node Text:</label>
+              <input
+                type="color"
+                value={selectedNode.data.textColor}
+                onChange={e => handleNodeDataChange(selectedNode.id, { textColor: e.target.value })}
+                aria-label="Node text color"
+                title="Node text color"
+                style={{ width: 32, height: 24, border: 'none', background: 'none' }}
+              />
+            </div>
+          )}
+          <button
+            onClick={onAddNode}
+            className={styles.toolButton}
+            title="Add Node"
+            aria-label="Add Node"
+          >
+            <MdIcons.MdAdd />
+          </button>
+          <button
+            onClick={debouncedAutoSave}
+            disabled={isSaving || !isDirty}
+            className={`${styles.toolButton} ${isSaving ? styles.saving : isDirty ? styles.dirty : ''}`}
+            title={isSaving ? 'Saving changes' : isDirty ? 'Save changes' : 'No changes to save'}
+            aria-label={isSaving ? 'Saving changes' : isDirty ? 'Save changes' : 'No changes to save'}
+          >
+            {isSaving ? <MdIcons.MdOutlineSaveAlt /> : isDirty ? <MdIcons.MdOutlineSaveAlt /> : <MdIcons.MdOutlineSave />}
+          </button>
+          <hr className={styles.toolbarDivider} />
+          <button
+            className={styles.toolButton}
+            onClick={() => setShowColorPicker(!showColorPicker)}
+            aria-label="Toggle color picker"
+            aria-expanded={showColorPicker}
+            aria-controls="color-picker"
+            title="Change mind map colors"
+          >
+            <MdIcons.MdColorLens />
+          </button>
+          {showColorPicker && (
+            <div
+              id="color-picker"
+              className={styles.colorPickerToolbar}
+              role="dialog"
+              aria-label="Color picker"
+            >
+              <div className={styles.colorPresets}>
+                {COLOR_PRESETS.map((preset) => (
+                  <button
+                    key={preset.name}
+                    className={styles.colorPreset}
+                    onClick={() => handlePresetSelect(preset)}
+                    style={{
+                      background: `linear-gradient(45deg, ${preset.bg} 50%, ${preset.text} 50%)`,
+                    }}
+                    title={preset.name}
+                    aria-label={`Select ${preset.name} color preset`}
+                  />
+                ))}
+              </div>
+              <div className={styles.customColors}>
+                <div className={styles.colorControl}>
+                  <label htmlFor="bgColor">Background:</label>
+                  <div className={styles.colorInputWrapper}>
+                    <input
+                      type="color"
+                      id="bgColor"
+                      value={config.nodeBgColor}
+                      onChange={e => handleConfigChange({ ...config, nodeBgColor: e.target.value })}
+                      className={styles.colorInput}
+                      title="Choose background color"
+                      aria-label="Background Color"
+                    />
+                    <span className={styles.colorValue}>{config.nodeBgColor}</span>
+                  </div>
+                </div>
+                <div className={styles.colorControl}>
+                  <label htmlFor="textColor">Text:</label>
+                  <div className={styles.colorInputWrapper}>
+                    <input
+                      type="color"
+                      id="textColor"
+                      value={config.nodeTextColor}
+                      onChange={e => handleConfigChange({ ...config, nodeTextColor: e.target.value })}
+                      className={styles.colorInput}
+                      title="Choose text color"
+                      aria-label="Text Color"
+                    />
+                    <span className={styles.colorValue}>{config.nodeTextColor}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          <button
+            className={styles.toolButton}
+            onClick={() => setIsChatOpen(true)}
+            title="Open Mind Map Chat Assistant"
+            aria-label="Open Mind Map Chat Assistant"
+          >
+            <MdIcons.MdChatBubbleOutline />
+          </button>
+          <button onClick={undo} className={styles.toolButton} title="Undo" aria-label="Undo"><MdIcons.MdUndo /></button>
+          <button onClick={redo} className={styles.toolButton} title="Redo" aria-label="Redo"><MdIcons.MdRedo /></button>
+          <button onClick={zoomIn} className={styles.toolButton} title="Zoom In" aria-label="Zoom In"><MdIcons.MdZoomIn /></button>
+          <button onClick={zoomOut} className={styles.toolButton} title="Zoom Out" aria-label="Zoom Out"><MdIcons.MdZoomOut /></button>
+          <button onClick={centerView} className={styles.toolButton} title="Center View" aria-label="Center View"><MdIcons.MdCenterFocusStrong /></button>
+          <button
+            onClick={handleExportJSON}
+            className={`${styles.toolButton} ${isDirty ? styles.dirty : ''}`}
+            title={isDirty ? "Save Changes" : "All Changes Saved"}
+            aria-label={isDirty ? "Save Changes" : "All Changes Saved"}
+          >
+            <MdIcons.MdOutlineSaveAlt />
+          </button>
+          <button onClick={() => fileInputRef.current?.click()} className={styles.toolButton} title="Import from JSON" aria-label="Import from JSON"><MdIcons.MdFileUpload /></button>
+        </div>
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleImportJSON}
+          accept=".json"
+          style={{ display: 'none' }}
+          aria-label="Import mind map"
+        />
+        {errorStack.map((err, idx) => (
+          <div key={idx} className={styles.errorToast} role="alert">
+            {err}
+            <button 
+              aria-label="Close error" 
+              onClick={() => removeError(idx)} 
+              tabIndex={0}
+              className={styles.errorCloseButton}
+            >
+              &times;
+            </button>
+          </div>
+        ))}
+        <div style={{ flexGrow: 1, minHeight: 0 }}>
+          <div className={styles.flowContainer} ref={reactFlowWrapper}>
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              onConnect={onConnect}
+              onInit={setReactFlowInstance}
+              onNodeClick={handleNodeClick}
+              onPaneClick={handlePaneClick}
+              onNodeDragStop={handleNodeDragStop}
+              onNodeDoubleClick={handleNodeDoubleClick}
+              nodeTypes={nodeTypes}
+              fitView
+              attributionPosition="bottom-right"
+            >
+              <Background />
+              <Controls />
+              <MiniMap />
+            </ReactFlow>
+          </div>
+        </div>
+      </div>
+      <ChatModal 
+        open={isChatOpen} 
+        onClose={() => setIsChatOpen(false)} 
+        onImportJSON={handleImportJSON}
+        currentMindMapData={{
+          nodes,
+          edges,
+          config,
+          mindMapName
+        }}
+      />
+    </div>
+  );
+};
+
+export default MindMapEditor; 

frontend/src/components/MindMapItem.module.css

@@ -0,0 +1,159 @@
+.mindMapItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 22px;
+  margin: 10px 0;
+  border-radius: 14px;
+  cursor: pointer;
+  background: #fff;
+  border: 1.5px solid #e0e0e0;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  position: relative;
+  transition: box-shadow 0.2s, background 0.2s, transform 0.15s;
+}
+
+.mindMapItem:hover {
+  background: #f5faff;
+  box-shadow: 0 4px 16px rgba(0,123,255,0.08);
+  transform: translateY(-2px) scale(1.01);
+}
+
+.mindMapItem.active {
+  background: #eaf4ff;
+  border-left: 4px solid #007bff;
+  box-shadow: 0 6px 24px rgba(0,123,255,0.10);
+}
+
+.mindMapInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.mindMapName {
+  font-weight: 700;
+  color: #1a2947;
+  font-size: 1.08rem;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mindMapDate {
+  font-size: 0.9rem;
+  color: #7a8ca3;
+  font-weight: 400;
+}
+
+.menuContainer {
+  position: relative;
+  margin-left: 12px;
+}
+
+.menuButton {
+  background: none;
+  border: none;
+  padding: 6px;
+  cursor: pointer;
+  color: #7a8ca3;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
+  box-shadow: none;
+}
+
+.menuButton:focus {
+  outline: 2px solid #007bff;
+  outline-offset: 2px;
+}
+
+.menuButton:hover {
+  background: #eaf4ff;
+  color: #007bff;
+  box-shadow: 0 2px 8px rgba(0,123,255,0.08);
+}
+
+.menu {
+  position: absolute;
+  right: 0;
+  top: 110%;
+  margin-top: 6px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 1.5px 4px rgba(0,0,0,0.08);
+  min-width: 180px;
+  z-index: 2000;
+  animation: menuFadeIn 0.18s cubic-bezier(0.4,0,0.2,1);
+  transition: box-shadow 0.2s, transform 0.2s;
+  will-change: transform, box-shadow;
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 18px;
+  width: 100%;
+  border: none;
+  background: none;
+  color: #1a2947;
+  cursor: pointer;
+  font-size: 1rem;
+  border-radius: 6px;
+  transition: background 0.18s, color 0.18s;
+}
+
+.menuItem:focus, .menuItem:hover {
+  background: #eaf4ff;
+  color: #007bff;
+  outline: none;
+}
+
+.menuItem.delete {
+  color: #dc3545;
+}
+
+.menuItem.delete:hover {
+  background: #fff0f3;
+  color: #dc3545;
+}
+
+.renameForm {
+  width: 100%;
+}
+
+.renameInput {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1.5px solid #007bff;
+  border-radius: 6px;
+  font-size: 1rem;
+  color: #1a2947;
+  background: white;
+  transition: box-shadow 0.18s, border 0.18s;
+}
+
+.renameInput:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.18);
+  border-color: #0056b3;
+}
+
+@keyframes menuFadeIn {
+  from { opacity: 0; transform: translateY(-8px) scale(0.98);}
+  to { opacity: 1; transform: translateY(0) scale(1);}
+}
+
+/*
+For accessibility, add in your React code:
+- role="menu" to .menu
+- role="menuitem" to .menuItem
+- Keyboard navigation (arrow keys, esc to close) in JS/TS
+- Focus trap when menu is open
+*/ 

frontend/src/components/MindMapItem.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useRef, useEffect } from 'react';
+import styles from './MindMapItem.module.css';
+
+interface MindMapItemProps {
+  id: string;
+  name: string;
+  updatedAt: string;
+  onSelect: () => void;
+  onDelete: () => void;
+  onRename: (newName: string) => void;
+  onShare: () => void;
+  isActive: boolean;
+}
+
+const MindMapItem: React.FC<MindMapItemProps> = ({
+  id,
+  name,
+  updatedAt,
+  onSelect,
+  onDelete,
+  onRename,
+  onShare,
+  isActive,
+}) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedName, setEditedName] = useState(name);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsMenuOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  const handleMenuClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  const handleRename = () => {
+    setIsEditing(true);
+    setIsMenuOpen(false);
+  };
+
+  const handleRenameSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (editedName.trim()) {
+      onRename(editedName.trim());
+    }
+    setIsEditing(false);
+  };
+
+  const handleDelete = () => {
+    setIsMenuOpen(false);
+    onDelete();
+  };
+
+  const handleShare = () => {
+    setIsMenuOpen(false);
+    onShare();
+  };
+
+  return (
+    <div className={`${styles.mindMapItem} ${isActive ? styles.active : ''}`} onClick={onSelect} style={{ position: 'relative' }}>
+      <div className={styles.mindMapInfo}>
+        <span className={styles.mindMapName}>{name}</span>
+        <span className={styles.mindMapDate}>
+          {new Date(updatedAt).toLocaleDateString()}
+        </span>
+      </div>
+      <div className={styles.verticalToolbar}>
+        {isEditing ? (
+          <form onSubmit={handleRenameSubmit} style={{ width: '100%' }}>
+            <input
+              ref={inputRef}
+              type="text"
+              value={editedName}
+              onChange={(e) => setEditedName(e.target.value)}
+              onBlur={handleRenameSubmit}
+              className={styles.renameInput}
+              placeholder="Rename mind map"
+              style={{ marginBottom: 8 }}
+            />
+          </form>
+        ) : null}
+        <button onClick={handleRename} className={styles.toolbarButton} aria-label="Rename mind map">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" /></svg>
+        </button>
+        <button onClick={handleShare} className={styles.toolbarButton} aria-label="Share mind map">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><line x1="8.59" y1="13.51" x2="15.42" y2="17.49" /><line x1="15.41" y1="6.51" x2="8.59" y2="10.49" /></svg>
+        </button>
+        <button onClick={handleDelete} className={`${styles.toolbarButton} ${styles.delete}`} aria-label="Delete mind map">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default MindMapItem; 

frontend/src/components/MindMapList.module.css

@@ -0,0 +1,227 @@
+.mindMapList {
+  padding: 20px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  background: transparent;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #1a2947;
+  margin: 0;
+}
+
+.newButton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  transition: background 0.2s, transform 0.2s;
+}
+
+.newButton:hover {
+  background: #0056b3;
+  transform: translateY(-2px) scale(1.03);
+}
+
+.newButton svg {
+  width: 16px;
+  height: 16px;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  overflow-y: auto;
+  max-height: calc(100vh - 180px);
+  padding-right: 8px;
+}
+
+.list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.list::-webkit-scrollbar-thumb {
+  background: #e0e0e0;
+  border-radius: 20px;
+}
+
+.empty, .loading, .error {
+  text-align: center;
+  padding: 28px 0;
+  font-size: 1rem;
+  border-radius: 8px;
+  margin: 0 10px;
+}
+
+.empty {
+  color: #7a8ca3;
+  background: #f8f9fa;
+  border: 1px dashed #e0e0e0;
+}
+
+.loading {
+  color: #007bff;
+  background: #eaf4ff;
+}
+
+.error {
+  color: #dc3545;
+  background: #fff0f3;
+  border: 1px solid #ffd6db;
+}
+
+.mindMapListTitle {
+  padding: 0 20px;
+  margin: 10px 0;
+  font-size: 14px;
+  color: #6c757d;
+  font-weight: 500;
+}
+
+.mindMapItem {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  color: #2c3e50;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.mindMapItem:hover {
+  background-color: #f8f9fa;
+}
+
+.mindMapItem.active {
+  background-color: #e9ecef;
+  border-left: 3px solid #007bff;
+}
+
+.mindMapIcon {
+  width: 20px;
+  height: 20px;
+  margin-right: 12px;
+  color: #6c757d;
+  flex-shrink: 0;
+}
+
+.mindMapInfo {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.mindMapName {
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 4px;
+}
+
+.mindMapDate {
+  font-size: 12px;
+  color: #6c757d;
+  display: flex;
+}
+
+.collapsed .mindMapListTitle,
+.collapsed .mindMapName,
+.collapsed .mindMapDate {
+  display: none;
+}
+
+.collapsed .mindMapItem {
+  padding: 12px;
+  justify-content: center;
+  display: flex;
+}
+
+.collapsed .mindMapIcon {
+  margin-right: 0;
+}
+
+.newMindMapButton {
+  margin: 10px 20px;
+  padding: 8px 16px;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+.newMindMapButton:hover {
+  background: #0056b3;
+}
+
+.newMindMapButton .icon {
+  margin-right: 8px;
+}
+
+.collapsed .newMindMapButton {
+  margin: 10px;
+  padding: 8px;
+}
+
+.collapsed .newMindMapButton span {
+  display: none;
+}
+
+.retryButton {
+  margin: 10px 20px;
+  padding: 8px 16px;
+  background: #6c757d;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+.retryButton:hover {
+  background: #5a6268;
+}
+
+@media (max-width: 600px) {
+  .mindMapList {
+    padding: 10px 0;
+  }
+  .header {
+    flex-direction: column;
+    gap: 8px;
+  }
+  .list {
+    max-height: 60vh;
+  }
+} 

frontend/src/components/MindMapList.tsx

@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react';
+import axios from '../utils/axios';
+import { MindMapData } from '../utils/jsonUtils';
+import styles from './MindMapList.module.css';
+import MindMapItem from './MindMapItem';
+
+interface MindMap {
+  id: string;
+  name: string;
+  updatedAt: string;
+  nodes: any[];
+  edges: any[];
+}
+
+interface MindMapListProps {
+  isCollapsed: boolean;
+  onSelectMindMap: (mindMap: MindMapData) => void;
+  onNewMindMap: () => void;
+  onDeleteMindMap: (id: string) => void;
+}
+
+const MindMapList: React.FC<MindMapListProps> = ({
+  isCollapsed,
+  onSelectMindMap,
+  onNewMindMap,
+  onDeleteMindMap,
+}) => {
+  const [mindMaps, setMindMaps] = useState<MindMapData[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchMindMaps = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await axios.get('/api/workflows');
+      setMindMaps(res.data);
+    } catch (err: any) {
+      setError('Failed to load mind maps');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchMindMaps();
+  }, []);
+
+  const handleDelete = async (id: string) => {
+    try {
+      await axios.delete(`/api/workflows/${id}`);
+      await fetchMindMaps();
+      if (selectedId === id) setSelectedId(null);
+      onDeleteMindMap(id);
+    } catch {
+      setError('Failed to delete mind map');
+    }
+  };
+
+  const handleRename = async (id: string, newName: string) => {
+    try {
+      await axios.put(`/api/workflows/${id}`, { name: newName });
+      await fetchMindMaps();
+    } catch {
+      setError('Failed to rename mind map');
+    }
+  };
+
+  return (
+    <div className={styles.mindMapList}>
+      <div className={styles.header}>
+        <h3 className={styles.title}>Your Mind Maps</h3>
+        <button
+          onClick={onNewMindMap}
+          className={styles.newButton}
+          title="Create new mind map"
+        >
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{ marginRight: isCollapsed ? 0 : 4 }}
+          >
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="16" />
+            <line x1="8" y1="12" x2="16" y2="12" />
+          </svg>
+          {!isCollapsed && <span>New</span>}
+        </button>
+      </div>
+      <div className={styles.list}>
+        {loading && <div className={styles.loading}>Loading...</div>}
+        {error && <div className={styles.error}>{error}</div>}
+        {!loading && !error && mindMaps.length === 0 && (
+          <div className={styles.empty}>No mind maps found.</div>
+        )}
+        {!loading && !error && mindMaps.map((mindMap) => (
+          <MindMapItem
+            key={mindMap.id}
+            id={mindMap.id}
+            name={mindMap.name}
+            updatedAt={mindMap.updatedAt}
+            isActive={selectedId === mindMap.id}
+            onSelect={() => {
+              setSelectedId(mindMap.id);
+              onSelectMindMap(mindMap);
+            }}
+            onDelete={() => handleDelete(mindMap.id)}
+            onRename={(newName) => handleRename(mindMap.id, newName)}
+            onShare={() => {}}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MindMapList; 

frontend/src/components/SidePane.module.css

@@ -0,0 +1,160 @@
+.sidePane {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid rgba(0, 0, 0, 0.05);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.expanded {
+  width: 260px;
+}
+
+.collapsed {
+  width: 70px;
+}
+
+.toggleButton {
+  position: absolute;
+  right: -12px;
+  top: 20px;
+  width: 28px;
+  height: 28px;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  z-index: 1001;
+  transition: background 0.2s, transform 0.2s;
+}
+
+.toggleButton:hover {
+  background: #f0f4fa;
+  transform: scale(1.08);
+}
+
+.menuItems {
+  padding: 24px 0 0 0;
+  flex-grow: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  color: #2c3e50;
+  text-decoration: none;
+  border-radius: 0 12px 12px 0;
+  margin-right: 12px;
+  transition: background 0.2s, color 0.2s;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.menuItem:hover {
+  background: #f0f4fa;
+  color: #007bff;
+}
+
+.menuItem.active {
+  background: #eaf4ff;
+  color: #007bff;
+  border-left: 3px solid #007bff;
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+}
+
+.label {
+  white-space: nowrap;
+  overflow: hidden;
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.collapsed .label {
+  display: none;
+}
+
+.logoutButton {
+  margin-top: auto;
+  padding: 20px 16px;
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+}
+
+.logoutButton button {
+  width: 100%;
+  padding: 12px;
+  background: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.12);
+  transition: background 0.2s, transform 0.2s;
+}
+
+.logoutButton button:hover {
+  background: #c82333;
+  transform: translateY(-1px);
+}
+
+.logoutButton.collapsed button {
+  padding: 12px;
+}
+
+.logoutButton.collapsed span {
+  display: none;
+}
+
+@media (max-width: 600px) {
+  .sidePane {
+    width: 100vw !important;
+    min-width: 0;
+    max-width: 100vw;
+    border-radius: 0;
+    left: 0;
+    top: 0;
+    height: 60px;
+    flex-direction: row;
+    align-items: center;
+    border-right: none;
+    border-bottom: 1px solid #e0e0e0;
+  }
+  .expanded, .collapsed {
+    width: 100vw !important;
+  }
+  .menuItems {
+    flex-direction: row;
+    padding: 0 8px;
+    gap: 0;
+  }
+  .logoutButton {
+    padding: 8px;
+    border-top: none;
+    border-left: 1px solid #e0e0e0;
+    margin-top: 0;
+  }
+} 

frontend/src/components/SidePane.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { Node, Edge } from 'reactflow';
+import styles from './SidePane.module.css';
+import MindMapList from './MindMapList';
+import axios from '../utils/axios';
+import { MindMapData } from '../utils/jsonUtils';
+
+// Icons with improved styling
+const HomeIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+    <polyline points="9 22 9 12 15 12 15 22" />
+  </svg>
+);
+
+const MindMapIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 2v20M2 12h20" />
+    <path d="M12 2a10 10 0 0 1 10 10M12 22a10 10 0 0 1-10-10" />
+  </svg>
+);
+
+const LogoutIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+    <polyline points="16 17 21 12 16 7" />
+    <line x1="21" y1="12" x2="9" y2="12" />
+  </svg>
+);
+
+const ChevronIcon = ({ isCollapsed }: { isCollapsed: boolean }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{
+      transform: isCollapsed ? 'rotate(180deg)' : 'rotate(0deg)',
+      transition: 'transform 0.3s ease',
+    }}
+  >
+    <polyline points="15 18 9 12 15 6" />
+  </svg>
+);
+
+interface SidePaneProps {
+  onSelectMindMap: (mindMap: MindMapData) => void;
+  onNewMindMap: () => void;
+  isCollapsed: boolean;
+  setIsCollapsed: (collapsed: boolean) => void;
+  onDeleteMindMap: (id: string) => void;
+}
+
+const SidePane: React.FC<SidePaneProps> = ({ onSelectMindMap, onNewMindMap, isCollapsed, setIsCollapsed, onDeleteMindMap }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isEditor = location.pathname === '/editor';
+
+  const handleLogout = async () => {
+    try {
+      await axios.post('/logout');
+    } catch (error) {
+      // Ignore error, proceed to clear token and redirect
+    }
+    localStorage.removeItem('token');
+    navigate('/');
+  };
+
+  const handleNavigation = (path: string) => (e: React.MouseEvent) => {
+    e.preventDefault();
+    try {
+      navigate(path);
+    } catch (error) {
+      console.error('Navigation error:', error);
+      // Fallback to window.location if navigation fails
+      window.location.href = path;
+    }
+  };
+
+  return (
+    <div className={`${styles.sidePane} ${isCollapsed ? styles.collapsed : styles.expanded}`}>
+      <button
+        className={styles.toggleButton}
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      >
+        <ChevronIcon isCollapsed={isCollapsed} />
+      </button>
+
+      <div className={styles.menuItems}>
+        <a
+          href="/"
+          className={`${styles.menuItem} ${location.pathname === '/' ? styles.active : ''}`}
+          onClick={handleNavigation('/')}
+        >
+          <span className={styles.icon}>
+            <HomeIcon />
+          </span>
+          <span className={styles.label}>Home</span>
+        </a>
+
+        <a
+          href="/editor"
+          className={`${styles.menuItem} ${location.pathname === '/editor' ? styles.active : ''}`}
+          onClick={handleNavigation('/editor')}
+        >
+          <span className={styles.icon}>
+            <MindMapIcon />
+          </span>
+          <span className={styles.label}>Mind Map</span>
+        </a>
+
+        {isEditor && (
+          <MindMapList
+            isCollapsed={isCollapsed}
+            onSelectMindMap={onSelectMindMap}
+            onNewMindMap={onNewMindMap}
+            onDeleteMindMap={onDeleteMindMap}
+          />
+        )}
+      </div>
+
+      <div className={`${styles.logoutButton} ${isCollapsed ? styles.collapsed : ''}`}>
+        <button onClick={handleLogout} aria-label="Logout">
+          <span className={styles.icon}>
+            <LogoutIcon />
+          </span>
+          <span className={styles.label}>Logout</span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SidePane; 

frontend/src/index.css

@@ -0,0 +1,19 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import './App.css';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

frontend/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

frontend/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

frontend/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

frontend/src/utils/apiUtils.ts

@@ -0,0 +1,112 @@
+import axios, { AxiosError } from 'axios';
+
+export interface ApiError {
+  message: string;
+  details?: string;
+  code?: string;
+}
+
+interface ApiErrorResponse {
+  message?: string;
+  error?: string;
+  details?: string;
+}
+
+export const handleApiError = (error: unknown): ApiError => {
+  if (axios.isAxiosError(error)) {
+    const axiosError = error as AxiosError<ApiErrorResponse>;
+    const responseData = axiosError.response?.data;
+    return {
+      message: axiosError.message,
+      details: responseData?.message || responseData?.error || 'Unknown error occurred',
+      code: axiosError.code,
+    };
+  }
+  
+  if (error instanceof Error) {
+    return {
+      message: error.message,
+      details: error.stack,
+    };
+  }
+  
+  return {
+    message: 'An unexpected error occurred',
+    details: String(error),
+  };
+};
+
+export const withRetry = async <T>(
+  operation: () => Promise<T>,
+  maxRetries: number = 3,
+  delay: number = 1000
+): Promise<T> => {
+  let lastError: unknown;
+  
+  for (let i = 0; i < maxRetries; i++) {
+    try {
+      return await operation();
+    } catch (error) {
+      lastError = error;
+      if (i < maxRetries - 1) {
+        await new Promise(resolve => setTimeout(resolve, delay * Math.pow(2, i)));
+      }
+    }
+  }
+  
+  throw lastError;
+};
+
+export const validateInput = (input: string, maxLength: number = 100): boolean => {
+  if (!input || typeof input !== 'string') return false;
+  if (input.trim().length === 0) return false;
+  if (input.length > maxLength) return false;
+  return true;
+};
+
+export const sanitizeInput = (input: string): string => {
+  return input
+    .trim()
+    .replace(/[<>]/g, '') // Remove potential HTML tags
+    .replace(/javascript:/gi, '') // Remove potential JavaScript protocol
+    .slice(0, 100); // Limit length
+};
+
+// Rate limiting utility
+export class RateLimiter {
+  private timestamps: number[] = [];
+  private readonly windowMs: number;
+  private readonly maxRequests: number;
+
+  constructor(windowMs: number = 60000, maxRequests: number = 100) {
+    this.windowMs = windowMs;
+    this.maxRequests = maxRequests;
+  }
+
+  canMakeRequest(): boolean {
+    const now = Date.now();
+    this.timestamps = this.timestamps.filter(time => now - time < this.windowMs);
+    
+    if (this.timestamps.length >= this.maxRequests) {
+      return false;
+    }
+    
+    this.timestamps.push(now);
+    return true;
+  }
+}
+
+// Create a rate limiter instance
+export const rateLimiter = new RateLimiter();
+
+// Wrapper for API calls with rate limiting
+export const rateLimitedApiCall = async <T>(
+  apiCall: () => Promise<T>,
+  retryCount: number = 3
+): Promise<T> => {
+  if (!rateLimiter.canMakeRequest()) {
+    throw new Error('Rate limit exceeded. Please try again later.');
+  }
+  
+  return withRetry(apiCall, retryCount);
+}; 

frontend/src/utils/axios.ts

@@ -0,0 +1,115 @@
+import axios from 'axios';
+import qs from 'qs';
+
+const instance = axios.create({
+  baseURL: process.env.REACT_APP_API_URL || 'http://localhost:8000',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Token refresh mechanism
+let isRefreshing = false;
+let failedQueue: any[] = [];
+
+const processQueue = (error: any, token: string | null = null) => {
+  failedQueue.forEach(prom => {
+    if (error) {
+      prom.reject(error);
+    } else {
+      prom.resolve(token);
+    }
+  });
+  failedQueue = [];
+};
+
+// Add a request interceptor
+instance.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+
+    // Handle form data
+    if (config.data instanceof FormData) {
+      config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+      config.data = qs.stringify(Object.fromEntries(config.data));
+    }
+
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Add a response interceptor
+instance.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        return new Promise((resolve, reject) => {
+          failedQueue.push({ resolve, reject });
+        })
+          .then(token => {
+            originalRequest.headers.Authorization = `Bearer ${token}`;
+            return instance(originalRequest);
+          })
+          .catch(err => Promise.reject(err));
+      }
+
+      originalRequest._retry = true;
+      isRefreshing = true;
+
+      try {
+        const refreshToken = localStorage.getItem('refreshToken');
+        if (!refreshToken) {
+          throw new Error('No refresh token available');
+        }
+
+        const response = await axios.post('/api/auth/refresh', {
+          refresh_token: refreshToken,
+        });
+
+        const { access_token, refresh_token } = response.data;
+        localStorage.setItem('token', access_token);
+        localStorage.setItem('refreshToken', refresh_token);
+
+        instance.defaults.headers.common.Authorization = `Bearer ${access_token}`;
+        processQueue(null, access_token);
+        return instance(originalRequest);
+      } catch (refreshError) {
+        processQueue(refreshError, null);
+        localStorage.removeItem('token');
+        localStorage.removeItem('refreshToken');
+        window.location.href = '/login';
+        return Promise.reject(refreshError);
+      } finally {
+        isRefreshing = false;
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+// Error handling utility
+export const handleApiError = (error: any): string => {
+  if (error.response) {
+    // The request was made and the server responded with a status code
+    // that falls out of the range of 2xx
+    return error.response.data.message || 'An error occurred while processing your request';
+  } else if (error.request) {
+    // The request was made but no response was received
+    return 'No response received from server. Please check your internet connection';
+  } else {
+    // Something happened in setting up the request that triggered an Error
+    return error.message || 'An unexpected error occurred';
+  }
+};
+
+export default instance; 

frontend/src/utils/jsonUtils.ts

@@ -0,0 +1,64 @@
+import { Node, Edge } from 'reactflow';
+
+export interface MindMapConfig {
+  nodeBgColor: string;
+  nodeTextColor: string;
+}
+
+export interface MindMapData {
+  id: string;
+  name: string;
+  updatedAt: string;
+  nodes: Node[];
+  edges: Edge[];
+  config: {
+    nodeBgColor: string;
+    nodeTextColor: string;
+  };
+}
+
+export const saveMindMapToJSON = (data: MindMapData): void => {
+  const jsonString = JSON.stringify(data, null, 2);
+  const blob = new Blob([jsonString], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `${data.name.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.json`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+};
+
+export const loadMindMapFromJSON = async (file: File): Promise<MindMapData> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        const data = JSON.parse(event.target?.result as string) as MindMapData;
+        if (!data.nodes || !data.edges || !data.config) {
+          throw new Error('Invalid mind map data format');
+        }
+        resolve(data);
+      } catch (error) {
+        reject(new Error('Failed to parse mind map data'));
+      }
+    };
+    reader.onerror = () => reject(new Error('Failed to read file'));
+    reader.readAsText(file);
+  });
+};
+
+const validateMindMapData = (data: any): data is MindMapData => {
+  return (
+    typeof data === 'object' &&
+    typeof data.id === 'string' &&
+    typeof data.name === 'string' &&
+    typeof data.updatedAt === 'string' &&
+    Array.isArray(data.nodes) &&
+    Array.isArray(data.edges) &&
+    typeof data.config === 'object' &&
+    typeof data.config.nodeBgColor === 'string' &&
+    typeof data.config.nodeTextColor === 'string'
+  );
+}; 

frontend/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "src"
+  ]
+}

supervisord.conf

@@ -0,0 +1,22 @@
+[supervisord]
+nodaemon=true
+
+[program:flask]
+directory=/home/user/app
+command=flask run --host=0.0.0.0 --port=7860
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stderr_logfile=/dev/stderr
+user=user
+environment=HOME="/home/user",FLASK_APP="main.py",FLASK_ENV="development",PYTHONUNBUFFERED="1"
+
+[program:react]
+directory=/home/user/app/frontend
+command=npm start
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stderr_logfile=/dev/stderr
+user=user
+environment=HOST="0.0.0.0",PORT="3000"