From 64c2fa4cfb7b327d35f8ea63f39bc6287c4c6d98 Mon Sep 17 00:00:00 2001
From: Stuart Alexander <stu@theawesome.co.uk>
Date: Thu, 18 Dec 2025 14:04:34 +0000
Subject: [PATCH 01/17] Clarify project title as a fork of Chronicle

Updated project title to indicate it's a fork.
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 34027891..a93dcd55 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Chronicle
+# Chronicle (fork from https://github.com/chronicler-ai/chronicle)
 
 Self-hostable AI system that captures audio/video data from OMI devices and other sources to generate memories, action items, and contextual insights about your conversations and daily interactions.
 

From 66dc505129010ea23112f34cd51d3dec1a392c36 Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Thu, 18 Dec 2025 13:15:46 +0000
Subject: [PATCH 02/17] Fixed reading .env file and get keys from backend
 instead of seperate env.test

---
 tests/setup/test_env.py | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/tests/setup/test_env.py b/tests/setup/test_env.py
index 929e83e2..7e3ca983 100644
--- a/tests/setup/test_env.py
+++ b/tests/setup/test_env.py
@@ -1,25 +1,26 @@
 # Test Environment Configuration
 import os
 from pathlib import Path
+from dotenv import load_dotenv
 
 # Load .env file from backends/advanced directory if it exists
 # This allows tests to work when run from VSCode or command line
-def load_env_file():
-    """Load environment variables from .env file if it exists."""
-    # Look for .env in backends/advanced directory
-    env_file = Path(__file__).parent.parent.parent / "backends" / "advanced" / ".env"
-    if env_file.exists():
-        with open(env_file) as f:
-            for line in f:
-                line = line.strip()
-                if line and not line.startswith('#') and '=' in line:
-                    key, value = line.split('=', 1)
-                    # Only set if not already in environment (CI takes precedence)
-                    if key not in os.environ:
-                        os.environ[key] = value
+# def load_env_file():
+#     """Load environment variables from .env file if it exists."""
+#     # Look for .env in backends/advanced directory
+#     env_file = Path(__file__).parent.parent.parent / "backends" / "advanced" / ".env"
+#     if env_file.exists():
+#         with open(env_file) as f:
+#             for line in f:
+#                 line = line.strip()
+#                 if line and not line.startswith('#') and '=' in line:
+#                     key, value = line.split('=', 1)
+#                     # Only set if not already in environment (CI takes precedence)
+#                     if key not in os.environ:
+#                         os.environ[key] = value
 
 # Load .env file (CI environment variables take precedence)
-load_env_file()
+# load_env_file()
 
 # Load .env from backends/advanced directory to get COMPOSE_PROJECT_NAME
 backend_env_path = Path(__file__).resolve().parents[2] / "backends" / "advanced" / ".env"

From b0fb46cc04ef41235879b37c5390dbf28d347c06 Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Thu, 11 Dec 2025 21:23:19 +0000
Subject: [PATCH 03/17] created settings page

# Conflicts:
#	backends/advanced/webui/src/pages/Settings.tsx
#	backends/advanced/webui/src/services/api.ts
---
 .../src/advanced_omi_backend/app_factory.py   |  10 +
 .../routers/api_router.py                     |   2 +
 .../routers/modules/__init__.py               |   3 +
 .../routers/modules/settings_routes.py        | 418 ++++++++
 .../advanced_omi_backend/settings_manager.py  | 422 ++++++++
 .../advanced_omi_backend/settings_models.py   | 252 +++++
 .../advanced/webui/src/pages/Settings.tsx     | 952 ++++++++++++++++++
 backends/advanced/webui/src/services/api.ts   |  48 +
 8 files changed, 2107 insertions(+)
 create mode 100644 backends/advanced/src/advanced_omi_backend/routers/modules/settings_routes.py
 create mode 100644 backends/advanced/src/advanced_omi_backend/settings_manager.py
 create mode 100644 backends/advanced/src/advanced_omi_backend/settings_models.py
 create mode 100644 backends/advanced/webui/src/pages/Settings.tsx

diff --git a/backends/advanced/src/advanced_omi_backend/app_factory.py b/backends/advanced/src/advanced_omi_backend/app_factory.py
index 7ccda184..1eba0df6 100644
--- a/backends/advanced/src/advanced_omi_backend/app_factory.py
+++ b/backends/advanced/src/advanced_omi_backend/app_factory.py
@@ -66,6 +66,16 @@ async def lifespan(app: FastAPI):
         application_logger.error(f"Failed to initialize Beanie: {e}")
         raise
 
+    # Initialize settings manager
+    try:
+        from advanced_omi_backend.settings_manager import init_settings_manager
+        settings_mgr = init_settings_manager(config.db)
+        await settings_mgr.initialize()
+        application_logger.info("✅ Settings manager initialized and loaded from environment/database")
+    except Exception as e:
+        application_logger.error(f"Failed to initialize settings manager: {e}")
+        # Don't raise - use fallback to environment variables if settings manager fails
+
     # Create admin user if needed
     try:
         await create_admin_user_if_needed()
diff --git a/backends/advanced/src/advanced_omi_backend/routers/api_router.py b/backends/advanced/src/advanced_omi_backend/routers/api_router.py
index 528713c0..e6abfe48 100644
--- a/backends/advanced/src/advanced_omi_backend/routers/api_router.py
+++ b/backends/advanced/src/advanced_omi_backend/routers/api_router.py
@@ -16,6 +16,7 @@
     conversation_router,
     memory_router,
     queue_router,
+    settings_router,
     system_router,
     user_router,
 )
@@ -34,6 +35,7 @@
 router.include_router(client_router)
 router.include_router(conversation_router)
 router.include_router(memory_router)
+router.include_router(settings_router)
 router.include_router(system_router)
 router.include_router(queue_router)
 router.include_router(health_router)  # Also include under /api for frontend compatibility
diff --git a/backends/advanced/src/advanced_omi_backend/routers/modules/__init__.py b/backends/advanced/src/advanced_omi_backend/routers/modules/__init__.py
index a5669b06..2cda0884 100644
--- a/backends/advanced/src/advanced_omi_backend/routers/modules/__init__.py
+++ b/backends/advanced/src/advanced_omi_backend/routers/modules/__init__.py
@@ -12,6 +12,7 @@
 - audio_routes: Audio file uploads and processing
 - health_routes: Health check endpoints
 - websocket_routes: WebSocket connection handling
+- settings_routes: Application settings management
 """
 
 from .audio_routes import router as audio_router
@@ -21,6 +22,7 @@
 from .health_routes import router as health_router
 from .memory_routes import router as memory_router
 from .queue_routes import router as queue_router
+from .settings_routes import router as settings_router
 from .system_routes import router as system_router
 from .user_routes import router as user_router
 from .websocket_routes import router as websocket_router
@@ -33,6 +35,7 @@
    "health_router",
    "memory_router",
    "queue_router",
+   "settings_router",
    "system_router",
    "user_router",
    "websocket_router",
diff --git a/backends/advanced/src/advanced_omi_backend/routers/modules/settings_routes.py b/backends/advanced/src/advanced_omi_backend/routers/modules/settings_routes.py
new file mode 100644
index 00000000..c490230b
--- /dev/null
+++ b/backends/advanced/src/advanced_omi_backend/routers/modules/settings_routes.py
@@ -0,0 +1,418 @@
+"""
+Application settings management routes.
+
+Provides endpoints for reading and updating dynamic application settings.
+Settings changes take effect within the cache TTL (default: 5 seconds).
+"""
+
+import logging
+
+from fastapi import APIRouter, Depends, HTTPException
+
+from advanced_omi_backend.auth import current_active_user, current_superuser
+from advanced_omi_backend.settings_manager import get_settings_manager, SettingsManager
+from advanced_omi_backend.settings_models import (
+    AllSettings,
+    AudioProcessingSettings,
+    ConversationSettings,
+    DiarizationSettings,
+    LLMSettings,
+    MiscSettings,
+    NetworkSettings,
+    ProviderSettings,
+    SpeechDetectionSettings,
+)
+from advanced_omi_backend.users import User
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/settings", tags=["settings"])
+
+
+# All Settings (Combined)
+
+
+@router.get("", response_model=AllSettings)
+async def get_all_settings(
+    current_user: User = Depends(current_active_user),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Get all application settings.
+
+    Available to all authenticated users for read access.
+    """
+    return await settings_mgr.get_all_settings()
+
+
+@router.put("", response_model=AllSettings)
+async def update_all_settings(
+    settings: AllSettings,
+    current_user: User = Depends(current_superuser),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Update all application settings at once.
+
+    Admin only. Changes take effect within the cache TTL.
+    """
+    await settings_mgr.update_all_settings(settings, updated_by=str(current_user.id))
+    return await settings_mgr.get_all_settings()
+
+
+# Speech Detection Settings
+
+
+@router.get("/speech-detection", response_model=SpeechDetectionSettings)
+async def get_speech_detection_settings(
+    current_user: User = Depends(current_active_user),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """Get speech detection settings."""
+    return await settings_mgr.get_speech_detection()
+
+
+@router.put("/speech-detection", response_model=SpeechDetectionSettings)
+async def update_speech_detection_settings(
+    settings: SpeechDetectionSettings,
+    current_user: User = Depends(current_superuser),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Update speech detection settings. Admin only.
+
+    These settings control when audio sessions are converted to conversations.
+    """
+    await settings_mgr.update_speech_detection(settings, updated_by=str(current_user.id))
+    return await settings_mgr.get_speech_detection()
+
+
+# Conversation Settings
+
+
+@router.get("/conversation", response_model=ConversationSettings)
+async def get_conversation_settings(
+    current_user: User = Depends(current_active_user),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """Get conversation management settings."""
+    return await settings_mgr.get_conversation()
+
+
+@router.put("/conversation", response_model=ConversationSettings)
+async def update_conversation_settings(
+    settings: ConversationSettings,
+    current_user: User = Depends(current_superuser),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Update conversation management settings. Admin only.
+
+    Controls conversation timeouts, transcription buffering, and speaker enrollment.
+    """
+    await settings_mgr.update_conversation(settings, updated_by=str(current_user.id))
+    return await settings_mgr.get_conversation()
+
+
+# Audio Processing Settings
+
+
+@router.get("/audio-processing", response_model=AudioProcessingSettings)
+async def get_audio_processing_settings(
+    current_user: User = Depends(current_active_user),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """Get audio processing settings."""
+    return await settings_mgr.get_audio_processing()
+
+
+@router.put("/audio-processing", response_model=AudioProcessingSettings)
+async def update_audio_processing_settings(
+    settings: AudioProcessingSettings,
+    current_user: User = Depends(current_superuser),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Update audio processing settings. Admin only.
+
+    Controls audio cropping, silence removal, and segment duration.
+    """
+    await settings_mgr.update_audio_processing(settings, updated_by=str(current_user.id))
+    return await settings_mgr.get_audio_processing()
+
+
+# Diarization Settings
+
+
+@router.get("/diarization", response_model=DiarizationSettings)
+async def get_diarization_settings(
+    current_user: User = Depends(current_active_user),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """Get speaker diarization settings."""
+    return await settings_mgr.get_diarization()
+
+
+@router.put("/diarization", response_model=DiarizationSettings)
+async def update_diarization_settings(
+    settings: DiarizationSettings,
+    current_user: User = Depends(current_superuser),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Update speaker diarization settings. Admin only.
+
+    Controls how speakers are identified and segments are separated.
+    """
+    await settings_mgr.update_diarization(settings, updated_by=str(current_user.id))
+    return await settings_mgr.get_diarization()
+
+
+# LLM Settings
+
+
+@router.get("/llm", response_model=LLMSettings)
+async def get_llm_settings(
+    current_user: User = Depends(current_active_user),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """Get LLM provider and model settings."""
+    return await settings_mgr.get_llm()
+
+
+@router.put("/llm", response_model=LLMSettings)
+async def update_llm_settings(
+    settings: LLMSettings,
+    current_user: User = Depends(current_superuser),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Update LLM settings. Admin only.
+
+    Controls which LLM provider and models to use for processing and chat.
+    """
+    await settings_mgr.update_llm(settings, updated_by=str(current_user.id))
+    return await settings_mgr.get_llm()
+
+
+# Provider Settings
+
+
+@router.get("/providers", response_model=ProviderSettings)
+async def get_provider_settings(
+    current_user: User = Depends(current_active_user),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """Get service provider settings."""
+    return await settings_mgr.get_providers()
+
+
+@router.put("/providers", response_model=ProviderSettings)
+async def update_provider_settings(
+    settings: ProviderSettings,
+    current_user: User = Depends(current_superuser),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Update service provider settings. Admin only.
+
+    Controls which memory and transcription providers to use.
+    """
+    await settings_mgr.update_providers(settings, updated_by=str(current_user.id))
+    return await settings_mgr.get_providers()
+
+
+# Network Settings
+
+
+@router.get("/network", response_model=NetworkSettings)
+async def get_network_settings(
+    current_user: User = Depends(current_active_user),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """Get network and public access settings."""
+    return await settings_mgr.get_network()
+
+
+@router.put("/network", response_model=NetworkSettings)
+async def update_network_settings(
+    settings: NetworkSettings,
+    current_user: User = Depends(current_superuser),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Update network settings. Admin only.
+
+    Controls public endpoints, CORS, and network access configuration.
+    """
+    await settings_mgr.update_network(settings, updated_by=str(current_user.id))
+    return await settings_mgr.get_network()
+
+
+# Miscellaneous Settings
+
+
+@router.get("/misc", response_model=MiscSettings)
+async def get_misc_settings(
+    current_user: User = Depends(current_active_user),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """Get miscellaneous settings."""
+    return await settings_mgr.get_misc()
+
+
+@router.put("/misc", response_model=MiscSettings)
+async def update_misc_settings(
+    settings: MiscSettings,
+    current_user: User = Depends(current_superuser),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Update miscellaneous settings. Admin only.
+
+    Controls debug options and telemetry.
+    """
+    await settings_mgr.update_misc(settings, updated_by=str(current_user.id))
+    return await settings_mgr.get_misc()
+
+
+# Cache Management
+
+
+@router.post("/cache/invalidate")
+async def invalidate_settings_cache(
+    category: str = None,
+    current_user: User = Depends(current_superuser),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Invalidate settings cache. Admin only.
+
+    Forces settings to reload from database on next access.
+    If category is provided, only invalidates that category.
+    """
+    settings_mgr.invalidate_cache(category)
+    return {
+        "status": "success",
+        "message": f"Cache invalidated for {category if category else 'all settings'}",
+    }
+
+
+# Infrastructure Status
+
+
+@router.get("/infrastructure/status")
+async def get_infrastructure_status(
+    current_user: User = Depends(current_active_user),
+):
+    """
+    Get infrastructure service connection status.
+
+    Returns URLs and connection status for MongoDB, Redis, Qdrant, Neo4j.
+    """
+    import os
+    from advanced_omi_backend.app_config import get_app_config
+
+    config = get_app_config()
+
+    status = {
+        "mongodb": {
+            "url": config.mongodb_uri,
+            "database": config.mongodb_database,
+            "connected": False,
+        },
+        "redis": {
+            "url": config.redis_url,
+            "connected": False,
+        },
+        "qdrant": {
+            "url": f"http://{config.qdrant_base_url}:{config.qdrant_port}",
+            "connected": False,
+        },
+        "neo4j": {
+            "host": os.getenv("NEO4J_HOST", "neo4j-mem0"),
+            "user": os.getenv("NEO4J_USER", "neo4j"),
+            "connected": False,
+        },
+    }
+
+    # Check MongoDB
+    try:
+        await config.mongo_client.admin.command('ping')
+        status["mongodb"]["connected"] = True
+    except Exception as e:
+        logger.debug(f"MongoDB connection check failed: {e}")
+
+    # Check Redis
+    try:
+        from advanced_omi_backend.controllers.queue_controller import redis_conn
+        redis_conn.ping()
+        status["redis"]["connected"] = True
+    except Exception as e:
+        logger.debug(f"Redis connection check failed: {e}")
+
+    # Check Qdrant
+    try:
+        import httpx
+        async with httpx.AsyncClient() as client:
+            response = await client.get(f"{status['qdrant']['url']}/", timeout=2.0)
+            status["qdrant"]["connected"] = response.status_code == 200
+    except Exception as e:
+        logger.debug(f"Qdrant connection check failed: {e}")
+
+    # Neo4j check (optional service)
+    # We don't check Neo4j connection as it's optional and may not be configured
+
+    return status
+
+
+@router.get("/api-keys/status")
+async def get_api_keys_status(
+    current_user: User = Depends(current_superuser),
+):
+    """
+    Get API keys configuration status. Admin only.
+
+    Returns which API keys are configured (but not the actual keys).
+    """
+    import os
+
+    keys_status = {
+        "openai": {
+            "name": "OpenAI API Key",
+            "configured": bool(os.getenv("OPENAI_API_KEY")),
+            "env_var": "OPENAI_API_KEY",
+        },
+        "deepgram": {
+            "name": "Deepgram API Key",
+            "configured": bool(os.getenv("DEEPGRAM_API_KEY")),
+            "env_var": "DEEPGRAM_API_KEY",
+        },
+        "mistral": {
+            "name": "Mistral API Key",
+            "configured": bool(os.getenv("MISTRAL_API_KEY")),
+            "env_var": "MISTRAL_API_KEY",
+        },
+        "hf_token": {
+            "name": "HuggingFace Token",
+            "configured": bool(os.getenv("HF_TOKEN")),
+            "env_var": "HF_TOKEN",
+        },
+        "langfuse_public": {
+            "name": "Langfuse Public Key",
+            "configured": bool(os.getenv("LANGFUSE_PUBLIC_KEY")),
+            "env_var": "LANGFUSE_PUBLIC_KEY",
+        },
+        "langfuse_secret": {
+            "name": "Langfuse Secret Key",
+            "configured": bool(os.getenv("LANGFUSE_SECRET_KEY")),
+            "env_var": "LANGFUSE_SECRET_KEY",
+        },
+        "ngrok": {
+            "name": "Ngrok Auth Token",
+            "configured": bool(os.getenv("NGROK_AUTHTOKEN")),
+            "env_var": "NGROK_AUTHTOKEN",
+        },
+    }
+
+    return keys_status
diff --git a/backends/advanced/src/advanced_omi_backend/settings_manager.py b/backends/advanced/src/advanced_omi_backend/settings_manager.py
new file mode 100644
index 00000000..601ce0c3
--- /dev/null
+++ b/backends/advanced/src/advanced_omi_backend/settings_manager.py
@@ -0,0 +1,422 @@
+"""
+Dynamic settings manager with MongoDB storage and caching.
+
+Settings are loaded from environment variables on first initialization,
+then stored in MongoDB. Subsequent loads use MongoDB as the source of truth.
+Changes take effect within the cache TTL (default: 5 seconds).
+"""
+
+import logging
+import os
+import time
+from typing import Dict, Any, Optional, TypeVar, Type
+
+from motor.motor_asyncio import AsyncIOMotorDatabase
+
+from advanced_omi_backend.settings_models import (
+    AllSettings,
+    AudioProcessingSettings,
+    ConversationSettings,
+    DiarizationSettings,
+    LLMSettings,
+    MiscSettings,
+    NetworkSettings,
+    ProviderSettings,
+    SpeechDetectionSettings,
+    TranscriptionProvider,
+)
+
+logger = logging.getLogger(__name__)
+
+T = TypeVar('T')
+
+
+class SettingsManager:
+    """
+    Manages dynamic application settings with MongoDB storage and caching.
+
+    Settings are stored in the 'application_settings' collection with documents:
+    {
+        "_id": "speech_detection",  # Setting category
+        "values": {...},             # Pydantic model dict
+        "updated_at": datetime,
+        "updated_by": "user_id or 'system'"
+    }
+    """
+
+    def __init__(self, db: AsyncIOMotorDatabase, cache_ttl: int = 5):
+        """
+        Initialize settings manager.
+
+        Args:
+            db: MongoDB database instance
+            cache_ttl: Cache TTL in seconds (default: 5)
+        """
+        self.db = db
+        self.settings_col = db["application_settings"]
+        self.cache_ttl = cache_ttl
+
+        # Cache storage
+        self._cache: Dict[str, Any] = {}
+        self._cache_time: Dict[str, float] = {}
+
+        # Initialization flag
+        self._initialized = False
+
+    async def initialize(self):
+        """
+        Initialize settings from environment variables if not already in MongoDB.
+
+        This is called once on application startup to migrate existing env vars
+        to the database.
+        """
+        if self._initialized:
+            return
+
+        logger.info("Initializing settings manager...")
+
+        # Check if settings already exist in DB
+        count = await self.settings_col.count_documents({})
+
+        if count == 0:
+            # First time setup - load from env vars
+            logger.info("No settings found in database, initializing from environment variables")
+            await self._initialize_from_env()
+        else:
+            logger.info(f"Found {count} setting categories in database")
+
+        self._initialized = True
+
+    async def _initialize_from_env(self):
+        """Initialize all settings from environment variables."""
+
+        # Speech detection
+        speech_detection = SpeechDetectionSettings(
+            min_words=int(os.getenv("SPEECH_DETECTION_MIN_WORDS", "5")),
+            min_confidence=float(os.getenv("SPEECH_DETECTION_MIN_CONFIDENCE", "0.5")),
+            min_duration=float(os.getenv("SPEECH_DETECTION_MIN_DURATION", "10.0")),
+        )
+        await self._save_to_db("speech_detection", speech_detection.dict(), "system")
+
+        # Conversation settings
+        conversation = ConversationSettings(
+            transcription_buffer_seconds=float(os.getenv("TRANSCRIPTION_BUFFER_SECONDS", "120")),
+            speech_inactivity_threshold=float(os.getenv("SPEECH_INACTIVITY_THRESHOLD_SECONDS", "60")),
+            new_conversation_timeout_minutes=float(os.getenv("NEW_CONVERSATION_TIMEOUT_MINUTES", "1.5")),
+            record_only_enrolled_speakers=os.getenv("RECORD_ONLY_ENROLLED_SPEAKERS", "true").lower() == "true",
+        )
+        await self._save_to_db("conversation", conversation.dict(), "system")
+
+        # Audio processing
+        audio_processing = AudioProcessingSettings(
+            audio_cropping_enabled=os.getenv("AUDIO_CROPPING_ENABLED", "true").lower() == "true",
+            min_speech_segment_duration=float(os.getenv("MIN_SPEECH_SEGMENT_DURATION", "1.0")),
+            cropping_context_padding=float(os.getenv("CROPPING_CONTEXT_PADDING", "0.1")),
+        )
+        await self._save_to_db("audio_processing", audio_processing.dict(), "system")
+
+        # Diarization (load from existing config or defaults)
+        from advanced_omi_backend.config import _diarization_settings
+        if _diarization_settings:
+            diarization = DiarizationSettings(**_diarization_settings)
+        else:
+            diarization = DiarizationSettings()
+        await self._save_to_db("diarization", diarization.dict(), "system")
+
+        # LLM settings
+        llm = LLMSettings(
+            llm_provider=os.getenv("LLM_PROVIDER", "openai"),
+            openai_model=os.getenv("OPENAI_MODEL", "gpt-4o-mini"),
+            chat_llm_model=os.getenv("CHAT_LLM_MODEL"),
+            chat_temperature=float(os.getenv("CHAT_TEMPERATURE", "0.7")),
+            ollama_model=os.getenv("OLLAMA_MODEL", "llama3.1:latest"),
+            ollama_embedder_model=os.getenv("OLLAMA_EMBEDDER_MODEL", "nomic-embed-text:latest"),
+        )
+        await self._save_to_db("llm", llm.dict(), "system")
+
+        # Provider settings
+        transcription_provider = os.getenv("TRANSCRIPTION_PROVIDER", "auto")
+        # Map empty string to "auto"
+        if not transcription_provider:
+            transcription_provider = "auto"
+
+        providers = ProviderSettings(
+            memory_provider=os.getenv("MEMORY_PROVIDER", "chronicle"),
+            transcription_provider=transcription_provider,
+        )
+        await self._save_to_db("providers", providers.dict(), "system")
+
+        # Network settings
+        network = NetworkSettings(
+            host_ip=os.getenv("HOST_IP", "localhost"),
+            backend_public_port=int(os.getenv("BACKEND_PUBLIC_PORT", "8000")),
+            webui_port=int(os.getenv("WEBUI_PORT", "5173")),
+            cors_origins=os.getenv("CORS_ORIGINS", "http://localhost:5173,http://localhost:3000"),
+        )
+        await self._save_to_db("network", network.dict(), "system")
+
+        # Misc settings
+        misc = MiscSettings(
+            debug_dir=os.getenv("DEBUG_DIR", "./data/debug_dir"),
+            langfuse_enable_telemetry=os.getenv("LANGFUSE_ENABLE_TELEMETRY", "false").lower() == "true",
+        )
+        await self._save_to_db("misc", misc.dict(), "system")
+
+        logger.info("✅ Initialized all settings from environment variables")
+
+    async def _get_from_cache_or_db(
+        self,
+        key: str,
+        model_class: Type[T],
+    ) -> T:
+        """
+        Get settings from cache or database.
+
+        Args:
+            key: Settings category key
+            model_class: Pydantic model class
+
+        Returns:
+            Instance of model_class with current settings
+        """
+        # Check cache freshness
+        if key in self._cache:
+            age = time.time() - self._cache_time.get(key, 0)
+            if age < self.cache_ttl:
+                return self._cache[key]
+
+        # Load from DB
+        doc = await self.settings_col.find_one({"_id": key})
+
+        if doc and "values" in doc:
+            settings = model_class(**doc["values"])
+        else:
+            # Use defaults if not found
+            logger.warning(f"Settings '{key}' not found in database, using defaults")
+            settings = model_class()
+
+        # Update cache
+        self._cache[key] = settings
+        self._cache_time[key] = time.time()
+
+        return settings
+
+    async def _save_to_db(self, key: str, values: dict, updated_by: str = "user"):
+        """
+        Save settings to database.
+
+        Args:
+            key: Settings category key
+            values: Settings values as dict
+            updated_by: User ID or 'system'
+        """
+        from datetime import datetime
+
+        await self.settings_col.update_one(
+            {"_id": key},
+            {
+                "$set": {
+                    "values": values,
+                    "updated_at": datetime.utcnow(),
+                    "updated_by": updated_by,
+                }
+            },
+            upsert=True,
+        )
+
+    async def _update_settings(
+        self,
+        key: str,
+        settings: T,
+        updated_by: str = "user",
+    ):
+        """
+        Update settings in database and cache.
+
+        Args:
+            key: Settings category key
+            settings: Pydantic model instance
+            updated_by: User ID or 'system'
+        """
+        # Save to DB
+        await self._save_to_db(key, settings.dict(), updated_by)
+
+        # Update cache immediately
+        self._cache[key] = settings
+        self._cache_time[key] = time.time()
+
+        logger.info(f"Updated settings '{key}' (by: {updated_by})")
+
+    # Speech Detection Settings
+
+    async def get_speech_detection(self) -> SpeechDetectionSettings:
+        """Get speech detection settings."""
+        return await self._get_from_cache_or_db("speech_detection", SpeechDetectionSettings)
+
+    async def update_speech_detection(
+        self,
+        settings: SpeechDetectionSettings,
+        updated_by: str = "user",
+    ):
+        """Update speech detection settings."""
+        await self._update_settings("speech_detection", settings, updated_by)
+
+    # Conversation Settings
+
+    async def get_conversation(self) -> ConversationSettings:
+        """Get conversation management settings."""
+        return await self._get_from_cache_or_db("conversation", ConversationSettings)
+
+    async def update_conversation(
+        self,
+        settings: ConversationSettings,
+        updated_by: str = "user",
+    ):
+        """Update conversation management settings."""
+        await self._update_settings("conversation", settings, updated_by)
+
+    # Audio Processing Settings
+
+    async def get_audio_processing(self) -> AudioProcessingSettings:
+        """Get audio processing settings."""
+        return await self._get_from_cache_or_db("audio_processing", AudioProcessingSettings)
+
+    async def update_audio_processing(
+        self,
+        settings: AudioProcessingSettings,
+        updated_by: str = "user",
+    ):
+        """Update audio processing settings."""
+        await self._update_settings("audio_processing", settings, updated_by)
+
+    # Diarization Settings
+
+    async def get_diarization(self) -> DiarizationSettings:
+        """Get diarization settings."""
+        return await self._get_from_cache_or_db("diarization", DiarizationSettings)
+
+    async def update_diarization(
+        self,
+        settings: DiarizationSettings,
+        updated_by: str = "user",
+    ):
+        """Update diarization settings."""
+        await self._update_settings("diarization", settings, updated_by)
+
+    # LLM Settings
+
+    async def get_llm(self) -> LLMSettings:
+        """Get LLM settings."""
+        return await self._get_from_cache_or_db("llm", LLMSettings)
+
+    async def update_llm(
+        self,
+        settings: LLMSettings,
+        updated_by: str = "user",
+    ):
+        """Update LLM settings."""
+        await self._update_settings("llm", settings, updated_by)
+
+    # Provider Settings
+
+    async def get_providers(self) -> ProviderSettings:
+        """Get provider settings."""
+        return await self._get_from_cache_or_db("providers", ProviderSettings)
+
+    async def update_providers(
+        self,
+        settings: ProviderSettings,
+        updated_by: str = "user",
+    ):
+        """Update provider settings."""
+        await self._update_settings("providers", settings, updated_by)
+
+    # Network Settings
+
+    async def get_network(self) -> NetworkSettings:
+        """Get network settings."""
+        return await self._get_from_cache_or_db("network", NetworkSettings)
+
+    async def update_network(
+        self,
+        settings: NetworkSettings,
+        updated_by: str = "user",
+    ):
+        """Update network settings."""
+        await self._update_settings("network", settings, updated_by)
+
+    # Misc Settings
+
+    async def get_misc(self) -> MiscSettings:
+        """Get miscellaneous settings."""
+        return await self._get_from_cache_or_db("misc", MiscSettings)
+
+    async def update_misc(
+        self,
+        settings: MiscSettings,
+        updated_by: str = "user",
+    ):
+        """Update miscellaneous settings."""
+        await self._update_settings("misc", settings, updated_by)
+
+    # Combined Settings
+
+    async def get_all_settings(self) -> AllSettings:
+        """Get all settings combined."""
+        return AllSettings(
+            speech_detection=await self.get_speech_detection(),
+            conversation=await self.get_conversation(),
+            audio_processing=await self.get_audio_processing(),
+            diarization=await self.get_diarization(),
+            llm=await self.get_llm(),
+            providers=await self.get_providers(),
+            network=await self.get_network(),
+            misc=await self.get_misc(),
+        )
+
+    async def update_all_settings(
+        self,
+        settings: AllSettings,
+        updated_by: str = "user",
+    ):
+        """Update all settings at once."""
+        await self.update_speech_detection(settings.speech_detection, updated_by)
+        await self.update_conversation(settings.conversation, updated_by)
+        await self.update_audio_processing(settings.audio_processing, updated_by)
+        await self.update_diarization(settings.diarization, updated_by)
+        await self.update_llm(settings.llm, updated_by)
+        await self.update_providers(settings.providers, updated_by)
+        await self.update_network(settings.network, updated_by)
+        await self.update_misc(settings.misc, updated_by)
+
+    def invalidate_cache(self, key: Optional[str] = None):
+        """
+        Force settings to reload from database on next access.
+
+        Args:
+            key: Specific settings category to invalidate, or None for all
+        """
+        if key:
+            self._cache_time[key] = 0
+            logger.info(f"Invalidated cache for '{key}'")
+        else:
+            self._cache_time.clear()
+            logger.info("Invalidated all settings cache")
+
+
+# Global settings manager instance (initialized in main.py)
+_settings_manager: Optional[SettingsManager] = None
+
+
+def init_settings_manager(db: AsyncIOMotorDatabase):
+    """Initialize the global settings manager."""
+    global _settings_manager
+    _settings_manager = SettingsManager(db)
+    return _settings_manager
+
+
+def get_settings_manager() -> SettingsManager:
+    """Get the global settings manager instance."""
+    if _settings_manager is None:
+        raise RuntimeError("Settings manager not initialized. Call init_settings_manager() first.")
+    return _settings_manager
diff --git a/backends/advanced/src/advanced_omi_backend/settings_models.py b/backends/advanced/src/advanced_omi_backend/settings_models.py
new file mode 100644
index 00000000..42da80f8
--- /dev/null
+++ b/backends/advanced/src/advanced_omi_backend/settings_models.py
@@ -0,0 +1,252 @@
+"""
+Pydantic models for dynamic application settings.
+
+These settings can be changed by users through the UI and take effect
+without requiring a server restart (within the cache TTL).
+"""
+
+from enum import Enum
+from typing import Optional
+
+from pydantic import BaseModel, Field, validator
+
+
+class LLMProvider(str, Enum):
+    """Supported LLM providers."""
+    OPENAI = "openai"
+    OLLAMA = "ollama"
+
+
+class MemoryProvider(str, Enum):
+    """Supported memory providers."""
+    CHRONICLE = "chronicle"
+    OPENMEMORY_MCP = "openmemory_mcp"
+    MYCELIA = "mycelia"
+
+
+class TranscriptionProvider(str, Enum):
+    """Supported transcription providers."""
+    DEEPGRAM = "deepgram"
+    MISTRAL = "mistral"
+    PARAKEET = "parakeet"
+    AUTO = "auto"
+
+
+class DiarizationSource(str, Enum):
+    """Supported diarization sources."""
+    PYANNOTE = "pyannote"
+    DEEPGRAM = "deepgram"
+
+
+class SpeechDetectionSettings(BaseModel):
+    """Speech detection settings for conversation creation."""
+
+    min_words: int = Field(
+        default=5,
+        ge=1,
+        le=100,
+        description="Minimum words required to create a conversation"
+    )
+    min_confidence: float = Field(
+        default=0.5,
+        ge=0.0,
+        le=1.0,
+        description="Minimum word confidence threshold (0.0-1.0)"
+    )
+    min_duration: float = Field(
+        default=10.0,
+        ge=0.0,
+        description="Minimum speech duration in seconds"
+    )
+
+
+class ConversationSettings(BaseModel):
+    """Conversation management settings."""
+
+    transcription_buffer_seconds: float = Field(
+        default=120.0,
+        ge=10.0,
+        le=600.0,
+        description="Trigger transcription every N seconds"
+    )
+    speech_inactivity_threshold: float = Field(
+        default=60.0,
+        ge=10.0,
+        le=600.0,
+        description="Close conversation after N seconds of no speech"
+    )
+    new_conversation_timeout_minutes: float = Field(
+        default=1.5,
+        ge=0.1,
+        le=60.0,
+        description="Timeout for creating new conversations (minutes)"
+    )
+    record_only_enrolled_speakers: bool = Field(
+        default=True,
+        description="Only create conversations when enrolled speakers are detected"
+    )
+
+
+class AudioProcessingSettings(BaseModel):
+    """Audio processing settings."""
+
+    audio_cropping_enabled: bool = Field(
+        default=True,
+        description="Enable automatic silence removal from audio"
+    )
+    min_speech_segment_duration: float = Field(
+        default=1.0,
+        ge=0.1,
+        le=10.0,
+        description="Minimum speech segment duration in seconds"
+    )
+    cropping_context_padding: float = Field(
+        default=0.1,
+        ge=0.0,
+        le=1.0,
+        description="Context padding around speech segments"
+    )
+
+
+class DiarizationSettings(BaseModel):
+    """Speaker diarization settings."""
+
+    diarization_source: DiarizationSource = Field(
+        default=DiarizationSource.PYANNOTE,
+        description="Diarization service to use"
+    )
+    similarity_threshold: float = Field(
+        default=0.15,
+        ge=0.0,
+        le=1.0,
+        description="Speaker similarity threshold"
+    )
+    min_duration: float = Field(
+        default=0.5,
+        ge=0.0,
+        description="Minimum segment duration"
+    )
+    collar: float = Field(
+        default=2.0,
+        ge=0.0,
+        description="Collar for segment merging (seconds)"
+    )
+    min_duration_off: float = Field(
+        default=1.5,
+        ge=0.0,
+        description="Minimum silence duration between segments"
+    )
+    min_speakers: int = Field(
+        default=2,
+        ge=1,
+        le=10,
+        description="Minimum number of speakers"
+    )
+    max_speakers: int = Field(
+        default=6,
+        ge=1,
+        le=20,
+        description="Maximum number of speakers"
+    )
+
+    @validator('max_speakers')
+    def validate_max_speakers(cls, v, values):
+        """Ensure max_speakers >= min_speakers."""
+        if 'min_speakers' in values and v < values['min_speakers']:
+            raise ValueError('max_speakers must be >= min_speakers')
+        return v
+
+
+class LLMSettings(BaseModel):
+    """LLM provider and model settings."""
+
+    llm_provider: LLMProvider = Field(
+        default=LLMProvider.OPENAI,
+        description="LLM provider to use"
+    )
+    openai_model: str = Field(
+        default="gpt-4o-mini",
+        description="OpenAI model for general tasks"
+    )
+    chat_llm_model: Optional[str] = Field(
+        default=None,
+        description="Model for chat (defaults to openai_model if not set)"
+    )
+    chat_temperature: float = Field(
+        default=0.7,
+        ge=0.0,
+        le=2.0,
+        description="Temperature for chat responses"
+    )
+    ollama_model: Optional[str] = Field(
+        default="llama3.1:latest",
+        description="Ollama model name"
+    )
+    ollama_embedder_model: Optional[str] = Field(
+        default="nomic-embed-text:latest",
+        description="Ollama embedder model name"
+    )
+
+
+class ProviderSettings(BaseModel):
+    """Service provider selection settings."""
+
+    memory_provider: MemoryProvider = Field(
+        default=MemoryProvider.CHRONICLE,
+        description="Memory provider to use"
+    )
+    transcription_provider: TranscriptionProvider = Field(
+        default=TranscriptionProvider.AUTO,
+        description="Transcription provider (auto-selects if 'auto')"
+    )
+
+
+class NetworkSettings(BaseModel):
+    """Network and public access settings."""
+
+    host_ip: str = Field(
+        default="localhost",
+        description="Public IP/hostname for browser access"
+    )
+    backend_public_port: int = Field(
+        default=8000,
+        ge=1,
+        le=65535,
+        description="Backend API public port"
+    )
+    webui_port: int = Field(
+        default=5173,
+        ge=1,
+        le=65535,
+        description="WebUI port"
+    )
+    cors_origins: str = Field(
+        default="http://localhost:5173,http://localhost:3000,http://127.0.0.1:5173,http://127.0.0.1:3000",
+        description="Comma-separated list of CORS origins"
+    )
+
+
+class MiscSettings(BaseModel):
+    """Miscellaneous settings."""
+
+    debug_dir: str = Field(
+        default="./data/debug_dir",
+        description="Directory for debug files"
+    )
+    langfuse_enable_telemetry: bool = Field(
+        default=False,
+        description="Enable Langfuse telemetry"
+    )
+
+
+class AllSettings(BaseModel):
+    """Combined model for all application settings."""
+
+    speech_detection: SpeechDetectionSettings = Field(default_factory=SpeechDetectionSettings)
+    conversation: ConversationSettings = Field(default_factory=ConversationSettings)
+    audio_processing: AudioProcessingSettings = Field(default_factory=AudioProcessingSettings)
+    diarization: DiarizationSettings = Field(default_factory=DiarizationSettings)
+    llm: LLMSettings = Field(default_factory=LLMSettings)
+    providers: ProviderSettings = Field(default_factory=ProviderSettings)
+    network: NetworkSettings = Field(default_factory=NetworkSettings)
+    misc: MiscSettings = Field(default_factory=MiscSettings)
diff --git a/backends/advanced/webui/src/pages/Settings.tsx b/backends/advanced/webui/src/pages/Settings.tsx
new file mode 100644
index 00000000..880f2b4f
--- /dev/null
+++ b/backends/advanced/webui/src/pages/Settings.tsx
@@ -0,0 +1,952 @@
+import { useState, useEffect } from 'react'
+import {
+  Settings as SettingsIcon,
+  Key,
+  Copy,
+  Trash2,
+  RefreshCw,
+  CheckCircle,
+  AlertCircle,
+  Save,
+  Server,
+  MessageSquare,
+  Mic,
+  Database,
+  Settings2,
+  Shield,
+} from 'lucide-react'
+import { useAuth } from '../contexts/AuthContext'
+import { settingsApi } from '../services/api'
+
+type Tab = 'core-infra' | 'api-keys' | 'mcp-key' | 'memory' | 'speech' | 'conversations' | 'other'
+
+interface Message {
+  type: 'success' | 'error'
+  text: string
+}
+
+export default function Settings() {
+  const { user } = useAuth()
+  const [activeTab, setActiveTab] = useState<Tab>('core-infra')
+
+  // MCP Key state
+  const [apiKey, setApiKey] = useState<string | null>(null)
+  const [apiKeyCreatedAt, setApiKeyCreatedAt] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  // Infrastructure status state
+  const [infraStatus, setInfraStatus] = useState<any>(null)
+  const [infraLoading, setInfraLoading] = useState(false)
+
+  // API Keys status state
+  const [apiKeysStatus, setApiKeysStatus] = useState<any>(null)
+  const [apiKeysLoading, setApiKeysLoading] = useState(false)
+
+  // Application settings state
+  const [appSettings, setAppSettings] = useState<any>(null)
+  const [appSettingsLoading, setAppSettingsLoading] = useState(false)
+
+  const [message, setMessage] = useState<Message | null>(null)
+
+  useEffect(() => {
+    loadApiKeyInfo()
+  }, [user])
+
+  useEffect(() => {
+    if (activeTab === 'core-infra' && !infraStatus) {
+      loadInfrastructureStatus()
+    } else if (activeTab === 'api-keys' && !apiKeysStatus) {
+      loadApiKeysStatus()
+    } else if (['memory', 'speech', 'conversations', 'other'].includes(activeTab) && !appSettings) {
+      loadApplicationSettings()
+    }
+  }, [activeTab])
+
+  const loadApiKeyInfo = () => {
+    if (user?.api_key) {
+      setApiKey(user.api_key)
+      setApiKeyCreatedAt(user.api_key_created_at || null)
+    }
+  }
+
+  const loadInfrastructureStatus = async () => {
+    try {
+      setInfraLoading(true)
+      const response = await settingsApi.getInfrastructureStatus()
+      setInfraStatus(response.data)
+    } catch (error: any) {
+      console.error('Failed to load infrastructure status:', error)
+      showMessage('error', 'Failed to load infrastructure status')
+    } finally {
+      setInfraLoading(false)
+    }
+  }
+
+  const loadApiKeysStatus = async () => {
+    try {
+      setApiKeysLoading(true)
+      const response = await settingsApi.getApiKeysStatus()
+      setApiKeysStatus(response.data)
+    } catch (error: any) {
+      console.error('Failed to load API keys status:', error)
+      showMessage('error', 'Failed to load API keys status')
+    } finally {
+      setApiKeysLoading(false)
+    }
+  }
+
+  const loadApplicationSettings = async () => {
+    try {
+      setAppSettingsLoading(true)
+      const response = await settingsApi.getAllSettings()
+      setAppSettings(response.data)
+    } catch (error: any) {
+      console.error('Failed to load application settings:', error)
+      showMessage('error', 'Failed to load application settings')
+    } finally {
+      setAppSettingsLoading(false)
+    }
+  }
+
+  const generateApiKey = async () => {
+    try {
+      setLoading(true)
+      setMessage(null)
+
+      const response = await settingsApi.generateApiKey()
+
+      setApiKey(response.data.api_key)
+      setApiKeyCreatedAt(response.data.created_at)
+      showMessage('success', 'MCP API key generated successfully!')
+    } catch (error: any) {
+      console.error('Failed to generate MCP API key:', error)
+      showMessage('error', error.response?.data?.detail || 'Failed to generate MCP API key')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const revokeApiKey = async () => {
+    if (
+      !confirm(
+        'Are you sure you want to revoke your MCP API key? This will break any existing MCP client integrations.'
+      )
+    ) {
+      return
+    }
+
+    try {
+      setLoading(true)
+      setMessage(null)
+
+      await settingsApi.revokeApiKey()
+
+      setApiKey(null)
+      setApiKeyCreatedAt(null)
+      showMessage('success', 'MCP API key revoked successfully')
+    } catch (error: any) {
+      console.error('Failed to revoke MCP API key:', error)
+      showMessage('error', error.response?.data?.detail || 'Failed to revoke MCP API key')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const copyToClipboard = async () => {
+    if (!apiKey) return
+
+    try {
+      await navigator.clipboard.writeText(apiKey)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (error) {
+      console.error('Failed to copy:', error)
+    }
+  }
+
+  const showMessage = (type: 'success' | 'error', text: string) => {
+    setMessage({ type, text })
+    setTimeout(() => setMessage(null), 3000)
+  }
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleString()
+  }
+
+  const updateCategorySettings = async (category: string, categorySettings: any) => {
+    try {
+      setAppSettingsLoading(true)
+      setMessage(null)
+
+      const updateMethods: Record<string, (settings: any) => Promise<any>> = {
+        speech_detection: settingsApi.updateSpeechDetection,
+        conversation: settingsApi.updateConversation,
+        audio_processing: settingsApi.updateAudioProcessing,
+        diarization: settingsApi.updateDiarization,
+        llm: settingsApi.updateLLM,
+        providers: settingsApi.updateProviders,
+        network: settingsApi.updateNetwork,
+        misc: settingsApi.updateMisc,
+      }
+
+      const updateMethod = updateMethods[category]
+      if (!updateMethod) {
+        throw new Error(`Unknown category: ${category}`)
+      }
+
+      await updateMethod(categorySettings)
+      await loadApplicationSettings()
+
+      showMessage('success', `Settings updated successfully!`)
+    } catch (error: any) {
+      console.error(`Failed to update ${category} settings:`, error)
+      showMessage(
+        'error',
+        error.response?.data?.detail || `Failed to update ${category} settings`
+      )
+    } finally {
+      setAppSettingsLoading(false)
+    }
+  }
+
+  const renderSettingsField = (
+    category: string,
+    key: string,
+    value: any,
+    label: string,
+    description?: string,
+    type: 'number' | 'boolean' | 'text' | 'select' = 'text',
+    options?: { value: string; label: string }[]
+  ) => {
+    const fieldId = `${category}_${key}`
+
+    const handleChange = (newValue: any) => {
+      setAppSettings((prev: any) => ({
+        ...prev,
+        [category]: {
+          ...prev[category],
+          [key]: newValue,
+        },
+      }))
+    }
+
+    if (type === 'boolean') {
+      return (
+        <div key={fieldId} className="flex items-start space-x-3 py-3">
+          <input
+            type="checkbox"
+            id={fieldId}
+            checked={value}
+            onChange={(e) => handleChange(e.target.checked)}
+            className="mt-1 h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+          />
+          <div className="flex-1">
+            <label
+              htmlFor={fieldId}
+              className="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer"
+            >
+              {label}
+            </label>
+            {description && (
+              <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{description}</p>
+            )}
+          </div>
+        </div>
+      )
+    }
+
+    if (type === 'select') {
+      return (
+        <div key={fieldId} className="py-3">
+          <label htmlFor={fieldId} className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            {label}
+          </label>
+          {description && <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">{description}</p>}
+          <select
+            id={fieldId}
+            value={value}
+            onChange={(e) => handleChange(e.target.value)}
+            className="block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+          >
+            {options?.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      )
+    }
+
+    return (
+      <div key={fieldId} className="py-3">
+        <label htmlFor={fieldId} className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          {label}
+        </label>
+        {description && <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">{description}</p>}
+        <input
+          type={type}
+          id={fieldId}
+          value={value}
+          onChange={(e) => handleChange(type === 'number' ? parseFloat(e.target.value) : e.target.value)}
+          step={type === 'number' ? 'any' : undefined}
+          className="block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+        />
+      </div>
+    )
+  }
+
+  const tabs = [
+    { id: 'core-infra' as Tab, label: 'Core Infra', icon: Server, adminOnly: false },
+    { id: 'api-keys' as Tab, label: 'API Keys', icon: Shield, adminOnly: true },
+    { id: 'mcp-key' as Tab, label: 'MCP Key', icon: Key, adminOnly: false },
+    { id: 'memory' as Tab, label: 'Memory', icon: Database, adminOnly: true },
+    { id: 'speech' as Tab, label: 'Speech', icon: Mic, adminOnly: true },
+    { id: 'conversations' as Tab, label: 'Conversations', icon: MessageSquare, adminOnly: true },
+    { id: 'other' as Tab, label: 'Other', icon: Settings2, adminOnly: true },
+  ]
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center space-x-2 mb-6">
+        <SettingsIcon className="h-6 w-6 text-blue-600" />
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Settings</h1>
+      </div>
+
+      {/* Message Display */}
+      {message && (
+        <div
+          className={`mb-6 p-4 rounded-lg border ${
+            message.type === 'success'
+              ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
+              : 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800'
+          }`}
+        >
+          <div className="flex items-center">
+            {message.type === 'success' ? (
+              <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-400 mr-2" />
+            ) : (
+              <AlertCircle className="h-5 w-5 text-red-600 dark:text-red-400 mr-2" />
+            )}
+            <p
+              className={`text-sm ${
+                message.type === 'success'
+                  ? 'text-green-700 dark:text-green-300'
+                  : 'text-red-700 dark:text-red-300'
+              }`}
+            >
+              {message.text}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Tabs */}
+      <div className="border-b border-gray-200 dark:border-gray-700 mb-6">
+        <nav className="-mb-px flex space-x-4 overflow-x-auto">
+          {tabs.map((tab) => {
+            // Hide admin-only tabs for non-admins
+            if (tab.adminOnly && !user?.is_superuser) return null
+
+            const Icon = tab.icon
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`flex items-center space-x-2 py-3 px-4 border-b-2 font-medium text-sm transition-colors whitespace-nowrap ${
+                  activeTab === tab.id
+                    ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
+                }`}
+              >
+                <Icon className="h-4 w-4" />
+                <span>{tab.label}</span>
+              </button>
+            )
+          })}
+        </nav>
+      </div>
+
+      {/* Tab Content */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
+        {/* Core Infrastructure */}
+        {activeTab === 'core-infra' && (
+          <div>
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                Core Infrastructure
+              </h2>
+              <button
+                onClick={loadInfrastructureStatus}
+                disabled={infraLoading}
+                className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+              >
+                <RefreshCw className={`h-4 w-4 ${infraLoading ? 'animate-spin' : ''}`} />
+              </button>
+            </div>
+
+            {infraLoading && !infraStatus ? (
+              <div className="text-center py-8">
+                <RefreshCw className="h-8 w-8 text-gray-400 animate-spin mx-auto mb-4" />
+                <p className="text-gray-500 dark:text-gray-400">Loading infrastructure status...</p>
+              </div>
+            ) : infraStatus ? (
+              <div className="space-y-4">
+                {Object.entries(infraStatus).map(([service, info]: [string, any]) => (
+                  <div
+                    key={service}
+                    className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600"
+                  >
+                    <div className="flex items-start justify-between mb-2">
+                      <h3 className="font-medium text-gray-900 dark:text-gray-100 capitalize">
+                        {service}
+                      </h3>
+                      <span
+                        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                          info.connected
+                            ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
+                            : 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400'
+                        }`}
+                      >
+                        {info.connected ? 'Connected' : 'Disconnected'}
+                      </span>
+                    </div>
+                    <div className="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+                      {info.url && (
+                        <p>
+                          <span className="font-medium">URL:</span>{' '}
+                          <code className="text-xs bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded">
+                            {info.url}
+                          </code>
+                        </p>
+                      )}
+                      {info.host && (
+                        <p>
+                          <span className="font-medium">Host:</span> {info.host}
+                        </p>
+                      )}
+                      {info.database && (
+                        <p>
+                          <span className="font-medium">Database:</span> {info.database}
+                        </p>
+                      )}
+                      {info.user && (
+                        <p>
+                          <span className="font-medium">User:</span> {info.user}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8">
+                <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
+                <p className="text-gray-500 dark:text-gray-400 mb-4">
+                  Failed to load infrastructure status
+                </p>
+                <button
+                  onClick={loadInfrastructureStatus}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  Retry
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* API Keys */}
+        {activeTab === 'api-keys' && (
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+              External Service API Keys
+            </h2>
+
+            <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
+              <p className="text-sm text-blue-800 dark:text-blue-300">
+                <strong>Note:</strong> API keys are configured via environment variables and require
+                a server restart to change. This page shows which keys are currently configured.
+              </p>
+            </div>
+
+            {apiKeysLoading ? (
+              <div className="text-center py-8">
+                <RefreshCw className="h-8 w-8 text-gray-400 animate-spin mx-auto mb-4" />
+                <p className="text-gray-500 dark:text-gray-400">Loading API keys status...</p>
+              </div>
+            ) : apiKeysStatus ? (
+              <div className="space-y-3">
+                {Object.entries(apiKeysStatus).map(([key, info]: [string, any]) => (
+                  <div
+                    key={key}
+                    className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600"
+                  >
+                    <div>
+                      <h3 className="font-medium text-gray-900 dark:text-gray-100">{info.name}</h3>
+                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                        <code className="bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded">
+                          {info.env_var}
+                        </code>
+                      </p>
+                    </div>
+                    <span
+                      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                        info.configured
+                          ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
+                          : 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400'
+                      }`}
+                    >
+                      {info.configured ? 'Configured' : 'Not Set'}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8">
+                <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
+                <p className="text-gray-500 dark:text-gray-400">Failed to load API keys status</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* MCP Key */}
+        {activeTab === 'mcp-key' && (
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+              MCP API Key
+            </h2>
+
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
+              Generate an API key for Model Context Protocol (MCP) clients like Claude Desktop,
+              Cursor, or Windsurf to access your conversations.
+            </p>
+
+            {apiKey ? (
+              <div className="space-y-4">
+                <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                      Current MCP API Key
+                    </span>
+                    {apiKeyCreatedAt && (
+                      <span className="text-xs text-gray-500 dark:text-gray-400">
+                        Created: {formatDate(apiKeyCreatedAt)}
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="flex items-center space-x-2">
+                    <code className="flex-1 px-3 py-2 bg-gray-100 dark:bg-gray-800 rounded font-mono text-sm text-gray-900 dark:text-gray-100 break-all">
+                      {apiKey}
+                    </code>
+                    <button
+                      onClick={copyToClipboard}
+                      className="p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
+                      title="Copy to clipboard"
+                    >
+                      {copied ? (
+                        <CheckCircle className="h-5 w-5 text-green-600" />
+                      ) : (
+                        <Copy className="h-5 w-5" />
+                      )}
+                    </button>
+                  </div>
+
+                  <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md">
+                    <p className="text-sm text-blue-800 dark:text-blue-300">
+                      <strong>MCP Server URL:</strong>{' '}
+                      <code className="bg-blue-100 dark:bg-blue-900 px-1 py-0.5 rounded">
+                        http://your-server:8000/mcp/conversations/sse
+                      </code>
+                      <br />
+                      <strong>Authorization:</strong> Bearer {apiKey}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex space-x-3">
+                  <button
+                    onClick={generateApiKey}
+                    disabled={loading}
+                    className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+                    <span>Regenerate Key</span>
+                  </button>
+
+                  <button
+                    onClick={revokeApiKey}
+                    disabled={loading}
+                    className="flex items-center space-x-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                    <span>Revoke Key</span>
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div className="text-center py-8">
+                <Key className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+                <p className="text-gray-500 dark:text-gray-400 mb-4">No MCP API key generated yet</p>
+                <button
+                  onClick={generateApiKey}
+                  disabled={loading}
+                  className="flex items-center space-x-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed mx-auto"
+                >
+                  <Key className="h-5 w-5" />
+                  <span>{loading ? 'Generating...' : 'Generate MCP API Key'}</span>
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Memory Settings */}
+        {activeTab === 'memory' && appSettings && (
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+              Memory Settings
+            </h2>
+
+            <div className="space-y-4">
+              {renderSettingsField(
+                'providers',
+                'memory_provider',
+                appSettings.providers.memory_provider,
+                'Memory Provider',
+                'Choose where memories are stored and processed',
+                'select',
+                [
+                  { value: 'chronicle', label: 'Chronicle (Default)' },
+                  { value: 'openmemory_mcp', label: 'OpenMemory MCP' },
+                  { value: 'mycelia', label: 'Mycelia' },
+                ]
+              )}
+            </div>
+
+            <div className="mt-6">
+              <button
+                onClick={() => updateCategorySettings('providers', appSettings.providers)}
+                disabled={appSettingsLoading}
+                className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+              >
+                <Save className="h-4 w-4" />
+                <span>Save Memory Settings</span>
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Speech Settings */}
+        {activeTab === 'speech' && appSettings && (
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+              Speech & Audio Settings
+            </h2>
+
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+                  Speech Detection
+                </h3>
+                <div className="space-y-2">
+                  {renderSettingsField(
+                    'speech_detection',
+                    'min_words',
+                    appSettings.speech_detection.min_words,
+                    'Minimum Words',
+                    'Minimum words required to create a conversation',
+                    'number'
+                  )}
+                  {renderSettingsField(
+                    'speech_detection',
+                    'min_confidence',
+                    appSettings.speech_detection.min_confidence,
+                    'Minimum Confidence',
+                    'Word confidence threshold (0.0-1.0)',
+                    'number'
+                  )}
+                  {renderSettingsField(
+                    'speech_detection',
+                    'min_duration',
+                    appSettings.speech_detection.min_duration,
+                    'Minimum Duration (seconds)',
+                    'Minimum speech duration in seconds',
+                    'number'
+                  )}
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+                  Audio Processing
+                </h3>
+                <div className="space-y-2">
+                  {renderSettingsField(
+                    'audio_processing',
+                    'audio_cropping_enabled',
+                    appSettings.audio_processing.audio_cropping_enabled,
+                    'Enable Audio Cropping',
+                    'Automatically remove silence from audio',
+                    'boolean'
+                  )}
+                  {renderSettingsField(
+                    'audio_processing',
+                    'min_speech_segment_duration',
+                    appSettings.audio_processing.min_speech_segment_duration,
+                    'Min Speech Segment Duration',
+                    'Minimum duration for speech segments (seconds)',
+                    'number'
+                  )}
+                  {renderSettingsField(
+                    'audio_processing',
+                    'cropping_context_padding',
+                    appSettings.audio_processing.cropping_context_padding,
+                    'Context Padding',
+                    'Padding around speech segments (0.0-1.0)',
+                    'number'
+                  )}
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+                  Transcription Provider
+                </h3>
+                {renderSettingsField(
+                  'providers',
+                  'transcription_provider',
+                  appSettings.providers.transcription_provider,
+                  'Transcription Service',
+                  'Choose which service to use for speech-to-text',
+                  'select',
+                  [
+                    { value: 'auto', label: 'Auto-detect' },
+                    { value: 'deepgram', label: 'Deepgram' },
+                    { value: 'mistral', label: 'Mistral' },
+                    { value: 'parakeet', label: 'Parakeet (Local)' },
+                  ]
+                )}
+              </div>
+            </div>
+
+            <div className="mt-6 flex space-x-3">
+              <button
+                onClick={async () => {
+                  await updateCategorySettings('speech_detection', appSettings.speech_detection)
+                  await updateCategorySettings('audio_processing', appSettings.audio_processing)
+                  await updateCategorySettings('providers', appSettings.providers)
+                }}
+                disabled={appSettingsLoading}
+                className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+              >
+                <Save className="h-4 w-4" />
+                <span>Save Speech Settings</span>
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Conversations Settings */}
+        {activeTab === 'conversations' && appSettings && (
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+              Conversation Settings
+            </h2>
+
+            <div className="space-y-2">
+              {renderSettingsField(
+                'conversation',
+                'transcription_buffer_seconds',
+                appSettings.conversation.transcription_buffer_seconds,
+                'Transcription Buffer (seconds)',
+                'Trigger transcription every N seconds',
+                'number'
+              )}
+              {renderSettingsField(
+                'conversation',
+                'speech_inactivity_threshold',
+                appSettings.conversation.speech_inactivity_threshold,
+                'Speech Inactivity Threshold (seconds)',
+                'Close conversation after N seconds of silence',
+                'number'
+              )}
+              {renderSettingsField(
+                'conversation',
+                'new_conversation_timeout_minutes',
+                appSettings.conversation.new_conversation_timeout_minutes,
+                'New Conversation Timeout (minutes)',
+                'Timeout for creating new conversations',
+                'number'
+              )}
+              {renderSettingsField(
+                'conversation',
+                'record_only_enrolled_speakers',
+                appSettings.conversation.record_only_enrolled_speakers,
+                'Record Only Enrolled Speakers',
+                'Only create conversations when enrolled speakers are detected',
+                'boolean'
+              )}
+            </div>
+
+            <div className="mt-6">
+              <button
+                onClick={() => updateCategorySettings('conversation', appSettings.conversation)}
+                disabled={appSettingsLoading}
+                className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+              >
+                <Save className="h-4 w-4" />
+                <span>Save Conversation Settings</span>
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Other Settings */}
+        {activeTab === 'other' && appSettings && (
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+              Other Settings
+            </h2>
+
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+                  Speaker Diarization
+                </h3>
+                <div className="space-y-2">
+                  {renderSettingsField(
+                    'diarization',
+                    'diarization_source',
+                    appSettings.diarization.diarization_source,
+                    'Diarization Source',
+                    'Service to use for speaker identification',
+                    'select',
+                    [
+                      { value: 'pyannote', label: 'PyAnnote' },
+                      { value: 'deepgram', label: 'Deepgram' },
+                    ]
+                  )}
+                  {renderSettingsField(
+                    'diarization',
+                    'min_speakers',
+                    appSettings.diarization.min_speakers,
+                    'Minimum Speakers',
+                    'Minimum number of speakers to detect',
+                    'number'
+                  )}
+                  {renderSettingsField(
+                    'diarization',
+                    'max_speakers',
+                    appSettings.diarization.max_speakers,
+                    'Maximum Speakers',
+                    'Maximum number of speakers to detect',
+                    'number'
+                  )}
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+                  LLM Configuration
+                </h3>
+                <div className="space-y-2">
+                  {renderSettingsField(
+                    'llm',
+                    'llm_provider',
+                    appSettings.llm.llm_provider,
+                    'LLM Provider',
+                    'Language model provider for memory extraction',
+                    'select',
+                    [
+                      { value: 'openai', label: 'OpenAI' },
+                      { value: 'ollama', label: 'Ollama' },
+                    ]
+                  )}
+                  {renderSettingsField(
+                    'llm',
+                    'openai_model',
+                    appSettings.llm.openai_model,
+                    'OpenAI Model',
+                    'Model to use for OpenAI requests',
+                    'text'
+                  )}
+                  {renderSettingsField(
+                    'llm',
+                    'chat_temperature',
+                    appSettings.llm.chat_temperature,
+                    'Chat Temperature',
+                    'Temperature for chat responses (0.0-2.0)',
+                    'number'
+                  )}
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+                  Network & System
+                </h3>
+                <div className="space-y-2">
+                  {renderSettingsField(
+                    'network',
+                    'host_ip',
+                    appSettings.network.host_ip,
+                    'Host IP',
+                    'Public IP or hostname for browser access',
+                    'text'
+                  )}
+                  {renderSettingsField(
+                    'network',
+                    'backend_public_port',
+                    appSettings.network.backend_public_port,
+                    'Backend Port',
+                    'Public port for backend API',
+                    'number'
+                  )}
+                  {renderSettingsField(
+                    'misc',
+                    'langfuse_enable_telemetry',
+                    appSettings.misc.langfuse_enable_telemetry,
+                    'Enable Langfuse Telemetry',
+                    'Enable telemetry for Langfuse',
+                    'boolean'
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-6 flex space-x-3">
+              <button
+                onClick={async () => {
+                  await updateCategorySettings('diarization', appSettings.diarization)
+                  await updateCategorySettings('llm', appSettings.llm)
+                  await updateCategorySettings('network', appSettings.network)
+                  await updateCategorySettings('misc', appSettings.misc)
+                }}
+                disabled={appSettingsLoading}
+                className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+              >
+                <Save className="h-4 w-4" />
+                <span>Save Other Settings</span>
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Loading state for settings tabs */}
+        {['memory', 'speech', 'conversations', 'other'].includes(activeTab) &&
+          appSettingsLoading &&
+          !appSettings && (
+            <div className="text-center py-12">
+              <RefreshCw className="h-8 w-8 text-gray-400 animate-spin mx-auto mb-4" />
+              <p className="text-gray-500 dark:text-gray-400">Loading settings...</p>
+            </div>
+          )}
+      </div>
+    </div>
+  )
+}
diff --git a/backends/advanced/webui/src/services/api.ts b/backends/advanced/webui/src/services/api.ts
index 0d988a9d..0c246d53 100644
--- a/backends/advanced/webui/src/services/api.ts
+++ b/backends/advanced/webui/src/services/api.ts
@@ -268,4 +268,52 @@ export const speakerApi = {
   
   // Check speaker service status (admin only)
   getSpeakerServiceStatus: () => api.get('/api/speaker-service-status'),
+}
+
+export const settingsApi = {
+  // Generate new API key for current user
+  generateApiKey: () => api.post('/api/users/me/api-key'),
+
+  // Revoke current user's API key
+  revokeApiKey: () => api.delete('/api/users/me/api-key'),
+
+  // Application settings (requires admin)
+  getAllSettings: () => api.get('/api/settings'),
+  updateAllSettings: (settings: any) => api.put('/api/settings', settings),
+
+  // Individual setting categories
+  getSpeechDetection: () => api.get('/api/settings/speech-detection'),
+  updateSpeechDetection: (settings: any) => api.put('/api/settings/speech-detection', settings),
+
+  getConversation: () => api.get('/api/settings/conversation'),
+  updateConversation: (settings: any) => api.put('/api/settings/conversation', settings),
+
+  getAudioProcessing: () => api.get('/api/settings/audio-processing'),
+  updateAudioProcessing: (settings: any) => api.put('/api/settings/audio-processing', settings),
+
+  getDiarization: () => api.get('/api/settings/diarization'),
+  updateDiarization: (settings: any) => api.put('/api/settings/diarization', settings),
+
+  getLLM: () => api.get('/api/settings/llm'),
+  updateLLM: (settings: any) => api.put('/api/settings/llm', settings),
+
+  getProviders: () => api.get('/api/settings/providers'),
+  updateProviders: (settings: any) => api.put('/api/settings/providers', settings),
+
+  getNetwork: () => api.get('/api/settings/network'),
+  updateNetwork: (settings: any) => api.put('/api/settings/network', settings),
+
+  getMisc: () => api.get('/api/settings/misc'),
+  updateMisc: (settings: any) => api.put('/api/settings/misc', settings),
+
+  // Cache management
+  invalidateCache: (category?: string) => api.post('/api/settings/cache/invalidate', null, {
+    params: category ? { category } : {}
+  }),
+
+  // Infrastructure status
+  getInfrastructureStatus: () => api.get('/api/settings/infrastructure/status'),
+
+  // API keys status
+  getApiKeysStatus: () => api.get('/api/settings/api-keys/status'),
 }
\ No newline at end of file

From 325ad2f1a6db8d34f845b48fde59071dccd8bc08 Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Thu, 11 Dec 2025 23:30:24 +0000
Subject: [PATCH 04/17] reorganised settings page

---
 .../routers/modules/settings_routes.py        |  160 ++-
 .../advanced_omi_backend/settings_manager.py  |   63 +
 .../advanced_omi_backend/settings_models.py   |   68 ++
 .../utils/api_keys_manager.py                 |  168 +++
 .../advanced/webui/src/pages/Settings.tsx     | 1088 +++++++++++++----
 backends/advanced/webui/src/services/api.ts   |   14 +
 6 files changed, 1340 insertions(+), 221 deletions(-)
 create mode 100644 backends/advanced/src/advanced_omi_backend/utils/api_keys_manager.py

diff --git a/backends/advanced/src/advanced_omi_backend/routers/modules/settings_routes.py b/backends/advanced/src/advanced_omi_backend/routers/modules/settings_routes.py
index c490230b..3da73c4d 100644
--- a/backends/advanced/src/advanced_omi_backend/routers/modules/settings_routes.py
+++ b/backends/advanced/src/advanced_omi_backend/routers/modules/settings_routes.py
@@ -13,9 +13,11 @@
 from advanced_omi_backend.settings_manager import get_settings_manager, SettingsManager
 from advanced_omi_backend.settings_models import (
     AllSettings,
+    ApiKeysSettings,
     AudioProcessingSettings,
     ConversationSettings,
     DiarizationSettings,
+    InfrastructureSettings,
     LLMSettings,
     MiscSettings,
     NetworkSettings,
@@ -249,6 +251,33 @@ async def update_network_settings(
     return await settings_mgr.get_network()
 
 
+# Infrastructure Settings
+
+
+@router.get("/infrastructure", response_model=InfrastructureSettings)
+async def get_infrastructure_settings(
+    current_user: User = Depends(current_active_user),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """Get infrastructure settings."""
+    return await settings_mgr.get_infrastructure()
+
+
+@router.put("/infrastructure", response_model=InfrastructureSettings)
+async def update_infrastructure_settings(
+    settings: InfrastructureSettings,
+    current_user: User = Depends(current_superuser),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Update infrastructure settings. Admin only.
+
+    Controls MongoDB, Redis, Qdrant, and Neo4j connection settings.
+    """
+    await settings_mgr.update_infrastructure(settings, updated_by=str(current_user.id))
+    return await settings_mgr.get_infrastructure()
+
+
 # Miscellaneous Settings
 
 
@@ -276,6 +305,120 @@ async def update_misc_settings(
     return await settings_mgr.get_misc()
 
 
+# API Keys Settings
+
+
+@router.get("/api-keys", response_model=ApiKeysSettings)
+async def get_api_keys_settings(
+    current_user: User = Depends(current_active_user),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """Get API keys settings."""
+    return await settings_mgr.get_api_keys()
+
+
+@router.put("/api-keys", response_model=ApiKeysSettings)
+async def update_api_keys_settings(
+    settings: ApiKeysSettings,
+    current_user: User = Depends(current_superuser),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Update API keys settings. Admin only.
+
+    Controls external service API keys.
+    """
+    await settings_mgr.update_api_keys(settings, updated_by=str(current_user.id))
+    return await settings_mgr.get_api_keys()
+
+
+@router.get("/api-keys/load-from-file", response_model=ApiKeysSettings)
+async def load_api_keys_from_file(
+    file_path: str = ".env.api-keys",
+    current_user: User = Depends(current_superuser),
+):
+    """
+    Load API keys from a file. Admin only.
+
+    Args:
+        file_path: Path to the API keys file (default: .env.api-keys)
+
+    Returns:
+        API keys loaded from the file
+    """
+    from advanced_omi_backend.utils.api_keys_manager import read_api_keys_from_file
+
+    try:
+        keys_dict = read_api_keys_from_file(file_path)
+        return ApiKeysSettings(**keys_dict)
+    except Exception as e:
+        logger.error(f"Error loading API keys from file {file_path}: {e}")
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to load API keys from {file_path}: {str(e)}"
+        )
+
+
+@router.post("/api-keys/save")
+async def save_api_keys(
+    settings: ApiKeysSettings,
+    save_to_file: bool = True,
+    save_to_database: bool = True,
+    current_user: User = Depends(current_superuser),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
+):
+    """
+    Save API keys to file and/or database. Admin only.
+
+    Args:
+        settings: API keys to save
+        save_to_file: Save to .env.api-keys file (default: True)
+        save_to_database: Save to MongoDB (default: True)
+    """
+    from advanced_omi_backend.utils.api_keys_manager import write_api_keys_to_file
+
+    results = {"file": False, "database": False, "errors": []}
+
+    # Save to file
+    if save_to_file:
+        try:
+            keys_dict = {
+                "openai_api_key": settings.openai_api_key,
+                "deepgram_api_key": settings.deepgram_api_key,
+                "mistral_api_key": settings.mistral_api_key,
+                "hf_token": settings.hf_token,
+                "langfuse_public_key": settings.langfuse_public_key,
+                "langfuse_secret_key": settings.langfuse_secret_key,
+                "ngrok_authtoken": settings.ngrok_authtoken,
+            }
+            success = write_api_keys_to_file(keys_dict, ".env.api-keys")
+            results["file"] = success
+            if not success:
+                results["errors"].append("Failed to write to .env.api-keys file")
+        except Exception as e:
+            logger.error(f"Error writing API keys to file: {e}")
+            results["errors"].append(f"File write error: {str(e)}")
+
+    # Save to database
+    if save_to_database:
+        try:
+            await settings_mgr.update_api_keys(settings, updated_by=str(current_user.id))
+            results["database"] = True
+        except Exception as e:
+            logger.error(f"Error saving API keys to database: {e}")
+            results["errors"].append(f"Database save error: {str(e)}")
+
+    return {
+        "success": results["file"] or results["database"],
+        "saved_to": {
+            "file": results["file"],
+            "database": results["database"],
+        },
+        "errors": results["errors"],
+        "settings": await settings_mgr.get_api_keys(),
+    }
+
+
 # Cache Management
 
 
@@ -304,34 +447,37 @@ async def invalidate_settings_cache(
 @router.get("/infrastructure/status")
 async def get_infrastructure_status(
     current_user: User = Depends(current_active_user),
+    settings_mgr: SettingsManager = Depends(get_settings_manager),
 ):
     """
     Get infrastructure service connection status.
 
     Returns URLs and connection status for MongoDB, Redis, Qdrant, Neo4j.
+    Uses editable settings from database.
     """
-    import os
     from advanced_omi_backend.app_config import get_app_config
 
+    # Get infrastructure settings from database
+    infra_settings = await settings_mgr.get_infrastructure()
     config = get_app_config()
 
     status = {
         "mongodb": {
-            "url": config.mongodb_uri,
-            "database": config.mongodb_database,
+            "url": infra_settings.mongodb_uri,
+            "database": infra_settings.mongodb_database,
             "connected": False,
         },
         "redis": {
-            "url": config.redis_url,
+            "url": infra_settings.redis_url,
             "connected": False,
         },
         "qdrant": {
-            "url": f"http://{config.qdrant_base_url}:{config.qdrant_port}",
+            "url": f"http://{infra_settings.qdrant_base_url}:{infra_settings.qdrant_port}",
             "connected": False,
         },
         "neo4j": {
-            "host": os.getenv("NEO4J_HOST", "neo4j-mem0"),
-            "user": os.getenv("NEO4J_USER", "neo4j"),
+            "host": infra_settings.neo4j_host,
+            "user": infra_settings.neo4j_user,
             "connected": False,
         },
     }
diff --git a/backends/advanced/src/advanced_omi_backend/settings_manager.py b/backends/advanced/src/advanced_omi_backend/settings_manager.py
index 601ce0c3..67873334 100644
--- a/backends/advanced/src/advanced_omi_backend/settings_manager.py
+++ b/backends/advanced/src/advanced_omi_backend/settings_manager.py
@@ -15,9 +15,11 @@
 
 from advanced_omi_backend.settings_models import (
     AllSettings,
+    ApiKeysSettings,
     AudioProcessingSettings,
     ConversationSettings,
     DiarizationSettings,
+    InfrastructureSettings,
     LLMSettings,
     MiscSettings,
     NetworkSettings,
@@ -155,6 +157,20 @@ async def _initialize_from_env(self):
         )
         await self._save_to_db("network", network.dict(), "system")
 
+        # Infrastructure settings
+        from advanced_omi_backend.app_config import get_app_config
+        config = get_app_config()
+        infrastructure = InfrastructureSettings(
+            mongodb_uri=config.mongodb_uri,
+            mongodb_database=config.mongodb_database,
+            redis_url=config.redis_url,
+            qdrant_base_url=config.qdrant_base_url,
+            qdrant_port=config.qdrant_port,
+            neo4j_host=os.getenv("NEO4J_HOST", "neo4j-mem0"),
+            neo4j_user=os.getenv("NEO4J_USER", "neo4j"),
+        )
+        await self._save_to_db("infrastructure", infrastructure.dict(), "system")
+
         # Misc settings
         misc = MiscSettings(
             debug_dir=os.getenv("DEBUG_DIR", "./data/debug_dir"),
@@ -162,6 +178,21 @@ async def _initialize_from_env(self):
         )
         await self._save_to_db("misc", misc.dict(), "system")
 
+        # API Keys settings - read from .env.api-keys file first, fallback to env vars
+        from advanced_omi_backend.utils.api_keys_manager import read_api_keys_from_file
+
+        file_keys = read_api_keys_from_file(".env.api-keys")
+        api_keys = ApiKeysSettings(
+            openai_api_key=file_keys.get("openai_api_key") or os.getenv("OPENAI_API_KEY"),
+            deepgram_api_key=file_keys.get("deepgram_api_key") or os.getenv("DEEPGRAM_API_KEY"),
+            mistral_api_key=file_keys.get("mistral_api_key") or os.getenv("MISTRAL_API_KEY"),
+            hf_token=file_keys.get("hf_token") or os.getenv("HF_TOKEN"),
+            langfuse_public_key=file_keys.get("langfuse_public_key") or os.getenv("LANGFUSE_PUBLIC_KEY"),
+            langfuse_secret_key=file_keys.get("langfuse_secret_key") or os.getenv("LANGFUSE_SECRET_KEY"),
+            ngrok_authtoken=file_keys.get("ngrok_authtoken") or os.getenv("NGROK_AUTHTOKEN"),
+        )
+        await self._save_to_db("api_keys", api_keys.dict(), "system")
+
         logger.info("✅ Initialized all settings from environment variables")
 
     async def _get_from_cache_or_db(
@@ -345,6 +376,20 @@ async def update_network(
         """Update network settings."""
         await self._update_settings("network", settings, updated_by)
 
+    # Infrastructure Settings
+
+    async def get_infrastructure(self) -> InfrastructureSettings:
+        """Get infrastructure settings."""
+        return await self._get_from_cache_or_db("infrastructure", InfrastructureSettings)
+
+    async def update_infrastructure(
+        self,
+        settings: InfrastructureSettings,
+        updated_by: str = "user",
+    ):
+        """Update infrastructure settings."""
+        await self._update_settings("infrastructure", settings, updated_by)
+
     # Misc Settings
 
     async def get_misc(self) -> MiscSettings:
@@ -359,6 +404,20 @@ async def update_misc(
         """Update miscellaneous settings."""
         await self._update_settings("misc", settings, updated_by)
 
+    # API Keys Settings
+
+    async def get_api_keys(self) -> ApiKeysSettings:
+        """Get API keys settings."""
+        return await self._get_from_cache_or_db("api_keys", ApiKeysSettings)
+
+    async def update_api_keys(
+        self,
+        settings: ApiKeysSettings,
+        updated_by: str = "user",
+    ):
+        """Update API keys settings."""
+        await self._update_settings("api_keys", settings, updated_by)
+
     # Combined Settings
 
     async def get_all_settings(self) -> AllSettings:
@@ -371,7 +430,9 @@ async def get_all_settings(self) -> AllSettings:
             llm=await self.get_llm(),
             providers=await self.get_providers(),
             network=await self.get_network(),
+            infrastructure=await self.get_infrastructure(),
             misc=await self.get_misc(),
+            api_keys=await self.get_api_keys(),
         )
 
     async def update_all_settings(
@@ -387,7 +448,9 @@ async def update_all_settings(
         await self.update_llm(settings.llm, updated_by)
         await self.update_providers(settings.providers, updated_by)
         await self.update_network(settings.network, updated_by)
+        await self.update_infrastructure(settings.infrastructure, updated_by)
         await self.update_misc(settings.misc, updated_by)
+        await self.update_api_keys(settings.api_keys, updated_by)
 
     def invalidate_cache(self, key: Optional[str] = None):
         """
diff --git a/backends/advanced/src/advanced_omi_backend/settings_models.py b/backends/advanced/src/advanced_omi_backend/settings_models.py
index 42da80f8..68742f1e 100644
--- a/backends/advanced/src/advanced_omi_backend/settings_models.py
+++ b/backends/advanced/src/advanced_omi_backend/settings_models.py
@@ -226,6 +226,39 @@ class NetworkSettings(BaseModel):
     )
 
 
+class InfrastructureSettings(BaseModel):
+    """Core infrastructure service settings."""
+
+    mongodb_uri: str = Field(
+        default="mongodb://mongo:27017",
+        description="MongoDB connection URI"
+    )
+    mongodb_database: str = Field(
+        default="friend-lite",
+        description="MongoDB database name"
+    )
+    redis_url: str = Field(
+        default="redis://localhost:6379/0",
+        description="Redis connection URL"
+    )
+    qdrant_base_url: str = Field(
+        default="qdrant",
+        description="Qdrant base URL/hostname"
+    )
+    qdrant_port: str = Field(
+        default="6333",
+        description="Qdrant port"
+    )
+    neo4j_host: str = Field(
+        default="neo4j-mem0",
+        description="Neo4j host"
+    )
+    neo4j_user: str = Field(
+        default="neo4j",
+        description="Neo4j username"
+    )
+
+
 class MiscSettings(BaseModel):
     """Miscellaneous settings."""
 
@@ -239,6 +272,39 @@ class MiscSettings(BaseModel):
     )
 
 
+class ApiKeysSettings(BaseModel):
+    """External service API keys."""
+
+    openai_api_key: Optional[str] = Field(
+        default=None,
+        description="OpenAI API Key"
+    )
+    deepgram_api_key: Optional[str] = Field(
+        default=None,
+        description="Deepgram API Key"
+    )
+    mistral_api_key: Optional[str] = Field(
+        default=None,
+        description="Mistral API Key"
+    )
+    hf_token: Optional[str] = Field(
+        default=None,
+        description="HuggingFace Token"
+    )
+    langfuse_public_key: Optional[str] = Field(
+        default=None,
+        description="Langfuse Public Key"
+    )
+    langfuse_secret_key: Optional[str] = Field(
+        default=None,
+        description="Langfuse Secret Key"
+    )
+    ngrok_authtoken: Optional[str] = Field(
+        default=None,
+        description="Ngrok Auth Token"
+    )
+
+
 class AllSettings(BaseModel):
     """Combined model for all application settings."""
 
@@ -249,4 +315,6 @@ class AllSettings(BaseModel):
     llm: LLMSettings = Field(default_factory=LLMSettings)
     providers: ProviderSettings = Field(default_factory=ProviderSettings)
     network: NetworkSettings = Field(default_factory=NetworkSettings)
+    infrastructure: InfrastructureSettings = Field(default_factory=InfrastructureSettings)
     misc: MiscSettings = Field(default_factory=MiscSettings)
+    api_keys: ApiKeysSettings = Field(default_factory=ApiKeysSettings)
diff --git a/backends/advanced/src/advanced_omi_backend/utils/api_keys_manager.py b/backends/advanced/src/advanced_omi_backend/utils/api_keys_manager.py
new file mode 100644
index 00000000..1eca417d
--- /dev/null
+++ b/backends/advanced/src/advanced_omi_backend/utils/api_keys_manager.py
@@ -0,0 +1,168 @@
+"""
+API Keys Manager - Handle reading/writing API keys from file and database.
+"""
+
+import logging
+import os
+from pathlib import Path
+from typing import Dict, Optional
+
+logger = logging.getLogger(__name__)
+
+
+def mask_api_key(key: Optional[str]) -> Optional[str]:
+    """
+    Mask an API key for display purposes.
+
+    Shows first 7 chars and last 4 chars, masks the middle.
+    Example: sk-1234567890abcdef -> sk-1234***cdef
+    """
+    if not key or len(key) < 12:
+        return None
+
+    return f"{key[:7]}****{key[-4:]}"
+
+
+def read_api_keys_from_file(file_path: str = ".env.api-keys") -> Dict[str, Optional[str]]:
+    """
+    Read API keys from .env.api-keys file.
+
+    Returns:
+        Dictionary of API key values (not masked)
+    """
+    keys = {
+        "openai_api_key": None,
+        "deepgram_api_key": None,
+        "mistral_api_key": None,
+        "hf_token": None,
+        "langfuse_public_key": None,
+        "langfuse_secret_key": None,
+        "ngrok_authtoken": None,
+    }
+
+    # Check if file exists
+    if not os.path.exists(file_path):
+        logger.warning(f"API keys file not found: {file_path}")
+        return keys
+
+    try:
+        with open(file_path, 'r') as f:
+            for line in f:
+                line = line.strip()
+                # Skip comments and empty lines
+                if not line or line.startswith('#'):
+                    continue
+
+                # Parse key=value
+                if '=' in line:
+                    key, value = line.split('=', 1)
+                    key = key.strip()
+                    value = value.strip()
+
+                    # Map env var names to our field names
+                    if key == "OPENAI_API_KEY" and value:
+                        keys["openai_api_key"] = value
+                    elif key == "DEEPGRAM_API_KEY" and value:
+                        keys["deepgram_api_key"] = value
+                    elif key == "MISTRAL_API_KEY" and value:
+                        keys["mistral_api_key"] = value
+                    elif key == "HF_TOKEN" and value:
+                        keys["hf_token"] = value
+                    elif key == "LANGFUSE_PUBLIC_KEY" and value:
+                        keys["langfuse_public_key"] = value
+                    elif key == "LANGFUSE_SECRET_KEY" and value:
+                        keys["langfuse_secret_key"] = value
+                    elif key == "NGROK_AUTHTOKEN" and value:
+                        keys["ngrok_authtoken"] = value
+
+        logger.info(f"Loaded API keys from {file_path}")
+        return keys
+
+    except Exception as e:
+        logger.error(f"Error reading API keys file: {e}")
+        return keys
+
+
+def write_api_keys_to_file(keys: Dict[str, Optional[str]], file_path: str = ".env.api-keys") -> bool:
+    """
+    Write API keys to .env.api-keys file.
+
+    Args:
+        keys: Dictionary of API key values
+        file_path: Path to the .env.api-keys file
+
+    Returns:
+        True if successful, False otherwise
+    """
+    try:
+        # Read template for structure/comments
+        template_path = f"{file_path}.template"
+        template_lines = []
+
+        if os.path.exists(template_path):
+            with open(template_path, 'r') as f:
+                template_lines = f.readlines()
+
+        # Build output content
+        output_lines = []
+
+        if template_lines:
+            # Use template structure
+            for line in template_lines:
+                stripped = line.strip()
+
+                # Keep comments and empty lines
+                if not stripped or stripped.startswith('#'):
+                    output_lines.append(line)
+                    continue
+
+                # Parse key=value from template
+                if '=' in stripped:
+                    key_name = stripped.split('=', 1)[0].strip()
+
+                    # Replace with actual values if provided
+                    if key_name == "OPENAI_API_KEY":
+                        value = keys.get("openai_api_key", "")
+                        output_lines.append(f"{key_name}={value}\n")
+                    elif key_name == "DEEPGRAM_API_KEY":
+                        value = keys.get("deepgram_api_key", "")
+                        output_lines.append(f"{key_name}={value}\n")
+                    elif key_name == "MISTRAL_API_KEY":
+                        value = keys.get("mistral_api_key", "")
+                        output_lines.append(f"{key_name}={value}\n")
+                    elif key_name == "HF_TOKEN":
+                        value = keys.get("hf_token", "")
+                        output_lines.append(f"{key_name}={value}\n")
+                    elif key_name == "LANGFUSE_PUBLIC_KEY":
+                        value = keys.get("langfuse_public_key", "")
+                        output_lines.append(f"{key_name}={value}\n")
+                    elif key_name == "LANGFUSE_SECRET_KEY":
+                        value = keys.get("langfuse_secret_key", "")
+                        output_lines.append(f"{key_name}={value}\n")
+                    elif key_name == "NGROK_AUTHTOKEN":
+                        value = keys.get("ngrok_authtoken", "")
+                        output_lines.append(f"{key_name}={value}\n")
+                    else:
+                        # Keep other keys from template unchanged
+                        output_lines.append(line)
+        else:
+            # No template - create simple format
+            output_lines.append("# API Keys\n\n")
+            output_lines.append(f"OPENAI_API_KEY={keys.get('openai_api_key', '')}\n")
+            output_lines.append(f"DEEPGRAM_API_KEY={keys.get('deepgram_api_key', '')}\n")
+            output_lines.append(f"MISTRAL_API_KEY={keys.get('mistral_api_key', '')}\n")
+            output_lines.append(f"HF_TOKEN={keys.get('hf_token', '')}\n")
+            output_lines.append(f"LANGFUSE_PUBLIC_KEY={keys.get('langfuse_public_key', '')}\n")
+            output_lines.append(f"LANGFUSE_SECRET_KEY={keys.get('langfuse_secret_key', '')}\n")
+            output_lines.append(f"NGROK_AUTHTOKEN={keys.get('ngrok_authtoken', '')}\n")
+
+        # Write to file
+        with open(file_path, 'w') as f:
+            f.writelines(output_lines)
+
+        logger.info(f"Wrote API keys to {file_path}")
+        return True
+
+    except Exception as e:
+        logger.error(f"Error writing API keys file: {e}")
+        return False
diff --git a/backends/advanced/webui/src/pages/Settings.tsx b/backends/advanced/webui/src/pages/Settings.tsx
index 880f2b4f..bd3556d9 100644
--- a/backends/advanced/webui/src/pages/Settings.tsx
+++ b/backends/advanced/webui/src/pages/Settings.tsx
@@ -12,13 +12,15 @@ import {
   MessageSquare,
   Mic,
   Database,
-  Settings2,
   Shield,
+  Brain,
+  Eye,
+  EyeOff,
 } from 'lucide-react'
 import { useAuth } from '../contexts/AuthContext'
 import { settingsApi } from '../services/api'
 
-type Tab = 'core-infra' | 'api-keys' | 'mcp-key' | 'memory' | 'speech' | 'conversations' | 'other'
+type Tab = 'core-infra' | 'api-keys' | 'mcp-key' | 'memory' | 'llm' | 'speech' | 'conversations'
 
 interface Message {
   type: 'success' | 'error'
@@ -39,9 +41,34 @@ export default function Settings() {
   const [infraStatus, setInfraStatus] = useState<any>(null)
   const [infraLoading, setInfraLoading] = useState(false)
 
-  // API Keys status state
-  const [apiKeysStatus, setApiKeysStatus] = useState<any>(null)
-  const [apiKeysLoading, setApiKeysLoading] = useState(false)
+  // Infrastructure settings state
+  const [infraSettings, setInfraSettings] = useState<any>(null)
+  const [infraSettingsOriginal, setInfraSettingsOriginal] = useState<any>(null)
+  const [infraSettingsLoading, setInfraSettingsLoading] = useState(false)
+  const [infraSettingsSaving, setInfraSettingsSaving] = useState(false)
+
+  // API Keys settings state
+  const [apiKeysSettings, setApiKeysSettings] = useState<any>(null)
+  const [apiKeysSettingsOriginal, setApiKeysSettingsOriginal] = useState<any>(null)
+  const [apiKeysSettingsLoading, setApiKeysSettingsLoading] = useState(false)
+  const [apiKeysSettingsSaving, setApiKeysSettingsSaving] = useState(false)
+
+  // API Keys visibility state
+  const [showApiKeys, setShowApiKeys] = useState<Record<string, boolean>>({
+    openai_api_key: false,
+    deepgram_api_key: false,
+    mistral_api_key: false,
+    hf_token: false,
+    langfuse_public_key: false,
+    langfuse_secret_key: false,
+    ngrok_authtoken: false,
+  })
+
+  // API Keys save options
+  const [saveToFile, setSaveToFile] = useState(true)
+  const [saveToDatabase, setSaveToDatabase] = useState(true)
+  const [apiKeysFilePath, setApiKeysFilePath] = useState('.env.api-keys')
+  const [loadingFromFile, setLoadingFromFile] = useState(false)
 
   // Application settings state
   const [appSettings, setAppSettings] = useState<any>(null)
@@ -54,11 +81,13 @@ export default function Settings() {
   }, [user])
 
   useEffect(() => {
-    if (activeTab === 'core-infra' && !infraStatus) {
-      loadInfrastructureStatus()
-    } else if (activeTab === 'api-keys' && !apiKeysStatus) {
-      loadApiKeysStatus()
-    } else if (['memory', 'speech', 'conversations', 'other'].includes(activeTab) && !appSettings) {
+    if (activeTab === 'core-infra') {
+      if (!infraStatus) loadInfrastructureStatus()
+      if (!infraSettings) loadInfrastructureSettings()
+      if (!appSettings) loadApplicationSettings() // Load for network & misc settings
+    } else if (activeTab === 'api-keys') {
+      if (!apiKeysSettings) loadApiKeysSettings()
+    } else if (['memory', 'llm', 'speech', 'conversations'].includes(activeTab) && !appSettings) {
       loadApplicationSettings()
     }
   }, [activeTab])
@@ -83,16 +112,101 @@ export default function Settings() {
     }
   }
 
-  const loadApiKeysStatus = async () => {
+  const loadInfrastructureSettings = async () => {
+    try {
+      setInfraSettingsLoading(true)
+      const response = await settingsApi.getInfrastructure()
+      setInfraSettings(response.data)
+      setInfraSettingsOriginal(response.data)
+    } catch (error: any) {
+      console.error('Failed to load infrastructure settings:', error)
+      showMessage('error', 'Failed to load infrastructure settings')
+    } finally {
+      setInfraSettingsLoading(false)
+    }
+  }
+
+  const saveInfrastructureSettings = async () => {
+    try {
+      setInfraSettingsSaving(true)
+      await settingsApi.updateInfrastructure(infraSettings)
+      setInfraSettingsOriginal(infraSettings)
+      showMessage('success', 'Infrastructure settings saved successfully')
+      // Reload status to reflect new settings
+      loadInfrastructureStatus()
+    } catch (error: any) {
+      console.error('Failed to save infrastructure settings:', error)
+      showMessage('error', error.response?.data?.detail || 'Failed to save infrastructure settings')
+    } finally {
+      setInfraSettingsSaving(false)
+    }
+  }
+
+  const resetInfrastructureSettings = () => {
+    setInfraSettings({ ...infraSettingsOriginal })
+  }
+
+  const loadApiKeysSettings = async () => {
+    try {
+      setApiKeysSettingsLoading(true)
+      const response = await settingsApi.getApiKeys()
+      setApiKeysSettings(response.data)
+      setApiKeysSettingsOriginal(response.data)
+    } catch (error: any) {
+      console.error('Failed to load API keys settings:', error)
+      showMessage('error', 'Failed to load API keys settings')
+    } finally {
+      setApiKeysSettingsLoading(false)
+    }
+  }
+
+  const saveApiKeysSettings = async () => {
     try {
-      setApiKeysLoading(true)
-      const response = await settingsApi.getApiKeysStatus()
-      setApiKeysStatus(response.data)
+      setApiKeysSettingsSaving(true)
+      const response = await settingsApi.saveApiKeys(apiKeysSettings, saveToFile, saveToDatabase)
+
+      if (response.data.success) {
+        setApiKeysSettingsOriginal(apiKeysSettings)
+        const savedTo: string[] = []
+        if (response.data.saved_to.file) savedTo.push('file')
+        if (response.data.saved_to.database) savedTo.push('database')
+        showMessage('success', `API keys saved to ${savedTo.join(' and ')}`)
+      } else {
+        showMessage('error', response.data.errors.join(', ') || 'Failed to save API keys')
+      }
     } catch (error: any) {
-      console.error('Failed to load API keys status:', error)
-      showMessage('error', 'Failed to load API keys status')
+      console.error('Failed to save API keys:', error)
+      showMessage('error', error.response?.data?.detail || 'Failed to save API keys')
     } finally {
-      setApiKeysLoading(false)
+      setApiKeysSettingsSaving(false)
+    }
+  }
+
+  const resetApiKeysSettings = () => {
+    setApiKeysSettings({ ...apiKeysSettingsOriginal })
+  }
+
+  // Toggle API key visibility
+  const toggleApiKeyVisibility = (keyName: string) => {
+    setShowApiKeys(prev => ({ ...prev, [keyName]: !prev[keyName] }))
+  }
+
+  // Load API keys from file
+  const loadApiKeysFromFile = async () => {
+    try {
+      setLoadingFromFile(true)
+      const response = await settingsApi.loadApiKeysFromFile(apiKeysFilePath)
+
+      if (response.data) {
+        setApiKeysSettings(response.data)
+        setApiKeysSettingsOriginal(response.data)
+        showMessage('success', `API keys loaded from ${apiKeysFilePath}`)
+      }
+    } catch (error: any) {
+      console.error('Failed to load API keys from file:', error)
+      showMessage('error', error.response?.data?.detail || 'Failed to load API keys from file')
+    } finally {
+      setLoadingFromFile(false)
     }
   }
 
@@ -302,9 +416,9 @@ export default function Settings() {
     { id: 'api-keys' as Tab, label: 'API Keys', icon: Shield, adminOnly: true },
     { id: 'mcp-key' as Tab, label: 'MCP Key', icon: Key, adminOnly: false },
     { id: 'memory' as Tab, label: 'Memory', icon: Database, adminOnly: true },
+    { id: 'llm' as Tab, label: 'LLM', icon: Brain, adminOnly: true },
     { id: 'speech' as Tab, label: 'Speech', icon: Mic, adminOnly: true },
     { id: 'conversations' as Tab, label: 'Conversations', icon: MessageSquare, adminOnly: true },
-    { id: 'other' as Tab, label: 'Other', icon: Settings2, adminOnly: true },
   ]
 
   return (
@@ -378,77 +492,335 @@ export default function Settings() {
               <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                 Core Infrastructure
               </h2>
-              <button
-                onClick={loadInfrastructureStatus}
-                disabled={infraLoading}
-                className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-              >
-                <RefreshCw className={`h-4 w-4 ${infraLoading ? 'animate-spin' : ''}`} />
-              </button>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={loadInfrastructureStatus}
+                  disabled={infraLoading}
+                  className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 p-2"
+                  title="Refresh connection status"
+                >
+                  <RefreshCw className={`h-4 w-4 ${infraLoading ? 'animate-spin' : ''}`} />
+                </button>
+              </div>
             </div>
 
-            {infraLoading && !infraStatus ? (
+            {infraSettingsLoading && !infraSettings ? (
               <div className="text-center py-8">
                 <RefreshCw className="h-8 w-8 text-gray-400 animate-spin mx-auto mb-4" />
-                <p className="text-gray-500 dark:text-gray-400">Loading infrastructure status...</p>
+                <p className="text-gray-500 dark:text-gray-400">Loading infrastructure settings...</p>
               </div>
-            ) : infraStatus ? (
-              <div className="space-y-4">
-                {Object.entries(infraStatus).map(([service, info]: [string, any]) => (
-                  <div
-                    key={service}
-                    className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600"
-                  >
-                    <div className="flex items-start justify-between mb-2">
-                      <h3 className="font-medium text-gray-900 dark:text-gray-100 capitalize">
-                        {service}
-                      </h3>
+            ) : infraSettings ? (
+              <div className="space-y-6">
+                {/* MongoDB */}
+                <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+                  <div className="flex items-start justify-between mb-3">
+                    <h3 className="font-medium text-gray-900 dark:text-gray-100">MongoDB</h3>
+                    {infraStatus?.mongodb && (
                       <span
                         className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                          info.connected
+                          infraStatus.mongodb.connected
                             ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
                             : 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400'
                         }`}
                       >
-                        {info.connected ? 'Connected' : 'Disconnected'}
+                        {infraStatus.mongodb.connected ? 'Connected' : 'Disconnected'}
                       </span>
+                    )}
+                  </div>
+                  <div className="space-y-3">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        MongoDB URI
+                      </label>
+                      <input
+                        type="text"
+                        value={infraSettings.mongodb_uri || ''}
+                        onChange={(e) => setInfraSettings({ ...infraSettings, mongodb_uri: e.target.value })}
+                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                        placeholder="mongodb://mongo:27017"
+                      />
                     </div>
-                    <div className="space-y-1 text-sm text-gray-600 dark:text-gray-400">
-                      {info.url && (
-                        <p>
-                          <span className="font-medium">URL:</span>{' '}
-                          <code className="text-xs bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded">
-                            {info.url}
-                          </code>
-                        </p>
-                      )}
-                      {info.host && (
-                        <p>
-                          <span className="font-medium">Host:</span> {info.host}
-                        </p>
-                      )}
-                      {info.database && (
-                        <p>
-                          <span className="font-medium">Database:</span> {info.database}
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        Database Name
+                      </label>
+                      <input
+                        type="text"
+                        value={infraSettings.mongodb_database || ''}
+                        onChange={(e) => setInfraSettings({ ...infraSettings, mongodb_database: e.target.value })}
+                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                        placeholder="friend-lite"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Redis */}
+                <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+                  <div className="flex items-start justify-between mb-3">
+                    <h3 className="font-medium text-gray-900 dark:text-gray-100">Redis</h3>
+                    {infraStatus?.redis && (
+                      <span
+                        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                          infraStatus.redis.connected
+                            ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
+                            : 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400'
+                        }`}
+                      >
+                        {infraStatus.redis.connected ? 'Connected' : 'Disconnected'}
+                      </span>
+                    )}
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Redis URL
+                    </label>
+                    <input
+                      type="text"
+                      value={infraSettings.redis_url || ''}
+                      onChange={(e) => setInfraSettings({ ...infraSettings, redis_url: e.target.value })}
+                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                      placeholder="redis://localhost:6379/0"
+                    />
+                  </div>
+                </div>
+
+                {/* Qdrant */}
+                <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+                  <div className="flex items-start justify-between mb-3">
+                    <h3 className="font-medium text-gray-900 dark:text-gray-100">Qdrant</h3>
+                    {infraStatus?.qdrant && (
+                      <span
+                        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                          infraStatus.qdrant.connected
+                            ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
+                            : 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400'
+                        }`}
+                      >
+                        {infraStatus.qdrant.connected ? 'Connected' : 'Disconnected'}
+                      </span>
+                    )}
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        Base URL
+                      </label>
+                      <input
+                        type="text"
+                        value={infraSettings.qdrant_base_url || ''}
+                        onChange={(e) => setInfraSettings({ ...infraSettings, qdrant_base_url: e.target.value })}
+                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                        placeholder="qdrant"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        Port
+                      </label>
+                      <input
+                        type="text"
+                        value={infraSettings.qdrant_port || ''}
+                        onChange={(e) => setInfraSettings({ ...infraSettings, qdrant_port: e.target.value })}
+                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                        placeholder="6333"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Neo4j */}
+                <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+                  <div className="flex items-start justify-between mb-3">
+                    <h3 className="font-medium text-gray-900 dark:text-gray-100">Neo4j</h3>
+                    {infraStatus?.neo4j && (
+                      <span
+                        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                          infraStatus.neo4j.connected
+                            ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
+                            : 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400'
+                        }`}
+                      >
+                        {infraStatus.neo4j.connected ? 'Connected' : 'Disconnected'}
+                      </span>
+                    )}
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        Host
+                      </label>
+                      <input
+                        type="text"
+                        value={infraSettings.neo4j_host || ''}
+                        onChange={(e) => setInfraSettings({ ...infraSettings, neo4j_host: e.target.value })}
+                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                        placeholder="neo4j-mem0"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        User
+                      </label>
+                      <input
+                        type="text"
+                        value={infraSettings.neo4j_user || ''}
+                        onChange={(e) => setInfraSettings({ ...infraSettings, neo4j_user: e.target.value })}
+                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                        placeholder="neo4j"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Network Settings */}
+                {appSettings && (
+                  <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+                    <h3 className="font-medium text-gray-900 dark:text-gray-100 mb-3">Network & Public Access</h3>
+                    <div className="space-y-3">
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                          Host IP/Hostname
+                        </label>
+                        <input
+                          type="text"
+                          value={appSettings.network.host_ip || ''}
+                          onChange={(e) => setAppSettings({
+                            ...appSettings,
+                            network: { ...appSettings.network, host_ip: e.target.value }
+                          })}
+                          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                          placeholder="localhost"
+                        />
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                          Public IP or hostname for browser access
                         </p>
-                      )}
-                      {info.user && (
-                        <p>
-                          <span className="font-medium">User:</span> {info.user}
+                      </div>
+                      <div className="grid grid-cols-2 gap-3">
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                            Backend Public Port
+                          </label>
+                          <input
+                            type="number"
+                            value={appSettings.network.backend_public_port || ''}
+                            onChange={(e) => setAppSettings({
+                              ...appSettings,
+                              network: { ...appSettings.network, backend_public_port: parseInt(e.target.value) }
+                            })}
+                            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                            placeholder="8000"
+                          />
+                        </div>
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                            WebUI Port
+                          </label>
+                          <input
+                            type="number"
+                            value={appSettings.network.webui_port || ''}
+                            onChange={(e) => setAppSettings({
+                              ...appSettings,
+                              network: { ...appSettings.network, webui_port: parseInt(e.target.value) }
+                            })}
+                            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                            placeholder="5173"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* System Settings */}
+                {appSettings && (
+                  <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+                    <h3 className="font-medium text-gray-900 dark:text-gray-100 mb-3">System</h3>
+                    <div className="space-y-3">
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                          Debug Directory
+                        </label>
+                        <input
+                          type="text"
+                          value={appSettings.misc.debug_dir || ''}
+                          onChange={(e) => setAppSettings({
+                            ...appSettings,
+                            misc: { ...appSettings.misc, debug_dir: e.target.value }
+                          })}
+                          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                          placeholder="./data/debug_dir"
+                        />
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                          Directory for debug files
                         </p>
-                      )}
+                      </div>
+                      <div className="flex items-center">
+                        <input
+                          type="checkbox"
+                          id="langfuse_telemetry"
+                          checked={appSettings.misc.langfuse_enable_telemetry || false}
+                          onChange={(e) => setAppSettings({
+                            ...appSettings,
+                            misc: { ...appSettings.misc, langfuse_enable_telemetry: e.target.checked }
+                          })}
+                          className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                        />
+                        <label htmlFor="langfuse_telemetry" className="ml-2 block text-sm text-gray-700 dark:text-gray-300">
+                          Enable Langfuse Telemetry
+                        </label>
+                      </div>
                     </div>
                   </div>
-                ))}
+                )}
+
+                {/* Save and Reset buttons */}
+                <div className="flex justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-600">
+                  <button
+                    onClick={() => {
+                      resetInfrastructureSettings()
+                      if (appSettings) {
+                        loadApplicationSettings()
+                      }
+                    }}
+                    disabled={infraSettingsSaving || appSettingsLoading}
+                    className="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    Reset
+                  </button>
+                  <button
+                    onClick={async () => {
+                      await saveInfrastructureSettings()
+                      if (appSettings) {
+                        await updateCategorySettings('network', appSettings.network)
+                        await updateCategorySettings('misc', appSettings.misc)
+                      }
+                    }}
+                    disabled={infraSettingsSaving || appSettingsLoading}
+                    className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                  >
+                    {infraSettingsSaving || appSettingsLoading ? (
+                      <>
+                        <RefreshCw className="h-4 w-4 animate-spin" />
+                        Saving...
+                      </>
+                    ) : (
+                      <>
+                        <Save className="h-4 w-4" />
+                        Save Settings
+                      </>
+                    )}
+                  </button>
+                </div>
               </div>
             ) : (
               <div className="text-center py-8">
                 <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
                 <p className="text-gray-500 dark:text-gray-400 mb-4">
-                  Failed to load infrastructure status
+                  Failed to load infrastructure settings
                 </p>
                 <button
-                  onClick={loadInfrastructureStatus}
+                  onClick={loadInfrastructureSettings}
                   className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                 >
                   Retry
@@ -467,47 +839,316 @@ export default function Settings() {
 
             <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
               <p className="text-sm text-blue-800 dark:text-blue-300">
-                <strong>Note:</strong> API keys are configured via environment variables and require
-                a server restart to change. This page shows which keys are currently configured.
+                <strong>Note:</strong> API keys are stored securely and take effect immediately after saving.
+                Leave fields empty to keep existing keys unchanged.
               </p>
             </div>
 
-            {apiKeysLoading ? (
+            {/* Load from File Section */}
+            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-600 mb-6">
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+                Load API Keys from File
+              </h3>
+              <div className="flex gap-3">
+                <input
+                  type="text"
+                  value={apiKeysFilePath}
+                  onChange={(e) => setApiKeysFilePath(e.target.value)}
+                  className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono text-sm"
+                  placeholder=".env.api-keys"
+                />
+                <button
+                  onClick={loadApiKeysFromFile}
+                  disabled={loadingFromFile || !apiKeysFilePath}
+                  className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                >
+                  {loadingFromFile ? (
+                    <>
+                      <RefreshCw className="h-4 w-4 animate-spin" />
+                      Loading...
+                    </>
+                  ) : (
+                    <>
+                      <RefreshCw className="h-4 w-4" />
+                      Load from File
+                    </>
+                  )}
+                </button>
+              </div>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                Load API keys from a file on the server. Default: .env.api-keys in project root.
+              </p>
+            </div>
+
+            {apiKeysSettingsLoading && !apiKeysSettings ? (
               <div className="text-center py-8">
                 <RefreshCw className="h-8 w-8 text-gray-400 animate-spin mx-auto mb-4" />
-                <p className="text-gray-500 dark:text-gray-400">Loading API keys status...</p>
+                <p className="text-gray-500 dark:text-gray-400">Loading API keys...</p>
               </div>
-            ) : apiKeysStatus ? (
-              <div className="space-y-3">
-                {Object.entries(apiKeysStatus).map(([key, info]: [string, any]) => (
-                  <div
-                    key={key}
-                    className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600"
-                  >
+            ) : apiKeysSettings ? (
+              <div className="space-y-6">
+                {/* OpenAI */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    OpenAI API Key
+                  </label>
+                  <div className="relative">
+                    <input
+                      type={showApiKeys.openai_api_key ? 'text' : 'password'}
+                      value={apiKeysSettings.openai_api_key || ''}
+                      onChange={(e) => setApiKeysSettings({ ...apiKeysSettings, openai_api_key: e.target.value })}
+                      className="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono text-sm"
+                      placeholder="sk-..."
+                    />
+                    <button
+                      type="button"
+                      onClick={() => toggleApiKeyVisibility('openai_api_key')}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                      title={showApiKeys.openai_api_key ? 'Hide API key' : 'Show API key'}
+                    >
+                      {showApiKeys.openai_api_key ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                    </button>
+                  </div>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    For GPT models and embeddings
+                  </p>
+                </div>
+
+                {/* Deepgram */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Deepgram API Key
+                  </label>
+                  <div className="relative">
+                    <input
+                      type={showApiKeys.deepgram_api_key ? 'text' : 'password'}
+                      value={apiKeysSettings.deepgram_api_key || ''}
+                      onChange={(e) => setApiKeysSettings({ ...apiKeysSettings, deepgram_api_key: e.target.value })}
+                      className="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono text-sm"
+                      placeholder="Enter Deepgram API key"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => toggleApiKeyVisibility('deepgram_api_key')}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                      title={showApiKeys.deepgram_api_key ? 'Hide API key' : 'Show API key'}
+                    >
+                      {showApiKeys.deepgram_api_key ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                    </button>
+                  </div>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    For speech-to-text transcription
+                  </p>
+                </div>
+
+                {/* Mistral */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Mistral API Key
+                  </label>
+                  <div className="relative">
+                    <input
+                      type={showApiKeys.mistral_api_key ? 'text' : 'password'}
+                      value={apiKeysSettings.mistral_api_key || ''}
+                      onChange={(e) => setApiKeysSettings({ ...apiKeysSettings, mistral_api_key: e.target.value })}
+                      className="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono text-sm"
+                      placeholder="Enter Mistral API key"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => toggleApiKeyVisibility('mistral_api_key')}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                      title={showApiKeys.mistral_api_key ? 'Hide API key' : 'Show API key'}
+                    >
+                      {showApiKeys.mistral_api_key ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                    </button>
+                  </div>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    For Mistral/Voxtral transcription
+                  </p>
+                </div>
+
+                {/* HuggingFace */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    HuggingFace Token
+                  </label>
+                  <div className="relative">
+                    <input
+                      type={showApiKeys.hf_token ? 'text' : 'password'}
+                      value={apiKeysSettings.hf_token || ''}
+                      onChange={(e) => setApiKeysSettings({ ...apiKeysSettings, hf_token: e.target.value })}
+                      className="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono text-sm"
+                      placeholder="hf_..."
+                    />
+                    <button
+                      type="button"
+                      onClick={() => toggleApiKeyVisibility('hf_token')}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                      title={showApiKeys.hf_token ? 'Hide API key' : 'Show API key'}
+                    >
+                      {showApiKeys.hf_token ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                    </button>
+                  </div>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    For accessing HuggingFace models
+                  </p>
+                </div>
+
+                {/* Langfuse */}
+                <div>
+                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 mt-6">
+                    Langfuse (Observability)
+                  </h3>
+                  <div className="space-y-3">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        Public Key
+                      </label>
+                      <div className="relative">
+                        <input
+                          type={showApiKeys.langfuse_public_key ? 'text' : 'password'}
+                          value={apiKeysSettings.langfuse_public_key || ''}
+                          onChange={(e) => setApiKeysSettings({ ...apiKeysSettings, langfuse_public_key: e.target.value })}
+                          className="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono text-sm"
+                          placeholder="pk-lf-..."
+                        />
+                        <button
+                          type="button"
+                          onClick={() => toggleApiKeyVisibility('langfuse_public_key')}
+                          className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                          title={showApiKeys.langfuse_public_key ? 'Hide API key' : 'Show API key'}
+                        >
+                          {showApiKeys.langfuse_public_key ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                        </button>
+                      </div>
+                    </div>
                     <div>
-                      <h3 className="font-medium text-gray-900 dark:text-gray-100">{info.name}</h3>
-                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                        <code className="bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded">
-                          {info.env_var}
-                        </code>
-                      </p>
+                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        Secret Key
+                      </label>
+                      <div className="relative">
+                        <input
+                          type={showApiKeys.langfuse_secret_key ? 'text' : 'password'}
+                          value={apiKeysSettings.langfuse_secret_key || ''}
+                          onChange={(e) => setApiKeysSettings({ ...apiKeysSettings, langfuse_secret_key: e.target.value })}
+                          className="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono text-sm"
+                          placeholder="sk-lf-..."
+                        />
+                        <button
+                          type="button"
+                          onClick={() => toggleApiKeyVisibility('langfuse_secret_key')}
+                          className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                          title={showApiKeys.langfuse_secret_key ? 'Hide API key' : 'Show API key'}
+                        >
+                          {showApiKeys.langfuse_secret_key ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                        </button>
+                      </div>
                     </div>
-                    <span
-                      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                        info.configured
-                          ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
-                          : 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400'
-                      }`}
+                  </div>
+                </div>
+
+                {/* Ngrok */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Ngrok Auth Token
+                  </label>
+                  <div className="relative">
+                    <input
+                      type={showApiKeys.ngrok_authtoken ? 'text' : 'password'}
+                      value={apiKeysSettings.ngrok_authtoken || ''}
+                      onChange={(e) => setApiKeysSettings({ ...apiKeysSettings, ngrok_authtoken: e.target.value })}
+                      className="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono text-sm"
+                      placeholder="Enter Ngrok auth token"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => toggleApiKeyVisibility('ngrok_authtoken')}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                      title={showApiKeys.ngrok_authtoken ? 'Hide API key' : 'Show API key'}
                     >
-                      {info.configured ? 'Configured' : 'Not Set'}
-                    </span>
+                      {showApiKeys.ngrok_authtoken ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                    </button>
                   </div>
-                ))}
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    For public URL tunneling
+                  </p>
+                </div>
+
+                {/* Save Options */}
+                <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
+                  <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+                    Save Options
+                  </h4>
+                  <div className="space-y-2">
+                    <label className="flex items-center gap-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={saveToFile}
+                        onChange={(e) => setSaveToFile(e.target.checked)}
+                        className="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+                      />
+                      <span className="text-sm text-gray-700 dark:text-gray-300">
+                        Save to .env.api-keys file
+                      </span>
+                    </label>
+                    <label className="flex items-center gap-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={saveToDatabase}
+                        onChange={(e) => setSaveToDatabase(e.target.checked)}
+                        className="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+                      />
+                      <span className="text-sm text-gray-700 dark:text-gray-300">
+                        Save to database
+                      </span>
+                    </label>
+                  </div>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                    You can save to file only, database only, or both for redundancy.
+                  </p>
+                </div>
+
+                {/* Save and Reset buttons */}
+                <div className="flex justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-600">
+                  <button
+                    onClick={resetApiKeysSettings}
+                    disabled={apiKeysSettingsSaving}
+                    className="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    Reset
+                  </button>
+                  <button
+                    onClick={saveApiKeysSettings}
+                    disabled={apiKeysSettingsSaving || (!saveToFile && !saveToDatabase)}
+                    className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                  >
+                    {apiKeysSettingsSaving ? (
+                      <>
+                        <RefreshCw className="h-4 w-4 animate-spin" />
+                        Saving...
+                      </>
+                    ) : (
+                      <>
+                        <Save className="h-4 w-4" />
+                        Save API Keys
+                      </>
+                    )}
+                  </button>
+                </div>
               </div>
             ) : (
               <div className="text-center py-8">
                 <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
-                <p className="text-gray-500 dark:text-gray-400">Failed to load API keys status</p>
+                <p className="text-gray-500 dark:text-gray-400 mb-4">
+                  Failed to load API keys
+                </p>
+                <button
+                  onClick={loadApiKeysSettings}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  Retry
+                </button>
               </div>
             )}
           </div>
@@ -644,16 +1285,40 @@ export default function Settings() {
         {/* Speech Settings */}
         {activeTab === 'speech' && appSettings && (
           <div>
-            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">
               Speech & Audio Settings
             </h2>
 
             <div className="space-y-6">
-              <div>
-                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+              {/* Transcription */}
+              <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+                <h3 className="text-base font-medium text-gray-900 dark:text-gray-100 mb-4">
+                  Transcription
+                </h3>
+                <div className="pl-4 border-l-2 border-blue-200 dark:border-blue-800">
+                  {renderSettingsField(
+                    'providers',
+                    'transcription_provider',
+                    appSettings.providers.transcription_provider,
+                    'Transcription Service',
+                    'Choose which service to use for speech-to-text',
+                    'select',
+                    [
+                      { value: 'auto', label: 'Auto-detect' },
+                      { value: 'deepgram', label: 'Deepgram' },
+                      { value: 'mistral', label: 'Mistral' },
+                      { value: 'parakeet', label: 'Parakeet (Local)' },
+                    ]
+                  )}
+                </div>
+              </div>
+
+              {/* Speech Detection */}
+              <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+                <h3 className="text-base font-medium text-gray-900 dark:text-gray-100 mb-4">
                   Speech Detection
                 </h3>
-                <div className="space-y-2">
+                <div className="pl-4 border-l-2 border-blue-200 dark:border-blue-800 space-y-2">
                   {renderSettingsField(
                     'speech_detection',
                     'min_words',
@@ -681,11 +1346,49 @@ export default function Settings() {
                 </div>
               </div>
 
-              <div>
-                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+              {/* Diarization */}
+              <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+                <h3 className="text-base font-medium text-gray-900 dark:text-gray-100 mb-4">
+                  Speaker Diarization
+                </h3>
+                <div className="pl-4 border-l-2 border-blue-200 dark:border-blue-800 space-y-2">
+                  {renderSettingsField(
+                    'diarization',
+                    'diarization_source',
+                    appSettings.diarization.diarization_source,
+                    'Diarization Source',
+                    'Service to use for speaker identification',
+                    'select',
+                    [
+                      { value: 'pyannote', label: 'PyAnnote' },
+                      { value: 'deepgram', label: 'Deepgram' },
+                    ]
+                  )}
+                  {renderSettingsField(
+                    'diarization',
+                    'min_speakers',
+                    appSettings.diarization.min_speakers,
+                    'Minimum Speakers',
+                    'Minimum number of speakers to detect',
+                    'number'
+                  )}
+                  {renderSettingsField(
+                    'diarization',
+                    'max_speakers',
+                    appSettings.diarization.max_speakers,
+                    'Maximum Speakers',
+                    'Maximum number of speakers to detect',
+                    'number'
+                  )}
+                </div>
+              </div>
+
+              {/* Audio Processing */}
+              <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+                <h3 className="text-base font-medium text-gray-900 dark:text-gray-100 mb-4">
                   Audio Processing
                 </h3>
-                <div className="space-y-2">
+                <div className="pl-4 border-l-2 border-blue-200 dark:border-blue-800 space-y-2">
                   {renderSettingsField(
                     'audio_processing',
                     'audio_cropping_enabled',
@@ -712,34 +1415,15 @@ export default function Settings() {
                   )}
                 </div>
               </div>
-
-              <div>
-                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
-                  Transcription Provider
-                </h3>
-                {renderSettingsField(
-                  'providers',
-                  'transcription_provider',
-                  appSettings.providers.transcription_provider,
-                  'Transcription Service',
-                  'Choose which service to use for speech-to-text',
-                  'select',
-                  [
-                    { value: 'auto', label: 'Auto-detect' },
-                    { value: 'deepgram', label: 'Deepgram' },
-                    { value: 'mistral', label: 'Mistral' },
-                    { value: 'parakeet', label: 'Parakeet (Local)' },
-                  ]
-                )}
-              </div>
             </div>
 
-            <div className="mt-6 flex space-x-3">
+            <div className="mt-6 flex justify-end">
               <button
                 onClick={async () => {
+                  await updateCategorySettings('providers', appSettings.providers)
                   await updateCategorySettings('speech_detection', appSettings.speech_detection)
+                  await updateCategorySettings('diarization', appSettings.diarization)
                   await updateCategorySettings('audio_processing', appSettings.audio_processing)
-                  await updateCategorySettings('providers', appSettings.providers)
                 }}
                 disabled={appSettingsLoading}
                 className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
@@ -806,53 +1490,18 @@ export default function Settings() {
           </div>
         )}
 
-        {/* Other Settings */}
-        {activeTab === 'other' && appSettings && (
+        {/* LLM Settings */}
+        {activeTab === 'llm' && appSettings && (
           <div>
             <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
-              Other Settings
+              LLM Configuration
             </h2>
 
             <div className="space-y-6">
+              {/* Provider Selection */}
               <div>
-                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
-                  Speaker Diarization
-                </h3>
-                <div className="space-y-2">
-                  {renderSettingsField(
-                    'diarization',
-                    'diarization_source',
-                    appSettings.diarization.diarization_source,
-                    'Diarization Source',
-                    'Service to use for speaker identification',
-                    'select',
-                    [
-                      { value: 'pyannote', label: 'PyAnnote' },
-                      { value: 'deepgram', label: 'Deepgram' },
-                    ]
-                  )}
-                  {renderSettingsField(
-                    'diarization',
-                    'min_speakers',
-                    appSettings.diarization.min_speakers,
-                    'Minimum Speakers',
-                    'Minimum number of speakers to detect',
-                    'number'
-                  )}
-                  {renderSettingsField(
-                    'diarization',
-                    'max_speakers',
-                    appSettings.diarization.max_speakers,
-                    'Maximum Speakers',
-                    'Maximum number of speakers to detect',
-                    'number'
-                  )}
-                </div>
-              </div>
-
-              <div>
-                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
-                  LLM Configuration
+                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 border-b border-gray-200 dark:border-gray-600 pb-2">
+                  Provider
                 </h3>
                 <div className="space-y-2">
                   {renderSettingsField(
@@ -860,85 +1509,96 @@ export default function Settings() {
                     'llm_provider',
                     appSettings.llm.llm_provider,
                     'LLM Provider',
-                    'Language model provider for memory extraction',
+                    'Language model provider for memory extraction and chat',
                     'select',
                     [
                       { value: 'openai', label: 'OpenAI' },
                       { value: 'ollama', label: 'Ollama' },
                     ]
                   )}
-                  {renderSettingsField(
-                    'llm',
-                    'openai_model',
-                    appSettings.llm.openai_model,
-                    'OpenAI Model',
-                    'Model to use for OpenAI requests',
-                    'text'
-                  )}
-                  {renderSettingsField(
-                    'llm',
-                    'chat_temperature',
-                    appSettings.llm.chat_temperature,
-                    'Chat Temperature',
-                    'Temperature for chat responses (0.0-2.0)',
-                    'number'
-                  )}
                 </div>
               </div>
 
-              <div>
-                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
-                  Network & System
-                </h3>
-                <div className="space-y-2">
-                  {renderSettingsField(
-                    'network',
-                    'host_ip',
-                    appSettings.network.host_ip,
-                    'Host IP',
-                    'Public IP or hostname for browser access',
-                    'text'
-                  )}
-                  {renderSettingsField(
-                    'network',
-                    'backend_public_port',
-                    appSettings.network.backend_public_port,
-                    'Backend Port',
-                    'Public port for backend API',
-                    'number'
-                  )}
-                  {renderSettingsField(
-                    'misc',
-                    'langfuse_enable_telemetry',
-                    appSettings.misc.langfuse_enable_telemetry,
-                    'Enable Langfuse Telemetry',
-                    'Enable telemetry for Langfuse',
-                    'boolean'
-                  )}
+              {/* OpenAI Settings */}
+              {appSettings.llm.llm_provider === 'openai' && (
+                <div>
+                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 border-b border-gray-200 dark:border-gray-600 pb-2">
+                    OpenAI Settings
+                  </h3>
+                  <div className="space-y-2">
+                    {renderSettingsField(
+                      'llm',
+                      'openai_model',
+                      appSettings.llm.openai_model,
+                      'OpenAI Model',
+                      'Model to use for general tasks',
+                      'text'
+                    )}
+                    {renderSettingsField(
+                      'llm',
+                      'chat_llm_model',
+                      appSettings.llm.chat_llm_model || '',
+                      'Chat Model (Optional)',
+                      'Specific model for chat (defaults to OpenAI model if not set)',
+                      'text'
+                    )}
+                    {renderSettingsField(
+                      'llm',
+                      'chat_temperature',
+                      appSettings.llm.chat_temperature,
+                      'Chat Temperature',
+                      'Temperature for chat responses (0.0-2.0)',
+                      'number'
+                    )}
+                  </div>
                 </div>
-              </div>
+              )}
+
+              {/* Ollama Settings */}
+              {appSettings.llm.llm_provider === 'ollama' && (
+                <div>
+                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 border-b border-gray-200 dark:border-gray-600 pb-2">
+                    Ollama Settings
+                  </h3>
+                  <div className="space-y-2">
+                    {renderSettingsField(
+                      'llm',
+                      'ollama_model',
+                      appSettings.llm.ollama_model || '',
+                      'Ollama Model',
+                      'Model name for Ollama',
+                      'text'
+                    )}
+                    {renderSettingsField(
+                      'llm',
+                      'ollama_embedder_model',
+                      appSettings.llm.ollama_embedder_model || '',
+                      'Ollama Embedder Model',
+                      'Embedder model name for Ollama',
+                      'text'
+                    )}
+                  </div>
+                </div>
+              )}
             </div>
 
             <div className="mt-6 flex space-x-3">
               <button
                 onClick={async () => {
-                  await updateCategorySettings('diarization', appSettings.diarization)
                   await updateCategorySettings('llm', appSettings.llm)
-                  await updateCategorySettings('network', appSettings.network)
-                  await updateCategorySettings('misc', appSettings.misc)
                 }}
                 disabled={appSettingsLoading}
                 className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
               >
                 <Save className="h-4 w-4" />
-                <span>Save Other Settings</span>
+                <span>Save LLM Settings</span>
               </button>
             </div>
           </div>
         )}
 
         {/* Loading state for settings tabs */}
-        {['memory', 'speech', 'conversations', 'other'].includes(activeTab) &&
+        {['memory', 'llm', 'speech', 'conversations'].includes(activeTab) &&
           appSettingsLoading &&
           !appSettings && (
             <div className="text-center py-12">
diff --git a/backends/advanced/webui/src/services/api.ts b/backends/advanced/webui/src/services/api.ts
index 0c246d53..4ee895db 100644
--- a/backends/advanced/webui/src/services/api.ts
+++ b/backends/advanced/webui/src/services/api.ts
@@ -303,9 +303,23 @@ export const settingsApi = {
   getNetwork: () => api.get('/api/settings/network'),
   updateNetwork: (settings: any) => api.put('/api/settings/network', settings),
 
+  getInfrastructure: () => api.get('/api/settings/infrastructure'),
+  updateInfrastructure: (settings: any) => api.put('/api/settings/infrastructure', settings),
+
   getMisc: () => api.get('/api/settings/misc'),
   updateMisc: (settings: any) => api.put('/api/settings/misc', settings),
 
+  getApiKeys: () => api.get('/api/settings/api-keys'),
+  updateApiKeys: (settings: any) => api.put('/api/settings/api-keys', settings),
+  saveApiKeys: (settings: any, saveToFile: boolean = true, saveToDatabase: boolean = true) =>
+    api.post('/api/settings/api-keys/save', settings, {
+      params: { save_to_file: saveToFile, save_to_database: saveToDatabase }
+    }),
+  loadApiKeysFromFile: (filePath: string = '.env.api-keys') =>
+    api.get('/api/settings/api-keys/load-from-file', {
+      params: { file_path: filePath }
+    }),
+
   // Cache management
   invalidateCache: (category?: string) => api.post('/api/settings/cache/invalidate', null, {
     params: category ? { category } : {}

From d8b360da8af9ec30d3e040e0cb092f9a044639d6 Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Fri, 5 Dec 2025 00:48:43 +0000
Subject: [PATCH 05/17] Changed name to chronicle

# Conflicts:
#	README-K8S.md
#	backends/advanced/src/advanced_omi_backend/auth.py
#	backends/advanced/src/advanced_omi_backend/services/mycelia_sync.py
#	backends/advanced/webui/package-lock.json
#	backends/advanced/webui/package.json
#	quickstart.md
#	tests/infrastructure/infra_tests.robot
#	tests/integration/websocket_streaming_tests.robot

# Conflicts:
#	README.md
#	app/app.json
#	backends/advanced/src/advanced_omi_backend/app_config.py
#	backends/advanced/src/advanced_omi_backend/auth.py
#	backends/advanced/src/advanced_omi_backend/controllers/system_controller.py
#	backends/advanced/src/advanced_omi_backend/database.py
#	backends/advanced/src/advanced_omi_backend/models/job.py
#	backends/advanced/src/advanced_omi_backend/routers/modules/health_routes.py
#	backends/advanced/src/advanced_omi_backend/services/memory/config.py
#	backends/advanced/src/advanced_omi_backend/services/memory/service_factory.py
#	backends/advanced/src/advanced_omi_backend/services/mycelia_sync.py
#	backends/advanced/webui/src/pages/System.tsx
#	tests/infrastructure/infra_tests.robot
#	tests/resources/transcript_verification.robot
#	tests/setup/test_env.py
---
 app/app.json                              | 10 +++++-----
 app/app/components/DeviceDetails.tsx      |  2 +-
 app/app/components/DeviceListItem.tsx     |  2 +-
 app/app/hooks/useAudioListener.ts         |  2 +-
 app/app/hooks/useDeviceConnection.ts      |  2 +-
 app/app/hooks/useDeviceScanning.ts        |  2 +-
 app/app/index.tsx                         |  4 ++--
 app/package.json                          |  4 ++--
 backends/advanced/webui/package-lock.json | 10 +---------
 backends/advanced/webui/package.json      |  2 +-
 10 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/app/app.json b/app/app.json
index 66fbb8c2..c2446e12 100644
--- a/app/app.json
+++ b/app/app.json
@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "friend-lite-app",
-    "slug": "friend-lite-app",
+    "name": "chronicle-app",
+    "slug": "chronicle-app",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -17,9 +17,9 @@
     ],
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.cupbearer5517.friendlite",
+      "bundleIdentifier": "com.cupbearer5517.chronicle",
       "infoPlist": {
-        "NSMicrophoneUsageDescription": "Friend Lite needs access to your microphone to stream audio to the backend for processing."
+        "NSMicrophoneUsageDescription": "Chronicle needs access to your microphone to stream audio to the backend for processing."
       }
     },
     "android": {
@@ -27,7 +27,7 @@
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "package": "com.cupbearer5517.friendlite",
+      "package": "com.cupbearer5517.chronicle",
       "permissions": [
         "android.permission.BLUETOOTH",
         "android.permission.BLUETOOTH_ADMIN",
diff --git a/app/app/components/DeviceDetails.tsx b/app/app/components/DeviceDetails.tsx
index ebf204c3..3bd22b4a 100644
--- a/app/app/components/DeviceDetails.tsx
+++ b/app/app/components/DeviceDetails.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, TextInput } from 'react-native';
-import { BleAudioCodec } from 'friend-lite-react-native';
+import { BleAudioCodec } from 'chronicle-react-native';
 
 interface DeviceDetailsProps {
   // Device Info
diff --git a/app/app/components/DeviceListItem.tsx b/app/app/components/DeviceListItem.tsx
index a8083035..3da559de 100644
--- a/app/app/components/DeviceListItem.tsx
+++ b/app/app/components/DeviceListItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { OmiDevice } from 'friend-lite-react-native';
+import { OmiDevice } from 'chronicle-react-native';
 
 interface DeviceListItemProps {
   device: OmiDevice;
diff --git a/app/app/hooks/useAudioListener.ts b/app/app/hooks/useAudioListener.ts
index 391ed125..1dcf225e 100644
--- a/app/app/hooks/useAudioListener.ts
+++ b/app/app/hooks/useAudioListener.ts
@@ -1,6 +1,6 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { Alert } from 'react-native';
-import { OmiConnection } from 'friend-lite-react-native';
+import { OmiConnection } from 'chronicle-react-native';
 import { Subscription, ConnectionPriority } from 'react-native-ble-plx'; // OmiConnection might use this type for subscriptions
 
 interface UseAudioListener {
diff --git a/app/app/hooks/useDeviceConnection.ts b/app/app/hooks/useDeviceConnection.ts
index e729169e..964e4d4e 100644
--- a/app/app/hooks/useDeviceConnection.ts
+++ b/app/app/hooks/useDeviceConnection.ts
@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
 import { Alert } from 'react-native';
-import { OmiConnection, BleAudioCodec, OmiDevice } from 'friend-lite-react-native';
+import { OmiConnection, BleAudioCodec, OmiDevice } from 'chronicle-react-native';
 
 interface UseDeviceConnection {
   connectedDevice: OmiDevice | null;
diff --git a/app/app/hooks/useDeviceScanning.ts b/app/app/hooks/useDeviceScanning.ts
index d7780266..f4c16ff3 100644
--- a/app/app/hooks/useDeviceScanning.ts
+++ b/app/app/hooks/useDeviceScanning.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { BleManager, State as BluetoothState } from 'react-native-ble-plx';
-import { OmiConnection, OmiDevice } from 'friend-lite-react-native'; // Assuming this is the correct import for Omi types
+import { OmiConnection, OmiDevice } from 'chronicle-react-native'; // Assuming this is the correct import for Omi types
 
 interface UseDeviceScanning {
   devices: OmiDevice[];
diff --git a/app/app/index.tsx b/app/app/index.tsx
index 8bb1234a..2b20cb7b 100644
--- a/app/app/index.tsx
+++ b/app/app/index.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useCallback, useEffect, useState } from 'react';
 import { StyleSheet, Text, View, SafeAreaView, ScrollView, Platform, FlatList, ActivityIndicator, Alert, Switch, Button, TouchableOpacity, KeyboardAvoidingView } from 'react-native';
-import { OmiConnection } from 'friend-lite-react-native'; // OmiDevice also comes from here
+import { OmiConnection } from 'chronicle-react-native'; // OmiDevice also comes from here
 import { State as BluetoothState } from 'react-native-ble-plx'; // Import State from ble-plx
 
 // Hooks
@@ -521,7 +521,7 @@ export default function App() {
           contentContainerStyle={styles.content}
           keyboardShouldPersistTaps="handled"
         >
-          <Text style={styles.title}>Friend Lite</Text>
+          <Text style={styles.title}>Chronicle</Text>
 
           {/* Backend Connection - moved to top */}
           <BackendStatus
diff --git a/app/package.json b/app/package.json
index 91ab6690..8d6f686e 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "friend-lite-app",
+  "name": "chronicle-app",
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
@@ -19,7 +19,7 @@
     "expo-build-properties": "~0.14.8",
     "expo-dev-client": "~5.2.4",
     "expo-status-bar": "~2.2.3",
-    "friend-lite-react-native": "^1.0.2",
+    "chronicle-react-native": "^1.0.2",
     "install": "^0.13.0",
     "promise": "^8.3.0",
     "react": "19.0.0",
diff --git a/backends/advanced/webui/package-lock.json b/backends/advanced/webui/package-lock.json
index ead72812..5b800a48 100644
--- a/backends/advanced/webui/package-lock.json
+++ b/backends/advanced/webui/package-lock.json
@@ -20,7 +20,6 @@
       },
       "devDependencies": {
         "@types/d3": "^7.4.3",
-        "@types/frappe-gantt": "^0.9.0",
         "@types/react": "^18.2.43",
         "@types/react-dom": "^18.2.17",
         "@types/react-vertical-timeline-component": "^3.3.6",
@@ -32,7 +31,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.5",
         "postcss": "^8.4.32",
-        "sass-embedded": "^1.83.0",
+        "sass-embedded": "^1.80.7",
         "tailwindcss": "^3.3.0",
         "typescript": "^5.2.2",
         "vite": "^5.0.8"
@@ -1991,13 +1990,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/frappe-gantt": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@types/frappe-gantt/-/frappe-gantt-0.9.0.tgz",
-      "integrity": "sha512-n00ElvRvJ1/+HkJwt57yjnTtAM7FcH/pEV9LbRCy3+hR39TY6l0mQuy4o909uxvw97aCNhQjNh8J8xACKJ2G3w==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/geojson": {
       "version": "7946.0.16",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
diff --git a/backends/advanced/webui/package.json b/backends/advanced/webui/package.json
index b933d8db..250df867 100644
--- a/backends/advanced/webui/package.json
+++ b/backends/advanced/webui/package.json
@@ -34,7 +34,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.32",
-    "sass-embedded": "^1.83.0",
+    "sass-embedded": "^1.80.7",
     "tailwindcss": "^3.3.0",
     "typescript": "^5.2.2",
     "vite": "^5.0.8"

From e65097520b96a8103776f0fdf1bd789bd3f2474f Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Thu, 11 Dec 2025 14:18:28 +0000
Subject: [PATCH 06/17] changed mobile app package to friend-lite for the
 moment

---
 app/app.json                          | 10 +++++-----
 app/app/components/DeviceDetails.tsx  |  2 +-
 app/app/components/DeviceListItem.tsx |  2 +-
 app/app/hooks/useAudioListener.ts     |  2 +-
 app/app/hooks/useDeviceConnection.ts  |  2 +-
 app/app/hooks/useDeviceScanning.ts    |  2 +-
 app/app/index.tsx                     |  4 ++--
 app/package.json                      |  4 ++--
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/app.json b/app/app.json
index c2446e12..66fbb8c2 100644
--- a/app/app.json
+++ b/app/app.json
@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "chronicle-app",
-    "slug": "chronicle-app",
+    "name": "friend-lite-app",
+    "slug": "friend-lite-app",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -17,9 +17,9 @@
     ],
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.cupbearer5517.chronicle",
+      "bundleIdentifier": "com.cupbearer5517.friendlite",
       "infoPlist": {
-        "NSMicrophoneUsageDescription": "Chronicle needs access to your microphone to stream audio to the backend for processing."
+        "NSMicrophoneUsageDescription": "Friend Lite needs access to your microphone to stream audio to the backend for processing."
       }
     },
     "android": {
@@ -27,7 +27,7 @@
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "package": "com.cupbearer5517.chronicle",
+      "package": "com.cupbearer5517.friendlite",
       "permissions": [
         "android.permission.BLUETOOTH",
         "android.permission.BLUETOOTH_ADMIN",
diff --git a/app/app/components/DeviceDetails.tsx b/app/app/components/DeviceDetails.tsx
index 3bd22b4a..ebf204c3 100644
--- a/app/app/components/DeviceDetails.tsx
+++ b/app/app/components/DeviceDetails.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, TextInput } from 'react-native';
-import { BleAudioCodec } from 'chronicle-react-native';
+import { BleAudioCodec } from 'friend-lite-react-native';
 
 interface DeviceDetailsProps {
   // Device Info
diff --git a/app/app/components/DeviceListItem.tsx b/app/app/components/DeviceListItem.tsx
index 3da559de..a8083035 100644
--- a/app/app/components/DeviceListItem.tsx
+++ b/app/app/components/DeviceListItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { OmiDevice } from 'chronicle-react-native';
+import { OmiDevice } from 'friend-lite-react-native';
 
 interface DeviceListItemProps {
   device: OmiDevice;
diff --git a/app/app/hooks/useAudioListener.ts b/app/app/hooks/useAudioListener.ts
index 1dcf225e..391ed125 100644
--- a/app/app/hooks/useAudioListener.ts
+++ b/app/app/hooks/useAudioListener.ts
@@ -1,6 +1,6 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { Alert } from 'react-native';
-import { OmiConnection } from 'chronicle-react-native';
+import { OmiConnection } from 'friend-lite-react-native';
 import { Subscription, ConnectionPriority } from 'react-native-ble-plx'; // OmiConnection might use this type for subscriptions
 
 interface UseAudioListener {
diff --git a/app/app/hooks/useDeviceConnection.ts b/app/app/hooks/useDeviceConnection.ts
index 964e4d4e..e729169e 100644
--- a/app/app/hooks/useDeviceConnection.ts
+++ b/app/app/hooks/useDeviceConnection.ts
@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
 import { Alert } from 'react-native';
-import { OmiConnection, BleAudioCodec, OmiDevice } from 'chronicle-react-native';
+import { OmiConnection, BleAudioCodec, OmiDevice } from 'friend-lite-react-native';
 
 interface UseDeviceConnection {
   connectedDevice: OmiDevice | null;
diff --git a/app/app/hooks/useDeviceScanning.ts b/app/app/hooks/useDeviceScanning.ts
index f4c16ff3..d7780266 100644
--- a/app/app/hooks/useDeviceScanning.ts
+++ b/app/app/hooks/useDeviceScanning.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { BleManager, State as BluetoothState } from 'react-native-ble-plx';
-import { OmiConnection, OmiDevice } from 'chronicle-react-native'; // Assuming this is the correct import for Omi types
+import { OmiConnection, OmiDevice } from 'friend-lite-react-native'; // Assuming this is the correct import for Omi types
 
 interface UseDeviceScanning {
   devices: OmiDevice[];
diff --git a/app/app/index.tsx b/app/app/index.tsx
index 2b20cb7b..8bb1234a 100644
--- a/app/app/index.tsx
+++ b/app/app/index.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useCallback, useEffect, useState } from 'react';
 import { StyleSheet, Text, View, SafeAreaView, ScrollView, Platform, FlatList, ActivityIndicator, Alert, Switch, Button, TouchableOpacity, KeyboardAvoidingView } from 'react-native';
-import { OmiConnection } from 'chronicle-react-native'; // OmiDevice also comes from here
+import { OmiConnection } from 'friend-lite-react-native'; // OmiDevice also comes from here
 import { State as BluetoothState } from 'react-native-ble-plx'; // Import State from ble-plx
 
 // Hooks
@@ -521,7 +521,7 @@ export default function App() {
           contentContainerStyle={styles.content}
           keyboardShouldPersistTaps="handled"
         >
-          <Text style={styles.title}>Chronicle</Text>
+          <Text style={styles.title}>Friend Lite</Text>
 
           {/* Backend Connection - moved to top */}
           <BackendStatus
diff --git a/app/package.json b/app/package.json
index 8d6f686e..91ab6690 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "chronicle-app",
+  "name": "friend-lite-app",
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
@@ -19,7 +19,7 @@
     "expo-build-properties": "~0.14.8",
     "expo-dev-client": "~5.2.4",
     "expo-status-bar": "~2.2.3",
-    "chronicle-react-native": "^1.0.2",
+    "friend-lite-react-native": "^1.0.2",
     "install": "^0.13.0",
     "promise": "^8.3.0",
     "react": "19.0.0",

From 2e00ffb3f1fa970b3ad22df36de32551811700c0 Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Thu, 11 Dec 2025 15:13:37 +0000
Subject: [PATCH 07/17] rabbit aI fixes

---
 backends/advanced/webui/package-lock.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/backends/advanced/webui/package-lock.json b/backends/advanced/webui/package-lock.json
index 5b800a48..1090d0bb 100644
--- a/backends/advanced/webui/package-lock.json
+++ b/backends/advanced/webui/package-lock.json
@@ -20,6 +20,7 @@
       },
       "devDependencies": {
         "@types/d3": "^7.4.3",
+        "@types/frappe-gantt": "^0.9.0",
         "@types/react": "^18.2.43",
         "@types/react-dom": "^18.2.17",
         "@types/react-vertical-timeline-component": "^3.3.6",
@@ -1990,6 +1991,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/frappe-gantt": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@types/frappe-gantt/-/frappe-gantt-0.9.0.tgz",
+      "integrity": "sha512-n00ElvRvJ1/+HkJwt57yjnTtAM7FcH/pEV9LbRCy3+hR39TY6l0mQuy4o909uxvw97aCNhQjNh8J8xACKJ2G3w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/geojson": {
       "version": "7946.0.16",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",

From 98c3498ac8209be60a3ebc0febb19ffb21eda593 Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Mon, 17 Nov 2025 18:19:11 +0000
Subject: [PATCH 08/17] Added mcp server and auth/apikey

---
 .../src/advanced_omi_backend/app_factory.py   |   5 +
 .../src/advanced_omi_backend/models/user.py   |   5 +
 .../routers/modules/user_routes.py            |  45 +-
 .../services/mcp_server.py                    | 532 ++++++++++++++++++
 backends/advanced/webui/src/App.tsx           |   6 +
 .../webui/src/components/layout/Layout.tsx    |   3 +-
 .../webui/src/contexts/AuthContext.tsx        |   2 +
 backends/advanced/webui/src/services/api.ts   |  10 +-
 8 files changed, 600 insertions(+), 8 deletions(-)
 create mode 100644 backends/advanced/src/advanced_omi_backend/services/mcp_server.py

diff --git a/backends/advanced/src/advanced_omi_backend/app_factory.py b/backends/advanced/src/advanced_omi_backend/app_factory.py
index 1eba0df6..fdde55de 100644
--- a/backends/advanced/src/advanced_omi_backend/app_factory.py
+++ b/backends/advanced/src/advanced_omi_backend/app_factory.py
@@ -37,6 +37,7 @@
 from advanced_omi_backend.routers.modules.websocket_routes import router as websocket_router
 from advanced_omi_backend.services.audio_service import get_audio_stream_service
 from advanced_omi_backend.task_manager import init_task_manager, get_task_manager
+from advanced_omi_backend.services.mcp_server import setup_mcp_server
 
 logger = logging.getLogger(__name__)
 application_logger = logging.getLogger("audio_processing")
@@ -215,6 +216,10 @@ def create_app() -> FastAPI:
         tags=["users"],
     )
 
+    # Setup MCP server for conversation access
+    setup_mcp_server(app)
+    logger.info("MCP server configured for conversation access")
+
     # Mount static files LAST (mounts are catch-all patterns)
     CHUNK_DIR = Path("/app/audio_chunks")
     app.mount("/audio", StaticFiles(directory=CHUNK_DIR), name="audio")
diff --git a/backends/advanced/src/advanced_omi_backend/models/user.py b/backends/advanced/src/advanced_omi_backend/models/user.py
index b0ced195..7998c5b3 100644
--- a/backends/advanced/src/advanced_omi_backend/models/user.py
+++ b/backends/advanced/src/advanced_omi_backend/models/user.py
@@ -25,6 +25,8 @@ class UserRead(BaseUser[PydanticObjectId]):
     display_name: Optional[str] = None
     registered_clients: dict[str, dict] = Field(default_factory=dict)
     primary_speakers: list[dict] = Field(default_factory=list)
+    api_key: Optional[str] = None
+    api_key_created_at: Optional[datetime] = None
 
 
 class UserUpdate(BaseUserUpdate):
@@ -62,6 +64,9 @@ class User(BeanieBaseUser, Document):
     registered_clients: dict[str, dict] = Field(default_factory=dict)
     # Speaker processing filter configuration
     primary_speakers: list[dict] = Field(default_factory=list)
+    # API key for MCP access
+    api_key: Optional[str] = None
+    api_key_created_at: Optional[datetime] = None
 
     class Settings:
         name = "users"  # Collection name in MongoDB - standardized from "fastapi_users"
diff --git a/backends/advanced/src/advanced_omi_backend/routers/modules/user_routes.py b/backends/advanced/src/advanced_omi_backend/routers/modules/user_routes.py
index 12ed5c63..233ddd68 100644
--- a/backends/advanced/src/advanced_omi_backend/routers/modules/user_routes.py
+++ b/backends/advanced/src/advanced_omi_backend/routers/modules/user_routes.py
@@ -5,10 +5,12 @@
 """
 
 import logging
+import secrets
+from datetime import UTC, datetime
 
-from fastapi import APIRouter, Depends
+from fastapi import APIRouter, Depends, HTTPException
 
-from advanced_omi_backend.auth import current_superuser
+from advanced_omi_backend.auth import current_active_user, current_superuser
 from advanced_omi_backend.controllers import user_controller
 from advanced_omi_backend.users import User, UserCreate, UserUpdate
 
@@ -44,3 +46,42 @@ async def delete_user(
 ):
     """Delete a user and optionally their associated data. Admin only."""
     return await user_controller.delete_user(user_id, delete_conversations, delete_memories)
+
+
+@router.post("/me/api-key")
+async def generate_api_key(current_user: User = Depends(current_active_user)):
+    """Generate a new API key for the current user."""
+    try:
+        # Generate a secure random API key (32 bytes = 64 hex characters)
+        new_api_key = secrets.token_urlsafe(32)
+
+        # Update user with new API key
+        current_user.api_key = new_api_key
+        current_user.api_key_created_at = datetime.now(UTC)
+        await current_user.save()
+
+        logger.info(f"Generated new API key for user {current_user.id}")
+
+        return {
+            "api_key": new_api_key,
+            "created_at": current_user.api_key_created_at.isoformat()
+        }
+    except Exception as e:
+        logger.error(f"Failed to generate API key for user {current_user.id}: {e}")
+        raise HTTPException(status_code=500, detail="Failed to generate API key")
+
+
+@router.delete("/me/api-key")
+async def revoke_api_key(current_user: User = Depends(current_active_user)):
+    """Revoke the current user's API key."""
+    try:
+        current_user.api_key = None
+        current_user.api_key_created_at = None
+        await current_user.save()
+
+        logger.info(f"Revoked API key for user {current_user.id}")
+
+        return {"status": "success", "message": "API key revoked"}
+    except Exception as e:
+        logger.error(f"Failed to revoke API key for user {current_user.id}: {e}")
+        raise HTTPException(status_code=500, detail="Failed to revoke API key")
diff --git a/backends/advanced/src/advanced_omi_backend/services/mcp_server.py b/backends/advanced/src/advanced_omi_backend/services/mcp_server.py
new file mode 100644
index 00000000..27288599
--- /dev/null
+++ b/backends/advanced/src/advanced_omi_backend/services/mcp_server.py
@@ -0,0 +1,532 @@
+"""
+MCP Server for Friend-Lite conversations.
+
+This module implements an MCP (Model Context Protocol) server that provides
+conversation access tools for LLMs to retrieve conversation data, transcripts,
+and audio files.
+
+Key features:
+- List conversations with filtering and pagination
+- Get detailed conversation data including transcripts and segments
+- Access conversation audio files as resources
+- User-scoped access with proper authentication
+"""
+
+import base64
+import contextvars
+import json
+import logging
+from pathlib import Path
+from typing import Optional, List
+
+from fastapi import FastAPI, Request
+from fastapi.routing import APIRouter
+from mcp.server.fastmcp import FastMCP
+from mcp.server.sse import SseServerTransport
+
+from advanced_omi_backend.config import CHUNK_DIR
+from advanced_omi_backend.models.conversation import Conversation
+from advanced_omi_backend.models.user import User
+
+logger = logging.getLogger(__name__)
+
+# Initialize MCP
+mcp = FastMCP("friend-lite-conversations")
+
+# Context variables for user_id
+user_id_var: contextvars.ContextVar[str] = contextvars.ContextVar("user_id")
+
+# Create a router for MCP endpoints
+mcp_router = APIRouter(prefix="/mcp")
+
+# Initialize SSE transport
+sse = SseServerTransport("/mcp/messages/")
+
+
+async def resolve_user_identifier(identifier: str) -> Optional[str]:
+    """
+    Resolve a user identifier (email or user_id) to a user_id.
+
+    Args:
+        identifier: Either an email address or a MongoDB ObjectId string
+
+    Returns:
+        User ID string if found, None otherwise
+    """
+    try:
+        # First try to find by email (case-insensitive)
+        user = await User.find_one(User.email == identifier.lower())
+        if user:
+            logger.info(f"Resolved email '{identifier}' to user_id: {user.id}")
+            return str(user.id)
+
+        # If not found by email, assume it's already a user_id
+        # Verify it exists
+        from bson import ObjectId
+        try:
+            user = await User.find_one(User.id == ObjectId(identifier))
+            if user:
+                logger.info(f"Verified user_id: {identifier}")
+                return str(user.id)
+        except:
+            pass
+
+        logger.warning(f"Could not resolve user identifier: {identifier}")
+        return None
+    except Exception as e:
+        logger.error(f"Error resolving user identifier '{identifier}': {e}")
+        return None
+
+
+@mcp.tool(description="List all conversations. Returns conversation_id, title, summary, created_at, client_id, segment_count, memory_count, and has_audio. Supports date filtering and pagination.")
+async def list_conversations(
+    limit: int = 20,
+    offset: int = 0,
+    order_by: str = "created_at_desc",
+    start_date: Optional[str] = None,
+    end_date: Optional[str] = None
+) -> str:
+    """
+    List conversations with optional date filtering.
+
+    Args:
+        limit: Maximum number of conversations to return (default: 20, max: 100)
+        offset: Number of conversations to skip for pagination (default: 0)
+        order_by: Sort order - "created_at_desc" (newest first) or "created_at_asc" (oldest first)
+        start_date: Optional ISO 8601 date string (e.g., "2025-01-01T00:00:00Z") - filter conversations after this date
+        end_date: Optional ISO 8601 date string (e.g., "2025-12-31T23:59:59Z") - filter conversations before this date
+
+    Returns:
+        JSON string with list of conversations and pagination info
+    """
+    uid = user_id_var.get(None)
+    if not uid:
+        return json.dumps({"error": "user_id not provided"}, indent=2)
+
+    try:
+        # Validate and limit parameters
+        limit = min(max(1, limit), 100)  # Clamp between 1 and 100
+        offset = max(0, offset)
+
+        # Build base query
+        # If uid is "all", return all conversations (temporary for development)
+        # In the future, this will filter by speaker identity
+        if uid == "all":
+            query = Conversation.find_all()
+        else:
+            query = Conversation.find(Conversation.user_id == uid)
+
+        # Apply date filtering if provided
+        from datetime import datetime
+
+        if start_date:
+            try:
+                start_dt = datetime.fromisoformat(start_date.replace('Z', '+00:00'))
+                query = query.find(Conversation.start_datetime >= start_dt)
+            except ValueError as e:
+                logger.warning(f"Invalid start_date format: {start_date}, error: {e}")
+                return json.dumps({"error": f"Invalid start_date format: {start_date}. Use ISO 8601 format."}, indent=2)
+
+        if end_date:
+            try:
+                end_dt = datetime.fromisoformat(end_date.replace('Z', '+00:00'))
+                query = query.find(Conversation.start_datetime <= end_dt)
+            except ValueError as e:
+                logger.warning(f"Invalid end_date format: {end_date}, error: {e}")
+                return json.dumps({"error": f"Invalid end_date format: {end_date}. Use ISO 8601 format."}, indent=2)
+
+        # Get total count with same filters
+        total_count = await query.count()
+
+        # Apply sorting
+        if order_by == "created_at_asc":
+            query = query.sort(Conversation.start_datetime)
+        else:  # Default to newest first
+            query = query.sort(-Conversation.start_datetime)
+
+        # Apply pagination
+        conversations = await query.skip(offset).limit(limit).to_list()
+
+        # Format conversations for response
+        formatted_convs = []
+        for conv in conversations:
+
+            formatted_convs.append({
+                "conversation_id": conv.conversation_id,
+                "title": conv.title,
+                "summary": conv.summary,
+                "start_datetime": conv.start_datetime.isoformat(),
+                "end_datetime": conv.end_datetime.isoformat() if conv.end_datetime else None,
+                "segment_count": len(conv.segments),
+                "memory_count": conv.memory_count,
+                "client_id": conv.client_id,
+            })
+            
+
+        result = {
+            "conversations": formatted_convs,
+            "pagination": {
+                "total": total_count,
+                "limit": limit,
+                "offset": offset,
+                "returned": len(formatted_convs),
+                "has_more": (offset + len(formatted_convs)) < total_count
+            }
+        }
+
+        return json.dumps(result, indent=2)
+
+    except Exception as e:
+        logger.exception(f"Error listing conversations: {e}")
+        return json.dumps({"error": f"Failed to list conversations: {str(e)}"}, indent=2)
+
+
+@mcp.tool(description="Get detailed information about a specific conversation including full transcript, speaker segments, memories, and version history. Use the conversation_id from list_conversations.")
+async def get_conversation(conversation_id: str) -> str:
+    """
+    Get detailed conversation data.
+
+    Args:
+        conversation_id: The unique conversation identifier
+
+    Returns:
+        JSON string with complete conversation details
+    """
+    uid = user_id_var.get(None)
+    if not uid:
+        return json.dumps({"error": "user_id not provided"}, indent=2)
+
+    try:
+        # Find the conversation
+        conversation = await Conversation.find_one(
+            Conversation.conversation_id == conversation_id
+        )
+
+        if not conversation:
+            return json.dumps({"error": f"Conversation '{conversation_id}' not found"}, indent=2)
+
+        # Verify ownership (skip if uid is "all" for development)
+        if uid != "all" and conversation.user_id != uid:
+            return json.dumps({"error": "Access forbidden - conversation belongs to another user"}, indent=2)
+
+        # Format conversation data with explicit fields
+        conv_data = {
+            # Core identifiers
+            "conversation_id": conversation.conversation_id,
+            "audio_uuid": conversation.audio_uuid,
+            "user_id": conversation.user_id,
+            "client_id": conversation.client_id,
+
+            # Metadata
+            "start_datetime": conversation.start_datetime.isoformat(),
+            "end_datetime": conversation.end_datetime.isoformat() if conversation.end_datetime else None,
+            "title": conversation.title,
+            "summary": conversation.summary,
+            # "detailed_summary": conversation.detailed_summary,
+
+            # Transcript data
+            "transcript": conversation.transcript,
+
+            # Memory data
+            "memory_count": conversation.memory_count,
+
+            # Audio paths
+            "has_audio": bool(conversation.audio_path),
+            "has_cropped_audio": bool(conversation.cropped_audio_path),
+
+            # Version information
+            "active_transcript_version": conversation.active_transcript_version,
+            "active_memory_version": conversation.active_memory_version,
+            "transcript_versions_count": len(conversation.transcript_versions),
+            "memory_versions_count": len(conversation.memory_versions)
+        }
+
+        return json.dumps(conv_data, indent=2)
+
+    except Exception as e:
+        logger.exception(f"Error getting conversation {conversation_id}: {e}")
+        return json.dumps({"error": f"Failed to get conversation: {str(e)}"}, indent=2)
+
+
+@mcp.tool(description="Get speaker segments from a conversation. Returns detailed timing and speaker information for each segment of the transcript.")
+async def get_segments_from_conversation(conversation_id: str) -> str:
+    """
+    Get speaker segments from a conversation.
+
+    Args:
+        conversation_id: The unique conversation identifier
+
+    Returns:
+        JSON string with speaker segments including timing and text
+    """
+    uid = user_id_var.get(None)
+    if not uid:
+        return json.dumps({"error": "user_id not provided"}, indent=2)
+
+    try:
+        # Find the conversation
+        conversation = await Conversation.find_one(
+            Conversation.conversation_id == conversation_id
+        )
+
+        if not conversation:
+            return json.dumps({"error": f"Conversation '{conversation_id}' not found"}, indent=2)
+
+        # Verify ownership (skip if uid is "all" for development)
+        if uid != "all" and conversation.user_id != uid:
+            return json.dumps({"error": "Access forbidden - conversation belongs to another user"}, indent=2)
+
+        # Format segments
+        segments_data = {
+            "conversation_id": conversation_id,
+            "segment_count": len(conversation.segments),
+            "segments": [
+                {
+                    "start": seg.start,
+                    "end": seg.end,
+                    "duration": seg.end - seg.start,
+                    "text": seg.text,
+                    "speaker": seg.speaker,
+                    "confidence": seg.confidence
+                } for seg in conversation.segments
+            ]
+        }
+
+        return json.dumps(segments_data, indent=2)
+
+    except Exception as e:
+        logger.exception(f"Error getting segments for conversation {conversation_id}: {e}")
+        return json.dumps({"error": f"Failed to get segments: {str(e)}"}, indent=2)
+
+
+@mcp.resource(uri="conversation://{conversation_id}/audio", name="Conversation Audio", description="Get the audio file for a conversation")
+async def get_conversation_audio(conversation_id: str) -> str:
+    """
+    Get audio file for a conversation.
+
+    Args:
+        conversation_id: The unique conversation identifier
+
+    Returns:
+        Base64-encoded audio data with metadata
+    """
+    uid = user_id_var.get(None)
+    if not uid:
+        return json.dumps({"error": "user_id not provided"}, indent=2)
+
+    try:
+        # Default to regular audio (not cropped)
+        audio_type = "audio"
+
+        # Find the conversation
+        conversation = await Conversation.find_one(
+            Conversation.conversation_id == conversation_id
+        )
+
+        if not conversation:
+            return json.dumps({"error": f"Conversation '{conversation_id}' not found"}, indent=2)
+
+        # Verify ownership (skip if uid is "all" for development)
+        if uid != "all" and conversation.user_id != uid:
+            return json.dumps({"error": "Access forbidden - conversation belongs to another user"}, indent=2)
+
+        # Get the appropriate audio path
+        if audio_type == "cropped_audio":
+            audio_path = conversation.cropped_audio_path
+            if not audio_path:
+                return json.dumps({"error": "No cropped audio available for this conversation"}, indent=2)
+        else:  # Default to regular audio
+            audio_path = conversation.audio_path
+            if not audio_path:
+                return json.dumps({"error": "No audio file available for this conversation"}, indent=2)
+
+        # Resolve full path
+        full_path = CHUNK_DIR / audio_path
+
+        if not full_path.exists():
+            return json.dumps({"error": f"Audio file not found at path: {audio_path}"}, indent=2)
+
+        # Read and encode audio file
+        with open(full_path, "rb") as f:
+            audio_data = f.read()
+
+        audio_base64 = base64.b64encode(audio_data).decode('utf-8')
+
+        result = {
+            "conversation_id": conversation_id,
+            "audio_type": audio_type,
+            "file_path": str(audio_path),
+            "file_size_bytes": len(audio_data),
+            "mime_type": "audio/wav",  # Friend-Lite stores audio as WAV
+            "audio_base64": audio_base64
+        }
+
+        return json.dumps(result, indent=2)
+
+    except Exception as e:
+        logger.exception(f"Error getting audio for conversation {conversation_id}: {e}")
+        return json.dumps({"error": f"Failed to get audio: {str(e)}"}, indent=2)
+
+
+@mcp.resource(uri="conversation://{conversation_id}/cropped_audio", name="Conversation Cropped Audio", description="Get the cropped (speech-only) audio file for a conversation")
+async def get_conversation_cropped_audio(conversation_id: str) -> str:
+    """
+    Get cropped audio file for a conversation.
+
+    Args:
+        conversation_id: The unique conversation identifier
+
+    Returns:
+        Base64-encoded cropped audio data with metadata
+    """
+    uid = user_id_var.get(None)
+    if not uid:
+        return json.dumps({"error": "user_id not provided"}, indent=2)
+
+    try:
+        # Find the conversation
+        conversation = await Conversation.find_one(
+            Conversation.conversation_id == conversation_id
+        )
+
+        if not conversation:
+            return json.dumps({"error": f"Conversation '{conversation_id}' not found"}, indent=2)
+
+        # Verify ownership (skip if uid is "all" for development)
+        if uid != "all" and conversation.user_id != uid:
+            return json.dumps({"error": "Access forbidden - conversation belongs to another user"}, indent=2)
+
+        # Get cropped audio path
+        audio_path = conversation.cropped_audio_path
+        if not audio_path:
+            return json.dumps({"error": "No cropped audio available for this conversation"}, indent=2)
+
+        # Resolve full path
+        full_path = CHUNK_DIR / audio_path
+
+        if not full_path.exists():
+            return json.dumps({"error": f"Audio file not found at path: {audio_path}"}, indent=2)
+
+        # Read and encode audio file
+        with open(full_path, "rb") as f:
+            audio_data = f.read()
+
+        audio_base64 = base64.b64encode(audio_data).decode('utf-8')
+
+        result = {
+            "conversation_id": conversation_id,
+            "audio_type": "cropped_audio",
+            "file_path": str(audio_path),
+            "file_size_bytes": len(audio_data),
+            "mime_type": "audio/wav",
+            "audio_base64": audio_base64
+        }
+
+        return json.dumps(result, indent=2)
+
+    except Exception as e:
+        logger.exception(f"Error getting cropped audio for conversation {conversation_id}: {e}")
+        return json.dumps({"error": f"Failed to get cropped audio: {str(e)}"}, indent=2)
+
+
+@mcp_router.get("/conversations/sse")
+async def handle_sse(request: Request):
+    """
+    Handle SSE connections with Bearer token authentication.
+
+    The access token should be provided in the Authorization header:
+        Authorization: Bearer <token>
+
+    Note: For development, this bypasses user authentication and returns all conversations.
+          In the future, this will validate speaker identity from conversations.
+    """
+    from fastapi.responses import JSONResponse
+
+    # Extract access token from Authorization header
+    auth_header = request.headers.get("authorization")
+    if not auth_header:
+        logger.error("No Authorization header provided")
+        return JSONResponse(
+            status_code=401,
+            content={"error": "Authorization header required. Use: Authorization: Bearer <token>"}
+        )
+
+    # Parse Bearer token
+    parts = auth_header.split()
+    if len(parts) != 2 or parts[0].lower() != "bearer":
+        logger.error(f"Invalid Authorization header format: {auth_header}")
+        return JSONResponse(
+            status_code=401,
+            content={"error": "Invalid Authorization header. Use format: Authorization: Bearer <token>"}
+        )
+
+    access_token = parts[1]
+    if not access_token:
+        logger.error("Empty access token")
+        return JSONResponse(
+            status_code=401,
+            content={"error": "Access token cannot be empty"}
+        )
+
+    # For now, use "all" as the user_id to bypass filtering
+    # This will be replaced with speaker-based permissions later
+    logger.info(f"MCP connection established with access token: {access_token[:min(8, len(access_token))]}...")
+    user_token = user_id_var.set("all")
+
+    try:
+        # Handle SSE connection
+        async with sse.connect_sse(
+            request.scope,
+            request.receive,
+            request._send,
+        ) as (read_stream, write_stream):
+            await mcp._mcp_server.run(
+                read_stream,
+                write_stream,
+                mcp._mcp_server.create_initialization_options(),
+            )
+    finally:
+        # Clean up context variables
+        user_id_var.reset(user_token)
+
+
+@mcp_router.post("/messages/")
+async def handle_get_message(request: Request):
+    return await handle_post_message(request)
+
+
+@mcp_router.post("/conversations/sse/{user_id}/messages/")
+async def handle_post_message_with_user(request: Request):
+    return await handle_post_message(request)
+
+
+async def handle_post_message(request: Request):
+    """Handle POST messages for SSE"""
+    try:
+        body = await request.body()
+
+        # Create a simple receive function that returns the body
+        async def receive():
+            return {"type": "http.request", "body": body, "more_body": False}
+
+        # Create a simple send function that does nothing
+        async def send(message):
+            return {}
+
+        # Call handle_post_message with the correct arguments
+        await sse.handle_post_message(request.scope, receive, send)
+
+        # Return a success response
+        return {"status": "ok"}
+    finally:
+        pass
+
+
+def setup_mcp_server(app: FastAPI):
+    """Setup MCP server with the FastAPI application"""
+    mcp._mcp_server.name = "friend-lite-conversations"
+
+    # Include MCP router in the FastAPI app
+    app.include_router(mcp_router)
+
+    logger.info("Friend-Lite MCP server initialized with conversation tools")
diff --git a/backends/advanced/webui/src/App.tsx b/backends/advanced/webui/src/App.tsx
index fca59623..4c9add41 100644
--- a/backends/advanced/webui/src/App.tsx
+++ b/backends/advanced/webui/src/App.tsx
@@ -13,6 +13,7 @@ import System from './pages/System'
 import Upload from './pages/Upload'
 import Queue from './pages/Queue'
 import LiveRecord from './pages/LiveRecord'
+import Settings from './pages/Settings'
 import ProtectedRoute from './components/auth/ProtectedRoute'
 import { ErrorBoundary, PageErrorBoundary } from './components/ErrorBoundary'
 
@@ -89,6 +90,11 @@ function App() {
                     <Queue />
                   </PageErrorBoundary>
                 } />
+                <Route path="settings" element={
+                  <PageErrorBoundary>
+                    <Settings />
+                  </PageErrorBoundary>
+                } />
               </Route>
             </Routes>
           </Router>
diff --git a/backends/advanced/webui/src/components/layout/Layout.tsx b/backends/advanced/webui/src/components/layout/Layout.tsx
index 5995f823..83a161ab 100644
--- a/backends/advanced/webui/src/components/layout/Layout.tsx
+++ b/backends/advanced/webui/src/components/layout/Layout.tsx
@@ -15,10 +15,11 @@ export default function Layout() {
     { path: '/memories', label: 'Memories', icon: Brain },
     { path: '/timeline', label: 'Timeline', icon: Calendar },
     { path: '/users', label: 'User Management', icon: Users },
+    { path: '/settings', label: 'Settings', icon: Settings },
     ...(isAdmin ? [
       { path: '/upload', label: 'Upload Audio', icon: Upload },
       { path: '/queue', label: 'Queue Management', icon: Layers },
-      { path: '/system', label: 'System State', icon: Settings },
+      { path: '/system', label: 'System State', icon: Shield },
     ] : []),
   ]
 
diff --git a/backends/advanced/webui/src/contexts/AuthContext.tsx b/backends/advanced/webui/src/contexts/AuthContext.tsx
index 7745e871..97a5b42c 100644
--- a/backends/advanced/webui/src/contexts/AuthContext.tsx
+++ b/backends/advanced/webui/src/contexts/AuthContext.tsx
@@ -7,6 +7,8 @@ interface User {
   name: string
   email: string
   is_superuser: boolean
+  api_key?: string
+  api_key_created_at?: string
 }
 
 interface AuthContextType {
diff --git a/backends/advanced/webui/src/services/api.ts b/backends/advanced/webui/src/services/api.ts
index 4ee895db..323bd369 100644
--- a/backends/advanced/webui/src/services/api.ts
+++ b/backends/advanced/webui/src/services/api.ts
@@ -258,14 +258,14 @@ export const chatApi = {
 export const speakerApi = {
   // Get current user's speaker configuration
   getSpeakerConfiguration: () => api.get('/api/speaker-configuration'),
-  
+
   // Update current user's speaker configuration
-  updateSpeakerConfiguration: (primarySpeakers: Array<{speaker_id: string, name: string, user_id: number}>) => 
+  updateSpeakerConfiguration: (primarySpeakers: Array<{speaker_id: string, name: string, user_id: number}>) =>
     api.post('/api/speaker-configuration', primarySpeakers),
-    
-  // Get enrolled speakers from speaker recognition service  
+
+  // Get enrolled speakers from speaker recognition service
   getEnrolledSpeakers: () => api.get('/api/enrolled-speakers'),
-  
+
   // Check speaker service status (admin only)
   getSpeakerServiceStatus: () => api.get('/api/speaker-service-status'),
 }

From 5b04ea42be11507eca4109ec0fe9ec51103b1694 Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Thu, 18 Dec 2025 19:08:32 +0000
Subject: [PATCH 09/17] fix test env

---
 backends/advanced/docker-compose.yml   |  3 ++-
 tests/infrastructure/infra_tests.robot |  3 ++-
 tests/setup/test_env.py                | 18 ------------------
 3 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/backends/advanced/docker-compose.yml b/backends/advanced/docker-compose.yml
index 8d4bc42f..5f84d1d3 100644
--- a/backends/advanced/docker-compose.yml
+++ b/backends/advanced/docker-compose.yml
@@ -224,9 +224,10 @@ services:
 
 # Shared network for cross-project communication
 networks:
-  default:
+  chronicle-network:
     name: chronicle-network
 
+
 volumes:
   ollama_data:
     driver: local
diff --git a/tests/infrastructure/infra_tests.robot b/tests/infrastructure/infra_tests.robot
index 48b1a057..bc4dd286 100644
--- a/tests/infrastructure/infra_tests.robot
+++ b/tests/infrastructure/infra_tests.robot
@@ -163,7 +163,8 @@ Worker Registration Loss Detection Test
     END
 
     # Cleanup: Always restart workers after this test to ensure subsequent tests work
-    [Teardown]    Run Keywords
+    [Teardown]    
+    ...    Run Keywords
     ...    Log To Console    \n🧹 Cleanup: Restarting workers for subsequent tests
     ...    AND    Restart Workers Container
 
diff --git a/tests/setup/test_env.py b/tests/setup/test_env.py
index 7e3ca983..8af9777d 100644
--- a/tests/setup/test_env.py
+++ b/tests/setup/test_env.py
@@ -3,24 +3,6 @@
 from pathlib import Path
 from dotenv import load_dotenv
 
-# Load .env file from backends/advanced directory if it exists
-# This allows tests to work when run from VSCode or command line
-# def load_env_file():
-#     """Load environment variables from .env file if it exists."""
-#     # Look for .env in backends/advanced directory
-#     env_file = Path(__file__).parent.parent.parent / "backends" / "advanced" / ".env"
-#     if env_file.exists():
-#         with open(env_file) as f:
-#             for line in f:
-#                 line = line.strip()
-#                 if line and not line.startswith('#') and '=' in line:
-#                     key, value = line.split('=', 1)
-#                     # Only set if not already in environment (CI takes precedence)
-#                     if key not in os.environ:
-#                         os.environ[key] = value
-
-# Load .env file (CI environment variables take precedence)
-# load_env_file()
 
 # Load .env from backends/advanced directory to get COMPOSE_PROJECT_NAME
 backend_env_path = Path(__file__).resolve().parents[2] / "backends" / "advanced" / ".env"

From 26cd5b74e05391071cb6832c893a9fa428ece221 Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Sat, 20 Dec 2025 08:22:05 +0000
Subject: [PATCH 10/17] added record button to header

---
 .../components/header/HeaderRecordButton.tsx  | 124 ++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 backends/advanced/webui/src/components/header/HeaderRecordButton.tsx

diff --git a/backends/advanced/webui/src/components/header/HeaderRecordButton.tsx b/backends/advanced/webui/src/components/header/HeaderRecordButton.tsx
new file mode 100644
index 00000000..491f2f95
--- /dev/null
+++ b/backends/advanced/webui/src/components/header/HeaderRecordButton.tsx
@@ -0,0 +1,124 @@
+import { useEffect, useRef } from 'react'
+import { Mic, Square } from 'lucide-react'
+import { useSimpleAudioRecording } from '../../hooks/useSimpleAudioRecording'
+
+export default function HeaderRecordButton() {
+  const recording = useSimpleAudioRecording()
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const animationRef = useRef<number>()
+
+  // Waveform visualization
+  useEffect(() => {
+    if (!recording.isRecording || !recording.analyser || !canvasRef.current) {
+      // Clear animation when not recording
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+      // Clear canvas
+      if (canvasRef.current) {
+        const canvas = canvasRef.current
+        const ctx = canvas.getContext('2d')
+        if (ctx) {
+          ctx.clearRect(0, 0, canvas.width, canvas.height)
+        }
+      }
+      return
+    }
+
+    const canvas = canvasRef.current
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    const analyser = recording.analyser
+    analyser.fftSize = 32 // Smaller for compact visualization
+    const bufferLength = analyser.frequencyBinCount
+    const dataArray = new Uint8Array(bufferLength)
+
+    const draw = () => {
+      animationRef.current = requestAnimationFrame(draw)
+
+      analyser.getByteFrequencyData(dataArray)
+
+      // Clear canvas
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+      const barWidth = canvas.width / bufferLength
+      let x = 0
+
+      for (let i = 0; i < bufferLength; i++) {
+        const barHeight = (dataArray[i] / 255) * canvas.height * 0.8
+
+        // Gradient color based on intensity
+        const intensity = dataArray[i] / 255
+        const r = Math.floor(59 + intensity * 40)
+        const g = Math.floor(130 + intensity * 70)
+        const b = Math.floor(246 - intensity * 50)
+
+        ctx.fillStyle = `rgb(${r}, ${g}, ${b})`
+        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight)
+
+        x += barWidth
+      }
+    }
+
+    draw()
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+    }
+  }, [recording.isRecording, recording.analyser])
+
+  const handleClick = async () => {
+    if (recording.isRecording) {
+      recording.stopRecording()
+    } else {
+      await recording.startRecording()
+    }
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`
+        relative flex items-center space-x-2 px-3 py-2 rounded-lg font-medium transition-all duration-200
+        ${recording.isRecording
+          ? 'bg-error-500 hover:bg-error-600 text-white shadow-md'
+          : 'bg-primary-600 hover:bg-primary-700 text-white shadow-sm'
+        }
+      `}
+      title={recording.isRecording ? 'Stop Recording' : 'Start Recording'}
+    >
+      {/* Icon */}
+      {recording.isRecording ? (
+        <Square className="h-4 w-4 fill-current" />
+      ) : (
+        <Mic className="h-4 w-4" />
+      )}
+
+      {/* Waveform Canvas (only visible when recording) */}
+      {recording.isRecording && (
+        <canvas
+          ref={canvasRef}
+          width={48}
+          height={20}
+          className="rounded"
+        />
+      )}
+
+      {/* Status Text */}
+      <span className="text-sm hidden sm:inline">
+        {recording.isRecording ? 'Recording' : 'Record'}
+      </span>
+
+      {/* Recording pulse indicator */}
+      {recording.isRecording && (
+        <span className="absolute -top-1 -right-1 flex h-3 w-3">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-error-400 opacity-75"></span>
+          <span className="relative inline-flex rounded-full h-3 w-3 bg-error-500"></span>
+        </span>
+      )}
+    </button>
+  )
+}

From 083002d39dc52b265673ef0bc52840f8f79001bc Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Sat, 20 Dec 2025 08:22:53 +0000
Subject: [PATCH 11/17] made dark mode default

---
 backends/advanced/webui/src/contexts/ThemeContext.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/backends/advanced/webui/src/contexts/ThemeContext.tsx b/backends/advanced/webui/src/contexts/ThemeContext.tsx
index 9f63b503..4c76725f 100644
--- a/backends/advanced/webui/src/contexts/ThemeContext.tsx
+++ b/backends/advanced/webui/src/contexts/ThemeContext.tsx
@@ -10,7 +10,8 @@ const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
 export function ThemeProvider({ children }: { children: ReactNode }) {
   const [isDark, setIsDark] = useState(() => {
     const saved = localStorage.getItem('theme')
-    return saved ? saved === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches
+    // Default to dark mode if no preference is saved
+    return saved ? saved === 'dark' : true
   })
 
   useEffect(() => {

From bd0fe83c52067f1e7964ce9ce9de29e5035e53ad Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Sat, 20 Dec 2025 08:23:33 +0000
Subject: [PATCH 12/17] Various design and UI polish

---
 .../webui/src/components/layout/Layout.tsx    | 248 ++++++++++++++----
 backends/advanced/webui/src/index.css         | 164 +++++++++++-
 backends/advanced/webui/src/pages/Chat.tsx    | 144 +++++-----
 .../webui/src/pages/Conversations.tsx         | 107 ++++++--
 .../webui/src/pages/ConversationsRouter.tsx   |  34 +--
 .../webui/src/pages/ConversationsTimeline.tsx |  39 ++-
 .../advanced/webui/src/pages/LiveRecord.tsx   |  33 ++-
 .../advanced/webui/src/pages/LoginPage.tsx    | 137 ++++++----
 backends/advanced/webui/src/pages/Queue.tsx   | 184 ++++++-------
 backends/advanced/webui/tailwind.config.js    | 195 +++++++++++++-
 10 files changed, 953 insertions(+), 332 deletions(-)

diff --git a/backends/advanced/webui/src/components/layout/Layout.tsx b/backends/advanced/webui/src/components/layout/Layout.tsx
index 83a161ab..ab0d7dc2 100644
--- a/backends/advanced/webui/src/components/layout/Layout.tsx
+++ b/backends/advanced/webui/src/components/layout/Layout.tsx
@@ -1,12 +1,28 @@
 import { Link, useLocation, Outlet } from 'react-router-dom'
-import { Music, MessageSquare, MessageCircle, Brain, Users, Upload, Settings, LogOut, Sun, Moon, Shield, Radio, Layers, Calendar } from 'lucide-react'
+import { useState, useRef, useEffect } from 'react'
+import { MessageSquare, MessageCircle, Brain, Users, Upload, Settings, LogOut, Sun, Moon, Shield, Radio, Layers, Calendar, Search, Bell, User, ChevronDown } from 'lucide-react'
 import { useAuth } from '../../contexts/AuthContext'
 import { useTheme } from '../../contexts/ThemeContext'
+import HeaderRecordButton from '../header/HeaderRecordButton'
 
 export default function Layout() {
   const location = useLocation()
   const { user, logout, isAdmin } = useAuth()
   const { isDark, toggleTheme } = useTheme()
+  const [userMenuOpen, setUserMenuOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const userMenuRef = useRef<HTMLDivElement>(null)
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (userMenuRef.current && !userMenuRef.current.contains(event.target as Node)) {
+        setUserMenuOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
 
   const navigationItems = [
     { path: '/live-record', label: 'Live Record', icon: Radio },
@@ -24,75 +40,202 @@ export default function Layout() {
   ]
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-900 flex flex-col">
       {/* Header */}
-      <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <header className="sticky top-0 z-sticky bg-white/80 dark:bg-neutral-800/80 backdrop-blur-lg border-b border-neutral-200 dark:border-neutral-700 shadow-sm">
+        <div className="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
-            <div className="flex items-center space-x-4">
-              <Music className="h-8 w-8 text-blue-600" />
-              <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
-                Chronicle Dashboard
-              </h1>
+            {/* Logo & Brand */}
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-700 rounded-xl flex items-center justify-center shadow-md">
+                <Brain className="h-6 w-6 text-white" />
+              </div>
+              <div>
+                <h1 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 tracking-tight">
+                  Chronicle
+                </h1>
+                <p className="text-xs text-neutral-500 dark:text-neutral-400">AI Memory System</p>
+              </div>
             </div>
-            <div className="flex items-center space-x-4">
+
+            {/* Search Bar */}
+            <div className="flex-1 max-w-xl mx-8 hidden md:block">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-400" />
+                <input
+                  type="text"
+                  placeholder="Search conversations, memories..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full pl-10 pr-4 py-2 bg-neutral-100 dark:bg-neutral-700/50 border border-transparent rounded-lg text-sm text-neutral-900 dark:text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all"
+                />
+              </div>
+            </div>
+
+            {/* Header Actions */}
+            <div className="flex items-center space-x-1">
+              {/* Record Button */}
+              <HeaderRecordButton />
+
+              {/* Divider */}
+              <div className="h-6 w-px bg-neutral-200 dark:bg-neutral-700 mx-2"></div>
+
+              {/* Search Icon (Mobile) */}
+              <button
+                className="btn-ghost p-2.5 rounded-lg md:hidden"
+                aria-label="Search"
+              >
+                <Search className="h-5 w-5" />
+              </button>
+
+              {/* Notifications */}
+              <button
+                className="btn-ghost p-2.5 rounded-lg relative"
+                aria-label="Notifications"
+              >
+                <Bell className="h-5 w-5" />
+                {/* Notification badge */}
+                <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-primary-500 rounded-full"></span>
+              </button>
+
+              {/* Theme Toggle */}
               <button
                 onClick={toggleTheme}
-                className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-300"
+                className="btn-ghost p-2.5 rounded-lg"
                 aria-label="Toggle theme"
               >
                 {isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
               </button>
-              
-              {/* User info */}
-              <div className="flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-300">
-                <div className="flex items-center space-x-1">
-                  {isAdmin && <Shield className="h-4 w-4 text-blue-600" />}
-                  <span>{user?.name || user?.email}</span>
-                </div>
+
+              {/* User Menu */}
+              <div className="relative" ref={userMenuRef}>
+                <button
+                  onClick={() => setUserMenuOpen(!userMenuOpen)}
+                  className="flex items-center space-x-2 px-2 py-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700/50 transition-colors"
+                  aria-label="User menu"
+                >
+                  <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-700 rounded-full flex items-center justify-center">
+                    <User className="h-4 w-4 text-white" />
+                  </div>
+                  <ChevronDown className={`h-4 w-4 text-neutral-600 dark:text-neutral-400 transition-transform ${userMenuOpen ? 'rotate-180' : ''}`} />
+                </button>
+
+                {/* Dropdown Menu */}
+                {userMenuOpen && (
+                  <div className="absolute right-0 mt-2 w-64 bg-white dark:bg-neutral-800 rounded-lg shadow-xl border border-neutral-200 dark:border-neutral-700 py-2 z-50 animate-slide-down">
+                    {/* User Info */}
+                    <div className="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
+                      <div className="flex items-center space-x-3">
+                        <div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-700 rounded-full flex items-center justify-center">
+                          <User className="h-5 w-5 text-white" />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100 truncate">
+                            {user?.name || 'User'}
+                          </p>
+                          <p className="text-xs text-neutral-500 dark:text-neutral-400 truncate">
+                            {user?.email}
+                          </p>
+                        </div>
+                      </div>
+                      {isAdmin && (
+                        <span className="badge badge-primary mt-2 inline-block">Admin</span>
+                      )}
+                    </div>
+
+                    {/* Menu Items */}
+                    <div className="py-1">
+                      <Link
+                        to="/settings"
+                        className="flex items-center space-x-3 px-4 py-2 text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700/50 transition-colors"
+                        onClick={() => setUserMenuOpen(false)}
+                      >
+                        <Settings className="h-4 w-4" />
+                        <span>Settings</span>
+                      </Link>
+                    </div>
+
+                    {/* Logout */}
+                    <div className="border-t border-neutral-200 dark:border-neutral-700 pt-1">
+                      <button
+                        onClick={() => {
+                          setUserMenuOpen(false)
+                          logout()
+                        }}
+                        className="w-full flex items-center space-x-3 px-4 py-2 text-sm text-error-600 dark:text-error-400 hover:bg-error-50 dark:hover:bg-error-900/20 transition-colors"
+                      >
+                        <LogOut className="h-4 w-4" />
+                        <span>Logout</span>
+                      </button>
+                    </div>
+                  </div>
+                )}
               </div>
-              
-              <button
-                onClick={logout}
-                className="flex items-center space-x-2 px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-300"
-                aria-label="Logout"
-              >
-                <LogOut className="h-4 w-4" />
-                <span className="text-sm">Logout</span>
-              </button>
             </div>
           </div>
         </div>
       </header>
 
-      <div className="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="flex flex-col lg:flex-row gap-8">
+      {/* Main Container */}
+      <div className="flex-1 flex">
+        <div className="max-w-[1600px] mx-auto w-full px-4 sm:px-6 lg:px-8 py-6 flex flex-col lg:flex-row gap-6">
           {/* Sidebar Navigation */}
           <nav className="lg:w-64 flex-shrink-0">
-            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
-              <ul className="space-y-2">
-                {navigationItems.map(({ path, label, icon: Icon }) => (
-                  <li key={path}>
-                    <Link
-                      to={path}
-                      className={`flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                        location.pathname === path
-                          ? 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100'
-                          : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
-                      }`}
-                    >
+            <div className="card sticky top-24 p-3 space-y-1">
+              {navigationItems.map(({ path, label, icon: Icon }) => {
+                const isActive = location.pathname === path ||
+                  (path !== '/' && location.pathname.startsWith(path))
+
+                return (
+                  <Link
+                    key={path}
+                    to={path}
+                    className={`
+                      group relative flex items-center px-3 py-2.5 rounded-lg text-sm font-medium
+                      transition-all duration-200 ease-out overflow-hidden
+                      ${isActive
+                        ? 'bg-gradient-to-r from-primary-100 to-primary-50 dark:from-primary-900/30 dark:to-primary-900/10 text-primary-700 dark:text-primary-300 shadow-sm'
+                        : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700/50 hover:text-neutral-900 dark:hover:text-neutral-100'
+                      }
+                    `}
+                  >
+                    {/* Active indicator bar */}
+                    {isActive && (
+                      <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary-600 dark:bg-primary-500 rounded-r-full"></div>
+                    )}
+
+                    {/* Icon with scale effect */}
+                    <div className={`
+                      flex-shrink-0 transition-all duration-200
+                      ${isActive
+                        ? 'scale-110 text-primary-600 dark:text-primary-400'
+                        : 'group-hover:scale-110 group-hover:text-primary-600 dark:group-hover:text-primary-400'
+                      }
+                    `}>
                       <Icon className="h-5 w-5" />
-                      <span>{label}</span>
-                    </Link>
-                  </li>
-                ))}
-              </ul>
+                    </div>
+
+                    {/* Label */}
+                    <span className={`
+                      ml-3 transition-all duration-200
+                      ${isActive ? 'font-semibold' : ''}
+                    `}>
+                      {label}
+                    </span>
+
+                    {/* Shine effect on hover - clipped by overflow-hidden */}
+                    {!isActive && (
+                      <div className="absolute inset-0 translate-x-full group-hover:-translate-x-full bg-gradient-to-r from-transparent via-white/10 dark:via-white/5 to-transparent transition-transform duration-300 pointer-events-none"></div>
+                    )}
+                  </Link>
+                )
+              })}
             </div>
           </nav>
 
           {/* Main Content */}
-          <main className="flex-1">
-            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+          <main className="flex-1 min-w-0">
+            <div className="card p-6 animate-fade-in">
               <Outlet />
             </div>
           </main>
@@ -100,10 +243,13 @@ export default function Layout() {
       </div>
 
       {/* Footer */}
-      <footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-auto">
+      <footer className="mt-auto bg-white dark:bg-neutral-800 border-t border-neutral-200 dark:border-neutral-700">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-          <div className="text-center text-sm text-gray-500 dark:text-gray-400">
-            🎵 Chronicle Dashboard v1.0 | AI-powered personal audio system
+          <div className="flex items-center justify-center space-x-2 text-sm text-neutral-500 dark:text-neutral-400">
+            <Brain className="h-4 w-4" />
+            <span>Chronicle v1.0</span>
+            <span className="text-neutral-300 dark:text-neutral-600">•</span>
+            <span>AI-powered personal audio system</span>
           </div>
         </div>
       </footer>
diff --git a/backends/advanced/webui/src/index.css b/backends/advanced/webui/src/index.css
index 96d55fdc..b1cac532 100644
--- a/backends/advanced/webui/src/index.css
+++ b/backends/advanced/webui/src/index.css
@@ -1,9 +1,171 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
+  /* Base Styles */
+  html {
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    @apply bg-neutral-50 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100;
+  }
+
+  /* Improve focus states for accessibility */
+  *:focus-visible {
+    @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-neutral-0 dark:ring-offset-neutral-950;
+  }
+
+  /* Smooth scrolling */
   html {
-    font-family: system-ui, sans-serif;
+    scroll-behavior: smooth;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-neutral-100 dark:bg-neutral-800;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-neutral-300 dark:bg-neutral-600 rounded-lg hover:bg-neutral-400 dark:hover:bg-neutral-500;
+  }
+}
+
+@layer components {
+  /* Button Components */
+  .btn {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-primary {
+    @apply btn bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus-visible:ring-primary-500 shadow-sm;
+  }
+
+  .btn-secondary {
+    @apply btn bg-neutral-200 dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 hover:bg-neutral-300 dark:hover:bg-neutral-600 active:bg-neutral-400 dark:active:bg-neutral-500 focus-visible:ring-neutral-500;
+  }
+
+  .btn-ghost {
+    @apply btn bg-transparent hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 focus-visible:ring-neutral-500;
+  }
+
+  .btn-destructive {
+    @apply btn bg-error-600 text-white hover:bg-error-700 active:bg-error-800 focus-visible:ring-error-500 shadow-sm;
+  }
+
+  /* Card Components */
+  .card {
+    @apply bg-white dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 shadow-sm transition-shadow duration-200;
+  }
+
+  .card-hover {
+    @apply card hover:shadow-md;
+  }
+
+  /* Input Components */
+  .input {
+    @apply w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-neutral-100 dark:disabled:bg-neutral-900 disabled:cursor-not-allowed;
+  }
+
+  /* Badge Components */
+  .badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  .badge-primary {
+    @apply badge bg-primary-100 dark:bg-primary-900/30 text-primary-800 dark:text-primary-200;
+  }
+
+  .badge-success {
+    @apply badge bg-success-100 dark:bg-success-900/30 text-success-800 dark:text-success-200;
+  }
+
+  .badge-error {
+    @apply badge bg-error-100 dark:bg-error-900/30 text-error-800 dark:text-error-200;
+  }
+
+  .badge-warning {
+    @apply badge bg-warning-100 dark:bg-warning-900/30 text-warning-800 dark:text-warning-200;
+  }
+
+  .badge-neutral {
+    @apply badge bg-neutral-100 dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200;
+  }
+}
+
+@layer utilities {
+  /* Animation utilities */
+  .animate-fade-in {
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  .animate-slide-up {
+    animation: slideUp 0.3s ease-out;
+  }
+
+  .animate-slide-down {
+    animation: slideDown 0.3s ease-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(10px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideDown {
+    from {
+      transform: translateY(-10px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideInLeft {
+    from {
+      transform: translateX(-20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  .animate-slide-in-left {
+    animation: slideInLeft 0.3s ease-out;
+  }
+
+  /* Text utilities */
+  .text-balance {
+    text-wrap: balance;
   }
 }
\ No newline at end of file
diff --git a/backends/advanced/webui/src/pages/Chat.tsx b/backends/advanced/webui/src/pages/Chat.tsx
index f696518a..d716699b 100644
--- a/backends/advanced/webui/src/pages/Chat.tsx
+++ b/backends/advanced/webui/src/pages/Chat.tsx
@@ -287,42 +287,51 @@ export default function Chat() {
   }
 
   return (
-    <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
-      {/* Sidebar */}
-      <div className="w-80 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col">
-        {/* Header */}
-        <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center space-x-2">
-              <MessageCircle className="h-6 w-6 text-blue-600" />
-              <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Chat</h1>
-            </div>
-            <button
-              onClick={createNewSession}
-              className="p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors"
-              title="New Chat"
-            >
-              <Plus className="h-5 w-5" />
-            </button>
+    <div>
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-8">
+        <div className="flex items-center space-x-3">
+          <div className="p-2 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
+            <MessageCircle className="h-6 w-6 text-primary-600 dark:text-primary-400" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-neutral-900 dark:text-neutral-100 tracking-tight">
+              Chat
+            </h1>
+            <p className="text-sm text-neutral-500 dark:text-neutral-400">
+              Chat with your AI assistant using your memories
+            </p>
           </div>
         </div>
+        <button
+          onClick={createNewSession}
+          className="btn-primary space-x-2"
+        >
+          <Plus className="h-4 w-4" />
+          <span>New Chat</span>
+        </button>
+      </div>
 
-        {/* Sessions List */}
-        <div className="flex-1 overflow-y-auto">
-          {isLoading ? (
-            <div className="p-4 text-center text-gray-500">Loading sessions...</div>
-          ) : sessions.length === 0 ? (
-            <div className="p-4 text-center text-gray-500">
-              No chat sessions yet.
-              <br />
-              <button
-                onClick={createNewSession}
-                className="mt-2 text-blue-600 hover:text-blue-700"
-              >
-                Start your first chat!
-              </button>
-            </div>
-          ) : (
+      {/* Chat Container */}
+      <div className="flex h-[600px] rounded-lg overflow-hidden border border-neutral-200 dark:border-neutral-700">
+        {/* Sidebar */}
+        <div className="w-80 bg-white dark:bg-neutral-800 border-r border-neutral-200 dark:border-neutral-700 flex flex-col">
+          {/* Sessions List */}
+          <div className="flex-1 overflow-y-auto p-4">
+            {isLoading ? (
+              <div className="text-center text-neutral-500 dark:text-neutral-400">Loading sessions...</div>
+            ) : sessions.length === 0 ? (
+              <div className="text-center text-neutral-500 dark:text-neutral-400">
+                No chat sessions yet.
+                <br />
+                <button
+                  onClick={createNewSession}
+                  className="mt-2 text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
+                >
+                  Start your first chat!
+                </button>
+              </div>
+            ) : (
             <div className="p-2 space-y-1">
               {sessions.map((session) => (
                 <div
@@ -360,11 +369,11 @@ export default function Chat() {
       </div>
 
       {/* Main Chat Area */}
-      <div className="flex-1 flex flex-col">
+      <div className="flex-1 flex flex-col bg-neutral-50 dark:bg-neutral-900">
         {currentSession ? (
           <>
             {/* Chat Header */}
-            <div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+            <div className="p-4 border-b border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800">
               <div className="flex items-center justify-between">
                 <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                   {currentSession.title}
@@ -479,7 +488,7 @@ export default function Chat() {
             </div>
 
             {/* Input Area */}
-            <div className="p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+            <div className="p-4 border-t border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800">
               {error && (
                 <div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-300 text-sm">
                   {error}
@@ -519,7 +528,7 @@ export default function Chat() {
           </>
         ) : (
           /* No Session Selected */
-          <div className="flex-1 flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+          <div className="flex-1 flex items-center justify-center bg-neutral-50 dark:bg-neutral-900">
             <div className="text-center">
               <MessageCircle className="h-16 w-16 text-gray-400 mx-auto mb-4" />
               <h3 className="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">
@@ -539,38 +548,39 @@ export default function Chat() {
         )}
       </div>
 
-      {/* Memory Panel (if enabled and has context) */}
-      {showMemoryPanel && memoryContext && memoryContext.memory_count > 0 && (
-        <div className="w-80 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 p-4">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center space-x-2">
-              <Brain className="h-5 w-5 text-blue-600" />
-              <span>Memory Context</span>
-            </h3>
-            <button
-              onClick={() => setShowMemoryPanel(false)}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
-            >
-              ✕
-            </button>
-          </div>
-          <div className="text-sm text-gray-600 dark:text-gray-400">
-            <p>Using {memoryContext.memory_count} relevant memories to enhance this conversation.</p>
-            <div className="mt-4 space-y-2">
-              {memoryContext.memory_ids.slice(0, 3).map((id) => (
-                <div key={id} className="p-2 bg-gray-50 dark:bg-gray-700 rounded text-xs">
-                  Memory ID: {id}
-                </div>
-              ))}
-              {memoryContext.memory_ids.length > 3 && (
-                <div className="text-xs text-gray-500">
-                  +{memoryContext.memory_ids.length - 3} more memories
-                </div>
-              )}
+        {/* Memory Panel (if enabled and has context) */}
+        {showMemoryPanel && memoryContext && memoryContext.memory_count > 0 && (
+          <div className="w-80 bg-white dark:bg-neutral-800 border-l border-neutral-200 dark:border-neutral-700 p-4">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center space-x-2">
+                <Brain className="h-5 w-5 text-blue-600" />
+                <span>Memory Context</span>
+              </h3>
+              <button
+                onClick={() => setShowMemoryPanel(false)}
+                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+              >
+                ✕
+              </button>
+            </div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">
+              <p>Using {memoryContext.memory_count} relevant memories to enhance this conversation.</p>
+              <div className="mt-4 space-y-2">
+                {memoryContext.memory_ids.slice(0, 3).map((id) => (
+                  <div key={id} className="p-2 bg-gray-50 dark:bg-gray-700 rounded text-xs">
+                    Memory ID: {id}
+                  </div>
+                ))}
+                {memoryContext.memory_ids.length > 3 && (
+                  <div className="text-xs text-gray-500">
+                    +{memoryContext.memory_ids.length - 3} more memories
+                  </div>
+                )}
+              </div>
             </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
     </div>
   )
 }
\ No newline at end of file
diff --git a/backends/advanced/webui/src/pages/Conversations.tsx b/backends/advanced/webui/src/pages/Conversations.tsx
index d4b76ed3..cee0fccf 100644
--- a/backends/advanced/webui/src/pages/Conversations.tsx
+++ b/backends/advanced/webui/src/pages/Conversations.tsx
@@ -49,7 +49,12 @@ const SPEAKER_COLOR_PALETTE = [
   'text-cyan-600 dark:text-cyan-400',
 ];
 
-export default function Conversations() {
+interface ConversationsProps {
+  activeTab?: 'classic' | 'timeline'
+  setActiveTab?: (tab: 'classic' | 'timeline') => void
+}
+
+export default function Conversations({ activeTab = 'classic', setActiveTab }: ConversationsProps = {}) {
   const [conversations, setConversations] = useState<Conversation[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -385,20 +390,28 @@ export default function Conversations() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-64">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-        <span className="ml-2 text-gray-600 dark:text-gray-400">Loading conversations...</span>
+      <div className="flex flex-col items-center justify-center h-64 space-y-4">
+        <div className="animate-spin rounded-full h-10 w-10 border-3 border-primary-200 border-t-primary-600 dark:border-neutral-700 dark:border-t-primary-500"></div>
+        <p className="text-sm font-medium text-neutral-600 dark:text-neutral-400">Loading conversations...</p>
       </div>
     )
   }
 
   if (error) {
     return (
-      <div className="text-center">
-        <div className="text-red-600 dark:text-red-400 mb-4">{error}</div>
+      <div className="text-center py-12">
+        <div className="inline-flex items-center justify-center w-16 h-16 bg-error-100 dark:bg-error-900/20 rounded-full mb-4">
+          <MessageSquare className="h-8 w-8 text-error-600 dark:text-error-400" />
+        </div>
+        <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-2">
+          Unable to load conversations
+        </h3>
+        <p className="text-sm text-error-600 dark:text-error-400 mb-6 max-w-md mx-auto">
+          {error}
+        </p>
         <button
           onClick={loadConversations}
-          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          className="btn-primary"
         >
           Try Again
         </button>
@@ -409,26 +422,33 @@ export default function Conversations() {
   return (
     <div>
       {/* Header */}
-      <div className="flex justify-between items-center mb-6">
-        <div className="flex items-center space-x-2">
-          <MessageSquare className="h-6 w-6 text-blue-600" />
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
-            Latest Conversations
-          </h1>
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-8">
+        <div className="flex items-center space-x-3">
+          <div className="p-2 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
+            <MessageSquare className="h-6 w-6 text-primary-600 dark:text-primary-400" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-neutral-900 dark:text-neutral-100 tracking-tight">
+              Conversations
+            </h1>
+            <p className="text-sm text-neutral-500 dark:text-neutral-400">
+              View and manage your audio conversations
+            </p>
+          </div>
         </div>
-        <div className="flex items-center space-x-4">
-          <label className="flex items-center space-x-2 text-sm">
+        <div className="flex items-center space-x-3">
+          <label className="flex items-center space-x-2 px-3 py-2 bg-neutral-100 dark:bg-neutral-700/50 rounded-lg cursor-pointer hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors">
             <input
               type="checkbox"
               checked={debugMode}
               onChange={(e) => setDebugMode(e.target.checked)}
-              className="rounded border-gray-300"
+              className="rounded border-neutral-300 dark:border-neutral-600 text-primary-600 focus:ring-primary-500"
             />
-            <span className="text-gray-700 dark:text-gray-300">Debug Mode</span>
+            <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Debug Mode</span>
           </label>
           <button
             onClick={loadConversations}
-            className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+            className="btn-primary space-x-2"
           >
             <RefreshCw className="h-4 w-4" />
             <span>Refresh</span>
@@ -436,21 +456,60 @@ export default function Conversations() {
         </div>
       </div>
 
+      {/* Tab Navigation */}
+      {setActiveTab && (
+        <div className="mb-6 border-b border-neutral-200 dark:border-neutral-700">
+          <nav className="-mb-px flex space-x-8">
+            <button
+              onClick={() => setActiveTab('classic')}
+              className={`
+                py-4 px-1 border-b-2 font-medium text-sm transition-colors
+                ${activeTab === 'classic'
+                  ? 'border-primary-600 text-primary-600 dark:text-primary-400'
+                  : 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 dark:text-neutral-400 dark:hover:text-neutral-300'
+                }
+              `}
+            >
+              Classic View
+            </button>
+            <button
+              onClick={() => setActiveTab('timeline')}
+              className={`
+                py-4 px-1 border-b-2 font-medium text-sm transition-colors
+                ${activeTab === 'timeline'
+                  ? 'border-primary-600 text-primary-600 dark:text-primary-400'
+                  : 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 dark:text-neutral-400 dark:hover:text-neutral-300'
+                }
+              `}
+            >
+              Timeline
+            </button>
+          </nav>
+        </div>
+      )}
+
       {/* Conversations List */}
       <div className="space-y-6">
         {conversations.length === 0 ? (
-          <div className="text-center text-gray-500 dark:text-gray-400 py-12">
-            <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
-            <p>No conversations found</p>
+          <div className="text-center py-16">
+            <div className="inline-flex items-center justify-center w-20 h-20 bg-neutral-100 dark:bg-neutral-800 rounded-full mb-4">
+              <MessageSquare className="h-10 w-10 text-neutral-400 dark:text-neutral-600" />
+            </div>
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-2">
+              No conversations yet
+            </h3>
+            <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md mx-auto">
+              Start recording audio to create your first conversation and build your personal knowledge base.
+            </p>
           </div>
         ) : (
           conversations.map((conversation) => (
             <div
               key={conversation.conversation_id || conversation.audio_uuid}
-              className={`rounded-lg p-6 border ${
+              className={`rounded-xl p-6 border transition-all duration-200 ${
                 conversation.deleted
-                  ? 'bg-red-50 dark:bg-red-900/20 border-red-300 dark:border-red-700'
-                  : 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600'
+                  ? 'bg-error-50 dark:bg-error-900/10 border-error-200 dark:border-error-800/50'
+                  : 'bg-neutral-50 dark:bg-neutral-800/50 border-neutral-200 dark:border-neutral-700 hover:shadow-md hover:border-neutral-300 dark:hover:border-neutral-600'
               }`}
             >
               {/* Deleted Conversation Warning */}
diff --git a/backends/advanced/webui/src/pages/ConversationsRouter.tsx b/backends/advanced/webui/src/pages/ConversationsRouter.tsx
index c7e6e95c..3ec2e448 100644
--- a/backends/advanced/webui/src/pages/ConversationsRouter.tsx
+++ b/backends/advanced/webui/src/pages/ConversationsRouter.tsx
@@ -7,41 +7,11 @@ export default function ConversationsRouter() {
 
   return (
     <div>
-      {/* Tab Navigation */}
-      <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
-        <nav className="-mb-px flex space-x-8">
-          <button
-            onClick={() => setActiveTab('classic')}
-            className={`
-              py-4 px-1 border-b-2 font-medium text-sm transition-colors
-              ${activeTab === 'classic'
-                ? 'border-blue-600 text-blue-600 dark:text-blue-400'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
-              }
-            `}
-          >
-            Classic View
-          </button>
-          <button
-            onClick={() => setActiveTab('timeline')}
-            className={`
-              py-4 px-1 border-b-2 font-medium text-sm transition-colors
-              ${activeTab === 'timeline'
-                ? 'border-blue-600 text-blue-600 dark:text-blue-400'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
-              }
-            `}
-          >
-            Timeline
-          </button>
-        </nav>
-      </div>
-
       {/* Content */}
       {activeTab === 'classic' ? (
-        <Conversations />
+        <Conversations activeTab={activeTab} setActiveTab={setActiveTab} />
       ) : (
-        <ConversationsTimeline />
+        <ConversationsTimeline activeTab={activeTab} setActiveTab={setActiveTab} />
       )}
     </div>
   )
diff --git a/backends/advanced/webui/src/pages/ConversationsTimeline.tsx b/backends/advanced/webui/src/pages/ConversationsTimeline.tsx
index 5c3f748f..fe51d66a 100644
--- a/backends/advanced/webui/src/pages/ConversationsTimeline.tsx
+++ b/backends/advanced/webui/src/pages/ConversationsTimeline.tsx
@@ -193,7 +193,12 @@ function ConversationCard({ conversation, formatDuration }: ConversationCardProp
   )
 }
 
-export default function ConversationsTimeline() {
+interface ConversationsTimelineProps {
+  activeTab?: 'classic' | 'timeline'
+  setActiveTab?: (tab: 'classic' | 'timeline') => void
+}
+
+export default function ConversationsTimeline({ activeTab = 'timeline', setActiveTab }: ConversationsTimelineProps = {}) {
   const [conversations, setConversations] = useState<Conversation[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -277,6 +282,38 @@ export default function ConversationsTimeline() {
         </button>
       </div>
 
+      {/* Tab Navigation */}
+      {setActiveTab && (
+        <div className="mb-6 border-b border-neutral-200 dark:border-neutral-700">
+          <nav className="-mb-px flex space-x-8">
+            <button
+              onClick={() => setActiveTab('classic')}
+              className={`
+                py-4 px-1 border-b-2 font-medium text-sm transition-colors
+                ${activeTab === 'classic'
+                  ? 'border-primary-600 text-primary-600 dark:text-primary-400'
+                  : 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 dark:text-neutral-400 dark:hover:text-neutral-300'
+                }
+              `}
+            >
+              Classic View
+            </button>
+            <button
+              onClick={() => setActiveTab('timeline')}
+              className={`
+                py-4 px-1 border-b-2 font-medium text-sm transition-colors
+                ${activeTab === 'timeline'
+                  ? 'border-primary-600 text-primary-600 dark:text-primary-400'
+                  : 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 dark:text-neutral-400 dark:hover:text-neutral-300'
+                }
+              `}
+            >
+              Timeline
+            </button>
+          </nav>
+        </div>
+      )}
+
       {/* Timeline */}
       {conversations.length === 0 ? (
         <div className="text-center text-gray-500 dark:text-gray-400 py-12">
diff --git a/backends/advanced/webui/src/pages/LiveRecord.tsx b/backends/advanced/webui/src/pages/LiveRecord.tsx
index 4b763746..c1c44705 100644
--- a/backends/advanced/webui/src/pages/LiveRecord.tsx
+++ b/backends/advanced/webui/src/pages/LiveRecord.tsx
@@ -11,24 +11,31 @@ export default function LiveRecord() {
   return (
     <div>
       {/* Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex items-center space-x-2">
-          <Radio className="h-6 w-6 text-blue-600" />
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
-            Live Audio Recording
-          </h1>
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-8">
+        <div className="flex items-center space-x-3">
+          <div className="p-2 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
+            <Radio className="h-6 w-6 text-primary-600 dark:text-primary-400" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-neutral-900 dark:text-neutral-100 tracking-tight">
+              Live Audio Recording
+            </h1>
+            <p className="text-sm text-neutral-500 dark:text-neutral-400">
+              Record audio in real-time with streaming or batch processing
+            </p>
+          </div>
         </div>
 
         {/* Mode Toggle */}
-        <div className="flex items-center gap-2">
+        <div className="flex items-center space-x-3">
           <button
             onClick={() => recording.setMode('streaming')}
             disabled={recording.isRecording}
             className={`
               flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all
               ${recording.mode === 'streaming'
-                ? 'bg-blue-600 text-white shadow-md'
-                : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-gray-600'
+                ? 'bg-primary-600 text-white shadow-md'
+                : 'bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-300 dark:hover:bg-neutral-600'
               }
               ${recording.isRecording ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
             `}
@@ -42,8 +49,8 @@ export default function LiveRecord() {
             className={`
               flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all
               ${recording.mode === 'batch'
-                ? 'bg-blue-600 text-white shadow-md'
-                : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-gray-600'
+                ? 'bg-primary-600 text-white shadow-md'
+                : 'bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-300 dark:hover:bg-neutral-600'
               }
               ${recording.isRecording ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
             `}
@@ -55,8 +62,8 @@ export default function LiveRecord() {
       </div>
 
       {/* Mode Description */}
-      <div className="mb-4 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
-        <p className="text-sm text-gray-700 dark:text-gray-300">
+      <div className="mb-4 bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg p-3">
+        <p className="text-sm text-neutral-700 dark:text-neutral-300">
           {recording.mode === 'streaming' ? (
             <>
               <strong>Streaming Mode:</strong> Audio is sent in real-time chunks and processed immediately.
diff --git a/backends/advanced/webui/src/pages/LoginPage.tsx b/backends/advanced/webui/src/pages/LoginPage.tsx
index 7093e73a..1ffcfe89 100644
--- a/backends/advanced/webui/src/pages/LoginPage.tsx
+++ b/backends/advanced/webui/src/pages/LoginPage.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Navigate } from 'react-router-dom'
 import { useAuth } from '../contexts/AuthContext'
 import { BACKEND_URL } from '../services/api'
-import { Music, Eye, EyeOff } from 'lucide-react'
+import { Brain, Eye, EyeOff } from 'lucide-react'
 
 export default function LoginPage() {
   const [email, setEmail] = useState('')
@@ -51,23 +51,36 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-md w-full space-y-8">
-        <div>
-          <div className="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-blue-600">
-            <Music className="h-8 w-8 text-white" />
+    <div className="min-h-screen bg-gradient-to-br from-neutral-50 via-primary-50/30 to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
+      {/* Decorative background elements */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-primary-400/20 dark:bg-primary-500/10 rounded-full blur-3xl"></div>
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-primary-300/20 dark:bg-primary-600/10 rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="max-w-md w-full space-y-8 relative z-10">
+        {/* Logo & Header */}
+        <div className="text-center animate-fade-in">
+          <div className="mx-auto h-20 w-20 bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl flex items-center justify-center shadow-lg mb-6 transform transition-transform hover:scale-105">
+            <Brain className="h-10 w-10 text-white" />
           </div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">
-            Chronicle Dashboard
+          <h2 className="text-4xl font-bold text-neutral-900 dark:text-neutral-100 tracking-tight">
+            Chronicle
           </h2>
-          <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
-            Sign in to your account
+          <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400 font-medium">
+            AI-Powered Personal Audio System
+          </p>
+          <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-500">
+            Sign in to access your dashboard
           </p>
         </div>
-        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-          <div className="rounded-md shadow-sm -space-y-px">
-            <div>
-              <label htmlFor="email" className="sr-only">
+
+        {/* Login Form */}
+        <div className="card shadow-xl backdrop-blur-sm bg-white/90 dark:bg-neutral-800/90 p-8 space-y-6 animate-slide-up">
+          <form className="space-y-5" onSubmit={handleSubmit}>
+            {/* Email Input */}
+            <div className="space-y-2">
+              <label htmlFor="email" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                 Email address
               </label>
               <input
@@ -78,59 +91,83 @@ export default function LoginPage() {
                 required
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 rounded-t-md bg-white dark:bg-gray-800 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                placeholder="Email address"
+                className="input"
+                placeholder="you@example.com"
               />
             </div>
-            <div className="relative">
-              <label htmlFor="password" className="sr-only">
+
+            {/* Password Input */}
+            <div className="space-y-2">
+              <label htmlFor="password" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                 Password
               </label>
-              <input
-                id="password"
-                name="password"
-                type={showPassword ? 'text' : 'password'}
-                autoComplete="current-password"
-                required
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="appearance-none rounded-none relative block w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 rounded-b-md bg-white dark:bg-gray-800 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                placeholder="Password"
-              />
-              <button
-                type="button"
-                className="absolute inset-y-0 right-0 pr-3 flex items-center"
-                onClick={() => setShowPassword(!showPassword)}
-              >
-                {showPassword ? (
-                  <EyeOff className="h-5 w-5 text-gray-400" />
-                ) : (
-                  <Eye className="h-5 w-5 text-gray-400" />
-                )}
-              </button>
+              <div className="relative">
+                <input
+                  id="password"
+                  name="password"
+                  type={showPassword ? 'text' : 'password'}
+                  autoComplete="current-password"
+                  required
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="input pr-10"
+                  placeholder="Enter your password"
+                />
+                <button
+                  type="button"
+                  className="absolute inset-y-0 right-0 pr-3 flex items-center text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
+                  onClick={() => setShowPassword(!showPassword)}
+                  tabIndex={-1}
+                >
+                  {showPassword ? (
+                    <EyeOff className="h-5 w-5" />
+                  ) : (
+                    <Eye className="h-5 w-5" />
+                  )}
+                </button>
+              </div>
             </div>
-          </div>
 
-          {error && (
-            <div className="text-red-600 dark:text-red-400 text-sm text-center">
-              {error}
-            </div>
-          )}
+            {/* Error Message */}
+            {error && (
+              <div className="bg-error-50 dark:bg-error-900/20 border border-error-200 dark:border-error-800 rounded-lg p-3 animate-slide-down">
+                <p className="text-sm text-error-700 dark:text-error-300 text-center">
+                  {error}
+                </p>
+              </div>
+            )}
 
-          <div>
+            {/* Submit Button */}
             <button
               type="submit"
               disabled={isLoading}
-              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="btn-primary w-full py-3 text-base font-semibold shadow-md hover:shadow-lg transform transition-all hover:scale-[1.02] active:scale-[0.98]"
             >
               {isLoading ? (
-                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                <div className="flex items-center justify-center space-x-2">
+                  <div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent"></div>
+                  <span>Signing in...</span>
+                </div>
               ) : (
                 'Sign in'
               )}
             </button>
+          </form>
+
+          {/* Additional Info */}
+          <div className="pt-4 border-t border-neutral-200 dark:border-neutral-700">
+            <p className="text-xs text-center text-neutral-500 dark:text-neutral-400">
+              Protected by enterprise-grade security
+            </p>
           </div>
-        </form>
+        </div>
+
+        {/* Footer */}
+        <div className="text-center">
+          <p className="text-xs text-neutral-500 dark:text-neutral-500">
+            Chronicle Dashboard v1.0
+          </p>
+        </div>
       </div>
     </div>
   )
diff --git a/backends/advanced/webui/src/pages/Queue.tsx b/backends/advanced/webui/src/pages/Queue.tsx
index 3dc774f3..18521dcc 100644
--- a/backends/advanced/webui/src/pages/Queue.tsx
+++ b/backends/advanced/webui/src/pages/Queue.tsx
@@ -699,8 +699,8 @@ const Queue: React.FC = () => {
         <div className="flex items-center space-x-3">
           <Layers className="w-6 h-6 text-blue-600" />
           <div>
-            <h1 className="text-2xl font-bold text-gray-900">Queue Management</h1>
-            <p className="text-xs text-gray-500">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Queue Management</h1>
+            <p className="text-xs text-gray-500 dark:text-gray-400">
               Last updated: {new Date(lastUpdate).toLocaleTimeString()} • Auto-refresh every 2s
             </p>
           </div>
@@ -748,71 +748,71 @@ const Queue: React.FC = () => {
       {/* Stats Cards */}
       {stats && (
         <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
-          <div className="bg-white rounded-lg border p-4">
+          <div className="bg-white dark:bg-neutral-800 rounded-lg border p-4">
             <div className="flex items-center space-x-2">
-              <Layers className="w-5 h-5 text-gray-600" />
+              <Layers className="w-5 h-5 text-gray-600 dark:text-gray-400" />
               <div>
-                <p className="text-sm text-gray-600">Total</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">Total</p>
                 <p className="text-xl font-semibold">{stats.total_jobs}</p>
               </div>
             </div>
           </div>
 
-          <div className="bg-white rounded-lg border p-4">
+          <div className="bg-white dark:bg-neutral-800 rounded-lg border p-4">
             <div className="flex items-center space-x-2">
               <Clock className="w-5 h-5 text-yellow-600" />
               <div>
-                <p className="text-sm text-gray-600">Queued</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">Queued</p>
                 <p className="text-xl font-semibold text-yellow-600">{stats.queued_jobs}</p>
               </div>
             </div>
           </div>
 
-          <div className="bg-white rounded-lg border p-4">
+          <div className="bg-white dark:bg-neutral-800 rounded-lg border p-4">
             <div className="flex items-center space-x-2">
               <Play className={`w-5 h-5 text-blue-600 ${stats.processing_jobs > 0 ? 'animate-pulse' : ''}`} />
               <div>
-                <p className="text-sm text-gray-600">Processing</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">Processing</p>
                 <p className="text-xl font-semibold text-blue-600">{stats.processing_jobs}</p>
               </div>
             </div>
           </div>
 
-          <div className="bg-white rounded-lg border p-4">
+          <div className="bg-white dark:bg-neutral-800 rounded-lg border p-4">
             <div className="flex items-center space-x-2">
               <CheckCircle className="w-5 h-5 text-green-600" />
               <div>
-                <p className="text-sm text-gray-600">Completed</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">Completed</p>
                 <p className="text-xl font-semibold text-green-600">{stats.completed_jobs}</p>
               </div>
             </div>
           </div>
 
-          <div className="bg-white rounded-lg border p-4">
+          <div className="bg-white dark:bg-neutral-800 rounded-lg border p-4">
             <div className="flex items-center space-x-2">
               <XCircle className="w-5 h-5 text-red-600" />
               <div>
-                <p className="text-sm text-gray-600">Failed</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">Failed</p>
                 <p className="text-xl font-semibold text-red-600">{stats.failed_jobs}</p>
               </div>
             </div>
           </div>
 
-          <div className="bg-white rounded-lg border p-4">
+          <div className="bg-white dark:bg-neutral-800 rounded-lg border p-4">
             <div className="flex items-center space-x-2">
-              <StopCircle className="w-5 h-5 text-gray-600" />
+              <StopCircle className="w-5 h-5 text-gray-600 dark:text-gray-400" />
               <div>
-                <p className="text-sm text-gray-600">Cancelled</p>
-                <p className="text-xl font-semibold text-gray-600">{stats.cancelled_jobs}</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">Cancelled</p>
+                <p className="text-xl font-semibold text-gray-600 dark:text-gray-400">{stats.cancelled_jobs}</p>
               </div>
             </div>
           </div>
 
-          <div className="bg-white rounded-lg border p-4">
+          <div className="bg-white dark:bg-neutral-800 rounded-lg border p-4">
             <div className="flex items-center space-x-2">
               <Pause className="w-5 h-5 text-blue-600" />
               <div>
-                <p className="text-sm text-gray-600">Deferred</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">Deferred</p>
                 <p className="text-xl font-semibold text-blue-600">{stats.deferred_jobs}</p>
               </div>
             </div>
@@ -822,7 +822,7 @@ const Queue: React.FC = () => {
 
       {/* Streaming Status */}
       {streamingStatus && (
-        <div className="bg-white rounded-lg border overflow-hidden">
+        <div className="bg-white dark:bg-neutral-800 rounded-lg border overflow-hidden">
           <div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
             <h3 className="text-lg font-medium">Audio Streaming & Conversations</h3>
             <div className="flex items-center space-x-2">
@@ -917,7 +917,7 @@ const Queue: React.FC = () => {
                   console.log(`  - All listen jobs (active): ${allListenJobs.length}, showing latest: ${listenJobs.length}`);
 
                   return (
-                    <div key={streamKey} className="p-4 bg-gray-50 rounded-lg border border-gray-200">
+                    <div key={streamKey} className="p-4 bg-gray-50 rounded-lg border border-gray-200 dark:border-gray-700">
                       <div className="flex items-center justify-between mb-2">
                         <span className="text-sm font-medium">{streamKey}</span>
                         <span className="text-xs px-2 py-0.5 bg-green-100 text-green-700 rounded">Active</span>
@@ -925,21 +925,21 @@ const Queue: React.FC = () => {
 
                       <div className="space-y-2">
                         <div className="flex justify-between text-xs">
-                          <span className="text-gray-600">Stream Length:</span>
+                          <span className="text-gray-600 dark:text-gray-400">Stream Length:</span>
                           <span className="font-medium">{health.stream_length}</span>
                         </div>
                         <div className="flex justify-between text-xs">
-                          <span className="text-gray-600">Age:</span>
+                          <span className="text-gray-600 dark:text-gray-400">Age:</span>
                           <span className="font-medium">{(health.stream_age_seconds || 0).toFixed(0)}s</span>
                         </div>
                         <div className="flex justify-between text-xs">
-                          <span className="text-gray-600">Pending:</span>
+                          <span className="text-gray-600 dark:text-gray-400">Pending:</span>
                           <span className={`font-medium ${health.total_pending && health.total_pending > 0 ? 'text-yellow-600' : 'text-green-600'}`}>
                             {health.total_pending}
                           </span>
                         </div>
                         {health.consumer_groups && health.consumer_groups.map((group) => (
-                          <div key={group.name} className="mt-2 pt-2 border-t border-gray-200">
+                          <div key={group.name} className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
                             <div className="text-xs text-gray-600 mb-1">{group.name}:</div>
                             {group.consumers.map((consumer) => (
                               <div key={consumer.name} className="flex justify-between text-xs pl-2">
@@ -954,7 +954,7 @@ const Queue: React.FC = () => {
 
                         {/* Current Speech Detection Job */}
                         {listenJobs.length > 0 && (
-                          <div className="mt-2 pt-2 border-t border-gray-200">
+                          <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
                             <div className="text-xs text-gray-600 mb-1">Current Speech Detection:</div>
                             {listenJobs.map((job) => {
                               const runtime = job.started_at
@@ -964,7 +964,7 @@ const Queue: React.FC = () => {
                               const seconds = runtime % 60;
 
                               return (
-                                <div key={job.job_id} className="bg-white rounded p-2 space-y-1">
+                                <div key={job.job_id} className="bg-white dark:bg-neutral-800 rounded p-2 space-y-1">
                                   <div className="flex items-center justify-between">
                                     <div className="flex items-center space-x-1">
                                       {getStatusIcon(job.status)}
@@ -1019,17 +1019,17 @@ const Queue: React.FC = () => {
                                     if (!session) return null;
 
                                     return (
-                                      <div className="text-xs space-y-1 pl-4 mt-2 pt-2 border-t border-gray-200">
+                                      <div className="text-xs space-y-1 pl-4 mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
                                         <div className="font-semibold text-gray-700 mb-1">Speech Detection Events:</div>
                                         {session.last_event && (
                                           <div className="flex justify-between">
-                                            <span className="text-gray-600">Last Event:</span>
+                                            <span className="text-gray-600 dark:text-gray-400">Last Event:</span>
                                             <span className="text-gray-800 font-mono text-xs">{session.last_event.split(':')[0]}</span>
                                           </div>
                                         )}
                                         {session.speaker_check_status && (
                                           <div className="flex justify-between">
-                                            <span className="text-gray-600">Speaker Check:</span>
+                                            <span className="text-gray-600 dark:text-gray-400">Speaker Check:</span>
                                             <span className={`font-medium ${
                                               session.speaker_check_status === 'enrolled' ? 'text-green-700' :
                                               session.speaker_check_status === 'checking' ? 'text-blue-700' :
@@ -1041,7 +1041,7 @@ const Queue: React.FC = () => {
                                         )}
                                         {session.identified_speakers && (
                                           <div className="flex justify-between">
-                                            <span className="text-gray-600">Speakers:</span>
+                                            <span className="text-gray-600 dark:text-gray-400">Speakers:</span>
                                             <span className="text-green-700 font-medium">{session.identified_speakers}</span>
                                           </div>
                                         )}
@@ -1134,7 +1134,7 @@ const Queue: React.FC = () => {
 
                   if (conversationMap.size === 0) {
                     return (
-                      <div className="text-center py-8 text-gray-500 text-sm bg-gray-50 rounded-lg border border-gray-200">
+                      <div className="text-center py-8 text-gray-500 text-sm bg-gray-50 rounded-lg border border-gray-200 dark:border-gray-700">
                         No active conversations
                       </div>
                     );
@@ -1180,7 +1180,7 @@ const Queue: React.FC = () => {
                                   ) : (
                                     <Brain className="w-4 h-4 text-cyan-600 animate-pulse" />
                                   )}
-                                  <span className="text-sm font-medium text-gray-900">{clientId}</span>
+                                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{clientId}</span>
                                   {hasFailedJob ? (
                                     <span className="text-xs px-2 py-0.5 bg-red-200 text-red-800 rounded font-medium">
                                       {failedJobCount} Error{failedJobCount > 1 ? 's' : ''}
@@ -1194,7 +1194,7 @@ const Queue: React.FC = () => {
                                     </span>
                                   )}
                                 </div>
-                                <div className="mt-1 text-xs text-gray-600">
+                                <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">
                                   Conversation: {conversationId.substring(0, 8)}... •
                                   {createdAt && `Started: ${new Date(createdAt).toLocaleTimeString()} • `}
                                   Words: {wordCount}
@@ -1210,7 +1210,7 @@ const Queue: React.FC = () => {
 
                           {/* Expanded Jobs Section */}
                           {isExpanded && (
-                            <div className="border-t border-cyan-200 bg-white p-3">
+                            <div className="border-t border-cyan-200 bg-white dark:bg-neutral-800 p-3">
                               {/* Pipeline Timeline */}
                               <div className="mb-4">
                                 <h5 className="text-xs font-medium text-gray-700 mb-3">Pipeline Timeline:</h5>
@@ -1290,7 +1290,7 @@ const Queue: React.FC = () => {
                                   return (
                                     <div className="space-y-2">
                                       {/* Time axis */}
-                                      <div className="relative h-4 border-b border-gray-300">
+                                      <div className="relative h-4 border-b border-gray-300 dark:border-gray-600">
                                         {timeMarkers.map((marker, idx) => (
                                           <div
                                             key={idx}
@@ -1380,7 +1380,7 @@ const Queue: React.FC = () => {
                                             <span className={`text-xs px-1.5 py-0.5 rounded ${getStatusColor(job.status)}`}>
                                               {job.status}
                                             </span>
-                                            <span className="text-xs text-gray-500">{job.queue}</span>
+                                            <span className="text-xs text-gray-500 dark:text-gray-400">{job.queue}</span>
                                             {/* Show memory count badge on collapsed card */}
                                             {!expandedJobs.has(job.job_id) && job.job_type === 'process_memory_job' && job.result?.memories_created !== undefined && (
                                               <span className="text-xs px-1.5 py-0.5 bg-pink-100 text-pink-700 rounded">
@@ -1405,7 +1405,7 @@ const Queue: React.FC = () => {
 
                                           {/* Show job-specific metadata */}
                                           {job.meta && (
-                                            <div className="space-y-0.5 pl-2 border-l-2 border-gray-300">
+                                            <div className="space-y-0.5 pl-2 border-l-2 border-gray-300 dark:border-gray-600">
                                               {/* open_conversation_job metadata */}
                                               {job.job_type === 'open_conversation_job' && (
                                                 <>
@@ -1474,7 +1474,7 @@ const Queue: React.FC = () => {
 
                                               {/* Show conversation_id if present */}
                                               {job.meta.conversation_id && (
-                                                <div className="font-mono text-gray-500">
+                                                <div className="font-mono text-gray-500 dark:text-gray-400">
                                                   Conv: {job.meta.conversation_id.substring(0, 8)}...
                                                 </div>
                                               )}
@@ -1510,9 +1510,9 @@ const Queue: React.FC = () => {
               {/* Completed Conversations - Grouped by conversation_id */}
               <div>
                 <div className="flex items-center justify-between mb-3">
-                  <h4 className="text-sm font-medium text-gray-700">Completed Conversations</h4>
+                  <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">Completed Conversations</h4>
                   <div className="flex items-center space-x-2">
-                    <label className="text-xs text-gray-600">Time range:</label>
+                    <label className="text-xs text-gray-600 dark:text-gray-400">Time range:</label>
                     <select
                       value={completedConvTimeRange}
                       onChange={(e) => {
@@ -1597,7 +1597,7 @@ const Queue: React.FC = () => {
 
                   if (conversationMap.size === 0) {
                     return (
-                      <div className="text-center py-8 text-gray-500 text-sm bg-gray-50 rounded-lg border border-gray-200">
+                      <div className="text-center py-8 text-gray-500 text-sm bg-gray-50 rounded-lg border border-gray-200 dark:border-gray-700">
                         No completed conversations
                       </div>
                     );
@@ -1629,7 +1629,7 @@ const Queue: React.FC = () => {
 
                   if (conversationsArray.length === 0) {
                     return (
-                      <div className="text-center py-8 text-gray-500 text-sm bg-gray-50 rounded-lg border border-gray-200">
+                      <div className="text-center py-8 text-gray-500 text-sm bg-gray-50 rounded-lg border border-gray-200 dark:border-gray-700">
                         No completed conversations in the selected time range
                       </div>
                     );
@@ -1702,7 +1702,7 @@ const Queue: React.FC = () => {
                                     <ChevronRight className={`w-4 h-4 ${iconColor}`} />
                                   )}
                                   <StatusIcon className={`w-4 h-4 ${iconColor}`} />
-                                  <span className="text-sm font-medium text-gray-900">{clientId}</span>
+                                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{clientId}</span>
                                   <span className={`text-xs px-2 py-0.5 rounded font-medium ${statusBadge}`}>
                                     {statusText}
                                   </span>
@@ -1712,7 +1712,7 @@ const Queue: React.FC = () => {
                                     </span>
                                   )}
                                 </div>
-                                <div className="mt-1 text-xs text-gray-600">
+                                <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">
                                   Conversation: {conversationId.substring(0, 8)}... •
                                   Words: {wordCount}
                                   {createdAt && (
@@ -1723,7 +1723,7 @@ const Queue: React.FC = () => {
                                 {allComplete ? (
                                   <>
                                     {title ? (
-                                      <div className="mt-1 text-sm font-medium text-gray-900">
+                                      <div className="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">
                                         {title}
                                       </div>
                                     ) : transcript ? (
@@ -1749,7 +1749,7 @@ const Queue: React.FC = () => {
 
                             {/* Expanded Jobs Section */}
                             {isExpanded && (
-                              <div className={`border-t bg-white p-3 ${
+                              <div className={`border-t bg-white dark:bg-neutral-800 p-3 ${
                                 allComplete ? 'border-green-200' : 'border-yellow-200'
                               }`}>
                                 {/* Pipeline Timeline */}
@@ -1831,7 +1831,7 @@ const Queue: React.FC = () => {
                                     return (
                                       <div className="space-y-2">
                                         {/* Time axis */}
-                                        <div className="relative h-4 border-b border-gray-300">
+                                        <div className="relative h-4 border-b border-gray-300 dark:border-gray-600">
                                           {timeMarkers.map((marker, idx) => (
                                             <div
                                               key={idx}
@@ -1920,7 +1920,7 @@ const Queue: React.FC = () => {
                                             <span className={`text-xs px-1.5 py-0.5 rounded ${getStatusColor(job.status)}`}>
                                               {job.status}
                                             </span>
-                                            <span className="text-xs text-gray-500">{job.queue || job.data?.queue || 'unknown'}</span>
+                                            <span className="text-xs text-gray-500 dark:text-gray-400">{job.queue || job.data?.queue || 'unknown'}</span>
                                             {/* Show memory count badge on collapsed card */}
                                             {!expandedJobs.has(job.job_id) && job.job_type === 'process_memory_job' && job.result?.memories_created !== undefined && (
                                               <span className="text-xs px-1.5 py-0.5 bg-pink-100 text-pink-700 rounded">
@@ -1953,7 +1953,7 @@ const Queue: React.FC = () => {
 
                                             {/* Show job-specific metadata */}
                                             {job.meta && (
-                                              <div className="space-y-0.5 pl-2 border-l-2 border-gray-300">
+                                              <div className="space-y-0.5 pl-2 border-l-2 border-gray-300 dark:border-gray-600">
                                                 {/* open_conversation_job metadata */}
                                                 {job.job_type === 'open_conversation_job' && (
                                                   <>
@@ -2012,7 +2012,7 @@ const Queue: React.FC = () => {
 
                                                 {/* Show conversation_id if present */}
                                                 {job.meta.conversation_id && (
-                                                  <div className="font-mono text-gray-500">
+                                                  <div className="font-mono text-gray-500 dark:text-gray-400">
                                                     Conv: {job.meta.conversation_id.substring(0, 8)}...
                                                   </div>
                                                 )}
@@ -2035,8 +2035,8 @@ const Queue: React.FC = () => {
 
                       {/* Pagination Controls */}
                       {totalPages > 1 && (
-                        <div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-200">
-                          <div className="text-xs text-gray-600">
+                        <div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+                          <div className="text-xs text-gray-600 dark:text-gray-400">
                             Showing {startIndex + 1}-{Math.min(endIndex, totalConversations)} of {totalConversations} conversations
                           </div>
                           <div className="flex items-center space-x-2">
@@ -2051,7 +2051,7 @@ const Queue: React.FC = () => {
                             >
                               Previous
                             </button>
-                            <span className="text-xs text-gray-600">
+                            <span className="text-xs text-gray-600 dark:text-gray-400">
                               Page {completedConvPage} of {totalPages}
                             </span>
                             <button
@@ -2078,7 +2078,7 @@ const Queue: React.FC = () => {
       )}
 
       {/* Filters */}
-      <div className="bg-white rounded-lg border p-4">
+      <div className="bg-white dark:bg-neutral-800 rounded-lg border p-4">
         <h3 className="text-lg font-medium mb-4">Filters</h3>
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
           <div>
@@ -2147,14 +2147,14 @@ const Queue: React.FC = () => {
       </div>
 
           {/* Jobs Table */}
-      <div className="bg-white rounded-lg border overflow-hidden">
-        <div className="px-6 py-4 border-b border-gray-200">
+      <div className="bg-white dark:bg-neutral-800 rounded-lg border overflow-hidden">
+        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
           <h3 className="text-lg font-medium">Jobs</h3>
         </div>
 
         <div className="overflow-x-auto">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead className="bg-gray-50 dark:bg-gray-800">
               <tr>
                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">Date</th>
                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">Conversation ID</th>
@@ -2165,9 +2165,9 @@ const Queue: React.FC = () => {
                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">Actions</th>
               </tr>
             </thead>
-            <tbody className="bg-white divide-y divide-gray-200">
+            <tbody className="bg-white dark:bg-neutral-800 divide-y divide-gray-200 dark:divide-gray-700">
               {jobs.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()).map((job) => (
-                <tr key={job.job_id} className="hover:bg-gray-50">
+                <tr key={job.job_id} className="hover:bg-gray-50 dark:bg-gray-800">
                   <td className="px-4 py-3 text-sm text-gray-500 whitespace-nowrap">
                     {new Date(job.created_at).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
                   </td>
@@ -2182,7 +2182,7 @@ const Queue: React.FC = () => {
                     </div>
                   </td>
                   <td className="px-4 py-3 whitespace-nowrap">
-                    <div className="text-sm text-gray-900">{getJobTypeShort(job.job_type)}</div>
+                    <div className="text-sm text-gray-900 dark:text-gray-100">{getJobTypeShort(job.job_type)}</div>
                   </td>
                   <td className="px-4 py-3 whitespace-nowrap">
                     <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${getStatusColor(job.status)}`}>
@@ -2226,7 +2226,7 @@ const Queue: React.FC = () => {
                       {job.status === 'completed' && (
                         <button
                           onClick={() => cancelJob(job.job_id)}
-                          className="text-gray-400 hover:text-gray-600"
+                          className="text-gray-400 hover:text-gray-600 dark:text-gray-400"
                           title="Delete job"
                         >
                           <Trash2 className="w-4 h-4" />
@@ -2242,22 +2242,22 @@ const Queue: React.FC = () => {
 
         {/* Pagination */}
         {pagination.total > pagination.limit && (
-          <div className="bg-white px-4 py-3 border-t border-gray-200 flex items-center justify-between">
-            <div className="text-sm text-gray-700">
+          <div className="bg-white dark:bg-neutral-800 px-4 py-3 border-t border-gray-200 flex items-center justify-between">
+            <div className="text-sm text-gray-700 dark:text-gray-300">
               Showing {pagination.offset + 1} to {Math.min(pagination.offset + pagination.limit, pagination.total)} of {pagination.total} results
             </div>
             <div className="flex space-x-2">
               <button
                 onClick={prevPage}
                 disabled={pagination.offset === 0}
-                className="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
+                className="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white dark:bg-neutral-800 hover:bg-gray-50 disabled:opacity-50"
               >
                 Previous
               </button>
               <button
                 onClick={nextPage}
                 disabled={!pagination.has_more}
-                className="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
+                className="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white dark:bg-neutral-800 hover:bg-gray-50 disabled:opacity-50"
               >
                 Next
               </button>
@@ -2270,10 +2270,10 @@ const Queue: React.FC = () => {
       {/* Job Details Modal */}
       {selectedJob && (
         <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-          <div className="relative top-20 mx-auto p-5 border w-11/12 max-w-6xl shadow-lg rounded-md bg-white">
+          <div className="relative top-20 mx-auto p-5 border w-11/12 max-w-6xl shadow-lg rounded-md bg-white dark:bg-neutral-800">
             <div className="flex justify-between items-center mb-4">
-              <h3 className="text-lg font-medium text-gray-900">Job Details</h3>
-              <button onClick={() => setSelectedJob(null)} className="text-gray-400 hover:text-gray-600">
+              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Job Details</h3>
+              <button onClick={() => setSelectedJob(null)} className="text-gray-400 hover:text-gray-600 dark:text-gray-400">
                 <X className="w-5 h-5" />
               </button>
             </div>
@@ -2286,11 +2286,11 @@ const Queue: React.FC = () => {
               <div className="space-y-4">
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium text-gray-700">Job ID</label>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Job ID</label>
                     <p className="text-sm text-gray-900 font-mono">{selectedJob.job_id}</p>
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700">Status</label>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Status</label>
                     <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(selectedJob.status)}`}>
                       {getStatusIcon(selectedJob.status)}
                       <span className="ml-1">{selectedJob.status.charAt(0).toUpperCase() + selectedJob.status.slice(1)}</span>
@@ -2298,33 +2298,33 @@ const Queue: React.FC = () => {
                   </div>
                   {selectedJob.description && (
                     <div className="col-span-2">
-                      <label className="block text-sm font-medium text-gray-700">Description</label>
-                      <p className="text-sm text-gray-900">{selectedJob.description}</p>
+                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
+                      <p className="text-sm text-gray-900 dark:text-gray-100">{selectedJob.description}</p>
                     </div>
                   )}
                   {selectedJob.func_name && (
                     <div className="col-span-2">
-                      <label className="block text-sm font-medium text-gray-700">Function Name</label>
+                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Function Name</label>
                       <p className="text-sm text-gray-900 font-mono">{selectedJob.func_name}</p>
                     </div>
                   )}
                   <div>
-                    <label className="block text-sm font-medium text-gray-700">Created</label>
-                    <p className="text-sm text-gray-900">{selectedJob.created_at ? formatDate(selectedJob.created_at) : '-'}</p>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Created</label>
+                    <p className="text-sm text-gray-900 dark:text-gray-100">{selectedJob.created_at ? formatDate(selectedJob.created_at) : '-'}</p>
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700">Started</label>
-                    <p className="text-sm text-gray-900">{selectedJob.started_at ? formatDate(selectedJob.started_at) : '-'}</p>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Started</label>
+                    <p className="text-sm text-gray-900 dark:text-gray-100">{selectedJob.started_at ? formatDate(selectedJob.started_at) : '-'}</p>
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700">Ended</label>
-                    <p className="text-sm text-gray-900">{selectedJob.ended_at ? formatDate(selectedJob.ended_at) : '-'}</p>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Ended</label>
+                    <p className="text-sm text-gray-900 dark:text-gray-100">{selectedJob.ended_at ? formatDate(selectedJob.ended_at) : '-'}</p>
                   </div>
                 </div>
 
                 {selectedJob.args && selectedJob.args.length > 0 && (
                   <div>
-                    <label className="block text-sm font-medium text-gray-700">Arguments</label>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Arguments</label>
                     <pre className="text-xs text-gray-900 bg-gray-50 p-2 rounded overflow-auto max-h-64 whitespace-pre-wrap break-words">
                       {JSON.stringify(selectedJob.args, null, 2)}
                     </pre>
@@ -2333,7 +2333,7 @@ const Queue: React.FC = () => {
 
                 {selectedJob.kwargs && Object.keys(selectedJob.kwargs).length > 0 && (
                   <div>
-                    <label className="block text-sm font-medium text-gray-700">Keyword Arguments</label>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Keyword Arguments</label>
                     <pre className="text-xs text-gray-900 bg-gray-50 p-2 rounded overflow-auto max-h-64 whitespace-pre-wrap break-words">
                       {JSON.stringify(selectedJob.kwargs, null, 2)}
                     </pre>
@@ -2342,7 +2342,7 @@ const Queue: React.FC = () => {
 
                 {selectedJob.error_message && (
                   <div>
-                    <label className="block text-sm font-medium text-gray-700">Error</label>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Error</label>
                     <pre className="text-xs text-red-600 bg-red-50 p-2 rounded overflow-auto max-h-64 whitespace-pre-wrap break-words">
                       {selectedJob.error_message}
                     </pre>
@@ -2351,7 +2351,7 @@ const Queue: React.FC = () => {
 
                 {selectedJob.result && (
                   <div>
-                    <label className="block text-sm font-medium text-gray-700">Result</label>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Result</label>
                     <pre className="text-xs text-gray-900 bg-green-50 p-2 rounded overflow-auto max-h-64 whitespace-pre-wrap break-words">
                       {JSON.stringify(selectedJob.result, null, 2)}
                     </pre>
@@ -2399,7 +2399,7 @@ const Queue: React.FC = () => {
                         {selectedJob.meta.transcript && (
                           <div className="mt-2">
                             <div className="text-sm font-medium mb-1">Transcript:</div>
-                            <div className="text-sm italic text-gray-700 bg-white p-2 rounded border border-gray-200 max-h-32 overflow-y-auto">
+                            <div className="text-sm italic text-gray-700 bg-white dark:bg-neutral-800 p-2 rounded border border-gray-200 max-h-32 overflow-y-auto">
                               "{selectedJob.meta.transcript}"
                             </div>
                           </div>
@@ -2501,7 +2501,7 @@ const Queue: React.FC = () => {
 
                     {/* Raw JSON metadata (collapsible) */}
                     <details className="mt-2">
-                      <summary className="text-sm font-medium text-gray-700 cursor-pointer hover:text-gray-900">
+                      <summary className="text-sm font-medium text-gray-700 cursor-pointer hover:text-gray-900 dark:text-gray-100">
                         Raw Metadata JSON
                       </summary>
                       <pre className="text-xs text-gray-900 bg-blue-50 p-2 rounded overflow-auto max-h-64 mt-2 whitespace-pre-wrap break-words">
@@ -2519,13 +2519,13 @@ const Queue: React.FC = () => {
       {/* Flush Jobs Modal */}
       {showFlushModal && (
         <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-          <div className="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white">
+          <div className="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white dark:bg-neutral-800">
             <div className="flex justify-between items-center mb-4">
               <h3 className="text-lg font-medium text-gray-900 flex items-center">
                 <Trash2 className="w-5 h-5 mr-2" />
                 Flush Jobs
               </h3>
-              <button onClick={() => setShowFlushModal(false)} className="text-gray-400 hover:text-gray-600">
+              <button onClick={() => setShowFlushModal(false)} className="text-gray-400 hover:text-gray-600 dark:text-gray-400">
                 <X className="w-5 h-5" />
               </button>
             </div>
@@ -2631,7 +2631,7 @@ const Queue: React.FC = () => {
                             onChange={(e) => setFlushSettings(prev => ({ ...prev, include_failed: e.target.checked }))}
                             className="text-red-600"
                           />
-                          <span className="text-xs text-gray-700">Also flush failed jobs</span>
+                          <span className="text-xs text-gray-700 dark:text-gray-300">Also flush failed jobs</span>
                         </label>
 
                         <label className="flex items-center space-x-2">
@@ -2641,7 +2641,7 @@ const Queue: React.FC = () => {
                             onChange={(e) => setFlushSettings(prev => ({ ...prev, include_completed: e.target.checked }))}
                             className="text-red-600"
                           />
-                          <span className="text-xs text-gray-700">Also flush completed jobs</span>
+                          <span className="text-xs text-gray-700 dark:text-gray-300">Also flush completed jobs</span>
                         </label>
                       </div>
                     </div>
@@ -2652,7 +2652,7 @@ const Queue: React.FC = () => {
               <div className="flex space-x-2 pt-4 border-t">
                 <button
                   onClick={() => setShowFlushModal(false)}
-                  className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
+                  className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 dark:bg-gray-800"
                 >
                   Cancel
                 </button>
diff --git a/backends/advanced/webui/tailwind.config.js b/backends/advanced/webui/tailwind.config.js
index 73324ed5..4ea52e7a 100644
--- a/backends/advanced/webui/tailwind.config.js
+++ b/backends/advanced/webui/tailwind.config.js
@@ -6,7 +6,200 @@ export default {
   ],
   darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      // Color Palette - S-Tier Design System
+      colors: {
+        // Primary Brand Color - Chronicle Blue
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          950: '#172554',
+        },
+        // Neutrals - Extended gray scale
+        neutral: {
+          0: '#ffffff',
+          50: '#fafafa',
+          100: '#f5f5f5',
+          200: '#e5e5e5',
+          300: '#d4d4d4',
+          400: '#a3a3a3',
+          500: '#737373',
+          600: '#525252',
+          700: '#404040',
+          800: '#262626',
+          900: '#171717',
+          950: '#0a0a0a',
+        },
+        // Semantic Colors
+        success: {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#22c55e',
+          600: '#16a34a',
+          700: '#15803d',
+          800: '#166534',
+          900: '#14532d',
+        },
+        error: {
+          50: '#fef2f2',
+          100: '#fee2e2',
+          200: '#fecaca',
+          300: '#fca5a5',
+          400: '#f87171',
+          500: '#ef4444',
+          600: '#dc2626',
+          700: '#b91c1c',
+          800: '#991b1b',
+          900: '#7f1d1d',
+        },
+        warning: {
+          50: '#fffbeb',
+          100: '#fef3c7',
+          200: '#fde68a',
+          300: '#fcd34d',
+          400: '#fbbf24',
+          500: '#f59e0b',
+          600: '#d97706',
+          700: '#b45309',
+          800: '#92400e',
+          900: '#78350f',
+        },
+        info: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+      },
+      // Typography Scale
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', 'monospace'],
+      },
+      fontSize: {
+        'xs': ['0.75rem', { lineHeight: '1.5', letterSpacing: '0.01em' }],
+        'sm': ['0.875rem', { lineHeight: '1.5', letterSpacing: '0.01em' }],
+        'base': ['1rem', { lineHeight: '1.6', letterSpacing: '0' }],
+        'lg': ['1.125rem', { lineHeight: '1.6', letterSpacing: '0' }],
+        'xl': ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
+        '2xl': ['1.5rem', { lineHeight: '1.4', letterSpacing: '-0.01em' }],
+        '3xl': ['1.875rem', { lineHeight: '1.3', letterSpacing: '-0.02em' }],
+        '4xl': ['2.25rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }],
+        '5xl': ['3rem', { lineHeight: '1.1', letterSpacing: '-0.03em' }],
+      },
+      // Spacing Scale - 8px base system
+      spacing: {
+        '0': '0',
+        'px': '1px',
+        '0.5': '0.125rem',  // 2px
+        '1': '0.25rem',     // 4px
+        '1.5': '0.375rem',  // 6px
+        '2': '0.5rem',      // 8px
+        '3': '0.75rem',     // 12px
+        '4': '1rem',        // 16px
+        '5': '1.25rem',     // 20px
+        '6': '1.5rem',      // 24px
+        '8': '2rem',        // 32px
+        '10': '2.5rem',     // 40px
+        '12': '3rem',       // 48px
+        '16': '4rem',       // 64px
+        '20': '5rem',       // 80px
+        '24': '6rem',       // 96px
+      },
+      // Border Radius
+      borderRadius: {
+        'none': '0',
+        'sm': '0.25rem',    // 4px
+        'DEFAULT': '0.5rem', // 8px
+        'md': '0.5rem',     // 8px
+        'lg': '0.75rem',    // 12px
+        'xl': '1rem',       // 16px
+        '2xl': '1.5rem',    // 24px
+        'full': '9999px',
+      },
+      // Shadows - Refined elevation system
+      boxShadow: {
+        'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+        'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
+        'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+        'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+        'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+        'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+        'none': 'none',
+      },
+      // Animation & Transitions
+      transitionDuration: {
+        '75': '75ms',
+        '100': '100ms',
+        '150': '150ms',
+        '200': '200ms',
+        '300': '300ms',
+        '500': '500ms',
+        '700': '700ms',
+      },
+      transitionTimingFunction: {
+        'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
+        'bounce': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+      },
+      // Z-index scale
+      zIndex: {
+        '0': '0',
+        '10': '10',
+        '20': '20',
+        '30': '30',
+        '40': '40',
+        '50': '50',
+        'dropdown': '1000',
+        'sticky': '1020',
+        'fixed': '1030',
+        'modal': '1040',
+        'popover': '1050',
+        'tooltip': '1060',
+      },
+      // Backdrop blur
+      backdropBlur: {
+        xs: '2px',
+        sm: '4px',
+        DEFAULT: '8px',
+        md: '12px',
+        lg: '16px',
+        xl: '24px',
+      },
+    },
   },
   plugins: [],
+  safelist: [
+    // Gradient utilities
+    'bg-gradient-to-br',
+    'bg-gradient-to-r',
+    'from-primary-500',
+    'to-primary-700',
+    'from-primary-400',
+    'to-primary-600',
+    'from-neutral-50',
+    'via-primary-50/30',
+    'to-neutral-100',
+    // Backdrop blur for glassmorphism
+    'backdrop-blur-lg',
+    'bg-white/80',
+    'bg-neutral-800/80',
+  ],
 }
\ No newline at end of file

From 221ad543c50e3a89601bb33b373c74cde769f66e Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Fri, 19 Dec 2025 09:32:40 +0000
Subject: [PATCH 13/17] created quicstart.sh for core services without api keys

---
 caddy/Caddyfile                   |  15 ++
 compose/infrastructure-shared.yml | 128 ++++++++++++++
 config-defaults.yml               | 139 +++++++++++++++
 quick-start.sh                    | 283 ++++++++++++++++++++++++++++++
 quickstart.md                     |   0
 5 files changed, 565 insertions(+)
 create mode 100644 caddy/Caddyfile
 create mode 100644 compose/infrastructure-shared.yml
 create mode 100644 config-defaults.yml
 create mode 100755 quick-start.sh
 mode change 100644 => 100755 quickstart.md

diff --git a/caddy/Caddyfile b/caddy/Caddyfile
new file mode 100644
index 00000000..61244a10
--- /dev/null
+++ b/caddy/Caddyfile
@@ -0,0 +1,15 @@
+# Friend-Lite Caddy Configuration
+# Auto-generated for quick-start
+
+# Default: Direct proxy to quick-start backend and frontend
+# This file will be regenerated if you use the wizard for multi-environment setup
+
+:80 {
+	# Health check endpoint
+	handle /health {
+		respond "OK" 200
+	}
+
+	# Default: Not configured for HTTPS yet
+	respond "Caddy is running. Configure Tailscale HTTPS via quick-start script." 200
+}
diff --git a/compose/infrastructure-shared.yml b/compose/infrastructure-shared.yml
new file mode 100644
index 00000000..f88ec6cd
--- /dev/null
+++ b/compose/infrastructure-shared.yml
@@ -0,0 +1,128 @@
+# Shared Infrastructure Services
+# These services are shared by ALL Friend-Lite environments
+# Start once with: docker compose -f compose/infrastructure-shared.yml up -d
+#
+# Services:
+# - MongoDB: Shared database server (port 27017)
+# - Redis: Shared cache server (port 6379)
+# - Qdrant: Shared vector database (ports 6033/6034)
+# - Neo4j: Shared graph database (ports 7474/7687) - optional
+# - Caddy: Shared reverse proxy (ports 80/443)
+#
+# Data Isolation Strategy:
+# - MongoDB: Each environment uses unique database name (MONGODB_DATABASE)
+# - Redis: Each environment uses unique database number (REDIS_DATABASE)
+# - Qdrant: Each environment uses unique collection prefix
+# - Neo4j: Each environment uses unique database name (NEO4J_DB)
+# - Caddy: Path-based routing to separate environments
+
+name: infra
+
+services:
+  mongo:
+    image: mongo:8.0.14
+    container_name: mongo
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongo_data:/data/db
+    healthcheck:
+      test: ["CMD", "mongosh", "--quiet", "--eval", "db.adminCommand({ ping: 1 })"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 10s
+    networks:
+      - chronicle-network
+    restart: unless-stopped
+
+  redis:
+    image: redis:7-alpine
+    container_name: redis
+    ports:
+      - "6379:6379"
+    volumes:
+      - redis_data:/data
+    command: redis-server --appendonly yes
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 5s
+      timeout: 3s
+      retries: 5
+    networks:
+      - chronicle-network
+    restart: unless-stopped
+
+  qdrant:
+    image: qdrant/qdrant:latest
+    container_name: qdrant
+    ports:
+      - "6033:6333"  # gRPC
+      - "6034:6334"  # HTTP
+    volumes:
+      - qdrant_data:/qdrant/storage
+    networks:
+      - chronicle-network
+    restart: unless-stopped
+
+  neo4j:
+    image: neo4j:2025.10-community
+    container_name: neo4j
+    ports:
+      - "7474:7474"  # HTTP UI
+      - "7687:7687"  # Bolt protocol
+    environment:
+      - NEO4J_AUTH=neo4j/${NEO4J_PASSWORD:-password}
+      - NEO4J_PLUGINS=["apoc","graph-data-science"]
+      - NEO4J_dbms_security_procedures_unrestricted=apoc.*,gds.*
+      - NEO4J_dbms_security_procedures_allowlist=apoc.*,gds.*
+    volumes:
+      - neo4j_data:/data
+      - neo4j_logs:/logs
+    networks:
+      - chronicle-network
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "wget --no-verbose --tries=1 --spider localhost:7474 || exit 1"]
+      interval: 30s
+      timeout: 10s
+      retries: 5
+      start_period: 30s
+    profiles:
+      - neo4j
+
+  caddy:
+    image: caddy:2-alpine
+    container_name: caddy
+    ports:
+      - "443:443"
+      - "80:80"
+    volumes:
+      - ../caddy/Caddyfile:/etc/caddy/Caddyfile
+      - ../certs:/certs:ro
+      - caddy_data:/data
+      - caddy_config:/config
+    restart: unless-stopped
+    networks:
+      - chronicle-network
+
+networks:
+  chronicle-network:
+    name: chronicle-network
+    external: true
+
+volumes:
+  mongo_data:
+    driver: local
+  redis_data:
+    driver: local
+  qdrant_data:
+    driver: local
+  neo4j_data:
+    driver: local
+  neo4j_logs:
+    driver: local
+  caddy_data:
+    driver: local
+  caddy_config:
+    driver: local
diff --git a/config-defaults.yml b/config-defaults.yml
new file mode 100644
index 00000000..ffd8c005
--- /dev/null
+++ b/config-defaults.yml
@@ -0,0 +1,139 @@
+# Friend-Lite Default Configuration
+# This file provides sensible defaults for zero-config quick-start
+# Values can be overridden via environment variables
+
+system:
+  environment: quick-start
+  compose_project_name: chronicle-quickstart
+  mode: development
+
+network:
+  backend_port: 9000
+  webui_port: 4000
+  host_ip: localhost
+
+  # Backend public URL (for browser access)
+  backend_public_url: http://localhost:9000
+
+  # WebUI public URL
+  webui_public_url: http://localhost:4000
+
+database:
+  # MongoDB configuration
+  mongodb_uri: mongodb://mongo:27017
+  mongodb_database: chronicle-quickstart
+
+  # Redis configuration
+  redis_url: redis://redis:6379/0
+  redis_database: 0
+
+  # Qdrant vector database
+  qdrant_base_url: qdrant
+  qdrant_port: 6333
+
+services:
+  # LLM Service (OpenAI)
+  llm:
+    provider: openai
+    model: gpt-4o-mini
+    base_url: https://api.openai.com/v1
+    enabled_without_key: false
+    required_for:
+      - Memory extraction
+      - Chat completions
+      - Intelligent features
+
+  # Speech-to-Text Service
+  transcription:
+    provider: deepgram
+    enabled_without_key: false
+    required_for:
+      - Audio transcription
+      - Conversation creation
+      - Speech-to-text
+
+  # Memory Service
+  memory:
+    provider: friend_lite
+    always_enabled: true
+    description: Manages memory storage and retrieval
+
+  # Optional services
+  speaker_recognition:
+    enabled_by_default: false
+    required_for:
+      - Speaker identification
+      - Voice profiles
+
+  parakeet_asr:
+    enabled_by_default: false
+    description: Offline speech recognition
+
+  mycelia:
+    enabled_by_default: false
+    description: Advanced memory visualization
+
+cors:
+  # Default allowed origins for CORS
+  default_origins:
+    - http://localhost:3000
+    - http://localhost:4000
+    - http://127.0.0.1:4000
+    - http://127.0.0.1:3000
+
+  # Tailscale IP range pattern
+  tailscale_pattern: "http://100\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}:3000"
+
+admin:
+  # Default admin account
+  default_email: admin@example.com
+
+  # Password is auto-generated during quick-start
+  # See .env.quick-start for generated password
+
+audio:
+  # Audio processing settings
+  segment_seconds: 60
+  cropping_enabled: true
+  min_speech_segment_duration: 1.0
+  cropping_context_padding: 0.1
+
+conversation:
+  # Conversation timeout
+  new_conversation_timeout_minutes: 1.5
+
+  # Speech detection thresholds
+  speech_detection_min_words: 5
+  speech_detection_min_confidence: 0.5
+
+features:
+  # Feature flags for graceful degradation
+  memory_extraction:
+    requires: openai_api_key
+    fallback_behavior: disable
+    user_message: "Add OpenAI API key to enable memory extraction"
+    configure_url: "http://localhost:4000/system"
+
+  transcription:
+    requires: deepgram_api_key
+    fallback_behavior: disable
+    user_message: "Add Deepgram API key to enable transcription"
+    configure_url: "http://localhost:4000/system"
+
+  speaker_recognition:
+    requires: hf_token
+    fallback_behavior: disable
+    user_message: "Add Hugging Face token to enable speaker recognition"
+    configure_url: "http://localhost:4000/system"
+
+documentation:
+  # Links to external resources
+  openai_api_keys: https://platform.openai.com/api-keys
+  deepgram_console: https://console.deepgram.com/
+  mistral_console: https://console.mistral.ai/
+  huggingface_tokens: https://huggingface.co/settings/tokens
+
+  # Internal documentation
+  quick_start_guide: /QUICK_START.md
+  setup_wizard_guide: /WIZARD.md
+  api_reference: /docs/api-reference.md
diff --git a/quick-start.sh b/quick-start.sh
new file mode 100755
index 00000000..8b3f3711
--- /dev/null
+++ b/quick-start.sh
@@ -0,0 +1,283 @@
+#!/bin/bash
+
+# Friend-Lite Quick Start
+# Zero-configuration startup for local development
+
+set -e  # Exit on error
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+BOLD='\033[1m'
+NC='\033[0m' # No Color
+
+# Configuration
+ENV_FILE=".env.quick-start"
+CONFIG_FILE="config-defaults.yml"
+
+# Parse arguments
+RESET_CONFIG=false
+if [[ "$1" == "--reset" ]]; then
+    RESET_CONFIG=true
+fi
+
+# Print header
+echo ""
+echo -e "${BOLD}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${BOLD}🚀 Friend-Lite Quick Start${NC}"
+echo -e "${BOLD}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo ""
+
+# Check if config exists
+if [[ -f "$ENV_FILE" ]] && [[ "$RESET_CONFIG" == false ]]; then
+    echo -e "${GREEN}✅ Existing configuration found${NC}"
+    echo ""
+    read -p "Use existing configuration? (Y/n): " use_existing
+    if [[ "$use_existing" == "n" ]] || [[ "$use_existing" == "N" ]]; then
+        RESET_CONFIG=true
+    fi
+fi
+
+# Generate or load configuration
+if [[ ! -f "$ENV_FILE" ]] || [[ "$RESET_CONFIG" == true ]]; then
+    echo -e "${BLUE}🔧 Generating configuration...${NC}"
+    echo ""
+
+    # Generate secure secrets
+    if command -v openssl &> /dev/null; then
+        AUTH_SECRET_KEY=$(openssl rand -hex 32)
+        ADMIN_PASSWORD=$(openssl rand -hex 16)
+    else
+        # Fallback for systems without openssl
+        AUTH_SECRET_KEY=$(head -c 32 /dev/urandom | xxd -p -c 64)
+        ADMIN_PASSWORD=$(head -c 16 /dev/urandom | xxd -p -c 32)
+    fi
+
+    ADMIN_EMAIL="admin@example.com"
+
+    # Create .env.quick-start
+    cat > "$ENV_FILE" <<EOF
+# Friend-Lite Quick Start Configuration
+# Generated: $(date -u +"%Y-%m-%dT%H:%M:%SZ")
+# DO NOT COMMIT THIS FILE - Contains sensitive credentials
+
+# ==========================================
+# AUTHENTICATION & SECURITY
+# ==========================================
+AUTH_SECRET_KEY=${AUTH_SECRET_KEY}
+ADMIN_EMAIL=${ADMIN_EMAIL}
+ADMIN_PASSWORD=${ADMIN_PASSWORD}
+
+# ==========================================
+# GRACEFUL DEGRADATION SETTINGS
+# ==========================================
+# Allow backend to start without API keys
+ALLOW_MISSING_API_KEYS=true
+LLM_REQUIRED=false
+TRANSCRIPTION_REQUIRED=false
+
+# ==========================================
+# DATABASE CONFIGURATION
+# ==========================================
+MONGODB_URI=mongodb://mongo:27017
+MONGODB_DATABASE=chronicle-quickstart
+REDIS_URL=redis://redis:6379/0
+REDIS_DATABASE=0
+QDRANT_BASE_URL=qdrant
+QDRANT_PORT=6333
+
+# ==========================================
+# NETWORK CONFIGURATION
+# ==========================================
+BACKEND_PORT=9000
+WEBUI_PORT=4000
+HOST_IP=localhost
+CORS_ORIGINS=http://localhost:3000,http://localhost:4000,http://127.0.0.1:4000
+VITE_BACKEND_URL=http://localhost:9000
+
+# ==========================================
+# SERVICE CONFIGURATION
+# ==========================================
+LLM_PROVIDER=openai
+OPENAI_MODEL=gpt-4o-mini
+MEMORY_PROVIDER=friend_lite
+TRANSCRIPTION_PROVIDER=deepgram
+
+# ==========================================
+# API KEYS (Add via UI after startup)
+# ==========================================
+# OPENAI_API_KEY=
+# DEEPGRAM_API_KEY=
+# MISTRAL_API_KEY=
+EOF
+
+    chmod 600 "$ENV_FILE"
+
+    # Display credentials prominently
+    echo ""
+    echo -e "${BOLD}${RED}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo -e "${BOLD}${RED}⚠️  SAVE THESE CREDENTIALS NOW! ⚠️${NC}"
+    echo -e "${BOLD}${RED}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo ""
+    echo -e "${BOLD}Admin Email:${NC}    ${ADMIN_EMAIL}"
+    echo -e "${BOLD}Admin Password:${NC} ${YELLOW}${ADMIN_PASSWORD}${NC}"
+    echo ""
+    echo -e "${BOLD}${RED}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo ""
+    sleep 2
+else
+    echo -e "${GREEN}✅ Using existing configuration${NC}"
+    # Extract password to display
+    ADMIN_PASSWORD=$(grep "^ADMIN_PASSWORD=" "$ENV_FILE" | cut -d'=' -f2)
+    ADMIN_EMAIL=$(grep "^ADMIN_EMAIL=" "$ENV_FILE" | cut -d'=' -f2)
+    echo ""
+    echo -e "${BOLD}Admin Email:${NC}    ${ADMIN_EMAIL}"
+    echo -e "${BOLD}Admin Password:${NC} ${YELLOW}${ADMIN_PASSWORD}${NC}"
+    echo ""
+fi
+
+# Create chronicle-network if it doesn't exist
+echo -e "${BLUE}🔗 Checking Docker network...${NC}"
+if ! docker network inspect chronicle-network &> /dev/null; then
+    echo "   Creating chronicle-network..."
+    docker network create chronicle-network
+    echo -e "${GREEN}   ✅ Network created${NC}"
+else
+    echo -e "${GREEN}   ✅ Network exists${NC}"
+fi
+echo ""
+
+# Start shared infrastructure
+echo -e "${BLUE}🏗️  Starting shared infrastructure...${NC}"
+echo ""
+
+# Check if infrastructure is already running
+MONGO_RUNNING=$(docker ps --filter "name=^mongo$" --filter "status=running" --format "{{.Names}}" 2>/dev/null || true)
+REDIS_RUNNING=$(docker ps --filter "name=^redis$" --filter "status=running" --format "{{.Names}}" 2>/dev/null || true)
+QDRANT_RUNNING=$(docker ps --filter "name=^qdrant$" --filter "status=running" --format "{{.Names}}" 2>/dev/null || true)
+
+if [[ -n "$MONGO_RUNNING" ]] && [[ -n "$REDIS_RUNNING" ]] && [[ -n "$QDRANT_RUNNING" ]]; then
+    echo -e "${GREEN}   ✅ Infrastructure already running${NC}"
+else
+    echo "   Starting MongoDB, Redis, Qdrant, Caddy..."
+    docker compose -f compose/infrastructure-shared.yml up -d --no-recreate 2>&1 | grep -v "is up to date" || true
+    echo ""
+    echo "   Waiting for services to be ready..."
+    sleep 5
+    echo -e "${GREEN}   ✅ Infrastructure started${NC}"
+fi
+
+echo ""
+echo -e "   ${BOLD}Services:${NC}"
+echo -e "   📊 MongoDB:  ${GREEN}Running${NC} (mongodb://localhost:27017)"
+echo -e "   💾 Redis:    ${GREEN}Running${NC} (redis://localhost:6379)"
+echo -e "   🔍 Qdrant:   ${GREEN}Running${NC} (http://localhost:6034)"
+echo ""
+
+# Start application services
+echo -e "${BLUE}🚀 Starting Friend-Lite application...${NC}"
+echo ""
+
+cd backends/advanced
+
+# Start backend, workers, and webui
+docker compose \
+  -p chronicle-quickstart \
+  --env-file ../../.env.quick-start \
+  up -d friend-backend workers webui
+
+echo ""
+echo "   Waiting for backend to be healthy..."
+sleep 3
+
+# Wait for backend health check (with timeout)
+TIMEOUT=60
+ELAPSED=0
+BACKEND_HEALTHY=false
+
+while [[ $ELAPSED -lt $TIMEOUT ]]; do
+    if curl -s http://localhost:9000/health > /dev/null 2>&1; then
+        BACKEND_HEALTHY=true
+        break
+    fi
+    sleep 2
+    ELAPSED=$((ELAPSED + 2))
+done
+
+cd ../..
+
+echo ""
+if [[ "$BACKEND_HEALTHY" == true ]]; then
+    echo -e "${GREEN}${BOLD}✅ Friend-Lite is ready!${NC}"
+else
+    echo -e "${YELLOW}⚠️  Backend is starting... (may take a moment)${NC}"
+fi
+
+echo ""
+echo -e "${BOLD}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${GREEN}${BOLD}   Access Friend-Lite at: http://localhost:4000${NC}"
+echo -e "${BOLD}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo ""
+
+# Check for missing API keys
+echo -e "${YELLOW}⚠️  Some features are disabled (no API keys configured):${NC}"
+echo -e "   • Memory extraction (needs OpenAI API key)"
+echo -e "   • Transcription (needs Deepgram API key)"
+echo ""
+echo -e "   ${BOLD}→ Add API keys at: http://localhost:4000/system${NC}"
+echo ""
+
+# Next steps
+echo -e "${BOLD}Next steps:${NC}"
+echo "  1. Login with the credentials shown above"
+echo "  2. Configure API keys in System settings"
+echo "  3. Enable optional services if needed"
+echo ""
+
+# Check for Tailscale
+if command -v tailscale &> /dev/null && tailscale status &> /dev/null; then
+    TAILSCALE_HOSTNAME=$(tailscale status --json 2>/dev/null | grep -o '"DNSName":"[^"]*"' | cut -d'"' -f4 | head -1 || echo "")
+
+    if [[ -n "$TAILSCALE_HOSTNAME" ]]; then
+        echo -e "${BLUE}🌐 Tailscale detected: ${TAILSCALE_HOSTNAME}${NC}"
+        echo ""
+        read -p "Configure HTTPS access via Tailscale? (y/N): " setup_tailscale
+
+        if [[ "$setup_tailscale" == "y" ]] || [[ "$setup_tailscale" == "Y" ]]; then
+            echo ""
+            echo -e "${BLUE}🔒 Provisioning Tailscale certificates...${NC}"
+
+            # Provision certificates
+            tailscale cert "$TAILSCALE_HOSTNAME" 2>/dev/null || true
+
+            # Update .env.quick-start with HTTPS settings
+            echo "" >> "$ENV_FILE"
+            echo "# Tailscale HTTPS Configuration" >> "$ENV_FILE"
+            echo "TAILSCALE_HOSTNAME=${TAILSCALE_HOSTNAME}" >> "$ENV_FILE"
+            echo "HTTPS_ENABLED=true" >> "$ENV_FILE"
+            echo "CORS_ORIGINS=https://${TAILSCALE_HOSTNAME}:9000,https://${TAILSCALE_HOSTNAME}:4000,http://localhost:4000" >> "$ENV_FILE"
+
+            echo ""
+            echo -e "${GREEN}✅ HTTPS configured!${NC}"
+            echo ""
+            echo -e "   Access from any device on your tailnet:"
+            echo -e "   ${BOLD}https://${TAILSCALE_HOSTNAME}:4000${NC}"
+            echo ""
+            echo -e "${YELLOW}   Note: Restart services to apply HTTPS settings:${NC}"
+            echo -e "   ${BOLD}docker compose -p chronicle-quickstart restart${NC}"
+            echo ""
+        fi
+    fi
+fi
+
+# Usage information
+echo -e "${BOLD}Helpful commands:${NC}"
+echo "  Stop:    make quick-start-stop"
+echo "  Restart: docker compose -p chronicle-quickstart restart"
+echo "  Logs:    docker compose -p chronicle-quickstart logs -f"
+echo ""
+
+echo -e "${GREEN}${BOLD}🎉 Setup complete! Happy coding!${NC}"
+echo ""
diff --git a/quickstart.md b/quickstart.md
old mode 100644
new mode 100755

From a9c8bb8e8f9e80c153e873365491c8ef7f97c9a1 Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Fri, 19 Dec 2025 17:04:55 +0000
Subject: [PATCH 14/17] added docker compose includes & api key degradation

---
 .env.secrets.template                         |  48 ++
 .gitignore                                    |  30 +
 Makefile                                      | 573 ++++++++++++++++--
 backends/advanced/Caddyfile.template          |  18 +
 backends/advanced/compose/backend.yml         |  58 ++
 backends/advanced/compose/frontend.yml        |  26 +
 backends/advanced/docker-compose.yml          | 267 ++------
 .../src/advanced_omi_backend/app_config.py    |  34 +-
 .../routers/modules/health_routes.py          |  58 +-
 .../services/memory/config.py                 |  52 +-
 .../services/memory/service_factory.py        |   5 +-
 backends/advanced/webui/Dockerfile            |  12 +-
 backends/advanced/webui/src/pages/System.tsx  |  19 +-
 docker-compose.infra.yml                      | 121 ++++
 docker-compose.yml                            |  23 +
 quick-start.sh                                | 134 ++--
 scripts/generate-k8s-configs.py               |  91 ++-
 17 files changed, 1161 insertions(+), 408 deletions(-)
 create mode 100644 .env.secrets.template
 create mode 100644 backends/advanced/compose/backend.yml
 create mode 100644 backends/advanced/compose/frontend.yml
 create mode 100644 docker-compose.infra.yml
 create mode 100644 docker-compose.yml

diff --git a/.env.secrets.template b/.env.secrets.template
new file mode 100644
index 00000000..57599ebc
--- /dev/null
+++ b/.env.secrets.template
@@ -0,0 +1,48 @@
+# ========================================
+# Friend-Lite Secrets Template
+# ========================================
+# Copy this file to .env.secrets and fill in your actual values
+# .env.secrets is gitignored and should NEVER be committed
+#
+# Usage: cp .env.secrets.template .env.secrets
+#
+# IMPORTANT: This file contains ENVIRONMENT-SPECIFIC credentials
+# For API keys that might be shared, see .env.api-keys.template
+# ========================================
+
+# ========================================
+# AUTHENTICATION & SECURITY (Environment-Specific)
+# ========================================
+
+# JWT secret key - MUST be different per environment
+# Generate with: openssl rand -base64 32
+AUTH_SECRET_KEY=your-super-secret-jwt-key-change-this-to-something-random
+
+# Admin account credentials - Should be different per environment
+ADMIN_EMAIL=admin@example.com
+ADMIN_PASSWORD=change-this-secure-password
+
+# ========================================
+# DATABASE CREDENTIALS (Environment-Specific)
+# ========================================
+
+# Neo4j password - Different per environment
+NEO4J_PASSWORD=your-neo4j-password
+
+# MongoDB credentials (if using auth)
+# MONGODB_USERNAME=
+# MONGODB_PASSWORD=
+
+# Redis password (if using auth)
+# REDIS_PASSWORD=
+
+# ========================================
+# EXTERNAL SERVICE CREDENTIALS (Environment-Specific)
+# ========================================
+
+# Ngrok authtoken (optional - for external access in dev/staging)
+NGROK_AUTHTOKEN=
+
+# Langfuse telemetry (optional - different per environment)
+LANGFUSE_PUBLIC_KEY=
+LANGFUSE_SECRET_KEY=
diff --git a/.gitignore b/.gitignore
index b2b052b3..f0a73d86 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,11 @@
 *.wav
 **/*.env
 !**/.env.template
+.env.secrets
+.env.api-keys
+.env.quick-start
+.env.backup.*
+config.env.backup.*
 **/memory_config.yaml
 !**/memory_config.yaml.template
 example/*
@@ -71,6 +76,7 @@ backends/advanced-backend/data/speaker_model_cache/
 backends/charts/advanced-backend/env-configmap.yaml
 
 extras/openmemory-mcp/data/*
+extras/openmemory/data/*
 .env.backup.*
 
 backends/advanced/nginx.conf
@@ -82,3 +88,27 @@ log.html
 output.xml
 report.html
 .secrets
+extras/openmemory-mcp/.env.openmemory
+extras/openmemory/.env
+certs
+
+# Environment-specific configuration files (added 2025-12-09)
+environments/
+*.env.backup.*
+backends/advanced/.env.*
+!backends/advanced/.env.template
+
+# SSL certificates
+*.crt
+*.key
+
+# IDE and tool directories
+.playwright-mcp/
+.serena/
+
+# Docker compose data directories
+**/compose/data/
+
+# Deprecated compose files (moved to root compose/)
+backends/advanced/compose/infrastructure.yml
+backends/advanced/compose/mycelia.yml
diff --git a/Makefile b/Makefile
index 9c4dca6a..be709d70 100644
--- a/Makefile
+++ b/Makefile
@@ -1,25 +1,45 @@
 # ========================================
-# Chronicle Management System
+# Friend-Lite Management System
 # ========================================
-# Central management interface for Chronicle project
+# Central management interface for Friend-Lite project
 # Handles configuration, deployment, and maintenance tasks
 
-# Load environment variables from .env file
+# Load environment variables from .env file (if it exists)
 ifneq (,$(wildcard ./.env))
     include .env
     export $(shell sed 's/=.*//' .env | grep -v '^\s*$$' | grep -v '^\s*\#')
 endif
 
-# Load configuration definitions
-include config.env
-# Export all variables from config.env
-export $(shell sed 's/=.*//' config.env | grep -v '^\s*$$' | grep -v '^\s*\#')
+# Load configuration definitions for Kubernetes
+# Use config-k8s.env for K8s deployments
+ifneq (,$(wildcard ./config-k8s.env))
+    include config-k8s.env
+    export $(shell sed 's/=.*//' config-k8s.env | grep -v '^\s*$$' | grep -v '^\s*\#')
+else
+    # Fallback to config.env for backwards compatibility
+    ifneq (,$(wildcard ./config.env))
+        include config.env
+        export $(shell sed 's/=.*//' config.env | grep -v '^\s*$$' | grep -v '^\s*\#')
+    endif
+endif
+
+# Load secrets (gitignored) - required for K8s secrets generation
+ifneq (,$(wildcard ./.env.secrets))
+    include .env.secrets
+    export $(shell sed 's/=.*//' .env.secrets | grep -v '^\s*$$' | grep -v '^\s*\#')
+endif
+
+# Load API keys (gitignored) - required for K8s secrets generation
+ifneq (,$(wildcard ./.env.api-keys))
+    include .env.api-keys
+    export $(shell sed 's/=.*//' .env.api-keys | grep -v '^\s*$$' | grep -v '^\s*\#')
+endif
 
 # Script directories
 SCRIPTS_DIR := scripts
 K8S_SCRIPTS_DIR := $(SCRIPTS_DIR)/k8s
 
-.PHONY: help menu setup-k8s setup-infrastructure setup-rbac setup-storage-pvc config config-docker config-k8s config-all clean deploy deploy-docker deploy-k8s deploy-k8s-full deploy-infrastructure deploy-apps check-infrastructure check-apps build-backend up-backend down-backend k8s-status k8s-cleanup k8s-purge audio-manage mycelia-sync-status mycelia-sync-all mycelia-sync-user mycelia-check-orphans mycelia-reassign-orphans test-robot test-robot-integration test-robot-unit test-robot-endpoints test-robot-specific test-robot-clean
+.PHONY: help menu wizard setup-secrets setup-tailscale configure-tailscale-serve setup-environment check-secrets setup-k8s setup-infrastructure setup-rbac setup-storage-pvc config config-k8s config-all clean deploy deploy-docker deploy-k8s deploy-k8s-full deploy-infrastructure deploy-apps check-infrastructure check-apps build-backend up-backend down-backend k8s-status k8s-cleanup k8s-purge audio-manage mycelia-sync-status mycelia-sync-all mycelia-sync-user mycelia-check-orphans mycelia-reassign-orphans mycelia-create-token test-robot test-robot-integration test-robot-unit test-robot-endpoints test-robot-specific test-robot-clean infra-start infra-stop infra-restart infra-logs infra-status infra-clean caddy-start caddy-stop caddy-restart caddy-logs caddy-status caddy-regenerate env-list env-start env-stop env-clean env-status
 
 # Default target
 .DEFAULT_GOAL := menu
@@ -28,6 +48,39 @@ menu: ## Show interactive menu (default)
 	@echo "🎯 Chronicle Management System"
 	@echo "================================"
 	@echo
+	@echo "🚀 Standard Docker Compose Commands:"
+	@echo "  make up                     🚀 Start Chronicle (auto-starts infra if needed)"
+	@echo "  make down                   🛑 Stop app only (keeps infra running)"
+	@echo "  make down-all               🛑 Stop everything (infra + app)"
+	@echo "  make build                  🔨 Rebuild application images"
+	@echo "  make restart                🔄 Restart app only"
+	@echo "  make restart-all            🔄 Restart everything"
+	@echo "  make logs                   📋 View app logs"
+	@echo "  make logs-all               📋 View all logs"
+	@echo
+	@echo "  OR use docker compose directly:"
+	@echo "  docker compose -f docker-compose.infra.yml up -d  (start infra)"
+	@echo "  docker compose up -d                              (start app)"
+	@echo "  docker compose down                               (stop app only)"
+	@echo "  docker compose -f docker-compose.infra.yml down   (stop infra)"
+	@echo
+	@echo "⚡ Quick Start (First Time):"
+	@echo "  quick-start                 🚀 Interactive setup with zero configuration"
+	@echo "  quick-start-reset           🔄 Reset and regenerate configuration"
+	@echo
+	@echo "🏗️  Infrastructure Control:"
+	@echo "  infra-start                 🏗️  Start infrastructure only (MongoDB, Redis, Qdrant)"
+	@echo "  infra-stop                  🛑 Stop infrastructure (keeps data)"
+	@echo "  infra-clean                 🗑️  Stop infrastructure and remove all data"
+	@echo
+	@echo "🧙 Advanced Setup:"
+	@echo "  installer                   🚀 Chronicle Install - Python-based installer"
+	@echo "  wizard                      🧙 Interactive setup wizard (secrets + Tailscale + environment)"
+	@echo "  setup-secrets               🔐 Configure API keys and passwords"
+	@echo "  setup-tailscale             🌐 Configure Tailscale for distributed deployment"
+	@echo "  configure-tailscale-serve   🌐 Configure Tailscale serve routes (single environment)"
+	@echo "  setup-environment           📦 Create a custom environment"
+	@echo
 	@echo "📋 Quick Actions:"
 	@echo "  setup-dev          🛠️  Setup development environment (git hooks, pre-commit)"
 	@echo "  setup-k8s          🏗️  Complete Kubernetes setup (registry + infrastructure + RBAC)"
@@ -43,7 +96,6 @@ menu: ## Show interactive menu (default)
 	@echo "  test-robot-endpoints 🌐 Run endpoint tests only"
 	@echo
 	@echo "📝 Configuration:"
-	@echo "  config-docker      🐳 Generate Docker Compose .env files"
 	@echo "  config-k8s         ☸️  Generate Kubernetes files (Skaffold env + ConfigMap/Secret)"
 	@echo
 	@echo "🚀 Deployment:"
@@ -58,12 +110,29 @@ menu: ## Show interactive menu (default)
 	@echo "  clean              🧹 Clean up generated files"
 	@echo
 	@echo "🔄 Mycelia Sync:"
+	@echo "  mycelia-create-token     🔑 Create Mycelia API token for a user"
 	@echo "  mycelia-sync-status      📊 Show Mycelia OAuth sync status"
-	@echo "  mycelia-sync-all         🔄 Sync all Chronicle users to Mycelia"
+	@echo "  mycelia-sync-all         🔄 Sync all Friend-Lite users to Mycelia"
 	@echo "  mycelia-sync-user        👤 Sync specific user (EMAIL=user@example.com)"
 	@echo "  mycelia-check-orphans    🔍 Find orphaned Mycelia objects"
 	@echo "  mycelia-reassign-orphans ♻️  Reassign orphans (EMAIL=admin@example.com)"
 	@echo
+	@echo "🏗️  Shared Infrastructure:"
+	@echo "  infra-start              🚀 Start shared infrastructure (MongoDB, Redis, Qdrant, optional Neo4j)"
+	@echo "  infra-stop               🛑 Stop infrastructure"
+	@echo "  infra-restart            🔄 Restart infrastructure"
+	@echo "  infra-status             📊 Check infrastructure status"
+	@echo "  infra-logs               📋 View infrastructure logs"
+	@echo "  infra-clean              🗑️  Clean all infrastructure data (DANGER!)"
+	@echo
+	@echo "🌐 Caddy Reverse Proxy (Shared Service):"
+	@echo "  caddy-start              🚀 Start shared Caddy (serves all environments)"
+	@echo "  caddy-stop               🛑 Stop Caddy"
+	@echo "  caddy-restart            🔄 Restart Caddy"
+	@echo "  caddy-status             📊 Check if Caddy is running"
+	@echo "  caddy-logs               📋 View Caddy logs"
+	@echo "  caddy-regenerate         🔧 Regenerate Caddyfile from environments"
+	@echo
 	@echo "Current configuration:"
 	@echo "  DOMAIN: $(DOMAIN)"
 	@echo "  DEPLOYMENT_MODE: $(DEPLOYMENT_MODE)"
@@ -75,7 +144,7 @@ menu: ## Show interactive menu (default)
 	@echo "💡 Tip: Run 'make help' for detailed help on any target"
 
 help: ## Show detailed help for all targets
-	@echo "🎯 Chronicle Management System - Detailed Help"
+	@echo "🎯 Friend-Lite Management System - Detailed Help"
 	@echo "================================================"
 	@echo
 	@echo "🏗️  KUBERNETES SETUP:"
@@ -90,8 +159,7 @@ help: ## Show detailed help for all targets
 	@echo "  setup-storage-pvc  Create shared models PVC"
 	@echo
 	@echo "📝 CONFIGURATION:"
-	@echo "  config             Generate all configuration files (Docker + K8s)"
-	@echo "  config-docker      Generate Docker Compose .env files"
+	@echo "  config             Generate all configuration files (K8s)"
 	@echo "  config-k8s         Generate Kubernetes files (Skaffold env + ConfigMap/Secret)"
 	@echo
 	@echo "🚀 DEPLOYMENT:"
@@ -109,10 +177,11 @@ help: ## Show detailed help for all targets
 	@echo "  audio-manage       Interactive audio file management"
 	@echo
 	@echo "🔄 MYCELIA SYNC:"
+	@echo "  mycelia-create-token Create Mycelia API token for a user"
 	@echo "  mycelia-sync-status Show Mycelia OAuth sync status for all users"
-	@echo "  mycelia-sync-all   Sync all Chronicle users to Mycelia OAuth"
+	@echo "  mycelia-sync-all   Sync all Friend-Lite users to Mycelia OAuth"
 	@echo "  mycelia-sync-user  Sync specific user (EMAIL=user@example.com)"
-	@echo "  mycelia-check-orphans Find Mycelia objects without Chronicle owner"
+	@echo "  mycelia-check-orphans Find Mycelia objects without Friend-Lite owner"
 	@echo "  mycelia-reassign-orphans Reassign orphaned objects (EMAIL=admin@example.com)"
 	@echo
 	@echo "🧪 ROBOT FRAMEWORK TESTING:"
@@ -152,13 +221,188 @@ setup-dev: ## Setup development environment (git hooks, pre-commit)
 	@echo ""
 	@echo "⚙️  To skip hooks: git push --no-verify / git commit --no-verify"
 
+# ========================================
+# QUICK START (Zero Configuration)
+# ========================================
+
+.PHONY: up down down-all build restart restart-all logs logs-all quick-start quick-start-reset quick-start-stop quick-start-clean quick-start-logs quick-start-rebuild infra-start infra-stop infra-clean
+
+up: ## 🚀 Start Chronicle (infrastructure + application)
+	@echo "🚀 Starting Chronicle..."
+	@if [ ! -f .env.default ]; then \
+		echo "⚠️  Configuration not found. Running quick-start.sh..."; \
+		./quick-start.sh; \
+	else \
+		if ! docker ps --filter "name=^mongo$$" --filter "status=running" -q | grep -q .; then \
+			echo "🏗️  Infrastructure not running, starting it first..."; \
+			docker compose -f docker-compose.infra.yml up -d; \
+			sleep 3; \
+		fi; \
+		docker compose --env-file .env.default up -d; \
+		echo "✅ Chronicle started"; \
+	fi
+
+down: ## 🛑 Stop Chronicle application only (keeps infrastructure running)
+	@echo "🛑 Stopping Chronicle application..."
+	@docker compose down
+	@echo "✅ Application stopped (infrastructure still running)"
+	@echo "💡 To stop everything: make down-all"
+
+down-all: ## 🛑 Stop everything (infrastructure + application)
+	@echo "🛑 Stopping all services..."
+	@docker compose down
+	@docker compose -f docker-compose.infra.yml down
+	@echo "✅ All services stopped"
+
+build: ## 🔨 Rebuild Chronicle application images
+	@echo "🔨 Building Chronicle..."
+	@docker compose build
+
+restart: ## 🔄 Restart Chronicle application only
+	@echo "🔄 Restarting Chronicle application..."
+	@docker compose restart
+	@echo "✅ Application restarted"
+
+restart-all: ## 🔄 Restart everything (infrastructure + application)
+	@echo "🔄 Restarting all services..."
+	@docker compose restart
+	@docker compose -f docker-compose.infra.yml restart
+	@echo "✅ All services restarted"
+
+logs: ## 📋 View Chronicle application logs
+	@docker compose logs -f
+
+logs-all: ## 📋 View all logs (infrastructure + application)
+	@docker compose logs -f &
+	@docker compose -f docker-compose.infra.yml logs -f
+
+quick-start: ## 🚀 Start Chronicle with zero configuration (interactive setup)
+	@./quick-start.sh
+
+quick-start-reset: ## 🔄 Reset and regenerate quick-start configuration
+	@./quick-start.sh --reset
+
+quick-start-stop: ## 🛑 Stop quick-start environment
+	@echo "🛑 Stopping application..."
+	@docker compose down
+	@echo "✅ Application stopped (data preserved)"
+
+quick-start-clean: ## 🗑️  Stop application and remove all data volumes
+	@echo "🗑️  Stopping application and removing data..."
+	@docker compose down -v
+	@docker compose -f docker-compose.infra.yml down -v
+	@echo "✅ Environment cleaned"
+
+quick-start-logs: ## 📋 View quick-start logs
+	@docker compose logs -f
+
+quick-start-rebuild: ## 🔨 Rebuild and restart application (keeps infrastructure running)
+	@echo "🔨 Rebuilding application..."
+	@docker compose up -d --build
+	@echo "✅ Application rebuilt and restarted"
+
+infra-start: ## 🏗️  Start infrastructure only (MongoDB, Redis, Qdrant)
+	@echo "🏗️  Starting infrastructure..."
+	@docker compose -f docker-compose.infra.yml up -d
+	@echo "✅ Infrastructure started"
+
+infra-stop: ## 🛑 Stop infrastructure (keeps data)
+	@echo "🛑 Stopping infrastructure..."
+	@docker compose -f docker-compose.infra.yml down
+	@echo "✅ Infrastructure stopped (data preserved)"
+
+infra-clean: ## 🗑️  Stop infrastructure and remove all data
+	@echo "🗑️  Stopping infrastructure and removing data..."
+	@docker compose -f docker-compose.infra.yml down -v
+	@echo "✅ Infrastructure cleaned"
+
+# ========================================
+# INTERACTIVE SETUP WIZARD
+# ========================================
+
+.PHONY: installer wizard setup-secrets setup-tailscale setup-environment check-secrets
+
+installer: ## 🚀 Chronicle Install - Python-based interactive installer (recommended)
+	@./chronicle-install.sh
+
+wizard: ## 🧙 Interactive setup wizard - guides through complete Friend-Lite setup
+	@echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+	@echo "🧙 Friend-Lite Setup Wizard"
+	@echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+	@echo ""
+	@echo "This wizard will guide you through:"
+	@echo "  1. 📦 Creating your environment (name, ports, services)"
+	@echo "  2. 🔐 Configuring secrets (API keys based on your services)"
+	@echo "  3. 🌐 Optionally configuring Tailscale for remote access"
+	@echo "  4. 🔧 Finalizing setup (certificates, final configuration)"
+	@echo ""
+	@read -p "Press Enter to continue or Ctrl+C to exit..."
+	@echo ""
+	@$(MAKE) --no-print-directory setup-environment
+	@echo ""
+	@$(MAKE) --no-print-directory setup-secrets
+	@echo ""
+	@$(MAKE) --no-print-directory setup-tailscale
+	@echo ""
+	@$(MAKE) --no-print-directory finalize-setup
+	@echo ""
+	@echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+	@echo "✅ Setup Complete!"
+	@echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+	@echo ""
+	@echo "🚀 Next Steps:"
+	@echo ""
+	@if [ -f ".env.secrets" ] && [ -d "environments" ]; then \
+		LATEST_ENV=$$(ls -t environments/*.env 2>/dev/null | head -1 | xargs basename -s .env 2>/dev/null || echo "dev"); \
+		echo "  Start your environment:"; \
+		echo "    ./start-env.sh $$LATEST_ENV"; \
+		echo ""; \
+		echo "  💡 Your configured services will start automatically!"; \
+	else \
+		echo "  ⚠️  Some setup steps were skipped. Run individual targets:"; \
+		echo "    make setup-secrets"; \
+		echo "    make setup-environment"; \
+	fi
+	@echo ""
+	@echo "📚 Documentation:"
+	@echo "  • ENVIRONMENTS.md - Environment system overview"
+	@echo "  • SSL_SETUP.md - Tailscale and SSL configuration"
+	@echo "  • SETUP.md - Detailed setup instructions"
+	@echo ""
+
+check-secrets: ## Check if secrets file exists and is configured
+	@if [ ! -f ".env.secrets" ]; then \
+		echo "❌ .env.secrets not found"; \
+		exit 1; \
+	fi
+	@if ! grep -q "^AUTH_SECRET_KEY=" .env.secrets || grep -q "your-super-secret" .env.secrets; then \
+		echo "❌ .env.secrets exists but needs configuration"; \
+		exit 1; \
+	fi
+	@echo "✅ Secrets file configured"
+
+setup-secrets: ## 🔐 Interactive secrets setup (API keys, passwords)
+	@./scripts/setup-secrets.sh
+
+setup-tailscale: ## 🌐 Interactive Tailscale setup for distributed deployment
+	@./scripts/setup-tailscale.sh
+
+configure-tailscale-serve: ## 🌐 Configure Tailscale serve for an environment
+	@./scripts/configure-tailscale-serve.sh
+
+setup-environment: ## 📦 Create a custom environment configuration
+	@./scripts/setup-environment.sh
+
+finalize-setup: ## 🔧 Finalize setup (generate Caddyfile, provision certificates)
+	@./scripts/finalize-setup.sh
+
 # ========================================
 # KUBERNETES SETUP
 # ========================================
 
 setup-k8s: ## Initial Kubernetes setup (registry + infrastructure)
 	@echo "🏗️  Starting Kubernetes initial setup..."
-	@echo "This will set up the complete infrastructure for Chronicle"
+	@echo "This will set up the complete infrastructure for Friend-Lite"
 	@echo
 	@echo "📋 Setup includes:"
 	@echo "  • Insecure registry configuration"
@@ -218,27 +462,25 @@ setup-storage-pvc: ## Set up shared models PVC
 
 config: config-all ## Generate all configuration files
 
-config-docker: ## Generate Docker Compose configuration files
-	@echo "🐳 Generating Docker Compose configuration files..."
-	@CONFIG_FILE=config.env.dev python3 scripts/generate-docker-configs.py
-	@echo "✅ Docker Compose configuration files generated"
-
 config-k8s: ## Generate Kubernetes configuration files (ConfigMap/Secret only - no .env files)
 	@echo "☸️  Generating Kubernetes configuration files..."
 	@python3 scripts/generate-k8s-configs.py
 	@echo "📦 Applying ConfigMap and Secret to Kubernetes..."
 	@kubectl apply -f k8s-manifests/configmap.yaml -n $(APPLICATION_NAMESPACE) 2>/dev/null || echo "⚠️  ConfigMap not applied (cluster not available?)"
 	@kubectl apply -f k8s-manifests/secrets.yaml -n $(APPLICATION_NAMESPACE) 2>/dev/null || echo "⚠️  Secret not applied (cluster not available?)"
-	@echo "📦 Copying ConfigMap and Secret to speech namespace..."
-	@kubectl get configmap chronicle-config -n $(APPLICATION_NAMESPACE) -o yaml | \
+	@echo "📦 Copying ConfigMap and Secrets to speech namespace..."
+	@kubectl get configmap friend-lite-config -n $(APPLICATION_NAMESPACE) -o yaml | \
 		sed -e '/namespace:/d' -e '/resourceVersion:/d' -e '/uid:/d' -e '/creationTimestamp:/d' | \
 		kubectl apply -n speech -f - 2>/dev/null || echo "⚠️  ConfigMap not copied to speech namespace"
-	@kubectl get secret chronicle-secrets -n $(APPLICATION_NAMESPACE) -o yaml | \
+	@kubectl get secret friend-lite-secrets -n $(APPLICATION_NAMESPACE) -o yaml | \
 		sed -e '/namespace:/d' -e '/resourceVersion:/d' -e '/uid:/d' -e '/creationTimestamp:/d' | \
-		kubectl apply -n speech -f - 2>/dev/null || echo "⚠️  Secret not copied to speech namespace"
+		kubectl apply -n speech -f - 2>/dev/null || echo "⚠️  Credentials secret not copied to speech namespace"
+	@kubectl get secret friend-lite-api-keys -n $(APPLICATION_NAMESPACE) -o yaml | \
+		sed -e '/namespace:/d' -e '/resourceVersion:/d' -e '/uid:/d' -e '/creationTimestamp:/d' | \
+		kubectl apply -n speech -f - 2>/dev/null || echo "⚠️  API keys secret not copied to speech namespace"
 	@echo "✅ Kubernetes configuration files generated"
 
-config-all: config-docker config-k8s ## Generate all configuration files
+config-all: config-k8s ## Generate all configuration files
 	@echo "✅ All configuration files generated"
 
 clean: ## Clean up generated configuration files
@@ -269,7 +511,7 @@ else
 	@exit 1
 endif
 
-deploy-docker: config-docker ## Deploy using Docker Compose
+deploy-docker: ## Deploy using Docker Compose
 	@echo "🐳 Deploying with Docker Compose..."
 	@cd backends/advanced && docker-compose up -d
 	@echo "✅ Docker Compose deployment completed"
@@ -314,7 +556,7 @@ build-backend: ## Build backend Docker image
 	@echo "🔨 Building backend Docker image..."
 	@cd backends/advanced && docker build -t advanced-backend:latest .
 
-up-backend: config-docker ## Start backend services
+up-backend: ## Start backend services
 	@echo "🚀 Starting backend services..."
 	@cd backends/advanced && docker-compose up -d
 
@@ -353,13 +595,13 @@ audio-manage: ## Interactive audio file management
 
 mycelia-sync-status: ## Show Mycelia OAuth sync status for all users
 	@echo "📊 Checking Mycelia OAuth sync status..."
-	@cd backends/advanced && uv run python scripts/sync_chronicle_mycelia.py --status
+	@cd backends/advanced && uv run python scripts/sync_friendlite_mycelia.py --status
 
-mycelia-sync-all: ## Sync all Chronicle users to Mycelia OAuth
-	@echo "🔄 Syncing all Chronicle users to Mycelia OAuth..."
+mycelia-sync-all: ## Sync all Friend-Lite users to Mycelia OAuth
+	@echo "🔄 Syncing all Friend-Lite users to Mycelia OAuth..."
 	@echo "⚠️  This will create OAuth credentials for users without them"
 	@read -p "Continue? (y/N): " confirm && [ "$$confirm" = "y" ] || exit 1
-	@cd backends/advanced && uv run python scripts/sync_chronicle_mycelia.py --sync-all
+	@cd backends/advanced && uv run python scripts/sync_friendlite_mycelia.py --sync-all
 
 mycelia-sync-user: ## Sync specific user to Mycelia OAuth (usage: make mycelia-sync-user EMAIL=user@example.com)
 	@echo "👤 Syncing specific user to Mycelia OAuth..."
@@ -367,11 +609,11 @@ mycelia-sync-user: ## Sync specific user to Mycelia OAuth (usage: make mycelia-s
 		echo "❌ EMAIL parameter is required. Usage: make mycelia-sync-user EMAIL=user@example.com"; \
 		exit 1; \
 	fi
-	@cd backends/advanced && uv run python scripts/sync_chronicle_mycelia.py --email $(EMAIL)
+	@cd backends/advanced && uv run python scripts/sync_friendlite_mycelia.py --email $(EMAIL)
 
-mycelia-check-orphans: ## Find Mycelia objects without Chronicle owner
+mycelia-check-orphans: ## Find Mycelia objects without Friend-Lite owner
 	@echo "🔍 Checking for orphaned Mycelia objects..."
-	@cd backends/advanced && uv run python scripts/sync_chronicle_mycelia.py --check-orphans
+	@cd backends/advanced && uv run python scripts/sync_friendlite_mycelia.py --check-orphans
 
 mycelia-reassign-orphans: ## Reassign orphaned objects to user (usage: make mycelia-reassign-orphans EMAIL=admin@example.com)
 	@echo "♻️  Reassigning orphaned Mycelia objects..."
@@ -381,7 +623,40 @@ mycelia-reassign-orphans: ## Reassign orphaned objects to user (usage: make myce
 	fi
 	@echo "⚠️  This will reassign all orphaned objects to: $(EMAIL)"
 	@read -p "Continue? (y/N): " confirm && [ "$$confirm" = "y" ] || exit 1
-	@cd backends/advanced && uv run python scripts/sync_chronicle_mycelia.py --reassign-orphans --target-email $(EMAIL)
+	@cd backends/advanced && uv run python scripts/sync_friendlite_mycelia.py --reassign-orphans --target-email $(EMAIL)
+
+mycelia-create-token: ## Create Mycelia API token for a user in specified environment
+	@echo "🔑 Creating Mycelia API Token"
+	@echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+	@echo ""
+	@# List available environments
+	@if [ ! -d "environments" ] || [ -z "$$(ls -A environments/*.env 2>/dev/null)" ]; then \
+		echo "❌ No environments found. Create one with: make wizard"; \
+		exit 1; \
+	fi
+	@echo "📋 Available environments:"; \
+	ls -1 environments/*.env 2>/dev/null | sed 's|environments/||;s|.env$$||' | sed 's/^/  - /'; \
+	echo ""
+	@# Ask for environment
+	@read -p "Environment name: " env_name; \
+	if [ ! -f "environments/$$env_name.env" ]; then \
+		echo "❌ Environment '$$env_name' not found"; \
+		exit 1; \
+	fi; \
+	echo ""; \
+	echo "📦 Checking if $$env_name environment is running..."; \
+	echo ""; \
+	source "environments/$$env_name.env"; \
+	running=$$(docker ps --filter "name=$$COMPOSE_PROJECT_NAME-friend-backend-1" --format "{{.Names}}" 2>/dev/null); \
+	if [ -z "$$running" ]; then \
+		echo "⚠️  Environment not running. Start it first with:"; \
+		echo "   ./start-env.sh $$env_name"; \
+		echo ""; \
+		exit 1; \
+	fi; \
+	echo "✅ Environment is running ($$COMPOSE_PROJECT_NAME)"; \
+	echo ""; \
+	cd backends/advanced && ENV_NAME=$$env_name uv run python scripts/create_mycelia_api_key.py
 
 # ========================================
 # TESTING TARGETS
@@ -428,3 +703,229 @@ test-robot-clean: ## Clean up Robot Framework test results
 	@echo "🧹 Cleaning up Robot Framework test results..."
 	@rm -rf results/
 	@echo "✅ Test results cleaned"
+
+# ========================================
+# MULTI-ENVIRONMENT SUPPORT
+# ========================================
+
+env-list: ## List available environments
+	@echo "📋 Available Environments:"
+	@echo ""
+	@ls -1 environments/*.env 2>/dev/null | sed 's|environments/||;s|.env$$||' | while read env; do \
+		echo "  • $$env"; \
+		if [ -f "environments/$$env.env" ]; then \
+			grep '^# ' environments/$$env.env | head -1 | sed 's/^# /    /'; \
+		fi; \
+	done
+	@echo ""
+	@echo "Usage: make env-start ENV=<name>"
+	@echo "   or: ./start-env.sh <name> [options]"
+
+env-start: ## Start specific environment (usage: make env-start ENV=dev)
+	@if [ -z "$(ENV)" ]; then \
+		echo "❌ ENV parameter required"; \
+		echo "Usage: make env-start ENV=dev"; \
+		echo ""; \
+		$(MAKE) env-list; \
+		exit 1; \
+	fi
+	@./start-env.sh $(ENV) $(OPTS)
+
+env-stop: ## Stop specific environment (usage: make env-stop ENV=dev)
+	@if [ -z "$(ENV)" ]; then \
+		echo "❌ ENV parameter required"; \
+		echo "Usage: make env-stop ENV=dev"; \
+		exit 1; \
+	fi
+	@echo "🛑 Stopping environment: $(ENV)"
+	@COMPOSE_PROJECT_NAME=friend-lite-$(ENV) docker compose down
+
+env-clean: ## Clean specific environment data (usage: make env-clean ENV=dev)
+	@if [ -z "$(ENV)" ]; then \
+		echo "❌ ENV parameter required"; \
+		echo "Usage: make env-clean ENV=dev"; \
+		exit 1; \
+	fi
+	@echo "⚠️  This will delete all data for environment: $(ENV)"
+	@read -p "Continue? (y/N): " confirm && [ "$$confirm" = "y" ] || exit 1
+	@source environments/$(ENV).env && rm -rf $$DATA_DIR
+	@COMPOSE_PROJECT_NAME=friend-lite-$(ENV) docker compose down -v
+	@echo "✅ Environment $(ENV) cleaned"
+
+env-status: ## Show status of all environments
+	@echo "📊 Environment Status:"
+	@echo ""
+	@for env in $$(ls -1 environments/*.env 2>/dev/null | sed 's|environments/||;s|.env$$||'); do \
+		echo "Environment: $$env"; \
+		COMPOSE_PROJECT_NAME=friend-lite-$$env docker compose ps 2>/dev/null | grep -v "NAME" || echo "  Not running"; \
+		echo ""; \
+	done
+
+# ========================================
+# SHARED INFRASTRUCTURE (MongoDB, Redis, Qdrant)
+# ========================================
+
+infra-start: ## Start shared infrastructure (MongoDB, Redis, Qdrant, optional Neo4j)
+	@echo "🚀 Starting shared infrastructure services..."
+	@echo ""
+	@# Check if network exists, create if not
+	@docker network inspect chronicle-network >/dev/null 2>&1 || docker network create chronicle-network
+	@# Check if Neo4j should be started (NEO4J_ENABLED in any environment)
+	@if grep -q "^NEO4J_ENABLED=true" environments/*.env 2>/dev/null; then \
+		echo "🔗 Neo4j enabled in at least one environment - starting with Neo4j profile..."; \
+		docker compose -p chronicle-infra -f compose/infrastructure-shared.yml --profile neo4j up -d; \
+	else \
+		docker compose -p chronicle-infra -f compose/infrastructure-shared.yml up -d; \
+	fi
+	@echo ""
+	@echo "✅ Infrastructure services started!"
+	@echo ""
+	@echo "   📊 MongoDB:  mongodb://localhost:27017"
+	@echo "   💾 Redis:    redis://localhost:6379"
+	@echo "   🔍 Qdrant:   http://localhost:6034"
+	@if docker ps --format '{{.Names}}' | grep -q '^chronicle-neo4j$$'; then \
+		echo "   🔗 Neo4j:    http://localhost:7474 (bolt: 7687)"; \
+	fi
+	@echo ""
+	@echo "💡 These services are shared by all environments"
+	@echo "   Each environment uses unique database names for isolation"
+	@echo ""
+
+infra-stop: ## Stop shared infrastructure
+	@echo "🛑 Stopping shared infrastructure..."
+	@echo "⚠️  This will affect ALL running environments!"
+	@read -p "Continue? (y/N): " confirm && [ "$$confirm" = "y" ] || exit 1
+	@docker compose -p chronicle-infra -f compose/infrastructure-shared.yml down
+	@echo "✅ Infrastructure stopped"
+
+infra-restart: ## Restart shared infrastructure
+	@echo "🔄 Restarting shared infrastructure..."
+	@docker compose -p chronicle-infra -f compose/infrastructure-shared.yml restart
+	@echo "✅ Infrastructure restarted"
+
+infra-logs: ## View infrastructure logs
+	@echo "📋 Viewing infrastructure logs (press Ctrl+C to exit)..."
+	@docker compose -p chronicle-infra -f compose/infrastructure-shared.yml logs -f
+
+infra-status: ## Check infrastructure status
+	@echo "📊 Infrastructure Status:"
+	@echo ""
+	@if docker ps --format '{{.Names}}' | grep -qE '(chronicle|friend-lite).*mongo'; then \
+		echo "✅ MongoDB is running"; \
+		docker ps --format '{{.Names}} {{.Ports}}' | grep mongo | awk '{print "   " $$1}'; \
+	else \
+		echo "❌ MongoDB is not running"; \
+	fi
+	@echo ""
+	@if docker ps --format '{{.Names}}' | grep -qE '(chronicle|friend-lite).*redis'; then \
+		echo "✅ Redis is running"; \
+		docker ps --format '{{.Names}} {{.Ports}}' | grep redis | awk '{print "   " $$1}'; \
+	else \
+		echo "❌ Redis is not running"; \
+	fi
+	@echo ""
+	@if docker ps --format '{{.Names}}' | grep -qE '(chronicle|friend-lite).*qdrant'; then \
+		echo "✅ Qdrant is running"; \
+		docker ps --format '{{.Names}} {{.Ports}}' | grep qdrant | awk '{print "   " $$1}'; \
+	else \
+		echo "❌ Qdrant is not running"; \
+	fi
+	@echo ""
+	@if docker ps --format '{{.Names}}' | grep -q '^chronicle-neo4j$$'; then \
+		echo "✅ Neo4j is running"; \
+		docker ps --format '{{.Names}} {{.Ports}}' | grep neo4j | awk '{print "   " $$1}'; \
+	else \
+		echo "ℹ️  Neo4j is not running (optional)"; \
+	fi
+	@echo ""
+	@if ! docker ps --format '{{.Names}}' | grep -qE '(chronicle|friend-lite).*(mongo|redis|qdrant)'; then \
+		echo "💡 Start infrastructure with: make infra-start"; \
+	fi
+
+infra-clean: ## Clean infrastructure data (DANGER: deletes all databases!)
+	@echo "⚠️  WARNING: This will delete ALL data from ALL environments!"
+	@echo "   This includes:"
+	@echo "   • All MongoDB databases"
+	@echo "   • All Redis data"
+	@echo "   • All Qdrant collections"
+	@echo "   • All Neo4j graph databases (if enabled)"
+	@echo ""
+	@read -p "Type 'DELETE ALL DATA' to confirm: " confirm && [ "$$confirm" = "DELETE ALL DATA" ] || exit 1
+	@docker compose -p chronicle-infra -f compose/infrastructure-shared.yml --profile neo4j down -v
+	@echo "✅ Infrastructure data deleted"
+
+# ========================================
+# CADDY REVERSE PROXY (Shared Service)
+# ========================================
+
+caddy-start: ## Start shared Caddy reverse proxy (serves all environments)
+	@echo "🚀 Starting Caddy reverse proxy..."
+	@echo ""
+	@# Check if Caddyfile exists
+	@if [ ! -f "caddy/Caddyfile" ]; then \
+		echo "⚠️  Caddyfile not found. Generating..."; \
+		./scripts/generate-caddyfile.sh; \
+		echo ""; \
+	fi
+	@# Start Caddy
+	@docker compose -f compose/caddy.yml up -d
+	@echo ""
+	@echo "✅ Caddy reverse proxy started!"
+	@echo ""
+	@# Show access URLs
+	@if [ -f "config-docker.env" ]; then \
+		source config-docker.env; \
+		if [ -n "$$TAILSCALE_HOSTNAME" ]; then \
+			echo "🌐 Access your environments at:"; \
+			echo "   https://$$TAILSCALE_HOSTNAME/"; \
+			echo ""; \
+			echo "   Individual environments:"; \
+			for env in $$(ls -1 environments/*.env 2>/dev/null | sed 's|environments/||;s|.env$$||'); do \
+				echo "     • $$env: https://$$TAILSCALE_HOSTNAME/$$env/"; \
+			done; \
+			echo ""; \
+		fi; \
+	fi
+
+caddy-stop: ## Stop shared Caddy reverse proxy
+	@echo "🛑 Stopping Caddy reverse proxy..."
+	@docker compose -f compose/caddy.yml down
+	@echo "✅ Caddy stopped"
+
+caddy-restart: ## Restart shared Caddy reverse proxy
+	@echo "🔄 Restarting Caddy reverse proxy..."
+	@docker compose -f compose/caddy.yml restart
+	@echo "✅ Caddy restarted"
+
+caddy-logs: ## View Caddy logs
+	@echo "📋 Viewing Caddy logs (press Ctrl+C to exit)..."
+	@docker compose -f compose/caddy.yml logs -f
+
+caddy-status: ## Check if Caddy is running
+	@echo "📊 Caddy Status:"
+	@echo ""
+	@if docker ps --format '{{.Names}}' | grep -qE '^(chronicle|friend-lite)-caddy'; then \
+		echo "✅ Caddy is running"; \
+		docker ps --format '{{.Names}} {{.Ports}}' | grep caddy | awk '{print "   " $$1}'; \
+		echo ""; \
+		if [ -f "config-docker.env" ]; then \
+			source config-docker.env; \
+			if [ -n "$$TAILSCALE_HOSTNAME" ]; then \
+				echo "🌐 Access URL: https://$$TAILSCALE_HOSTNAME/"; \
+			fi; \
+		fi; \
+	else \
+		echo "❌ Caddy is not running"; \
+		echo "   Start with: make caddy-start"; \
+	fi
+	@echo ""
+
+caddy-regenerate: ## Regenerate Caddyfile from current environments
+	@echo "🔧 Regenerating Caddyfile..."
+	@./scripts/generate-caddyfile.sh
+	@echo ""
+	@echo "✅ Caddyfile regenerated"
+	@echo ""
+	@echo "🔄 Restart Caddy to apply changes:"
+	@echo "   make caddy-restart"
+
diff --git a/backends/advanced/Caddyfile.template b/backends/advanced/Caddyfile.template
index ccb2983d..3041ec79 100644
--- a/backends/advanced/Caddyfile.template
+++ b/backends/advanced/Caddyfile.template
@@ -56,6 +56,15 @@ localhost TAILSCALE_IP {
         reverse_proxy chronicle-backend:8000
     }
 
+    # MCP endpoints - proxy to backend
+    handle /mcp/* {
+        reverse_proxy friend-backend:8000 {
+            header_up X-Real-IP {remote_host}
+            header_up X-Forwarded-For {remote_host}
+            header_up X-Forwarded-Proto {scheme}
+        }
+    }
+
     # Everything else - proxy to webui
     handle {
         reverse_proxy webui:80
@@ -100,6 +109,15 @@ localhost TAILSCALE_IP {
 #         reverse_proxy chronicle-backend:8000
 #     }
 #
+#     # MCP endpoints
+#     handle /mcp/* {
+#         reverse_proxy friend-backend:8000 {
+#             header_up X-Real-IP {remote_host}
+#             header_up X-Forwarded-For {remote_host}
+#             header_up X-Forwarded-Proto {scheme}
+#         }
+#     }
+#
 #     # Everything else - webui
 #     handle {
 #         reverse_proxy webui:80
diff --git a/backends/advanced/compose/backend.yml b/backends/advanced/compose/backend.yml
new file mode 100644
index 00000000..a7f22f02
--- /dev/null
+++ b/backends/advanced/compose/backend.yml
@@ -0,0 +1,58 @@
+# Backend Services
+# Friend-Lite backend API and workers
+
+services:
+  backend:
+    build:
+      context: ..
+      dockerfile: Dockerfile
+    env_file:
+      - ../../../.env.default
+    ports:
+      - "${BACKEND_PORT:-8000}:8000"
+    volumes:
+      - ../src:/app/src
+      - ../data/audio_chunks:/app/audio_chunks
+      - ../data/debug_dir:/app/debug_dir
+      - ../data:/app/data
+    environment:
+      # Service URLs (Docker internal network)
+      - REDIS_URL=redis://redis:6379/${REDIS_DATABASE:-0}
+      - MYCELIA_URL=${MYCELIA_URL:-http://mycelia-backend:5173}
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8000/readiness"]
+      interval: 30s
+      timeout: 30s
+      retries: 5
+      start_period: 5s
+    restart: unless-stopped
+    networks:
+      - chronicle-network
+
+  # Unified Worker Container
+  # Runs all workers in a single container:
+  # - 3 RQ workers (transcription, memory, default queues)
+  # - 1 Audio stream worker (Redis Streams consumer - must be single instance)
+  workers:
+    build:
+      context: ..
+      dockerfile: Dockerfile
+    command: ["./start-workers.sh"]
+    env_file:
+      - ../../../.env.default
+    volumes:
+      - ../src:/app/src
+      - ../start-workers.sh:/app/start-workers.sh
+      - ../data/audio_chunks:/app/audio_chunks
+      - ../data:/app/data
+    environment:
+      # Service URLs (Docker internal network)
+      - REDIS_URL=redis://redis:6379/${REDIS_DATABASE:-0}
+    restart: unless-stopped
+    networks:
+      - chronicle-network
+
+networks:
+  chronicle-network:
+    name: chronicle-network
+    external: true
diff --git a/backends/advanced/compose/frontend.yml b/backends/advanced/compose/frontend.yml
new file mode 100644
index 00000000..5da122d5
--- /dev/null
+++ b/backends/advanced/compose/frontend.yml
@@ -0,0 +1,26 @@
+# Frontend Services
+# Web UI for Friend-Lite
+
+services:
+  webui:
+    build:
+      context: ../webui
+      dockerfile: Dockerfile
+      args:
+        - VITE_BASE_PATH=${VITE_BASE_PATH:-/}
+        - VITE_BACKEND_URL=${VITE_BACKEND_URL:-http://localhost:8000}
+    env_file:
+      - ../../../.env.default
+    ports:
+      - "${WEBUI_PORT:-3000}:80"
+    depends_on:
+      backend:
+        condition: service_healthy
+    restart: unless-stopped
+    networks:
+      - chronicle-network
+
+networks:
+  chronicle-network:
+    name: chronicle-network
+    external: true
diff --git a/backends/advanced/docker-compose.yml b/backends/advanced/docker-compose.yml
index 5f84d1d3..b4a54c73 100644
--- a/backends/advanced/docker-compose.yml
+++ b/backends/advanced/docker-compose.yml
@@ -1,242 +1,53 @@
-services:
-  chronicle-backend:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    ports:
-      - "8000:8000"
-    env_file:
-      - .env
-    volumes:
-      - ./src:/app/src  # Mount source code for development
-      - ./data/audio_chunks:/app/audio_chunks
-      - ./data/debug_dir:/app/debug_dir
-      - ./data:/app/data
-    environment:
-      - DEEPGRAM_API_KEY=${DEEPGRAM_API_KEY}
-      - MISTRAL_API_KEY=${MISTRAL_API_KEY}
-      - MISTRAL_MODEL=${MISTRAL_MODEL}
-      - TRANSCRIPTION_PROVIDER=${TRANSCRIPTION_PROVIDER}
-      - PARAKEET_ASR_URL=${PARAKEET_ASR_URL}
-      - OLLAMA_BASE_URL=${OLLAMA_BASE_URL}
-      - HF_TOKEN=${HF_TOKEN}
-      - SPEAKER_SERVICE_URL=${SPEAKER_SERVICE_URL}
-      - ADMIN_PASSWORD=${ADMIN_PASSWORD}
-      - ADMIN_EMAIL=${ADMIN_EMAIL}
-      - AUTH_SECRET_KEY=${AUTH_SECRET_KEY}
-      - LLM_PROVIDER=${LLM_PROVIDER}
-      - OPENAI_API_KEY=${OPENAI_API_KEY}
-      - OPENAI_BASE_URL=${OPENAI_BASE_URL}
-      - OPENAI_MODEL=${OPENAI_MODEL}
-      - NEO4J_HOST=${NEO4J_HOST}
-      - NEO4J_USER=${NEO4J_USER}
-      - NEO4J_PASSWORD=${NEO4J_PASSWORD}
-      - CORS_ORIGINS=http://localhost:3010,http://localhost:8000,http://192.168.1.153:3010,http://192.168.1.153:8000,https://localhost:3010,https://localhost:8000,https://100.105.225.45,https://localhost
-      - REDIS_URL=redis://redis:6379/0
-    depends_on:
-      qdrant:
-        condition: service_started
-      mongo:
-        condition: service_healthy
-      redis:
-        condition: service_healthy
-      # neo4j-mem0:
-      #   condition: service_started
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:8000/readiness"]
-      interval: 30s
-      timeout: 30s
-      retries: 5
-      start_period: 5s
-    restart: unless-stopped
-
-  # Unified Worker Container
-  # No CUDA needed for chronicle-backend and workers, workers only orchestrate jobs and call external services
-  # Runs all workers in a single container for efficiency:
-  # - 3 RQ workers (transcription, memory, default queues)
-  # - 1 Audio stream worker (Redis Streams consumer - must be single to maintain sequential chunks)
-  workers:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    command: ["./start-workers.sh"]
-    env_file:
-      - .env
-    volumes:
-      - ./src:/app/src
-      - ./start-workers.sh:/app/start-workers.sh
-      - ./data/audio_chunks:/app/audio_chunks
-      - ./data:/app/data
-    environment:
-      - DEEPGRAM_API_KEY=${DEEPGRAM_API_KEY}
-      - MISTRAL_API_KEY=${MISTRAL_API_KEY}
-      - MISTRAL_MODEL=${MISTRAL_MODEL}
-      - TRANSCRIPTION_PROVIDER=${TRANSCRIPTION_PROVIDER}
-      - OPENAI_API_KEY=${OPENAI_API_KEY}
-      - OPENAI_BASE_URL=${OPENAI_BASE_URL}
-      - OPENAI_MODEL=${OPENAI_MODEL}
-      - LLM_PROVIDER=${LLM_PROVIDER}
-      - REDIS_URL=redis://redis:6379/0
-    depends_on:
-      redis:
-        condition: service_healthy
-      mongo:
-        condition: service_healthy
-      qdrant:
-        condition: service_started
-    restart: unless-stopped
-
-  webui:
-    build:
-      context: ./webui
-      dockerfile: Dockerfile
-      args:
-        # Direct access (http://localhost:3010):
-        # - VITE_BACKEND_URL=http://localhost:8000
-        # - BACKEND_URL=http://localhost:8000
-        # For Caddy HTTPS (https://localhost), use:
-        - VITE_BACKEND_URL=
-        - BACKEND_URL=
-    ports:
-      # - "${WEBUI_PORT:-3010}:80"
-      - 3010:80
-    depends_on:
-      chronicle-backend:
-        condition: service_healthy
-    restart: unless-stopped
-
-  # Caddy reverse proxy - provides HTTPS for microphone access
-  # Access at: https://localhost (accepts self-signed cert warning)
-  # Only starts when HTTPS is configured (Caddyfile exists)
-  caddy:
-    image: caddy:2-alpine
-    ports:
-      - "443:443"
-      - "80:80"  # HTTP redirect to HTTPS
-    volumes:
-      - ./Caddyfile:/etc/caddy/Caddyfile:ro
-      - caddy_data:/data
-      - caddy_config:/config
-    depends_on:
-      chronicle-backend:
-        condition: service_healthy
-    restart: unless-stopped
-    profiles:
-      - https
-
-  # Development webui service (use with docker-compose --profile dev up)
-  webui-dev:
-    build:
-      context: ./webui
-      dockerfile: Dockerfile.dev
-    ports:
-      - "${WEBUI_DEV_PORT:-5173}:5173"
-    environment:
-      - VITE_BACKEND_URL=http://${HOST_IP}:${BACKEND_PUBLIC_PORT:-8000}
-    volumes:
-      - ./webui/src:/app/src
-      - ./webui/public:/app/public
-    depends_on:
-      chronicle-backend:
-        condition: service_healthy
-    profiles:
-      - dev
-
-  qdrant:
-    image: qdrant/qdrant:latest
-    ports:
-      - "6033:6033" # gRPC
-      - "6034:6034" # HTTP
-    volumes:
-      - ./data/qdrant_data:/qdrant/storage 
-  
-
-  mongo:
-    image: mongo:8.0.14
-    ports:
-      - "27017:27017"
-    volumes:
-      - mongo_data:/data/db
-    healthcheck:
-      test: ["CMD", "mongosh", "--quiet", "--eval", "db.adminCommand({ ping: 1 })"]
-      interval: 10s
-      timeout: 5s
-      retries: 5
-      start_period: 10s
-
-  redis:
-    image: redis:7-alpine
-    ports:
-      - "6379:6379"  # Avoid conflict with dev on 6379
-    volumes:
-      - ./data/redis_data:/data
-    command: redis-server --appendonly yes
-    healthcheck:
-      test: ["CMD", "redis-cli", "ping"]
-      interval: 5s
-      timeout: 3s
-      retries: 5
-
-  ##  Additional
-
-  # neo4j-mem0:
-  #   image: neo4j:5.15-community
-  #   ports:
-  #     - "7474:7474" # HTTP
-  #     - "7687:7687" # Bolt
-  #   environment:
-  #     - NEO4J_AUTH=neo4j/${NEO4J_PASSWORD:-password}
-  #     - NEO4J_PLUGINS=["apoc"]
-  #     - NEO4J_dbms_security_procedures_unrestricted=apoc.*
-  #     - NEO4J_dbms_security_procedures_allowlist=apoc.*
-  #   volumes:
-  #     - ./data/neo4j_data:/data
-  #     - ./data/neo4j_logs:/logs
-  #   restart: unless-stopped
-
-  # ollama:
-  #   image: ollama/ollama:latest
-  #   container_name: ollama
-  #   ports:
-  #     - "11434:11434"
-  #   volumes:
-  #     - ollama_data:/root/.ollama
-    # deploy:
-    #   resources:
-    #     reservations:
-    #       devices:
-    #         - driver: nvidia
-    #           count: all
-    #           capabilities: [gpu]
-
-
-
-  # Use tailscale instead
-  # UNCOMMENT OUT FOR LOCAL DEMO - EXPOSES to internet
-  # ngrok:
-  #   image: ngrok/ngrok:latest
-  #   depends_on: [chronicle-backend, proxy]
-  #   ports:
-  #     - "4040:4040" # Ngrok web interface
-  #   environment:
-  #     - NGROK_AUTHTOKEN=${NGROK_AUTHTOKEN}
-  #   command: "http proxy:80 --url=${NGROK_URL} --basic-auth=${NGROK_BASIC_AUTH}"
-
-# Shared network for cross-project communication
+# Friend-Lite Docker Compose
+# Root compose file using modular includes
+#
+# Usage:
+#   Development:  docker compose up
+#   With Mycelia:  docker compose --profile mycelia up
+#   With HTTPS:    docker compose --profile https up
+#   Testing:       docker compose -f docker-compose.yml -f compose/overrides/test.yml up
+#   Production:    docker compose -f docker-compose.yml -f compose/overrides/prod.yml up
+#
+# Structure:
+#   compose/backend.yml           - Backend API and workers
+#   compose/frontend.yml          - Web UI
+#   compose/overrides/            - Environment-specific overrides
+
+include:
+  # Application services (always included)
+  - compose/backend.yml
+  - compose/frontend.yml
+
+  # Note: Infrastructure (MongoDB, Redis, Qdrant) is SHARED across all environments
+  # Start infrastructure once with: docker compose -f ../../compose/infrastructure-shared.yml up -d
+  # Each environment connects to shared infrastructure using unique database names
+
+  # Note: Caddy is SHARED across all environments
+  # Start Caddy once with: docker compose -f ../../compose/caddy.yml up -d
+  # Caddy serves all environments via path-based routing
+
+  # Note: Mycelia moved to root level (../../compose/mycelia.yml)
+  # To use Mycelia, run from project root: docker compose --profile mycelia up
+
+  # Development overrides (default)
+  - compose/overrides/dev.yml
+
+# Shared network configuration
 networks:
   chronicle-network:
     name: chronicle-network
+    external: true
 
-
+# Shared volume configuration
 volumes:
-  ollama_data:
-    driver: local
   mongo_data:
     driver: local
   caddy_data:
     driver: local
   caddy_config:
     driver: local
+  ollama_data:
+    driver: local
   neo4j_data:
     driver: local
   neo4j_logs:
diff --git a/backends/advanced/src/advanced_omi_backend/app_config.py b/backends/advanced/src/advanced_omi_backend/app_config.py
index 9857417e..3542d1df 100644
--- a/backends/advanced/src/advanced_omi_backend/app_config.py
+++ b/backends/advanced/src/advanced_omi_backend/app_config.py
@@ -26,6 +26,9 @@ class AppConfig:
     """Centralized application configuration."""
 
     def __init__(self):
+        # Graceful degradation mode
+        self.allow_missing_api_keys = os.getenv("ALLOW_MISSING_API_KEYS", "false").lower() == "true"
+
         # MongoDB Configuration
         self.mongodb_uri = os.getenv("MONGODB_URI", "mongodb://mongo:27017")
         # default to legacy value to avoid breaking peoples .env
@@ -51,10 +54,11 @@ def __init__(self):
         self.min_speech_segment_duration = float(os.getenv("MIN_SPEECH_SEGMENT_DURATION", "1.0"))
         self.cropping_context_padding = float(os.getenv("CROPPING_CONTEXT_PADDING", "0.1"))
 
-        # Transcription Configuration
+        # Transcription Configuration with graceful degradation
         self.transcription_provider_name = os.getenv("TRANSCRIPTION_PROVIDER")
         self.deepgram_api_key = os.getenv("DEEPGRAM_API_KEY")
         self.mistral_api_key = os.getenv("MISTRAL_API_KEY")
+        self.transcription_required = os.getenv("TRANSCRIPTION_REQUIRED", "true").lower() == "true"
 
         # Get configured transcription provider
         self.transcription_provider = get_transcription_provider(self.transcription_provider_name)
@@ -62,8 +66,16 @@ def __init__(self):
             logger.info(
                 f"✅ Using {self.transcription_provider.name} transcription provider ({self.transcription_provider.mode})"
             )
+            self.transcription_enabled = True
         else:
-            logger.warning("⚠️ No transcription provider configured - speech-to-text will not be available")
+            if self.transcription_required and not self.allow_missing_api_keys:
+                logger.error("❌ Transcription provider required but not configured")
+            else:
+                logger.warning("⚠️  Transcription disabled - No transcription provider configured")
+                if self.allow_missing_api_keys:
+                    logger.warning("   Add Deepgram API key to enable transcription")
+                    logger.warning("   Configure at: http://localhost:4000/system")
+            self.transcription_enabled = False
 
         # External Services Configuration
         self.qdrant_base_url = os.getenv("QDRANT_BASE_URL", "qdrant")
@@ -88,6 +100,24 @@ def __init__(self):
         # Thread pool configuration
         self.max_workers = os.cpu_count() or 4
 
+        # LLM Configuration with graceful degradation
+        self.llm_provider = os.getenv("LLM_PROVIDER", "openai")
+        self.openai_api_key = os.getenv("OPENAI_API_KEY")
+        self.llm_required = os.getenv("LLM_REQUIRED", "true").lower() == "true"
+
+        if not self.openai_api_key:
+            if self.llm_required and not self.allow_missing_api_keys:
+                logger.error("❌ LLM provider required but OPENAI_API_KEY not configured")
+            else:
+                logger.warning("⚠️  LLM disabled - Memory extraction and chat features unavailable")
+                if self.allow_missing_api_keys:
+                    logger.warning("   Add OpenAI API key to enable LLM features")
+                    logger.warning("   Configure at: http://localhost:4000/system")
+            self.llm_enabled = False
+        else:
+            self.llm_enabled = True
+            logger.info(f"✅ LLM enabled (provider: {self.llm_provider})")
+
         # Memory service configuration
         self.memory_service_supports_threshold = self.memory_provider == "chronicle"
 
diff --git a/backends/advanced/src/advanced_omi_backend/routers/modules/health_routes.py b/backends/advanced/src/advanced_omi_backend/routers/modules/health_routes.py
index d94940ce..1486b38d 100644
--- a/backends/advanced/src/advanced_omi_backend/routers/modules/health_routes.py
+++ b/backends/advanced/src/advanced_omi_backend/routers/modules/health_routes.py
@@ -1,5 +1,5 @@
 """
-Health check routes for Chronicle backend.
+Health check routes for Friend-Lite backend.
 
 This module provides health check endpoints for monitoring the application's status.
 """
@@ -116,15 +116,9 @@ async def health_check():
 
     overall_healthy = True
     critical_services_healthy = True
-
+    
     # Get configuration once at the start
-    memory_provider = os.getenv("MEMORY_PROVIDER", "chronicle").lower()
-
-    # Map legacy provider names to current names
-    if memory_provider in ("friend-lite", "friend_lite"):
-        logger.debug(f"Mapping legacy provider '{memory_provider}' to 'chronicle'")
-        memory_provider = "chronicle"
-
+    memory_provider = os.getenv("MEMORY_PROVIDER", "friend_lite")
     speaker_service_url = os.getenv("SPEAKER_SERVICE_URL")
     openmemory_mcp_url = os.getenv("OPENMEMORY_MCP_URL")
 
@@ -135,12 +129,14 @@ async def health_check():
             "status": "✅ Connected",
             "healthy": True,
             "critical": True,
+            "url": MONGODB_URI,
         }
     except asyncio.TimeoutError:
         health_status["services"]["mongodb"] = {
             "status": "❌ Connection Timeout (5s)",
             "healthy": False,
             "critical": True,
+            "url": MONGODB_URI,
         }
         overall_healthy = False
         critical_services_healthy = False
@@ -149,13 +145,14 @@ async def health_check():
             "status": f"❌ Connection Failed: {str(e)}",
             "healthy": False,
             "critical": True,
+            "url": MONGODB_URI,
         }
         overall_healthy = False
         critical_services_healthy = False
 
     # Check Redis and RQ Workers (critical for queue processing)
     try:
-        from advanced_omi_backend.controllers.queue_controller import get_queue_health
+        from advanced_omi_backend.controllers.queue_controller import get_queue_health, REDIS_URL
 
         # Get queue health (includes Redis connection test and worker count)
         queue_health = await asyncio.wait_for(
@@ -173,6 +170,7 @@ async def health_check():
                 "status": "✅ Connected",
                 "healthy": True,
                 "critical": True,
+                "url": REDIS_URL,
                 "worker_count": worker_count,
                 "active_workers": active_workers,
                 "idle_workers": idle_workers,
@@ -183,6 +181,7 @@ async def health_check():
                 "status": f"❌ Connection Failed: {queue_health.get('redis_connection')}",
                 "healthy": False,
                 "critical": True,
+                "url": REDIS_URL,
                 "worker_count": 0
             }
             overall_healthy = False
@@ -193,6 +192,7 @@ async def health_check():
             "status": "❌ Connection Timeout (5s)",
             "healthy": False,
             "critical": True,
+            "url": os.getenv("REDIS_URL", "redis://localhost:6379/0"),
             "worker_count": 0
         }
         overall_healthy = False
@@ -202,6 +202,7 @@ async def health_check():
             "status": f"❌ Connection Failed: {str(e)}",
             "healthy": False,
             "critical": True,
+            "url": os.getenv("REDIS_URL", "redis://localhost:6379/0"),
             "worker_count": 0
         }
         overall_healthy = False
@@ -213,61 +214,70 @@ async def health_check():
         health_status["services"]["audioai"] = {
             "status": llm_health.get("status", "❌ Unknown"),
             "healthy": "✅" in llm_health.get("status", ""),
-            "base_url": llm_health.get("base_url", ""),
+            "url": llm_health.get("base_url", ""),
             "model": llm_health.get("default_model", ""),
             "provider": os.getenv("LLM_PROVIDER", "openai"),
             "critical": False,
         }
     except asyncio.TimeoutError:
+        llm_base_url = os.getenv("OPENAI_BASE_URL", "https://api.openai.com/v1")
         health_status["services"]["audioai"] = {
             "status": "⚠️ Connection Timeout (8s) - Service may not be running",
             "healthy": False,
+            "url": llm_base_url,
             "provider": os.getenv("LLM_PROVIDER", "openai"),
             "critical": False,
         }
         overall_healthy = False
     except Exception as e:
+        llm_base_url = os.getenv("OPENAI_BASE_URL", "https://api.openai.com/v1")
         health_status["services"]["audioai"] = {
             "status": f"⚠️ Connection Failed: {str(e)} - Service may not be running",
             "healthy": False,
+            "url": llm_base_url,
             "provider": os.getenv("LLM_PROVIDER", "openai"),
             "critical": False,
         }
         overall_healthy = False
 
     # Check memory service (provider-dependent)
-    if memory_provider == "chronicle":
+    if memory_provider == "friend_lite":
+        qdrant_url = f"http://{QDRANT_BASE_URL}:{QDRANT_PORT}"
         try:
-            # Test Chronicle memory service connection with timeout
+            # Test Friend-Lite memory service connection with timeout
             test_success = await asyncio.wait_for(memory_service.test_connection(), timeout=8.0)
             if test_success:
                 health_status["services"]["memory_service"] = {
-                    "status": "✅ Chronicle Memory Connected",
+                    "status": "✅ Friend-Lite Memory Connected",
                     "healthy": True,
-                    "provider": "chronicle",
+                    "provider": "friend_lite",
+                    "url": qdrant_url,
                     "critical": False,
                 }
             else:
                 health_status["services"]["memory_service"] = {
-                    "status": "⚠️ Chronicle Memory Test Failed",
+                    "status": "⚠️ Friend-Lite Memory Test Failed",
                     "healthy": False,
-                    "provider": "chronicle",
+                    "provider": "friend_lite",
+                    "url": qdrant_url,
                     "critical": False,
                 }
                 overall_healthy = False
         except asyncio.TimeoutError:
             health_status["services"]["memory_service"] = {
-                "status": "⚠️ Chronicle Memory Timeout (8s) - Check Qdrant",
+                "status": "⚠️ Friend-Lite Memory Timeout (8s) - Check Qdrant",
                 "healthy": False,
-                "provider": "chronicle",
+                "provider": "friend_lite",
+                "url": qdrant_url,
                 "critical": False,
             }
             overall_healthy = False
         except Exception as e:
             health_status["services"]["memory_service"] = {
-                "status": f"⚠️ Chronicle Memory Failed: {str(e)}",
+                "status": f"⚠️ Friend-Lite Memory Failed: {str(e)}",
                 "healthy": False,
-                "provider": "chronicle",
+                "provider": "friend_lite",
+                "url": qdrant_url,
                 "critical": False,
             }
             overall_healthy = False
@@ -277,10 +287,12 @@ async def health_check():
             "status": "✅ Using OpenMemory MCP",
             "healthy": True,
             "provider": "openmemory_mcp",
+            "url": openmemory_mcp_url or "Not configured",
             "critical": False,
         }
     elif memory_provider == "mycelia":
         # Mycelia memory service check
+        mycelia_url = os.getenv("MYCELIA_API_URL", "http://mycelia-backend:5100")
         try:
             # Test Mycelia memory service connection with timeout
             test_success = await asyncio.wait_for(memory_service.test_connection(), timeout=8.0)
@@ -289,6 +301,7 @@ async def health_check():
                     "status": "✅ Mycelia Memory Connected",
                     "healthy": True,
                     "provider": "mycelia",
+                    "url": mycelia_url,
                     "critical": False,
                 }
             else:
@@ -296,6 +309,7 @@ async def health_check():
                     "status": "⚠️ Mycelia Memory Test Failed",
                     "healthy": False,
                     "provider": "mycelia",
+                    "url": mycelia_url,
                     "critical": False,
                 }
                 overall_healthy = False
@@ -304,6 +318,7 @@ async def health_check():
                 "status": "⚠️ Mycelia Memory Timeout (8s) - Check Mycelia service",
                 "healthy": False,
                 "provider": "mycelia",
+                "url": mycelia_url,
                 "critical": False,
             }
             overall_healthy = False
@@ -312,6 +327,7 @@ async def health_check():
                 "status": f"⚠️ Mycelia Memory Failed: {str(e)}",
                 "healthy": False,
                 "provider": "mycelia",
+                "url": mycelia_url,
                 "critical": False,
             }
             overall_healthy = False
diff --git a/backends/advanced/src/advanced_omi_backend/services/memory/config.py b/backends/advanced/src/advanced_omi_backend/services/memory/config.py
index f3943f29..1bf0908b 100644
--- a/backends/advanced/src/advanced_omi_backend/services/memory/config.py
+++ b/backends/advanced/src/advanced_omi_backend/services/memory/config.py
@@ -141,8 +141,13 @@ def create_mycelia_config(
     return config
 
 
-def build_memory_config_from_env() -> MemoryConfig:
-    """Build memory configuration from environment variables and YAML config."""
+def build_memory_config_from_env(allow_missing_keys: bool = False) -> MemoryConfig:
+    """Build memory configuration from environment variables and YAML config.
+
+    Args:
+        allow_missing_keys: If True, allow missing API keys and disable features gracefully.
+                           If False, raise errors when required keys are missing.
+    """
     try:
         # Determine memory provider
         memory_provider = os.getenv("MEMORY_PROVIDER", "chronicle").lower()
@@ -226,25 +231,30 @@ def build_memory_config_from_env() -> MemoryConfig:
         if llm_provider == "openai":
             openai_api_key = os.getenv("OPENAI_API_KEY")
             if not openai_api_key:
-                raise ValueError("OPENAI_API_KEY required for OpenAI provider")
-            
-            # Use environment variables for model, fall back to config, then defaults
-            model = os.getenv("OPENAI_MODEL") or memory_config.get("llm_settings", {}).get("model") or "gpt-4o-mini"
-            embedding_model = memory_config.get("llm_settings", {}).get("embedding_model") or "text-embedding-3-small"
-            base_url = os.getenv("OPENAI_BASE_URL", "https://api.openai.com/v1")
-            memory_logger.info(f"🔧 Memory config: LLM={model}, Embedding={embedding_model}, Base URL={base_url}")
-            
-            llm_config = create_openai_config(
-                api_key=openai_api_key,
-                model=model,
-                embedding_model=embedding_model,
-                base_url=base_url,
-                temperature=memory_config.get("llm_settings", {}).get("temperature", 0.1),
-                max_tokens=memory_config.get("llm_settings", {}).get("max_tokens", 2000)
-            )
-            llm_provider_enum = LLMProvider.OPENAI
-            embedding_dims = get_embedding_dims(llm_config)
-            memory_logger.info(f"🔧 Setting Embedder dims {embedding_dims}")
+                if allow_missing_keys:
+                    memory_logger.warning("OPENAI_API_KEY not set - memory extraction will be disabled")
+                    llm_config = None
+                    llm_provider_enum = None
+                else:
+                    raise ValueError("OPENAI_API_KEY required for OpenAI provider")
+            else:
+                # Use environment variables for model, fall back to config, then defaults
+                model = os.getenv("OPENAI_MODEL") or memory_config.get("llm_settings", {}).get("model") or "gpt-4o-mini"
+                embedding_model = memory_config.get("llm_settings", {}).get("embedding_model") or "text-embedding-3-small"
+                base_url = os.getenv("OPENAI_BASE_URL", "https://api.openai.com/v1")
+                memory_logger.info(f"🔧 Memory config: LLM={model}, Embedding={embedding_model}, Base URL={base_url}")
+
+                llm_config = create_openai_config(
+                    api_key=openai_api_key,
+                    model=model,
+                    embedding_model=embedding_model,
+                    base_url=base_url,
+                    temperature=memory_config.get("llm_settings", {}).get("temperature", 0.1),
+                    max_tokens=memory_config.get("llm_settings", {}).get("max_tokens", 2000)
+                )
+                llm_provider_enum = LLMProvider.OPENAI
+                embedding_dims = get_embedding_dims(llm_config)
+                memory_logger.info(f"🔧 Setting Embedder dims {embedding_dims}")
         
         elif llm_provider == "ollama":
             base_url = os.getenv("OLLAMA_BASE_URL")
diff --git a/backends/advanced/src/advanced_omi_backend/services/memory/service_factory.py b/backends/advanced/src/advanced_omi_backend/services/memory/service_factory.py
index 5607d8ff..f5ca9268 100644
--- a/backends/advanced/src/advanced_omi_backend/services/memory/service_factory.py
+++ b/backends/advanced/src/advanced_omi_backend/services/memory/service_factory.py
@@ -7,6 +7,7 @@
 
 import asyncio
 import logging
+import os
 import threading
 from typing import Optional
 
@@ -92,7 +93,9 @@ def get_memory_service() -> MemoryServiceBase:
             if _memory_service is None:
                 try:
                     # Build configuration from environment
-                    config = build_memory_config_from_env()
+                    # Check for graceful degradation mode
+                    allow_missing_keys = os.getenv("ALLOW_MISSING_API_KEYS", "false").lower() == "true"
+                    config = build_memory_config_from_env(allow_missing_keys=allow_missing_keys)
 
                     # Create appropriate service implementation
                     _memory_service = create_memory_service(config)
diff --git a/backends/advanced/webui/Dockerfile b/backends/advanced/webui/Dockerfile
index 3b2f28d8..5004f822 100644
--- a/backends/advanced/webui/Dockerfile
+++ b/backends/advanced/webui/Dockerfile
@@ -1,5 +1,5 @@
 # Multi-stage build for React app
-FROM node:18-alpine AS build
+FROM node:22-alpine AS build
 
 # Set working directory
 WORKDIR /app
@@ -7,8 +7,8 @@ WORKDIR /app
 # Copy package files
 COPY package.json package-lock.json ./
 
-# Install dependencies
-RUN npm ci
+# Install dependencies (with legacy-peer-deps for react-gantt-timeline compatibility)
+RUN npm install --legacy-peer-deps
 
 # Copy source code
 COPY . .
@@ -17,9 +17,15 @@ COPY . .
 ARG VITE_ALLOWED_HOSTS
 ENV VITE_ALLOWED_HOSTS=${VITE_ALLOWED_HOSTS}
 
+ARG VITE_BASE_PATH
+ENV VITE_BASE_PATH=${VITE_BASE_PATH:-/}
+
 ARG VITE_BACKEND_URL
 ENV VITE_BACKEND_URL=${VITE_BACKEND_URL}
 
+# Debug: Print BASE_PATH value (forces cache invalidation when changed)
+RUN echo "Building with VITE_BASE_PATH=${VITE_BASE_PATH}"
+
 # Build the application
 RUN npm run build
 
diff --git a/backends/advanced/webui/src/pages/System.tsx b/backends/advanced/webui/src/pages/System.tsx
index 4ad2581a..3aeaa793 100644
--- a/backends/advanced/webui/src/pages/System.tsx
+++ b/backends/advanced/webui/src/pages/System.tsx
@@ -9,6 +9,12 @@ interface HealthData {
   services: Record<string, {
     healthy: boolean
     message?: string
+    url?: string
+    status?: string
+    provider?: string
+    worker_count?: number
+    active_workers?: number
+    idle_workers?: number
   }>
   timestamp?: string
 }
@@ -302,9 +308,16 @@ export default function System() {
                 <div key={service} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-md">
                   <div className="flex items-center space-x-3">
                     {getStatusIcon(status.healthy)}
-                    <span className="font-medium text-gray-900 dark:text-gray-100">
-                      {getServiceDisplayName(service)}
-                    </span>
+                    <div className="flex flex-col">
+                      <span className="font-medium text-gray-900 dark:text-gray-100">
+                        {getServiceDisplayName(service)}
+                      </span>
+                      {(status as any).url && (
+                        <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+                          {(status as any).url}
+                        </span>
+                      )}
+                    </div>
                   </div>
                   <div className="text-right">
                     {status.message && (
diff --git a/docker-compose.infra.yml b/docker-compose.infra.yml
new file mode 100644
index 00000000..e86387fd
--- /dev/null
+++ b/docker-compose.infra.yml
@@ -0,0 +1,121 @@
+# Chronicle Infrastructure Services
+# Persistent database layer that stays running across app restarts
+#
+# Usage:
+#   docker compose -f docker-compose.infra.yml up -d     # Start infrastructure
+#   docker compose -f docker-compose.infra.yml down      # Stop (keeps data)
+#   docker compose -f docker-compose.infra.yml down -v   # Stop and remove data
+#
+# Optional services (add --profile):
+#   --profile neo4j    # Add Neo4j graph database
+#   --profile caddy    # Add Caddy reverse proxy
+
+name: infra
+
+services:
+  mongo:
+    image: mongo:8.0.14
+    container_name: mongo
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongo_data:/data/db
+    healthcheck:
+      test: ["CMD", "mongosh", "--quiet", "--eval", "db.adminCommand({ ping: 1 })"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 10s
+    networks:
+      - chronicle-network
+    restart: unless-stopped
+
+  redis:
+    image: redis:7-alpine
+    container_name: redis
+    ports:
+      - "6379:6379"
+    volumes:
+      - redis_data:/data
+    command: redis-server --appendonly yes
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 5s
+      timeout: 3s
+      retries: 5
+    networks:
+      - chronicle-network
+    restart: unless-stopped
+
+  qdrant:
+    image: qdrant/qdrant:latest
+    container_name: qdrant
+    ports:
+      - "6033:6333"  # gRPC
+      - "6034:6334"  # HTTP
+    volumes:
+      - qdrant_data:/qdrant/storage
+    networks:
+      - chronicle-network
+    restart: unless-stopped
+
+  neo4j:
+    image: neo4j:2025.10-community
+    container_name: neo4j
+    profiles: ["neo4j"]
+    ports:
+      - "7474:7474"  # HTTP UI
+      - "7687:7687"  # Bolt protocol
+    environment:
+      - NEO4J_AUTH=neo4j/${NEO4J_PASSWORD:-password}
+      - NEO4J_PLUGINS=["apoc","graph-data-science"]
+      - NEO4J_dbms_security_procedures_unrestricted=apoc.*,gds.*
+      - NEO4J_dbms_security_procedures_allowlist=apoc.*,gds.*
+    volumes:
+      - neo4j_data:/data
+      - neo4j_logs:/logs
+    networks:
+      - chronicle-network
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "wget --no-verbose --tries=1 --spider localhost:7474 || exit 1"]
+      interval: 30s
+      timeout: 10s
+      retries: 5
+      start_period: 30s
+
+  caddy:
+    image: caddy:2-alpine
+    container_name: caddy
+    profiles: ["caddy"]
+    ports:
+      - "443:443"
+      - "80:80"
+    volumes:
+      - ./caddy/Caddyfile:/etc/caddy/Caddyfile
+      - ./certs:/certs:ro
+      - caddy_data:/data
+      - caddy_config:/config
+    restart: unless-stopped
+    networks:
+      - chronicle-network
+
+networks:
+  chronicle-network:
+    driver: bridge
+
+volumes:
+  mongo_data:
+    driver: local
+  redis_data:
+    driver: local
+  qdrant_data:
+    driver: local
+  neo4j_data:
+    driver: local
+  neo4j_logs:
+    driver: local
+  caddy_data:
+    driver: local
+  caddy_config:
+    driver: local
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 00000000..e539eab5
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,23 @@
+# Chronicle Docker Compose - Application Services
+# This file contains only the application layer
+#
+# ⚠️ Prerequisites: Infrastructure must be running first!
+#
+# Recommended workflow:
+#   ./quick-start.sh              # First time (handles everything)
+#   make up                       # Daily use (auto-starts infra if needed)
+#
+# Direct docker compose (manual):
+#   docker compose -f docker-compose.infra.yml up -d  # Start infra first
+#   docker compose up -d                              # Then start app
+#   docker compose down                               # Stop app only
+#
+# Environment:
+#   Uses .env.default (auto-generated by ./quick-start.sh)
+
+name: chronicle
+
+include:
+  # Application services (backend API + workers + web UI)
+  - backends/advanced/compose/backend.yml
+  - backends/advanced/compose/frontend.yml
diff --git a/quick-start.sh b/quick-start.sh
index 8b3f3711..42826ee6 100755
--- a/quick-start.sh
+++ b/quick-start.sh
@@ -14,7 +14,7 @@ BOLD='\033[1m'
 NC='\033[0m' # No Color
 
 # Configuration
-ENV_FILE=".env.quick-start"
+ENV_FILE=".env.default"
 CONFIG_FILE="config-defaults.yml"
 
 # Parse arguments
@@ -26,7 +26,7 @@ fi
 # Print header
 echo ""
 echo -e "${BOLD}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
-echo -e "${BOLD}🚀 Friend-Lite Quick Start${NC}"
+echo -e "${BOLD}🚀 Chronicle Quick Start${NC}"
 echo -e "${BOLD}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
 echo ""
 
@@ -45,21 +45,33 @@ if [[ ! -f "$ENV_FILE" ]] || [[ "$RESET_CONFIG" == true ]]; then
     echo -e "${BLUE}🔧 Generating configuration...${NC}"
     echo ""
 
-    # Generate secure secrets
+    # Generate secure secret
     if command -v openssl &> /dev/null; then
         AUTH_SECRET_KEY=$(openssl rand -hex 32)
-        ADMIN_PASSWORD=$(openssl rand -hex 16)
     else
         # Fallback for systems without openssl
         AUTH_SECRET_KEY=$(head -c 32 /dev/urandom | xxd -p -c 64)
-        ADMIN_PASSWORD=$(head -c 16 /dev/urandom | xxd -p -c 32)
     fi
 
-    ADMIN_EMAIL="admin@example.com"
+    # Prompt for admin credentials
+    echo ""
+    echo -e "${BOLD}Admin Account Setup${NC}"
+    echo -e "${YELLOW}Press Enter to use defaults shown in [brackets]${NC}"
+    echo ""
+
+    read -p "Admin Name [admin]: " INPUT_ADMIN_NAME
+    ADMIN_NAME="${INPUT_ADMIN_NAME:-admin}"
+
+    read -p "Admin Email [admin@example.com]: " INPUT_ADMIN_EMAIL
+    ADMIN_EMAIL="${INPUT_ADMIN_EMAIL:-admin@example.com}"
+
+    read -sp "Admin Password [password-123]: " INPUT_ADMIN_PASSWORD
+    echo ""
+    ADMIN_PASSWORD="${INPUT_ADMIN_PASSWORD:-password-123}"
 
     # Create .env.quick-start
     cat > "$ENV_FILE" <<EOF
-# Friend-Lite Quick Start Configuration
+# Chronicle Quick Start Configuration
 # Generated: $(date -u +"%Y-%m-%dT%H:%M:%SZ")
 # DO NOT COMMIT THIS FILE - Contains sensitive credentials
 
@@ -67,6 +79,7 @@ if [[ ! -f "$ENV_FILE" ]] || [[ "$RESET_CONFIG" == true ]]; then
 # AUTHENTICATION & SECURITY
 # ==========================================
 AUTH_SECRET_KEY=${AUTH_SECRET_KEY}
+ADMIN_NAME=${ADMIN_NAME}
 ADMIN_EMAIL=${ADMIN_EMAIL}
 ADMIN_PASSWORD=${ADMIN_PASSWORD}
 
@@ -91,11 +104,16 @@ QDRANT_PORT=6333
 # ==========================================
 # NETWORK CONFIGURATION
 # ==========================================
-BACKEND_PORT=9000
-WEBUI_PORT=4000
+# Port offset for running multiple instances (default: 0)
+# - Backend: 8000 + PORT_OFFSET = 8000
+# - WebUI: 3000 + PORT_OFFSET = 3000
+# - Redis DB: PORT_OFFSET / 1000 = 0
+PORT_OFFSET=0
+BACKEND_PORT=8000
+WEBUI_PORT=3000
 HOST_IP=localhost
-CORS_ORIGINS=http://localhost:3000,http://localhost:4000,http://127.0.0.1:4000
-VITE_BACKEND_URL=http://localhost:9000
+CORS_ORIGINS=http://localhost:3000,http://127.0.0.1:3000
+VITE_BACKEND_URL=http://localhost:8000
 
 # ==========================================
 # SERVICE CONFIGURATION
@@ -115,78 +133,45 @@ EOF
 
     chmod 600 "$ENV_FILE"
 
-    # Display credentials prominently
+    # Display credentials confirmation
     echo ""
-    echo -e "${BOLD}${RED}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
-    echo -e "${BOLD}${RED}⚠️  SAVE THESE CREDENTIALS NOW! ⚠️${NC}"
-    echo -e "${BOLD}${RED}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo -e "${GREEN}✅ Admin account configured${NC}"
     echo ""
-    echo -e "${BOLD}Admin Email:${NC}    ${ADMIN_EMAIL}"
-    echo -e "${BOLD}Admin Password:${NC} ${YELLOW}${ADMIN_PASSWORD}${NC}"
-    echo ""
-    echo -e "${BOLD}${RED}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo -e "${BOLD}Login Credentials:${NC}"
+    echo -e "  Name:     ${ADMIN_NAME}"
+    echo -e "  Email:    ${ADMIN_EMAIL}"
+    echo -e "  Password: ${YELLOW}${ADMIN_PASSWORD}${NC}"
     echo ""
     sleep 2
 else
     echo -e "${GREEN}✅ Using existing configuration${NC}"
-    # Extract password to display
-    ADMIN_PASSWORD=$(grep "^ADMIN_PASSWORD=" "$ENV_FILE" | cut -d'=' -f2)
+    # Extract credentials to display
+    ADMIN_NAME=$(grep "^ADMIN_NAME=" "$ENV_FILE" | cut -d'=' -f2)
     ADMIN_EMAIL=$(grep "^ADMIN_EMAIL=" "$ENV_FILE" | cut -d'=' -f2)
+    ADMIN_PASSWORD=$(grep "^ADMIN_PASSWORD=" "$ENV_FILE" | cut -d'=' -f2)
     echo ""
-    echo -e "${BOLD}Admin Email:${NC}    ${ADMIN_EMAIL}"
-    echo -e "${BOLD}Admin Password:${NC} ${YELLOW}${ADMIN_PASSWORD}${NC}"
+    echo -e "${BOLD}Login Credentials:${NC}"
+    echo -e "  Name:     ${ADMIN_NAME:-admin}"
+    echo -e "  Email:    ${ADMIN_EMAIL}"
+    echo -e "  Password: ${YELLOW}${ADMIN_PASSWORD}${NC}"
     echo ""
 fi
 
-# Create chronicle-network if it doesn't exist
-echo -e "${BLUE}🔗 Checking Docker network...${NC}"
-if ! docker network inspect chronicle-network &> /dev/null; then
-    echo "   Creating chronicle-network..."
-    docker network create chronicle-network
-    echo -e "${GREEN}   ✅ Network created${NC}"
-else
-    echo -e "${GREEN}   ✅ Network exists${NC}"
-fi
-echo ""
-
-# Start shared infrastructure
-echo -e "${BLUE}🏗️  Starting shared infrastructure...${NC}"
-echo ""
-
-# Check if infrastructure is already running
-MONGO_RUNNING=$(docker ps --filter "name=^mongo$" --filter "status=running" --format "{{.Names}}" 2>/dev/null || true)
-REDIS_RUNNING=$(docker ps --filter "name=^redis$" --filter "status=running" --format "{{.Names}}" 2>/dev/null || true)
-QDRANT_RUNNING=$(docker ps --filter "name=^qdrant$" --filter "status=running" --format "{{.Names}}" 2>/dev/null || true)
-
-if [[ -n "$MONGO_RUNNING" ]] && [[ -n "$REDIS_RUNNING" ]] && [[ -n "$QDRANT_RUNNING" ]]; then
+# Start infrastructure
+echo -e "${BLUE}🏗️  Starting infrastructure...${NC}"
+if docker ps --filter "name=^mongo$" --filter "status=running" -q | grep -q .; then
     echo -e "${GREEN}   ✅ Infrastructure already running${NC}"
 else
-    echo "   Starting MongoDB, Redis, Qdrant, Caddy..."
-    docker compose -f compose/infrastructure-shared.yml up -d --no-recreate 2>&1 | grep -v "is up to date" || true
-    echo ""
-    echo "   Waiting for services to be ready..."
-    sleep 5
+    docker compose -f docker-compose.infra.yml up -d
     echo -e "${GREEN}   ✅ Infrastructure started${NC}"
+    sleep 3
 fi
-
-echo ""
-echo -e "   ${BOLD}Services:${NC}"
-echo -e "   📊 MongoDB:  ${GREEN}Running${NC} (mongodb://localhost:27017)"
-echo -e "   💾 Redis:    ${GREEN}Running${NC} (redis://localhost:6379)"
-echo -e "   🔍 Qdrant:   ${GREEN}Running${NC} (http://localhost:6034)"
 echo ""
 
-# Start application services
-echo -e "${BLUE}🚀 Starting Friend-Lite application...${NC}"
+# Start application
+echo -e "${BLUE}🚀 Starting Chronicle application...${NC}"
 echo ""
-
-cd backends/advanced
-
-# Start backend, workers, and webui
-docker compose \
-  -p chronicle-quickstart \
-  --env-file ../../.env.quick-start \
-  up -d friend-backend workers webui
+docker compose --env-file .env.default up -d
 
 echo ""
 echo "   Waiting for backend to be healthy..."
@@ -198,7 +183,7 @@ ELAPSED=0
 BACKEND_HEALTHY=false
 
 while [[ $ELAPSED -lt $TIMEOUT ]]; do
-    if curl -s http://localhost:9000/health > /dev/null 2>&1; then
+    if curl -s http://localhost:8000/health > /dev/null 2>&1; then
         BACKEND_HEALTHY=true
         break
     fi
@@ -210,14 +195,14 @@ cd ../..
 
 echo ""
 if [[ "$BACKEND_HEALTHY" == true ]]; then
-    echo -e "${GREEN}${BOLD}✅ Friend-Lite is ready!${NC}"
+    echo -e "${GREEN}${BOLD}✅ Chronicle is ready!${NC}"
 else
     echo -e "${YELLOW}⚠️  Backend is starting... (may take a moment)${NC}"
 fi
 
 echo ""
 echo -e "${BOLD}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
-echo -e "${GREEN}${BOLD}   Access Friend-Lite at: http://localhost:4000${NC}"
+echo -e "${GREEN}${BOLD}   Access Chronicle at: http://localhost:3000${NC}"
 echo -e "${BOLD}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
 echo ""
 
@@ -226,7 +211,7 @@ echo -e "${YELLOW}⚠️  Some features are disabled (no API keys configured):${
 echo -e "   • Memory extraction (needs OpenAI API key)"
 echo -e "   • Transcription (needs Deepgram API key)"
 echo ""
-echo -e "   ${BOLD}→ Add API keys at: http://localhost:4000/system${NC}"
+echo -e "   ${BOLD}→ Add API keys at: http://localhost:3000/system${NC}"
 echo ""
 
 # Next steps
@@ -257,7 +242,7 @@ if command -v tailscale &> /dev/null && tailscale status &> /dev/null; then
             echo "# Tailscale HTTPS Configuration" >> "$ENV_FILE"
             echo "TAILSCALE_HOSTNAME=${TAILSCALE_HOSTNAME}" >> "$ENV_FILE"
             echo "HTTPS_ENABLED=true" >> "$ENV_FILE"
-            echo "CORS_ORIGINS=https://${TAILSCALE_HOSTNAME}:9000,https://${TAILSCALE_HOSTNAME}:4000,http://localhost:4000" >> "$ENV_FILE"
+            echo "CORS_ORIGINS=https://${TAILSCALE_HOSTNAME}:9000,https://${TAILSCALE_HOSTNAME}:4000,http://localhost:3000" >> "$ENV_FILE"
 
             echo ""
             echo -e "${GREEN}✅ HTTPS configured!${NC}"
@@ -266,7 +251,7 @@ if command -v tailscale &> /dev/null && tailscale status &> /dev/null; then
             echo -e "   ${BOLD}https://${TAILSCALE_HOSTNAME}:4000${NC}"
             echo ""
             echo -e "${YELLOW}   Note: Restart services to apply HTTPS settings:${NC}"
-            echo -e "   ${BOLD}docker compose -p chronicle-quickstart restart${NC}"
+            echo -e "   ${BOLD}make restart${NC}"
             echo ""
         fi
     fi
@@ -274,9 +259,10 @@ fi
 
 # Usage information
 echo -e "${BOLD}Helpful commands:${NC}"
-echo "  Stop:    make quick-start-stop"
-echo "  Restart: docker compose -p chronicle-quickstart restart"
-echo "  Logs:    docker compose -p chronicle-quickstart logs -f"
+echo "  Stop:    make down"
+echo "  Restart: make restart"
+echo "  Logs:    make logs"
+echo "  Rebuild: make build"
 echo ""
 
 echo -e "${GREEN}${BOLD}🎉 Setup complete! Happy coding!${NC}"
diff --git a/scripts/generate-k8s-configs.py b/scripts/generate-k8s-configs.py
index 2eea45aa..890d7fd3 100755
--- a/scripts/generate-k8s-configs.py
+++ b/scripts/generate-k8s-configs.py
@@ -12,61 +12,114 @@
 
 from env_utils import get_resolved_env_vars, classify_secrets
 
-def generate_k8s_manifests(namespace: str = "chronicle"):
+def split_secrets(secret_vars: dict) -> tuple[dict, dict]:
+    """Split secrets into environment credentials and API keys"""
+    # Environment-specific credentials
+    env_credential_keys = {
+        'AUTH_SECRET_KEY', 'ADMIN_EMAIL', 'ADMIN_PASSWORD',
+        'NEO4J_PASSWORD', 'MONGODB_USERNAME', 'MONGODB_PASSWORD', 'REDIS_PASSWORD',
+        'LANGFUSE_PUBLIC_KEY', 'LANGFUSE_SECRET_KEY', 'NGROK_AUTHTOKEN',
+        'SSL_CERT_SECRET'
+    }
+
+    # API keys for external services
+    api_key_keys = {
+        'OPENAI_API_KEY', 'MISTRAL_API_KEY', 'GROQ_API_KEY',
+        'DEEPGRAM_API_KEY', 'HF_TOKEN'
+    }
+
+    env_credentials = {}
+    api_keys = {}
+
+    for var_name, var_value in secret_vars.items():
+        if var_name in env_credential_keys:
+            env_credentials[var_name] = var_value
+        elif var_name in api_key_keys:
+            api_keys[var_name] = var_value
+        else:
+            # Default: treat unknown secrets as environment credentials
+            env_credentials[var_name] = var_value
+
+    return env_credentials, api_keys
+
+def generate_k8s_manifests(namespace: str = "friend-lite"):
     """Generate Kubernetes ConfigMap and Secret manifests"""
     print(f"Generating Kubernetes ConfigMap and Secret for namespace {namespace}...")
-    
+
     # Create output directory
     output_dir = Path("k8s-manifests")
     output_dir.mkdir(exist_ok=True)
-    
+
     # Get all resolved environment variables
     all_vars = get_resolved_env_vars()
     config_vars, secret_vars = classify_secrets(all_vars)
-    
+
+    # Split secrets into environment credentials and API keys
+    env_credentials, api_keys = split_secrets(secret_vars)
+
     # Generate ConfigMap
     configmap_path = output_dir / "configmap.yaml"
     with open(configmap_path, 'w') as f:
         f.write("apiVersion: v1\n")
         f.write("kind: ConfigMap\n")
         f.write("metadata:\n")
-        f.write(f"  name: chronicle-config\n")
+        f.write(f"  name: friend-lite-config\n")
         f.write(f"  namespace: {namespace}\n")
         f.write("  labels:\n")
-        f.write("    app.kubernetes.io/name: chronicle\n")
+        f.write("    app.kubernetes.io/name: friend-lite\n")
         f.write("    app.kubernetes.io/component: config\n")
         f.write("data:\n")
-        
+
         for var_name in sorted(config_vars.keys()):
             var_value = config_vars[var_name]
             # Escape quotes in values
             escaped_value = var_value.replace('"', '\\"')
             f.write(f'  {var_name}: "{escaped_value}"\n')
-    
-    # Generate Secret
+
+    # Generate Secrets
+    import base64
     secret_path = output_dir / "secrets.yaml"
     with open(secret_path, 'w') as f:
+        # Environment-specific credentials secret
+        f.write("# Environment-specific credentials\n")
         f.write("apiVersion: v1\n")
         f.write("kind: Secret\n")
         f.write("type: Opaque\n")
         f.write("metadata:\n")
-        f.write(f"  name: chronicle-secrets\n")
+        f.write(f"  name: friend-lite-secrets\n")
         f.write(f"  namespace: {namespace}\n")
         f.write("  labels:\n")
-        f.write("    app.kubernetes.io/name: chronicle\n")
+        f.write("    app.kubernetes.io/name: friend-lite\n")
         f.write("    app.kubernetes.io/component: secrets\n")
         f.write("data:\n")
-        
-        import base64
-        for var_name in sorted(secret_vars.keys()):
-            var_value = secret_vars[var_name]
-            # Base64 encode the value
+
+        for var_name in sorted(env_credentials.keys()):
+            var_value = env_credentials[var_name]
             encoded_value = base64.b64encode(var_value.encode()).decode()
             f.write(f"  {var_name}: {encoded_value}\n")
-    
+
+        # API keys secret
+        f.write("---\n")
+        f.write("# API keys for external services\n")
+        f.write("apiVersion: v1\n")
+        f.write("kind: Secret\n")
+        f.write("type: Opaque\n")
+        f.write("metadata:\n")
+        f.write(f"  name: friend-lite-api-keys\n")
+        f.write(f"  namespace: {namespace}\n")
+        f.write("  labels:\n")
+        f.write("    app.kubernetes.io/name: friend-lite\n")
+        f.write("    app.kubernetes.io/component: secrets\n")
+        f.write("data:\n")
+
+        for var_name in sorted(api_keys.keys()):
+            var_value = api_keys[var_name]
+            encoded_value = base64.b64encode(var_value.encode()).decode()
+            f.write(f"  {var_name}: {encoded_value}\n")
+
     print("Generated:")
     print(f"  - {configmap_path}")
-    print(f"  - {secret_path}")
+    print(f"  - {secret_path} (2 secrets: friend-lite-secrets, friend-lite-api-keys)")
     print("")
     print("To apply these manifests:")
     print(f"  kubectl apply -f {configmap_path}")
@@ -74,7 +127,7 @@ def generate_k8s_manifests(namespace: str = "chronicle"):
 
 def main():
     """Main entry point"""
-    namespace = sys.argv[1] if len(sys.argv) > 1 else "chronicle"
+    namespace = sys.argv[1] if len(sys.argv) > 1 else "friend-lite"
     generate_k8s_manifests(namespace)
 
 if __name__ == "__main__":

From 08838e04e00d4a22fb5c21a6d95e211ee1b9f023 Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Fri, 19 Dec 2025 17:13:35 +0000
Subject: [PATCH 15/17] added support for checking keys and they be misssing

---
 .../src/advanced_omi_backend/app_config.py    |   7 +-
 .../controllers/system_controller.py          |  20 ++
 .../routers/modules/health_routes.py          |   5 +-
 .../routers/modules/system_routes.py          |   7 +
 .../services/transcription/__init__.py        |  21 +-
 backends/advanced/webui/src/pages/System.tsx  | 259 +++++++++++++++++-
 backends/advanced/webui/src/services/api.ts   |  13 +
 7 files changed, 324 insertions(+), 8 deletions(-)

diff --git a/backends/advanced/src/advanced_omi_backend/app_config.py b/backends/advanced/src/advanced_omi_backend/app_config.py
index 3542d1df..bcd16c35 100644
--- a/backends/advanced/src/advanced_omi_backend/app_config.py
+++ b/backends/advanced/src/advanced_omi_backend/app_config.py
@@ -60,8 +60,11 @@ def __init__(self):
         self.mistral_api_key = os.getenv("MISTRAL_API_KEY")
         self.transcription_required = os.getenv("TRANSCRIPTION_REQUIRED", "true").lower() == "true"
 
-        # Get configured transcription provider
-        self.transcription_provider = get_transcription_provider(self.transcription_provider_name)
+        # Get configured transcription provider (with graceful degradation support)
+        self.transcription_provider = get_transcription_provider(
+            self.transcription_provider_name,
+            allow_missing_keys=self.allow_missing_api_keys
+        )
         if self.transcription_provider:
             logger.info(
                 f"✅ Using {self.transcription_provider.name} transcription provider ({self.transcription_provider.mode})"
diff --git a/backends/advanced/src/advanced_omi_backend/controllers/system_controller.py b/backends/advanced/src/advanced_omi_backend/controllers/system_controller.py
index 44067a49..02888259 100644
--- a/backends/advanced/src/advanced_omi_backend/controllers/system_controller.py
+++ b/backends/advanced/src/advanced_omi_backend/controllers/system_controller.py
@@ -562,3 +562,23 @@ async def set_memory_provider(provider: str):
         )
 
 
+# API Key and Environment Configuration Functions
+
+async def get_api_key_status():
+    """Get current API key configuration status."""
+    try:
+        from advanced_omi_backend.utils.env_writer import get_env_writer
+
+        env_writer = get_env_writer()
+        status = env_writer.get_configuration_status()
+
+        return {
+            **status,
+            "status": "success"
+        }
+
+    except Exception as e:
+        logger.error(f"Error getting API key status: {e}")
+        return JSONResponse(
+            status_code=500, content={"error": f"Failed to get API key status: {str(e)}"}
+        )
diff --git a/backends/advanced/src/advanced_omi_backend/routers/modules/health_routes.py b/backends/advanced/src/advanced_omi_backend/routers/modules/health_routes.py
index 1486b38d..15bda29c 100644
--- a/backends/advanced/src/advanced_omi_backend/routers/modules/health_routes.py
+++ b/backends/advanced/src/advanced_omi_backend/routers/modules/health_routes.py
@@ -35,8 +35,9 @@
 # Memory service
 memory_service = get_memory_service()
 
-# Transcription provider
-transcription_provider = get_transcription_provider()
+# Transcription provider (with graceful degradation support)
+allow_missing_keys = os.getenv("ALLOW_MISSING_API_KEYS", "false").lower() == "true"
+transcription_provider = get_transcription_provider(allow_missing_keys=allow_missing_keys)
 
 # Qdrant Configuration
 QDRANT_BASE_URL = os.getenv("QDRANT_BASE_URL", "qdrant")
diff --git a/backends/advanced/src/advanced_omi_backend/routers/modules/system_routes.py b/backends/advanced/src/advanced_omi_backend/routers/modules/system_routes.py
index e51c036c..9e0b1953 100644
--- a/backends/advanced/src/advanced_omi_backend/routers/modules/system_routes.py
+++ b/backends/advanced/src/advanced_omi_backend/routers/modules/system_routes.py
@@ -143,3 +143,10 @@ async def set_memory_provider(
 ):
     """Set memory provider and restart backend services. Admin only."""
     return await system_controller.set_memory_provider(provider)
+# API Key and Configuration Management Endpoints
+
+@router.get("/admin/config/status")
+async def get_configuration_status(current_user: User = Depends(current_superuser)):
+    """Get current API key configuration and feature status. Admin only."""
+    return await system_controller.get_api_key_status()
+
diff --git a/backends/advanced/src/advanced_omi_backend/services/transcription/__init__.py b/backends/advanced/src/advanced_omi_backend/services/transcription/__init__.py
index 1c4a3b59..48f43eb5 100644
--- a/backends/advanced/src/advanced_omi_backend/services/transcription/__init__.py
+++ b/backends/advanced/src/advanced_omi_backend/services/transcription/__init__.py
@@ -27,6 +27,7 @@
 def get_transcription_provider(
     provider_name: Optional[str] = None,
     mode: Optional[str] = None,
+    allow_missing_keys: bool = False,
 ) -> Optional[BaseTranscriptionProvider]:
     """
     Factory function to get the appropriate transcription provider.
@@ -35,12 +36,16 @@ def get_transcription_provider(
         provider_name: Name of the provider ('deepgram', 'parakeet').
                       If None, will auto-select based on available configuration.
         mode: Processing mode ('streaming', 'batch'). If None, defaults to 'batch'.
+        allow_missing_keys: If True, return None instead of raising error when
+                           provider is requested but API key is not configured.
+                           Enables graceful degradation mode.
 
     Returns:
         An instance of BaseTranscriptionProvider, or None if no provider is configured.
 
     Raises:
-        RuntimeError: If a specific provider is requested but not properly configured.
+        RuntimeError: If a specific provider is requested but not properly configured
+                     (only when allow_missing_keys=False).
     """
     deepgram_key = os.getenv("DEEPGRAM_API_KEY")
     parakeet_url = os.getenv("PARAKEET_ASR_URL")
@@ -55,6 +60,11 @@ def get_transcription_provider(
     # Handle specific provider requests
     if provider_name == "deepgram":
         if not deepgram_key:
+            if allow_missing_keys:
+                logger.debug(
+                    "Deepgram provider requested but DEEPGRAM_API_KEY not configured (graceful degradation mode)"
+                )
+                return None
             raise RuntimeError(
                 "Deepgram transcription provider requested but DEEPGRAM_API_KEY not configured"
             )
@@ -66,6 +76,11 @@ def get_transcription_provider(
 
     elif provider_name == "parakeet":
         if not parakeet_url:
+            if allow_missing_keys:
+                logger.debug(
+                    "Parakeet provider requested but PARAKEET_ASR_URL not configured (graceful degradation mode)"
+                )
+                return None
             raise RuntimeError(
                 "Parakeet ASR provider requested but PARAKEET_ASR_URL not configured"
             )
@@ -80,8 +95,8 @@ def get_transcription_provider(
         # Check TRANSCRIPTION_PROVIDER environment variable first
         env_provider = os.getenv("TRANSCRIPTION_PROVIDER")
         if env_provider:
-            # Recursively call with the specified provider
-            return get_transcription_provider(env_provider, mode)
+            # Recursively call with the specified provider (pass allow_missing_keys through)
+            return get_transcription_provider(env_provider, mode, allow_missing_keys)
 
         # Auto-select: prefer Deepgram if available, fallback to Parakeet
         if deepgram_key:
diff --git a/backends/advanced/webui/src/pages/System.tsx b/backends/advanced/webui/src/pages/System.tsx
index 3aeaa793..49e9613c 100644
--- a/backends/advanced/webui/src/pages/System.tsx
+++ b/backends/advanced/webui/src/pages/System.tsx
@@ -1,9 +1,32 @@
 import { useState, useEffect } from 'react'
-import { Settings, RefreshCw, CheckCircle, XCircle, AlertCircle, Activity, Users, Database, Server, Volume2, Mic, Brain } from 'lucide-react'
+import { Settings, RefreshCw, CheckCircle, XCircle, AlertCircle, Activity, Users, Database, Server, Volume2, Mic, Brain, Key } from 'lucide-react'
 import { systemApi, speakerApi } from '../services/api'
 import { useAuth } from '../contexts/AuthContext'
 import MemorySettings from '../components/MemorySettings'
 
+interface ConfigurationStatus {
+  api_keys: {
+    openai: boolean
+    deepgram: boolean
+    mistral: boolean
+  }
+  features: {
+    llm_enabled: boolean
+    transcription_enabled: boolean
+    memory_extraction: boolean
+  }
+  graceful_degradation: {
+    allow_missing_api_keys: boolean
+    llm_required: boolean
+    transcription_required: boolean
+  }
+  providers: {
+    llm: string
+    transcription: string
+    memory: string
+  }
+}
+
 interface HealthData {
   status: 'healthy' | 'partial' | 'unhealthy'
   services: Record<string, {
@@ -75,6 +98,14 @@ export default function System() {
   const [selectedProvider, setSelectedProvider] = useState<string>('')
   const [providerLoading, setProviderLoading] = useState(false)
   const [providerMessage, setProviderMessage] = useState('')
+  const [configStatus, setConfigStatus] = useState<ConfigurationStatus | null>(null)
+  const [apiKeys, setApiKeys] = useState({
+    openai_api_key: '',
+    deepgram_api_key: '',
+    mistral_api_key: ''
+  })
+  const [configLoading, setConfigLoading] = useState(false)
+  const [configMessage, setConfigMessage] = useState('')
 
   const { isAdmin } = useAuth()
 
@@ -147,6 +178,68 @@ export default function System() {
     }
   }
 
+  const loadConfigurationStatus = async () => {
+    try {
+      setConfigLoading(true)
+      const response = await systemApi.getConfigurationStatus()
+      if (response.data.status === 'success') {
+        setConfigStatus(response.data)
+      }
+    } catch (err: any) {
+      console.error('Failed to load configuration status:', err)
+    } finally {
+      setConfigLoading(false)
+    }
+  }
+
+  const saveApiKeys = async () => {
+    try {
+      setConfigLoading(true)
+      setConfigMessage('')
+
+      // Only send non-empty API keys
+      const keysToUpdate: any = {}
+      if (apiKeys.openai_api_key.trim()) {
+        keysToUpdate.openai_api_key = apiKeys.openai_api_key.trim()
+      }
+      if (apiKeys.deepgram_api_key.trim()) {
+        keysToUpdate.deepgram_api_key = apiKeys.deepgram_api_key.trim()
+      }
+      if (apiKeys.mistral_api_key.trim()) {
+        keysToUpdate.mistral_api_key = apiKeys.mistral_api_key.trim()
+      }
+
+      if (Object.keys(keysToUpdate).length === 0) {
+        setConfigMessage('⚠️ No API keys to update')
+        return
+      }
+
+      const response = await systemApi.updateApiKeys(keysToUpdate)
+      if (response.data.status === 'success') {
+        setConfigMessage('✅ ' + response.data.message)
+
+        // Clear input fields
+        setApiKeys({
+          openai_api_key: '',
+          deepgram_api_key: '',
+          mistral_api_key: ''
+        })
+
+        // Reload configuration status
+        await loadConfigurationStatus()
+
+        // Auto-hide success message after 5 seconds
+        setTimeout(() => setConfigMessage(''), 5000)
+      } else {
+        setConfigMessage('❌ Failed to update API keys')
+      }
+    } catch (err: any) {
+      setConfigMessage('❌ Error: ' + (err.response?.data?.error || err.message))
+    } finally {
+      setConfigLoading(false)
+    }
+  }
+
   const saveMemoryProvider = async () => {
     if (selectedProvider === currentProvider) {
       setProviderMessage('Provider is already set to ' + selectedProvider)
@@ -191,6 +284,7 @@ export default function System() {
     loadSystemData()
     loadDiarizationSettings()
     loadMemoryProvider()
+    loadConfigurationStatus()
   }, [isAdmin])
 
   const getStatusIcon = (healthy: boolean) => {
@@ -295,6 +389,169 @@ export default function System() {
         </div>
       )}
 
+      {/* API Key Configuration */}
+      {configStatus && (
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 mb-6">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
+            <Key className="h-5 w-5 mr-2 text-blue-600" />
+            API Key Configuration
+          </h3>
+
+          {/* Feature Status Display */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+            <div className={`p-4 rounded-lg ${configStatus.features.llm_enabled ? 'bg-green-50 dark:bg-green-900/20' : 'bg-yellow-50 dark:bg-yellow-900/20'}`}>
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="text-sm font-medium text-gray-700 dark:text-gray-300">LLM / Memory</div>
+                  <div className={`text-xs mt-1 ${configStatus.features.llm_enabled ? 'text-green-600 dark:text-green-400' : 'text-yellow-600 dark:text-yellow-400'}`}>
+                    {configStatus.api_keys.openai ? '✓ OpenAI Configured' : '✗ Not Configured'}
+                  </div>
+                </div>
+                {configStatus.features.llm_enabled ? (
+                  <CheckCircle className="h-5 w-5 text-green-500" />
+                ) : (
+                  <XCircle className="h-5 w-5 text-yellow-500" />
+                )}
+              </div>
+            </div>
+
+            <div className={`p-4 rounded-lg ${configStatus.features.transcription_enabled ? 'bg-green-50 dark:bg-green-900/20' : 'bg-yellow-50 dark:bg-yellow-900/20'}`}>
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="text-sm font-medium text-gray-700 dark:text-gray-300">Transcription</div>
+                  <div className={`text-xs mt-1 ${configStatus.features.transcription_enabled ? 'text-green-600 dark:text-green-400' : 'text-yellow-600 dark:text-yellow-400'}`}>
+                    {configStatus.api_keys.deepgram ? '✓ Deepgram' : configStatus.api_keys.mistral ? '✓ Mistral' : '✗ Not Configured'}
+                  </div>
+                </div>
+                {configStatus.features.transcription_enabled ? (
+                  <CheckCircle className="h-5 w-5 text-green-500" />
+                ) : (
+                  <XCircle className="h-5 w-5 text-yellow-500" />
+                )}
+              </div>
+            </div>
+
+            <div className={`p-4 rounded-lg ${configStatus.graceful_degradation.allow_missing_api_keys ? 'bg-blue-50 dark:bg-blue-900/20' : 'bg-gray-50 dark:bg-gray-700'}`}>
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="text-sm font-medium text-gray-700 dark:text-gray-300">Mode</div>
+                  <div className="text-xs mt-1 text-gray-600 dark:text-gray-400">
+                    {configStatus.graceful_degradation.allow_missing_api_keys ? 'Quick Start' : 'Production'}
+                  </div>
+                </div>
+                <Settings className="h-5 w-5 text-gray-500" />
+              </div>
+            </div>
+          </div>
+
+          {/* API Key Input Form */}
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {/* OpenAI API Key */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  OpenAI API Key
+                  {configStatus.api_keys.openai && (
+                    <span className="ml-2 text-xs text-green-600 dark:text-green-400">✓ Configured</span>
+                  )}
+                </label>
+                <input
+                  type="password"
+                  value={apiKeys.openai_api_key}
+                  onChange={(e) => setApiKeys(prev => ({ ...prev, openai_api_key: e.target.value }))}
+                  placeholder="sk-..."
+                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                />
+                <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  For memory extraction and chat
+                </div>
+              </div>
+
+              {/* Deepgram API Key */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Deepgram API Key
+                  {configStatus.api_keys.deepgram && (
+                    <span className="ml-2 text-xs text-green-600 dark:text-green-400">✓ Configured</span>
+                  )}
+                </label>
+                <input
+                  type="password"
+                  value={apiKeys.deepgram_api_key}
+                  onChange={(e) => setApiKeys(prev => ({ ...prev, deepgram_api_key: e.target.value }))}
+                  placeholder="Enter Deepgram API key"
+                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                />
+                <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  For audio transcription
+                </div>
+              </div>
+
+              {/* Mistral API Key */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Mistral API Key (Optional)
+                  {configStatus.api_keys.mistral && (
+                    <span className="ml-2 text-xs text-green-600 dark:text-green-400">✓ Configured</span>
+                  )}
+                </label>
+                <input
+                  type="password"
+                  value={apiKeys.mistral_api_key}
+                  onChange={(e) => setApiKeys(prev => ({ ...prev, mistral_api_key: e.target.value }))}
+                  placeholder="Enter Mistral API key"
+                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                />
+                <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  Alternative transcription provider
+                </div>
+              </div>
+            </div>
+
+            {/* Save Button and Message */}
+            <div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-600">
+              <div className="flex-1">
+                {configMessage && (
+                  <p className={`text-sm ${
+                    configMessage.startsWith('✅')
+                      ? 'text-green-600 dark:text-green-400'
+                      : configMessage.startsWith('⚠️')
+                      ? 'text-yellow-600 dark:text-yellow-400'
+                      : 'text-red-600 dark:text-red-400'
+                  }`}>
+                    {configMessage}
+                  </p>
+                )}
+              </div>
+              <button
+                onClick={saveApiKeys}
+                disabled={configLoading}
+                className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {configLoading ? 'Saving...' : 'Save API Keys'}
+              </button>
+            </div>
+          </div>
+
+          {/* Info Banner */}
+          {!configStatus.features.llm_enabled && configStatus.graceful_degradation.allow_missing_api_keys && (
+            <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-md">
+              <div className="flex">
+                <AlertCircle className="h-5 w-5 text-blue-400 mr-2 flex-shrink-0" />
+                <div>
+                  <h4 className="text-sm font-medium text-blue-800 dark:text-blue-300">
+                    Quick Start Mode Active
+                  </h4>
+                  <p className="text-sm text-blue-700 dark:text-blue-400 mt-1">
+                    The system is running with limited features. Add API keys above to enable memory extraction, transcription, and chat features. Services will automatically activate after saving and restarting.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* Services Status */}
         {healthData?.services && (
diff --git a/backends/advanced/webui/src/services/api.ts b/backends/advanced/webui/src/services/api.ts
index 323bd369..8d777e3d 100644
--- a/backends/advanced/webui/src/services/api.ts
+++ b/backends/advanced/webui/src/services/api.ts
@@ -172,6 +172,19 @@ export const systemApi = {
   // Memory Provider Management
   getMemoryProvider: () => api.get('/api/admin/memory/provider'),
   setMemoryProvider: (provider: string) => api.post('/api/admin/memory/provider', { provider }),
+
+  // API Key and Configuration Management
+  getConfigurationStatus: () => api.get('/api/admin/config/status'),
+  updateApiKeys: (apiKeys: {
+    openai_api_key?: string
+    deepgram_api_key?: string
+    mistral_api_key?: string
+  }) => api.post('/api/admin/config/api-keys', apiKeys),
+  updateProviderConfig: (providerConfig: {
+    llm_provider?: string
+    transcription_provider?: string
+    memory_provider?: string
+  }) => api.post('/api/admin/config/providers', providerConfig),
 }
 
 export const queueApi = {

From 903714c008e06eb0c66c4895c369702667e92078 Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Thu, 18 Dec 2025 19:08:32 +0000
Subject: [PATCH 16/17] fix test env

---
 tests/setup/test_env.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/setup/test_env.py b/tests/setup/test_env.py
index 8af9777d..aeb4d417 100644
--- a/tests/setup/test_env.py
+++ b/tests/setup/test_env.py
@@ -3,7 +3,6 @@
 from pathlib import Path
 from dotenv import load_dotenv
 
-
 # Load .env from backends/advanced directory to get COMPOSE_PROJECT_NAME
 backend_env_path = Path(__file__).resolve().parents[2] / "backends" / "advanced" / ".env"
 if backend_env_path.exists():

From fc4ed63f3c7eb6b4d97ecb058d02d12b9a7871a9 Mon Sep 17 00:00:00 2001
From: Stu Alexandere <thestumonkey@gmail.com>
Date: Mon, 17 Nov 2025 18:19:11 +0000
Subject: [PATCH 17/17] Added mcp server and auth/apikey