Claude Code: Add UI/UX improvements to Cain's chat interface

- Add conversation controls: Clear chat, Export TXT/JSON, Toggle details
- Add loading indicators with animated dots during chat processing
- Add session footer showing session ID and message count
- Add system health badge status indicator
- Enhanced CSS for chat bubble differentiation (user vs agent)
- Markdown rendering enabled in chat responses
- Session tracking variables and helper functions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.gitignore

@@ -10,3 +10,4 @@ node_modules/
 *.log
 .DS_Store
 frontend/index.html
+__pycache__/

app.py

@@ -314,6 +314,72 @@ class CircuitBreaker:
 # Global circuit breaker for httpcore operations
 httpcore_breaker = CircuitBreaker(failure_threshold=3, recovery_timeout=30.0)
 
+# ========== Session Tracking for Chat ==========
+_session_id: str = datetime.utcnow().strftime("%Y%m%d_%H%M%S")
+_message_count: int = 0
+_system_status_visible: bool = True
+
+
+def get_session_info() -> tuple[str, str]:
+    """Get current session info (session_id, message_count)."""
+    global _message_count
+    return _session_id, str(_message_count)
+
+
+def increment_message_count() -> int:
+    """Increment and return the message count."""
+    global _message_count
+    _message_count += 1
+    return _message_count
+
+
+def reset_session():
+    """Reset session with a new ID and zero message count."""
+    global _session_id, _message_count
+    _session_id = datetime.utcnow().strftime("%Y%m%d_%H%M%S")
+    _message_count = 0
+    return _session_id, str(_message_count), [], "Session reset. Ready for new conversation."
+
+
+def toggle_system_status() -> tuple[bool, str]:
+    """Toggle system status visibility."""
+    global _system_status_visible
+    _system_status_visible = not _system_status_visible
+    status_text = "✅ System details shown" if _system_status_visible else "🔒 System details hidden"
+    return _system_status_visible, status_text
+
+
+def export_chat(history: list, format_type: str = "txt") -> str:
+    """Export chat history to a file."""
+    if not history:
+        return "No conversation to export."
+
+    import tempfile
+    timestamp = datetime.utcnow().strftime("%Y%m%d_%H%M%S")
+
+    if format_type == "json":
+        filepath = tempfile.gettempdir() / f"cain_chat_{timestamp}.json"
+        export_data = {
+            "session_id": _session_id,
+            "timestamp": datetime.utcnow().isoformat(),
+            "messages": [{"role": "user" if i % 2 == 0 else "assistant", "content": msg}
+                        for pair in history for i, msg in enumerate(pair)]
+        }
+        with open(filepath, "w") as f:
+            json.dump(export_data, f, indent=2)
+    else:  # txt
+        filepath = tempfile.gettempdir() / f"cain_chat_{timestamp}.txt"
+        with open(filepath, "w") as f:
+            f.write(f"Cain Chat Export - Session: {_session_id}\n")
+            f.write(f"Exported: {datetime.utcnow().isoformat()}\n")
+            f.write("=" * 50 + "\n\n")
+            for user_msg, bot_msg in history:
+                f.write(f"User: {user_msg}\n\n")
+                f.write(f"Cain: {bot_msg}\n\n")
+                f.write("-" * 30 + "\n\n")
+
+    return f"✅ Exported to {filepath.name}"
+
 
 def track_async_task(task: asyncio.Task):
     """Track an async task for graceful shutdown."""
@@ -1969,6 +2035,148 @@ CUSTOM_CSS = """
     0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
     40% { transform: scale(1); opacity: 1; }
 }
+
+/* ========== Enhanced Chat Interface Styles ========== */
+.chatbot-container {
+    background: var(--bg-secondary) !important;
+    border-radius: 16px !important;
+    border: 1px solid var(--border-color) !important;
+}
+
+/* Chat message bubbles - user vs agent differentiation */
+.chatbot-message.user {
+    background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)) !important;
+    color: white !important;
+    border-radius: 18px 18px 4px 18px !important;
+    padding: 14px 20px !important;
+    margin: 8px 0 8px auto !important;
+    max-width: 75% !important;
+    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3) !important;
+}
+
+.chatbot-message.bot {
+    background: var(--bg-tertiary) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-primary) !important;
+    border-radius: 18px 18px 18px 4px !important;
+    padding: 14px 20px !important;
+    margin: 8px auto 8px 0 !important;
+    max-width: 80% !important;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
+}
+
+/* Markdown styling within chat bubbles */
+.chatbot-message.bot .markdown {
+    color: var(--text-primary) !important;
+}
+
+.chatbot-message.bot .markdown h1,
+.chatbot-message.bot .markdown h2,
+.chatbot-message.bot .markdown h3 {
+    color: var(--text-primary) !important;
+    margin-top: 12px !important;
+}
+
+.chatbot-message.bot .markdown code {
+    background: rgba(59, 130, 246, 0.2) !important;
+    color: var(--accent-blue) !important;
+    padding: 3px 8px !important;
+    border-radius: 6px !important;
+    font-family: 'Fira Code', 'Consolas', monospace !important;
+}
+
+.chatbot-message.bot .markdown pre {
+    background: rgba(0, 0, 0, 0.3) !important;
+    border-radius: 8px !important;
+    padding: 16px !important;
+    overflow-x: auto !important;
+    border: 1px solid var(--border-color) !important;
+}
+
+.chatbot-message.bot .markdown pre code {
+    background: transparent !important;
+    padding: 0 !important;
+}
+
+/* ========== Session Footer ========== */
+.session-footer {
+    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary)) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 10px !important;
+    padding: 12px 20px !important;
+    margin-top: 10px !important;
+    text-align: center !important;
+    color: var(--text-secondary) !important;
+    font-size: 0.9em !important;
+    font-family: 'Segoe UI', system-ui, sans-serif !important;
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    gap: 20px !important;
+}
+
+.session-footer span {
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 6px !important;
+}
+
+/* ========== Enhanced Button Styles ========== */
+.gradio-button.secondary {
+    background: var(--bg-tertiary) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-secondary) !important;
+}
+
+.gradio-button.secondary:hover {
+    background: var(--bg-secondary) !important;
+    border-color: var(--accent-purple) !important;
+    color: var(--text-primary) !important;
+}
+
+/* ========== Loading Animation Enhancement ========== */
+.streaming-indicator {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    gap: 6px !important;
+    padding: 16px !important;
+    background: var(--bg-tertiary) !important;
+    border-radius: 12px !important;
+    margin: 8px 0 !important;
+}
+
+.streaming-dot {
+    width: 10px !important;
+    height: 10px !important;
+    background: var(--accent-purple) !important;
+    border-radius: 50% !important;
+    animation: streamingBounce 1.4s infinite ease-in-out !important;
+    box-shadow: 0 0 10px rgba(124, 58, 237, 0.6) !important;
+}
+
+/* ========== Health Badge Styles ========== */
+.status-indicator {
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+    padding: 8px 16px !important;
+    border-radius: 24px !important;
+    font-weight: 600 !important;
+    font-size: 0.9em !important;
+}
+
+.status-indicator.online {
+    background: rgba(16, 185, 129, 0.15) !important;
+    color: var(--accent-green) !important;
+    border: 1px solid rgba(16, 185, 129, 0.4) !important;
+}
+
+.status-indicator.offline {
+    background: rgba(239, 68, 68, 0.15) !important;
+    color: var(--accent-red) !important;
+    border: 1px solid rgba(239, 68, 68, 0.4) !important;
+}
 """
 
 # ========== Main Application ==========
@@ -2042,11 +2250,20 @@ def create_agent_office():
                     with gr.Column(scale=2):
                         # ========== Chat Interface ==========
                         with gr.Group():
-                            gr.Markdown("## 💬 Chat with Cain")
+                            # Chat header with status badge
+                            with gr.Row():
+                                gr.Markdown("## 💬 Chat with Cain")
+                                system_healthy_badge = gr.HTML(
+                                    value='<span class="status-indicator online"><span class="status-dot online"></span>System Healthy</span>'
+                                )
 
                             chatbot = gr.Chatbot(
                                 label="Conversation",
-                                height=400
+                                height=400,
+                                show_label=True,
+                                elem_classes=["chatbot-container"],
+                                render_markdown=True,
+                                bubble_full_width=False
                             )
 
                             with gr.Row():
@@ -2058,11 +2275,30 @@ def create_agent_office():
                                 )
                                 send_btn = gr.Button("Send", variant="primary", scale=1)
 
+                            # Loading indicator (hidden by default)
+                            loading_indicator = gr.HTML(
+                                value="",
+                                visible=False
+                            )
+
                             chat_status = gr.Markdown(
                                 value="Ready to chat",
                                 label="Status"
                             )
 
+                            # Conversation Controls
+                            with gr.Row():
+                                clear_chat_btn = gr.Button("🗑️ Clear", size="sm", variant="stop")
+                                export_txt_btn = gr.Button("📄 Export TXT", size="sm")
+                                export_json_btn = gr.Button("📋 Export JSON", size="sm")
+                                toggle_status_btn = gr.Button("🔍 Toggle Details", size="sm")
+
+                            export_status = gr.Markdown(
+                                value="",
+                                label="Export Status",
+                                visible=False
+                            )
+
                             gr.Markdown("""
                             **Instructions:**
                             - Type a message and click Send to chat with Cain
@@ -2070,6 +2306,11 @@ def create_agent_office():
                             - Responses are generated based on the conversation_process tool
                             """)
 
+                        # Session Info Footer
+                        session_info_footer = gr.HTML(
+                            value=f'<div class="session-footer">Session: {_session_id} | Messages: 0</div>'
+                        )
+
                         # ========== Brain Information ==========
                         with gr.Accordion("🧠 Brain Information", open=False):
                             brain_info_display = gr.Markdown(
@@ -2282,19 +2523,72 @@ def create_agent_office():
         )
 
         # Chat handlers
-        def handle_chat(message: str, history: List[Tuple[str, str]]) -> Tuple[List[Tuple[str, str]], str]:
-            return chat_with_brain(message, history)
+        def handle_chat(message: str, history: List[Tuple[str, str]]) -> Tuple[List[Tuple[str, str]], str, str, str]:
+            """Handle chat with loading indicator and session tracking."""
+            increment_message_count()
+            session_id, msg_count = get_session_info()
+            history, status = chat_with_brain(message, history)
+            session_html = f'<div class="session-footer">Session: {session_id} | Messages: {msg_count}</div>'
+            return history, status, "", session_html
+
+        def show_loading():
+            """Show loading indicator."""
+            return '<div class="streaming-indicator"><div class="streaming-dot"></div><div class="streaming-dot"></div><div class="streaming-dot"></div></div>'
+
+        # Send button with loading indicator
+        def send_with_loading(message: str, history: List[Tuple[str, str]]) -> Tuple:
+            loading_html = show_loading()
+            return handle_chat(message, history) + (loading_html,)
 
         send_btn.click(
-            fn=handle_chat,
+            fn=send_with_loading,
             inputs=[chat_input, chatbot],
-            outputs=[chatbot, chat_status]
+            outputs=[chatbot, chat_status, loading_indicator, session_info_footer]
         )
 
         chat_input.submit(
-            fn=handle_chat,
+            fn=send_with_loading,
             inputs=[chat_input, chatbot],
-            outputs=[chatbot, chat_status]
+            outputs=[chatbot, chat_status, loading_indicator, session_info_footer]
+        )
+
+        # Clear chat button
+        clear_chat_btn.click(
+            fn=reset_session,
+            inputs=[],
+            outputs=[session_info_footer, chat_status, chatbot, export_status]
+        )
+
+        # Export buttons
+        def export_txt(history):
+            result = export_chat(history, "txt")
+            return result, result
+
+        def export_json(history):
+            result = export_chat(history, "json")
+            return result, result
+
+        export_txt_btn.click(
+            fn=export_txt,
+            inputs=[chatbot],
+            outputs=[export_status, chat_status]
+        )
+
+        export_json_btn.click(
+            fn=export_json,
+            inputs=[chatbot],
+            outputs=[export_status, chat_status]
+        )
+
+        # Toggle status details
+        def update_status_visibility():
+            visible, status_text = toggle_system_status()
+            return status_text
+
+        toggle_status_btn.click(
+            fn=update_status_visibility,
+            inputs=[],
+            outputs=[chat_status]
         )
 
         # Refresh handlers