refactor Context Engineering Visualizer into modular components with Gradio UI integration, enhancing structure and maintainability.

app/__init__.py

@@ -0,0 +1,16 @@
+"""Context Engineering Visualizer Application"""
+
+from .agent import ContextEngineeringAgent
+from .visualizer import ContextVisualizer
+from .memory import ConversationMemory
+from .knowledge import KnowledgeBase
+from .tools import calculate_metric, get_current_time
+
+__all__ = [
+    "ContextEngineeringAgent",
+    "ContextVisualizer",
+    "ConversationMemory",
+    "KnowledgeBase",
+    "calculate_metric",
+    "get_current_time",
+]

app/agent.py

@@ -0,0 +1,111 @@
+"""Main agent implementation"""
+
+from langchain_openai import ChatOpenAI
+from langchain.agents import create_agent
+
+from .visualizer import ContextVisualizer
+from .memory import ConversationMemory
+from .knowledge import KnowledgeBase
+from .tools import calculate_metric, get_current_time
+from config import Settings
+
+
+class ContextEngineeringAgent:
+    """
+    Agent that demonstrates context engineering principles:
+    - Relevance: Only includes needed context
+    - Structure: Clear separation of context layers
+    - Timing: Retrieves information when needed
+    - Consistency: Stable system instructions
+    """
+    
+    def __init__(self):
+        # Initialize components
+        self.llm = ChatOpenAI(
+            model=Settings.MODEL_NAME,
+            temperature=Settings.TEMPERATURE
+        )
+        
+        self.knowledge_base = KnowledgeBase(top_k=Settings.RAG_TOP_K)
+        self.memory = ConversationMemory(max_messages=Settings.MAX_CONVERSATION_MESSAGES)
+        self.visualizer = ContextVisualizer()
+        
+        # System instructions
+        self.system_prompt = Settings.SYSTEM_PROMPT
+        
+        # Create tools
+        self.tools = [calculate_metric, get_current_time]
+        
+        # Create agent
+        self.agent = create_agent(
+            model=self.llm,
+            tools=self.tools,
+            system_prompt=self.system_prompt
+        )
+        
+    def process_query(self, user_query: str) -> tuple[str, ContextVisualizer]:
+        """
+        Process a user query with full context engineering
+        Returns: (response, visualizer)
+        """
+        # Reset visualizer for new query
+        self.visualizer = ContextVisualizer()
+        
+        # Layer 1: System Instructions
+        self.visualizer.add_layer(
+            "System Instructions",
+            self.system_prompt,
+        )
+        
+        # Layer 2: Conversation History
+        history_text = self.memory.get_history_text()
+        self.visualizer.add_layer(
+            "Conversation History",
+            history_text if history_text != "No previous conversation" else "No previous conversation",
+        )
+        
+        # Layer 3: Retrieved Knowledge (RAG)
+        retrieved_context = self.knowledge_base.retrieve_relevant(user_query)
+        self.visualizer.add_layer(
+            "Retrieved Knowledge (RAG)",
+            retrieved_context,
+        )
+        
+        # Layer 4: Current User Query
+        self.visualizer.add_layer(
+            "User Query",
+            user_query,
+        )
+        
+        # Layer 5: Available Tools
+        tools_context = "\n".join([
+            f"- {tool.name}: {tool.description}" for tool in self.tools
+        ])
+        self.visualizer.add_layer(
+            "Available Tools",
+            tools_context,
+        )
+        
+        # Build the context structure
+        context_message = f"""Context from Knowledge Base:
+{retrieved_context}
+
+Previous Conversation:
+{history_text}
+
+Current Question:
+{user_query}"""
+        
+        # Invoke agent
+        result = self.agent.invoke({
+            "messages": [{"role": "user", "content": context_message}]
+        })
+        
+        # Extract response
+        response = result["messages"][-1].content
+        
+        # Update conversation memory
+        self.memory.add_user_message(user_query)
+        self.memory.add_ai_message(response)
+        
+        return response, self.visualizer

app/knowledge.py

@@ -0,0 +1,31 @@
+"""Knowledge base with RAG capabilities"""
+
+from langchain_openai import OpenAIEmbeddings
+from langchain_community.vectorstores import FAISS
+
+
+class KnowledgeBase:
+    """Simulates a knowledge base with RAG capabilities"""
+    
+    def __init__(self, top_k: int = 2):
+        # Sample knowledge documents about data analytics
+        self.documents = [
+            "Gross Revenue is defined as total sales before refunds and returns.",
+            "Net Revenue equals gross revenue minus refunds, returns, and discounts.",
+            "AOV (Average Order Value) is calculated as total revenue divided by number of orders.",
+            "Customer Lifetime Value (CLV) is the total revenue expected from a customer over their entire relationship.",
+            "Conversion Rate is the percentage of visitors who complete a desired action.",
+            "Churn Rate measures the percentage of customers who stop using your service over a period.",
+            "Monthly Recurring Revenue (MRR) is the predictable revenue generated each month.",
+            "CAC (Customer Acquisition Cost) is the total cost of acquiring a new customer.",
+        ]
+        
+        # Create embeddings and vector store
+        self.embeddings = OpenAIEmbeddings()
+        self.vectorstore = FAISS.from_texts(self.documents, self.embeddings)
+        self.retriever = self.vectorstore.as_retriever(search_kwargs={"k": top_k})
+        
+    def retrieve_relevant(self, query: str) -> str:
+        """Retrieve relevant documents for a query"""
+        docs = self.retriever.invoke(query)
+        return "\n".join([f"- {doc.page_content}" for doc in docs])

app/memory.py

@@ -0,0 +1,42 @@
+"""Conversation memory management"""
+
+from typing import List
+from langchain.messages import HumanMessage, AIMessage
+
+
+class ConversationMemory:
+    """Manages conversation history with smart truncation"""
+    
+    def __init__(self, max_messages: int = 4):
+        self.messages = []
+        self.max_messages = max_messages
+        
+    def add_user_message(self, content: str):
+        """Add user message to history"""
+        self.messages.append(HumanMessage(content=content))
+        self._truncate()
+        
+    def add_ai_message(self, content: str):
+        """Add AI message to history"""
+        self.messages.append(AIMessage(content=content))
+        self._truncate()
+        
+    def _truncate(self):
+        """Keep only recent messages to avoid context bloat"""
+        if len(self.messages) > self.max_messages:
+            self.messages = self.messages[-self.max_messages:]
+            
+    def get_history(self) -> List:
+        """Get formatted conversation history"""
+        return self.messages
+    
+    def get_history_text(self) -> str:
+        """Get history as formatted text"""
+        if not self.messages:
+            return "No previous conversation"
+        
+        history_text = []
+        for msg in self.messages:
+            role = "User" if isinstance(msg, HumanMessage) else "Assistant"
+            history_text.append(f"{role}: {msg.content}")
+        return "\n".join(history_text)

app/tools.py

@@ -0,0 +1,46 @@
+"""Agent tools for external operations"""
+
+from datetime import datetime
+from langchain.tools import tool
+
+
+@tool
+def calculate_metric(metric_name: str, values: str) -> str:
+    """
+    Calculate a business metric.
+    
+    Args:
+        metric_name: Name of metric (aov, conversion_rate, clv, etc.)
+        values: Comma-separated values needed for calculation
+    """
+    try:
+        nums = [float(x.strip()) for x in values.split(",")]
+        
+        if metric_name.lower() == "aov":
+            # Average Order Value = total revenue / number of orders
+            if len(nums) >= 2:
+                result = nums[0] / nums[1]
+                return f"AOV: ${result:.2f}"
+                
+        elif metric_name.lower() == "conversion_rate":
+            # Conversion Rate = (conversions / visitors) * 100
+            if len(nums) >= 2:
+                result = (nums[0] / nums[1]) * 100
+                return f"Conversion Rate: {result:.2f}%"
+                
+        elif metric_name.lower() == "churn_rate":
+            # Churn Rate = (customers lost / total customers) * 100
+            if len(nums) >= 2:
+                result = (nums[0] / nums[1]) * 100
+                return f"Churn Rate: {result:.2f}%"
+                
+        return f"Calculated {metric_name} with values {values}"
+        
+    except Exception as e:
+        return f"Error calculating metric: {str(e)}"
+
+
+@tool
+def get_current_time() -> str:
+    """Get the current date and time"""
+    return datetime.now().strftime("%Y-%m-%d %H:%M:%S")

app/ui.py

@@ -0,0 +1,289 @@
+"""Gradio UI for Context Engineering Visualizer"""
+
+import gradio as gr
+from typing import Tuple, List
+
+from .agent import ContextEngineeringAgent
+from config import Settings
+
+
+class ContextVisualizerUI:
+    """Gradio interface for the Context Engineering Visualizer"""
+    
+    def __init__(self):
+        self.agent = None
+        self.chat_history = []
+        
+    def initialize_agent(self) -> str:
+        """Initialize the agent"""
+        try:
+            self.agent = ContextEngineeringAgent()
+            return "Agent initialized successfully"
+        except Exception as e:
+            return f"Error initializing agent: {str(e)}"
+    
+    def format_context_layers(self, visualizer) -> str:
+        """Format context layers for display as stacked container visualization"""
+        if not visualizer.context_layers:
+            return "<div style='text-align: center; padding: 20px;'>No context layers available</div>"
+        
+        total_tokens = sum(visualizer.token_counts.values())
+        
+        # Color palette for different layers
+        colors = [
+            "#4A90E2",  # Blue - System Instructions
+            "#7B68EE",  # Purple - Conversation History
+            "#50C878",  # Green - Retrieved Knowledge
+            "#F39C12",  # Orange - User Query
+            "#E74C3C"   # Red - Available Tools
+        ]
+        
+        # Build HTML for stacked container
+        html = f"""
+        <div style="max-width: 800px; margin: 0 auto; font-family: 'Inter', sans-serif;">
+            <div style="text-align: center; margin-bottom: 20px;">
+                <h3 style="margin: 0; color: #2c3e50;">Context Window Structure</h3>
+                <p style="margin: 5px 0; color: #7f8c8d; font-size: 14px;">Total: {total_tokens} tokens</p>
+            </div>
+            
+            <div style="border: 2px solid #34495e; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+        """
+        
+        for i, layer in enumerate(visualizer.context_layers):
+            percentage = (layer["tokens"] / total_tokens * 100) if total_tokens > 0 else 0
+            color = colors[i % len(colors)]
+            
+            # Create stacked section
+            html += f"""
+                <div style="background: linear-gradient(135deg, {color} 0%, {color}dd 100%); 
+                            padding: 15px 20px; 
+                            border-bottom: 1px solid rgba(255,255,255,0.1);
+                            position: relative;
+                            height: {max(percentage * 3, 30)}px;
+                            display: flex;
+                            align-items: center;
+                            transition: all 0.3s ease;">
+                    <div style="flex: 1;">
+                        <div style="color: white; font-weight: 600; font-size: 14px; margin-bottom: 3px;">
+                            {layer['layer'].upper()}
+                        </div>
+                        <div style="color: rgba(255,255,255,0.9); font-size: 12px;">
+                            {layer['tokens']} tokens ({percentage:.1f}%)
+                        </div>
+                    </div>
+                    <div style="color: rgba(255,255,255,0.8); font-size: 24px; font-weight: bold;">
+                        {percentage:.0f}%
+                    </div>
+                </div>
+            """
+        
+        html += """
+            </div>
+        </div>
+        """
+        
+        return html
+    
+    def format_context_details(self, visualizer) -> str:
+        """Format detailed context layer contents for markdown display"""
+        if not visualizer.context_layers:
+            return "No context layers available"
+        
+        output = []
+        total_tokens = sum(visualizer.token_counts.values())
+        
+        for i, layer in enumerate(visualizer.context_layers, 1):
+            percentage = (layer["tokens"] / total_tokens * 100) if total_tokens > 0 else 0
+            
+            output.append(f"### {i}. {layer['layer'].upper()}")
+            output.append(f"**Tokens:** {layer['tokens']} ({percentage:.1f}%)")
+            output.append(f"\n**Content:**")
+            output.append(f"```\n{layer['content']}\n```")
+            output.append("")
+        
+        return "\n".join(output)
+    
+    def format_token_breakdown(self, visualizer) -> List[Tuple[str, int]]:
+        """Format token breakdown for chart"""
+        if not visualizer.token_counts:
+            return []
+        
+        return [(layer, tokens) for layer, tokens in visualizer.token_counts.items()]
+    
+    def process_query(
+        self, 
+        query: str,
+        history: List,
+        show_visualization: bool
+    ) -> Tuple[List, str, str, str]:
+        """Process user query and return results"""
+        
+        if not self.agent:
+            self.initialize_agent()
+        
+        if not query.strip():
+            return history, "", "", ""
+        
+        try:
+            # Process query
+            response, visualizer = self.agent.process_query(query)
+            
+            # Add to chat history (format: list of dicts with role and content)
+            history.append({"role": "user", "content": query})
+            history.append({"role": "assistant", "content": response})
+            
+            # Format outputs
+            if show_visualization:
+                context_viz_html = self.format_context_layers(visualizer)
+                context_details = self.format_context_details(visualizer)
+            else:
+                context_viz_html = "<div style='text-align: center; padding: 20px; color: #7f8c8d;'>Visualization disabled</div>"
+                context_details = "Visualization disabled"
+            
+            return history, "", context_viz_html, context_details
+            
+        except Exception as e:
+            error_msg = f"Error processing query: {str(e)}"
+            history.append({"role": "user", "content": query})
+            history.append({"role": "assistant", "content": error_msg})
+            return history, "", "", ""
+    
+    def clear_conversation(self) -> Tuple[List, str, str]:
+        """Clear conversation history"""
+        if self.agent:
+            self.agent.memory.messages = []
+        return [], "", ""
+    
+    def create_interface(self) -> gr.Blocks:
+        """Create the Gradio interface"""
+        
+        with gr.Blocks(
+            title="Context Engineering Visualizer"
+        ) as interface:
+            
+            gr.Markdown("""
+            # Context Engineering Visualizer
+            
+            This tool demonstrates how information flows into an AI agent's context window before inference.
+            Ask questions about business metrics and data analysis to see the context engineering in action.
+            """)
+            
+            with gr.Accordion("About Context Engineering", open=False):
+                gr.Markdown("""
+                **Context Engineering** is the practice of carefully managing what information goes into an AI model's context window.
+                
+                This visualizer shows five key layers:
+                
+                1. **System Instructions**: Stable guidelines that define the agent's role and behavior
+                2. **Conversation History**: Recent messages to maintain conversational coherence
+                3. **Retrieved Knowledge (RAG)**: Relevant information retrieved from a knowledge base
+                4. **User Query**: The current question or request
+                5. **Available Tools**: External functions the agent can use
+                
+                Each layer contributes tokens to the context window. Good context engineering ensures:
+                - **Relevance**: Only necessary information is included
+                - **Structure**: Clear separation and organization of context layers
+                - **Efficiency**: Optimal use of limited context window space
+                - **Consistency**: Stable system instructions across interactions
+                """)
+            
+            with gr.Sidebar(label="Settings & Examples", open=True, width=320):
+                gr.Markdown("### Settings")
+                
+                show_viz = gr.Checkbox(
+                    label="Show Context Visualization",
+                    value=True,
+                    info="Display detailed breakdown of context layers"
+                )
+                
+                gr.Markdown("### Example Questions")
+                gr.Markdown("""
+                **Try these sequential scenarios to see context engineering in action:**
+                
+                **Scenario 1: Understanding AOV (Average Order Value)**
+                1. What is Average Order Value and how is it calculated?
+                2. Calculate the AOV if total revenue is $50000 and we had 500 orders
+                3. What if we had 700 orders with the same revenue instead?
+                
+                **Scenario 2: Conversion Rate Analysis**
+                1. What is Conversion Rate?
+                2. Calculate conversion rate with 250 conversions and 10000 visitors
+                3. How would the rate change if we got 400 conversions?
+                
+                **Scenario 3: Understanding Revenue Metrics**
+                1. What is the difference between gross and net revenue?
+                2. If gross revenue is $100000 with $15000 in refunds and $5000 in discounts, what's the net revenue?
+                
+                **Scenario 4: Churn Rate**
+                1. Explain what Churn Rate means
+                2. Calculate churn rate if we lost 50 customers out of 1000 total customers
+                """)
+            
+            chatbot = gr.Chatbot(
+                label="Conversation",
+                height=500,
+                avatar_images=(None, None)
+            )
+            
+            query_input = gr.Textbox(
+                label="Your Question",
+                placeholder="e.g., What is Average Order Value and how is it calculated?",
+                lines=2,
+                show_label=False
+            )
+            
+            with gr.Row():
+                submit_btn = gr.Button("Submit", variant="primary")
+                clear_btn = gr.Button("Clear Conversation")
+            
+            with gr.Accordion("Context Window Breakdown", open=True):
+                context_viz = gr.HTML(
+                    value="<div style='text-align: center; padding: 20px; color: #7f8c8d;'>Submit a query to see context breakdown</div>"
+                )
+                
+                with gr.Accordion("Detailed Layer Contents", open=False):
+                    context_details = gr.Markdown(
+                        value="Submit a query to see detailed breakdown"
+                    )
+            
+            # Event handlers
+            submit_btn.click(
+                fn=self.process_query,
+                inputs=[query_input, chatbot, show_viz],
+                outputs=[chatbot, query_input, context_viz, context_details]
+            )
+            
+            query_input.submit(
+                fn=self.process_query,
+                inputs=[query_input, chatbot, show_viz],
+                outputs=[chatbot, query_input, context_viz, context_details]
+            )
+            
+            clear_btn.click(
+                fn=self.clear_conversation,
+                inputs=[],
+                outputs=[chatbot, context_viz, context_details]
+            )
+            
+            gr.Markdown("""
+            ---
+            **Note**: This visualizer uses OpenAI's GPT model and requires an API key in your environment.
+            """)
+        
+        return interface
+
+
+def launch_ui(
+    share: bool = Settings.GRADIO_SHARE,
+    server_name: str = Settings.GRADIO_SERVER_NAME,
+    server_port: int = Settings.GRADIO_SERVER_PORT
+):
+    """Launch the Gradio interface"""
+    ui = ContextVisualizerUI()
+    interface = ui.create_interface()
+    interface.launch(
+        share=share,
+        server_name=server_name,
+        server_port=server_port,
+        theme=gr.themes.Soft()
+    )

app/visualizer.py

@@ -0,0 +1,34 @@
+"""Context window visualization component"""
+
+from typing import Dict, Any
+from datetime import datetime
+
+
+class ContextVisualizer:
+    """Tracks and visualizes what goes into the context window"""
+    
+    def __init__(self):
+        self.context_layers = []
+        self.token_counts = {}
+        
+    def add_layer(self, layer_name: str, content: str, token_estimate: int = None):
+        """Add a context layer for visualization"""
+        if token_estimate is None:
+            # Rough estimate: ~4 chars per token
+            token_estimate = len(content) // 4
+            
+        self.context_layers.append({
+            "layer": layer_name,
+            "content": content,
+            "tokens": token_estimate,
+            "timestamp": datetime.now().isoformat()
+        })
+        self.token_counts[layer_name] = token_estimate
+        
+    def get_summary(self) -> Dict[str, Any]:
+        """Get structured summary of context"""
+        return {
+            "layers": [l["layer"] for l in self.context_layers],
+            "total_tokens": sum(self.token_counts.values()),
+            "breakdown": self.token_counts
+        }

config/__init__.py

@@ -0,0 +1,5 @@
+"""Configuration module for Context Engineering Visualizer"""
+
+from .settings import Settings
+
+__all__ = ["Settings"]

config/settings.py

@@ -0,0 +1,38 @@
+"""Application settings and configuration"""
+
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+
+class Settings:
+    """Application configuration"""
+    
+    # OpenAI Settings
+    OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
+    MODEL_NAME = "gpt-4.1-mini"
+    TEMPERATURE = 0
+    
+    # Memory Settings
+    MAX_CONVERSATION_MESSAGES = 4
+    
+    # RAG Settings
+    RAG_TOP_K = 2
+    
+    # UI Settings
+    GRADIO_SHARE = False
+    GRADIO_SERVER_NAME = "127.0.0.1"
+    GRADIO_SERVER_PORT = 7860
+    
+    # System Prompt
+    SYSTEM_PROMPT = """You are a data analyst assistant.
+
+Your role:
+- Answer questions about business metrics and data analysis
+- Use the provided context and knowledge to give accurate answers
+- If context is insufficient, clearly state what information is missing
+- Always explain your reasoning briefly
+- Use the calculator tool for numeric computations
+
+Be concise, accurate, and helpful."""

main.py

@@ -1,434 +1,9 @@
 """
 Context Engineering Visualizer
-Demonstrates how information flows into an agent's context window before inference
+Main entry point for the application
 """
 
-import os
-from typing import List, Dict, Any
-from datetime import datetime
-from dotenv import load_dotenv
-
-from langchain_openai import ChatOpenAI, OpenAIEmbeddings
-from langchain.agents import create_agent
-from langchain.tools import tool
-from langchain.messages import HumanMessage, AIMessage
-from langchain_community.vectorstores import FAISS
-
-# Load environment variables
-load_dotenv()
-
-# ============================================
-# CONTEXT ENGINEERING COMPONENTS
-# ============================================
-
-class ContextVisualizer:
-    """Tracks and visualizes what goes into the context window"""
-    
-    def __init__(self):
-        self.context_layers = []
-        self.token_counts = {}
-        
-    def add_layer(self, layer_name: str, content: str, token_estimate: int = None):
-        """Add a context layer for visualization"""
-        if token_estimate is None:
-            # Rough estimate: ~4 chars per token
-            token_estimate = len(content) // 4
-            
-        self.context_layers.append({
-            "layer": layer_name,
-            "content": content,
-            "tokens": token_estimate,
-            "timestamp": datetime.now().isoformat()
-        })
-        self.token_counts[layer_name] = token_estimate
-        
-    def visualize(self):
-        """Display the context window structure"""
-        print("\n" + "="*80)
-        print("CONTEXT WINDOW VISUALIZATION")
-        print("="*80)
-        
-        total_tokens = sum(self.token_counts.values())
-        
-        for i, layer in enumerate(self.context_layers, 1):
-            percentage = (layer["tokens"] / total_tokens * 100) if total_tokens > 0 else 0
-            bar_length = int(percentage / 2)
-            bar = "█" * bar_length
-            
-            print(f"\n{i}. {layer['layer'].upper()}")
-            print(f"   Tokens: {layer['tokens']} ({percentage:.1f}%)")
-            print(f"   [{bar:<50}]")
-            print(f"   Content:\n{layer['content']}")
-            
-        print(f"\n{'='*80}")
-        print(f"TOTAL CONTEXT TOKENS: {total_tokens}")
-        print(f"{'='*80}\n")
-        
-    def get_summary(self) -> Dict[str, Any]:
-        """Get structured summary of context"""
-        return {
-            "layers": [l["layer"] for l in self.context_layers],
-            "total_tokens": sum(self.token_counts.values()),
-            "breakdown": self.token_counts
-        }
-
-
-# ============================================
-# KNOWLEDGE BASE (RAG Component)
-# ============================================
-
-class KnowledgeBase:
-    """Simulates a knowledge base with RAG capabilities"""
-    
-    def __init__(self):
-        # Sample knowledge documents about data analytics
-        self.documents = [
-            "Gross Revenue is defined as total sales before refunds and returns.",
-            "Net Revenue equals gross revenue minus refunds, returns, and discounts.",
-            "AOV (Average Order Value) is calculated as total revenue divided by number of orders.",
-            "Customer Lifetime Value (CLV) is the total revenue expected from a customer over their entire relationship.",
-            "Conversion Rate is the percentage of visitors who complete a desired action.",
-            "Churn Rate measures the percentage of customers who stop using your service over a period.",
-            "Monthly Recurring Revenue (MRR) is the predictable revenue generated each month.",
-            "CAC (Customer Acquisition Cost) is the total cost of acquiring a new customer.",
-        ]
-        
-        # Create embeddings and vector store
-        self.embeddings = OpenAIEmbeddings()
-        self.vectorstore = FAISS.from_texts(self.documents, self.embeddings)
-        self.retriever = self.vectorstore.as_retriever(search_kwargs={"k": 2})
-        
-    def retrieve_relevant(self, query: str) -> str:
-        """Retrieve relevant documents for a query"""
-        docs = self.retriever.invoke(query)
-        return "\n".join([f"- {doc.page_content}" for doc in docs])
-
-
-# ============================================
-# CONVERSATION MEMORY
-# ============================================
-
-class ConversationMemory:
-    """Manages conversation history with smart truncation"""
-    
-    def __init__(self, max_messages: int = 4):
-        self.messages = []
-        self.max_messages = max_messages
-        
-    def add_user_message(self, content: str):
-        """Add user message to history"""
-        self.messages.append(HumanMessage(content=content))
-        self._truncate()
-        
-    def add_ai_message(self, content: str):
-        """Add AI message to history"""
-        self.messages.append(AIMessage(content=content))
-        self._truncate()
-        
-    def _truncate(self):
-        """Keep only recent messages to avoid context bloat"""
-        if len(self.messages) > self.max_messages:
-            # Keep the most recent messages
-            self.messages = self.messages[-self.max_messages:]
-            
-    def get_history(self) -> List:
-        """Get formatted conversation history"""
-        return self.messages
-    
-    def get_history_text(self) -> str:
-        """Get history as formatted text"""
-        if not self.messages:
-            return "No previous conversation"
-        
-        history_text = []
-        for msg in self.messages:
-            role = "User" if isinstance(msg, HumanMessage) else "Assistant"
-            history_text.append(f"{role}: {msg.content}")
-        return "\n".join(history_text)
-
-
-# ============================================
-# TOOLS (External Connections)
-# ============================================
-
-@tool
-def calculate_metric(
-    metric_name: str,
-    values: str
-) -> str:
-    """
-    Calculate a business metric.
-    
-    Args:
-        metric_name: Name of metric (aov, conversion_rate, clv, etc.)
-        values: Comma-separated values needed for calculation
-    """
-    try:
-        nums = [float(x.strip()) for x in values.split(",")]
-        
-        if metric_name.lower() == "aov":
-            # Average Order Value = total revenue / number of orders
-            if len(nums) >= 2:
-                result = nums[0] / nums[1]
-                return f"AOV: ${result:.2f}"
-                
-        elif metric_name.lower() == "conversion_rate":
-            # Conversion Rate = (conversions / visitors) * 100
-            if len(nums) >= 2:
-                result = (nums[0] / nums[1]) * 100
-                return f"Conversion Rate: {result:.2f}%"
-                
-        elif metric_name.lower() == "churn_rate":
-            # Churn Rate = (customers lost / total customers) * 100
-            if len(nums) >= 2:
-                result = (nums[0] / nums[1]) * 100
-                return f"Churn Rate: {result:.2f}%"
-                
-        return f"Calculated {metric_name} with values {values}"
-        
-    except Exception as e:
-        return f"Error calculating metric: {str(e)}"
-
-
-@tool
-def get_current_time() -> str:
-    """Get the current date and time"""
-    return datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-
-
-# ============================================
-# CONTEXT ENGINEERING AGENT
-# ============================================
-
-class ContextEngineeringAgent:
-    """
-    Agent that demonstrates context engineering principles:
-    - Relevance: Only includes needed context
-    - Structure: Clear separation of context layers
-    - Timing: Retrieves information when needed
-    - Consistency: Stable system instructions
-    """
-    
-    def __init__(self):
-        # Initialize components
-        self.llm = ChatOpenAI(
-            model="gpt-4.1-mini",
-            temperature=0  # Low temp for consistency
-        )
-        
-        self.knowledge_base = KnowledgeBase()
-        self.memory = ConversationMemory(max_messages=4)
-        self.visualizer = ContextVisualizer()
-        
-        # System instructions (STABLE CONTEXT)
-        self.system_prompt = """You are a data analyst assistant.
-
-Your role:
-- Answer questions about business metrics and data analysis
-- Use the provided context and knowledge to give accurate answers
-- If context is insufficient, clearly state what information is missing
-- Always explain your reasoning briefly
-- Use the calculator tool for numeric computations
-
-Be concise, accurate, and helpful."""
-        
-        # Create tools
-        self.tools = [calculate_metric, get_current_time]
-        
-        # Create agent
-        self.agent = create_agent(
-            model=self.llm,
-            tools=self.tools,
-            system_prompt=self.system_prompt
-        )
-        
-    def process_query(self, user_query: str, show_visualization: bool = True) -> str:
-        """
-        Process a user query with full context engineering visualization
-        """
-        # Reset visualizer for new query
-        self.visualizer = ContextVisualizer()
-        
-        print(f"\n{'='*80}")
-        print(f"USER QUERY: {user_query}")
-        print(f"{'='*80}\n")
-        
-        # ============================================
-        # LAYER 1: System Instructions
-        # ============================================
-        self.visualizer.add_layer(
-            "System Instructions",
-            self.system_prompt,
-        )
-        
-        # ============================================
-        # LAYER 2: Conversation History
-        # ============================================
-        history_text = self.memory.get_history_text()
-        self.visualizer.add_layer(
-            "Conversation History",
-            history_text if history_text != "No previous conversation" else "No previous conversation",
-        )
-        
-        # ============================================
-        # LAYER 3: Retrieved Knowledge (RAG)
-        # ============================================
-        retrieved_context = self.knowledge_base.retrieve_relevant(user_query)
-        self.visualizer.add_layer(
-            "Retrieved Knowledge (RAG)",
-            retrieved_context,
-        )
-        
-        # ============================================
-        # LAYER 4: Current User Query
-        # ============================================
-        self.visualizer.add_layer(
-            "User Query",
-            user_query,
-        )
-        
-        # ============================================
-        # LAYER 5: Available Tools
-        # ============================================
-        tools_context = "\n".join([
-            f"- {tool.name}: {tool.description}" for tool in self.tools
-        ])
-        self.visualizer.add_layer(
-            "Available Tools",
-            tools_context,
-        )
-        
-        # Show visualization BEFORE inference
-        if show_visualization:
-            self.visualizer.visualize()
-            print("\n🤖 Sending context to model for inference...\n")
-        
-        # ============================================
-        # INFERENCE: Agent processes with full context
-        # ============================================
-        
-        # Build the context structure
-        context_message = f"""Context from Knowledge Base:
-{retrieved_context}
-
-Previous Conversation:
-{history_text}
-
-Current Question:
-{user_query}"""
-        
-        # Invoke agent
-        result = self.agent.invoke({
-            "messages": [{"role": "user", "content": context_message}]
-        })
-        
-        # Extract response
-        response = result["messages"][-1].content
-        
-        # Update conversation memory
-        self.memory.add_user_message(user_query)
-        self.memory.add_ai_message(response)
-        
-        # Show response
-        print(f"\n{'='*80}")
-        print("AGENT RESPONSE:")
-        print(f"{'='*80}")
-        print(response)
-        print(f"{'='*80}\n")
-        
-        return response
-
-
-# ============================================
-# DEMO SCENARIOS
-# ============================================
-
-def run_demo():
-    """Run demonstration scenarios"""
-    
-    print("\n" + "🎯" * 40)
-    print("CONTEXT ENGINEERING VISUALIZER")
-    print("Demonstrates how information flows into an agent's context window")
-    print("🎯" * 40)
-    
-    agent = ContextEngineeringAgent()
-    
-    # Scenario 1: Simple query with RAG
-    print("\n\n" + "📊 SCENARIO 1: RAG-based Query" + "\n")
-    agent.process_query(
-        "What is Average Order Value and how is it calculated?"
-    )
-    
-    input("\n⏸️  Press Enter to continue to next scenario...")
-    
-    # Scenario 2: Query with tool use
-    print("\n\n" + "🔧 SCENARIO 2: Query Requiring Tool Use" + "\n")
-    agent.process_query(
-        "Calculate the AOV if total revenue is $50000 and we had 500 orders"
-    )
-    
-    input("\n⏸️  Press Enter to continue to next scenario...")
-    
-    # Scenario 3: Query with conversation history
-    print("\n\n" + "💬 SCENARIO 3: Query Using Conversation Context" + "\n")
-    agent.process_query(
-        "What about if we had 750 orders instead?"
-    )
-    
-    input("\n⏸️  Press Enter to see context summary...")
-    
-    # Show final summary
-    print("\n\n" + "📈 CONTEXT ENGINEERING SUMMARY" + "\n")
-    summary = agent.visualizer.get_summary()
-    print(f"Context Layers Used: {', '.join(summary['layers'])}")
-    print(f"Total Context Tokens: {summary['total_tokens']}")
-    print(f"\nToken Breakdown:")
-    for layer, tokens in summary['breakdown'].items():
-        print(f"  - {layer}: {tokens} tokens")
-
-
-# ============================================
-# INTERACTIVE MODE
-# ============================================
-
-def run_interactive():
-    """Run interactive mode"""
-    
-    print("\n" + "💡" * 40)
-    print("CONTEXT ENGINEERING - INTERACTIVE MODE")
-    print("💡" * 40)
-    print("\nType your questions. Type 'quit' to exit.\n")
-    
-    agent = ContextEngineeringAgent()
-    
-    while True:
-        try:
-            user_input = input("\n📝 Your question: ").strip()
-            
-            if user_input.lower() in ['quit', 'exit', 'q']:
-                print("\n👋 Goodbye!")
-                break
-                
-            if not user_input:
-                continue
-                
-            agent.process_query(user_input, show_visualization=True)
-            
-        except KeyboardInterrupt:
-            print("\n\n👋 Goodbye!")
-            break
-        except Exception as e:
-            print(f"\n❌ Error: {str(e)}")
-
-
-# ============================================
-# MAIN
-# ============================================
+from app.ui import launch_ui
 
 if __name__ == "__main__":
-    import sys
-    
-    if len(sys.argv) > 1 and sys.argv[1] == "interactive":
-        run_interactive()
-    else:
-        run_demo()
+    launch_ui()