Initial commit

.gitattributes

@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,338 @@
+# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,node,python
+# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,node,python
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### Python ###
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+!frontend/src/lib
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+### Python Patch ###
+# Poetry local configuration file - https://python-poetry.org/docs/configuration/#local-configuration
+poetry.toml
+
+# ruff
+.ruff_cache/
+
+# LSP config files
+pyrightconfig.json
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,node,python#
+ Hugging Face Spaces
+.space/
+*.db
+*.sqlite
+media/

Dockerfile

@@ -0,0 +1,42 @@
+# Use Python 3.12 as base image
+FROM python:3.12
+
+# Install system packages (Node.js) as root before switching users
+RUN apt-get update && apt-get install -y \
+    curl \
+    && curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
+    && apt-get install -y nodejs \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create user and switch to it
+RUN useradd -m -u 1000 user
+USER user
+
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+# Set working directory
+WORKDIR /app
+
+# Copy project files
+COPY --chown=user . .
+
+# Install Python dependencies
+WORKDIR /app/backend
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Install Node.js dependencies and build frontend
+WORKDIR /app/frontend
+RUN npm install && npm run build
+
+# Copy built frontend files to backend static directory
+RUN mkdir -p /app/backend/static && cp -r dist/* /app/backend/static/
+
+# Set working directory to backend for running the app
+WORKDIR /app/backend
+
+# Expose port
+EXPOSE 7860
+
+# Start the application directly
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,16 @@
+---
+title: QuietRoom
+emoji: 📔
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: true
+license: gpl-3.0
+---
+
+# QuietRoom
+
+A privacy-first, multimodal journaling webapp that helps you capture and reflect on your daily experiences through photos, videos, audio recordings, text, and location data. QuietRoom leverages AI models to provide intelligent insights while maintaining your privacy.
+
+## Disclaimer 
+QuietRoom has been developed exclusively as a proof-of-concept for the "Google - The Gemma 3n Impact Challenge". It is not intended for use as a medical or therapeutic tool.

backend/.gitkeep

@@ -0,0 +1 @@
+# Backend directory placeholder

backend/.python-version

@@ -0,0 +1 @@
+3.12

backend/app/ai_manager.py

@@ -0,0 +1,673 @@
+"""AI Model Manager for LiteLLM integration."""
+
+import json
+import os
+import logging
+from typing import Dict, Any, Optional, List
+from pathlib import Path
+from dotenv import load_dotenv
+import json_repair
+
+load_dotenv()
+
+import litellm
+from litellm import completion
+
+logger = logging.getLogger(__name__)
+
+class AIModelManager:
+    """Manages AI model configuration and processing through LiteLLM."""
+    
+    def __init__(self):
+        self.current_model: Optional[str] = None
+        self.api_key: Optional[str] = None
+        self.prompts: Dict[str, Any] = {}
+        self.load_prompts()
+        
+        # Configure LiteLLM logging
+        if litellm:
+            litellm.set_verbose = False
+    
+    def load_prompts(self) -> None:
+        """Load prompt templates from prompts.json file."""
+        try:
+            prompts_path = Path(__file__).parent.parent / "prompts.json"
+            with open(prompts_path, 'r', encoding='utf-8') as f:
+                self.prompts = json.load(f)
+            logger.info("Prompts loaded successfully")
+        except FileNotFoundError:
+            logger.error("prompts.json file not found")
+            self.prompts = {}
+        except json.JSONDecodeError as e:
+            logger.error("Error parsing prompts.json: %s", e)
+            self.prompts = {}
+        except Exception as e:
+            logger.error("Unexpected error loading prompts: %s", e)
+            self.prompts = {}
+    
+    def configure_model(self, model_name: str, api_key: Optional[str] = None) -> bool:
+        """Configure the AI model for use with LiteLLM."""
+        if not litellm:
+            logger.error("LiteLLM not available - please install litellm package")
+            return False
+        
+        try:
+            self.current_model = model_name
+            self.api_key = api_key
+            
+            # Set API key in environment if provided
+            if api_key:
+                if model_name.startswith("gemini/"):
+                    os.environ["GEMINI_API_KEY"] = api_key
+                elif model_name.startswith("openai/"):
+                    os.environ["OPENAI_API_KEY"] = api_key
+                # Add more model providers as needed
+            
+            # Test the model configuration
+            test_response = self._make_completion(
+                messages=[{"role": "user", "content": "This is a test. Respond with RECEIVED"}],
+                max_tokens=10
+            )
+            
+            if test_response:
+                logger.info("Model %s configured successfully", model_name)
+                return True
+            
+            logger.error("Failed to configure model %s", model_name)
+            return False
+                
+        except Exception as e:
+            logger.error("Error configuring model %s: %s", model_name, e)
+            return False
+    
+    def _make_completion(self, messages: List[Dict], max_tokens: int = 1000, temperature: float = 0.7, return_json_object = False) -> Optional[str]:
+        """Make a completion request using LiteLLM."""
+        if not litellm or not self.current_model:
+            logger.error("LiteLLM not configured or model not set")
+            return None
+        
+        try:
+            response = completion(
+                model=self.current_model,
+                messages=messages,
+                api_base="http://localhost:11434" if self.current_model.startswith("ollama/") else None,
+                # max_tokens=max_tokens,
+                # temperature=temperature
+            )
+
+            if response and response.choices:
+                logger.info(response.choices[0].message.content)
+                if return_json_object:
+                    return json_repair.loads(response.choices[0].message.content)
+                else:
+                    return response.choices[0].message.content
+            
+            logger.error("No response content received from model")
+            return None
+                
+        except Exception as e:
+            logger.error("Error making completion request: %s", e)
+            return None
+    
+    def analyze_content(self, content: str, content_type: str, db_session=None) -> Dict[str, Any]:
+        """Analyze content using the configured AI model."""
+        if not self.current_model:
+            return {
+                "success": False,
+                "error": "No AI model configured",
+                "analysis": {}
+            }
+        
+        try:
+            # Select appropriate prompt based on content type
+            if content_type == "text":
+                prompt_key = "mood_analysis"
+            elif content_type == "image":
+                prompt_key = "image_analysis"
+            elif content_type == "audio":
+                prompt_key = "audio_transcription"
+            else:
+                return {
+                    "success": False,
+                    "error": f"Unsupported content type: {content_type}",
+                    "analysis": {}
+                }
+            
+            if prompt_key not in self.prompts:
+                return {
+                    "success": False,
+                    "error": f"Prompt template not found for {content_type}",
+                    "analysis": {}
+                }
+            
+            prompt_template = self.prompts[prompt_key]
+            
+            # Add personal context to system prompt if available
+            system_content = prompt_template["system"]
+            if db_session:
+                from .crud import UserConfigCRUD
+                personal_info = UserConfigCRUD.get(db_session, "personal_info")
+                cultural_context = UserConfigCRUD.get(db_session, "cultural_context")
+                
+                if personal_info:
+                    system_content += f"\n\nPersonal information about the user:\n{personal_info}\n"
+                if cultural_context:
+                    system_content += f"\nCultural context:\n{cultural_context}\n"
+            
+            # Prepare messages based on content type
+            if content_type == "image":
+                # For image analysis, use multimodal format
+                messages = [
+                    {"role": "system", "content": system_content},
+                    {
+                        "role": "user", 
+                        "content": [
+                            {"type": "text", "text": "Analyze this image in the context of a personal journal entry. Focus on mood, setting, people, activities, and emotional context."},
+                            {
+                                "type": "image_url",
+                                "image_url": {
+                                    "url": f"data:image/jpeg;base64,{content}"
+                                }
+                            }
+                        ]
+                    }
+                ]
+            elif content_type == "audio":
+                # For audio analysis, use multimodal format
+                messages = [
+                    {"role": "system", "content": system_content},
+                    {
+                        "role": "user",
+                        "content": [
+                            {"type": "text", "text": "Transcribe and analyze this audio recording for a personal journal entry. Maintain natural speech patterns and emotional tone."},
+                            {
+                                "type": "input_audio",
+                                "input_audio": {"data": content, "format": "wav"}
+                            }
+                        ]
+                    }
+                ]
+            else:
+                # For text analysis, use standard format
+                messages = [
+                    {"role": "system", "content": system_content},
+                    {"role": "user", "content": prompt_template["user"].format(content=content)}
+                ]
+            
+            # Make completion request with JSON output for structured responses
+            response = self._make_completion(messages, return_json_object=True)
+            
+            if response:
+                return {
+                    "success": True,
+                    "error": None,
+                    "analysis": response
+                }
+            else:
+                return {
+                    "success": False,
+                    "error": "No response from AI model",
+                    "analysis": {}
+                }
+                
+        except Exception as e:
+            logger.error("Error analyzing content: %s", e)
+            return {
+                "success": False,
+                "error": str(e),
+                "analysis": {}
+            }
+    
+    def generate_chat_response(self, message: str, context_entries: Optional[List[str]] = None, conversation_history: Optional[List[Dict[str, str]]] = None, db_session=None) -> Dict[str, Any]:
+        """Generate a chat response using the configured AI model with conversation context."""
+        if not self.current_model:
+            return {
+                "success": False,
+                "error": "No AI model configured",
+                "response": ""
+            }
+        
+        try:
+            if "chat_system" not in self.prompts:
+                return {
+                    "success": False,
+                    "error": "Chat prompt template not found",
+                    "response": ""
+                }
+            
+            prompt_template = self.prompts["chat_system"]
+            
+            # Prepare context from entries if provided
+            context = ""
+            if context_entries:
+                context = f"\n\nRelevant journal entries for context:\n{chr(10).join(context_entries)}\n"
+            
+            # Add personal information and cultural context if available
+            personal_context = ""
+            if db_session:
+                from .crud import UserConfigCRUD
+                personal_info = UserConfigCRUD.get(db_session, "personal_info")
+                cultural_context = UserConfigCRUD.get(db_session, "cultural_context")
+                
+                if personal_info:
+                    personal_context += f"\n\nPersonal information about the user:\n{personal_info}\n"
+                if cultural_context:
+                    personal_context += f"\nCultural context:\n{cultural_context}\n"
+            
+            # Prepare messages with conversation history
+            messages = [
+                {"role": "system", "content": prompt_template["system"] + context + personal_context}
+            ]
+            
+            # Add conversation history (last 10 messages to maintain context while avoiding token limits)
+            if conversation_history:
+                recent_history = conversation_history[-10:]  # Keep last 10 messages
+                for hist_msg in recent_history:
+                    messages.append({
+                        "role": hist_msg["role"],
+                        "content": hist_msg["content"]
+                    })
+            
+            # Add current user message
+            messages.append({
+                "role": "user", 
+                "content": message
+            })
+            
+            # Make completion request
+            response = self._make_completion(messages, max_tokens=500)
+            
+            if response:
+                return {
+                    "success": True,
+                    "error": None,
+                    "response": response
+                }
+            
+            return {
+                "success": False,
+                "error": "No response from AI model",
+                "response": ""
+            }
+                
+        except Exception as e:
+            logger.error("Error generating chat response: %s", e)
+            return {
+                "success": False,
+                "error": str(e),
+                "response": ""
+            }
+    
+    def generate_insights(self, entries: List[str]) -> Dict[str, Any]:
+        """Generate insights from multiple journal entries."""
+        if not self.current_model:
+            return {
+                "success": False,
+                "error": "No AI model configured",
+                "insights": {}
+            }
+        
+        try:
+            if "insights_generation" not in self.prompts:
+                return {
+                    "success": False,
+                    "error": "Insights prompt template not found",
+                    "insights": {}
+                }
+            
+            prompt_template = self.prompts["insights_generation"]
+            entries_text = "\n\n---\n\n".join(entries)
+            
+            # Prepare messages
+            messages = [
+                {"role": "system", "content": prompt_template["system"]},
+                {"role": "user", "content": prompt_template["user"].format(entries=entries_text)}
+            ]
+            
+            # Make completion request with JSON output
+            response = self._make_completion(messages, max_tokens=800, return_json_object=True)
+            
+            if response:
+                return {
+                    "success": True,
+                    "error": None,
+                    "insights": response
+                }
+            else:
+                return {
+                    "success": False,
+                    "error": "No response from AI model",
+                    "insights": {}
+                }
+                
+        except Exception as e:
+            logger.error("Error generating insights: %s", e)
+            return {
+                "success": False,
+                "error": str(e),
+                "insights": {}
+            }
+    
+    def test_model_connection(self) -> Dict[str, Any]:
+        """Test the current model configuration."""
+        if not self.current_model:
+            return {
+                "success": False,
+                "error": "No model configured",
+                "model": None
+            }
+        
+        try:
+            test_response = self._make_completion(
+                messages=[{"role": "user", "content": "Respond with 'OK' if you can hear me."}],
+                max_tokens=10
+            )
+            
+            if test_response:
+                return {
+                    "success": True,
+                    "error": None,
+                    "model": self.current_model,
+                    "response": test_response
+                }
+            
+            return {
+                "success": False,
+                "error": "No response from model",
+                "model": self.current_model
+            }
+                
+        except Exception as e:
+            return {
+                "success": False,
+                "error": str(e),
+                "model": self.current_model
+            }
+    
+    def get_supported_models(self) -> List[str]:
+        """Get list of supported AI models."""
+        return [
+            "gemini/gemma-3n-e2b-it",
+            "gemini/gemma-3n-e4b-it",
+            "gemini/gemini-2.5-flash",
+            "gemini/gemini-2.5-flash-lite",
+            "ollama/gemma3n:e4b",
+            "ollama/gemma3n:e2b",
+        ]
+    
+    def get_model_info(self) -> Dict[str, Any]:
+        """Get information about the current model configuration."""
+        return {
+            "current_model": self.current_model,
+            "has_api_key": bool(self.api_key),
+            "supported_models": self.get_supported_models(),
+            "litellm_available": litellm is not None,
+            "environment_api_keys": {
+                "gemini": bool(os.environ.get("GEMINI_API_KEY")),
+                "openai": bool(os.environ.get("OPENAI_API_KEY"))
+            }
+        }
+    
+    def summarize_conversation(self, conversation: List[Dict[str, str]], db_session=None) -> Dict[str, Any]:
+        """Generate a journal entry summary from a chat conversation."""
+        if not self.current_model:
+            return {
+                "success": False,
+                "error": "No AI model configured",
+                "summary": {}
+            }
+        
+        try:
+            if "conversation_summary" not in self.prompts:
+                return {
+                    "success": False,
+                    "error": "Conversation summary prompt template not found",
+                    "summary": {}
+                }
+            
+            prompt_template = self.prompts["conversation_summary"]
+            
+            # Format conversation for the prompt
+            conversation_text = ""
+            for msg in conversation:
+                role = "User" if msg["role"] == "user" else "Assistant"
+                conversation_text += f"{role}: {msg['content']}\n\n"
+            
+            # Add personal context if available
+            personal_context = ""
+            if db_session:
+                from .crud import UserConfigCRUD
+                personal_info = UserConfigCRUD.get(db_session, "personal_info")
+                cultural_context = UserConfigCRUD.get(db_session, "cultural_context")
+                
+                if personal_info:
+                    personal_context += f"\n\nPersonal information about the user:\n{personal_info}\n"
+                if cultural_context:
+                    personal_context += f"\nCultural context:\n{cultural_context}\n"
+            
+            # Prepare messages
+            messages = [
+                {"role": "system", "content": prompt_template["system"] + personal_context},
+                {"role": "user", "content": prompt_template["user"].format(conversation=conversation_text)}
+            ]
+            
+            # Make completion request with JSON output
+            response = self._make_completion(messages, max_tokens=800, return_json_object=True)
+            
+            if response:
+                return {
+                    "success": True,
+                    "error": None,
+                    "summary": response
+                }
+            else:
+                return {
+                    "success": False,
+                    "error": "No response from AI model",
+                    "summary": {}
+                }
+                
+        except Exception as e:
+            logger.error("Error summarizing conversation: %s", e)
+            return {
+                "success": False,
+                "error": str(e),
+                "summary": {}
+            }
+
+    def detect_crisis(self, content: str, db_session=None) -> Dict[str, Any]:
+        """Detect potential crisis or emotional distress in journal content."""
+        if not self.current_model:
+            return {
+                "success": False,
+                "error": "No AI model configured",
+                "crisis_detected": False
+            }
+        
+        try:
+            if "crisis_detection" not in self.prompts:
+                return {
+                    "success": False,
+                    "error": "Crisis detection prompt template not found",
+                    "crisis_detected": False
+                }
+            
+            prompt_template = self.prompts["crisis_detection"]
+            
+            # Prepare messages for crisis detection
+            messages = [
+                {"role": "system", "content": prompt_template["system"]},
+                {"role": "user", "content": prompt_template["user"].format(content=content)}
+            ]
+            
+            # Make completion request with JSON output
+            response = self._make_completion(messages, max_tokens=200, return_json_object=True)
+            
+            if response:
+                return {
+                    "success": True,
+                    "error": None,
+                    "crisis_detected": response.get("critical", False),
+                    "severity": response.get("severity", "low"),
+                    "reason": response.get("reason", "")
+                }
+            else:
+                return {
+                    "success": False,
+                    "error": "No response from AI model",
+                    "crisis_detected": False
+                }
+                
+        except Exception as e:
+            logger.error("Error in crisis detection: %s", e)
+            return {
+                "success": False,
+                "error": str(e),
+                "crisis_detected": False
+            }
+    
+    def analyze_psychological_image(self, image_data: str, context_text: str = "", db_session=None) -> Dict[str, Any]:
+        """Analyze image from a psychological perspective for therapeutic journaling."""
+        if not self.current_model:
+            return {
+                "success": False,
+                "error": "No AI model configured",
+                "analysis": {}
+            }
+        
+        try:
+            if "image_analysis" not in self.prompts:
+                return {
+                    "success": False,
+                    "error": "Image analysis prompt template not found",
+                    "analysis": {}
+                }
+            
+            prompt_template = self.prompts["image_analysis"]
+            
+            # Add personal context if available
+            personal_context = ""
+            if db_session:
+                from .crud import UserConfigCRUD
+                personal_info = UserConfigCRUD.get(db_session, "personal_info")
+                cultural_context = UserConfigCRUD.get(db_session, "cultural_context")
+                
+                if personal_info:
+                    personal_context += f"\n\nPersonal information about the user:\n{personal_info}\n"
+                if cultural_context:
+                    personal_context += f"\nCultural context:\n{cultural_context}\n"
+            
+            # Add text context if provided
+            if context_text:
+                personal_context += f"\nJournal entry context: {context_text}\n"
+            
+            # Prepare multimodal message
+            messages = [
+                {"role": "system", "content": prompt_template["system"] + personal_context},
+                {
+                    "role": "user", 
+                    "content": [
+                        {"type": "text", "text": prompt_template["user"]},
+                        {
+                            "type": "image_url",
+                            "image_url": {
+                                "url": f"data:image/jpeg;base64,{image_data}"
+                            }
+                        }
+                    ]
+                }
+            ]
+            
+            # Make completion request with JSON output
+            response = self._make_completion(messages, max_tokens=800, return_json_object=True)
+            
+            if response:
+                return {
+                    "success": True,
+                    "error": None,
+                    "analysis": response
+                }
+            else:
+                return {
+                    "success": False,
+                    "error": "No response from AI model",
+                    "analysis": {}
+                }
+                
+        except Exception as e:
+            logger.error("Error in psychological image analysis: %s", e)
+            return {
+                "success": False,
+                "error": str(e),
+                "analysis": {}
+            }
+
+    def generate_motivational_support(self, content: str, db_session=None) -> Dict[str, Any]:
+        """Generate motivational support and suggestions for users in distress."""
+        if not self.current_model:
+            return {
+                "success": False,
+                "error": "No AI model configured",
+                "support": {}
+            }
+        
+        try:
+            if "motivational_support" not in self.prompts:
+                return {
+                    "success": False,
+                    "error": "Motivational support prompt template not found",
+                    "support": {}
+                }
+            
+            prompt_template = self.prompts["motivational_support"]
+            
+            # Add personal context if available
+            personal_context = ""
+            if db_session:
+                from .crud import UserConfigCRUD
+                personal_info = UserConfigCRUD.get(db_session, "personal_info")
+                cultural_context = UserConfigCRUD.get(db_session, "cultural_context")
+                
+                if personal_info:
+                    personal_context += f"\n\nPersonal information about the user:\n{personal_info}\n"
+                if cultural_context:
+                    personal_context += f"\nCultural context:\n{cultural_context}\n"
+            
+            # Prepare messages
+            messages = [
+                {"role": "system", "content": prompt_template["system"] + personal_context},
+                {"role": "user", "content": prompt_template["user"].format(content=content)}
+            ]
+            
+            # Make completion request with JSON output
+            response = self._make_completion(messages, max_tokens=600, return_json_object=True)
+            
+            if response:
+                return {
+                    "success": True,
+                    "error": None,
+                    "support": response
+                }
+            else:
+                return {
+                    "success": False,
+                    "error": "No response from AI model",
+                    "support": {}
+                }
+                
+        except Exception as e:
+            logger.error("Error generating motivational support: %s", e)
+            return {
+                "success": False,
+                "error": str(e),
+                "support": {}
+            }
+
+    def initialize_from_config(self, model_name: Optional[str], api_key: Optional[str]) -> bool:
+        """Initialize AI manager with stored configuration."""
+        if model_name:
+            return self.configure_model(model_name, api_key)
+        return False
+
+# Global AI manager instance
+ai_manager = AIModelManager()

backend/app/crud.py

@@ -0,0 +1,195 @@
+"""CRUD operations for QuietRoom models."""
+
+from sqlalchemy.orm import Session
+from sqlalchemy import desc, and_, or_
+from typing import List, Optional, Dict, Any
+from datetime import datetime, timezone
+import json
+
+from . import models
+
+class EntryCRUD:
+    """CRUD operations for journal entries."""
+    
+    @staticmethod
+    def create(db: Session, entry_data: Dict[str, Any]) -> models.Entry:
+        """Create a new journal entry."""
+        db_entry = models.Entry(**entry_data)
+        db.add(db_entry)
+        db.commit()
+        db.refresh(db_entry)
+        return db_entry
+    
+    @staticmethod
+    def get(db: Session, entry_id: str) -> Optional[models.Entry]:
+        """Get a journal entry by ID."""
+        return db.query(models.Entry).filter(models.Entry.id == entry_id).first()
+    
+    @staticmethod
+    def get_all(db: Session, skip: int = 0, limit: int = 100) -> List[models.Entry]:
+        """Get all journal entries with pagination."""
+        return db.query(models.Entry).order_by(desc(models.Entry.created_at)).offset(skip).limit(limit).all()
+    
+    @staticmethod
+    def update(db: Session, entry_id: str, entry_data: Dict[str, Any]) -> Optional[models.Entry]:
+        """Update a journal entry."""
+        db_entry = db.query(models.Entry).filter(models.Entry.id == entry_id).first()
+        if db_entry:
+            for key, value in entry_data.items():
+                setattr(db_entry, key, value)
+            db_entry.updated_at = datetime.now(timezone.utc)
+            db.commit()
+            db.refresh(db_entry)
+        return db_entry
+    
+    @staticmethod
+    def delete(db: Session, entry_id: str) -> bool:
+        """Delete a journal entry."""
+        db_entry = db.query(models.Entry).filter(models.Entry.id == entry_id).first()
+        if db_entry:
+            db.delete(db_entry)
+            db.commit()
+            return True
+        return False
+    
+    @staticmethod
+    def search(db: Session, query: str, skip: int = 0, limit: int = 100) -> List[models.Entry]:
+        """Search entries by content or title."""
+        return db.query(models.Entry).filter(
+            or_(
+                models.Entry.content.contains(query),
+                models.Entry.title.contains(query)
+            )
+        ).order_by(desc(models.Entry.created_at)).offset(skip).limit(limit).all()
+
+class MediaFileCRUD:
+    """CRUD operations for media files."""
+    
+    @staticmethod
+    def create(db: Session, media_data: Dict[str, Any]) -> models.MediaFile:
+        """Create a new media file record."""
+        db_media = models.MediaFile(**media_data)
+        db.add(db_media)
+        db.commit()
+        db.refresh(db_media)
+        return db_media
+    
+    @staticmethod
+    def get(db: Session, media_id: str) -> Optional[models.MediaFile]:
+        """Get a media file by ID."""
+        return db.query(models.MediaFile).filter(models.MediaFile.id == media_id).first()
+    
+    @staticmethod
+    def get_by_entry(db: Session, entry_id: str) -> List[models.MediaFile]:
+        """Get all media files for an entry."""
+        return db.query(models.MediaFile).filter(models.MediaFile.entry_id == entry_id).all()
+    
+    @staticmethod
+    def delete(db: Session, media_id: str) -> bool:
+        """Delete a media file record."""
+        db_media = db.query(models.MediaFile).filter(models.MediaFile.id == media_id).first()
+        if db_media:
+            db.delete(db_media)
+            db.commit()
+            return True
+        return False
+
+class TagCRUD:
+    """CRUD operations for tags."""
+    
+    @staticmethod
+    def create(db: Session, tag_data: Dict[str, Any]) -> models.Tag:
+        """Create a new tag."""
+        db_tag = models.Tag(**tag_data)
+        db.add(db_tag)
+        db.commit()
+        db.refresh(db_tag)
+        return db_tag
+    
+    @staticmethod
+    def get(db: Session, tag_id: str) -> Optional[models.Tag]:
+        """Get a tag by ID."""
+        return db.query(models.Tag).filter(models.Tag.id == tag_id).first()
+    
+    @staticmethod
+    def get_by_name(db: Session, name: str) -> Optional[models.Tag]:
+        """Get a tag by name."""
+        return db.query(models.Tag).filter(models.Tag.name == name).first()
+    
+    @staticmethod
+    def get_all(db: Session) -> List[models.Tag]:
+        """Get all tags."""
+        return db.query(models.Tag).order_by(models.Tag.name).all()
+    
+    @staticmethod
+    def delete(db: Session, tag_id: str) -> bool:
+        """Delete a tag."""
+        db_tag = db.query(models.Tag).filter(models.Tag.id == tag_id).first()
+        if db_tag:
+            db.delete(db_tag)
+            db.commit()
+            return True
+        return False
+
+class ChatMessageCRUD:
+    """CRUD operations for chat messages."""
+    
+    @staticmethod
+    def create(db: Session, message_data: Dict[str, Any]) -> models.ChatMessage:
+        """Create a new chat message."""
+        db_message = models.ChatMessage(**message_data)
+        db.add(db_message)
+        db.commit()
+        db.refresh(db_message)
+        return db_message
+    
+    @staticmethod
+    def get_all(db: Session, skip: int = 0, limit: int = 100) -> List[models.ChatMessage]:
+        """Get all chat messages with pagination."""
+        return db.query(models.ChatMessage).order_by(models.ChatMessage.created_at).offset(skip).limit(limit).all()
+    
+    @staticmethod
+    def delete_all(db: Session) -> bool:
+        """Delete all chat messages."""
+        db.query(models.ChatMessage).delete()
+        db.commit()
+        return True
+
+class UserConfigCRUD:
+    """CRUD operations for user configuration."""
+    
+    @staticmethod
+    def set(db: Session, key: str, value: str) -> models.UserConfig:
+        """Set a configuration value."""
+        db_config = db.query(models.UserConfig).filter(models.UserConfig.key == key).first()
+        if db_config:
+            db_config.value = value
+            db_config.updated_at = datetime.now(timezone.utc)
+        else:
+            db_config = models.UserConfig(key=key, value=value)
+            db.add(db_config)
+        db.commit()
+        db.refresh(db_config)
+        return db_config
+    
+    @staticmethod
+    def get(db: Session, key: str) -> Optional[str]:
+        """Get a configuration value."""
+        db_config = db.query(models.UserConfig).filter(models.UserConfig.key == key).first()
+        return db_config.value if db_config else None
+    
+    @staticmethod
+    def get_all(db: Session) -> Dict[str, str]:
+        """Get all configuration values."""
+        configs = db.query(models.UserConfig).all()
+        return {config.key: config.value for config in configs}
+    
+    @staticmethod
+    def delete(db: Session, key: str) -> bool:
+        """Delete a configuration value."""
+        db_config = db.query(models.UserConfig).filter(models.UserConfig.key == key).first()
+        if db_config:
+            db.delete(db_config)
+            db.commit()
+            return True
+        return False

backend/app/database.py

@@ -0,0 +1,50 @@
+"""Database configuration and session management."""
+
+from sqlalchemy import create_engine
+from sqlalchemy.orm import declarative_base
+from sqlalchemy.orm import sessionmaker
+import os
+
+# Database URL - using SQLite for local storage
+# For Hugging Face Spaces, use persistent /data directory if available, fallback to /tmp
+if os.getenv("SPACE_ID"):  # Hugging Face Spaces environment
+    if os.path.exists("/data"):
+        DATABASE_URL = os.getenv("DATABASE_URL", "sqlite:////data/quietroom_tmp.db")
+    else:
+        DATABASE_URL = os.getenv("DATABASE_URL", "sqlite:////tmp/quietroom_tmp.db")
+else:
+    DATABASE_URL = os.getenv("DATABASE_URL", "sqlite:///./quietroom_tmp.db")
+
+# Create engine
+engine = create_engine(
+    DATABASE_URL,
+    connect_args={"check_same_thread": False} if "sqlite" in DATABASE_URL else {}
+)
+
+# Create session factory
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+# Create base class for models
+Base = declarative_base()
+
+def get_db():
+    """Dependency to get database session."""
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+def get_media_directory():
+    """Get the appropriate media directory based on environment."""
+    if os.getenv("SPACE_ID"):  # Hugging Face Spaces environment
+        if os.path.exists("/data"):
+            return "/data/media"
+        else:
+            return "/tmp/media"
+    else:
+        return "media"
+
+def init_db():
+    """Initialize database tables."""
+    Base.metadata.create_all(bind=engine)

backend/app/init_db.py

@@ -0,0 +1,21 @@
+"""Database initialization script."""
+
+from .database import init_db, engine
+from .models import Base
+import logging
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+def create_tables():
+    """Create all database tables."""
+    try:
+        logger.info("Creating database tables...")
+        Base.metadata.create_all(bind=engine)
+        logger.info("Database tables created successfully!")
+    except Exception as e:
+        logger.error(f"Error creating database tables: {e}")
+        raise
+
+if __name__ == "__main__":
+    create_tables()

backend/app/main.py

@@ -0,0 +1,957 @@
+"""Main FastAPI application."""
+
+import logging
+import os
+import uuid
+import json
+import base64
+from contextlib import asynccontextmanager
+from typing import List, Optional, Dict, Any
+
+from fastapi import FastAPI, HTTPException, Depends, status, File, UploadFile
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
+from sqlalchemy.orm import Session
+
+from .database import get_db, init_db, SessionLocal, get_media_directory
+from .crud import EntryCRUD, MediaFileCRUD, UserConfigCRUD
+from .ai_manager import ai_manager
+from . import schemas, models
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    """Application lifespan manager."""
+    # Startup
+    try:
+        init_db()
+        logger.info("Database initialized successfully")
+        
+        # Initialize AI manager with stored configuration
+        db = SessionLocal()
+        try:
+            model_name = UserConfigCRUD.get(db, "ai_model")
+            api_key = UserConfigCRUD.get(db, "ai_api_key")
+            
+            # Set default model if none is configured
+            if not model_name:
+                default_model = "gemini/gemma-3n-e4b-it"
+                UserConfigCRUD.set(db, "ai_model", default_model)
+                model_name = default_model
+                logger.info("Set default AI model to %s", default_model)
+            
+            # Override current model to use the desired default
+            if model_name == "ollama/gemma3n:e4b":
+                default_model = "gemini/gemma-3n-e4b-it"
+                UserConfigCRUD.set(db, "ai_model", default_model)
+                model_name = default_model
+                logger.info("Updated AI model from Ollama to %s", default_model)
+            
+            if model_name:
+                ai_manager.initialize_from_config(model_name, api_key)
+                logger.info("AI manager initialized with stored configuration")
+        finally:
+            db.close()
+            
+    except Exception as e:
+        logger.error("Failed to initialize application: %s", e)
+        raise
+    
+    yield
+    
+    # Shutdown (if needed)
+    logger.info("Application shutting down")
+
+# Create FastAPI app
+app = FastAPI(
+    title="QuietRoom API",
+    description="Privacy-first multimodal journaling app API",
+    version="0.1.0",
+    lifespan=lifespan
+)
+
+# Configure CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Allow all origins for Hugging Face Spaces deployment
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Mount static files (for serving the built frontend)
+# Note: This should be at the end of the file, after all API routes are defined
+# if os.path.exists("static"):
+#     app.mount("/", StaticFiles(directory="static", html=True), name="static")
+
+
+
+# Global exception handler
+@app.exception_handler(Exception)
+async def global_exception_handler(request, exc):
+    """Global exception handler for unhandled errors."""
+    logger.error("Unhandled error: %s", exc)
+    return JSONResponse(
+        status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+        content={
+            "error": {
+                "code": "INTERNAL_SERVER_ERROR",
+                "message": "An internal server error occurred",
+                "details": str(exc) if app.debug else "Contact support if the problem persists",
+                "timestamp": "2025-01-31T10:30:00Z"
+            }
+        }
+    )
+
+# Health check endpoint
+@app.get("/health")
+async def health_check():
+    """Health check endpoint."""
+    return {"status": "healthy", "service": "quietroom-api"}
+
+# Entry endpoints
+@app.post("/api/entries", response_model=schemas.EntryResponse)
+async def create_entry(entry: schemas.EntryCreate, db: Session = Depends(get_db)):
+    """Create a new journal entry."""
+    try:
+        db_entry = EntryCRUD.create(db, entry.model_dump())
+        return db_entry
+    except Exception as e:
+        logger.error("Error creating entry: %s", e)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to create entry"
+        ) from e
+
+@app.get("/api/entries", response_model=List[schemas.EntryResponse])
+async def get_entries(
+    skip: int = 0, 
+    limit: int = 100, 
+    search: Optional[str] = None,
+    db: Session = Depends(get_db)
+):
+    """Get journal entries with optional search and pagination."""
+    try:
+        if search:
+            entries = EntryCRUD.search(db, search, skip, limit)
+        else:
+            entries = EntryCRUD.get_all(db, skip, limit)
+        return entries
+    except Exception as e:
+        logger.error("Error retrieving entries: %s", e)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to retrieve entries"
+        ) from e
+
+@app.get("/api/entries/statistics", response_model=schemas.AppStatistics)
+async def get_statistics(db: Session = Depends(get_db)):
+    """Get app statistics."""
+    try:
+        from sqlalchemy import func, extract
+        from datetime import datetime, timedelta
+        
+        # Get basic counts
+        total_entries = db.query(models.Entry).count()
+        
+        # Calculate total words (approximate)
+        entries = db.query(models.Entry).all()
+        total_words = sum(len(entry.content.split()) if entry.content else 0 for entry in entries)
+        
+        # Get entries this month
+        current_month = datetime.now().month
+        current_year = datetime.now().year
+        entries_this_month = db.query(models.Entry).filter(
+            extract('month', models.Entry.created_at) == current_month,
+            extract('year', models.Entry.created_at) == current_year
+        ).count()
+        
+        # Get entries this year
+        entries_this_year = db.query(models.Entry).filter(
+            extract('year', models.Entry.created_at) == current_year
+        ).count()
+        
+        # Calculate average mood (if available)
+        mood_scores = db.query(models.Entry.ai_mood_score).filter(
+            models.Entry.ai_mood_score.isnot(None)
+        ).all()
+        average_mood = sum(score[0] for score in mood_scores) / len(mood_scores) if mood_scores else 0
+        
+        # Get most common themes (simplified)
+        themes_data = db.query(models.Entry.ai_themes).filter(
+            models.Entry.ai_themes.isnot(None)
+        ).all()
+        
+        all_themes = []
+        for theme_data in themes_data:
+            if theme_data[0]:
+                try:
+                    themes = json.loads(theme_data[0])
+                    if isinstance(themes, list):
+                        all_themes.extend(themes)
+                except:
+                    pass
+        
+        # Count theme frequency
+        theme_counts = {}
+        for theme in all_themes:
+            theme_counts[theme] = theme_counts.get(theme, 0) + 1
+        
+        most_common_themes = sorted(theme_counts.items(), key=lambda x: x[1], reverse=True)[:5]
+        most_common_themes = [theme[0] for theme in most_common_themes]
+        
+        return schemas.AppStatistics(
+            total_entries=total_entries,
+            total_words=total_words,
+            entries_this_month=entries_this_month,
+            entries_this_year=entries_this_year,
+            current_streak=0,  # TODO: Implement streak calculation
+            longest_streak=0,  # TODO: Implement streak calculation
+            average_mood=average_mood,
+            most_common_themes=most_common_themes
+        )
+        
+    except Exception as e:
+        logger.error("Error getting statistics: %s", e)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to get statistics"
+        ) from e
+
+@app.get("/api/entries/{entry_id}", response_model=schemas.EntryResponse)
+async def get_entry(entry_id: str, db: Session = Depends(get_db)):
+    """Get a specific journal entry."""
+    try:
+        entry = EntryCRUD.get(db, entry_id)
+        if not entry:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="Entry not found"
+            )
+        return entry
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error("Error retrieving entry %s: %s", entry_id, e)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to retrieve entry"
+        ) from e
+
+@app.put("/api/entries/{entry_id}", response_model=schemas.EntryResponse)
+async def update_entry(
+    entry_id: str, 
+    entry_update: schemas.EntryUpdate, 
+    db: Session = Depends(get_db)
+):
+    """Update a journal entry."""
+    try:
+        # Filter out None values
+        update_data = {k: v for k, v in entry_update.model_dump().items() if v is not None}
+        
+        updated_entry = EntryCRUD.update(db, entry_id, update_data)
+        if not updated_entry:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="Entry not found"
+            )
+        return updated_entry
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error("Error updating entry %s: %s", entry_id, e)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to update entry"
+        ) from e
+
+@app.delete("/api/entries/{entry_id}")
+async def delete_entry(entry_id: str, db: Session = Depends(get_db)):
+    """Delete a journal entry."""
+    try:
+        success = EntryCRUD.delete(db, entry_id)
+        if not success:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="Entry not found"
+            )
+        return {"message": "Entry deleted successfully"}
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error("Error deleting entry %s: %s", entry_id, e)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to delete entry"
+        ) from e
+
+# Media file endpoints
+@app.post("/api/entries/{entry_id}/media", response_model=schemas.MediaFileResponse)
+async def upload_media(
+    entry_id: str,
+    file: UploadFile = File(...),
+    db: Session = Depends(get_db)
+):
+    """Upload media files for an entry."""
+    try:
+        # Check if entry exists
+        entry = EntryCRUD.get(db, entry_id)
+        if not entry:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="Entry not found"
+            )
+        
+        # Validate file type
+        allowed_types = {
+            'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+            'video/mp4', 'video/avi', 'video/mov', 'video/webm',
+            'audio/mp3', 'audio/wav', 'audio/ogg', 'audio/m4a'
+        }
+        
+        if file.content_type not in allowed_types:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail=f"File type {file.content_type} not allowed"
+            )
+        
+        # Validate file size (max 50MB)
+        max_size = 50 * 1024 * 1024  # 50MB
+        file_content = await file.read()
+        if len(file_content) > max_size:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail="File size exceeds 50MB limit"
+            )
+        
+        # Generate unique filename
+        file_extension = file.filename.split('.')[-1] if '.' in file.filename else ''
+        unique_filename = f"{uuid.uuid4()}.{file_extension}"
+        media_dir = get_media_directory()
+        file_path = os.path.join(media_dir, "uploads", unique_filename)
+        
+        # Ensure directory exists
+        os.makedirs(os.path.dirname(file_path), exist_ok=True)
+        
+        # Save file to disk
+        with open(file_path, "wb") as buffer:
+            buffer.write(file_content)
+        
+        # Determine file type category
+        if file.content_type.startswith('image/'):
+            file_type = 'image'
+        elif file.content_type.startswith('video/'):
+            file_type = 'video'
+        elif file.content_type.startswith('audio/'):
+            file_type = 'audio'
+        else:
+            file_type = 'unknown'
+        
+        # Create media file record
+        media_data = {
+            "entry_id": entry_id,
+            "filename": unique_filename,
+            "file_type": file_type,
+            "file_size": len(file_content)
+        }
+        
+        db_media = MediaFileCRUD.create(db, media_data)
+        return db_media
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error("Error uploading media: %s", e)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to upload media file"
+        ) from e
+
+@app.delete("/api/entries/{entry_id}/media/{media_id}")
+async def delete_media(entry_id: str, media_id: str, db: Session = Depends(get_db)):
+    """Delete a media file."""
+    try:
+        # Check if entry exists
+        entry = EntryCRUD.get(db, entry_id)
+        if not entry:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="Entry not found"
+            )
+        
+        # Get media file record
+        media_file = MediaFileCRUD.get(db, media_id)
+        if not media_file:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="Media file not found"
+            )
+        
+        # Check if media file belongs to the entry
+        if media_file.entry_id != entry_id:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail="Media file does not belong to this entry"
+            )
+        
+        # Delete file from disk
+        media_dir = get_media_directory()
+        file_path = os.path.join(media_dir, "uploads", media_file.filename)
+        if os.path.exists(file_path):
+            os.remove(file_path)
+        
+        # Delete database record
+        success = MediaFileCRUD.delete(db, media_id)
+        if not success:
+            raise HTTPException(
+                status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+                detail="Failed to delete media file record"
+            )
+        
+        return {"message": "Media file deleted successfully"}
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error("Error deleting media: %s", e)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to delete media file"
+        ) from e
+
+@app.get("/api/entries/{entry_id}/media", response_model=List[schemas.MediaFileResponse])
+async def get_entry_media(entry_id: str, db: Session = Depends(get_db)):
+    """Get all media files for an entry."""
+    try:
+        # Check if entry exists
+        entry = EntryCRUD.get(db, entry_id)
+        if not entry:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="Entry not found"
+            )
+        
+        # Get media files
+        media_files = MediaFileCRUD.get_by_entry(db, entry_id)
+        return media_files
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error("Error retrieving media files: %s", e)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to retrieve media files"
+        ) from e
+
+@app.get("/api/media/{filename}")
+async def serve_media(filename: str, db: Session = Depends(get_db)):
+    """Serve media files."""
+    try:
+        # Check if media file exists in database
+        media_file = db.query(models.MediaFile).filter(models.MediaFile.filename == filename).first()
+        if not media_file:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="Media file not found"
+            )
+        
+        # Check if file exists on disk
+        media_dir = get_media_directory()
+        file_path = os.path.join(media_dir, "uploads", filename)
+        if not os.path.exists(file_path):
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="Media file not found on disk"
+            )
+        
+        return FileResponse(file_path)
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error("Error serving media file: %s", e)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to serve media file"
+        ) from e
+
+# AI processing endpoints
+@app.post("/api/ai/analyze-text", response_model=schemas.AIAnalysisResponse)
+async def analyze_text(request: schemas.AIAnalysisRequest, db: Session = Depends(get_db)):
+    """Analyze text content for mood and themes."""
+    try:
+        result = ai_manager.analyze_content(request.content, "text", db_session=db)
+        return schemas.AIAnalysisResponse(**result)
+    except Exception as e:
+        logger.error("Error in text analysis: %s", e)
+        return schemas.AIAnalysisResponse(
+            analysis={},
+            success=False,
+            error=str(e)
+        )
+
+@app.post("/api/ai/analyze-image", response_model=schemas.AIAnalysisResponse)
+async def analyze_image(request: schemas.AIAnalysisRequest, db: Session = Depends(get_db)):
+    """Analyze image content."""
+    try:
+        result = ai_manager.analyze_content(request.content, "image", db_session=db)
+        return schemas.AIAnalysisResponse(**result)
+    except Exception as e:
+        logger.error("Error in image analysis: %s", e)
+        return schemas.AIAnalysisResponse(
+            analysis={},
+            success=False,
+            error=str(e)
+        )
+
+@app.post("/api/ai/analyze-psychological-image", response_model=schemas.AIAnalysisResponse)
+async def analyze_psychological_image(
+    request: schemas.PsychologicalImageAnalysisRequest, 
+    db: Session = Depends(get_db)
+):
+    """Analyze image from a psychological perspective for therapeutic journaling."""
+    try:
+        result = ai_manager.analyze_psychological_image(
+            request.image_data, 
+            request.context_text or "", 
+            db_session=db
+        )
+        return schemas.AIAnalysisResponse(**result)
+    except Exception as e:
+        logger.error("Error in psychological image analysis: %s", e)
+        return schemas.AIAnalysisResponse(
+            analysis={},
+            success=False,
+            error=str(e)
+        )
+
+@app.post("/api/ai/transcribe-audio", response_model=schemas.AIAnalysisResponse)
+async def transcribe_audio(
+    file: UploadFile = File(...),
+    db: Session = Depends(get_db)
+):
+    """Transcribe audio file to text and analyze it."""
+    try:
+        # Validate file type
+        allowed_audio_types = {
+            'audio/wav', 'audio/mp3', 'audio/m4a', 'audio/ogg', 'audio/webm'
+        }
+        
+        if file.content_type not in allowed_audio_types:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail=f"Audio file type {file.content_type} not supported"
+            )
+        
+        # Read and encode audio file
+        audio_content = await file.read()
+        encoded_audio = base64.b64encode(audio_content).decode('utf-8')
+        
+        # Process with AI manager
+        result = ai_manager.analyze_content(encoded_audio, "audio", db_session=db)
+        return schemas.AIAnalysisResponse(**result)
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error("Error in audio transcription: %s", e)
+        return schemas.AIAnalysisResponse(
+            analysis={},
+            success=False,
+            error=str(e)
+        )
+
+@app.post("/api/ai/chat", response_model=schemas.ChatResponse)
+async def chat(request: schemas.ChatRequest, db: Session = Depends(get_db)):
+    """Chat with AI assistant."""
+    try:
+        result = ai_manager.generate_chat_response(
+            request.message, 
+            request.context_entries,
+            request.conversation_history,
+            db_session=db
+        )
+        return schemas.ChatResponse(**result)
+    except Exception as e:
+        logger.error("Error in chat: %s", e)
+        return schemas.ChatResponse(
+            response="",
+            success=False,
+            error=str(e)
+        )
+
+@app.post("/api/ai/summarize-conversation", response_model=schemas.ConversationSummaryResponse)
+async def summarize_conversation(request: schemas.ConversationSummaryRequest, db: Session = Depends(get_db)):
+    """Generate a journal entry summary from a chat conversation."""
+    try:
+        result = ai_manager.summarize_conversation(request.conversation, db_session=db)
+        return schemas.ConversationSummaryResponse(**result)
+    except Exception as e:
+        logger.error("Error in conversation summary: %s", e)
+        return schemas.ConversationSummaryResponse(
+            summary={},
+            success=False,
+            error=str(e)
+        )
+
+@app.post("/api/ai/detect-crisis", response_model=schemas.CrisisDetectionResponse)
+async def detect_crisis(request: schemas.AIAnalysisRequest, db: Session = Depends(get_db)):
+    """Detect potential crisis or emotional distress in content."""
+    try:
+        result = ai_manager.detect_crisis(request.content, db_session=db)
+        return schemas.CrisisDetectionResponse(**result)
+    except Exception as e:
+        logger.error("Error in crisis detection: %s", e)
+        return schemas.CrisisDetectionResponse(
+            crisis_detected=False,
+            severity="low",
+            reason="",
+            success=False,
+            error=str(e)
+        )
+
+@app.post("/api/ai/motivational-support", response_model=schemas.MotivationalSupportResponse)
+async def get_motivational_support(request: schemas.AIAnalysisRequest, db: Session = Depends(get_db)):
+    """Generate motivational support and suggestions for users in distress."""
+    try:
+        result = ai_manager.generate_motivational_support(request.content, db_session=db)
+        return schemas.MotivationalSupportResponse(**result)
+    except Exception as e:
+        logger.error("Error generating motivational support: %s", e)
+        return schemas.MotivationalSupportResponse(
+            support={},
+            success=False,
+            error=str(e)
+        )
+
+@app.post("/api/ai/generate-insights", response_model=schemas.InsightsResponse)
+async def generate_insights(request: schemas.InsightsRequest, db: Session = Depends(get_db)):
+    """Generate AI insights from journal entries."""
+    try:
+        from datetime import datetime
+        
+        # Get entries based on request parameters
+        query = db.query(models.Entry)
+        
+        if request.entry_ids:
+            query = query.filter(models.Entry.id.in_(request.entry_ids))
+        elif request.date_range:
+            # Parse dates and make them timezone-aware (start of day and end of day)
+            start_date = datetime.fromisoformat(request.date_range["start"]).replace(hour=0, minute=0, second=0, microsecond=0)
+            end_date = datetime.fromisoformat(request.date_range["end"]).replace(hour=23, minute=59, second=59, microsecond=999999)
+            
+            # Make dates timezone-aware (UTC)
+            from datetime import timezone
+            start_date = start_date.replace(tzinfo=timezone.utc)
+            end_date = end_date.replace(tzinfo=timezone.utc)
+            
+            logger.info(f"Filtering entries between {start_date} and {end_date}")
+            query = query.filter(
+                models.Entry.created_at >= start_date,
+                models.Entry.created_at <= end_date
+            )
+        
+        entries = query.all()
+        
+        if not entries:
+            return schemas.InsightsResponse(
+                mood_trends=[],
+                common_themes=[],
+                emotional_patterns=[],
+                summary="No entries found for the specified criteria."
+            )
+        
+        # Analyze mood trends
+        mood_trends = []
+        entries_by_date = {}
+        
+        for entry in entries:
+            date_str = entry.created_at.strftime('%Y-%m-%d')
+            if date_str not in entries_by_date:
+                entries_by_date[date_str] = []
+            entries_by_date[date_str].append(entry)
+        
+        for date_str, date_entries in entries_by_date.items():
+            mood_scores = [e.ai_mood_score for e in date_entries if e.ai_mood_score]
+            avg_mood = sum(mood_scores) / len(mood_scores) if mood_scores else 5.0
+            
+            mood_trends.append({
+                "date": date_str,
+                "average_mood": avg_mood,
+                "entry_count": len(date_entries)
+            })
+        
+        # Analyze common themes
+        all_themes = []
+        for entry in entries:
+            if entry.ai_themes:
+                try:
+                    themes = json.loads(entry.ai_themes)
+                    if isinstance(themes, list):
+                        all_themes.extend(themes)
+                except:
+                    pass
+        
+        theme_counts = {}
+        for theme in all_themes:
+            theme_counts[theme] = theme_counts.get(theme, 0) + 1
+        
+        common_themes = [
+            {"theme": theme, "frequency": count}
+            for theme, count in sorted(theme_counts.items(), key=lambda x: x[1], reverse=True)[:10]
+        ]
+        
+        # Analyze emotional patterns
+        mood_counts = {"positive": 0, "neutral": 0, "negative": 0}
+        total_with_mood = 0
+        
+        for entry in entries:
+            if entry.ai_mood_score:
+                total_with_mood += 1
+                if entry.ai_mood_score >= 7:
+                    mood_counts["positive"] += 1
+                elif entry.ai_mood_score >= 4:
+                    mood_counts["neutral"] += 1
+                else:
+                    mood_counts["negative"] += 1
+        
+        emotional_patterns = []
+        if total_with_mood > 0:
+            for emotion, count in mood_counts.items():
+                percentage = (count / total_with_mood) * 100
+                emotional_patterns.append({
+                    "emotion": emotion,
+                    "percentage": percentage
+                })
+        
+        # Generate AI-powered insights for personal growth
+        entry_contents = [entry.content for entry in entries]
+        logger.info(f"Generating AI insights for {len(entry_contents)} entries")
+        
+        ai_insights_result = ai_manager.generate_insights(entry_contents)
+        logger.info(f"AI insights result: {ai_insights_result}")
+        
+        # Extract AI insights if successful
+        ai_insights = {}
+        if ai_insights_result.get("success") and ai_insights_result.get("insights"):
+            ai_insights = ai_insights_result["insights"]
+            logger.info(f"Successfully extracted AI insights: {list(ai_insights.keys())}")
+        else:
+            logger.warning(f"AI insights generation failed: {ai_insights_result.get('error', 'Unknown error')}")
+            # Provide fallback insights when AI fails
+            ai_insights = {
+                "growth_areas": ["Continue journaling to unlock AI-powered insights"],
+                "actionable_outcomes": [],
+                "strengths_identified": ["Consistent journaling practice"],
+                "progress_indicators": [],
+                "growth_summary": "Keep writing to unlock personalized growth insights powered by AI analysis."
+            }
+        
+        # Generate summary
+        summary = f"Analyzed {len(entries)} entries. "
+        if emotional_patterns:
+            dominant_emotion = max(emotional_patterns, key=lambda x: x["percentage"])
+            summary += f"Your dominant emotional pattern is {dominant_emotion['emotion']} ({dominant_emotion['percentage']:.1f}%). "
+        
+        if common_themes:
+            top_theme = common_themes[0]
+            summary += f"Your most common theme is '{top_theme['theme']}' appearing {top_theme['frequency']} times."
+        
+        # Process actionable outcomes from AI insights
+        actionable_outcomes = []
+        if ai_insights.get("actionable_outcomes"):
+            for outcome in ai_insights["actionable_outcomes"]:
+                actionable_outcomes.append(schemas.ActionableOutcome(
+                    title=outcome.get("title", ""),
+                    description=outcome.get("description", ""),
+                    timeframe=outcome.get("timeframe", "weekly"),
+                    category=outcome.get("category", "general")
+                ))
+        
+        return schemas.InsightsResponse(
+            mood_trends=mood_trends,
+            common_themes=common_themes,
+            emotional_patterns=emotional_patterns,
+            summary=summary,
+            growth_areas=ai_insights.get("growth_areas", []),
+            actionable_outcomes=actionable_outcomes,
+            strengths_identified=ai_insights.get("strengths_identified", []),
+            progress_indicators=ai_insights.get("progress_indicators", []),
+            growth_summary=ai_insights.get("growth_summary", "")
+        )
+        
+    except Exception as e:
+        logger.error("Error generating insights: %s", e)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to generate insights"
+        ) from e
+
+# Configuration endpoints
+@app.get("/api/config", response_model=schemas.ConfigResponse)
+async def get_config(db: Session = Depends(get_db)):
+    """Get user configuration settings."""
+    try:
+        config = UserConfigCRUD.get_all(db)
+        return schemas.ConfigResponse(config=config)
+    except Exception as e:
+        logger.error("Error retrieving config: %s", e)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to retrieve configuration"
+        ) from e
+
+@app.put("/api/config", response_model=schemas.UserConfigResponse)
+async def update_config(
+    config_update: schemas.UserConfigUpdate, 
+    db: Session = Depends(get_db)
+):
+    """Update user configuration settings."""
+    try:
+        # Handle special configuration keys
+        if config_update.key == "ai_model":
+            # Store the model name in config
+            config = UserConfigCRUD.set(db, config_update.key, config_update.value)
+            
+            # Also try to configure the AI manager if API key is available
+            api_key = UserConfigCRUD.get(db, "ai_api_key")
+            if api_key:
+                ai_manager.configure_model(config_update.value, api_key)
+            
+            return config
+        elif config_update.key == "ai_api_key":
+            # Store the API key in config
+            config = UserConfigCRUD.set(db, config_update.key, config_update.value)
+            
+            # Also try to configure the AI manager if model is available
+            model_name = UserConfigCRUD.get(db, "ai_model")
+            if model_name:
+                ai_manager.configure_model(model_name, config_update.value)
+            
+            return config
+        else:
+            # Regular configuration update
+            config = UserConfigCRUD.set(db, config_update.key, config_update.value)
+            return config
+    except Exception as e:
+        logger.error("Error updating config: %s", e)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to update configuration"
+        ) from e
+
+@app.post("/api/config/test-model", response_model=schemas.ModelTestResponse)
+async def test_model(db: Session = Depends(get_db)):
+    """Test AI model connection."""
+    try:
+        # Get current model configuration from database
+        model_name = UserConfigCRUD.get(db, "ai_model")
+        api_key = UserConfigCRUD.get(db, "ai_api_key")
+        
+        if not model_name:
+            return schemas.ModelTestResponse(
+                success=False,
+                error="No AI model configured",
+                model=None
+            )
+        
+        # Configure the model if not already configured
+        if ai_manager.current_model != model_name:
+            success = ai_manager.configure_model(model_name, api_key)
+            if not success:
+                return schemas.ModelTestResponse(
+                    success=False,
+                    error=f"Failed to configure model {model_name}",
+                    model=model_name
+                )
+        
+        # Test the model connection
+        result = ai_manager.test_model_connection()
+        return schemas.ModelTestResponse(**result)
+    except Exception as e:
+        logger.error("Error testing model: %s", e)
+        return schemas.ModelTestResponse(
+            success=False,
+            error=str(e),
+            model=ai_manager.current_model
+        )
+
+@app.post("/api/config/configure-model", response_model=schemas.ModelTestResponse)
+async def configure_model(
+    model_config: schemas.ModelConfigRequest,
+    db: Session = Depends(get_db)
+):
+    """Configure AI model with API key."""
+    try:
+        # Store configuration in database
+        UserConfigCRUD.set(db, "ai_model", model_config.model_name)
+        if model_config.api_key:
+            UserConfigCRUD.set(db, "ai_api_key", model_config.api_key)
+        
+        # Configure the AI manager
+        success = ai_manager.configure_model(model_config.model_name, model_config.api_key)
+        
+        if success:
+            return schemas.ModelTestResponse(
+                success=True,
+                model=model_config.model_name,
+                response=f"Model {model_config.model_name} configured successfully"
+            )
+        
+        return schemas.ModelTestResponse(
+            success=False,
+            error=f"Failed to configure model {model_config.model_name}",
+            model=model_config.model_name
+        )
+    except Exception as e:
+        logger.error("Error configuring model: %s", e)
+        return schemas.ModelTestResponse(
+            success=False,
+            error=str(e),
+            model=model_config.model_name
+        )
+
+@app.get("/api/config/models", response_model=schemas.ModelInfoResponse)
+async def get_model_info():
+    """Get information about available AI models and current configuration."""
+    try:
+        model_info = ai_manager.get_model_info()
+        return schemas.ModelInfoResponse(
+            success=True,
+            data=model_info
+        )
+    except Exception as e:
+        logger.error("Error getting model info: %s", e)
+        return schemas.ModelInfoResponse(
+            success=False,
+            error=str(e),
+            data={}
+        )
+
+@app.post("/api/ai/test-insights")
+async def test_ai_insights(request: Dict[str, Any], db: Session = Depends(get_db)):
+    """Test AI manager insights generation directly."""
+    try:
+        entries = request.get("entries", [])
+        if not entries:
+            return {"success": False, "error": "No entries provided"}
+        
+        # Use AI manager's generate_insights method directly
+        result = ai_manager.generate_insights(entries)
+        return result
+    except Exception as e:
+        logger.error("Error in AI insights test: %s", e)
+        return {"success": False, "error": str(e)}
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)
+# Mount static files (for serving the built frontend)
+# This must be at the end, after all API routes are defined
+if os.path.exists("static"):
+    app.mount("/", StaticFiles(directory="static", html=True), name="static")

backend/app/models.py

@@ -0,0 +1,81 @@
+"""SQLAlchemy models for QuietRoom journal app."""
+
+from sqlalchemy import Column, String, Text, Integer, REAL, DateTime, ForeignKey, Table
+from sqlalchemy.orm import relationship
+from sqlalchemy.sql import func
+from .database import Base
+import uuid
+from datetime import datetime
+
+# Junction table for entry-tags many-to-many relationship
+entry_tags = Table(
+    'entry_tags',
+    Base.metadata,
+    Column('entry_id', String, ForeignKey('entries.id', ondelete='CASCADE'), primary_key=True),
+    Column('tag_id', String, ForeignKey('tags.id', ondelete='CASCADE'), primary_key=True)
+)
+
+class Entry(Base):
+    """Journal entry model."""
+    __tablename__ = 'entries'
+    
+    id = Column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    created_at = Column(DateTime, default=func.now())
+    updated_at = Column(DateTime, default=func.now(), onupdate=func.now())
+    title = Column(String)
+    content = Column(Text, nullable=False)
+    mood = Column(String)
+    location_name = Column(String)
+    location_lat = Column(REAL)
+    location_lng = Column(REAL)
+    ai_summary = Column(Text)
+    ai_mood_score = Column(REAL)
+    ai_themes = Column(Text)  # JSON array of themes stored as text
+    
+    # Relationships
+    media_files = relationship("MediaFile", back_populates="entry", cascade="all, delete-orphan")
+    tags = relationship("Tag", secondary=entry_tags, back_populates="entries")
+
+class MediaFile(Base):
+    """Media file model for photos, videos, audio."""
+    __tablename__ = 'media_files'
+    
+    id = Column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    entry_id = Column(String, ForeignKey('entries.id', ondelete='CASCADE'), nullable=False)
+    filename = Column(String, nullable=False)
+    file_type = Column(String, nullable=False)  # 'image', 'video', 'audio'
+    file_size = Column(Integer)
+    ai_description = Column(Text)
+    created_at = Column(DateTime, default=func.now())
+    
+    # Relationships
+    entry = relationship("Entry", back_populates="media_files")
+
+class Tag(Base):
+    """Tag model for categorizing entries."""
+    __tablename__ = 'tags'
+    
+    id = Column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    name = Column(String, unique=True, nullable=False)
+    color = Column(String)
+    
+    # Relationships
+    entries = relationship("Entry", secondary=entry_tags, back_populates="tags")
+
+class ChatMessage(Base):
+    """Chat message model for AI conversations."""
+    __tablename__ = 'chat_messages'
+    
+    id = Column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    role = Column(String, nullable=False)  # 'user' or 'assistant'
+    content = Column(Text, nullable=False)
+    related_entries = Column(Text)  # JSON array of entry IDs stored as text
+    created_at = Column(DateTime, default=func.now())
+
+class UserConfig(Base):
+    """User configuration model for app settings."""
+    __tablename__ = 'user_config'
+    
+    key = Column(String, primary_key=True)
+    value = Column(Text, nullable=False)
+    updated_at = Column(DateTime, default=func.now(), onupdate=func.now())

backend/app/schemas.py

@@ -0,0 +1,216 @@
+"""Pydantic models for request/response validation."""
+
+from typing import List, Optional, Dict, Any
+from datetime import datetime
+
+from pydantic import BaseModel, Field, ConfigDict
+
+# Entry schemas
+class EntryBase(BaseModel):
+    title: Optional[str] = None
+    content: str
+    mood: Optional[str] = None
+    location_name: Optional[str] = None
+    location_lat: Optional[float] = None
+    location_lng: Optional[float] = None
+
+class EntryCreate(EntryBase):
+    ai_summary: Optional[str] = None
+    ai_mood_score: Optional[float] = None
+    ai_themes: Optional[str] = None  # JSON string
+
+class EntryUpdate(BaseModel):
+    title: Optional[str] = None
+    content: Optional[str] = None
+    mood: Optional[str] = None
+    location_name: Optional[str] = None
+    location_lat: Optional[float] = None
+    location_lng: Optional[float] = None
+    ai_summary: Optional[str] = None
+    ai_mood_score: Optional[float] = None
+    ai_themes: Optional[str] = None  # JSON string
+
+class EntryResponse(EntryBase):
+    id: str
+    created_at: datetime
+    updated_at: datetime
+    ai_summary: Optional[str] = None
+    ai_mood_score: Optional[float] = None
+    ai_themes: Optional[str] = None  # JSON string
+    
+    model_config = ConfigDict(from_attributes=True)
+
+# Media file schemas
+class MediaFileBase(BaseModel):
+    filename: str
+    file_type: str
+    file_size: Optional[int] = None
+
+class MediaFileCreate(MediaFileBase):
+    entry_id: str
+
+class MediaFileResponse(MediaFileBase):
+    id: str
+    entry_id: str
+    ai_description: Optional[str] = None
+    created_at: datetime
+    
+    model_config = ConfigDict(from_attributes=True)
+
+# Tag schemas
+class TagBase(BaseModel):
+    name: str
+    color: Optional[str] = None
+
+class TagCreate(TagBase):
+    pass
+
+class TagResponse(TagBase):
+    id: str
+    
+    model_config = ConfigDict(from_attributes=True)
+
+# Chat message schemas
+class ChatMessageBase(BaseModel):
+    role: str = Field(..., pattern="^(user|assistant)$")
+    content: str
+
+class ChatMessageCreate(ChatMessageBase):
+    related_entries: Optional[List[str]] = None
+
+class ChatMessageResponse(ChatMessageBase):
+    id: str
+    related_entries: Optional[str] = None  # JSON string
+    created_at: datetime
+    
+    model_config = ConfigDict(from_attributes=True)
+
+# User config schemas
+class UserConfigUpdate(BaseModel):
+    key: str
+    value: str
+
+class UserConfigResponse(BaseModel):
+    key: str
+    value: str
+    updated_at: datetime
+    
+    model_config = ConfigDict(from_attributes=True)
+
+class ModelConfigRequest(BaseModel):
+    model_name: str
+    api_key: Optional[str] = None
+
+class ModelTestResponse(BaseModel):
+    success: bool
+    model: Optional[str] = None
+    response: Optional[str] = None
+    error: Optional[str] = None
+
+class ConfigResponse(BaseModel):
+    """Response for configuration data."""
+    config: Dict[str, str]
+    success: bool = True
+    error: Optional[str] = None
+
+class ModelInfoResponse(BaseModel):
+    """Response for model information."""
+    success: bool
+    data: Dict[str, Any] = {}
+    error: Optional[str] = None
+
+# AI processing schemas
+class AIAnalysisRequest(BaseModel):
+    content: str
+    content_type: str = Field(..., pattern="^(text|image|audio)$")
+
+class AIAnalysisResponse(BaseModel):
+    analysis: Dict[str, Any]
+    success: bool
+    error: Optional[str] = None
+
+class ChatRequest(BaseModel):
+    message: str
+    context_entries: Optional[List[str]] = None
+    conversation_history: Optional[List[Dict[str, str]]] = None
+
+class ChatResponse(BaseModel):
+    response: str
+    success: bool
+    error: Optional[str] = None
+
+class ConversationSummaryRequest(BaseModel):
+    conversation: List[Dict[str, str]]
+
+class ConversationSummaryResponse(BaseModel):
+    summary: Dict[str, Any]
+    success: bool
+    error: Optional[str] = None
+
+# Statistics schemas
+class AppStatistics(BaseModel):
+    total_entries: int
+    total_words: int
+    entries_this_month: int
+    entries_this_year: int
+    current_streak: int
+    longest_streak: int
+    average_mood: float
+    most_common_themes: List[str]
+
+# Insights schemas
+class MoodTrend(BaseModel):
+    date: str
+    average_mood: float
+    entry_count: int
+
+class CommonTheme(BaseModel):
+    theme: str
+    frequency: int
+
+class EmotionalPattern(BaseModel):
+    emotion: str
+    percentage: float
+
+class ActionableOutcome(BaseModel):
+    title: str
+    description: str
+    timeframe: str
+    category: str
+
+class InsightsRequest(BaseModel):
+    entry_ids: Optional[List[str]] = None
+    date_range: Optional[Dict[str, str]] = None
+
+class InsightsResponse(BaseModel):
+    mood_trends: List[MoodTrend]
+    common_themes: List[CommonTheme]
+    emotional_patterns: List[EmotionalPattern]
+    summary: str
+    # New fields for enhanced personal growth insights
+    growth_areas: Optional[List[str]] = []
+    actionable_outcomes: Optional[List[ActionableOutcome]] = []
+    strengths_identified: Optional[List[str]] = []
+    progress_indicators: Optional[List[str]] = []
+    growth_summary: Optional[str] = ""
+
+# Crisis detection schemas
+class CrisisDetectionResponse(BaseModel):
+    crisis_detected: bool
+    severity: str
+    reason: str
+    success: bool
+    error: Optional[str] = None
+
+class MotivationalSupportResponse(BaseModel):
+    support: Dict[str, Any]
+    success: bool
+    error: Optional[str] = None
+
+class PsychologicalImageAnalysisRequest(BaseModel):
+    image_data: str  # base64 encoded image
+    context_text: Optional[str] = None  # optional journal entry text for context
+
+# Error response schema
+class ErrorResponse(BaseModel):
+    error: Dict[str, Any]

backend/prompts.json

@@ -0,0 +1,34 @@
+{
+  "mood_analysis": {
+    "system": "You are an AI assistant that analyzes the emotional tone and mood of journal entries. Provide objective, helpful insights while being supportive and non-judgmental. Act as a thoughtful psychological companion who asks meaningful follow-up questions to stimulate deeper self-reflection using techniques from cognitive behavioral therapy, mindfulness, and positive psychology. You must respond with valid JSON only.",
+    "user": "Analyze the emotional tone and mood of the following journal entry. Provide a mood score from 1-10 (1=very negative, 10=very positive), identify key emotional themes, and generate 2-3 thoughtful follow-up questions that would help the user explore their feelings and experiences more deeply.\n\nFor follow-up questions, choose from these psychological techniques based on what would be most helpful:\n\n**Cognitive Exploration:**\n- \"What thoughts were going through your mind when you felt [emotion]?\"\n- \"What assumptions might you be making about this situation?\"\n- \"How might someone you admire view this situation?\"\n\n**Pattern Recognition:**\n- \"When have you felt similar emotions before? What patterns do you notice?\"\n- \"What triggers tend to bring up these feelings for you?\"\n- \"How do you typically respond when you feel this way?\"\n\n**Values & Growth:**\n- \"How does this experience connect to what matters most to you?\"\n- \"What would you tell a friend going through something similar?\"\n- \"What might this experience be teaching you about yourself?\"\n\n**Gratitude & Reframing:**\n- \"Despite the challenges, what are you grateful for in this situation?\"\n- \"What strengths did you show in handling this?\"\n- \"How might you view this differently in a year from now?\"\n\n**Mindfulness & Self-Compassion:**\n- \"What physical sensations do you notice when you think about this?\"\n- \"How can you be kinder to yourself about this experience?\"\n- \"What would it feel like to fully accept this emotion without judgment?\"\n\nEntry: {content}\n\nRespond with valid JSON in this exact format:\n{{\n  \"mood_score\": <number between 1-10>,\n  \"primary_emotion\": \"<single primary emotion>\",\n  \"themes\": [\"<theme1>\", \"<theme2>\", \"<theme3>\"],\n  \"summary\": \"<brief emotional summary in 1-2 sentences>\",\n  \"follow_up_questions\": [\"<thoughtful question 1>\", \"<thoughtful question 2>\", \"<thoughtful question 3>\"]\n}}"
+  },
+  "image_analysis": {
+    "system": "You are a psychologically-informed AI assistant that analyzes images in the context of personal mental health journaling. You understand visual psychology, emotional expression, environmental psychology, and therapeutic photo analysis. Focus on psychological insights that can help users understand their emotional patterns, relationships, and mental state. You must respond with valid JSON only.",
+    "user": "Analyze this image from a psychological perspective for a personal journal entry. Consider:\n\n**Visual Psychology Elements:**\n- Facial expressions and body language (if people are present)\n- Color psychology and emotional associations\n- Composition and visual balance\n- Lighting and its psychological impact\n\n**Environmental Psychology:**\n- Space organization and its reflection of mental state\n- Social vs. solitary settings\n- Natural vs. urban environments\n- Personal vs. public spaces\n\n**Therapeutic Insights:**\n- What emotions might this image represent or trigger?\n- What patterns or themes might this reveal about the user's life?\n- How might this image relate to personal growth or challenges?\n- What questions might help the user reflect deeper on this moment?\n\nRespond with valid JSON in this exact format:\n{{\n  \"description\": \"<detailed psychological description of the image>\",\n  \"emotional_indicators\": [\"<psychological indicator1>\", \"<indicator2>\", \"<indicator3>\"],\n  \"psychological_themes\": [\"<theme1>\", \"<theme2>\", \"<theme3>\"],\n  \"mood_assessment\": \"<overall mood/emotional tone of the image>\",\n  \"environmental_context\": \"<psychological significance of the setting>\",\n  \"reflection_questions\": [\"<therapeutic question1>\", \"<question2>\", \"<question3>\"],\n  \"suggested_tags\": [\"<psychologically relevant tag1>\", \"<tag2>\", \"<tag3>\"],\n  \"therapeutic_insights\": \"<brief insight about what this image might reveal about the user's mental/emotional state>\"\n}}"
+  },
+  "audio_transcription": {
+    "system": "You are an AI assistant that transcribes audio recordings for personal journal entries. Provide accurate transcriptions while maintaining the natural flow and emotional tone of speech. You must respond with valid JSON only.",
+    "user": "Transcribe the following audio recording for a personal journal entry. Maintain natural speech patterns and emotional tone.\n\nRespond with valid JSON in this exact format:\n{{\n  \"transcription\": \"<accurate transcription of the audio>\",\n  \"confidence\": <decimal number between 0.0-1.0>,\n  \"detected_emotions\": [\"<emotion1>\", \"<emotion2>\", \"<emotion3>\"]\n}}"
+  },
+  "chat_system": {
+    "system": "You are a supportive AI companion for a personal journaling app called QuietRoom. Your role is to help users reflect on their experiences, provide gentle insights, and encourage personal growth.\n\nGuidelines:\n- Be empathetic and non-judgmental\n- Ask thoughtful follow-up questions\n- Avoid giving medical or professional advice\n- Focus on self-reflection and personal insights\n- Maintain a warm, supportive tone\n- Encourage healthy coping strategies and mindfulness\n- Respect user privacy and confidentiality",
+    "user": "{message}"
+  },
+  "insights_generation": {
+    "system": "You are an AI assistant that generates meaningful insights from journal entries to help users understand patterns in their thoughts, emotions, and experiences. Focus on actionable personal growth outcomes and specific recommendations. You must respond with valid JSON only.",
+    "user": "Based on the following journal entries, generate insights about emotional patterns, personal growth opportunities, and actionable outcomes. Focus on constructive observations that promote self-awareness and provide specific, actionable recommendations for personal development.\n\nEntries: {entries}\n\nRespond with valid JSON in this exact format:\n{{\n  \"patterns\": [\"<pattern1>\", \"<pattern2>\", \"<pattern3>\"],\n  \"growth_areas\": [\"<specific area for improvement>\", \"<another growth area>\", \"<third growth area>\"],\n  \"actionable_outcomes\": [\n    {{\n      \"title\": \"<specific action title>\",\n      \"description\": \"<what to do and why>\",\n      \"timeframe\": \"<daily/weekly/monthly>\",\n      \"category\": \"<emotional/behavioral/mindset/relationship>\"\n    }},\n    {{\n      \"title\": \"<specific action title>\",\n      \"description\": \"<what to do and why>\",\n      \"timeframe\": \"<daily/weekly/monthly>\",\n      \"category\": \"<emotional/behavioral/mindset/relationship>\"\n    }},\n    {{\n      \"title\": \"<specific action title>\",\n      \"description\": \"<what to do and why>\",\n      \"timeframe\": \"<daily/weekly/monthly>\",\n      \"category\": \"<emotional/behavioral/mindset/relationship>\"\n    }}\n  ],\n  \"strengths_identified\": [\"<strength1>\", \"<strength2>\", \"<strength3>\"],\n  \"progress_indicators\": [\"<measurable indicator1>\", \"<measurable indicator2>\"],\n  \"overall_trend\": \"<positive or neutral or concerning>\",\n  \"growth_summary\": \"<personalized summary focusing on growth potential and next steps>\"\n}}"
+  },
+  "conversation_summary": {
+    "system": "You are an AI assistant that creates meaningful journal entries from chat conversations. Transform the conversation into a reflective journal entry that captures the key topics, emotions, and insights discussed. You must respond with valid JSON only.",
+    "user": "Based on the following conversation, create a journal entry that summarizes the key topics, emotions, and insights. Focus on the user's thoughts, feelings, and any meaningful reflections that emerged during the chat.\n\nConversation: {conversation}\n\nRespond with valid JSON in this exact format:\n{{\n  \"title\": \"<meaningful title for the entry>\",\n  \"content\": \"<journal entry content that captures the essence of the conversation>\",\n  \"mood_score\": <number between 1-10>,\n  \"tags\": [\"<tag1>\", \"<tag2>\", \"<tag3>\"]\n}}"
+  },
+  "crisis_detection": {
+    "system": "You are a safety-focused AI assistant that analyzes journal entries for signs of emotional distress or crisis. Your role is to identify when users might benefit from additional support and encouragement. You must respond with valid JSON only.",
+    "user": "CRITICAL SAFETY INSTRUCTION:\nAnalyze the following journal entry text for signs of emotional distress, crisis, or extremely low mood that might indicate the user needs additional support and encouragement.\n\nIf the text contains clear indicators of:\n- Self-harm thoughts or intentions\n- Suicidal ideation\n- Severe depression or hopelessness\n- Crisis situations requiring immediate support\n- Extremely negative mood (mood score would be 1-3)\n\nRespond with: {{\"critical\": true, \"severity\": \"high\", \"reason\": \"<brief explanation>\"}}\n\nIf the text shows moderate distress or low mood (mood score 4-5) that could benefit from encouragement:\nRespond with: {{\"critical\": false, \"severity\": \"moderate\", \"reason\": \"<brief explanation>\"}}\n\nFor all other content (mood score 6-10):\nRespond with: {{\"critical\": false, \"severity\": \"low\", \"reason\": \"<brief explanation>\"}}\n\nText: \"{content}\""
+  },
+  "motivational_support": {
+    "system": "You are a compassionate AI companion that provides gentle encouragement and practical suggestions for users experiencing difficult times. Focus on hope, self-care, and positive next steps. You must respond with valid JSON only.",
+    "user": "The user is having a difficult time based on their journal entry. Provide compassionate support with motivational phrases and practical suggestions to help them end their day better and start tomorrow positively.\n\nEntry: {content}\n\nRespond with valid JSON in this exact format:\n{{\n  \"motivational_phrases\": [\"<encouraging phrase 1>\", \"<encouraging phrase 2>\", \"<encouraging phrase 3>\"],\n  \"evening_suggestions\": [\"<practical evening activity 1>\", \"<practical evening activity 2>\", \"<practical evening activity 3>\"],\n  \"tomorrow_suggestions\": [\"<positive morning activity 1>\", \"<positive morning activity 2>\", \"<positive morning activity 3>\"],\n  \"affirmation\": \"<personal affirmation based on their situation>\",\n  \"gentle_reminder\": \"<gentle reminder about self-compassion and hope>\"\n}}"
+  }
+}

backend/pyproject.toml

@@ -0,0 +1,25 @@
+[project]
+name = "backend"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.12"
+dependencies = [
+    "dotenv>=0.9.9",
+    "fastapi>=0.116.1",
+    "json-repair>=0.48.0",
+    "litellm>=1.74.9.post1",
+    "ollama>=0.5.1",
+    "pillow>=11.3.0",
+    "pydantic>=2.11.7",
+    "python-dotenv>=1.1.1",
+    "python-multipart>=0.0.20",
+    "selenium>=4.34.2",
+    "sqlalchemy>=2.0.42",
+    "uvicorn>=0.35.0",
+]
+
+[dependency-groups]
+dev = [
+    "pytest>=8.4.1",
+]

backend/requirements.txt

@@ -0,0 +1,69 @@
+aiohappyeyeballs==2.6.1
+aiohttp==3.12.15
+aiosignal==1.4.0
+annotated-types==0.7.0
+anyio==4.9.0
+attrs==25.3.0
+certifi==2025.7.14
+charset-normalizer==3.4.2
+click==8.2.1
+distro==1.9.0
+dotenv==0.9.9
+fastapi==0.116.1
+filelock==3.18.0
+frozenlist==1.7.0
+fsspec==2025.7.0
+greenlet==3.2.3
+h11==0.16.0
+hf-xet==1.1.5
+httpcore==1.0.9
+httpx==0.28.1
+huggingface-hub==0.34.3
+idna==3.10
+importlib-metadata==8.7.0
+iniconfig==2.1.0
+jinja2==3.1.6
+jiter==0.10.0
+json-repair==0.48.0
+jsonschema==4.25.0
+jsonschema-specifications==2025.4.1
+litellm==1.74.9.post1
+markupsafe==3.0.2
+multidict==6.6.3
+ollama==0.5.1
+openai==1.98.0
+outcome==1.3.0.post0
+packaging==25.0
+pillow==11.3.0
+pluggy==1.6.0
+propcache==0.3.2
+pydantic==2.11.7
+pydantic-core==2.33.2
+pygments==2.19.2
+pysocks==1.7.1
+pytest==8.4.1
+python-dotenv==1.1.1
+python-multipart==0.0.20
+pyyaml==6.0.2
+referencing==0.36.2
+regex==2025.7.34
+requests==2.32.4
+rpds-py==0.26.0
+selenium==4.34.2
+sniffio==1.3.1
+sortedcontainers==2.4.0
+sqlalchemy==2.0.42
+starlette==0.47.2
+tiktoken==0.9.0
+tokenizers==0.21.4
+tqdm==4.67.1
+trio==0.30.0
+trio-websocket==0.12.2
+typing-extensions==4.14.1
+typing-inspection==0.4.1
+urllib3==2.5.0
+uvicorn==0.35.0
+websocket-client==1.8.0
+wsproto==1.2.0
+yarl==1.20.1
+zipp==3.23.0

frontend/.gitignore

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

frontend/.gitkeep

@@ -0,0 +1 @@
+# Frontend directory placeholder

frontend/README.md

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

frontend/eslint.config.js

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

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>QuietRoom</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/react-query": "^5.83.1",
+    "axios": "^1.11.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-hook-form": "^7.61.1",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.7.1",
+    "rehype-highlight": "^7.0.2",
+    "remark-gfm": "^4.0.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tanstack/react-query-devtools": "^5.84.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.11",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.0.4"
+  }
+}

frontend/src/App.tsx

@@ -0,0 +1,39 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { ThemeProvider } from './contexts/ThemeContext';
+import { PreferencesProvider } from './contexts/PreferencesContext';
+import { ErrorBoundary } from './components/common/ErrorBoundary';
+import { DevelopmentBanner } from './components/common/DevelopmentBanner';
+import Layout from './components/layout/Layout';
+import Home from './pages/Home';
+import Journal from './pages/Journal';
+import Timeline from './pages/Timeline';
+import EntryDetail from './pages/EntryDetail';
+import Chat from './pages/Chat';
+import Settings from './pages/Settings';
+
+function App() {
+  return (
+    <ErrorBoundary>
+      <ThemeProvider>
+        <PreferencesProvider>
+          <DevelopmentBanner />
+          <Router>
+            <Routes>
+              <Route path="/" element={<Layout />}>
+                <Route index element={<Home />} />
+                <Route path="journal" element={<Journal />} />
+                <Route path="journal/edit/:id" element={<Journal />} />
+                <Route path="timeline" element={<Timeline />} />
+                <Route path="entry/:id" element={<EntryDetail />} />
+                <Route path="chat" element={<Chat />} />
+                <Route path="settings" element={<Settings />} />
+              </Route>
+            </Routes>
+          </Router>
+        </PreferencesProvider>
+      </ThemeProvider>
+    </ErrorBoundary>
+  );
+}
+
+export default App;

frontend/src/components/chat/MessageBubble.tsx

@@ -0,0 +1,40 @@
+import type { ChatMessage } from '../../types/chat';
+import MarkdownRenderer from '../common/MarkdownRenderer';
+
+interface MessageBubbleProps {
+  message: ChatMessage;
+}
+
+const MessageBubble = ({ message }: MessageBubbleProps) => {
+  const isUser = message.role === 'user';
+
+  return (
+    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-4`}>
+      
+      <div
+        className={`max-w-[70%] rounded-lg px-4 py-3 shadow-sm ${
+          isUser
+            ? 'bg-blue-600 text-white ml-auto'
+            : 'bg-white text-gray-900 border border-gray-200'
+        }`}
+      >
+        <div className="leading-relaxed">
+          {isUser ? (
+            <div className="whitespace-pre-wrap break-words">
+              {message.content}
+            </div>
+          ) : (
+            <MarkdownRenderer 
+              content={message.content}
+              className="prose-invert text-inherit"
+            />
+          )}
+        </div>
+        
+
+      </div>
+    </div>
+  );
+};
+
+export default MessageBubble;

frontend/src/components/chat/TypingIndicator.tsx

@@ -0,0 +1,18 @@
+const TypingIndicator = () => {
+  return (
+    <div className="flex justify-start mb-4">
+      <div className="bg-white rounded-lg px-4 py-3 shadow-sm border border-gray-200">
+        <div className="flex items-center space-x-2">
+          <div className="flex space-x-1">
+            <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+            <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
+            <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+          </div>
+          <span className="text-sm text-gray-500">QuietRoom is writing...</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TypingIndicator;

frontend/src/components/common/DevelopmentBanner.tsx

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/react/24/outline';
+
+export function DevelopmentBanner() {
+  const [isVisible, setIsVisible] = useState(false);
+  const [backendStatus, setBackendStatus] = useState<'checking' | 'online' | 'offline'>('checking');
+
+  useEffect(() => {
+    // Only show in development mode
+    if (import.meta.env.DEV) {
+      checkBackendStatus();
+    }
+  }, []);
+
+  const checkBackendStatus = async () => {
+    try {
+      const response = await fetch('/api/config', { 
+        method: 'GET',
+        signal: AbortSignal.timeout(3000) // 3 second timeout
+      });
+      
+      if (response.ok) {
+        setBackendStatus('online');
+      } else {
+        setBackendStatus('offline');
+        setIsVisible(true);
+      }
+    } catch (error) {
+      setBackendStatus('offline');
+      setIsVisible(true);
+    }
+  };
+
+  if (!import.meta.env.DEV || !isVisible || backendStatus !== 'offline') {
+    return null;
+  }
+
+  return (
+    <div className="bg-yellow-50/20 border-b border-yellow-200">
+      <div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between flex-wrap">
+          <div className="w-0 flex-1 flex items-center">
+            <span className="flex p-2 rounded-lg bg-yellow-400">
+              <ExclamationTriangleIcon className="h-5 w-5 text-yellow-800" />
+            </span>
+            <p className="ml-3 font-medium text-yellow-800 truncate">
+              <span className="md:hidden">Backend offline - using demo mode</span>
+              <span className="hidden md:inline">
+                Backend server is not available. The app is running in demo mode with placeholder data.
+              </span>
+            </p>
+          </div>
+          <div className="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
+            <button
+              type="button"
+              onClick={() => setIsVisible(false)}
+              className="-mr-1 flex p-2 rounded-md hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-600"
+            >
+              <span className="sr-only">Dismiss</span>
+              <XMarkIcon className="h-5 w-5 text-yellow-800" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/common/Disclaimer.tsx

@@ -0,0 +1,12 @@
+const Disclaimer = () => {
+  return (
+    <div className="mt-12 pt-8 border-t border-gray-200">
+      <p className="text-xs text-gray-500 text-center max-w-4xl mx-auto leading-relaxed">
+        Developed exclusively as a proof-of-concept for the "Google - The Gemma 3n Impact Challenge". 
+        It is not intended for use as a medical or therapeutic tool.
+      </p>
+    </div>
+  );
+};
+
+export default Disclaimer;

frontend/src/components/common/ErrorBoundary.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  fallback?: React.ComponentType<{ error: Error; resetError: () => void }>;
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+  }
+
+  resetError = () => {
+    this.setState({ hasError: false, error: undefined });
+  };
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      if (this.props.fallback) {
+        const FallbackComponent = this.props.fallback;
+        return <FallbackComponent error={this.state.error} resetError={this.resetError} />;
+      }
+
+      return <DefaultErrorFallback error={this.state.error} resetError={this.resetError} />;
+    }
+
+    return this.props.children;
+  }
+}
+
+// Default error fallback component
+function DefaultErrorFallback({ error, resetError }: { error: Error; resetError: () => void }) {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="max-w-md w-full bg-white shadow-lg rounded-lg p-6">
+        <div className="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full">
+          <ExclamationTriangleIcon className="w-6 h-6 text-red-600" />
+        </div>
+        
+        <div className="mt-4 text-center">
+          <h3 className="text-lg font-medium text-gray-900">
+            Something went wrong
+          </h3>
+          <p className="mt-2 text-sm text-gray-500">
+            {error.message || 'An unexpected error occurred'}
+          </p>
+        </div>
+        
+        <div className="mt-6">
+          <button
+            onClick={resetError}
+            className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          >
+            Try again
+          </button>
+        </div>
+        
+        {import.meta.env.DEV && (
+          <details className="mt-4">
+            <summary className="text-sm text-gray-500 cursor-pointer">
+              Error details (dev only)
+            </summary>
+            <pre className="mt-2 text-xs text-gray-600 bg-gray-100 p-2 rounded overflow-auto">
+              {error.stack}
+            </pre>
+          </details>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/common/ErrorDisplay.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import { ExclamationTriangleIcon, XCircleIcon } from '@heroicons/react/24/outline';
+
+interface ErrorDisplayProps {
+  error: Error | null;
+  title?: string;
+  onRetry?: () => void;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+export function ErrorDisplay({ 
+  error, 
+  title = 'Error', 
+  onRetry, 
+  onDismiss,
+  className = '' 
+}: ErrorDisplayProps) {
+  if (!error) return null;
+
+  const isNetworkError = error.message.includes('Network error') || error.message.includes('fetch');
+  const isServerError = (error as any).status >= 500;
+
+  return (
+    <div className={`bg-red-50/20 border border-red-200 rounded-md p-4 ${className}`}>
+      <div className="flex">
+        <div className="flex-shrink-0">
+          {isNetworkError ? (
+            <XCircleIcon className="h-5 w-5 text-red-400" />
+          ) : (
+            <ExclamationTriangleIcon className="h-5 w-5 text-red-400" />
+          )}
+        </div>
+        <div className="ml-3 flex-1">
+          <h3 className="text-sm font-medium text-red-800">
+            {title}
+          </h3>
+          <div className="mt-2 text-sm text-red-700">
+            <p>{error.message}</p>
+            {isNetworkError && (
+              <p className="mt-1 text-xs">
+                Please check your internet connection and try again.
+              </p>
+            )}
+            {isServerError && (
+              <p className="mt-1 text-xs">
+                The server is experiencing issues. Please try again later.
+              </p>
+            )}
+          </div>
+          {(onRetry || onDismiss) && (
+            <div className="mt-4 flex space-x-2">
+              {onRetry && (
+                <button
+                  type="button"
+                  onClick={onRetry}
+                  className="bg-red-100 px-3 py-1.5 rounded-md text-sm font-medium text-red-800 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+                >
+                  Try again
+                </button>
+              )}
+              {onDismiss && (
+                <button
+                  type="button"
+                  onClick={onDismiss}
+                  className="bg-transparent px-3 py-1.5 rounded-md text-sm font-medium text-red-600 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+                >
+                  Dismiss
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface InlineErrorProps {
+  error: Error | null;
+  className?: string;
+}
+
+export function InlineError({ error, className = '' }: InlineErrorProps) {
+  if (!error) return null;
+
+  return (
+    <div className={`flex items-center text-sm text-red-600 ${className}`}>
+      <ExclamationTriangleIcon className="h-4 w-4 mr-1 flex-shrink-0" />
+      <span>{error.message}</span>
+    </div>
+  );
+}
+
+interface ErrorToastProps {
+  error: Error | null;
+  isVisible: boolean;
+  onDismiss: () => void;
+}
+
+export function ErrorToast({ error, isVisible, onDismiss }: ErrorToastProps) {
+  React.useEffect(() => {
+    if (isVisible && error) {
+      const timer = setTimeout(() => {
+        onDismiss();
+      }, 5000); // Auto-dismiss after 5 seconds
+
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible, error, onDismiss]);
+
+  if (!isVisible || !error) return null;
+
+  return (
+    <div className="fixed top-4 right-4 z-50 max-w-sm w-full">
+      <div className="bg-red-500 text-white p-4 rounded-lg shadow-lg">
+        <div className="flex items-start">
+          <ExclamationTriangleIcon className="h-5 w-5 mt-0.5 mr-3 flex-shrink-0" />
+          <div className="flex-1">
+            <p className="text-sm font-medium">Error</p>
+            <p className="text-sm opacity-90">{error.message}</p>
+          </div>
+          <button
+            onClick={onDismiss}
+            className="ml-3 flex-shrink-0 text-white hover:text-gray-200"
+          >
+            <XCircleIcon className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface SuccessToastProps {
+  message: string;
+  isVisible: boolean;
+  onDismiss: () => void;
+}
+
+export function SuccessToast({ message, isVisible, onDismiss }: SuccessToastProps) {
+  React.useEffect(() => {
+    if (isVisible) {
+      const timer = setTimeout(() => {
+        onDismiss();
+      }, 3000); // Auto-dismiss after 3 seconds
+
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible, onDismiss]);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed top-4 right-4 z-50 max-w-sm w-full">
+      <div className="bg-green-500 text-white p-4 rounded-lg shadow-lg">
+        <div className="flex items-start">
+          <svg className="h-5 w-5 mt-0.5 mr-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+          <div className="flex-1">
+            <p className="text-sm font-medium">Success</p>
+            <p className="text-sm opacity-90">{message}</p>
+          </div>
+          <button
+            onClick={onDismiss}
+            className="ml-3 flex-shrink-0 text-white hover:text-gray-200"
+          >
+            <XCircleIcon className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/common/LoadingSpinner.tsx

@@ -0,0 +1,72 @@
+
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function LoadingSpinner({ size = 'md', className = '' }: LoadingSpinnerProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+  };
+
+  return (
+    <div className={`animate-spin ${sizeClasses[size]} ${className}`}>
+      <svg
+        className="w-full h-full text-blue-600"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        />
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    </div>
+  );
+}
+
+interface LoadingStateProps {
+  message?: string;
+  className?: string;
+}
+
+export function LoadingState({ message = 'Loading...', className = '' }: LoadingStateProps) {
+  return (
+    <div className={`flex flex-col items-center justify-center p-8 ${className}`}>
+      <LoadingSpinner size="lg" />
+      <p className="mt-4 text-sm text-gray-500">{message}</p>
+    </div>
+  );
+}
+
+interface LoadingOverlayProps {
+  isVisible: boolean;
+  message?: string;
+}
+
+export function LoadingOverlay({ isVisible, message = 'Loading...' }: LoadingOverlayProps) {
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 shadow-xl">
+        <div className="flex items-center space-x-3">
+          <LoadingSpinner />
+          <span className="text-gray-900">{message}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/common/MarkdownRenderer.tsx

@@ -0,0 +1,75 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeHighlight from 'rehype-highlight';
+
+interface MarkdownRendererProps {
+  content: string;
+  className?: string;
+}
+
+const MarkdownRenderer = ({ content, className = '' }: MarkdownRendererProps) => {
+  return (
+    <div className={`prose prose-sm max-w-none prose-gray ${className}`}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeHighlight]}
+        components={{
+          // Customize code blocks
+          code: ({ inline, className, children, ...props }: any) => {
+            const match = /language-(\w+)/.exec(className || '');
+            return !inline && match ? (
+              <pre className="bg-gray-100 rounded-md p-3 overflow-x-auto">
+                <code className={className} {...props}>
+                  {children}
+                </code>
+              </pre>
+            ) : (
+              <code
+                className="bg-gray-100 px-1 py-0.5 rounded text-sm"
+                {...props}
+              >
+                {children}
+              </code>
+            );
+          },
+          // Customize links
+          a: ({ children, href, ...props }: any) => (
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:underline"
+              {...props}
+            >
+              {children}
+            </a>
+          ),
+          // Customize blockquotes
+          blockquote: ({ children, ...props }: any) => (
+            <blockquote
+              className="border-l-4 border-gray-300 pl-4 italic text-gray-700"
+              {...props}
+            >
+              {children}
+            </blockquote>
+          ),
+          // Customize lists
+          ul: ({ children, ...props }: any) => (
+            <ul className="list-disc list-inside space-y-1" {...props}>
+              {children}
+            </ul>
+          ),
+          ol: ({ children, ...props }: any) => (
+            <ol className="list-decimal list-inside space-y-1" {...props}>
+              {children}
+            </ol>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+export default MarkdownRenderer;

frontend/src/components/common/ModelCapabilityError.tsx

@@ -0,0 +1,133 @@
+import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/react/24/outline';
+
+interface ModelCapabilityErrorProps {
+  error: string;
+  feature: 'image' | 'audio' | 'multimodal';
+  currentModel: string;
+  onClose: () => void;
+  onOpenSettings?: () => void;
+}
+
+const ModelCapabilityError = ({ 
+  error, 
+  feature, 
+  currentModel, 
+  onClose, 
+  onOpenSettings 
+}: ModelCapabilityErrorProps) => {
+  const getFeatureName = () => {
+    switch (feature) {
+      case 'image': return 'Image Analysis';
+      case 'audio': return 'Audio Processing';
+      case 'multimodal': return 'Multimodal Processing';
+      default: return 'This Feature';
+    }
+  };
+
+  const getRecommendedModels = () => {
+    switch (feature) {
+      case 'image':
+      case 'audio':
+      case 'multimodal':
+        return [
+          'gemini/gemini-2.5-flash',
+          'gemini/gemini-2.5-flash-lite',
+          'openai/gpt-4o',
+          'openai/gpt-4o-mini'
+        ];
+      default:
+        return [];
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <div className="bg-white rounded-lg max-w-md w-full">
+        <div className="p-6">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
+                <ExclamationTriangleIcon className="w-6 h-6 text-yellow-600" />
+              </div>
+              <div>
+                <h2 className="text-lg font-semibold text-gray-900">
+                  {getFeatureName()} Not Supported
+                </h2>
+              </div>
+            </div>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 transition-colors"
+            >
+              <XMarkIcon className="w-6 h-6" />
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="space-y-4">
+            <div className="bg-yellow-50 rounded-lg p-4">
+              <p className="text-sm text-yellow-800">
+                <strong>Current Model:</strong> {currentModel}
+              </p>
+              <p className="text-sm text-yellow-700 mt-2">
+                This model doesn't support {feature} processing. The feature requires a multimodal-capable model.
+              </p>
+            </div>
+
+            <div>
+              <h3 className="font-medium text-gray-900 mb-2">Recommended Models:</h3>
+              <div className="space-y-1">
+                {getRecommendedModels().map((model, index) => (
+                  <div key={index} className="flex items-center space-x-2 text-sm">
+                    <div className="w-2 h-2 bg-green-400 rounded-full"></div>
+                    <span className="text-gray-700">{model}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="bg-blue-50 rounded-lg p-4">
+              <p className="text-sm text-blue-800">
+                <strong>💡 Tip:</strong> Switch to a multimodal model in Settings to enable {feature.toLowerCase()} analysis.
+              </p>
+            </div>
+
+            {/* Technical Error Details (Collapsible) */}
+            <details className="text-sm">
+              <summary className="cursor-pointer text-gray-600 hover:text-gray-800">
+                Technical Details
+              </summary>
+              <div className="mt-2 p-3 bg-gray-50 rounded text-xs text-gray-600 font-mono">
+                {error}
+              </div>
+            </details>
+          </div>
+
+          {/* Actions */}
+          <div className="flex space-x-3 mt-6">
+            <button
+              onClick={onClose}
+              className="flex-1 px-4 py-2 text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
+            >
+              Close
+            </button>
+            {onOpenSettings && (
+              <button
+                onClick={() => {
+                  onOpenSettings();
+                  onClose();
+                }}
+                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+              >
+                Open Settings
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModelCapabilityError;

frontend/src/components/home/AppOverview.tsx

@@ -0,0 +1,51 @@
+import { ShieldCheckIcon, DevicePhoneMobileIcon, CpuChipIcon } from '@heroicons/react/24/outline';
+
+const AppOverview = () => {
+  return (
+    <div className="bg-white/70/70 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl p-8 smooth-hover">
+      <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-6">
+        Privacy-First Journaling
+      </h2>
+      <div className="space-y-6">
+        <div className="group flex items-start space-x-4 p-4 rounded-xl hover:bg-green-50/50/10 transition-all duration-300">
+          <div className="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-green-400 to-emerald-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+            <ShieldCheckIcon className="h-6 w-6 text-white" />
+          </div>
+          <div className="flex-1">
+            <h3 className="font-semibold text-gray-900 mb-2">Your Data Stays Local</h3>
+            <p className="text-gray-600 leading-relaxed">
+              All journal entries, media files, and AI analysis happen on your device. 
+              No cloud storage, no data mining.
+            </p>
+          </div>
+        </div>
+        
+        <div className="group flex items-start space-x-4 p-4 rounded-xl hover:bg-blue-50/50/10 transition-all duration-300">
+          <div className="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-blue-400 to-cyan-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+            <DevicePhoneMobileIcon className="h-6 w-6 text-white" />
+          </div>
+          <div className="flex-1">
+            <h3 className="font-semibold text-gray-900 mb-2">Multimodal Capture</h3>
+            <p className="text-gray-600 leading-relaxed">
+              Add text, photos, videos, audio recordings, and location data to your entries.
+            </p>
+          </div>
+        </div>
+        
+        <div className="group flex items-start space-x-4 p-4 rounded-xl hover:bg-purple-50/50/10 transition-all duration-300">
+          <div className="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-400 to-pink-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+            <CpuChipIcon className="h-6 w-6 text-white" />
+          </div>
+          <div className="flex-1">
+            <h3 className="font-semibold text-gray-900 mb-2">AI-Powered Insights</h3>
+            <p className="text-gray-600 leading-relaxed">
+              Choose your Gemma3n model for mood analysis and insights.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppOverview;

frontend/src/components/home/InsightsSummary.tsx

@@ -0,0 +1,150 @@
+import { 
+  LightBulbIcon, 
+  HeartIcon, 
+  ArrowTrendingUpIcon,
+  SparklesIcon 
+} from '@heroicons/react/24/outline';
+import { useInsights } from '../../hooks/useAI';
+import { LoadingState } from '../common/LoadingSpinner';
+import { ErrorDisplay } from '../common/ErrorDisplay';
+
+interface Insight {
+  type: 'mood' | 'pattern' | 'growth' | 'suggestion';
+  title: string;
+  description: string;
+}
+
+const InsightsSummary = () => {
+  // Get insights for the last 30 days
+  const thirtyDaysAgo = new Date();
+  thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+  
+  const { data: insightsData, isLoading, error, refetch } = useInsights({
+    date_range: {
+      start: thirtyDaysAgo.toISOString().split('T')[0],
+      end: new Date().toISOString().split('T')[0],
+    },
+  });
+
+  // Transform API data into display format - focus on patterns and themes
+  const insights: Insight[] = insightsData ? [
+    ...(insightsData.emotional_patterns || []).slice(0, 3).map(pattern => ({
+      type: 'mood' as const,
+      title: `${pattern.emotion} emotions`,
+      description: `You've expressed ${pattern.emotion} emotions in ${pattern.percentage.toFixed(1)}% of your recent entries.`,
+    })),
+    ...(insightsData.common_themes || []).slice(0, 3).map(theme => ({
+      type: 'pattern' as const,
+      title: `${theme.theme} theme`,
+      description: `This theme appeared ${theme.frequency} times in your recent entries.`,
+    })),
+  ] : [];
+
+  // Debug logging
+  console.log('InsightsSummary Debug:', {
+    insightsData,
+    insights,
+    isLoading,
+    error: error ? {
+      message: error.message,
+      stack: error.stack,
+      name: error.name
+    } : null,
+    dateRange: {
+      start: thirtyDaysAgo.toISOString().split('T')[0],
+      end: new Date().toISOString().split('T')[0],
+    }
+  });
+
+  const getInsightIcon = (type: Insight['type']) => {
+    switch (type) {
+      case 'mood':
+        return HeartIcon;
+      case 'pattern':
+        return ArrowTrendingUpIcon;
+      case 'growth':
+        return SparklesIcon;
+      default:
+        return LightBulbIcon;
+    }
+  };
+
+
+
+  if (isLoading) {
+    return (
+      <div className="bg-white/70/70 backdrop-blur-sm rounded-2xl shadow-lg p-8">
+        <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-6">
+          Patterns & Themes
+        </h2>
+        <LoadingState message="Generating insights..." />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-white/70/70 backdrop-blur-sm rounded-2xl shadow-lg p-8">
+        <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-6">
+          Patterns & Themes
+        </h2>
+        <ErrorDisplay 
+          error={error} 
+          title="Failed to load insights"
+          onRetry={() => refetch()}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white/70/70 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl p-8 smooth-hover">
+      <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-6">
+        Patterns & Themes
+      </h2>
+      
+      {insights.length === 0 ? (
+        <div className="text-center py-12">
+          <div className="w-16 h-16 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-2xl flex items-center justify-center mx-auto mb-4 animate-float">
+            <LightBulbIcon className="h-8 w-8 text-white" />
+          </div>
+          <p className="text-gray-600 mb-2 text-lg font-medium">
+            No insights yet
+          </p>
+          <p className="text-gray-500 max-w-sm mx-auto leading-relaxed">
+            Create some journal entries to see AI-generated insights about your patterns and growth.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-6">
+          {insights.map((insight, index) => {
+            const IconComponent = getInsightIcon(insight.type);
+            
+            return (
+              <div key={index} className="group flex items-start space-x-4 p-4 rounded-xl hover:bg-gray-50/50/30 transition-all duration-300">
+                <div className={`w-10 h-10 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300 ${
+                  insight.type === 'mood' ? 'bg-gradient-to-r from-pink-400 to-rose-500' :
+                  insight.type === 'pattern' ? 'bg-gradient-to-r from-blue-400 to-indigo-500' :
+                  insight.type === 'growth' ? 'bg-gradient-to-r from-green-400 to-emerald-500' :
+                  'bg-gradient-to-r from-yellow-400 to-orange-500'
+                }`}>
+                  <IconComponent className="h-5 w-5 text-white" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-semibold text-gray-900 mb-2">
+                    {insight.title}
+                  </h3>
+                  <p className="text-gray-600 leading-relaxed">
+                    {insight.description}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InsightsSummary;

frontend/src/components/home/PersonalGrowth.tsx

@@ -0,0 +1,241 @@
+import {
+  SparklesIcon,
+  TrophyIcon,
+  ArrowTrendingUpIcon,
+  CheckCircleIcon,
+  ClockIcon,
+  HeartIcon,
+  LightBulbIcon,
+  UsersIcon,
+  EyeIcon
+} from '@heroicons/react/24/outline';
+import { useInsights } from '../../hooks/useAI';
+import { LoadingState } from '../common/LoadingSpinner';
+import { ErrorDisplay } from '../common/ErrorDisplay';
+import type { ActionableOutcome } from '../../types/api';
+
+const PersonalGrowth = () => {
+  // Get insights for the last 30 days
+  const thirtyDaysAgo = new Date();
+  thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+
+  const { data: insightsData, isLoading, error, refetch } = useInsights({
+    date_range: {
+      start: thirtyDaysAgo.toISOString().split('T')[0],
+      end: new Date().toISOString().split('T')[0],
+    },
+  });
+
+  const getCategoryIcon = (category: string) => {
+    switch (category.toLowerCase()) {
+      case 'emotional':
+        return HeartIcon;
+      case 'behavioral':
+        return ArrowTrendingUpIcon;
+      case 'mindset':
+        return LightBulbIcon;
+      case 'relationship':
+        return UsersIcon;
+      default:
+        return SparklesIcon;
+    }
+  };
+
+  const getCategoryColor = (category: string) => {
+    switch (category.toLowerCase()) {
+      case 'emotional':
+        return 'from-pink-400 to-rose-500';
+      case 'behavioral':
+        return 'from-blue-400 to-indigo-500';
+      case 'mindset':
+        return 'from-purple-400 to-violet-500';
+      case 'relationship':
+        return 'from-green-400 to-emerald-500';
+      default:
+        return 'from-yellow-400 to-orange-500';
+    }
+  };
+
+  const getTimeframeIcon = () => {
+    return ClockIcon;
+  };
+
+  if (isLoading) {
+    return (
+      <div className="bg-white/70/70 backdrop-blur-sm rounded-2xl shadow-lg p-8">
+        <h2 className="text-2xl font-bold bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent mb-6">
+          Personal Growth
+        </h2>
+        <LoadingState message="Analyzing your growth opportunities..." />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-white/70/70 backdrop-blur-sm rounded-2xl shadow-lg p-8">
+        <h2 className="text-2xl font-bold bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent mb-6">
+          Personal Growth
+        </h2>
+        <ErrorDisplay
+          error={error}
+          title="Failed to load growth insights"
+          onRetry={() => refetch()}
+        />
+      </div>
+    );
+  }
+
+  const hasGrowthData = insightsData?.actionable_outcomes?.length ||
+    insightsData?.strengths_identified?.length ||
+    insightsData?.growth_areas?.length;
+
+  // Debug logging
+  console.log('PersonalGrowth Debug:', {
+    insightsData,
+    hasGrowthData,
+    actionableOutcomes: insightsData?.actionable_outcomes,
+    strengths: insightsData?.strengths_identified,
+    growthAreas: insightsData?.growth_areas,
+    isLoading,
+    error: error ? {
+      message: (error as Error).message,
+      stack: (error as Error).stack,
+      name: (error as Error).name
+    } : null,
+    dateRange: {
+      start: thirtyDaysAgo.toISOString().split('T')[0],
+      end: new Date().toISOString().split('T')[0],
+    }
+  });
+
+  return (
+    <div className="bg-white/70/70 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl p-8 smooth-hover">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-2xl font-bold bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
+          Personal Growth
+        </h2>
+        <div className="w-10 h-10 bg-gradient-to-r from-green-400 to-emerald-500 rounded-xl flex items-center justify-center">
+          <TrophyIcon className="h-5 w-5 text-white" />
+        </div>
+      </div>
+
+      {!hasGrowthData ? (
+        <div className="text-center py-12">
+          <div className="w-16 h-16 bg-gradient-to-r from-green-400 to-emerald-500 rounded-2xl flex items-center justify-center mx-auto mb-4 animate-float">
+            <SparklesIcon className="h-8 w-8 text-white" />
+          </div>
+          <p className="text-gray-600 mb-2 text-lg font-medium">
+            Growth insights coming soon
+          </p>
+          <p className="text-gray-500 max-w-sm mx-auto leading-relaxed">
+            Continue journaling to unlock personalized growth recommendations and actionable outcomes.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-8">
+          {/* Actionable Outcomes */}
+          {insightsData?.actionable_outcomes && insightsData.actionable_outcomes.length > 0 && (
+            <div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
+                <CheckCircleIcon className="h-5 w-5 text-green-500 mr-2" />
+                Action Items for Growth
+              </h3>
+              <div className="space-y-4">
+                {insightsData.actionable_outcomes.map((outcome: ActionableOutcome, index: number) => {
+                  const CategoryIcon = getCategoryIcon(outcome.category);
+                  const TimeframeIcon = getTimeframeIcon();
+
+                  return (
+                    <div key={index} className="group p-4 rounded-xl border border-gray-200 hover:border-green-300 hover:bg-green-50/30/10 transition-all duration-300">
+                      <div className="flex items-start space-x-4">
+                        <div className={`w-10 h-10 rounded-lg flex items-center justify-center bg-gradient-to-r ${getCategoryColor(outcome.category)} group-hover:scale-110 transition-transform duration-300`}>
+                          <CategoryIcon className="h-5 w-5 text-white" />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center justify-between mb-2">
+                            <h4 className="font-semibold text-gray-900">
+                              {outcome.title}
+                            </h4>
+                            <div className="flex items-center text-sm text-gray-500">
+                              <TimeframeIcon className="h-4 w-4 mr-1" />
+                              {outcome.timeframe}
+                            </div>
+                          </div>
+                          <p className="text-gray-600 leading-relaxed mb-2">
+                            {outcome.description}
+                          </p>
+                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 capitalize">
+                            {outcome.category}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Strengths Identified */}
+          {insightsData?.strengths_identified && insightsData.strengths_identified.length > 0 && (
+            <div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
+                <TrophyIcon className="h-5 w-5 text-yellow-500 mr-2" />
+                Your Strengths
+              </h3>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {insightsData.strengths_identified.map((strength: string, index: number) => (
+                  <div key={index} className="flex items-center p-3 rounded-lg bg-yellow-50/20 border border-yellow-200">
+                    <div className="w-8 h-8 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg flex items-center justify-center mr-3">
+                      <SparklesIcon className="h-4 w-4 text-white" />
+                    </div>
+                    <span className="text-gray-800 font-medium">
+                      {strength}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Growth Areas */}
+          {insightsData?.growth_areas && insightsData.growth_areas.length > 0 && (
+            <div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
+                <ArrowTrendingUpIcon className="h-5 w-5 text-blue-500 mr-2" />
+                Areas for Development
+              </h3>
+              <div className="space-y-2">
+                {insightsData.growth_areas.map((area: string, index: number) => (
+                  <div key={index} className="flex items-center p-3 rounded-lg bg-blue-50/20 border border-blue-200">
+                    <div className="w-8 h-8 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-lg flex items-center justify-center mr-3">
+                      <EyeIcon className="h-4 w-4 text-white" />
+                    </div>
+                    <span className="text-gray-800">
+                      {area}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Growth Summary */}
+          {insightsData?.growth_summary && (
+            <div className="p-4 rounded-xl bg-gradient-to-r from-green-50 to-emerald-50/20/20 border border-green-200">
+              <h3 className="text-lg font-semibold text-green-800 mb-2">
+                Your Growth Journey
+              </h3>
+              <p className="text-green-700 leading-relaxed">
+                {insightsData.growth_summary}
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PersonalGrowth;

frontend/src/components/home/QuickActions.tsx

@@ -0,0 +1,95 @@
+import { useNavigate } from 'react-router-dom';
+import { 
+  PlusIcon, 
+  ChatBubbleLeftRightIcon, 
+  ClockIcon,
+  Cog6ToothIcon 
+} from '@heroicons/react/24/outline';
+
+const QuickActions = () => {
+  const navigate = useNavigate();
+
+  const actions = [
+    {
+      id: 'new-entry',
+      label: 'New Entry',
+      description: 'Create a new journal entry',
+      icon: PlusIcon,
+      onClick: () => navigate('/journal'),
+      primary: true
+    },
+    {
+      id: 'start-chat',
+      label: 'Start Chat',
+      description: 'Chat with your AI companion',
+      icon: ChatBubbleLeftRightIcon,
+      onClick: () => navigate('/chat'),
+      primary: false
+    },
+    {
+      id: 'view-timeline',
+      label: 'View Timeline',
+      description: 'Browse your past entries',
+      icon: ClockIcon,
+      onClick: () => navigate('/timeline'),
+      primary: false
+    },
+    {
+      id: 'settings',
+      label: 'Settings',
+      description: 'Configure your AI model',
+      icon: Cog6ToothIcon,
+      onClick: () => navigate('/settings'),
+      primary: false
+    }
+  ];
+
+  return (
+    <div className="bg-white/70/70 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl p-8 smooth-hover">
+      <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-6">
+        Quick Actions
+      </h2>
+      <div className="space-y-4">
+        {actions.map((action, index) => (
+          <button
+            key={action.id}
+            onClick={action.onClick}
+            className={`group w-full flex items-center space-x-4 px-6 py-4 rounded-xl text-left transition-all duration-300 transform hover:scale-105 ${
+              action.primary
+                ? 'bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl'
+                : 'bg-gray-50/70 hover:bg-gray-100/70/50/70 text-gray-900 hover:shadow-md'
+            }`}
+            style={{ animationDelay: `${index * 100}ms` }}
+          >
+            <div className={`flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center transition-transform duration-300 group-hover:rotate-6 ${
+              action.primary 
+                ? 'bg-white/20' 
+                : 'bg-gradient-to-r from-blue-400 to-purple-500'
+            }`}>
+              <action.icon className={`h-5 w-5 ${action.primary ? 'text-white' : 'text-white'}`} />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="font-semibold text-lg">{action.label}</div>
+              <div className={`text-sm ${
+                action.primary 
+                  ? 'text-blue-100' 
+                  : 'text-gray-500'
+              }`}>
+                {action.description}
+              </div>
+            </div>
+          </button>
+        ))}
+      </div>
+      
+      <div className="mt-6 p-4 bg-gradient-to-r from-blue-50/50 to-purple-50/50/30/20 rounded-xl border border-blue-100/50/20">
+        <p className="text-sm text-gray-600 flex items-center space-x-2">
+          <span className="text-lg">💡</span>
+          <span>Tip: Use keyboard shortcuts - Press 'N' for new entry or 'C' for chat</span>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default QuickActions;

frontend/src/components/home/Statistics.tsx

@@ -0,0 +1,120 @@
+import { 
+  DocumentTextIcon, 
+  PencilSquareIcon, 
+  ChartBarIcon,
+  CalendarDaysIcon 
+} from '@heroicons/react/24/outline';
+import { useStatistics } from '../../hooks/useJournal';
+import { LoadingState } from '../common/LoadingSpinner';
+import { ErrorDisplay } from '../common/ErrorDisplay';
+
+const Statistics = () => {
+  const { data: stats, isLoading, error, refetch } = useStatistics();
+
+  const statItems = stats ? [
+    {
+      label: 'Entries this year',
+      value: stats.entries_this_year || 0,
+      icon: CalendarDaysIcon,
+      color: 'text-blue-600'
+    },
+    {
+      label: 'Words written',
+      value: (stats.total_words || 0).toLocaleString(),
+      icon: PencilSquareIcon,
+      color: 'text-green-600'
+    },
+    {
+      label: 'Current streak',
+      value: `${stats.current_streak || 0} days`,
+      icon: ChartBarIcon,
+      color: 'text-orange-600'
+    },
+    {
+      label: 'Total entries',
+      value: stats.total_entries || 0,
+      icon: DocumentTextIcon,
+      color: 'text-purple-600'
+    }
+  ] : [];
+
+  if (isLoading) {
+    return (
+      <div className="bg-white/70/70 backdrop-blur-sm rounded-2xl shadow-lg p-8">
+        <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-6">
+          Your Progress
+        </h2>
+        <LoadingState message="Loading statistics..." />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-white/70/70 backdrop-blur-sm rounded-2xl shadow-lg p-8">
+        <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-6">
+          Your Progress
+        </h2>
+        <ErrorDisplay 
+          error={error} 
+          title="Failed to load statistics"
+          onRetry={() => refetch()}
+        />
+      </div>
+    );
+  }
+
+  if (!stats) {
+    return (
+      <div className="bg-white/70/70 backdrop-blur-sm rounded-2xl shadow-lg p-8">
+        <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-6">
+          Your Progress
+        </h2>
+        <div className="text-center py-8">
+          <p className="text-gray-500">
+            No statistics available
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white/70/70 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl p-8 smooth-hover">
+      <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-6">
+        Your Progress
+      </h2>
+      <div className="space-y-6">
+        {statItems.map((item, index) => (
+          <div key={index} className="group flex items-center justify-between p-4 rounded-xl hover:bg-gray-50/50/30 transition-all duration-300">
+            <div className="flex items-center space-x-4">
+              <div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${
+                index === 0 ? 'from-blue-400 to-blue-500' :
+                index === 1 ? 'from-green-400 to-green-500' :
+                index === 2 ? 'from-orange-400 to-orange-500' :
+                'from-purple-400 to-purple-500'
+              } flex items-center justify-center group-hover:scale-110 transition-transform duration-300`}>
+                <item.icon className="h-5 w-5 text-white" />
+              </div>
+              <span className="text-gray-700 font-medium">{item.label}</span>
+            </div>
+            <span className="font-bold text-xl text-gray-900">
+              {item.value}
+            </span>
+          </div>
+        ))}
+      </div>
+      
+      {stats && (stats.total_entries || 0) === 0 && (
+        <div className="mt-6 p-4 bg-gradient-to-r from-blue-50/50 to-purple-50/50/20/20 rounded-xl border border-blue-100/50/20">
+          <p className="text-sm text-blue-700 flex items-center space-x-2">
+            <span className="text-lg">🚀</span>
+            <span>Start your journaling journey by creating your first entry!</span>
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Statistics;

frontend/src/components/home/WelcomeScreen.tsx

@@ -0,0 +1,114 @@
+import { useNavigate } from 'react-router-dom';
+import { 
+  PencilIcon, 
+  ClockIcon,
+  ShieldCheckIcon,
+  CpuChipIcon,
+  MicrophoneIcon
+} from '@heroicons/react/24/outline';
+import Disclaimer from '../common/Disclaimer';
+
+const WelcomeScreen = () => {
+  const navigate = useNavigate();
+
+  const features = [
+    {
+      icon: ShieldCheckIcon,
+      title: 'Privacy First',
+      description: 'All AI processing happens on your device. Your thoughts stay private and never leave your computer.',
+      color: 'from-green-400 to-emerald-500'
+    },
+    {
+      icon: CpuChipIcon,
+      title: 'AI Insights',
+      description: 'Get personalized insights and emotional analysis powered by advanced AI models running locally.',
+      color: 'from-purple-400 to-pink-500'
+    },
+    {
+      icon: MicrophoneIcon,
+      title: 'Multimodal',
+      description: 'Write, speak, or capture photos. Express yourself in the most natural way possible.',
+      color: 'from-blue-400 to-cyan-500'
+    }
+  ];
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      {/* Hero Section */}
+      <div className="text-center mb-16 animate-fade-in">
+        <div className="mb-8">
+          <h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6 animate-slide-up">
+            Welcome to QuietRoom
+          </h1>
+          <p className="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto leading-relaxed animate-slide-up animation-delay-200">
+            Your privacy-first personal journaling companion with on-device AI processing.
+          </p>
+          <p className="text-lg text-gray-500 mt-4 animate-slide-up animation-delay-400">
+            Capture your thoughts, emotions, and memories with complete privacy.
+          </p>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16 animate-slide-up animation-delay-600">
+          <button
+            onClick={() => navigate('/journal')}
+            className="group flex items-center space-x-3 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-4 rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300"
+          >
+            <PencilIcon className="h-6 w-6 group-hover:rotate-12 transition-transform duration-300" />
+            <span>Start Writing</span>
+          </button>
+          
+          <button
+            onClick={() => navigate('/timeline')}
+            className="flex items-center space-x-3 bg-white text-gray-700 px-8 py-4 rounded-full font-semibold text-lg border-2 border-gray-200 hover:border-purple-300 hover:shadow-lg transform hover:scale-105 transition-all duration-300"
+          >
+            <ClockIcon className="h-6 w-6" />
+            <span>View Timeline</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Features Grid */}
+      <div className="grid md:grid-cols-3 gap-8 mb-16">
+        {features.map((feature, index) => (
+          <div
+            key={feature.title}
+            className={`group bg-white/70/70 backdrop-blur-sm rounded-2xl p-8 text-center hover:shadow-xl transform hover:scale-105 transition-all duration-500 animate-slide-up`}
+            style={{ animationDelay: `${800 + index * 200}ms` }}
+          >
+            <div className={`inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-r ${feature.color} mb-6 group-hover:rotate-6 transition-transform duration-300`}>
+              <feature.icon className="h-8 w-8 text-white" />
+            </div>
+            <h3 className="text-xl font-bold text-gray-900 mb-4">
+              {feature.title}
+            </h3>
+            <p className="text-gray-600 leading-relaxed">
+              {feature.description}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      {/* Call to Action */}
+      {/* <div className="bg-gradient-to-r from-blue-50 to-purple-50/50/20 rounded-3xl p-8 md:p-12 text-center animate-slide-up animation-delay-1400">
+        <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+          Ready to start your journey?
+        </h2>
+        <p className="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
+          Join thousands of users who have discovered the power of AI-assisted journaling. Your mental health and personal growth journey starts here.
+        </p>
+        <button
+          onClick={() => navigate('/journal')}
+          className="group inline-flex items-center space-x-3 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-10 py-5 rounded-full font-bold text-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300"
+        >
+          <PencilIcon className="h-7 w-7 group-hover:rotate-12 transition-transform duration-300" />
+          <span>Create Your First Entry</span>
+        </button>
+      </div> */}
+
+      <Disclaimer />
+    </div>
+  );
+};
+
+export default WelcomeScreen;

frontend/src/components/journal/AIAnalysisPanel.tsx

@@ -0,0 +1,215 @@
+import { useState } from 'react';
+import { 
+  SparklesIcon, 
+  LightBulbIcon,
+  ExclamationTriangleIcon,
+  ChatBubbleLeftRightIcon
+} from '@heroicons/react/24/outline';
+
+interface AIAnalysis {
+  mood?: {
+    score: number;
+    primary_emotion: string;
+    themes: string[];
+    summary: string;
+    follow_up_questions?: string[];
+  };
+  suggestions?: string[];
+  loading: boolean;
+}
+
+interface AIAnalysisPanelProps {
+  analysis: AIAnalysis;
+}
+
+const AIAnalysisPanel = ({ analysis }: AIAnalysisPanelProps) => {
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+
+  const getMoodColor = (score: number) => {
+    if (score >= 8) return 'text-green-600';
+    if (score >= 6) return 'text-blue-600';
+    if (score >= 4) return 'text-yellow-600';
+    return 'text-red-600';
+  };
+
+  const getMoodEmoji = (score: number) => {
+    if (score >= 8) return '😊';
+    if (score >= 6) return '🙂';
+    if (score >= 4) return '😐';
+    return '😔';
+  };
+
+  const handleQuestionClick = async (question: string, index: number) => {
+    try {
+      await navigator.clipboard.writeText(question);
+      setCopiedIndex(index);
+      setTimeout(() => setCopiedIndex(null), 2000);
+    } catch (err) {
+      console.error('Failed to copy question:', err);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* AI Analysis Card */}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+        <div className="flex items-center space-x-2 mb-6">
+          <SparklesIcon className="h-5 w-5 text-blue-500" />
+          <h3 className="text-lg font-medium text-gray-900">
+            Insights
+          </h3>
+        </div>
+
+        {analysis.loading ? (
+          <div className="space-y-4">
+            <div className="animate-pulse">
+              <div className="h-3 bg-gray-200 rounded w-3/4 mb-3"></div>
+              <div className="h-3 bg-gray-200 rounded w-1/2 mb-4"></div>
+              <div className="h-3 bg-gray-200 rounded w-full mb-2"></div>
+              <div className="h-3 bg-gray-200 rounded w-4/5"></div>
+            </div>
+          </div>
+        ) : analysis.mood ? (
+          <div className="space-y-5">
+            {/* Mood Score */}
+            <div className="text-center">
+              <div className="text-3xl mb-2">{getMoodEmoji(analysis.mood.score)}</div>
+              <div className={`text-lg font-medium ${getMoodColor(analysis.mood.score)} capitalize`}>
+                {analysis.mood.primary_emotion}
+              </div>
+              <div className="text-sm text-gray-500">
+                {analysis.mood.score}/10
+              </div>
+            </div>
+
+            {/* Themes */}
+            {analysis.mood.themes.length > 0 && (
+              <div>
+                <h4 className="text-sm font-medium text-gray-600 mb-3">
+                  Key themes
+                </h4>
+                <div className="flex flex-wrap gap-2">
+                  {analysis.mood.themes.map((theme, index) => (
+                    <span
+                      key={index}
+                      className="px-3 py-1.5 bg-gray-100 text-gray-700 text-sm rounded-full capitalize"
+                    >
+                      {theme}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Summary */}
+            <div>
+              <h4 className="text-sm font-medium text-gray-600 mb-3">
+                Summary
+              </h4>
+              <p className="text-sm text-gray-700 leading-relaxed">
+                {analysis.mood.summary}
+              </p>
+            </div>
+
+            {/* Follow-up Questions */}
+            {analysis.mood.follow_up_questions && analysis.mood.follow_up_questions.length > 0 && (
+              <div>
+                <h4 className="text-sm font-medium text-gray-600 mb-3 flex items-center space-x-2">
+                  <ChatBubbleLeftRightIcon className="h-4 w-4" />
+                  <span>Questions for deeper reflection</span>
+                </h4>
+                <div className="space-y-3">
+                  {analysis.mood.follow_up_questions.map((question, index) => (
+                    <div
+                      key={index}
+                      className="group p-4 bg-gradient-to-r from-purple-50 to-indigo-50/20/20 rounded-lg border border-purple-200 hover:shadow-sm transition-all duration-200 cursor-pointer"
+                      onClick={() => handleQuestionClick(question, index)}
+                    >
+                      <div className="flex items-start space-x-3">
+                        <div className="flex-shrink-0 w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center text-xs font-medium text-purple-600">
+                          {['🤔', '💭', '🌱'][index] || (index + 1)}
+                        </div>
+                        <div className="flex-1">
+                          <p className="text-sm text-gray-700 leading-relaxed">
+                            {question}
+                          </p>
+                          <div className="mt-2 transition-opacity duration-200">
+                            {copiedIndex === index ? (
+                              <span className="text-xs text-green-600 font-medium">
+                                ✓ Copied! Consider journaling about this
+                              </span>
+                            ) : (
+                              <span className="text-xs text-purple-600 font-medium opacity-0 group-hover:opacity-100">
+                                Click to copy • Consider journaling about this
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <div className="mt-4 p-3 bg-amber-50/20 rounded-lg border border-amber-200">
+                  <div className="flex items-start space-x-2">
+                    <span className="text-amber-600 text-sm">💡</span>
+                    <div className="text-xs text-amber-700">
+                      <strong>Reflection tip:</strong> These questions are designed to help you explore your thoughts and feelings more deeply. Consider writing about one that resonates with you in your next entry.
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="text-center py-8">
+            <SparklesIcon className="h-8 w-8 text-gray-300 mx-auto mb-3" />
+            <p className="text-sm text-gray-400">
+              Keep writing to see insights
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* Suggestions Card */}
+      {analysis.suggestions && analysis.suggestions.length > 0 && (
+        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+          <div className="flex items-center space-x-2 mb-4">
+            <LightBulbIcon className="h-5 w-5 text-amber-500" />
+            <h3 className="text-lg font-medium text-gray-900">
+              Suggestions
+            </h3>
+          </div>
+          <div className="space-y-3">
+            {analysis.suggestions.map((suggestion, index) => (
+              <div
+                key={index}
+                className="p-3 bg-amber-50/20 rounded-lg"
+              >
+                <p className="text-sm text-gray-700">
+                  {suggestion}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Privacy Notice */}
+      <div className="bg-blue-50/20 rounded-lg p-4">
+        <div className="flex items-start space-x-2">
+          <ExclamationTriangleIcon className="h-4 w-4 text-blue-600 mt-0.5 flex-shrink-0" />
+          <div>
+            <h4 className="text-sm font-medium text-blue-800 mb-1">
+              Private & Secure
+            </h4>
+            <p className="text-xs text-blue-700">
+              Your entries stay on your device. AI analysis uses your chosen model.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AIAnalysisPanel;

frontend/src/components/journal/AudioInput.tsx

@@ -0,0 +1,243 @@
+import { useState, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { MicrophoneIcon, StopIcon, PlayIcon, PauseIcon } from '@heroicons/react/24/outline';
+import { useTranscribeAudioFile } from '../../hooks/useAI';
+import ModelCapabilityError from '../common/ModelCapabilityError';
+import { isModelCapabilityError, type ModelCapabilityError as ModelCapabilityErrorType } from '../../types/errors';
+
+interface AudioInputProps {
+  onTranscription: (transcription: string) => void;
+  disabled?: boolean;
+}
+
+const AudioInput = ({ onTranscription, disabled = false }: AudioInputProps) => {
+  const navigate = useNavigate();
+  const [isRecording, setIsRecording] = useState(false);
+  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [recordingTime, setRecordingTime] = useState(0);
+  const [modelError, setModelError] = useState<ModelCapabilityErrorType | null>(null);
+  
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const intervalRef = useRef<number | null>(null);
+  
+  const transcribeAudio = useTranscribeAudioFile();
+
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const mediaRecorder = new MediaRecorder(stream);
+      mediaRecorderRef.current = mediaRecorder;
+
+      const chunks: BlobPart[] = [];
+      mediaRecorder.ondataavailable = (event) => {
+        chunks.push(event.data);
+      };
+
+      mediaRecorder.onstop = () => {
+        const blob = new Blob(chunks, { type: 'audio/wav' });
+        setAudioBlob(blob);
+        stream.getTracks().forEach(track => track.stop());
+      };
+
+      mediaRecorder.start();
+      setIsRecording(true);
+      setRecordingTime(0);
+      
+      // Start timer
+      intervalRef.current = setInterval(() => {
+        setRecordingTime(prev => prev + 1);
+      }, 1000);
+
+    } catch (error) {
+      console.error('Error starting recording:', error);
+      alert('Could not access microphone. Please check permissions.');
+    }
+  };
+
+  const stopRecording = () => {
+    if (mediaRecorderRef.current && isRecording) {
+      mediaRecorderRef.current.stop();
+      setIsRecording(false);
+      
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    }
+  };
+
+  const playAudio = () => {
+    if (audioBlob && audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+        setIsPlaying(false);
+      } else {
+        const audioUrl = URL.createObjectURL(audioBlob);
+        audioRef.current.src = audioUrl;
+        audioRef.current.play();
+        setIsPlaying(true);
+        
+        audioRef.current.onended = () => {
+          setIsPlaying(false);
+          URL.revokeObjectURL(audioUrl);
+        };
+      }
+    }
+  };
+
+  const transcribeRecording = async () => {
+    if (!audioBlob) return;
+
+    try {
+      const audioFile = new File([audioBlob], 'recording.wav', { type: 'audio/wav' });
+      const result = await transcribeAudio.mutateAsync(audioFile);
+      
+      if (result.transcription) {
+        onTranscription(result.transcription);
+        // Clear the recording after successful transcription
+        setAudioBlob(null);
+        setRecordingTime(0);
+      }
+    } catch (error) {
+      console.error('Error transcribing audio:', error);
+      
+      // Check if this is a model capability error
+      if (isModelCapabilityError(error)) {
+        setModelError(error);
+      } else {
+        alert('Failed to transcribe audio. Please try again.');
+      }
+    }
+  };
+
+  const discardRecording = () => {
+    setAudioBlob(null);
+    setRecordingTime(0);
+    setIsPlaying(false);
+  };
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <div className="border border-gray-200 rounded-lg p-4 bg-gray-50">
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-sm font-medium text-gray-700">Voice Recording</h3>
+        {recordingTime > 0 && (
+          <span className="text-sm text-gray-500">{formatTime(recordingTime)}</span>
+        )}
+      </div>
+
+      {!audioBlob ? (
+        <div className="flex items-center space-x-3">
+          <button
+            onClick={isRecording ? stopRecording : startRecording}
+            disabled={disabled}
+            className={`flex items-center space-x-2 px-4 py-2 rounded-md transition-colors ${
+              isRecording
+                ? 'bg-red-600 text-white hover:bg-red-700'
+                : 'bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-400'
+            }`}
+          >
+            {isRecording ? (
+              <>
+                <StopIcon className="w-4 h-4" />
+                <span>Stop Recording</span>
+              </>
+            ) : (
+              <>
+                <MicrophoneIcon className="w-4 h-4" />
+                <span>Start Recording</span>
+              </>
+            )}
+          </button>
+          
+          {isRecording && (
+            <div className="flex items-center space-x-2">
+              <div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
+              <span className="text-sm text-gray-600">Recording...</span>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          <div className="flex items-center space-x-3">
+            <button
+              onClick={playAudio}
+              className="flex items-center space-x-2 px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors"
+            >
+              {isPlaying ? (
+                <>
+                  <PauseIcon className="w-4 h-4" />
+                  <span>Pause</span>
+                </>
+              ) : (
+                <>
+                  <PlayIcon className="w-4 h-4" />
+                  <span>Play</span>
+                </>
+              )}
+            </button>
+            
+            <span className="text-sm text-gray-600">
+              Recording ready ({formatTime(recordingTime)})
+            </span>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <button
+              onClick={transcribeRecording}
+              disabled={transcribeAudio.isPending}
+              className="flex items-center space-x-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-400 transition-colors"
+            >
+              {transcribeAudio.isPending ? (
+                <>
+                  <svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  <span>Transcribing...</span>
+                </>
+              ) : (
+                <span>Add to Entry</span>
+              )}
+            </button>
+            
+            <button
+              onClick={discardRecording}
+              className="px-3 py-2 text-gray-600 hover:text-gray-800 transition-colors"
+            >
+              Discard
+            </button>
+          </div>
+
+          {transcribeAudio.error && (
+            <p className="text-sm text-red-600">
+              Failed to transcribe audio. Please try again.
+            </p>
+          )}
+        </div>
+      )}
+
+      <audio ref={audioRef} className="hidden" />
+
+      {/* Model Capability Error Modal */}
+      {modelError && (
+        <ModelCapabilityError
+          error={modelError.originalError}
+          feature={modelError.feature}
+          currentModel={modelError.currentModel}
+          onClose={() => setModelError(null)}
+          onOpenSettings={() => navigate('/settings')}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AudioInput;

frontend/src/components/journal/CrisisSupport.tsx

@@ -0,0 +1,157 @@
+import { useState } from 'react';
+import { HeartIcon, SunIcon, MoonIcon } from '@heroicons/react/24/outline';
+import type { MotivationalSupportResponse } from '../../types/api';
+
+interface CrisisSupportProps {
+  support: MotivationalSupportResponse['support'];
+  onClose: () => void;
+}
+
+const CrisisSupport = ({ support, onClose }: CrisisSupportProps) => {
+  const [activeTab, setActiveTab] = useState<'motivation' | 'evening' | 'tomorrow'>('motivation');
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <div className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="p-6">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-pink-100 rounded-full flex items-center justify-center">
+                <HeartIcon className="w-6 h-6 text-pink-600" />
+              </div>
+              <div>
+                <h2 className="text-xl font-semibold text-gray-900">
+                  You're Not Alone
+                </h2>
+                <p className="text-gray-600">Here's some gentle support for you</p>
+              </div>
+            </div>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 transition-colors"
+            >
+              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Affirmation */}
+          <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-4 mb-6">
+            <p className="text-lg font-medium text-gray-800 text-center">
+              "{support.affirmation}"
+            </p>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex space-x-1 mb-6 bg-gray-100 rounded-lg p-1">
+            <button
+              onClick={() => setActiveTab('motivation')}
+              className={`flex-1 flex items-center justify-center space-x-2 py-2 px-4 rounded-md transition-colors ${
+                activeTab === 'motivation'
+                  ? 'bg-white text-blue-600 shadow-sm'
+                  : 'text-gray-600 hover:text-gray-800'
+              }`}
+            >
+              <HeartIcon className="w-4 h-4" />
+              <span>Encouragement</span>
+            </button>
+            <button
+              onClick={() => setActiveTab('evening')}
+              className={`flex-1 flex items-center justify-center space-x-2 py-2 px-4 rounded-md transition-colors ${
+                activeTab === 'evening'
+                  ? 'bg-white text-blue-600 shadow-sm'
+                  : 'text-gray-600 hover:text-gray-800'
+              }`}
+            >
+              <MoonIcon className="w-4 h-4" />
+              <span>Tonight</span>
+            </button>
+            <button
+              onClick={() => setActiveTab('tomorrow')}
+              className={`flex-1 flex items-center justify-center space-x-2 py-2 px-4 rounded-md transition-colors ${
+                activeTab === 'tomorrow'
+                  ? 'bg-white text-blue-600 shadow-sm'
+                  : 'text-gray-600 hover:text-gray-800'
+              }`}
+            >
+              <SunIcon className="w-4 h-4" />
+              <span>Tomorrow</span>
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="space-y-4">
+            {activeTab === 'motivation' && (
+              <div>
+                <h3 className="font-semibold text-gray-900 mb-3">Gentle Reminders</h3>
+                <div className="space-y-3">
+                  {support.motivational_phrases.map((phrase, index) => (
+                    <div key={index} className="flex items-start space-x-3">
+                      <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 flex-shrink-0"></div>
+                      <p className="text-gray-700">{phrase}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'evening' && (
+              <div>
+                <h3 className="font-semibold text-gray-900 mb-3">For This Evening</h3>
+                <div className="space-y-3">
+                  {support.evening_suggestions.map((suggestion, index) => (
+                    <div key={index} className="flex items-start space-x-3">
+                      <div className="w-2 h-2 bg-purple-400 rounded-full mt-2 flex-shrink-0"></div>
+                      <p className="text-gray-700">{suggestion}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'tomorrow' && (
+              <div>
+                <h3 className="font-semibold text-gray-900 mb-3">Tomorrow's Fresh Start</h3>
+                <div className="space-y-3">
+                  {support.tomorrow_suggestions.map((suggestion, index) => (
+                    <div key={index} className="flex items-start space-x-3">
+                      <div className="w-2 h-2 bg-green-400 rounded-full mt-2 flex-shrink-0"></div>
+                      <p className="text-gray-700">{suggestion}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Gentle reminder */}
+          <div className="mt-6 p-4 bg-yellow-50 rounded-lg border border-yellow-200">
+            <p className="text-sm text-yellow-800">
+              <strong>Remember:</strong> {support.gentle_reminder}
+            </p>
+          </div>
+
+          {/* Action buttons */}
+          <div className="flex space-x-3 mt-6">
+            <button
+              onClick={onClose}
+              className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors"
+            >
+              Thank you
+            </button>
+            <button
+              onClick={() => window.open('tel:988', '_blank')}
+              className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
+            >
+              Crisis Hotline: 988
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CrisisSupport;

frontend/src/components/journal/EntryDetail.tsx

@@ -0,0 +1,320 @@
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { 
+  CalendarIcon, 
+  MapPinIcon, 
+  TagIcon,
+  PhotoIcon,
+  VideoCameraIcon,
+  MicrophoneIcon,
+  HeartIcon,
+  PencilIcon,
+  TrashIcon,
+  ArrowLeftIcon
+} from '@heroicons/react/24/outline';
+import FormattedTextPreview from './FormattedTextPreview';
+import { useEntry, useDeleteEntry } from '../../hooks/useJournal';
+import { ErrorDisplay } from '../common/ErrorDisplay';
+
+interface JournalEntry {
+  id: string;
+  title?: string;
+  content: string;
+  created_at: string;
+  updated_at?: string;
+  mood?: string;
+  mood_score?: number;
+  location?: {
+    name: string;
+    lat: number;
+    lng: number;
+  };
+  tags: string[];
+  media: Array<{
+    id: string;
+    type: 'image' | 'video' | 'audio';
+    filename: string;
+    url: string;
+    thumbnail_url?: string;
+  }>;
+  ai_summary?: string;
+  word_count: number;
+}
+
+const EntryDetail = () => {
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const [imageLoadErrors, setImageLoadErrors] = useState<Set<string>>(new Set());
+  
+  const { data: entryData, isLoading, error } = useEntry(id || '');
+  const deleteEntryMutation = useDeleteEntry();
+
+  // Transform API data to component format
+  const entry: JournalEntry | null = entryData ? {
+    id: entryData.id,
+    title: entryData.title || '',
+    content: entryData.content,
+    created_at: entryData.created_at,
+    updated_at: entryData.updated_at,
+    mood: entryData.mood,
+    mood_score: entryData.ai_mood_score,
+    location: entryData.location_name ? {
+      name: entryData.location_name,
+      lat: entryData.location_lat || 0,
+      lng: entryData.location_lng || 0
+    } : undefined,
+    tags: entryData.tags?.map(tag => tag.name) || [],
+    media: entryData.media_files?.map(mediaFile => ({
+      id: mediaFile.id,
+      type: mediaFile.file_type,
+      filename: mediaFile.filename,
+      url: mediaFile.url,
+      thumbnail_url: mediaFile.url // Use the same URL for thumbnail for now
+    })) || [],
+    ai_summary: entryData.ai_summary,
+    word_count: entryData.content ? entryData.content.split(' ').length : 0
+  } : null;
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  const getMoodColor = (score?: number) => {
+    if (!score) return 'text-gray-400';
+    if (score >= 8) return 'text-green-500';
+    if (score >= 6) return 'text-blue-500';
+    if (score >= 4) return 'text-yellow-500';
+    return 'text-red-500';
+  };
+
+  const getMoodEmoji = (score?: number) => {
+    if (!score) return '😐';
+    if (score >= 8) return '😊';
+    if (score >= 6) return '🙂';
+    if (score >= 4) return '😐';
+    return '😔';
+  };
+
+  const getMediaIcon = (type: string) => {
+    switch (type) {
+      case 'image': return PhotoIcon;
+      case 'video': return VideoCameraIcon;
+      case 'audio': return MicrophoneIcon;
+      default: return PhotoIcon;
+    }
+  };
+
+  const handleImageError = (mediaId: string) => {
+    setImageLoadErrors(prev => new Set(prev).add(mediaId));
+  };
+
+  const handleEdit = () => {
+    navigate(`/journal/edit/${entry?.id}`);
+  };
+
+  const handleDelete = async () => {
+    if (!entry) return;
+    
+    if (confirm('Are you sure you want to delete this entry?')) {
+      try {
+        await deleteEntryMutation.mutateAsync(entry.id);
+        navigate('/timeline');
+      } catch (error) {
+        console.error('Failed to delete entry:', error);
+      }
+    }
+  };
+
+  const handleBack = () => {
+    navigate('/timeline');
+  };
+
+  if (isLoading) {
+    return (
+      <div className="max-w-4xl mx-auto">
+        <div className="animate-pulse space-y-6">
+          <div className="h-8 bg-gray-200 rounded w-48"></div>
+          <div className="h-32 bg-gray-200 rounded"></div>
+          <div className="h-64 bg-gray-200 rounded"></div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !entry) {
+    return (
+      <div className="max-w-4xl mx-auto">
+        <ErrorDisplay 
+          error={error || new Error('Entry not found')}
+          title="Failed to load entry"
+          onRetry={() => window.location.reload()}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <button
+          onClick={handleBack}
+          className="flex items-center space-x-2 text-gray-600 hover:text-gray-900 transition-colors"
+        >
+          <ArrowLeftIcon className="h-5 w-5" />
+          <span>Back to Timeline</span>
+        </button>
+        
+        <div className="flex items-center space-x-2">
+          <button
+            onClick={handleEdit}
+            className="flex items-center space-x-2 px-3 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
+          >
+            <PencilIcon className="h-4 w-4" />
+            <span>Edit</span>
+          </button>
+          <button
+            onClick={handleDelete}
+            disabled={deleteEntryMutation.isPending}
+            className="flex items-center space-x-2 px-3 py-2 text-red-600 bg-red-50/20 rounded-md hover:bg-red-100/30 transition-colors disabled:opacity-50"
+          >
+            <TrashIcon className="h-4 w-4" />
+            <span>{deleteEntryMutation.isPending ? 'Deleting...' : 'Delete'}</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Entry Content */}
+      <div className="bg-white rounded-lg shadow-md">
+        {/* Entry Header */}
+        <div className="p-6 border-b border-gray-200">
+          {entry.title && (
+            <h1 className="text-2xl font-bold text-gray-900 mb-4">
+              {entry.title}
+            </h1>
+          )}
+          
+          <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
+            <div className="flex items-center space-x-1">
+              <CalendarIcon className="h-4 w-4" />
+              <span>{formatDate(entry.created_at)}</span>
+            </div>
+            
+            {entry.mood_score && (
+              <div className="flex items-center space-x-1">
+                <HeartIcon className={`h-4 w-4 ${getMoodColor(entry.mood_score)}`} />
+                <span>{getMoodEmoji(entry.mood_score)}</span>
+                <span className={getMoodColor(entry.mood_score)}>
+                  {entry.mood || 'Unknown mood'}
+                </span>
+              </div>
+            )}
+            
+            <span>{entry.word_count} words</span>
+            
+            {entry.location && (
+              <div className="flex items-center space-x-1">
+                <MapPinIcon className="h-4 w-4" />
+                <span>{entry.location.name}</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Entry Content */}
+        <div className="p-6">
+          <FormattedTextPreview 
+            content={entry.content}
+            className="text-gray-700 leading-relaxed"
+          />
+          
+          {entry.ai_summary && (
+            <div className="mt-6 p-4 bg-blue-50/20 rounded-lg">
+              <h3 className="text-sm font-medium text-blue-800 mb-2">
+                AI Summary
+              </h3>
+              <p className="text-sm text-blue-700">
+                {entry.ai_summary}
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Media Section */}
+        {entry.media.length > 0 && (
+          <div className="p-6 border-t border-gray-200">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">
+              Media ({entry.media.length})
+            </h3>
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+              {entry.media.map((media) => {
+                const IconComponent = getMediaIcon(media.type);
+                const hasError = imageLoadErrors.has(media.id);
+                
+                return (
+                  <div key={media.id} className="relative group">
+                    {media.type === 'image' && !hasError ? (
+                      <img
+                        src={media.url}
+                        alt={media.filename}
+                        className="w-full h-32 object-cover rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
+                        onError={() => handleImageError(media.id)}
+                        onClick={() => window.open(media.url, '_blank')}
+                      />
+                    ) : (
+                      <div className="w-full h-32 bg-gray-100 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:bg-gray-200 transition-colors">
+                        <IconComponent className="h-8 w-8 text-gray-400 mb-2" />
+                        <span className="text-xs text-gray-500 text-center px-2">
+                          {media.filename}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Tags Section */}
+        {entry.tags.length > 0 && (
+          <div className="p-6 border-t border-gray-200">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">
+              Tags
+            </h3>
+            <div className="flex flex-wrap gap-2">
+              {entry.tags.map((tag, index) => (
+                <span
+                  key={index}
+                  className="inline-flex items-center space-x-1 px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full"
+                >
+                  <TagIcon className="h-3 w-3" />
+                  <span>#{tag}</span>
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Footer with metadata */}
+        {entry.updated_at && entry.updated_at !== entry.created_at && (
+          <div className="p-6 border-t border-gray-200 bg-gray-50/50">
+            <p className="text-xs text-gray-500">
+              Last updated: {formatDate(entry.updated_at)}
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EntryDetail;

frontend/src/components/journal/FormattedTextPreview.tsx

@@ -0,0 +1,64 @@
+interface FormattedTextPreviewProps {
+  content: string;
+  className?: string;
+}
+
+const FormattedTextPreview = ({ content, className = '' }: FormattedTextPreviewProps) => {
+  const formatText = (text: string): string => {
+    // Convert markdown-style formatting to HTML
+    let formatted = text
+      // Bold text: **text** -> <strong>text</strong>
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      // Italic text: *text* -> <em>text</em>
+      .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>')
+      // Bullet points: • text -> <li>text</li>
+      .replace(/^• (.+)$/gm, '<li>$1</li>')
+      // Numbered lists: 1. text -> <li>text</li>
+      .replace(/^\d+\.\s(.+)$/gm, '<li>$1</li>')
+      // Line breaks
+      .replace(/\n/g, '<br>');
+
+    // Wrap consecutive <li> elements in <ul> or <ol>
+    formatted = formatted
+      // Wrap bullet list items
+      .replace(/(<li>.*?<\/li>)(\s*<br>\s*<li>.*?<\/li>)*/g, (match) => {
+        // Check if this is a numbered list (contains digits at start of original lines)
+        const originalLines = match.split('<br>').filter(line => line.includes('<li>'));
+        const isNumbered = originalLines.some(line => {
+          const textContent = line.replace(/<[^>]*>/g, '');
+          return /^\d+\./.test(textContent.trim());
+        });
+        
+        if (isNumbered) {
+          return `<ol>${match.replace(/<br>/g, '')}</ol>`;
+        } else {
+          return `<ul>${match.replace(/<br>/g, '')}</ul>`;
+        }
+      });
+
+    return formatted;
+  };
+
+  if (!content.trim()) {
+    return (
+      <div className={`text-gray-500 italic ${className}`}>
+        No content yet...
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      className={`prose max-w-none ${className}`}
+      dangerouslySetInnerHTML={{ 
+        __html: formatText(content) 
+      }}
+      style={{
+        // Custom styles for the formatted content
+        lineHeight: '1.6',
+      }}
+    />
+  );
+};
+
+export default FormattedTextPreview;