Adopt FEAT cybersecurity branding, CSS, Canvas/Chat/Sidebar UI, HF Spaces deploy infra, SQLite shim wiring, last-week's advisor cap + thinking-indicator fixes

Dockerfile

@@ -1,45 +1,78 @@
-# syntax=docker/dockerfile:1
-FROM node:24-bookworm AS base
+# syntax=docker/dockerfile:1.7
+# ---------------------------------------------------------------------------
+# Cybersecurity Panel — single-container HuggingFace Spaces image.
+#
+# Mirrors the structural choices used by the working HF Spaces deployments
+# CCAI-Vibe-Demo and CU-Student-AIProject-Helper:
+#   * multi-stage Node frontend build → Python+SPA bundle
+#   * non-root user uid 1000, port 7860 (HF Spaces convention)
+#   * persistence on the HF Storage Bucket mount at /data (SQLite shim)
+#   * REACT_APP_API_URL is set to the empty string at build time so the SPA
+#     issues relative URLs and shares the FastAPI origin
+#
+# Build context: repo root (this file).
+# ---------------------------------------------------------------------------
 
-LABEL vendor=neon.ai \
-    ai.neon.name="CCAI-Demo"
+# ---- 1. Frontend build (CRA) ----------------------------------------------
+FROM node:20-bookworm AS frontend-build
+WORKDIR /app/frontend
 
-ENV OVOS_CONFIG_BASE_FOLDER=neon
-ENV OVOS_CONFIG_FILENAME=neon.yaml
-ENV XDG_CONFIG_HOME=/config
-
-RUN apt-get update && \
-    apt-get install -y --no-install-recommends \
-    python3 \
-    python3-pip \
-    && rm -rf /var/lib/apt/lists/*
-
-# ---- Python dependencies (cached unless requirements.txt changes) ----------
-WORKDIR /ccai/multi_llm_chatbot_backend
-COPY multi_llm_chatbot_backend/requirements.txt ./
-RUN --mount=type=cache,target=/root/.cache/pip \
-    pip install --break-system-packages -r requirements.txt
-
-# ---- Node dependencies (cached unless package.json changes) ----------------
-WORKDIR /ccai/phd-advisor-frontend
 COPY phd-advisor-frontend/package.json phd-advisor-frontend/package-lock.json* ./
 RUN --mount=type=cache,target=/root/.npm \
-    npm install
+    npm ci
+
+COPY phd-advisor-frontend/ ./
 
-# ---- Copy the rest of the source code (this layer changes often) -----------
-WORKDIR /ccai
-COPY . .
+# Empty REACT_APP_API_URL → CRA inlines '' so every fetch() hits the same
+# origin as the SPA (the FastAPI server below).
+ENV REACT_APP_API_URL=""
+RUN npm run build
 
-# ---- Backend target --------------------------------------------------------
-FROM base AS backend
-# Required for /api/voice/transcribe (browser WebM/Opus → WAV for Whisper).
+# ---- 2. Python runtime + SPA bundle ---------------------------------------
+FROM python:3.12-slim-bookworm
+
+# ffmpeg is required by the /api/voice/transcribe endpoint
+# (browser WebM/Opus → WAV for Whisper). Kept on the runtime image only,
+# not on the build image, so we don't pay the apt cost during incremental
+# code rebuilds.
 RUN apt-get update && \
     apt-get install -y --no-install-recommends ffmpeg && \
     rm -rf /var/lib/apt/lists/*
-WORKDIR /ccai/multi_llm_chatbot_backend
-CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]
 
-# ---- Frontend target -------------------------------------------------------
-FROM base AS frontend
-WORKDIR /ccai/phd-advisor-frontend
-CMD [ "npm", "start" ]
+# HF Spaces runs the container as uid 1000 and expects the app to do the
+# same; with a non-root user we cannot bind privileged ports, but :7860 is
+# fine.
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
+    PYTHONUNBUFFERED=1 \
+    CORS_ORIGINS=* \
+    DATA_DIR=/data \
+    CONFIG_PATH=/home/user/app/cybersecurity_config.yaml
+
+WORKDIR $HOME/app
+
+# ---- Python deps (cached unless requirements.txt changes) -----------------
+COPY --chown=user multi_llm_chatbot_backend/requirements.txt ./
+RUN --mount=type=cache,target=/home/user/.cache/pip,uid=1000,gid=1000 \
+    pip install --no-cache-dir --user -r requirements.txt
+
+# ---- Backend source -------------------------------------------------------
+COPY --chown=user multi_llm_chatbot_backend/ ./
+
+# ---- Top-level configuration files (config.yaml + persona definitions) ----
+COPY --chown=user cybersecurity_config.yaml ./cybersecurity_config.yaml
+COPY --chown=user phd_config.yaml ./phd_config.yaml
+COPY --chown=user undergrad_config.yaml ./undergrad_config.yaml
+COPY --chown=user personas/ ./personas/
+
+# ---- Frontend bundle ------------------------------------------------------
+# main.py mounts $HOME/app/static at "/" so the SPA is served same-origin
+# with the API.
+COPY --chown=user --from=frontend-build /app/frontend/build ./static
+
+ENV PYTHONPATH=$HOME/app
+
+EXPOSE 7860
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,6 +1,35 @@
-# PhD Advisory Panel
+---
+title: Cybersecurity Panel
+emoji: 🛡️
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+pinned: false
+app_port: 7860
+---
+
+# Cybersecurity Panel
+
+An AI-powered cybersecurity guidance system that provides expert advice through a panel of specialized advisor personas. Ask about threats, compliance, incident response, architecture, and career growth and get diverse perspectives from multiple AI advisors. Built on Neon AI's Collaborative Conversational AI (CCAI) framework.
+
+## Hugging Face Spaces deployment
+
+This Space ships as a single Docker image built from the repository root [`Dockerfile`](Dockerfile). The container does three things:
+
+1. Builds the React frontend (CRA) at image-build time with `REACT_APP_API_URL=""` so every `fetch` issues a relative URL.
+2. Serves the bundled SPA from FastAPI at `/`, with the API exposed on `/api/...`, `/auth/...`, etc., on the same `:7860` origin.
+3. Persists user data (auth, profiles, chat sessions, onboarding, canvas state) in **SQLite via `aiosqlite`** at `${DATA_DIR}/cybersecurity_panel.db`. Mount a Hugging Face Storage Bucket at `/data` to make the database survive Space rebuilds — there is **no MongoDB**, **no Atlas**, no third-party data plane (the persistence pattern follows [`CU-Student-AIProject-Helper`](https://github.com/NeonClary/CU-Student-AIProject-Helper)).
+
+### Required Space secrets
+
+| Secret | Purpose |
+|--------|---------|
+| `JWT_SECRET_KEY` | Signs auth tokens. Set this to a long random string. |
+| `GEMINI_API_KEY` | Powers the default Gemini provider (model: `gemini-2.5-flash`). |
+| `OPENAI_API_KEY` | Optional — only required if you switch to the OpenAI provider. |
+| `VLLM_API_KEY` | Optional — only required if you point the orchestrator/advisors at a Neon vLLM endpoint. |
+
 
-An AI-powered academic guidance system that provides personalized advice through specialized advisor personas. Get diverse perspectives on your PhD journey from multiple AI advisors, each bringing unique expertise in methodology, theory, and practical guidance.
 
 ## Features
 

docker-compose.yml

@@ -1,48 +1,39 @@
+# ---------------------------------------------------------------------------
+# Local-dev wrapper around the single-container HuggingFace Spaces image.
+#
+# This file used to spin up three services (FastAPI backend, CRA dev server,
+# MongoDB). The HF deployment shape (single-container, SQLite on the bucket)
+# is now also the local-dev shape — same image you push to the Space — so
+# this is a one-service compose with a named volume that emulates the HF
+# Storage Bucket mount.
+#
+# Override CYBERPANEL_HOST_PORT via .env (or shell) if 7861 conflicts; the
+# in-container port is fixed at 7860 to mirror HF Spaces.
+# ---------------------------------------------------------------------------
+
 services:
-  backend:
+  app:
     build:
       context: .
       dockerfile: Dockerfile
-      target: backend
+    image: cybersecurity-panel:dev
     ports:
-      - "8000:8000"
-    networks:
-      - application
-    depends_on:
-      - database
+      - "${CYBERPANEL_HOST_PORT:-7861}:7860"
     environment:
-      MONGODB_CONNECTION_STRING: "mongodb://database:27017"
-      MONGODB_DATABASE: phd_advisor
       JWT_SECRET_KEY: ${JWT_SECRET_KEY:-CHANGEME-by-overriding-in-dot-env-file}
-      GEMINI_API_KEY: ${GEMINI_API_KEY:-?}
+      GEMINI_API_KEY: ${GEMINI_API_KEY:-}
+      OPENAI_API_KEY: ${OPENAI_API_KEY:-}
       VLLM_API_KEY: ${VLLM_API_KEY:-}
-      CORS_ORIGINS: ${CORS_ORIGINS:-http://localhost:3000}
-      GEMINI_MODEL: gemini-2.5-flash
-      CONFIG_PATH: ${CONFIG_PATH:-/ccai/phd_config.yaml}
-  frontend:
-    build:
-      context: .
-      dockerfile: Dockerfile
-      target: frontend
-    ports:
-      - "3000:3000"
-    networks:
-      - application
-    depends_on:
-      - backend
-    environment:
-      REACT_APP_API_URL: ${REACT_APP_API_URL:-http://localhost:8000}
-      REACT_APP_TESTING_ONBOARDING: ${REACT_APP_TESTING_ONBOARDING:-false}
-  database:
-    image: mongo:8.0
+      VLLM_API_USERNAME: ${VLLM_API_USERNAME:-}
+      GEMINI_MODEL: ${GEMINI_MODEL:-gemini-2.5-flash}
+      CONFIG_PATH: ${CONFIG_PATH:-/home/user/app/cybersecurity_config.yaml}
+      # Same-origin in single-container; only relevant for cross-origin dev.
+      CORS_ORIGINS: ${CORS_ORIGINS:-*}
+      # SQLite + ChromaDB persistence both land here. The named volume below
+      # mirrors the HF Storage Bucket mount so user data survives rebuilds.
+      DATA_DIR: /data
     volumes:
-      - mongo_data:/data/db
-    networks:
-      - application
+      - cybersecurity_data:/data
+
 volumes:
-  mongo_data:
-networks:
-  application:
-    driver: bridge
-    driver_opts:
-      com.docker.network.bridge.host_binding_ipv4: "0.0.0.0"
+  cybersecurity_data:

multi_llm_chatbot_backend/app/api/routes/chat.py

@@ -16,12 +16,32 @@ from app.core.bootstrap import chat_orchestrator
 from app.core.database import get_database
 from app.core.session_manager import get_session_manager
 from app.models.user import User
+from app.api.routes.user_profile import PROFILE_FIELDS, enrich_profile_from_user
 
 logger = logging.getLogger(__name__)
 
 router = APIRouter()
 session_manager = get_session_manager()
 
+
+async def _attach_user_profile_context(session, user: User) -> None:
+    """Load Mongo profile + signup fields into session for persona prompts."""
+    try:
+        db = get_database()
+        doc = await db.user_profiles.find_one({"user_id": user.id})
+        profile = enrich_profile_from_user(doc, user)
+        parts = []
+        for key in PROFILE_FIELDS:
+            val = profile.get(key)
+            if val:
+                if isinstance(val, list):
+                    val = ", ".join(str(v) for v in val)
+                parts.append(f"{key}: {val}")
+        if parts:
+            session.user_profile_context = "USER SECURITY PROFILE: " + "; ".join(parts)
+    except Exception as prof_err:
+        logger.warning(f"Could not load user profile: {prof_err}")
+
 # Enhanced data models
 class UserInput(BaseModel):
     user_input: str
@@ -91,6 +111,7 @@ async def chat_stream(
                 sid = await get_or_create_session_for_request_async(request)
 
             session = session_manager.get_session(sid)
+            await _attach_user_profile_context(session, current_user)
 
             # Append user message to in-memory session and persist to MongoDB
             session.append_message("user", message.user_input)
@@ -137,11 +158,33 @@ async def chat_stream(
                 ).to_ndjson()
                 return
 
-            # Get personas most relevant to the current session
+            # Always relevance-rank to the top 3 advisors, scoped to the
+            # user's active-advisor selection (the header dropdown) when one is
+            # provided. The dropdown filters the candidate pool; the LLM
+            # ranking still picks the top 3 from that pool.
+            if message.active_advisors:
+                candidate_ids = [
+                    pid for pid in message.active_advisors
+                    if pid in chat_orchestrator.personas
+                ]
+            else:
+                candidate_ids = list(chat_orchestrator.personas.keys())
             top_personas = await chat_orchestrator.get_top_personas(
                 session_id=sid,
+                k=3,
+                candidate_ids=candidate_ids,
             )
 
+            # Tell the client which advisors will respond so it can show
+            # thinking indicators for just those, not the entire active pool.
+            yield ChatStreamLine(
+                type="progress",
+                data={
+                    "phase": "selected",
+                    "selected_advisors": top_personas,
+                },
+            ).to_ndjson()
+
             done_queue: asyncio.Queue = asyncio.Queue()
 
             async def _run(pid: str) -> None:
@@ -155,9 +198,10 @@ async def chat_stream(
                     await done_queue.put(result)
                 except Exception as e:
                     logger.exception(f"chat-stream _run failed for {pid}: {e}")
+                    failed_persona = chat_orchestrator.get_persona(pid)
                     await done_queue.put({
-                        "persona_id": persona.id,
-                        "persona_name": persona.name,
+                        "persona_id": pid,
+                        "persona_name": failed_persona.name if failed_persona else pid,
                         "response": f"I ran into a technical issue. Please try again. ({e!s})",
                         "used_documents": False,
                         "document_chunks_used": 0,

multi_llm_chatbot_backend/app/api/routes/chat_sessions.py

@@ -43,12 +43,7 @@ async def create_chat_session(
     request: CreateChatSessionRequest,
     current_user: User = Depends(get_current_active_user)
 ):
-    """
-    Create a new chat session for the authenticated user.
-    @param request: CreateChatSessionRequest with the session title
-    @param current_user: Authenticated user from dependency injection
-    @return: Dict with the new session id, title, timestamps, and message_count
-    """
+    """Create a new chat session for the user"""
     try:
         db = get_database()
         
@@ -85,13 +80,7 @@ async def get_user_chat_sessions(
     limit: int = 50,
     skip: int = 0
 ):
-    """
-    Get all active chat sessions for the authenticated user.
-    @param current_user: Authenticated user from dependency injection
-    @param limit: Maximum number of sessions to return (default 50)
-    @param skip: Number of sessions to skip for pagination (default 0)
-    @return: List of ChatSessionResponse sorted by most recently updated
-    """
+    """Get all chat sessions for the current user"""
     try:
         db = get_database()
         
@@ -124,11 +113,7 @@ async def get_user_chat_sessions(
 async def get_chat_sessions_count(
     current_user: User = Depends(get_current_active_user)
 ):
-    """
-    Get count of active, non-deleted chat sessions for the authenticated user.
-    @param current_user: Authenticated user from dependency injection
-    @return: Dict with the session count
-    """
+    """Get count of user's chat sessions"""
     try:
         db = get_database()
         user_object_id = ObjectId(str(current_user.id))
@@ -155,12 +140,7 @@ async def get_chat_session(
     session_id: str,
     current_user: User = Depends(get_current_active_user)
 ):
-    """
-    Get a specific chat session with all messages.
-    @param session_id: MongoDB ObjectId of the chat session
-    @param current_user: Authenticated user from dependency injection
-    @return: Dict with session id, title, messages, and timestamps
-    """
+    """Get a specific chat session with all messages"""
     try:
         db = get_database()
         
@@ -199,13 +179,7 @@ async def update_chat_session(
     request: UpdateChatSessionRequest,
     current_user: User = Depends(get_current_active_user)
 ):
-    """
-    Update a chat session's title and/or messages.
-    @param session_id: MongoDB ObjectId of the chat session
-    @param request: UpdateChatSessionRequest with optional title and messages
-    @param current_user: Authenticated user from dependency injection
-    @return: Dict with a confirmation message
-    """
+    """Update a chat session (title or messages)"""
     try:
         db = get_database()
         
@@ -252,13 +226,7 @@ async def save_message_to_session(
     request: SaveMessageRequest,
     current_user: User = Depends(get_current_active_user)
 ):
-    """
-    Add a message to a chat session.
-    @param session_id: MongoDB ObjectId of the chat session
-    @param request: SaveMessageRequest with the message dict
-    @param current_user: Authenticated user from dependency injection
-    @return: Dict with a confirmation message
-    """
+    """Add a message to a chat session"""
     try:
         db = get_database()
         
@@ -290,50 +258,12 @@ async def save_message_to_session(
     
 
 
-@router.delete("/chat-sessions")
-async def delete_all_chat_sessions(
-    current_user: User = Depends(get_current_active_user)
-):
-    """
-    Soft-delete all chat sessions for the authenticated user.
-    @param current_user: Authenticated user from dependency injection
-    @return: Dict with a confirmation message and the number of deleted sessions
-    """
-    try:
-        db = get_database()
-
-        result = await db.chat_sessions.update_many(
-            {
-                "user_id": current_user.id,
-                "is_active": True
-            },
-            {"$set": {"is_active": False, "updated_at": datetime.utcnow()}}
-        )
-
-        return {
-            "message": f"Deleted {result.modified_count} chat sessions",
-            "deleted_count": result.modified_count
-        }
-
-    except Exception as e:
-        logger.error(f"Error deleting all chat sessions for user {current_user.id}: {e}")
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail="Could not delete chat sessions"
-        )
-
-
 @router.delete("/chat-sessions/{session_id}")
 async def delete_chat_session(
     session_id: str,
     current_user: User = Depends(get_current_active_user)
 ):
-    """
-    Soft-delete a single chat session.
-    @param session_id: MongoDB ObjectId of the chat session
-    @param current_user: Authenticated user from dependency injection
-    @return: Dict with a confirmation message
-    """
+    """Delete a chat session (soft delete)"""
     try:
         db = get_database()
         

multi_llm_chatbot_backend/app/config.py

@@ -19,7 +19,6 @@ import yaml
 from pydantic import BaseModel, validator, Field, model_validator
 
 from app.utils.avatar_helpers import get_bundled_avatar_path
-from app.version import __version__
 
 logger = logging.getLogger(__name__)
 
@@ -49,11 +48,19 @@ class FeatureConfig(_IconValidatorMixin):
     icon: str = "HelpCircle"
 
 
+class UserAvatarOption(BaseModel):
+    id: str
+    icon: str = "User"
+    color: str = "#2563EB"
+    bg: str = "#EFF6FF"
+
+
 class AppConfig(BaseModel):
     title: str = "Advisor Canvas"
     subtitle: str = "AI-Powered Guidance"
     primary_color: str = "#7C3AED"
     footer_text: str = ""
+    user_avatars: List[UserAvatarOption] = []
 
 
 class HomepageConfig(BaseModel):
@@ -73,6 +80,8 @@ class LoginConfig(BaseModel):
     subtitle: str = "Sign in to continue"
     signup_subtitle: str = "Create your account to get personalized guidance from expert advisors"
     academic_stages: List[AcademicStage] = []
+    knowledge_levels: List[AcademicStage] = []
+    timezones: List[AcademicStage] = []
 
 
 class ExampleCategory(_IconValidatorMixin):
@@ -88,12 +97,6 @@ class ChatPageConfig(BaseModel):
     examples: List[ExampleCategory] = []
 
 
-class OnboardingConfig(BaseModel):
-    features: List[FeatureConfig] = []
-    tour_title: str = ""
-    tour_body: str = ""
-
-
 class PersonaItemConfig(_IconValidatorMixin):
     id: str
     name: str
@@ -154,7 +157,11 @@ class PersonaItemConfig(_IconValidatorMixin):
                 self.avatar, self.id,
             )
             return f"icon://{self.icon}"
-        base = os.getenv("REACT_APP_API_URL", "http://localhost:8000").rstrip("/")
+        # Default to empty string (→ relative URL) so single-origin Spaces
+        # deployments serve avatars off the same host as the SPA. Local
+        # ``npm start`` development setups can still set REACT_APP_API_URL
+        # explicitly to point at the backend on a different port.
+        base = os.getenv("REACT_APP_API_URL", "").rstrip("/")
         return f"{base}/api/avatars/bundled/{self.avatar}"
 
     def to_frontend_config(self) -> dict:
@@ -194,6 +201,7 @@ class PersonasConfig(BaseModel):
 
 class OrchestratorConfig(BaseModel):
     min_words_without_keywords: int = 6
+    conversation_history_token_threshold: int = 4000
     specific_keywords: List[str] = []
     clarification_questions: List[str] = [
             "Could you provide more details about what you need help with?"]
@@ -270,12 +278,30 @@ class OllamaConfig(BaseModel):
 class VllmConfig(BaseModel):
     api_url: str = ""
     api_key: str = Field(default=os.getenv("VLLM_API_KEY", ""))
+    api_username: str = Field(default=os.getenv("VLLM_API_USERNAME", ""))
+    model_id: str = ""
+    neon_persona_orchestrator: str = "vanilla"
+    neon_persona_advisors: str = "CybersecurityExpert"
+
+
+class OpenAIConfig(BaseModel):
+    api_key: str = Field(default=os.getenv("OPENAI_API_KEY", ""))
+    model: str = "gpt-5.4"
+    orchestrator_reasoning_effort: str = "low"
+    persona_reasoning_effort: str = "none"
+
+
+class ResilientConfig(BaseModel):
+    race_timeout_seconds: float = 3.0
 
 
 class LLMConfig(BaseModel):
+    provider: str = "gemini"
     gemini: GeminiConfig = GeminiConfig()
     ollama: OllamaConfig = OllamaConfig()
     vllm: VllmConfig = VllmConfig()
+    openai: OpenAIConfig = OpenAIConfig()
+    resilient: ResilientConfig = ResilientConfig()
 
 
 class RAGConfig(BaseModel):
@@ -311,7 +337,6 @@ class AppSettings(BaseModel):
     homepage: HomepageConfig = HomepageConfig()
     login: LoginConfig = LoginConfig()
     chat_page: ChatPageConfig = ChatPageConfig()
-    onboarding: OnboardingConfig = OnboardingConfig()
     personas: PersonasConfig = PersonasConfig()
     orchestrator: OrchestratorConfig = OrchestratorConfig()
     auth: AuthConfig = AuthConfig()
@@ -333,11 +358,9 @@ class AppSettings(BaseModel):
             "homepage": self.homepage.dict(),
             "login": self.login.dict(),
             "chat_page": self.chat_page.dict(),
-            "onboarding": self.onboarding.dict(),
             "personas": {
                 "items": [p.to_frontend_config() for p in self.personas.items],
             },
-            "version": __version__,
         }
 
 

multi_llm_chatbot_backend/app/core/canvas_database.py

@@ -1,68 +1,35 @@
+"""PhD Canvas database setup — SQLite-shim aware.
+
+The original implementation was a Mongo-only module that created compound
+indexes and a TTL index on the ``phd_canvases`` collection at startup. With
+the SQLite-on-HF-bucket persistence shim, the schema (including the
+``user_id`` index) is declared once at connection time inside
+``app.core.db``, so this module becomes a compatibility no-op.
+
+We keep the function signatures so any caller that still imports
+``setup_canvas_collections`` or ``cleanup_old_canvas_data`` keeps working.
+"""
+
 import logging
-from motor.motor_asyncio import AsyncIOMotorDatabase
+from typing import Any
 
 logger = logging.getLogger(__name__)
 
-async def setup_canvas_collections(db: AsyncIOMotorDatabase):
-    """Setup MongoDB collections and indexes for PhD Canvas"""
-    try:
-        collection = db.phd_canvases
-        
-        # Create simple indexes
-        await collection.create_index("user_id")
-        logger.info("Created index on user_id")
-        
-        await collection.create_index("last_updated", background=True)
-        logger.info("Created index on last_updated")
-        
-        # Create compound indexes
-        await collection.create_index([("user_id", 1), ("last_updated", -1)])
-        logger.info("Created compound index on user_id and last_updated")
-        
-        await collection.create_index([("user_id", 1), ("created_at", -1)])
-        logger.info("Created compound index on user_id and created_at")
-        
-        # Ensure TTL index for old canvases (optional cleanup after 2 years)
-        await collection.create_index(
-            "created_at", 
-            expireAfterSeconds=63072000  # 2 years in seconds
-        )
-        logger.info("Created TTL index for canvas cleanup")
-        
-        logger.info("PhD Canvas database setup completed successfully")
-        
-    except Exception as e:
-        logger.error("Error setting up canvas collections: %s", str(e))
-        raise
 
-async def cleanup_old_canvas_data(db: AsyncIOMotorDatabase):
-    """Cleanup old or orphaned canvas data (maintenance function)"""
-    try:
-        # Find canvases with no corresponding users (orphaned data)
-        pipeline = [
-            {
-                "$lookup": {
-                    "from": "users",
-                    "localField": "user_id", 
-                    "foreignField": "_id",
-                    "as": "user_data"
-                }
-            },
-            {
-                "$match": {
-                    "user_data": {"$size": 0}  # No matching user found
-                }
-            }
-        ]
-        
-        orphaned_canvases = await db.phd_canvases.aggregate(pipeline).to_list(length=100)
-        
-        if orphaned_canvases:
-            orphaned_ids = [canvas["_id"] for canvas in orphaned_canvases]
-            result = await db.phd_canvases.delete_many({"_id": {"$in": orphaned_ids}})
-            logger.info("Cleaned up %d orphaned canvas records", result.deleted_count)
-        else:
-            logger.info("No orphaned canvas records found")
-            
-    except Exception as e:
-        logger.error("Error during canvas cleanup: %s", str(e))
+async def setup_canvas_collections(db: Any) -> None:
+    """No-op on the SQLite shim — indexes are created by ``app.core.db``."""
+    logger.info(
+        "PhD Canvas setup: schema and indexes are managed by the SQLite shim; "
+        "skipping legacy Mongo index creation."
+    )
+
+
+async def cleanup_old_canvas_data(db: Any) -> None:
+    """Maintenance helper — disabled on the SQLite shim.
+
+    The original used a Mongo ``$lookup`` aggregation against the ``users``
+    collection, which the in-process aggregation runner doesn't support. If
+    you need the orphan cleanup, run it via a separate script that does two
+    passes (``users``, then ``phd_canvases``) and calls ``delete_many``.
+    """
+    logger.info("cleanup_old_canvas_data is a no-op on the SQLite shim.")

multi_llm_chatbot_backend/app/core/database.py

@@ -1,83 +1,50 @@
-import os
-from motor.motor_asyncio import AsyncIOMotorClient
-from pymongo.errors import ConnectionFailure
+"""Database connection facade.
+
+Used to wrap pymongo / motor against a real MongoDB instance. For Hugging
+Face Spaces deployment we now back the same public API with SQLite on a HF
+Storage Bucket mount (see ``app.core.db``). The shim emulates the Mongo
+idioms the routers and services use, so this module simply forwards to it
+and keeps the legacy ``connect_to_mongo`` / ``close_mongo_connection`` /
+``get_database`` API intact for ``main.py`` and the route files.
+"""
+
 import logging
 
-from app.config import get_settings
+from app.core.db import _close, _open, get_database as _get_database
 
 logger = logging.getLogger(__name__)
 
-class Database:
-    client: AsyncIOMotorClient = None
-    database = None
-
-db = Database()
 
-async def connect_to_mongo():
-    """Create database connection"""
+async def connect_to_mongo() -> None:
+    """Open the SQLite-backed database and run schema bootstrap."""
+    await _open()
+    logger.info("SQLite-backed database ready (Mongo API shim active).")
+    # Legacy hook: previously called ``setup_canvas_collections`` here.
+    # The phd_canvases table is already declared in the shim's schema, so
+    # the call below is a no-op but kept for symmetry with the original
+    # startup path.
     try:
-        settings = get_settings()
+        from app.core.canvas_database import setup_canvas_collections
 
-        # Connection string: config.yaml → env var fallback (handled by Pydantic validator)
-        mongo_url = settings.mongodb.connection_string
-        if not mongo_url:
-            # Last-resort fallback to raw env var (backwards compat)
-            mongo_url = os.getenv("MONGODB_CONNECTION_STRING", "")
-        if not mongo_url:
-            raise ValueError(
-                "MongoDB connection string not set. "
-                "Provide it in config.yaml (mongodb.connection_string) "
-                "or as the MONGODB_CONNECTION_STRING environment variable."
-            )
+        await setup_canvas_collections(_get_database())
+        logger.info("Canvas database initialization completed (no-op on SQLite shim).")
+    except Exception as canvas_error:  # pragma: no cover
+        logger.error(f"Canvas database initialization failed: {canvas_error}")
 
-        db_name = settings.mongodb.database_name
-        
-        db.client = AsyncIOMotorClient(mongo_url)
-        db.database = db.client[db_name]
-        
-        # Test connection
-        await db.client.admin.command('ping')
 
-        logger.info(f"Successfully connected to MongoDB database: {db_name}")
-        
-        # Create indexes for better performance
-        await create_indexes()
-        try:
-            from app.core.canvas_database import setup_canvas_collections
-            await setup_canvas_collections(db.database)  # Pass db directly
-            logger.info("Canvas database initialization completed")
-        except Exception as canvas_error:
-            logger.error(f"Canvas database initialization failed: {canvas_error}")
-        
-    except ConnectionFailure as e:
-        logger.error(f"Failed to connect to MongoDB: {e}")
-        raise
-    except Exception as e:
-        logger.error(f"Unexpected error connecting to MongoDB: {e}")
-        raise
+async def close_mongo_connection() -> None:
+    """Best-effort connection close on FastAPI shutdown."""
+    await _close()
+    logger.info("Disconnected from SQLite-backed database.")
 
-async def close_mongo_connection():
-    """Close database connection"""
-    if db.client:
-        db.client.close()
-        logger.info("Disconnected from MongoDB")
 
-async def create_indexes():
-    """Create database indexes for performance"""
-    try:
-        # Index for users collection
-        await db.database.users.create_index("email", unique=True)
-        await db.database.users.create_index("created_at")
-        
-        # Indexes for chat_sessions collection
-        await db.database.chat_sessions.create_index("user_id")
-        await db.database.chat_sessions.create_index("created_at")
-        await db.database.chat_sessions.create_index([("user_id", 1), ("created_at", -1)])
-        
-        logger.info("Database indexes created successfully")
-    except Exception as e:
-        logger.warning(f"Error creating indexes: {e}")
+async def create_indexes() -> None:
+    """Index creation is handled by the shim's schema bootstrap; kept for
+    backwards compatibility so any out-of-process maintenance script that
+    imports this name keeps working."""
+    return None
+
 
 def get_database():
-    """Get database instance"""
-    return db.database
+    """Return the SQLite-backed Mongo-API-compatible Database object."""
+    return _get_database()

multi_llm_chatbot_backend/app/core/improved_orchestrator.py

@@ -6,6 +6,7 @@ from app.core.rag_manager import get_rag_manager
 from app.config import get_settings
 from app.llm.llm_client import LLMClient, ToolCallResult
 from app.tools import get_tool_definitions, get_tool_executor
+from app.utils.chat_summary import generate_conversation_context_summary
 
 import json
 import logging
@@ -61,15 +62,13 @@ class ImprovedChatOrchestrator:
             return ToolCallResult(text="", used_tool=False)
 
         system_prompt = (
-            "You are a helpful assistant with access to external tools. "
-            "Use the available tools when the user's question can be answered "
-            "by one of them. If no tool is relevant, respond with a brief "
-            "text answer. "
-            "If a tool response includes 'truncated': true, let the user know "
-            "how many total results were found and suggest they narrow their "
-            "search for more specific results. "
-            "Format your responses using markdown. Use bullet points "
-            "to present structured data like course listings or professor ratings."
+            "You are a helpful cybersecurity assistant with access to external tools. "
+            "Use the available tools when the user's question can be answered by one of them. "
+            "Call get_current_datetime when the user asks about today, deadlines, timelines, "
+            "schedules, incident timing, or when accurate date/time context would improve "
+            "your guidance — then weave the result into your answer. "
+            "If no tool is relevant, respond with a brief text answer. "
+            "Format your responses using markdown."
         )
 
         return await self.llm_client.generate_with_tools(
@@ -687,9 +686,14 @@ When analyzing the document context:
         """
         enhanced_context = []
 
-        # Get recent conversation history (last 6 messages for efficiency)
-        recent_messages = session.messages[-6:] if len(session.messages) > 6 else session.messages
-        
+        conversation_messages = [
+            m for m in session.messages if m.get("role") != "system"
+        ]
+        history_tokens = self.context_manager._estimate_tokens_for_messages(
+            conversation_messages
+        )
+        threshold = get_settings().orchestrator.conversation_history_token_threshold
+
         # Check if we actually have meaningful document content
         has_documents = bool(document_context and document_context.strip() and len(document_context.strip()) > 50)
         
@@ -711,11 +715,6 @@ When analyzing the document context:
 
     Always cite your sources when referencing information from their documents using the format: "According to your [document_name]..." or "In your [section_name] from [document_name]..."
     """
-            
-            enhanced_context.append({
-                "role": "system",
-                "content": system_message
-            })
         else:
             # NO DOCUMENTS - Explicitly tell persona not to reference documents
             system_message = f"""{persona.system_prompt}
@@ -728,19 +727,58 @@ When analyzing the document context:
     3. Provide general guidance based on best practices in your area of expertise
 
     Do NOT make up document names or pretend to have access to files that don't exist."""
-            
-            enhanced_context.append({
-                "role": "system", 
-                "content": system_message
-            })
 
-        # Add recent conversation messages (excluding system messages to avoid duplication)
-        for message in recent_messages:
-            if message.get('role') != 'system':
+        if hasattr(session, "user_profile_context") and session.user_profile_context:
+            system_message += (
+                f"\n\n{session.user_profile_context}\n"
+                "Use this background to calibrate technical depth, examples, and priorities."
+            )
+
+        enhanced_context.append({
+            "role": "system",
+            "content": system_message,
+        })
+
+        if history_tokens < threshold:
+            for message in conversation_messages:
                 enhanced_context.append({
-                    "role": message['role'],
-                    "content": message['content']
+                    "role": message["role"],
+                    "content": message["content"],
                 })
+        else:
+            msg_count = len(conversation_messages)
+            if (
+                session.conversation_summary
+                and session.conversation_summary_message_count == msg_count
+            ):
+                summary = session.conversation_summary
+            else:
+                llm = self.llm_client
+                if llm is None and self.personas:
+                    llm = next(iter(self.personas.values())).llm
+                persona_names = {p.id: p.name for p in self.personas.values()}
+                summary = ""
+                if llm is not None:
+                    summary = await generate_conversation_context_summary(
+                        conversation_messages,
+                        llm,
+                        persona_names=persona_names,
+                    )
+                if summary:
+                    session.conversation_summary = summary
+                    session.conversation_summary_message_count = msg_count
+                    system_message += f"\n\nSummary of earlier conversation:\n{summary}"
+                    enhanced_context[0]["content"] = system_message
+                else:
+                    logger.warning(
+                        "Summary generation failed; including full history (%d tokens)",
+                        history_tokens,
+                    )
+                    for message in conversation_messages:
+                        enhanced_context.append({
+                            "role": message["role"],
+                            "content": message["content"],
+                        })
 
         return enhanced_context
     
@@ -871,10 +909,19 @@ When analyzing the document context:
             }
         
 
-    async def get_top_personas(self, session_id: str, k: int = 3) -> List[str]:
+    async def get_top_personas(
+        self,
+        session_id: str,
+        k: int = 3,
+        candidate_ids: Optional[List[str]] = None,
+    ) -> List[str]:
         """
         Use the LLM to rank personas based on current session context.
         Falls back to default persona order if LLM fails or returns invalid data.
+
+        When ``candidate_ids`` is provided (e.g., from the header's advisor
+        selection dropdown) ranking is restricted to that pool so users only
+        receive responses from advisors they've enabled.
         """
         try:
             session = self.session_manager.get_session(session_id)
@@ -883,22 +930,33 @@ When analyzing the document context:
                 logger.warning("No personas registered.")
                 return []
 
+            if candidate_ids:
+                candidate_personas = {
+                    pid: self.personas[pid]
+                    for pid in candidate_ids
+                    if pid in self.personas
+                }
+                if not candidate_personas:
+                    candidate_personas = dict(self.personas)
+            else:
+                candidate_personas = dict(self.personas)
+
             # Use the LLM from one of the existing persona objects
-            llm = next(iter(self.personas.values())).llm
+            llm = next(iter(candidate_personas.values())).llm
 
             # Use recent conversation context (last 5 messages)
             recent_context = "\n".join(
                 msg['content'] for msg in session.get_recent_messages(5)
             )
 
-            # Format available persona descriptions
+            # Format available persona descriptions (only the candidate pool)
             persona_descriptions = "\n".join([
                 f"- ID: {p.id}\n  Name: {p.name}\n  Prompt: {p.system_prompt.strip()}"
-                for p in self.personas.values()
+                for p in candidate_personas.values()
             ])
 
-            # Ensure k does not exceed the number of available personas
-            k = min(k, len(self.personas))
+            # Ensure k does not exceed the number of candidate personas
+            k = min(k, len(candidate_personas))
 
             app_title = get_settings().app.title
 
@@ -935,15 +993,19 @@ When analyzing the document context:
             if isinstance(top_ids, dict):
                 top_ids = next(iter(top_ids.values()), [])
 
-            # Step 3: Filter valid persona IDs
-            valid_ids = [pid for pid in top_ids if pid in self.personas]
+            # Step 3: Filter valid persona IDs against the candidate pool
+            valid_ids = [pid for pid in top_ids if pid in candidate_personas]
 
             if len(valid_ids) < k:
                 logger.warning(f"LLM returned insufficient or invalid IDs. Got: {valid_ids}")
-                return list(self.personas.keys())[:k]
+                return list(candidate_personas.keys())[:k]
 
             return valid_ids[:k]
 
         except Exception as e:
             logger.error(f"Error selecting top personas: {e}")
+            if candidate_ids:
+                fallback_ids = [pid for pid in candidate_ids if pid in self.personas]
+                if fallback_ids:
+                    return fallback_ids[:k]
             return list(self.personas.keys())[:k]

multi_llm_chatbot_backend/app/core/rag_manager.py

@@ -12,6 +12,20 @@ from pathlib import Path
 
 logger = logging.getLogger(__name__)
 
+
+def _default_chroma_path(subdir: str) -> str:
+    """Resolve the default ChromaDB persistence directory.
+
+    On HF Spaces (and any deployment that sets ``DATA_DIR``) the embeddings
+    must live on the bucket mount so they survive Space rebuilds. In local
+    dev DATA_DIR is unset, so we keep the historical working-directory path
+    so existing local installs and tests don't move their data.
+    """
+    data_dir = os.environ.get("DATA_DIR", "").strip()
+    if data_dir:
+        return str(Path(data_dir) / "chroma" / subdir)
+    return f"./{subdir}"
+
 # Download required NLTK data
 try:
     nltk.data.find('tokenizers/punkt')
@@ -177,14 +191,16 @@ class RAGManager:
     Handles document storage, embedding, and retrieval using ChromaDB
     """
     
-    def __init__(self, embedding_model: str = None, persist_directory: str = "./chroma_db"):
+    def __init__(self, embedding_model: str = None, persist_directory: str = None):
         from app.config import get_settings
         settings = get_settings()
         if embedding_model is None:
             embedding_model = settings.rag.embedding_model
         self.embedding_model_name = embedding_model
+        if persist_directory is None:
+            persist_directory = _default_chroma_path("chroma_db")
         self.persist_directory = Path(persist_directory)
-        self.persist_directory.mkdir(exist_ok=True)
+        self.persist_directory.mkdir(parents=True, exist_ok=True)
         
         # Initialize embedding model
         logger.info(f"Loading embedding model: {embedding_model}")
@@ -459,13 +475,15 @@ class RAGManager:
 
 
 class EnhancedRAGManager:
-    def __init__(self, persist_directory: str = "./chromadb_storage"):
+    def __init__(self, persist_directory: str = None):
         """Initialize enhanced RAG manager with improved document handling"""
         from app.config import get_settings
         settings = get_settings()
 
+        if persist_directory is None:
+            persist_directory = _default_chroma_path("chromadb_storage")
         self.persist_directory = persist_directory
-        Path(persist_directory).mkdir(exist_ok=True)
+        Path(persist_directory).mkdir(parents=True, exist_ok=True)
         
         # Initialize ChromaDB client
         self.client = chromadb.PersistentClient(

multi_llm_chatbot_backend/app/main.py

@@ -1,9 +1,9 @@
 import os
-from dotenv import load_dotenv
+from pathlib import Path
 
-load_dotenv()
+from app.core.env_loader import load_application_env
 
-from pathlib import Path
+load_application_env()
 
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
@@ -12,7 +12,6 @@ from contextlib import asynccontextmanager
 
 # Load configuration FIRST so every module can use it
 from app.config import load_settings
-from app.version import __version__
 settings = load_settings()
 
 # Import the new database functions
@@ -23,6 +22,8 @@ from app.api.routes import router as main_router
 from app.api.routes.auth import router as auth_router
 from app.api.routes.chat_sessions import router as chat_sessions_router
 from app.api.routes.phd_canvas import router as phd_canvas_router
+from app.api.routes.user_profile import router as user_profile_router
+from app.api.routes.onboarding import router as onboarding_router
 
 import logging
 
@@ -41,7 +42,7 @@ async def lifespan(app: FastAPI):
 
 app = FastAPI(
     title=f"{settings.app.title} Backend",
-    version=__version__,
+    version="2.0.0",
     lifespan=lifespan
 )
 
@@ -61,6 +62,8 @@ app.include_router(main_router)
 app.include_router(auth_router, prefix="/auth", tags=["authentication"])
 app.include_router(chat_sessions_router, prefix="/api", tags=["chat-sessions"])
 app.include_router(phd_canvas_router, prefix="/api", tags=["phd-canvas"])
+app.include_router(user_profile_router, prefix="/api", tags=["user-profile"])
+app.include_router(onboarding_router, prefix="/api", tags=["onboarding"])
 
 # Serve bundled avatar images
 _avatars_dir = Path(__file__).resolve().parent / "assets" / "avatars"
@@ -80,17 +83,34 @@ def get_public_config():
     """Return the public (non-secret) application configuration."""
     return settings.get_frontend_config()
 
-@app.get("/")
-def root():
-    return {
-        "message": f"{settings.app.title} Backend",
-        "version": __version__,
-        "features": [
-            "User Authentication", 
-            "Persistent Chat Sessions",
-            "MongoDB Integration",
-            "Ollama Support", 
-            "Gemini API Support",
-            "Configurable Personas"
-        ]
-    }
+
+# ---------------------------------------------------------------------------
+# Static SPA mount — Hugging Face Spaces / single-container deployment
+# ---------------------------------------------------------------------------
+# When the Docker build copies the React production bundle into ``./static``
+# (sibling of this app/ directory), expose it at "/" so the API and the
+# SPA share the FastAPI origin. In local development the static dir is
+# absent and a JSON banner is returned at "/" instead.
+_static_dir = Path(__file__).resolve().parent.parent / "static"
+_should_mount_static = _static_dir.is_dir()
+
+if _should_mount_static:
+    app.mount(
+        "/",
+        StaticFiles(directory=str(_static_dir), html=True),
+        name="spa",
+    )
+else:
+    @app.get("/")
+    def root():
+        return {
+            "message": f"{settings.app.title} Backend",
+            "version": "2.0.0",
+            "features": [
+                "User Authentication",
+                "Persistent Chat Sessions (SQLite via aiosqlite)",
+                "Ollama Support",
+                "Gemini API Support",
+                "Configurable Personas",
+            ],
+        }

multi_llm_chatbot_backend/app/utils/chroma_client.py

@@ -1,8 +1,29 @@
+import os
+from pathlib import Path
+
 import chromadb
 from chromadb.config import Settings
+
 from app.llm.embedding_client import get_embedding
 
-client = chromadb.PersistentClient(path="./chroma_storage")
+
+def _persona_knowledge_path() -> str:
+    """Resolve the persona-knowledge ChromaDB path.
+
+    Mirrors ``app.core.rag_manager._default_chroma_path``: when ``DATA_DIR``
+    is set (HF Spaces, any bucket-mounted deployment) the embeddings live
+    under ``${DATA_DIR}/chroma/persona_knowledge`` so they survive Space
+    rebuilds. Local installs keep the historical relative path.
+    """
+    data_dir = os.environ.get("DATA_DIR", "").strip()
+    if data_dir:
+        return str(Path(data_dir) / "chroma" / "persona_knowledge")
+    return "./chroma_storage"
+
+
+_path = _persona_knowledge_path()
+Path(_path).mkdir(parents=True, exist_ok=True)
+client = chromadb.PersistentClient(path=_path)
 
 collection = client.get_or_create_collection("persona_knowledge")
 

multi_llm_chatbot_backend/requirements.txt

@@ -6,6 +6,7 @@ python-multipart~=0.0
 # HTTP client for LLM APIs
 httpx~=0.28
 openai~=2.30
+huggingface-hub~=0.36
 
 # Document processing
 PyPDF2~=3.0
@@ -31,9 +32,11 @@ markdown~=3.0
 # PDF generation and export
 reportlab~=4.4
 
-# Database (MongoDB)
+# Persistence: SQLite via aiosqlite on the HF Storage Bucket mount (no MongoDB).
+# pymongo is kept *only* for bson.ObjectId and the DuplicateKeyError /
+# PyMongoError types that the existing routers and the SQLite shim raise.
+aiosqlite~=0.20
 pymongo~=4.16
-motor~=3.7
 
 # Authentication and security
 passlib[bcrypt]~=1.7

phd-advisor-frontend/package-lock.json

@@ -8,17 +8,22 @@
       "name": "phd-advisor-frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@reactour/tour": "^3.8.0",
+        "@codemirror/legacy-modes": "^6.5.2",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "@uiw/react-codemirror": "^4.25.9",
+        "katex": "^0.16.45",
+        "latex.js": "^0.12.6",
         "lucide-react": "^0.544.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-markdown": "^10.1.0",
         "react-scripts": "5.0.1",
+        "rehype-katex": "^7.0.1",
         "remark-gfm": "^4.0.1",
+        "remark-math": "^6.0.0",
         "web-vitals": "^2.1.4"
       }
     },
@@ -2069,6 +2074,108 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "license": "MIT"
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.20.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.2.tgz",
+      "integrity": "sha512-G5FPkgIiLjOgZMjqVjvuKQ1rGPtHogLldJr33eFJdVLtmwY+giGrlv/ewljLz6b9BSQLkjxuwBc6g6omDM+YxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.3.tgz",
+      "integrity": "sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.6.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.12.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.3.tgz",
+      "integrity": "sha512-QwCZW6Tt1siP37Jet9Tb02Zs81TQt6qQrZR2H+eGMcFsL1zMrk2/b9CLC7/9ieP1fjIUMgviLWMmgiHoJrj+ZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/legacy-modes": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.5.2.tgz",
+      "integrity": "sha512-/jJbwSTazlQEDOQw2FJ8LEEKVS72pU0lx6oM54kGpL8t/NJ2Jda3CZ4pcltiKTdqYSRk3ug1B3pil1gsjA6+8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.9.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.6.tgz",
+      "integrity": "sha512-6Kp7r6XfCi/D/5sdXieMfg9pJU1bUEx96WITuLU6ESaKizCz0QHFMjY/TaFSbigDdEAIgi93itLBIUETP4oK+A==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.42.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.7.0.tgz",
+      "integrity": "sha512-ZvGm99wc/s2cITtMT15LFdn8aH/aS+V+DqyGq/N5ZlV5vWtH+nILvC2nw0zX7ByNoHHDZ2IxxdW38O0tc5nVHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.37.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.6.0.tgz",
+      "integrity": "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.42.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.42.1.tgz",
+      "integrity": "sha512-ToN3oFc0nsxNUYVF5P0ztLgbC4UPPjPtA9aKYhkOKQaZASpOUo6ISXyQLP66ctVwlDc+j6Jv0uK5IFALkiXztg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.6.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@csstools/normalize.css": {
       "version": "12.1.1",
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.1.1.tgz",
@@ -2967,6 +3074,36 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "license": "MIT"
     },
+    "node_modules/@lezer/common": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.2.tgz",
+      "integrity": "sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
+      "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.10.tgz",
+      "integrity": "sha512-rnCpTIBafOx4mRp43xOxDJbFipJm/c0cia/V5TiGlhmMa+wsSdoGmUN3w5Bqrks/09Q/D4tNAmWaT8p6NRi77A==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "license": "MIT"
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -3033,6 +3170,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+      "license": "MIT"
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -3091,57 +3234,6 @@
         }
       }
     },
-    "node_modules/@reactour/mask": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@reactour/mask/-/mask-1.2.0.tgz",
-      "integrity": "sha512-XLgBLWfKJybtZjNTSO5lt/SIvRlCZBadB6JfE/hO1ErqURRjYhnv+edC0Ki1haUCqMGFppWk3lwcPCjmK0xNog==",
-      "license": "MIT",
-      "dependencies": {
-        "@reactour/utils": "*"
-      },
-      "peerDependencies": {
-        "react": "16.x || 17.x || 18.x || 19.x"
-      }
-    },
-    "node_modules/@reactour/popover": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@reactour/popover/-/popover-1.3.0.tgz",
-      "integrity": "sha512-YdyjSmHPvEeQEcJM4gcGFa5pI/Yf4nZGqwG4JnT+rK1SyUJBIPnm4Gkl/h7/+1g0KCFMkwNwagS3ZiXvZB7ThA==",
-      "license": "MIT",
-      "dependencies": {
-        "@reactour/utils": "*"
-      },
-      "peerDependencies": {
-        "react": "16.x || 17.x || 18.x || 19.x"
-      }
-    },
-    "node_modules/@reactour/tour": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/@reactour/tour/-/tour-3.8.0.tgz",
-      "integrity": "sha512-KZTFi1pAvoTVKKRdBN5+XCYxXBp4k4Ql/acZcXyPvec8VU24fkMSEeV+v8krfYQpoVcewxIu3gM6xWZZLjxi7w==",
-      "license": "MIT",
-      "dependencies": {
-        "@reactour/mask": "*",
-        "@reactour/popover": "*",
-        "@reactour/utils": "*"
-      },
-      "peerDependencies": {
-        "react": "16.x || 17.x || 18.x || 19.x"
-      }
-    },
-    "node_modules/@reactour/utils": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@reactour/utils/-/utils-0.6.0.tgz",
-      "integrity": "sha512-GqaLjQi7MJsgtAKjdiw2Eak1toFkADoLRnm1+HZpaD+yl+DkaHpC1N7JAl+kVOO5I17bWInPA+OFbXjO9Co8Qg==",
-      "license": "MIT",
-      "dependencies": {
-        "@rooks/use-mutation-observer": "^4.11.2",
-        "resize-observer-polyfill": "^1.5.1"
-      },
-      "peerDependencies": {
-        "react": "16.x || 17.x || 18.x || 19.x"
-      }
-    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3221,15 +3313,6 @@
       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
       "license": "MIT"
     },
-    "node_modules/@rooks/use-mutation-observer": {
-      "version": "4.11.2",
-      "resolved": "https://registry.npmjs.org/@rooks/use-mutation-observer/-/use-mutation-observer-4.11.2.tgz",
-      "integrity": "sha512-vpsdrZdr6TkB1zZJcHx+fR1YC/pHs2BaqcuYiEGjBVbwY5xcC49+h0hAUtQKHth3oJqXfIX/Ng8S7s5HFHdM/A==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -3499,6 +3582,15 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.21.tgz",
+      "integrity": "sha512-jI/VAmtdjB/RnI8GTnokyX7Ug8c+g+ffD6QRLa6XQewtnGyukKkKSk3wLTM3b5cjt1jNh9x0jfVlagdN2gDKQg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -3858,6 +3950,12 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "license": "MIT"
     },
+    "node_modules/@types/katex": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.8.tgz",
+      "integrity": "sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==",
+      "license": "MIT"
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -3927,6 +4025,16 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
       "license": "MIT"
     },
+    "node_modules/@types/react": {
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4258,6 +4366,59 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@uiw/codemirror-extensions-basic-setup": {
+      "version": "4.25.9",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.25.9.tgz",
+      "integrity": "sha512-QFAqr+pu6lDmNpAlecODcF49TlsrZ0bj15zPzfhiqSDl+Um3EsDLFLppixC7kFLn+rdDM2LTvVjn5CPvefpRgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@codemirror/autocomplete": ">=6.0.0",
+        "@codemirror/commands": ">=6.0.0",
+        "@codemirror/language": ">=6.0.0",
+        "@codemirror/lint": ">=6.0.0",
+        "@codemirror/search": ">=6.0.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0"
+      }
+    },
+    "node_modules/@uiw/react-codemirror": {
+      "version": "4.25.9",
+      "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.25.9.tgz",
+      "integrity": "sha512-HftqCBUYShAOH0pGi1CHP8vfm5L8fQ3+0j0VI6lQD6QpK+UBu3J7nxfEN5O/BXMilMNf9ZyFJRvRcuMMOLHMng==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.6",
+        "@codemirror/commands": "^6.1.0",
+        "@codemirror/state": "^6.1.1",
+        "@codemirror/theme-one-dark": "^6.0.0",
+        "@uiw/codemirror-extensions-basic-setup": "4.25.9",
+        "codemirror": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@babel/runtime": ">=7.11.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/theme-one-dark": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0",
+        "codemirror": ">=6.0.0",
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
@@ -4429,6 +4590,15 @@
       "deprecated": "Use your platform's native atob() and btoa() methods instead",
       "license": "BSD-3-Clause"
     },
+    "node_modules/abbrev": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
+      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -5278,6 +5448,26 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -5416,6 +5606,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
     "node_modules/browser-process-hrtime": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
@@ -5797,6 +5996,15 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -5892,6 +6100,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/codemirror": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
+      "integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
@@ -6025,6 +6248,16 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "license": "MIT"
     },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
     "node_modules/confusing-browser-globals": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
@@ -6139,6 +6372,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -6537,6 +6776,13 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "license": "MIT"
     },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -6817,6 +7063,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -7017,6 +7269,57 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "license": "MIT"
     },
+    "node_modules/editorconfig": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.7.tgz",
+      "integrity": "sha512-e0GOtq/aTQhVdNyDU9e02+wz9oDDM+SIOQxWME2QRjzRX5yyLAuHDE+0aE8vHb9XRC8XD37eO2u57+F09JqFhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@one-ini/wasm": "0.1.1",
+        "commander": "^10.0.0",
+        "minimatch": "^9.0.1",
+        "semver": "^7.5.3"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/brace-expansion": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/editorconfig/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -8438,6 +8741,23 @@
         }
       }
     },
+    "node_modules/fontkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
+      "integrity": "sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.5.12",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -9055,10 +9375,129 @@
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "license": "MIT",
       "dependencies": {
-        "function-bind": "^1.1.2"
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hast-util-from-dom": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-from-dom/-/hast-util-from-dom-5.0.1.tgz",
+      "integrity": "sha512-N+LqofjR2zuzTjCPzyDUdSshy4Ma6li7p/c3pA78uTwzFgENbgbUrm2ugwsOdcjI1muO+o6Dgzp9p8WHtn/39Q==",
+      "license": "ISC",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hastscript": "^9.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz",
+      "integrity": "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.1.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "parse5": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html-isomorphic": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-from-html-isomorphic/-/hast-util-from-html-isomorphic-2.0.0.tgz",
+      "integrity": "sha512-zJfpXq44yff2hmE0XmwEOzdWin5xwH+QIhMLOScpX91e/NSGPsAzNCvLQDIEPyO2TXi+lBmU6hjLIhV8MwP2kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-from-dom": "^5.0.0",
+        "hast-util-from-html": "^2.0.0",
+        "unist-util-remove-position": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
+      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "property-information": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-is-element": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
       },
-      "engines": {
-        "node": ">= 0.4"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
     "node_modules/hast-util-to-jsx-runtime": {
@@ -9088,6 +9527,22 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-text": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
+      "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "hast-util-is-element": "^3.0.0",
+        "unist-util-find-after": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-whitespace": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
@@ -9101,6 +9556,23 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -9385,6 +9857,28 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/hyphenation.de": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/hyphenation.de/-/hyphenation.de-0.2.1.tgz",
+      "integrity": "sha512-s6Y4TFA8xWjRLneOPI6HV/+wzfm2c2yurTvFaXlznmsbeI6waZhMpxu94fSXGNGsrPxrzI1zTtYDEWeEeaANnw==",
+      "dependencies": {
+        "hypher": "*"
+      }
+    },
+    "node_modules/hyphenation.en-us": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/hyphenation.en-us/-/hyphenation.en-us-0.2.1.tgz",
+      "integrity": "sha512-ItXYgvIpfN8rfXl/GTBQC7DsSb5PPsKh9gGzViK/iWzCS5mvjDebFJ6xCcIYo8dal+nSp2rUzvTT7BosrKlL8A==",
+      "dependencies": {
+        "hypher": "*"
+      }
+    },
+    "node_modules/hypher": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/hypher/-/hypher-0.2.5.tgz",
+      "integrity": "sha512-kUTpuyzBWWDO2VakmjHC/cxesg4lKQP+Fdc+7lrK4yvjNjkV9vm5UTZMDAwOyyHTOpbkYrAMlNZHG61NnE9vYQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -9436,6 +9930,21 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-size": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.2.1.tgz",
+      "integrity": "sha512-rH+46sQJ2dlwfjfhCyNx5thzrv+dtmBIhPHk0zgRUukHzZ/kRueTJXoYYsclBaKcSMBWuGbOFXtioLpzTb5euw==",
+      "license": "MIT",
+      "dependencies": {
+        "queue": "6.0.2"
+      },
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
     "node_modules/immer": {
       "version": "9.0.21",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
@@ -11178,6 +11687,71 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-beautify": {
+      "version": "1.14.11",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.11.tgz",
+      "integrity": "sha512-rPogWqAfoYh1Ryqqh2agUpVfbxAhbjuN1SmU86dskQUKouRiggUTCO4+2ym9UPXllc2WAp0J+T5qxn7Um3lCdw==",
+      "license": "MIT",
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^1.0.3",
+        "glob": "^10.3.3",
+        "nopt": "^7.2.0"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-beautify/node_modules/brace-expansion": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/js-beautify/node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/js-beautify/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -11356,6 +11930,22 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.45",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.45.tgz",
+      "integrity": "sha512-pQpZbdBu7wCTmQUh7ufPmLr0pFoObnGUoL/yhtwJDgmmQpbkg/0HSVti25Fu4rmd1oCR6NGWe9vqTWuWv3GcNA==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -11410,6 +12000,27 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/latex.js": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/latex.js/-/latex.js-0.12.6.tgz",
+      "integrity": "sha512-spMTeSq9cP4vidMQuPgoYGKmsQTMElZhDtNF3NyLIRc03XkuuPvMA0tzb0ShS/otaIJrB7DIHDk0GL3knCisEw==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "8.x",
+        "fs-extra": "10.x",
+        "hyphenation.de": "*",
+        "hyphenation.en-us": "*",
+        "js-beautify": "1.14.x",
+        "stdin": "*",
+        "svgdom": "^0.1.8"
+      },
+      "bin": {
+        "latex.js": "bin/latex.js"
+      },
+      "engines": {
+        "node": ">= 14.0"
+      }
+    },
     "node_modules/launch-editor": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.10.0.tgz",
@@ -11800,6 +12411,25 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-math": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-math/-/mdast-util-math-3.0.0.tgz",
+      "integrity": "sha512-Tl9GBNeG/AhJnQM221bJR2HPvLOSnLE/T9cJI9tlc6zwQk2nPk/4f0cHkOdEixQPC/j8UtKDdITswvLAy1OZ1w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.1.0",
+        "unist-util-remove-position": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-mdx-expression": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
@@ -12179,6 +12809,25 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/micromark-extension-math": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-3.1.0.tgz",
+      "integrity": "sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/katex": "^0.16.0",
+        "devlop": "^1.0.0",
+        "katex": "^0.16.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-factory-destination": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -12790,6 +13439,21 @@
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
       "license": "MIT"
     },
+    "node_modules/nopt": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
+      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -13152,6 +13816,12 @@
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -14854,6 +15524,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "license": "ISC"
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -14929,6 +15605,15 @@
       "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
       "license": "MIT"
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -15495,6 +16180,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/rehype-katex": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-katex/-/rehype-katex-7.0.1.tgz",
+      "integrity": "sha512-OiM2wrZ/wuhKkigASodFoo8wimG3H12LWQaH8qSPVJn9apWKFSH3YOCtbKpBorTVw/eI7cuT21XBbvwEswbIOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/katex": "^0.16.0",
+        "hast-util-from-html-isomorphic": "^2.0.0",
+        "hast-util-to-text": "^4.0.0",
+        "katex": "^0.16.0",
+        "unist-util-visit-parents": "^6.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/relateurl": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
@@ -15522,6 +16226,22 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-math": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/remark-math/-/remark-math-6.0.0.tgz",
+      "integrity": "sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-math": "^3.0.0",
+        "micromark-extension-math": "^3.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -15607,12 +16327,6 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "license": "MIT"
     },
-    "node_modules/resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
-      "license": "MIT"
-    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -15729,6 +16443,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/restructure": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
+      "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==",
+      "license": "MIT"
+    },
     "node_modules/retry": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
@@ -16670,6 +17390,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/stdin": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/stdin/-/stdin-0.0.1.tgz",
+      "integrity": "sha512-2bacd1TXzqOEsqRa+eEWkRdOSznwptrs4gqFcpMq5tOtmJUGPZd10W5Lam6wQ4YQ/+qjQt4e9u35yXCF6mrlfQ=="
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -16979,6 +17704,12 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
+      "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
+      "license": "MIT"
+    },
     "node_modules/style-to-js": {
       "version": "1.1.17",
       "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.17.tgz",
@@ -17131,6 +17862,30 @@
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
       "license": "MIT"
     },
+    "node_modules/svgdom": {
+      "version": "0.1.23",
+      "resolved": "https://registry.npmjs.org/svgdom/-/svgdom-0.1.23.tgz",
+      "integrity": "sha512-zTT8cz8rf07OCvRhTipJv+bt/MgL5Zm2ZF3IttK9zr/MKVDTrgo+usbDQMOK1PGzqDT7GA1SshnYlXvtafK7Fw==",
+      "license": "MIT",
+      "dependencies": {
+        "fontkit": "^2.0.4",
+        "image-size": "^1.2.1",
+        "sax": "^1.4.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Fuzzyma"
+      }
+    },
+    "node_modules/svgdom/node_modules/sax": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
+      "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
     "node_modules/svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -17470,6 +18225,12 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "license": "MIT"
     },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -17754,6 +18515,20 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -17815,6 +18590,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
     "node_modules/unicode-property-aliases-ecmascript": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
@@ -17824,6 +18609,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
@@ -17867,6 +18662,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/unist-util-find-after": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
+      "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-is": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
@@ -17893,6 +18702,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-remove-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
+      "integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-stringify-position": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
@@ -18106,6 +18929,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vfile-location": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vfile-message": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
@@ -18130,6 +18967,12 @@
         "browser-process-hrtime": "^1.0.0"
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
@@ -18173,6 +19016,16 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/web-vitals": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",

phd-advisor-frontend/package.json

@@ -3,17 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@codemirror/legacy-modes": "^6.5.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "@uiw/react-codemirror": "^4.25.9",
+    "katex": "^0.16.45",
+    "latex.js": "^0.12.6",
     "lucide-react": "^0.544.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@reactour/tour": "^3.8.0",
     "react-markdown": "^10.1.0",
     "react-scripts": "5.0.1",
+    "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

phd-advisor-frontend/public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="AI Advisor Panel — AI-Powered Guidance from Multiple Experts"
+      content="Cybersecurity Advisor — AI-powered security guidance from expert advisors"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       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>
+    <title>Cybersecurity Advisor</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

phd-advisor-frontend/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "AI Advisor Panel",
-  "name": "Neon AI Panel of Experts",
+  "short_name": "Cybersecurity Advisor",
+  "name": "Cybersecurity Advisor",
   "icons": [
     {
       "src": "favicon.ico",

phd-advisor-frontend/src/App.js

@@ -8,11 +8,6 @@ import CanvasPage from './pages/CanvasPage';
 import UserGuide from './components/UserGuide';
 import './styles/components.css';
 
-// Set REACT_APP_TESTING_ONBOARDING=true in your .env to force the onboarding
-// tour to run on every page load. Leave unset in production — tour will only
-// show once per user (localStorage).
-export const TESTING_ONBOARDING = process.env.REACT_APP_TESTING_ONBOARDING === 'true';
-
 function App() {
   const [currentView, setCurrentView] = useState('home');
   const [isAuthenticated, setIsAuthenticated] = useState(false);
@@ -43,7 +38,10 @@ function App() {
     setCurrentView('auth');
   };
 
-  const navigateToCanvas = () => {
+  const navigateToCanvas = (canvasView) => {
+    if (['insights', 'workspace', 'deliverables'].includes(canvasView)) {
+      localStorage.setItem('canvas-view-v2', canvasView);
+    }
     setCurrentView('canvas');
   };
 
@@ -64,11 +62,6 @@ function App() {
     setCurrentView('chat');
   };
 
-  const handleUserUpdate = (updatedUser) => {
-    setUser(updatedUser);
-    localStorage.setItem('user', JSON.stringify(updatedUser));
-  };
-
   const handleSignOut = () => {
     localStorage.removeItem('authToken');
     localStorage.removeItem('user');
@@ -84,7 +77,9 @@ function App() {
         <div className="App">
           {currentView === 'home' && (
             <HomePage
+              onNavigateToHome={navigateToHome}
               onNavigateToChat={isAuthenticated ? navigateToChat : navigateToAuth}
+              onNavigateToCanvas={isAuthenticated ? navigateToCanvas : navigateToAuth}
               isAuthenticated={isAuthenticated}
             />
           )}
@@ -92,9 +87,10 @@ function App() {
             <AuthPage onAuthSuccess={handleAuthSuccess} />
           )}
           {currentView === 'canvas' && isAuthenticated && (
-            <CanvasPage 
+            <CanvasPage
               user={user}
               authToken={authToken}
+              onNavigateToHome={navigateToHome}
               onNavigateToChat={navigateToChat}
               onSignOut={handleSignOut}
             />
@@ -106,7 +102,6 @@ function App() {
               onNavigateToHome={navigateToHome}
               onNavigateToCanvas={navigateToCanvas}
               onSignOut={handleSignOut}
-              onUserUpdate={handleUserUpdate}
             />
           )}
           {/* Global help center — listens for the 'open-user-guide' event */}

phd-advisor-frontend/src/components/AdvisorStatusDropdown.js

@@ -2,12 +2,19 @@ import React, { useState, useEffect } from 'react';
 import { Users, ChevronDown, Pencil } from 'lucide-react';
 import AvatarPickerModal from './AvatarPickerModal';
 
-const AdvisorStatusDropdown = ({ advisors, thinkingAdvisors, getAdvisorColors, isDark }) => {
+const AdvisorStatusDropdown = ({
+  advisors,
+  activeAdvisorIds = [],
+  onToggleAdvisor,
+  onSetActiveAdvisors,
+  thinkingAdvisors,
+  getAdvisorColors,
+  isDark,
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const [hoveredId, setHoveredId] = useState(null);
   const [pickerAdvisor, setPickerAdvisor] = useState(null);
-  
-  // Close dropdown when clicking outside
+
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (isOpen && !event.target.closest('.advisor-status-dropdown')) {
@@ -22,10 +29,13 @@ const AdvisorStatusDropdown = ({ advisors, thinkingAdvisors, getAdvisorColors, i
   if (!advisors || typeof advisors !== 'object') {
     return null;
   }
-  
+
   const advisorEntries = Object.entries(advisors);
-  const thinkingCount = Array.isArray(thinkingAdvisors) 
-    ? thinkingAdvisors.filter(id => id !== 'system').length 
+  const allIds = advisorEntries.map(([id]) => id);
+  const activeSet = new Set(activeAdvisorIds);
+  const activeCount = allIds.filter((id) => activeSet.has(id)).length;
+  const thinkingCount = Array.isArray(thinkingAdvisors)
+    ? thinkingAdvisors.filter((id) => id !== 'system' && activeSet.has(id)).length
     : 0;
   const totalAdvisors = advisorEntries.length;
 
@@ -33,16 +43,41 @@ const AdvisorStatusDropdown = ({ advisors, thinkingAdvisors, getAdvisorColors, i
     setIsOpen(!isOpen);
   };
 
+  const handleCheckboxChange = (id, event) => {
+    event.stopPropagation();
+    if (onToggleAdvisor) {
+      onToggleAdvisor(id);
+    }
+  };
+
+  const selectAll = (event) => {
+    event.stopPropagation();
+    if (onSetActiveAdvisors) {
+      onSetActiveAdvisors([...allIds]);
+    }
+  };
+
+  const selectNone = (event) => {
+    event.stopPropagation();
+    if (onSetActiveAdvisors && allIds.length > 0) {
+      onSetActiveAdvisors([allIds[0]]);
+    }
+  };
+
   return (
     <div className="advisor-status-dropdown">
-      <button 
+      <button
+        type="button"
         className={`advisor-status-button ${isOpen ? 'open' : ''}`}
         onClick={handleToggle}
+        title="Choose which advisors are active"
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
       >
         <div className="advisor-status-info">
           <Users size={16} />
           <span className="advisor-count">
-            {totalAdvisors} Advisor{totalAdvisors !== 1 ? 's' : ''}
+            {activeCount}/{totalAdvisors} Active
           </span>
           {thinkingCount > 0 && (
             <div className="thinking-badge">
@@ -52,7 +87,7 @@ const AdvisorStatusDropdown = ({ advisors, thinkingAdvisors, getAdvisorColors, i
         </div>
         <ChevronDown size={14} className={`dropdown-arrow ${isOpen ? 'rotated' : ''}`} />
       </button>
-      
+
       {pickerAdvisor && (
         <AvatarPickerModal
           advisorId={pickerAdvisor.id}
@@ -61,32 +96,62 @@ const AdvisorStatusDropdown = ({ advisors, thinkingAdvisors, getAdvisorColors, i
         />
       )}
       {isOpen && (
-        <div className="advisor-dropdown-panel">
+        <div className="advisor-dropdown-panel" role="listbox" aria-label="Active advisors">
+          <div className="advisor-panel-header">
+            <div className="advisor-panel-title">Active advisors</div>
+            <div className="advisor-panel-subtitle">
+              Only checked advisors respond to your messages.
+            </div>
+            <div className="advisor-panel-actions">
+              <button type="button" className="advisor-panel-link" onClick={selectAll}>
+                Select all
+              </button>
+              <span className="advisor-panel-sep">·</span>
+              <button type="button" className="advisor-panel-link" onClick={selectNone}>
+                Minimize
+              </button>
+            </div>
+          </div>
           <div className="advisor-list">
             {advisorEntries.map(([id, advisor]) => {
               const IconComponent = advisor.icon;
               const colors = getAdvisorColors(id, isDark);
               const isThinking = Array.isArray(thinkingAdvisors) && thinkingAdvisors.includes(id);
-              
+              const isActive = activeSet.has(id);
+
               return (
                 <div
                   key={id}
-                  className={`advisor-item ${isThinking ? 'thinking' : ''}`}
+                  className={`advisor-item ${isThinking ? 'thinking' : ''} ${isActive ? '' : 'inactive'}`}
                   style={{ '--advisor-color': colors.color, '--advisor-bg': colors.bgColor }}
                 >
+                  <label className="advisor-active-toggle" onClick={(e) => e.stopPropagation()}>
+                    <input
+                      type="checkbox"
+                      checked={isActive}
+                      onChange={(e) => handleCheckboxChange(id, e)}
+                      aria-label={`${isActive ? 'Deactivate' : 'Activate'} ${advisor.name}`}
+                    />
+                  </label>
                   <div
                     className="advisor-icon"
-                    style={{ position: 'relative', cursor: 'pointer', overflow: 'hidden', width: 32, height: 32, borderRadius: 8, flexShrink: 0 }}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setPickerAdvisor({ id, name: advisor.name });
+                      }
+                    }}
+                    onClick={() => setPickerAdvisor({ id, name: advisor.name })}
                     onMouseEnter={() => setHoveredId(id)}
                     onMouseLeave={() => setHoveredId(null)}
-                    onClick={() => setPickerAdvisor({ id, name: advisor.name })}
                   >
                     {advisor.avatarUrl
-                      ? <img src={advisor.avatarUrl} alt={advisor.name} style={{ width: 32, height: 32, objectFit: 'cover', display: 'block' }} />
-                      : <IconComponent size={16} />
-                    }
+                      ? <img src={advisor.avatarUrl} alt={advisor.name} />
+                      : <IconComponent size={16} />}
                     {hoveredId === id && (
-                      <div style={{ position: 'absolute', inset: 0, borderRadius: 8, background: 'rgba(0,0,0,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                      <div className="advisor-icon-edit">
                         <Pencil size={10} color="#fff" />
                       </div>
                     )}
@@ -96,12 +161,14 @@ const AdvisorStatusDropdown = ({ advisors, thinkingAdvisors, getAdvisorColors, i
                     <div className="advisor-description">{advisor.description}</div>
                   </div>
                   <div className="advisor-status">
-                    {isThinking ? (
+                    {!isActive ? (
+                      <div className="status-inactive">Off</div>
+                    ) : isThinking ? (
                       <div className="status-thinking">
                         <div className="thinking-dots">
-                          <div className="dot"></div>
-                          <div className="dot"></div>
-                          <div className="dot"></div>
+                          <div className="dot" />
+                          <div className="dot" />
+                          <div className="dot" />
                         </div>
                       </div>
                     ) : (
@@ -114,13 +181,13 @@ const AdvisorStatusDropdown = ({ advisors, thinkingAdvisors, getAdvisorColors, i
           </div>
         </div>
       )}
-      
+
       <style>{`
         .advisor-status-dropdown {
           position: relative;
           display: inline-block;
         }
-        
+
         .advisor-status-button {
           display: flex;
           align-items: center;
@@ -136,31 +203,32 @@ const AdvisorStatusDropdown = ({ advisors, thinkingAdvisors, getAdvisorColors, i
           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
           color: var(--text-primary);
         }
-        
+
         .advisor-status-button:hover {
           background: var(--bg-secondary);
           border-color: var(--accent-primary);
           transform: translateY(-1px);
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
-        
+
         .advisor-status-button.open {
           background: var(--bg-secondary);
           border-color: var(--accent-primary);
         }
-        
+
         .advisor-status-info {
           display: flex;
           align-items: center;
           gap: 6px;
           flex: 1;
         }
-        
+
         .advisor-count {
           font-weight: 600;
           color: var(--text-primary);
+          white-space: nowrap;
         }
-        
+
         .thinking-badge {
           background: var(--accent-primary);
           color: white;
@@ -170,22 +238,23 @@ const AdvisorStatusDropdown = ({ advisors, thinkingAdvisors, getAdvisorColors, i
           font-weight: 600;
           animation: pulse 2s ease-in-out infinite;
         }
-        
+
         .dropdown-arrow {
           color: var(--text-secondary);
           transition: transform 0.2s ease;
+          flex-shrink: 0;
         }
-        
+
         .dropdown-arrow.rotated {
           transform: rotate(180deg);
         }
-        
+
         .advisor-dropdown-panel {
           position: absolute;
           top: calc(100% + 8px);
           right: 0;
-          min-width: 280px;
-          max-width: 320px;
+          min-width: 300px;
+          max-width: 340px;
           background: var(--bg-primary);
           border: 1px solid var(--border-primary);
           border-radius: 12px;
@@ -195,77 +264,147 @@ const AdvisorStatusDropdown = ({ advisors, thinkingAdvisors, getAdvisorColors, i
           backdrop-filter: blur(20px);
           -webkit-backdrop-filter: blur(20px);
         }
-        
+
         [data-theme="dark"] .advisor-dropdown-panel {
           box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
         }
-        
+
+        .advisor-panel-header {
+          padding: 12px 16px 8px;
+          border-bottom: 1px solid var(--border-primary);
+        }
+
+        .advisor-panel-title {
+          font-size: 13px;
+          font-weight: 600;
+          color: var(--text-primary);
+        }
+
+        .advisor-panel-subtitle {
+          font-size: 11px;
+          color: var(--text-secondary);
+          margin-top: 2px;
+          line-height: 1.35;
+        }
+
+        .advisor-panel-actions {
+          margin-top: 8px;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+
+        .advisor-panel-link {
+          background: none;
+          border: none;
+          padding: 0;
+          font-size: 11px;
+          font-weight: 600;
+          color: var(--accent-primary);
+          cursor: pointer;
+        }
+
+        .advisor-panel-link:hover {
+          text-decoration: underline;
+        }
+
+        .advisor-panel-sep {
+          color: var(--text-tertiary);
+          font-size: 11px;
+        }
+
         .advisor-list {
-          max-height: 300px;
+          max-height: 320px;
           overflow-y: auto;
           scrollbar-width: thin;
           scrollbar-color: var(--border-primary) transparent;
         }
-        
-        .advisor-list::-webkit-scrollbar {
-          width: 6px;
-        }
-        
-        .advisor-list::-webkit-scrollbar-track {
-          background: transparent;
-        }
-        
-        .advisor-list::-webkit-scrollbar-thumb {
-          background: var(--border-primary);
-          border-radius: 3px;
-        }
-        
+
         .advisor-item {
           display: flex;
           align-items: center;
-          gap: 12px;
-          padding: 12px 16px;
+          gap: 10px;
+          padding: 10px 14px;
           border-bottom: 1px solid var(--border-primary);
-          transition: background-color 0.2s ease;
+          transition: background-color 0.2s ease, opacity 0.2s ease;
+        }
+
+        .advisor-item.inactive {
+          opacity: 0.55;
         }
-        
+
         .advisor-item:last-child {
           border-bottom: none;
         }
-        
+
         .advisor-item:hover {
           background: var(--bg-secondary);
         }
-        
+
         .advisor-item.thinking {
           background: var(--advisor-bg);
+          opacity: 1;
         }
-        
+
+        .advisor-active-toggle {
+          display: flex;
+          align-items: center;
+          flex-shrink: 0;
+          cursor: pointer;
+        }
+
+        .advisor-active-toggle input {
+          width: 16px;
+          height: 16px;
+          accent-color: var(--accent-primary);
+          cursor: pointer;
+        }
+
         .advisor-icon {
+          position: relative;
+          cursor: pointer;
+          overflow: hidden;
           width: 32px;
           height: 32px;
           border-radius: 8px;
+          flex-shrink: 0;
           background: var(--advisor-bg);
           color: var(--advisor-color);
           display: flex;
           align-items: center;
           justify-content: center;
-          flex-shrink: 0;
           border: 1px solid var(--advisor-color);
         }
-        
+
+        .advisor-icon img {
+          width: 32px;
+          height: 32px;
+          object-fit: cover;
+          display: block;
+        }
+
+        .advisor-icon-edit {
+          position: absolute;
+          inset: 0;
+          border-radius: 8px;
+          background: rgba(0, 0, 0, 0.45);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
         .advisor-details {
           flex: 1;
           min-width: 0;
         }
-        
+
         .advisor-name {
           font-weight: 600;
           color: var(--text-primary);
           font-size: 13px;
           margin-bottom: 2px;
         }
-        
+
         .advisor-description {
           font-size: 11px;
           color: var(--text-secondary);
@@ -274,22 +413,27 @@ const AdvisorStatusDropdown = ({ advisors, thinkingAdvisors, getAdvisorColors, i
           text-overflow: ellipsis;
           white-space: nowrap;
         }
-        
+
         .advisor-status {
           flex-shrink: 0;
         }
-        
+
+        .status-inactive {
+          font-size: 11px;
+          color: var(--text-tertiary);
+          font-weight: 500;
+        }
+
         .status-thinking {
           display: flex;
           align-items: center;
-          gap: 4px;
         }
-        
+
         .thinking-dots {
           display: flex;
           gap: 2px;
         }
-        
+
         .thinking-dots .dot {
           width: 4px;
           height: 4px;
@@ -297,64 +441,34 @@ const AdvisorStatusDropdown = ({ advisors, thinkingAdvisors, getAdvisorColors, i
           border-radius: 50%;
           animation: thinking-bounce 1.4s infinite ease-in-out both;
         }
-        
+
         .thinking-dots .dot:nth-child(1) { animation-delay: -0.32s; }
         .thinking-dots .dot:nth-child(2) { animation-delay: -0.16s; }
-        .thinking-dots .dot:nth-child(3) { animation-delay: 0s; }
-        
+
         .status-ready {
           font-size: 11px;
           color: var(--text-tertiary);
           font-weight: 500;
         }
-        
+
         @keyframes thinking-bounce {
           0%, 80%, 100% { transform: scale(0); }
           40% { transform: scale(1); }
         }
-        
+
         @keyframes pulse {
           0%, 100% { opacity: 1; }
           50% { opacity: 0.7; }
         }
-        
-        /* Responsive Design */
+
         @media (max-width: 768px) {
           .advisor-status-dropdown {
             display: none;
           }
-          .advisor-dropdown-panel {
-            right: -20px;
-            left: -20px;
-            min-width: unset;
-            max-width: unset;
-          }
-          
-          .advisor-status-button {
-            min-width: 120px;
-            font-size: 12px;
-          }
-          
-          .advisor-item {
-            padding: 10px 12px;
-          }
-          
-          .advisor-icon {
-            width: 28px;
-            height: 28px;
-          }
-          
-          .advisor-name {
-            font-size: 12px;
-          }
-          
-          .advisor-description {
-            font-size: 10px;
-          }
         }
       `}</style>
     </div>
   );
 };
 
-export default AdvisorStatusDropdown;
+export default AdvisorStatusDropdown;

phd-advisor-frontend/src/components/CopyrightNotice.js

@@ -22,7 +22,7 @@ const CopyrightNotice = ({ variant = 'footer', className = '' }) => {
           Neon.ai
         </a>
       )}
-      , {'\u00A9 '}University of Colorado Boulder. All rights reserved.{' '}
+      . All rights reserved.{' '}
       <a
         href="https://www.neon.ai/contact"
         target="_blank"

phd-advisor-frontend/src/components/MessageBubble.js

@@ -302,34 +302,38 @@ const MessageBubble = ({
     const colors = getAdvisorColors(personaId, isDark);
     const isCopied = copiedStates[message.id];
 
-    const avatarElement = (size = 40) => (
-      advisor.avatarUrl ? (
-        <img 
-          src={advisor.avatarUrl} 
-          alt={advisor.name || 'Advisor'} 
-          style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} 
-        />
-      ) : Icon ? (
+    const avatarElement = (size = 44) => {
+      const iconSize = Math.round(size * 0.52);
+      return (
         <div
-          style={{
-            width: size, height: size, borderRadius: '50%', backgroundColor: colors.bgColor || 'var(--bg-muted)',
-            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, overflow: 'hidden'
-          }}
+          className="advisor-message-avatar-ring"
+          style={{ width: size, height: size }}
         >
-          <Icon style={{ color: colors.color || 'var(--text-secondary)', width: size * 0.5, height: size * 0.5 }} />
-        </div>
-      ) : (
-        <div
-          style={{
-            width: size, height: size, borderRadius: '50%', backgroundColor: colors.bgColor || 'var(--bg-muted)',
-            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
-            color: colors.color || 'var(--text-secondary)', fontWeight: 600, fontSize: size * 0.4
-          }}
-        >
-          {advisor.name ? advisor.name.charAt(0) : 'A'}
+          {advisor.avatarUrl ? (
+            <img
+              src={advisor.avatarUrl}
+              alt={advisor.name || 'Advisor'}
+            />
+          ) : Icon ? (
+            <Icon
+              className="advisor-message-avatar-icon"
+              style={{
+                color: colors.color || 'var(--text-secondary)',
+                width: iconSize,
+                height: iconSize,
+              }}
+            />
+          ) : (
+            <span
+              className="advisor-message-avatar-initial"
+              style={{ color: colors.color || 'var(--text-secondary)', fontSize: iconSize }}
+            >
+              {advisor.name ? advisor.name.charAt(0) : 'A'}
+            </span>
+          )}
         </div>
-      )
-    );
+      );
+    };
 
     return (
       <div className={`advisor-message-container ${inlineAvatar ? 'inline-avatar-mode' : ''}`}>
@@ -350,7 +354,7 @@ const MessageBubble = ({
           }}
         >
           <div className="advisor-message-header">
-            {inlineAvatar && avatarElement(32)}
+            {inlineAvatar && avatarElement(44)}
             <h4 
               className="advisor-message-name" 
               style={{ color: colors.color || 'var(--text-primary)' }}

phd-advisor-frontend/src/components/Sidebar.js

@@ -1,22 +1,24 @@
 import React, { useState, useEffect } from 'react';
 import {
   MessageSquare,
-  Plus,
   SquarePen,
   Search,
   MoreVertical,
   Trash2,
-  Edit3,
   LogOut,
   User,
-  Settings,
+  UserCircle,
+  DatabaseZap,
+  KeyRound,
   PanelLeft,
-  FileText
+  FileText,
+  ChevronRight,
+  Clock
 } from 'lucide-react';
+import * as LucideIcons from 'lucide-react';
 import { useAppConfig } from '../contexts/AppConfigContext';
-import ConfirmDialog from './ConfirmDialog';
+import UserAvatarPicker from './UserAvatarPicker';
 import CopyrightNotice from './CopyrightNotice';
-import SettingsModal from './SettingsModal';
 import '../styles/Sidebar.css';
 
 const Sidebar = ({
@@ -25,27 +27,46 @@ const Sidebar = ({
   onSelectSession,
   onNewChat,
   onSignOut,
-  onUserUpdate,
   authToken,
   onSidebarToggle,
   isMobileOpen = false,
   onMobileToggle,
-  onNavigateToCanvas,
   refreshTrigger,
-  onCurrentSessionDeleted
+  onCurrentSessionDeleted,
+  pageContext = 'chat',
+  canvasItems = [],
+  canvasSubview = 'workspace',
+  widgetGroups = [],
+  deliverableProjects = [],
+  insightSections = [],
+  userAvatarId,
+  onAvatarChange,
+  onOpenProfile,
+  onOpenAccount,
+  onOpenClearData,
 }) => {
   const { config } = useAppConfig();
-  const canvasLabel = config?.app?.title ? `${config.app.title} Canvas` : 'Canvas';
-  const appVersion = config?.version;
+  const isOnCanvas = pageContext === 'canvas';
+  const [showAvatarPicker, setShowAvatarPicker] = useState(false);
+  const avatarOptions = config?.app?.user_avatars || [];
+  const currentAvatar = avatarOptions.find(a => a.id === userAvatarId);
+  const AvatarIcon = currentAvatar ? (LucideIcons[currentAvatar.icon] || User) : User;
+  const [expanded, setExpanded] = useState(() => {
+    try { return JSON.parse(localStorage.getItem('sidebar-expanded-v1') || '{}'); } catch { return {}; }
+  });
+  const toggleExpanded = (key) => {
+    setExpanded(prev => {
+      const next = { ...prev, [key]: !prev[key] };
+      localStorage.setItem('sidebar-expanded-v1', JSON.stringify(next));
+      return next;
+    });
+  };
   const [chatSessions, setChatSessions] = useState([]);
   const [searchTerm, setSearchTerm] = useState('');
   const [isLoading, setIsLoading] = useState(true);
   const [showUserMenu, setShowUserMenu] = useState(false);
-  const [showSettings, setShowSettings] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [isCreatingNewChat, setIsCreatingNewChat] = useState(false);
-  const [showClearAllConfirm, setShowClearAllConfirm] = useState(false);
-  const [isClearingAll, setIsClearingAll] = useState(false);
 
   useEffect(() => {
     if (authToken) {
@@ -159,28 +180,6 @@ const Sidebar = ({
     }
   };
 
-  const handleClearAllChats = async () => {
-    setIsClearingAll(true);
-    try {
-      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/chat-sessions`, {
-        method: 'DELETE',
-        headers: {
-          'Authorization': `Bearer ${authToken}`,
-          'Content-Type': 'application/json'
-        }
-      });
-      if (response.ok) {
-        setChatSessions([]);
-        onCurrentSessionDeleted?.();
-      }
-    } catch (error) {
-      console.error('Error clearing all chat sessions:', error);
-    } finally {
-      setIsClearingAll(false);
-      setShowClearAllConfirm(false);
-    }
-  };
-
   const toggleSidebar = () => {
     setIsCollapsed(!isCollapsed);
     // Close user menu when collapsing
@@ -214,8 +213,17 @@ const Sidebar = ({
             <>
               <div className="user-section">
                 <div className="user-info">
-                  <div className="user-avatar">
-                    <User size={20} />
+                  <div
+                    className="user-avatar"
+                    onClick={() => onAvatarChange && setShowAvatarPicker(true)}
+                    style={{
+                      cursor: onAvatarChange ? 'pointer' : undefined,
+                      backgroundColor: currentAvatar?.bg || undefined,
+                      color: currentAvatar?.color || undefined,
+                    }}
+                    title={onAvatarChange ? 'Change avatar' : undefined}
+                  >
+                    <AvatarIcon size={20} />
                   </div>
                   <div className="user-details">
                     <span className="user-name">{user.firstName} {user.lastName}</span>
@@ -243,12 +251,21 @@ const Sidebar = ({
                     
                     {showUserMenu && (
                       <div className="user-menu">
-                        <button
-                          className="user-menu-item"
-                          onClick={() => { setShowSettings(true); setShowUserMenu(false); }}
-                        >
-                          <Settings size={16} />
-                          <span>Settings</span>
+                        <button className="user-menu-item" onClick={() => { setShowUserMenu(false); setShowAvatarPicker(true); }}>
+                          <User size={16} />
+                          <span>Change Avatar</span>
+                        </button>
+                        <button className="user-menu-item" onClick={() => { setShowUserMenu(false); if (onOpenProfile) onOpenProfile(); }}>
+                          <UserCircle size={16} />
+                          <span>Profile</span>
+                        </button>
+                        <button className="user-menu-item" onClick={() => { setShowUserMenu(false); if (onOpenAccount) onOpenAccount(); }}>
+                          <KeyRound size={16} />
+                          <span>Account</span>
+                        </button>
+                        <button className="user-menu-item" onClick={() => { setShowUserMenu(false); if (onOpenClearData) onOpenClearData(); }}>
+                          <DatabaseZap size={16} />
+                          <span>Clear User Data</span>
                         </button>
                         <button className="user-menu-item sign-out" onClick={onSignOut}>
                           <LogOut size={16} />
@@ -260,34 +277,6 @@ const Sidebar = ({
                 </div>
               </div>
 
-              <div className="new-chat-row">
-                <button
-                  className="new-chat-button"
-                  onClick={handleNewChat}
-                  disabled={isCreatingNewChat}
-                >
-                  <Plus size={16} />
-                  <span>{isCreatingNewChat ? 'Creating...' : 'New Chat'}</span>
-                </button>
-                <button
-                  className="clear-all-chats-btn"
-                  onClick={() => setShowClearAllConfirm(true)}
-                  disabled={isClearingAll || chatSessions.length === 0}
-                  title="Clear all chats"
-                  aria-label="Clear all chats"
-                >
-                  <Trash2 size={16} />
-                </button>
-              </div>
-
-              <button 
-                className="sidebar-canvas-btn"
-                onClick={onNavigateToCanvas}
-                title={canvasLabel}
-              >
-                <FileText size={18} />
-                {!isCollapsed && <span>{canvasLabel}</span>}
-              </button>
             </>
           )}
 
@@ -309,14 +298,6 @@ const Sidebar = ({
               >
                 <SquarePen size={20} />
               </button>
-              <button 
-                className="sidebar-canvas-btn"
-                onClick={onNavigateToCanvas}
-                title={canvasLabel}
-              >
-                <FileText size={20} />
-                {!isCollapsed && <span>{canvasLabel}</span>}
-              </button>
             </div>
           )}
         </div>
@@ -328,24 +309,187 @@ const Sidebar = ({
               <Search size={16} className="search-icon" />
               <input
                 type="text"
-                placeholder="Search chats..."
+                placeholder={
+                  isOnCanvas
+                    ? (canvasSubview === 'deliverables' ? 'Search drafts...'
+                       : canvasSubview === 'insights' ? 'Search sections...'
+                       : 'Search widgets...')
+                    : 'Search chats...'
+                }
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
                 className="search-input"
               />
             </div>
-            <button
-              className="new-chat-icon-btn"
-              onClick={handleNewChat}
-              disabled={isCreatingNewChat}
-              title={isCreatingNewChat ? 'Creating...' : 'New Chat'}
-            >
-              <SquarePen size={18} />
-            </button>
+            {!isOnCanvas && (
+              <button
+                className="new-chat-icon-btn"
+                onClick={handleNewChat}
+                disabled={isCreatingNewChat}
+                title={isCreatingNewChat ? 'Creating...' : 'New Chat'}
+              >
+                <SquarePen size={18} />
+              </button>
+            )}
           </div>
         )}
 
-        {/* Chat Sessions */}
+        {/* Canvas sidebar — subview-aware (Insights / Workspace / Deliverables) */}
+        {isOnCanvas ? (
+          <div className="canvas-sidebar-menu">
+            {!isCollapsed && (() => {
+              const q = searchTerm.toLowerCase();
+
+              // ---------- DELIVERABLES: project list with expandable section dropdown ----------
+              if (canvasSubview === 'deliverables') {
+                const projects = deliverableProjects.filter(p =>
+                  !q || p.name.toLowerCase().includes(q) || p.sections.some(s => s.name.toLowerCase().includes(q))
+                );
+                if (projects.length === 0) {
+                  return (
+                    <div className="no-sessions">
+                      {searchTerm ? 'No drafts match' : 'No drafts yet — create one in Documents'}
+                    </div>
+                  );
+                }
+                return projects.map(p => {
+                  const open = expanded[`p-${p.id}`] ?? p.isActive;
+                  const totalWords = p.sections.reduce((s, x) => s + x.wc, 0);
+                  return (
+                    <div key={p.id} className={`csm-project ${p.isActive ? 'active' : ''}`}>
+                      <button
+                        className="csm-project-head"
+                        onClick={() => toggleExpanded(`p-${p.id}`)}
+                      >
+                        <ChevronRight size={12} className={`csm-chevron ${open ? 'open' : ''}`}/>
+                        <FileText size={13}/>
+                        <span className="csm-project-name">{p.name}</span>
+                        {p.versions > 0 && (
+                          <span className="csm-versions" title={`${p.versions} version${p.versions === 1 ? '' : 's'} saved`}>
+                            <Clock size={10}/>{p.versions}
+                          </span>
+                        )}
+                      </button>
+                      {open && (
+                        <div className="csm-project-body">
+                          <button className="csm-row" onClick={p.onOpen}>
+                            <span className="csm-row-icon">📂</span>
+                            <span>Open editor</span>
+                          </button>
+                          {p.sections.map(s => (
+                            <button key={s.id} className="csm-row csm-row-section" onClick={s.onClick}>
+                              <span className="csm-row-bullet"/>
+                              <span className="csm-row-label">{s.name}</span>
+                              {s.wc > 0 && <span className="csm-row-meta">{s.wc}</span>}
+                            </button>
+                          ))}
+                          <div className="csm-row csm-row-foot">
+                            <Clock size={11}/>
+                            <span>{p.versions} version{p.versions === 1 ? '' : 's'} · auto-saved</span>
+                          </div>
+                          <div className="csm-row csm-row-foot">
+                            <span style={{ color: 'var(--text-tertiary, #9CA3AF)' }}>{totalWords} words total</span>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  );
+                });
+              }
+
+              // ---------- WORKSPACE: widgets grouped by category ----------
+              if (canvasSubview === 'workspace') {
+                const groups = widgetGroups
+                  .map(g => ({
+                    ...g,
+                    items: g.items.filter(it => !q || it.label.toLowerCase().includes(q)),
+                  }))
+                  .filter(g => g.items.length > 0);
+                if (groups.length === 0) {
+                  return (
+                    <div className="no-sessions">
+                      {searchTerm ? 'No widgets match' : 'Workspace is empty — add widgets'}
+                    </div>
+                  );
+                }
+                return groups.map(g => {
+                  const open = expanded[`g-${g.id}`] ?? true;
+                  return (
+                    <div key={g.id} className="csm-group">
+                      <button className="csm-group-head" onClick={() => toggleExpanded(`g-${g.id}`)}>
+                        <ChevronRight size={11} className={`csm-chevron ${open ? 'open' : ''}`}/>
+                        <span className="csm-group-name">{g.label}</span>
+                        <span className="csm-group-count">{g.items.length}</span>
+                      </button>
+                      {open && (
+                        <div className="csm-group-body">
+                          {g.items.map(it => (
+                            <button key={it.id} className={`csm-row ${it.critic ? 'critic' : ''}`} onClick={it.onClick}>
+                              <span className="csm-row-bullet"/>
+                              <span className="csm-row-label">{it.label}</span>
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  );
+                });
+              }
+
+              // ---------- INSIGHTS: section list with confidence badges ----------
+              if (canvasSubview === 'insights') {
+                const sections = insightSections.filter(s => !q || s.name.toLowerCase().includes(q));
+                if (sections.length === 0) {
+                  return <div className="no-sessions">{searchTerm ? 'No sections match' : 'No insights yet'}</div>;
+                }
+                return (
+                  <div className="csm-group">
+                    <div className="csm-group-head" style={{ cursor: 'default' }}>
+                      <span className="csm-group-name">Sections</span>
+                      <span className="csm-group-count">{sections.length}</span>
+                    </div>
+                    <div className="csm-group-body">
+                      {sections.map(s => {
+                        const complete = s.taskCount > 0 && s.doneCount === s.taskCount;
+                        return (
+                          <button key={s.id} className={`csm-row ${complete ? 'csm-row-done' : ''}`} onClick={s.onClick}>
+                            <span className="csm-row-bullet"/>
+                            <span className="csm-row-label">{s.name}</span>
+                            {s.taskCount > 0 && (
+                              <span className="csm-row-meta">{s.doneCount}/{s.taskCount}</span>
+                            )}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              }
+
+              // ---------- Fallback: flat list (legacy) ----------
+              const items = canvasItems.filter(it => !q || it.label.toLowerCase().includes(q));
+              if (items.length === 0) {
+                return <div className="no-sessions">{searchTerm ? 'No matches' : 'Nothing here yet'}</div>;
+              }
+              return (
+                <div className="sessions-list">
+                  {items.map((it) => (
+                    <div key={it.id} className="session-item" onClick={it.onClick}>
+                      <div className="session-content">
+                        <div className="session-icon"><FileText size={16}/></div>
+                        <div className="session-details">
+                          <div className="session-title">{it.label}</div>
+                          {it.sub && <div className="session-meta"><span>{it.sub}</span></div>}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              );
+            })()}
+          </div>
+        ) : (
+        /* Chat Sessions */
         <div className="chat-sessions">
           {isLoading ? (
             <div className="loading-sessions">
@@ -398,15 +542,8 @@ const Sidebar = ({
             </div>
           )}
         </div>
-
-        {appVersion && (
-          <div
-            className="sidebar-version"
-            title={`Version ${appVersion}`}
-          >
-            {isCollapsed ? `v${appVersion}` : `Version ${appVersion}`}
-          </div>
         )}
+
         {/* Footer */}
         <div className={`sidebar-footer ${isCollapsed ? 'collapsed' : ''}`}>
           <a 
@@ -423,34 +560,23 @@ const Sidebar = ({
         </div>
       </div>
       
-      {isMobileOpen && (
-        <div
-          className="mobile-sidebar-overlay visible"
-          onClick={() => onMobileToggle(false)}
+      {showAvatarPicker && (
+        <UserAvatarPicker
+          options={avatarOptions}
+          currentId={userAvatarId}
+          onSelect={(id) => { onAvatarChange?.(id); setShowAvatarPicker(false); }}
+          onClose={() => setShowAvatarPicker(false)}
         />
       )}
 
-      <ConfirmDialog
-        isOpen={showClearAllConfirm}
-        title="Clear all chats?"
-        message="This will permanently delete every chat in your sidebar. This action can't be undone."
-        confirmLabel={isClearingAll ? 'Clearing…' : 'Clear all chats'}
-        cancelLabel="Cancel"
-        tone="danger"
-        onConfirm={handleClearAllChats}
-        onCancel={() => setShowClearAllConfirm(false)}
-      />
-      {showSettings && (
-        <SettingsModal
-          user={user}
-          authToken={authToken}
-          onUserUpdate={onUserUpdate}
-          onSignOut={onSignOut}
-          onClose={() => setShowSettings(false)}
+      {isMobileOpen && (
+        <div 
+          className="mobile-sidebar-overlay visible" 
+          onClick={() => onMobileToggle(false)}
         />
       )}
     </>
   );
 };
 
-export default Sidebar;
+export default Sidebar;

phd-advisor-frontend/src/components/Signup.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Eye, EyeOff, Mail, Lock, User, ArrowRight, BookOpen, Phone, GraduationCap } from 'lucide-react';
+import { Eye, EyeOff, Mail, Lock, User, ArrowRight, Shield, Phone, Globe } from 'lucide-react';
 import { useAppConfig } from '../contexts/AppConfigContext';
 import '../styles/Signup.css';
 
@@ -19,14 +19,22 @@ const Signup = ({ onNavigateToLogin, onNavigateToHome }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [errors, setErrors] = useState({});
 
-  const academicStages = config?.login?.academic_stages?.length
-    ? config.login.academic_stages
-    : [
-        { value: '', label: 'Select your stage' },
-        { value: 'beginner', label: 'Beginner' },
-        { value: 'intermediate', label: 'Intermediate' },
-        { value: 'advanced', label: 'Advanced' },
-      ];
+  const knowledgeLevels = config?.login?.knowledge_levels?.length
+    ? config.login.knowledge_levels
+    : config?.login?.academic_stages?.length
+      ? config.login.academic_stages
+      : [
+          { value: '', label: 'Select your cybersecurity knowledge level' },
+          { value: 'newcomer', label: 'New to cybersecurity' },
+          { value: 'foundational', label: 'Foundational' },
+          { value: 'practitioner', label: 'Practitioner' },
+          { value: 'experienced', label: 'Experienced' },
+          { value: 'expert', label: 'Expert / specialist' },
+        ];
+
+  const timezones = config?.login?.timezones?.length
+    ? config.login.timezones
+    : [{ value: '', label: 'Select timezone (optional)' }];
 
   const handleInputChange = (e) => {
     const { name, value } = e.target;
@@ -75,7 +83,7 @@ const Signup = ({ onNavigateToLogin, onNavigateToHome }) => {
     }
     
     if (!formData.academicStage) {
-      newErrors.academicStage = 'Please select your academic stage';
+      newErrors.academicStage = 'Please select your cybersecurity knowledge level';
     }
     
     setErrors(newErrors);
@@ -140,7 +148,7 @@ const Signup = ({ onNavigateToLogin, onNavigateToHome }) => {
         {/* Header */}
         <div className="signup-header">
           <div className="logo-container">
-            <BookOpen className="logo-icon" />
+            <Shield className="logo-icon" />
           </div>
           <h1 className="signup-title">Join Our Community</h1>
           <p className="signup-subtitle">
@@ -285,13 +293,13 @@ const Signup = ({ onNavigateToLogin, onNavigateToHome }) => {
               </div>
             </div>
 
-            {/* Academic Stage */}
+            {/* Cybersecurity knowledge level */}
             <div className="form-group">
               <label htmlFor="academicStage" className="form-label">
-                Academic Stage
+                Cybersecurity knowledge level
               </label>
               <div className="input-container">
-                <GraduationCap className="input-icon" />
+                <Shield className="input-icon" />
                 <select
                   id="academicStage"
                   name="academicStage"
@@ -300,7 +308,7 @@ const Signup = ({ onNavigateToLogin, onNavigateToHome }) => {
                   className={`form-select ${errors.academicStage ? 'error' : ''}`}
                   disabled={isLoading}
                 >
-                  {academicStages.map(stage => (
+                  {knowledgeLevels.map(stage => (
                     <option key={stage.value} value={stage.value}>
                       {stage.label}
                     </option>
@@ -312,23 +320,27 @@ const Signup = ({ onNavigateToLogin, onNavigateToHome }) => {
               )}
             </div>
 
-            {/* Research Area (Optional) */}
+            {/* Time zone (optional) */}
             <div className="form-group">
               <label htmlFor="researchArea" className="form-label">
-                Research Area <span className="optional">(Optional)</span>
+                Time zone <span className="optional">(Optional)</span>
               </label>
               <div className="input-container">
-                <BookOpen className="input-icon" />
-                <input
-                  type="text"
+                <Globe className="input-icon" />
+                <select
                   id="researchArea"
                   name="researchArea"
                   value={formData.researchArea}
                   onChange={handleInputChange}
-                  className="form-input"
-                  placeholder="e.g., Computer Science, Biology, Psychology..."
+                  className="form-select"
                   disabled={isLoading}
-                />
+                >
+                  {timezones.map(tz => (
+                    <option key={tz.value} value={tz.value}>
+                      {tz.label}
+                    </option>
+                  ))}
+                </select>
               </div>
             </div>
 

phd-advisor-frontend/src/components/ThinkingIndicator.js

@@ -14,57 +14,41 @@ const ThinkingIndicator = ({ advisorId }) => {
 
   return (
     <div className="thinking-container">
-      <div 
-        className="advisor-avatar" 
-        style={{ backgroundColor: colors.bgColor }}
-      >
-        {Icon ? <Icon style={{ color: colors.color }} /> : null}
+      <div className="advisor-message-avatar-ring" style={{ width: 44, height: 44 }}>
+        {Icon ? (
+          <Icon
+            className="advisor-message-avatar-icon"
+            style={{ color: colors.color, width: 23, height: 23 }}
+          />
+        ) : null}
       </div>
-      <div 
+      <div
         className="thinking-bubble"
-        style={{ 
+        style={{
           backgroundColor: colors.bgColor,
-          borderColor: colors.color + '40' // Adding transparency to the border
+          borderColor: colors.color + '40',
         }}
       >
         <div className="thinking-header">
-          <h4 
-            className="advisor-name" 
-            style={{ color: colors.color }}
-          >
+          <h4 className="advisor-name" style={{ color: colors.color }}>
             {advisor.name}
           </h4>
         </div>
         <div className="thinking-dots">
-          <div 
-            className="thinking-dot" 
-            style={{ 
-              backgroundColor: colors.color, 
-              animationDelay: '0ms' 
-            }}
-          ></div>
-          <div 
-            className="thinking-dot" 
-            style={{ 
-              backgroundColor: colors.color, 
-              animationDelay: '150ms' 
-            }}
-          ></div>
-          <div 
-            className="thinking-dot" 
-            style={{ 
-              backgroundColor: colors.color, 
-              animationDelay: '300ms' 
-            }}
-          ></div>
+          <div
+            className="thinking-dot"
+            style={{ backgroundColor: colors.color, animationDelay: '0ms' }}
+          />
+          <div
+            className="thinking-dot"
+            style={{ backgroundColor: colors.color, animationDelay: '150ms' }}
+          />
+          <div
+            className="thinking-dot"
+            style={{ backgroundColor: colors.color, animationDelay: '300ms' }}
+          />
         </div>
-        <p 
-          className="thinking-text"
-          style={{ 
-            color: colors.color,
-            opacity: 0.8 
-          }}
-        >
+        <p className="thinking-text" style={{ color: colors.color, opacity: 0.8 }}>
           thinking...
         </p>
       </div>

phd-advisor-frontend/src/data/userGuide.js

@@ -1,6 +1,5 @@
-// User Guide content. Content can be overridden per-application by replacing
-// these strings with values pulled from the backend config in the future.
-// Use {{appName}} as a placeholder. It gets replaced at render time.
+// User Guide content for Cybersecurity Advisor.
+// Use {{appName}} as a placeholder — replaced at render time.
 
 export const userGuideTopics = [
   {
@@ -9,30 +8,30 @@ export const userGuideTopics = [
     icon: 'Sparkles',
     content: `# Welcome to {{appName}}
 
-{{appName}} is your AI-powered academic guidance system. A panel of specialized AI advisors gives you diverse perspectives on your research, writing, methodology, and more.
+{{appName}} is your AI-powered cybersecurity guidance system. A panel of specialized advisors gives you diverse perspectives on threats, controls, incidents, compliance, architecture, and career growth.
 
 ## Your first steps
 1. **Start a new chat** using the pencil icon next to the search bar
-2. **Type a question.** Anything about your research, methodology, or PhD journey
-3. **Read multiple advisor responses.** Each persona brings a different lens
-4. **Reply to a specific advisor** to dig deeper into their perspective
+2. **Type a question** about security risks, tools, policies, incidents, or your career path
+3. **Read multiple advisor responses** — each persona brings a different lens
+4. **Reply to a specific advisor** to go deeper on their angle
 
 ## Need help?
-You can return to this guide anytime by clicking the **?** icon in the header.`,
+Return to this guide anytime via the **?** icon in the header.`,
   },
   {
     id: 'advisors',
     title: 'Your Advisors',
-    icon: 'GraduationCap',
+    icon: 'Shield',
     content: `# Your Advisors
 
-{{appName}} comes with {{advisorCount}} specialized advisor personas. Each one is tuned with a different perspective and area of expertise.
+{{appName}} includes {{advisorCount}} specialized cybersecurity personas, powered by Neon BrainForge Security (4090 x1-3) with GPT-5.4 fallback when needed.
 
 ## Available advisors
 {{advisorList}}
 
 ## Seeing who's available
-Click the **"X Advisors"** dropdown in the top right of the chat to see all of your advisors and their current status.`,
+Click the **advisors** dropdown in the top right of the chat to see the full panel.`,
   },
   {
     id: 'conversations',
@@ -41,18 +40,15 @@ Click the **"X Advisors"** dropdown in the top right of the chat to see all of y
     content: `# Conversations & Replies
 
 ## Asking a question
-Type into the chat box at the bottom. All advisors will respond with their unique perspective.
+Type into the chat box at the bottom. All advisors respond with their unique perspective.
 
 ## Replying to a specific advisor
-Click on any advisor's response to **reply directly to them**. This continues the conversation with just that persona, letting you go deeper on their specific angle.
-
-## Expanding a response
-Some responses include an **"Expand"** action to ask the advisor to elaborate further with more detail.
+Click an advisor's response to **reply directly to them** and continue one-on-one.
 
 ## Tips
-- Be specific. The more context, the better the advice
-- Ask follow-up questions to refine the response
-- Different advisors will sometimes disagree, and that's a feature, not a bug`,
+- Include environment context (cloud, on-prem, SaaS, regulated industry)
+- Paste log snippets, policy excerpts, or architecture notes for sharper advice
+- Different advisors may disagree — use that tension to stress-test decisions`,
   },
   {
     id: 'documents',
@@ -60,21 +56,18 @@ Some responses include an **"Expand"** action to ask the advisor to elaborate fu
     icon: 'Paperclip',
     content: `# Uploading Documents
 
-You can attach **PDFs, Word documents, and text files** to give your advisors context.
+Attach **PDFs, Word documents, and text files** so advisors can reference your materials.
 
 ## How it works
 1. Click the paperclip icon in the chat input
 2. Select your file
-3. Wait for it to process
-4. Ask a question, and your advisors will reference the document
-
-## What can it handle?
-- Research papers (PDF)
-- Drafts and chapters (DOCX, TXT)
-- Notes and outlines
+3. Wait for processing
+4. Ask a question — advisors use **RAG** to pull relevant sections
 
-## Behind the scenes
-Documents are processed using **RAG (retrieval-augmented generation)**. The system finds the most relevant chunks of your document for each question, so even long documents work well.`,
+## Good uploads
+- Incident reports and postmortems
+- Architecture diagrams (exported as PDF)
+- Policy drafts, audit findings, pen-test summaries`,
   },
   {
     id: 'sessions',
@@ -82,44 +75,24 @@ Documents are processed using **RAG (retrieval-augmented generation)**. The syst
     icon: 'MessagesSquare',
     content: `# Sessions & History
 
-Every conversation is automatically saved as a session.
-
-## Finding past chats
-Use the **search bar** in the sidebar to filter your past sessions by title.
-
-## Switching between sessions
-Click any session in the sidebar to return to it. Your full context is preserved.
-
-## Starting a new chat
-Click the pencil/edit icon next to the search bar to start a fresh conversation.
-
-## Renaming or deleting
-Hover any session to reveal the **menu**. From there you can rename or delete.`,
+Every conversation is saved as a session. Use the sidebar search to find past chats, switch sessions, or start a new chat with the pencil icon.`,
   },
   {
     id: 'canvas',
-    title: 'Progress Canvas',
+    title: 'Security Canvas',
     icon: 'BarChart3',
     content: `# {{appName}} Canvas
 
-The Canvas is a **structured dashboard view** of your PhD journey. It pulls insights from your conversations and organizes them into 10 sections:
+The Canvas is a **structured workspace** for your security program. Insights from chats can inform widgets such as:
 
-- Research Progress
-- Methodology
-- Theoretical Framework
-- Challenges & Obstacles
-- Next Steps
-- Writing & Communication
-- Career Development
-- Literature Review
-- Data Analysis
-- Motivation & Mindset
+- Threat landscape
+- Controls posture
+- Open incidents & IR actions
+- Compliance gaps
+- Architecture decisions
+- Skill development & certifications
 
-## Accessing the Canvas
-Click the **{{appName}} Canvas** button in the sidebar.
-
-## Exporting
-You can print or download the Canvas as a snapshot of your progress.`,
+Open Canvas from the sidebar. Layout and widgets auto-save in your browser.`,
   },
   {
     id: 'tips',
@@ -127,17 +100,13 @@ You can print or download the Canvas as a snapshot of your progress.`,
     icon: 'Sparkles',
     content: `# Tips & Shortcuts
 
-## Get better answers
-- **Provide context.** Mention your field, your stage, your specific concern.
-- **Quote your work.** Paste a paragraph from your draft for targeted feedback.
-- **Use multiple advisors.** Ask one for theory, another for practical next steps.
-
 ## Useful workflows
-- **Stuck on methodology?** Ask the Methodologist + Theorist together.
-- **Feeling burnt out?** The Motivational Coach + Empathetic Listener help reframe.
-- **Need to be challenged?** Talk to the Constructive Critic and Socratic Mentor.
+- **Incident triage:** Incident Response Lead + Threat Modeling Analyst
+- **Audit prep:** Compliance Advisor + Security Architect
+- **Career planning:** Jerry Huaute Advisor + Security Career Mentor
+- **Red-team mindset:** Use anti-yes-man Canvas widgets for challenge and scope checks
 
 ## Theme
-Switch between light and dark mode using the toggle in the top right.`,
+Switch light/dark mode from the toggle in the header.`,
   },
 ];

phd-advisor-frontend/src/pages/CanvasPage.js

@@ -1,574 +1,1072 @@
-import React, { useState, useEffect } from 'react';
-import {
-  FileText,
-  RefreshCw,
-  Download,
-  Calendar,
-  TrendingUp,
-  Target,
-  BookOpen,
-  Lightbulb,
-  AlertTriangle,
-  Users,
-  BarChart3,
-  Heart,
-  ArrowLeft,
-  Printer,
-  Trash2,
-  MessageCircle,
-  ArrowRight
-} from 'lucide-react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { HelpCircle } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
 import { useAppConfig } from '../contexts/AppConfigContext';
-import CopyrightNotice from '../components/CopyrightNotice';
-import ConfirmDialog from '../components/ConfirmDialog';
+import Sidebar from '../components/Sidebar';
+import AppHeader from '../components/AppHeader';
+import Icon from '../components/canvas/CanvasIcon';
+import {
+  INSIGHTS, WIDGET_CATALOG, DEFAULT_LAYOUT, EMPTY_STATE, WORKSPACE_PRESETS,
+} from '../components/canvas/canvasData';
+import {
+  BibliographyWidget, KanbanWidget, PomodoroWidget, WritingWidget,
+  DeadlinesWidget, BudgetWidget, ReadingQueueWidget, NotesWidget,
+  HabitsWidget, GoalsWidget, MeetingsWidget,
+  OutlineWidget, HighlightsWidget, LatexWidget,
+  CalendarWidget, DocumenterWidget, ActivityWidget,
+  PhdJourneyWidget, PhdResourcesWidget,
+  StubWidget,
+} from '../components/canvas/CanvasWidgets';
+import {
+  Reviewer2Widget, DevilsAdvocateWidget, ScopeRealismWidget,
+  ReviewerModal, DevilsModal, ScopeModal,
+} from '../components/canvas/CanvasCriticWidgets';
+import {
+  AddCitationModal, AddTaskModal, AddDeadlineModal, LogWordsModal,
+  ConfirmRemoveModal, ReadingPaperModal, BudgetItemModal,
+  NoteModal, HabitModal, GoalModal, MeetingModal,
+  PaletteModal, CommandPaletteModal, GlobalSearchModal,
+} from '../components/canvas/CanvasModals';
+import CanvasWelcomeTour from '../components/canvas/CanvasWelcomeTour';
+import DeliverablesView, { TEMPLATES as DELIVERABLE_TEMPLATES } from '../components/canvas/CanvasDeliverables';
+import { MOD } from '../components/canvas/platform';
 import '../styles/CanvasPage.css';
 
-// Section icons mapping
-const sectionIcons = {
-  research_progress: TrendingUp,
-  methodology: BarChart3,
-  theoretical_framework: BookOpen,
-  challenges_obstacles: AlertTriangle,
-  next_steps: Target,
-  writing_communication: FileText,
-  career_development: Users,
-  literature_review: BookOpen,
-  data_analysis: BarChart3,
-  motivation_mindset: Heart
-};
+const LAYOUT_KEY = 'canvas-layout-v2';
+const STATES_KEY = 'canvas-states-v2';
+const VIEW_KEY = 'canvas-view-v2';
+
+function renderWidget(type, state, setState, openModal, allStates) {
+  const props = { state, setState, openModal, allStates };
+  switch (type) {
+    case 'bibliography': return <BibliographyWidget {...props}/>;
+    case 'kanban': return <KanbanWidget {...props}/>;
+    case 'pomodoro': return <PomodoroWidget {...props}/>;
+    case 'writing': return <WritingWidget {...props}/>;
+    case 'deadlines': return <DeadlinesWidget {...props}/>;
+    case 'budget': return <BudgetWidget {...props}/>;
+    case 'reading-queue': return <ReadingQueueWidget {...props}/>;
+    case 'notes': return <NotesWidget {...props}/>;
+    case 'habits': return <HabitsWidget {...props}/>;
+    case 'goals': return <GoalsWidget {...props}/>;
+    case 'meeting-log': return <MeetingsWidget {...props}/>;
+    case 'reviewer-2': return <Reviewer2Widget {...props}/>;
+    case 'devils-advocate': return <DevilsAdvocateWidget {...props}/>;
+    case 'scope-realism': return <ScopeRealismWidget {...props}/>;
+    case 'outline': return <OutlineWidget {...props}/>;
+    case 'highlights': return <HighlightsWidget {...props}/>;
+    case 'latex': return <LatexWidget {...props}/>;
+    case 'calendar': return <CalendarWidget {...props}/>;
+    case 'documenter': return <DocumenterWidget {...props}/>;
+    case 'activity': return <ActivityWidget {...props}/>;
+    case 'phd-journey': return <PhdJourneyWidget {...props}/>;
+    case 'phd-resources': return <PhdResourcesWidget {...props}/>;
+    default: {
+      const meta = WIDGET_CATALOG.find(w => w.type === type);
+      return <StubWidget meta={meta}/>;
+    }
+  }
+}
+
+function CanvasWidget({ widget, isDragging, isDragOver, onDragStart, onDragOver, onDragEnd, onDrop, state, setState, onRemove, onResize, openModal, allStates }) {
+  const meta = WIDGET_CATALOG.find(w => w.type === widget.type);
+  if (!meta) return null;
+  const sizes = ['S', 'M', 'L'];
+  const cycleSize = () => onResize(widget.id, sizes[(sizes.indexOf(widget.size) + 1) % sizes.length]);
 
-const CanvasSection = ({ section, sectionKey, isExpanded, onToggle }) => {
-  const IconComponent = sectionIcons[sectionKey] || Lightbulb;
-  
   return (
-    <div className="canvas-section">
-      <div 
-        className="section-header" 
-        onClick={() => onToggle(sectionKey)}
+    <div
+      className={`widget size-${widget.size} ${meta.critic ? 'critic' : ''} ${isDragging ? 'dragging' : ''} ${isDragOver ? 'drag-over' : ''}`}
+      data-widget-id={widget.id}
+      data-widget-type={widget.type}
+      onDragOver={(e) => { e.preventDefault(); onDragOver(widget.id); }}
+      onDrop={(e) => { e.preventDefault(); onDrop(widget.id); }}
+    >
+      <div
+        className="widget-head"
+        draggable
+        onDragStart={(e) => { onDragStart(widget.id); e.dataTransfer.effectAllowed = 'move'; }}
+        onDragEnd={onDragEnd}
       >
-        <div className="section-header-content">
-          <IconComponent className="section-icon" />
-          <div className="section-titles">
-            <h3 className="section-title">{section.title}</h3>
-            <p className="section-description">{section.description}</p>
-          </div>
-        </div>
-        <div className="section-meta">
-          <span className="insight-count">{section.insights.length} insights</span>
-          <div className={`expand-arrow ${isExpanded ? 'expanded' : ''}`}>
-            ▼
-          </div>
+        <span className="drag-grip"><Icon name="grip" size={14}/></span>
+        <div className="widget-icon"><Icon name={meta.icon} size={14}/></div>
+        <div className="widget-title">{meta.name}</div>
+        {meta.critic && <span className="widget-tag">wedge</span>}
+        <span className="size-pill" onClick={cycleSize} title="Cycle size S → M → L">{widget.size}</span>
+        <div className="widget-actions">
+          <button className="icon-btn" onClick={() => onRemove(widget.id, meta.name)} title="Remove"><Icon name="trash" size={13}/></button>
         </div>
       </div>
-      
-      {isExpanded && (
-        <div className="section-content">
-          {section.insights.length === 0 ? (
-            <div className="empty-section">
-              <Lightbulb className="empty-icon" />
-              <p>No insights yet. Keep chatting with your advisors to build this section!</p>
-            </div>
-          ) : (
-            <div className="insights-grid">
-              {section.insights.map((insight, index) => (
-                <div key={index} className="insight-card">
-                  <div className="insight-content">
-                    {insight.content}
-                  </div>
-                  <div className="insight-footer">
-                    <span className="insight-source">{insight.source_persona}</span>
-                    <span className="insight-confidence">
-                      {Math.round(insight.confidence_score * 100)}% confidence
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
+      <div className="widget-body">
+        {renderWidget(widget.type, state, setState, openModal, allStates)}
+      </div>
     </div>
   );
+}
+
+// ============================================================================
+// Insights view — AI-synthesized highlights with stats bar, filters, and
+// click-to-expand source quotes.
+// ============================================================================
+const INSIGHT_CATEGORIES = [
+  { id: 'all', label: 'All' },
+  { id: 'open', label: 'Open' },
+  { id: 'in-progress', label: 'In progress' },
+  { id: 'completed', label: 'Completed' },
+  { id: 'abandoned', label: 'Abandoned' },
+  { id: 'pinned', label: 'Pinned' },
+  { id: 'high', label: 'High confidence' },
+  { id: 'progress', label: 'Progress' },
+  { id: 'theory', label: 'Theory' },
+  { id: 'literature', label: 'Literature' },
+  { id: 'action', label: 'Actions' },
+  { id: 'risk', label: 'Risks' },
+];
+const CATEGORY_TINT = {
+  progress: 'rgba(16, 185, 129, 0.12)',
+  theory: 'rgba(99, 102, 241, 0.12)',
+  literature: 'rgba(245, 158, 11, 0.12)',
+  action: 'rgba(59, 130, 246, 0.12)',
+  risk: 'rgba(220, 38, 38, 0.12)',
+};
+const CATEGORY_FG = {
+  progress: '#10B981',
+  theory: '#818CF8',
+  literature: '#F59E0B',
+  action: '#3B82F6',
+  risk: '#DC2626',
 };
+const confidenceTier = (c) => c >= 75 ? 'high' : c >= 60 ? 'med' : 'low';
 
-const CanvasPage = ({ user, authToken, onNavigateToChat, onSignOut }) => {
-  const { config } = useAppConfig();
-  const appName = config?.app_settings?.app_name || 'Advisory Panel';
-  const [canvasData, setCanvasData] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isUpdating, setIsUpdating] = useState(false);
-  const [expandedSections, setExpandedSections] = useState({});
-  const [stats, setStats] = useState({});
-  const [isPrintView, setIsPrintView] = useState(false);
-  const [isProcessingFirstTime, setIsProcessingFirstTime] = useState(false);
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [showClearConfirm, setShowClearConfirm] = useState(false);
-  const [isClearing, setIsClearing] = useState(false);
+// Task statuses live on each individual bullet within an insight, not on the
+// whole card — Daniel's feedback: "each card is a discrete task, not a set of tasks".
+const TASK_STATUSES = [
+  { id: 'open', label: 'Open', color: 'var(--canvas-text-3)', icon: 'sparkles' },
+  { id: 'in-progress', label: 'In progress', color: '#3B82F6', icon: 'graph' },
+  { id: 'completed', label: 'Completed', color: '#10B981', icon: 'check' },
+  { id: 'abandoned', label: 'Abandoned', color: 'var(--canvas-text-4)', icon: 'x' },
+];
+const TASK_STATUS_KEY = 'canvas-task-status-v1';
+const taskKey = (insId, idx) => `${insId}::${idx}`;
 
-  useEffect(() => {
-    let pollInterval = null;
-    
-    const initializeCanvas = async () => {
-      await fetchCanvas();
-      await fetchStats();
-      await triggerAutoUpdate();
-      
-      setTimeout(() => {
-        checkForEmptyCanvasWithChats();
-      }, 2000);
-    };
-    
-    initializeCanvas();
-    
-    // Cleanup on unmount
-    return () => {
-      if (pollInterval) {
-        clearInterval(pollInterval);
-      }
-    };
-  }, []);
+function InsightsView({ widgetStates, setWidgetStates, onNavigateToChat }) {
+  const [pinned, setPinned] = useState(() => new Set(INSIGHTS.filter(i => i.pinned).map(i => i.id)));
+  const [taskStatuses, setTaskStatuses] = useState(() => {
+    try { return JSON.parse(localStorage.getItem(TASK_STATUS_KEY) || '{}'); } catch { return {}; }
+  });
+  const [filter, setFilter] = useState('all');
+  const [sortBy, setSortBy] = useState('confidence');
+  const [expanded, setExpanded] = useState(new Set());
+  const [refreshing, setRefreshing] = useState(false);
+  const [openStatusMenu, setOpenStatusMenu] = useState(null);
+  // 'cards' = current cards-of-tasks layout, 'tasks' = flat task list per Daniel's
+  // "Sections in sidebar, Tasks in the main view" suggestion.
+  const [viewMode, setViewMode] = useState(() => localStorage.getItem('canvas-insights-view') || 'cards');
+  useEffect(() => { localStorage.setItem('canvas-insights-view', viewMode); }, [viewMode]);
 
-  const fetchCanvas = async () => {
-    try {
-      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/phd-canvas`, {
-        headers: {
-          'Authorization': `Bearer ${authToken}`,
-          'Content-Type': 'application/json'
-        }
-      });
+  useEffect(() => {
+    localStorage.setItem(TASK_STATUS_KEY, JSON.stringify(taskStatuses));
+  }, [taskStatuses]);
 
-      if (response.ok) {
-        const data = await response.json();
-        setCanvasData(data);
-        
-        // Auto-expand sections with insights
-        const sectionsToExpand = {};
-        Object.entries(data.sections).forEach(([key, section]) => {
-          if (section.insights.length > 0) {
-            sectionsToExpand[key] = true;
-          }
-        });
-        setExpandedSections(sectionsToExpand);
-      } else {
-        console.error('Failed to fetch canvas');
-      }
-    } catch (error) {
-      console.error('Error fetching canvas:', error);
-    } finally {
-      setIsLoading(false);
-    }
+  const taskStatusOf = (insId, idx) => taskStatuses[taskKey(insId, idx)] || 'open';
+  const setTaskStatus = (insId, idx, status) => {
+    setTaskStatuses(prev => ({ ...prev, [taskKey(insId, idx)]: status }));
+    const lbl = TASK_STATUSES.find(s => s.id === status)?.label || status;
+    window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg: `Task marked ${lbl}`, kind: 'success' } }));
   };
 
-  const fetchStats = async () => {
-    try {
-      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/phd-canvas/stats`, {
-        headers: {
-          'Authorization': `Bearer ${authToken}`,
-          'Content-Type': 'application/json'
-        }
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setStats(data);
-      }
-    } catch (error) {
-      console.error('Error fetching stats:', error);
-    }
+  // Roll up to a card-level status: completed if all tasks done, abandoned if all abandoned,
+  // in-progress if any are in-progress, otherwise open.
+  const insightRollup = (ins) => {
+    const states = ins.bullets.map((_, idx) => taskStatusOf(ins.id, idx));
+    const total = states.length;
+    if (total === 0) return { state: 'open', done: 0, total: 0, pct: 0 };
+    const done = states.filter(s => s === 'completed').length;
+    const inProg = states.filter(s => s === 'in-progress').length;
+    const abandoned = states.filter(s => s === 'abandoned').length;
+    let state = 'open';
+    if (done === total) state = 'completed';
+    else if (abandoned === total) state = 'abandoned';
+    else if (inProg > 0 || done > 0) state = 'in-progress';
+    return { state, done, total, inProg, abandoned, pct: Math.round((done / total) * 100) };
   };
 
-  // Check if user has chats but empty canvas
-  const checkForEmptyCanvasWithChats = async () => {
-    try {
-      const isEmpty = !canvasData || canvasData.total_insights === 0;
-      
-      if (isEmpty) {
-        const response = await fetch(`${process.env.REACT_APP_API_URL}/api/chat-sessions/count`, {
-          headers: {
-            'Authorization': `Bearer ${authToken}`,
-            'Content-Type': 'application/json'
-          }
-        });
-        
-        if (response.ok) {
-          const { count } = await response.json();
-          if (count > 0) {
-            console.log(`User has ${count} chats but empty canvas. Triggering full refresh.`);
-            await handleFullRefresh();
-          }
-        } else {
-          console.error('Failed to fetch chat sessions count:', response.status);
-          // Don't trigger refresh if count fails
-          return;
-        }
-      }
-    } catch (error) {
-      console.error('Error checking for empty canvas with chats:', error);
-      // Stop the polling if there's an error
-      return;
-    }
+  const togglePin = (id) => {
+    setPinned(prev => {
+      const n = new Set(prev);
+      if (n.has(id)) n.delete(id); else n.add(id);
+      return n;
+    });
   };
-
-  const triggerAutoUpdate = async () => {
-    try {
-      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/phd-canvas/auto-update`, {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${authToken}`,
-          'Content-Type': 'application/json'
-        }
-      });
-      
-      if (response.ok) {
-        const result = await response.json();
-        
-        // If this is a first-time canvas update, show appropriate message
-        if (result.type === 'full_update') {
-          console.log('First-time canvas detected. Processing all your chats...');
-          
-          // Show loading state
-          setIsProcessingFirstTime(true);
-          setIsUpdating(true);
-          
-          // Poll for updates every 10 seconds for up to 3 minutes
-          let attempts = 0;
-          const maxAttempts = 18; // 3 minutes / 10 seconds
-          
-          const pollForUpdates = setInterval(async () => {
-            attempts++;
-            
-            try {
-              await fetchCanvas();
-              
-              // If canvas now has insights, stop polling
-              if (canvasData && canvasData.total_insights > 0) {
-                clearInterval(pollForUpdates);
-                setIsUpdating(false);
-                setIsProcessingFirstTime(false);
-                console.log('Canvas successfully populated with insights!');
-              }
-              
-              // Stop polling after max attempts
-              if (attempts >= maxAttempts) {
-                clearInterval(pollForUpdates);
-                setIsUpdating(false);
-                setIsProcessingFirstTime(false);
-              }
-            } catch (error) {
-              console.error('Error polling for updates:', error);
-            }
-          }, 10000);
-        }
-      }
-    } catch (error) {
-      console.error('Error triggering auto-update:', error);
-    }
+  const toggleExpand = (id) => {
+    setExpanded(prev => {
+      const n = new Set(prev);
+      if (n.has(id)) n.delete(id); else n.add(id);
+      return n;
+    });
   };
 
-  const handleClearCanvas = async () => {
-    setIsClearing(true);
-    try {
-      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/phd-canvas`, {
-        method: 'DELETE',
-        headers: {
-          'Authorization': `Bearer ${authToken}`,
-          'Content-Type': 'application/json'
-        }
-      });
-      if (response.ok) {
-        setCanvasData(null);
-        await fetchCanvas();
-      }
-    } catch (error) {
-      console.error('Error clearing canvas:', error);
-    } finally {
-      setIsClearing(false);
-      setShowClearConfirm(false);
-    }
+  const insightToTaskTitle = (ins) => {
+    const plain = (ins.bullets[0] || ins.summary || ins.title).replace(/<[^>]+>/g, '');
+    return plain.length > 80 ? plain.slice(0, 77) + '…' : plain;
   };
 
-  const handleRefreshCanvas = async () => {
-    // Prevent multiple simultaneous refresh requests
-    if (isRefreshing || isUpdating) {
-      console.log('Refresh already in progress, ignoring duplicate request');
-      return;
-    }
-    
-    setIsRefreshing(true);
-    setIsUpdating(true);
-    
-    try {
-      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/phd-canvas/refresh`, {
-        method: 'GET',
-        headers: {
-          'Authorization': `Bearer ${authToken}`,
-          'Content-Type': 'application/json'
-        }
-      });
-
-      if (response.ok) {
-        const result = await response.json();
-        console.log('Full refresh initiated:', result);
-        
-        // Poll for updates
-        setTimeout(() => {
-          fetchCanvas();
-          fetchStats();
-        }, 5000);
-        
-        setTimeout(() => {
-          setIsUpdating(false);
-          setIsRefreshing(false);
-        }, 10000);
-      }
-    } catch (error) {
-      console.error('Error refreshing canvas:', error);
-      setIsUpdating(false);
-      setIsRefreshing(false);
-    }
+  const sendToKanban = (ins) => {
+    if (!setWidgetStates) return;
+    const kanban = widgetStates.kanban || EMPTY_STATE.kanban;
+    const card = {
+      id: 'k' + Date.now(),
+      col: 'todo',
+      title: insightToTaskTitle(ins),
+      priority: 'med',
+      meta: `from Insights · ${ins.title}`,
+    };
+    setWidgetStates(s => ({ ...s, kanban: { ...kanban, cards: [...kanban.cards, card] } }));
+    window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg: 'Sent to Kanban (To Do)', kind: 'success' } }));
   };
 
-  const handleFullRefresh = async () => {
-    // Prevent multiple simultaneous refresh requests
-    if (isRefreshing || isUpdating) {
-      console.log('Refresh already in progress, ignoring duplicate request');
-      return;
-    }
-    
-    setIsRefreshing(true);
-    setIsUpdating(true);
-    
-    try {
-      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/phd-canvas/refresh`, {
-        method: 'GET',
-        headers: {
-          'Authorization': `Bearer ${authToken}`,
-          'Content-Type': 'application/json'
-        }
-      });
-
-      if (response.ok) {
-        const result = await response.json();
-        console.log('Full refresh initiated:', result);
-        
-        // Poll for updates
-        setTimeout(() => {
-          fetchCanvas();
-          fetchStats();
-        }, 5000);
-        
-        setTimeout(() => {
-          setIsUpdating(false);
-          setIsRefreshing(false);
-        }, 10000);
-      }
-    } catch (error) {
-      console.error('Error refreshing canvas:', error);
-      setIsUpdating(false);
-      setIsRefreshing(false);
-    }
+  // TODO(LLM): real refresh hits the orchestrator and re-synthesizes insights.
+  const handleRefresh = () => {
+    setRefreshing(true);
+    setTimeout(() => setRefreshing(false), 900);
+    window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg: 'Refreshing insights… (stub)', kind: 'success' } }));
   };
 
-  const toggleSection = (sectionKey) => {
-    setExpandedSections(prev => ({
-      ...prev,
-      [sectionKey]: !prev[sectionKey]
+  // "Ask follow-up": stash a draft prompt + insight context that the chat page
+  // can pick up on next navigation. Backend hookup TODO: include source-conversation IDs.
+  const askFollowUp = (ins) => {
+    const plain = (ins.bullets[0] || ins.summary || '').replace(/<[^>]+>/g, '');
+    const prompt = `Follow up on the insight "${ins.title}": ${plain}`;
+    try {
+      localStorage.setItem('canvas-chat-handoff', JSON.stringify({
+        at: Date.now(),
+        prompt,
+        insightId: ins.id,
+        insightTitle: ins.title,
+      }));
+    } catch { /* ignore */ }
+    window.dispatchEvent(new CustomEvent('canvas-toast', {
+      detail: { msg: `Follow-up drafted: "${ins.title}" — opening chat`, kind: 'success' },
     }));
+    // Use the existing navigation prop if present; falls back to the global event.
+    if (onNavigateToChat) onNavigateToChat();
   };
 
-  const handlePrint = () => {
-    setIsPrintView(true);
-    setTimeout(() => {
-      window.print();
-      setIsPrintView(false);
-    }, 100);
-  };
+  const filtered = useMemo(() => {
+    let r = INSIGHTS;
+    if (filter === 'pinned') r = r.filter(i => pinned.has(i.id));
+    else if (filter === 'high') r = r.filter(i => i.confidence >= 75);
+    else if (['open', 'in-progress', 'completed', 'abandoned'].includes(filter)) r = r.filter(i => insightRollup(i).state === filter);
+    else if (filter !== 'all') r = r.filter(i => i.category === filter);
+    if (sortBy === 'confidence') r = [...r].sort((a, b) => b.confidence - a.confidence);
+    if (sortBy === 'recent') r = [...r].sort((a, b) => (a.updatedMinutesAgo || 0) - (b.updatedMinutesAgo || 0));
+    if (sortBy === 'progress') r = [...r].sort((a, b) => insightRollup(b).pct - insightRollup(a).pct);
+    return r;
+  }, [filter, sortBy, pinned, taskStatuses]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const formatDate = (dateString) => {
-    if (!dateString) return 'Never';
-    return new Date(dateString).toLocaleDateString();
-  };
+  // Aggregate stats over individual TASKS, not insights (Daniel's framing)
+  const stats = useMemo(() => {
+    const allTasks = INSIGHTS.flatMap(i => i.bullets.map((_, idx) => taskStatusOf(i.id, idx)));
+    const taskTotal = allTasks.length;
+    const completed = allTasks.filter(s => s === 'completed').length;
+    const inProgress = allTasks.filter(s => s === 'in-progress').length;
+    const abandoned = allTasks.filter(s => s === 'abandoned').length;
+    const open = taskTotal - completed - inProgress - abandoned;
+    const totalSources = INSIGHTS.reduce((s, i) => s + (i.sources || 0), 0);
+    const avgConf = Math.round(INSIGHTS.reduce((s, i) => s + i.confidence, 0) / INSIGHTS.length);
+    return {
+      sections: INSIGHTS.length, taskTotal, completed, inProgress, abandoned, open,
+      totalSources, avgConf, pinnedCount: pinned.size,
+    };
+  }, [pinned, taskStatuses]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const lastUpdated = Math.min(...INSIGHTS.map(i => i.updatedMinutesAgo || 0));
 
-  if (isLoading) {
+  // Empty state — defensive (current data is hardcoded but a real backend could send [])
+  if (INSIGHTS.length === 0) {
     return (
-      <div className="canvas-loading">
-        <div className="loading-spinner"></div>
-        <p>Loading your {appName} Canvas...</p>
-      </div>
+      <>
+        <div className="page-header">
+          <div>
+            <h1 className="page-title">Insights</h1>
+            <div className="page-sub">AI-synthesized from your research conversations.</div>
+          </div>
+        </div>
+        <div className="empty-cell">
+          <Icon name="sparkles" size={32} style={{ color: 'var(--canvas-text-4)' }}/>
+          <div style={{ fontSize: 14, color: 'var(--canvas-text-2)', fontWeight: 500 }}>No insights yet</div>
+          <div>Have a conversation with your advisors and insights will appear here.</div>
+        </div>
+      </>
     );
   }
 
-  // Sort sections by priority and insights count
-  const sortedSections = Object.entries(canvasData?.sections || {})
-    .sort(([, a], [, b]) => {
-      // First by priority (lower number = higher priority)
-      if (a.priority !== b.priority) {
-        return a.priority - b.priority;
-      }
-      // Then by insights count (more insights first)
-      return b.insights.length - a.insights.length;
-    });
-
   return (
-    <div className={`canvas-page ${isPrintView ? 'print-view' : ''}`}>
-      {/* Header */}
-      <div className="canvas-header">
-        <div className="canvas-header-top">
-          <button
-            className="back-button"
-            onClick={onNavigateToChat}
-          >
-            <ArrowLeft size={20} />
-            Back to Chat
-          </button>
-
-          <div className="header-actions">
-            <button
-              onClick={handleRefreshCanvas}
-              disabled={isRefreshing || isUpdating}
-              className={`canvas-icon-btn refresh-button ${(isRefreshing || isUpdating) ? 'disabled' : ''}`}
-              title={(isRefreshing || isUpdating) ? 'Refreshing…' : 'Refresh Canvas'}
-              aria-label="Refresh canvas"
-            >
-              <RefreshCw className={`refresh-icon ${(isRefreshing || isUpdating) ? 'spinning' : ''}`} />
-            </button>
-
-            <button
-              className="canvas-icon-btn print-button"
-              onClick={handlePrint}
-              title="Print"
-              aria-label="Print canvas"
-            >
-              <Printer className="action-icon" />
-            </button>
+    <>
+      <div className="page-header">
+        <div>
+          <h1 className="page-title">Insights</h1>
+          <div className="page-sub">AI-synthesized from your research conversations.</div>
+        </div>
+      </div>
 
-            <button
-              className="canvas-icon-btn clear-canvas-btn"
-              onClick={() => setShowClearConfirm(true)}
-              disabled={isClearing}
-              title="Clear Canvas"
-              aria-label="Clear canvas"
-            >
-              <Trash2 className="action-icon" />
-            </button>
+      {/* Stats bar */}
+      <div className="insights-stats">
+        <div className="insights-stat">
+          <span className="insights-stat-value">{stats.completed}/{stats.taskTotal}</span>
+          <span className="insights-stat-label">tasks done</span>
+        </div>
+        <div className="insights-stat insights-stat-progress">
+          <div className="insights-progress-bar">
+            <i className="ip-completed" style={{ width: `${(stats.completed / Math.max(1, stats.taskTotal)) * 100}%` }}/>
+            <i className="ip-inprogress" style={{ width: `${(stats.inProgress / Math.max(1, stats.taskTotal)) * 100}%` }}/>
+            <i className="ip-abandoned" style={{ width: `${(stats.abandoned / Math.max(1, stats.taskTotal)) * 100}%` }}/>
           </div>
+          <span className="insights-stat-label">
+            {stats.completed} done · {stats.inProgress} in progress · {stats.open} open
+            {stats.abandoned > 0 && ` · ${stats.abandoned} abandoned`}
+          </span>
         </div>
-
-        <div className="canvas-title-section">
-          <h1 className="canvas-title">
-            <FileText className="canvas-title-icon" />
-            {appName} Canvas
-          </h1>
-          <p className="canvas-subtitle">Your research progress at a glance</p>
+        <div className="insights-stat">
+          <span className="insights-stat-value">{stats.sections}</span>
+          <span className="insights-stat-label">sections</span>
+        </div>
+        <div className="insights-stat">
+          <span className="insights-stat-value">{stats.avgConf}%</span>
+          <span className="insights-stat-label">avg confidence</span>
         </div>
+        <span style={{ flex: 1 }}/>
+        <span className="insights-stat-update">
+          <span className="dot"/>
+          updated {lastUpdated} min ago
+        </span>
+        <button className="btn btn-ghost" onClick={handleRefresh} disabled={refreshing}>
+          {refreshing ? <div className="spinner"/> : <Icon name="refresh" size={13}/>}
+          Refresh
+        </button>
       </div>
 
-      {/* Stats Bar */}
-      <div className="canvas-stats">
-        <div className="stat-item">
-          <span className="stat-number">{canvasData?.total_insights || 0}</span>
-          <span className="stat-label">Total Insights</span>
-        </div>
-        <div className="stat-item">
-          <span className="stat-number">
-            {Object.keys(canvasData?.sections || {}).filter(key => 
-              canvasData.sections[key].insights.length > 0
-            ).length}
-          </span>
-          <span className="stat-label">Active Sections</span>
+      {/* View toggle: Cards (sections with their tasks) vs Tasks (flat list) */}
+      <div className="insights-view-toggle">
+        <button className={viewMode === 'cards' ? 'active' : ''} onClick={() => setViewMode('cards')}>
+          <Icon name="layout" size={12}/>Cards
+        </button>
+        <button className={viewMode === 'tasks' ? 'active' : ''} onClick={() => setViewMode('tasks')}>
+          <Icon name="task" size={12}/>Tasks
+        </button>
+      </div>
+
+      {/* Filter + sort */}
+      <div className="insights-filters">
+        <div className="palette-cats" style={{ marginBottom: 0 }}>
+          {INSIGHT_CATEGORIES.map(c => {
+            const count =
+              c.id === 'all' ? INSIGHTS.length :
+              c.id === 'pinned' ? pinned.size :
+              c.id === 'high' ? INSIGHTS.filter(i => i.confidence >= 75).length :
+              ['open', 'in-progress', 'completed', 'abandoned'].includes(c.id) ? INSIGHTS.filter(i => insightRollup(i).state === c.id).length :
+              INSIGHTS.filter(i => i.category === c.id).length;
+            if (count === 0 && c.id !== 'all') return null;
+            return (
+              <button key={c.id}
+                className={`palette-cat ${filter === c.id ? 'active' : ''}`}
+                onClick={() => setFilter(c.id)}>
+                {c.label}<span style={{ marginLeft: 6, opacity: 0.6 }}>{count}</span>
+              </button>
+            );
+          })}
         </div>
-        <div className="stat-item">
-          <span className="stat-number">
-            {formatDate(canvasData?.last_updated)}
+        <select className="select" style={{ width: 'auto', padding: '4px 8px', fontSize: 11, fontFamily: 'var(--canvas-mono)' }}
+          value={sortBy} onChange={e => setSortBy(e.target.value)}>
+          <option value="confidence">↓ confidence</option>
+          <option value="recent">↓ recent</option>
+          <option value="progress">↓ progress</option>
+        </select>
+      </div>
+
+      {/* Pinned strip — only when there are pins and we're not already filtering by pinned */}
+      {pinned.size > 0 && filter !== 'pinned' && (
+        <div className="insights-pinned-strip">
+          <span style={{ fontSize: 11, color: 'var(--canvas-text-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>
+            Pinned
           </span>
-          <span className="stat-label">Last Updated</span>
+          {INSIGHTS.filter(i => pinned.has(i.id)).map(ins => (
+            <button key={ins.id} className="insights-pinned-pill" onClick={() => {
+              const el = document.getElementById(`insight-${ins.id}`);
+              if (el) {
+                el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                el.style.boxShadow = '0 0 0 2px var(--canvas-accent), 0 0 24px var(--canvas-accent-glow)';
+                setTimeout(() => { el.style.boxShadow = ''; }, 1400);
+              }
+            }}>
+              <Icon name={ins.icon} size={11}/>{ins.title}
+            </button>
+          ))}
         </div>
-      </div>
+      )}
 
-      {/* Canvas Content */}
-      <div className="canvas-content">
-        {sortedSections.length === 0 ? (
-          <div className="empty-canvas">
-            <FileText className="empty-canvas-icon" />
-            <h2>Your Canvas is Empty</h2>
-            {isUpdating || isProcessingFirstTime ? (
-              <div>
-                <p>
-                  {isProcessingFirstTime 
-                    ? 'Processing your chat history to populate insights...' 
-                    : 'Updating canvas with latest insights...'
-                  }
-                </p>
-                <div className="inline-loading-spinner">
-                  <RefreshCw className="spinning" />
-                </div>
-                <p className="processing-note">
-                  This may take a few minutes for extensive chat history.
-                </p>
-              </div>
-            ) : (
-              <div>
-                <p>Start chatting with your AI advisors to populate your {appName} Canvas with insights!</p>
-                <div className="empty-canvas-actions">
+      {/* TASKS view — flat list of every bullet across insights */}
+      {viewMode === 'tasks' && (() => {
+        const allTasks = filtered.flatMap(ins => ins.bullets.map((b, idx) => ({
+          ins, idx, text: b, status: taskStatusOf(ins.id, idx),
+        })));
+        const statusOrder = { open: 0, 'in-progress': 1, completed: 2, abandoned: 3 };
+        const sorted = [...allTasks].sort((a, b) => statusOrder[a.status] - statusOrder[b.status]);
+        if (sorted.length === 0) {
+          return (
+            <div className="empty-cell">
+              <Icon name="task" size={28} style={{ color: 'var(--canvas-text-4)' }}/>
+              <div style={{ fontSize: 14, color: 'var(--canvas-text-2)', fontWeight: 500 }}>No tasks match this filter</div>
+              <button className="btn btn-ghost" onClick={() => setFilter('all')}>Show all</button>
+            </div>
+          );
+        }
+        return (
+          <div className="insights-tasks-list">
+            {sorted.map(({ ins, idx, text, status }) => {
+              const meta = TASK_STATUSES.find(s => s.id === status);
+              const menuKey = `tv::${ins.id}::${idx}`;
+              const menuOpen = openStatusMenu === menuKey;
+              return (
+                <div key={menuKey} className={`insights-task-row task-${status}`}>
                   <button
-                    className="empty-canvas-btn primary"
-                    onClick={onNavigateToChat}
+                    className="insight-task-check"
+                    style={{ color: meta.color, borderColor: meta.color + '60' }}
+                    onClick={() => setOpenStatusMenu(menuOpen ? null : menuKey)}
+                    title={`Status: ${meta.label}`}
                   >
-                    <MessageCircle size={18} />
-                    <span>Start Chatting</span>
-                    <ArrowRight size={16} className="empty-canvas-btn-arrow" />
+                    {status === 'completed' && <Icon name="check" size={11}/>}
+                    {status === 'in-progress' && <span className="task-check-dot"/>}
+                    {status === 'abandoned' && <Icon name="x" size={10}/>}
                   </button>
-                  <button
-                    className="empty-canvas-btn secondary"
-                    onClick={handleFullRefresh}
-                  >
-                    <RefreshCw size={16} />
-                    <span>Process Existing Chats</span>
+                  <div className="insights-task-body">
+                    <button
+                      className="insights-task-section"
+                      onClick={() => {
+                        setViewMode('cards');
+                        setTimeout(() => {
+                          const el = document.getElementById(`insight-${ins.id}`);
+                          if (el) el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                        }, 60);
+                      }}
+                      title="Jump to this section"
+                    >
+                      <Icon name={ins.icon} size={10}/>{ins.title}
+                    </button>
+                    <span className="insights-task-text" dangerouslySetInnerHTML={{ __html: text }}/>
+                  </div>
+                  <button className="chip" onClick={() => sendToKanban(ins)} title="Send this section's open tasks to Kanban">
+                    <Icon name="task" size={11}/>Kanban
                   </button>
+                  {menuOpen && (
+                    <div className="insight-status-menu" onMouseLeave={() => setOpenStatusMenu(null)}>
+                      {TASK_STATUSES.map(s => (
+                        <button key={s.id}
+                          className={status === s.id ? 'active' : ''}
+                          onClick={() => { setTaskStatus(ins.id, idx, s.id); setOpenStatusMenu(null); }}>
+                          <Icon name={s.icon} size={11} style={{ color: s.color }}/>
+                          {s.label}
+                        </button>
+                      ))}
+                    </div>
+                  )}
                 </div>
-              </div>
-            )}
+              );
+            })}
           </div>
-        ) : (
-          <div className="sections-container">
-            {sortedSections.map(([sectionKey, section]) => (
-              <CanvasSection
-                key={sectionKey}
-                section={section}
-                sectionKey={sectionKey}
-                isExpanded={expandedSections[sectionKey]}
-                onToggle={toggleSection}
-              />
-            ))}
+        );
+      })()}
+
+      {/* CARDS view (default) */}
+      {viewMode === 'cards' && (filtered.length === 0 ? (
+        <div className="empty-cell">
+          <Icon name="search" size={28} style={{ color: 'var(--canvas-text-4)' }}/>
+          <div style={{ fontSize: 14, color: 'var(--canvas-text-2)', fontWeight: 500 }}>No insights match this filter</div>
+          <button className="btn btn-ghost" onClick={() => setFilter('all')}>Show all</button>
+        </div>
+      ) : (
+        <div className="insight-grid">
+          {filtered.map(ins => {
+            const isExpanded = expanded.has(ins.id);
+            const isPinned = pinned.has(ins.id);
+            const tier = confidenceTier(ins.confidence);
+            const tint = CATEGORY_TINT[ins.category] || 'var(--canvas-surface-2)';
+            const fg = CATEGORY_FG[ins.category] || 'var(--canvas-accent)';
+            const rollup = insightRollup(ins);
+            return (
+              <div
+                key={ins.id}
+                id={`insight-${ins.id}`}
+                className={`insight ${isPinned ? 'is-pinned' : ''} tier-${tier} status-${rollup.state}`}
+              >
+                <div className="insight-head">
+                  <div className="insight-icon" style={{ background: tint, color: fg }}>
+                    <Icon name={ins.icon} size={16}/>
+                  </div>
+                  <div className="insight-title">{ins.title}</div>
+                  <ConfidenceRing value={ins.confidence}/>
+                </div>
+
+                {/* Per-card progress (rolls up the bullet tasks) */}
+                {rollup.total > 0 && (
+                  <div className="insight-progress">
+                    <div className="insight-progress-meta">
+                      <span className="insight-progress-count">{rollup.done}/{rollup.total} tasks</span>
+                      {rollup.state === 'completed' && <span className="insight-progress-badge done">✓ Resolved</span>}
+                      {rollup.state === 'abandoned' && <span className="insight-progress-badge abandoned">Abandoned</span>}
+                      {rollup.state === 'in-progress' && <span className="insight-progress-badge inprog">In progress</span>}
+                    </div>
+                    <div className="insight-progress-bar">
+                      <i className="ip-completed" style={{ width: `${(rollup.done / rollup.total) * 100}%` }}/>
+                      {rollup.inProg > 0 && <i className="ip-inprogress" style={{ width: `${(rollup.inProg / rollup.total) * 100}%` }}/>}
+                      {rollup.abandoned > 0 && <i className="ip-abandoned" style={{ width: `${(rollup.abandoned / rollup.total) * 100}%` }}/>}
+                    </div>
+                  </div>
+                )}
+
+                <div className="insight-body">
+                  <div>{ins.summary}</div>
+                  <ul className="insight-tasks">
+                    {ins.bullets.map((b, idx) => {
+                      const status = taskStatusOf(ins.id, idx);
+                      const meta = TASK_STATUSES.find(s => s.id === status);
+                      const menuOpen = openStatusMenu === `${ins.id}::${idx}`;
+                      return (
+                        <li key={idx} className={`insight-task task-${status}`}>
+                          <button
+                            className="insight-task-check"
+                            style={{ color: meta.color, borderColor: meta.color + '60' }}
+                            onClick={() => setOpenStatusMenu(menuOpen ? null : `${ins.id}::${idx}`)}
+                            title={`Status: ${meta.label}`}
+                          >
+                            {status === 'completed' && <Icon name="check" size={10}/>}
+                            {status === 'in-progress' && <span className="task-check-dot"/>}
+                            {status === 'abandoned' && <Icon name="x" size={9}/>}
+                          </button>
+                          <span className="insight-task-text" dangerouslySetInnerHTML={{ __html: b }}/>
+                          {menuOpen && (
+                            <div className="insight-status-menu" onMouseLeave={() => setOpenStatusMenu(null)}>
+                              {TASK_STATUSES.map(s => (
+                                <button key={s.id}
+                                  className={status === s.id ? 'active' : ''}
+                                  onClick={() => { setTaskStatus(ins.id, idx, s.id); setOpenStatusMenu(null); }}>
+                                  <Icon name={s.icon} size={11} style={{ color: s.color }}/>
+                                  {s.label}
+                                </button>
+                              ))}
+                            </div>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+
+                {/* Detail panel — quotes from sources, only when expanded */}
+                {isExpanded && ins.quotes && (
+                  <div className="insight-detail">
+                    <div className="insight-detail-head">Source quotes · {ins.sources} {ins.sources === 1 ? 'source' : 'sources'}</div>
+                    {ins.quotes.map((q, i) => (
+                      <div key={i} className="insight-quote">{q}</div>
+                    ))}
+                  </div>
+                )}
+
+                <div className="insight-foot">
+                  <span className="insight-foot-meta">
+                    <Icon name="message" size={10}/> {ins.sources}
+                    <span className="insight-dot"/>
+                    updated {ins.updatedMinutesAgo}m ago
+                  </span>
+                </div>
+
+                <div className="insight-actions">
+                  <button className="chip" onClick={() => askFollowUp(ins)} title="Open this insight in a new chat session">
+                    <Icon name="message" size={11}/>Ask follow-up
+                  </button>
+                  <button className="chip" onClick={() => sendToKanban(ins)} title="Add all open tasks from this insight to your Kanban (To Do)">
+                    <Icon name="task" size={11}/>Add to Kanban
+                  </button>
+                  <button className="chip" onClick={() => toggleExpand(ins.id)}>
+                    <Icon name="expand" size={11}/>{isExpanded ? 'Collapse' : 'Source quotes'}
+                  </button>
+                  <button className={`chip ${isPinned ? 'pinned' : ''}`} onClick={() => togglePin(ins.id)}>
+                    <Icon name="pin" size={11}/>{isPinned ? 'Pinned' : 'Pin'}
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </>
+  );
+}
+
+// Small SVG ring used for the confidence indicator
+function ConfidenceRing({ value }) {
+  const r = 14;
+  const c = 2 * Math.PI * r;
+  const dash = c * (1 - value / 100);
+  const tier = confidenceTier(value);
+  const color = tier === 'high' ? '#10B981' : tier === 'med' ? '#F59E0B' : '#DC2626';
+  return (
+    <div className={`confidence-ring tier-${tier}`} title={`${value}% confidence (${tier})`}>
+      <svg width="32" height="32" viewBox="0 0 32 32">
+        <circle cx="16" cy="16" r={r} fill="none" stroke="var(--canvas-surface-3)" strokeWidth="3"/>
+        <circle cx="16" cy="16" r={r} fill="none" stroke={color} strokeWidth="3"
+          strokeDasharray={c} strokeDashoffset={dash} strokeLinecap="round"
+          transform="rotate(-90 16 16)"/>
+      </svg>
+      <span style={{ color }}>{value}</span>
+    </div>
+  );
+}
+
+function PresetPicker({ onPick }) {
+  return (
+    <div className="canvas-presets">
+      <div className="canvas-presets-head">
+        <div className="canvas-presets-title">Start from a preset</div>
+        <div className="canvas-presets-sub">Or skip and add widgets one at a time.</div>
+      </div>
+      <div className="canvas-presets-grid">
+        {WORKSPACE_PRESETS.map(p => (
+          <button key={p.id} className="canvas-preset-card" onClick={() => onPick(p)}>
+            <div className="canvas-preset-icon"><Icon name={p.icon} size={18}/></div>
+            <div className="canvas-preset-content">
+              <div className="canvas-preset-name">{p.name}</div>
+              <div className="canvas-preset-desc">{p.desc}</div>
+              <div className="canvas-preset-meta">{p.layout.length} widgets</div>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function WorkspaceView({ openModal, layout, setLayout, widgetStates, setWidgetStates }) {
+  const [dragId, setDragId] = useState(null);
+  const [dragOverId, setDragOverId] = useState(null);
+
+  const onDragStart = (id) => setDragId(id);
+  const onDragOver = (id) => { if (id !== dragId) setDragOverId(id); };
+  const onDragEnd = () => { setDragId(null); setDragOverId(null); };
+  const onDrop = (targetId) => {
+    if (!dragId || dragId === targetId) { onDragEnd(); return; }
+    const next = [...layout];
+    const fromIdx = next.findIndex(w => w.id === dragId);
+    const toIdx = next.findIndex(w => w.id === targetId);
+    const [moved] = next.splice(fromIdx, 1);
+    next.splice(toIdx, 0, moved);
+    setLayout(next);
+    onDragEnd();
+  };
+
+  const setWState = (type) => (updater) => {
+    setWidgetStates(s => ({
+      ...s,
+      [type]: typeof updater === 'function' ? updater(s[type]) : updater,
+    }));
+  };
+
+  const removeWidget = (id, label) => {
+    openModal('confirm-remove', {
+      label,
+      onConfirm: () => {
+        setLayout(l => l.filter(w => w.id !== id));
+        window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg: label + ' removed', kind: 'success' } }));
+      },
+    });
+  };
+
+  const resizeWidget = (id, size) => setLayout(l => l.map(w => w.id === id ? { ...w, size } : w));
+
+  // Each widget starts from scratch — fresh empty state, no demo content.
+  const addWidget = (meta) => {
+    const id = 'w-' + Date.now();
+    setLayout(l => [...l, { id, type: meta.type, size: meta.defaultSize, critic: meta.critic }]);
+    if (EMPTY_STATE[meta.type]) {
+      setWidgetStates(s => ({ ...s, [meta.type]: JSON.parse(JSON.stringify(EMPTY_STATE[meta.type])) }));
+    }
+  };
+
+  const applyPreset = (preset) => {
+    setLayout(preset.layout.map(w => ({ ...w })));
+    // Seed empty state for any widget types not already present
+    const seeds = {};
+    preset.layout.forEach(w => {
+      if (!widgetStates[w.type] && EMPTY_STATE[w.type]) {
+        seeds[w.type] = JSON.parse(JSON.stringify(EMPTY_STATE[w.type]));
+      }
+    });
+    if (Object.keys(seeds).length) setWidgetStates(s => ({ ...s, ...seeds }));
+    window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg: `${preset.name} preset loaded`, kind: 'success' } }));
+  };
+
+  const reset = () => {
+    if (!window.confirm('Reset workspace? All widgets and content will be cleared.')) return;
+    setLayout([]);
+    setWidgetStates({});
+    localStorage.removeItem(LAYOUT_KEY);
+    localStorage.removeItem(STATES_KEY);
+  };
+
+  return (
+    <>
+      <div className="page-header">
+        <div>
+          <h1 className="page-title">Workspace</h1>
+          <div className="page-sub">{layout.length} widgets · {layout.filter(w => w.critic).length} anti-yes-man · drag headers to reorder, click size pill to resize</div>
+        </div>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <button className="btn btn-ghost" onClick={reset} title="Reset layout"><Icon name="reset" size={13}/>Reset</button>
+          <button className="btn btn-primary" onClick={() => openModal('palette', {
+            layout, onAdd: addWidget,
+          })}><Icon name="plus" size={13}/>Add widget</button>
+        </div>
+      </div>
+      {layout.length === 0 && (
+        <PresetPicker onPick={applyPreset}/>
+      )}
+      <div className="workspace">
+        {layout.length === 0 && (
+          <div className="empty-cell">
+            <Icon name="layout" size={28} style={{ color: 'var(--canvas-text-4)' }}/>
+            <div style={{ fontSize: 14, color: 'var(--canvas-text-2)', fontWeight: 500 }}>Or build from scratch</div>
+            <button className="btn btn-primary" onClick={() => openModal('palette', { layout, onAdd: addWidget })} style={{ marginTop: 6 }}>
+              <Icon name="plus" size={13}/>Add your first widget
+            </button>
           </div>
         )}
+        {layout.map((w) => (
+          <CanvasWidget
+            key={w.id}
+            widget={w}
+            isDragging={dragId === w.id}
+            isDragOver={dragOverId === w.id}
+            onDragStart={onDragStart}
+            onDragOver={onDragOver}
+            onDragEnd={onDragEnd}
+            onDrop={onDrop}
+            state={widgetStates[w.type] ?? (EMPTY_STATE[w.type] ?? {})}
+            setState={setWState(w.type)}
+            onRemove={removeWidget}
+            onResize={resizeWidget}
+            openModal={openModal}
+            allStates={widgetStates}
+          />
+        ))}
       </div>
+    </>
+  );
+}
 
-      {/* Copyright Footer */}
-      <footer className="canvas-copyright-footer">
-        <CopyrightNotice />
-      </footer>
+function ModalRouter({ modal, onClose }) {
+  if (!modal) return null;
+  const handleBackdropClick = (e) => { if (e.target === e.currentTarget) onClose(); };
+  let content = null;
+  switch (modal.kind) {
+    case 'palette':         content = <PaletteModal data={modal.data} onClose={onClose}/>; break;
+    case 'add-citation':    content = <AddCitationModal data={modal.data} onClose={onClose}/>; break;
+    case 'add-task':        content = <AddTaskModal data={modal.data} onClose={onClose}/>; break;
+    case 'add-deadline':    content = <AddDeadlineModal data={modal.data} onClose={onClose}/>; break;
+    case 'log-words':       content = <LogWordsModal data={modal.data} onClose={onClose}/>; break;
+    case 'confirm-remove':  content = <ConfirmRemoveModal data={modal.data} onClose={onClose}/>; break;
+    case 'reviewer-2':      content = <ReviewerModal data={modal.data} onClose={onClose}/>; break;
+    case 'devils-advocate': content = <DevilsModal data={modal.data} onClose={onClose}/>; break;
+    case 'scope-realism':   content = <ScopeModal data={modal.data} onClose={onClose}/>; break;
+    case 'reading-paper':   content = <ReadingPaperModal data={modal.data} onClose={onClose}/>; break;
+    case 'budget-item':     content = <BudgetItemModal data={modal.data} onClose={onClose}/>; break;
+    case 'note':            content = <NoteModal data={modal.data} onClose={onClose}/>; break;
+    case 'habit':           content = <HabitModal data={modal.data} onClose={onClose}/>; break;
+    case 'goal':            content = <GoalModal data={modal.data} onClose={onClose}/>; break;
+    case 'meeting':         content = <MeetingModal data={modal.data} onClose={onClose}/>; break;
+    case 'command':         content = <CommandPaletteModal data={modal.data} onClose={onClose}/>; break;
+    case 'global-search':   content = <GlobalSearchModal data={modal.data} onClose={onClose}/>; break;
+    default: return null;
+  }
+  return <div className="canvas-modal-backdrop" onClick={handleBackdropClick}>{content}</div>;
+}
 
-      {/* Print Footer */}
-      {isPrintView && (
-        <div className="print-footer">
-          <p>Generated by {appName} - {new Date().toLocaleDateString()}</p>
-          <p>Student: {user?.email} | Total Insights: {canvasData?.total_insights || 0}</p>
+function ToastStack() {
+  const [toasts, setToasts] = useState([]);
+  useEffect(() => {
+    const handler = (e) => {
+      const id = Date.now() + Math.random();
+      setToasts(t => [...t, { id, ...e.detail }]);
+      setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3500);
+    };
+    window.addEventListener('canvas-toast', handler);
+    return () => window.removeEventListener('canvas-toast', handler);
+  }, []);
+  return (
+    <div className="toast-stack">
+      {toasts.map(t => (
+        <div key={t.id} className={`toast ${t.kind || 'success'}`}>
+          <Icon name={t.kind === 'critic' ? 'gavel' : t.kind === 'danger' ? 'alert' : 'check'} size={14}/>
+          <span>{t.msg}</span>
         </div>
-      )}
+      ))}
+    </div>
+  );
+}
+
+
+const CanvasPage = ({ user, authToken, onNavigateToHome, onNavigateToChat, onSignOut }) => {
+  const { theme, toggleTheme } = useTheme();
+  useAppConfig();
+  const [view, setView] = useState(() => localStorage.getItem(VIEW_KEY) || 'workspace');
+  const [modal, setModal] = useState(null);
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [tourForceShow, setTourForceShow] = useState(0);
+
+  const [layout, setLayout] = useState(() => {
+    try {
+      const saved = localStorage.getItem(LAYOUT_KEY);
+      return saved ? JSON.parse(saved) : DEFAULT_LAYOUT;
+    } catch { return DEFAULT_LAYOUT; }
+  });
+  const [widgetStates, setWidgetStates] = useState(() => {
+    try {
+      const saved = localStorage.getItem(STATES_KEY);
+      return saved ? JSON.parse(saved) : {};
+    } catch { return {}; }
+  });
+
+  useEffect(() => { localStorage.setItem(LAYOUT_KEY, JSON.stringify(layout)); }, [layout]);
+  useEffect(() => { localStorage.setItem(STATES_KEY, JSON.stringify(widgetStates)); }, [widgetStates]);
+  useEffect(() => { localStorage.setItem(VIEW_KEY, view); }, [view]);
+
+  // Apply canvas theme attribute on body for scoped styling
+  useEffect(() => {
+    document.body.dataset.canvasTheme = theme;
+    return () => { delete document.body.dataset.canvasTheme; };
+  }, [theme]);
+
+  const openModal = useCallback((kind, data = {}) => setModal({ kind, data }), []);
+  const closeModal = useCallback(() => setModal(null), []);
+
+  const exportWorkspace = useCallback(() => {
+    const data = { layout, states: widgetStates };
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = 'canvas-workspace.json';
+    a.click();
+    window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg: 'Workspace exported as JSON', kind: 'success' } }));
+  }, [layout, widgetStates]);
+
+  const openCommandPalette = useCallback(() => {
+    openModal('command', {
+      layout,
+      onSetView: (v) => setView(v),
+      onAddWidget: (meta) => {
+        const id = 'w-' + Date.now();
+        setLayout(l => [...l, { id, type: meta.type, size: meta.defaultSize, critic: meta.critic }]);
+        if (EMPTY_STATE[meta.type]) {
+          setWidgetStates(s => ({ ...s, [meta.type]: JSON.parse(JSON.stringify(EMPTY_STATE[meta.type])) }));
+        }
+      },
+      onToggleTheme: toggleTheme,
+      onExport: exportWorkspace,
+    });
+  }, [openModal, layout, toggleTheme, exportWorkspace]);
+
+  const openGlobalSearch = useCallback(() => {
+    openModal('global-search', { states: widgetStates });
+  }, [openModal, widgetStates]);
+
+  // Critic widgets dispatch `canvas-open-in-chat` when the user wants real LLM history.
+  useEffect(() => {
+    const handler = () => onNavigateToChat && onNavigateToChat();
+    window.addEventListener('canvas-open-in-chat', handler);
+    return () => window.removeEventListener('canvas-open-in-chat', handler);
+  }, [onNavigateToChat]);
+
+  // Esc closes modal, ⌘K opens command palette, ⌘/ opens global content search,
+  // ? opens the welcome tour for help (matches the icon in the topbar).
+  useEffect(() => {
+    const k = (e) => {
+      if (e.key === 'Escape') closeModal();
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        openCommandPalette();
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === '/') {
+        e.preventDefault();
+        openGlobalSearch();
+      }
+      // ? key (Shift+/) — only when the user isn't typing in an input
+      if (e.key === '?' && !['INPUT', 'TEXTAREA'].includes(e.target.tagName)) {
+        e.preventDefault();
+        setTourForceShow(n => n + 1);
+      }
+    };
+    window.addEventListener('keydown', k);
+    return () => window.removeEventListener('keydown', k);
+  }, [closeModal, openCommandPalette, openGlobalSearch]);
+
+  // Highlight a widget when picked from the sidebar
+  const flashScrollTo = (selector) => {
+    const el = document.querySelector(selector);
+    if (!el) return;
+    el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    el.style.boxShadow = '0 0 0 2px var(--canvas-accent), 0 0 24px var(--canvas-accent-glow)';
+    setTimeout(() => { el.style.boxShadow = ''; }, 1400);
+  };
+
+  // Workspace: group widgets by category for the new sidebar
+  const widgetGroups = useMemo(() => {
+    const groups = {};
+    layout.forEach(w => {
+      const meta = WIDGET_CATALOG.find(m => m.type === w.type);
+      if (!meta) return;
+      const cat = meta.cat;
+      (groups[cat] ||= { id: cat, label: cat, items: [] }).items.push({
+        id: w.id,
+        label: meta.name,
+        icon: meta.icon,
+        critic: meta.critic,
+        onClick: () => flashScrollTo(`[data-widget-id="${w.id}"]`),
+      });
+    });
+    // Order: critic last
+    const order = ['research', 'writing', 'project', 'wellness', 'career', 'data', 'practical', 'critic'];
+    return order.map(c => groups[c]).filter(Boolean);
+  }, [layout]);
+
+  // Insights: list of sections — Daniel's feedback said sidebar should show sections here
+  const insightSections = useMemo(() => {
+    let taskMap = {};
+    try { taskMap = JSON.parse(localStorage.getItem(TASK_STATUS_KEY) || '{}'); } catch { /* ignore */ }
+    return INSIGHTS.map(ins => {
+      const states = ins.bullets.map((_, idx) => taskMap[taskKey(ins.id, idx)] || 'open');
+      const done = states.filter(s => s === 'completed').length;
+      return {
+        id: ins.id,
+        name: ins.title,
+        icon: ins.icon,
+        category: ins.category,
+        confidence: ins.confidence,
+        taskCount: ins.bullets.length,
+        doneCount: done,
+        onClick: () => flashScrollTo(`#insight-${ins.id}`),
+      };
+    });
+  }, [view, layout, widgetStates]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Deliverables: list of projects with sections + history actions
+  const deliverableProjects = useMemo(() => {
+    try {
+      const dStore = JSON.parse(localStorage.getItem('canvas-deliverables-v2') || '{}');
+      const projects = Object.values(dStore.projects || {});
+      return projects.map(p => {
+        const t = DELIVERABLE_TEMPLATES.find(x => x.id === p.templateId);
+        return {
+          id: p.id,
+          name: p.name,
+          icon: t?.icon || 'book',
+          versions: p.versions?.length || 0,
+          isActive: p.id === dStore.activeProjectId,
+          sections: (t?.sections || []).map(s => ({
+            id: s.id,
+            name: s.name,
+            wc: ((p.sections || {})[s.id] || '').trim().split(/\s+/).filter(Boolean).length,
+            onClick: () => {
+              if (p.id !== dStore.activeProjectId) {
+                // Open this project first; section scroll happens after a tick.
+                const next = { ...dStore, activeProjectId: p.id };
+                localStorage.setItem('canvas-deliverables-v2', JSON.stringify(next));
+                window.dispatchEvent(new Event('storage'));
+              }
+              setTimeout(() => flashScrollTo(`#notion-section-${s.id}`), 80);
+            },
+          })),
+          onOpen: () => {
+            const next = { ...dStore, activeProjectId: p.id };
+            localStorage.setItem('canvas-deliverables-v2', JSON.stringify(next));
+            window.dispatchEvent(new Event('storage'));
+          },
+        };
+      });
+    } catch { return []; }
+    // re-derive when view or layout changes (layout proxy for "user did something")
+  }, [view, layout, widgetStates]); // eslint-disable-line react-hooks/exhaustive-deps
 
-      <ConfirmDialog
-        isOpen={showClearConfirm}
-        title="Clear canvas?"
-        message="This will permanently delete all insights on your canvas. This action can't be undone."
-        confirmLabel={isClearing ? 'Clearing…' : 'Clear canvas'}
-        cancelLabel="Cancel"
-        tone="danger"
-        onConfirm={handleClearCanvas}
-        onCancel={() => setShowClearConfirm(false)}
+  return (
+    <div className="canvas-page-with-sidebar" data-canvas-theme={theme}>
+      <Sidebar
+        user={user}
+        authToken={authToken}
+        onSignOut={onSignOut}
+        onSidebarToggle={setIsSidebarCollapsed}
+        isMobileOpen={isMobileMenuOpen}
+        onMobileToggle={setIsMobileMenuOpen}
+        onNavigateToCanvas={() => {}}
+        onSelectSession={(id) => onNavigateToChat && onNavigateToChat(id)}
+        onNewChat={() => onNavigateToChat && onNavigateToChat()}
+        pageContext="canvas"
+        canvasSubview={view}
+        widgetGroups={widgetGroups}
+        deliverableProjects={deliverableProjects}
+        insightSections={insightSections}
       />
+      <div className={`canvas-main-area ${isSidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
+        <div className="canvas-app-shell">
+          <AppHeader
+            currentPage={`canvas-${view}`}
+            onNavigateToHome={onNavigateToHome}
+            onNavigateToChat={onNavigateToChat}
+            onNavigateToCanvas={(v) => setView(v || 'workspace')}
+            onMobileMenu={() => setIsMobileMenuOpen(true)}
+          >
+            <button className="icon-btn" onClick={() => setTourForceShow(n => n + 1)} title="Show tour">
+              <HelpCircle size={18}/>
+            </button>
+            <button className="icon-btn" onClick={openGlobalSearch} title={`Search canvas content (${MOD}+/)`}>
+              <Icon name="search" size={16}/>
+            </button>
+            <button className="icon-btn" onClick={openCommandPalette} title={`Commands (${MOD}+K)`}>
+              <Icon name="zap" size={16}/>
+            </button>
+          </AppHeader>
+          <div className="canvas-content">
+            {view === 'insights' && <InsightsView widgetStates={widgetStates} setWidgetStates={setWidgetStates} onNavigateToChat={onNavigateToChat}/>}
+            {view === 'workspace' && <WorkspaceView openModal={openModal} layout={layout} setLayout={setLayout} widgetStates={widgetStates} setWidgetStates={setWidgetStates}/>}
+            {view === 'deliverables' && <DeliverablesView allStates={widgetStates}/>}
+          </div>
+        </div>
+      </div>
+      <ModalRouter modal={modal} onClose={closeModal}/>
+      <ToastStack/>
+      <CanvasWelcomeTour key={tourForceShow} forceShow={tourForceShow > 0}/>
+      <ShortcutHint/>
     </div>
   );
 };
 
-export default CanvasPage;
+// Subtle floating hint bar showing the most-used keyboard shortcuts.
+// Auto-hides on small screens and after the first 12s, until the user hovers.
+function ShortcutHint() {
+  const [visible, setVisible] = useState(true);
+  useEffect(() => {
+    const t = setTimeout(() => setVisible(false), 12000);
+    return () => clearTimeout(t);
+  }, []);
+  return (
+    <div
+      className={`canvas-shortcut-hint ${visible ? 'visible' : ''}`}
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+    >
+      <span><kbd>{MOD}</kbd><kbd>K</kbd> commands</span>
+      <span><kbd>{MOD}</kbd><kbd>/</kbd> search</span>
+      <span><kbd>?</kbd> help</span>
+    </div>
+  );
+}
+
+export default CanvasPage;

phd-advisor-frontend/src/pages/ChatPage.js

@@ -1,28 +1,31 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
-
-import { Home, MessageCircle, Reply, X, Sparkles, Users, Settings2, FileText, Menu, HelpCircle } from 'lucide-react';
-
+import { MessageCircle, Reply, X, Sparkles, Users, Settings2, FileText, HelpCircle } from 'lucide-react';
 import EnhancedChatInput from '../components/EnhancedChatInput';
 import MessageBubble from '../components/MessageBubble';
 import ThinkingIndicator from '../components/ThinkingIndicator';
 import SuggestionsPanel from '../components/SuggestionsPanel';
-import ThemeToggle from '../components/ThemeToggle';
-import ProviderDropdown from '../components/ProviderDropdown';
+import AppHeader from '../components/AppHeader';
+import AdvisorStatusDropdown from '../components/AdvisorStatusDropdown';
 import ExportButton from '../components/ExportButton';
 import Sidebar from '../components/Sidebar';
 import { useAppConfig } from '../contexts/AppConfigContext';
 import { useTheme } from '../contexts/ThemeContext';
 import '../styles/ChatPage.css';
 import '../styles/EnhancedChatInput.css';
-import AdvisorStatusDropdown from '../components/AdvisorStatusDropdown';
 import AdvisorCarousel from '../components/AdvisorCarousel';
-import OnboardingTour from '../components/OnboardingTour';
+import OnboardingChat from '../components/OnboardingChat';
+import ProfileWalkthrough from '../components/ProfileWalkthrough';
+import ClearDataModal from '../components/ClearDataModal';
+import AccountModal from '../components/AccountModal';
 
-const ChatPage = ({ user, authToken, onNavigateToHome, onNavigateToCanvas, onSignOut, onUserUpdate }) => {
+const ACTIVE_ADVISORS_STORAGE_KEY = 'cybersecurityActiveAdvisorIds';
+
+const ChatPage = ({ user, authToken, onNavigateToHome, onNavigateToCanvas, onSignOut }) => {
   const { config, advisors, getAdvisorColors } = useAppConfig();
   const [messages, setMessages] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [thinkingAdvisors, setThinkingAdvisors] = useState([]);
+  const [activeAdvisorIds, setActiveAdvisorIds] = useState([]);
   const [collectedInfo, setCollectedInfo] = useState({});
   const [replyingTo, setReplyingTo] = useState(null);
   const [currentProvider, setCurrentProvider] = useState('gemini');
@@ -38,7 +41,97 @@ const ChatPage = ({ user, authToken, onNavigateToHome, onNavigateToCanvas, onSig
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [sidebarRefreshTrigger, setSidebarRefreshTrigger] = useState(0);
 
-  
+  const [userAvatarId, setUserAvatarId] = useState(
+    () => localStorage.getItem('userAvatarId') || (user?.avatarId ?? null)
+  );
+  const avatarOptions = config?.app?.user_avatars || [];
+
+  const handleAvatarChange = async (id) => {
+    setUserAvatarId(id);
+    localStorage.setItem('userAvatarId', id);
+    try {
+      await fetch(`${process.env.REACT_APP_API_URL}/auth/me`, {
+        method: 'PATCH',
+        headers: { Authorization: `Bearer ${authToken}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify({ avatarId: id }),
+      });
+    } catch (e) {
+      console.error('Failed to save avatar:', e);
+    }
+  };
+
+  const [showOnboarding, setShowOnboarding] = useState(false);
+  const [showProfileForm, setShowProfileForm] = useState(false);
+  const [showClearData, setShowClearData] = useState(false);
+  const [showAccount, setShowAccount] = useState(false);
+  const [userProfile, setUserProfile] = useState(null);
+
+  const loadProfile = async () => {
+    try {
+      const resp = await fetch(`${process.env.REACT_APP_API_URL}/api/users/me/profile`, {
+        headers: { Authorization: `Bearer ${authToken}` },
+      });
+      if (resp.ok) setUserProfile(await resp.json());
+    } catch (e) {
+      /* ignore */
+    }
+  };
+
+  useEffect(() => {
+    if (authToken) loadProfile();
+  }, [authToken]);
+
+  useEffect(() => {
+    const allIds = Object.keys(advisors || {});
+    if (allIds.length === 0) return;
+
+    setActiveAdvisorIds((prev) => {
+      let next = prev.filter((id) => allIds.includes(id));
+      if (next.length === 0) {
+        try {
+          const stored = JSON.parse(localStorage.getItem(ACTIVE_ADVISORS_STORAGE_KEY) || 'null');
+          if (Array.isArray(stored)) {
+            const valid = stored.filter((id) => allIds.includes(id));
+            if (valid.length > 0) next = valid;
+          }
+        } catch {
+          /* ignore */
+        }
+      }
+      if (next.length === 0) next = [...allIds];
+      if (
+        prev.length === next.length &&
+        prev.every((id, index) => id === next[index])
+      ) {
+        return prev;
+      }
+      return next;
+    });
+  }, [advisors]);
+
+  const persistActiveAdvisorIds = (ids) => {
+    localStorage.setItem(ACTIVE_ADVISORS_STORAGE_KEY, JSON.stringify(ids));
+  };
+
+  const handleSetActiveAdvisors = (ids) => {
+    setActiveAdvisorIds(ids);
+    persistActiveAdvisorIds(ids);
+  };
+
+  const handleToggleAdvisor = (id) => {
+    setActiveAdvisorIds((prev) => {
+      const set = new Set(prev);
+      if (set.has(id)) {
+        if (set.size <= 1) return prev;
+        set.delete(id);
+      } else {
+        set.add(id);
+      }
+      const next = Array.from(set);
+      persistActiveAdvisorIds(next);
+      return next;
+    });
+  };
 
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -215,19 +308,20 @@ const loadChatSession = async (sessionId) => {
   }
 };
 
-// Save a message to the current session
-const saveMessageToSession = async (message) => {
-  if (!currentSessionId || !authToken) return;
+// Save a message to the current session (optional sessionId when state is not updated yet)
+const saveMessageToSession = async (message, sessionIdOverride) => {
+  const sid = sessionIdOverride || currentSessionId;
+  if (!sid || !authToken) return;
 
   try {
-    await fetch(`${process.env.REACT_APP_API_URL}/api/chat-sessions/${currentSessionId}/messages`, {
+    await fetch(`${process.env.REACT_APP_API_URL}/api/chat-sessions/${sid}/messages`, {
       method: 'POST',
       headers: {
         'Authorization': `Bearer ${authToken}`,
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({
-        session_id: currentSessionId,
+        session_id: sid,
         message: {
           ...message,
           timestamp: message.timestamp.toISOString()
@@ -395,6 +489,10 @@ const handleNewChat = async (sessionId = null) => {
       }
     }
 
+    saveMessageToSession(userMessage, sessionId).catch(err =>
+      console.error('Failed to persist user message:', err)
+    );
+
     // Update session title if this is the first message and title is generic
     if (messages.length === 0 && currentSessionTitle.includes('Chat ')) {
       const newTitle = inputMessage.length > 30 
@@ -405,6 +503,14 @@ const handleNewChat = async (sessionId = null) => {
 
     // Set loading state
     setIsLoading(true);
+    const advisorsForRequest = activeAdvisorIds.length > 0
+      ? activeAdvisorIds
+      : Object.keys(advisors || {});
+    // Start with just the orchestrator's thinking bubble. The backend will
+    // emit a `progress { phase: 'selected', selected_advisors: [...] }` event
+    // naming the 3 advisors it picked, and that handler will add their
+    // ThinkingIndicators. This prevents the brief flash of thinking indicators
+    // for every advisor in the active pool before ranking has run.
     setThinkingAdvisors(['system']);
 
     try {
@@ -417,7 +523,8 @@ const handleNewChat = async (sessionId = null) => {
         body: JSON.stringify({
           user_input: inputMessage,
           response_length: 'medium',
-          chat_session_id: currentSessionId // Include current session ID
+          chat_session_id: sessionId,
+          active_advisors: advisorsForRequest,
         }),
       });
 
@@ -457,7 +564,7 @@ const handleNewChat = async (sessionId = null) => {
               };
               setMessages(prev => [...prev, msg]);
               setThinkingAdvisors(prev => prev.filter(a => a !== d.persona_id));
-              await saveMessageToSession(msg);
+              await saveMessageToSession(msg, sessionId);
               break;
             }
             case 'clarification':
@@ -470,6 +577,15 @@ const handleNewChat = async (sessionId = null) => {
               }]);
               break;
             case 'progress':
+              if (d.phase === 'selected' && Array.isArray(d.selected_advisors)) {
+                setThinkingAdvisors(prev => {
+                  const next = new Set(prev);
+                  next.add('system');
+                  d.selected_advisors.forEach(id => next.add(id));
+                  return Array.from(next);
+                });
+                break;
+              }
               if (d.phase === 'complete') {
                 break;
               }
@@ -753,94 +869,60 @@ const handleNewChat = async (sessionId = null) => {
   const chatPlaceholder = config?.chat_page?.placeholder || "Ask your advisors anything...";
 
   return (
-    <OnboardingTour>
     <div className="chat-page-with-sidebar">
       {/* Sidebar Component */}
-      <Sidebar
+      <Sidebar 
         user={user}
         currentSessionId={currentSessionId}
         onSelectSession={handleSelectSession}
         onNewChat={handleNewChat}
         onCurrentSessionDeleted={handleCurrentSessionDeleted}
         onSignOut={onSignOut}
-        onUserUpdate={onUserUpdate}
         authToken={authToken}
         onSidebarToggle={handleSidebarToggle}
         isMobileOpen={isMobileMenuOpen}
         onMobileToggle={setIsMobileMenuOpen}
         onNavigateToCanvas={onNavigateToCanvas}
         refreshTrigger={sidebarRefreshTrigger}
+        userAvatarId={userAvatarId}
+        onAvatarChange={handleAvatarChange}
+        onOpenProfile={() => setShowProfileForm(true)}
+        onOpenAccount={() => setShowAccount(true)}
+        onOpenClearData={() => setShowClearData(true)}
       />
       
       <div className={`main-chat-area ${isSidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
         <div className="modern-chat-page">
-          {/* Floating Header */}
-          <div className="floating-header">
-            <div className="header-left">
-              <button 
-                className="mobile-menu-button"
-                onClick={handleMobileMenuToggle}
-              >
-                <Menu size={20} />
-              </button>
-              <button onClick={onNavigateToHome} className="modern-home-btn">
-                <Home size={20} />
-              </button>
-              <div className="header-brand">
-                <div className="brand-icon">
-                  <Users size={24} />
-                </div>
-                <div className="brand-text">
-                  <h1>{config?.app?.title || 'Advisory'}</h1>
-                  <p>{config?.app?.subtitle || 'AI-Powered Guidance'}</p>
-                </div>
-              </div>
-            </div>
-            
-            <div className="header-right">
-              <AdvisorStatusDropdown 
-                advisors={advisors}
-                thinkingAdvisors={thinkingAdvisors}
-                getAdvisorColors={getAdvisorColors}
-                isDark={isDark}
-              />
-              
-              <div className="header-controls">
-                {/* Add session title display */}
-                {currentSessionTitle && (
-                  <div className="session-title-display">
-                    <span>{currentSessionTitle}</span>
-                  </div>
-                )}
-                
-                {/* Export Button */}
-                <ExportButton
-                  hasMessages={hasConversationMessages}
-                  currentSessionId={currentSessionId}
-                  authToken={authToken}
-                />
-
-                {/* Provider Dropdown */}
-                <ProviderDropdown
-                  currentProvider={currentProvider}
-                  onProviderChange={handleProviderSwitch}
-                  isLoading={isProviderSwitching}
-                />
-
-                {/* Theme Toggle */}
-                <ThemeToggle />
-
-                {/* Help / User Guide */}
-                <button
-                  className="header-help-btn"
-                  onClick={() => window.dispatchEvent(new CustomEvent('open-user-guide'))}
-                  title="Open user guide"
-                >
-                  <HelpCircle />
-                </button>
-              </div>
-            </div>
-          </div>
+          <AppHeader
+            currentPage="chat"
+            onNavigateToHome={onNavigateToHome}
+            onNavigateToChat={() => {}}
+            onNavigateToCanvas={onNavigateToCanvas}
+            onMobileMenu={handleMobileMenuToggle}
+          >
+            <AdvisorStatusDropdown
+              advisors={advisors}
+              activeAdvisorIds={activeAdvisorIds}
+              onToggleAdvisor={handleToggleAdvisor}
+              onSetActiveAdvisors={handleSetActiveAdvisors}
+              thinkingAdvisors={thinkingAdvisors}
+              getAdvisorColors={getAdvisorColors}
+              isDark={isDark}
+            />
+            <ExportButton
+              hasMessages={hasConversationMessages}
+              currentSessionId={currentSessionId}
+              authToken={authToken}
+            />
+            {/* User guide button (from main) — slotted into AppHeader's children */}
+            <button
+              className="icon-btn header-help-btn"
+              onClick={() => window.dispatchEvent(new CustomEvent('open-user-guide'))}
+              title="Open user guide"
+            >
+              <HelpCircle size={18} />
+            </button>
+          </AppHeader>
 
           {/* Main Content */}
           <div className="chat-content">
@@ -1000,7 +1082,6 @@ const handleNewChat = async (sessionId = null) => {
         </div>
       </div>
     </div>
-    </OnboardingTour>
   );
 };
 

phd-advisor-frontend/src/pages/HomePage.js

@@ -1,34 +1,21 @@
 import React from 'react';
 import { MessageCircle, ArrowRight } from 'lucide-react';
 import AdvisorCard from '../components/AdvisorCard';
-import ThemeToggle from '../components/ThemeToggle';
+import AppHeader from '../components/AppHeader';
 import CopyrightNotice from '../components/CopyrightNotice';
 import { useAppConfig } from '../contexts/AppConfigContext';
 
-const HomePage = ({ onNavigateToChat, isAuthenticated }) => {
+const HomePage = ({ onNavigateToChat, isAuthenticated, onNavigateToHome, onNavigateToCanvas }) => {
   const { config, advisors, resolveIcon } = useAppConfig();
 
-  const UsersIcon = resolveIcon('Users');
-
   return (
     <div className="homepage">
-      {/* Header */}
-      <header className="header">
-        <div className="header-content">
-          <div className="header-left">
-            <div className="logo-container">
-              <UsersIcon className="logo-icon" />
-            </div>
-            <div>
-              <h1 className="logo-title">{config.app.title}</h1>
-              <p className="logo-subtitle">{config.app.subtitle}</p>
-            </div>
-          </div>
-          <div className="header-right">
-            <ThemeToggle />
-          </div>
-        </div>
-      </header>
+      <AppHeader
+        currentPage="home"
+        onNavigateToHome={onNavigateToHome}
+        onNavigateToChat={onNavigateToChat}
+        onNavigateToCanvas={onNavigateToCanvas}
+      />
 
       {/* Hero Section */}
       <main className="main">

phd-advisor-frontend/src/styles/ChatPage.css

@@ -18,23 +18,18 @@
   position: sticky;
   top: 0;
   z-index: 100;
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--header-bg);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  border-bottom: 1px solid var(--border-primary);
+  border-bottom: 1px solid var(--header-border);
   padding: 12px 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--header-shadow);
   flex-shrink: 0;
 }
 
-[data-theme="dark"] .floating-header {
-  background: rgba(31, 41, 55, 0.95);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-}
-
 .header-left {
   display: flex;
   align-items: center;
@@ -79,19 +74,25 @@
   color: white;
 }
 
+.brand-text {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
 .brand-text h1 {
   font-size: 20px;
   font-weight: 700;
   color: var(--text-primary);
   margin: 0;
-  line-height: 1;
+  line-height: 1.2;
 }
 
 .brand-text p {
   font-size: 13px;
   color: var(--text-secondary);
   margin: 0;
-  line-height: 1;
+  line-height: 1.35;
 }
 
 .header-right {
@@ -678,34 +679,6 @@
   margin-left: 70px; /* Width of sidebar when collapsed */
 }
 
-/* Session title display in header */
-.session-title-display {
-  display: flex;
-  align-items: center;
-  padding: 6px 12px;
-  background: var(--bg-secondary, #f3f4f6);
-  border-radius: 6px;
-  margin-right: 8px;
-}
-
-.dark .session-title-display {
-  background: var(--bg-secondary-dark, #374151);
-}
-
-.session-title-display span {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-primary, #111827);
-  max-width: 150px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.dark .session-title-display span {
-  color: var(--text-primary-dark, #f9fafb);
-}
-
 /* Optional header sign out button */
 .header-signout-btn {
   display: flex;

phd-advisor-frontend/src/styles/Sidebar.css

@@ -272,21 +272,13 @@
   background: #7f1d1d;
 }
 
-/* New Chat Row (button + clear-all icon) */
-.new-chat-row {
-  display: flex;
-  align-items: stretch;
-  gap: 8px;
-  width: 100%;
-}
-
 /* New Chat Button */
 .new-chat-button {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  flex: 1;
+  width: 100%;
   padding: 12px 16px;
   background: var(--primary-color, #3b82f6);
   color: white;
@@ -297,47 +289,6 @@
   transition: all 0.2s ease;
 }
 
-/* Clear All Chats Button — matches .new-chat-icon-btn dimensions */
-.clear-all-chats-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  flex-shrink: 0;
-  padding: 0;
-  background: transparent;
-  color: #ef4444;
-  border: 1px solid rgba(239, 68, 68, 0.35);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
-}
-
-.clear-all-chats-btn:hover:not(:disabled) {
-  background: #ef4444;
-  color: #ffffff;
-  border-color: #ef4444;
-  transform: translateY(-1px);
-}
-
-.clear-all-chats-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-  transform: none;
-}
-
-[data-theme="dark"] .clear-all-chats-btn {
-  color: #f87171;
-  border-color: rgba(248, 113, 113, 0.4);
-}
-
-[data-theme="dark"] .clear-all-chats-btn:hover:not(:disabled) {
-  background: #ef4444;
-  color: #ffffff;
-  border-color: #ef4444;
-}
-
 .new-chat-button:hover {
   background: var(--primary-color-hover, #2563eb);
   transform: translateY(-1px);
@@ -902,24 +853,4 @@
   .mobile-sidebar-overlay.visible {
     display: block;
   }
-}
-
-.sidebar-version {
-  padding: 8px 16px;
-  border-top: 1px solid var(--border-light, #e5e7eb);
-  font-size: 11px;
-  color: var(--text-secondary, #6b7280);
-  text-align: center;
-  user-select: none;
-  flex-shrink: 0;
-}
-
-.sidebar.collapsed .sidebar-version {
-  padding: 8px 4px;
-  font-size: 10px;
-}
-
-.dark .sidebar-version {
-  border-top-color: var(--border-dark, #374151);
-  color: var(--text-secondary-dark, #9ca3af);
 }

phd-advisor-frontend/src/styles/components.css

@@ -42,6 +42,11 @@
   --input-border: #D1D5DB;
   --input-focus: #6366F1;
   --input-focus-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+
+  /* App header (floating bar) */
+  --header-bg: #EBF5FF;
+  --header-border: rgba(59, 130, 246, 0.2);
+  --header-shadow: 0 4px 20px rgba(37, 99, 235, 0.1);
 }
 
 :root[data-theme="dark"] {
@@ -87,6 +92,11 @@
   --input-border: #4B5563;
   --input-focus: #818CF8;
   --input-focus-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
+
+  /* App header (floating bar) */
+  --header-bg: rgba(23, 37, 64, 0.97);
+  --header-border: rgba(96, 165, 250, 0.18);
+  --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
 }
 
 /* Theme Toggle Button */
@@ -527,13 +537,15 @@
 .advisor-message-header {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   margin-bottom: 8px;
 }
 
 .advisor-message-name {
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.6;
+  margin: 0;
 }
 
 .reply-badge {
@@ -550,9 +562,44 @@
 }
 
 .advisor-message-text {
+  font-size: 1rem;
   line-height: 1.6;
 }
 
+/* Advisor icon in message header: circular badge, theme-aware fill */
+.advisor-message-avatar-ring {
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+}
+
+[data-theme="dark"] .advisor-message-avatar-ring {
+  background: #1e293b;
+  border-color: rgba(248, 250, 252, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+}
+
+.advisor-message-avatar-ring img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.advisor-message-avatar-icon {
+  flex-shrink: 0;
+}
+
+.advisor-message-avatar-initial {
+  font-weight: 700;
+  line-height: 1;
+}
+
 .advisor-message-text > div:last-child p:last-child {
   margin-bottom: 0; /* Remove bottom margin from last paragraph */
 }
@@ -765,8 +812,9 @@
 }
 
 .advisor-name {
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.6;
   margin: 0;
 }
 
@@ -1184,7 +1232,11 @@
   }
 
   .advisor-message-text {
-    font-size: 14px;
+    font-size: 1rem;
+  }
+
+  .advisor-message-name {
+    font-size: 1rem;
   }
 
   /* Basic ChatInput mobile styles */