add settings and UI/UX improvements

src/app.py

@@ -167,11 +167,12 @@ def create_app():
         return response
 
     # Register blueprints
-    from .routes import auth, profile, contacts
+    from .routes import auth, profile, contacts, settings
 
     app.register_blueprint(auth.bp)
     app.register_blueprint(profile.bp)
     app.register_blueprint(contacts.contacts_bp)
+    app.register_blueprint(settings.bp)
 
     # Root route - redirect to login
     @app.route("/")

src/routes/contacts.py

@@ -446,6 +446,33 @@ def send_message(session_id: str):
         logger.info(f"[PERF] Message send took {elapsed:.1f}ms (target <150ms, excluding AI generation)")
         logger.info(f"Sent message in contact {session_id} for user {user_id}")
         
+        # Feature: 012-realtime-message-display - Return JSON for AJAX requests
+        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+            result = {
+                'success': True,
+                'user_message': {
+                    'id': response.get('message_id'),
+                    'content': content,
+                    'role': 'user',
+                    'type': 'question',
+                    'timestamp': response.get('timestamp'),
+                    'created_at': response.get('created_at')
+                }
+            }
+            
+            # Include assistant response if available
+            if llm_response and llm_response.get('content'):
+                result['assistant_message'] = {
+                    'id': llm_response.get('message_id'),
+                    'content': llm_response['content'],
+                    'role': 'assistant',
+                    'type': 'response',
+                    'timestamp': llm_response.get('timestamp'),
+                    'created_at': llm_response.get('created_at')
+                }
+            
+            return jsonify(result)
+        
         return redirect(url_for("contacts.view_contact", session_id=session_id))
         
     except ValueError as e:
@@ -534,6 +561,22 @@ def add_fact(session_id: str):
         flash("Fact added successfully!", "success")
         logger.info(f"Contact fact saved successfully: session_id={session_id}, producer={producer_id}")
         
+        # Feature: 012-realtime-message-display - Return JSON for AJAX requests
+        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+            # Find the newly added fact (last memorize message)
+            new_fact = next((m for m in reversed(facts) if m.get('mode') == 'memorize'), None)
+            return jsonify({
+                'success': True,
+                'message': {
+                    'id': new_fact.get('message_id') if new_fact else None,
+                    'content': content,
+                    'role': 'user',
+                    'type': 'fact',
+                    'timestamp': new_fact.get('timestamp') if new_fact else None,
+                    'created_at': new_fact.get('created_at') if new_fact else None
+                }
+            })
+        
         # Re-render with updated facts instead of redirect
         return render_template(
             "contacts/view.html",

src/routes/profile.py

@@ -5,7 +5,7 @@ User Story 1: Profile Management
 """
 
 import logging
-from flask import Blueprint, render_template, request, redirect, url_for, flash, session
+from flask import Blueprint, render_template, request, redirect, url_for, flash, session, jsonify
 
 from ..services.backend_client import backend_client, BackendAPIError
 from ..services.storage_service import (
@@ -95,6 +95,21 @@ def add_fact():
         flash("Fact added successfully.", "success")
         logger.info(f"Profile fact saved successfully for user {user_id}")
         
+        # Feature: 012-realtime-message-display - Return JSON for AJAX requests
+        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+            # Find the newly added fact (last fact in the list)
+            new_fact = facts[-1] if facts else None
+            return jsonify({
+                'success': True,
+                'message': {
+                    'id': new_fact.message_id if new_fact else None,
+                    'content': fact_content,
+                    'role': 'user',
+                    'type': 'fact',
+                    'created_at': new_fact.created_at if new_fact else None
+                }
+            })
+        
         # Re-render with updated facts instead of redirect
         return render_template(
             "profile/view.html",

src/routes/settings.py

@@ -0,0 +1,197 @@
+"""
+Settings management routes.
+Feature: 012-settings-model-templates
+User Story 1: Model Selection for AI Operations
+User Story 2: Response Template Management
+"""
+
+import logging
+from flask import Blueprint, render_template, request, redirect, url_for, flash, session, jsonify
+
+from ..services.backend_client import backend_client, BackendAPIError
+
+logger = logging.getLogger(__name__)
+bp = Blueprint("settings", __name__, url_prefix="/settings")
+
+
+@bp.route("/", methods=["GET"])
+def view_settings():
+    """Display user settings page with model selection and template editor."""
+    # Check authentication
+    if "user_id" not in session:
+        flash("Please log in to view settings.", "warning")
+        return redirect(url_for("auth.login"))
+
+    user_id = session["user_id"]
+
+    try:
+        # Get user settings and active template from backend API
+        settings = backend_client.get_user_settings(user_id)
+        active_template = backend_client.get_active_template(user_id)
+        template_versions = backend_client.list_templates(user_id)
+
+        return render_template(
+            "settings/view.html",
+            settings=settings,
+            active_template=active_template,
+            template_versions=template_versions,
+        )
+
+    except BackendAPIError as e:
+        logger.error(f"Failed to load settings for user {user_id}: {str(e)}")
+        flash(f"Error loading settings: {str(e)}", "error")
+        return render_template(
+            "settings/view.html",
+            settings=None,
+            active_template=None,
+            template_versions=[],
+        )
+
+
+@bp.route("/", methods=["POST"])
+def update_settings():
+    """Update user settings (model selection)."""
+    # Check authentication
+    if "user_id" not in session:
+        return {"error": "Unauthorized"}, 401
+
+    user_id = session["user_id"]
+    reply_model = request.form.get("reply_generation_model", "").strip()
+
+    # Validate input
+    if not reply_model:
+        flash("Model selection is required.", "error")
+        return redirect(url_for("settings.view_settings"))
+
+    try:
+        # Update settings via backend API
+        # Set both fact_processing_model and reply_generation_model to the same value
+        updated_settings = backend_client.update_user_settings(
+            user_id=user_id,
+            fact_processing_model=reply_model,
+            reply_generation_model=reply_model,
+        )
+
+        logger.info(
+            f"Settings updated successfully: user_id={user_id}, "
+            f"model={reply_model}"
+        )
+        flash("Settings updated successfully.", "success")
+
+        # Return JSON for AJAX requests
+        if request.headers.get("X-Requested-With") == "XMLHttpRequest":
+            return jsonify({
+                "success": True,
+                "settings": updated_settings,
+            })
+
+        return redirect(url_for("settings.view_settings"))
+
+    except BackendAPIError as e:
+        logger.error(
+            f"Failed to update settings for user {user_id}: {str(e)}"
+        )
+        flash(f"Error updating settings: {str(e)}", "error")
+
+        # Return JSON error for AJAX requests
+        if request.headers.get("X-Requested-With") == "XMLHttpRequest":
+            return jsonify({
+                "success": False,
+                "error": str(e),
+            }), 400
+
+        return redirect(url_for("settings.view_settings"))
+
+
+@bp.route("/templates", methods=["POST"])
+def create_template():
+    """Create a new template version."""
+    # Check authentication
+    if "user_id" not in session:
+        return {"error": "Unauthorized"}, 401
+
+    user_id = session["user_id"]
+    template_content = request.form.get("template_content", "").strip()
+
+    # Validate input
+    if not template_content:
+        flash("Template content is required.", "error")
+        return redirect(url_for("settings.view_settings"))
+
+    if len(template_content) > 10000:
+        flash("Template content exceeds maximum length of 10000 characters.", "error")
+        return redirect(url_for("settings.view_settings"))
+
+    try:
+        # Create new template version via backend API
+        new_template = backend_client.create_template(
+            user_id=user_id, template_content=template_content
+        )
+
+        logger.info(
+            f"Template created successfully: user_id={user_id}, "
+            f"version_id={new_template.get('version_id')}"
+        )
+        flash("Template saved successfully.", "success")
+
+        # Return JSON for AJAX requests
+        if request.headers.get("X-Requested-With") == "XMLHttpRequest":
+            return jsonify({"success": True, "template": new_template})
+
+        return redirect(url_for("settings.view_settings"))
+
+    except BackendAPIError as e:
+        logger.error(f"Failed to create template for user {user_id}: {str(e)}")
+        
+        # Handle duplicate template error
+        if "duplicate" in str(e).lower() or "identical" in str(e).lower():
+            flash("Template with identical content already exists.", "warning")
+        else:
+            flash(f"Error creating template: {str(e)}", "error")
+
+        # Return JSON error for AJAX requests
+        if request.headers.get("X-Requested-With") == "XMLHttpRequest":
+            return jsonify({"success": False, "error": str(e)}), 400
+
+        return redirect(url_for("settings.view_settings"))
+
+
+@bp.route("/templates/<version_id>/activate", methods=["POST"])
+def activate_template(version_id):
+    """Activate a specific template version."""
+    # Check authentication
+    if "user_id" not in session:
+        return {"error": "Unauthorized"}, 401
+
+    user_id = session["user_id"]
+
+    try:
+        # Activate template via backend API
+        result = backend_client.activate_template(
+            user_id=user_id, version_id=version_id
+        )
+
+        logger.info(
+            f"Template activated successfully: user_id={user_id}, "
+            f"version_id={version_id}"
+        )
+        flash("Template activated successfully.", "success")
+
+        # Return JSON for AJAX requests
+        if request.headers.get("X-Requested-With") == "XMLHttpRequest":
+            return jsonify({"success": True, "result": result})
+
+        return redirect(url_for("settings.view_settings"))
+
+    except BackendAPIError as e:
+        logger.error(
+            f"Failed to activate template for user {user_id}, "
+            f"version {version_id}: {str(e)}"
+        )
+        flash(f"Error activating template: {str(e)}", "error")
+
+        # Return JSON error for AJAX requests
+        if request.headers.get("X-Requested-With") == "XMLHttpRequest":
+            return jsonify({"success": False, "error": str(e)}), 400
+
+        return redirect(url_for("settings.view_settings"))

src/services/backend_client.py

@@ -400,6 +400,294 @@ class BackendAPIClient:
 
         return messages
 
+    def get_user_settings(self, user_id: str) -> Dict[str, Any]:
+        """
+        Get user settings (AI model preferences).
+
+        Args:
+            user_id: User ID (required for API authentication)
+
+        Returns:
+            Settings dict with fact_processing_model, reply_generation_model, valid_models, updated_at
+
+        Raises:
+            BackendAPIError: If API request fails
+        """
+        url = f"{self.base_url}/api/settings"
+
+        # Create span for backend call
+        tracer = trace.get_tracer(__name__)
+        with tracer.start_as_current_span("backend.get_user_settings") as span:
+            span.set_attribute("http.method", "GET")
+            span.set_attribute("http.url", url)
+            span.set_attribute("user_id", user_id)
+
+            start_time = time.time()
+            try:
+                response = requests.get(
+                    url, headers=self._get_headers(user_id), timeout=self.timeout
+                )
+                response.raise_for_status()
+
+                span.set_attribute("http.status_code", response.status_code)
+                return response.json()
+
+            except requests.exceptions.Timeout:
+                span.set_status(Status(StatusCode.ERROR, "timeout"))
+                span.set_attribute("timeout", self.timeout)
+                raise BackendAPIError(f"Request timed out after {self.timeout}s")
+            except requests.exceptions.RequestException as e:
+                span.set_status(Status(StatusCode.ERROR, str(e)))
+                raise BackendAPIError(f"Failed to fetch user settings: {str(e)}")
+            finally:
+                self._track_latency(start_time)
+
+    def update_user_settings(
+        self, user_id: str, fact_processing_model: str, reply_generation_model: str
+    ) -> Dict[str, Any]:
+        """
+        Update user settings (AI model preferences).
+
+        Args:
+            user_id: User ID (required for API authentication)
+            fact_processing_model: Model to use for fact processing/memorization
+            reply_generation_model: Model to use for generating chat responses
+
+        Returns:
+            Updated settings dict
+
+        Raises:
+            BackendAPIError: If API request fails or validation fails
+        """
+        url = f"{self.base_url}/api/settings"
+
+        payload = {
+            "fact_processing_model": fact_processing_model,
+            "reply_generation_model": reply_generation_model,
+        }
+
+        # Create span for backend call
+        tracer = trace.get_tracer(__name__)
+        with tracer.start_as_current_span("backend.update_user_settings") as span:
+            span.set_attribute("http.method", "PUT")
+            span.set_attribute("http.url", url)
+            span.set_attribute("user_id", user_id)
+            span.set_attribute("fact_model", fact_processing_model)
+            span.set_attribute("reply_model", reply_generation_model)
+
+            start_time = time.time()
+            try:
+                response = requests.put(
+                    url,
+                    json=payload,
+                    headers=self._get_headers(user_id),
+                    timeout=self.timeout,
+                )
+                response.raise_for_status()
+
+                span.set_attribute("http.status_code", response.status_code)
+                return response.json()
+
+            except requests.exceptions.Timeout:
+                span.set_status(Status(StatusCode.ERROR, "timeout"))
+                span.set_attribute("timeout", self.timeout)
+                raise BackendAPIError(f"Request timed out after {self.timeout}s")
+            except requests.exceptions.HTTPError as e:
+                span.set_status(Status(StatusCode.ERROR, str(e)))
+                # Extract error message from response if available
+                try:
+                    error_data = e.response.json()
+                    error_msg = error_data.get("error", str(e))
+                except Exception:
+                    error_msg = str(e)
+                raise BackendAPIError(f"Failed to update settings: {error_msg}")
+            except requests.exceptions.RequestException as e:
+                span.set_status(Status(StatusCode.ERROR, str(e)))
+                raise BackendAPIError(f"Failed to update settings: {str(e)}")
+            finally:
+                self._track_latency(start_time)
+
+    def get_active_template(self, user_id: str) -> Dict[str, Any]:
+        """
+        Get user's active response template.
+
+        Args:
+            user_id: User ID (required for API authentication)
+
+        Returns:
+            Template dict with version_id, template_content, is_active, created_at
+
+        Raises:
+            BackendAPIError: If API request fails
+        """
+        url = f"{self.base_url}/api/templates/active"
+
+        # Create span for backend call
+        tracer = trace.get_tracer(__name__)
+        with tracer.start_as_current_span("backend.get_active_template") as span:
+            span.set_attribute("http.method", "GET")
+            span.set_attribute("http.url", url)
+            span.set_attribute("user_id", user_id)
+
+            start_time = time.time()
+            try:
+                response = requests.get(
+                    url, headers=self._get_headers(user_id), timeout=self.timeout
+                )
+                response.raise_for_status()
+                return response.json()
+            except requests.exceptions.HTTPError as e:
+                span.set_status(Status(StatusCode.ERROR, str(e)))
+                try:
+                    error_data = e.response.json()
+                    error_msg = error_data.get("error", str(e))
+                except Exception:
+                    error_msg = str(e)
+                raise BackendAPIError(f"Failed to fetch active template: {error_msg}")
+            except requests.exceptions.RequestException as e:
+                span.set_status(Status(StatusCode.ERROR, str(e)))
+                raise BackendAPIError(f"Failed to fetch active template: {str(e)}")
+            finally:
+                self._track_latency(start_time)
+
+    def list_templates(self, user_id: str) -> List[Dict[str, Any]]:
+        """
+        List all template versions for a user.
+
+        Args:
+            user_id: User ID (required for API authentication)
+
+        Returns:
+            List of template dicts with version_id, template_content, is_active, created_at
+
+        Raises:
+            BackendAPIError: If API request fails
+        """
+        url = f"{self.base_url}/api/templates"
+
+        # Create span for backend call
+        tracer = trace.get_tracer(__name__)
+        with tracer.start_as_current_span("backend.list_templates") as span:
+            span.set_attribute("http.method", "GET")
+            span.set_attribute("http.url", url)
+            span.set_attribute("user_id", user_id)
+
+            start_time = time.time()
+            try:
+                response = requests.get(
+                    url, headers=self._get_headers(user_id), timeout=self.timeout
+                )
+                response.raise_for_status()
+                data = response.json()
+                return data.get("templates", [])
+            except requests.exceptions.HTTPError as e:
+                span.set_status(Status(StatusCode.ERROR, str(e)))
+                try:
+                    error_data = e.response.json()
+                    error_msg = error_data.get("error", str(e))
+                except Exception:
+                    error_msg = str(e)
+                raise BackendAPIError(f"Failed to list templates: {error_msg}")
+            except requests.exceptions.RequestException as e:
+                span.set_status(Status(StatusCode.ERROR, str(e)))
+                raise BackendAPIError(f"Failed to list templates: {str(e)}")
+            finally:
+                self._track_latency(start_time)
+
+    def create_template(self, user_id: str, template_content: str) -> Dict[str, Any]:
+        """
+        Create a new template version.
+
+        Args:
+            user_id: User ID (required for API authentication)
+            template_content: Template content (max 10000 characters)
+
+        Returns:
+            Created template dict with version_id, template_content, is_active, created_at
+
+        Raises:
+            BackendAPIError: If API request fails
+        """
+        url = f"{self.base_url}/api/templates"
+        payload = {"template_content": template_content}
+
+        # Create span for backend call
+        tracer = trace.get_tracer(__name__)
+        with tracer.start_as_current_span("backend.create_template") as span:
+            span.set_attribute("http.method", "POST")
+            span.set_attribute("http.url", url)
+            span.set_attribute("user_id", user_id)
+            span.set_attribute("content_length", len(template_content))
+
+            start_time = time.time()
+            try:
+                response = requests.post(
+                    url,
+                    headers=self._get_headers(user_id),
+                    json=payload,
+                    timeout=self.timeout,
+                )
+                response.raise_for_status()
+                return response.json()
+            except requests.exceptions.HTTPError as e:
+                span.set_status(Status(StatusCode.ERROR, str(e)))
+                try:
+                    error_data = e.response.json()
+                    error_msg = error_data.get("error", str(e))
+                except Exception:
+                    error_msg = str(e)
+                raise BackendAPIError(f"Failed to create template: {error_msg}")
+            except requests.exceptions.RequestException as e:
+                span.set_status(Status(StatusCode.ERROR, str(e)))
+                raise BackendAPIError(f"Failed to create template: {str(e)}")
+            finally:
+                self._track_latency(start_time)
+
+    def activate_template(self, user_id: str, version_id: str) -> Dict[str, Any]:
+        """
+        Activate a specific template version.
+
+        Args:
+            user_id: User ID (required for API authentication)
+            version_id: Template version ID to activate
+
+        Returns:
+            Success response dict
+
+        Raises:
+            BackendAPIError: If API request fails
+        """
+        url = f"{self.base_url}/api/templates/{version_id}/activate"
+
+        # Create span for backend call
+        tracer = trace.get_tracer(__name__)
+        with tracer.start_as_current_span("backend.activate_template") as span:
+            span.set_attribute("http.method", "PUT")
+            span.set_attribute("http.url", url)
+            span.set_attribute("user_id", user_id)
+            span.set_attribute("version_id", version_id)
+
+            start_time = time.time()
+            try:
+                response = requests.put(
+                    url, headers=self._get_headers(user_id), timeout=self.timeout
+                )
+                response.raise_for_status()
+                return response.json()
+            except requests.exceptions.HTTPError as e:
+                span.set_status(Status(StatusCode.ERROR, str(e)))
+                try:
+                    error_data = e.response.json()
+                    error_msg = error_data.get("error", str(e))
+                except Exception:
+                    error_msg = str(e)
+                raise BackendAPIError(f"Failed to activate template: {error_msg}")
+            except requests.exceptions.RequestException as e:
+                span.set_status(Status(StatusCode.ERROR, str(e)))
+                raise BackendAPIError(f"Failed to activate template: {str(e)}")
+            finally:
+                self._track_latency(start_time)
+
 
 # Global client instance
 backend_client = BackendAPIClient()

src/static/css/custom.css

@@ -208,3 +208,68 @@ select:focus {
         display: none;
     }
 }
+
+/* Sync Status Indicators - Feature: 012-realtime-message-display */
+/* T016-T018: Visual feedback for optimistic UI updates */
+
+.sync-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    margin-left: 0.5rem;
+    min-width: 1.25rem;
+}
+
+/* T016: Pending state - message awaiting backend confirmation */
+.sync-indicator.pending {
+    opacity: 0.7;
+    color: var(--info-color);
+}
+
+.message-pending {
+    opacity: 0.7;
+    transition: opacity 0.3s ease;
+}
+
+/* T017: Confirmed state - message successfully synced */
+.sync-indicator.confirmed {
+    opacity: 1.0;
+    color: var(--success-color);
+}
+
+/* T018: Failed state - sync error, needs retry */
+.sync-indicator.failed {
+    color: var(--danger-color);
+    border: 1px solid var(--danger-color);
+    border-radius: 0.25rem;
+    padding: 0.125rem 0.375rem;
+    cursor: pointer;
+    background-color: rgba(220, 53, 69, 0.1);
+    font-size: 0.75rem;
+    transition: all 0.2s ease;
+}
+
+.sync-indicator.failed:hover {
+    background-color: rgba(220, 53, 69, 0.2);
+    transform: scale(1.05);
+}
+
+.message-failed {
+    border-left: 3px solid var(--danger-color) !important;
+    background-color: rgba(220, 53, 69, 0.05);
+}
+
+/* Retry button styling */
+.retry-btn {
+    border: none;
+    background: none;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+}
+
+.retry-btn:hover {
+    text-decoration: underline;
+}

src/static/js/message-cache.js

@@ -0,0 +1,561 @@
+/**
+ * Message Cache Module for Realtime Message Display Synchronization
+ * Feature: 012-realtime-message-display
+ * 
+ * Implements optimistic UI updates for instant message display with async backend sync.
+ * Uses sessionStorage for persistence across page reloads.
+ * 
+ * Performance targets:
+ * - <50ms optimistic message display
+ * - <2s cache refresh
+ * - <10ms sessionStorage access
+ */
+
+class MessageCache {
+    constructor() {
+        this.CACHE_KEY = 'prepmate_message_cache';
+        this.cache = null;
+        this.sessionId = null;
+        this.debugMode = localStorage.getItem('DEBUG') === 'true';
+    }
+
+    /**
+     * T008: Initialize cache for a session
+     * Loads from sessionStorage or creates empty cache
+     * @param {string} sessionId - Current session UUID
+     */
+    init(sessionId) {
+        this.sessionId = sessionId;
+        this.cache = this.loadCacheFromBrowser();
+        
+        // If no cache exists or session changed, create new cache
+        if (!this.cache || this.cache.sessionId !== sessionId) {
+            this.cache = {
+                sessionId: sessionId,
+                lastFetchTimestamp: Date.now(),
+                confirmedMessages: [],
+                pendingMessages: []
+            };
+            this.saveCacheToBrowser();
+        }
+        
+        this.logMetric('cache_init', 1, { session_id: sessionId });
+    }
+
+    /**
+     * T007: Load cache from sessionStorage
+     * @returns {Object|null} Parsed cache object or null if not found
+     */
+    loadCacheFromBrowser() {
+        try {
+            const startTime = performance.now();
+            const cached = sessionStorage.getItem(this.CACHE_KEY);
+            const duration = performance.now() - startTime;
+            
+            this.logMetric('cache_load_duration_ms', duration);
+            
+            return cached ? JSON.parse(cached) : null;
+        } catch (e) {
+            console.error('Failed to load cache:', e);
+            return null;
+        }
+    }
+
+    /**
+     * T007: Save cache to sessionStorage
+     * T062: Monitor cache size and warn if approaching quota
+     */
+    saveCacheToBrowser() {
+        try {
+            const startTime = performance.now();
+            const cacheJSON = JSON.stringify(this.cache);
+            const sizeKB = (cacheJSON.length / 1024).toFixed(2);
+            
+            // T062: Warn if approaching 5MB limit (sessionStorage typically ~5-10MB)
+            if (cacheJSON.length > 4 * 1024 * 1024) { // 4MB warning threshold
+                console.warn(`Cache size approaching limit: ${sizeKB}KB / ~5120KB`);
+                this.logMetric('cache_size_warning', 1, { size_kb: sizeKB });
+            }
+            
+            sessionStorage.setItem(this.CACHE_KEY, cacheJSON);
+            const duration = performance.now() - startTime;
+            
+            this.logMetric('cache_save_duration_ms', duration, { size_kb: sizeKB });
+        } catch (e) {
+            console.error('Failed to save cache:', e);
+            // Check if storage is full
+            if (e.name === 'QuotaExceededError') {
+                console.warn('sessionStorage full, clearing old messages');
+                // Keep only last 25 confirmed messages
+                this.cache.confirmedMessages = this.cache.confirmedMessages.slice(-25);
+                try {
+                    sessionStorage.setItem(this.CACHE_KEY, JSON.stringify(this.cache));
+                } catch (e2) {
+                    console.error('Failed to save cache after cleanup:', e2);
+                }
+            }
+        }
+    }
+
+    /**
+     * T009: Structured console logging for metrics
+     * @param {string} metric - Metric name
+     * @param {number} value - Metric value
+     * @param {Object} metadata - Additional metadata
+     */
+    logMetric(metric, value, metadata = {}) {
+        if (this.debugMode) {
+            console.log(JSON.stringify({
+                timestamp: Date.now(),
+                metric: metric,
+                value: value,
+                session_id: this.sessionId,
+                ...metadata
+            }));
+        }
+    }
+
+    /**
+     * T010: Emit custom DOM event for cache changes
+     * @param {string} eventName - Event name (cache:message-added, etc.)
+     * @param {Object} detail - Event detail data
+     */
+    emitCacheEvent(eventName, detail) {
+        const event = new CustomEvent(eventName, { 
+            detail: detail,
+            bubbles: true
+        });
+        document.dispatchEvent(event);
+    }
+
+    /**
+     * T011: Get current cache
+     * @returns {Object} Current cache object
+     */
+    getCache() {
+        return this.cache;
+    }
+
+    /**
+     * T011: Update cache and persist
+     * @param {Object} updates - Partial updates to apply to cache
+     */
+    updateCache(updates) {
+        this.cache = { ...this.cache, ...updates };
+        this.saveCacheToBrowser();
+    }
+
+    /**
+     * T011: Clear cache (on logout or session switch)
+     */
+    clearCache() {
+        try {
+            sessionStorage.removeItem(this.CACHE_KEY);
+            this.cache = null;
+            this.logMetric('cache_clear', 1);
+        } catch (e) {
+            console.error('Failed to clear cache:', e);
+        }
+    }
+
+    /**
+     * T012: Add optimistic message to cache
+     * T063: Prevent duplicates on rapid submission
+     * Displays message immediately and initiates async backend sync
+     * @param {string} content - Message content (markdown)
+     * @param {string} role - "user" or "assistant"
+     * @param {string} type - "fact", "question", or "response"
+     * @returns {Promise<Object>} Result with tempId and success status
+     */
+    async addOptimisticMessage(content, role, type) {
+        const startTime = performance.now();
+        
+        // T063: Check for duplicate pending messages (same content, syncing/pending)
+        const duplicate = this.cache.pendingMessages.find(m => 
+            m.content.trim() === content.trim() && 
+            (m.syncStatus === 'pending' || m.syncStatus === 'syncing')
+        );
+        
+        if (duplicate) {
+            console.warn('Duplicate message detected, skipping:', content.substring(0, 50));
+            return { success: false, error: 'Duplicate message in flight' };
+        }
+        
+        // Generate unique temp ID
+        const tempId = crypto.randomUUID();
+        
+        // Create pending message
+        const pendingMessage = {
+            tempId: tempId,
+            content: content,
+            role: role,
+            type: type,
+            clientTimestamp: Date.now(),
+            syncStatus: 'pending',
+            retryCount: 0,
+            error: null
+        };
+        
+        // Add to cache immediately
+        this.cache.pendingMessages.push(pendingMessage);
+        this.saveCacheToBrowser();
+        
+        const displayDuration = performance.now() - startTime;
+        this.logMetric('optimistic_display_duration_ms', displayDuration, { type: type });
+        
+        // Emit event for UI update
+        this.emitCacheEvent('cache:message-added', pendingMessage);
+        
+        // Initiate async backend POST (T013)
+        this.syncMessageToBackend(tempId, content, role, type);
+        
+        return { tempId: tempId, success: true };
+    }
+
+    /**
+     * T013: Async backend POST for message sync
+     * Uses existing Flask form routes for compatibility
+     * @param {string} tempId - Temporary message ID
+     * @param {string} content - Message content
+     * @param {string} role - Message role
+     * @param {string} type - Message type
+     */
+    async syncMessageToBackend(tempId, content, role, type) {
+        try {
+            // Update sync status to 'syncing'
+            const pendingIndex = this.cache.pendingMessages.findIndex(m => m.tempId === tempId);
+            if (pendingIndex >= 0) {
+                this.cache.pendingMessages[pendingIndex].syncStatus = 'syncing';
+                this.saveCacheToBrowser();
+            }
+            
+            // Determine route based on type and context
+            let route;
+            if (window.location.pathname.includes('/contacts/')) {
+                // Contact session routes
+                if (type === 'fact') {
+                    route = `/contacts/${this.sessionId}/facts`;
+                } else {
+                    route = `/contacts/${this.sessionId}/messages`;
+                }
+            } else {
+                // Profile session route
+                route = '/profile/facts/add';
+            }
+            
+            // POST to backend using form data (matching existing Flask routes)
+            const formData = new FormData();
+            formData.append('content', content);
+            
+            const response = await fetch(route, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'  // Indicate AJAX request
+                }
+            });
+            
+            if (!response.ok) {
+                const errorText = await response.text();
+                throw new Error(`Backend sync failed: ${response.status} ${errorText}`);
+            }
+            
+            // Parse JSON response from backend
+            const result = await response.json();
+            
+            // Confirm the user message
+            const confirmedMessage = {
+                id: result.message?.id || result.user_message?.id || crypto.randomUUID(),
+                content: content,
+                role: role,
+                type: type,
+                timestamp: result.message?.timestamp || result.user_message?.timestamp || new Date().toISOString(),
+                created_at: result.message?.created_at || result.user_message?.created_at || new Date().toISOString()
+            };
+            
+            // Success: confirm the message (T014)
+            this.confirmOptimisticMessage(tempId, confirmedMessage);
+            
+            // T038-T039: If there's an assistant response, add it immediately
+            if (result.assistant_message) {
+                this.addAssistantResponse(result.assistant_message);
+            }
+            
+        } catch (error) {
+            console.error('Backend sync error:', error);
+            // Failure: mark as failed (T015)
+            this.markOptimisticMessageFailed(tempId, error.message);
+        }
+    }
+
+    /**
+     * T038-T039: Add assistant response immediately (already synced from backend)
+     * @param {Object} assistantMessage - Assistant message data from backend
+     */
+    addAssistantResponse(assistantMessage) {
+        const message = {
+            id: assistantMessage.id || assistantMessage.message_id,
+            content: assistantMessage.content,
+            role: 'assistant',
+            type: assistantMessage.type || 'response',
+            timestamp: new Date(assistantMessage.timestamp || assistantMessage.created_at).getTime(),
+            created_at: assistantMessage.created_at
+        };
+        
+        // Add directly to confirmed (already synced)
+        this.cache.confirmedMessages.push(message);
+        this.saveCacheToBrowser();
+        
+        this.logMetric('assistant_response_added', 1);
+        
+        // T041: Emit event for UI update
+        this.emitCacheEvent('cache:message-added', message);
+    }
+
+    /**
+     * T014: Confirm optimistic message after successful backend sync
+     * @param {string} tempId - Temporary message ID
+     * @param {Object} confirmedMessage - Backend response with id, timestamp, etc.
+     */
+    confirmOptimisticMessage(tempId, confirmedMessage) {
+        // Find and remove from pending
+        const pendingIndex = this.cache.pendingMessages.findIndex(m => m.tempId === tempId);
+        if (pendingIndex >= 0) {
+            this.cache.pendingMessages.splice(pendingIndex, 1);
+        }
+        
+        // Add to confirmed messages
+        const message = {
+            id: confirmedMessage.id || confirmedMessage.message_id,
+            content: confirmedMessage.content,
+            role: confirmedMessage.role,
+            type: confirmedMessage.type,
+            timestamp: new Date(confirmedMessage.timestamp || confirmedMessage.created_at).getTime(),
+            isReference: confirmedMessage.is_reference || false
+        };
+        
+        this.cache.confirmedMessages.push(message);
+        this.saveCacheToBrowser();
+        
+        this.logMetric('message_confirmed', 1, { temp_id: tempId });
+        
+        // Emit event for UI update
+        this.emitCacheEvent('cache:message-confirmed', {
+            tempId: tempId,
+            confirmedMessage: message
+        });
+    }
+
+    /**
+     * T015: Mark optimistic message as failed after backend sync error
+     * @param {string} tempId - Temporary message ID
+     * @param {string} error - Error message
+     */
+    markOptimisticMessageFailed(tempId, error) {
+        const pendingIndex = this.cache.pendingMessages.findIndex(m => m.tempId === tempId);
+        if (pendingIndex >= 0) {
+            const message = this.cache.pendingMessages[pendingIndex];
+            message.syncStatus = 'failed';
+            message.retryCount += 1;
+            message.error = error;
+            
+            this.saveCacheToBrowser();
+            
+            this.logMetric('sync_failure', 1, { 
+                temp_id: tempId, 
+                retry_count: message.retryCount,
+                error: error
+            });
+            
+            // Emit event for UI update
+            this.emitCacheEvent('cache:message-failed', {
+                tempId: tempId,
+                error: error,
+                retryCount: message.retryCount
+            });
+            
+            // Schedule automatic retry if under max retries (T057)
+            if (message.retryCount < 3) {
+                const retryDelay = Math.pow(2, message.retryCount) * 1000; // 2s, 4s, 8s
+                setTimeout(() => {
+                    this.retryFailedMessage(tempId);
+                }, retryDelay);
+            }
+        }
+    }
+
+    /**
+     * T056: Retry failed message manually or automatically
+     * @param {string} tempId - Temporary message ID
+     * @returns {Promise<Object>} Result with success status
+     */
+    async retryFailedMessage(tempId) {
+        const pendingIndex = this.cache.pendingMessages.findIndex(m => m.tempId === tempId);
+        if (pendingIndex >= 0) {
+            const message = this.cache.pendingMessages[pendingIndex];
+            message.syncStatus = 'syncing';
+            this.saveCacheToBrowser();
+            
+            this.logMetric('message_retry', 1, { temp_id: tempId, retry_count: message.retryCount });
+            
+            // Retry backend sync
+            await this.syncMessageToBackend(tempId, message.content, message.role, message.type);
+            
+            return { success: true };
+        }
+        return { success: false, error: 'Message not found' };
+    }
+
+    /**
+     * Get all messages (confirmed + pending) in chronological order
+     * @returns {Array} Sorted array of messages
+     */
+    getAllMessages() {
+        if (!this.cache) return [];
+        
+        // Combine confirmed and pending messages
+        const allMessages = [
+            ...this.cache.confirmedMessages.map(m => ({ ...m, syncStatus: 'confirmed' })),
+            ...this.cache.pendingMessages
+        ];
+        
+        // Sort by timestamp (confirmed) or clientTimestamp (pending)
+        allMessages.sort((a, b) => {
+            const timeA = a.timestamp || a.clientTimestamp;
+            const timeB = b.timestamp || b.clientTimestamp;
+            return timeA - timeB;
+        });
+        
+        return allMessages;
+    }
+
+    /**
+     * T046-T047: Refresh cache from backend API and merge with pending messages
+     * Deduplicates by matching content + timestamp proximity (±5s)
+     * @returns {Promise<void>}
+     */
+    async refreshCache() {
+        if (!this.cache || !this.cache.sessionId) {
+            console.warn('Cannot refresh cache: not initialized');
+            return;
+        }
+
+        const startTime = performance.now();
+        
+        try {
+            // Note: We don't have a GET messages endpoint yet
+            // For now, just mark last fetch timestamp
+            // In production, this would: GET /api/sessions/{id}/messages
+            // and merge with pending using deduplication logic
+            
+            this.cache.lastFetchTimestamp = new Date().toISOString();
+            this.saveCacheToBrowser();
+            
+            const duration = performance.now() - startTime;
+            this.logMetric('cache_refresh_duration_ms', duration);
+            
+            // T049: Emit refresh event
+            this.emitCacheEvent('cache:refreshed', {
+                sessionId: this.cache.sessionId,
+                confirmedCount: this.cache.confirmedMessages.length,
+                pendingCount: this.cache.pendingMessages.length,
+                duration: duration
+            });
+            
+        } catch (error) {
+            console.error('Cache refresh error:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * T047: Deduplicate messages by content and timestamp proximity
+     * @param {Array} backendMessages - Messages from backend API
+     * @param {Array} pendingMessages - Pending optimistic messages
+     * @returns {Array} Deduplicated confirmed messages
+     */
+    deduplicateMessages(backendMessages, pendingMessages) {
+        const deduplicated = [];
+        const TIMESTAMP_TOLERANCE_MS = 5000; // ±5 seconds
+        
+        for (const backendMsg of backendMessages) {
+            // Check if this backend message matches any pending message
+            const matchingPending = pendingMessages.find(pending => {
+                const contentMatch = pending.content.trim() === backendMsg.content.trim();
+                const timestampDiff = Math.abs(
+                    new Date(backendMsg.timestamp || backendMsg.created_at).getTime() - 
+                    pending.clientTimestamp
+                );
+                return contentMatch && timestampDiff < TIMESTAMP_TOLERANCE_MS;
+            });
+            
+            // If no match, add to deduplicated list
+            if (!matchingPending) {
+                deduplicated.push({
+                    id: backendMsg.id || backendMsg.message_id,
+                    content: backendMsg.content,
+                    role: backendMsg.role || backendMsg.sender,
+                    type: backendMsg.type || backendMsg.mode,
+                    timestamp: new Date(backendMsg.timestamp || backendMsg.created_at).getTime(),
+                    created_at: backendMsg.created_at
+                });
+            }
+        }
+        
+        return deduplicated;
+    }
+
+    /**
+     * T050: Clear cache and reinitialize for session switch
+     * @param {string} newSessionId - New session ID
+     */
+    switchSession(newSessionId) {
+        // Clear current cache
+        this.cache = {
+            sessionId: newSessionId,
+            confirmedMessages: [],
+            pendingMessages: [],
+            lastFetchTimestamp: null
+        };
+        
+        this.saveCacheToBrowser();
+        
+        this.logMetric('session_switched', 1, { 
+            new_session_id: newSessionId
+        });
+        
+        // Trigger refresh for new session
+        this.refreshCache();
+        
+        // Emit event
+        this.emitCacheEvent('cache:session-switched', {
+            sessionId: newSessionId
+        });
+    }
+
+    /**
+     * T061: Clear cache on logout
+     */
+    clearCache() {
+        this.cache = null;
+        
+        try {
+            sessionStorage.removeItem(this.STORAGE_KEY);
+            this.logMetric('cache_cleared', 1);
+        } catch (error) {
+            console.error('Error clearing cache:', error);
+        }
+    }
+
+    /**
+     * Get cache for inspection/debugging
+     * @returns {Object} Current cache state
+     */
+    getCache() {
+        return this.cache;
+    }
+}
+
+// Export singleton instance
+const messageCache = new MessageCache();
+window.messageCache = messageCache;

src/templates/base.html

@@ -38,6 +38,11 @@
                                 <i class="bi bi-people"></i> My Contacts
                             </a>
                         </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ url_for('settings.view_settings') }}">
+                                <i class="bi bi-gear"></i> Settings
+                            </a>
+                        </li>
                         <li class="nav-item">
                             <span class="nav-link">
                                 <i class="bi bi-person-badge"></i> {{ session.get('display_name', 'User') }}

src/templates/contacts/view.html

@@ -5,6 +5,8 @@
 {% block head %}
 <!-- Marked.js for Markdown rendering -->
 <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
+<!-- Message Cache for Optimistic UI Updates (Feature: 012-realtime-message-display) -->
+<script src="{{ url_for('static', filename='js/message-cache.js') }}"></script>
 <style>
 /* Markdown styling for assistant messages */
 .markdown-content {
@@ -176,8 +178,9 @@
                                                 {{ message.get('created_at', '') }}
                                             </small>
                                         </div>
-                            {% endif %}
-                            {% endif %}
+                                    </div>
+                                    {% endif %}
+                                    {% endif %}
                         </div>
                         {% endfor %}
                     {% else %}
@@ -402,53 +405,70 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 });
 
-// Chat functionality
-const messageHistory = document.getElementById('messageHistory');
-const messageContent = document.getElementById('messageContent');
-const charCounter = document.getElementById('charCounter');
-const chatForm = document.getElementById('chatForm');
-const askBtn = document.getElementById('askBtn');
-const addFactBtn = document.getElementById('addFactBtn');
+// T029: Initialize message cache for contacts session (Feature: 012-realtime-message-display)
+const SESSION_ID = '{{ contact.session_id }}';
+messageCache.init(SESSION_ID);
+
+// Declare variables at top level
+let messageHistory;
+let messageContent;
+let charCounter;
+let chatForm;
+let askBtn;
+let addFactBtn;
 
-// Auto-scroll to bottom of message history
-if (messageHistory) {
-    messageHistory.scrollTop = messageHistory.scrollHeight;
+// Initialize all elements after DOM is ready
+function initializeElements() {
+    messageHistory = document.getElementById('messageHistory');
+    messageContent = document.getElementById('messageContent');
+    charCounter = document.getElementById('charCounter');
+    chatForm = document.getElementById('chatForm');
+    askBtn = document.getElementById('askBtn');
+    addFactBtn = document.getElementById('addFactBtn');
+    
+    // Auto-scroll to bottom of message history
+    if (messageHistory) {
+        messageHistory.scrollTop = messageHistory.scrollHeight;
+    }
+    
+    setupEventHandlers();
 }
 
-// Character counter with dynamic max length
-if (messageContent && charCounter) {
-    messageContent.addEventListener('input', function() {
+function setupEventHandlers() {
+    // Character counter with dynamic max length
+    if (messageContent && charCounter) {
+        messageContent.addEventListener('input', function() {
         const length = this.value.length;
-        charCounter.textContent = length + ' / 10000';
-        if (length > 9000) {
-            charCounter.classList.add('text-warning');
-        } else {
-            charCounter.classList.remove('text-warning');
-        }
-    });
-}
+            charCounter.textContent = length + ' / 10000';
+            if (length > 9000) {
+                charCounter.classList.add('text-warning');
+            } else {
+                charCounter.classList.remove('text-warning');
+            }
+        });
+    }
 
-// Auto-resize message textarea
-if (messageContent) {
-    messageContent.addEventListener('input', function() {
-        this.style.height = 'auto';
-        this.style.height = Math.min(this.scrollHeight, 120) + 'px';
-    });
-    
-    // Handle Enter key (submit question) vs Shift+Enter (new line)
-    messageContent.addEventListener('keydown', function(e) {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            if (this.value.trim().length > 0) {
-                askBtn.click();
+    // Auto-resize message textarea
+    if (messageContent) {
+        messageContent.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+        });
+        
+        // Handle Enter key (submit question) vs Shift+Enter (new line)
+        messageContent.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                if (this.value.trim().length > 0) {
+                    askBtn.click();
+                }
             }
-        }
-    });
-}
+        });
+    }
 
-// Ask Question button handler (T019: Feature 001-refine-memory-producer-logic)
-if (askBtn) {
-    askBtn.addEventListener('click', function(e) {
+    // T030-T032: Ask Question handler with optimistic updates (Feature: 012-realtime-message-display)
+    if (askBtn) {
+        askBtn.addEventListener('click', async function(e) {
         e.preventDefault();
         const content = messageContent.value.trim();
         
@@ -473,15 +493,31 @@ if (askBtn) {
         document.getElementById('askSpinner').classList.remove('d-none');
         document.getElementById('askText').textContent = 'Sending...';
         
-        // Submit to send_message endpoint
-        chatForm.action = "{{ url_for('contacts.send_message', session_id=contact.session_id) }}";
-        chatForm.submit();
-    });
-}
+        try {
+            // T030: Optimistic update - question appears instantly
+            await messageCache.addOptimisticMessage(content, 'user', 'question');
+            
+            // Clear textarea
+            messageContent.value = '';
+            charCounter.textContent = '0 / 10000';
+            messageContent.style.height = 'auto';
+        } catch (error) {
+            console.error('Error sending question:', error);
+            alert('Failed to send question. Please try again.');
+        } finally {
+            // Re-enable buttons
+            askBtn.disabled = false;
+            addFactBtn.disabled = false;
+            document.getElementById('askIcon').classList.remove('d-none');
+            document.getElementById('askSpinner').classList.add('d-none');
+            document.getElementById('askText').textContent = 'Ask Question';
+        }
+        });
+    }
 
-// Add Fact button handler (T019: Feature 001-refine-memory-producer-logic)
-if (addFactBtn) {
-    addFactBtn.addEventListener('click', function(e) {
+    // T034: Add Fact handler with optimistic updates (Feature: 012-realtime-message-display)
+    if (addFactBtn) {
+        addFactBtn.addEventListener('click', async function(e) {
         e.preventDefault();
         const content = messageContent.value.trim();
         
@@ -506,10 +542,215 @@ if (addFactBtn) {
         document.getElementById('factSpinner').classList.remove('d-none');
         document.getElementById('factText').textContent = 'Adding...';
         
-        // Submit to add_fact endpoint
-        chatForm.action = "{{ url_for('contacts.add_fact', session_id=contact.session_id) }}";
-        chatForm.submit();
+        try {
+            // T034: Optimistic update - fact appears instantly
+            await messageCache.addOptimisticMessage(content, 'user', 'fact');
+            
+            // Clear textarea
+            messageContent.value = '';
+            charCounter.textContent = '0 / 10000';
+            messageContent.style.height = 'auto';
+        } catch (error) {
+            console.error('Error adding fact:', error);
+            alert('Failed to add fact. Please try again.');
+        } finally {
+            // Re-enable buttons
+            askBtn.disabled = false;
+            addFactBtn.disabled = false;
+            document.getElementById('factIcon').classList.remove('d-none');
+            document.getElementById('factSpinner').classList.add('d-none');
+            document.getElementById('factText').textContent = 'Add Fact';
+        }
+        });
+    }
+}
+
+// T031-T032: Render messages with sync status indicators (Feature: 012-realtime-message-display)
+function renderMessages() {
+    const messages = messageCache.getAllMessages();
+    const container = messageHistory;
+    
+    // Clear existing content
+    const emptyState = container.querySelector('.alert-info');
+    container.innerHTML = '';
+    
+    if (messages.length === 0) {
+        if (emptyState) {
+            container.appendChild(emptyState);
+        } else {
+            container.innerHTML = `
+                <div class="h-100 d-flex flex-column justify-content-center align-items-center p-4">
+                    <div class="alert alert-info" role="status" style="max-width: 500px;">
+                        <i class="bi bi-info-circle me-2"></i>
+                        <strong>No facts or messages yet.</strong>
+                        <p class="mb-0 mt-2 small">Add your first fact about {{ contact.contact_name }} using the "Add Fact" button below, or ask a question to start a conversation.</p>
+                    </div>
+                </div>
+            `;
+        }
+        return;
+    }
+    
+    // Render each message
+    messages.forEach(message => {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'mb-3';
+        messageDiv.dataset.messageId = message.id || message.tempId;
+        
+        // Add pending/failed classes
+        if (message.syncStatus === 'pending' || message.syncStatus === 'syncing') {
+            messageDiv.classList.add('message-pending');
+        } else if (message.syncStatus === 'failed') {
+            messageDiv.classList.add('message-failed');
+        }
+        
+        const timestamp = message.timestamp 
+            ? new Date(message.timestamp).toLocaleString() 
+            : new Date(message.clientTimestamp).toLocaleString();
+        
+        // Render sync indicator
+        let syncIndicatorHTML = '';
+        if (message.syncStatus === 'pending' || message.syncStatus === 'syncing') {
+            syncIndicatorHTML = '<span class="sync-indicator pending ms-2" title="Syncing..." aria-label="Message syncing with server">⏳</span>';
+        } else if (message.syncStatus === 'failed') {
+            syncIndicatorHTML = `
+                <button class="sync-indicator failed retry-btn ms-2" 
+                        onclick="retryMessage('${message.tempId}')" 
+                        title="Sync failed. Click to retry."
+                        aria-label="Sync failed. Click to retry sending message">
+                    ⚠️ Retry
+                </button>
+            `;
+        } else if (message.syncStatus === 'confirmed') {
+            syncIndicatorHTML = '<span class="sync-indicator confirmed ms-2" title="Synced" aria-label="Message successfully synced">✓</span>';
+        }
+        
+        // Render based on message type
+        if (message.type === 'fact') {
+            // Fact message - info border style
+            messageDiv.innerHTML = `
+                <div class="p-3 rounded bg-light border-start border-info border-3">
+                    <div class="d-flex align-items-start">
+                        <i class="bi bi-bookmark-fill text-info me-2"></i>
+                        <div class="flex-grow-1">
+                            <p class="mb-1">${escapeHtml(message.content)}</p>
+                            <small class="text-muted">
+                                ${timestamp}${syncIndicatorHTML}
+                            </small>
+                        </div>
+                    </div>
+                </div>
+            `;
+        } else if (message.role === 'assistant') {
+            // Assistant message - right aligned, gray
+            const renderedMarkdown = marked.parse(message.content);
+            messageDiv.innerHTML = `
+                <div class="d-flex justify-content-end">
+                    <div class="bg-light border p-3 rounded" style="max-width: 75%;">
+                        <div class="markdown-content text-dark">${renderedMarkdown}</div>
+                        <small class="text-muted">
+                            <i class="bi bi-cpu"></i> AI · ${timestamp}${syncIndicatorHTML}
+                        </small>
+                    </div>
+                </div>
+            `;
+        } else {
+            // User question - left aligned, blue
+            messageDiv.innerHTML = `
+                <div class="d-flex justify-content-start">
+                    <div class="bg-primary text-white p-3 rounded" style="max-width: 75%;">
+                        <p class="mb-1">${escapeHtml(message.content)}</p>
+                        <small class="text-white-50">
+                            ${timestamp}${syncIndicatorHTML}
+                        </small>
+                    </div>
+                </div>
+            `;
+        }
+        
+        container.appendChild(messageDiv);
     });
+    
+    // Auto-scroll to bottom
+    container.scrollTop = container.scrollHeight;
+}
+
+// Helper: Escape HTML to prevent XSS
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Retry failed message
+async function retryMessage(tempId) {
+    try {
+        await messageCache.retryFailedMessage(tempId);
+    } catch (error) {
+        console.error('Error retrying message:', error);
+        alert('Failed to retry. Please try again.');
+    }
+}
+
+// T032: Listen to cache events and re-render (Feature: 012-realtime-message-display)
+document.addEventListener('cache:message-added', (event) => {
+    console.log('Message added:', event.detail);
+    renderMessages();
+});
+
+document.addEventListener('cache:message-confirmed', (event) => {
+    console.log('Message confirmed:', event.detail);
+    renderMessages();
+});
+
+document.addEventListener('cache:message-failed', (event) => {
+    console.log('Message failed:', event.detail);
+    renderMessages();
+});
+
+// Initialize: Load server-rendered messages into cache on first load
+function initializeContactMessages() {
+    const cache = messageCache.getCache();
+    
+    // Only load server messages if cache is empty (first visit)
+    if (cache.confirmedMessages.length === 0) {
+        {% set all_messages = facts + messages %}
+        {% if all_messages %}
+        const serverMessages = [
+            {% for message in all_messages | sort(attribute='created_at') %}
+            {
+                id: '{{ message.get("message_id", "") }}',
+                content: {{ (message.get('content', message.get('message', '')))|tojson }},
+                role: {% if message.get('sender') == 'assistant' %}'assistant'{% else %}'user'{% endif %},
+                type: {% if message.get('mode') == 'memorize' %}'fact'{% else %}'question'{% endif %},
+                timestamp: '{{ message.get("created_at", "") }}',
+                created_at: '{{ message.get("created_at", "") }}',
+                syncStatus: 'confirmed'
+            }{% if not loop.last %},{% endif %}
+            {% endfor %}
+        ];
+        
+        // Add to cache
+        cache.confirmedMessages = serverMessages;
+        cache.lastFetchTimestamp = new Date().toISOString();
+        messageCache.saveCacheToBrowser();
+        {% endif %}
+    }
+    
+    // Now render from cache
+    renderMessages();
+}
+
+// Wait for DOM ready and initialize everything
+function initializeAll() {
+    initializeElements();
+    initializeContactMessages();
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeAll);
+} else {
+    initializeAll();
 }
 </script>
 {% endblock %}

src/templates/profile/view.html

@@ -114,7 +114,7 @@
                         {% endif %}
                     {% endwith %}
                     
-                    <form method="POST" action="{{ url_for('profile.add_fact') }}" id="addFactForm" onsubmit="return handleSubmit()">
+                    <form method="POST" action="{{ url_for('profile.add_fact') }}" id="addFactForm" onsubmit="handleSubmit(event); return false;">
                         <div class="input-group">
                             <textarea class="form-control" 
                                       id="factContent" 
@@ -143,7 +143,16 @@
     </div>
 </div>
 
+<!-- T019: Include message-cache.js for optimistic UI updates -->
+<script src="{{ url_for('static', filename='js/message-cache.js') }}"></script>
+
 <script>
+// T020: Initialize cache on page load with session_id
+{% if user_profile and user_profile.session_id %}
+const SESSION_ID = '{{ user_profile.session_id }}';
+messageCache.init(SESSION_ID);
+{% endif %}
+
 // Auto-resize textarea as user types
 const textarea = document.getElementById('factContent');
 const charCounter = document.getElementById('charCounter');
@@ -194,19 +203,48 @@ if (factsContainer) {
     }
 }
 
-// Handle form submission with button disable (T011: Feature 001-refine-memory-producer-logic)
-function handleSubmit() {
+// T021: Handle form submission with optimistic UI update
+async function handleSubmit(event) {
+    event.preventDefault();
+    
     if (submitBtn.disabled) {
         return false;
     }
     
+    const content = textarea.value.trim();
+    if (!content) {
+        return false;
+    }
+    
     // Disable button and show spinner
     submitBtn.disabled = true;
     submitIcon.classList.add('d-none');
     submitSpinner.classList.remove('d-none');
     
-    // Button will re-enable on page reload or error
-    return true;
+    try {
+        // Add optimistic message to cache (displays immediately)
+        await messageCache.addOptimisticMessage(content, 'user', 'fact');
+        
+        // Clear textarea
+        textarea.value = '';
+        textarea.style.height = 'auto';
+        charCounter.textContent = '0 / 500';
+        charCounter.classList.remove('text-danger');
+        
+        // Re-enable button
+        submitBtn.disabled = false;
+        submitIcon.classList.remove('d-none');
+        submitSpinner.classList.add('d-none');
+        
+    } catch (error) {
+        console.error('Error adding fact:', error);
+        submitBtn.disabled = false;
+        submitIcon.classList.remove('d-none');
+        submitSpinner.classList.add('d-none');
+        alert('Failed to add fact. Please try again.');
+    }
+    
+    return false;
 }
 
 // Delete fact function
@@ -220,5 +258,172 @@ function deleteFact(messageId) {
         form.submit();
     }
 }
+
+// T022: Render messages with sync status indicators
+function renderMessages() {
+    const messages = messageCache.getAllMessages();
+    const container = factsContainer;
+    
+    // Clear existing facts (except empty state)
+    const emptyState = container.querySelector('.empty-state');
+    container.innerHTML = '';
+    
+    if (messages.length === 0) {
+        if (emptyState) {
+            container.appendChild(emptyState);
+        } else {
+            container.innerHTML = `
+                <div class="empty-state h-100 d-flex flex-column justify-content-center align-items-center">
+                    <i class="bi bi-lightbulb" style="font-size: 3rem; color: #6c757d;"></i>
+                    <p class="mt-3 text-muted">No facts yet. Start adding information about yourself below!</p>
+                    <p class="small text-muted mb-0">Examples: "I work as a software engineer" or "I have 2 children"</p>
+                </div>
+            `;
+        }
+        return;
+    }
+    
+    // Render each message
+    messages.forEach(message => {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'mb-2 fact-message';
+        messageDiv.dataset.messageId = message.id || message.tempId;
+        
+        // Add pending/failed classes
+        if (message.syncStatus === 'pending' || message.syncStatus === 'syncing') {
+            messageDiv.classList.add('message-pending');
+        } else if (message.syncStatus === 'failed') {
+            messageDiv.classList.add('message-failed');
+        }
+        
+        const timestamp = message.timestamp 
+            ? new Date(message.timestamp).toLocaleString() 
+            : new Date(message.clientTimestamp).toLocaleString();
+        
+        // Render sync indicator
+        let syncIndicatorHTML = '';
+        if (message.syncStatus === 'pending' || message.syncStatus === 'syncing') {
+            syncIndicatorHTML = '<span class="sync-indicator pending" title="Syncing..." aria-label="Message syncing with server">⏳</span>';
+        } else if (message.syncStatus === 'failed') {
+            syncIndicatorHTML = `
+                <button class="sync-indicator failed retry-btn" 
+                        onclick="retryMessage('${message.tempId}')" 
+                        title="Sync failed. Click to retry."
+                        aria-label="Sync failed. Click to retry sending message">
+                    ⚠️ Retry
+                </button>
+            `;
+        } else if (message.syncStatus === 'confirmed') {
+            syncIndicatorHTML = '<span class="sync-indicator confirmed" title="Synced" aria-label="Message successfully synced">✓</span>';
+        }
+        
+        messageDiv.innerHTML = `
+            <div class="d-flex align-items-start">
+                <div class="flex-grow-1">
+                    <div class="fact-card p-2">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="flex-grow-1">${escapeHtml(message.content)}</span>
+                            <div class="d-flex align-items-center ms-3">
+                                ${syncIndicatorHTML}
+                                <small class="text-muted ms-2 me-2" style="font-size: 0.75rem;">${timestamp}</small>
+                                ${message.id ? `
+                                <button type="button" 
+                                        class="btn btn-sm btn-link text-danger p-0"
+                                        onclick="deleteFact('${message.id}')"
+                                        title="Delete fact">
+                                    <i class="bi bi-trash" style="font-size: 0.875rem;"></i>
+                                </button>
+                                ` : ''}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        container.appendChild(messageDiv);
+    });
+    
+    // Auto-scroll to bottom
+    container.scrollTop = container.scrollHeight;
+}
+
+// Helper: Escape HTML to prevent XSS
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Retry failed message
+async function retryMessage(tempId) {
+    try {
+        await messageCache.retryFailedMessage(tempId);
+    } catch (error) {
+        console.error('Error retrying message:', error);
+        alert('Failed to retry. Please try again.');
+    }
+}
+
+// T023: Listen to cache:message-added event and re-render
+document.addEventListener('cache:message-added', (event) => {
+    console.log('Message added:', event.detail);
+    renderMessages();
+});
+
+// T024: Listen to cache:message-confirmed event and update indicator
+document.addEventListener('cache:message-confirmed', (event) => {
+    console.log('Message confirmed:', event.detail);
+    renderMessages();
+});
+
+// Listen to cache:message-failed event
+document.addEventListener('cache:message-failed', (event) => {
+    console.log('Message failed:', event.detail);
+    renderMessages();
+});
+
+// Initial render from cache on page load
+{% if user_profile and user_profile.session_id %}
+// Wait for DOM to be ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeFacts);
+} else {
+    initializeFacts();
+}
+
+// Load server-rendered facts into cache on first load
+function initializeFacts() {
+    const cache = messageCache.getCache();
+    
+    // Only load server facts if cache is empty (first visit)
+    if (cache.confirmedMessages.length === 0) {
+        {% if facts %}
+        // Load existing facts from server into cache
+        const serverFacts = [
+            {% for fact in facts %}
+            {
+                id: '{{ fact.message_id }}',
+                content: {{ fact.content|tojson }},
+                role: 'user',
+                type: 'fact',
+                timestamp: '{{ fact.created_at }}',
+                created_at: '{{ fact.created_at }}',
+                syncStatus: 'confirmed'
+            }{% if not loop.last %},{% endif %}
+            {% endfor %}
+        ];
+        
+        // Add to cache
+        cache.confirmedMessages = serverFacts;
+        cache.lastFetchTimestamp = new Date().toISOString();
+        messageCache.saveCacheToBrowser();
+        {% endif %}
+    }
+    
+    // Now render from cache
+    renderMessages();
+}
+{% endif %}
 </script>
 {% endblock %}

src/templates/settings/view.html

@@ -0,0 +1,255 @@
+{% extends "base.html" %}
+
+{% block title %}Settings - PrepMate{% endblock %}
+
+{% block head %}
+<style>
+    .deprecated-warning {
+        background-color: #fff3cd;
+        border-left: 4px solid #ffc107;
+        padding: 12px 16px;
+        margin-bottom: 20px;
+        border-radius: 4px;
+    }
+    .deprecated-warning .bi {
+        font-size: 1.2em;
+        margin-right: 8px;
+    }
+    .model-info {
+        font-size: 0.875rem;
+        color: #6c757d;
+        margin-top: 4px;
+    }
+    .settings-card {
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container mt-4">
+    <div class="row">
+        <div class="col-lg-8 mx-auto">
+            <h1 class="mb-4">
+                <i class="bi bi-gear"></i> Settings
+            </h1>
+
+            {% if settings %}
+
+                <div class="card settings-card">
+                    <div class="card-header bg-primary text-white">
+                        <h5 class="mb-0">
+                            <i class="bi bi-cpu"></i> AI Model Selection
+                        </h5>
+                    </div>
+                    <div class="card-body">
+                        <p class="text-muted">
+                            Configure which OpenAI models are used for different operations. 
+                            Your selections will be used for all future AI interactions.
+                        </p>
+
+                        <form method="POST" action="{{ url_for('settings.update_settings') }}">
+                            <!-- Reply Generation Model -->
+                            <div class="mb-4">
+                                <label for="reply_generation_model" class="form-label fw-bold">
+                                    <i class="bi bi-chat-dots"></i> Reply Generation Model
+                                </label>
+                                <select 
+                                    class="form-select" 
+                                    id="reply_generation_model" 
+                                    name="reply_generation_model" 
+                                    required
+                                >
+                                    {% for model in settings.valid_models %}
+                                    <option value="{{ model }}" 
+                                            {% if model == settings.reply_generation_model %}selected{% endif %}>
+                                        {{ model }}
+                                    </option>
+                                    {% endfor %}
+                                </select>
+                                <div class="model-info">
+                                    Used when generating AI responses to your questions and messages.
+                                </div>
+                            </div>
+
+                            <!-- Last Updated -->
+                            <div class="mb-3">
+                                <small class="text-muted">
+                                    <i class="bi bi-clock"></i> Last updated: {{ settings.updated_at }}
+                                </small>
+                            </div>
+
+                            <!-- Submit Button -->
+                            <div class="d-grid gap-2">
+                                <button type="submit" class="btn btn-primary">
+                                    <i class="bi bi-check-circle"></i> Save Settings
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+
+                <!-- Available Models Reference -->
+                <div class="card mt-4">
+                    <div class="card-header">
+                        <h6 class="mb-0">
+                            <i class="bi bi-info-circle"></i> Available Model
+                        </h6>
+                    </div>
+                    <div class="card-body">
+                        <p class="mb-0"><strong>gpt-4.1-mini:</strong> Cost-effective GPT-4 variant</p>
+                    </div>
+                </div>
+
+                <!-- Response Template Editor (US2) -->
+                <div class="card settings-card mt-4">
+                    <div class="card-header bg-success text-white">
+                        <h5 class="mb-0">
+                            <i class="bi bi-file-text"></i> Response Template
+                        </h5>
+                    </div>
+                    <div class="card-body">
+                        <p class="text-muted">
+                            Customize how AI responses are structured. Templates use Go template syntax with variables like {% raw %}{{.UserMessage}}{% endraw %}, {% raw %}{{.SessionProfile}}{% endraw %}, etc.
+                        </p>
+
+                        <form method="POST" action="{{ url_for('settings.create_template') }}" id="template-form">
+                            <!-- Template Content Textarea -->
+                            <div class="mb-3">
+                                <label for="template_content" class="form-label fw-bold">
+                                    <i class="bi bi-code-square"></i> Template Content
+                                </label>
+                                <textarea 
+                                    class="form-control font-monospace" 
+                                    id="template_content" 
+                                    name="template_content" 
+                                    rows="15" 
+                                    maxlength="10000"
+                                    required
+                                    style="font-size: 0.875rem;"
+                                >{% if active_template %}{{ active_template.template_content }}{% endif %}</textarea>
+                                <div class="form-text">
+                                    <span id="char-count">0</span> / 10000 characters
+                                </div>
+                            </div>
+
+                            <!-- Version History Dropdown -->
+                            {% if template_versions and template_versions|length > 0 %}
+                            <div class="mb-3">
+                                <label for="version_selector" class="form-label fw-bold">
+                                    <i class="bi bi-clock-history"></i> Version History
+                                </label>
+                                <select class="form-select" id="version_selector">
+                                    {% for version in template_versions %}
+                                    <option 
+                                        value="{{ version.version_id }}" 
+                                        data-content="{{ version.template_content }}"
+                                        {% if version.is_active %}selected{% endif %}
+                                    >
+                                        {{ version.created_at }} {% if version.is_active %}(Active){% endif %}
+                                    </option>
+                                    {% endfor %}
+                                </select>
+                                <div class="form-text">
+                                    Select a previous version to view or activate it.
+                                </div>
+                            </div>
+
+                            <div class="d-flex gap-2">
+                                <button type="submit" class="btn btn-success">
+                                    <i class="bi bi-save"></i> Save New Version
+                                </button>
+                                <button type="button" class="btn btn-outline-primary" id="activate-btn">
+                                    <i class="bi bi-check-circle"></i> Activate Selected Version
+                                </button>
+                            </div>
+                            {% else %}
+                            <div class="mb-3">
+                                <p class="text-muted">
+                                    <i class="bi bi-info-circle"></i> No version history yet. Save your first template version above.
+                                </p>
+                            </div>
+
+                            <button type="submit" class="btn btn-success">
+                                <i class="bi bi-save"></i> Save New Version
+                            </button>
+                            {% endif %}
+                        </form>
+                    </div>
+                </div>
+            {% else %}
+                <div class="alert alert-warning">
+                    <i class="bi bi-exclamation-triangle"></i>
+                    Unable to load settings. Please try again later.
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<script>
+// Character counter
+const templateTextarea = document.getElementById('template_content');
+const charCount = document.getElementById('char-count');
+
+function updateCharCount() {
+    if (templateTextarea && charCount) {
+        charCount.textContent = templateTextarea.value.length;
+    }
+}
+
+if (templateTextarea) {
+    templateTextarea.addEventListener('input', updateCharCount);
+    updateCharCount(); // Initial count
+}
+
+// Version selector - load template content when selecting a version
+const versionSelector = document.getElementById('version_selector');
+if (versionSelector) {
+    versionSelector.addEventListener('change', function() {
+        const selectedOption = this.options[this.selectedIndex];
+        const content = selectedOption.getAttribute('data-content');
+        if (content && templateTextarea) {
+            templateTextarea.value = content;
+            updateCharCount();
+        }
+    });
+}
+
+// Activate selected version button
+const activateBtn = document.getElementById('activate-btn');
+if (activateBtn) {
+    activateBtn.addEventListener('click', function() {
+        if (!versionSelector) return;
+        
+        const versionId = versionSelector.value;
+        if (!versionId) {
+            alert('Please select a version to activate');
+            return;
+        }
+
+        // Send POST request to activate endpoint
+        fetch(`{{ url_for('settings.activate_template', version_id='__VERSION_ID__') }}`.replace('__VERSION_ID__', versionId), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                window.location.reload();
+            } else {
+                alert('Error activating template: ' + (data.error || 'Unknown error'));
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            alert('Error activating template. Please try again.');
+        });
+    });
+}
+</script>
+
+{% endblock %}