Initial CU Student AI Project Helper: FastAPI, Gemini, Mongo, React SPA

.env.example

@@ -0,0 +1,25 @@
+GEMINI_API_KEY=
+GEMINI_MODEL=gemini-2.0-flash
+
+MONGODB_URL=mongodb://localhost:27017
+MONGODB_DB=cu_student_helper
+
+JWT_SECRET_KEY=change-me-to-a-long-random-string
+JWT_ALGORITHM=HS256
+ACCESS_TOKEN_EXPIRE_MINUTES=10080
+
+CORS_ORIGINS=http://localhost:5173,http://localhost:3000
+
+# Optional Google Sheets (service account JSON path or raw JSON in env)
+# GOOGLE_SERVICE_ACCOUNT_FILE=
+# GOOGLE_SERVICE_ACCOUNT_JSON=
+# GOOGLE_SPREADSHEET_ID=
+# GOOGLE_SHEET_NAME=Submissions
+
+# Optional email on submit
+# ADMIN_NOTIFY_EMAIL=
+# SMTP_HOST=
+# SMTP_PORT=587
+# SMTP_USER=
+# SMTP_PASSWORD=
+# SMTP_FROM=

.gitattributes

@@ -0,0 +1,6 @@
+*.png filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,12 @@
+__pycache__/
+*.py[cod]
+.venv/
+venv/
+.env
+*.egg-info/
+node_modules/
+frontend/dist/
+.idea/
+.vscode/
+.DS_Store
+Thumbs.db

Dockerfile

@@ -0,0 +1,19 @@
+# syntax=docker/dockerfile:1
+FROM node:20-bookworm AS frontend-build
+WORKDIR /app/frontend
+COPY frontend/package.json frontend/package-lock.json* ./
+RUN npm ci
+COPY frontend/ ./
+RUN npm run build
+
+FROM python:3.12-slim-bookworm
+RUN apt-get update && apt-get install -y --no-install-recommends ffmpeg \
+    && rm -rf /var/lib/apt/lists/*
+WORKDIR /app/backend
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY backend/ /app/backend/
+COPY --from=frontend-build /app/frontend/dist /app/frontend/dist
+ENV PYTHONPATH=/app/backend
+EXPOSE 7860
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,78 @@
+# CU-Student-AIProject-Helper
+
+Recruitment and tooling site for **non-technical** CU students joining a Collaborative Conversational AI (CCAI) advisory-panel project: long-form landing page, optional accounts, persona/advisor **forms** and **interactive Gemini chats** (with mic input and read-aloud), and submission hooks for Google Sheets / email.
+
+## Stack
+
+- **Frontend:** React (Vite + TypeScript), React Router
+- **Backend:** FastAPI, Motor (MongoDB), Google Gemini API (`GEMINI_API_KEY`)
+- **Deploy:** Docker (single image: API + static SPA); suitable for Hugging Face Spaces or any container host
+
+## Local development
+
+1. **MongoDB** — install locally or use Docker only for DB:
+
+   ```bash
+   docker compose up mongo
+   ```
+
+2. **Backend** — from repo root:
+
+   ```bash
+   cd backend
+   python -m venv .venv
+   .venv\Scripts\activate   # Windows
+   pip install -r requirements.txt
+   copy ..\.env.example .env   # or copy to repo root; config loads either
+   # Set GEMINI_API_KEY, JWT_SECRET_KEY, MONGODB_URL=mongodb://localhost:27017
+   uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
+   ```
+
+3. **Frontend** — separate terminal:
+
+   ```bash
+   cd frontend
+   npm install
+   npm run dev
+   ```
+
+   Vite proxies `/api` to `http://127.0.0.1:8000`. Open `http://localhost:5173`.
+
+Without a built `frontend/dist`, the API still serves OpenAPI at `/docs`. After `npm run build`, run uvicorn from repo root context so `frontend/dist` exists — or use Docker below.
+
+## Configuration
+
+See [.env.example](.env.example). Important variables:
+
+| Variable | Purpose |
+|----------|---------|
+| `GEMINI_API_KEY` | Required for chat and transcription |
+| `GEMINI_MODEL` | Default `gemini-2.0-flash` |
+| `MONGODB_URL` / `MONGODB_DB` | User accounts and saved drafts |
+| `JWT_SECRET_KEY` | Sign auth tokens |
+| `CORS_ORIGINS` | Frontend origins (dev: `http://localhost:5173`) |
+| `GOOGLE_*` / SMTP | Optional submission pipeline (see `app/routers/submit.py`) |
+
+**Speech:** Mic input is sent to `POST /api/transcribe` (Gemini multimodal). “Read aloud” uses the browser **Web Speech API** (no extra key).
+
+## Docker (full stack)
+
+```bash
+cp .env.example .env
+# Fill GEMINI_API_KEY, JWT_SECRET_KEY, etc.
+docker compose up --build
+```
+
+App: `http://localhost:7860` (API + static UI).
+
+## GitHub
+
+```bash
+git remote add origin https://github.com/YOUR_ORG/CU-Student-AIProject-Helper.git
+git add -A && git commit -m "Initial import"
+git push -u origin main
+```
+
+## License
+
+Project scaffold for educational use; adapt as needed for your program.

backend/app/__init__.py

@@ -0,0 +1 @@
+# CU Student AI Project Helper — backend

backend/app/auth_jwt.py

@@ -0,0 +1,74 @@
+from datetime import datetime, timedelta, timezone
+from typing import Any
+
+from bson import ObjectId
+from fastapi import Depends, HTTPException, status
+from fastapi.security import HTTPAuthorizationCredentials, HTTPBearer
+from jose import JWTError, jwt
+from passlib.context import CryptContext
+
+from app.config import settings
+from app.db import get_database
+from app.schemas import UserPublic
+
+pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
+security = HTTPBearer(auto_error=False)
+
+
+def hash_password(password: str) -> str:
+    return pwd_context.hash(password)
+
+
+def verify_password(plain: str, hashed: str) -> bool:
+    return pwd_context.verify(plain, hashed)
+
+
+def create_access_token(subject: str) -> str:
+    expire = datetime.now(timezone.utc) + timedelta(
+        minutes=settings.access_token_expire_minutes
+    )
+    return jwt.encode(
+        {"sub": subject, "exp": expire},
+        settings.jwt_secret_key,
+        algorithm=settings.jwt_algorithm,
+    )
+
+
+async def get_current_user(
+    creds: HTTPAuthorizationCredentials | None = Depends(security),
+) -> dict[str, Any]:
+    if creds is None or creds.scheme.lower() != "bearer":
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Not authenticated",
+        )
+    try:
+        payload = jwt.decode(
+            creds.credentials,
+            settings.jwt_secret_key,
+            algorithms=[settings.jwt_algorithm],
+        )
+        uid = payload.get("sub")
+        if not uid:
+            raise HTTPException(status.HTTP_401_UNAUTHORIZED, detail="Invalid token")
+    except JWTError:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Invalid token",
+        ) from None
+
+    db = get_database()
+    user = await db.users.find_one({"_id": ObjectId(uid)})
+    if not user:
+        raise HTTPException(status.HTTP_401_UNAUTHORIZED, detail="User not found")
+    user["id"] = str(user["_id"])
+    return user
+
+
+def user_public(doc: dict[str, Any]) -> UserPublic:
+    return UserPublic(
+        id=str(doc["_id"]),
+        email=doc["email"],
+        firstName=doc.get("firstName", ""),
+        lastName=doc.get("lastName", ""),
+    )

backend/app/config.py

@@ -0,0 +1,47 @@
+from pathlib import Path
+
+from pydantic_settings import BaseSettings, SettingsConfigDict
+
+_ROOT = Path(__file__).resolve().parent.parent
+_ENV = _ROOT / ".env"
+if not _ENV.is_file():
+    _ENV = _ROOT.parent / ".env"
+
+
+class Settings(BaseSettings):
+    model_config = SettingsConfigDict(
+        env_file=str(_ENV) if _ENV.is_file() else None,
+        env_file_encoding="utf-8",
+        extra="ignore",
+    )
+
+    gemini_api_key: str = ""
+    gemini_model: str = "gemini-2.0-flash"
+
+    mongodb_url: str = "mongodb://localhost:27017"
+    mongodb_db: str = "cu_student_helper"
+
+    jwt_secret_key: str = "change-me"
+    jwt_algorithm: str = "HS256"
+    access_token_expire_minutes: int = 60 * 24 * 7
+
+    cors_origins: str = "http://localhost:5173,http://localhost:3000"
+
+    google_service_account_file: str | None = None
+    google_service_account_json: str | None = None
+    google_spreadsheet_id: str | None = None
+    google_sheet_name: str = "Submissions"
+
+    admin_notify_email: str | None = None
+    smtp_host: str | None = None
+    smtp_port: int = 587
+    smtp_user: str | None = None
+    smtp_password: str | None = None
+    smtp_from: str | None = None
+
+    @property
+    def cors_origin_list(self) -> list[str]:
+        return [o.strip() for o in self.cors_origins.split(",") if o.strip()]
+
+
+settings = Settings()

backend/app/db.py

@@ -0,0 +1,16 @@
+from motor.motor_asyncio import AsyncIOMotorClient, AsyncIOMotorDatabase
+
+from app.config import settings
+
+_client: AsyncIOMotorClient | None = None
+
+
+def get_client() -> AsyncIOMotorClient:
+    global _client
+    if _client is None:
+        _client = AsyncIOMotorClient(settings.mongodb_url)
+    return _client
+
+
+def get_database() -> AsyncIOMotorDatabase:
+    return get_client()[settings.mongodb_db]

backend/app/main.py

@@ -0,0 +1,59 @@
+import logging
+from contextlib import asynccontextmanager
+from pathlib import Path
+
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+
+from app.config import settings
+from app.db import get_client, get_database
+from app.routers import advisor_chat, auth, persona_chat, profile, submit, transcribe
+
+LOG = logging.getLogger(__name__)
+
+FRONTEND_DIST = Path(__file__).resolve().parent.parent.parent / "frontend" / "dist"
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    db = get_database()
+    await db.users.create_index("email", unique=True)
+    LOG.info("Mongo indexes ensured")
+    yield
+    get_client().close()
+
+
+_docs = None if FRONTEND_DIST.is_dir() else "/docs"
+_redoc = None if FRONTEND_DIST.is_dir() else "/redoc"
+
+app = FastAPI(
+    title="CU Student AI Project Helper",
+    lifespan=lifespan,
+    docs_url=_docs,
+    redoc_url=_redoc,
+)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=settings.cors_origin_list,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.include_router(auth.router, prefix="/api")
+app.include_router(profile.router, prefix="/api")
+app.include_router(persona_chat.router, prefix="/api/persona-chat")
+app.include_router(advisor_chat.router, prefix="/api/advisor-chat")
+app.include_router(transcribe.router, prefix="/api")
+app.include_router(submit.router, prefix="/api")
+
+
+@app.get("/api/health")
+async def health():
+    return {"status": "ok"}
+
+
+if FRONTEND_DIST.is_dir():
+    app.mount("/", StaticFiles(directory=str(FRONTEND_DIST), html=True), name="static")

backend/app/routers/__init__.py

@@ -0,0 +1 @@
+# Routers package

backend/app/routers/advisor_chat.py

@@ -0,0 +1,35 @@
+from fastapi import APIRouter, HTTPException
+
+from app.schemas import ChatMessage, ChatResponse
+from app.services.gemini import generate_structured_reply
+
+router = APIRouter(tags=["advisor-chat"])
+
+SYSTEM = """You are helping a student design a small **advisor panel** (multiple AI advisors with different angles) for a Collaborative Conversational AI project.
+
+Collect in plain language:
+- Panel name / theme
+- How many advisors (2–5), each with a short role
+- What decisions or questions the panel will help with
+- Tone (formal/casual) and any content boundaries
+
+Keep replies short (2–5 sentences). No code.
+
+Every response MUST be a single JSON object only, no markdown, shape:
+{"reply":"<message>","progress":<0-100>,"complete":<true|false>}
+complete=true when the student could implement the panel from your notes."""
+
+
+@router.post("/message", response_model=ChatResponse)
+async def advisor_message(msg: ChatMessage):
+    try:
+        out = await generate_structured_reply(
+            SYSTEM,
+            msg.history,
+            msg.user_input,
+        )
+        return ChatResponse(**out)
+    except ValueError as e:
+        raise HTTPException(503, str(e)) from e
+    except Exception as e:
+        raise HTTPException(500, f"Chat error: {e!s}") from e

backend/app/routers/auth.py

@@ -0,0 +1,73 @@
+from fastapi import APIRouter, Depends, HTTPException, status
+from pymongo.errors import DuplicateKeyError
+
+from app.auth_jwt import (
+    create_access_token,
+    get_current_user,
+    hash_password,
+    user_public,
+    verify_password,
+)
+from app.db import get_database
+from app.schemas import TokenResponse, UserCreate, UserLogin, UserPublic, UserUpdate
+
+router = APIRouter(prefix="/auth", tags=["auth"])
+
+
+@router.post("/register", response_model=TokenResponse)
+async def register(body: UserCreate):
+    db = get_database()
+    doc = {
+        "email": body.email.lower(),
+        "password_hash": hash_password(body.password),
+        "firstName": body.firstName,
+        "lastName": body.lastName,
+    }
+    try:
+        res = await db.users.insert_one(doc)
+    except DuplicateKeyError:
+        raise HTTPException(status.HTTP_400_BAD_REQUEST, "Email already registered")
+    token = create_access_token(str(res.inserted_id))
+    return TokenResponse(access_token=token)
+
+
+@router.post("/login", response_model=TokenResponse)
+async def login(body: UserLogin):
+    db = get_database()
+    user = await db.users.find_one({"email": body.email.lower()})
+    if not user or not verify_password(body.password, user["password_hash"]):
+        raise HTTPException(status.HTTP_401_UNAUTHORIZED, "Invalid email or password")
+    token = create_access_token(str(user["_id"]))
+    return TokenResponse(access_token=token)
+
+
+@router.get("/me", response_model=UserPublic)
+async def me(user=Depends(get_current_user)):
+    return user_public(user)
+
+
+@router.patch("/me", response_model=UserPublic)
+async def update_me(body: UserUpdate, user=Depends(get_current_user)):
+    db = get_database()
+    updates: dict = {}
+    if body.firstName is not None:
+        updates["firstName"] = body.firstName
+    if body.lastName is not None:
+        updates["lastName"] = body.lastName
+    if body.email is not None:
+        updates["email"] = body.email.lower()
+    if body.password is not None:
+        updates["password_hash"] = hash_password(body.password)
+    if updates:
+        await db.users.update_one({"_id": user["_id"]}, {"$set": updates})
+    fresh = await db.users.find_one({"_id": user["_id"]})
+    return user_public(fresh)
+
+
+@router.delete("/me")
+async def delete_me(user=Depends(get_current_user)):
+    db = get_database()
+    uid = user["_id"]
+    await db.user_profiles.delete_many({"user_id": uid})
+    await db.users.delete_one({"_id": uid})
+    return {"ok": True}

backend/app/routers/persona_chat.py

@@ -0,0 +1,35 @@
+from fastapi import APIRouter, HTTPException
+
+from app.schemas import ChatMessage, ChatResponse
+from app.services.gemini import generate_structured_reply
+
+router = APIRouter(tags=["persona-chat"])
+
+SYSTEM = """You are a friendly assistant helping a university student design ONE AI advisor **persona** for a Collaborative Conversational AI (CCAI) class project with Neon.ai / CU.
+
+Goals:
+- Learn their subject area, tone, name/label, what the persona should help with, and any boundaries.
+- Keep messages short (2–5 sentences). No jargon unless they use it first.
+- You are NOT writing code; you are helping them describe the persona in plain language.
+
+IMPORTANT: Every response MUST be a single JSON object only, no markdown fences, with this shape:
+{"reply":"<your next message to the student>","progress":<0-100>,"complete":<true|false>}
+- progress: rough estimate of how much you still need (100 = ready to copy into their project).
+- complete: true only when you have enough to fill a persona sheet (name, role, audience, tone, topics, guardrails).
+
+Start by greeting them and asking what subject or community they want their AI persona to represent."""
+
+
+@router.post("/message", response_model=ChatResponse)
+async def persona_message(msg: ChatMessage):
+    try:
+        out = await generate_structured_reply(
+            SYSTEM,
+            msg.history,
+            msg.user_input,
+        )
+        return ChatResponse(**out)
+    except ValueError as e:
+        raise HTTPException(503, str(e)) from e
+    except Exception as e:
+        raise HTTPException(500, f"Chat error: {e!s}") from e

backend/app/routers/profile.py

@@ -0,0 +1,44 @@
+from fastapi import APIRouter, Depends
+
+from app.auth_jwt import get_current_user
+from app.db import get_database
+from app.schemas import ProfilePayload
+
+router = APIRouter(prefix="/users", tags=["profile"])
+
+
+@router.get("/me/profile")
+async def get_profile(user=Depends(get_current_user)):
+    db = get_database()
+    doc = await db.user_profiles.find_one({"user_id": user["_id"]})
+    if not doc:
+        return {"persona_draft": {}, "advisor_draft": {}}
+    return {
+        "persona_draft": doc.get("persona_draft") or {},
+        "advisor_draft": doc.get("advisor_draft") or {},
+    }
+
+
+@router.put("/me/profile")
+async def put_profile(body: ProfilePayload, user=Depends(get_current_user)):
+    db = get_database()
+    update: dict = {}
+    if body.persona_draft is not None:
+        update["persona_draft"] = body.persona_draft
+    if body.advisor_draft is not None:
+        update["advisor_draft"] = body.advisor_draft
+    if not update:
+        return {"ok": True}
+    await db.user_profiles.update_one(
+        {"user_id": user["_id"]},
+        {"$set": update},
+        upsert=True,
+    )
+    return {"ok": True}
+
+
+@router.post("/me/clear-data")
+async def clear_data(user=Depends(get_current_user)):
+    db = get_database()
+    await db.user_profiles.delete_one({"user_id": user["_id"]})
+    return {"ok": True}

backend/app/routers/submit.py

@@ -0,0 +1,101 @@
+import json
+import logging
+import smtplib
+from datetime import datetime, timezone
+from email.message import EmailMessage
+from typing import Any
+
+from fastapi import APIRouter
+
+from app.config import settings
+from app.schemas import SubmitPayload, SubmitResponse
+
+LOG = logging.getLogger(__name__)
+router = APIRouter(tags=["submit"])
+
+
+def _append_sheet(row: list[Any]) -> bool:
+    if not settings.google_spreadsheet_id:
+        return False
+    try:
+        import gspread
+    except ImportError:
+        LOG.warning("gspread not installed; skipping sheet append")
+        return False
+
+    try:
+        if settings.google_service_account_file:
+            gc = gspread.service_account(filename=settings.google_service_account_file)
+        elif settings.google_service_account_json:
+            info = json.loads(settings.google_service_account_json)
+            gc = gspread.service_account_from_dict(info)
+        else:
+            return False
+    except Exception as e:
+        LOG.error("Google auth failed: %s", e)
+        return False
+
+    try:
+        sh = gc.open_by_key(settings.google_spreadsheet_id)
+        ws = sh.worksheet(settings.google_sheet_name)
+        ws.append_row(row, value_input_option="USER_ENTERED")
+        return True
+    except Exception as e:
+        LOG.error("Sheet append failed: %s", e)
+        return False
+
+
+def _send_email(subject: str, body: str) -> bool:
+    if not settings.admin_notify_email or not settings.smtp_host:
+        return False
+    msg = EmailMessage()
+    msg["Subject"] = subject
+    msg["From"] = settings.smtp_from or settings.smtp_user or "noreply@localhost"
+    msg["To"] = settings.admin_notify_email
+    msg.set_content(body)
+    try:
+        with smtplib.SMTP(settings.smtp_host, settings.smtp_port) as smtp:
+            smtp.starttls()
+            if settings.smtp_user and settings.smtp_password:
+                smtp.login(settings.smtp_user, settings.smtp_password)
+            smtp.send_message(msg)
+        return True
+    except Exception as e:
+        LOG.error("SMTP failed: %s", e)
+        return False
+
+
+@router.post("/submit", response_model=SubmitResponse)
+async def submit(payload: SubmitPayload):
+    ts = datetime.now(timezone.utc).isoformat()
+    row = [
+        ts,
+        payload.kind,
+        payload.email or "",
+        json.dumps(payload.data, ensure_ascii=False)[:32000],
+    ]
+
+    sheet_ok = False
+    try:
+        sheet_ok = _append_sheet(row)
+    except Exception as e:
+        LOG.error("Sheet append error: %s", e)
+
+    subject = f"[CU Student Helper] {payload.kind} — {ts}"
+    body = f"Kind: {payload.kind}\nEmail: {payload.email}\n\n{json.dumps(payload.data, indent=2, ensure_ascii=False)[:50000]}"
+    email_ok = _send_email(subject, body)
+
+    if not sheet_ok and not email_ok:
+        return SubmitResponse(
+            ok=True,
+            message="Received. Configure Google Sheets or SMTP in .env to persist server-side.",
+            row_appended=False,
+            email_sent=False,
+        )
+
+    return SubmitResponse(
+        ok=True,
+        message="Saved.",
+        row_appended=sheet_ok,
+        email_sent=email_ok,
+    )

backend/app/routers/transcribe.py

@@ -0,0 +1,105 @@
+"""Transcribe audio via Gemini multimodal (WAV preferred)."""
+
+import base64
+import logging
+import subprocess
+import tempfile
+from pathlib import Path
+
+import httpx
+from fastapi import APIRouter, File, HTTPException, UploadFile
+
+from app.config import settings
+
+LOG = logging.getLogger(__name__)
+router = APIRouter(tags=["transcribe"])
+
+GEMINI_URL = "https://generativelanguage.googleapis.com/v1beta/models"
+
+
+def _to_wav(audio_bytes: bytes, mime: str) -> tuple[bytes, str]:
+    if "wav" in (mime or "").lower():
+        return audio_bytes, "audio/wav"
+    ext = "webm" if "webm" in (mime or "").lower() else "ogg"
+    with tempfile.TemporaryDirectory() as tmp:
+        src = Path(tmp) / f"in.{ext}"
+        dst = Path(tmp) / "out.wav"
+        src.write_bytes(audio_bytes)
+        r = subprocess.run(
+            [
+                "ffmpeg",
+                "-y",
+                "-i",
+                str(src),
+                "-ar",
+                "16000",
+                "-ac",
+                "1",
+                "-f",
+                "wav",
+                str(dst),
+            ],
+            capture_output=True,
+            timeout=60,
+        )
+        if r.returncode != 0:
+            LOG.warning("ffmpeg failed: %s", r.stderr.decode(errors="replace")[-400:])
+            raise RuntimeError("ffmpeg conversion failed")
+        return dst.read_bytes(), "audio/wav"
+
+
+@router.post("/transcribe")
+async def transcribe(audio: UploadFile = File(...)):
+    key = settings.gemini_api_key
+    if not key:
+        raise HTTPException(503, "GEMINI_API_KEY not configured")
+
+    raw = await audio.read()
+    if not raw:
+        return {"text": ""}
+
+    mime = audio.content_type or "audio/webm"
+    try:
+        wav_bytes, wav_mime = _to_wav(raw, mime)
+    except RuntimeError:
+        raise HTTPException(500, "Could not convert audio (install ffmpeg?)")
+
+    b64 = base64.standard_b64encode(wav_bytes).decode("ascii")
+    model = settings.gemini_model
+    url = f"{GEMINI_URL}/{model}:generateContent?key={key}"
+
+    payload = {
+        "contents": [
+            {
+                "role": "user",
+                "parts": [
+                    {
+                        "inline_data": {
+                            "mime_type": wav_mime,
+                            "data": b64,
+                        }
+                    },
+                    {
+                        "text": "Transcribe the spoken words in this audio. "
+                        "Output only the transcript text, no quotes or labels."
+                    },
+                ],
+            }
+        ],
+        "generationConfig": {"temperature": 0.2, "maxOutputTokens": 1024},
+    }
+
+    async with httpx.AsyncClient(timeout=120.0) as client:
+        resp = await client.post(url, json=payload)
+        if resp.status_code >= 400:
+            LOG.error("Gemini transcribe error: %s", resp.text[:500])
+            raise HTTPException(502, "Transcription service error")
+        data = resp.json()
+
+    try:
+        parts = data["candidates"][0]["content"]["parts"]
+        text = "".join(p.get("text", "") for p in parts).strip()
+    except (KeyError, IndexError):
+        raise HTTPException(502, "Bad transcription response")
+
+    return {"text": text}

backend/app/schemas.py

@@ -0,0 +1,63 @@
+from typing import Any
+
+from pydantic import BaseModel, EmailStr, Field
+
+
+class UserCreate(BaseModel):
+    email: EmailStr
+    password: str = Field(min_length=8)
+    firstName: str = Field(min_length=1, max_length=80)
+    lastName: str = Field(min_length=1, max_length=80)
+
+
+class UserLogin(BaseModel):
+    email: EmailStr
+    password: str
+
+
+class TokenResponse(BaseModel):
+    access_token: str
+    token_type: str = "bearer"
+
+
+class UserPublic(BaseModel):
+    id: str
+    email: str
+    firstName: str
+    lastName: str
+
+
+class UserUpdate(BaseModel):
+    firstName: str | None = None
+    lastName: str | None = None
+    email: EmailStr | None = None
+    password: str | None = Field(default=None, min_length=8)
+
+
+class ProfilePayload(BaseModel):
+    persona_draft: dict[str, Any] | None = None
+    advisor_draft: dict[str, Any] | None = None
+
+
+class ChatMessage(BaseModel):
+    history: list[dict[str, str]] = []
+    user_input: str
+
+
+class ChatResponse(BaseModel):
+    reply: str
+    progress: int
+    complete: bool
+
+
+class SubmitPayload(BaseModel):
+    kind: str  # persona_form | advisor_form | persona_chat | advisor_chat
+    data: dict[str, Any]
+    email: str | None = None
+
+
+class SubmitResponse(BaseModel):
+    ok: bool
+    message: str
+    row_appended: bool = False
+    email_sent: bool = False

backend/app/services/gemini.py

@@ -0,0 +1,101 @@
+import json
+import logging
+import re
+from typing import Any
+
+import httpx
+
+from app.config import settings
+
+LOG = logging.getLogger(__name__)
+
+GEMINI_URL = "https://generativelanguage.googleapis.com/v1beta/models"
+
+
+def _extract_json_object(text: str) -> dict[str, Any] | None:
+    text = text.strip()
+    m = re.search(r"\{[\s\S]*\}", text)
+    if not m:
+        return None
+    try:
+        return json.loads(m.group())
+    except json.JSONDecodeError:
+        return None
+
+
+async def generate_structured_reply(
+    system_instruction: str,
+    history: list[dict[str, str]],
+    user_message: str,
+) -> dict[str, Any]:
+    """Call Gemini; expect JSON with reply, progress, complete."""
+    key = settings.gemini_api_key
+    if not key:
+        raise ValueError("GEMINI_API_KEY is not set")
+
+    model = settings.gemini_model
+    url = f"{GEMINI_URL}/{model}:generateContent?key={key}"
+
+    # Gemini turns should start with a user message; drop leading assistant-only context
+    h = list(history)
+    while h and h[0].get("role") == "agent":
+        h.pop(0)
+
+    contents: list[dict[str, Any]] = []
+    for turn in h:
+        role = turn.get("role", "user")
+        text = turn.get("text", "")
+        g_role = "user" if role == "user" else "model"
+        contents.append({"role": g_role, "parts": [{"text": text}]})
+
+    contents.append({"role": "user", "parts": [{"text": user_message}]})
+
+    payload = {
+        "systemInstruction": {"parts": [{"text": system_instruction}]},
+        "contents": contents,
+        "generationConfig": {
+            "temperature": 0.6,
+            "maxOutputTokens": 2048,
+        },
+    }
+
+    async with httpx.AsyncClient(timeout=120.0) as client:
+        resp = await client.post(url, json=payload)
+        resp.raise_for_status()
+        data = resp.json()
+
+    try:
+        parts = data["candidates"][0]["content"]["parts"]
+        raw = "".join(p.get("text", "") for p in parts)
+    except (KeyError, IndexError) as e:
+        LOG.error("Unexpected Gemini response: %s", data)
+        raise ValueError("Invalid Gemini response") from e
+
+    parsed = _extract_json_object(raw)
+    if parsed and "reply" in parsed:
+        return {
+            "reply": str(parsed["reply"]),
+            "progress": int(parsed.get("progress", 0)),
+            "complete": bool(parsed.get("complete", False)),
+        }
+
+    return {"reply": raw, "progress": 50, "complete": False}
+
+
+async def generate_simple_text(system_instruction: str, user_prompt: str) -> str:
+    key = settings.gemini_api_key
+    if not key:
+        raise ValueError("GEMINI_API_KEY is not set")
+    model = settings.gemini_model
+    url = f"{GEMINI_URL}/{model}:generateContent?key={key}"
+    payload = {
+        "systemInstruction": {"parts": [{"text": system_instruction}]},
+        "contents": [{"role": "user", "parts": [{"text": user_prompt}]}],
+        "generationConfig": {"temperature": 0.4, "maxOutputTokens": 1024},
+    }
+    async with httpx.AsyncClient(timeout=120.0) as client:
+        resp = await client.post(url, json=payload)
+        resp.raise_for_status()
+        data = resp.json()
+    parts = data["candidates"][0]["content"]["parts"]
+    return "".join(p.get("text", "") for p in parts)

backend/requirements.txt

@@ -0,0 +1,12 @@
+fastapi>=0.115.0
+uvicorn[standard]>=0.32.0
+motor>=3.6.0
+pydantic-settings>=2.6.0
+python-jose[cryptography]>=3.3.0
+passlib[bcrypt]>=1.7.4
+bcrypt==4.0.1
+httpx>=0.27.0
+python-multipart>=0.0.12
+email-validator>=2.2.0
+gspread>=6.0.0
+google-auth>=2.29.0

docker-compose.yml

@@ -0,0 +1,23 @@
+services:
+  mongo:
+    image: mongo:7
+    ports:
+      - "27017:27017"
+    volumes:
+      - cu_student_mongo:/data/db
+
+  api:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "7860:7860"
+    env_file:
+      - .env
+    environment:
+      MONGODB_URL: mongodb://mongo:27017
+    depends_on:
+      - mongo
+
+volumes:
+  cu_student_mongo:

frontend/.env.development

@@ -0,0 +1,2 @@
+# Leave empty to use Vite proxy to backend; or set http://127.0.0.1:8000
+VITE_API_URL=

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CU Student AI Project Helper</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.9.0",
+    "@eslint/js": "^9.15.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.12.0",
+    "typescript": "~5.6.3",
+    "typescript-eslint": "^8.15.0",
+    "vite": "^5.4.11"
+  }
+}

frontend/src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

frontend/src/App.tsx

@@ -0,0 +1,28 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { AuthProvider } from './context/AuthContext'
+import { AppLayout } from './components/AppLayout'
+import { LandingPage } from './pages/LandingPage'
+import { AuthPage } from './pages/AuthPage'
+import { PersonaFormWizard } from './pages/PersonaFormWizard'
+import { PersonaChatPage } from './pages/PersonaChatPage'
+import { AdvisorFormWizard } from './pages/AdvisorFormWizard'
+import { AdvisorChatPage } from './pages/AdvisorChatPage'
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route element={<AppLayout />}>
+            <Route path="/" element={<LandingPage />} />
+            <Route path="/auth" element={<AuthPage />} />
+            <Route path="/create-persona/form" element={<PersonaFormWizard />} />
+            <Route path="/create-persona/chat" element={<PersonaChatPage />} />
+            <Route path="/create-advisor/form" element={<AdvisorFormWizard />} />
+            <Route path="/create-advisor/chat" element={<AdvisorChatPage />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </AuthProvider>
+  )
+}

frontend/src/api.ts

@@ -0,0 +1,26 @@
+const base = import.meta.env.VITE_API_URL || ''
+
+export function apiUrl(path: string): string {
+  if (path.startsWith('http')) return path
+  const p = path.startsWith('/') ? path : `/${path}`
+  return base ? `${base.replace(/\/$/, '')}${p}` : p
+}
+
+export function getToken(): string | null {
+  return localStorage.getItem('authToken')
+}
+
+export async function apiFetch(
+  path: string,
+  options: RequestInit & { auth?: boolean } = {},
+): Promise<Response> {
+  const headers = new Headers(options.headers)
+  if (!headers.has('Content-Type') && options.body && typeof options.body === 'string') {
+    headers.set('Content-Type', 'application/json')
+  }
+  if (options.auth !== false) {
+    const t = getToken()
+    if (t) headers.set('Authorization', `Bearer ${t}`)
+  }
+  return fetch(apiUrl(path), { ...options, headers })
+}

frontend/src/components/AccountModal.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react'
+import { apiFetch } from '../api'
+import { useAuth } from '../context/AuthContext'
+
+type Props = { onClose: () => void }
+
+export function AccountModal({ onClose }: Props) {
+  const { user, refreshUser, signOut } = useAuth()
+  const [firstName, setFirstName] = useState(user?.firstName || '')
+  const [lastName, setLastName] = useState(user?.lastName || '')
+  const [email, setEmail] = useState(user?.email || '')
+  const [password, setPassword] = useState('')
+  const [err, setErr] = useState('')
+
+  const save = async () => {
+    setErr('')
+    const body: Record<string, string> = { firstName, lastName, email }
+    if (password.trim()) body.password = password
+    const r = await apiFetch('/api/auth/me', {
+      method: 'PATCH',
+      body: JSON.stringify(body),
+    })
+    if (!r.ok) {
+      setErr((await r.json().catch(() => ({}))).detail || 'Update failed')
+      return
+    }
+    await refreshUser()
+    onClose()
+  }
+
+  const deleteAccount = async () => {
+    if (!confirm('Delete your account and server-stored profile? This cannot be undone.')) return
+    const r = await apiFetch('/api/auth/me', { method: 'DELETE' })
+    if (r.ok) {
+      signOut()
+      onClose()
+    }
+  }
+
+  return (
+    <div className="modal-overlay" role="dialog" aria-modal>
+      <div className="modal-box">
+        <h2>Account</h2>
+        {err && <p style={{ color: '#b91c1c', fontSize: '0.9rem' }}>{err}</p>}
+        <div className="field">
+          <label>First name</label>
+          <input value={firstName} onChange={(e) => setFirstName(e.target.value)} />
+        </div>
+        <div className="field">
+          <label>Last name</label>
+          <input value={lastName} onChange={(e) => setLastName(e.target.value)} />
+        </div>
+        <div className="field">
+          <label>Email</label>
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+        </div>
+        <div className="field">
+          <label>New password (optional)</label>
+          <input
+            type="password"
+            autoComplete="new-password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Leave blank to keep current"
+          />
+        </div>
+        <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'space-between', flexWrap: 'wrap' }}>
+          <button type="button" className="btn btn-secondary" onClick={deleteAccount}>
+            Delete account
+          </button>
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <button type="button" className="btn btn-secondary" onClick={onClose}>
+              Cancel
+            </button>
+            <button type="button" className="btn btn-primary" onClick={save}>
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/AppLayout.tsx

@@ -0,0 +1,38 @@
+import { Outlet, Link } from 'react-router-dom'
+import { useState } from 'react'
+import { UserMenu } from './UserMenu'
+import { SaveWarningBar } from './SaveWarningBar'
+import { ProfileModal } from './ProfileModal'
+import { AccountModal } from './AccountModal'
+import { ClearDataModal } from './ClearDataModal'
+
+export function AppLayout() {
+  const [profile, setProfile] = useState(false)
+  const [account, setAccount] = useState(false)
+  const [clear, setClear] = useState(false)
+
+  return (
+    <div className="layout-main">
+      <header className="header-bar">
+        <Link to="/" style={{ fontWeight: 700, textDecoration: 'none', color: 'var(--text-primary)' }}>
+          CU Student AI Helper
+        </Link>
+        <nav>
+          <Link to="/">Home</Link>
+          <Link to="/create-persona/form">Persona</Link>
+          <Link to="/create-advisor/form">Advisor panel</Link>
+        </nav>
+        <UserMenu
+          onProfile={() => setProfile(true)}
+          onAccount={() => setAccount(true)}
+          onClearData={() => setClear(true)}
+        />
+      </header>
+      <Outlet />
+      <SaveWarningBar />
+      {profile && <ProfileModal onClose={() => setProfile(false)} />}
+      {account && <AccountModal onClose={() => setAccount(false)} />}
+      {clear && <ClearDataModal onClose={() => setClear(false)} />}
+    </div>
+  )
+}

frontend/src/components/ClearDataModal.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { apiFetch } from '../api'
+
+const LS_KEYS = ['persona_draft_v1', 'advisor_draft_v1', 'persona_chat_v1', 'advisor_chat_v1']
+
+type Props = { onClose: () => void }
+
+export function ClearDataModal({ onClose }: Props) {
+  const [clearProfile, setClearProfile] = useState(true)
+  const [clearLocal, setClearLocal] = useState(true)
+
+  const run = async () => {
+    if (clearLocal) {
+      for (const k of LS_KEYS) localStorage.removeItem(k)
+    }
+    if (clearProfile) {
+      await apiFetch('/api/users/me/clear-data?profile=true', { method: 'POST' })
+    }
+    onClose()
+    window.location.reload()
+  }
+
+  return (
+    <div className="modal-overlay" role="dialog" aria-modal>
+      <div className="modal-box">
+        <h2>Clear User Data</h2>
+        <label style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', marginBottom: '0.75rem' }}>
+          <input type="checkbox" checked={clearLocal} onChange={(e) => setClearLocal(e.target.checked)} />
+          Clear local drafts (browser storage)
+        </label>
+        <label style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', marginBottom: '1rem' }}>
+          <input type="checkbox" checked={clearProfile} onChange={(e) => setClearProfile(e.target.checked)} />
+          Clear saved profile on server (signed-in)
+        </label>
+        <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
+          <button type="button" className="btn btn-secondary" onClick={onClose}>
+            Cancel
+          </button>
+          <button type="button" className="btn btn-primary" onClick={run}>
+            Clear
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/ProfileModal.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react'
+import { apiFetch } from '../api'
+
+type Props = { onClose: () => void }
+
+export function ProfileModal({ onClose }: Props) {
+  const [persona, setPersona] = useState('')
+  const [advisor, setAdvisor] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      const r = await apiFetch('/api/users/me/profile')
+      if (!r.ok || cancelled) {
+        setLoading(false)
+        return
+      }
+      const d = await r.json()
+      setPersona(JSON.stringify(d.persona_draft || {}, null, 2))
+      setAdvisor(JSON.stringify(d.advisor_draft || {}, null, 2))
+      setLoading(false)
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const save = async () => {
+    let persona_draft: object = {}
+    let advisor_draft: object = {}
+    try {
+      persona_draft = JSON.parse(persona || '{}')
+    } catch {
+      alert('Persona draft must be valid JSON')
+      return
+    }
+    try {
+      advisor_draft = JSON.parse(advisor || '{}')
+    } catch {
+      alert('Advisor draft must be valid JSON')
+      return
+    }
+    await apiFetch('/api/users/me/profile', {
+      method: 'PUT',
+      body: JSON.stringify({ persona_draft, advisor_draft }),
+    })
+    onClose()
+  }
+
+  return (
+    <div className="modal-overlay" role="dialog" aria-modal>
+      <div className="modal-box" style={{ maxWidth: 560 }}>
+        <h2>Profile</h2>
+        {loading ? (
+          <p>Loading…</p>
+        ) : (
+          <>
+            <p style={{ fontSize: '0.88rem', color: 'var(--text-secondary)' }}>
+              Your saved wizard data (JSON). You can paste from the export/download tools.
+            </p>
+            <div className="field">
+              <label>Persona draft</label>
+              <textarea value={persona} onChange={(e) => setPersona(e.target.value)} rows={8} />
+            </div>
+            <div className="field">
+              <label>Advisor draft</label>
+              <textarea value={advisor} onChange={(e) => setAdvisor(e.target.value)} rows={8} />
+            </div>
+            <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
+              <button type="button" className="btn btn-secondary" onClick={onClose}>
+                Cancel
+              </button>
+              <button type="button" className="btn btn-primary" onClick={save}>
+                Save
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/SaveWarningBar.tsx

@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
+
+export function SaveWarningBar() {
+  const { user, loading } = useAuth()
+  if (loading || user) return null
+  return (
+    <div className="save-warning">
+      Create an account to more thoroughly save your work —{' '}
+      <Link to="/auth">Create an account</Link>
+    </div>
+  )
+}

frontend/src/components/UserMenu.tsx

@@ -0,0 +1,73 @@
+import { useState, useRef, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
+
+type Props = {
+  onProfile: () => void
+  onAccount: () => void
+  onClearData: () => void
+}
+
+export function UserMenu({ onProfile, onAccount, onClearData }: Props) {
+  const { user, signOut } = useAuth()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function close(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
+  }, [])
+
+  if (!user) {
+    return (
+      <Link className="btn btn-primary" to="/auth">
+        Sign in
+      </Link>
+    )
+  }
+
+  return (
+    <div className="user-menu-wrap" ref={ref}>
+      <button type="button" className="user-menu-trigger" onClick={() => setOpen((o) => !o)}>
+        {user.firstName || user.email}
+      </button>
+      {open && (
+        <div className="user-dropdown">
+          <button
+            type="button"
+            onClick={() => {
+              setOpen(false)
+              onProfile()
+            }}
+          >
+            Profile
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setOpen(false)
+              onAccount()
+            }}
+          >
+            Account
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setOpen(false)
+              onClearData()
+            }}
+          >
+            Clear User Data
+          </button>
+          <button type="button" className="danger" onClick={() => signOut()}>
+            Sign out
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/context/AuthContext.tsx

@@ -0,0 +1,110 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import type { ReactNode } from 'react'
+import { apiFetch } from '../api'
+
+export type User = {
+  id: string
+  email: string
+  firstName: string
+  lastName: string
+}
+
+type AuthCtx = {
+  user: User | null
+  token: string | null
+  loading: boolean
+  setAuth: (user: User, token: string) => void
+  signOut: () => void
+  refreshUser: () => Promise<void>
+}
+
+const Ctx = createContext<AuthCtx | null>(null)
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [token, setToken] = useState<string | null>(() => localStorage.getItem('authToken'))
+  const [loading, setLoading] = useState(true)
+
+  const refreshUser = useCallback(async () => {
+    const t = localStorage.getItem('authToken')
+    if (!t) {
+      setUser(null)
+      setToken(null)
+      return
+    }
+    const r = await apiFetch('/api/auth/me')
+    if (r.ok) {
+      const u = (await r.json()) as User
+      setUser(u)
+      setToken(t)
+      localStorage.setItem('user', JSON.stringify(u))
+    } else {
+      localStorage.removeItem('authToken')
+      localStorage.removeItem('user')
+      setUser(null)
+      setToken(null)
+    }
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      const t = localStorage.getItem('authToken')
+      if (!t) {
+        if (!cancelled) setLoading(false)
+        return
+      }
+      const r = await apiFetch('/api/auth/me')
+      if (cancelled) return
+      if (r.ok) {
+        const u = (await r.json()) as User
+        setUser(u)
+        setToken(t)
+        localStorage.setItem('user', JSON.stringify(u))
+      } else {
+        localStorage.removeItem('authToken')
+        localStorage.removeItem('user')
+        setUser(null)
+        setToken(null)
+      }
+      setLoading(false)
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const setAuth = useCallback((u: User, tok: string) => {
+    localStorage.setItem('authToken', tok)
+    localStorage.setItem('user', JSON.stringify(u))
+    setUser(u)
+    setToken(tok)
+  }, [])
+
+  const signOut = useCallback(() => {
+    localStorage.removeItem('authToken')
+    localStorage.removeItem('user')
+    setUser(null)
+    setToken(null)
+  }, [])
+
+  const value = useMemo(
+    () => ({ user, token, loading, setAuth, signOut, refreshUser }),
+    [user, token, loading, setAuth, signOut, refreshUser],
+  )
+
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>
+}
+
+export function useAuth() {
+  const v = useContext(Ctx)
+  if (!v) throw new Error('useAuth outside AuthProvider')
+  return v
+}

frontend/src/index.css

@@ -0,0 +1,2 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import './styles/theme.css';

frontend/src/lib/drafts.ts

@@ -0,0 +1,54 @@
+import { apiFetch } from '../api'
+
+const PERSONA_KEY = 'persona_draft_v1'
+const ADVISOR_KEY = 'advisor_draft_v1'
+
+export function loadPersonaDraft(): Record<string, unknown> {
+  try {
+    const s = localStorage.getItem(PERSONA_KEY)
+    return s ? JSON.parse(s) : {}
+  } catch {
+    return {}
+  }
+}
+
+export function savePersonaDraft(data: Record<string, unknown>) {
+  localStorage.setItem(PERSONA_KEY, JSON.stringify(data))
+}
+
+export function loadAdvisorDraft(): Record<string, unknown> {
+  try {
+    const s = localStorage.getItem(ADVISOR_KEY)
+    return s ? JSON.parse(s) : {}
+  } catch {
+    return {}
+  }
+}
+
+export function saveAdvisorDraft(data: Record<string, unknown>) {
+  localStorage.setItem(ADVISOR_KEY, JSON.stringify(data))
+}
+
+export async function syncPersonaToServerIfAuthed() {
+  const r = await apiFetch('/api/users/me/profile')
+  if (!r.ok) return
+  const cur = await r.json()
+  await apiFetch('/api/users/me/profile', {
+    method: 'PUT',
+    body: JSON.stringify({
+      persona_draft: { ...cur.persona_draft, ...loadPersonaDraft() },
+    }),
+  })
+}
+
+export async function syncAdvisorToServerIfAuthed() {
+  const r = await apiFetch('/api/users/me/profile')
+  if (!r.ok) return
+  const cur = await r.json()
+  await apiFetch('/api/users/me/profile', {
+    method: 'PUT',
+    body: JSON.stringify({
+      advisor_draft: { ...cur.advisor_draft, ...loadAdvisorDraft() },
+    }),
+  })
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/pages/AdvisorChatPage.tsx

@@ -0,0 +1,185 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { apiFetch, apiUrl } from '../api'
+
+type Msg = { role: 'user' | 'agent'; text: string }
+
+const LS = 'advisor_chat_v1'
+
+export function AdvisorChatPage() {
+  const [messages, setMessages] = useState<Msg[]>([])
+  const [input, setInput] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [progress, setProgress] = useState(0)
+  const endRef = useRef<HTMLDivElement>(null)
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
+  const chunksRef = useRef<Blob[]>([])
+  const [recording, setRecording] = useState(false)
+  const [transcribing, setTranscribing] = useState(false)
+
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(LS)
+      if (raw) {
+        const j = JSON.parse(raw)
+        if (j.messages?.length) {
+          setMessages(j.messages)
+          return
+        }
+      }
+    } catch {
+      /* ignore */
+    }
+    setMessages([
+      {
+        role: 'agent',
+        text: "Let's design your advisor panel — a small group of AI advisors with different roles. What theme or domain should this panel focus on?",
+      },
+    ])
+  }, [])
+
+  useEffect(() => {
+    localStorage.setItem(LS, JSON.stringify({ messages }))
+    endRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  const speak = (text: string) => {
+    if (!window.speechSynthesis) return
+    const u = new SpeechSynthesisUtterance(text)
+    window.speechSynthesis.cancel()
+    window.speechSynthesis.speak(u)
+  }
+
+  const sendForTranscription = useCallback(async (blob: Blob) => {
+    if (blob.size < 80) return
+    setTranscribing(true)
+    try {
+      const form = new FormData()
+      form.append('audio', blob, 'rec.webm')
+      const r = await fetch(apiUrl('/api/transcribe'), { method: 'POST', body: form })
+      if (r.ok) {
+        const { text } = await r.json()
+        if (text?.trim()) setInput((prev) => (prev ? `${prev} ${text.trim()}` : text.trim()))
+      }
+    } finally {
+      setTranscribing(false)
+    }
+  }, [])
+
+  const toggleRec = async () => {
+    if (recording) {
+      mediaRecorderRef.current?.stop()
+      setRecording(false)
+      return
+    }
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    const mimeType = ['audio/webm;codecs=opus', 'audio/webm', ''].find(
+      (m) => !m || MediaRecorder.isTypeSupported(m),
+    )
+    const rec = new MediaRecorder(stream, mimeType ? { mimeType } : undefined)
+    chunksRef.current = []
+    rec.ondataavailable = (e) => {
+      if (e.data.size) chunksRef.current.push(e.data)
+    }
+    rec.onstop = () => {
+      stream.getTracks().forEach((t) => t.stop())
+      const blob = new Blob(chunksRef.current, { type: rec.mimeType || 'audio/webm' })
+      sendForTranscription(blob)
+    }
+    rec.start(400)
+    mediaRecorderRef.current = rec
+    setRecording(true)
+  }
+
+  const send = async () => {
+    if (!input.trim() || loading) return
+    const userText = input.trim()
+    setInput('')
+    setMessages((prev) => [...prev, { role: 'user', text: userText }])
+    setLoading(true)
+    try {
+      const history = messages.map((m) => ({ role: m.role, text: m.text }))
+      const r = await apiFetch('/api/advisor-chat/message', {
+        method: 'POST',
+        body: JSON.stringify({ history, user_input: userText }),
+        auth: false,
+      })
+      if (!r.ok) throw new Error(await r.text())
+      const data = await r.json()
+      setMessages((prev) => [...prev, { role: 'agent', text: data.reply }])
+      setProgress(data.progress ?? 0)
+    } catch {
+      setMessages((prev) => [
+        ...prev,
+        { role: 'agent', text: 'Something went wrong. Check the API key and try again.' },
+      ])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="wizard-layout theme-advisor">
+      <aside className="wizard-sidebar">
+        <h2>Advisor chat</h2>
+        <p style={{ fontSize: '0.8rem', opacity: 0.75, padding: '0 0.75rem' }}>
+          Progress: {progress}%
+        </p>
+        <p style={{ fontSize: '0.75rem', opacity: 0.6, padding: '0 0.75rem', marginTop: '1rem' }}>
+          <Link to="/" style={{ color: '#c4b5fd' }}>
+            ← Home
+          </Link>
+        </p>
+      </aside>
+      <div className="wizard-main">
+        <h2 style={{ marginTop: 0 }}>Interactive Q&amp;A</h2>
+        <div className="chat-panel">
+          <div className="chat-messages">
+            {messages.map((m, i) => (
+              <div key={i} className={`chat-bubble ${m.role}`}>
+                {m.text}
+                {m.role === 'agent' && (
+                  <button
+                    type="button"
+                    className="icon-btn"
+                    style={{ marginLeft: '0.5rem', fontSize: '0.75rem' }}
+                    onClick={() => speak(m.text)}
+                  >
+                    Read aloud
+                  </button>
+                )}
+              </div>
+            ))}
+            {loading && <div className="chat-bubble agent">…</div>}
+            <div ref={endRef} />
+          </div>
+          <div className="chat-input-row">
+            <textarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder={transcribing ? 'Transcribing…' : 'Type a message…'}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault()
+                  send()
+                }
+              }}
+            />
+            <button
+              type="button"
+              className="icon-btn"
+              title="Voice input"
+              onClick={toggleRec}
+              disabled={transcribing}
+            >
+              {recording ? '■' : '🎤'}
+            </button>
+            <button type="button" className="btn btn-primary" onClick={send} disabled={loading}>
+              Send
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/AdvisorFormWizard.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { apiFetch } from '../api'
+import { loadAdvisorDraft, saveAdvisorDraft, syncAdvisorToServerIfAuthed } from '../lib/drafts'
+
+type AdvisorRow = { name: string; role: string }
+
+const STEPS = ['Panel overview', 'Advisors', 'Review']
+
+export function AdvisorFormWizard() {
+  const [step, setStep] = useState(0)
+  const [panelName, setPanelName] = useState('')
+  const [purpose, setPurpose] = useState('')
+  const [advisors, setAdvisors] = useState<AdvisorRow[]>([{ name: '', role: '' }])
+  const [submitMsg, setSubmitMsg] = useState('')
+
+  useEffect(() => {
+    const d = loadAdvisorDraft() as Record<string, unknown>
+    if (d.panelName) setPanelName(String(d.panelName))
+    if (d.purpose) setPurpose(String(d.purpose))
+    if (Array.isArray(d.advisors)) setAdvisors(d.advisors as AdvisorRow[])
+  }, [])
+
+  useEffect(() => {
+    saveAdvisorDraft({ panelName, purpose, advisors })
+  }, [panelName, purpose, advisors])
+
+  const addRow = () => setAdvisors((a) => [...a, { name: '', role: '' }])
+  const updateRow = (i: number, field: keyof AdvisorRow, v: string) => {
+    setAdvisors((rows) => rows.map((r, j) => (j === i ? { ...r, [field]: v } : r)))
+  }
+  const removeRow = (i: number) => setAdvisors((rows) => rows.filter((_, j) => j !== i))
+
+  const payload = () => ({ panelName, purpose, advisors })
+
+  const submit = async () => {
+    setSubmitMsg('')
+    const r = await apiFetch('/api/submit', {
+      method: 'POST',
+      body: JSON.stringify({ kind: 'advisor_form', data: payload(), email: null }),
+    })
+    const j = await r.json()
+    setSubmitMsg(j.message || 'Sent.')
+    await syncAdvisorToServerIfAuthed()
+  }
+
+  const downloadJson = () => {
+    const blob = new Blob([JSON.stringify(payload(), null, 2)], { type: 'application/json' })
+    const a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = 'advisor-panel-draft.json'
+    a.click()
+  }
+
+  return (
+    <div className="wizard-layout theme-advisor">
+      <aside className="wizard-sidebar">
+        <h2>Advisor panel</h2>
+        {STEPS.map((label, i) => (
+          <div
+            key={label}
+            className={`wizard-nav-item ${step === i ? 'active' : ''}`}
+            onClick={() => setStep(i)}
+            role="presentation"
+          >
+            {i + 1}. {label}
+          </div>
+        ))}
+        <p style={{ fontSize: '0.75rem', opacity: 0.6, padding: '0 0.75rem', marginTop: '1.5rem' }}>
+          <Link to="/" style={{ color: '#c4b5fd' }}>
+            ← Home
+          </Link>
+        </p>
+      </aside>
+      <div className="wizard-main">
+        {step === 0 && (
+          <>
+            <h2>Panel overview</h2>
+            <div className="field">
+              <label>Panel name</label>
+              <input value={panelName} onChange={(e) => setPanelName(e.target.value)} />
+            </div>
+            <div className="field">
+              <label>What decisions or questions should this panel help with?</label>
+              <textarea value={purpose} onChange={(e) => setPurpose(e.target.value)} />
+            </div>
+          </>
+        )}
+        {step === 1 && (
+          <>
+            <h2>Advisors</h2>
+            <p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
+              Add one row per advisor — e.g. &quot;Skeptical reviewer&quot; vs &quot;Encouraging coach&quot;.
+            </p>
+            {advisors.map((row, i) => (
+              <div key={i} className="field" style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-end' }}>
+                <div style={{ flex: 1 }}>
+                  <label>Name / label</label>
+                  <input value={row.name} onChange={(e) => updateRow(i, 'name', e.target.value)} />
+                </div>
+                <div style={{ flex: 1 }}>
+                  <label>Role</label>
+                  <input value={row.role} onChange={(e) => updateRow(i, 'role', e.target.value)} />
+                </div>
+                <button type="button" className="btn btn-secondary" onClick={() => removeRow(i)}>
+                  Remove
+                </button>
+              </div>
+            ))}
+            <button type="button" className="btn btn-secondary" onClick={addRow}>
+              + Add advisor
+            </button>
+          </>
+        )}
+        {step === 2 && (
+          <>
+            <h2>Review</h2>
+            <pre className="card" style={{ whiteSpace: 'pre-wrap', fontSize: '0.85rem' }}>
+              {JSON.stringify(payload(), null, 2)}
+            </pre>
+            {submitMsg && <p>{submitMsg}</p>}
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginTop: '1rem' }}>
+              <button type="button" className="btn btn-primary" onClick={submit}>
+                Submit to project lead
+              </button>
+              <button type="button" className="btn btn-secondary" onClick={downloadJson}>
+                Download JSON backup
+              </button>
+              <a
+                className="btn btn-secondary"
+                href={`mailto:?subject=${encodeURIComponent('Advisor panel draft')}&body=${encodeURIComponent(JSON.stringify(payload(), null, 2))}`}
+              >
+                Email backup
+              </a>
+            </div>
+          </>
+        )}
+        <div style={{ marginTop: '1.5rem', display: 'flex', justifyContent: 'space-between' }}>
+          <button type="button" className="btn btn-secondary" disabled={step === 0} onClick={() => setStep((s) => s - 1)}>
+            Back
+          </button>
+          {step < STEPS.length - 1 ? (
+            <button type="button" className="btn btn-primary" onClick={() => setStep((s) => s + 1)}>
+              Next
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/AuthPage.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { apiFetch } from '../api'
+import { useAuth } from '../context/AuthContext'
+
+export function AuthPage() {
+  const { setAuth } = useAuth()
+  const nav = useNavigate()
+  const [mode, setMode] = useState<'login' | 'register'>('login')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [err, setErr] = useState('')
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setErr('')
+    const path = mode === 'login' ? '/api/auth/login' : '/api/auth/register'
+    const body =
+      mode === 'login'
+        ? { email, password }
+        : { email, password, firstName, lastName }
+    const r = await apiFetch(path, {
+      method: 'POST',
+      body: JSON.stringify(body),
+      auth: false,
+    })
+    if (!r.ok) {
+      const j = await r.json().catch(() => ({}))
+      setErr(j.detail || 'Request failed')
+      return
+    }
+    const { access_token } = await r.json()
+    const me = await apiFetch('/api/auth/me', {
+      headers: { Authorization: `Bearer ${access_token}` },
+    })
+    if (!me.ok) {
+      setErr('Could not load profile')
+      return
+    }
+    const user = await me.json()
+    setAuth(user, access_token)
+    nav('/')
+  }
+
+  return (
+    <main className="section" style={{ maxWidth: 420 }}>
+      <h1>{mode === 'login' ? 'Sign in' : 'Create an account'}</h1>
+      <p style={{ color: 'var(--text-secondary)' }}>
+        Optional — an account saves drafts on the server. You can still explore without one.
+      </p>
+      {err && <p style={{ color: '#b91c1c' }}>{err}</p>}
+      <form onSubmit={submit}>
+        {mode === 'register' && (
+          <>
+            <div className="field">
+              <label>First name</label>
+              <input value={firstName} onChange={(e) => setFirstName(e.target.value)} required />
+            </div>
+            <div className="field">
+              <label>Last name</label>
+              <input value={lastName} onChange={(e) => setLastName(e.target.value)} required />
+            </div>
+          </>
+        )}
+        <div className="field">
+          <label>Email</label>
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+        </div>
+        <div className="field">
+          <label>Password (min 8 characters)</label>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            minLength={8}
+            required
+          />
+        </div>
+        <button type="submit" className="btn btn-primary" style={{ width: '100%' }}>
+          {mode === 'login' ? 'Sign in' : 'Register'}
+        </button>
+      </form>
+      <p style={{ marginTop: '1rem' }}>
+        {mode === 'login' ? (
+          <>
+            No account?{' '}
+            <button type="button" className="btn btn-ghost" onClick={() => setMode('register')}>
+              Register
+            </button>
+          </>
+        ) : (
+          <>
+            Already have an account?{' '}
+            <button type="button" className="btn btn-ghost" onClick={() => setMode('login')}>
+              Sign in
+            </button>
+          </>
+        )}
+      </p>
+      <p>
+        <Link to="/">← Back home</Link>
+      </p>
+    </main>
+  )
+}

frontend/src/pages/LandingPage.tsx

@@ -0,0 +1,146 @@
+const CU_DEMO = 'https://undergraddemo.neonaiservices2.com/'
+
+export function LandingPage() {
+  return (
+    <main>
+      <section className="landing-hero">
+        <h1>Looking for students to develop AI advisory panels</h1>
+        <p className="lead">
+          Join a <strong>non-coding</strong> Collaborative Conversational AI (CCAI) project with Neon.ai and CU:
+          you bring subject-matter passion — we help you shape it into a real AI experience you can list on your
+          resume and portfolio. No traditional programming required; you will name your panel, design personas and
+          advisors, and launch a working demo you can show employers.
+        </p>
+      </section>
+
+      <div className="benefit-grid">
+        <a className="benefit-card" href="#get-paid">
+          <h3>Get paid</h3>
+          <p>Paid project opportunities while you learn how modern AI assistants are built.</p>
+        </a>
+        <a className="benefit-card" href="#show-knowledge">
+          <h3>Show off your subject knowledge</h3>
+          <p>Your major and interests become the brain of an AI people can actually talk to.</p>
+        </a>
+        <a className="benefit-card" href="#portfolio">
+          <h3>Build your AI portfolio &amp; resume</h3>
+          <p>Ship a tangible demo: a panel or persona you can link to in applications and interviews.</p>
+        </a>
+      </div>
+
+      <section className="section">
+        <h2>See the CU Undergraduate Advisory Panel at work</h2>
+        <p>
+          <a href={CU_DEMO} target="_blank" rel="noreferrer">
+            Click here to open the live demo
+          </a>{' '}
+          — the course advisor brings professor ratings together with course schedule and availability information
+          from CU so you can plan your next semester in one conversational place.
+        </p>
+        <div className="placeholder-shot">Screenshot placeholder — advisor panel in action</div>
+        <div className="placeholder-shot">Screenshot placeholder — schedule &amp; ratings together</div>
+      </section>
+
+      <section className="section" id="stages">
+        <h2>How the project flows</h2>
+        <p>Each step links to more detail below. You will iterate with mentors and use the tools on this site.</p>
+        <div className="steps-row">
+          <a href="#stage-name">Name your panel</a>
+          <a href="#stage-personas">Design your personas</a>
+          <a href="#stage-advisors">Configure advisors</a>
+          <a href="#stage-launch">Test &amp; launch</a>
+        </div>
+      </section>
+
+      <section className="section" id="stage-name">
+        <h3>Name your panel</h3>
+        <p>
+          Pick a clear theme — e.g. &quot;CU Biology peer mentors&quot; or &quot;First-gen student success.&quot;
+          The name anchors everything else: who the AI speaks as, and who it helps.
+        </p>
+      </section>
+      <section className="section" id="stage-personas">
+        <h3>Design your personas</h3>
+        <p>
+          Personas define voice, tone, and boundaries: what the AI should sound like, what topics it covers, and
+          what it should defer to a human for. Use our guided form or conversational Q&amp;A.
+        </p>
+      </section>
+      <section className="section" id="stage-advisors">
+        <h3>Configure advisors</h3>
+        <p>
+          An advisor panel combines multiple viewpoints — for example a &quot;strict planner&quot; and a
+          &quot;encouraging coach.&quot; You define roles so the panel feels balanced and useful.
+        </p>
+      </section>
+      <section className="section" id="stage-launch">
+        <h3>Test &amp; press go</h3>
+        <p>
+          Try real questions, refine prompts with feedback, then publish your demo link for class and recruiters.
+        </p>
+      </section>
+
+      <section className="cta-block theme-persona" id="create-persona">
+        <h2>Create a Persona</h2>
+        <p>Structured form or a friendly chat that gathers the same information — your choice.</p>
+        <div className="cta-buttons">
+          <a className="btn btn-primary" href="/create-persona/form">
+            Fill out the form
+          </a>
+          <a className="btn btn-secondary" href="/create-persona/chat">
+            Interactive Q&amp;A
+          </a>
+        </div>
+      </section>
+
+      <section className="cta-block theme-advisor" id="create-advisor">
+        <h2>Create an Advisor Panel</h2>
+        <p>Describe your multi-advisor setup — form or guided conversation.</p>
+        <div className="cta-buttons">
+          <a className="btn btn-primary" href="/create-advisor/form">
+            Fill out the form
+          </a>
+          <a className="btn btn-secondary" href="/create-advisor/chat">
+            Interactive Q&amp;A
+          </a>
+        </div>
+      </section>
+
+      <section className="section" id="get-paid">
+        <h2>Get paid</h2>
+        <p>
+          Selected student contributors may receive compensation for milestones (e.g. completed persona, working
+          demo, final presentation). Details depend on the semester program — ask your faculty lead. The important
+          part: you are treated as a collaborator, not free labor for a black-box tool you did not help shape.
+        </p>
+      </section>
+      <section className="section" id="show-knowledge">
+        <h2>Show off your subject knowledge</h2>
+        <p>
+          Employers care that you can explain ideas clearly and care about users. Here, your expertise becomes the
+          curriculum the AI studies: readings you care about, jargon your community uses, and pitfalls only someone
+          in your field would flag.
+        </p>
+      </section>
+      <section className="section" id="portfolio">
+        <h2>Build your AI portfolio &amp; resume</h2>
+        <p>
+          You leave with artifacts you can show: a live or recorded demo, a short write-up of design choices, and a
+          story for interviews — &quot;I helped define an AI advisory panel for [audience] focusing on [topic].&quot;
+          That is legitimate AI product experience without requiring you to maintain Kubernetes.
+        </p>
+      </section>
+
+      <footer className="footer-site">
+        <p>
+          Built with Neon.ai&apos;s collaborative conversational AI ideas — private, customizable AI personalities
+          you can own. Learn more at{' '}
+          <a href="https://www.neon.ai/" target="_blank" rel="noreferrer">
+            neon.ai
+          </a>
+          .
+        </p>
+      </footer>
+    </main>
+  )
+}