Add beautiful web UI for interactive persona conversations

Major Addition: Streamlit-based Web Interface

New Files:
- web_app.py: Full-featured web application with visual persona cards
* 6 persona cards with emoji avatars and color themes
* Chat-style conversation interface
* Real-time conversation history
* Quick suggestion buttons for common questions
* Beautiful, responsive design

- run_web_app.sh / .bat: Cross-platform startup scripts
* Easy launch for macOS/Linux and Windows users

- docs/WEB_UI_GUIDE.md: Comprehensive 500+ line user guide
* Setup instructions
* Feature documentation
* Use cases and tips
* Troubleshooting guide

- docs/WEB_UI_VISUAL_GUIDE.md: Visual documentation
* ASCII art layout diagrams
* User flow illustrations
* Feature explanations with visuals
* Comparison with CLI interface

Features:
✨ Visual persona selection with emoji avatars
💬 Chat-style conversation interface
📜 Full conversation history per persona
🎯 Quick-click suggestion buttons
🎨 Color-coded personas (green, orange, blue, brown, pink, gray)
🔄 Easy persona switching
🧹 Clear conversation button
📱 Responsive design (desktop/tablet/mobile)
⚡ Real-time responses with loading indicators

Layout:
- Right panel (1/3): 6 clickable persona cards
- Left panel (2/3):
* Top: Question input with Send button
* Middle: Quick suggestion buttons
* Bottom: Conversation history with styled messages

Usage:
streamlit run web_app.py
# or
./run_web_app.sh (macOS/Linux)
run_web_app.bat (Windows)

Dependencies Added:
- streamlit==1.31.0 (web framework)
- pillow==10.2.0 (image support)

This provides a much more intuitive and engaging way to interact
with personas compared to the CLI. Perfect for demos, exploration,
and non-technical users.

Updated README.md to highlight the new web UI as the primary
interaction method.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

README.md

@@ -31,6 +31,28 @@ AI_Personas/
 └── README.md
 ```
 
+## 🎨 Web UI (New!)
+
+**Beautiful visual interface for interacting with personas!**
+
+```bash
+# Launch the web interface
+streamlit run web_app.py
+
+# Or use the startup script
+./run_web_app.sh          # macOS/Linux
+run_web_app.bat           # Windows
+```
+
+Features:
+- 👥 Visual persona cards with avatars
+- 💬 Chat-style conversation interface
+- 📜 Full conversation history
+- 🎯 Quick suggestion buttons
+- 🎨 Beautiful, intuitive design
+
+See [Web UI Guide](docs/WEB_UI_GUIDE.md) for detailed documentation.
+
 ## Quick Start
 
 ### 1. Installation

docs/WEB_UI_GUIDE.md

@@ -0,0 +1,411 @@
+# Web UI Guide
+
+## Overview
+
+The AI Personas Web UI provides a beautiful, interactive interface for conversing with urban planning stakeholder personas. The interface features:
+
+- **Visual persona cards** with avatars and descriptions
+- **Chat-style interface** for natural conversations
+- **Conversation history** tracking within each session
+- **Quick suggestion buttons** for common questions
+- **Real-time responses** from Claude-powered personas
+
+## Layout
+
+```
+┌─────────────────────────────────┬────────────────┐
+│  💬 Conversation                │  👥 Personas   │
+│  ┌───────────────────────────┐  │  ┌──────────┐ │
+│  │ Selected: Sarah Chen      │  │  │ 🌱 Sarah │ │
+│  └───────────────────────────┘  │  └──────────┘ │
+│                                 │  ┌──────────┐ │
+│  ┌───────────────────────────┐  │  │ 🏪 Marcus│ │
+│  │ Your question: [____] Send│  │  └──────────┘ │
+│  └───────────────────────────┘  │      ...      │
+│                                 │                │
+│  💡 Quick Suggestions           │                │
+│  [Suggestion 1] [Suggestion 2]  │                │
+│                                 │                │
+│  📜 Conversation History        │                │
+│  ┌───────────────────────────┐  │                │
+│  │ 🙋 You: What about...     │  │                │
+│  │ 🌱 Sarah: I think that... │  │                │
+│  └───────────────────────────┘  │                │
+└─────────────────────────────────┴────────────────┘
+```
+
+## The 6 Personas
+
+Each persona has a unique visual identity:
+
+1. **🌱 Sarah Chen** - Urban Planner
+   - Progressive, sustainability-focused
+   - Green theme
+
+2. **🏪 Marcus Thompson** - Business Owner
+   - Pragmatic, economy-focused
+   - Orange theme
+
+3. **🚇 Dr. Elena Rodriguez** - Transportation Engineer
+   - Data-driven, safety-first
+   - Blue theme
+
+4. **🏡 James O'Brien** - Long-time Resident
+   - Traditional, community-focused
+   - Brown theme
+
+5. **✊ Priya Patel** - Housing Advocate
+   - Activist, equity-focused
+   - Pink theme
+
+6. **🏢 David Kim** - Real Estate Developer
+   - Market-driven, growth-oriented
+   - Gray theme
+
+## Getting Started
+
+### 1. Launch the Web App
+
+**Option A: Using the startup script**
+```bash
+# On macOS/Linux:
+./run_web_app.sh
+
+# On Windows:
+run_web_app.bat
+```
+
+**Option B: Direct command**
+```bash
+streamlit run web_app.py
+```
+
+### 2. Access the Interface
+
+The app will automatically open in your default browser at:
+```
+http://localhost:8501
+```
+
+If it doesn't open automatically, manually navigate to that URL.
+
+### 3. Select a Persona
+
+- Look at the right panel showing 6 persona cards
+- Click on any persona to select them
+- The selected persona will be highlighted
+- Your conversation history will be cleared when switching personas
+
+### 4. Start Asking Questions
+
+**Quick Start Options:**
+- Click one of the suggested questions below the input box
+- Type your own question in the text field
+- Press Enter or click "Send"
+
+**Example Questions:**
+- "What do you think about the bike lane proposal?"
+- "Should we allow food trucks downtown?"
+- "What's the biggest challenge facing our community?"
+- "How can we make housing more affordable?"
+
+### 5. View Responses
+
+- Responses appear in the conversation history
+- Your questions are shown in blue boxes
+- Persona responses are shown in gray boxes
+- Scroll to see the full conversation
+
+### 6. Continue the Conversation
+
+- Ask follow-up questions
+- The persona maintains context from previous messages in the session
+- Switch personas to get different perspectives on the same topic
+
+## Features
+
+### Conversation History
+
+Each session with a persona maintains full conversation history:
+- All your questions are saved
+- All responses are preserved
+- Switch between personas to compare perspectives
+- Clear conversation button to start fresh
+
+### Quick Suggestions
+
+Pre-written questions to help you get started:
+- "What's the most important issue facing downtown?"
+- "Should we allow food trucks in the plaza?"
+- "How can we make the city more sustainable?"
+- "What do you think about the affordable housing crisis?"
+
+### Context Awareness
+
+All responses consider:
+- The downtown district environmental context
+- Recent events and upcoming decisions
+- The persona's values, background, and expertise
+- Their communication style and typical concerns
+
+## Tips for Effective Use
+
+### 1. Start Broad, Then Go Specific
+
+```
+Good progression:
+1. "What are your priorities for downtown?"
+2. "How do you feel about new development?"
+3. "What about the 500-unit condo proposal on 5th St?"
+```
+
+### 2. Compare Perspectives
+
+Ask the same question to multiple personas:
+1. Ask Sarah Chen (planner) about bike lanes
+2. Switch to Marcus Thompson (business owner)
+3. Ask the same question
+4. See how their values shape different responses
+
+### 3. Use Realistic Scenarios
+
+```
+Weak: "What do you think?"
+Strong: "The city is considering a $50M bond for affordable
+        housing. It would add 200 units but increase property
+        taxes by $150/year. What's your position?"
+```
+
+### 4. Ask Follow-up Questions
+
+```
+Initial: "Should we add more bike lanes?"
+Follow-up: "What about concerns from business owners?"
+Follow-up: "How would you address parking issues?"
+```
+
+### 5. Explore Trade-offs
+
+```
+Good questions:
+- "How would you balance economic growth with affordability?"
+- "What's more important: parking or bike infrastructure?"
+- "How do we develop without displacing residents?"
+```
+
+## Use Cases
+
+### 1. Planning Proposal Testing
+
+**Before a public meeting:**
+- Present your proposal to all 6 personas
+- Identify likely concerns and objections
+- Prepare responses to different stakeholder viewpoints
+- Refine your communication strategy
+
+### 2. Community Engagement Prep
+
+**Before stakeholder outreach:**
+- Understand different value systems
+- Learn characteristic language patterns
+- Identify potential allies and opponents
+- Develop inclusive framing
+
+### 3. Scenario Exploration
+
+**Test different approaches:**
+- Ask about Option A vs. Option B
+- See which approach gets broader support
+- Understand trade-offs from multiple perspectives
+
+### 4. Training & Education
+
+**For planning students/professionals:**
+- Learn to think from diverse perspectives
+- Understand stakeholder motivations
+- Practice responsive communication
+- Build empathy across different viewpoints
+
+### 5. Policy Analysis
+
+**Evaluate proposed policies:**
+- Get immediate feedback from different angles
+- Identify unintended consequences
+- Understand equity implications
+- Find opportunities for compromise
+
+## Technical Details
+
+### Performance
+
+- First query may take 3-5 seconds (model initialization)
+- Subsequent queries: 2-4 seconds each
+- Conversation history is stored in browser session
+- No data is saved between sessions (privacy-preserving)
+
+### Browser Compatibility
+
+Tested and working on:
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+
+### Port Configuration
+
+Default port: `8501`
+
+To use a different port:
+```bash
+streamlit run web_app.py --server.port 8502
+```
+
+### Customization
+
+The web app reads from:
+- `data/personas/*.json` - Persona definitions
+- `data/contexts/*.json` - Environmental contexts
+- `.env` - API configuration
+
+Any changes to these files will be reflected after refreshing the browser.
+
+## Troubleshooting
+
+### App won't start
+
+**Check Python version:**
+```bash
+python --version  # Should be 3.11+
+```
+
+**Reinstall dependencies:**
+```bash
+pip install -r requirements.txt
+```
+
+### "No personas loaded" error
+
+**Check persona files exist:**
+```bash
+ls data/personas/
+```
+
+Should show 6 JSON files. If not, verify git repository is complete.
+
+### API errors
+
+**Verify API key:**
+```bash
+cat .env | grep ANTHROPIC_API_KEY
+```
+
+Should show your API key. If missing, add it to `.env`.
+
+### Slow responses
+
+**Check model configuration:**
+
+In `.env`, you're using:
+```
+LLM_MODEL=claude-3-haiku-20240307
+```
+
+This is the fastest model. For better quality (but slower), you could upgrade to Sonnet or Opus.
+
+### Persona not responding
+
+**Check browser console:**
+- Right-click → Inspect → Console tab
+- Look for error messages
+- Common issue: API rate limits
+
+**Refresh the page:**
+- Clears session state
+- Reinitializes connections
+
+### Clear stuck session
+
+**Browser refresh:** Press F5 or Ctrl+R
+
+**Clear cache:**
+```bash
+streamlit cache clear
+```
+
+## Keyboard Shortcuts
+
+While in the text input field:
+- **Enter**: Send message
+- **Shift+Enter**: New line (in the future, for multi-line input)
+- **Escape**: Clear input field
+
+## Privacy & Data
+
+### What's Stored
+
+**In browser session (temporary):**
+- Selected persona
+- Conversation history
+- Current question
+
+**Not stored:**
+- No conversation logs saved to disk
+- No personal data collected
+- No tracking or analytics
+
+**Cleared when:**
+- Switching personas
+- Clicking "Clear Conversation"
+- Closing browser tab
+- Refreshing page
+
+### API Usage
+
+- Questions are sent to Anthropic Claude API
+- Responses are generated by the LLM
+- Conversation data follows Anthropic's privacy policy
+- No training on your queries (as per Anthropic policy)
+
+## Advanced Features (Coming Soon)
+
+Planned enhancements:
+- Export conversation to PDF/Markdown
+- Share conversation links
+- Multi-persona comparison view
+- Voice input/output
+- Mobile responsive design improvements
+- Dark mode
+- Custom persona builder
+
+## Support
+
+If you encounter issues:
+
+1. Check this guide first
+2. Review main README.md
+3. Check GitHub issues
+4. Verify all dependencies installed
+5. Ensure API key is configured
+
+## Quick Command Reference
+
+```bash
+# Start app
+streamlit run web_app.py
+
+# Start on different port
+streamlit run web_app.py --server.port 8502
+
+# Clear cache
+streamlit cache clear
+
+# View Streamlit config
+streamlit config show
+
+# Run in headless mode (no browser)
+streamlit run web_app.py --server.headless true
+```
+
+---
+
+**Enjoy exploring diverse urban planning perspectives! 🏙️**

docs/WEB_UI_VISUAL_GUIDE.md

@@ -0,0 +1,336 @@
+# Web UI Visual Guide
+
+## Interface Layout
+
+```
+╔════════════════════════════════════════════════════════════════════════════╗
+║                  🏙️ AI Personas for Urban Planning                         ║
+║          Explore diverse stakeholder perspectives on urban planning        ║
+╠════════════════════════════════════════╦═══════════════════════════════════╣
+║                                        ║     👥 Select a Persona           ║
+║  💬 Conversation                       ║     Click to start conversation   ║
+║  ┌────────────────────────────────┐   ║                                   ║
+║  │ Currently talking with:        │   ║   ┌─────────────────────────┐   ║
+║  │ 🌱 Sarah Chen (Urban Planner)  │   ║   │         🌱                │   ║
+║  └────────────────────────────────┘   ║   │    Sarah Chen            │   ║
+║                                        ║   │   Urban Planner          │   ║
+║  ┌────────────────────────────────┐   ║   │Progressive, sustainability│   ║
+║  │ Your question: ________________│   ║   └─────────────────────────┘   ║
+║  │                         [Send] │   ║                                   ║
+║  └────────────────────────────────┘   ║   ┌─────────────────────────┐   ║
+║                                        ║   │         🏪                │   ║
+║  💡 Try asking:                        ║   │   Marcus Thompson        │   ║
+║  ┌──────────────────┐ ┌─────────────┐ ║   │   Business Owner         │   ║
+║  │ What's most      │ │ Should we   │ ║   │ Pragmatic, economy-first │   ║
+║  │ important issue? │ │ allow food  │ ║   └─────────────────────────┘   ║
+║  └──────────────────┘ └─────────────┘ ║                                   ║
+║  ┌──────────────────┐ ┌─────────────┐ ║   ┌─────────────────────────┐   ║
+║  │ How to make city │ │ Affordable  │ ║   │         🚇                │   ║
+║  │ sustainable?     │ │ housing?    │ ║   │  Dr. Elena Rodriguez     │   ║
+║  └──────────────────┘ └─────────────┘ ║   │Transportation Engineer   │   ║
+║                                        ║   │ Data-driven, safety-first│   ║
+║  ─────────────────────────────────     ║   └─────────────────────────┘   ║
+║                                        ║                                   ║
+║  📜 Conversation History               ║   ┌─────────────────────────┐   ║
+║                                        ║   │         🏡                │   ║
+║  ┌────────────────────────────────┐   ║   │    James O'Brien         │   ║
+║  │ 🙋 You:                        │   ║   │   Long-time Resident     │   ║
+║  │ What do you think about the    │   ║   │Traditional, community-   │   ║
+║  │ bike lane proposal?            │   ║   │      focused             │   ║
+║  └────────────────────────────────┘   ║   └─────────────────────────┘   ║
+║                                        ║                                   ║
+║  ┌────────────────────────────────┐   ║   ┌─────────────────────────┐   ║
+║  │ 🌱 Sarah Chen:                 │   ║   │         ✊                │   ║
+║  │ I strongly support this bike   │   ║   │     Priya Patel          │   ║
+║  │ lane proposal. As an urban     │   ║   │   Housing Advocate       │   ║
+║  │ planner focused on             │   ║   │ Activist, equity-focused │   ║
+║  │ sustainability, I believe this │   ║   └─────────────────────────┘   ║
+║  │ aligns perfectly with our      │   ║                                   ║
+║  │ climate goals. The data shows  │   ║   ┌─────────────────────────┐   ║
+║  │ protected bike lanes reduce... │   ║   │         🏢                │   ║
+║  └────────────────────────────────┘   ║   │      David Kim           │   ║
+║                                        ║   │ Real Estate Developer    │   ║
+║  ┌────────────────────────────────┐   ║   │Market-driven, growth-    │   ║
+║  │ 🗑️ Clear Conversation          │   ║   │      oriented            │   ║
+║  └────────────────────────────────┘   ║   └─────────────────────────┘   ║
+║                                        ║                                   ║
+╠════════════════════════════════════════╩═══════════════════════════════════╣
+║  AI Personas • Phase 1 • Powered by Claude 3 Haiku • View Code            ║
+╚════════════════════════════════════════════════════════════════════════════╝
+```
+
+## Key Features Illustrated
+
+### 1. Persona Cards (Right Panel)
+
+Each persona card shows:
+- **Avatar emoji** - Visual identifier (🌱 🏪 🚇 🏡 ✊ 🏢)
+- **Name** - Full name of the persona
+- **Role** - Their professional or community role
+- **Tagline** - Brief description of their perspective
+
+**Selected State:**
+- Cards highlight when selected (blue border)
+- Button turns to "primary" style
+- Name appears in conversation header
+
+### 2. Conversation Area (Left Panel - Top)
+
+**Currently Talking With Banner:**
+```
+┌────────────────────────────────┐
+│ Currently talking with:        │
+│ 🌱 Sarah Chen (Urban Planner)  │
+└────────────────────────────────┘
+```
+Shows who you're conversing with.
+
+**Question Input:**
+```
+┌────────────────────────────────┐
+│ Your question: [Type here...] │
+│                        [Send]  │
+└────────────────────────────────┘
+```
+- Text input field for questions
+- Placeholder text guides the user
+- Send button to submit
+
+### 3. Quick Suggestions (Left Panel - Middle)
+
+```
+💡 Try asking:
+┌──────────────────┐ ┌─────────────┐
+│ What's most      │ │ Should we   │
+│ important issue? │ │ allow food  │
+└──────────────────┘ └─────────────┘
+```
+
+Four pre-written questions to get started:
+- Click any button to auto-fill the question
+- Helpful for first-time users
+- Demonstrates good question types
+
+### 4. Conversation History (Left Panel - Bottom)
+
+**User Messages (Blue):**
+```
+┌────────────────────────────────┐
+│ 🙋 You:                        │
+│ What do you think about the    │
+│ bike lane proposal?            │
+└────────────────────────────────┘
+```
+
+**Persona Responses (Gray):**
+```
+┌────────────────────────────────┐
+│ 🌱 Sarah Chen:                 │
+│ I strongly support this bike   │
+│ lane proposal...               │
+└────────────────────────────────┘
+```
+
+**Clear Button:**
+```
+┌────────────────────────────────┐
+│ 🗑️ Clear Conversation          │
+└────────────────────────────────┘
+```
+Resets the conversation for a fresh start.
+
+## User Flow
+
+### First Visit
+
+```
+1. User lands on page
+   ↓
+2. Sees 6 persona cards on right
+   ↓
+3. Sees "Select a persona" message on left
+   ↓
+4. Clicks on a persona (e.g., Sarah Chen)
+   ↓
+5. Persona card highlights
+   ↓
+6. Left panel shows "Currently talking with Sarah Chen"
+   ↓
+7. User sees quick suggestions
+   ↓
+8. Clicks suggestion or types question
+   ↓
+9. Clicks Send button
+   ↓
+10. "💭 Sarah Chen is thinking..." appears
+    ↓
+11. Response appears in conversation history
+    ↓
+12. User can ask follow-up or switch persona
+```
+
+### Switching Personas
+
+```
+1. User clicks different persona (e.g., Marcus)
+   ↓
+2. Previous persona card unhighlights
+   ↓
+3. New persona card highlights
+   ↓
+4. Conversation history clears
+   ↓
+5. Banner updates to show Marcus Thompson
+   ↓
+6. User can start new conversation
+```
+
+## Color Coding
+
+Each persona has a unique color theme:
+
+- **🌱 Sarah Chen**: Green (#4CAF50) - Sustainability
+- **🏪 Marcus Thompson**: Orange (#FF9800) - Business/Commerce
+- **🚇 Elena Rodriguez**: Blue (#2196F3) - Technical/Engineering
+- **🏡 James O'Brien**: Brown (#795548) - Traditional/Established
+- **✊ Priya Patel**: Pink (#E91E63) - Activism/Energy
+- **🏢 David Kim**: Gray (#607D8B) - Professional/Corporate
+
+## Responsive Design
+
+### Desktop (Wide Screen)
+```
+┌─────────────────────────┬───────────┐
+│                         │  Personas │
+│    Conversation         │   Cards   │
+│      (2/3 width)        │ (1/3 width)│
+└─────────────────────────┴───────────┘
+```
+
+### Tablet (Medium Screen)
+```
+┌─────────────────────────┬─────┐
+│                         │ P   │
+│    Conversation         │ e   │
+│                         │ r   │
+│                         │ s   │
+└─────────────────────────┴─────┘
+```
+
+### Mobile (Narrow Screen)
+```
+┌───────────────┐
+│ Conversation  │
+│               │
+└───────────────┘
+┌───────────────┐
+│ Persona Cards │
+│ (Stacked)     │
+└───────────────┘
+```
+
+## Interactive Elements
+
+### Buttons
+
+**Persona Selection Buttons:**
+- Hover: Slight lift effect (translateY)
+- Selected: Primary color, bold border
+- Unselected: Secondary color, subtle border
+
+**Send Button:**
+- Full width of container
+- Primary color
+- Bold text
+- 3rem height for easy clicking
+
+**Suggestion Buttons:**
+- Two columns layout
+- Full width of container
+- Secondary color
+- Fills input when clicked
+
+**Clear Conversation:**
+- Full width
+- Warning/destructive action style
+- Icon + text label
+
+### Input Field
+
+**Text Input:**
+- Placeholder: "e.g., What do you think about..."
+- Auto-focus when page loads
+- Enter key submits
+- Clears after sending
+
+### Loading States
+
+**Thinking Indicator:**
+```
+💭 Sarah Chen is thinking...
+```
+Shows while waiting for API response.
+
+**System Initialization:**
+```
+🔧 Initializing AI Personas system...
+```
+Shows on first page load.
+
+## Accessibility Features
+
+- **Keyboard Navigation**: Tab through all interactive elements
+- **Screen Reader Support**: Semantic HTML with ARIA labels
+- **High Contrast**: Text meets WCAG AA standards
+- **Focus Indicators**: Visible keyboard focus states
+- **Clear Labels**: All buttons have descriptive text
+
+## Tips for Best Experience
+
+### 1. Large Screen Recommended
+- Best viewed on desktop or tablet (≥1024px width)
+- Mobile works but cards may stack vertically
+
+### 2. Modern Browser
+- Chrome, Firefox, Safari, Edge (recent versions)
+- JavaScript must be enabled
+
+### 3. Stable Internet
+- Responses require API calls
+- 2-5 seconds per response
+
+### 4. Clear Conversation
+- Click "Clear Conversation" before switching topics
+- Or switch personas for fresh start
+
+## Comparison: CLI vs. Web UI
+
+| Feature | CLI (`src.cli`) | Web UI (`web_app.py`) |
+|---------|-----------------|----------------------|
+| **Visual** | Text-only | Rich visual interface |
+| **Personas** | Text list | Emoji avatars + cards |
+| **History** | Scrolling text | Formatted chat boxes |
+| **Input** | Command prompt | Text field with Send button |
+| **Suggestions** | None | Quick-click buttons |
+| **Selection** | Type persona ID | Click card |
+| **Mobile** | Terminal only | Web browser |
+| **Learning curve** | Higher | Lower |
+| **Power user** | Better for scripts | Better for exploration |
+
+## Future Enhancements
+
+Planned improvements:
+- [ ] Export conversation to PDF
+- [ ] Dark mode toggle
+- [ ] Voice input/output
+- [ ] Multi-persona comparison (split view)
+- [ ] Conversation templates
+- [ ] Mobile app version
+- [ ] Real-time typing indicators
+- [ ] Emoji reactions to responses
+- [ ] Save/load conversations
+- [ ] Share conversation links
+
+---
+
+**The Web UI makes exploring personas intuitive, visual, and engaging! 🎨**

requirements.txt

@@ -28,6 +28,10 @@ networkx==3.2.1
 click==8.1.7
 rich==13.7.0
 
+# Web UI
+streamlit==1.31.0
+pillow==10.2.0
+
 # Testing
 pytest==8.0.0
 pytest-asyncio==0.23.4

run_web_app.bat

@@ -0,0 +1,11 @@
+@echo off
+REM Launch the AI Personas Web UI (Windows)
+
+echo 🏙️  Starting AI Personas Web Interface...
+echo.
+echo The web app will open in your browser at http://localhost:8501
+echo.
+echo Press Ctrl+C to stop the server
+echo.
+
+streamlit run web_app.py

run_web_app.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+# Launch the AI Personas Web UI
+
+echo "🏙️  Starting AI Personas Web Interface..."
+echo ""
+echo "The web app will open in your browser at http://localhost:8501"
+echo ""
+echo "Press Ctrl+C to stop the server"
+echo ""
+
+streamlit run web_app.py

web_app.py

@@ -0,0 +1,296 @@
+"""
+AI Personas for Urban Planning - Web UI
+
+A beautiful web interface for interacting with urban planning stakeholder personas.
+
+Usage:
+    streamlit run web_app.py
+"""
+
+import streamlit as st
+import sys
+from pathlib import Path
+
+# Add src to path
+sys.path.insert(0, str(Path(__file__).parent))
+
+from src.pipeline.query_engine import QueryEngine
+
+
+# Page configuration
+st.set_page_config(
+    page_title="AI Personas - Urban Planning",
+    page_icon="🏙️",
+    layout="wide",
+    initial_sidebar_state="collapsed"
+)
+
+# Custom CSS for better styling
+st.markdown("""
+<style>
+    .persona-card {
+        padding: 1rem;
+        border-radius: 10px;
+        margin-bottom: 0.5rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: 2px solid transparent;
+    }
+    .persona-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    }
+    .persona-card.selected {
+        border: 2px solid #1f77b4;
+        background-color: #e7f3ff;
+    }
+    .persona-avatar {
+        font-size: 3rem;
+        text-align: center;
+        margin-bottom: 0.5rem;
+    }
+    .persona-name {
+        font-weight: bold;
+        font-size: 1.1rem;
+        text-align: center;
+        margin-bottom: 0.3rem;
+    }
+    .persona-role {
+        font-size: 0.9rem;
+        color: #666;
+        text-align: center;
+    }
+    .chat-message {
+        padding: 1rem;
+        border-radius: 10px;
+        margin-bottom: 1rem;
+    }
+    .user-message {
+        background-color: #e3f2fd;
+        border-left: 4px solid #2196f3;
+    }
+    .assistant-message {
+        background-color: #f5f5f5;
+        border-left: 4px solid #4caf50;
+    }
+    .stButton>button {
+        width: 100%;
+        border-radius: 5px;
+        height: 3rem;
+        font-weight: bold;
+    }
+</style>
+""", unsafe_allow_html=True)
+
+
+# Initialize session state
+if "engine" not in st.session_state:
+    with st.spinner("🔧 Initializing AI Personas system..."):
+        st.session_state.engine = QueryEngine()
+        st.session_state.engine.test_system()
+
+if "selected_persona" not in st.session_state:
+    st.session_state.selected_persona = None
+
+if "conversation_history" not in st.session_state:
+    st.session_state.conversation_history = []
+
+if "current_question" not in st.session_state:
+    st.session_state.current_question = ""
+
+
+# Persona definitions with avatars and colors
+PERSONAS = {
+    "sarah_chen": {
+        "name": "Sarah Chen",
+        "role": "Urban Planner",
+        "avatar": "🌱",
+        "color": "#4CAF50",
+        "tagline": "Progressive, sustainability-focused"
+    },
+    "marcus_thompson": {
+        "name": "Marcus Thompson",
+        "role": "Business Owner",
+        "avatar": "🏪",
+        "color": "#FF9800",
+        "tagline": "Pragmatic, economy-focused"
+    },
+    "elena_rodriguez": {
+        "name": "Dr. Elena Rodriguez",
+        "role": "Transportation Engineer",
+        "avatar": "🚇",
+        "color": "#2196F3",
+        "tagline": "Data-driven, safety-first"
+    },
+    "james_obrien": {
+        "name": "James O'Brien",
+        "role": "Long-time Resident",
+        "avatar": "🏡",
+        "color": "#795548",
+        "tagline": "Traditional, community-focused"
+    },
+    "priya_patel": {
+        "name": "Priya Patel",
+        "role": "Housing Advocate",
+        "avatar": "✊",
+        "color": "#E91E63",
+        "tagline": "Activist, equity-focused"
+    },
+    "david_kim": {
+        "name": "David Kim",
+        "role": "Real Estate Developer",
+        "avatar": "🏢",
+        "color": "#607D8B",
+        "tagline": "Market-driven, growth-oriented"
+    }
+}
+
+
+def select_persona(persona_id):
+    """Select a persona and clear conversation history"""
+    st.session_state.selected_persona = persona_id
+    st.session_state.conversation_history = []
+
+
+def send_question():
+    """Send question to selected persona"""
+    if not st.session_state.current_question.strip():
+        return
+
+    if not st.session_state.selected_persona:
+        st.error("Please select a persona first!")
+        return
+
+    question = st.session_state.current_question
+
+    # Add question to history
+    st.session_state.conversation_history.append({
+        "role": "user",
+        "content": question
+    })
+
+    # Get response
+    with st.spinner(f"💭 {PERSONAS[st.session_state.selected_persona]['name']} is thinking..."):
+        response = st.session_state.engine.query(
+            persona_id=st.session_state.selected_persona,
+            question=question,
+            context_id="downtown_district"
+        )
+
+    # Add response to history
+    st.session_state.conversation_history.append({
+        "role": "assistant",
+        "content": response.response
+    })
+
+    # Clear input
+    st.session_state.current_question = ""
+
+
+# Main layout
+st.title("🏙️ AI Personas for Urban Planning")
+st.markdown("### Explore diverse stakeholder perspectives on urban planning issues")
+
+# Create two-column layout
+left_col, right_col = st.columns([2, 1])
+
+# LEFT COLUMN: Chat Interface
+with left_col:
+    st.markdown("### 💬 Conversation")
+
+    # Show selected persona
+    if st.session_state.selected_persona:
+        persona = PERSONAS[st.session_state.selected_persona]
+        st.info(f"**Currently talking with:** {persona['avatar']} {persona['name']} ({persona['role']})")
+    else:
+        st.warning("👉 **Select a persona from the right panel to start!**")
+
+    # Input area
+    col1, col2 = st.columns([5, 1])
+    with col1:
+        question = st.text_input(
+            "Your question:",
+            value=st.session_state.current_question,
+            key="question_input",
+            placeholder="e.g., What do you think about the bike lane proposal?",
+            label_visibility="collapsed"
+        )
+        st.session_state.current_question = question
+
+    with col2:
+        st.button("Send", on_click=send_question, type="primary", use_container_width=True)
+
+    # Quick suggestions
+    if not st.session_state.conversation_history:
+        st.markdown("**💡 Try asking:**")
+        suggestions = [
+            "What's the most important issue facing downtown?",
+            "Should we allow food trucks in the plaza?",
+            "How can we make the city more sustainable?",
+            "What do you think about the affordable housing crisis?"
+        ]
+        cols = st.columns(2)
+        for i, suggestion in enumerate(suggestions):
+            with cols[i % 2]:
+                if st.button(suggestion, key=f"suggestion_{i}", use_container_width=True):
+                    st.session_state.current_question = suggestion
+                    st.rerun()
+
+    # Conversation history
+    if st.session_state.conversation_history:
+        st.markdown("---")
+        st.markdown("### 📜 Conversation History")
+
+        for msg in st.session_state.conversation_history:
+            if msg["role"] == "user":
+                st.markdown(f"""
+                <div class="chat-message user-message">
+                    <strong>🙋 You:</strong><br>
+                    {msg["content"]}
+                </div>
+                """, unsafe_allow_html=True)
+            else:
+                persona = PERSONAS[st.session_state.selected_persona]
+                st.markdown(f"""
+                <div class="chat-message assistant-message">
+                    <strong>{persona['avatar']} {persona['name']}:</strong><br>
+                    {msg["content"]}
+                </div>
+                """, unsafe_allow_html=True)
+
+        # Clear conversation button
+        if st.button("🗑️ Clear Conversation", use_container_width=True):
+            st.session_state.conversation_history = []
+            st.rerun()
+
+
+# RIGHT COLUMN: Persona Selection
+with right_col:
+    st.markdown("### 👥 Select a Persona")
+    st.markdown("Click to start conversation")
+
+    for persona_id, persona in PERSONAS.items():
+        is_selected = st.session_state.selected_persona == persona_id
+
+        # Create persona card
+        if st.button(
+            f"{persona['avatar']}\n\n**{persona['name']}**\n\n{persona['role']}\n\n_{persona['tagline']}_",
+            key=f"persona_{persona_id}",
+            use_container_width=True,
+            type="primary" if is_selected else "secondary"
+        ):
+            select_persona(persona_id)
+            st.rerun()
+
+
+# Footer
+st.markdown("---")
+st.markdown("""
+<div style='text-align: center; color: #666; padding: 1rem;'>
+    <small>
+        AI Personas for Urban Planning • Phase 1 •
+        Powered by Claude 3 Haiku •
+        <a href='https://github.com' target='_blank'>View Code</a>
+    </small>
+</div>
+""", unsafe_allow_html=True)