Complete dashboard rebuild — all 13 tasks, 4 domains

README.md

@@ -1,6 +1,6 @@
 ---
-title: Customer Support Triage — OpenEnv
-emoji: 🎫
+title: OpenEnv — Multi-Domain
+emoji: 🌐
 colorFrom: indigo
 colorTo: purple
 sdk: docker
@@ -9,15 +9,15 @@ license: apache-2.0
 tags:
   - openenv
   - reinforcement-learning
-  - customer-support
+  - agents
   - nlp
-  - agent-environment
-short_description: OpenEnv environment for customer support triage agents
+  - multi-domain
+short_description: OpenEnv multi-domain evaluation environment for AI agents
 ---
 
-# Customer Support Triage — OpenEnv Environment
+# OpenEnv — Multi-Domain AI Agent Environment
 
-> A real-world OpenEnv environment where AI agents learn to **triage, classify, prioritize, and resolve** customer support tickets across a SaaS platform.
+> A comprehensive OpenEnv environment where AI agents are evaluated across 13 complex real-world tasks spanning 4 professional domains: **Customer Support, Legal Review, Clinical Triage, and Software Engineering (PR Review)**.
 
 [![OpenEnv](https://img.shields.io/badge/OpenEnv-v1.0.0-6c63ff)](https://openenv.dev)
 [![HuggingFace Spaces](https://img.shields.io/badge/🤗%20Spaces-openenv--support-yellow)](https://huggingface.co/spaces)
@@ -27,86 +27,44 @@ short_description: OpenEnv environment for customer support triage agents
 
 ## 🎯 Environment Description
 
-Customer support triage is a high-stakes, real-world task that every software company faces. Agents must:
+To build general-purpose AI agents, we must evaluate them outside of traditional multiple-choice benchmarks. This environment provides 13 interactive, multi-step tasks across diverse verticals to test an agent's reasoning, tool use, and decision-making capabilities. 
 
-- **Classify** incoming tickets accurately by category and urgency
-- **Draft** professional, factually grounded customer responses using a knowledge base
-- **Manage** a live queue of tickets across specialized agents under SLA constraints
-
-This environment models realistic support scenarios including billing disputes, API outages, SSO failures, account transfers, feature requests, and abuse reports — with varying customer tiers, sentiment signals, and time pressure.
+Agents must classify data, identify risks, draft domain-specific responses, and manage queues under dynamic constraints.
 
 ---
 
-## 📋 Tasks
-
-| Task | ID | Difficulty | Max Steps | Pass Threshold |
-|------|----|-----------|-----------|----------------|
-| Ticket Classification | `ticket_classification` | 🟢 Easy | 10 | 0.70 |
-| Response Drafting | `response_drafting` | 🟡 Medium | 6 | 0.60 |
-| SLA Queue Management | `queue_management` | 🔴 Hard | 40 | 0.50 |
-
-### Task 1: Ticket Classification (Easy)
-Classify 10 incoming tickets by **category** (billing/technical/account/feature_request/abuse/unknown) and **priority** (P1-P4). Scores 0.6 for correct category, 0.4 for correct priority (with partial credit for adjacent priority levels).
-
-### Task 2: Response Drafting (Medium)
-Draft complete customer-facing responses to pre-classified tickets. Graded on 5 dimensions using a deterministic rubric:
-- KB reference (25%) — uses relevant knowledge base information
-- Issue addressed (30%) — directly addresses the customer's specific problem
-- Actionable steps (20%) — provides concrete next steps
-- Tone & empathy (15%) — professional, empathetic language
-- No hallucination (10%) — no false promises or invented information
-
-### Task 3: SLA Queue Management (Hard)
-Manage a queue of 20 mixed tickets across 3 specialized agents. Actions: `assign_ticket`, `escalate`, `resolve`, `close`, `no_op`. Score based on:
-- Resolution rate (35%)
-- SLA compliance (35%)
-- First-contact resolution rate (20%)
-- Escalation penalty (-20% if excessive)
-
----
-
-## 🔌 Action & Observation Spaces
-
-### Observation
-```python
-class Observation(BaseModel):
-    task_id: str
-    step: int
-    current_ticket: Optional[Ticket]       # For tasks 1 & 2
-    ticket_queue: List[Ticket]             # For task 3
-    agents: List[AgentInfo]                # For task 3
-    knowledge_base: List[KBArticle]        # For task 2
-    sla_status: Dict[str, str]             # ticket_id -> ok/warning/breached
-    valid_actions: List[str]
-    episode_done: bool
-    info: Dict[str, Any]
-```
-
-### Action
-```python
-class Action(BaseModel):
-    action_type: AgentAction               # classify | draft_response | assign_ticket | escalate | resolve | close | no_op
-    ticket_id: Optional[str]
-    category: Optional[TicketCategory]     # For classify
-    priority: Optional[TicketPriority]     # For classify
-    response_text: Optional[str]           # For draft_response
-    target_agent_id: Optional[str]         # For assign_ticket / escalate
-    resolution_summary: Optional[str]      # For resolve
-    reasoning: Optional[str]              # Optional transparency field
-```
-
-### Reward
-```python
-class Reward(BaseModel):
-    total: float                           # -1.0 to 1.0
-    classification_accuracy: float
-    response_quality: float
-    sla_compliance: float
-    first_contact_resolution: float
-    customer_satisfaction: float
-    penalty: float                         # Negative component
-    breakdown: Dict[str, float]            # Per-dimension scores
-```
+## 📋 Tasks & Domains
+
+This environment features 13 tasks across 4 distinct professional domains:
+
+### 🎫 Customer Support
+| Task | ID | Difficulty | Max Steps |
+|------|----|-----------|-----------|
+| Ticket Classification | `ticket_classification` | 🟢 Easy | 10 |
+| Response Drafting | `response_drafting` | 🟡 Medium | 6 |
+| SLA Queue Management | `queue_management` | 🔴 Hard | 40 |
+| Multi-Turn De-escalation | `multi_turn_conversation` | 🟣 Very Hard | 8 |
+
+### ⚖️ Legal Review
+| Task | ID | Difficulty | Max Steps |
+|------|----|-----------|-----------|
+| Clause Identification | `legal_clause_identification` | 🟢 Easy | 10 |
+| Risk Flagging | `legal_risk_flagging` | 🟡 Medium | 10 |
+| Clause Redlining | `legal_clause_redlining` | 🔴 Hard | 5 |
+
+### 🏥 Clinical Triage
+| Task | ID | Difficulty | Max Steps |
+|------|----|-----------|-----------|
+| Body System Classification | `clinical_triage_classification` | 🟢 Easy | 10 |
+| ESI Level Assignment | `clinical_esi_assignment` | 🟡 Medium | 10 |
+| Triage Note Generation | `clinical_triage_note` | 🔴 Hard | 5 |
+
+### 💻 PR Review (Software Engineering)
+| Task | ID | Difficulty | Max Steps |
+|------|----|-----------|-----------|
+| PR Type Classification | `pr_type_classification` | 🟢 Easy | 10 |
+| Bug Identification | `pr_bug_identification` | 🟡 Medium | 5 |
+| Code Review Comment | `pr_review_comment` | 🔴 Hard | 5 |
 
 ---
 
@@ -136,12 +94,10 @@ docker run -p 7860:7860 openenv-support
 ### Running the Baseline
 
 ```bash
-export OPENAI_API_KEY="sk-..."
 export OPENENV_BASE_URL="http://localhost:7860"
 
-python baseline_inference.py               # All tasks
-python baseline_inference.py --task ticket_classification
-python baseline_inference.py --model gpt-4o
+# Evaluate heuristic baseline on all tasks
+python baseline_inference.py              
 ```
 
 ### OpenEnv Validate
@@ -152,17 +108,6 @@ openenv validate --url http://localhost:7860
 
 ---
 
-## 📊 Baseline Scores
-
-| Agent | Classification | Drafting | Queue Mgmt | Overall |
-|-------|---------------|---------|------------|---------|
-| Heuristic (keyword-based) | 0.72 | 0.61 | 0.54 | 0.62 |
-| GPT-4o-mini | ~0.85 | ~0.74 | ~0.61 | ~0.73 |
-
-> Scores are deterministic given the same random seed. Run `/baseline` endpoint to reproduce.
-
----
-
 ## 🌐 API Reference
 
 | Endpoint | Method | Description |
@@ -188,16 +133,24 @@ openenv-support/
 ├── tasks/
 │   ├── task1_classification.py
 │   ├── task2_drafting.py
-│   └── task3_queue.py
+│   ├── task3_queue.py
+│   ├── task4_multiturn.py
+│   ├── legal_tasks.py
+│   ├── clinical_tasks.py
+│   └── pr_tasks.py
 ├── graders/
-│   └── baseline_agent.py    # Heuristic baseline
+│   └── baseline_agent.py    # Auto-grader heuristics
 ├── data/
-│   ├── tickets.py           # Synthetic ticket dataset
-│   └── knowledge_base.py    # KB articles
+│   ├── tickets.py
+│   ├── knowledge_base.py
+│   ├── legal_data.py
+│   ├── clinical_data.py
+│   └── pr_data.py
 ├── static/
-│   └── index.html           # Interactive dashboard
+│   └── index.html           # Interactive multi-domain dashboard
 ├── openenv.yaml             # OpenEnv metadata
-├── baseline_inference.py    # LLM baseline script
+├── baseline_inference.py    # Automated test runner for baseline
+├── validate.py              # Validation script
 ├── requirements.txt
 ├── Dockerfile
 └── README.md
@@ -207,8 +160,8 @@ openenv-support/
 
 ## 🏗️ Design Decisions
 
-**Why customer support?** It's a universal, high-value real-world task. Every SaaS company needs it. The task has natural difficulty progression (classification → response quality → queue optimization under constraints) and rich partial reward signals at every step.
+**Why multi-domain?** Real-world agents will need to operate across various specific verticals. Providing environments in Support, Legal, Clinical, and Engineering proves that an agent architecture is truly generalizable and robust.
 
-**Why deterministic graders?** The rubric uses keyword matching, heuristic NLP signals, and exact comparisons — no LLM-in-the-loop for grading, ensuring reproducible scores across runs.
+**Why deterministic graders?** The rubric uses keyword matching, heuristic NLP signals (via \`sentence-transformers\`), semantic similarities, and exact comparisons — minimizing LLM-in-the-loop dependencies for grading and ensuring reproducible scores across runs for all 13 tasks.
 
-**Reward shaping:** Every step returns a non-zero reward signal. Even incorrect actions return small penalties rather than zero, giving RL agents a gradient to follow rather than a sparse reward landscape.
+**Dynamic Reward Shaping:** Every step returns a non-zero reward signal. Even incorrect actions return small penalties rather than zero, giving RL agents a gradient to follow rather than a sparse reward landscape.

static/index.html

@@ -3,780 +3,294 @@
 <head>
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-<title>Customer Support Triage — OpenEnv</title>
+<title>OpenEnv — Multi-Domain AI Agent Environment</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet">
 <style>
   :root {
-    --bg: #0a0a0f;
-    --surface: #111118;
-    --surface2: #1a1a26;
-    --border: #2a2a40;
+    --bg: #07070f;
+    --surface: #0f0f1a;
+    --surface2: #181826;
+    --border: #252538;
     --accent: #6c63ff;
     --accent2: #ff6584;
     --accent3: #43e97b;
     --accent4: #f7971e;
+    --accent5: #00d2ff;
     --text: #e8e8f0;
-    --text-dim: #7878a0;
+    --text-dim: #6868a0;
     --mono: 'Space Mono', monospace;
     --sans: 'Syne', sans-serif;
-    --radius: 12px;
-    --glow: 0 0 24px rgba(108,99,255,0.15);
+    --radius: 10px;
   }
-
   * { box-sizing: border-box; margin: 0; padding: 0; }
-
-  body {
-    background: var(--bg);
-    color: var(--text);
-    font-family: var(--sans);
-    min-height: 100vh;
-    overflow-x: hidden;
-  }
-
-  /* Background grid */
+  body { background: var(--bg); color: var(--text); font-family: var(--sans); min-height: 100vh; overflow-x: hidden; }
   body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    background-image:
-      linear-gradient(rgba(108,99,255,0.04) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(108,99,255,0.04) 1px, transparent 1px);
-    background-size: 40px 40px;
-    pointer-events: none;
-    z-index: 0;
+    content: ''; position: fixed; inset: 0;
+    background-image: linear-gradient(rgba(108,99,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(108,99,255,0.03) 1px, transparent 1px);
+    background-size: 40px 40px; pointer-events: none; z-index: 0;
   }
 
-  .layout {
-    position: relative;
-    z-index: 1;
-    display: grid;
-    grid-template-rows: auto 1fr;
-    min-height: 100vh;
-  }
+  /* ── Layout ── */
+  .layout { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }
+  .main { display: grid; grid-template-columns: 260px 1fr 300px; height: calc(100vh - 72px); overflow: hidden; }
 
   /* ── Header ── */
   header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px 32px;
-    border-bottom: 1px solid var(--border);
-    background: rgba(10,10,15,0.8);
-    backdrop-filter: blur(12px);
-    position: sticky;
-    top: 0;
-    z-index: 100;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 16px 28px; border-bottom: 1px solid var(--border);
+    background: rgba(7,7,15,0.9); backdrop-filter: blur(12px);
+    position: sticky; top: 0; z-index: 100;
   }
-
-  .logo {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
+  .logo { display: flex; align-items: center; gap: 12px; }
   .logo-icon {
-    width: 36px;
-    height: 36px;
+    width: 36px; height: 36px; border-radius: 8px;
     background: linear-gradient(135deg, var(--accent), var(--accent2));
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
+    display: flex; align-items: center; justify-content: center; font-size: 18px;
   }
-
-  .logo-text {
-    font-size: 16px;
-    font-weight: 700;
-    letter-spacing: -0.3px;
+  .logo-name { font-size: 15px; font-weight: 800; letter-spacing: -0.3px; }
+  .logo-sub { font-family: var(--mono); font-size: 10px; color: var(--text-dim); letter-spacing: 1.5px; margin-top: 2px; }
+  .header-right { display: flex; align-items: center; gap: 16px; }
+  .status-pill {
+    display: flex; align-items: center; gap: 6px;
+    font-family: var(--mono); font-size: 11px; color: var(--accent3);
+    background: rgba(67,233,123,0.08); border: 1px solid rgba(67,233,123,0.2);
+    padding: 4px 12px; border-radius: 20px;
   }
-
-  .logo-sub {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--text-dim);
-    letter-spacing: 1px;
-    margin-top: 1px;
-  }
-
-  .header-status {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--accent3);
-  }
-
-  .pulse {
-    width: 8px;
-    height: 8px;
-    background: var(--accent3);
-    border-radius: 50%;
-    animation: pulse 2s infinite;
-  }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.5; transform: scale(0.8); }
-  }
-
-  /* ── Main content ── */
-  .main {
-    display: grid;
-    grid-template-columns: 280px 1fr 320px;
-    gap: 0;
-    height: calc(100vh - 77px);
-    overflow: hidden;
+  .pulse { width: 7px; height: 7px; background: var(--accent3); border-radius: 50%; animation: pulse 2s infinite; }
+  @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }
+  .overall-badge {
+    font-family: var(--mono); font-size: 12px; font-weight: 700;
+    color: var(--accent); background: rgba(108,99,255,0.1);
+    border: 1px solid rgba(108,99,255,0.3); padding: 4px 12px; border-radius: 20px;
   }
 
   /* ── Sidebar ── */
-  .sidebar {
-    border-right: 1px solid var(--border);
-    padding: 24px 20px;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-  }
-
-  .sidebar-section-label {
-    font-family: var(--mono);
-    font-size: 10px;
-    color: var(--text-dim);
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
+  .sidebar { border-right: 1px solid var(--border); padding: 16px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
+  .domain-label {
+    font-family: var(--mono); font-size: 9px; color: var(--text-dim);
+    letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px;
+    display: flex; align-items: center; gap: 6px;
   }
-
+  .domain-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
   .task-card {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 16px;
-    cursor: pointer;
-    transition: all 0.2s;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .task-card::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background: var(--accent);
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
-  .task-card:hover, .task-card.active {
-    border-color: var(--accent);
-    background: var(--surface2);
-    box-shadow: var(--glow);
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 10px 12px; cursor: pointer;
+    transition: all 0.15s; position: relative; overflow: hidden; margin-bottom: 4px;
   }
-
+  .task-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0; transition: opacity 0.15s; }
+  .task-card:hover { border-color: rgba(108,99,255,0.4); background: var(--surface2); }
+  .task-card.active { border-color: var(--accent); background: var(--surface2); }
   .task-card.active::before { opacity: 1; }
-
-  .task-name {
-    font-weight: 700;
-    font-size: 14px;
-    margin-bottom: 4px;
-  }
-
-  .task-meta {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 8px;
-  }
-
-  .badge {
-    font-family: var(--mono);
-    font-size: 10px;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-weight: 700;
-    letter-spacing: 0.5px;
-  }
-
-  .badge-easy { background: rgba(67,233,123,0.15); color: var(--accent3); }
-  .badge-medium { background: rgba(247,151,30,0.15); color: var(--accent4); }
-  .badge-hard { background: rgba(255,101,132,0.15); color: var(--accent2); }
-
-  .score-ring {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--text-dim);
-  }
-
-  /* ── Center panel ── */
-  .center {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
+  .task-name { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
+  .task-meta { display: flex; align-items: center; gap: 6px; }
+  .badge { font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 700; letter-spacing: 0.5px; }
+  .badge-easy { background: rgba(67,233,123,0.12); color: var(--accent3); }
+  .badge-medium { background: rgba(247,151,30,0.12); color: var(--accent4); }
+  .badge-hard { background: rgba(255,101,132,0.12); color: var(--accent2); }
+  .badge-veryhard { background: rgba(108,99,255,0.15); color: var(--accent); }
+  .task-score { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-left: auto; }
+
+  /* Domain colors for left bar */
+  .domain-support .task-card::before { background: var(--accent); }
+  .domain-legal .task-card::before { background: var(--accent4); }
+  .domain-clinical .task-card::before { background: var(--accent2); }
+  .domain-engineering .task-card::before { background: var(--accent5); }
+
+  /* ── Center ── */
+  .center { display: flex; flex-direction: column; overflow: hidden; }
   .center-header {
-    padding: 20px 28px;
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-shrink: 0;
-  }
-
-  .center-title {
-    font-size: 20px;
-    font-weight: 800;
-  }
-
-  .action-bar {
-    display: flex;
-    gap: 10px;
-  }
-
-  .btn {
-    font-family: var(--mono);
-    font-size: 12px;
-    padding: 8px 18px;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: all 0.15s;
-    font-weight: 700;
-    letter-spacing: 0.5px;
-  }
-
-  .btn-primary {
-    background: var(--accent);
-    color: #fff;
-  }
-
+    padding: 16px 24px; border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
+  }
+  .center-title { font-size: 18px; font-weight: 800; }
+  .center-sub { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-top: 3px; }
+  .action-bar { display: flex; gap: 8px; }
+  .btn { font-family: var(--mono); font-size: 11px; padding: 7px 16px; border-radius: 8px; border: none; cursor: pointer; transition: all 0.15s; font-weight: 700; letter-spacing: 0.5px; }
+  .btn-primary { background: var(--accent); color: #fff; }
   .btn-primary:hover { background: #7c74ff; transform: translateY(-1px); }
-
-  .btn-secondary {
-    background: var(--surface2);
-    color: var(--text);
-    border: 1px solid var(--border);
-  }
-
+  .btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
   .btn-secondary:hover { border-color: var(--accent); }
-
-  .btn-danger {
-    background: rgba(255,101,132,0.15);
-    color: var(--accent2);
-    border: 1px solid rgba(255,101,132,0.3);
-  }
-
-  .btn-success {
-    background: rgba(67,233,123,0.15);
-    color: var(--accent3);
-    border: 1px solid rgba(67,233,123,0.3);
-  }
-
-  .center-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 24px 28px;
-  }
-
-  /* ── Ticket display ── */
-  .ticket-card {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 24px;
-    margin-bottom: 16px;
-    animation: slideIn 0.3s ease;
-  }
-
-  @keyframes slideIn {
-    from { opacity: 0; transform: translateY(12px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  .ticket-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    margin-bottom: 16px;
-    gap: 16px;
-  }
-
-  .ticket-id {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--accent);
-    margin-bottom: 6px;
-  }
-
-  .ticket-subject {
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 1.3;
-  }
-
-  .ticket-tier {
-    flex-shrink: 0;
-  }
-
-  .tier-badge {
-    font-family: var(--mono);
-    font-size: 10px;
-    padding: 4px 10px;
-    border-radius: 6px;
-    font-weight: 700;
-  }
-
-  .tier-enterprise { background: rgba(108,99,255,0.2); color: var(--accent); border: 1px solid rgba(108,99,255,0.3); }
-  .tier-pro { background: rgba(247,151,30,0.15); color: var(--accent4); border: 1px solid rgba(247,151,30,0.3); }
-  .tier-free { background: rgba(120,120,160,0.15); color: var(--text-dim); border: 1px solid var(--border); }
-
-  .ticket-body {
-    font-size: 14px;
-    line-height: 1.7;
-    color: #c0c0d8;
-    padding: 16px;
-    background: var(--surface2);
-    border-radius: 8px;
-    border-left: 3px solid var(--border);
-    margin-bottom: 16px;
-  }
-
-  .ticket-meta-row {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-  }
-
-  .meta-chip {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--text-dim);
-    background: var(--surface2);
-    padding: 4px 10px;
-    border-radius: 6px;
-    border: 1px solid var(--border);
-  }
-
-  .sentiment-bar {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 12px;
-  }
-
-  .sentiment-label {
-    font-family: var(--mono);
-    font-size: 10px;
-    color: var(--text-dim);
-    width: 80px;
-    flex-shrink: 0;
-  }
-
-  .sentiment-track {
-    flex: 1;
-    height: 4px;
-    background: var(--surface2);
-    border-radius: 2px;
-    overflow: hidden;
-  }
-
-  .sentiment-fill {
-    height: 100%;
-    border-radius: 2px;
-    transition: width 0.5s ease;
-  }
-
-  /* ── KB articles ── */
-  .kb-section { margin-top: 20px; }
-
-  .kb-label {
-    font-family: var(--mono);
-    font-size: 10px;
-    color: var(--text-dim);
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    margin-bottom: 10px;
-  }
-
-  .kb-article {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 14px;
-    margin-bottom: 8px;
-  }
-
-  .kb-article-title {
-    font-size: 13px;
-    font-weight: 700;
-    margin-bottom: 6px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .kb-article-id {
-    font-family: var(--mono);
-    font-size: 10px;
-    color: var(--accent);
-  }
-
-  .kb-article-content {
-    font-size: 12px;
-    color: var(--text-dim);
-    line-height: 1.6;
-  }
+  .center-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
+
+  /* ── Ticket card ── */
+  .ticket-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 14px; animation: slideIn 0.25s ease; }
+  @keyframes slideIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
+  .ticket-id { font-family: var(--mono); font-size: 10px; color: var(--accent); margin-bottom: 4px; }
+  .ticket-subject { font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; }
+  .ticket-body { font-size: 13px; line-height: 1.7; color: #b0b0cc; padding: 14px; background: var(--surface2); border-radius: 8px; border-left: 3px solid var(--border); margin-bottom: 14px; }
+  .ticket-meta { display: flex; gap: 10px; flex-wrap: wrap; }
+  .meta-chip { font-family: var(--mono); font-size: 10px; color: var(--text-dim); background: var(--surface2); padding: 3px 8px; border-radius: 5px; border: 1px solid var(--border); }
+  .tier-enterprise { color: var(--accent); border-color: rgba(108,99,255,0.3); }
+  .tier-pro { color: var(--accent4); border-color: rgba(247,151,30,0.3); }
+
+  /* ── Domain cards (legal/clinical/pr) ── */
+  .domain-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 14px; animation: slideIn 0.25s ease; }
+  .domain-card-label { font-family: var(--mono); font-size: 10px; color: var(--text-dim); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; }
+  .domain-card-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; line-height: 1.4; }
+  .domain-card-body { font-size: 13px; line-height: 1.7; color: #b0b0cc; padding: 14px; background: var(--surface2); border-radius: 8px; border-left: 3px solid var(--border); }
+  .code-diff { font-family: var(--mono); font-size: 11px; background: #0a0a14; border: 1px solid var(--border); border-radius: 8px; padding: 14px; overflow-x: auto; line-height: 1.6; white-space: pre; }
+  .diff-add { color: var(--accent3); }
+  .diff-remove { color: var(--accent2); }
+  .diff-header { color: var(--text-dim); }
 
   /* ── Action form ── */
-  .action-form {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 24px;
-    margin-top: 16px;
-  }
-
-  .form-title {
-    font-weight: 700;
-    font-size: 15px;
-    margin-bottom: 16px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .form-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 12px;
-    margin-bottom: 12px;
-  }
-
-  .form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  .form-label {
-    font-family: var(--mono);
-    font-size: 10px;
-    color: var(--text-dim);
-    letter-spacing: 1px;
-    text-transform: uppercase;
-  }
-
+  .action-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-top: 14px; }
+  .form-title { font-weight: 700; font-size: 14px; margin-bottom: 14px; }
+  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
+  .form-group { display: flex; flex-direction: column; gap: 5px; }
+  .form-label { font-family: var(--mono); font-size: 9px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; }
   .form-select, .form-textarea, .form-input {
-    background: var(--surface2);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    color: var(--text);
-    font-family: var(--mono);
-    font-size: 13px;
-    padding: 10px 12px;
-    transition: border-color 0.2s;
-    width: 100%;
-  }
-
-  .form-select:focus, .form-textarea:focus, .form-input:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
-
-  .form-textarea {
-    font-family: var(--sans);
-    font-size: 14px;
-    resize: vertical;
-    min-height: 120px;
-    line-height: 1.6;
-  }
-
-  .submit-row {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 16px;
+    background: var(--surface2); border: 1px solid var(--border); border-radius: 7px;
+    color: var(--text); font-family: var(--mono); font-size: 12px; padding: 8px 10px;
+    transition: border-color 0.15s; width: 100%;
   }
+  .form-select:focus, .form-textarea:focus, .form-input:focus { outline: none; border-color: var(--accent); }
+  .form-textarea { font-family: var(--sans); font-size: 13px; resize: vertical; min-height: 100px; line-height: 1.6; }
+  .submit-row { display: flex; justify-content: flex-end; margin-top: 14px; }
 
   /* ── Right panel ── */
-  .right-panel {
-    border-left: 1px solid var(--border);
-    padding: 24px 20px;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-  }
-
-  /* ── Score display ── */
-  .score-card {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 20px;
-  }
-
-  .score-card-title {
-    font-family: var(--mono);
-    font-size: 10px;
-    color: var(--text-dim);
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    margin-bottom: 16px;
-  }
-
-  .big-score {
-    font-family: var(--mono);
-    font-size: 48px;
-    font-weight: 700;
-    line-height: 1;
-    margin-bottom: 4px;
-  }
-
-  .score-label {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--text-dim);
-  }
-
-  .breakdown-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 0;
-    border-bottom: 1px solid rgba(42,42,64,0.5);
-  }
-
+  .right-panel { border-left: 1px solid var(--border); padding: 16px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
+  .panel-label { font-family: var(--mono); font-size: 9px; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
+  .score-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
+  .big-score { font-family: var(--mono); font-size: 42px; font-weight: 700; line-height: 1; }
+  .score-label { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-top: 4px; }
+  .breakdown-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(37,37,56,0.5); }
   .breakdown-row:last-child { border-bottom: none; }
-
-  .breakdown-label {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--text-dim);
-  }
-
-  .breakdown-val {
-    font-family: var(--mono);
-    font-size: 12px;
-    font-weight: 700;
-  }
-
-  .val-good { color: var(--accent3); }
-  .val-mid { color: var(--accent4); }
-  .val-bad { color: var(--accent2); }
-
-  /* ── Reward history chart ── */
-  .mini-chart {
-    height: 60px;
-    display: flex;
-    align-items: flex-end;
-    gap: 3px;
-    padding-top: 8px;
-  }
-
-  .bar {
-    flex: 1;
-    border-radius: 3px 3px 0 0;
-    min-height: 4px;
-    transition: height 0.3s ease;
-  }
-
-  /* ── Queue list ── */
-  .queue-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    margin-bottom: 6px;
-    font-size: 12px;
-    transition: border-color 0.2s;
-  }
-
-  .queue-item:hover { border-color: var(--accent); }
-
-  .priority-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  .p1 { background: var(--accent2); box-shadow: 0 0 6px var(--accent2); }
-  .p2 { background: var(--accent4); }
-  .p3 { background: var(--accent3); }
-  .p4 { background: var(--text-dim); }
-
-  .queue-subject {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--text);
-  }
-
-  .queue-sla {
-    font-family: var(--mono);
-    font-size: 10px;
-    color: var(--text-dim);
-    flex-shrink: 0;
-  }
-
-  .sla-breached { color: var(--accent2); }
-  .sla-warning { color: var(--accent4); }
-  .sla-ok { color: var(--accent3); }
-
-  /* ── Agent cards ── */
-  .agent-card {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 12px;
-    margin-bottom: 8px;
-  }
-
-  .agent-name {
-    font-size: 13px;
-    font-weight: 700;
-    margin-bottom: 8px;
-  }
-
-  .load-bar-track {
-    height: 6px;
-    background: var(--surface2);
-    border-radius: 3px;
-    overflow: hidden;
-    margin-top: 6px;
-  }
-
-  .load-bar-fill {
-    height: 100%;
-    border-radius: 3px;
-    background: linear-gradient(90deg, var(--accent3), var(--accent));
-    transition: width 0.4s ease;
-  }
-
-  .load-bar-fill.overloaded { background: linear-gradient(90deg, var(--accent4), var(--accent2)); }
-
-  /* ── Log ── */
-  .log-entry {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--text-dim);
-    padding: 6px 10px;
-    border-radius: 4px;
-    margin-bottom: 4px;
-    background: var(--surface);
-  }
-
-  .log-reward-pos { color: var(--accent3); }
-  .log-reward-neg { color: var(--accent2); }
-
-  /* ── Empty state ── */
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 300px;
-    color: var(--text-dim);
-    text-align: center;
-    gap: 12px;
-  }
-
-  .empty-icon { font-size: 48px; opacity: 0.3; }
-  .empty-text { font-size: 14px; }
+  .breakdown-label { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
+  .breakdown-val { font-family: var(--mono); font-size: 11px; font-weight: 700; }
+  .val-good { color: var(--accent3); } .val-mid { color: var(--accent4); } .val-bad { color: var(--accent2); }
+  .mini-chart { height: 50px; display: flex; align-items: flex-end; gap: 2px; }
+  .bar { flex: 1; border-radius: 2px 2px 0 0; min-height: 3px; transition: height 0.3s ease; }
+  .log-entry { font-family: var(--mono); font-size: 10px; color: var(--text-dim); padding: 5px 8px; border-radius: 4px; margin-bottom: 3px; background: var(--surface); }
+  .log-pos { color: var(--accent3); } .log-neg { color: var(--accent2); }
+
+  /* ── Queue ── */
+  .queue-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; margin-bottom: 5px; font-size: 11px; }
+  .priority-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+  .p1 { background: var(--accent2); box-shadow: 0 0 5px var(--accent2); } .p2 { background: var(--accent4); } .p3 { background: var(--accent3); } .p4 { background: var(--text-dim); }
+  .queue-subject { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
   /* ── Episode done ── */
-  .episode-done {
-    background: linear-gradient(135deg, var(--surface2), rgba(108,99,255,0.08));
-    border: 1px solid rgba(108,99,255,0.3);
-    border-radius: var(--radius);
-    padding: 32px;
-    text-align: center;
-    animation: slideIn 0.4s ease;
-  }
-
-  .done-icon { font-size: 48px; margin-bottom: 16px; }
-  .done-title { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
-  .done-score { font-family: var(--mono); font-size: 64px; font-weight: 700; color: var(--accent); }
+  .episode-done { background: linear-gradient(135deg, var(--surface2), rgba(108,99,255,0.06)); border: 1px solid rgba(108,99,255,0.25); border-radius: var(--radius); padding: 28px; text-align: center; animation: slideIn 0.35s ease; }
+  .done-score { font-family: var(--mono); font-size: 56px; font-weight: 700; color: var(--accent); }
+  .done-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
+  .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 280px; color: var(--text-dim); text-align: center; gap: 10px; }
+  .empty-icon { font-size: 44px; opacity: 0.25; }
 
-  /* Scrollbar */
-  ::-webkit-scrollbar { width: 4px; }
-  ::-webkit-scrollbar-track { background: transparent; }
-  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+  /* ── Agent cards ── */
+  .agent-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 6px; }
+  .agent-name { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
+  .load-bar-track { height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin-top: 5px; }
+  .load-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent3), var(--accent)); transition: width 0.4s; }
+  .load-bar-fill.over { background: linear-gradient(90deg, var(--accent4), var(--accent2)); }
+
+  /* ── Stats bar ── */
+  .stats-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
+  .stat-box { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; text-align: center; }
+  .stat-num { font-family: var(--mono); font-size: 26px; font-weight: 700; }
+  .stat-label { font-family: var(--mono); font-size: 9px; color: var(--text-dim); letter-spacing: 1px; margin-top: 3px; }
+
+  ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
 </style>
 </head>
 <body>
 <div class="layout">
   <header>
     <div class="logo">
-      <div class="logo-icon">🎫</div>
+      <div class="logo-icon">🌐</div>
       <div>
-        <div class="logo-text">Support Triage</div>
-        <div class="logo-sub">OPENENV ENVIRONMENT</div>
+        <div class="logo-name">OpenEnv — Multi-Domain</div>
+        <div class="logo-sub">AI AGENT EVALUATION ENVIRONMENT</div>
       </div>
     </div>
-    <div class="header-status">
-      <div class="pulse"></div>
-      <span id="server-status">LIVE</span>
+    <div class="header-right">
+      <div class="overall-badge">OVERALL: <span id="overall-score">—</span></div>
+      <div class="status-pill"><div class="pulse"></div><span id="server-status">CONNECTING...</span></div>
     </div>
   </header>
 
   <div class="main">
     <!-- Sidebar -->
     <aside class="sidebar">
-      <div>
-        <div class="sidebar-section-label">Tasks</div>
-        <div class="task-card active" id="task-classification" onclick="selectTask('ticket_classification')">
+
+      <div class="domain-support">
+        <div class="domain-label">🎫 Customer Support</div>
+        <div class="task-card active" id="tc-card" onclick="selectTask('ticket_classification')">
           <div class="task-name">Ticket Classification</div>
-          <div style="font-size:12px;color:var(--text-dim);margin-top:4px;">Classify tickets by category & priority</div>
-          <div class="task-meta">
-            <span class="badge badge-easy">EASY</span>
-            <span class="score-ring" id="score-classification">—</span>
-          </div>
+          <div class="task-meta"><span class="badge badge-easy">EASY</span><span class="task-score" id="score-ticket_classification">—</span></div>
         </div>
-        <div class="task-card" id="task-drafting" onclick="selectTask('response_drafting')" style="margin-top:8px;">
+        <div class="task-card" id="rd-card" onclick="selectTask('response_drafting')">
           <div class="task-name">Response Drafting</div>
-          <div style="font-size:12px;color:var(--text-dim);margin-top:4px;">Write customer-facing responses</div>
-          <div class="task-meta">
-            <span class="badge badge-medium">MEDIUM</span>
-            <span class="score-ring" id="score-drafting">—</span>
-          </div>
+          <div class="task-meta"><span class="badge badge-medium">MEDIUM</span><span class="task-score" id="score-response_drafting">—</span></div>
         </div>
-        <div class="task-card" id="task-queue" onclick="selectTask('queue_management')" style="margin-top:8px;">
-          <div class="task-name">Queue Management</div>
-          <div style="font-size:12px;color:var(--text-dim);margin-top:4px;">Manage 20 tickets across 3 agents</div>
-          <div class="task-meta">
-            <span class="badge badge-hard">HARD</span>
-            <span class="score-ring" id="score-queue">—</span>
-          </div>
+        <div class="task-card" id="qm-card" onclick="selectTask('queue_management')">
+          <div class="task-name">SLA Queue Management</div>
+          <div class="task-meta"><span class="badge badge-hard">HARD</span><span class="task-score" id="score-queue_management">—</span></div>
+        </div>
+        <div class="task-card" id="mt-card" onclick="selectTask('multi_turn_conversation')">
+          <div class="task-name">Multi-Turn De-escalation</div>
+          <div class="task-meta"><span class="badge badge-veryhard">VERY HARD</span><span class="task-score" id="score-multi_turn_conversation">—</span></div>
+        </div>
+      </div>
+
+      <div class="domain-legal">
+        <div class="domain-label">⚖️ Legal Review</div>
+        <div class="task-card" id="lci-card" onclick="selectTask('legal_clause_identification')">
+          <div class="task-name">Clause Identification</div>
+          <div class="task-meta"><span class="badge badge-easy">EASY</span><span class="task-score" id="score-legal_clause_identification">—</span></div>
+        </div>
+        <div class="task-card" id="lrf-card" onclick="selectTask('legal_risk_flagging')">
+          <div class="task-name">Risk Flagging</div>
+          <div class="task-meta"><span class="badge badge-medium">MEDIUM</span><span class="task-score" id="score-legal_risk_flagging">—</span></div>
+        </div>
+        <div class="task-card" id="lcr-card" onclick="selectTask('legal_clause_redlining')">
+          <div class="task-name">Clause Redlining</div>
+          <div class="task-meta"><span class="badge badge-hard">HARD</span><span class="task-score" id="score-legal_clause_redlining">—</span></div>
+        </div>
+      </div>
+
+      <div class="domain-clinical">
+        <div class="domain-label">🏥 Clinical Triage</div>
+        <div class="task-card" id="ctc-card" onclick="selectTask('clinical_triage_classification')">
+          <div class="task-name">Body System Classification</div>
+          <div class="task-meta"><span class="badge badge-easy">EASY</span><span class="task-score" id="score-clinical_triage_classification">—</span></div>
+        </div>
+        <div class="task-card" id="esi-card" onclick="selectTask('clinical_esi_assignment')">
+          <div class="task-name">ESI Level Assignment</div>
+          <div class="task-meta"><span class="badge badge-medium">MEDIUM</span><span class="task-score" id="score-clinical_esi_assignment">—</span></div>
+        </div>
+        <div class="task-card" id="ctn-card" onclick="selectTask('clinical_triage_note')">
+          <div class="task-name">Triage Note Generation</div>
+          <div class="task-meta"><span class="badge badge-hard">HARD</span><span class="task-score" id="score-clinical_triage_note">—</span></div>
+        </div>
+      </div>
+
+      <div class="domain-engineering">
+        <div class="domain-label">💻 PR Review</div>
+        <div class="task-card" id="ptc-card" onclick="selectTask('pr_type_classification')">
+          <div class="task-name">PR Type Classification</div>
+          <div class="task-meta"><span class="badge badge-easy">EASY</span><span class="task-score" id="score-pr_type_classification">—</span></div>
+        </div>
+        <div class="task-card" id="pbi-card" onclick="selectTask('pr_bug_identification')">
+          <div class="task-name">Bug Identification</div>
+          <div class="task-meta"><span class="badge badge-medium">MEDIUM</span><span class="task-score" id="score-pr_bug_identification">—</span></div>
+        </div>
+        <div class="task-card" id="prc-card" onclick="selectTask('pr_review_comment')">
+          <div class="task-name">Code Review Comment</div>
+          <div class="task-meta"><span class="badge badge-hard">HARD</span><span class="task-score" id="score-pr_review_comment">—</span></div>
         </div>
       </div>
 
       <div>
-        <div class="sidebar-section-label">Episode Log</div>
-        <div id="log-container" style="max-height:250px;overflow-y:auto;"></div>
+        <div class="domain-label">Episode Log</div>
+        <div id="log-container" style="max-height:200px;overflow-y:auto;"></div>
       </div>
 
       <div>
-        <div class="sidebar-section-label">Links</div>
-        <a href="/docs" target="_blank" style="display:flex;align-items:center;gap:8px;color:var(--accent);font-size:13px;text-decoration:none;padding:8px;background:var(--surface);border-radius:8px;border:1px solid var(--border);">
-          <span>📖</span> API Docs (Swagger)
-        </a>
-        <a href="/tasks" target="_blank" style="display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:13px;text-decoration:none;padding:8px;background:var(--surface);border-radius:8px;border:1px solid var(--border);margin-top:6px;">
-          <span>📋</span> /tasks endpoint
-        </a>
+        <div class="domain-label">API Links</div>
+        <a href="/docs" target="_blank" style="display:flex;align-items:center;gap:8px;color:var(--accent);font-size:12px;text-decoration:none;padding:8px;background:var(--surface);border-radius:8px;border:1px solid var(--border);margin-bottom:5px;">📖 Swagger API Docs</a>
+        <a href="/tasks" target="_blank" style="display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:12px;text-decoration:none;padding:8px;background:var(--surface);border-radius:8px;border:1px solid var(--border);">📋 /tasks endpoint</a>
       </div>
     </aside>
 
@@ -785,20 +299,18 @@
       <div class="center-header">
         <div>
           <div class="center-title" id="center-title">Ticket Classification</div>
-          <div style="font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-top:4px;" id="center-subtitle">
-            Step <span id="step-counter">0</span> / <span id="max-steps">10</span>
-          </div>
+          <div class="center-sub">Step <span id="step-counter">0</span> / <span id="max-steps">10</span> &nbsp;|&nbsp; <span id="domain-label">Customer Support</span></div>
         </div>
         <div class="action-bar">
-          <button class="btn btn-secondary" onclick="runBaseline()">▶ Heuristic Baseline</button>
+          <button class="btn btn-secondary" onclick="runBaseline()">▶ Run Heuristic Baseline</button>
           <button class="btn btn-primary" onclick="resetEpisode()">↺ Reset Episode</button>
         </div>
       </div>
-
       <div class="center-body" id="center-body">
         <div class="empty-state">
-          <div class="empty-icon">🎫</div>
-          <div class="empty-text">Click "Reset Episode" to start a new episode</div>
+          <div class="empty-icon">🌐</div>
+          <div style="font-size:14px;font-weight:700;">Multi-Domain AI Agent Environment</div>
+          <div style="font-size:12px;max-width:300px;line-height:1.6;">13 tasks across 4 professional domains. Select a task from the sidebar and click Reset Episode to begin.</div>
         </div>
       </div>
     </main>
@@ -806,33 +318,28 @@
     <!-- Right panel -->
     <aside class="right-panel">
       <div>
-        <div class="sidebar-section-label">Current Score</div>
+        <div class="panel-label">Episode Score</div>
         <div class="score-card">
-          <div class="score-card-title">EPISODE SCORE</div>
           <div class="big-score" id="current-score" style="color:var(--accent)">—</div>
           <div class="score-label" id="score-status">No active episode</div>
-
-          <div style="margin-top:16px;" id="score-breakdown"></div>
+          <div style="margin-top:12px;" id="score-breakdown"></div>
         </div>
       </div>
-
       <div>
-        <div class="sidebar-section-label">Reward History</div>
+        <div class="panel-label">Reward History</div>
         <div class="score-card">
           <div class="mini-chart" id="reward-chart"></div>
-          <div style="display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:10px;color:var(--text-dim);">
+          <div style="display:flex;justify-content:space-between;margin-top:5px;font-family:var(--mono);font-size:9px;color:var(--text-dim);">
             <span>+1.0</span><span>avg: <span id="avg-reward">—</span></span><span>-1.0</span>
           </div>
         </div>
       </div>
-
       <div id="agents-section" style="display:none;">
-        <div class="sidebar-section-label">Agent Status</div>
+        <div class="panel-label">Agent Status</div>
         <div id="agents-container"></div>
       </div>
-
       <div id="queue-section" style="display:none;">
-        <div class="sidebar-section-label">Ticket Queue</div>
+        <div class="panel-label">Ticket Queue</div>
         <div id="queue-container"></div>
       </div>
     </aside>
@@ -844,12 +351,21 @@ const API = '';
 let currentTaskId = 'ticket_classification';
 let currentObs = null;
 let rewardHistory = [];
-let episodeScore = null;
 
 const TASK_CONFIG = {
-  ticket_classification: { title: 'Ticket Classification', maxSteps: 10 },
-  response_drafting: { title: 'Response Drafting', maxSteps: 6 },
-  queue_management: { title: 'Queue Management', maxSteps: 40 },
+  ticket_classification:          { title: 'Ticket Classification', domain: 'Customer Support', maxSteps: 10, cardId: 'tc-card' },
+  response_drafting:              { title: 'Response Drafting', domain: 'Customer Support', maxSteps: 6, cardId: 'rd-card' },
+  queue_management:               { title: 'SLA Queue Management', domain: 'Customer Support', maxSteps: 40, cardId: 'qm-card' },
+  multi_turn_conversation:        { title: 'Multi-Turn De-escalation', domain: 'Customer Support', maxSteps: 8, cardId: 'mt-card' },
+  legal_clause_identification:    { title: 'Legal Clause Identification', domain: 'Legal Review', maxSteps: 10, cardId: 'lci-card' },
+  legal_risk_flagging:            { title: 'Legal Risk Flagging', domain: 'Legal Review', maxSteps: 10, cardId: 'lrf-card' },
+  legal_clause_redlining:         { title: 'Legal Clause Redlining', domain: 'Legal Review', maxSteps: 5, cardId: 'lcr-card' },
+  clinical_triage_classification: { title: 'Clinical Triage Classification', domain: 'Clinical Triage', maxSteps: 10, cardId: 'ctc-card' },
+  clinical_esi_assignment:        { title: 'ESI Level Assignment', domain: 'Clinical Triage', maxSteps: 10, cardId: 'esi-card' },
+  clinical_triage_note:           { title: 'Triage Note Generation', domain: 'Clinical Triage', maxSteps: 5, cardId: 'ctn-card' },
+  pr_type_classification:         { title: 'PR Type Classification', domain: 'PR Review', maxSteps: 10, cardId: 'ptc-card' },
+  pr_bug_identification:          { title: 'PR Bug Identification', domain: 'PR Review', maxSteps: 5, cardId: 'pbi-card' },
+  pr_review_comment:              { title: 'PR Code Review', domain: 'PR Review', maxSteps: 5, cardId: 'prc-card' },
 };
 
 async function api(method, path, body) {
@@ -863,18 +379,16 @@ async function api(method, path, body) {
 function selectTask(taskId) {
   currentTaskId = taskId;
   document.querySelectorAll('.task-card').forEach(c => c.classList.remove('active'));
-  document.getElementById('task-' + taskId.split('_')[0]).classList.add('active');
-  // Handle 'classification' vs 'ticket_classification'
-  const map = { ticket_classification: 'classification', response_drafting: 'drafting', queue_management: 'queue' };
-  document.getElementById('task-' + map[taskId]).classList.add('active');
-
   const cfg = TASK_CONFIG[taskId];
+  document.getElementById(cfg.cardId).classList.add('active');
   document.getElementById('center-title').textContent = cfg.title;
+  document.getElementById('domain-label').textContent = cfg.domain;
   document.getElementById('max-steps').textContent = cfg.maxSteps;
+  document.getElementById('step-counter').textContent = 0;
   document.getElementById('center-body').innerHTML = `
     <div class="empty-state">
-      <div class="empty-icon">🎫</div>
-      <div class="empty-text">Click "Reset Episode" to start with this task</div>
+      <div class="empty-icon">▶</div>
+      <div style="font-size:13px;">Click "Reset Episode" to start this task</div>
     </div>`;
   rewardHistory = [];
   updateRewardChart();
@@ -885,243 +399,297 @@ function selectTask(taskId) {
   document.getElementById('queue-section').style.display = 'none';
 }
 
-// Fix task card click handlers
-document.getElementById('task-classification').onclick = () => selectTask('ticket_classification');
-document.getElementById('task-drafting').onclick = () => selectTask('response_drafting');
-document.getElementById('task-queue').onclick = () => selectTask('queue_management');
-
 async function resetEpisode() {
   rewardHistory = [];
-  episodeScore = null;
   document.getElementById('log-container').innerHTML = '';
-
   try {
     const data = await api('POST', `/reset?task_id=${currentTaskId}`);
     currentObs = data.observation;
     document.getElementById('step-counter').textContent = currentObs.step || 0;
     renderObservation(currentObs);
-    addLog(`⟳ Episode reset — task: ${currentTaskId}`, 'info');
+    addLog(`↺ Reset — ${currentTaskId}`);
     updateAgents(currentObs.agents);
     updateQueue(currentObs.ticket_queue, currentObs.sla_status);
-  } catch(e) {
-    addLog(`❌ Reset failed: ${e.message}`, 'error');
-  }
+  } catch(e) { addLog(`❌ ${e.message}`, 'neg'); }
 }
 
 function renderObservation(obs) {
-  if (obs.episode_done) {
-    fetchAndShowGrader();
-    return;
-  }
-
+  if (obs.episode_done) { fetchGrader(); return; }
   const body = document.getElementById('center-body');
+  const ticket = obs.current_ticket;
+  const clause = obs.current_clause;
+  const patient = obs.current_patient;
+  const pr = obs.current_pr;
 
-  if (currentTaskId === 'ticket_classification') {
-    renderClassificationView(obs, body);
-  } else if (currentTaskId === 'response_drafting') {
-    renderDraftingView(obs, body);
-  } else {
-    renderQueueView(obs, body);
-  }
+  if (ticket) renderTicketView(obs, body);
+  else if (clause) renderLegalView(obs, body);
+  else if (patient) renderClinicalView(obs, body);
+  else if (pr) renderPRView(obs, body);
+  else body.innerHTML = `<div class="empty-state"><div class="empty-icon">✓</div><div>Step complete</div></div>`;
 
   updateAgents(obs.agents);
   updateQueue(obs.ticket_queue, obs.sla_status);
 }
 
-function renderTicketHTML(ticket) {
-  if (!ticket) return '';
-  const sentiment = ticket.sentiment_score || 0;
-  const sentPct = ((sentiment + 1) / 2 * 100).toFixed(0);
-  const sentColor = sentiment < -0.3 ? 'var(--accent2)' : sentiment > 0.3 ? 'var(--accent3)' : 'var(--accent4)';
+function renderTicketView(obs, body) {
+  const t = obs.current_ticket;
+  const isQueue = currentTaskId === 'queue_management';
+  const isMT = currentTaskId === 'multi_turn_conversation';
+  const history = t.previous_interactions || [];
+
+  let historyHTML = '';
+  if (history.length > 0) {
+    historyHTML = `<div style="margin-bottom:12px;"><div style="font-family:var(--mono);font-size:10px;color:var(--text-dim);margin-bottom:8px;">CONVERSATION HISTORY</div>` +
+      history.map(m => `<div style="padding:8px;margin-bottom:6px;border-radius:6px;background:${m.role==='customer'?'var(--surface2)':'rgba(108,99,255,0.08)'};border:1px solid var(--border);font-size:12px;"><span style="font-family:var(--mono);font-size:9px;color:var(--text-dim);text-transform:uppercase;">${m.role}:</span> ${m.content}</div>`).join('') + `</div>`;
+  }
 
-  return `
+  body.innerHTML = `
     <div class="ticket-card">
-      <div class="ticket-header">
-        <div>
-          <div class="ticket-id">${ticket.ticket_id}</div>
-          <div class="ticket-subject">${ticket.subject}</div>
-        </div>
-        <div class="ticket-tier">
-          <span class="tier-badge tier-${ticket.customer_tier}">${ticket.customer_tier.toUpperCase()}</span>
-        </div>
-      </div>
-      <div class="ticket-body">${ticket.body}</div>
-      <div class="ticket-meta-row">
-        ${ticket.category ? `<span class="meta-chip">📁 ${ticket.category}</span>` : ''}
-        ${ticket.priority ? `<span class="meta-chip">🔺 ${ticket.priority}</span>` : ''}
-        ${ticket.status ? `<span class="meta-chip">📌 ${ticket.status}</span>` : ''}
-        <span class="meta-chip">🕐 SLA: ${ticket.sla_deadline ? new Date(ticket.sla_deadline).toLocaleTimeString() : '—'}</span>
+      <div class="ticket-id">${t.ticket_id}</div>
+      <div class="ticket-subject">${t.subject}</div>
+      ${historyHTML}
+      <div class="ticket-body">${t.body}</div>
+      <div class="ticket-meta">
+        <span class="meta-chip tier-${t.customer_tier}">${t.customer_tier?.toUpperCase()}</span>
+        ${t.category ? `<span class="meta-chip">📁 ${t.category}</span>` : ''}
+        ${t.priority ? `<span class="meta-chip">🔺 ${t.priority}</span>` : ''}
+        <span class="meta-chip">😶 Sentiment: ${(t.sentiment_score||0).toFixed(2)}</span>
       </div>
-      <div class="sentiment-bar">
-        <span class="sentiment-label">SENTIMENT</span>
-        <div class="sentiment-track">
-          <div class="sentiment-fill" style="width:${sentPct}%;background:${sentColor}"></div>
-        </div>
-        <span style="font-family:var(--mono);font-size:11px;color:var(--text-dim);width:40px;text-align:right">${sentiment.toFixed(2)}</span>
+    </div>
+    ${obs.knowledge_base?.length ? renderKB(obs.knowledge_base) : ''}
+    ${renderActionForm(obs)}`;
+}
+
+function renderLegalView(obs, body) {
+  const c = obs.current_clause;
+  body.innerHTML = `
+    <div class="domain-card">
+      <div class="domain-card-label">${c.contract_type} — ${c.counterparty}</div>
+      <div class="domain-card-title">Clause ${c.clause_id}</div>
+      <div class="domain-card-body">${c.text}</div>
+      ${c.true_risk_level ? `<div style="margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--accent4);">Known Risk Level: ${c.true_risk_level}</div>` : ''}
+    </div>
+    ${renderActionForm(obs)}`;
+}
+
+function renderClinicalView(obs, body) {
+  const p = obs.current_patient;
+  const vitals = p.vitals || {};
+  body.innerHTML = `
+    <div class="domain-card">
+      <div class="domain-card-label">Patient ${p.patient_id} — Age ${p.age} ${p.gender}</div>
+      <div class="domain-card-title">${p.chief_complaint}</div>
+      <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0;">
+        ${Object.entries(vitals).map(([k,v]) => `<div style="background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:8px;text-align:center;"><div style="font-family:var(--mono);font-size:14px;font-weight:700;">${v}</div><div style="font-family:var(--mono);font-size:9px;color:var(--text-dim);margin-top:2px;">${k}</div></div>`).join('')}
       </div>
-    </div>`;
+      <div class="domain-card-body"><strong>History:</strong> ${p.history}</div>
+      ${p.true_esi_level ? `<div style="margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--accent4);">Known ESI Level: ${p.true_esi_level}</div>` : ''}
+    </div>
+    ${renderActionForm(obs)}`;
 }
 
-function renderKBHTML(articles) {
-  if (!articles || !articles.length) return '';
-  return `
-    <div class="kb-section">
-      <div class="kb-label">Knowledge Base</div>
-      ${articles.map(a => `
-        <div class="kb-article">
-          <div class="kb-article-title">
-            <span class="kb-article-id">${a.article_id}</span>
-            ${a.title}
-          </div>
-          <div class="kb-article-content">${a.content}</div>
-        </div>`).join('')}
-    </div>`;
+function renderPRView(obs, body) {
+  const pr = obs.current_pr;
+  const diffLines = (pr.diff||'').split('\n').map(line => {
+    if (line.startsWith('+')) return `<span class="diff-add">${escHtml(line)}</span>`;
+    if (line.startsWith('-')) return `<span class="diff-remove">${escHtml(line)}</span>`;
+    if (line.startsWith('@@')) return `<span class="diff-header">${escHtml(line)}</span>`;
+    return escHtml(line);
+  }).join('\n');
+  body.innerHTML = `
+    <div class="domain-card">
+      <div class="domain-card-label">PR ${pr.pr_id} — by ${pr.author}</div>
+      <div class="domain-card-title">${pr.title}</div>
+      <div class="domain-card-body" style="margin-bottom:12px;">${pr.description}</div>
+      <div class="code-diff">${diffLines}</div>
+      ${pr.true_bug_description ? `<div style="margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--accent4);">Known Bug: ${pr.true_bug_description}</div>` : ''}
+    </div>
+    ${renderActionForm(obs)}`;
 }
 
-function renderClassificationView(obs, body) {
-  const ticket = obs.current_ticket;
-  body.innerHTML = renderTicketHTML(ticket) + `
-    <div class="action-form">
-      <div class="form-title">⚡ Classify Ticket</div>
+function escHtml(s) { return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+
+function renderKB(articles) {
+  return `<div style="margin-bottom:14px;">
+    <div style="font-family:var(--mono);font-size:9px;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;">Knowledge Base</div>
+    ${articles.slice(0,2).map(a => `
+      <div style="background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:6px;">
+        <div style="font-size:12px;font-weight:700;margin-bottom:4px;"><span style="font-family:var(--mono);font-size:10px;color:var(--accent);margin-right:8px;">${a.article_id}</span>${a.title}</div>
+        <div style="font-size:11px;color:var(--text-dim);line-height:1.5;">${a.content?.substring(0,200)}...</div>
+      </div>`).join('')}
+  </div>`;
+}
+
+function renderActionForm(obs) {
+  const tid = currentTaskId;
+  const actions = obs.valid_actions || [];
+
+  if (tid === 'ticket_classification') {
+    const t = obs.current_ticket;
+    return `<div class="action-form"><div class="form-title">⚡ Classify Ticket</div>
       <div class="form-row">
-        <div class="form-group">
-          <label class="form-label">Category</label>
+        <div class="form-group"><label class="form-label">Category</label>
           <select class="form-select" id="f-category">
-            <option value="">-- Select --</option>
-            ${['billing','technical','account','feature_request','abuse','unknown'].map(c =>
-              `<option value="${c}">${c.replace('_',' ').toUpperCase()}</option>`
-            ).join('')}
-          </select>
-        </div>
-        <div class="form-group">
-          <label class="form-label">Priority</label>
+            ${['billing','technical','account','feature_request','abuse','unknown'].map(c => `<option value="${c}">${c.replace('_',' ').toUpperCase()}</option>`).join('')}
+          </select></div>
+        <div class="form-group"><label class="form-label">Priority</label>
           <select class="form-select" id="f-priority">
-            <option value="">-- Select --</option>
-            ${['P1','P2','P3','P4'].map(p =>
-              `<option value="${p}">${p} — ${{'P1':'Critical','P2':'High','P3':'Medium','P4':'Low'}[p]}</option>`
-            ).join('')}
-          </select>
-        </div>
-      </div>
-      <div class="form-group" style="margin-bottom:12px;">
-        <label class="form-label">Reasoning (optional)</label>
-        <input class="form-input" id="f-reasoning" placeholder="Why did you choose this category/priority?"/>
-      </div>
-      <div class="submit-row">
-        <button class="btn btn-primary" onclick="submitClassify('${ticket?.ticket_id}')">Submit Classification →</button>
+            ${['P1','P2','P3','P4'].map(p => `<option value="${p}">${p}</option>`).join('')}
+          </select></div>
       </div>
+      <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'classify',ticket_id:'${t?.ticket_id}',category:document.getElementById('f-category').value,priority:document.getElementById('f-priority').value})">Submit →</button></div>
     </div>`;
-}
+  }
 
-function renderDraftingView(obs, body) {
-  const ticket = obs.current_ticket;
-  body.innerHTML = renderTicketHTML(ticket) + renderKBHTML(obs.knowledge_base) + `
-    <div class="action-form">
-      <div class="form-title">✍️ Draft Response</div>
-      <div class="form-group" style="margin-bottom:12px;">
-        <label class="form-label">Customer Response</label>
-        <textarea class="form-textarea" id="f-response" rows="8" style="min-height:200px;"
-          placeholder="Write a professional, empathetic response that addresses the customer's issue with concrete next steps..."></textarea>
-      </div>
-      <div class="submit-row">
-        <button class="btn btn-primary" onclick="submitDraft('${ticket?.ticket_id}')">Send Response →</button>
-      </div>
+  if (tid === 'response_drafting') {
+    const t = obs.current_ticket;
+    return `<div class="action-form"><div class="form-title">✍️ Draft Response</div>
+      <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Response Text</label>
+        <textarea class="form-textarea" id="f-response" placeholder="Write a professional customer response..."></textarea></div>
+      <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'draft_response',ticket_id:'${t?.ticket_id}',response_text:document.getElementById('f-response').value})">Send →</button></div>
     </div>`;
-}
-
-function renderQueueView(obs, body) {
-  const queue = obs.ticket_queue || [];
-  const info = obs.info || {};
+  }
 
-  body.innerHTML = `
-    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px;">
-      <div class="score-card" style="text-align:center;">
-        <div class="score-card-title">OPEN</div>
-        <div style="font-family:var(--mono);font-size:32px;font-weight:700;color:var(--accent)">${info.open_count ?? queue.length}</div>
-      </div>
-      <div class="score-card" style="text-align:center;">
-        <div class="score-card-title">RESOLVED</div>
-        <div style="font-family:var(--mono);font-size:32px;font-weight:700;color:var(--accent3)">${info.resolved ?? 0}</div>
-      </div>
-      <div class="score-card" style="text-align:center;">
-        <div class="score-card-title">SLA BREACHES</div>
-        <div style="font-family:var(--mono);font-size:32px;font-weight:700;color:var(--accent2)">${info.sla_breaches ?? 0}</div>
-      </div>
-    </div>
-    <div class="action-form">
-      <div class="form-title">⚙️ Queue Action</div>
+  if (tid === 'queue_management') {
+    const queue = obs.ticket_queue || [];
+    return `<div class="action-form"><div class="form-title">⚙️ Queue Action</div>
       <div class="form-row">
-        <div class="form-group">
-          <label class="form-label">Ticket ID</label>
+        <div class="form-group"><label class="form-label">Ticket</label>
           <select class="form-select" id="f-ticket-id">
-            <option value="">-- Select Ticket --</option>
-            ${queue.map(t => `<option value="${t.ticket_id}">${t.ticket_id} | ${t.priority || '?'} | ${t.subject.substring(0,40)}</option>`).join('')}
-          </select>
-        </div>
-        <div class="form-group">
-          <label class="form-label">Action Type</label>
-          <select class="form-select" id="f-action-type" onchange="toggleQueueFields()">
-            ${['assign_ticket','escalate','resolve','close','no_op'].map(a =>
-              `<option value="${a}">${a.replace('_',' ').toUpperCase()}</option>`
-            ).join('')}
-          </select>
-        </div>
+            ${queue.map(t => `<option value="${t.ticket_id}">${t.ticket_id} | ${t.priority||'?'} | ${t.subject?.substring(0,30)}</option>`).join('')}
+          </select></div>
+        <div class="form-group"><label class="form-label">Action</label>
+          <select class="form-select" id="f-action-type" onchange="toggleAgentRow()">
+            ${['assign_ticket','resolve','escalate','close','no_op'].map(a => `<option value="${a}">${a.replace('_',' ').toUpperCase()}</option>`).join('')}
+          </select></div>
       </div>
-      <div id="agent-row" class="form-group" style="margin-bottom:12px;">
-        <label class="form-label">Assign To Agent</label>
+      <div id="agent-row" class="form-group" style="margin-bottom:10px;"><label class="form-label">Assign To</label>
         <select class="form-select" id="f-agent-id">
-          <option value="agent_billing">agent_billing — Jordan (Billing)</option>
-          <option value="agent_tech">agent_tech — Sam (Technical)</option>
-          <option value="agent_general">agent_general — Alex (General)</option>
-        </select>
+          <option value="agent_billing">agent_billing — Billing Specialist</option>
+          <option value="agent_tech">agent_tech — Technical Support</option>
+          <option value="agent_general">agent_general — General Support</option>
+        </select></div>
+      <div class="submit-row"><button class="btn btn-primary" onclick="submitQueueAction()">Execute →</button></div>
+    </div>`;
+  }
+
+  if (tid === 'multi_turn_conversation') {
+    const t = obs.current_ticket;
+    return `<div class="action-form"><div class="form-title">💬 Respond or Escalate</div>
+      <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Response</label>
+        <textarea class="form-textarea" id="f-mt-response" placeholder="Write your response to the customer..."></textarea></div>
+      <div class="submit-row" style="gap:8px;">
+        <button class="btn btn-secondary" onclick="submitAction({action_type:'escalate',ticket_id:'${t?.ticket_id}'})">↑ Escalate</button>
+        <button class="btn btn-secondary" onclick="submitAction({action_type:'resolve',ticket_id:'${t?.ticket_id}'})">✓ Resolve</button>
+        <button class="btn btn-primary" onclick="submitAction({action_type:'draft_response',ticket_id:'${t?.ticket_id}',response_text:document.getElementById('f-mt-response').value})">Send →</button>
       </div>
-      <div class="submit-row">
-        <button class="btn btn-primary" onclick="submitQueueAction()">Execute Action →</button>
+    </div>`;
+  }
+
+  if (tid === 'legal_clause_identification') {
+    return `<div class="action-form"><div class="form-title">⚖️ Identify Clause Type</div>
+      <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Clause Type</label>
+        <select class="form-select" id="f-clause-type">
+          ${['indemnity','liability','ip','termination','unknown'].map(c => `<option value="${c}">${c.toUpperCase()}</option>`).join('')}
+        </select></div>
+      <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'identify_clause',clause_type:document.getElementById('f-clause-type').value})">Submit →</button></div>
+    </div>`;
+  }
+
+  if (tid === 'legal_risk_flagging') {
+    return `<div class="action-form"><div class="form-title">🚩 Flag Risk Level</div>
+      <div class="form-row">
+        <div class="form-group"><label class="form-label">Risk Level</label>
+          <select class="form-select" id="f-risk-level">
+            ${['low','medium','high','critical'].map(r => `<option value="${r}">${r.toUpperCase()}</option>`).join('')}
+          </select></div>
+        <div class="form-group"><label class="form-label">Reasoning</label>
+          <input class="form-input" id="f-risk-reason" placeholder="Brief justification..."/></div>
       </div>
+      <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'flag_risk',risk_level:document.getElementById('f-risk-level').value,reasoning:document.getElementById('f-risk-reason').value})">Submit →</button></div>
     </div>`;
-}
+  }
 
-function toggleQueueFields() {
-  const action = document.getElementById('f-action-type')?.value;
-  const agentRow = document.getElementById('agent-row');
-  if (agentRow) {
-    agentRow.style.display = ['assign_ticket', 'escalate'].includes(action) ? 'flex' : 'none';
+  if (tid === 'legal_clause_redlining') {
+    return `<div class="action-form"><div class="form-title">✏️ Redline Clause</div>
+      <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Improved Clause Text</label>
+        <textarea class="form-textarea" id="f-redline" placeholder="Write the improved, lower-risk version of this clause..."></textarea></div>
+      <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'redline',redline_text:document.getElementById('f-redline').value})">Submit →</button></div>
+    </div>`;
   }
-}
 
-async function submitClassify(ticketId) {
-  const category = document.getElementById('f-category').value;
-  const priority = document.getElementById('f-priority').value;
-  const reasoning = document.getElementById('f-reasoning').value;
+  if (tid === 'clinical_triage_classification') {
+    return `<div class="action-form"><div class="form-title">🏥 Classify Body System</div>
+      <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Body System</label>
+        <select class="form-select" id="f-body-system">
+          ${['cardiac','respiratory','neurologic','gi','musculoskeletal','other'].map(s => `<option value="${s}">${s.toUpperCase()}</option>`).join('')}
+        </select></div>
+      <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'classify_triage',body_system:document.getElementById('f-body-system').value})">Submit →</button></div>
+    </div>`;
+  }
 
-  if (!category || !priority) { alert('Please select both category and priority.'); return; }
+  if (tid === 'clinical_esi_assignment') {
+    return `<div class="action-form"><div class="form-title">🔢 Assign ESI Level</div>
+      <div class="form-row">
+        <div class="form-group"><label class="form-label">ESI Level (1=Critical, 5=Non-urgent)</label>
+          <select class="form-select" id="f-esi">
+            ${[1,2,3,4,5].map(n => `<option value="${n}">ESI ${n}</option>`).join('')}
+          </select></div>
+        <div class="form-group"><label class="form-label">Reasoning</label>
+          <input class="form-input" id="f-esi-reason" placeholder="Clinical justification..."/></div>
+      </div>
+      <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'assign_esi',esi_level:parseInt(document.getElementById('f-esi').value),reasoning:document.getElementById('f-esi-reason').value})">Submit →</button></div>
+    </div>`;
+  }
 
-  await submitAction({
-    action_type: 'classify',
-    ticket_id: ticketId,
-    category,
-    priority,
-    reasoning,
-  });
-}
+  if (tid === 'clinical_triage_note') {
+    return `<div class="action-form"><div class="form-title">📋 Write Triage Note</div>
+      <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Clinical Triage Note</label>
+        <textarea class="form-textarea" id="f-note" placeholder="Patient presents with... Immediate actions: stat IV access, oxygen, continuous monitor..."></textarea></div>
+      <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'write_triage_note',triage_note:document.getElementById('f-note').value})">Submit →</button></div>
+    </div>`;
+  }
+
+  if (tid === 'pr_type_classification') {
+    return `<div class="action-form"><div class="form-title">🔍 Classify PR Type</div>
+      <div class="form-group" style="margin-bottom:10px;"><label class="form-label">PR Type</label>
+        <select class="form-select" id="f-pr-type">
+          ${['bug_fix','feature','refactor','security'].map(t => `<option value="${t}">${t.replace('_',' ').toUpperCase()}</option>`).join('')}
+        </select></div>
+      <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'classify_pr',pr_type:document.getElementById('f-pr-type').value})">Submit →</button></div>
+    </div>`;
+  }
+
+  if (tid === 'pr_bug_identification') {
+    return `<div class="action-form"><div class="form-title">🐛 Identify Bug</div>
+      <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Bug Description</label>
+        <textarea class="form-textarea" id="f-bug" placeholder="Describe the specific vulnerability or bug found in this diff..."></textarea></div>
+      <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'identify_bug',bug_description:document.getElementById('f-bug').value})">Submit →</button></div>
+    </div>`;
+  }
 
-async function submitDraft(ticketId) {
-  const response_text = document.getElementById('f-response').value;
-  if (!response_text.trim()) { alert('Please write a response.'); return; }
+  if (tid === 'pr_review_comment') {
+    return `<div class="action-form"><div class="form-title">💬 Write Review Comment</div>
+      <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Review Comment</label>
+        <textarea class="form-textarea" id="f-review" placeholder="Approve or block this PR with your code review comment..."></textarea></div>
+      <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'review_pr',review_comment:document.getElementById('f-review').value})">Submit →</button></div>
+    </div>`;
+  }
 
-  await submitAction({
-    action_type: 'draft_response',
-    ticket_id: ticketId,
-    response_text,
-  });
+  return '';
 }
 
-async function submitQueueAction() {
+function toggleAgentRow() {
+  const action = document.getElementById('f-action-type')?.value;
+  const row = document.getElementById('agent-row');
+  if (row) row.style.display = action === 'assign_ticket' ? 'flex' : 'none';
+}
+
+function submitQueueAction() {
   const action_type = document.getElementById('f-action-type').value;
   const ticket_id = document.getElementById('f-ticket-id')?.value;
   const target_agent_id = document.getElementById('f-agent-id')?.value;
-
-  await submitAction({ action_type, ticket_id, target_agent_id });
+  submitAction({ action_type, ticket_id, target_agent_id });
 }
 
 async function submitAction(actionBody) {
@@ -1129,63 +697,48 @@ async function submitAction(actionBody) {
     const data = await api('POST', `/step?task_id=${currentTaskId}`, actionBody);
     currentObs = data.observation;
     const reward = data.reward;
-
     rewardHistory.push(reward.total);
     document.getElementById('step-counter').textContent = currentObs.step || rewardHistory.length;
-
     const sign = reward.total >= 0 ? '+' : '';
-    addLog(`Step ${rewardHistory.length}: ${sign}${reward.total.toFixed(3)} reward`, reward.total >= 0 ? 'pos' : 'neg');
-
+    addLog(`Step ${rewardHistory.length}: ${sign}${reward.total.toFixed(3)}`, reward.total >= 0 ? 'pos' : 'neg');
     updateRewardChart();
     updateScoreDisplay(reward);
     renderObservation(currentObs);
-
-    if (data.done) {
-      fetchAndShowGrader();
-    }
-  } catch(e) {
-    addLog(`❌ Action failed: ${e.message}`, 'error');
-  }
+    if (data.done) fetchGrader();
+  } catch(e) { addLog(`❌ ${e.message}`, 'neg'); }
 }
 
-async function fetchAndShowGrader() {
+async function fetchGrader() {
   try {
     const result = await api('POST', `/grader?task_id=${currentTaskId}`);
-    showEpisodeDone(result);
-    const scoreKey = { ticket_classification: 'classification', response_drafting: 'drafting', queue_management: 'queue' }[currentTaskId];
-    document.getElementById(`score-${scoreKey}`).textContent = result.final_score.toFixed(3);
-  } catch(e) {
-    console.error(e);
-  }
+    showDone(result);
+    document.getElementById(`score-${currentTaskId}`).textContent = result.final_score.toFixed(3);
+    updateOverallScore();
+  } catch(e) { console.error(e); }
 }
 
-function showEpisodeDone(result) {
-  const passed = result.passed;
+function showDone(result) {
   const score = result.final_score;
   const color = score >= 0.7 ? 'var(--accent3)' : score >= 0.4 ? 'var(--accent4)' : 'var(--accent2)';
   const emoji = score >= 0.7 ? '🏆' : score >= 0.4 ? '📊' : '📉';
-
   document.getElementById('center-body').innerHTML = `
     <div class="episode-done">
-      <div class="done-icon">${emoji}</div>
+      <div style="font-size:36px;margin-bottom:12px;">${emoji}</div>
       <div class="done-title">Episode Complete</div>
       <div class="done-score" style="color:${color}">${score.toFixed(4)}</div>
-      <div style="font-family:var(--mono);font-size:14px;color:var(--text-dim);margin:8px 0 24px">
-        ${passed ? '✓ PASSED' : '✗ DID NOT PASS'} &nbsp;|&nbsp; ${rewardHistory.length} steps
+      <div style="font-family:var(--mono);font-size:12px;color:var(--text-dim);margin:8px 0 20px">
+        ${result.passed ? '✓ PASSED' : '✗ DID NOT PASS'} &nbsp;|&nbsp; ${rewardHistory.length} steps
       </div>
-      <div style="text-align:left;max-width:400px;margin:0 auto;">
-        ${Object.entries(result.metrics || {}).filter(([k]) => typeof result.metrics[k] === 'number').map(([k,v]) => `
-          <div class="breakdown-row">
-            <span class="breakdown-label">${k.replace(/_/g,' ')}</span>
-            <span class="breakdown-val ${v >= 0.7 ? 'val-good' : v >= 0.4 ? 'val-mid' : 'val-bad'}">${typeof v === 'number' ? v.toFixed(4) : v}</span>
-          </div>`).join('')}
-      </div>
-      <button class="btn btn-primary" style="margin-top:24px;" onclick="resetEpisode()">↺ New Episode</button>
+      ${Object.entries(result.metrics||{}).filter(([k,v])=>typeof v==='number').map(([k,v])=>`
+        <div class="breakdown-row">
+          <span class="breakdown-label">${k.replace(/_/g,' ')}</span>
+          <span class="breakdown-val ${v>=0.7?'val-good':v>=0.4?'val-mid':'val-bad'}">${v.toFixed(4)}</span>
+        </div>`).join('')}
+      <button class="btn btn-primary" style="margin-top:20px;" onclick="resetEpisode()">↺ New Episode</button>
     </div>`;
-
   document.getElementById('current-score').textContent = score.toFixed(4);
   document.getElementById('current-score').style.color = color;
-  document.getElementById('score-status').textContent = passed ? '✓ Passed' : '✗ Did not pass';
+  document.getElementById('score-status').textContent = result.passed ? '✓ Passed' : '✗ Did not pass';
 }
 
 function updateScoreDisplay(reward) {
@@ -1193,107 +746,101 @@ function updateScoreDisplay(reward) {
   const color = total >= 0.6 ? 'var(--accent3)' : total >= 0.2 ? 'var(--accent4)' : 'var(--accent2)';
   document.getElementById('current-score').textContent = total.toFixed(4);
   document.getElementById('current-score').style.color = color;
-  document.getElementById('score-status').textContent = `Step reward`;
-
+  document.getElementById('score-status').textContent = 'Step reward';
   const bd = reward.breakdown || {};
   document.getElementById('score-breakdown').innerHTML = Object.entries(bd).map(([k,v]) => `
     <div class="breakdown-row">
       <span class="breakdown-label">${k.replace(/_/g,' ')}</span>
-      <span class="breakdown-val ${v >= 0.6 ? 'val-good' : v < 0 ? 'val-bad' : 'val-mid'}">${typeof v === 'number' ? v.toFixed(3) : v}</span>
+      <span class="breakdown-val ${v>=0.6?'val-good':v<0?'val-bad':'val-mid'}">${typeof v==='number'?v.toFixed(3):v}</span>
     </div>`).join('');
 }
 
 function updateRewardChart() {
   const container = document.getElementById('reward-chart');
-  if (!rewardHistory.length) { container.innerHTML = ''; return; }
-
-  const avg = (rewardHistory.reduce((a,b) => a+b, 0) / rewardHistory.length).toFixed(3);
+  if (!rewardHistory.length) { container.innerHTML=''; return; }
+  const avg = (rewardHistory.reduce((a,b)=>a+b,0)/rewardHistory.length).toFixed(3);
   document.getElementById('avg-reward').textContent = avg;
-
   container.innerHTML = rewardHistory.map(r => {
-    const pct = ((r + 1) / 2 * 100).toFixed(1);
-    const color = r >= 0.3 ? 'var(--accent3)' : r >= 0 ? 'var(--accent4)' : 'var(--accent2)';
+    const pct = ((r+1)/2*100).toFixed(1);
+    const color = r>=0.3?'var(--accent3)':r>=0?'var(--accent4)':'var(--accent2)';
     return `<div class="bar" style="height:${pct}%;background:${color};opacity:0.8;"></div>`;
   }).join('');
 }
 
 function updateAgents(agents) {
-  if (!agents || !agents.length) {
-    document.getElementById('agents-section').style.display = 'none';
-    return;
-  }
-  document.getElementById('agents-section').style.display = 'block';
+  if (!agents?.length) { document.getElementById('agents-section').style.display='none'; return; }
+  document.getElementById('agents-section').style.display='block';
   document.getElementById('agents-container').innerHTML = agents.map(a => {
-    const pct = (a.current_load / a.max_load * 100).toFixed(0);
-    const overloaded = a.current_load >= a.max_load;
-    return `
-      <div class="agent-card">
-        <div class="agent-name">${a.name}</div>
-        <div style="font-family:var(--mono);font-size:10px;color:var(--text-dim);">
-          Load: ${a.current_load}/${a.max_load} &nbsp;|&nbsp; ${a.specialization.join(', ')}
-        </div>
-        <div class="load-bar-track">
-          <div class="load-bar-fill ${overloaded ? 'overloaded' : ''}" style="width:${pct}%"></div>
-        </div>
-      </div>`;
+    const pct = (a.current_load/a.max_load*100).toFixed(0);
+    return `<div class="agent-card">
+      <div class="agent-name">${a.name}</div>
+      <div style="font-family:var(--mono);font-size:9px;color:var(--text-dim);">Load: ${a.current_load}/${a.max_load}</div>
+      <div class="load-bar-track"><div class="load-bar-fill ${a.current_load>=a.max_load?'over':''}" style="width:${pct}%"></div></div>
+    </div>`;
   }).join('');
 }
 
 function updateQueue(queue, slaStatus) {
-  if (!queue || !queue.length) {
-    document.getElementById('queue-section').style.display = 'none';
-    return;
-  }
-  document.getElementById('queue-section').style.display = 'block';
+  if (!queue?.length) { document.getElementById('queue-section').style.display='none'; return; }
+  document.getElementById('queue-section').style.display='block';
   document.getElementById('queue-container').innerHTML = queue.slice(0,8).map(t => {
-    const sla = (slaStatus || {})[t.ticket_id] || 'ok';
-    const p = (t.priority || 'P3').toLowerCase().replace('_critical','').replace('_high','').replace('_medium','').replace('_low','');
-    return `
-      <div class="queue-item">
-        <div class="priority-dot ${p}"></div>
-        <span class="queue-subject">${t.subject}</span>
-        <span class="queue-sla sla-${sla}">${sla.toUpperCase()}</span>
-      </div>`;
+    const p = (t.priority||'P3').replace('_CRITICAL','').replace('_HIGH','').replace('_MEDIUM','').replace('_LOW','').toLowerCase();
+    return `<div class="queue-item">
+      <div class="priority-dot ${p}"></div>
+      <span class="queue-subject">${t.subject||t.ticket_id}</span>
+    </div>`;
   }).join('');
 }
 
 function addLog(message, type) {
   const container = document.getElementById('log-container');
   const div = document.createElement('div');
-  div.className = `log-entry ${type === 'pos' ? 'log-reward-pos' : type === 'neg' ? 'log-reward-neg' : ''}`;
+  div.className = `log-entry ${type==='pos'?'log-pos':type==='neg'?'log-neg':''}`;
   div.textContent = message;
   container.insertBefore(div, container.firstChild);
-  if (container.children.length > 30) container.removeChild(container.lastChild);
+  if (container.children.length > 40) container.removeChild(container.lastChild);
 }
 
 async function runBaseline() {
-  addLog('⚡ Running heuristic baseline...', 'info');
+  addLog('⚡ Running heuristic baseline...');
   try {
     const data = await api('POST', '/baseline');
-    const tasks = data.tasks;
-    Object.entries(tasks).forEach(([tid, result]) => {
-      const map = { ticket_classification: 'classification', response_drafting: 'drafting', queue_management: 'queue' };
-      if (map[tid]) {
-        document.getElementById(`score-${map[tid]}`).textContent = result.final_score.toFixed(3);
-      }
-      addLog(`${tid}: ${result.final_score.toFixed(4)} ${result.passed ? '✓' : '✗'}`, result.final_score > 0.5 ? 'pos' : 'neg');
+    Object.entries(data.tasks||{}).forEach(([tid, result]) => {
+      const el = document.getElementById(`score-${tid}`);
+      if (el) el.textContent = result.final_score.toFixed(3);
+      addLog(`${tid.replace(/_/g,' ')}: ${result.final_score.toFixed(3)} ${result.passed?'✓':'✗'}`,
+             result.final_score >= 0.5 ? 'pos' : 'neg');
     });
-    addLog(`Overall: ${data.overall_score.toFixed(4)}`, data.overall_score > 0.5 ? 'pos' : 'neg');
-  } catch(e) {
-    addLog(`Baseline error: ${e.message}`, 'neg');
+    document.getElementById('overall-score').textContent = data.overall_score.toFixed(3);
+    addLog(`Overall: ${data.overall_score.toFixed(3)}`, data.overall_score > 0.6 ? 'pos' : 'neg');
+  } catch(e) { addLog(`Baseline error: ${e.message}`, 'neg'); }
+}
+
+function updateOverallScore() {
+  const scores = Object.keys(TASK_CONFIG).map(tid => {
+    const el = document.getElementById(`score-${tid}`);
+    return el && el.textContent !== '—' ? parseFloat(el.textContent) : null;
+  }).filter(s => s !== null);
+  if (scores.length > 0) {
+    const avg = scores.reduce((a,b)=>a+b,0)/scores.length;
+    document.getElementById('overall-score').textContent = avg.toFixed(3);
   }
 }
 
-// Check server health on load
+// Health check on load
 (async () => {
   try {
-    await api('GET', '/health');
+    const h = await api('GET', '/health');
     document.getElementById('server-status').textContent = 'LIVE';
+    addLog(`✓ Server online — ${h.tasks?.length||0} tasks`);
   } catch(e) {
     document.getElementById('server-status').textContent = 'OFFLINE';
     document.getElementById('server-status').style.color = 'var(--accent2)';
+    document.querySelector('.status-pill').style.color = 'var(--accent2)';
+    document.querySelector('.status-pill').style.borderColor = 'rgba(255,101,132,0.3)';
+    document.querySelector('.pulse').style.background = 'var(--accent2)';
   }
 })();
 </script>
 </body>
-</html>
+</html>