This enhanced prompt is engineered to provide an AI with the structural framework, technical constraints, and visual design language required to generate a high-fidelity interface mockup or a functional code implementation for the AutoGen visualizer.

Enhanced Prompt: AutoGen Conversation Flow Visualizer

🎭 Role

Act as an expert Full-Stack UI/UX Developer and Data Visualization Specialist. Your expertise lies in creating intuitive, high-density dashboard interfaces for complex AI agent systems, specifically focusing on multi-agent orchestration frameworks like Microsoft AutoGen.

🌐 Context

You are tasked with designing a sophisticated "Conversation Flow Visualizer" for an AutoGen multi-agent environment. The objective is to demystify agent-to-agent communication by transforming raw chat logs into a structured, readable, and highly informative visual timeline. Users need to monitor not just the dialogue, but the underlying token economics and agent logic cycles in real-time.

🛠️ Task Instruction

Please architect the visual interface for the [PROJECT_NAME] based on the following requirements:

1. Message Architecture: Design a messaging interface where each entry is a clearly demarcated bubble. Each bubble must explicitly identify the sender (Agent Name/Persona), the recipient, and the timestamp.
2. Contextual Sidebar: Integrate a "Context Window" sidebar that displays live metrics per turn, including:
   • Token count per message (input vs. output).
   • Estimated cost per message based on the specified model.
   • Cumulative session cost.
3. Logic Flow: Incorporate a status indicator to highlight the "thought process" or "tool-use" status of agents before they produce their final response.
4. Trigger Visualization: Create a distinct visual alert or animation when the 'TERMINATE' command is triggered, signaling the conclusion of the agent task cycle.

⚖️ Constraints & Tone

• Tone: Professional, minimalist, and analytical.
• Visual Language: Modern dashboard aesthetic (e.g., Tailwind CSS or Shadcn UI style).
• Avoid: Clutter; ensure the high density of information does not overwhelm the user. Do not use generic icons; suggest specific iconography for agent types (e.g., Gear for 'Assistant', Shield for 'Critic', User-icon for 'User').
• Length: Provide a comprehensive structural breakdown, including CSS/Tailwind class suggestions and the hierarchical data structure needed to power the view.

📝 Output Format

Please structure your response in the following format:

1. High-Level UI Blueprint: A description of the layout grid.
2. Component Specification: Specific React/HTML components required for the bubbles and sidebar.
3. Data Schema: A JSON snippet representing the data structure required to feed this visualizer.
4. Interactive Logic: A brief explanation of how the 'TERMINATE' state should visually interrupt the UI flow.

Placeholders

• [PROJECT_NAME]: Define the specific deployment name (e.g., "Financial Analyst Swarm").
• [AGENT_ROLES]: List the specific agents involved in the current session (e.g., ["Research Agent", "Coder", "Reviewer"]).
• [MODEL_CONFIG]: Specify the LLMs being tracked (e.g., GPT-4o, Claude 3.5 Sonnet).