feat: Add HTML formatting for prompt visualization

- Added format_prompt_with_html() function
- Highlights sections with colored headers
- Highlights keywords (IMPORTANT, CRITICAL, etc.)
- Highlights bullet points and numbered lists
- Highlights JSON/code blocks
- Styled status messages with colored boxes
- Better visual hierarchy for prompt structure

src/interface/simplified_gradio_app.py

@@ -171,25 +171,31 @@ def create_simplified_interface():
                             apply_prompt_btn = gr.Button("✅ Apply Changes", variant="primary", scale=2)
                             reset_prompt_btn = gr.Button("🔄 Reset to Default", variant="secondary", scale=1)
                         
-                        prompt_status = gr.Markdown(value="", visible=True)
+                        prompt_status = gr.HTML(value="", visible=True)
                     
                     with gr.Column(scale=1):
                         gr.Markdown("### 📋 Prompt Info")
-                        prompt_info_display = gr.Markdown(value="""
-**Select a prompt to edit**
+                        prompt_info_display = gr.HTML(value="""
+<div style="font-family: system-ui; padding: 1em; background-color: #f9fafb; border-radius: 8px;">
+<p><strong>Select a prompt to edit</strong></p>
 
-Available prompts:
-- 🔍 Spiritual Monitor
-- 🟡 Triage Questions
-- 📊 Triage Evaluation
-- 🏥 Medical Assistant
-- 🩺 Soft Triage
+<p><strong>Available prompts:</strong></p>
+<ul style="margin-left: 1em;">
+<li>🔍 Spiritual Monitor</li>
+<li>🟡 Triage Questions</li>
+<li>📊 Triage Evaluation</li>
+<li>🏥 Medical Assistant</li>
+<li>🩺 Soft Triage</li>
+</ul>
 
-**Tips:**
-- Load prompt first
-- Edit carefully
-- Test changes
-- Reset if needed
+<p><strong>Tips:</strong></p>
+<ul style="margin-left: 1em;">
+<li>Load prompt first</li>
+<li>Edit carefully</li>
+<li>Test changes</li>
+<li>Reset if needed</li>
+</ul>
+</div>
                         """)
             
             # Instructions tab
@@ -252,6 +258,70 @@ For emergencies, please call emergency services immediately.
             return handle_message(example_text, history, session)
         
         # Prompt editing handlers
+        def format_prompt_with_html(prompt_text: str) -> str:
+            """Format prompt with HTML tags for better visualization."""
+            import re
+            
+            # Add HTML structure
+            formatted = prompt_text
+            
+            # Highlight sections (UPPERCASE headers)
+            formatted = re.sub(
+                r'^([A-Z][A-Z\s]+:)$',
+                r'<h3 style="color: #2563eb; margin-top: 1em; margin-bottom: 0.5em;">\1</h3>',
+                formatted,
+                flags=re.MULTILINE
+            )
+            
+            # Highlight subsections (Title Case headers)
+            formatted = re.sub(
+                r'^([A-Z][a-zA-Z\s]+:)$',
+                r'<h4 style="color: #7c3aed; margin-top: 0.8em; margin-bottom: 0.3em;">\1</h4>',
+                formatted,
+                flags=re.MULTILINE
+            )
+            
+            # Highlight bullet points
+            formatted = re.sub(
+                r'^([-•]\s+.+)$',
+                r'<li style="margin-left: 1.5em; color: #059669;">\1</li>',
+                formatted,
+                flags=re.MULTILINE
+            )
+            
+            # Highlight numbered lists
+            formatted = re.sub(
+                r'^(\d+\.\s+.+)$',
+                r'<li style="margin-left: 1.5em; color: #dc2626;">\1</li>',
+                formatted,
+                flags=re.MULTILINE
+            )
+            
+            # Highlight important keywords
+            keywords = [
+                'IMPORTANT', 'CRITICAL', 'REQUIRED', 'MUST', 'SHALL',
+                'WARNING', 'NOTE', 'TASK', 'GOAL', 'OUTPUT'
+            ]
+            for keyword in keywords:
+                formatted = re.sub(
+                    f'\\b({keyword})\\b',
+                    r'<strong style="color: #dc2626; background-color: #fef2f2; padding: 2px 4px; border-radius: 3px;">\1</strong>',
+                    formatted,
+                    flags=re.IGNORECASE
+                )
+            
+            # Highlight JSON/code blocks
+            formatted = re.sub(
+                r'(\{[^}]+\})',
+                r'<code style="background-color: #f3f4f6; padding: 2px 6px; border-radius: 3px; font-family: monospace;">\1</code>',
+                formatted
+            )
+            
+            # Wrap in container
+            formatted = f'<div style="font-family: system-ui; line-height: 1.6; padding: 1em;">{formatted}</div>'
+            
+            return formatted
+        
         def load_prompt(prompt_name: str):
             """Load selected prompt for editing."""
             from src.core.spiritual_monitor import SYSTEM_PROMPT_SPIRITUAL_MONITOR
@@ -274,15 +344,29 @@ For emergencies, please call emergency services immediately.
             
             prompt_text = prompts.get(prompt_name, "")
             
+            # Format with HTML for display
+            formatted_html = format_prompt_with_html(prompt_text)
+            
             info = f"""**Loaded:** {prompt_name}
 
 **Length:** {len(prompt_text)} characters
 **Lines:** {len(prompt_text.split(chr(10)))} lines
 
 **Status:** Ready to edit
+
+---
+
+### 📋 Formatted Preview:
+
+{formatted_html}
 """
             
-            return prompt_text, info, "✅ Prompt loaded successfully"
+            load_status = """<div style="padding: 1em; background-color: #ecfdf5; border-left: 4px solid #10b981; border-radius: 4px;">
+<h4 style="color: #059669; margin-top: 0;">✅ Prompt Loaded</h4>
+<p style="margin-bottom: 0;">Ready to edit. Make your changes and click "Apply Changes".</p>
+</div>"""
+            
+            return prompt_text, info, load_status
         
         def apply_prompt_changes(prompt_name: str, prompt_text: str, session: SimplifiedSessionData):
             """Apply custom prompt changes."""
@@ -290,7 +374,11 @@ For emergencies, please call emergency services immediately.
                 session = SimplifiedSessionData()
             
             if not prompt_text.strip():
-                return "❌ Prompt cannot be empty", session
+                error_html = """<div style="padding: 1em; background-color: #fef2f2; border-left: 4px solid #dc2626; border-radius: 4px;">
+<h4 style="color: #dc2626; margin-top: 0;">❌ Error</h4>
+<p style="margin-bottom: 0;">Prompt cannot be empty</p>
+</div>"""
+                return error_html, session
             
             # Store custom prompt in session
             if not hasattr(session, 'custom_prompts'):
@@ -317,19 +405,27 @@ For emergencies, please call emergency services immediately.
                     import src.config.prompts as p
                     p.SYSTEM_PROMPT_SOFT_MEDICAL_TRIAGE = prompt_text
                 
-                status = f"""✅ **Prompt Applied Successfully**
+                status = f"""<div style="padding: 1em; background-color: #ecfdf5; border-left: 4px solid #10b981; border-radius: 4px;">
+<h4 style="color: #059669; margin-top: 0;">✅ Prompt Applied Successfully</h4>
 
-**Prompt:** {prompt_name}
-**Length:** {len(prompt_text)} characters
-**Session:** {session.session_id[:8]}...
+<p><strong>Prompt:</strong> {prompt_name}</p>
+<p><strong>Length:</strong> {len(prompt_text)} characters</p>
+<p><strong>Session:</strong> <code>{session.session_id[:8]}...</code></p>
 
-⚠️ **Note:** Changes are active for this session only.
-To revert, use "Reset to Default" button."""
+<p style="color: #d97706; margin-bottom: 0;">
+⚠️ <strong>Note:</strong> Changes are active for this session only.
+To revert, use "Reset to Default" button.
+</p>
+</div>"""
                 
                 return status, session
                 
             except Exception as e:
-                return f"❌ Error applying prompt: {str(e)}", session
+                error_html = f"""<div style="padding: 1em; background-color: #fef2f2; border-left: 4px solid #dc2626; border-radius: 4px;">
+<h4 style="color: #dc2626; margin-top: 0;">❌ Error Applying Prompt</h4>
+<p style="margin-bottom: 0;"><code>{str(e)}</code></p>
+</div>"""
+                return error_html, session
         
         def reset_prompt(prompt_name: str, session: SimplifiedSessionData):
             """Reset prompt to default."""
@@ -346,7 +442,12 @@ To revert, use "Reset to Default" button."""
             # Reapply default
             apply_status, session = apply_prompt_changes(prompt_name, prompt_text, session)
             
-            return prompt_text, f"🔄 **Reset to Default**\n\n{info}", "✅ Prompt reset successfully", session
+            reset_status = """<div style="padding: 1em; background-color: #eff6ff; border-left: 4px solid #3b82f6; border-radius: 4px;">
+<h4 style="color: #2563eb; margin-top: 0;">🔄 Reset to Default</h4>
+<p style="margin-bottom: 0;">Prompt has been restored to its original version.</p>
+</div>"""
+            
+            return prompt_text, info, reset_status, session
         
         # Bind events
         demo.load(