feat: add AI Diagram Agent - 2-agent LangGraph with Mermaid.js

- New diagram agent: Planner generates Mermaid code, Responder explains
- FastAPI route: /api/diagram/chat + /clear with Redis session history
- Frontend: split-pane UI with canvas pan/zoom (scroll wheel + drag)
- Auto-fit diagram to view, grid background, PNG export
- Prompt enforces ASCII syntax labels for Mermaid compatibility
- Planner LLM max_tokens=4000 for complex diagram generation
- Supports: flowchart, sequence, class, ER, gantt, mindmap, pie chart

backend/agent/diagram_agent/__init__.py

+"""Diagram Agent — AI-powered diagram generation using Mermaid syntax."""
+from .diagram_graph import get_diagram_agent
+
+__all__ = ["get_diagram_agent"]

backend/agent/diagram_agent/diagram_graph.py

+"""
+Diagram Agent Graph — 2-Agent LangGraph: Planner → Tool → Responder.
+Planner generates Mermaid code, Responder explains the result.
+"""
+
+import logging
+import time
+from typing import Annotated, Any, TypedDict
+
+from langchain_core.messages import AIMessage, BaseMessage, HumanMessage, SystemMessage
+from langchain_core.tools import tool
+from langgraph.graph import END, StateGraph
+from langgraph.graph.message import add_messages
+from langgraph.prebuilt import ToolNode
+
+from langchain_openai import ChatOpenAI
+from config import OPENAI_API_KEY
+from .prompts import PLANNER_PROMPT, RESPONDER_PROMPT
+
+
+logger = logging.getLogger(__name__)
+
+
+def _extract_text(content) -> str:
+    """Extract plain text from msg.content — handles both str and Gemini list format."""
+    if isinstance(content, str):
+        return content
+    if isinstance(content, list):
+        parts = []
+        for item in content:
+            if isinstance(item, dict) and item.get("type") == "text":
+                parts.append(item.get("text", ""))
+            elif isinstance(item, str):
+                parts.append(item)
+        return "\n".join(parts) if parts else str(content)
+    return str(content or "")
+
+
+# ═══════════════════════════════════════════════
+# Tool: Generate Diagram
+# ═══════════════════════════════════════════════
+@tool
+def generate_diagram(mermaid_code: str, title: str = "", diagram_type: str = "flowchart") -> str:
+    """Generate a Mermaid diagram. Returns the Mermaid code for frontend rendering.
+
+    Args:
+        mermaid_code: Complete Mermaid syntax code for the diagram.
+        title: Optional title for the diagram.
+        diagram_type: Type of diagram (flowchart, sequence, class, gantt, pie, mindmap, er, state).
+
+    Returns:
+        JSON string with diagram data for frontend rendering.
+    """
+    import json
+
+    # Validate mermaid_code is not empty
+    if not mermaid_code or not mermaid_code.strip():
+        return json.dumps({
+            "status": "error",
+            "message": "Mermaid code is empty",
+        }, ensure_ascii=False)
+
+    return json.dumps({
+        "status": "success",
+        "mermaid_code": mermaid_code.strip(),
+        "title": title,
+        "diagram_type": diagram_type,
+    }, ensure_ascii=False)
+
+
+# ═══════════════════════════════════════════════
+# State
+# ═══════════════════════════════════════════════
+class DiagramState(TypedDict):
+    messages: Annotated[list[BaseMessage], add_messages]
+
+
+# ═══════════════════════════════════════════════
+# Graph Builder — 2-Agent Architecture
+# ═══════════════════════════════════════════════
+class DiagramGraph:
+    """2-Agent LangGraph: Planner → Tools → Responder."""
+
+    DIAGRAM_MODEL = "gpt-5.4-nano"
+
+    def __init__(self, model_name: str | None = None):
+        self.model_name = model_name or self.DIAGRAM_MODEL
+        self.tools = [generate_diagram]
+
+        # Planner needs higher max_tokens (4000) for complex Mermaid code generation
+        self.planner_llm = ChatOpenAI(
+            model=self.model_name, streaming=True, api_key=OPENAI_API_KEY,
+            temperature=0, max_tokens=4000,
+        )
+        self.planner_with_tools = self.planner_llm.bind_tools(self.tools)
+
+        # Responder only explains — default tokens fine
+        self.responder_llm = ChatOpenAI(
+            model=self.model_name, streaming=True, api_key=OPENAI_API_KEY,
+            temperature=0, max_tokens=1500,
+        )
+
+        self._compiled = None
+        logger.info(f"✅ DiagramGraph initialized with model: {self.model_name} (planner: 4000 tokens)")
+
+    # ─── Node 1: PLANNER ───
+    async def _planner_node(self, state: DiagramState) -> dict:
+        """Planner AI: analyze request, generate Mermaid code via tool."""
+        messages = state["messages"]
+
+        planner_messages = [SystemMessage(content=PLANNER_PROMPT)]
+        for msg in messages:
+            if not isinstance(msg, SystemMessage):
+                planner_messages.append(msg)
+
+        response = await self.planner_with_tools.ainvoke(planner_messages)
+        return {"messages": [response]}
+
+    # ─── Node 2: RESPONDER ───
+    async def _responder_node(self, state: DiagramState) -> dict:
+        """Responder AI: explain the generated diagram."""
+        messages = state["messages"]
+
+        responder_messages = [SystemMessage(content=RESPONDER_PROMPT)]
+        for msg in messages:
+            if not isinstance(msg, SystemMessage):
+                responder_messages.append(msg)
+
+        response = await self.responder_llm.ainvoke(responder_messages)
+        return {"messages": [response]}
+
+    # ─── Router ───
+    def _after_planner(self, state: DiagramState) -> str:
+        """After Planner: if tool_calls → go tools, else → end (ask clarification)."""
+        last = state["messages"][-1]
+        if hasattr(last, "tool_calls") and last.tool_calls:
+            return "tools"
+        return "end"
+
+    def build(self):
+        """Build 2-agent graph."""
+        if self._compiled:
+            return self._compiled
+
+        workflow = StateGraph(DiagramState)
+
+        workflow.add_node("planner", self._planner_node)
+        workflow.add_node("tools", ToolNode(self.tools))
+        workflow.add_node("responder", self._responder_node)
+
+        workflow.set_entry_point("planner")
+
+        workflow.add_conditional_edges(
+            "planner",
+            self._after_planner,
+            {"tools": "tools", "end": END},
+        )
+
+        workflow.add_edge("tools", "responder")
+        workflow.add_edge("responder", END)
+
+        self._compiled = workflow.compile()
+        logger.info("✅ DiagramGraph 2-Agent compiled")
+        return self._compiled
+
+    async def chat(self, user_message: str, history: list[BaseMessage] | None = None) -> dict:
+        """Main entry — send message and get response with diagram."""
+        start = time.time()
+        graph = self.build()
+
+        messages: list[BaseMessage] = []
+        if history:
+            messages.extend(history)
+        messages.append(HumanMessage(content=user_message))
+
+        result = await graph.ainvoke({"messages": messages})
+
+        elapsed_ms = round((time.time() - start) * 1000, 2)
+        all_messages = result["messages"]
+
+        ai_response = ""
+        tool_calls_log: list[dict[str, Any]] = []
+        has_tool_calls = False
+        pipeline: list[dict[str, Any]] = []
+        diagram_data = None  # Mermaid code for frontend
+
+        for msg in all_messages:
+            content_str = _extract_text(msg.content)
+
+            if isinstance(msg, HumanMessage):
+                pipeline.append({
+                    "step": "user",
+                    "label": "👤 User",
+                    "content": content_str,
+                })
+            elif isinstance(msg, AIMessage):
+                if msg.tool_calls:
+                    has_tool_calls = True
+                    tool_calls_log.extend(msg.tool_calls)
+                    pipeline.append({
+                        "step": "planner",
+                        "label": "🧠 Planner AI",
+                        "content": content_str if content_str and content_str != "[]" else "(generating diagram...)",
+                        "tool_calls": [
+                            {"name": tc["name"], "args": tc["args"]}
+                            for tc in msg.tool_calls
+                        ],
+                    })
+                elif msg.content:
+                    ai_response = content_str
+                    pipeline.append({
+                        "step": "responder",
+                        "label": "💬 Responder AI",
+                        "content": content_str[:500] + ("..." if len(content_str) > 500 else ""),
+                    })
+            else:
+                # Tool result — extract Mermaid code
+                tool_content = content_str
+                try:
+                    import json
+                    parsed = json.loads(tool_content)
+                    if parsed.get("status") == "success":
+                        diagram_data = {
+                            "mermaid_code": parsed.get("mermaid_code", ""),
+                            "title": parsed.get("title", ""),
+                            "diagram_type": parsed.get("diagram_type", "flowchart"),
+                        }
+                        pipeline.append({
+                            "step": "tool_result",
+                            "label": "📊 Diagram Generated",
+                            "content": f"✅ Đã tạo {parsed.get('diagram_type', 'diagram')}: {parsed.get('title', 'Untitled')}",
+                        })
+                    else:
+                        pipeline.append({
+                            "step": "tool_result",
+                            "label": "❌ Tool Error",
+                            "content": parsed.get("message", "Unknown error"),
+                        })
+                except Exception:
+                    pipeline.append({
+                        "step": "tool_result",
+                        "label": "📊 Tool Result",
+                        "content": tool_content[:300],
+                    })
+
+        agent_path = "planner→tools→responder" if has_tool_calls else "planner_only"
+
+        logger.info(
+            "📊 [DIAGRAM] query='%s' | path=%s | time=%.2fms",
+            user_message[:50], agent_path, elapsed_ms,
+        )
+
+        return {
+            "response": ai_response,
+            "elapsed_ms": elapsed_ms,
+            "tool_calls": [
+                {"name": tc["name"], "args": tc["args"]}
+                for tc in tool_calls_log
+            ],
+            "agent_path": agent_path,
+            "pipeline": pipeline,
+            "diagram": diagram_data,
+        }
+
+
+# ═══════════════════════════════════════════════
+# Singleton
+# ═══════════════════════════════════════════════
+_instance: DiagramGraph | None = None
+
+
+def get_diagram_agent(model_name: str | None = None) -> DiagramGraph:
+    """Get or create DiagramGraph singleton."""
+    global _instance
+    if _instance is None:
+        _instance = DiagramGraph(model_name)
+    return _instance

backend/agent/diagram_agent/prompts.py

+"""
+Prompts for the Diagram Agent — Planner generates Mermaid, Responder formats.
+"""
+
+PLANNER_PROMPT = """Bạn là AI Diagram Agent chuyên vẽ sơ đồ, flowchart, và diagram.
+
+## Khả năng
+Bạn có 1 tool: `generate_diagram` — nhận Mermaid code và trả lại cho user.
+
+## Luồng xử lý
+1. Phân tích yêu cầu của user: loại diagram nào? (flowchart, sequence, class, gantt, mindmap, pie, ER...)
+2. Thiết kế cấu trúc diagram trong đầu
+3. Gọi tool `generate_diagram` với Mermaid code hoàn chỉnh
+4. Nếu user chỉnh sửa → gọi lại tool với Mermaid code đã cập nhật
+
+## ⚠️ QUY TẮC MERMAID BẮT BUỘC (PHẢI TUÂN THỦ)
+
+### 1. Dùng TIẾNG ANH cho tất cả syntax-level labels
+Mermaid KHÔNG hỗ trợ Unicode/tiếng Việt ở các vị trí sau:
+- ER relationship labels: `CUSTOMER ||--o{ ORDER : places` ✅ (KHÔNG dùng `: đặt` ❌)
+- Sequence diagram arrows: `Alice->>Bob: Send request` ✅ (KHÔNG dùng `Gửi yêu cầu` ❌)
+- Edge labels trên arrow: `A -->|Yes| B` ✅
+
+### 2. Tiếng Việt CHỈ được dùng trong display brackets
+- Flowchart node labels: `A[Đặt hàng]` ✅
+- Subgraph titles: `subgraph Quy trình đặt hàng` ✅
+- Gantt task labels: `Khảo sát :a1, 2024-01-01, 30d` ✅
+- Pie labels: `"Sản phẩm A" : 40` ✅
+
+### 3. Node IDs phải ASCII, ngắn gọn
+- `A`, `B`, `C1`, `start`, `end`, `checkout` ✅
+- KHÔNG dùng: `đặt_hàng`, `khách_hàng` ❌
+
+### 4. ER Diagram — QUY TẮC ĐẶC BIỆT
+```
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE_ITEM : contains
+    CUSTOMER {
+        int id PK
+        string name
+        string email
+    }
+```
+- Entity names: UPPERCASE ASCII (CUSTOMER, ORDER, PRODUCT)
+- Attribute types: `int`, `string`, `decimal`, `date`, `boolean`
+- Relationship labels: 1 từ tiếng Anh đơn giản (places, contains, has, owns, manages)
+- KHÔNG dùng dấu gạch ngang trong entity name, dùng underscore: `LINE_ITEM` ✅
+
+### 5. Giới hạn độ phức tạp
+- Flowchart: tối đa 15-20 nodes
+- ER diagram: tối đa 6-8 entities
+- Sequence diagram: tối đa 6-8 participants
+- Nếu user yêu cầu quá phức tạp → chia thành nhiều diagram nhỏ hoặc simplify
+
+### 6. Syntax cơ bản
+- Khai báo: `graph TD`, `sequenceDiagram`, `classDiagram`, `gantt`, `pie`, `mindmap`, `erDiagram`, `stateDiagram-v2`, `flowchart LR`
+- Arrows: `-->` solid, `-.->` dashed, `==>` thick
+- Shapes: `[text]` rectangle, `(text)` rounded, `{text}` diamond, `([text])` stadium, `((text))` circle
+- Subgraph: `subgraph Title ... end`
+- Styling: `classDef highlight fill:#e8f5e9,stroke:#4caf50; class A,B highlight;`
+
+## Examples
+
+### Flowchart
+```
+graph TD
+    A[Khách truy cập] --> B{Đã đăng nhập?}
+    B -->|Yes| C[Trang chủ]
+    B -->|No| D[Trang login]
+    D --> E[Nhập thông tin]
+    E --> F{Hợp lệ?}
+    F -->|Yes| C
+    F -->|No| D
+    classDef highlight fill:#e3f2fd,stroke:#1976d2
+    class C highlight
+```
+
+### ER Diagram
+```
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ ORDER_ITEM : contains
+    PRODUCT ||--o{ ORDER_ITEM : included_in
+    CUSTOMER {
+        int id PK
+        string name
+        string email
+        string phone
+    }
+    ORDER {
+        int id PK
+        int customer_id FK
+        date order_date
+        string status
+        decimal total
+    }
+    PRODUCT {
+        int id PK
+        string name
+        string sku
+        decimal price
+    }
+    ORDER_ITEM {
+        int id PK
+        int order_id FK
+        int product_id FK
+        int quantity
+        decimal subtotal
+    }
+```
+
+### Sequence Diagram
+```
+sequenceDiagram
+    participant U as User
+    participant FE as Frontend
+    participant API as Backend API
+    participant DB as Database
+    U->>FE: Click login
+    FE->>API: POST /auth/login
+    API->>DB: Query user
+    DB-->>API: User data
+    API-->>FE: JWT token
+    FE-->>U: Redirect dashboard
+```
+
+### Mindmap
+```
+mindmap
+    root((Marketing Plan))
+        Content
+            Blog posts
+            Videos
+            Social media
+        SEO
+            Keywords
+            Backlinks
+        Ads
+            Google Ads
+            Facebook Ads
+```
+
+### Pie Chart
+```
+pie title Market Share 2025
+    "Product A" : 40
+    "Product B" : 30
+    "Product C" : 20
+    "Others" : 10
+```
+
+### Gantt Chart
+```
+gantt
+    title Project Timeline
+    dateFormat YYYY-MM-DD
+    section Phase 1
+    Research      :a1, 2024-01-01, 14d
+    Design        :a2, after a1, 10d
+    section Phase 2
+    Development   :a3, after a2, 30d
+    Testing       :a4, after a3, 14d
+```
+
+## Phong cách
+- Diagram rõ ràng, dễ đọc, chuyên nghiệp
+- Dùng classDef để tô màu nhóm phần tử
+- Node labels ngắn gọn, dễ hiểu (tiếng Việt OK trong brackets)
+- Direction: TD (top-down) cho flow dọc, LR (left-right) cho flow ngang
+- Khi chỉnh sửa diagram cũ, PHẢI giữ nguyên cấu trúc, chỉ thêm/sửa phần user yêu cầu
+
+## Khi user hỏi chung chung
+Hỏi lại 1 câu: "Bạn muốn vẽ loại diagram nào? (flowchart, sequence, ER, mindmap, gantt, pie...)"
+"""
+
+RESPONDER_PROMPT = """Bạn là AI Assistant trình bày kết quả diagram cho user.
+
+## Nhiệm vụ
+1. Giải thích ngắn gọn về diagram vừa tạo (2-3 câu max)
+2. Đề xuất chỉnh sửa nếu cần: "Bạn muốn thêm/sửa gì không?"
+3. KHÔNG lặp lại Mermaid code — diagram đã hiển thị ở panel bên phải
+
+## Phong cách
+- Thân thiện, chuyên nghiệp, tiếng Việt
+- Ngắn gọn, không giải thích quá chi tiết
+- Gợi ý hữu ích: thêm node, đổi layout, thêm màu, thêm entity...
+"""

backend/agent/persona_generator.py

+"""
+Canifa Persona Generator
+Inspired by MiroFish's OasisProfileGenerator — nhưng nhẹ hơn nhiều.
+
+MiroFish: Entity từ Knowledge Graph → 2000 chữ persona → mô phỏng MXH
+Canifa:   LLM generate trực tiếp → 100-150 chữ persona → test chatbot
+
+Flow:
+  1. Gọi LLM generate N personas dạng JSON có cấu trúc
+  2. Mỗi persona có: demographics + shopping behavior + conversion trigger
+  3. User Simulator dùng persona để đóng vai chat với chatbot
+"""
+
+import json
+import logging
+import random
+from dataclasses import dataclass, field
+from typing import Any
+
+from common.llm_factory import create_llm
+from config import DEFAULT_MODEL
+
+logger = logging.getLogger(__name__)
+
+
+# ═══════════════════════════════════════════════════════════════
+# DATA MODEL — Lightweight version of MiroFish's OasisAgentProfile
+# ═══════════════════════════════════════════════════════════════
+@dataclass
+class CanifaPersona:
+    """Canifa customer persona for chatbot testing."""
+
+    # Identity
+    name: str
+    age: int
+    gender: str  # "male" | "female"
+    job: str
+    income_range: str  # "5-10tr" | "10-20tr" | "20-40tr"
+    mbti: str
+
+    # Shopping context
+    shopping_for: str  # "Bản thân" | "Con gái 3 tuổi" | "Vợ"
+    budget: str  # "200k-500k"
+    occasion: str  # "Đi làm" | "Đi chơi" | "Đi học"
+    style_preference: str  # "Năng động" | "Thanh lịch"
+
+    # Chat behavior
+    chat_style: str  # Mô tả cách chat: ngắn gọn, dùng emoji, hỏi nhiều...
+    system_prompt: str  # Prompt để LLM đóng vai persona này
+
+    # Conversion criteria
+    conversion_trigger: str  # Điều kiện MUA: "Bot gợi combo dưới 500k"
+    drop_trigger: str  # Điều kiện BỎ: "Bot gợi SP trên 1tr"
+
+    # Metadata
+    persona_id: int = 0
+    archetype: str = ""  # "Mẹ bỉm sữa" | "GenZ" | "Ông chú IT"
+
+    def to_dict(self) -> dict[str, Any]:
+        return {
+            "persona_id": self.persona_id,
+            "name": self.name,
+            "age": self.age,
+            "gender": self.gender,
+            "job": self.job,
+            "income_range": self.income_range,
+            "mbti": self.mbti,
+            "archetype": self.archetype,
+            "shopping_for": self.shopping_for,
+            "budget": self.budget,
+            "occasion": self.occasion,
+            "style_preference": self.style_preference,
+            "chat_style": self.chat_style,
+            "system_prompt": self.system_prompt,
+            "conversion_trigger": self.conversion_trigger,
+            "drop_trigger": self.drop_trigger,
+        }
+
+
+# ═══════════════════════════════════════════════════════════════
+# ARCHETYPES — Predefined customer segments for Canifa
+# ═══════════════════════════════════════════════════════════════
+CANIFA_ARCHETYPES = [
+    "Mẹ bỉm sữa — mua đồ cho con nhỏ, cẩn thận, so sánh giá",
+    "GenZ TikToker — thích trend, chat nhanh, dùng slang/emoji",
+    "Nhân viên văn phòng nữ — mua đồ đi làm, thanh lịch, budget vừa",
+    "Ông chú IT — mua quà cho vợ/con gái, không rành thời trang",
+    "Sinh viên tiết kiệm — budget thấp, săn sale, hỏi nhiều",
+    "Chị em công sở — mua theo nhóm, hay hỏi ý kiến, thích combo",
+    "Anh trai gym — tìm đồ thể thao/polo, quan tâm chất liệu",
+    "Bà ngoại — mua cho cháu, không quen chat, hỏi đơn giản",
+    "Fashionista — biết nhiều brand, kén chọn, so sánh Canifa vs Uniqlo",
+    "Khách vãng lai — vào hỏi 1 câu rồi đi, test bot có giữ chân được không",
+]
+
+
+# ═══════════════════════════════════════════════════════════════
+# GENERATOR — Core logic
+# ═══════════════════════════════════════════════════════════════
+GENERATE_SYSTEM_PROMPT = """Bạn là chuyên gia tạo persona khách hàng cho thương hiệu thời trang CANIFA Việt Nam.
+
+Tạo persona CHÂN THỰC, NGẮN GỌN, dùng cho mục đích test chatbot bán hàng.
+Mỗi persona phải có tính cách rõ ràng, hành vi mua sắm cụ thể, và điều kiện conversion/drop rõ ràng.
+
+Trả về JSON array. KHÔNG giải thích gì thêm."""
+
+
+def _build_generate_prompt(count: int, archetypes: list[str] | None = None) -> str:
+    """Build prompt to generate N personas."""
+    if not archetypes:
+        archetypes = random.sample(CANIFA_ARCHETYPES, min(count, len(CANIFA_ARCHETYPES)))
+
+    archetypes_str = "\n".join(f"  {i+1}. {a}" for i, a in enumerate(archetypes))
+
+    return f"""Tạo {count} persona khách hàng CANIFA dựa trên các archetype sau:
+{archetypes_str}
+
+Mỗi persona là 1 JSON object gồm:
+- "name": Tên Việt Nam tự nhiên (VD: "Chị Lan", "Bé Vy", "Anh Minh")
+- "age": Số tuổi (18-65)
+- "gender": "male" hoặc "female"
+- "job": Nghề nghiệp ngắn gọn
+- "income_range": Khoảng thu nhập/tháng (VD: "8-12tr")
+- "mbti": 1 trong 16 MBTI types
+- "archetype": Tên nhóm khách (VD: "Mẹ bỉm sữa")
+- "shopping_for": Mua cho ai (VD: "Con trai 4 tuổi", "Bản thân", "Chồng")
+- "budget": Ngân sách cho lần mua này (VD: "300k-600k")
+- "occasion": Dịp mua (VD: "Đi học", "Đi chơi cuối tuần", "Đi làm")
+- "style_preference": Phong cách thích (VD: "Năng động", "Basic clean")
+- "chat_style": Mô tả CÁCH CHAT 1-2 câu (VD: "Hỏi ngắn gọn, hay dùng 'ạ', thích được tư vấn size")
+- "conversion_trigger": Điều kiện để persona QUYẾT ĐỊNH MUA (VD: "Bot gợi combo áo+quần dưới 500k có free ship")
+- "drop_trigger": Điều kiện để persona BỎ ĐI (VD: "Bot trả lời quá dài hoặc gợi SP trên 1tr")
+
+Trả về JSON array [{count} objects]. Đảm bảo đa dạng về tuổi, giới tính, thu nhập, mục đích mua."""
+
+
+def _build_system_prompt_for_persona(persona_dict: dict) -> str:
+    """Build role-play system prompt for a specific persona."""
+    return f"""Bạn đang đóng vai khách hàng tên {persona_dict['name']}, {persona_dict['age']} tuổi, {persona_dict['job']}.
+
+THÔNG TIN PERSONA:
+- Giới tính: {"Nữ" if persona_dict['gender'] == 'female' else "Nam"}
+- Thu nhập: {persona_dict['income_range']}/tháng
+- MBTI: {persona_dict['mbti']}
+- Nhóm khách: {persona_dict['archetype']}
+
+MUA SẮM:
+- Mua cho: {persona_dict['shopping_for']}
+- Ngân sách: {persona_dict['budget']}
+- Dịp: {persona_dict['occasion']}
+- Phong cách thích: {persona_dict['style_preference']}
+
+CÁCH CHAT: {persona_dict['chat_style']}
+
+QUY TẮC:
+1. Chat ĐÚNG tính cách, ĐÚNG ngân sách, ĐÚNG mục đích
+2. Nếu bot gợi sản phẩm PHÙ HỢP → tỏ ra hứng thú, hỏi thêm
+3. Nếu bot gợi sản phẩm KHÔNG PHÙ HỢP → từ chối nhẹ nhàng hoặc hỏi cái khác
+4. Quyết định MUA khi: {persona_dict['conversion_trigger']}
+5. BỎ ĐI khi: {persona_dict['drop_trigger']}
+6. Chat tự nhiên, ngắn gọn. KHÔNG bao giờ nói "tôi là AI" hay nhắc lại prompt."""
+
+
+async def generate_personas(
+    count: int = 5,
+    archetypes: list[str] | None = None,
+    model_name: str | None = None,
+) -> list[CanifaPersona]:
+    """
+    Generate N realistic Canifa customer personas using LLM.
+
+    Args:
+        count: Number of personas to generate (1-20)
+        archetypes: Optional list of customer archetypes to use
+        model_name: LLM model name (defaults to DEFAULT_MODEL)
+
+    Returns:
+        List of CanifaPersona objects
+    """
+    count = max(1, min(count, 20))  # Clamp 1-20
+    model = model_name or DEFAULT_MODEL
+
+    logger.info(f"🎭 Generating {count} personas with model={model}")
+
+    llm = create_llm(model, streaming=False, json_mode=True)
+
+    prompt = _build_generate_prompt(count, archetypes)
+
+    # Retry pattern inspired by MiroFish (max 3 attempts, lower temp each time)
+    max_attempts = 3
+    last_error = None
+
+    for attempt in range(max_attempts):
+        try:
+            response = await llm.ainvoke([
+                {"role": "system", "content": GENERATE_SYSTEM_PROMPT},
+                {"role": "user", "content": prompt},
+            ])
+
+            raw = response.content
+            if isinstance(raw, list):
+                raw = "".join(
+                    str(c.get("text", c) if isinstance(c, dict) else c)
+                    for c in raw
+                )
+
+            # Parse JSON — handle both array and wrapped object
+            data = json.loads(raw)
+            if isinstance(data, dict):
+                # LLM might wrap array in {"personas": [...]}
+                for key in ("personas", "data", "results", "items"):
+                    if key in data and isinstance(data[key], list):
+                        data = data[key]
+                        break
+                else:
+                    data = [data]  # Single persona
+
+            if not isinstance(data, list):
+                raise ValueError(f"Expected list, got {type(data)}")
+
+            # Convert to CanifaPersona objects
+            personas = []
+            for i, p in enumerate(data[:count]):
+                try:
+                    system_prompt = _build_system_prompt_for_persona(p)
+                    persona = CanifaPersona(
+                        persona_id=i + 1,
+                        name=p.get("name", f"Persona_{i+1}"),
+                        age=int(p.get("age", 25)),
+                        gender=p.get("gender", "female"),
+                        job=p.get("job", "Không rõ"),
+                        income_range=p.get("income_range", "10-15tr"),
+                        mbti=p.get("mbti", "ISFJ"),
+                        archetype=p.get("archetype", "Khách vãng lai"),
+                        shopping_for=p.get("shopping_for", "Bản thân"),
+                        budget=p.get("budget", "300k-700k"),
+                        occasion=p.get("occasion", "Đi chơi"),
+                        style_preference=p.get("style_preference", "Basic"),
+                        chat_style=p.get("chat_style", "Chat bình thường"),
+                        system_prompt=system_prompt,
+                        conversion_trigger=p.get("conversion_trigger", "Sản phẩm phù hợp"),
+                        drop_trigger=p.get("drop_trigger", "Không tìm được SP phù hợp"),
+                    )
+                    personas.append(persona)
+                except Exception as e:
+                    logger.warning(f"⚠️ Skipping persona {i}: {e}")
+                    continue
+
+            logger.info(f"✅ Generated {len(personas)} personas successfully")
+            return personas
+
+        except json.JSONDecodeError as e:
+            last_error = e
+            logger.warning(f"⚠️ JSON parse failed (attempt {attempt+1}/{max_attempts}): {e}")
+        except Exception as e:
+            last_error = e
+            logger.warning(f"⚠️ Generate failed (attempt {attempt+1}/{max_attempts}): {e}")
+
+    logger.error(f"❌ All {max_attempts} attempts failed: {last_error}")
+    raise RuntimeError(f"Failed to generate personas after {max_attempts} attempts: {last_error}")

backend/agent/reaction_agent/__init__.py

+"""
+Reaction Agent — Community Reaction Simulator
+==============================================
+Lấy cảm hứng từ BettaFish ForumEngine.
+
+Simulate phản ứng cộng đồng khi Canifa launch chiến dịch mới.
+Dùng LLM generate realistic reactions từ các persona segments.
+"""
+
+from .reaction_agent import (
+    run_reaction_simulation,
+    simulate_reaction_for_persona,
+    PERSONA_SEGMENTS,
+    CAMPAIGN_TYPES,
+)
+
+__all__ = [
+    "run_reaction_simulation",
+    "simulate_reaction_for_persona",
+    "PERSONA_SEGMENTS",
+    "CAMPAIGN_TYPES",
+]

backend/agent/reaction_agent/reaction_agent.py

+"""
+Reaction Agent — Community Reaction Simulator Engine
+=====================================================
+Lấy cảm hứng từ BettaFish ForumEngine + MiroFish simulate_agent.
+
+Simulate phản ứng cộng đồng khi Canifa có chiến dịch mới.
+Dùng LLM để generate realistic reactions từ các persona segments.
+
+Model: gpt-5.4-nano (from DEFAULT_MODEL env)
+"""
+
+import logging
+import json
+from typing import Any
+
+from common.llm_factory import create_llm
+from config import DEFAULT_MODEL
+
+logger = logging.getLogger(__name__)
+
+# ═══ PERSONA SEGMENTS ═══
+PERSONA_SEGMENTS = [
+    {
+        "id": "mom_shopper",
+        "name": "Mom Shopper",
+        "desc": "Phụ nữ 30-40t, mua cho gia đình, ưu tiên chất lượng và giá hợp lý",
+        "traits": "thực tế, so sánh giá, quan tâm chất liệu và độ bền",
+        "tone": "nhẹ nhàng, có emoji, chia sẻ kinh nghiệm",
+        "weight": 0.20,
+    },
+    {
+        "id": "young_professional",
+        "name": "Young Professional",
+        "desc": "Nam/Nữ 25-32t, đi làm văn phòng, thích basic smart casual",
+        "traits": "theo dõi sale, thích đồ basic công sở, hay compare brand",
+        "tone": "ngắn gọn, lịch sự, đôi khi hỏi thêm chi tiết",
+        "weight": 0.20,
+    },
+    {
+        "id": "fashion_enthusiast",
+        "name": "Fashion Enthusiast",
+        "desc": "Nữ 28-38t, sẵn sàng chi tiền cho item đẹp, follow KOL",
+        "traits": "biết về trend, chú ý chất liệu, phong cách, so sánh với Muji/Uniqlo",
+        "tone": "hào hứng, dùng từ fashion, nhiều detail",
+        "weight": 0.15,
+    },
+    {
+        "id": "budget_conscious",
+        "name": "Budget Conscious",
+        "desc": "Nam 35-45t, mua khi sale, so sánh giá nhiều brand, thực dụng",
+        "traits": "nhạy giá, tính toán, compare kỹ, chờ sale",
+        "tone": "phân tích, so sánh số liệu, đôi khi tiêu cực về giá",
+        "weight": 0.15,
+    },
+    {
+        "id": "gen_z",
+        "name": "Gen Z Trendy",
+        "desc": "Nam/Nữ 18-25t, thích local brand, aesthetic, chia sẻ TikTok",
+        "traits": "FOMO, trend-driven, visual-first, share trên social",
+        "tone": "slang, emoji nhiều, hype, viết tắt",
+        "weight": 0.15,
+    },
+    {
+        "id": "kol",
+        "name": "KOL / Blogger",
+        "desc": "Nữ 25-35t, review sản phẩm chuyên nghiệp, phân tích kỹ",
+        "traits": "objective, so sánh chất liệu, phân tích chiến lược brand",
+        "tone": "chuyên nghiệp, review dài, phân tích deep",
+        "weight": 0.10,
+    },
+    {
+        "id": "troll",
+        "name": "Social Media Troll",
+        "desc": "Comment nhanh, hay chê, so sánh Uniqlo/Zara, toxic nhẹ",
+        "traits": "cynical, so sánh brand ngoại, hay dùng meme",
+        "tone": "châm biếm, ngắn, sarcastic, emoji mockery",
+        "weight": 0.05,
+    },
+]
+
+CAMPAIGN_TYPES = {
+    "product_launch": "Ra mắt sản phẩm mới",
+    "promotion": "Chương trình khuyến mãi / Flash Sale",
+    "collection": "Ra mắt Bộ sưu tập (BST)",
+    "price_change": "Thay đổi / Tăng giá",
+    "social_post": "Bài đăng Social Media",
+    "collab": "Hợp tác thương hiệu (Collab)",
+}
+
+
+REACTION_PROMPT = """Bạn là một người Việt Nam thực sự trên mạng xã hội.
+Persona: {persona_name} — {persona_desc}
+Tính cách: {persona_traits}
+Giọng văn: {persona_tone}
+
+Canifa vừa đăng một {campaign_type_label}:
+---
+{campaign_content}
+---
+
+Hãy viết MỘT comment phản ứng tự nhiên như trên Facebook/TikTok.  
+Trả về JSON (không markdown):
+{{
+  "comment": "nội dung comment",
+  "sentiment": "positive" | "neutral" | "negative",
+  "likes_estimate": <number 1-200>,
+  "shares_estimate": <number 0-50>,
+  "key_concern": "vấn đề chính quan tâm (nếu có, null nếu không)"
+}}
+"""
+
+
+async def simulate_reaction_for_persona(
+    persona: dict,
+    campaign_type: str,
+    campaign_content: str,
+    model_name: str | None = None,
+) -> dict[str, Any]:
+    """Generate a single persona's reaction to a campaign."""
+    model = model_name or DEFAULT_MODEL
+    llm = create_llm(model, streaming=False)
+
+    prompt = REACTION_PROMPT.format(
+        persona_name=persona["name"],
+        persona_desc=persona["desc"],
+        persona_traits=persona["traits"],
+        persona_tone=persona["tone"],
+        campaign_type_label=CAMPAIGN_TYPES.get(campaign_type, campaign_type),
+        campaign_content=campaign_content,
+    )
+
+    try:
+        response = await llm.ainvoke([
+            {"role": "system", "content": "You are a social media comment generator. Always respond in valid JSON."},
+            {"role": "user",   "content": prompt},
+        ])
+        raw = response.content
+        if isinstance(raw, list):
+            raw = "".join(str(c.get("text", c) if isinstance(c, dict) else c) for c in raw)
+
+        data = json.loads(raw.strip().removeprefix("```json").removesuffix("```").strip())
+        return {
+            "persona_id": persona["id"],
+            "persona_name": persona["name"],
+            "segment": persona["name"],
+            **data,
+        }
+    except Exception as e:
+        logger.error(f"❌ [{persona['name']}] Reaction gen failed: {e}")
+        return {
+            "persona_id": persona["id"],
+            "persona_name": persona["name"],
+            "segment": persona["name"],
+            "comment": f"[Error generating reaction: {e}]",
+            "sentiment": "neutral",
+            "likes_estimate": 0,
+            "shares_estimate": 0,
+            "key_concern": None,
+        }
+
+
+async def run_reaction_simulation(
+    campaign_type: str,
+    campaign_content: str,
+    persona_weights: dict[str, float] | None = None,
+    model_name: str | None = None,
+) -> dict[str, Any]:
+    """
+    Run full community reaction simulation.
+
+    Args:
+        campaign_type: Type of campaign (product_launch, promotion, etc.)
+        campaign_content: The campaign text content
+        persona_weights: Optional weight overrides for each persona segment
+        model_name: LLM model override
+
+    Returns:
+        Full simulation results with reactions, sentiment, recommendations
+    """
+    reactions = []
+    segments_used = PERSONA_SEGMENTS.copy()
+
+    # Apply weight overrides
+    if persona_weights:
+        for seg in segments_used:
+            if seg["id"] in persona_weights:
+                seg["weight"] = persona_weights[seg["id"]]
+
+    # Generate reactions
+    for persona in segments_used:
+        logger.info(f"🎭 Simulating: {persona['name']}...")
+        result = await simulate_reaction_for_persona(
+            persona, campaign_type, campaign_content, model_name
+        )
+        reactions.append(result)
+
+    # Calculate sentiment
+    pos = sum(1 for r in reactions if r.get("sentiment") == "positive")
+    neu = sum(1 for r in reactions if r.get("sentiment") == "neutral")
+    neg = sum(1 for r in reactions if r.get("sentiment") == "negative")
+    total = len(reactions)
+
+    sentiment = {
+        "positive": round(pos / total * 100) if total else 0,
+        "neutral": round(neu / total * 100) if total else 0,
+        "negative": round(neg / total * 100) if total else 0,
+        "total_reactions": total,
+    }
+
+    # Generate recommendations
+    recommendations = _generate_recommendations(reactions, sentiment, campaign_type)
+
+    return {
+        "status": "success",
+        "campaign_type": campaign_type,
+        "reactions": reactions,
+        "sentiment": sentiment,
+        "recommendations": recommendations,
+    }
+
+
+def _generate_recommendations(
+    reactions: list[dict], sentiment: dict, campaign_type: str
+) -> list[dict]:
+    """Generate actionable recommendations based on reactions."""
+    recos = []
+    neg_pct = sentiment.get("negative", 0)
+    pos_pct = sentiment.get("positive", 0)
+
+    if neg_pct >= 40:
+        recos.append({
+            "icon": "🚨", "severity": "high",
+            "text": "Tỷ lệ tiêu cực CAO (>40%). Cân nhắc điều chỉnh nội dung hoặc delay launch.",
+        })
+    elif neg_pct >= 20:
+        recos.append({
+            "icon": "⚠️", "severity": "medium",
+            "text": "Có phản ứng tiêu cực đáng kể. Chuẩn bị response template cho team CS.",
+        })
+
+    neg_concerns = [r.get("key_concern") for r in reactions
+                    if r.get("sentiment") == "negative" and r.get("key_concern")]
+    if neg_concerns:
+        recos.append({
+            "icon": "💡", "severity": "info",
+            "text": f"Concerns chính: {', '.join(neg_concerns[:3])}",
+        })
+
+    if pos_pct >= 60:
+        recos.append({
+            "icon": "🚀", "severity": "positive",
+            "text": "Tín hiệu tốt! Chiến dịch có tiềm năng viral. Chuẩn bị stock + hạ tầng đơn hàng.",
+        })
+
+    recos.append({
+        "icon": "📊", "severity": "info",
+        "text": "Ưu tiên kênh TikTok/Instagram nếu Gen Z phản ứng tích cực, Facebook nếu Mom Shopper positive.",
+    })
+
+    return recos
+""",
+<parameter name="Description">Backend reaction agent that uses LLM to simulate community reactions to campaigns. Follows the same pattern as the existing simulate_agent.

backend/agent/simulate_agent/__init__.py

+"""
+Simulate Agent — MiroFish-Inspired Conversion Testing Engine
+=============================================================
+
+Modules:
+  - persona_generator:  LLM-based realistic customer persona generation
+  - simulation_runner:  Core loop: persona chat → bot reply → evaluate
+  - evaluator:          Conversion measurement + insight accuracy scoring
+
+Flow:
+  1. persona_generator tạo N personas (demographics + behavior + triggers)
+  2. simulation_runner chạy mỗi persona chat N turns với chatbot
+  3. evaluator đo conversion status + insight accuracy + product match
+  4. synthesis tổng hợp → Conversion Report
+
+Model: gpt-5.4-nano (from DEFAULT_MODEL env)
+"""
+
+from .persona_generator import CanifaPersona, generate_personas, CANIFA_ARCHETYPES
+from .simulation_runner import run_simulation
+from .evaluator import evaluate_conversation, synthesize_results
+
+__all__ = [
+    "CanifaPersona",
+    "generate_personas",
+    "CANIFA_ARCHETYPES",
+    "run_simulation",
+    "evaluate_conversation",
+    "synthesize_results",
+]

backend/agent/simulate_agent/evaluator.py

+"""
+Evaluator — Conversion Measurement + Insight Accuracy
+=======================================================
+Đánh giá chatbot từ góc nhìn persona:
+  A. Quality scores (1-5)
+  B. Conversion status (converted/interested/dropped)
+  C. Insight accuracy (bot nhận ra persona đúng bao nhiêu %)
+  D. Product relevance (SP gợi ý phù hợp bao nhiêu %)
+
+Model: gpt-5.4-nano
+"""
+
+import json
+import logging
+from typing import Any
+
+from common.llm_factory import create_llm
+from config import DEFAULT_MODEL
+
+logger = logging.getLogger(__name__)
+
+SIM_MODEL = DEFAULT_MODEL
+
+# ═══════════════════════════════════════════════════════════════
+# EVALUATE PROMPT
+# ═══════════════════════════════════════════════════════════════
+EVAL_SYSTEM = """Bạn là UX evaluator đánh giá chatbot bán hàng thời trang CANIFA.
+Bạn quan sát cuộc chat giữa 1 khách giả lập (persona) và chatbot.
+
+Đánh giá từ GÓC NHÌN PERSONA:
+
+A. SCORES (1.0-5.0):
+- clarity: Bot dễ hiểu?
+- helpfulness: Giải quyết được vấn đề?
+- naturalness: Tự nhiên?
+- task_completion: Khách đạt mục đích?
+- satisfaction: Hài lòng?
+
+B. CONVERSION:
+- conversion_status: "converted" | "interested" | "dropped"
+  + converted = persona nói "mua", "đặt", "lấy cái này"
+  + interested = hứng thú nhưng chưa quyết
+  + dropped = mất hứng, từ chối, bot không phù hợp
+- conversion_reason: Lý do 1 câu tiếng Việt
+
+C. INSIGHT ACCURACY (nếu có):
+- insight_accuracy: 0-100 (bot nhận đúng persona %)
+- insight_details: Bot hiểu đúng/sai gì
+
+D. PRODUCT:
+- product_match: 0-100 (SP phù hợp persona %)
+- product_details: SP hợp/không hợp
+
+E. ANALYSIS:
+- key_wins: 1-2 điểm mạnh (array, tiếng Việt)
+- key_fails: 1-2 điểm yếu (array, tiếng Việt)
+- prompt_fix: 1 instruction fix vấn đề lớn nhất (tiếng Việt)
+
+Trả ONLY valid JSON."""
+
+
+async def evaluate_conversation(
+    persona_name: str,
+    persona_age: int,
+    persona_archetype: str,
+    chat_style: str,
+    budget: str,
+    shopping_for: str,
+    style_preference: str,
+    conversion_trigger: str,
+    drop_trigger: str,
+    conversation: list[dict[str, str]],
+    model_name: str | None = None,
+) -> dict[str, Any]:
+    """
+    Evaluate 1 conversation → scores + conversion + insight accuracy.
+
+    Returns dict with: scores, conversion_status, conversion_reason,
+    insight_accuracy, product_match, key_wins, key_fails, prompt_fix
+    """
+    model = model_name or SIM_MODEL
+
+    conv_text = "\n".join(
+        f"{'Persona' if m['role'] == 'user' else 'Chatbot'}: {m['content']}"
+        for m in conversation
+    )
+
+    eval_input = f"""Persona: {persona_name} ({persona_age} tuổi, {persona_archetype})
+Chat style: {chat_style}
+Budget: {budget}
+Mua cho: {shopping_for}
+Style: {style_preference}
+
+CONVERSION CRITERIA:
+- MUA khi: {conversion_trigger}
+- BỎ khi: {drop_trigger}
+
+Conversation ({len(conversation)} messages):
+{conv_text}
+
+Evaluate and determine CONVERSION STATUS."""
+
+    llm = create_llm(model, streaming=False, json_mode=True)
+
+    # Retry
+    for attempt in range(3):
+        try:
+            response = await llm.ainvoke([
+                {"role": "system", "content": EVAL_SYSTEM},
+                {"role": "user", "content": eval_input},
+            ])
+
+            raw = response.content
+            if isinstance(raw, list):
+                raw = "".join(str(c.get("text", c) if isinstance(c, dict) else c) for c in raw)
+
+            return json.loads(raw)
+
+        except Exception as e:
+            logger.warning(f"⚠️ Evaluate fail (attempt {attempt+1}/3): {e}")
+
+    logger.error(f"❌ Evaluate failed for {persona_name}")
+    return {
+        "scores": {"clarity": 0, "helpfulness": 0, "naturalness": 0, "task_completion": 0, "satisfaction": 0},
+        "conversion_status": "error",
+        "conversion_reason": "Evaluation failed",
+        "key_wins": [],
+        "key_fails": ["Evaluation error"],
+        "prompt_fix": "",
+    }
+
+
+# ═══════════════════════════════════════════════════════════════
+# SYNTHESIZE PROMPT
+# ═══════════════════════════════════════════════════════════════
+SYNTHESIS_SYSTEM = """Bạn là senior UX researcher. Phân tích kết quả simulation nhiều personas.
+
+Tạo BÁO CÁO CONVERSION:
+
+1. conversion_summary:
+   - total_personas, converted, interested, dropped, conversion_rate
+
+2. segment_analysis: Array of {archetype, conversion_status, avg_score, issue}
+
+3. worst_personas: Tên persona điểm thấp nhất
+
+4. systemic_issues: 2-3 vấn đề hệ thống (tiếng Việt)
+
+5. top_fixes: Array of {title, instruction, impacts}
+
+6. insight_accuracy_avg: Trung bình %
+
+7. overall_score: 1.0-5.0
+
+8. summary: 2-3 câu tóm executive (tiếng Việt)
+
+Trả ONLY valid JSON."""
+
+
+async def synthesize_results(
+    results: list[dict[str, Any]],
+    chatbot_prompt: str = "",
+    model_name: str | None = None,
+) -> dict[str, Any]:
+    """
+    Tổng hợp kết quả từ tất cả personas → Conversion Report.
+    """
+    model = model_name or SIM_MODEL
+
+    summaries = []
+    for r in results:
+        scores = r.get("scores", {})
+        ov = sum(scores.values()) / max(len(scores), 1)
+        summaries.append(
+            f"{r.get('persona_name', '?')} ({r.get('archetype', '?')}): "
+            f"overall {ov:.1f}/5 | "
+            f"conversion: {r.get('conversion_status', '?')} | "
+            f"reason: {r.get('conversion_reason', '?')}\n"
+            f"  Scores: {json.dumps(scores)}\n"
+            f"  Insight accuracy: {r.get('insight_accuracy', '?')}%\n"
+            f"  Product match: {r.get('product_match', '?')}%\n"
+            f"  Wins: {'; '.join(r.get('key_wins', []))}\n"
+            f"  Fails: {'; '.join(r.get('key_fails', []))}"
+        )
+
+    synth_input = f"""Chatbot prompt (trích): "{chatbot_prompt[:1000]}"
+
+Results across {len(results)} personas:
+{chr(10).join(summaries)}
+
+Provide CONVERSION REPORT and top fixes."""
+
+    llm = create_llm(model, streaming=False, json_mode=True)
+
+    for attempt in range(3):
+        try:
+            response = await llm.ainvoke([
+                {"role": "system", "content": SYNTHESIS_SYSTEM},
+                {"role": "user", "content": synth_input},
+            ])
+
+            raw = response.content
+            if isinstance(raw, list):
+                raw = "".join(str(c.get("text", c) if isinstance(c, dict) else c) for c in raw)
+
+            return json.loads(raw)
+
+        except Exception as e:
+            logger.warning(f"⚠️ Synthesize fail (attempt {attempt+1}/3): {e}")
+
+    logger.error("❌ Synthesize failed")
+    return {"error": "Synthesis failed after 3 attempts"}

backend/agent/simulate_agent/persona_generator.py

+"""
+Canifa Persona Generator
+=========================
+Inspired by MiroFish OasisProfileGenerator — nhưng nhẹ hơn 90%.
+
+MiroFish: Entity từ Knowledge Graph → 2000 chữ → mô phỏng MXH
+Canifa:   LLM generate trực tiếp → 100-150 chữ → test chatbot
+
+Model: gpt-5.4-nano (DEFAULT_MODEL)
+"""
+
+import json
+import logging
+import random
+from dataclasses import dataclass
+from typing import Any
+
+from common.llm_factory import create_llm
+from config import DEFAULT_MODEL
+
+logger = logging.getLogger(__name__)
+
+# Model — dùng gpt-5.4-nano từ env
+SIM_MODEL = DEFAULT_MODEL
+
+
+# ═══════════════════════════════════════════════════════════════
+# DATA MODEL
+# ═══════════════════════════════════════════════════════════════
+@dataclass
+class CanifaPersona:
+    """Canifa customer persona — lightweight version of MiroFish OasisAgentProfile."""
+
+    # Identity
+    name: str
+    age: int
+    gender: str          # "male" | "female"
+    job: str
+    income_range: str    # "5-10tr" | "10-20tr"
+    mbti: str
+
+    # Shopping context
+    shopping_for: str    # "Bản thân" | "Con gái 3 tuổi"
+    budget: str          # "200k-500k"
+    occasion: str        # "Đi làm" | "Đi chơi"
+    style_preference: str
+
+    # Chat behavior
+    chat_style: str      # Mô tả cách chat
+    system_prompt: str   # Prompt để LLM đóng vai
+
+    # Conversion criteria
+    conversion_trigger: str   # Điều kiện MUA
+    drop_trigger: str         # Điều kiện BỎ
+
+    # Metadata
+    persona_id: int = 0
+    archetype: str = ""
+
+    def to_dict(self) -> dict[str, Any]:
+        return {
+            "persona_id": self.persona_id,
+            "name": self.name,
+            "age": self.age,
+            "gender": self.gender,
+            "job": self.job,
+            "income_range": self.income_range,
+            "mbti": self.mbti,
+            "archetype": self.archetype,
+            "shopping_for": self.shopping_for,
+            "budget": self.budget,
+            "occasion": self.occasion,
+            "style_preference": self.style_preference,
+            "chat_style": self.chat_style,
+            "system_prompt": self.system_prompt,
+            "conversion_trigger": self.conversion_trigger,
+            "drop_trigger": self.drop_trigger,
+        }
+
+
+# ═══════════════════════════════════════════════════════════════
+# ARCHETYPES — Khách hàng Canifa điển hình
+# ═══════════════════════════════════════════════════════════════
+CANIFA_ARCHETYPES = [
+    "Mẹ bỉm sữa — mua đồ cho con nhỏ, cẩn thận, so sánh giá",
+    "GenZ TikToker — thích trend, chat nhanh, dùng slang/emoji",
+    "Nhân viên văn phòng nữ — mua đồ đi làm, thanh lịch, budget vừa",
+    "Ông chú IT — mua quà cho vợ/con gái, không rành thời trang",
+    "Sinh viên tiết kiệm — budget thấp, săn sale, hỏi nhiều",
+    "Chị em công sở — mua theo nhóm, hay hỏi ý kiến, thích combo",
+    "Anh trai gym — tìm đồ thể thao/polo, quan tâm chất liệu",
+    "Bà ngoại — mua cho cháu, không quen chat, hỏi đơn giản",
+    "Fashionista — biết nhiều brand, kén chọn, so sánh Canifa vs Uniqlo",
+    "Khách vãng lai — vào hỏi 1 câu rồi đi, test bot giữ chân",
+]
+
+
+# ═══════════════════════════════════════════════════════════════
+# PROMPTS
+# ═══════════════════════════════════════════════════════════════
+_GENERATE_SYSTEM = """Bạn là chuyên gia tạo persona khách hàng cho thương hiệu thời trang CANIFA Việt Nam.
+Tạo persona CHÂN THỰC, NGẮN GỌN dùng cho test chatbot bán hàng.
+Trả về JSON array. KHÔNG giải thích."""
+
+
+def _build_generate_prompt(count: int, archetypes: list[str] | None = None) -> str:
+    if not archetypes:
+        archetypes = random.sample(CANIFA_ARCHETYPES, min(count, len(CANIFA_ARCHETYPES)))
+
+    archetypes_str = "\n".join(f"  {i+1}. {a}" for i, a in enumerate(archetypes))
+
+    return f"""Tạo {count} persona khách hàng CANIFA:
+{archetypes_str}
+
+Mỗi persona là 1 JSON object:
+- "name": Tên Việt Nam (VD: "Chị Lan", "Bé Vy")
+- "age": Số tuổi (18-65)
+- "gender": "male" hoặc "female"
+- "job": Nghề nghiệp
+- "income_range": Thu nhập/tháng (VD: "8-12tr")
+- "mbti": MBTI type
+- "archetype": Tên nhóm khách
+- "shopping_for": Mua cho ai
+- "budget": Ngân sách lần này (VD: "300k-600k")
+- "occasion": Dịp mua
+- "style_preference": Phong cách thích
+- "chat_style": Cách chat 1-2 câu
+- "conversion_trigger": Điều kiện MUA
+- "drop_trigger": Điều kiện BỎ ĐI
+
+Trả JSON array [{count} objects]. Đa dạng tuổi, giới tính, thu nhập."""
+
+
+def _build_roleplay_prompt(p: dict) -> str:
+    """Build system prompt để LLM đóng vai persona."""
+    return f"""Bạn đóng vai khách hàng tên {p['name']}, {p['age']} tuổi, {p['job']}.
+
+PERSONA:
+- Giới tính: {"Nữ" if p['gender'] == 'female' else "Nam"}
+- Thu nhập: {p['income_range']}/tháng | MBTI: {p['mbti']}
+- Nhóm: {p['archetype']}
+
+MUA SẮM:
+- Mua cho: {p['shopping_for']} | Budget: {p['budget']}
+- Dịp: {p['occasion']} | Style: {p['style_preference']}
+
+CÁCH CHAT: {p['chat_style']}
+
+QUY TẮC:
+1. Chat ĐÚNG tính cách, budget, mục đích
+2. SP phù hợp → hứng thú, hỏi thêm
+3. SP không hợp → từ chối nhẹ hoặc hỏi cái khác
+4. MUA khi: {p['conversion_trigger']}
+5. BỎ khi: {p['drop_trigger']}
+6. Chat tự nhiên, ngắn. KHÔNG nói "tôi là AI"."""
+
+
+# ═══════════════════════════════════════════════════════════════
+# GENERATOR
+# ═══════════════════════════════════════════════════════════════
+async def generate_personas(
+    count: int = 5,
+    archetypes: list[str] | None = None,
+    model_name: str | None = None,
+) -> list[CanifaPersona]:
+    """
+    Generate N personas bằng LLM.
+    Retry pattern lấy từ MiroFish (max 3, giảm temperature).
+    """
+    count = max(1, min(count, 20))
+    model = model_name or SIM_MODEL
+
+    logger.info(f"🎭 Generating {count} personas | model={model}")
+    llm = create_llm(model, streaming=False, json_mode=True)
+    prompt = _build_generate_prompt(count, archetypes)
+
+    # Retry (MiroFish pattern)
+    for attempt in range(3):
+        try:
+            response = await llm.ainvoke([
+                {"role": "system", "content": _GENERATE_SYSTEM},
+                {"role": "user", "content": prompt},
+            ])
+
+            raw = response.content
+            if isinstance(raw, list):
+                raw = "".join(str(c.get("text", c) if isinstance(c, dict) else c) for c in raw)
+
+            data = json.loads(raw)
+
+            # Handle wrapped response
+            if isinstance(data, dict):
+                for key in ("personas", "data", "results", "items"):
+                    if key in data and isinstance(data[key], list):
+                        data = data[key]
+                        break
+                else:
+                    data = [data]
+
+            # Convert to CanifaPersona
+            personas = []
+            for i, p in enumerate(data[:count]):
+                try:
+                    persona = CanifaPersona(
+                        persona_id=i + 1,
+                        name=p.get("name", f"Persona_{i+1}"),
+                        age=int(p.get("age", 25)),
+                        gender=p.get("gender", "female"),
+                        job=p.get("job", "Không rõ"),
+                        income_range=p.get("income_range", "10-15tr"),
+                        mbti=p.get("mbti", "ISFJ"),
+                        archetype=p.get("archetype", "Khách vãng lai"),
+                        shopping_for=p.get("shopping_for", "Bản thân"),
+                        budget=p.get("budget", "300k-700k"),
+                        occasion=p.get("occasion", "Đi chơi"),
+                        style_preference=p.get("style_preference", "Basic"),
+                        chat_style=p.get("chat_style", "Chat bình thường"),
+                        system_prompt=_build_roleplay_prompt(p),
+                        conversion_trigger=p.get("conversion_trigger", "SP phù hợp"),
+                        drop_trigger=p.get("drop_trigger", "Không tìm được SP"),
+                    )
+                    personas.append(persona)
+                except Exception as e:
+                    logger.warning(f"⚠️ Skip persona {i}: {e}")
+
+            logger.info(f"✅ Generated {len(personas)} personas")
+            return personas
+
+        except json.JSONDecodeError as e:
+            logger.warning(f"⚠️ JSON fail (attempt {attempt+1}/3): {e}")
+        except Exception as e:
+            logger.warning(f"⚠️ Generate fail (attempt {attempt+1}/3): {e}")
+
+    raise RuntimeError("Failed to generate personas after 3 attempts")

backend/agent/simulate_agent/simulation_runner.py

+"""
+Simulation Runner — Core Engine
+=================================
+Chạy full loop: persona → chat → evaluate → report
+
+Lấy từ MiroFish simulation_runner.py:
+  ✅ Background simulation với progress tracking
+  ✅ Retry/backoff khi gọi API
+  ✅ Per-persona conversation logging
+
+Model: gpt-5.4-nano
+"""
+
+import logging
+from typing import Any
+
+import httpx
+
+from common.llm_factory import create_llm
+from config import DEFAULT_MODEL
+
+from .evaluator import evaluate_conversation
+from .persona_generator import CanifaPersona, generate_personas
+
+logger = logging.getLogger(__name__)
+
+SIM_MODEL = DEFAULT_MODEL
+DEFAULT_CHATBOT_URL = "http://172.16.2.207:5000/api/agent/chat-dev"
+
+
+async def _generate_persona_message(
+    persona: CanifaPersona,
+    turn: int,
+    conversation: list[dict[str, str]],
+) -> str:
+    """Persona AI tạo tin nhắn tiếp theo."""
+    llm = create_llm(SIM_MODEL, streaming=False)
+
+    if turn == 0:
+        messages = [
+            {"role": "system", "content": persona.system_prompt},
+            {"role": "user", "content": (
+                f"Bắt đầu chat với chatbot thời trang Canifa. "
+                f"Gửi tin nhắn đầu tiên như {persona.name}. "
+                f"1 tin nhắn ngắn, tự nhiên. KHÔNG giải thích."
+            )},
+        ]
+    else:
+        last_bot = conversation[-1]["content"] if conversation else ""
+        messages = [
+            {"role": "system", "content": persona.system_prompt},
+            *conversation,
+            {"role": "user", "content": (
+                f'Chatbot vừa trả lời: "{last_bot[:500]}"\n\n'
+                f"Tiếp tục chat như {persona.name}. 1 tin nhắn ngắn."
+            )},
+        ]
+
+    response = await llm.ainvoke(messages)
+    raw = response.content
+    if isinstance(raw, list):
+        raw = "".join(str(c.get("text", c) if isinstance(c, dict) else c) for c in raw)
+    return raw.strip()
+
+
+async def _send_to_chatbot(
+    message: str,
+    device_id: str,
+    chatbot_url: str,
+) -> dict[str, Any]:
+    """Forward message to chatbot API with retry."""
+    max_retries = 2
+
+    for attempt in range(max_retries + 1):
+        try:
+            async with httpx.AsyncClient(timeout=60) as client:
+                resp = await client.post(
+                    chatbot_url,
+                    json={"user_query": message, "device_id": device_id},
+                    headers={"Content-Type": "application/json"},
+                )
+                resp.raise_for_status()
+                data = resp.json()
+
+            return {
+                "reply": data.get("ai_response", ""),
+                "product_ids": data.get("product_ids", []),
+                "user_insight": data.get("user_insight"),
+                "trace_id": data.get("trace_id", ""),
+            }
+
+        except Exception as e:
+            if attempt < max_retries:
+                logger.warning(f"⚠️ Chatbot retry {attempt+1}: {e}")
+            else:
+                logger.error(f"❌ Chatbot failed after {max_retries+1} attempts: {e}")
+                return {
+                    "reply": "[Chatbot không phản hồi]",
+                    "product_ids": [],
+                    "user_insight": None,
+                    "trace_id": "",
+                }
+
+
+async def _simulate_one_persona(
+    persona: CanifaPersona,
+    turns: int,
+    chatbot_url: str,
+) -> dict[str, Any]:
+    """
+    Chạy simulation cho 1 persona:
+    1. Generate message → 2. Send to bot → 3. Repeat N turns → 4. Evaluate
+    """
+    conversation: list[dict[str, str]] = []
+    products_recommended: list = []
+    device_id = f"sim-{persona.persona_id}"
+
+    logger.info(f"💬 [{persona.name}] Starting {turns} turns...")
+
+    for turn in range(turns):
+        # 1. Persona generates message
+        try:
+            user_msg = await _generate_persona_message(persona, turn, conversation)
+        except Exception as e:
+            logger.error(f"❌ [{persona.name}] Message gen failed turn {turn}: {e}")
+            break
+
+        conversation.append({"role": "user", "content": user_msg})
+
+        # 2. Send to chatbot
+        bot_result = await _send_to_chatbot(user_msg, device_id, chatbot_url)
+        bot_reply = bot_result["reply"]
+
+        if bot_result["product_ids"]:
+            products_recommended.extend(bot_result["product_ids"])
+
+        conversation.append({"role": "assistant", "content": bot_reply})
+
+        logger.info(
+            f"  Turn {turn+1}: {persona.name}: {user_msg[:40]}... "
+            f"→ Bot: {bot_reply[:40]}..."
+        )
+
+    # 3. Evaluate
+    logger.info(f"📊 [{persona.name}] Evaluating...")
+    eval_result = await evaluate_conversation(
+        persona_name=persona.name,
+        persona_age=persona.age,
+        persona_archetype=persona.archetype,
+        chat_style=persona.chat_style,
+        budget=persona.budget,
+        shopping_for=persona.shopping_for,
+        style_preference=persona.style_preference,
+        conversion_trigger=persona.conversion_trigger,
+        drop_trigger=persona.drop_trigger,
+        conversation=conversation,
+    )
+
+    scores = eval_result.get("scores", {})
+    avg_score = sum(scores.values()) / max(len(scores), 1)
+
+    logger.info(
+        f"✅ [{persona.name}] {eval_result.get('conversion_status', '?')} | "
+        f"Score: {avg_score:.1f}/5"
+    )
+
+    return {
+        "persona_name": persona.name,
+        "archetype": persona.archetype,
+        "age": persona.age,
+        "gender": persona.gender,
+        "budget": persona.budget,
+        "shopping_for": persona.shopping_for,
+        "turns": len(conversation) // 2,
+        "conversation": conversation,
+        "products_recommended": products_recommended[:10],
+        **eval_result,
+    }
+
+
+async def run_simulation(
+    persona_count: int = 3,
+    turns_per_persona: int = 5,
+    archetypes: list[str] | None = None,
+    chatbot_url: str | None = None,
+    model_name: str | None = None,
+) -> dict[str, Any]:
+    """
+    🔥 Run full automated simulation.
+
+    Flow:
+      1. Generate N personas (gpt-5.4-nano)
+      2. Each persona chats with chatbot
+      3. Evaluate each conversation
+      4. Return conversion summary
+
+    Args:
+        persona_count: Number of personas (1-20)
+        turns_per_persona: Chat turns per persona (1-10)
+        archetypes: Optional customer archetypes
+        chatbot_url: Chatbot API URL override
+        model_name: LLM model override
+
+    Returns:
+        Full simulation report with conversion summary
+    """
+    url = chatbot_url or DEFAULT_CHATBOT_URL
+    model = model_name or SIM_MODEL
+    results: list[dict[str, Any]] = []
+    errors: list[dict[str, str]] = []
+
+    # ─── Step 1: Generate Personas ───
+    logger.info(f"🎭 Step 1: Generating {persona_count} personas | model={model}")
+    try:
+        personas = await generate_personas(
+            count=persona_count,
+            archetypes=archetypes,
+            model_name=model,
+        )
+    except Exception as e:
+        logger.error(f"❌ Persona generation failed: {e}")
+        return {"status": "error", "message": f"Persona generation failed: {e}"}
+
+    logger.info(f"✅ Generated {len(personas)} personas")
+
+    # ─── Step 2+3: Simulate each persona ───
+    for persona in personas:
+        try:
+            result = await _simulate_one_persona(persona, turns_per_persona, url)
+            results.append(result)
+        except Exception as e:
+            logger.error(f"❌ [{persona.name}] Simulation failed: {e}", exc_info=True)
+            errors.append({"persona": persona.name, "error": str(e)})
+
+    # ─── Step 4: Conversion Summary ───
+    converted = sum(1 for r in results if r.get("conversion_status") == "converted")
+    interested = sum(1 for r in results if r.get("conversion_status") == "interested")
+    dropped = sum(1 for r in results if r.get("conversion_status") == "dropped")
+    total = len(results)
+
+    conversion_summary = {
+        "total": total,
+        "converted": converted,
+        "interested": interested,
+        "dropped": dropped,
+        "conversion_rate": f"{converted / max(total, 1) * 100:.0f}%",
+        "interest_rate": f"{(converted + interested) / max(total, 1) * 100:.0f}%",
+    }
+
+    # Average scores
+    all_scores = [r.get("scores", {}) for r in results if r.get("scores")]
+    if all_scores:
+        avg_scores = {}
+        for key in all_scores[0]:
+            vals = [s.get(key, 0) for s in all_scores]
+            avg_scores[key] = round(sum(vals) / len(vals), 1)
+        conversion_summary["avg_scores"] = avg_scores
+
+    logger.info(
+        f"📊 SIMULATION COMPLETE: "
+        f"{converted}/{total} converted ({conversion_summary['conversion_rate']}) | "
+        f"Errors: {len(errors)}"
+    )
+
+    return {
+        "status": "success",
+        "conversion_summary": conversion_summary,
+        "persona_results": results,
+        "errors": errors,
+        "meta": {
+            "personas_generated": len(personas),
+            "personas_tested": total,
+            "turns_per_persona": turns_per_persona,
+            "chatbot_url": url,
+            "model": model,
+        },
+    }

backend/api/ai_diagram_route.py

+"""
+Diagram Agent API — FastAPI route for AI diagram generation.
+Uses DiagramGraph 2-Agent (Planner → Tool → Responder).
+History stored in Redis, auto-expires after 30 minutes.
+"""
+
+import json
+import logging
+from pydantic import BaseModel
+from fastapi import APIRouter
+from fastapi.responses import JSONResponse
+
+from langchain_core.messages import AIMessage, HumanMessage
+
+from agent.diagram_agent.diagram_graph import get_diagram_agent
+from common.cache import redis_cache
+
+logger = logging.getLogger(__name__)
+router = APIRouter(prefix="/api/diagram", tags=["Diagram Agent"])
+
+HISTORY_KEY_PREFIX = "diagram:hist:"
+HISTORY_TTL = 1800  # 30 min
+
+
+class DiagramChatRequest(BaseModel):
+    query: str
+    session_id: str | None = None
+
+
+# ─── Helpers: serialize/deserialize LangChain messages ↔ Redis ───
+
+def _serialize_messages(messages: list) -> str:
+    data = []
+    for msg in messages:
+        content = msg.content if isinstance(msg.content, str) else str(msg.content)
+        if isinstance(msg, HumanMessage):
+            data.append({"role": "human", "content": content})
+        elif isinstance(msg, AIMessage):
+            data.append({"role": "ai", "content": content})
+    return json.dumps(data, ensure_ascii=False)
+
+
+def _deserialize_messages(raw: str) -> list:
+    try:
+        data = json.loads(raw)
+    except Exception:
+        return []
+    messages = []
+    for item in data:
+        if item["role"] == "human":
+            messages.append(HumanMessage(content=item["content"]))
+        elif item["role"] == "ai":
+            messages.append(AIMessage(content=item["content"]))
+    return messages
+
+
+async def _load_history(session_id: str) -> list:
+    try:
+        client = redis_cache.get_client()
+        if not client:
+            return []
+        raw = await client.get(f"{HISTORY_KEY_PREFIX}{session_id}")
+        if raw:
+            return _deserialize_messages(raw)
+    except Exception as e:
+        logger.warning("Redis load history error: %s", e)
+    return []
+
+
+async def _save_history(session_id: str, messages: list):
+    try:
+        client = redis_cache.get_client()
+        if not client:
+            return
+        trimmed = messages[-30:]
+        raw = _serialize_messages(trimmed)
+        await client.setex(f"{HISTORY_KEY_PREFIX}{session_id}", HISTORY_TTL, raw)
+    except Exception as e:
+        logger.warning("Redis save history error: %s", e)
+
+
+async def _clear_history(session_id: str):
+    try:
+        client = redis_cache.get_client()
+        if client:
+            await client.delete(f"{HISTORY_KEY_PREFIX}{session_id}")
+    except Exception as e:
+        logger.warning("Redis clear history error: %s", e)
+
+
+# ─── Endpoints ───
+
+@router.post("/chat", summary="Chat with Diagram Agent")
+async def diagram_chat(req: DiagramChatRequest):
+    """Send a message to the Diagram Agent. Returns AI response + Mermaid diagram data."""
+    query = req.query.strip()
+    if not query:
+        return JSONResponse(status_code=400, content={"status": "error", "message": "Query trống"})
+
+    session_id = req.session_id
+
+    try:
+        agent = get_diagram_agent()
+
+        history = []
+        if session_id:
+            history = await _load_history(session_id)
+
+        result = await agent.chat(query, history=history if history else None)
+
+        if session_id:
+            history.append(HumanMessage(content=query))
+            if result.get("response"):
+                history.append(AIMessage(content=result["response"]))
+            await _save_history(session_id, history)
+
+        return {
+            "status": "success",
+            "response": result["response"],
+            "elapsed_ms": result["elapsed_ms"],
+            "agent_path": result["agent_path"],
+            "tool_calls": result["tool_calls"],
+            "pipeline": result.get("pipeline", []),
+            "diagram": result.get("diagram"),
+            "session_id": session_id,
+            "history_count": len(history),
+        }
+    except Exception as e:
+        logger.error(f"❌ Diagram Agent error: {e}", exc_info=True)
+        return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
+
+
+@router.post("/clear", summary="Clear diagram chat history")
+async def diagram_clear(req: DiagramChatRequest):
+    if req.session_id:
+        await _clear_history(req.session_id)
+    return {"status": "success", "message": "History cleared"}

backend/api/reaction_simulator_route.py

+"""
+Reaction Simulator Route — BettaFish-Inspired Community Reaction Simulator
+===========================================================================
+API layer for the reaction_agent package.
+
+Endpoints:
+  GET  /segments             → List persona segments
+  GET  /campaign-types       → List campaign types
+  POST /simulate             → Run full reaction simulation
+  POST /simulate-mock        → Return mock data (no LLM needed)
+"""
+
+import logging
+from typing import Any
+
+from fastapi import APIRouter
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel
+
+from agent.reaction_agent import (
+    CAMPAIGN_TYPES,
+    PERSONA_SEGMENTS,
+    run_reaction_simulation,
+)
+
+logger = logging.getLogger(__name__)
+router = APIRouter(prefix="/api/reaction-simulator", tags=["Reaction Simulator"])
+
+
+# ═══ REQUEST MODELS ═══
+class SimulateRequest(BaseModel):
+    campaign_type: str = "product_launch"
+    campaign_content: str
+    persona_weights: dict[str, float] | None = None
+    model_name: str | None = None
+
+
+# ═══ ENDPOINTS ═══
+
+@router.get("/segments")
+async def get_segments():
+    """List all available persona segments."""
+    return JSONResponse(content={
+        "segments": [
+            {"id": s["id"], "name": s["name"], "desc": s["desc"], "weight": s["weight"]}
+            for s in PERSONA_SEGMENTS
+        ]
+    })
+
+
+@router.get("/campaign-types")
+async def get_campaign_types():
+    """List all campaign types."""
+    return JSONResponse(content={"types": CAMPAIGN_TYPES})
+
+
+@router.post("/simulate")
+async def simulate_reactions(req: SimulateRequest):
+    """Run full LLM-powered reaction simulation."""
+    logger.info(f"🔮 Reaction simulation: type={req.campaign_type}")
+    try:
+        result = await run_reaction_simulation(
+            campaign_type=req.campaign_type,
+            campaign_content=req.campaign_content,
+            persona_weights=req.persona_weights,
+            model_name=req.model_name,
+        )
+        return JSONResponse(content=result)
+    except Exception as e:
+        logger.error(f"❌ Simulation failed: {e}", exc_info=True)
+        return JSONResponse(
+            status_code=500,
+            content={"status": "error", "message": str(e)},
+        )
+
+
+@router.post("/simulate-mock")
+async def simulate_mock(req: SimulateRequest):
+    """Return mock reaction data (no LLM required)."""
+    mock_reactions = _get_mock_reactions(req.campaign_type)
+    pos = sum(1 for r in mock_reactions if r["sentiment"] == "positive")
+    neu = sum(1 for r in mock_reactions if r["sentiment"] == "neutral")
+    neg = sum(1 for r in mock_reactions if r["sentiment"] == "negative")
+    total = len(mock_reactions)
+
+    return JSONResponse(content={
+        "status": "success",
+        "mode": "mock",
+        "campaign_type": req.campaign_type,
+        "reactions": mock_reactions,
+        "sentiment": {
+            "positive": round(pos / total * 100),
+            "neutral": round(neu / total * 100),
+            "negative": round(neg / total * 100),
+            "total_reactions": total,
+        },
+        "recommendations": [
+            {"icon": "📊", "severity": "info", "text": "Mock mode — kết nối LLM để có phản ứng realistic hơn."},
+        ],
+    })
+
+
+def _get_mock_reactions(campaign_type: str) -> list[dict[str, Any]]:
+    """Static mock reactions for demo."""
+    base = [
+        {"persona_id": "mom_shopper", "persona_name": "Nguyễn Thị Mai", "segment": "Mom Shopper",
+         "comment": "Sản phẩm này phù hợp cho gia đình quá!", "sentiment": "positive",
+         "likes_estimate": 38, "shares_estimate": 6, "key_concern": None},
+        {"persona_id": "young_professional", "persona_name": "Trần Văn Hùng", "segment": "Young Professional",
+         "comment": "Thiết kế ổn, cần xem thực tế.", "sentiment": "neutral",
+         "likes_estimate": 21, "shares_estimate": 3, "key_concern": "thiết kế thực tế"},
+        {"persona_id": "fashion_enthusiast", "persona_name": "Lê Phương Anh", "segment": "Fashion Enthusiast",
+         "comment": "Đúng trend luôn! Must have!", "sentiment": "positive",
+         "likes_estimate": 54, "shares_estimate": 14, "key_concern": None},
+        {"persona_id": "budget_conscious", "persona_name": "Phạm Minh Tuấn", "segment": "Budget Conscious",
+         "comment": "Giá hơi cao, cần cân nhắc.", "sentiment": "neutral",
+         "likes_estimate": 16, "shares_estimate": 1, "key_concern": "giá cả"},
+        {"persona_id": "gen_z", "persona_name": "Hoàng Thúy Linh", "segment": "Gen Z Trendy",
+         "comment": "Vibe chill ghê 🔥 sắm ngay!", "sentiment": "positive",
+         "likes_estimate": 62, "shares_estimate": 19, "key_concern": None},
+        {"persona_id": "kol", "persona_name": "Fashion Blogger", "segment": "KOL / Blogger",
+         "comment": "Canifa đang đi đúng hướng. Waiting full review.", "sentiment": "positive",
+         "likes_estimate": 102, "shares_estimate": 28, "key_concern": None},
+        {"persona_id": "troll", "persona_name": "Random Commenter", "segment": "Social Media Troll",
+         "comment": "Lại marketing, scroll qua thôi 🥱", "sentiment": "negative",
+         "likes_estimate": 11, "shares_estimate": 1, "key_concern": "marketing fatigue"},
+    ]
+    return base

backend/api/user_insight_route.py

+"""
+User Insight Dashboard API
+Scan Redis for all active user insights and return them.
+"""
+
+import json
+import logging
+from datetime import datetime
+from zoneinfo import ZoneInfo
+
+from fastapi import APIRouter, Request
+from fastapi.responses import JSONResponse
+
+from common.cache import redis_cache
+
+logger = logging.getLogger(__name__)
+router = APIRouter(prefix="/api/user-insights", tags=["User Insights"])
+
+INSIGHT_PREFIX = "identity_key_insight:"
+HISTORY_PREFIX = "identity_key_history:"
+
+
+@router.get("/all", summary="Get all user insights from Redis")
+async def get_all_insights(request: Request):
+    """
+    Scan Redis for all identity_key_insight:* keys and return parsed insights.
+    Each insight contains the 6-layer UserInsight structure from the chatbot.
+    """
+    try:
+        client = redis_cache.get_client()
+        if not client:
+            return {"status": "error", "message": "Redis not available", "insights": []}
+
+        # Scan for all insight keys
+        insight_keys = []
+        async for key in client.scan_iter(match=f"{INSIGHT_PREFIX}*", count=100):
+            if isinstance(key, bytes):
+                key = key.decode("utf-8")
+            insight_keys.append(key)
+
+        if not insight_keys:
+            return {"status": "success", "insights": [], "count": 0}
+
+        # Fetch all values
+        results = []
+        for key in insight_keys:
+            try:
+                raw = await client.get(key)
+                if not raw:
+                    continue
+
+                identity_key = key.replace(INSIGHT_PREFIX, "")
+                
+                # Parse insight JSON
+                if isinstance(raw, bytes):
+                    raw = raw.decode("utf-8")
+                
+                insight_data = None
+                try:
+                    insight_data = json.loads(raw)
+                except json.JSONDecodeError:
+                    insight_data = {"raw": raw}
+
+                # Get TTL to estimate when it was created
+                ttl = await client.ttl(key)
+
+                # Try to get conversation history count
+                msg_count = 0
+                history_key = f"{HISTORY_PREFIX}{identity_key}"
+                try:
+                    history_raw = await client.get(history_key)
+                    if history_raw:
+                        if isinstance(history_raw, bytes):
+                            history_raw = history_raw.decode("utf-8")
+                        history = json.loads(history_raw)
+                        if isinstance(history, list):
+                            msg_count = len(history)
+                except Exception:
+                    pass
+
+                results.append({
+                    "identity_key": identity_key,
+                    "insight": insight_data,
+                    "ttl_seconds": ttl,
+                    "message_count": msg_count,
+                })
+            except Exception as e:
+                logger.warning(f"Error processing key {key}: {e}")
+                continue
+
+        # Sort by TTL ascending (newest first = highest TTL)
+        results.sort(key=lambda x: x.get("ttl_seconds", 0), reverse=True)
+
+        return {
+            "status": "success",
+            "insights": results,
+            "count": len(results),
+        }
+
+    except Exception as e:
+        logger.error(f"Error in get_all_insights: {e}", exc_info=True)
+        return JSONResponse(
+            status_code=500,
+            content={"status": "error", "message": str(e), "insights": []},
+        )
+
+
+@router.get("/{identity_key}", summary="Get single user insight")
+async def get_single_insight(identity_key: str):
+    """Get insight for a specific identity key."""
+    try:
+        client = redis_cache.get_client()
+        if not client:
+            return {"status": "error", "message": "Redis not available"}
+
+        raw = await client.get(f"{INSIGHT_PREFIX}{identity_key}")
+        if not raw:
+            return {"status": "not_found", "identity_key": identity_key}
+
+        if isinstance(raw, bytes):
+            raw = raw.decode("utf-8")
+
+        try:
+            insight = json.loads(raw)
+        except json.JSONDecodeError:
+            insight = {"raw": raw}
+
+        # Get conversation history
+        history = []
+        try:
+            hist_raw = await client.get(f"{HISTORY_PREFIX}{identity_key}")
+            if hist_raw:
+                if isinstance(hist_raw, bytes):
+                    hist_raw = hist_raw.decode("utf-8")
+                history = json.loads(hist_raw)
+        except Exception:
+            pass
+
+        ttl = await client.ttl(f"{INSIGHT_PREFIX}{identity_key}")
+
+        return {
+            "status": "success",
+            "identity_key": identity_key,
+            "insight": insight,
+            "history": history,
+            "ttl_seconds": ttl,
+        }
+
+    except Exception as e:
+        logger.error(f"Error in get_single_insight: {e}", exc_info=True)
+        return JSONResponse(
+            status_code=500,
+            content={"status": "error", "message": str(e)},
+        )
+
+
+@router.delete("/{identity_key}", summary="Delete user insight")
+async def delete_insight(identity_key: str):
+    """Delete insight for a specific identity key."""
+    try:
+        client = redis_cache.get_client()
+        if not client:
+            return {"status": "error", "message": "Redis not available"}
+
+        deleted = await client.delete(f"{INSIGHT_PREFIX}{identity_key}")
+        return {"status": "success", "deleted": bool(deleted)}
+
+    except Exception as e:
+        return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})

backend/api/user_simulator_route.py

 """
-User Simulator Route
-AI đóng vai từng persona để test chatbot, đánh giá từ góc nhìn user thật.
-
-Flow:
-1. generate-message: Persona AI (Gemini) tạo câu hỏi như user thật
-2. chat-with-bot: Gọi chatbot API remote → lấy trả lời
-3. evaluate: Gemini đánh giá conversation từ góc persona
-4. synthesize: Tổng hợp kết quả tất cả personas
+User Simulator Route — MiroFish-Inspired Conversion Testing
+============================================================
+Thin API layer that delegates to agent/simulate_agent/ package.
+
+Endpoints:
+  GET  /archetypes         → List available archetypes
+  POST /generate-personas  → Generate N personas
+  POST /generate-message   → Persona generates 1 message
+  POST /chat-with-bot      → Forward to chatbot API
+  POST /evaluate           → Evaluate + conversion
+  POST /synthesize         → Cross-persona report
+  POST /run-simulation     → 🔥 Full automated loop
 """
 
-import json
 import logging
 from typing import Any
 
-import httpx
 from fastapi import APIRouter
 from fastapi.responses import JSONResponse
 from pydantic import BaseModel
 
-from common.llm_factory import create_llm
-from config import DEFAULT_MODEL
+from agent.simulate_agent import (
+    CANIFA_ARCHETYPES,
+    evaluate_conversation,
+    generate_personas,
+    run_simulation,
+    synthesize_results,
+)
+from agent.simulate_agent.simulation_runner import _generate_persona_message, _send_to_chatbot
+from agent.simulate_agent.persona_generator import CanifaPersona
 
 logger = logging.getLogger(__name__)
 router = APIRouter(prefix="/api/user-simulator", tags=["User Simulator"])
 
-CHATBOT_API_URL = "http://172.16.2.207:5000/api/agent/chat-dev"
-LLM_MODEL = DEFAULT_MODEL  # Gemini Flash-Lite
+DEFAULT_CHATBOT_URL = "http://172.16.2.207:5000/api/agent/chat-dev"
+
+
+# ═══════════════════════════════════════════════════════════════
+# REQUEST MODELS
+# ═══════════════════════════════════════════════════════════════
+class GeneratePersonasRequest(BaseModel):
+    count: int = 5
+    archetypes: list[str] | None = None
 
 
-# ═══ Request Models ═══
 class GenerateMessageRequest(BaseModel):
-    persona_system: str  # System prompt for persona role-play
+    persona_system: str
     persona_name: str
-    turn: int = 0  # Current turn number
-    history: list[dict[str, str]] = []  # [{role, content}]
-    last_bot_reply: str = ""  # Chatbot's last reply (for follow-up)
+    turn: int = 0
+    history: list[dict[str, str]] = []
+    last_bot_reply: str = ""
 
 
 class ChatWithBotRequest(BaseModel):
-    message: str  # User message to send to chatbot
+    message: str
+    device_id: str = "simulator-test"
 
 
 class EvaluateRequest(BaseModel):
@@ -46,209 +62,126 @@ class EvaluateRequest(BaseModel):
     persona_age: int
     persona_archetype: str
     persona_trait: str
-    conversation: list[dict[str, str]]  # [{role, content}]
+    conversation: list[dict[str, str]]
+    conversion_trigger: str = ""
+    drop_trigger: str = ""
+    budget: str = ""
+    shopping_for: str = ""
 
 
 class SynthesizeRequest(BaseModel):
     chatbot_prompt: str
-    results: list[dict[str, Any]]  # [{persona_name, scores, key_wins, key_fails, prompt_fix}]
+    results: list[dict[str, Any]]
 
 
-# ═══ 1. GENERATE MESSAGE — Persona AI tạo tin nhắn ═══
-@router.post("/generate-message", summary="Persona AI generates a message")
-async def generate_message(req: GenerateMessageRequest):
-    """
-    Persona AI (Gemini) đóng vai user, tạo tin nhắn tiếp theo.
-    """
-    try:
-        llm = create_llm(LLM_MODEL, streaming=False)
-
-        messages = [{"role": "system", "content": req.persona_system}]
-
-        if req.turn == 0:
-            messages.append({
-                "role": "user",
-                "content": f"Bạn sẽ bắt đầu chat với một chatbot thời trang Canifa. "
-                           f"Hãy gửi tin nhắn đầu tiên như {req.persona_name}. "
-                           f"Chỉ gửi 1 tin nhắn ngắn, tự nhiên, đúng tính cách. KHÔNG giải thích vai trò."
-            })
-        else:
-            # Build conversation context
-            for h in req.history:
-                messages.append(h)
-            messages.append({
-                "role": "user",
-                "content": f'Chatbot Canifa vừa trả lời: "{req.last_bot_reply[:500]}"\n\n'
-                           f"Dựa vào response trên, hãy tiếp tục cuộc trò chuyện như {req.persona_name}. "
-                           f"Chỉ gửi 1 tin nhắn ngắn. KHÔNG giải thích, KHÔNG nhắc lại prompt."
-            })
-
-        response = await llm.ainvoke(messages)
-
-        raw = response.content
-        if isinstance(raw, list):
-            raw = "".join(str(c.get("text", c) if isinstance(c, dict) else c) for c in raw)
-
-        return {"status": "success", "message": raw.strip()}
+class RunSimulationRequest(BaseModel):
+    persona_count: int = 3
+    turns_per_persona: int = 5
+    archetypes: list[str] | None = None
+    chatbot_url: str = ""
 
-    except Exception as e:
-        logger.error(f"Generate message error: {e}", exc_info=True)
-        return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
 
+# ═══════════════════════════════════════════════════════════════
+# ENDPOINTS
+# ═══════════════════════════════════════════════════════════════
+@router.get("/archetypes", summary="List available customer archetypes")
+async def list_archetypes():
+    return {"archetypes": CANIFA_ARCHETYPES}
 
-# ═══ 2. CHAT WITH BOT — Forward to chatbot API ═══
-@router.post("/chat-with-bot", summary="Send message to chatbot API")
-async def chat_with_bot(req: ChatWithBotRequest):
-    """
-    Gọi chatbot API remote (172.16.2.207:5000) lấy câu trả lời.
-    """
-    try:
-        async with httpx.AsyncClient(timeout=60) as client:
-            resp = await client.post(
-                CHATBOT_API_URL,
-                json={"user_query": req.message},
-                headers={"Content-Type": "application/json"},
-            )
-            resp.raise_for_status()
-            data = resp.json()
-
-        if data.get("status") != "success":
-            raise ValueError(data.get("message", "Chatbot API error"))
 
+@router.post("/generate-personas", summary="Generate realistic customer personas")
+async def api_generate_personas(req: GeneratePersonasRequest):
+    try:
+        personas = await generate_personas(count=req.count, archetypes=req.archetypes)
         return {
             "status": "success",
-            "reply": data.get("ai_response", ""),
-            "trace_id": data.get("trace_id", ""),
+            "count": len(personas),
+            "personas": [p.to_dict() for p in personas],
         }
-    except httpx.HTTPStatusError as e:
-        logger.error(f"Chatbot API error: {e}")
-        return JSONResponse(status_code=502, content={"status": "error", "message": f"Chatbot: {e.response.status_code}"})
     except Exception as e:
-        logger.error(f"Chat with bot error: {e}", exc_info=True)
+        logger.error(f"Generate personas error: {e}", exc_info=True)
         return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
 
 
-# ═══ 3. EVALUATE — Score conversation from persona's POV ═══
-EVAL_SYSTEM = """You are a UX evaluator. You just observed a conversation between a simulated user persona and a chatbot.
-Rate the chatbot's performance from the PERSONA'S perspective.
-
-Score each metric 1.0–5.0 (one decimal):
-- clarity: Was the chatbot easy to understand for this type of user?
-- helpfulness: Did it actually solve the user's problem?
-- naturalness: Did the conversation feel natural and human?
-- task_completion: Did the user achieve what they came for?
-- satisfaction: Overall, would this user be satisfied?
-
-Also provide:
-- key_wins: 1-2 things the chatbot did well (array of strings, in Vietnamese)
-- key_fails: 1-2 specific failures for THIS persona type (array of strings, in Vietnamese)
-- prompt_fix: One concrete prompt instruction to fix the biggest issue (string, in Vietnamese)
-
-Respond ONLY valid JSON:
-{
-  "scores": {"clarity":0.0,"helpfulness":0.0,"naturalness":0.0,"task_completion":0.0,"satisfaction":0.0},
-  "key_wins": ["..."],
-  "key_fails": ["..."],
-  "prompt_fix": "..."
-}"""
-
-
-@router.post("/evaluate", summary="Evaluate conversation from persona POV")
-async def evaluate_conversation(req: EvaluateRequest):
-    """
-    Gemini đánh giá chatbot từ góc nhìn persona.
-    """
+@router.post("/generate-message", summary="Persona AI generates a message")
+async def api_generate_message(req: GenerateMessageRequest):
     try:
-        conv_text = "\n".join(
-            f"{'Persona' if m['role'] == 'user' else 'Chatbot'}: {m['content']}"
-            for m in req.conversation
+        persona = CanifaPersona(
+            name=req.persona_name, age=0, gender="", job="", income_range="",
+            mbti="", shopping_for="", budget="", occasion="", style_preference="",
+            chat_style="", system_prompt=req.persona_system,
+            conversion_trigger="", drop_trigger="",
         )
+        msg = await _generate_persona_message(persona, req.turn, req.history)
+        return {"status": "success", "message": msg}
+    except Exception as e:
+        logger.error(f"Generate message error: {e}", exc_info=True)
+        return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
 
-        eval_input = f"""Persona: {req.persona_name} ({req.persona_age} tuổi, {req.persona_archetype})
-Persona traits: {req.persona_trait}
-
-Conversation:
-{conv_text}
-
-Evaluate the chatbot's performance from {req.persona_name}'s perspective."""
 
-        llm = create_llm(LLM_MODEL, streaming=False, json_mode=True)
-        response = await llm.ainvoke([
-            {"role": "system", "content": EVAL_SYSTEM},
-            {"role": "user", "content": eval_input},
-        ])
+@router.post("/chat-with-bot", summary="Send message to chatbot API")
+async def api_chat_with_bot(req: ChatWithBotRequest):
+    try:
+        result = await _send_to_chatbot(req.message, req.device_id, DEFAULT_CHATBOT_URL)
+        return {"status": "success", **result}
+    except Exception as e:
+        logger.error(f"Chat with bot error: {e}", exc_info=True)
+        return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
 
-        raw = response.content
-        if isinstance(raw, list):
-            raw = "".join(str(c.get("text", c) if isinstance(c, dict) else c) for c in raw)
 
-        result = json.loads(raw)
+@router.post("/evaluate", summary="Evaluate conversation + measure conversion")
+async def api_evaluate(req: EvaluateRequest):
+    try:
+        result = await evaluate_conversation(
+            persona_name=req.persona_name,
+            persona_age=req.persona_age,
+            persona_archetype=req.persona_archetype,
+            chat_style=req.persona_trait,
+            budget=req.budget,
+            shopping_for=req.shopping_for,
+            style_preference="",
+            conversion_trigger=req.conversion_trigger,
+            drop_trigger=req.drop_trigger,
+            conversation=req.conversation,
+        )
         return {"status": "success", **result}
-
     except Exception as e:
         logger.error(f"Evaluate error: {e}", exc_info=True)
         return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
 
 
-# ═══ 4. SYNTHESIZE — Cross-persona insights ═══
-SYNTHESIS_SYSTEM = """You are a senior UX researcher. Analyze simulation results across multiple user personas and provide actionable insights.
-
-Given scores and findings from all personas, identify:
-1. Which persona groups are underserved (lowest scores)
-2. What are the 2-3 systemic issues in the chatbot prompt
-3. What are the 2-3 prompt improvements that would help the most personas
-
-Respond ONLY valid JSON:
-{
-  "worst_personas": ["persona names with lowest scores"],
-  "systemic_issues": ["issue 1 in Vietnamese", "issue 2", "issue 3"],
-  "top_fixes": [
-    {"title": "Fix title", "instruction": "Concrete prompt instruction in Vietnamese", "impacts": ["Persona1","Persona2"]},
-    {"title": "Fix title", "instruction": "Concrete prompt instruction", "impacts": ["Persona1"]},
-    {"title": "Fix title", "instruction": "Concrete prompt instruction", "impacts": ["Persona1","Persona2","Persona3"]}
-  ],
-  "overall_score": 0.0,
-  "summary": "2-3 sentence executive summary in Vietnamese"
-}"""
+@router.post("/synthesize", summary="Cross-persona conversion report")
+async def api_synthesize(req: SynthesizeRequest):
+    try:
+        result = await synthesize_results(
+            results=req.results,
+            chatbot_prompt=req.chatbot_prompt,
+        )
+        return {"status": "success", **result}
+    except Exception as e:
+        logger.error(f"Synthesize error: {e}", exc_info=True)
+        return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
 
 
-@router.post("/synthesize", summary="Cross-persona synthesis")
-async def synthesize_results(req: SynthesizeRequest):
+@router.post("/run-simulation", summary="🔥 Run full automated simulation")
+async def api_run_simulation(req: RunSimulationRequest):
     """
-    Tổng hợp kết quả từ tất cả personas → insights + prompt fixes.
+    Chạy FULL LOOP tự động:
+    1. Generate personas (gpt-5.4-nano)
+    2. Mỗi persona chat N turns với chatbot
+    3. Evaluate + đo conversion
+    4. Return conversion summary
+
+    ⚠️ Có thể mất 2-5 phút tùy số persona.
     """
     try:
-        summaries = []
-        for r in req.results:
-            scores = r.get("scores", {})
-            ov = sum(scores.values()) / max(len(scores), 1)
-            summaries.append(
-                f"{r.get('persona_name', '?')} ({r.get('archetype', '?')}): overall {ov:.1f}/5\n"
-                f"  Scores: {json.dumps(scores)}\n"
-                f"  Wins: {'; '.join(r.get('key_wins', []))}\n"
-                f"  Fails: {'; '.join(r.get('key_fails', []))}"
-            )
-
-        synth_input = f"""Chatbot prompt: "{req.chatbot_prompt[:1000]}"
-
-Results across {len(req.results)} personas:
-{chr(10).join(summaries)}
-
-Provide synthesis and top fixes."""
-
-        llm = create_llm(LLM_MODEL, streaming=False, json_mode=True)
-        response = await llm.ainvoke([
-            {"role": "system", "content": SYNTHESIS_SYSTEM},
-            {"role": "user", "content": synth_input},
-        ])
-
-        raw = response.content
-        if isinstance(raw, list):
-            raw = "".join(str(c.get("text", c) if isinstance(c, dict) else c) for c in raw)
-
-        result = json.loads(raw)
-        return {"status": "success", **result}
-
+        result = await run_simulation(
+            persona_count=req.persona_count,
+            turns_per_persona=req.turns_per_persona,
+            archetypes=req.archetypes,
+            chatbot_url=req.chatbot_url or None,
+        )
+        return result
     except Exception as e:
-        logger.error(f"Synthesize error: {e}", exc_info=True)
+        logger.error(f"Simulation error: {e}", exc_info=True)
         return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})

backend/server.py

@@ -38,7 +38,10 @@ from api.experiment_log_route import router as experiment_log_router
 from api.auth_route import router as auth_router
 from api.product_desc_route import router as product_desc_router
 from api.bulk_ops_route import router as bulk_ops_router
+from api.user_insight_route import router as user_insight_router
+from api.reaction_simulator_route import router as reaction_simulator_router
 from common.cache import redis_cache
+from common.event_bus import event_bus
 from common.middleware import middleware_manager
 from config import PORT, REDIS_CACHE_TURN_ON
 
@@ -72,10 +75,13 @@ app = FastAPI(
 
 @app.on_event("startup")
 async def startup_event():
-    """Initialize Redis cache and start background workers."""
+    """Initialize Redis cache, EventBus, and start background workers."""
     await redis_cache.initialize()
     logger.info("✅ Redis cache initialized")
 
+    # Start FastStream EventBus
+    await event_bus.start()
+
     # Start report worker if Redis is available
     if REDIS_CACHE_TURN_ON and redis_cache.get_client():
         from agent.report_agent.report_queue import report_worker_loop
@@ -86,11 +92,14 @@ async def startup_event():
 @app.on_event("shutdown")
 async def shutdown_event():
     """Cleanup resources before exit to prevent connection leaks during hot-reload."""
+    # Stop FastStream EventBus
+    await event_bus.stop()
+
     from common.db_pool import db_pool
     if db_pool:
         db_pool.close_all()
         logger.info("🛑 Postgres Connection Pool nicely closed")
-        
+
     # Optional: If you want to also clean up StarRocks you can do it here
     try:
         from common.starrocks_connection import StarRocksConnection
@@ -172,6 +181,12 @@ from api.ai_tag_search import router as tag_search_router
 app.include_router(tag_search_router)  # Tag Search Agent
 from api.lead_flow_route import router as lead_flow_router
 app.include_router(lead_flow_router)  # Lead Stage AI (Experiment)
+app.include_router(user_insight_router)  # User Insight Dashboard
+app.include_router(reaction_simulator_router)  # Reaction Simulator
+from api.canifa_product_api import router as canifa_product_router
+app.include_router(canifa_product_router)  # Canifa Product Proxy (GraphQL)
+from api.ai_diagram_route import router as diagram_router
+app.include_router(diagram_router)  # AI Diagram Agent
 
 
 if __name__ == "__main__":

backend/static/auth.js

+/**
+ * auth.js — Centralized Auth Guard for Canifa Admin
+ * ===================================================
+ * 
+ * BẬT/TẮT AUTH LINH HOẠT:
+ * 
+ *   Cách 1: Sửa biến dưới đây
+ *     const AUTH_ENABLED = false;  // tắt auth
+ * 
+ *   Cách 2: URL param
+ *     /static/main.html?noauth=1  // bypass auth cho lần này
+ * 
+ *   Cách 3: localStorage
+ *     localStorage.setItem('canifa_auth_disabled', 'true');  // tắt auth mọi lúc
+ *     localStorage.removeItem('canifa_auth_disabled');        // bật lại
+ * 
+ *   Cách 4: Console nhanh
+ *     window.CANIFA_AUTH.disable();  // tắt + reload
+ *     window.CANIFA_AUTH.enable();   // bật + reload
+ *     window.CANIFA_AUTH.status();   // xem trạng thái
+ * 
+ * USAGE: Thêm vào <head> của mọi page cần auth:
+ *   <script src="/static/auth.js"></script>
+ */
+
+(function () {
+    'use strict';
+
+    // ═══════════════════════════════════════════════════
+    // CONFIG — Đổi false để tắt auth toàn bộ
+    // ═══════════════════════════════════════════════════
+    const AUTH_ENABLED = false;  // ← false = dev mode (no login), true = production
+
+    // ═══════════════════════════════════════════════════
+    // HELPER: Check if auth should be enforced
+    // ═══════════════════════════════════════════════════
+    function isAuthRequired() {
+        // Master switch
+        if (!AUTH_ENABLED) return false;
+
+        // URL param bypass: ?noauth=1
+        const params = new URLSearchParams(window.location.search);
+        if (params.get('noauth') === '1') return false;
+
+        // localStorage bypass
+        if (localStorage.getItem('canifa_auth_disabled') === 'true') return false;
+
+        return true;
+    }
+
+    // ═══════════════════════════════════════════════════
+    // CORE: Get current auth state
+    // ═══════════════════════════════════════════════════
+    function getToken() {
+        return localStorage.getItem('canifa_token') || null;
+    }
+
+    function getUser() {
+        try {
+            return JSON.parse(localStorage.getItem('canifa_user') || 'null');
+        } catch {
+            return null;
+        }
+    }
+
+    function isLoggedIn() {
+        return !!getToken() && !!getUser();
+    }
+
+    // ═══════════════════════════════════════════════════
+    // AUTH GUARD — Redirect to login if needed
+    // ═══════════════════════════════════════════════════
+    function guard() {
+        if (!isAuthRequired()) {
+            console.log('🔓 Auth DISABLED — skipping guard');
+            // Inject fake user nếu chưa có (để sidebar không lỗi)
+            if (!getUser()) {
+                localStorage.setItem('canifa_user', JSON.stringify({
+                    username: 'dev',
+                    role: 'user',
+                    id: 'dev-mode',
+                }));
+                localStorage.setItem('canifa_token', 'dev-bypass-token');
+            }
+            return true; // allow access
+        }
+
+        if (!isLoggedIn()) {
+            const redirect = encodeURIComponent(window.location.href);
+            window.location.replace('/static/login.html?redirect=' + redirect);
+            return false; // blocked
+        }
+
+        return true; // authenticated
+    }
+
+    // ═══════════════════════════════════════════════════
+    // ADMIN REDIRECT — For pages that need admin role
+    // ═══════════════════════════════════════════════════
+    function guardAdmin() {
+        if (!isAuthRequired()) return true;
+
+        if (!guard()) return false;
+
+        const user = getUser();
+        if (!user || user.role !== 'admin') {
+            window.location.replace('/static/main.html');
+            return false;
+        }
+        return true;
+    }
+
+    // ═══════════════════════════════════════════════════
+    // LOGOUT
+    // ═══════════════════════════════════════════════════
+    function logout() {
+        localStorage.removeItem('canifa_token');
+        localStorage.removeItem('canifa_user');
+        window.location.replace('/static/login.html');
+    }
+
+    // ═══════════════════════════════════════════════════
+    // AUTH HEADER — For fetch() calls
+    // ═══════════════════════════════════════════════════
+    function authHeaders(extra = {}) {
+        const token = getToken();
+        const headers = { 'Content-Type': 'application/json', ...extra };
+        if (token) headers['Authorization'] = 'Bearer ' + token;
+        return headers;
+    }
+
+    // ═══════════════════════════════════════════════════
+    // UI HELPERS — Update sidebar user info
+    // ═══════════════════════════════════════════════════
+    function updateSidebarUser() {
+        try {
+            const user = getUser();
+            if (!user) return;
+
+            const nameEl = document.getElementById('userName');
+            const avatarEl = document.getElementById('userAvatar');
+
+            if (nameEl && user.username) nameEl.textContent = user.username;
+            if (avatarEl && user.username) avatarEl.textContent = user.username.charAt(0).toUpperCase();
+        } catch (e) {
+            console.warn('updateSidebarUser:', e);
+        }
+    }
+
+    // ═══════════════════════════════════════════════════
+    // CONSOLE API — For quick toggling in DevTools
+    // ═══════════════════════════════════════════════════
+    window.CANIFA_AUTH = {
+        enable() {
+            localStorage.removeItem('canifa_auth_disabled');
+            console.log('🔒 Auth ENABLED. Reloading...');
+            location.reload();
+        },
+        disable() {
+            localStorage.setItem('canifa_auth_disabled', 'true');
+            console.log('🔓 Auth DISABLED. Reloading...');
+            location.reload();
+        },
+        status() {
+            const required = isAuthRequired();
+            const loggedIn = isLoggedIn();
+            const user = getUser();
+            console.table({
+                'AUTH_ENABLED (hardcode)': AUTH_ENABLED,
+                'localStorage bypass': localStorage.getItem('canifa_auth_disabled') === 'true',
+                'Effective': required ? '🔒 ON' : '🔓 OFF',
+                'Logged in': loggedIn,
+                'User': user?.username || 'none',
+                'Role': user?.role || 'none',
+                'Token': getToken() ? '✅ exists' : '❌ missing',
+            });
+        },
+        // Getters
+        token: getToken,
+        user: getUser,
+        isLoggedIn,
+        isAuthRequired,
+    };
+
+    // ═══════════════════════════════════════════════════
+    // EXPORTS (for pages that import this)
+    // ═══════════════════════════════════════════════════
+    window.canifaAuth = {
+        guard,
+        guardAdmin,
+        logout,
+        getToken,
+        getUser,
+        isLoggedIn,
+        isAuthRequired,
+        authHeaders,
+        updateSidebarUser,
+    };
+
+    // Log status on load
+    const mode = isAuthRequired() ? '🔒 Auth ON' : '🔓 Auth OFF (dev mode)';
+    console.log(`[auth.js] ${mode} | User: ${getUser()?.username || 'none'}`);
+
+})();

backend/static/css/simulator.css

+/* ═══════════════════════════════════════════════════
+   SIMULATOR — Dark Premium Theme
+   ═══════════════════════════════════════════════════ */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+:root{
+  --bg:#0f172a;--bg2:#1e293b;--bg3:#334155;
+  --card:rgba(255,255,255,.06);--card-border:rgba(255,255,255,.08);
+  --t1:#f1f5f9;--t2:#94a3b8;--t3:#64748b;
+  --purple:#8B5CF6;--purple2:#7C3AED;--green:#10B981;--green2:#059669;
+  --amber:#F59E0B;--red:#EF4444;--blue:#3B82F6;
+  --gold:#D4A853;
+}
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--t1);min-height:100vh}
+::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
+::-webkit-scrollbar-track{background:transparent}
+button,input,textarea,select{font-family:inherit;color:var(--t1)}
+button{cursor:pointer}
+
+/* Layout */
+.sim-wrap{display:flex;flex-direction:column;height:100vh;overflow:hidden}
+.sim-topbar{height:56px;background:rgba(15,23,42,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--card-border);display:flex;align-items:center;padding:0 20px;gap:14px;flex-shrink:0;z-index:10}
+.sim-body{flex:1;overflow:hidden;display:flex}
+
+/* Topbar */
+.sim-logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--purple),var(--blue));display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;font-weight:800}
+.sim-title{font-size:14px;font-weight:800;color:var(--t1);letter-spacing:-.01em}
+.sim-subtitle{font-size:10px;color:var(--t3)}
+
+/* Tabs */
+.tab-group{display:flex;gap:2px;background:rgba(255,255,255,.04);border-radius:9px;padding:3px}
+.tab-btn{padding:6px 14px;border-radius:7px;border:none;font-size:12px;font-weight:600;background:transparent;color:var(--t3);transition:all .15s}
+.tab-btn:hover{color:var(--t2)}
+.tab-btn.active{background:rgba(139,92,246,.15);color:var(--purple);box-shadow:0 1px 4px rgba(139,92,246,.15)}
+.tab-badge{margin-left:4px;font-size:9px;background:rgba(139,92,246,.15);color:var(--purple);padding:1px 6px;border-radius:100px}
+
+/* Buttons */
+.btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;border:none;border-radius:9px;padding:8px 18px;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
+.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(139,92,246,.3)}
+.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
+.btn-launch{background:linear-gradient(135deg,var(--green),var(--green2));padding:12px 28px;font-size:14px;border-radius:12px;box-shadow:0 4px 20px rgba(16,185,129,.25)}
+.btn-launch:hover{box-shadow:0 8px 30px rgba(16,185,129,.35)}
+.btn-secondary{background:rgba(255,255,255,.06);color:var(--t2);border:1px solid var(--card-border);border-radius:9px;padding:8px 16px;font-size:12.5px;font-weight:600;transition:all .12s}
+.btn-secondary:hover{background:rgba(255,255,255,.1);color:var(--t1)}
+.btn-danger{background:var(--red);color:#fff;border:none;border-radius:9px;padding:8px 16px;font-size:12.5px;font-weight:700}
+.btn-success{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;border:none;border-radius:9px;padding:8px 16px;font-size:12.5px;font-weight:700}
+
+/* Cards */
+.card{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:18px 20px;backdrop-filter:blur(12px)}
+.card-title{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:2px}
+.card-desc{font-size:11.5px;color:var(--t3)}
+
+/* Target chips */
+.target-chips{display:flex;gap:6px;flex-wrap:wrap}
+.target-chip{padding:8px 14px;border-radius:9px;border:1.5px solid var(--card-border);background:rgba(255,255,255,.03);font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px}
+.target-chip:hover{border-color:var(--purple);color:var(--t1)}
+.target-chip.active{border-color:var(--purple);background:rgba(139,92,246,.1);color:var(--purple)}
+.target-dot{width:8px;height:8px;border-radius:50%}
+
+/* Conversion badges */
+.conv-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.03em}
+.conv-converted{background:rgba(16,185,129,.15);color:var(--green);border:1px solid rgba(16,185,129,.3)}
+.conv-interested{background:rgba(245,158,11,.12);color:var(--amber);border:1px solid rgba(245,158,11,.25)}
+.conv-dropped{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.25)}
+
+/* Persona Cards */
+.persona-card{border:1.5px solid var(--card-border);border-radius:12px;padding:14px;background:var(--card);transition:all .2s;position:relative}
+.persona-card:hover{border-color:rgba(139,92,246,.3)}
+.persona-card.done{border-color:rgba(16,185,129,.3)}
+.persona-card.running{border-color:rgba(59,130,246,.4);box-shadow:0 0 20px rgba(59,130,246,.1)}
+.persona-avatar{width:38px;height:38px;border-radius:50%;background:rgba(139,92,246,.15);border:1.5px solid rgba(139,92,246,.3);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--purple);flex-shrink:0}
+.persona-name{font-size:13px;font-weight:700;color:var(--t1)}
+.persona-meta{font-size:10.5px;color:var(--t3)}
+
+/* Score helpers */
+.score-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
+.minibar-track{height:4px;background:rgba(255,255,255,.06);border-radius:100px;overflow:hidden}
+.minibar-fill{height:100%;border-radius:100px;transition:width .6s ease}
+
+/* KPI Cards */
+.kpi-card{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:18px;text-align:center;backdrop-filter:blur(12px)}
+.kpi-value{font-size:28px;font-weight:800;line-height:1;margin:6px 0 2px}
+.kpi-label{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}
+
+/* Chat */
+.chat-header{padding:12px 16px;border-bottom:1px solid var(--card-border);background:rgba(15,23,42,.6);display:flex;align-items:center;gap:10px;flex-shrink:0}
+.chat-area{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
+.msg-label{font-size:9.5px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px}
+.msg-bubble{max-width:80%;padding:9px 13px;font-size:13px;line-height:1.55;word-break:break-word}
+.msg-user{align-self:flex-end;border-radius:14px 14px 3px 14px;background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff}
+.msg-bot{align-self:flex-start;border-radius:14px 14px 14px 3px;background:var(--bg2);border:1px solid var(--card-border);color:var(--t1)}
+.msg-thinking{align-self:flex-end;border-radius:14px 14px 3px 14px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);color:var(--amber);font-style:italic}
+
+/* Sim sidebar */
+.sim-sidebar{width:200px;border-right:1px solid var(--card-border);overflow-y:auto;padding:10px;background:rgba(15,23,42,.5)}
+.sim-sidebar-item{padding:9px 10px;border-radius:9px;cursor:pointer;margin-bottom:4px;transition:all .12s;border:1.5px solid transparent}
+.sim-sidebar-item:hover{background:rgba(255,255,255,.04)}
+.sim-sidebar-item.active{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.2)}
+
+/* Metrics panel */
+.metrics-panel{width:280px;border-left:1px solid var(--card-border);overflow-y:auto;padding:14px;background:rgba(15,23,42,.5)}
+
+/* Progress bar */
+.progress-bar{height:56px;background:rgba(15,23,42,.9);border-top:1px solid var(--card-border);display:flex;align-items:center;padding:0 20px;gap:14px;flex-shrink:0}
+.progress-track{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:100px;overflow:hidden}
+.progress-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--purple),var(--green));transition:width .4s ease}
+
+/* Score table */
+.score-table{width:100%;border-collapse:collapse;font-size:12px}
+.score-table th{padding:10px;text-align:center;font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--card-border)}
+.score-table th:first-child{text-align:left;padding-left:14px}
+.score-table td{padding:8px 10px;text-align:center;border-bottom:1px solid rgba(255,255,255,.03)}
+.score-table td:first-child{text-align:left;padding-left:14px;font-family:monospace;font-weight:500;color:var(--t2)}
+.score-table tr:hover{background:rgba(255,255,255,.02)}
+
+/* Funnel */
+.funnel-stage{display:flex;align-items:center;gap:10px;padding:10px 0}
+.funnel-bar{height:32px;border-radius:8px;display:flex;align-items:center;padding:0 12px;font-size:12px;font-weight:700;color:#fff;transition:width .6s ease}
+
+/* Insights */
+.insight-box{padding:14px 16px;border-radius:12px;margin-bottom:10px}
+.insight-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
+
+/* Modal */
+.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;backdrop-filter:blur(4px)}
+.modal-body{background:var(--bg2);border:1px solid var(--card-border);border-radius:16px;padding:24px;width:min(520px,100%);max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
+.modal-body input,.modal-body textarea,.modal-body select{background:rgba(255,255,255,.06);border:1.5px solid var(--card-border);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--t1);width:100%;transition:border-color .15s}
+.modal-body input:focus,.modal-body textarea:focus{outline:none;border-color:var(--purple)}
+
+/* Animations */
+@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
+@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
+@keyframes spin{to{transform:rotate(360deg)}}
+.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:pulse 1s infinite}
+.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block}
+
+/* Tab panels */
+.tab-panel{display:none;flex:1;overflow:hidden}
+.tab-panel.active{display:flex;flex-direction:column}
+.tab-scroll{flex:1;overflow-y:auto;padding:20px}

backend/static/diagram-agent.html

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AI Diagram Agent — Canifa AI</title>
+<link rel="stylesheet" href="/static/css/theme.css">
+<link rel="stylesheet" href="/static/css/components.css">
+<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<style>
+body { margin:0; font-family:var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); background:var(--background,#faf9f7); color:var(--foreground,#1c1917); }
+
+.page-wrap { max-width:1400px; margin:0 auto; padding:16px 20px; }
+
+/* Header — same as tag-search */
+.page-header { margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
+.page-header h1 { font-size:20px; font-weight:700; margin:0; }
+.page-header p { font-size:12px; color:var(--muted-fg,#78716c); margin:2px 0 0; }
+.header-badges { display:flex; gap:6px; align-items:center; }
+.header-badge { padding:3px 10px; font-size:11px; font-weight:600; border-radius:12px; background:#f0efec; color:#78716c; }
+.session-badge { padding:3px 10px; font-size:10px; font-weight:500; border-radius:12px; background:#dbeafe; color:#3b82f6; font-family:'Consolas',monospace; }
+
+/* ═══════ 2-Column Layout ═══════ */
+.split-layout { display:grid; grid-template-columns:1fr 1fr; gap:12px; height:calc(100vh - 120px); min-height:450px; }
+
+/* Left: Chat Panel */
+.chat-panel { display:flex; flex-direction:column; background:var(--card,#fff); border:1px solid var(--border,#e7e5e2); border-radius:12px; overflow:hidden; }
+
+.chat-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
+.chat-messages::-webkit-scrollbar { width:3px; }
+.chat-messages::-webkit-scrollbar-thumb { background:rgba(0,0,0,.08); border-radius:4px; }
+
+.msg { max-width:88%; padding:9px 13px; border-radius:12px; font-size:13px; line-height:1.5; word-break:break-word; }
+.msg.user { align-self:flex-end; background:var(--primary,#1c1917); color:#fff; border-bottom-right-radius:4px; }
+.msg.ai { align-self:flex-start; background:var(--muted,#f0efec); color:var(--foreground); border-bottom-left-radius:4px; }
+.msg.ai .meta { margin-top:5px; font-size:10px; color:var(--muted-fg,#78716c); display:flex; gap:6px; }
+.msg.system { align-self:center; font-size:11px; color:var(--muted-fg); font-style:italic; background:none; padding:4px 0; }
+.msg.error { align-self:center; font-size:11px; color:#dc2626; background:rgba(220,38,38,.05); padding:6px 12px; }
+
+/* Markdown in AI messages */
+.msg.ai a { color:var(--primary); text-decoration:underline; }
+.msg.ai strong { font-weight:600; }
+.msg.ai code { background:var(--muted); padding:1px 4px; border-radius:3px; font-size:11.5px; }
+.msg.ai p { margin: 0 0 8px 0; }
+.msg.ai p:last-child { margin: 0; }
+.msg.ai ul, .msg.ai ol { margin: 0 0 8px 0; padding-left: 20px; }
+.msg.ai li { margin-bottom: 2px; }
+
+/* Quick actions */
+.quick-actions { padding:6px 12px; display:flex; gap:5px; flex-wrap:wrap; border-top:1px solid var(--border); background:var(--card); }
+.quick-btn { padding:4px 10px; font-size:11px; border:1px solid var(--border); border-radius:14px; background:var(--background); cursor:pointer; color:var(--foreground); transition:all .15s; }
+.quick-btn:hover { background:var(--muted); border-color:var(--muted-fg); }
+
+/* Input */
+.chat-input { border-top:1px solid var(--border); padding:10px 12px; display:flex; gap:6px; background:var(--card); }
+.chat-input textarea { flex:1; padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; outline:none; background:var(--background); transition:border-color .2s; resize:none; font-family:inherit; }
+.chat-input textarea:focus { border-color:var(--primary); }
+.chat-input button { padding:9px 16px; background:var(--primary,#1c1917); color:#fff; border:none; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; transition:opacity .2s; white-space:nowrap; }
+.chat-input button:hover { opacity:.85; }
+.chat-input button:disabled { opacity:.5; cursor:not-allowed; }
+.btn-clear { background:#dc2626 !important; }
+.btn-clear:hover { background:#b91c1c !important; }
+
+/* Thinking animation */
+.thinking { display:flex; gap:4px; padding:8px 13px; }
+.thinking span { width:5px; height:5px; border-radius:50%; background:var(--muted-fg); animation:bounce 1.4s ease-in-out infinite; }
+.thinking span:nth-child(2) { animation-delay:.2s; }
+.thinking span:nth-child(3) { animation-delay:.4s; }
+@keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-7px)} }
+
+/* Pipeline trace (inside chat) */
+.pipeline-trace { display:flex; flex-direction:column; gap:0; }
+.p-step { position:relative; padding:8px 10px 8px 24px; margin:0; }
+.p-step:not(:last-child) { border-left:2px solid var(--border); margin-left:5px; padding-bottom:10px; }
+.p-step:last-child { border-left:2px solid transparent; margin-left:5px; }
+
+.p-step::before { content:''; position:absolute; left:-1px; top:11px; width:8px; height:8px; border-radius:50%; border:2px solid var(--border); background:var(--card); z-index:1; margin-left:-3px; }
+.p-step.s-planner::before { background:#f59e0b; border-color:#f59e0b; }
+.p-step.s-tool_result::before { background:#10b981; border-color:#10b981; }
+.p-step.s-responder::before { background:#3b82f6; border-color:#3b82f6; }
+
+.p-step .step-label { font-size:10px; font-weight:700; margin-bottom:2px; }
+.p-step.s-planner .step-label { color:#f59e0b; }
+.p-step.s-tool_result .step-label { color:#10b981; }
+.p-step.s-responder .step-label { color:#3b82f6; }
+.p-step .step-content { font-size:11px; line-height:1.4; color:var(--muted-fg); word-break:break-word; }
+
+@keyframes slideIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+.p-step { animation:slideIn .3s ease-out; }
+
+/* ═══════ RIGHT: Diagram Panel ═══════ */
+.diagram-panel { display:flex; flex-direction:column; background:var(--card,#fff); border:1px solid var(--border,#e7e5e2); border-radius:12px; overflow:hidden; }
+
+.diagram-header { padding:10px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
+.diagram-header h3 { font-size:13px; font-weight:700; margin:0; }
+.diagram-toolbar { display:flex; gap:4px; align-items:center; }
+.toolbar-btn { padding:4px 10px; font-size:11px; border:1px solid var(--border); border-radius:8px; background:var(--background); cursor:pointer; color:var(--foreground); transition:all .15s; }
+.toolbar-btn:hover { background:var(--muted); border-color:var(--muted-fg); }
+.zoom-label { font-size:10px; font-weight:600; color:var(--muted-fg); min-width:38px; text-align:center; font-family:var(--font-mono); }
+
+.diagram-canvas { flex:1; overflow:hidden; position:relative; background:var(--background); cursor:grab; user-select:none; }
+.diagram-canvas.grabbing { cursor:grabbing; }
+.diagram-canvas::-webkit-scrollbar { display:none; }
+
+/* Grid background like draw.io */
+.diagram-canvas::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle, var(--border) 0.5px, transparent 0.5px); background-size:20px 20px; opacity:.4; pointer-events:none; z-index:0; }
+
+#diagramOutput { position:absolute; top:0; left:0; transform-origin:0 0; transition:none; will-change:transform; z-index:1; }
+#diagramOutput svg { display:block; max-width:none; height:auto; }
+
+/* Empty state */
+.empty-state { text-align:center; color:var(--muted-fg); padding:40px; }
+.empty-state .icon { font-size:56px; margin-bottom:12px; opacity:.5; }
+.empty-state h3 { font-size:16px; font-weight:600; color:var(--secondary-fg); margin-bottom:6px; }
+.empty-state p { font-size:12px; line-height:1.6; max-width:280px; margin:0 auto; }
+
+/* Diagram info bar */
+.diagram-info { padding:6px 14px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-size:10px; color:var(--muted-fg); background:var(--card); }
+
+/* Mermaid code viewer */
+.code-viewer { display:none; padding:12px 14px; border-top:1px solid var(--border); background:rgba(0,0,0,.02); max-height:180px; overflow:auto; }
+.code-viewer.show { display:block; }
+.code-viewer pre { font-family:var(--font-mono,'Consolas','Monaco',monospace); font-size:11px; color:var(--foreground); white-space:pre-wrap; line-height:1.5; margin:0; }
+
+@media (max-width:900px) {
+    .split-layout { grid-template-columns:1fr; }
+    .split-layout > * { min-height:350px; }
+}
+</style>
+</head>
+<body>
+<div class="page-wrap">
+    <div class="page-header">
+        <div>
+            <h1>📊 AI Diagram Agent</h1>
+            <p>Mô tả bằng lời — AI tự vẽ sơ đồ · Hỗ trợ Flowchart, Sequence, Class, ER, Gantt, Mindmap, Pie chart · <strong>History in Redis (30min TTL)</strong></p>
+        </div>
+        <div class="header-badges">
+            <span class="session-badge" id="sessionBadge">—</span>
+            <span class="header-badge">2-Agent LangGraph</span>
+            <span class="header-badge">Mermaid.js</span>
+        </div>
+    </div>
+
+    <div class="split-layout">
+        <!-- ═══════ LEFT: CHAT ═══════ -->
+        <div class="chat-panel">
+            <div class="chat-messages" id="chatMessages">
+                <div class="msg system">💬 Chat history lưu Redis, reload thoải mái! Tự hết hạn sau 30 phút.</div>
+                <div class="msg system">Mô tả sơ đồ bạn muốn — VD: "Vẽ flow đặt hàng online", "Sequence diagram login"</div>
+            </div>
+
+            <div class="quick-actions">
+                <button class="quick-btn" onclick="sendQuick('Vẽ flow đặt hàng online')">🛒 Flow đặt hàng</button>
+                <button class="quick-btn" onclick="sendQuick('Sequence diagram login với OTP')">🔑 Sequence login</button>
+                <button class="quick-btn" onclick="sendQuick('Mindmap marketing plan 2025')">🧠 Mindmap marketing</button>
+                <button class="quick-btn" onclick="sendQuick('ER diagram hệ thống e-commerce')">🗃️ ER e-commerce</button>
+                <button class="quick-btn" onclick="sendQuick('Gantt chart dự án 3 tháng')">📅 Gantt chart</button>
+                <button class="quick-btn" onclick="sendQuick('Class diagram hệ thống OOP')">📐 Class diagram</button>
+            </div>
+
+            <div class="chat-input">
+                <textarea id="chatInput" placeholder="Mô tả sơ đồ... VD: Vẽ flow đặt hàng online" rows="1"
+                    onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendMessage()}"></textarea>
+                <button id="btnSend" onclick="sendMessage()">Gửi</button>
+                <button class="btn-clear" onclick="clearChat()">Xoá</button>
+            </div>
+        </div>
+
+        <!-- ═══════ RIGHT: DIAGRAM ═══════ -->
+        <div class="diagram-panel">
+            <div class="diagram-header">
+                <h3 id="diagramTitle">📊 Diagram Preview</h3>
+                <div class="diagram-toolbar">
+                    <button class="toolbar-btn" onclick="zoomIn()" title="Zoom in (Ctrl+Scroll)">🔍+</button>
+                    <span class="zoom-label" id="zoomLabel">100%</span>
+                    <button class="toolbar-btn" onclick="zoomOut()" title="Zoom out (Ctrl+Scroll)">🔍−</button>
+                    <button class="toolbar-btn" onclick="fitToView()" title="Fit diagram to view">⊞ Fit</button>
+                    <button class="toolbar-btn" onclick="resetZoom()" title="Reset zoom & position">↻ Reset</button>
+                    <button class="toolbar-btn" onclick="toggleCode()">{ } Code</button>
+                    <button class="toolbar-btn" onclick="exportDiagramPNG()">📥 PNG</button>
+                </div>
+            </div>
+
+            <div class="diagram-canvas" id="diagramCanvas">
+                <div id="diagramOutput">
+                    <div class="empty-state">
+                        <div class="icon">📊</div>
+                        <h3>Chưa có diagram</h3>
+                        <p>Nhập yêu cầu ở panel trái để AI vẽ sơ đồ. Hỗ trợ: flowchart, sequence, class, ER, gantt, mindmap, pie chart...</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="code-viewer" id="codeViewer">
+                <pre id="mermaidCode">// Mermaid code sẽ hiện ở đây</pre>
+            </div>
+
+            <div class="diagram-info">
+                <span id="diagramType">Chưa có diagram</span>
+                <span id="diagramTime"></span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+// ═══ MERMAID INIT (light theme matching Canifa) ═══
+mermaid.initialize({
+    startOnLoad: false,
+    theme: 'default',
+    themeVariables: {
+        primaryColor: '#eef1f8',
+        primaryTextColor: '#1c1917',
+        primaryBorderColor: '#3b5998',
+        secondaryColor: '#f0efec',
+        tertiaryColor: '#fef3c7',
+        lineColor: '#78716c',
+        fontFamily: 'Inter, system-ui, sans-serif',
+        fontSize: '13px',
+    },
+    flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'basis' },
+    sequence: { useMaxWidth: true, showSequenceNumbers: true },
+});
+
+const SESSION_ID = 'diagram_' + Date.now().toString(36);
+let currentMermaidCode = '';
+let currentZoom = 1;
+let panX = 0, panY = 0;
+let isDragging = false, dragStartX = 0, dragStartY = 0, panStartX = 0, panStartY = 0;
+
+const canvas = document.getElementById('diagramCanvas');
+const output = document.getElementById('diagramOutput');
+
+// Show session badge
+document.getElementById('sessionBadge').textContent = SESSION_ID.substring(0, 16);
+
+// ═══ PAN & ZOOM ═══
+function applyTransform() {
+    output.style.transform = `translate(${panX}px, ${panY}px) scale(${currentZoom})`;
+    document.getElementById('zoomLabel').textContent = Math.round(currentZoom * 100) + '%';
+}
+
+// Mouse wheel zoom
+canvas.addEventListener('wheel', (e) => {
+    e.preventDefault();
+    const rect = canvas.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+
+    const oldZoom = currentZoom;
+    const delta = e.deltaY > 0 ? -0.1 : 0.1;
+    currentZoom = Math.min(Math.max(currentZoom + delta, 0.1), 5);
+
+    // Zoom towards mouse position
+    const scale = currentZoom / oldZoom;
+    panX = mouseX - scale * (mouseX - panX);
+    panY = mouseY - scale * (mouseY - panY);
+
+    applyTransform();
+}, { passive: false });
+
+// Click-drag pan
+canvas.addEventListener('mousedown', (e) => {
+    if (e.button !== 0) return;
+    isDragging = true;
+    dragStartX = e.clientX;
+    dragStartY = e.clientY;
+    panStartX = panX;
+    panStartY = panY;
+    canvas.classList.add('grabbing');
+});
+
+window.addEventListener('mousemove', (e) => {
+    if (!isDragging) return;
+    panX = panStartX + (e.clientX - dragStartX);
+    panY = panStartY + (e.clientY - dragStartY);
+    applyTransform();
+});
+
+window.addEventListener('mouseup', () => {
+    isDragging = false;
+    canvas.classList.remove('grabbing');
+});
+
+// ═══ SEND MESSAGE ═══
+async function sendMessage() {
+    const input = document.getElementById('chatInput');
+    const query = input.value.trim();
+    if (!query) return;
+
+    input.value = '';
+    input.style.height = 'auto';
+    appendMessage('user', query);
+
+    const typingEl = showTyping();
+    const btn = document.getElementById('btnSend');
+    btn.disabled = true;
+
+    try {
+        const resp = await fetch('/api/diagram/chat', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query, session_id: SESSION_ID }),
+        });
+
+        const data = await resp.json();
+        removeTyping(typingEl);
+
+        if (data.status === 'success') {
+            if (data.pipeline && data.pipeline.length > 0) {
+                showPipeline(data.pipeline);
+            }
+            if (data.diagram && data.diagram.mermaid_code) {
+                await renderDiagram(data.diagram.mermaid_code, data.diagram.title, data.diagram.diagram_type);
+            }
+            if (data.response) {
+                appendMessage('ai', data.response);
+            }
+            document.getElementById('diagramTime').textContent = `⏱ ${data.elapsed_ms}ms · ${data.agent_path}`;
+        } else {
+            appendMessage('error', `❌ ${data.message || 'Unknown error'}`);
+        }
+    } catch (err) {
+        removeTyping(typingEl);
+        appendMessage('error', `❌ Lỗi kết nối: ${err.message}`);
+    } finally {
+        btn.disabled = false;
+        input.focus();
+    }
+}
+
+function sendQuick(text) {
+    document.getElementById('chatInput').value = text;
+    sendMessage();
+}
+
+// ═══ RENDER ═══
+async function renderDiagram(code, title, type) {
+    currentMermaidCode = code;
+    document.getElementById('mermaidCode').textContent = code;
+
+    if (title) {
+        document.getElementById('diagramTitle').textContent = `📊 ${title}`;
+    }
+    document.getElementById('diagramType').textContent = `${type || 'diagram'} · ${code.split('\n').length} lines`;
+
+    try {
+        const { svg } = await mermaid.render('mermaid-svg-' + Date.now(), code);
+        output.innerHTML = svg;
+        // Auto-fit after render
+        requestAnimationFrame(() => fitToView());
+    } catch (err) {
+        console.error('Mermaid render error:', err);
+        output.innerHTML = `
+            <div class="empty-state" style="position:relative">
+                <div class="icon">⚠️</div>
+                <h3>Lỗi render diagram</h3>
+                <p style="color:#dc2626">${escHtml(err.message || String(err))}</p>
+                <pre style="text-align:left;font-size:10px;color:var(--muted-fg);margin-top:8px;max-width:360px;overflow:auto;white-space:pre-wrap">${escHtml(code)}</pre>
+            </div>`;
+    }
+}
+
+// ═══ CHAT UI ═══
+function appendMessage(role, content) {
+    const c = document.getElementById('chatMessages');
+    const div = document.createElement('div');
+    div.className = `msg ${role}`;
+
+    if (role === 'ai') {
+        try { div.innerHTML = marked.parse(content); }
+        catch { div.textContent = content; }
+    } else {
+        div.textContent = content;
+    }
+
+    c.appendChild(div);
+    c.scrollTop = c.scrollHeight;
+}
+
+function showPipeline(steps) {
+    const c = document.getElementById('chatMessages');
+    const wrapper = document.createElement('div');
+    wrapper.className = 'pipeline-trace';
+
+    for (const step of steps) {
+        if (step.step === 'user') continue;
+        const div = document.createElement('div');
+        div.className = `p-step s-${step.step}`;
+        div.innerHTML = `<div class="step-label">${escHtml(step.label)}</div>
+                         <div class="step-content">${escHtml((step.content || '').substring(0, 200))}</div>`;
+        wrapper.appendChild(div);
+    }
+
+    c.appendChild(wrapper);
+    c.scrollTop = c.scrollHeight;
+}
+
+function showTyping() {
+    const c = document.getElementById('chatMessages');
+    const div = document.createElement('div');
+    div.className = 'thinking';
+    div.innerHTML = '<span></span><span></span><span></span>';
+    c.appendChild(div);
+    c.scrollTop = c.scrollHeight;
+    return div;
+}
+
+function removeTyping(el) { if (el && el.parentNode) el.remove(); }
+
+function escHtml(s) {
+    if (!s) return '';
+    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+
+// ═══ ACTIONS ═══
+async function clearChat() {
+    document.getElementById('chatMessages').innerHTML =
+        '<div class="msg system">💬 Chat đã xoá. Bắt đầu lại nào!</div>';
+    document.getElementById('diagramOutput').innerHTML = `
+        <div class="empty-state"><div class="icon">📊</div><h3>Chưa có diagram</h3><p>Nhập yêu cầu ở panel trái.</p></div>`;
+    document.getElementById('mermaidCode').textContent = '// Mermaid code sẽ hiện ở đây';
+    document.getElementById('diagramType').textContent = 'Chưa có diagram';
+    document.getElementById('diagramTime').textContent = '';
+    currentMermaidCode = '';
+    try { await fetch('/api/diagram/clear', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({session_id:SESSION_ID}) }); } catch {}
+}
+
+function toggleCode() { document.getElementById('codeViewer').classList.toggle('show'); }
+
+// ═══ ZOOM CONTROLS ═══
+function zoomIn() { currentZoom = Math.min(currentZoom + 0.15, 5); applyTransform(); }
+function zoomOut() { currentZoom = Math.max(currentZoom - 0.15, 0.1); applyTransform(); }
+
+function resetZoom() {
+    currentZoom = 1; panX = 0; panY = 0;
+    applyTransform();
+}
+
+function fitToView() {
+    const svg = output.querySelector('svg');
+    if (!svg) return;
+
+    // Step 1: Reset to identity so getBoundingClientRect measures natural SVG size
+    currentZoom = 1;
+    panX = 0;
+    panY = 0;
+    output.style.transform = 'translate(0px, 0px) scale(1)';
+
+    // Step 2: Force browser layout recalc, then measure natural dimensions
+    const canvasRect = canvas.getBoundingClientRect();
+    const svgRect = svg.getBoundingClientRect();
+    const svgW = svgRect.width;
+    const svgH = svgRect.height;
+    if (!svgW || !svgH) return;
+
+    // Step 3: Calculate scale to fit — NEVER zoom in beyond 100%
+    const padding = 40;
+    const scaleX = (canvasRect.width - padding) / svgW;
+    const scaleY = (canvasRect.height - padding) / svgH;
+    currentZoom = Math.min(scaleX, scaleY, 1);  // cap at 100%
+    currentZoom = Math.max(currentZoom, 0.05);   // min 5%
+
+    // Step 4: Center in canvas
+    const fittedW = svgW * currentZoom;
+    const fittedH = svgH * currentZoom;
+    panX = Math.max(0, (canvasRect.width - fittedW) / 2);
+    panY = Math.max(0, (canvasRect.height - fittedH) / 2);
+    applyTransform();
+}
+
+// ═══ EXPORT PNG ═══
+function exportDiagramPNG() {
+    const svg = document.querySelector('#diagramOutput svg');
+    if (!svg) { alert('Chưa có diagram để export!'); return; }
+    const svgData = new XMLSerializer().serializeToString(svg);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+    img.onload = () => {
+        canvas.width = img.width * 2; canvas.height = img.height * 2;
+        ctx.scale(2, 2);
+        ctx.fillStyle = '#faf9f7';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0);
+        const a = document.createElement('a');
+        a.download = 'diagram.png'; a.href = canvas.toDataURL('image/png'); a.click();
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
+}
+
+// Auto-resize textarea
+document.getElementById('chatInput').addEventListener('input', function() {
+    this.style.height = 'auto';
+    this.style.height = Math.min(this.scrollHeight, 100) + 'px';
+});
+</script>
+</body>
+</html>

backend/static/js/simulator.js

+// ═══════════════════════════════════════════════════════
+// Conversion Simulator — JS Engine
+// ═══════════════════════════════════════════════════════
+
+// ── STATE ─────────────────────────────────────────────
+const TARGETS = {
+  prod: "http://172.16.2.207:5000/api/agent/chat",
+  dev:  "http://172.16.2.207:5000/api/agent/chat-dev",
+  local:"http://localhost:5000/api/agent/chat-dev",
+}
+const PERSONAS_DEFAULT = [
+  { id:1, name:"Chị Lan", age:35, archetype:"Mẹ bỉm sữa",
+    trait:"Mua đồ cho con trai 5 tuổi, budget 300k-600k, cẩn thận so sánh giá",
+    system:"Bạn đóng vai Chị Lan, 35 tuổi, nội trợ. Mua cho con trai 5 tuổi, budget 300k-600k. Hay hỏi 'có sale không?', so sánh giá. MUA khi combo dưới 500k+free ship. BỎ khi gợi SP trên 1tr.",
+    budget:"300k-600k", shopping_for:"Con trai 5 tuổi", conversion_trigger:"Combo dưới 500k + free ship", drop_trigger:"SP trên 1tr"},
+  { id:2, name:"Vy GenZ", age:20, archetype:"GenZ TikToker",
+    trait:"Thích trend, chat nhanh, dùng slang/emoji, budget thấp",
+    system:"Bạn đóng vai Vy, 20 tuổi, sinh viên. Chat nhanh, dùng emoji 💀🔥. Budget 200k-400k. MUA khi có SP trendy giá rẻ. BỎ khi bot formal quá hoặc chậm.",
+    budget:"200k-400k", shopping_for:"Bản thân", conversion_trigger:"SP trendy giá rẻ dưới 300k", drop_trigger:"Bot quá formal"},
+  { id:3, name:"Anh Tuấn", age:42, archetype:"Ông chú IT",
+    trait:"Mua quà cho vợ, không rành thời trang, cần tư vấn rõ ràng",
+    system:"Bạn đóng vai Anh Tuấn, 42 tuổi, IT manager. Mua quà sinh nhật cho vợ, budget 500k-1tr. Không biết size/style. MUA khi bot gợi ý cụ thể + quà tặng kèm. BỎ khi bot hỏi quá nhiều.",
+    budget:"500k-1tr", shopping_for:"Vợ", conversion_trigger:"Bot gợi ý cụ thể + quà tặng kèm", drop_trigger:"Bot hỏi quá nhiều"},
+  { id:4, name:"Bà Hoa", age:63, archetype:"Bà ngoại",
+    trait:"Mua cho cháu, chat đơn giản, không biết thuật ngữ",
+    system:"Bạn đóng vai Bà Hoa, 63 tuổi. Mua quần áo cho cháu gái 8 tuổi. Chat đơn giản. MUA khi bot giải thích dễ hiểu + gợi SP trẻ em phù hợp. BỎ khi bot dùng từ khó hiểu.",
+    budget:"200k-500k", shopping_for:"Cháu gái 8 tuổi", conversion_trigger:"Bot giải thích dễ hiểu + SP trẻ em", drop_trigger:"Bot dùng từ khó hiểu"},
+  { id:5, name:"Minh Anh", age:28, archetype:"Fashionista",
+    trait:"Biết nhiều brand, kén chọn, so sánh Canifa vs Uniqlo",
+    system:"Bạn đóng vai Minh Anh, 28 tuổi, designer. Biết rõ thời trang, hay so sánh Canifa với Uniqlo/H&M. Budget 700k-1.5tr. MUA khi bot show unique value Canifa. BỎ khi bot né so sánh.",
+    budget:"700k-1.5tr", shopping_for:"Bản thân", conversion_trigger:"Bot show unique value Canifa", drop_trigger:"Bot né so sánh"},
+]
+
+let personas = [...PERSONAS_DEFAULT]
+let chatbotUrl = TARGETS.prod
+let conversations = {}
+let results = {}
+let synthesis = null
+let running = false, runningId = null, selectedId = null
+let editingPersonaId = null
+let currentTab = "command"
+let simStartTime = null
+
+const TABS = [["command","🎛 Command"],["live","🔬 Live Sim"],["report","📊 Report"],["insights","💡 Insights"]]
+const CONV_ICONS = {converted:'✅',interested:'🤔',dropped:'❌',error:'⚠️'}
+const scoreColor = v => v >= 4 ? "var(--green)" : v >= 3 ? "var(--amber)" : "var(--red)"
+const scoreBg = v => v >= 4 ? "rgba(16,185,129,.15)" : v >= 3 ? "rgba(245,158,11,.12)" : "rgba(239,68,68,.12)"
+const avg = a => a.length ? a.reduce((s,v)=>s+v,0)/a.length : 0
+const sleep = ms => new Promise(r => setTimeout(r, ms))
+const MAX_TURNS_DEFAULT = 5
+
+// ── TARGET SELECTION ──────────────────────────────────
+function setTarget(el, key) {
+  document.querySelectorAll('.target-chip').forEach(c => c.classList.remove('active'))
+  el.classList.add('active')
+  chatbotUrl = TARGETS[key] || el.dataset.url
+  document.getElementById('customUrl').value = ''
+}
+function onCustomUrl(inp) {
+  if (inp.value.trim()) {
+    chatbotUrl = inp.value.trim()
+    document.querySelectorAll('.target-chip').forEach(c => c.classList.remove('active'))
+  }
+}
+
+// ── TABS ──────────────────────────────────────────────
+function switchTab(id) {
+  currentTab = id
+  renderTabs()
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'))
+  document.getElementById('panel-'+id).classList.add('active')
+  if (id === 'live') renderSimSidebar()
+  if (id === 'report') renderReport()
+}
+function renderTabs() {
+  const doneCount = personas.filter(p => results[p.id]).length
+  document.getElementById('tabGroup').innerHTML = TABS.map(([id,lbl]) =>
+    `<button class="tab-btn ${currentTab===id?'active':''}" onclick="switchTab('${id}')">
+      ${lbl}${id==='report'&&doneCount>0?`<span class="tab-badge">${doneCount}</span>`:''}
+    </button>`
+  ).join('')
+}
+
+// ── TOP ACTIONS ───────────────────────────────────────
+function renderActions() {
+  const el = document.getElementById('topActions')
+  const doneCount = personas.filter(p => results[p.id]).length
+  const overallEl = document.getElementById('overallStat')
+  if (doneCount > 0) {
+    const convCount = personas.filter(p => results[p.id]?.conversion_status === 'converted').length
+    overallEl.style.display = ''
+    document.getElementById('overallScore').textContent = Math.round(convCount/doneCount*100) + '%'
+    document.getElementById('overallScore').style.color = convCount/doneCount >= .5 ? 'var(--green)' : 'var(--amber)'
+  } else { overallEl.style.display = 'none' }
+  if (running) {
+    el.innerHTML = `<button class="btn-danger" onclick="stopAll()">⏹ Stop</button>`
+  } else {
+    el.innerHTML = `${doneCount > 0 ? `<button class="btn-success" onclick="runSynthesis()">💡 Synthesize</button>` : ''}`
+  }
+}
+
+// ── PERSONA GRID ──────────────────────────────────────
+function renderPersonaGrid() {
+  document.getElementById('personaCount').textContent = personas.length
+  const grid = document.getElementById('personaGrid')
+  grid.innerHTML = personas.map(p => {
+    const r = results[p.id], isRun = runningId===p.id, isDone = !!r
+    const ov = r ? avg(Object.values(r.scores||{})) : null
+    const cs = r?.conversion_status
+    const cc = cs==='converted'?'conv-converted':cs==='interested'?'conv-interested':cs==='dropped'?'conv-dropped':''
+    return `<div class="persona-card ${isDone?'done':''} ${isRun?'running':''}">
+      ${isRun?'<div class="pulse-dot" style="position:absolute;top:10px;right:10px"></div>':''}
+      ${isDone&&cs?`<span class="conv-badge ${cc}" style="position:absolute;top:10px;right:10px">${CONV_ICONS[cs]||''} ${cs}</span>`:''}
+      <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
+        <div class="persona-avatar">${p.name.charAt(0)}</div>
+        <div>
+          <p class="persona-name">${p.name}</p>
+          <p class="persona-meta">${p.age} tuổi · ${p.archetype}</p>
+          ${p.budget?`<p style="font-size:10px;color:var(--t3)">💰 ${p.budget} · 🎯 ${p.shopping_for||''}</p>`:''}
+        </div>
+      </div>
+      <p style="font-size:11.5px;color:var(--t2);line-height:1.5;margin-bottom:8px">${p.trait}</p>
+      ${r?`<div style="border-top:1px solid var(--card-border);padding-top:8px;margin-top:4px">
+        ${r.conversion_reason?`<p style="font-size:10.5px;color:var(--t3);font-style:italic;margin-bottom:6px">"${r.conversion_reason}"</p>`:''}
+        ${isDone&&ov!==null?`<div style="display:flex;align-items:center;gap:6px"><span style="font-size:20px;font-weight:800;color:${scoreColor(ov)}">${ov.toFixed(1)}</span><span style="font-size:10px;color:var(--t3)">/ 5</span></div>`:''}
+      </div>`:''}
+      <div style="display:flex;gap:6px;margin-top:8px">
+        <button class="btn-secondary" style="flex:1;padding:5px;font-size:11px" onclick="openPersonaModal(${p.id})">Edit</button>
+        <button style="background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:7px;padding:5px 8px;font-size:11px;color:var(--red)" onclick="deletePersona(${p.id})">×</button>
+        <button style="width:28px;height:28px;border-radius:50%;background:${running?'var(--bg3)':'var(--purple)'};border:none;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center" onclick="runSingle(${p.id})" ${running?'disabled':''}>▶</button>
+      </div>
+    </div>`
+  }).join('')
+}
+
+// ── AI PERSONA GENERATION ─────────────────────────────
+async function generatePersonasAI() {
+  const btn = document.getElementById('genPersonaBtn')
+  const og = btn.innerHTML
+  btn.disabled = true; btn.innerHTML = '<span class="spinner"></span> Đang tạo...'
+  try {
+    const count = parseInt(document.getElementById('cfgCount').value) || 5
+    const resp = await fetch('/api/user-simulator/generate-personas', {
+      method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({count})
+    })
+    const d = await resp.json()
+    if (d.status !== 'success') throw new Error(d.message || 'Fail')
+    personas = d.personas.map((p,i) => ({
+      id: Date.now()+i, name:p.name, age:p.age, archetype:p.archetype,
+      trait: `${p.chat_style}. Budget: ${p.budget}, mua cho: ${p.shopping_for}`,
+      system: p.system_prompt, budget:p.budget, shopping_for:p.shopping_for,
+      conversion_trigger:p.conversion_trigger, drop_trigger:p.drop_trigger,
+    }))
+    results = {}; conversations = {}; synthesis = null
+    renderAll()
+  } catch(e) { alert('Lỗi: '+e.message) }
+  finally { btn.disabled=false; btn.innerHTML=og }
+}
+
+// ── PERSONA MODAL ─────────────────────────────────────
+function openPersonaModal(id) {
+  editingPersonaId = id || null
+  const m = document.getElementById('personaModal')
+  document.getElementById('modalTitle').textContent = id ? 'Edit Persona' : 'New Persona'
+  if (id) {
+    const p = personas.find(x=>x.id===id); if(!p) return
+    document.getElementById('mName').value = p.name
+    document.getElementById('mAge').value = p.age
+    document.getElementById('mArchetype').value = p.archetype
+    document.getElementById('mBudget').value = p.budget || ''
+    document.getElementById('mTrait').value = p.trait
+    document.getElementById('mSystem').value = p.system
+  } else { ['mName','mArchetype','mBudget','mTrait','mSystem'].forEach(k=>document.getElementById(k).value=''); document.getElementById('mAge').value='30' }
+  m.style.display = 'flex'
+}
+function closePersonaModal() { document.getElementById('personaModal').style.display = 'none' }
+function savePersona() {
+  const n = document.getElementById('mName').value.trim()
+  if (!n) return alert('Tên không được trống')
+  const data = {
+    name:n, age:parseInt(document.getElementById('mAge').value)||30,
+    archetype:document.getElementById('mArchetype').value.trim(),
+    trait:document.getElementById('mTrait').value.trim(),
+    system:document.getElementById('mSystem').value.trim(),
+    budget:document.getElementById('mBudget').value.trim(),
+  }
+  if (editingPersonaId) { const p = personas.find(x=>x.id===editingPersonaId); if(p) Object.assign(p, data) }
+  else { data.id = Date.now(); personas.push(data) }
+  closePersonaModal(); renderAll()
+}
+function deletePersona(id) { personas = personas.filter(p=>p.id!==id); delete results[id]; delete conversations[id]; renderAll() }
+
+// ── SIMULATION ENGINE ─────────────────────────────────
+async function launchSimulation() {
+  if (running) return
+  running = true; simStartTime = Date.now()
+  const maxTurns = parseInt(document.getElementById('cfgTurns').value) || MAX_TURNS_DEFAULT
+  showProgress(0, personas.length)
+  switchTab('live')
+  renderAll()
+  for (let i = 0; i < personas.length; i++) {
+    if (!running) break
+    await runSinglePersona(personas[i], maxTurns)
+    showProgress(i+1, personas.length)
+  }
+  running = false; runningId = null
+  hideProgress()
+  renderAll()
+  if (personas.filter(p => results[p.id]).length > 0) await runSynthesis()
+}
+
+async function runSingle(id) {
+  if (running) return
+  const p = personas.find(x=>x.id===id); if(!p) return
+  running = true; simStartTime = Date.now()
+  const maxTurns = parseInt(document.getElementById('cfgTurns').value) || MAX_TURNS_DEFAULT
+  showProgress(0, 1)
+  switchTab('live')
+  renderAll()
+  await runSinglePersona(p, maxTurns)
+  running = false; runningId = null
+  showProgress(1, 1)
+  setTimeout(hideProgress, 1000)
+  renderAll()
+}
+
+async function runSinglePersona(p, maxTurns) {
+  runningId = p.id; selectedId = p.id
+  conversations[p.id] = []
+  renderSimSidebar(); renderChatView(); renderMetricsPanel()
+  renderPersonaGrid(); renderActions()
+
+  for (let turn = 0; turn < maxTurns; turn++) {
+    if (!running) break
+    // 1. Generate user message
+    try {
+      const umResp = await fetch('/api/user-simulator/generate-message', {
+        method:'POST', headers:{'Content-Type':'application/json'},
+        body: JSON.stringify({ persona_system_prompt: p.system, conversation: conversations[p.id].filter(m=>!m.thinking).map(m=>({role:m.role,content:m.content})) })
+      })
+      const umData = await umResp.json()
+      if (umData.status !== 'success') { addMsg(p.id,'system','[Lỗi tạo tin nhắn]'); break }
+      if (umData.thinking) addMsg(p.id,'thinking',umData.thinking)
+      addMsg(p.id,'user', umData.message)
+    } catch(e) { addMsg(p.id,'system','[Lỗi: '+e.message+']'); break }
+    renderChatView(); await sleep(300)
+
+    // 2. Chat with bot
+    try {
+      const botResp = await fetch('/api/user-simulator/chat-with-bot', {
+        method:'POST', headers:{'Content-Type':'application/json'},
+        body: JSON.stringify({
+          message: conversations[p.id].filter(m=>m.role==='user').pop()?.content || '',
+          chatbot_url: chatbotUrl,
+          device_id: 'sim-'+p.id
+        })
+      })
+      const botData = await botResp.json()
+      if (botData.status === 'success') { addMsg(p.id,'assistant',botData.response) }
+      else { addMsg(p.id,'assistant','[Chatbot không phản hồi]') }
+    } catch(e) { addMsg(p.id,'assistant','[Lỗi kết nối chatbot]') }
+    renderChatView(); await sleep(300)
+  }
+
+  // 3. Evaluate
+  try {
+    const evalResp = await fetch('/api/user-simulator/evaluate', {
+      method:'POST', headers:{'Content-Type':'application/json'},
+      body: JSON.stringify({
+        persona_name:p.name, persona_age:p.age, persona_archetype:p.archetype, persona_trait:p.trait,
+        conversation: conversations[p.id].filter(m=>!m.thinking).map(m=>({role:m.role,content:m.content})),
+        conversion_trigger:p.conversion_trigger||'', drop_trigger:p.drop_trigger||'',
+        budget:p.budget||'', shopping_for:p.shopping_for||'',
+      })
+    })
+    const evalData = await evalResp.json()
+    if (evalData.status === 'success') results[p.id] = evalData
+  } catch(e) { console.error('Eval error:', e) }
+  renderSimSidebar(); renderChatView(); renderMetricsPanel()
+  renderPersonaGrid(); renderActions()
+}
+
+function addMsg(pid, role, content) {
+  if (!conversations[pid]) conversations[pid] = []
+  conversations[pid].push({role, content, thinking: role==='thinking'})
+}
+function stopAll() { running = false }
+
+// ── LIVE TAB RENDERS ──────────────────────────────────
+function renderSimSidebar() {
+  const sb = document.getElementById('simSidebar')
+  sb.innerHTML = personas.map(p => {
+    const r = results[p.id], isRun = runningId===p.id
+    const cs = r?.conversion_status
+    const icon = isRun ? '<div class="pulse-dot"></div>' : cs ? (CONV_ICONS[cs]||'') : '○'
+    const msgCount = (conversations[p.id]||[]).filter(m=>!m.thinking).length
+    return `<div class="sim-sidebar-item ${selectedId===p.id?'active':''}" onclick="selectPersona(${p.id})">
+      <div style="display:flex;align-items:center;gap:8px">
+        <span style="font-size:12px;width:18px;text-align:center">${icon}</span>
+        <div>
+          <p style="font-size:12px;font-weight:600;color:var(--t1)">${p.name}</p>
+          <p style="font-size:10px;color:var(--t3)">${msgCount} msgs${r?' · '+avg(Object.values(r.scores||{})).toFixed(1):''}</p>
+        </div>
+      </div>
+    </div>`
+  }).join('')
+}
+function selectPersona(id) { selectedId = id; renderSimSidebar(); renderChatView(); renderMetricsPanel() }
+
+function renderChatView() {
+  const p = personas.find(x => x.id === selectedId)
+  if (!p) return
+  const header = document.getElementById('chatHeader')
+  const isRun = runningId === p.id
+  header.innerHTML = `<div class="persona-avatar" style="width:32px;height:32px;font-size:12px">${p.name.charAt(0)}</div>
+    <div><p style="font-size:13px;font-weight:700">${p.name} ${isRun?'đang test':'- '+p.archetype}</p>
+    <p style="font-size:10.5px;color:var(--t3)">${p.age} tuổi · ${p.budget||''}</p></div>
+    ${isRun?'<div class="pulse-dot" style="margin-left:auto"></div>':''}`
+  const area = document.getElementById('chatArea')
+  const msgs = conversations[p.id] || []
+  area.innerHTML = msgs.map(m => {
+    if (m.thinking) return `<div class="msg-thinking"><span class="msg-label">THINKING</span>${m.content}</div>`
+    if (m.role==='system') return `<div style="text-align:center;font-size:11px;color:var(--t3)">${m.content}</div>`
+    return `<div><span class="msg-label" style="text-align:${m.role==='user'?'right':'left'};display:block">${m.role==='user'?p.name:'CHATBOT'}</span>
+      <div class="msg-bubble ${m.role==='user'?'msg-user':'msg-bot'}">${m.content}</div></div>`
+  }).join('')
+  area.scrollTop = area.scrollHeight
+}
+
+function renderMetricsPanel() {
+  const mc = document.getElementById('metricsContent')
+  const p = personas.find(x=>x.id===selectedId)
+  const r = p ? results[p.id] : null
+  if (!r) { mc.innerHTML = '<p style="color:var(--t3);font-size:12px;text-align:center;padding:20px 0">Chưa có dữ liệu</p>'; return }
+  const cs = r.conversion_status, cc = cs==='converted'?'conv-converted':cs==='interested'?'conv-interested':'conv-dropped'
+  const ov = avg(Object.values(r.scores||{}))
+  mc.innerHTML = `
+    <div style="text-align:center;margin-bottom:16px">
+      <span class="conv-badge ${cc}" style="font-size:13px;padding:6px 16px">${CONV_ICONS[cs]||''} ${(cs||'').toUpperCase()}</span>
+    </div>
+    <div style="text-align:center;margin-bottom:14px">
+      <span style="font-size:36px;font-weight:800;color:${scoreColor(ov)}">${ov.toFixed(1)}</span>
+      <span style="font-size:14px;color:var(--t3)">/ 5</span>
+    </div>
+    ${Object.entries(r.scores||{}).map(([k,v]) => `
+      <div style="margin-bottom:10px">
+        <div style="display:flex;justify-content:space-between;margin-bottom:3px">
+          <span style="font-size:11px;color:var(--t2)">${k}</span>
+          <span style="font-size:11px;font-weight:700;color:${scoreColor(v)}">${v.toFixed(1)}</span>
+        </div>
+        <div class="minibar-track"><div class="minibar-fill" style="width:${(v/5)*100}%;background:${scoreColor(v)}"></div></div>
+      </div>
+    `).join('')}
+    ${r.conversion_reason?`<div class="card" style="margin-top:12px;padding:10px 12px"><p style="font-size:10px;font-weight:600;color:var(--t3);margin-bottom:4px">📝 Lý do</p><p style="font-size:11.5px;color:var(--t2);line-height:1.5">${r.conversion_reason}</p></div>`:''}
+    ${r.key_wins?.length?`<div style="margin-top:12px"><p style="font-size:10px;font-weight:600;color:var(--green);margin-bottom:6px">✅ WINS</p>${r.key_wins.map(w=>`<p style="font-size:11px;color:var(--t2);margin-bottom:4px">• ${w}</p>`).join('')}</div>`:''}
+    ${r.key_fails?.length?`<div style="margin-top:10px"><p style="font-size:10px;font-weight:600;color:var(--red);margin-bottom:6px">❌ FAILS</p>${r.key_fails.map(f=>`<p style="font-size:11px;color:var(--t2);margin-bottom:4px">• ${f}</p>`).join('')}</div>`:''}`
+}
+
+// ── REPORT TAB ────────────────────────────────────────
+function renderReport() {
+  const done = personas.filter(p => results[p.id])
+  if (!done.length) { document.getElementById('kpiRow').innerHTML = '<p style="grid-column:1/-1;text-align:center;color:var(--t3);font-size:13px;padding:40px">Chưa có kết quả. Chạy simulation trước.</p>'; return }
+  const convCount = done.filter(p => results[p.id].conversion_status === 'converted').length
+  const intCount = done.filter(p => results[p.id].conversion_status === 'interested').length
+  const dropCount = done.filter(p => results[p.id].conversion_status === 'dropped').length
+  const avgScore = avg(done.map(p => avg(Object.values(results[p.id].scores||{}))))
+  // KPIs
+  document.getElementById('kpiRow').innerHTML = `
+    <div class="kpi-card"><p class="kpi-label">Conversion Rate</p><p class="kpi-value" style="color:var(--green)">${Math.round(convCount/done.length*100)}%</p><p style="font-size:11px;color:var(--t3)">${convCount}/${done.length}</p></div>
+    <div class="kpi-card"><p class="kpi-label">Interest Rate</p><p class="kpi-value" style="color:var(--amber)">${Math.round((convCount+intCount)/done.length*100)}%</p><p style="font-size:11px;color:var(--t3)">${convCount+intCount}/${done.length}</p></div>
+    <div class="kpi-card"><p class="kpi-label">Avg Score</p><p class="kpi-value" style="color:${scoreColor(avgScore)}">${avgScore.toFixed(1)}</p><p style="font-size:11px;color:var(--t3)">/ 5.0</p></div>
+    <div class="kpi-card"><p class="kpi-label">Drop Rate</p><p class="kpi-value" style="color:var(--red)">${Math.round(dropCount/done.length*100)}%</p><p style="font-size:11px;color:var(--t3)">${dropCount}/${done.length}</p></div>`
+  // Funnel
+  const total = done.length
+  document.getElementById('funnelView').innerHTML = [
+    ['Started', total, 'var(--purple)'],
+    ['Engaged', total, 'var(--blue)'],
+    ['Interested', convCount+intCount, 'var(--amber)'],
+    ['Converted', convCount, 'var(--green)'],
+  ].map(([label,count,color]) => {
+    const pct = Math.max((count/total)*100, 8)
+    return `<div class="funnel-stage"><span style="width:80px;font-size:11px;color:var(--t3);font-weight:600">${label}</span>
+      <div class="funnel-bar" style="width:${pct}%;background:${color}">${count}</div></div>`
+  }).join('')
+  // Matrix
+  const scoreKeys = [...new Set(done.flatMap(p => Object.keys(results[p.id].scores||{})))]
+  document.getElementById('matrixTable').innerHTML = `<table class="score-table">
+    <thead><tr><th>Persona</th><th>Status</th>${scoreKeys.map(k=>`<th>${k}</th>`).join('')}<th>Overall</th></tr></thead>
+    <tbody>${done.map(p => {
+      const r = results[p.id], cs = r.conversion_status
+      const cc = cs==='converted'?'conv-converted':cs==='interested'?'conv-interested':'conv-dropped'
+      const ov = avg(Object.values(r.scores||{}))
+      return `<tr style="cursor:pointer" onclick="selectedId=${p.id};switchTab('live')">
+        <td style="display:flex;align-items:center;gap:8px"><div class="persona-avatar" style="width:26px;height:26px;font-size:10px">${p.name.charAt(0)}</div>${p.name}</td>
+        <td><span class="conv-badge ${cc}">${CONV_ICONS[cs]||''} ${cs}</span></td>
+        ${scoreKeys.map(k=>`<td style="color:${scoreColor(r.scores[k]||0)};font-weight:700">${(r.scores[k]||0).toFixed(1)}</td>`).join('')}
+        <td style="color:${scoreColor(ov)};font-weight:800">${ov.toFixed(1)}</td></tr>`
+    }).join('')}</tbody></table>`
+}
+
+// ── SYNTHESIS ─────────────────────────────────────────
+async function runSynthesis() {
+  const done = personas.filter(p => results[p.id])
+  if (!done.length) return
+  switchTab('insights')
+  document.getElementById('insightsContent').innerHTML = '<div style="text-align:center;padding:40px 0"><div class="spinner" style="width:24px;height:24px;border-width:3px;margin-bottom:8px"></div><p style="color:var(--t2);font-size:13px">AI đang phân tích...</p></div>'
+  try {
+    const resp = await fetch('/api/user-simulator/synthesize', {
+      method:'POST', headers:{'Content-Type':'application/json'},
+      body: JSON.stringify({
+        chatbot_prompt: '', system_prompt: '',
+        results: done.map(p => ({
+          persona_name:p.name, archetype:p.archetype, scores:results[p.id].scores,
+          conversion_status:results[p.id].conversion_status||'', conversion_reason:results[p.id].conversion_reason||'',
+          key_wins:results[p.id].key_wins||[], key_fails:results[p.id].key_fails||[],
+        }))
+      })
+    })
+    const d = await resp.json()
+    if (d.status === 'success') { synthesis = d; renderInsights(d) }
+    else throw new Error(d.message||'Fail')
+  } catch(e) { document.getElementById('insightsContent').innerHTML = `<div style="padding:20px;color:var(--red)">Lỗi: ${e.message}</div>` }
+}
+function renderInsights(d) {
+  const ic = document.getElementById('insightsContent')
+  ic.innerHTML = `
+    <div class="card" style="margin-bottom:14px;background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.2)">
+      <p class="insight-label" style="color:var(--purple)">📋 Executive Summary</p>
+      <p style="font-size:13px;color:var(--t1);line-height:1.6">${d.summary||'N/A'}</p>
+    </div>
+    ${d.systemic_issues?.length?`<div class="card" style="margin-bottom:14px">
+      <p class="insight-label" style="color:var(--red)">⚠️ Systemic Issues</p>
+      ${d.systemic_issues.map((s,i)=>`<p style="font-size:12.5px;color:var(--t2);margin-bottom:6px;line-height:1.5">${i+1}. ${s}</p>`).join('')}
+    </div>`:''}
+    ${d.prompt_fixes?.length?`<div class="card" style="margin-bottom:14px">
+      <p class="insight-label" style="color:var(--green)">🔧 Prompt Fixes</p>
+      ${d.prompt_fixes.map(f=>`<div style="background:rgba(16,185,129,.06);border-radius:8px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(16,185,129,.15)"><p style="font-size:12px;color:var(--t1);line-height:1.5">${f}</p></div>`).join('')}
+    </div>`:''}`
+}
+
+// ── PROGRESS BAR ──────────────────────────────────────
+function showProgress(cur, total) {
+  const bar = document.getElementById('progressBar'); bar.style.display = 'flex'
+  document.getElementById('progressLabel').textContent = cur+'/'+total+' personas'
+  document.getElementById('progressFill').style.width = (total?cur/total*100:0)+'%'
+  if (simStartTime) {
+    const s = Math.floor((Date.now()-simStartTime)/1000)
+    document.getElementById('progressTime').textContent = Math.floor(s/60)+':'+String(s%60).padStart(2,'0')
+  }
+}
+function hideProgress() { document.getElementById('progressBar').style.display = 'none' }
+
+// ── RENDER ALL ────────────────────────────────────────
+function renderAll() { renderTabs(); renderActions(); renderPersonaGrid() }
+renderAll()

backend/static/js/user-insight-data.js

 // ═══════════════════════════════════════════
-// MOCK DATA — Canifa CDP Users
+// USER INSIGHT DATA — Mock + Real API
+// Loads from /api/user-insights/all first,
+// falls back to MOCK_USERS if API unavailable
 // ═══════════════════════════════════════════
-const USERS = [
+
+let USERS = [];
+let DATA_SOURCE = 'mock'; // 'api' or 'mock'
+
+const MOCK_USERS = [
   {
     id:1, name:"Nguyễn Thị Lan", email:"lan.nguyen@gmail.com", phone:"+84 912 345 678",
-    userId:"CNF-20240156", gender:"Nữ", avatar_color:"#6366F1",
+    userId:"CNF-20240156", gender:"Nữ", age:35, dob:"1991-03-15", avatar_color:"#6366F1",
+    location:"Quận Cầu Giấy, Hà Nội", membership:"VIP Gold", join_date:"2024-01-12",
     channels:["Zalo OA","Web","Email"],
     aov:485000, total_orders:12, total_spent:5820000,
     health_score:82,
     rfm:{recency:90, frequency:75, monetary:68},
-    predictions:{next_purchase:"Quần jean nữ",next_purchase_conf:78,churn_risk:12,clv_6m:2400000,next_visit_days:3,
+    // Chatbot insight (6-layer từ AI)
+    chatbot_insight:{
+      USER:"Nữ, 35 tuổi, mẹ bỉm sữa. Gu: basic, thoải mái, ưu tiên cotton organic.",
+      TARGET:"Con trai 5 tuổi, thích màu xanh navy và đỏ. Size 110-120cm.",
+      GOAL:"Mua quần áo trẻ em cho con đi học + đi chơi. Dịp: đầu năm học mới.",
+      CONSTRAINS:"Budget 300k-600k/bộ. Chỉ muốn cotton 100%. Tránh polyester. Size 5T-6T.",
+      LATEST_PRODUCT_INTEREST:"Áo thun bé trai Basic Cotton [6TS24B005] - Xanh navy",
+      LAST_ACTION:"Bot đã gợi ý 3 combo áo+quần bé trai dưới 500k, khách hỏi thêm về chính sách đổi size.",
+      SUMMARY_HISTORY:"Khách hỏi về áo thun bé trai → bot gợi ý → khách compare giá → hỏi size chart → hỏi combo deal → hỏi đổi trả"
+    },
+    predictions:{next_purchase:"Quần jean bé trai",next_purchase_conf:78,churn_risk:12,clv_6m:2400000,next_visit_days:3,
       recommended_collab:[
-        {name:"Quần Jean Slim Nữ",icon:"👖",reason:"Đã xem 3 lần, chưa mua",conf:85},
-        {name:"Set Áo + Quần Combo",icon:"👚",reason:"Hay mua combo giảm giá",conf:72},
-        {name:"Túi tote canvas",icon:"👜",reason:"Cross-sell phụ kiện",conf:58}
+        {name:"Quần Jean Slim Bé Trai",icon:"👖",reason:"Đã xem 3 lần combo với áo thun",conf:85},
+        {name:"Set Áo + Quần Combo",icon:"👚",reason:"Hay hỏi combo giảm giá",conf:72},
+        {name:"Balo trẻ em",icon:"🎒",reason:"Cross-sell phụ kiện trẻ em",conf:58}
       ],
       recommended_basket:[
-        {name:"Áo khoác jean",icon:"🧥",reason:"75% mua jean cũng mua",conf:75},
-        {name:"Thắt lưng da nữ",icon:"🪢",reason:"Mua kèm 40% đơn jean",conf:52},
-        {name:"Khăn choàng cổ",icon:"🧣",reason:"Phụ kiện mùa đông",conf:45}
+        {name:"Áo khoác gió bé trai",icon:"🧥",reason:"75% mua quần áo cũng mua",conf:75},
+        {name:"Tất cotton trẻ em x3",icon:"🧦",reason:"Add-on phổ biến đơn trẻ em",conf:52},
+        {name:"Khẩu trang trẻ em",icon:"😷",reason:"Cross-sell tiện ích",conf:45}
       ],
       recommended_trending:[
         {name:"Váy midi hoa nhí",icon:"👗",reason:"#1 trending nữ 25-35",conf:80},
@@ -29,43 +46,51 @@ const USERS = [
     email_metrics:{delivered:42,opens:24,open_rate:57,click_rate:14,conversion_rate:8.5},
     segments:{purchase_likelihood:"High",discount_affinity:"Medium",customer_value:"VIP",lifecycle:"Active Customer"},
     top_categories:[
-      {name:"Áo thun nữ",pct:30,color:"#6366F1"},{name:"Váy đầm",pct:22,color:"#F59E0B"},
+      {name:"Trẻ em bé trai",pct:35,color:"#6366F1"},{name:"Áo thun nữ",pct:22,color:"#F59E0B"},
       {name:"Quần jean",pct:18,color:"#10B981"},{name:"Áo khoác",pct:15,color:"#EF4444"},
-      {name:"Phụ kiện",pct:15,color:"#8B5CF6"}
+      {name:"Phụ kiện",pct:10,color:"#8B5CF6"}
     ],
-    last_attrs:{"Last Seen":"canifa.com/nu","Last Email Open":"Summer Sale 2026","Last Visited Category":"Áo thun nữ","Last Abandoned Cart":"320,000đ","Last Visited Product":"Áo thun Basic Cotton"},
-    products:{last_visited:{name:"Áo thun Basic Cotton",price:"249,000đ",icon:"👕"},last_purchased:{name:"Váy hoa nhí cổ V",price:"599,000đ",icon:"👗"},last_abandoned:{name:"Quần jean slim fit",price:"459,000đ",icon:"👖"}},
+    last_attrs:{"Last Seen":"canifa.com/tre-em/be-trai","Last Email Open":"Summer Sale 2026","Last Visited Category":"Áo thun bé trai","Last Abandoned Cart":"320,000đ","Last Visited Product":"Áo thun Basic Cotton Bé Trai"},
+    products:{last_visited:{name:"Áo thun Basic Cotton Bé Trai",price:"249,000đ",icon:"👕"},last_purchased:{name:"Set quần áo bé trai",price:"459,000đ",icon:"👖"},last_abandoned:{name:"Combo 3 áo thun bé trai",price:"320,000đ",icon:"👕"}},
     mobile:{app_opened:8,push_opened:12,inapp_seen:5,inapp_from_push:3},
     journey:{entered:9,completed:6},
     purchase_timeline:[
-      {date:"22/03/2026",name:"Áo thun Basic Cotton x2",price:"498,000đ",icon:"👕",channel:"Web"},
-      {date:"15/03/2026",name:"Váy hoa nhí cổ V",price:"599,000đ",icon:"👗",channel:"Zalo"},
-      {date:"28/02/2026",name:"Quần jean skinny nữ",price:"459,000đ",icon:"👖",channel:"Web"},
-      {date:"14/02/2026",name:"Set quà Valentine (áo+túi)",price:"750,000đ",icon:"🎁",channel:"Web"},
-      {date:"20/01/2026",name:"Áo khoác dạ nữ",price:"890,000đ",icon:"🧥",channel:"Zalo"}
+      {date:"22/03/2026",name:"Áo thun bé trai x2",price:"498,000đ",icon:"👕",channel:"Web"},
+      {date:"15/03/2026",name:"Set quần áo bé trai",price:"459,000đ",icon:"👖",channel:"Zalo"},
+      {date:"28/02/2026",name:"Quần jean bé trai skinny",price:"359,000đ",icon:"👖",channel:"Web"},
+      {date:"14/02/2026",name:"Áo khoác gió bé trai",price:"450,000đ",icon:"🧥",channel:"Web"},
+      {date:"20/01/2026",name:"Áo len cổ lọ bé trai",price:"390,000đ",icon:"🧶",channel:"Zalo"}
     ],
     next_best_actions:[
-      {icon:"📧",title:"Gửi email giới thiệu BST Jean mới",desc:"Conf 85% — dựa trên browsing behavior + abandoned cart jean",urgency:"urgent"},
-      {icon:"🎁",title:"Push combo 'Mua 2 giảm 15%'",desc:"Phù hợp hành vi mua combo, tăng AOV",urgency:"medium"},
-      {icon:"📱",title:"Nhắc nhở giỏ hàng bỏ quên (320k)",desc:"Abandoned 2 ngày trước, tỉ lệ recovery 40%",urgency:"urgent"}
-    ],
-    engagement_heatmap:[
-      [0,1,2,0,1,3,2],[1,2,3,1,2,4,3],[0,0,1,0,0,2,1],[0,1,0,1,0,1,0]
+      {icon:"📧",title:"Gửi email BST Back-to-School",desc:"Conf 85% — mua đồ cho con đi học, timing cuối tháng 8",urgency:"urgent"},
+      {icon:"🎁",title:"Push combo 'Mua 2 giảm 15%' trẻ em",desc:"Phù hợp hành vi mua combo, tăng AOV",urgency:"medium"},
+      {icon:"📱",title:"Nhắc cart bỏ quên (320k combo)",desc:"Abandoned 2 ngày trước, recovery rate 40%",urgency:"urgent"}
     ],
+    engagement_heatmap:[[0,1,2,0,1,3,2],[1,2,3,1,2,4,3],[0,0,1,0,0,2,1],[0,1,0,1,0,1,0]],
     chatbot_history:[
-      {role:"user",text:"Cho mình xem áo thun cotton nữ màu trắng size M"},
-      {role:"bot",text:"Dạ chị ơi, em có Áo Thun Basic Cotton Nữ (6TS24S003) màu trắng, size M còn hàng. Giá 249,000đ."},
-      {role:"user",text:"Có khuyến mãi gì không em?"},
-      {role:"bot",text:"Hiện tại sản phẩm đang có chương trình Mua 2 giảm 15% chị ạ!"}
+      {role:"user",text:"Cho mình xem áo thun cotton cho bé trai 5 tuổi"},
+      {role:"bot",text:"Dạ chị ơi, em có nhiều mẫu áo thun cotton bé trai size 5T (110cm). Giá từ 149k-249k. Chị muốn xem màu nào ạ?"},
+      {role:"user",text:"Xanh navy hoặc đỏ, có combo nào giảm giá không?"},
+      {role:"bot",text:"Dạ có Combo 3 áo thun Basic Cotton bé trai chỉ 320k (tiết kiệm 30%) ạ! Có xanh navy, đỏ và trắng. Chị muốn em check size 5T không?"}
     ]
   },
   {
     id:2, name:"Trần Văn Minh", email:"minh.tran@outlook.com", phone:"+84 903 456 789",
-    userId:"CNF-20240089", gender:"Nam", avatar_color:"#059669",
+    userId:"CNF-20240089", gender:"Nam", age:42, dob:"1984-07-22", avatar_color:"#059669",
+    location:"Quận 7, TP HCM", membership:"Regular", join_date:"2024-03-05",
     channels:["Zalo OA","Web"],
     aov:720000, total_orders:8, total_spent:5760000,
     health_score:61,
     rfm:{recency:55, frequency:50, monetary:72},
+    chatbot_insight:{
+      USER:"Nam, 42 tuổi, IT manager. Gu: smart casual, công sở, không quá formal.",
+      TARGET:"Bản thân (đi làm) + Vợ (35 tuổi, mua quà).",
+      GOAL:"Tìm áo sơ mi đi làm + quà sinh nhật cho vợ.",
+      CONSTRAINS:"Budget sơ mi 400k-600k. Quà vợ 500k-1tr. Size M nam, size S nữ. Không thích hoa văn quá nhiều.",
+      LATEST_PRODUCT_INTEREST:"Sơ mi Oxford Slim [8SM24S012] - Trắng/xanh nhạt",
+      LAST_ACTION:"Bot đã gợi ý 2 sơ mi + set quà cho vợ (váy + khăn). Khách hỏi về gói quà tặng.",
+      SUMMARY_HISTORY:"Hỏi sơ mi công sở → bot gợi ý Oxford → khách OK → chuyển sang hỏi quà vợ → bot gợi ý váy + phụ kiện"
+    },
     predictions:{next_purchase:"Áo sơ mi",next_purchase_conf:62,churn_risk:25,clv_6m:1800000,next_visit_days:7,
       recommended_collab:[{name:"Sơ mi Oxford Slim",icon:"👔",reason:"Mua sơ mi mỗi quý",conf:70},{name:"Thắt lưng da",icon:"🪢",reason:"Cross-sell phụ kiện nam",conf:55},{name:"Polo Dry-fit",icon:"👕",reason:"Tương tự SP đã mua",conf:48}],
       recommended_basket:[{name:"Quần âu slim",icon:"👖",reason:"Kèm sơ mi 65% đơn",conf:68},{name:"Tất cổ thấp",icon:"🧦",reason:"Add-on phổ biến",conf:42},{name:"Nước hoa mini",icon:"🧴",reason:"Gift set combo",conf:35}],
@@ -73,32 +98,42 @@ const USERS = [
     },
     email_metrics:{delivered:28,opens:10,open_rate:36,click_rate:7,conversion_rate:3.2},
     segments:{purchase_likelihood:"Medium",discount_affinity:"Low",customer_value:"Regular",lifecycle:"Active Customer"},
-    top_categories:[{name:"Polo nam",pct:35,color:"#059669"},{name:"Quần kaki",pct:25,color:"#6366F1"},{name:"Áo sơ mi",pct:20,color:"#F59E0B"},{name:"Giày dép",pct:12,color:"#EF4444"},{name:"Khác",pct:8,color:"#8B5CF6"}],
-    last_attrs:{"Last Seen":"canifa.com/nam","Last Email Open":"New Arrivals Men","Last Visited Category":"Polo nam","Last Abandoned Cart":"—","Last Visited Product":"Polo Pique Classic"},
-    products:{last_visited:{name:"Polo Pique Classic",price:"399,000đ",icon:"👔"},last_purchased:{name:"Quần kaki slim",price:"549,000đ",icon:"👖"},last_abandoned:{name:"—",price:"—",icon:"📦"}},
+    top_categories:[{name:"Sơ mi nam",pct:35,color:"#059669"},{name:"Quần âu",pct:25,color:"#6366F1"},{name:"Polo nam",pct:20,color:"#F59E0B"},{name:"Giày dép",pct:12,color:"#EF4444"},{name:"Quà tặng",pct:8,color:"#8B5CF6"}],
+    last_attrs:{"Last Seen":"canifa.com/nam/so-mi","Last Email Open":"New Arrivals Men","Last Visited Category":"Sơ mi nam","Last Abandoned Cart":"—","Last Visited Product":"Sơ mi Oxford Slim"},
+    products:{last_visited:{name:"Sơ mi Oxford Slim",price:"499,000đ",icon:"👔"},last_purchased:{name:"Quần kaki slim",price:"549,000đ",icon:"👖"},last_abandoned:{name:"—",price:"—",icon:"📦"}},
     mobile:{app_opened:3,push_opened:5,inapp_seen:2,inapp_from_push:1},
     journey:{entered:4,completed:3},
     purchase_timeline:[
-      {date:"18/03/2026",name:"Polo Pique Classic x1",price:"399,000đ",icon:"👔",channel:"Web"},
+      {date:"18/03/2026",name:"Sơ mi Oxford Slim x2",price:"998,000đ",icon:"👔",channel:"Web"},
       {date:"02/03/2026",name:"Quần kaki slim",price:"549,000đ",icon:"👖",channel:"Web"},
       {date:"15/01/2026",name:"Sơ mi Oxford trắng",price:"499,000đ",icon:"👔",channel:"Zalo"}
     ],
     next_best_actions:[
       {icon:"📧",title:"Email BST Polo mùa hè mới",desc:"Conf 70% — top category, thời điểm mua quý",urgency:"medium"},
-      {icon:"🔔",title:"Push thông báo New Arrivals",desc:"Open rate push cao hơn email 2x",urgency:"low"},
+      {icon:"🎁",title:"Gợi ý set quà cho vợ",desc:"Đã hỏi về quà sinh nhật, tạo combo voucher gift",urgency:"urgent"},
       {icon:"🎯",title:"Upsell sơ mi premium tier",desc:"AOV cao, có thể nâng phân khúc",urgency:"medium"}
     ],
     engagement_heatmap:[[0,0,1,0,0,1,0],[0,1,1,1,0,2,1],[0,0,0,0,0,1,0],[0,0,0,0,0,0,0]],
-    chatbot_history:[{role:"user",text:"Polo nam có mấy màu?"},{role:"bot",text:"Dạ anh, dòng Polo Pique Classic có 6 màu: Trắng, Đen, Navy, Xanh rêu, Xám nhạt và Hồng pastel."}]
+    chatbot_history:[{role:"user",text:"Sơ mi nam công sở, size M, budget 500k?"},{role:"bot",text:"Dạ anh, em gợi ý Sơ mi Oxford Slim (499k) và Sơ mi Linen (459k). Cả 2 đều có size M, phù hợp đi làm ạ!"}]
   },
   {
     id:3, name:"Lê Phương Anh", email:"phuonganh.le@yahoo.com", phone:"+84 987 654 321",
-    userId:"CNF-20250012", gender:"Nữ", avatar_color:"#EC4899",
+    userId:"CNF-20250012", gender:"Nữ", age:28, dob:"1998-12-01", avatar_color:"#EC4899",
+    location:"Quận Hoàn Kiếm, Hà Nội", membership:"VIP Platinum", join_date:"2025-01-03",
     channels:["Zalo OA","Web","Email","SMS"],
     aov:380000, total_orders:22, total_spent:8360000,
     health_score:95,
     rfm:{recency:95, frequency:92, monetary:78},
-    predictions:{next_purchase:"Đồ mặc nhà",next_purchase_conf:91,churn_risk:5,clv_6m:3200000,next_visit_days:1,
+    chatbot_insight:{
+      USER:"Nữ, 28 tuổi, designer freelance. Gu: minimalist, neutral tones, oversized fit.",
+      TARGET:"Bản thân. Thích loungewear & đồ mặc nhà cao cấp.",
+      GOAL:"Mua set pyjama lụa + đồ WFH thoải mái. Dịp: tự thưởng cuối tháng.",
+      CONSTRAINS:"Budget 300k-500k/set. Chỉ muốn neutral colors (beige, trắng, xám). Size S. Không thích họa tiết cartoon.",
+      LATEST_PRODUCT_INTEREST:"Set Pyjama Lụa [7PJ24W003] - Beige",
+      LAST_ACTION:"Bot gửi link 3 set pyjama lụa neutral. Khách add to cart set beige size S.",
+      SUMMARY_HISTORY:"Hỏi đồ mặc nhà → bot gợi ý cotton → khách muốn lụa → bot show 3 options → khách chọn beige → add cart → hỏi free ship"
+    },
+    predictions:{next_purchase:"Đồ mặc nhà lụa",next_purchase_conf:91,churn_risk:5,clv_6m:3200000,next_visit_days:1,
       recommended_collab:[{name:"Set Pyjama Lụa Mới",icon:"👚",reason:"Loyal buyer, mua set mỗi tháng",conf:92},{name:"Áo len oversized",icon:"🧶",reason:"Top category #2",conf:78},{name:"Quần legging fleece",icon:"🩳",reason:"Mùa đông sắp tới",conf:65}],
       recommended_basket:[{name:"Dép lông trong nhà",icon:"🩴",reason:"Mua kèm pyjama 55%",conf:60},{name:"Bộ chăn ga cotton",icon:"🛏️",reason:"Bundle deal đồ nhà",conf:48},{name:"Nến thơm",icon:"🕯️",reason:"Lifestyle add-on",conf:38}],
       recommended_trending:[{name:"Set loungewear modal",icon:"👚",reason:"#1 trending đồ nhà",conf:88},{name:"Cardigan len mỏng",icon:"🧶",reason:"Rising +150% MoM",conf:70},{name:"Áo hoodie oversize",icon:"🧥",reason:"Hot item Gen Z",conf:55}]
@@ -106,13 +141,13 @@ const USERS = [
     email_metrics:{delivered:68,opens:45,open_rate:66,click_rate:22,conversion_rate:14.7},
     segments:{purchase_likelihood:"High",discount_affinity:"High",customer_value:"VIP",lifecycle:"Loyal Customer"},
     top_categories:[{name:"Đồ mặc nhà",pct:28,color:"#EC4899"},{name:"Áo len",pct:22,color:"#6366F1"},{name:"Quần legging",pct:20,color:"#10B981"},{name:"Áo thun",pct:18,color:"#F59E0B"},{name:"Khác",pct:12,color:"#8B5CF6"}],
-    last_attrs:{"Last Seen":"canifa.com/nu/do-mac-nha","Last Email Open":"Flash Sale Weekend","Last Visited Category":"Đồ mặc nhà","Last Abandoned Cart":"185,000đ","Last Visited Product":"Set Pyjama Lụa"},
-    products:{last_visited:{name:"Set Pyjama Lụa",price:"450,000đ",icon:"👚"},last_purchased:{name:"Áo len cổ lọ",price:"399,000đ",icon:"🧶"},last_abandoned:{name:"Quần legging thể thao",price:"185,000đ",icon:"🩳"}},
+    last_attrs:{"Last Seen":"canifa.com/nu/do-mac-nha","Last Email Open":"Flash Sale Weekend","Last Visited Category":"Đồ mặc nhà","Last Abandoned Cart":"450,000đ","Last Visited Product":"Set Pyjama Lụa Beige"},
+    products:{last_visited:{name:"Set Pyjama Lụa Beige",price:"450,000đ",icon:"👚"},last_purchased:{name:"Áo len cổ lọ oversized",price:"399,000đ",icon:"🧶"},last_abandoned:{name:"Set Pyjama Lụa Beige",price:"450,000đ",icon:"👚"}},
     mobile:{app_opened:15,push_opened:22,inapp_seen:11,inapp_from_push:8},
     journey:{entered:14,completed:11},
     purchase_timeline:[
       {date:"23/03/2026",name:"Set Pyjama Cotton",price:"279,000đ",icon:"👚",channel:"Email"},
-      {date:"20/03/2026",name:"Áo len cổ lọ",price:"399,000đ",icon:"🧶",channel:"Web"},
+      {date:"20/03/2026",name:"Áo len cổ lọ oversized",price:"399,000đ",icon:"🧶",channel:"Web"},
       {date:"10/03/2026",name:"Quần legging x2",price:"370,000đ",icon:"🩳",channel:"SMS"},
       {date:"28/02/2026",name:"Set Pyjama Lụa",price:"450,000đ",icon:"👚",channel:"Zalo"},
       {date:"14/02/2026",name:"Áo thun oversize x3",price:"447,000đ",icon:"👕",channel:"Web"},
@@ -121,19 +156,29 @@ const USERS = [
     next_best_actions:[
       {icon:"⭐",title:"Nâng hạng VIP Platinum",desc:"Chỉ còn 1.6M nữa — 22 đơn trong 3 tháng",urgency:"medium"},
       {icon:"📧",title:"Email early access BST mới",desc:"Loyal customer — cho xem trước 24h",urgency:"low"},
-      {icon:"🎁",title:"Tặng voucher sinh nhật 01/12",desc:"Auto-trigger voucher 150k, còn 8 tháng",urgency:"low"}
+      {icon:"🛒",title:"Nhắc cart Pyjama Lụa Beige (450k)",desc:"Added to cart 1 ngày trước, chưa thanh toán",urgency:"urgent"}
     ],
     engagement_heatmap:[[2,3,4,2,3,5,4],[3,4,5,3,4,6,5],[1,2,3,1,2,4,3],[1,1,2,1,1,2,1]],
-    chatbot_history:[{role:"user",text:"Có set đồ mặc nhà nào đang sale không?"},{role:"bot",text:"Dạ chị ơi! Set Pyjama Cotton giảm 30% còn 279,000đ và set Pyjama Lụa giảm 20% còn 360,000đ ạ."},{role:"user",text:"Lụa nhé, còn size S không?"},{role:"bot",text:"Dạ set Pyjama Lụa size S còn 3 bộ (Hồng pastel và Xanh mint). Free ship cho đơn từ 300k chị ạ!"}]
+    chatbot_history:[{role:"user",text:"Có set đồ mặc nhà nào đang sale không?"},{role:"bot",text:"Dạ chị ơi! Set Pyjama Cotton giảm 30% còn 279,000đ và set Pyjama Lụa giảm 20% còn 360,000đ ạ."},{role:"user",text:"Lụa nhé, còn size S không?"},{role:"bot",text:"Dạ set Pyjama Lụa size S còn 3 bộ (Beige và Xám nhạt). Free ship cho đơn từ 300k chị nhé!"}]
   },
   {
-    id:4, name:"Phạm Quốc Hùng", email:"hung.pham@canifa.vn", phone:"+84 911 222 333",
-    userId:"CNF-20230445", gender:"Nam", avatar_color:"#D97706",
+    id:4, name:"Phạm Quốc Hùng", email:"hung.pham@company.vn", phone:"+84 911 222 333",
+    userId:"CNF-20230445", gender:"Nam", age:38, dob:"1988-05-10", avatar_color:"#D97706",
+    location:"Quận Bình Thạnh, TP HCM", membership:"Premium", join_date:"2023-04-15",
     channels:["Web"],
     aov:1200000, total_orders:5, total_spent:6000000,
     health_score:35,
     rfm:{recency:25, frequency:30, monetary:85},
-    predictions:{next_purchase:"Áo khoác",next_purchase_conf:35,churn_risk:68,clv_6m:800000,next_visit_days:21,
+    chatbot_insight:{
+      USER:"Nam, 38 tuổi, giám đốc kinh doanh. Gu: premium, formal, thích brand cao cấp.",
+      TARGET:"Bản thân (đi meeting, event).",
+      GOAL:"Tìm blazer wool cho mùa đông, cần sang trọng.",
+      CONSTRAINS:"Budget 1tr-2tr. Size L. Chỉ muốn màu tối (đen, navy, charcoal). Không muốn synthetic fabric.",
+      LATEST_PRODUCT_INTEREST:"Áo Blazer Wool [8BL24W001] - Navy",
+      LAST_ACTION:"Bot gợi ý Blazer Wool + quần âu matching. Khách abandoned cart 2 lần.",
+      SUMMARY_HISTORY:"Hỏi blazer premium → bot gợi ý → khách add cart → abandoned → quay lại hỏi → abandoned lần 2"
+    },
+    predictions:{next_purchase:"Áo khoác blazer",next_purchase_conf:35,churn_risk:68,clv_6m:800000,next_visit_days:21,
       recommended_collab:[{name:"Áo Blazer Wool",icon:"🧥",reason:"Abandoned cart x2",conf:60},{name:"Sơ mi premium",icon:"👔",reason:"Phân khúc cao cấp",conf:45},{name:"Gift card Canifa",icon:"🎁",reason:"Win-back campaign",conf:40}],
       recommended_basket:[{name:"Quần âu wool blend",icon:"👖",reason:"Kèm blazer 70% đơn",conf:62},{name:"Cà vạt lụa",icon:"👔",reason:"Business set",conf:45},{name:"Giày leather",icon:"👞",reason:"Premium bundle",conf:38}],
       recommended_trending:[{name:"Áo khoác bomber",icon:"🧥",reason:"Trending nam 30+",conf:50},{name:"Polo premium pima",icon:"👔",reason:"Premium tier bestseller",conf:42},{name:"Belt da Ý",icon:"🪢",reason:"Rising luxury segment",conf:35}]
@@ -141,8 +186,8 @@ const USERS = [
     email_metrics:{delivered:15,opens:3,open_rate:20,click_rate:3,conversion_rate:1.5},
     segments:{purchase_likelihood:"Low",discount_affinity:"Low",customer_value:"Premium",lifecycle:"At-Risk"},
     top_categories:[{name:"Áo khoác nam",pct:40,color:"#D97706"},{name:"Sơ mi",pct:30,color:"#6366F1"},{name:"Quần âu",pct:20,color:"#10B981"},{name:"Khác",pct:10,color:"#EF4444"}],
-    last_attrs:{"Last Seen":"canifa.com/nam/ao-khoac","Last Email Open":"—","Last Visited Category":"Áo khoác nam","Last Abandoned Cart":"1,290,000đ","Last Visited Product":"Áo Blazer Wool"},
-    products:{last_visited:{name:"Áo Blazer Wool",price:"1,290,000đ",icon:"🧥"},last_purchased:{name:"Sơ mi Oxford",price:"499,000đ",icon:"👔"},last_abandoned:{name:"Áo Blazer Wool",price:"1,290,000đ",icon:"🧥"}},
+    last_attrs:{"Last Seen":"canifa.com/nam/ao-khoac","Last Email Open":"—","Last Visited Category":"Áo khoác nam","Last Abandoned Cart":"1,290,000đ","Last Visited Product":"Áo Blazer Wool Navy"},
+    products:{last_visited:{name:"Áo Blazer Wool Navy",price:"1,290,000đ",icon:"🧥"},last_purchased:{name:"Sơ mi Oxford",price:"499,000đ",icon:"👔"},last_abandoned:{name:"Áo Blazer Wool Navy",price:"1,290,000đ",icon:"🧥"}},
     mobile:{app_opened:1,push_opened:0,inapp_seen:0,inapp_from_push:0},
     journey:{entered:2,completed:1},
     purchase_timeline:[
@@ -155,15 +200,25 @@ const USERS = [
       {icon:"📞",title:"Gọi điện chăm sóc VIP",desc:"Premium tier — personal touch có thể giữ chân",urgency:"medium"}
     ],
     engagement_heatmap:[[0,0,0,0,0,0,0],[0,0,0,0,0,1,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0]],
-    chatbot_history:[]
+    chatbot_history:[{role:"user",text:"Blazer wool nam, size L, navy?"},{role:"bot",text:"Dạ anh, em có Blazer Wool Slim Fit (1,290,000đ) màu Navy, size L còn hàng. Chất wool blend 70%, lót viscose. Phù hợp đi meeting ạ!"}]
   },
   {
     id:5, name:"Đỗ Thanh Hà", email:"ha.do@gmail.com", phone:"+84 978 111 222",
-    userId:"CNF-20260034", gender:"Nữ", avatar_color:"#7C3AED",
-    channels:["Zalo OA","Web","Email"],
+    userId:"CNF-20260034", gender:"Nữ", age:20, dob:"2006-06-18", avatar_color:"#7C3AED",
+    location:"Quận Đống Đa, Hà Nội", membership:"New Member", join_date:"2026-03-01",
+    channels:["Zalo OA","Web","TikTok"],
     aov:295000, total_orders:3, total_spent:885000,
     health_score:72,
     rfm:{recency:80, frequency:35, monetary:30},
+    chatbot_insight:{
+      USER:"Nữ, 20 tuổi, sinh viên ĐH Kinh tế. Gu: trendy, GenZ, thích crop top & Y2K.",
+      TARGET:"Bản thân, mua đi chơi + đi học.",
+      GOAL:"Tìm áo crop top trendy, giá rẻ. Hay mua theo trend TikTok.",
+      CONSTRAINS:"Budget dưới 300k. Size XS/S. Thích pastel & màu neon. Ghét basic boring.",
+      LATEST_PRODUCT_INTEREST:"Crop Top Ribbed [7CT24S005] - Hồng pastel",
+      LAST_ACTION:"Bot show 3 crop top dưới 200k. Khách thích Ribbed nhưng chưa mua vì hết pastel size XS.",
+      SUMMARY_HISTORY:"Hỏi crop top trendy → bot list 3 options → khách thích ribbed → hết size → bot gợi ý size S → khách cân nhắc"
+    },
     predictions:{next_purchase:"Áo crop top",next_purchase_conf:82,churn_risk:18,clv_6m:1500000,next_visit_days:2,
       recommended_collab:[{name:"Crop Top Ribbed",icon:"👕",reason:"Abandoned cart, giá rẻ",conf:88},{name:"Quần short denim",icon:"🩳",reason:"Combo mùa hè",conf:72},{name:"Kính mát",icon:"🕶️",reason:"Phụ kiện Gen Z",conf:50}],
       recommended_basket:[{name:"Sandal quai chéo",icon:"👡",reason:"Combo mùa hè 60%",conf:65},{name:"Túi đeo chéo mini",icon:"👜",reason:"Cross-sell Gen Z",conf:55},{name:"Nón bucket",icon:"🧢",reason:"Add-on trending",conf:45}],
@@ -172,54 +227,115 @@ const USERS = [
     email_metrics:{delivered:8,opens:6,open_rate:75,click_rate:25,conversion_rate:12.0},
     segments:{purchase_likelihood:"High",discount_affinity:"High",customer_value:"New",lifecycle:"New Customer"},
     top_categories:[{name:"Áo crop top",pct:40,color:"#7C3AED"},{name:"Quần short",pct:30,color:"#F59E0B"},{name:"Phụ kiện",pct:18,color:"#10B981"},{name:"Khác",pct:12,color:"#EF4444"}],
-    last_attrs:{"Last Seen":"canifa.com/nu/ao-croptop","Last Email Open":"Welcome Series #2","Last Visited Category":"Áo crop top","Last Abandoned Cart":"195,000đ","Last Visited Product":"Crop Top Ribbed"},
-    products:{last_visited:{name:"Crop Top Ribbed",price:"195,000đ",icon:"👕"},last_purchased:{name:"Quần short kaki",price:"299,000đ",icon:"🩳"},last_abandoned:{name:"Crop Top Ribbed",price:"195,000đ",icon:"👕"}},
+    last_attrs:{"Last Seen":"canifa.com/nu/ao-croptop","Last Email Open":"Welcome Series #2","Last Visited Category":"Áo crop top","Last Abandoned Cart":"195,000đ","Last Visited Product":"Crop Top Ribbed Hồng"},
+    products:{last_visited:{name:"Crop Top Ribbed Hồng",price:"195,000đ",icon:"👕"},last_purchased:{name:"Quần short kaki",price:"299,000đ",icon:"🩳"},last_abandoned:{name:"Crop Top Ribbed Hồng",price:"195,000đ",icon:"👕"}},
     mobile:{app_opened:12,push_opened:8,inapp_seen:6,inapp_from_push:4},
     journey:{entered:3,completed:2},
     purchase_timeline:[
       {date:"21/03/2026",name:"Quần short kaki",price:"299,000đ",icon:"🩳",channel:"Web"},
-      {date:"15/03/2026",name:"Áo crop top basic x2",price:"298,000đ",icon:"👕",channel:"Zalo"},
+      {date:"15/03/2026",name:"Áo crop top basic x2",price:"298,000đ",icon:"👕",channel:"TikTok Shop"},
       {date:"10/03/2026",name:"Nón bucket cotton",price:"149,000đ",icon:"🧢",channel:"Web"}
     ],
     next_best_actions:[
-      {icon:"🛒",title:"Nhắc abandoned cart Crop Top 195k",desc:"Viewed 5x, abandoned 1x — very hot lead",urgency:"urgent"},
-      {icon:"🎉",title:"Gửi Welcome Series #3",desc:"New customer — nurture với content mùa hè",urgency:"low"},
-      {icon:"📱",title:"Push notification flash sale",desc:"High mobile engagement — push > email",urgency:"medium"}
+      {icon:"🛒",title:"Nhắc cart Crop Top Ribbed 195k",desc:"Viewed 5x, abandoned 1x — very hot lead",urgency:"urgent"},
+      {icon:"📱",title:"Push TikTok sale notification",desc:"High TikTok engagement — push > email cho GenZ",urgency:"medium"},
+      {icon:"🎉",title:"Gửi Welcome voucher 10%",desc:"New customer — nurture với content mùa hè",urgency:"low"}
     ],
     engagement_heatmap:[[1,2,3,1,2,4,3],[2,3,4,2,3,5,4],[0,1,2,0,1,3,2],[0,0,1,0,0,1,0]],
-    chatbot_history:[{role:"user",text:"Có áo croptop nào dưới 200k không?"},{role:"bot",text:"Dạ chị, em có 3 mẫu Crop Top dưới 200k: Crop Top Basic (149k), Crop Top Ribbed (195k), và Crop Henley (189k)."}]
+    chatbot_history:[{role:"user",text:"có áo croptop nào dưới 200k k 💀"},{role:"bot",text:"Dạ chị, em có 3 mẫu Crop Top dưới 200k: Basic (149k), Ribbed (195k), và Henley (189k). Ribbed đang hot nhất ạ! 🔥"}]
   },
   {
     id:6, name:"Bùi Đức Thịnh", email:"thinh.bui@company.com", phone:"+84 966 333 444",
-    userId:"CNF-20240201", gender:"Nam", avatar_color:"#2563EB",
+    userId:"CNF-20240201", gender:"Nam", age:30, dob:"1996-09-14", avatar_color:"#2563EB",
+    location:"Quận Thanh Xuân, Hà Nội", membership:"VIP Silver", join_date:"2024-02-01",
     channels:["Zalo OA","Web","Email"],
     aov:520000, total_orders:15, total_spent:7800000,
     health_score:88,
     rfm:{recency:85, frequency:82, monetary:75},
-    predictions:{next_purchase:"Đồ thể thao",next_purchase_conf:75,churn_risk:8,clv_6m:2800000,next_visit_days:4,
+    chatbot_insight:{
+      USER:"Nam, 30 tuổi, nhân viên gym. Gu: sporty, athleisure, thích Dryfit.",
+      TARGET:"Bản thân (gym + chạy bộ).",
+      GOAL:"Mua đồ thể thao, quần jogger mới + áo tập gym.",
+      CONSTRAINS:"Budget 300k-600k/item. Size M. Chỉ muốn Dryfit/tech fabric. Không thích cotton (thấm mồ hôi).",
+      LATEST_PRODUCT_INTEREST:"Quần Jogger Tech v2 [8JG24S008] - Đen",
+      LAST_ACTION:"Bot gợi ý set gym (áo tank + jogger). Khách mua áo Dryfit, jogger cân nhắc.",
+      SUMMARY_HISTORY:"Hỏi đồ gym → bot gợi ý Dryfit → khách mua ngay áo → hỏi thêm jogger → cân nhắc v1 vs v2"
+    },
+    predictions:{next_purchase:"Quần jogger",next_purchase_conf:75,churn_risk:8,clv_6m:2800000,next_visit_days:4,
       recommended_collab:[{name:"Quần Jogger Tech v2",icon:"👖",reason:"Bản nâng cấp SP cũ",conf:80},{name:"Áo gió thể thao",icon:"🧥",reason:"Bổ sung set",conf:68},{name:"Giày sneaker",icon:"👟",reason:"Category #4, chưa mua",conf:52}],
       recommended_basket:[{name:"Bình nước thể thao",icon:"🧴",reason:"Add-on 45% đơn sportswear",conf:50},{name:"Tất thể thao x3",icon:"🧦",reason:"Bundle deal phổ biến",conf:42},{name:"Túi gym",icon:"🎒",reason:"Cross-sell lifestyle",conf:38}],
       recommended_trending:[{name:"Áo tank top dry-fit",icon:"👕",reason:"#1 sportswear nam",conf:72},{name:"Quần short chạy bộ",icon:"🩳",reason:"Rising +90%",conf:60},{name:"Áo compression",icon:"👕",reason:"New category hot",conf:48}]
     },
     email_metrics:{delivered:55,opens:32,open_rate:58,click_rate:18,conversion_rate:9.1},
     segments:{purchase_likelihood:"High",discount_affinity:"Medium",customer_value:"VIP",lifecycle:"Loyal Customer"},
-    top_categories:[{name:"Áo thun nam",pct:32,color:"#2563EB"},{name:"Quần jogger",pct:24,color:"#10B981"},{name:"Đồ thể thao",pct:20,color:"#F59E0B"},{name:"Giày sneaker",pct:14,color:"#EF4444"},{name:"Khác",pct:10,color:"#8B5CF6"}],
-    last_attrs:{"Last Seen":"canifa.com/nam/the-thao","Last Email Open":"Member Day","Last Visited Category":"Đồ thể thao","Last Abandoned Cart":"—","Last Visited Product":"Quần Jogger Tech"},
-    products:{last_visited:{name:"Quần Jogger Tech",price:"429,000đ",icon:"👖"},last_purchased:{name:"Áo thun Dryfit",price:"349,000đ",icon:"👕"},last_abandoned:{name:"—",price:"—",icon:"📦"}},
+    top_categories:[{name:"Đồ thể thao",pct:35,color:"#2563EB"},{name:"Quần jogger",pct:24,color:"#10B981"},{name:"Áo thun nam",pct:21,color:"#F59E0B"},{name:"Giày sneaker",pct:12,color:"#EF4444"},{name:"Phụ kiện",pct:8,color:"#8B5CF6"}],
+    last_attrs:{"Last Seen":"canifa.com/nam/the-thao","Last Email Open":"Member Day Sale","Last Visited Category":"Đồ thể thao","Last Abandoned Cart":"—","Last Visited Product":"Quần Jogger Tech v2"},
+    products:{last_visited:{name:"Quần Jogger Tech v2",price:"429,000đ",icon:"👖"},last_purchased:{name:"Áo thun Dryfit x2",price:"698,000đ",icon:"👕"},last_abandoned:{name:"—",price:"—",icon:"📦"}},
     mobile:{app_opened:20,push_opened:18,inapp_seen:9,inapp_from_push:7},
     journey:{entered:11,completed:9},
     purchase_timeline:[
       {date:"22/03/2026",name:"Áo thun Dryfit x2",price:"698,000đ",icon:"👕",channel:"Web"},
-      {date:"18/03/2026",name:"Quần Jogger Tech",price:"429,000đ",icon:"👖",channel:"Zalo"},
+      {date:"18/03/2026",name:"Quần Jogger Tech v1",price:"399,000đ",icon:"👖",channel:"Zalo"},
       {date:"05/03/2026",name:"Set đồ thể thao (áo+quần)",price:"650,000đ",icon:"🏃",channel:"Web"},
       {date:"20/02/2026",name:"Giày sneaker trắng",price:"890,000đ",icon:"👟",channel:"Web"}
     ],
     next_best_actions:[
-      {icon:"🏋️",title:"Email BST thể thao mùa hè",desc:"Top buyer sportswear — early access",urgency:"low"},
-      {icon:"⭐",title:"Mời tham gia chương trình Member Referral",desc:"Loyal + high engagement → ambassador potential",urgency:"medium"},
+      {icon:"🏋️",title:"Push Jogger Tech v2 upgrade",desc:"Đã mua v1, giờ v2 ra → conf 80% upgrade",urgency:"urgent"},
+      {icon:"⭐",title:"Mời referral program",desc:"Loyal + high engagement → ambassador potential",urgency:"medium"},
       {icon:"📱",title:"Push deal bundle 'Gym Set'",desc:"Áo + Quần + Giày combo giảm 25%",urgency:"medium"}
     ],
     engagement_heatmap:[[1,2,3,2,2,4,3],[2,3,4,3,3,5,4],[1,1,2,1,1,3,2],[0,1,1,1,0,1,1]],
-    chatbot_history:[{role:"user",text:"Quần jogger nam có size 2XL không?"},{role:"bot",text:"Dạ anh, Quần Jogger Tech hiện có từ S đến XL. Size 2XL hiện chưa có ạ. Anh có thể thử Quần Jogger Relaxed Fit, rộng hơn!"}]
+    chatbot_history:[{role:"user",text:"Quần jogger tech v2 khác v1 gì anh?"},{role:"bot",text:"Dạ anh, v2 nâng cấp: vải 4-way stretch, túi zip chống rơi, thêm lưới thoáng khí ở đùi. Giá 429k (v1 là 399k). Đáng upgrade ạ!"}]
   }
 ];
+
+// ═══ TRY LOAD FROM API, FALLBACK TO MOCK ═══
+async function loadInsightData() {
+  try {
+    const resp = await fetch('/api/user-insights/all');
+    const data = await resp.json();
+    if (data.status === 'success' && data.insights && data.insights.length > 0) {
+      // Merge API insights into mock users by identity_key or append as new
+      data.insights.forEach((apiUser, idx) => {
+        const existing = MOCK_USERS.find(u => u.userId === apiUser.identity_key);
+        if (existing && apiUser.insight) {
+          existing.chatbot_insight = apiUser.insight;
+          existing._source = 'api';
+        } else if (apiUser.insight) {
+          // Create a new user entry from API data
+          const insight = apiUser.insight;
+          MOCK_USERS.push({
+            id: 100 + idx, name: apiUser.identity_key,
+            email: "—", phone: "—", userId: apiUser.identity_key,
+            gender: insight.USER?.includes("Nữ") ? "Nữ" : insight.USER?.includes("Nam") ? "Nam" : "—",
+            age: 0, dob: "—", avatar_color: ["#6366F1","#059669","#EC4899","#D97706","#7C3AED","#2563EB"][idx%6],
+            location: "—", membership: "—", join_date: "—", channels: ["Chatbot"],
+            aov: 0, total_orders: apiUser.message_count || 0, total_spent: 0,
+            health_score: 50, rfm: {recency:50,frequency:50,monetary:50},
+            chatbot_insight: insight,
+            predictions: {next_purchase:"—",next_purchase_conf:0,churn_risk:50,clv_6m:0,next_visit_days:0,
+              recommended_collab:[],recommended_basket:[],recommended_trending:[]},
+            email_metrics: {delivered:0,opens:0,open_rate:0,click_rate:0,conversion_rate:0},
+            segments: {purchase_likelihood:"Unknown",discount_affinity:"Unknown",customer_value:"Unknown",lifecycle:"Unknown"},
+            top_categories: [], last_attrs: {},
+            products: {last_visited:{name:"—",price:"—",icon:"📦"},last_purchased:{name:"—",price:"—",icon:"📦"},last_abandoned:{name:"—",price:"—",icon:"📦"}},
+            mobile: {app_opened:0,push_opened:0,inapp_seen:0,inapp_from_push:0},
+            journey: {entered:0,completed:0}, purchase_timeline: [],
+            next_best_actions: [], engagement_heatmap: [[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0]],
+            chatbot_history: [], _source: 'api'
+          });
+        }
+      });
+      DATA_SOURCE = 'api+mock';
+      console.log(`✅ Loaded ${data.insights.length} insights from API + ${MOCK_USERS.length} total users`);
+    }
+  } catch (e) {
+    console.log('ℹ️ API not available, using mock data only');
+  }
+  USERS = MOCK_USERS;
+  if (typeof renderUserList === 'function') renderUserList();
+}
+
+// Auto-load on page init
+USERS = MOCK_USERS;
+loadInsightData();

backend/static/js/user-insight-render.js

 // ═══════════════════════════════════════════
-// USER INSIGHT — RENDER ENGINE
+// USER INSIGHT — RENDER ENGINE v2
+// Renders full user profile + 6-layer chatbot insight
 // ═══════════════════════════════════════════
 let selectedUserId = null;
 const fmt = n => new Intl.NumberFormat('vi-VN').format(n) + 'đ';
@@ -13,13 +14,13 @@ const segC = v => {
 // ═══ USER LIST ═══
 function renderUserList(filter=''){
   const el=document.getElementById('userItems');
-  const f=USERS.filter(u=>!filter||u.name.toLowerCase().includes(filter.toLowerCase())||u.email.toLowerCase().includes(filter.toLowerCase())||u.phone.includes(filter));
+  const f=USERS.filter(u=>!filter||u.name.toLowerCase().includes(filter.toLowerCase())||(u.email||'').toLowerCase().includes(filter.toLowerCase())||(u.phone||'').includes(filter));
   el.innerHTML=f.map(u=>`
     <div class="user-item ${selectedUserId===u.id?'active':''}" onclick="selectUser(${u.id})">
       <div class="user-avatar" style="background:${u.avatar_color}">${u.name.charAt(0)}</div>
       <div class="user-item-info">
         <div class="user-item-name">${u.name}</div>
-        <div class="user-item-meta">${u.email}</div>
+        <div class="user-item-meta">${u.age?u.age+'t, ':''}${u.gender||''} ${u.location?'· '+u.location.split(',')[0]:''}</div>
       </div>
       <div class="user-item-right">
         <div class="val" style="color:${u.health_score>=70?'#059669':u.health_score>=40?'#D97706':'#DC2626'}">${u.health_score}</div>
@@ -45,6 +46,7 @@ function healthRing(score){
 
 // ═══ DONUT CHART ═══
 function buildDonut(cats){
+  if(!cats||!cats.length) return '<div style="text-align:center;color:#9CA3AF;padding:20px">Chưa có dữ liệu</div>';
   const s=140,cx=70,cy=70,r=50,sw=20,ci=2*Math.PI*r;let off=0;
   const segs=cats.map(c=>{const l=(c.pct/100)*ci;const s2=`<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${c.color}" stroke-width="${sw}" stroke-dasharray="${l} ${ci-l}" stroke-dashoffset="${-off}" transform="rotate(-90 ${cx} ${cy})"/>`;off+=l;return s2});
   return `<svg class="donut-svg" viewBox="0 0 ${s} ${s}">${segs.join('')}</svg>`;
@@ -58,6 +60,7 @@ function factorBar(label,score){
 
 // ═══ HEATMAP ═══
 function buildHeatmap(data){
+  if(!data||!data.length) return '<div style="text-align:center;color:#9CA3AF;padding:20px">Chưa có dữ liệu</div>';
   const days=['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
   const slots=['Sáng','Trưa','Chiều','Tối'];
   const maxV=Math.max(...data.flat(),1);
@@ -70,30 +73,61 @@ function buildHeatmap(data){
 
 // ═══ RECO SECTION ═══
 function recoBlock(label,emoji,items){
+  if(!items||!items.length) return '';
   return `<div class="reco-section"><div class="reco-strat-label">${emoji} ${label}</div><div class="reco-grid">${items.map(r=>`
     <div class="reco-item"><span class="reco-icon">${r.icon}</span><div><div class="reco-name">${r.name}</div><div class="reco-reason">${r.reason}</div></div><span class="reco-conf" style="color:${r.conf>=70?'#059669':r.conf>=50?'#D97706':'#9CA3AF'}">${r.conf}%</span></div>
   `).join('')}</div></div>`;
 }
 
+// ═══ CHATBOT INSIGHT RENDER (6-layer) ═══
+function renderChatbotInsight(insight) {
+  if (!insight) return '<div style="text-align:center;color:#9CA3AF;padding:30px">Chatbot chưa phân tích user này</div>';
+
+  const layers = [
+    { key:'USER', icon:'👤', label:'Người chat', color:'#6366F1', bgColor:'#EEF2FF' },
+    { key:'TARGET', icon:'🎯', label:'Đối tượng thụ hưởng', color:'#059669', bgColor:'#F0FDF4' },
+    { key:'GOAL', icon:'🛒', label:'Mục tiêu mua sắm', color:'#D97706', bgColor:'#FFFBEB' },
+    { key:'CONSTRAINS', icon:'🔒', label:'Ràng buộc cứng', color:'#DC2626', bgColor:'#FEF2F2' },
+    { key:'LATEST_PRODUCT_INTEREST', icon:'💎', label:'Sản phẩm quan tâm gần nhất', color:'#7C3AED', bgColor:'#F5F3FF' },
+    { key:'LAST_ACTION', icon:'⚡', label:'Hành động bot vừa thực hiện', color:'#2563EB', bgColor:'#EFF6FF' },
+    { key:'SUMMARY_HISTORY', icon:'📝', label:'Tóm tắt lịch sử chat', color:'#64748B', bgColor:'#F8FAFC' },
+  ];
+
+  return `<div class="insight-layers">${layers.map(l => {
+    const val = insight[l.key];
+    if (!val || val === 'Chưa rõ.' || val === 'Chưa có.' || val === 'Chưa có' || val === '') return '';
+    return `<div class="insight-layer" style="border-left:3px solid ${l.color};background:${l.bgColor}">
+      <div class="insight-layer-header">
+        <span class="insight-layer-icon">${l.icon}</span>
+        <span class="insight-layer-label" style="color:${l.color}">${l.label}</span>
+      </div>
+      <div class="insight-layer-value">${val}</div>
+    </div>`;
+  }).join('')}</div>`;
+}
+
 // ═══ MAIN RENDER ═══
 function renderProfile(u){
   if(!u)return;
   document.getElementById('profileEmpty').style.display='none';
   const el=document.getElementById('profileContent');
   el.style.display='block';
-  const p=u.predictions;
-  const chC=p.churn_risk>=50?'pred-red':p.churn_risk>=20?'pred-amber':'pred-green';
-  const coC=p.next_purchase_conf>=70?'pred-green':p.next_purchase_conf>=40?'pred-amber':'pred-red';
+  const p=u.predictions||{};
+  const chC=(p.churn_risk||0)>=50?'pred-red':(p.churn_risk||0)>=20?'pred-amber':'pred-green';
+  const coC=(p.next_purchase_conf||0)>=70?'pred-green':(p.next_purchase_conf||0)>=40?'pred-amber':'pred-red';
 
   el.innerHTML=`
     <div class="profile-tabs">
-      <button class="tab-btn active" onclick="switchTab(this, 'tab-actual')">Tổng quan & Thực tế</button>
+      <button class="tab-btn active" onclick="switchTab(this, 'tab-actual')">Tổng quan</button>
+      <button class="tab-btn" onclick="switchTab(this, 'tab-insight')">
+        <span style="color:#6366F1">🧠</span> AI Chatbot Insight
+      </button>
       <button class="tab-btn" onclick="switchTab(this, 'tab-ai')">
-        <span style="color:#6366F1">✨</span> AI Phân tích & Đề xuất
+        <span style="color:#6366F1">✨</span> AI Phân tích
       </button>
     </div>
 
-    <!-- TAB 1: THỰC TẾ (ACTUAL) -->
+    <!-- TAB 1: TỔNG QUAN -->
     <div id="tab-actual" class="tab-pane active">
       <!-- OVERVIEW -->
       <div class="section">
@@ -101,12 +135,18 @@ function renderProfile(u){
         <div class="overview-grid">
           <div class="overview-avatar" style="background:${u.avatar_color}">${u.name.charAt(0)}</div>
           <div class="overview-details">
-            <div><div class="overview-field-label">Name</div><div class="overview-field-value">${u.name}</div></div>
-            <div><div class="overview-field-label">Email</div><div class="overview-field-value">${u.email}</div></div>
+            <div><div class="overview-field-label">Tên</div><div class="overview-field-value">${u.name}</div></div>
+            <div><div class="overview-field-label">Email</div><div class="overview-field-value">${u.email||'—'}</div></div>
             <div><div class="overview-field-label">User ID</div><div class="overview-field-value">${u.userId}</div></div>
-            <div><div class="overview-field-label">Channels</div><div>${u.channels.map(c=>`<span class="channel-tag">${c}</span>`).join('')}</div></div>
-            <div><div class="overview-field-label">Phone</div><div class="overview-field-value">${u.phone}</div></div>
-            <div><div class="overview-field-label">Tổng chi tiêu</div><div class="overview-field-value">${fmt(u.total_spent)}</div></div>
+            <div><div class="overview-field-label">Tuổi / Giới tính</div><div class="overview-field-value">${u.age||'—'} tuổi, ${u.gender||'—'}</div></div>
+            <div><div class="overview-field-label">Ngày sinh</div><div class="overview-field-value">${u.dob||'—'}</div></div>
+            <div><div class="overview-field-label">Membership</div><div class="overview-field-value"><span class="channel-tag" style="${u.membership?.includes('VIP')?'background:#FEF3C7;color:#92400E':u.membership?.includes('Premium')?'background:#EDE9FE;color:#5B21B6':''}">${u.membership||'—'}</span></div></div>
+            <div><div class="overview-field-label">Địa chỉ</div><div class="overview-field-value">${u.location||'—'}</div></div>
+            <div><div class="overview-field-label">SĐT</div><div class="overview-field-value">${u.phone||'—'}</div></div>
+            <div><div class="overview-field-label">Channels</div><div>${(u.channels||[]).map(c=>`<span class="channel-tag">${c}</span>`).join('')}</div></div>
+            <div><div class="overview-field-label">Ngày gia nhập</div><div class="overview-field-value">${u.join_date||'—'}</div></div>
+            <div><div class="overview-field-label">Tổng đơn</div><div class="overview-field-value">${u.total_orders||0} đơn</div></div>
+            <div><div class="overview-field-label">Tổng chi tiêu</div><div class="overview-field-value">${u.total_spent?fmt(u.total_spent):'—'}</div></div>
           </div>
         </div>
       </div>
@@ -115,17 +155,17 @@ function renderProfile(u){
       <div class="section">
         <div class="section-label">Customer Health Score & RFM Analysis</div>
         <div class="health-row">
-          ${healthRing(u.health_score)}
+          ${healthRing(u.health_score||0)}
           <div class="health-factors">
-            ${factorBar('Recency',u.rfm.recency)}
-            ${factorBar('Frequency',u.rfm.frequency)}
-            ${factorBar('Monetary',u.rfm.monetary)}
+            ${factorBar('Recency',u.rfm?.recency||0)}
+            ${factorBar('Frequency',u.rfm?.frequency||0)}
+            ${factorBar('Monetary',u.rfm?.monetary||0)}
           </div>
         </div>
       </div>
 
       <!-- EMAIL METRICS -->
-      <div class="section">
+      ${u.email_metrics?.delivered ? `<div class="section">
         <div class="section-label">Email Metrics (3 tháng)</div>
         <div class="metrics-row">
           <div class="metric-cell"><div class="m-label">Delivered</div><div class="m-value">${u.email_metrics.delivered}</div></div>
@@ -134,24 +174,22 @@ function renderProfile(u){
           <div class="metric-cell"><div class="m-label">Click Rate</div><div class="m-value">${u.email_metrics.click_rate}<span class="m-unit">%</span></div></div>
           <div class="metric-cell"><div class="m-label">Conversion</div><div class="m-value">${u.email_metrics.conversion_rate}<span class="m-unit">%</span></div></div>
         </div>
-      </div>
+      </div>` : ''}
 
       <!-- PRODUCT CARDS -->
-      <div class="product-cards">
-        ${['last_visited','last_purchased','last_abandoned'].map(k=>{const pr=u.products[k];const lbl=k==='last_visited'?'Last Visited':k==='last_purchased'?'Last Purchased':'Last Abandoned';return `<div class="product-card"><div class="product-card-icon">${pr.icon}</div><div class="product-card-info"><div class="product-card-label">${lbl}</div><div class="product-card-name">${pr.name}</div><div class="product-card-price">${pr.price}</div></div></div>`}).join('')}
-      </div>
-
-      <div style="height:16px"></div>
+      ${u.products?.last_visited?.name!=='—' ? `<div class="product-cards">
+        ${['last_visited','last_purchased','last_abandoned'].map(k=>{const pr=u.products[k];if(!pr||pr.name==='—')return'';const lbl=k==='last_visited'?'Last Visited':k==='last_purchased'?'Last Purchased':'Last Abandoned';return `<div class="product-card"><div class="product-card-icon">${pr.icon}</div><div class="product-card-info"><div class="product-card-label">${lbl}</div><div class="product-card-name">${pr.name}</div><div class="product-card-price">${pr.price}</div></div></div>`}).join('')}
+      </div><div style="height:16px"></div>` : ''}
 
       <!-- PURCHASE TIMELINE -->
-      <div class="section">
-        <div class="section-label">Lịch sử mua hàng (Purchase Timeline)</div>
+      ${u.purchase_timeline?.length ? `<div class="section">
+        <div class="section-label">Lịch sử mua hàng</div>
         <div class="timeline">
           ${u.purchase_timeline.map(t=>`<div class="tl-item"><div class="tl-date">${t.date} · ${t.channel}</div><div class="tl-content"><span class="tl-icon">${t.icon}</span><div class="tl-detail"><div class="tl-name">${t.name}</div></div><span class="tl-price">${t.price}</span></div></div>`).join('')}
         </div>
-      </div>
+      </div>` : ''}
 
-      <!-- ENGAGEMENT HEATMAP + MOBILE/JOURNEY -->
+      <!-- ENGAGEMENT HEATMAP + MOBILE -->
       <div class="two-col">
         <div class="section">
           <div class="section-label">Engagement Heatmap (tuần gần nhất)</div>
@@ -160,66 +198,78 @@ function renderProfile(u){
         <div class="section">
           <div class="section-label">Mobile & Journey</div>
           <div class="mini-metrics" style="margin-bottom:12px">
-            <div class="mini-cell"><div class="m-label">App</div><div class="m-value">${u.mobile.app_opened}</div></div>
-            <div class="mini-cell"><div class="m-label">Push</div><div class="m-value">${u.mobile.push_opened}</div></div>
-            <div class="mini-cell"><div class="m-label">InApp</div><div class="m-value">${u.mobile.inapp_seen}</div></div>
-            <div class="mini-cell"><div class="m-label">Push→InApp</div><div class="m-value">${u.mobile.inapp_from_push}</div></div>
+            <div class="mini-cell"><div class="m-label">App</div><div class="m-value">${u.mobile?.app_opened||0}</div></div>
+            <div class="mini-cell"><div class="m-label">Push</div><div class="m-value">${u.mobile?.push_opened||0}</div></div>
+            <div class="mini-cell"><div class="m-label">InApp</div><div class="m-value">${u.mobile?.inapp_seen||0}</div></div>
+            <div class="mini-cell"><div class="m-label">Push→InApp</div><div class="m-value">${u.mobile?.inapp_from_push||0}</div></div>
           </div>
           <div class="mini-metrics cols-2">
-            <div class="mini-cell"><div class="m-label">Journeys Entered</div><div class="m-value">${u.journey.entered}</div></div>
-            <div class="mini-cell"><div class="m-label">Completed</div><div class="m-value">${u.journey.completed}</div></div>
+            <div class="mini-cell"><div class="m-label">Journeys Entered</div><div class="m-value">${u.journey?.entered||0}</div></div>
+            <div class="mini-cell"><div class="m-label">Completed</div><div class="m-value">${u.journey?.completed||0}</div></div>
           </div>
         </div>
       </div>
 
       <!-- CHAT HISTORY -->
-      ${u.chatbot_history.length?`<div class="section"><div class="section-label">Lịch sử Chat gần nhất</div><div class="chat-history">${u.chatbot_history.map(m=>`<div class="chat-msg ${m.role}">${m.text}</div>`).join('')}</div></div>`:''}
+      ${u.chatbot_history?.length?`<div class="section"><div class="section-label">Lịch sử Chat gần nhất</div><div class="chat-history">${u.chatbot_history.map(m=>`<div class="chat-msg ${m.role}">${m.text}</div>`).join('')}</div></div>`:''}
     </div>
 
-    <!-- TAB 2: AI PHÂN TÍCH (AI ANALYSIS) -->
+    <!-- TAB 2: AI CHATBOT INSIGHT (6-layer) -->
+    <div id="tab-insight" class="tab-pane">
+      <div class="section">
+        <div class="section-label">🧠 Chatbot AI đã phân tích ${u.name}</div>
+        <p style="font-size:12px;color:#6B7280;margin-bottom:16px">Insight 6 tầng được chatbot tự động tạo trong quá trình chat. Dữ liệu cập nhật real-time.</p>
+        ${renderChatbotInsight(u.chatbot_insight)}
+      </div>
+
+      <!-- CHAT HISTORY in insight tab too -->
+      ${u.chatbot_history?.length?`<div class="section"><div class="section-label">💬 Cuộc chat đã phân tích</div><div class="chat-history" style="max-height:400px">${u.chatbot_history.map(m=>`<div class="chat-msg ${m.role}">${m.text}</div>`).join('')}</div></div>`:''}
+    </div>
+
+    <!-- TAB 3: AI PHÂN TÍCH -->
     <div id="tab-ai" class="tab-pane">
       <!-- AI PREDICTIONS -->
-      <div class="section">
+      ${p.next_purchase ? `<div class="section">
         <div class="section-label">⚡ AI Core Predictions</div>
         <div class="pred-grid">
           <div class="pred-card ${coC}"><div class="pred-icon">🛒</div><div class="pred-val">${p.next_purchase}</div><div class="pred-lbl">Mua tiếp (${p.next_purchase_conf}%)</div></div>
           <div class="pred-card ${chC}"><div class="pred-icon">⚠️</div><div class="pred-val">${p.churn_risk}%</div><div class="pred-lbl">Churn Risk</div></div>
-          <div class="pred-card pred-blue"><div class="pred-icon">💰</div><div class="pred-val">${fmt(p.clv_6m)}</div><div class="pred-lbl">CLV 6 tháng</div></div>
-          <div class="pred-card pred-blue"><div class="pred-icon">📅</div><div class="pred-val">${p.next_visit_days}d</div><div class="pred-lbl">Quay lại sau</div></div>
+          <div class="pred-card pred-blue"><div class="pred-icon">💰</div><div class="pred-val">${p.clv_6m?fmt(p.clv_6m):'—'}</div><div class="pred-lbl">CLV 6 tháng</div></div>
+          <div class="pred-card pred-blue"><div class="pred-icon">📅</div><div class="pred-val">${p.next_visit_days||'—'}d</div><div class="pred-lbl">Quay lại sau</div></div>
         </div>
-      </div>
+      </div>` : ''}
 
       <!-- SEGMENTS + CATEGORIES + ATTRS -->
       <div class="three-col">
         <div class="section">
           <div class="section-label">Predictive Segments</div>
-          ${Object.entries(u.segments).map(([k,v])=>`<div class="segment-row"><span class="seg-label">${segK(k)}</span><span class="seg-value ${segC(v)}">${v}</span></div>`).join('')}
+          ${u.segments?Object.entries(u.segments).map(([k,v])=>`<div class="segment-row"><span class="seg-label">${segK(k)}</span><span class="seg-value ${segC(v)}">${v}</span></div>`).join(''):'<div style="color:#9CA3AF">Chưa có</div>'}
         </div>
         <div class="section">
           <div class="section-label">Danh mục quan tâm</div>
-          <div class="donut-wrap">${buildDonut(u.top_categories)}<div class="donut-legend">${u.top_categories.map(c=>`<div class="legend-row"><span class="legend-dot" style="background:${c.color}"></span><span>${c.name}</span><span class="legend-pct">${c.pct}%</span></div>`).join('')}</div></div>
+          <div class="donut-wrap">${buildDonut(u.top_categories)}<div class="donut-legend">${(u.top_categories||[]).map(c=>`<div class="legend-row"><span class="legend-dot" style="background:${c.color}"></span><span>${c.name}</span><span class="legend-pct">${c.pct}%</span></div>`).join('')}</div></div>
         </div>
         <div class="section">
-          <div class="section-label">Predicted Last Attributes</div>
-          ${Object.entries(u.last_attrs).map(([k,v])=>`<div class="attr-row"><span class="attr-label">${k}</span><span class="attr-value">${v}</span></div>`).join('')}
+          <div class="section-label">Last Attributes</div>
+          ${u.last_attrs?Object.entries(u.last_attrs).map(([k,v])=>`<div class="attr-row"><span class="attr-label">${k}</span><span class="attr-value">${v}</span></div>`).join(''):'<div style="color:#9CA3AF">Chưa có</div>'}
         </div>
       </div>
 
       <!-- RECOMMENDATION ENGINE -->
-      <div class="section">
+      ${p.recommended_collab?.length ? `<div class="section">
         <div class="section-label">🎯 Product Recommendation Engine</div>
         ${recoBlock('Vì bạn đã mua (Collaborative Filtering)','🧠',p.recommended_collab)}
         ${recoBlock('Thường mua cùng (Market Basket Analysis)','🛒',p.recommended_basket)}
         ${recoBlock('Trending trong phân khúc','🔥',p.recommended_trending)}
-      </div>
+      </div>` : ''}
 
       <!-- NEXT BEST ACTIONS -->
-      <div class="section">
+      ${u.next_best_actions?.length ? `<div class="section">
         <div class="section-label">🚀 Next Best Actions (AI Suggested)</div>
         <div class="nba-grid">
           ${u.next_best_actions.map(a=>`<div class="nba-card nba-${a.urgency}"><div class="nba-icon">${a.icon}</div><div class="nba-title">${a.title}</div><div class="nba-desc">${a.desc}</div><span class="nba-tag">${a.urgency==='urgent'?'URGENT':a.urgency==='medium'?'MEDIUM':'LOW'}</span></div>`).join('')}
         </div>
-      </div>
+      </div>` : ''}
     </div>
   `;
   document.getElementById('profilePane').scrollTop=0;

backend/static/knowledge-graph.html

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Knowledge Graph — Canifa AI</title>
+<link rel="stylesheet" href="/static/lab.css">
+<link rel="stylesheet" href="/static/dashboard.css">
+<script src="/static/frame-detect.js"></script>
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<style>
+/* ═══ PAGE LAYOUT ═══ */
+body{margin:0;background:var(--bg);overflow:hidden;height:100vh}
+
+/* ═══ TOP BAR ═══ */
+.page-topbar{
+    height:54px;
+    background:var(--s);
+    border-bottom:1px solid var(--b);
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    padding:0 24px;
+    flex-shrink:0;
+}
+.topbar-left{display:flex;align-items:center;gap:14px}
+.topbar-icon{
+    width:34px;height:34px;
+    background:var(--t);
+    border-radius:10px;
+    display:flex;align-items:center;justify-content:center;
+    font-size:12px;font-weight:800;color:#FDE68A;
+    letter-spacing:.04em;
+}
+.topbar-title{font-size:15px;font-weight:700;color:var(--t)}
+.topbar-subtitle{font-size:11px;color:var(--m);margin-top:1px}
+.topbar-right{display:flex;align-items:center;gap:10px}
+.topbar-stat{
+    display:flex;align-items:center;gap:6px;
+    padding:6px 14px;
+    background:var(--bg);
+    border:1px solid var(--b);
+    border-radius:8px;
+    font-size:12px;
+}
+.stat-dot{width:7px;height:7px;border-radius:50%}
+.stat-dot.nodes{background:var(--diamond)}
+.stat-dot.edges{background:var(--blue)}
+.stat-dot.types{background:var(--gold)}
+.stat-label{color:var(--m);font-weight:500}
+.stat-value{color:var(--t);font-weight:700;font-family:'Fraunces',serif}
+
+/* ═══ GRAPH CONTAINER ═══ */
+.graph-container{
+    width:100%;
+    height:calc(100vh - 54px);
+    position:relative;
+    background:var(--bg);
+}
+.graph-svg{width:100%;height:100%;cursor:grab}
+.graph-svg:active{cursor:grabbing}
+
+/* ═══ CONTROLS ═══ */
+.controls{
+    position:absolute;
+    top:16px;left:16px;
+    display:flex;flex-direction:column;gap:4px;
+    z-index:50;
+}
+.ctrl-btn{
+    width:38px;height:38px;
+    background:var(--s);
+    border:1px solid var(--b);
+    border-radius:var(--rs);
+    color:var(--m);
+    font-size:16px;
+    cursor:pointer;
+    display:flex;align-items:center;justify-content:center;
+    transition:all .2s;
+    font-family:'Outfit',sans-serif;
+}
+.ctrl-btn:hover{background:var(--bg);color:var(--t);border-color:var(--m)}
+.ctrl-btn.active{background:var(--gold-l);color:var(--gold);border-color:var(--gold-b)}
+.ctrl-divider{height:1px;background:var(--b);margin:4px 6px}
+
+/* ═══ LEGEND ═══ */
+.legend{
+    position:absolute;
+    bottom:16px;left:16px;
+    background:var(--s);
+    border:1px solid var(--b);
+    border-radius:var(--r);
+    padding:14px 18px;
+    z-index:50;
+    min-width:180px;
+    box-shadow:0 2px 8px rgba(0,0,0,0.04);
+}
+.legend-title{
+    font-size:10px;font-weight:700;color:var(--m);
+    text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;
+}
+.legend-items{display:flex;flex-direction:column;gap:7px}
+.legend-item{display:flex;align-items:center;gap:10px;font-size:12px}
+.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,0.08)}
+.legend-label{color:var(--m);font-weight:500}
+.legend-count{margin-left:auto;color:var(--t);font-weight:700;font-size:12px;font-family:'Fraunces',serif}
+
+/* ═══ DETAIL PANEL ═══ */
+.detail-panel{
+    position:absolute;
+    top:16px;right:16px;
+    width:320px;
+    max-height:calc(100vh - 100px);
+    overflow-y:auto;
+    background:var(--s);
+    border:1px solid var(--b);
+    border-radius:var(--r);
+    z-index:50;
+    box-shadow:0 4px 16px rgba(0,0,0,0.06);
+    display:none;
+    animation:slideIn .2s ease;
+}
+.detail-panel.open{display:block}
+@keyframes slideIn{
+    from{opacity:0;transform:translateX(12px)}
+    to{opacity:1;transform:translateX(0)}
+}
+.detail-header{
+    padding:14px 18px;
+    border-bottom:1px solid var(--b);
+    display:flex;align-items:center;justify-content:space-between;
+}
+.detail-type{display:flex;align-items:center;gap:8px}
+.detail-type-dot{width:10px;height:10px;border-radius:50%}
+.detail-type-label{
+    font-size:10px;font-weight:700;
+    text-transform:uppercase;letter-spacing:.08em;color:var(--m);
+}
+.detail-close{
+    background:none;border:none;color:var(--m);cursor:pointer;font-size:16px;
+    width:28px;height:28px;border-radius:var(--rs);
+    display:flex;align-items:center;justify-content:center;
+    transition:all .15s;
+}
+.detail-close:hover{background:var(--bg);color:var(--t)}
+.detail-body{padding:16px 18px}
+.detail-name{
+    font-size:16px;font-weight:700;
+    color:var(--t);margin-bottom:14px;line-height:1.3;
+    font-family:'Fraunces',serif;
+}
+.detail-row{
+    display:flex;align-items:flex-start;gap:8px;
+    padding:8px 0;
+    border-bottom:1px solid var(--b);
+    font-size:12px;
+}
+.detail-row:last-child{border-bottom:none}
+.detail-key{color:var(--m);font-weight:600;min-width:80px;flex-shrink:0;text-transform:uppercase;font-size:10px;letter-spacing:.04em;padding-top:1px}
+.detail-val{color:var(--t);line-height:1.5;font-weight:500}
+.detail-conn-title{
+    font-size:10px;font-weight:700;color:var(--m);
+    text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;
+}
+.detail-conn-item{
+    display:flex;align-items:center;gap:6px;
+    padding:5px 0;font-size:12px;
+}
+.conn-arrow{font-weight:700;width:14px;font-size:11px}
+.conn-arrow.out{color:var(--blue)}
+.conn-arrow.in{color:var(--gold)}
+.conn-label{color:var(--m);font-size:10px;font-weight:600;min-width:50px}
+.conn-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
+.conn-name{color:var(--t);font-weight:500}
+
+/* Edge detail */
+.edge-detail-header{
+    padding:12px 18px;
+    background:var(--blue-l);
+    border-bottom:1px solid var(--b);
+    font-size:13px;color:var(--blue);font-weight:600;text-align:center;
+}
+.edge-arrow{color:var(--m);margin:0 6px}
+
+/* ═══ SEARCH ═══ */
+.search-box{
+    position:absolute;
+    top:16px;left:50%;transform:translateX(-50%);
+    z-index:50;display:none;
+}
+.search-box.open{display:block}
+.search-input{
+    width:360px;
+    padding:12px 16px 12px 40px;
+    background:var(--s);
+    border:1px solid var(--gold-b);
+    border-radius:var(--r);
+    color:var(--t);font-size:14px;outline:none;
+    font-family:'Outfit',sans-serif;
+    box-shadow:0 4px 16px rgba(0,0,0,0.06);
+}
+.search-input::placeholder{color:var(--f)}
+.search-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(180,83,9,0.08)}
+.search-icon{
+    position:absolute;left:14px;top:50%;transform:translateY(-50%);
+    color:var(--m);font-size:14px;
+}
+
+/* ═══ TOOLTIP ═══ */
+.node-tooltip{
+    position:absolute;
+    background:var(--s);
+    border:1px solid var(--b);
+    border-radius:var(--rs);
+    padding:8px 12px;
+    font-size:12px;color:var(--t);
+    pointer-events:none;z-index:200;
+    white-space:nowrap;
+    box-shadow:0 4px 12px rgba(0,0,0,0.08);
+    display:none;
+}
+.node-tooltip.show{display:block}
+.tooltip-name{font-weight:700;font-size:13px;margin-bottom:2px}
+.tooltip-type{color:var(--m);font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
+</style>
+</head>
+<body>
+
+<!-- TOP BAR -->
+<div class="page-topbar">
+    <div class="topbar-left">
+        <div class="topbar-icon">KG</div>
+        <div>
+            <div class="topbar-title">Knowledge Graph</div>
+            <div class="topbar-subtitle">Canifa Customer Intelligence Map</div>
+        </div>
+    </div>
+    <div class="topbar-right">
+        <div class="topbar-stat">
+            <span class="stat-dot nodes"></span>
+            <span class="stat-label">Nodes</span>
+            <span class="stat-value" id="statNodes">0</span>
+        </div>
+        <div class="topbar-stat">
+            <span class="stat-dot edges"></span>
+            <span class="stat-label">Edges</span>
+            <span class="stat-value" id="statEdges">0</span>
+        </div>
+        <div class="topbar-stat">
+            <span class="stat-dot types"></span>
+            <span class="stat-label">Types</span>
+            <span class="stat-value" id="statTypes">0</span>
+        </div>
+    </div>
+</div>
+
+<!-- GRAPH AREA -->
+<div class="graph-container" id="graphContainer">
+    <svg class="graph-svg" id="graphSvg"></svg>
+
+    <!-- Controls -->
+    <div class="controls">
+        <button class="ctrl-btn" id="btnZoomIn" title="Zoom In">+</button>
+        <button class="ctrl-btn" id="btnZoomOut" title="Zoom Out">−</button>
+        <button class="ctrl-btn" id="btnZoomFit" title="Fit to View">⊡</button>
+        <div class="ctrl-divider"></div>
+        <button class="ctrl-btn" id="btnSearch" title="Search (Ctrl+F)">🔍</button>
+        <button class="ctrl-btn" id="btnToggleLabels" title="Toggle Labels">Aa</button>
+        <button class="ctrl-btn" id="btnReset" title="Reset Layout">↻</button>
+    </div>
+
+    <!-- Search -->
+    <div class="search-box" id="searchBox">
+        <span class="search-icon">🔍</span>
+        <input type="text" class="search-input" id="searchInput" placeholder="Tìm node... (Esc to close)">
+    </div>
+
+    <!-- Legend -->
+    <div class="legend" id="legend"></div>
+
+    <!-- Detail Panel -->
+    <div class="detail-panel" id="detailPanel"></div>
+
+    <!-- Tooltip -->
+    <div class="node-tooltip" id="tooltip"></div>
+</div>
+
+<script>
+// ═══════════════════════════════════════════════════════
+// MOCK DATA: Canifa Customer Knowledge Graph
+// ═══════════════════════════════════════════════════════
+const graphData = {
+    nodes: [
+        // === CUSTOMERS ===
+        {id:'c1',name:'Nguyễn Thị Mai',type:'Customer',attrs:{age:'32',gender:'Nữ',segment:'VIP',city:'Hà Nội',totalOrders:'24',ltv:'12.5M'}},
+        {id:'c2',name:'Trần Văn Hùng',type:'Customer',attrs:{age:'28',gender:'Nam',segment:'Regular',city:'TP.HCM',totalOrders:'8',ltv:'4.2M'}},
+        {id:'c3',name:'Lê Phương Anh',type:'Customer',attrs:{age:'35',gender:'Nữ',segment:'VIP',city:'Đà Nẵng',totalOrders:'31',ltv:'18.7M'}},
+        {id:'c4',name:'Phạm Minh Tuấn',type:'Customer',attrs:{age:'41',gender:'Nam',segment:'Premium',city:'Hà Nội',totalOrders:'15',ltv:'9.8M'}},
+        {id:'c5',name:'Hoàng Thúy Linh',type:'Customer',attrs:{age:'26',gender:'Nữ',segment:'New',city:'TP.HCM',totalOrders:'3',ltv:'1.5M'}},
+
+        // === PRODUCTS ===
+        {id:'p1',name:'Áo Polo Classic',type:'Product',attrs:{sku:'8TS26C005',price:'399K',category:'Áo',stock:'245'}},
+        {id:'p2',name:'Váy Midi Floral',type:'Product',attrs:{sku:'6VD24A012',price:'599K',category:'Váy',stock:'120'}},
+        {id:'p3',name:'Quần Jeans Slim',type:'Product',attrs:{sku:'7QJ25B003',price:'499K',category:'Quần',stock:'180'}},
+        {id:'p4',name:'Áo Khoác Bomber',type:'Product',attrs:{sku:'8AK26D008',price:'799K',category:'Áo khoác',stock:'95'}},
+        {id:'p5',name:'Đầm Công Sở',type:'Product',attrs:{sku:'6DC24E015',price:'699K',category:'Đầm',stock:'75'}},
+        {id:'p6',name:'Áo Sơ Mi Linen',type:'Product',attrs:{sku:'8SM26F002',price:'459K',category:'Áo',stock:'200'}},
+
+        // === CATEGORIES ===
+        {id:'cat1',name:'Thời trang Nữ',type:'Category',attrs:{products:'156',revenue:'2.3B'}},
+        {id:'cat2',name:'Thời trang Nam',type:'Category',attrs:{products:'98',revenue:'1.1B'}},
+        {id:'cat3',name:'Trẻ em',type:'Category',attrs:{products:'67',revenue:'680M'}},
+        {id:'cat4',name:'Phụ kiện',type:'Category',attrs:{products:'45',revenue:'320M'}},
+
+        // === BEHAVIORS ===
+        {id:'b1',name:'Mua sắm cuối tuần',type:'Behavior',attrs:{frequency:'Weekly',channel:'Online+Offline'}},
+        {id:'b2',name:'Flash Sale Hunter',type:'Behavior',attrs:{frequency:'Every sale',channel:'App'}},
+        {id:'b3',name:'Gift Buyer',type:'Behavior',attrs:{frequency:'Seasonal',channel:'Offline'}},
+        {id:'b4',name:'Browsing Only',type:'Behavior',attrs:{frequency:'Daily',channel:'Website'}},
+        {id:'b5',name:'Loyal Repeater',type:'Behavior',attrs:{frequency:'Monthly',channel:'All'}},
+
+        // === SEGMENTS ===
+        {id:'s1',name:'Mom Shopper',type:'Segment',attrs:{size:'2,340',growth:'+12%',avgLTV:'8.5M'}},
+        {id:'s2',name:'Young Professional',type:'Segment',attrs:{size:'1,850',growth:'+18%',avgLTV:'5.2M'}},
+        {id:'s3',name:'Fashion Enthusiast',type:'Segment',attrs:{size:'980',growth:'+25%',avgLTV:'15.3M'}},
+        {id:'s4',name:'Budget Conscious',type:'Segment',attrs:{size:'3,200',growth:'+5%',avgLTV:'2.1M'}},
+
+        // === OCCASIONS ===
+        {id:'o1',name:'Đi làm',type:'Occasion',attrs:{peak:'Mon-Fri'}},
+        {id:'o2',name:'Đi chơi',type:'Occasion',attrs:{peak:'Weekend'}},
+        {id:'o3',name:'Sự kiện',type:'Occasion',attrs:{peak:'Holiday'}},
+        {id:'o4',name:'Mặc nhà',type:'Occasion',attrs:{peak:'Everyday'}},
+
+        // === TRENDS ===
+        {id:'t1',name:'Minimalism',type:'Trend',attrs:{strength:'Strong',since:'2025'}},
+        {id:'t2',name:'Sustainable Fashion',type:'Trend',attrs:{strength:'Growing',since:'2024'}},
+        {id:'t3',name:'Oversized Fit',type:'Trend',attrs:{strength:'Peak',since:'2025'}},
+    ],
+    edges: [
+        // Customers → Products
+        {source:'c1',target:'p1',label:'mua',weight:3},
+        {source:'c1',target:'p2',label:'mua',weight:5},
+        {source:'c1',target:'p5',label:'mua',weight:2},
+        {source:'c2',target:'p1',label:'mua',weight:2},
+        {source:'c2',target:'p3',label:'mua',weight:4},
+        {source:'c2',target:'p4',label:'mua',weight:1},
+        {source:'c3',target:'p2',label:'mua',weight:6},
+        {source:'c3',target:'p5',label:'mua',weight:4},
+        {source:'c3',target:'p6',label:'mua',weight:3},
+        {source:'c4',target:'p3',label:'mua',weight:3},
+        {source:'c4',target:'p4',label:'mua',weight:2},
+        {source:'c4',target:'p6',label:'mua',weight:5},
+        {source:'c5',target:'p1',label:'xem',weight:1},
+        {source:'c5',target:'p2',label:'thích',weight:2},
+        // Products → Categories
+        {source:'p1',target:'cat2',label:'thuộc',weight:1},
+        {source:'p2',target:'cat1',label:'thuộc',weight:1},
+        {source:'p3',target:'cat2',label:'thuộc',weight:1},
+        {source:'p4',target:'cat2',label:'thuộc',weight:1},
+        {source:'p5',target:'cat1',label:'thuộc',weight:1},
+        {source:'p6',target:'cat2',label:'thuộc',weight:1},
+        // Customers → Behaviors
+        {source:'c1',target:'b1',label:'hành vi',weight:2},
+        {source:'c1',target:'b5',label:'hành vi',weight:3},
+        {source:'c2',target:'b2',label:'hành vi',weight:2},
+        {source:'c3',target:'b5',label:'hành vi',weight:3},
+        {source:'c3',target:'b3',label:'hành vi',weight:2},
+        {source:'c4',target:'b1',label:'hành vi',weight:1},
+        {source:'c5',target:'b4',label:'hành vi',weight:2},
+        {source:'c5',target:'b2',label:'hành vi',weight:1},
+        // Customers → Segments
+        {source:'c1',target:'s1',label:'thuộc nhóm',weight:2},
+        {source:'c2',target:'s2',label:'thuộc nhóm',weight:2},
+        {source:'c3',target:'s3',label:'thuộc nhóm',weight:3},
+        {source:'c4',target:'s2',label:'thuộc nhóm',weight:1},
+        {source:'c5',target:'s4',label:'thuộc nhóm',weight:1},
+        // Products → Occasions
+        {source:'p1',target:'o1',label:'phù hợp',weight:1},
+        {source:'p1',target:'o2',label:'phù hợp',weight:1},
+        {source:'p2',target:'o2',label:'phù hợp',weight:2},
+        {source:'p2',target:'o3',label:'phù hợp',weight:1},
+        {source:'p3',target:'o1',label:'phù hợp',weight:1},
+        {source:'p4',target:'o2',label:'phù hợp',weight:2},
+        {source:'p5',target:'o1',label:'phù hợp',weight:3},
+        {source:'p5',target:'o3',label:'phù hợp',weight:2},
+        {source:'p6',target:'o1',label:'phù hợp',weight:2},
+        {source:'p6',target:'o4',label:'phù hợp',weight:1},
+        // Categories → Trends
+        {source:'cat1',target:'t1',label:'xu hướng',weight:2},
+        {source:'cat1',target:'t2',label:'xu hướng',weight:1},
+        {source:'cat2',target:'t3',label:'xu hướng',weight:3},
+        {source:'cat2',target:'t1',label:'xu hướng',weight:2},
+        // Segments → Behaviors
+        {source:'s1',target:'b1',label:'đặc trưng',weight:2},
+        {source:'s1',target:'b3',label:'đặc trưng',weight:1},
+        {source:'s2',target:'b2',label:'đặc trưng',weight:2},
+        {source:'s3',target:'b5',label:'đặc trưng',weight:3},
+        {source:'s4',target:'b2',label:'đặc trưng',weight:3},
+        {source:'s4',target:'b4',label:'đặc trưng',weight:2},
+        // Cross
+        {source:'c1',target:'c3',label:'tương tự',weight:2},
+        {source:'p1',target:'p6',label:'mua kèm',weight:3},
+        {source:'p2',target:'p5',label:'mua kèm',weight:2},
+        {source:'t1',target:'t2',label:'liên quan',weight:2},
+    ]
+};
+
+// ═══════════════════════════════════════════════════════
+// COLOR PALETTE — warm tones matching Canifa
+// ═══════════════════════════════════════════════════════
+const typeColors = {
+    'Customer':  '#6D28D9', // diamond/purple
+    'Product':   '#DB2777', // pink
+    'Category':  '#0891B2', // cyan
+    'Behavior':  '#EA580C', // orange
+    'Segment':   '#B45309', // gold
+    'Occasion':  '#065F46', // green
+    'Trend':     '#1D4ED8', // blue
+};
+
+// ═══════════════════════════════════════════════════════
+// RENDER GRAPH — delayed init for iframe compatibility
+// ═══════════════════════════════════════════════════════
+const container = document.getElementById('graphContainer');
+const svg = d3.select('#graphSvg');
+let simulation, link, linkLabel, linkLabelBg, node, g, zoom;
+let showLabels = true;
+let selectedNode = null;
+
+// Stats
+document.getElementById('statNodes').textContent = graphData.nodes.length;
+document.getElementById('statEdges').textContent = graphData.edges.length;
+const uniqueTypes = [...new Set(graphData.nodes.map(n => n.type))];
+document.getElementById('statTypes').textContent = uniqueTypes.length;
+
+function initGraph(){
+    const w = container.clientWidth || window.innerWidth;
+    const h = container.clientHeight || (window.innerHeight - 54);
+    svg.attr('width', w).attr('height', h);
+
+    // Root group
+    g = svg.append('g');
+
+    // Defs
+    const defs = svg.append('defs');
+    defs.append('marker')
+        .attr('id','arrowhead')
+        .attr('viewBox','0 -5 10 10')
+        .attr('refX',24).attr('refY',0)
+        .attr('markerWidth',5).attr('markerHeight',5)
+        .attr('orient','auto')
+        .append('path')
+        .attr('d','M0,-5L10,0L0,5')
+        .attr('fill','#C4C0B8');
+
+    // Simulation — stronger centering
+    simulation = d3.forceSimulation(graphData.nodes)
+        .force('link', d3.forceLink(graphData.edges).id(d => d.id).distance(d => 100 + (1/(d.weight||1)) * 25))
+        .force('charge', d3.forceManyBody().strength(-280))
+        .force('center', d3.forceCenter(w/2, h/2).strength(1))
+        .force('collide', d3.forceCollide(30))
+        .force('x', d3.forceX(w/2).strength(0.08))
+        .force('y', d3.forceY(h/2).strength(0.08));
+
+    // Links
+    const linkGroup = g.append('g');
+    link = linkGroup.selectAll('line')
+        .data(graphData.edges)
+        .enter().append('line')
+        .attr('stroke','#E2E0D8')
+        .attr('stroke-width', d => Math.max(1, (d.weight||1)*0.6))
+        .attr('marker-end','url(#arrowhead)')
+        .style('cursor','pointer')
+        .on('click', onEdgeClick);
+
+    // Link labels
+    const linkLabelGroup = g.append('g');
+    linkLabelBg = linkLabelGroup.selectAll('rect')
+        .data(graphData.edges)
+        .enter().append('rect')
+        .attr('fill','rgba(245,244,240,0.9)')
+        .attr('rx',4).attr('ry',4)
+        .style('pointer-events','none');
+
+    linkLabel = linkLabelGroup.selectAll('text')
+        .data(graphData.edges)
+        .enter().append('text')
+        .text(d => d.label)
+        .attr('font-size','9px')
+        .attr('fill','#78716C')
+        .attr('text-anchor','middle')
+        .attr('dominant-baseline','middle')
+        .attr('font-weight','500')
+        .style('pointer-events','none')
+        .style('font-family','Outfit,system-ui,sans-serif');
+
+    // Nodes
+    const nodeGroup = g.append('g');
+    node = nodeGroup.selectAll('g')
+        .data(graphData.nodes)
+        .enter().append('g')
+        .style('cursor','pointer')
+        .call(d3.drag()
+            .on('start', (e,d) => { if(!e.active) simulation.alphaTarget(0.3).restart(); d.fx=d.x;d.fy=d.y; })
+            .on('drag', (e,d) => { d.fx=e.x;d.fy=e.y; })
+            .on('end', (e,d) => { if(!e.active) simulation.alphaTarget(0); d.fx=null;d.fy=null; }))
+        .on('click', onNodeClick)
+        .on('mouseenter', onNodeHover)
+        .on('mouseleave', onNodeLeave);
+
+    // Outer ring
+    node.append('circle')
+        .attr('r',20)
+        .attr('fill','none')
+        .attr('stroke', d => typeColors[d.type])
+        .attr('stroke-width',1.5)
+        .attr('stroke-opacity',0.12)
+        .attr('class','node-ring');
+
+    // Inner circle
+    node.append('circle')
+        .attr('r',13)
+        .attr('fill', d => typeColors[d.type])
+        .attr('stroke','#fff')
+        .attr('stroke-width',2.5)
+        .attr('class','node-circle');
+
+    // Node label
+    node.append('text')
+        .text(d => d.name.length > 10 ? d.name.substring(0,10)+'…' : d.name)
+        .attr('dy', 28)
+        .attr('text-anchor','middle')
+        .attr('font-size','11px')
+        .attr('fill','#78716C')
+        .attr('font-weight','500')
+        .style('pointer-events','none')
+        .style('font-family','Outfit,system-ui,sans-serif');
+
+    // Tick
+    simulation.on('tick', () => {
+        link.attr('x1',d=>d.source.x).attr('y1',d=>d.source.y)
+            .attr('x2',d=>d.target.x).attr('y2',d=>d.target.y);
+
+        linkLabel
+            .attr('x',d=>(d.source.x+d.target.x)/2)
+            .attr('y',d=>(d.source.y+d.target.y)/2);
+
+        linkLabelBg.each(function(d, i){
+            const tx = (d.source.x+d.target.x)/2;
+            const ty = (d.source.y+d.target.y)/2;
+            const textEl = linkLabel.nodes()[i];
+            if(textEl){
+                const bb = textEl.getBBox();
+                d3.select(this)
+                    .attr('x', tx - bb.width/2 - 4)
+                    .attr('y', ty - bb.height/2 - 2)
+                    .attr('width', bb.width + 8)
+                    .attr('height', bb.height + 4);
+            }
+        });
+
+        node.attr('transform', d => `translate(${d.x},${d.y})`);
+    });
+
+    // Zoom
+    zoom = d3.zoom().scaleExtent([0.1,5]).on('zoom', e => g.attr('transform', e.transform));
+    svg.call(zoom);
+
+    // Auto-fit after simulation settles
+    simulation.on('end', () => {
+        fitGraphToView(w, h);
+    });
+
+    // Also fit after 2 seconds in case simulation still running
+    setTimeout(() => fitGraphToView(w, h), 2000);
+
+    // Click blank to deselect
+    svg.on('mousemove', e => {
+        const tt = document.getElementById('tooltip');
+        if(tt.classList.contains('show')){ tt.style.left=(e.pageX+14)+'px'; tt.style.top=(e.pageY-8)+'px'; }
+    });
+    svg.on('click', () => { selectedNode=null; resetStyles(); document.getElementById('detailPanel').classList.remove('open'); });
+
+    // Setup controls
+    setupControls(w, h);
+    setupSearch();
+}
+
+// Auto-fit: calculate bounding box of all nodes and center the view
+function fitGraphToView(w, h){
+    if(!graphData.nodes.length) return;
+    let minX=Infinity, maxX=-Infinity, minY=Infinity, maxY=-Infinity;
+    graphData.nodes.forEach(n => {
+        if(n.x < minX) minX = n.x;
+        if(n.x > maxX) maxX = n.x;
+        if(n.y < minY) minY = n.y;
+        if(n.y > maxY) maxY = n.y;
+    });
+    const padding = 80;
+    const gw = maxX - minX + padding*2;
+    const gh = maxY - minY + padding*2;
+    const scale = Math.min(w/gw, h/gh, 1.2);
+    const cx = (minX + maxX)/2;
+    const cy = (minY + maxY)/2;
+    svg.transition().duration(600).call(
+        zoom.transform,
+        d3.zoomIdentity.translate(w/2, h/2).scale(scale).translate(-cx, -cy)
+    );
+}
+
+function resetStyles(){
+    if(!node || !link) return;
+    node.selectAll('.node-circle').attr('stroke','#fff').attr('stroke-width',2.5);
+    node.selectAll('.node-ring').attr('stroke-opacity',0.12).attr('stroke-width',1.5);
+    link.attr('stroke','#E2E0D8').attr('stroke-width', d => Math.max(1,(d.weight||1)*0.6));
+}
+
+function onNodeClick(event, d){
+    event.stopPropagation();
+    selectedNode = d;
+    resetStyles();
+    d3.select(this).select('.node-circle').attr('stroke',typeColors[d.type]).attr('stroke-width',3.5);
+    d3.select(this).select('.node-ring').attr('stroke-opacity',0.4).attr('stroke-width',2.5);
+    const connectedIds = new Set();
+    link.each(function(l){
+        if(l.source.id===d.id || l.target.id===d.id){
+            d3.select(this).attr('stroke',typeColors[d.type]).attr('stroke-width', Math.max(2,(l.weight||1)));
+            if(l.source.id===d.id) connectedIds.add(l.target.id);
+            if(l.target.id===d.id) connectedIds.add(l.source.id);
+        }
+    });
+    node.filter(n => connectedIds.has(n.id)).select('.node-ring').attr('stroke-opacity',0.3);
+    showDetailPanel(d,'node');
+}
+
+function onEdgeClick(event,d){ event.stopPropagation(); showDetailPanel(d,'edge'); }
+
+function onNodeHover(event,d){
+    if(selectedNode?.id===d.id) return;
+    d3.select(this).select('.node-ring').attr('stroke-opacity',0.35).attr('stroke-width',2);
+    const tt = document.getElementById('tooltip');
+    tt.innerHTML = `<div class="tooltip-name">${d.name}</div><div class="tooltip-type">${d.type}</div>`;
+    tt.classList.add('show');
+    tt.style.left = (event.pageX+14)+'px';
+    tt.style.top = (event.pageY-8)+'px';
+}
+
+function onNodeLeave(event,d){
+    if(selectedNode?.id===d.id) return;
+    d3.select(this).select('.node-ring').attr('stroke-opacity',0.12).attr('stroke-width',1.5);
+    document.getElementById('tooltip').classList.remove('show');
+}
+
+// ═══ DETAIL PANEL ═══
+function showDetailPanel(d, type){
+    const panel = document.getElementById('detailPanel');
+
+    if(type === 'node'){
+        const color = typeColors[d.type];
+        let attrsHtml = '';
+        if(d.attrs) Object.entries(d.attrs).forEach(([k,v]) => {
+            attrsHtml += `<div class="detail-row"><span class="detail-key">${k}</span><span class="detail-val">${v}</span></div>`;
+        });
+
+        const connections = [];
+        graphData.edges.forEach(e => {
+            const sId = typeof e.source==='object'?e.source.id:e.source;
+            const tId = typeof e.target==='object'?e.target.id:e.target;
+            if(sId===d.id){ const t=graphData.nodes.find(n=>n.id===tId); if(t) connections.push({dir:'→',label:e.label,node:t}); }
+            if(tId===d.id){ const s=graphData.nodes.find(n=>n.id===sId); if(s) connections.push({dir:'←',label:e.label,node:s}); }
+        });
+
+        let connHtml = '';
+        if(connections.length){
+            connHtml = `<div style="margin-top:16px;padding-top:14px;border-top:1px solid var(--b)">
+                <div class="detail-conn-title">Connections (${connections.length})</div>`;
+            connections.forEach(c => {
+                const cc = typeColors[c.node.type];
+                connHtml += `<div class="detail-conn-item">
+                    <span class="conn-arrow ${c.dir==='→'?'out':'in'}">${c.dir}</span>
+                    <span class="conn-label">${c.label}</span>
+                    <span class="conn-dot" style="background:${cc}"></span>
+                    <span class="conn-name">${c.node.name}</span>
+                </div>`;
+            });
+            connHtml += '</div>';
+        }
+
+        panel.innerHTML = `
+            <div class="detail-header">
+                <div class="detail-type"><span class="detail-type-dot" style="background:${color}"></span><span class="detail-type-label">${d.type}</span></div>
+                <button class="detail-close" onclick="closeDetail()">✕</button>
+            </div>
+            <div class="detail-body">
+                <div class="detail-name">${d.name}</div>
+                ${attrsHtml}${connHtml}
+            </div>`;
+    } else {
+        const sN = typeof d.source==='object'?d.source.name:d.source;
+        const tN = typeof d.target==='object'?d.target.name:d.target;
+        panel.innerHTML = `
+            <div class="detail-header">
+                <div class="detail-type"><span class="detail-type-dot" style="background:var(--blue)"></span><span class="detail-type-label">Relationship</span></div>
+                <button class="detail-close" onclick="closeDetail()">✕</button>
+            </div>
+            <div class="edge-detail-header">${sN} <span class="edge-arrow">→</span> <strong>${d.label}</strong> <span class="edge-arrow">→</span> ${tN}</div>
+            <div class="detail-body">
+                <div class="detail-row"><span class="detail-key">Type</span><span class="detail-val">${d.label}</span></div>
+                <div class="detail-row"><span class="detail-key">Weight</span><span class="detail-val">${d.weight||1}</span></div>
+            </div>`;
+    }
+    panel.classList.add('open');
+}
+
+function closeDetail(){ document.getElementById('detailPanel').classList.remove('open'); selectedNode=null; resetStyles(); }
+
+// ═══ LEGEND ═══
+(function renderLegend(){
+    const el = document.getElementById('legend');
+    const counts = {};
+    graphData.nodes.forEach(n => { counts[n.type]=(counts[n.type]||0)+1; });
+    let h = '<div class="legend-title">Entity Types</div><div class="legend-items">';
+    Object.entries(typeColors).forEach(([type,color]) => {
+        if(counts[type]) h += `<div class="legend-item"><span class="legend-dot" style="background:${color}"></span><span class="legend-label">${type}</span><span class="legend-count">${counts[type]}</span></div>`;
+    });
+    h += '</div>';
+    el.innerHTML = h;
+})();
+
+// ═══ CONTROLS ═══
+function setupControls(w, h){
+    document.getElementById('btnZoomIn').onclick = () => svg.transition().duration(300).call(zoom.scaleBy, 1.3);
+    document.getElementById('btnZoomOut').onclick = () => svg.transition().duration(300).call(zoom.scaleBy, 0.7);
+    document.getElementById('btnZoomFit').onclick = () => fitGraphToView(container.clientWidth, container.clientHeight);
+    document.getElementById('btnToggleLabels').onclick = function(){
+        showLabels = !showLabels;
+        linkLabel.style('display', showLabels?'block':'none');
+        linkLabelBg.style('display', showLabels?'block':'none');
+        this.classList.toggle('active', showLabels);
+    };
+    document.getElementById('btnReset').onclick = () => {
+        graphData.nodes.forEach(n=>{n.fx=null;n.fy=null});
+        const cw = container.clientWidth, ch = container.clientHeight;
+        simulation.force('center', d3.forceCenter(cw/2, ch/2).strength(1));
+        simulation.force('x', d3.forceX(cw/2).strength(0.08));
+        simulation.force('y', d3.forceY(cw/2).strength(0.08));
+        simulation.alpha(1).restart();
+        setTimeout(() => fitGraphToView(cw, ch), 2000);
+    };
+}
+
+// ═══ SEARCH ═══
+function setupSearch(){
+    const searchBox = document.getElementById('searchBox');
+    const searchInput = document.getElementById('searchInput');
+    document.getElementById('btnSearch').onclick = () => { searchBox.classList.toggle('open'); if(searchBox.classList.contains('open')) searchInput.focus(); };
+    document.addEventListener('keydown', e => {
+        if(e.ctrlKey && e.key==='f'){ e.preventDefault(); searchBox.classList.add('open'); searchInput.focus(); }
+        if(e.key==='Escape'){ searchBox.classList.remove('open'); searchInput.value=''; node.selectAll('.node-circle').attr('opacity',1); node.selectAll('text').attr('opacity',1); link.attr('opacity',1); linkLabelBg.attr('opacity',1); linkLabel.attr('opacity',1); }
+    });
+    searchInput.addEventListener('input', () => {
+        const q = searchInput.value.toLowerCase().trim();
+        if(!q){ node.selectAll('.node-circle').attr('opacity',1); node.selectAll('text').attr('opacity',1); link.attr('opacity',1); linkLabelBg.attr('opacity',1); linkLabel.attr('opacity',1); return; }
+        const matchIds = new Set();
+        graphData.nodes.forEach(n => { if(n.name.toLowerCase().includes(q)||n.type.toLowerCase().includes(q)) matchIds.add(n.id); });
+        node.selectAll('.node-circle').attr('opacity', d => matchIds.has(d.id)?1:0.12);
+        node.selectAll('text').attr('opacity', d => matchIds.has(d.id)?1:0.12);
+        link.attr('opacity', d => { const s=d.source.id||d.source, t=d.target.id||d.target; return (matchIds.has(s)||matchIds.has(t))?0.8:0.05; });
+        linkLabelBg.attr('opacity', d => { const s=d.source.id||d.source, t=d.target.id||d.target; return (matchIds.has(s)||matchIds.has(t))?1:0.05; });
+        linkLabel.attr('opacity', d => { const s=d.source.id||d.source, t=d.target.id||d.target; return (matchIds.has(s)||matchIds.has(t))?1:0.05; });
+    });
+}
+
+// ═══ RESIZE ═══
+window.addEventListener('resize', () => {
+    const w=container.clientWidth, h=container.clientHeight;
+    svg.attr('width',w).attr('height',h);
+    simulation.force('center',d3.forceCenter(w/2,h/2).strength(1));
+    simulation.force('x', d3.forceX(w/2).strength(0.08));
+    simulation.force('y', d3.forceY(h/2).strength(0.08));
+    simulation.alpha(0.3).restart();
+});
+
+// ═══ DELAYED INIT — wait for iframe to provide correct dimensions ═══
+requestAnimationFrame(() => {
+    setTimeout(initGraph, 100);
+});
+</script>
+</body>
+</html>

backend/static/main.html

-<!DOCTYPE html>
-<html lang="vi">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Canifa AI Platform</title>
-<link rel="stylesheet" href="/static/css/theme.css">
-<link rel="stylesheet" href="/static/css/components.css">
-<link rel="stylesheet" href="/static/css/lab.css">
-<link rel="stylesheet" href="/static/css/dashboard.css?v=4">
-<link rel="stylesheet" href="/static/css/ai-assistant.css?v=1">
-<style>
-/* ═══ MAIN LAYOUT OVERRIDES ═══ */
-body{margin:0;display:flex;min-height:100vh}
-.main{margin-left:240px;flex:1;display:flex;flex-direction:column;min-height:100vh;position:relative}
-.content-frame{flex:1;border:none;width:100%;height:100%}
-/* hide topbar since each page has its own */
-.page-topbar{padding:0;margin:0;display:none}
-
-/* Professional sidebar tone: keep subtle markers instead of emoji icons */
-#mainSidebar .brand-icon{
-    font-size:.78em;
-    font-weight:700;
-    letter-spacing:.08em;
-}
-#mainSidebar .nav-item{gap:10px}
-#mainSidebar .nav-icon{
-    position:relative;
-    width:8px;
-    min-width:8px;
-    font-size:0;
-    line-height:0;
-    color:transparent;
-}
-#mainSidebar .nav-icon::before{
-    content:'';
-    display:block;
-    width:6px;
-    height:6px;
-    border-radius:999px;
-    background:#CFC6B9;
-    transition:background .2s ease, transform .2s ease;
-}
-#mainSidebar .nav-item:hover .nav-icon::before{background:#A99E91}
-#mainSidebar .nav-item.active .nav-icon::before{background:var(--gold);transform:scale(1.12)}
-
-@media(max-width:1024px){
-    .main{margin-left:64px}
-}
-.sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding-bottom: 20px; }
-.sidebar-scroll::-webkit-scrollbar { width: 4px; background: transparent; }
-.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
-.sidebar-scroll:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
-
-/* Settings Modal (Memos-style) */
-.settings-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.25); z-index:1000; display:none; justify-content:center; align-items:center; backdrop-filter:blur(2px); }
-.settings-overlay.open { display:flex; }
-.settings-dialog { background:var(--card,#fff); border:1px solid var(--border,#e7e5e2); border-radius:12px; box-shadow:var(--shadow-lg, 0 4px 12px rgba(0,0,0,0.08)); width:680px; max-width:92vw; height:520px; max-height:85vh; display:flex; flex-direction:column; overflow:hidden; }
-.settings-body { display:flex; flex:1; min-height:0; }
-.settings-sidebar { width:180px; border-right:1px solid var(--border,#e7e5e2); display:flex; flex-direction:column; padding:16px 12px; gap:2px; background:var(--card,#fff); }
-.settings-sidebar .group-label { font-size:11px; font-weight:600; color:var(--muted-fg,#78716c); padding:4px 12px; text-transform:uppercase; letter-spacing:0.05em; }
-.settings-sidebar .group-label.admin { margin-top:16px; }
-.settings-content { flex:1; display:flex; flex-direction:column; min-width:0; }
-.settings-scroll { flex:1; overflow-y:auto; padding:20px 24px; }
-.settings-footer { padding:12px 24px; border-top:1px solid var(--border,#e7e5e2); display:flex; justify-content:flex-end; gap:8px; background:var(--card,#fff); }
-.settings-user-block { border-top:1px solid var(--border,#e7e5e2); padding-top:12px; margin-top:auto; }
-.settings-user-row { display:flex; align-items:center; gap:8px; padding:4px 8px; }
-.settings-user-avatar { width:28px; height:28px; border-radius:50%; background:var(--muted,#f0efec); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--muted-fg,#78716c); flex-shrink:0; }
-.settings-version { display:flex; align-items:center; gap:6px; padding:6px 8px 0; font-size:11px; color:var(--muted-fg,#78716c); }
-.settings-version-dot { width:6px; height:6px; border-radius:50%; background:var(--success,#16a34a); flex-shrink:0; }
-</style>
-</head>
-<body>
-<!-- ═══ SIDEBAR (single source of truth) ═══ -->
-<aside class="sidebar" id="mainSidebar">
-    <div class="sidebar-brand">
-        <div class="brand-icon">CA</div>
-        <div class="brand-text">
-            <h2>Canifa AI</h2>
-            <span>Admin Console</span>
-        </div>
-    </div>
-
-    <div class="sidebar-scroll">
-    <div class="nav-group">
-        <div class="nav-group-label">Main</div>
-        <a data-page="roadmap.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">RM</span>
-            <span>Kế hoạch phát triển</span>
-        </a>
-        <a data-page="flow.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>Sơ đồ hoạt động</span>
-        </a>
-        <a data-page="experiment_detail.html?id=exp_chatbot_prod" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>Chatbot</span>
-            <span class="nav-badge badge-live">LIVE</span>
-        </a>
-        <a data-page="history.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>History</span>
-        </a>
-        <a data-page="product.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>Product Perf.</span>
-        </a>
-        <a data-page="product-desc.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">UD</span>
-            <span>Ultra Description</span>
-            <span class="nav-badge badge-beta">NEW</span>
-        </a>
-        <a data-page="ai-report.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>AI Data Analyst</span>
-            <span class="nav-badge badge-beta">NEW</span>
-        </a>
-        <a data-page="ai-sql.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:11px;font-weight:800;letter-spacing:.04em">SQL</span>
-            <span>AI sinh SQL</span>
-            <span class="nav-badge badge-beta">NEW</span>
-        </a>
-        <a data-page="live-monitor.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.08em">LIVE</span>
-            <span>Realtime Monitor</span>
-            <span class="nav-badge badge-live">LIVE</span>
-        </a>
-        <a data-page="prompt-optimizer.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">PO</span>
-            <span>Prompt Optimizer</span>
-            <span class="nav-badge badge-beta">NEW</span>
-        </a>
-        <a data-page="user-simulator.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">US</span>
-            <span>User Simulator</span>
-            <span class="nav-badge badge-beta">NEW</span>
-        </a>
-        <a data-page="user-insight.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">UI</span>
-            <span>User Insight</span>
-            <span class="nav-badge badge-beta">NEW</span>
-        </a>
-        <a data-page="limit.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">RL</span>
-            <span>Rate Limit</span>
-            <span class="nav-badge badge-beta">NEW</span>
-        </a>
-        <a data-page="regression-test.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">RT</span>
-            <span>Regression Test</span>
-            <span class="nav-badge badge-beta">NEW</span>
-        </a>
-        <a data-page="stress-test.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">ST</span>
-            <span>Stress Test</span>
-            <span class="nav-badge badge-beta">NEW</span>
-        </a>
-        <a data-page="competitor-research.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">CR</span>
-            <span>Competitor Research</span>
-            <span class="nav-badge badge-beta">NEW</span>
-        </a>
-    </div>
-
-    <div class="nav-group">
-        <div class="nav-group-label">Workspace</div>
-        <a data-page="resources.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>Resources</span>
-        </a>
-        <a data-page="notes.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>Team Notes</span>
-        </a>
-        <a data-page="changelog.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>Changelog</span>
-        </a>
-        <a data-page="guide.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>Hướng dẫn</span>
-        </a>
-    </div>
-
-
-
-    <div class="nav-group">
-        <div class="nav-group-label">Thử nghiệm</div>
-        <a data-page="test_sql.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>Text-to-SQL</span>
-            <span class="nav-badge badge-beta">BETA</span>
-        </a>
-        <a data-page="test_db.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>DB Test</span>
-            <span class="nav-badge badge-beta">BETA</span>
-        </a>
-        <a data-page="feedback_demo.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>Feedback Demo</span>
-            <span class="nav-badge badge-new">NEW</span>
-        </a>
-        <a data-page="http://172.16.2.210:5006/static/index.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>Chatbot (Dev)</span>
-            <span class="nav-badge badge-beta">DEV</span>
-        </a>
-        <a data-page="cache.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon"></span>
-            <span>Cache Manager</span>
-        </a>
-        <a data-page="sku-search.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">SK</span>
-            <span>SKU Search</span>
-            <span class="nav-badge badge-beta">DEV</span>
-        </a>
-        <a data-page="tag-search.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">TG</span>
-            <span>Tag Search</span>
-            <span class="nav-badge badge-beta">DEV</span>
-        </a>
-        <a data-page="store-search.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">ST</span>
-            <span>Store Search</span>
-            <span class="nav-badge badge-beta">DEV</span>
-        </a>
-        <a data-page="image-search.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">IM</span>
-            <span>Image Search</span>
-            <span class="nav-badge badge-new">NEW</span>
-        </a>
-        <a data-page="lead-flow.html" class="nav-item" onclick="navigateTo(this)">
-            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">LG</span>
-            <span>Lead Generation</span>
-            <span class="nav-badge badge-new">NEW</span>
-        </a>
-    </div>
-
-    <div class="nav-group">
-        <div class="nav-group-label">External</div>
-        <a href="/docs" target="_blank" class="nav-item">
-            <span class="nav-icon"></span>
-            <span>API Docs</span>
-        </a>
-        <a href="/redoc" target="_blank" class="nav-item">
-            <span class="nav-icon"></span>
-            <span>ReDoc</span>
-        </a>
-    </div>
-
-    </div>
-    <div class="sidebar-footer">
-        <div class="settings-user-block">
-            <div class="settings-user-row">
-                <div class="settings-user-avatar" id="userAvatar">A</div>
-                <span style="flex:1; font-size:13px; font-weight:500; color:var(--foreground,#1c1917);" id="userName">admin</span>
-                <button class="btn-icon" style="padding:4px;font-size:13px;" onclick="openSettingsModal()" title="Settings">⚙</button>
-                <button class="btn-icon" style="padding:4px;font-size:13px;" onclick="handleLogout()" title="Đăng xuất">⏻</button>
-            </div>
-            <div class="settings-version">
-                <span class="settings-version-dot"></span>
-                <strong>v2.5.0</strong> · Online
-            </div>
-        </div>
-    </div>
-</aside>
-
-<!-- ═══ SETTINGS MODAL (Memos-style: sidebar + content) ═══ -->
-<div id="llmSettingsModal" class="settings-overlay" onclick="if(event.target===this)closeSettingsModal()">
-    <div class="settings-dialog">
-        <div class="settings-body">
-            <!-- LEFT SIDEBAR -->
-            <div class="settings-sidebar">
-                <span class="group-label">Basic</span>
-                <div class="section-menu-item active" onclick="switchMainTab('account')" data-tab="account">
-                    <i class="fas fa-user icon" style="font-size:12px;width:16px;text-align:center;"></i> <span>My Account</span>
-                </div>
-                <div class="section-menu-item" onclick="switchMainTab('llm')" data-tab="llm">
-                    <i class="fas fa-key icon" style="font-size:12px;width:16px;text-align:center;"></i> <span>LLM Keys</span>
-                </div>
-                <div class="section-menu-item" onclick="switchMainTab('connection')" data-tab="connection">
-                    <i class="fas fa-database icon" style="font-size:12px;width:16px;text-align:center;"></i> <span>Kết nối</span>
-                </div>
-                <div class="section-menu-item" onclick="switchMainTab('display')" data-tab="display">
-                    <i class="fas fa-palette icon" style="font-size:12px;width:16px;text-align:center;"></i> <span>Giao diện</span>
-                </div>
-
-                <span class="group-label admin">Admin</span>
-                <div class="section-menu-item" onclick="switchMainTab('advanced')" data-tab="advanced">
-                    <i class="fas fa-cog icon" style="font-size:12px;width:16px;text-align:center;"></i> <span>Nâng cao</span>
-                </div>
-
-                <!-- Spacer -->
-                <div style="flex:1;"></div>
-
-                <!-- User row at bottom of settings sidebar -->
-                <div class="settings-user-block">
-                    <div class="settings-user-row">
-                        <div class="settings-user-avatar" id="settingsAvatar">A</div>
-                        <span style="flex:1; font-size:13px; font-weight:500; color:var(--foreground,#1c1917);" id="settingsUserName">admin</span>
-                        <button class="btn-icon" style="padding:4px;" title="Copy ID" onclick="navigator.clipboard.writeText(localStorage.getItem('canifa_user')||'')"><i style="font-size:11px;" class="fas fa-copy"></i></button>
-                    </div>
-                    <div class="settings-version">
-                        <span class="settings-version-dot"></span>
-                        <strong>v2.5.0</strong> · Online
-                    </div>
-                </div>
-            </div>
-
-            <!-- RIGHT CONTENT -->
-            <div class="settings-content">
-                <div class="settings-scroll">
-                    <!-- TAB: Account -->
-                    <div id="mainTab_account" class="setting-tab-content">
-                        <div class="setting-section">
-                            <div class="setting-section-header">
-                                <h3>My Account</h3>
-                                <p class="desc">Thông tin tài khoản cá nhân</p>
-                            </div>
-                            <div class="setting-section-body">
-                                <div class="setting-row">
-                                    <div class="setting-label">
-                                        <span class="setting-label-text">Username</span>
-                                    </div>
-                                    <div class="setting-control">
-                                        <span id="settingUsername" style="font-size:13px; font-weight:600; color:var(--foreground);">—</span>
-                                    </div>
-                                </div>
-                                <div class="setting-row">
-                                    <div class="setting-label">
-                                        <span class="setting-label-text">Role</span>
-                                    </div>
-                                    <div class="setting-control">
-                                        <span class="badge badge-info" id="settingRole">user</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- TAB: LLM Keys -->
-                    <div id="mainTab_llm" class="setting-tab-content" style="display:none;">
-                        <div class="setting-section">
-                            <div class="setting-section-header">
-                                <h3>LLM API Keys</h3>
-                                <p class="desc">Cấu hình API keys cho các mô hình AI</p>
-                            </div>
-                            <div class="setting-section-body">
-                                <div class="setting-row vertical">
-                                    <div class="setting-label">
-                                        <span class="setting-label-text">Codex Auth Token</span>
-                                        <p class="setting-label-desc">Token xác thực cho Codex API</p>
-                                    </div>
-                                    <div class="setting-control" style="width:100%;">
-                                        <input class="input" type="password" id="inputCodexToken" placeholder="eyJhbGciOiJIUzI1NiIs..." style="width:100%; font-family:var(--font-mono,monospace);">
-                                    </div>
-                                </div>
-                                <div class="setting-row vertical">
-                                    <div class="setting-label">
-                                        <span class="setting-label-text">OpenAI API Key</span>
-                                        <p class="setting-label-desc">Tuỳ chọn — dùng cho GPT-4o, GPT-5.4</p>
-                                    </div>
-                                    <div class="setting-control" style="width:100%;">
-                                        <input class="input" type="password" id="inputOpenAiKey" placeholder="sk-..." style="width:100%; font-family:var(--font-mono,monospace);">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- TAB: Connection -->
-                    <div id="mainTab_connection" class="setting-tab-content" style="display:none;">
-                        <div class="setting-section">
-                            <div class="setting-section-header">
-                                <h3>Kết nối</h3>
-                                <p class="desc">Cấu hình endpoint và database</p>
-                            </div>
-                            <div class="setting-section-body">
-                                <div class="setting-row">
-                                    <div class="setting-label">
-                                        <span class="setting-label-text">Backend API</span>
-                                        <p class="setting-label-desc">URL backend server</p>
-                                    </div>
-                                    <div class="setting-control">
-                                        <span style="font-size:12px; font-family:var(--font-mono,monospace); color:var(--muted-fg);" id="settingBackendUrl">—</span>
-                                    </div>
-                                </div>
-                                <div class="setting-row">
-                                    <div class="setting-label">
-                                        <span class="setting-label-text">Trạng thái</span>
-                                        <p class="setting-label-desc">Kết nối tới backend</p>
-                                    </div>
-                                    <div class="setting-control">
-                                        <span class="badge badge-success" id="settingConnStatus">Connected</span>
-                                    </div>
-                                </div>
-                                <hr class="separator">
-                                <div class="setting-row">
-                                    <div class="setting-label">
-                                        <span class="setting-label-text">Langfuse</span>
-                                        <p class="setting-label-desc">Observability & tracing</p>
-                                    </div>
-                                    <div class="setting-control">
-                                        <a href="http://172.16.2.210:3100" target="_blank" class="btn btn-outline btn-sm"><i class="fas fa-external-link-alt" style="margin-right:4px;"></i> Open</a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- TAB: Display -->
-                    <div id="mainTab_display" class="setting-tab-content" style="display:none;">
-                        <div class="setting-section">
-                            <div class="setting-section-header">
-                                <h3>Giao diện</h3>
-                                <p class="desc">Tùy chỉnh theme và hiển thị</p>
-                            </div>
-                            <div class="setting-section-body">
-                                <div class="setting-row">
-                                    <div class="setting-label">
-                                        <span class="setting-label-text">Theme</span>
-                                        <p class="setting-label-desc">Giao diện sáng/tối</p>
-                                    </div>
-                                    <div class="setting-control">
-                                        <select class="select" disabled><option>Light (Memos)</option></select>
-                                    </div>
-                                </div>
-                                <div class="setting-row">
-                                    <div class="setting-label">
-                                        <span class="setting-label-text">Sidebar mặc định</span>
-                                        <p class="setting-label-desc">Mở rộng hoặc thu gọn</p>
-                                    </div>
-                                    <div class="setting-control">
-                                        <select class="select"><option>Expanded</option><option>Collapsed</option></select>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- TAB: Advanced -->
-                    <div id="mainTab_advanced" class="setting-tab-content" style="display:none;">
-                        <div class="setting-section">
-                            <div class="setting-section-header">
-                                <h3>Nâng cao</h3>
-                                <p class="desc">Cấu hình admin</p>
-                            </div>
-                            <div class="setting-section-body">
-                                <div class="setting-row">
-                                    <div class="setting-label">
-                                        <span class="setting-label-text">Clear Cache</span>
-                                        <p class="setting-label-desc">Xóa cache sản phẩm & embedding</p>
-                                    </div>
-                                    <div class="setting-control">
-                                        <button class="btn btn-outline btn-sm" onclick="fetch('/api/cache/clear',{method:'POST',headers:{'Authorization':'Bearer '+localStorage.getItem('canifa_token')}}).then(()=>alert('Cache cleared!'))"><i class="fas fa-broom" style="margin-right:4px;"></i> Clear</button>
-                                    </div>
-                                </div>
-                                <div class="setting-row">
-                                    <div class="setting-label">
-                                        <span class="setting-label-text">Health Check</span>
-                                        <p class="setting-label-desc">Kiểm tra trạng thái hệ thống</p>
-                                    </div>
-                                    <div class="setting-control">
-                                        <button class="btn btn-outline btn-sm" onclick="fetch('/health').then(r=>r.json()).then(d=>alert(JSON.stringify(d,null,2)))"><i class="fas fa-heartbeat" style="margin-right:4px;"></i> Check</button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Footer -->
-                <div class="settings-footer">
-                    <button class="btn btn-outline" onclick="closeSettingsModal()">Hủy</button>
-                    <button class="btn btn-primary" onclick="saveSettingsModal()"><i class="fas fa-check" style="margin-right:4px;"></i> Lưu</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- ═══ MAIN CONTENT ═══ -->
-<div class="main">
-    <iframe id="contentFrame" class="content-frame" src="/static/product.html"></iframe>
-</div>
-
-<script>
-// ═══ AUTH GUARD ═══
-(function authGuard() {
-    const token = localStorage.getItem('canifa_token');
-    if (!token) {
-        window.location.replace('/static/login.html?redirect=' + encodeURIComponent(window.location.href));
-        return;
-    }
-    // Admin only sees admin.html
-    const _u = JSON.parse(localStorage.getItem('canifa_user') || '{}');
-    if (_u.role === 'admin') {
-        window.location.replace('/static/admin.html');
-        return;
-    }
-    // Show user info in sidebar
-    try {
-        const user = JSON.parse(localStorage.getItem('canifa_user') || '{}');
-        const nameEl = document.getElementById('userName');
-        const avatarEl = document.getElementById('userAvatar');
-        if (nameEl && user.username) nameEl.textContent = user.username;
-        if (avatarEl && user.username) avatarEl.textContent = user.username.charAt(0).toUpperCase();
-        // Show Admin Console link for admin users
-        if (user.role === 'admin') {
-            const extGroup = document.querySelector('#mainSidebar .nav-group:last-of-type .nav-group-label');
-            if (extGroup) {
-                const adminLink = document.createElement('a');
-                adminLink.href = '/static/admin.html';
-                adminLink.className = 'nav-item';
-                adminLink.innerHTML = '<span class="nav-icon" style="font-size:10px;font-weight:800">⚙</span><span>Admin Console</span><span class="nav-badge badge-live">ADMIN</span>';
-                extGroup.after(adminLink);
-            }
-        }
-    } catch(e) {}
-})();
-
-function handleLogout() {
-    localStorage.removeItem('canifa_token');
-    localStorage.removeItem('canifa_user');
-    window.location.replace('/static/login.html');
-}
-
-// ═══ SETTINGS MODAL LOGIC ═══
-function switchMainTab(tabName) {
-    document.querySelectorAll('#llmSettingsModal .setting-tab-content').forEach(el => el.style.display = 'none');
-    const tab = document.getElementById('mainTab_' + tabName);
-    if (tab) tab.style.display = '';
-    document.querySelectorAll('#llmSettingsModal .section-menu-item').forEach(el => {
-        el.classList.toggle('active', el.dataset.tab === tabName);
-    });
-}
-
-async function loadUserSettings() {
-    const token = localStorage.getItem('canifa_token');
-    if (!token) return;
-    try {
-        const res = await fetch('/api/auth/me', { headers: { 'Authorization': 'Bearer ' + token }});
-        if (res.ok) {
-            const data = await res.json();
-            const user = data.user || {};
-            const settings = user.settings || {};
-            document.getElementById('inputCodexToken').value = settings.codex_token || '';
-            document.getElementById('inputOpenAiKey').value = settings.openai_key || '';
-            localStorage.setItem('canifa_user', JSON.stringify(user));
-        }
-    } catch(e) { console.error('Failed to load settings', e); }
-}
-
-function openSettingsModal() {
-    const modal = document.getElementById('llmSettingsModal');
-    // Populate user info
-    try {
-        const user = JSON.parse(localStorage.getItem('canifa_user') || '{}');
-        const name = user.username || 'user';
-        document.getElementById('settingsUserName').textContent = name;
-        document.getElementById('settingsAvatar').textContent = name.charAt(0).toUpperCase();
-        document.getElementById('settingUsername').textContent = name;
-        document.getElementById('settingRole').textContent = user.role || 'user';
-        document.getElementById('settingBackendUrl').textContent = window.location.origin;
-    } catch(e) {}
-    // Reset to first tab
-    switchMainTab('account');
-    modal.classList.add('open');
-    loadUserSettings();
-}
-
-function closeSettingsModal() {
-    document.getElementById('llmSettingsModal').classList.remove('open');
-}
-
-async function saveSettingsModal() {
-    const btn = document.querySelector('.settings-footer .btn-primary');
-    const ogHTML = btn.innerHTML;
-    btn.innerHTML = '<i class="fas fa-spinner fa-spin" style="margin-right:4px;"></i> Đang lưu...';
-    btn.disabled = true;
-
-    const codex = document.getElementById('inputCodexToken').value.trim();
-    const oai = document.getElementById('inputOpenAiKey').value.trim();
-    
-    const settings = {};
-    if (codex) settings.codex_token = codex;
-    if (oai) settings.openai_key = oai;
-
-    try {
-        const token = localStorage.getItem('canifa_token');
-        const res = await fetch('/api/auth/me/settings', {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
-            body: JSON.stringify({ settings: settings })
-        });
-        if (res.ok) {
-            closeSettingsModal();
-        } else {
-            alert('Lỗi lưu cài đặt');
-        }
-    } catch(e) {
-        alert('Lỗi hệ thống');
-    } finally {
-        btn.innerHTML = ogHTML;
-        btn.disabled = false;
-    }
-}
-
-// ═══ NAVIGATION ═══
-function navigateTo(el) {
-    const page = el.getAttribute('data-page');
-    if (!page) return;
-    const src = page.startsWith('http') ? page : '/static/' + page + (page.includes('?') ? '&' : '?') + 't=' + Date.now();
-    document.getElementById('contentFrame').src = src;
-    // Update active state
-    document.querySelectorAll('#mainSidebar .nav-item').forEach(n => n.classList.remove('active'));
-    el.classList.add('active');
-    // Update URL without reload
-    const pageName = page.split('?')[0].replace('.html','');
-    history.pushState({page}, '', '/static/main.html?page=' + page);
-    // Update title
-    document.title = (el.querySelector('span:nth-child(2)')?.textContent || 'Canifa AI') + ' — Canifa AI';
-}
-
-// ═══ INIT: Load page from URL param ═══
-(function() {
-    const params = new URLSearchParams(window.location.search);
-    const page = params.get('page');
-    
-    let qs = new URLSearchParams();
-    for (const [k, v] of params.entries()) {
-        if (k !== 'page') qs.append(k, v);
-    }
-    const qsString = qs.toString() ? ('&' + qs.toString()) : '';
-
-    if (page) {
-        const src = page.startsWith('http') ? page : '/static/' + page + (page.includes('?') ? '&' : '?') + 't=' + Date.now() + qsString;
-        document.getElementById('contentFrame').src = src;
-        // Highlight active nav
-        document.querySelectorAll('#mainSidebar .nav-item[data-page]').forEach(el => {
-            if (el.getAttribute('data-page') === page) {
-                el.classList.add('active');
-            } else {
-                el.classList.remove('active');
-            }
-        });
-    } else {
-        // Default: dashboard active
-        const dashLink = document.querySelector('[data-page="product.html"]');
-        if (dashLink) dashLink.classList.add('active');
-    }
-})();
-
-// ═══ HANDLE BACK/FORWARD ═══
-window.addEventListener('popstate', function(e) {
-    if (e.state && e.state.page) {
-        const src = e.state.page.startsWith('http') ? e.state.page : '/static/' + e.state.page + (e.state.page.includes('?') ? '&' : '?') + 't=' + Date.now();
-        document.getElementById('contentFrame').src = src;
-        document.querySelectorAll('#mainSidebar .nav-item[data-page]').forEach(el => {
-            el.classList.toggle('active', el.getAttribute('data-page') === e.state.page);
-        });
-    }
-});
-</script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Canifa AI Platform</title>
+<script src="/static/auth.js"></script>
+<link rel="stylesheet" href="/static/css/theme.css">
+<link rel="stylesheet" href="/static/css/components.css">
+<link rel="stylesheet" href="/static/css/lab.css">
+<link rel="stylesheet" href="/static/css/dashboard.css?v=4">
+<link rel="stylesheet" href="/static/css/ai-assistant.css?v=1">
+<style>
+/* ═══ MAIN LAYOUT OVERRIDES ═══ */
+body{margin:0;display:flex;min-height:100vh}
+.main{margin-left:240px;flex:1;display:flex;flex-direction:column;min-height:100vh;position:relative}
+.content-frame{flex:1;border:none;width:100%;height:100%}
+/* hide topbar since each page has its own */
+.page-topbar{padding:0;margin:0;display:none}
+
+/* Professional sidebar tone: keep subtle markers instead of emoji icons */
+#mainSidebar .brand-icon{
+    font-size:.78em;
+    font-weight:700;
+    letter-spacing:.08em;
+}
+#mainSidebar .nav-item{gap:10px}
+#mainSidebar .nav-icon{
+    position:relative;
+    width:8px;
+    min-width:8px;
+    font-size:0;
+    line-height:0;
+    color:transparent;
+}
+#mainSidebar .nav-icon::before{
+    content:'';
+    display:block;
+    width:6px;
+    height:6px;
+    border-radius:999px;
+    background:#CFC6B9;
+    transition:background .2s ease, transform .2s ease;
+}
+#mainSidebar .nav-item:hover .nav-icon::before{background:#A99E91}
+#mainSidebar .nav-item.active .nav-icon::before{background:var(--gold);transform:scale(1.12)}
+
+@media(max-width:1024px){
+    .main{margin-left:64px}
+}
+.sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding-bottom: 20px; }
+.sidebar-scroll::-webkit-scrollbar { width: 4px; background: transparent; }
+.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
+.sidebar-scroll:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
+
+/* Settings Modal */
+.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1000; display: none; justify-content: center; align-items: center; backdrop-filter: blur(2px); }
+.modal-overlay.open { display: flex; animation: fadeIn 0.2s; }
+.modal-content { background: white; border-radius: 12px; padding: 24px; width: 420px; max-width: 90%; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
+.modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; color:var(--text-main); }
+.modal-body { margin: 20px 0; }
+.form-group { margin-bottom: 14px; }
+.form-group label { display: block; font-size: 12px; font-weight: 600; color:var(--text-muted); margin-bottom: 6px; }
+.form-group input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; font-family: monospace; font-size: 13px; color:var(--text-main); }
+.form-group input:focus { outline:none; border-color:var(--gold); }
+.modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
+.btn { padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition:all 0.2s; }
+.btn-cancel { background: #f1f5f9; color: #475569; }
+.btn-cancel:hover { background: #e2e8f0; }
+.btn-save { background: var(--gold); color: white; }
+.btn-save:hover { background: var(--gold-d,#B39356); }
+</style>
+</head>
+<body>
+<!-- ═══ SIDEBAR (single source of truth) ═══ -->
+<aside class="sidebar" id="mainSidebar">
+    <div class="sidebar-brand">
+        <div class="brand-icon">CA</div>
+        <div class="brand-text">
+            <h2>Canifa AI</h2>
+            <span>Admin Console</span>
+        </div>
+    </div>
+
+    <div class="sidebar-scroll">
+    <div class="nav-group">
+        <div class="nav-group-label">Main</div>
+        <a data-page="roadmap.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">RM</span>
+            <span>Kế hoạch phát triển</span>
+        </a>
+        <a data-page="flow.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>Sơ đồ hoạt động</span>
+        </a>
+        <a data-page="experiment_detail.html?id=exp_chatbot_prod" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>Chatbot</span>
+            <span class="nav-badge badge-live">LIVE</span>
+        </a>
+        <a data-page="history.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>History</span>
+        </a>
+        <a data-page="product.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>Product Perf.</span>
+        </a>
+        <a data-page="product-desc.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">UD</span>
+            <span>Ultra Description</span>
+            <span class="nav-badge badge-beta">NEW</span>
+        </a>
+        <a data-page="ai-report.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>AI Data Analyst</span>
+            <span class="nav-badge badge-beta">NEW</span>
+        </a>
+        <a data-page="ai-sql.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:11px;font-weight:800;letter-spacing:.04em">SQL</span>
+            <span>AI sinh SQL</span>
+            <span class="nav-badge badge-beta">NEW</span>
+        </a>
+        <a data-page="live-monitor.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.08em">LIVE</span>
+            <span>Realtime Monitor</span>
+            <span class="nav-badge badge-live">LIVE</span>
+        </a>
+        <a data-page="prompt-optimizer.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">PO</span>
+            <span>Prompt Optimizer</span>
+            <span class="nav-badge badge-beta">NEW</span>
+        </a>
+        <a data-page="user-simulator.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">US</span>
+            <span>User Simulator</span>
+            <span class="nav-badge badge-beta">NEW</span>
+        </a>
+        <a data-page="user-insight.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">UI</span>
+            <span>User Insight</span>
+            <span class="nav-badge badge-beta">NEW</span>
+        </a>
+        <a data-page="knowledge-graph.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">KG</span>
+            <span>Knowledge Graph</span>
+            <span class="nav-badge badge-beta">NEW</span>
+        </a>
+        <a data-page="reaction-simulator.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">🔮</span>
+            <span>Reaction Sim.</span>
+            <span class="nav-badge badge-beta">NEW</span>
+        </a>
+        <a data-page="regression-test.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">RT</span>
+            <span>Regression Test</span>
+            <span class="nav-badge badge-beta">NEW</span>
+        </a>
+        <a data-page="stress-test.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">ST</span>
+            <span>Stress Test</span>
+            <span class="nav-badge badge-beta">NEW</span>
+        </a>
+        <a data-page="diagram-agent.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">DA</span>
+            <span>AI Diagram</span>
+            <span class="nav-badge badge-beta">NEW</span>
+        </a>
+        <a data-page="competitor-research.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">CR</span>
+            <span>Competitor Research</span>
+            <span class="nav-badge badge-beta">NEW</span>
+        </a>
+    </div>
+
+    <div class="nav-group">
+        <div class="nav-group-label">Workspace</div>
+        <a data-page="resources.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>Resources</span>
+        </a>
+        <a data-page="notes.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>Team Notes</span>
+        </a>
+        <a data-page="changelog.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>Changelog</span>
+        </a>
+        <a data-page="guide.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>Hướng dẫn</span>
+        </a>
+    </div>
+
+
+
+    <div class="nav-group">
+        <div class="nav-group-label">Thử nghiệm</div>
+        <a data-page="test_sql.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>Text-to-SQL</span>
+            <span class="nav-badge badge-beta">BETA</span>
+        </a>
+        <a data-page="test_db.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>DB Test</span>
+            <span class="nav-badge badge-beta">BETA</span>
+        </a>
+        <a data-page="feedback_demo.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>Feedback Demo</span>
+            <span class="nav-badge badge-new">NEW</span>
+        </a>
+        <a data-page="http://172.16.2.210:5006/static/index.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>Chatbot (Dev)</span>
+            <span class="nav-badge badge-beta">DEV</span>
+        </a>
+        <a data-page="cache.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon"></span>
+            <span>Cache Manager</span>
+        </a>
+        <a data-page="sku-search.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">SK</span>
+            <span>SKU Search</span>
+            <span class="nav-badge badge-beta">DEV</span>
+        </a>
+        <a data-page="tag-search.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">TG</span>
+            <span>Tag Search</span>
+            <span class="nav-badge badge-beta">DEV</span>
+        </a>
+        <a data-page="store-search.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">ST</span>
+            <span>Store Search</span>
+            <span class="nav-badge badge-beta">DEV</span>
+        </a>
+        <a data-page="image-search.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">IM</span>
+            <span>Image Search</span>
+            <span class="nav-badge badge-new">NEW</span>
+        </a>
+        <a data-page="lead-flow.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">LG</span>
+            <span>Lead Generation</span>
+            <span class="nav-badge badge-new">NEW</span>
+        </a>
+        <a data-page="limit.html" class="nav-item" onclick="navigateTo(this)">
+            <span class="nav-icon" style="font-size:10px;font-weight:800;letter-spacing:.04em">RL</span>
+            <span>Rate Limit</span>
+            <span class="nav-badge badge-beta">NEW</span>
+        </a>
+    </div>
+
+    <div class="nav-group">
+        <div class="nav-group-label">External</div>
+        <a href="/docs" target="_blank" class="nav-item">
+            <span class="nav-icon"></span>
+            <span>API Docs</span>
+        </a>
+        <a href="/redoc" target="_blank" class="nav-item">
+            <span class="nav-icon"></span>
+            <span>ReDoc</span>
+        </a>
+    </div>
+
+    </div>
+    <div class="sidebar-footer">
+        <div class="user-info" id="sidebarUserInfo" style="display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:8px;border-radius:8px;background:var(--bg)">
+            <div style="width:28px;height:28px;border-radius:50%;background:var(--gold-l,#FFFBEB);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:var(--gold,#B45309)" id="userAvatar">A</div>
+            <span style="flex:1;font-size:12px;color:var(--t);font-weight:600" id="userName">admin</span>
+            <button onclick="openSettingsModal()" title="Cài đặt LLM" style="background:none;border:none;cursor:pointer;color:var(--m);font-size:14px;padding:4px;transition:color .2s" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--m)'">⚙</button>
+            <button onclick="handleLogout()" title="Đăng xuất" style="background:none;border:none;cursor:pointer;color:var(--m);font-size:14px;padding:4px;transition:color .2s" onmouseover="this.style.color='#ef4444'" onmouseout="this.style.color='var(--m)'">⏻</button>
+        </div>
+        <div class="version-info">
+            <span class="version-dot"></span>
+            <span class="version-text"><strong>v2.5.0</strong> · Online</span>
+        </div>
+    </div>
+</aside>
+
+<!-- ═══ LLM SETTINGS MODAL ═══ -->
+<div id="llmSettingsModal" class="modal-overlay">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3>Cài đặt LLM Cá nhân</h3>
+        </div>
+        <div class="modal-body">
+            <div class="form-group">
+                <label>Codex Auth Token</label>
+                <input type="password" id="inputCodexToken" placeholder="eyJhbGciOiJIUzI1NiIs..." />
+            </div>
+            <div class="form-group">
+                <label>OpenAI API Key (Tuỳ chọn)</label>
+                <input type="password" id="inputOpenAiKey" placeholder="sk-..." />
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn-cancel" onclick="closeSettingsModal()">Hủy</button>
+            <button class="btn btn-save" onclick="saveSettingsModal()">Lưu lại</button>
+        </div>
+    </div>
+</div>
+
+<!-- ═══ MAIN CONTENT ═══ -->
+<div class="main">
+    <iframe id="contentFrame" class="content-frame" src="/static/product.html"></iframe>
+</div>
+
+<script>
+// ═══ AUTH GUARD (via auth.js) ═══
+canifaAuth.guard();
+canifaAuth.updateSidebarUser();
+
+function handleLogout() {
+    canifaAuth.logout();
+}
+
+// ═══ SETTINGS MODAL LOGIC ═══
+async function loadUserSettings() {
+    const token = localStorage.getItem('canifa_token');
+    if (!token) return;
+    try {
+        const res = await fetch('/api/auth/me', { headers: { 'Authorization': 'Bearer ' + token }});
+        if (res.ok) {
+            const data = await res.json();
+            const user = data.user || {};
+            const settings = user.settings || {};
+            document.getElementById('inputCodexToken').value = settings.codex_token || '';
+            document.getElementById('inputOpenAiKey').value = settings.openai_key || '';
+            // update cached user settings just in case
+            localStorage.setItem('canifa_user', JSON.stringify(user));
+        }
+    } catch(e) { console.error('Failed to load settings', e); }
+}
+
+function openSettingsModal() {
+    document.getElementById('llmSettingsModal').classList.add('open');
+    loadUserSettings(); // refresh on open
+}
+
+function closeSettingsModal() {
+    document.getElementById('llmSettingsModal').classList.remove('open');
+}
+
+async function saveSettingsModal() {
+    const btn = document.querySelector('.btn-save');
+    const ogText = btn.textContent;
+    btn.textContent = 'Đang lưu...';
+    btn.disabled = true;
+
+    const codex = document.getElementById('inputCodexToken').value.trim();
+    const oai = document.getElementById('inputOpenAiKey').value.trim();
+    
+    const settings = {};
+    if (codex) settings.codex_token = codex;
+    if (oai) settings.openai_key = oai;
+
+    try {
+        const token = localStorage.getItem('canifa_token');
+        const res = await fetch('/api/auth/me/settings', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
+            body: JSON.stringify({ settings: settings })
+        });
+        if (res.ok) {
+            closeSettingsModal();
+        } else {
+            alert('Lỗi lưu cài đặt');
+        }
+    } catch(e) {
+        alert('Lỗi hệ thống');
+    } finally {
+        btn.textContent = ogText;
+        btn.disabled = false;
+    }
+}
+
+// ═══ NAVIGATION ═══
+function navigateTo(el) {
+    const page = el.getAttribute('data-page');
+    if (!page) return;
+    const src = page.startsWith('http') ? page : '/static/' + page + (page.includes('?') ? '&' : '?') + 't=' + Date.now();
+    document.getElementById('contentFrame').src = src;
+    // Update active state
+    document.querySelectorAll('#mainSidebar .nav-item').forEach(n => n.classList.remove('active'));
+    el.classList.add('active');
+    // Update URL without reload
+    const pageName = page.split('?')[0].replace('.html','');
+    history.pushState({page}, '', '/static/main.html?page=' + page);
+    // Update title
+    document.title = (el.querySelector('span:nth-child(2)')?.textContent || 'Canifa AI') + ' — Canifa AI';
+}
+
+// ═══ INIT: Load page from URL param ═══
+(function() {
+    const params = new URLSearchParams(window.location.search);
+    const page = params.get('page');
+    if (page) {
+        const src = page.startsWith('http') ? page : '/static/' + page + (page.includes('?') ? '&' : '?') + 't=' + Date.now();
+        document.getElementById('contentFrame').src = src;
+        // Highlight active nav
+        document.querySelectorAll('#mainSidebar .nav-item[data-page]').forEach(el => {
+            if (el.getAttribute('data-page') === page) {
+                el.classList.add('active');
+            } else {
+                el.classList.remove('active');
+            }
+        });
+    } else {
+        // Default: dashboard active
+        const dashLink = document.querySelector('[data-page="product.html"]');
+        if (dashLink) dashLink.classList.add('active');
+    }
+})();
+
+// ═══ HANDLE BACK/FORWARD ═══
+window.addEventListener('popstate', function(e) {
+    if (e.state && e.state.page) {
+        const src = e.state.page.startsWith('http') ? e.state.page : '/static/' + e.state.page + (e.state.page.includes('?') ? '&' : '?') + 't=' + Date.now();
+        document.getElementById('contentFrame').src = src;
+        document.querySelectorAll('#mainSidebar .nav-item[data-page]').forEach(el => {
+            el.classList.toggle('active', el.getAttribute('data-page') === e.state.page);
+        });
+    }
+});
+</script>
+</body>
+</html>

backend/static/reaction-simulator.html

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<title>Reaction Simulator — Canifa AI</title>
+<link rel="stylesheet" href="/static/lab.css">
+<link rel="stylesheet" href="/static/dashboard.css">
+<script src="/static/frame-detect.js"></script>
+<style>
+body{margin:0;background:var(--bg);overflow:hidden;height:100vh;display:flex;flex-direction:column}
+
+/* TOPBAR */
+.page-topbar{height:50px;background:var(--s);border-bottom:1px solid var(--b);display:flex;align-items:center;padding:0 20px;flex-shrink:0;gap:12px}
+.topbar-icon{width:30px;height:30px;background:linear-gradient(135deg,#EA580C,#B45309);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff}
+.topbar-title{font-size:14px;font-weight:700;color:var(--t)}
+.topbar-badges{margin-left:auto;display:flex;gap:6px}
+.tbadge{padding:3px 8px;border-radius:12px;font-size:9px;font-weight:700;letter-spacing:.04em}
+.tbadge-ai{background:var(--diamond-l);color:var(--diamond)}
+.tbadge-beta{background:var(--orange-l);color:var(--orange)}
+
+/* TABS */
+.tab-bar{display:flex;background:var(--s);border-bottom:1px solid var(--b);padding:0 20px;flex-shrink:0}
+.tab-btn{padding:10px 18px;font-size:12px;font-weight:600;color:var(--m);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;font-family:inherit;transition:all .15s}
+.tab-btn:hover{color:var(--t)}
+.tab-btn.active{color:var(--gold);border-bottom-color:var(--gold)}
+.tab-content{display:none;flex:1;overflow:hidden;min-height:0}
+.tab-content.active{display:flex}
+
+/* ═══ TAB 1: SIMULATOR ═══ */
+.sim-layout{flex:1;display:flex;overflow:hidden}
+.sim-left{width:360px;flex-shrink:0;background:var(--s);border-right:1px solid var(--b);display:flex;flex-direction:column;overflow:hidden}
+.sim-right{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:16px}
+.sim-right::-webkit-scrollbar{width:3px}
+.sim-right::-webkit-scrollbar-thumb{background:var(--b);border-radius:2px}
+
+/* Form */
+.form-section{padding:14px 16px;border-bottom:1px solid var(--b)}
+.form-section:last-child{border-bottom:none}
+.form-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--m);margin-bottom:6px}
+.form-select,.form-textarea{width:100%;padding:9px 10px;border:1px solid var(--b);border-radius:var(--rs);font-size:12px;font-family:inherit;color:var(--t);background:var(--bg);outline:none}
+.form-textarea{min-height:90px;resize:vertical;line-height:1.6}
+.form-textarea:focus,.form-select:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(180,83,9,.06)}
+.form-textarea::placeholder{color:var(--f)}
+
+/* Tuning sliders */
+.tuning-section{padding:10px 16px;flex:1;overflow-y:auto}
+.tuning-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--m);margin-bottom:8px;display:flex;align-items:center;gap:6px}
+.slider-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
+.slider-name{font-size:10px;font-weight:600;color:var(--t);min-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.slider-input{flex:1;accent-color:var(--gold);height:4px}
+.slider-val{font-size:10px;font-weight:700;color:var(--gold);min-width:28px;text-align:right;font-family:'Fraunces',serif}
+
+/* Buttons */
+.btn-row{padding:10px 16px;display:flex;gap:8px}
+.btn-sim{flex:1;padding:10px;border:none;border-radius:var(--rs);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}
+.btn-primary{background:var(--t);color:#fff}
+.btn-primary:hover{opacity:.85}
+.btn-secondary{background:var(--bg);color:var(--t);border:1px solid var(--b)}
+.btn-sim:disabled{opacity:.4;cursor:not-allowed}
+.spinner{width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:none}
+.btn-sim.loading .spinner{display:block}
+.btn-sim.loading .btn-text{display:none}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+/* Presets */
+.presets{padding:10px 16px;border-top:1px solid var(--b)}
+.preset-chips{display:flex;flex-wrap:wrap;gap:4px}
+.preset-chip{padding:4px 10px;border-radius:14px;border:1px solid var(--b);font-size:10px;color:var(--m);cursor:pointer;transition:all .12s;font-family:inherit;background:var(--bg)}
+.preset-chip:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-l)}
+
+/* Empty state */
+.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--f)}
+.empty-icon{font-size:40px;opacity:.4}
+.empty-title{font-size:14px;font-weight:600;color:var(--m)}
+.empty-desc{font-size:11px;color:var(--f);text-align:center;max-width:280px;line-height:1.6}
+
+/* Sentiment overview */
+.sent-overview{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:14px;background:var(--s);border:1px solid var(--b);border-radius:var(--r)}
+.sent-chart{position:relative;width:130px;height:130px;margin:0 auto}
+.sent-chart canvas{width:100%!important;height:100%!important}
+.sent-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
+.sent-score{font-size:24px;font-weight:700;font-family:'Fraunces',serif;color:var(--t)}
+.sent-lbl{font-size:9px;color:var(--m);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
+.sent-bars{display:flex;flex-direction:column;justify-content:center;gap:8px}
+.sbar{display:flex;align-items:center;gap:8px}
+.sbar-label{font-size:10px;font-weight:600;min-width:60px;color:var(--m)}
+.sbar-track{flex:1;height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
+.sbar-fill{height:100%;border-radius:3px;transition:width 1s ease}
+.sbar-val{font-size:11px;font-weight:700;min-width:30px;text-align:right;font-family:'Fraunces',serif}
+.fill-pos{background:#059669}.fill-neu{background:#D97706}.fill-neg{background:#DC2626}
+.val-pos{color:#059669}.val-neu{color:#D97706}.val-neg{color:#DC2626}
+
+/* Section title */
+.sec-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--m);display:flex;align-items:center;gap:6px}
+.sec-count{background:var(--bg);border:1px solid var(--b);padding:1px 6px;border-radius:10px;font-size:9px;font-family:'Fraunces',serif;color:var(--t)}
+
+/* Reaction cards */
+.rx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
+.rx-card{background:var(--s);border:1px solid var(--b);border-radius:var(--r);overflow:hidden;transition:all .2s}
+.rx-card:hover{box-shadow:0 3px 12px rgba(0,0,0,.04)}
+.rx-head{padding:10px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--b)}
+.rx-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:700;flex-shrink:0}
+.rx-info{flex:1;min-width:0}
+.rx-name{font-size:12px;font-weight:600;color:var(--t)}
+.rx-seg{font-size:9px;color:var(--m);margin-top:1px}
+.rx-sent{padding:2px 8px;border-radius:10px;font-size:9px;font-weight:700;flex-shrink:0}
+.s-pos{background:var(--green-l);color:var(--green)}.s-neu{background:var(--gold-l);color:var(--gold)}.s-neg{background:var(--red-l);color:var(--red)}
+.rx-body{padding:12px 14px}
+.rx-comment{font-size:12px;color:var(--t);line-height:1.6;font-style:italic;padding-left:14px;position:relative}
+.rx-comment::before{content:'"';position:absolute;left:0;top:-3px;font-size:20px;color:var(--f);font-family:'Fraunces',serif}
+.rx-meta{display:flex;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--b)}
+.rx-mi{font-size:9px;color:var(--m);display:flex;align-items:center;gap:3px}
+
+/* Agent thinking */
+.think-box{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:16px}
+.ag-row{display:flex;align-items:center;gap:10px;padding:6px 0}
+.ag-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
+.ag-name{font-size:11px;font-weight:600;color:var(--t);min-width:90px}
+.ag-status{font-size:10px;color:var(--m);flex:1}
+.ag-dots{display:flex;gap:3px}
+.ag-dots span{width:5px;height:5px;border-radius:50%;background:var(--f);animation:dp 1.4s infinite}
+.ag-dots span:nth-child(2){animation-delay:.2s}
+.ag-dots span:nth-child(3){animation-delay:.4s}
+@keyframes dp{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
+.ag-check{color:var(--green);font-weight:700;font-size:11px}
+
+/* Recommendations */
+.reco-box{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:14px}
+.reco-item{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--b);font-size:11px;line-height:1.5}
+.reco-item:last-child{border-bottom:none}
+.reco-icon{font-size:12px;flex-shrink:0;margin-top:1px}
+.reco-text{color:var(--t)}.reco-text strong{color:var(--gold)}
+
+/* ═══ TAB 2: CRISIS ALERT ═══ */
+.crisis-layout{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
+.crisis-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
+.crisis-stat{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:16px;text-align:center}
+.cs-value{font-size:28px;font-weight:700;font-family:'Fraunces',serif}
+.cs-label{font-size:10px;color:var(--m);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
+.cs-trend{font-size:10px;font-weight:700;margin-top:2px}
+.trend-up{color:var(--red)}.trend-down{color:var(--green)}.trend-flat{color:var(--m)}
+.alert-feed{display:flex;flex-direction:column;gap:8px}
+.alert-card{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:12px 16px;display:flex;align-items:flex-start;gap:12px}
+.alert-severity{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
+.sev-critical{background:#DC2626}.sev-warning{background:#D97706}.sev-info{background:#0891B2}
+.alert-body{flex:1}
+.alert-title{font-size:12px;font-weight:600;color:var(--t)}
+.alert-desc{font-size:11px;color:var(--m);margin-top:2px;line-height:1.5}
+.alert-time{font-size:9px;color:var(--f);margin-top:4px}
+.alert-tag{padding:2px 6px;border-radius:8px;font-size:9px;font-weight:700;margin-left:auto;flex-shrink:0}
+.tag-critical{background:var(--red-l);color:var(--red)}.tag-warning{background:var(--gold-l);color:var(--gold)}.tag-info{background:var(--cyan-l);color:var(--cyan)}
+
+/* ═══ TAB 3: DOCS ═══ */
+.docs-layout{flex:1;overflow-y:auto;padding:24px 32px;max-width:800px}
+.docs-layout h2{font-size:18px;font-family:'Fraunces',serif;margin:20px 0 10px;color:var(--t)}
+.docs-layout h3{font-size:14px;margin:14px 0 6px;color:var(--gold)}
+.docs-layout p,.docs-layout li{font-size:12px;line-height:1.7;color:var(--m)}
+.docs-layout ul{padding-left:20px}
+.docs-layout code{background:var(--bg);padding:1px 6px;border-radius:4px;font-size:11px}
+.docs-layout .arch-box{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:16px;margin:12px 0;font-family:monospace;font-size:11px;line-height:1.8;white-space:pre;overflow-x:auto;color:var(--t)}
+.docs-layout .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
+.docs-layout .feat-card{background:var(--s);border:1px solid var(--b);border-radius:var(--rs);padding:12px}
+.feat-card .feat-icon{font-size:20px;margin-bottom:6px}
+.feat-card .feat-title{font-size:12px;font-weight:700;color:var(--t)}
+.feat-card .feat-desc{font-size:10px;color:var(--m);margin-top:4px;line-height:1.5}
+
+@media(max-width:900px){.sim-left{width:100%;max-height:35vh;border-right:none;border-bottom:1px solid var(--b)}.sim-layout{flex-direction:column}.crisis-stats{grid-template-columns:1fr 1fr}.docs-layout .feature-grid{grid-template-columns:1fr}}
+</style>
+</head>
+<body>
+
+<!-- TOP BAR -->
+<div class="page-topbar">
+    <div class="topbar-icon">🔮</div>
+    <div class="topbar-title">Community Reaction Simulator</div>
+    <div class="topbar-badges">
+        <span class="tbadge tbadge-ai">AI-Powered</span>
+        <span class="tbadge tbadge-beta">BETA</span>
+    </div>
+</div>
+
+<!-- TAB BAR -->
+<div class="tab-bar">
+    <button class="tab-btn active" onclick="switchTab('simulator')">🔮 Simulator</button>
+    <button class="tab-btn" onclick="switchTab('crisis')">🚨 Crisis Alert</button>
+    <button class="tab-btn" onclick="switchTab('docs')">📄 Docs</button>
+</div>
+
+<!-- ═══════ TAB 1: SIMULATOR ═══════ -->
+<div class="tab-content active" id="tab-simulator">
+<div class="sim-layout">
+    <div class="sim-left">
+        <div class="form-section">
+            <div class="form-label">Loại nội dung</div>
+            <select class="form-select" id="campaignType">
+                <option value="product_launch">🚀 Ra mắt sản phẩm</option>
+                <option value="promotion">🏷️ Khuyến mãi</option>
+                <option value="social_post">📱 Social Post</option>
+                <option value="price_change">💰 Thay đổi giá</option>
+                <option value="collection">👗 BST mới</option>
+                <option value="collab">🤝 Collab</option>
+            </select>
+        </div>
+        <div class="form-section">
+            <div class="form-label">Nội dung chiến dịch</div>
+            <textarea class="form-textarea" id="campaignContent" placeholder="VD: Canifa ra mắt BST Hè 2026..."></textarea>
+        </div>
+        <div class="tuning-section">
+            <div class="tuning-title">⚙️ Persona Weight Tuning</div>
+            <div id="slidersContainer"></div>
+        </div>
+        <div class="btn-row">
+            <button class="btn-sim btn-primary" id="btnSim" onclick="runSimulation()">
+                <span class="spinner"></span>
+                <span class="btn-text">🔮 Simulate</span>
+            </button>
+            <button class="btn-sim btn-secondary" onclick="runABMode()">A/B Test</button>
+        </div>
+        <div class="presets">
+            <div class="form-label">Thử nhanh</div>
+            <div class="preset-chips">
+                <button class="preset-chip" onclick="usePreset(0)">BST Hè</button>
+                <button class="preset-chip" onclick="usePreset(1)">Sale 50%</button>
+                <button class="preset-chip" onclick="usePreset(2)">Collab</button>
+                <button class="preset-chip" onclick="usePreset(3)">Tăng giá</button>
+                <button class="preset-chip" onclick="usePreset(4)">Polo mới</button>
+            </div>
+        </div>
+    </div>
+    <div class="sim-right" id="simResults">
+        <div class="empty-state" id="emptyState">
+            <div class="empty-icon">🔮</div>
+            <div class="empty-title">Chưa có dữ liệu</div>
+            <div class="empty-desc">Nhập chiến dịch và nhấn Simulate để xem AI dự đoán phản ứng cộng đồng</div>
+        </div>
+    </div>
+</div>
+</div>
+
+<!-- ═══════ TAB 2: CRISIS ALERT ═══════ -->
+<div class="tab-content" id="tab-crisis">
+<div class="crisis-layout" id="crisisContent"></div>
+</div>
+
+<!-- ═══════ TAB 3: DOCS ═══════ -->
+<div class="tab-content" id="tab-docs">
+<div class="docs-layout" id="docsContent"></div>
+</div>
+
+<script>
+// ═══ TAB SYSTEM ═══
+function switchTab(name){
+    document.querySelectorAll('.tab-btn').forEach((b,i)=>{
+        b.classList.toggle('active', b.textContent.toLowerCase().includes(name.slice(0,4)));
+    });
+    document.querySelectorAll('.tab-content').forEach(t=>t.classList.remove('active'));
+    document.getElementById('tab-'+name).classList.add('active');
+    if(name==='crisis' && !crisisLoaded) loadCrisis();
+    if(name==='docs' && !docsLoaded) loadDocs();
+}
+
+// ═══ PERSONAS & SLIDERS ═══
+const personas = [
+    {id:'mom_shopper',name:'Mom Shopper',color:'#6D28D9',weight:20},
+    {id:'young_professional',name:'Young Professional',color:'#1D4ED8',weight:20},
+    {id:'fashion_enthusiast',name:'Fashion Enthusiast',color:'#DB2777',weight:15},
+    {id:'budget_conscious',name:'Budget Conscious',color:'#B45309',weight:15},
+    {id:'gen_z',name:'Gen Z Trendy',color:'#EA580C',weight:15},
+    {id:'kol',name:'KOL / Blogger',color:'#0891B2',weight:10},
+    {id:'troll',name:'Troll',color:'#78716C',weight:5}
+];
+
+function initSliders(){
+    const c=document.getElementById('slidersContainer');
+    c.innerHTML='';
+    personas.forEach(p=>{
+        c.innerHTML+=`<div class="slider-row">
+            <span class="slider-name" style="color:${p.color}">${p.name}</span>
+            <input type="range" class="slider-input" min="0" max="40" value="${p.weight}" data-id="${p.id}" oninput="this.nextElementSibling.textContent=this.value+'%'">
+            <span class="slider-val">${p.weight}%</span>
+        </div>`;
+    });
+}
+initSliders();
+
+// ═══ PRESETS ═══
+const presets = [
+    {type:'collection',content:'Canifa ra mắt BST Hè 2026 "Coastal Breeze" — Linen & Cotton hữu cơ, minimalist. Giá 299K-599K. Free ship từ 500K.'},
+    {type:'promotion',content:'⚡ FLASH SALE — Giảm 50% toàn bộ Polo, Sơ mi, Jeans! Chỉ 2 ngày cuối tuần. Mua 2 giảm thêm 10%.'},
+    {type:'collab',content:'Canifa x NEM — BST "Urban Heritage" limited 500 bộ. Phong cách công sở + họa tiết truyền thống. Giá 799K-1.299K.'},
+    {type:'price_change',content:'Thông báo: Canifa điều chỉnh giá tăng 15% từ 01/07 do chi phí nguyên liệu. SP cũ giữ nguyên đến hết hàng.'},
+    {type:'product_launch',content:'MỚI — Polo DryTech 3.0: Khô nhanh, kháng khuẩn, chống UV. 12 màu, slim-fit. Giá 399K (tuần đầu, giá gốc 499K).'}
+];
+function usePreset(i){document.getElementById('campaignType').value=presets[i].type;document.getElementById('campaignContent').value=presets[i].content;}
+
+// ═══ MOCK REACTIONS  ═══
+function getMockReactions(type){
+    const sets={
+        collection:[
+            {pid:'mom_shopper',name:'Nguyễn Thị Mai',seg:'Mom Shopper',age:32,city:'Hà Nội',sentiment:'positive',comment:'BST linen mát cho hè! 299K hợp lý, mua cho cả nhà mặc đi biển được luôn!',likes:38,shares:6},
+            {pid:'young_professional',name:'Trần Văn Hùng',seg:'Young Professional',age:28,city:'TP.HCM',sentiment:'neutral',comment:'Minimalist Nhật Bản nghe hay nhưng cần xem thực tế. Canifa đôi khi overdesign.',likes:21,shares:3},
+            {pid:'fashion_enthusiast',name:'Lê Phương Anh',seg:'Fashion Enthusiast',age:35,city:'Đà Nẵng',sentiment:'positive',comment:'Linen + Cotton organic + Minimalist = đúng trend! Giá competitive. Wait list ngay!',likes:54,shares:14},
+            {pid:'budget_conscious',name:'Phạm Minh Tuấn',seg:'Budget Conscious',age:41,city:'Hà Nội',sentiment:'neutral',comment:'Linen dễ nhăn, 599K cho quần linen cần cân nhắc.',likes:16,shares:1},
+            {pid:'gen_z',name:'Hoàng Thúy Linh',seg:'Gen Z Trendy',age:22,city:'TP.HCM',sentiment:'positive',comment:'"Coastal Breeze" vibes biển chill ghê 🌊 Content review BST này sẽ viral đó',likes:62,shares:19},
+            {pid:'kol',name:'Fashion Blogger',seg:'KOL / Blogger',age:29,city:'Hà Nội',sentiment:'positive',comment:'Canifa đúng hướng sustainable fashion. Linen organic giá mass market = win.',likes:102,shares:28},
+            {pid:'troll',name:'Random Commenter',seg:'Social Media Troll',age:25,city:'Online',sentiment:'negative',comment:'Lại "thiết kế Nhật Bản", brand VN nào cũng claim kiểu này 🥱',likes:11,shares:1}
+        ],
+        price_change:[
+            {pid:'mom_shopper',name:'Nguyễn Thị Mai',seg:'Mom Shopper',age:32,city:'Hà Nội',sentiment:'negative',comment:'Tăng 15%?? Gia đình mua nhiều, chắc phải cân nhắc brand khác 😢',likes:89,shares:24},
+            {pid:'young_professional',name:'Trần Văn Hùng',seg:'Young Professional',age:28,city:'TP.HCM',sentiment:'negative',comment:'Tăng giá thì mất lợi thế với Uniqlo. Cùng tầm giá chọn brand Nhật hơn.',likes:67,shares:18},
+            {pid:'fashion_enthusiast',name:'Lê Phương Anh',seg:'Fashion Enthusiast',age:35,city:'Đà Nẵng',sentiment:'neutral',comment:'Nếu quality tăng theo thì OK, nhưng chỉ tăng giá thì khó chấp nhận.',likes:43,shares:8},
+            {pid:'budget_conscious',name:'Phạm Minh Tuấn',seg:'Budget Conscious',age:41,city:'Hà Nội',sentiment:'negative',comment:'15% quá nhiều! Thu nhập không tăng. Chuyển Coolmate thôi.',likes:112,shares:31},
+            {pid:'gen_z',name:'Hoàng Thúy Linh',seg:'Gen Z Trendy',age:22,city:'TP.HCM',sentiment:'negative',comment:'Canifa đắt lên mà design basic thì bye bye 👋',likes:78,shares:15},
+            {pid:'kol',name:'Fashion Blogger',seg:'KOL / Blogger',age:29,city:'Hà Nội',sentiment:'neutral',comment:'Tăng giá 15% trong lạm phát hiểu được, nhưng cần upgrade rõ ràng.',likes:95,shares:22},
+            {pid:'troll',name:'Random Commenter',seg:'Social Media Troll',age:25,city:'Online',sentiment:'negative',comment:'RIP Canifa. Từ brand bình dân giờ muốn lên sang 💀',likes:134,shares:42}
+        ]
+    };
+    return sets[type]||sets.collection;
+}
+
+// ═══ SIMULATION ═══
+let isRunning=false;
+async function runSimulation(){
+    if(isRunning)return;
+    const content=document.getElementById('campaignContent').value.trim();
+    if(!content)return alert('Nhập nội dung chiến dịch!');
+    isRunning=true;
+    const btn=document.getElementById('btnSim');btn.classList.add('loading');btn.disabled=true;
+    const type=document.getElementById('campaignType').value;
+    const panel=document.getElementById('simResults');
+    document.getElementById('emptyState')?.remove();
+
+    // Phase 1: Thinking
+    panel.innerHTML=buildThinkHTML();
+    const rows=panel.querySelectorAll('.ag-row');
+    for(let i=0;i<rows.length;i++){
+        await delay(600+Math.random()*500);
+        rows[i].querySelector('.ag-dots').innerHTML='<span class="ag-check">✓</span>';
+        rows[i].querySelector('.ag-status').textContent='Hoàn thành';
+        rows[i].querySelector('.ag-status').style.color='var(--green)';
+    }
+    await delay(400);
+
+    // Phase 2: Results
+    const reactions=getMockReactions(type);
+    const sent=calcSent(reactions);
+    panel.innerHTML=buildResultsHTML(reactions,sent);
+    animateBars();
+    btn.classList.remove('loading');btn.disabled=false;isRunning=false;
+}
+
+function runABMode(){
+    const content=document.getElementById('campaignContent').value.trim();
+    if(!content)return alert('Nhập nội dung chiến dịch trước!');
+    alert('🚧 A/B Testing Mode sẽ available trong bản cập nhật tiếp theo!\n\nConcept: So sánh 2 phiên bản campaign side-by-side để xem version nào có sentiment tốt hơn.');
+}
+
+function delay(ms){return new Promise(r=>setTimeout(r,ms))}
+function calcSent(rx){let p=0,n=0,u=0;rx.forEach(r=>{if(r.sentiment==='positive')p++;else if(r.sentiment==='neutral')u++;else n++;});const t=rx.length;return{pos:Math.round(p/t*100),neu:Math.round(u/t*100),neg:Math.round(n/t*100),total:t};}
+
+function buildThinkHTML(){
+    const agents=[{n:'Persona Engine',c:'#6D28D9',s:'Phân tích user insight...'},{n:'Sentiment Agent',c:'#059669',s:'Dự đoán cảm xúc...'},{n:'Social Simulator',c:'#EA580C',s:'Giả lập phản ứng...'},{n:'Report Agent',c:'#1D4ED8',s:'Tổng hợp kết quả...'}];
+    let h='<div class="think-box"><div class="sec-title">🤖 AI Agents đang phân tích...</div>';
+    agents.forEach(a=>{h+=`<div class="ag-row"><div class="ag-icon" style="background:${a.c}">${a.n[0]}</div><div class="ag-name">${a.n}</div><div class="ag-status">${a.s}</div><div class="ag-dots"><span></span><span></span><span></span></div></div>`;});
+    return h+'</div>';
+}
+
+function buildResultsHTML(reactions,sent){
+    const pColors={mom_shopper:'#6D28D9',young_professional:'#1D4ED8',fashion_enthusiast:'#DB2777',budget_conscious:'#B45309',gen_z:'#EA580C',kol:'#0891B2',troll:'#78716C'};
+    let h=`<div class="sent-overview"><div class="sent-chart"><canvas id="sChart" width="130" height="130"></canvas><div class="sent-center"><div class="sent-score">${sent.pos}%</div><div class="sent-lbl">Tích cực</div></div></div>
+    <div class="sent-bars"><div class="sbar"><span class="sbar-label">Tích cực</span><div class="sbar-track"><div class="sbar-fill fill-pos" data-w="${sent.pos}" style="width:0"></div></div><span class="sbar-val val-pos">${sent.pos}%</span></div>
+    <div class="sbar"><span class="sbar-label">Trung lập</span><div class="sbar-track"><div class="sbar-fill fill-neu" data-w="${sent.neu}" style="width:0"></div></div><span class="sbar-val val-neu">${sent.neu}%</span></div>
+    <div class="sbar"><span class="sbar-label">Tiêu cực</span><div class="sbar-track"><div class="sbar-fill fill-neg" data-w="${sent.neg}" style="width:0"></div></div><span class="sbar-val val-neg">${sent.neg}%</span></div>
+    <div style="margin-top:4px;font-size:10px;color:var(--m)">Dựa trên <strong>${sent.total}</strong> persona</div></div></div>`;
+
+    h+=`<div class="sec-title">💬 Phản ứng dự đoán <span class="sec-count">${reactions.length}</span></div><div class="rx-grid">`;
+    reactions.forEach(r=>{
+        const sc=r.sentiment==='positive'?'s-pos':r.sentiment==='neutral'?'s-neu':'s-neg';
+        const st=r.sentiment==='positive'?'Tích cực':r.sentiment==='neutral'?'Trung lập':'Tiêu cực';
+        const col=pColors[r.pid]||'#78716C';
+        h+=`<div class="rx-card"><div class="rx-head"><div class="rx-avatar" style="background:${col}">${r.name[0]}</div><div class="rx-info"><div class="rx-name">${r.name}</div><div class="rx-seg">${r.seg} · ${r.age}t · ${r.city}</div></div><span class="rx-sent ${sc}">${st}</span></div><div class="rx-body"><div class="rx-comment">${r.comment}</div><div class="rx-meta"><span class="rx-mi">❤️ ${r.likes}</span><span class="rx-mi">🔄 ${r.shares}</span><span class="rx-mi">💬 ${Math.floor(Math.random()*10)+1}</span></div></div></div>`;
+    });
+    h+='</div>';
+
+    // Recommendations
+    const negC=reactions.filter(r=>r.sentiment==='negative').length;
+    const recos=[];
+    if(negC>=3)recos.push({i:'⚠️',t:'<strong>Cảnh báo:</strong> Tỷ lệ tiêu cực cao. Điều chỉnh thông điệp hoặc thêm ưu đãi đi kèm.'});
+    if(negC>=2)recos.push({i:'💡',t:'<strong>Tip:</strong> Chuẩn bị response template cho comment so sánh giá.'});
+    recos.push({i:'📊',t:'<strong>Insight:</strong> Gen Z và Fashion Enthusiast phản ứng tích cực nhất — ưu tiên TikTok/Instagram.'});
+    recos.push({i:'🎯',t:'<strong>Hành động:</strong> Kết hợp KOL review sớm để tăng credibility.'});
+    if(negC<2)recos.push({i:'🚀',t:'<strong>Tín hiệu tốt:</strong> Chiến dịch có tiềm năng viral — chuẩn bị stock!'});
+
+    h+='<div class="sec-title">📋 Gợi ý</div><div class="reco-box">';
+    recos.forEach(r=>{h+=`<div class="reco-item"><span class="reco-icon">${r.i}</span><div class="reco-text">${r.t}</div></div>`;});
+    h+='</div>';
+
+    setTimeout(()=>drawDonut(),80);
+    return h;
+}
+
+function animateBars(){setTimeout(()=>{document.querySelectorAll('.sbar-fill').forEach(e=>{e.style.width=e.dataset.w+'%';});},150);}
+
+function drawDonut(){
+    const c=document.getElementById('sChart');if(!c)return;const ctx=c.getContext('2d');
+    const fills=document.querySelectorAll('.sbar-fill');const vals=[];fills.forEach(f=>vals.push(parseInt(f.dataset.w)||0));
+    const cols=['#059669','#D97706','#DC2626'];const total=vals.reduce((a,b)=>a+b,0)||1;
+    let sa=-Math.PI/2;ctx.clearRect(0,0,130,130);
+    vals.forEach((v,i)=>{const sl=(v/total)*Math.PI*2;ctx.beginPath();ctx.arc(65,65,50,sa,sa+sl);ctx.strokeStyle=cols[i];ctx.lineWidth=14;ctx.lineCap='round';ctx.stroke();sa+=sl+0.04;});
+}
+
+// ═══ CRISIS ALERT TAB ═══
+let crisisLoaded=false;
+function loadCrisis(){
+    crisisLoaded=true;
+    const c=document.getElementById('crisisContent');
+    c.innerHTML=`
+    <div class="sec-title">📊 Tổng quan 24h qua</div>
+    <div class="crisis-stats">
+        <div class="crisis-stat"><div class="cs-value" style="color:var(--t)">847</div><div class="cs-label">Mentions</div><div class="cs-trend trend-up">↑ +12%</div></div>
+        <div class="crisis-stat"><div class="cs-value" style="color:var(--green)">72%</div><div class="cs-label">Positive</div><div class="cs-trend trend-down">↓ -3%</div></div>
+        <div class="crisis-stat"><div class="cs-value" style="color:var(--red)">8%</div><div class="cs-label">Negative</div><div class="cs-trend trend-up">↑ +2%</div></div>
+        <div class="crisis-stat"><div class="cs-value" style="color:var(--gold)">2</div><div class="cs-label">Alerts</div><div class="cs-trend trend-flat">— 0</div></div>
+    </div>
+
+    <div class="sec-title">🚨 Cảnh báo gần đây</div>
+    <div class="alert-feed">
+        <div class="alert-card">
+            <div class="alert-severity sev-critical"></div>
+            <div class="alert-body">
+                <div class="alert-title">Phàn nàn hàng loạt về chất lượng áo Polo mùa mới</div>
+                <div class="alert-desc">15+ comment trên Facebook group "Hội mua sắm thông minh" phản ánh áo Polo DryTech bị phai màu sau 2 lần giặt. Cần xác minh lô hàng.</div>
+                <div class="alert-time">🕐 2 giờ trước · Facebook · 23 interactions</div>
+            </div>
+            <span class="alert-tag tag-critical">CRITICAL</span>
+        </div>
+        <div class="alert-card">
+            <div class="alert-severity sev-warning"></div>
+            <div class="alert-body">
+                <div class="alert-title">So sánh tiêu cực với Uniqlo trên TikTok</div>
+                <div class="alert-desc">Video review so sánh Canifa vs Uniqlo có 50K views, tone tiêu cực về chất liệu. Creator: @fashionvn (120K followers).</div>
+                <div class="alert-time">🕐 5 giờ trước · TikTok · 50K views</div>
+            </div>
+            <span class="alert-tag tag-warning">WARNING</span>
+        </div>
+        <div class="alert-card">
+            <div class="alert-severity sev-info"></div>
+            <div class="alert-body">
+                <div class="alert-title">BST Hè được báo Vnexpress đánh giá tích cực</div>
+                <div class="alert-desc">Bài PR trên Vnexpress Life nhận 200+ comments positive. Keyword: "chất lượng tốt", "giá hợp lý", "thiết kế đẹp".</div>
+                <div class="alert-time">🕐 8 giờ trước · Vnexpress · 200+ comments</div>
+            </div>
+            <span class="alert-tag tag-info">INFO</span>
+        </div>
+        <div class="alert-card">
+            <div class="alert-severity sev-warning"></div>
+            <div class="alert-body">
+                <div class="alert-title">Shopee reviews: Rating giảm từ 4.5 → 4.2 sao</div>
+                <div class="alert-desc">Trend giảm rating trên Shopee official store trong 7 ngày qua. Nguyên nhân chính: giao hàng chậm và size không đúng.</div>
+                <div class="alert-time">🕐 1 ngày trước · Shopee · 45 reviews</div>
+            </div>
+            <span class="alert-tag tag-warning">WARNING</span>
+        </div>
+        <div class="alert-card">
+            <div class="alert-severity sev-info"></div>
+            <div class="alert-body">
+                <div class="alert-title">KOL @styleguide_vn đăng bài collab positive</div>
+                <div class="alert-desc">Post Instagram collab reach 80K, engagement rate 5.2%. Tone rất positive, recommend BST Coastal Breeze.</div>
+                <div class="alert-time">🕐 1 ngày trước · Instagram · 80K reach</div>
+            </div>
+            <span class="alert-tag tag-info">INFO</span>
+        </div>
+    </div>`;
+}
+
+// ═══ DOCS TAB ═══
+let docsLoaded=false;
+function loadDocs(){
+    docsLoaded=true;
+    document.getElementById('docsContent').innerHTML=`
+    <h2>🔮 Community Reaction Simulator</h2>
+    <p>Hệ thống giả lập phản ứng cộng đồng khi Canifa launch chiến dịch mới. Lấy cảm hứng từ BettaFish ForumEngine và MiroFish Simulate Agent.</p>
+
+    <h3>💡 Concept</h3>
+    <p>Thay vì launch chiến dịch rồi mới biết phản ứng, hệ thống cho phép <strong>test trước</strong> bằng cách AI giả lập phản ứng từ các nhóm khách hàng thực tế dựa trên user insight data.</p>
+
+    <h3>🏗️ Architecture</h3>
+    <div class="arch-box">┌─────────────┐     ┌──────────────────┐     ┌─────────────┐
+│  Campaign   │────▶│  Reaction Agent  │────▶│  Sentiment  │
+│   Input     │     │  (LLM-powered)   │     │  Analysis   │
+└─────────────┘     └──────┬───────────┘     └──────┬──────┘
+                           │                        │
+                    ┌──────▼───────┐         ┌──────▼──────┐
+                    │ 7 Persona    │         │ Recommend.  │
+                    │ Segments     │         │ Engine      │
+                    └──────────────┘         └─────────────┘
+
+Backend: /api/reaction-simulator/simulate
+Agent:   backend/agent/reaction_agent/
+Frontend: static/reaction-simulator.html</div>
+
+    <h3>👥 Persona Segments</h3>
+    <div class="feature-grid">
+        <div class="feat-card"><div class="feat-icon">👩</div><div class="feat-title">Mom Shopper (20%)</div><div class="feat-desc">Phụ nữ 30-40t, mua cho gia đình, quan tâm chất lượng + giá</div></div>
+        <div class="feat-card"><div class="feat-icon">👨‍💼</div><div class="feat-title">Young Professional (20%)</div><div class="feat-desc">25-32t, smart casual công sở, theo dõi sale</div></div>
+        <div class="feat-card"><div class="feat-icon">👗</div><div class="feat-title">Fashion Enthusiast (15%)</div><div class="feat-desc">Sẵn sàng chi tiền, follow KOL, biết trend</div></div>
+        <div class="feat-card"><div class="feat-icon">💰</div><div class="feat-title">Budget Conscious (15%)</div><div class="feat-desc">So sánh giá kỹ, chờ sale, thực dụng</div></div>
+        <div class="feat-card"><div class="feat-icon">🔥</div><div class="feat-title">Gen Z Trendy (15%)</div><div class="feat-desc">18-25t, TikTok, local brand lover</div></div>
+        <div class="feat-card"><div class="feat-icon">📸</div><div class="feat-title">KOL / Blogger (10%)</div><div class="feat-desc">Review chuyên nghiệp, phân tích chiến lược</div></div>
+        <div class="feat-card"><div class="feat-icon">🎭</div><div class="feat-title">Social Media Troll (5%)</div><div class="feat-desc">Comment châm biếm, so sánh brand ngoại</div></div>
+    </div>
+
+    <h3>📋 Cách sử dụng</h3>
+    <ul>
+        <li><strong>Bước 1:</strong> Chọn loại chiến dịch (product launch, promotion, BST...)</li>
+        <li><strong>Bước 2:</strong> Nhập nội dung chiến dịch — càng chi tiết càng tốt</li>
+        <li><strong>Bước 3:</strong> Tuỳ chỉnh Persona Weight nếu muốn focus segment cụ thể</li>
+        <li><strong>Bước 4:</strong> Nhấn <strong>Simulate</strong> để AI generate phản ứng</li>
+        <li><strong>Bước 5:</strong> Đọc kết quả sentiment + recommendations</li>
+    </ul>
+
+    <h3>🗺️ Roadmap</h3>
+    <ul>
+        <li>✅ <strong>v1.0</strong> — Mock simulation với 7 personas + preset campaigns</li>
+        <li>✅ <strong>v1.1</strong> — Persona Weight Tuning + Crisis Alert tab</li>
+        <li>🔲 <strong>v1.2</strong> — A/B Testing mode (so sánh 2 phiên bản campaign)</li>
+        <li>🔲 <strong>v1.3</strong> — LLM-powered reactions (kết nối GPT API)</li>
+        <li>🔲 <strong>v2.0</strong> — Real-time social monitoring + auto-alert</li>
+        <li>🔲 <strong>v2.1</strong> — Competitor Intelligence module</li>
+        <li>🔲 <strong>v3.0</strong> — Export PDF/HTML report cho team Marketing</li>
+    </ul>
+
+    <h3>🔗 Nguồn cảm hứng</h3>
+    <ul>
+        <li><strong>BettaFish (微舆)</strong> — Multi-agent public opinion analysis, ForumEngine pattern</li>
+        <li><strong>MiroFish</strong> — Simulate Agent architecture, persona-based testing</li>
+        <li><strong>Canifa User Insight</strong> — Real customer data cho persona generation</li>
+    </ul>
+
+    <h3>📡 API Endpoints</h3>
+    <ul>
+        <li><code>GET /api/reaction-simulator/segments</code> — List persona segments</li>
+        <li><code>GET /api/reaction-simulator/campaign-types</code> — List campaign types</li>
+        <li><code>POST /api/reaction-simulator/simulate</code> — LLM-powered simulation</li>
+        <li><code>POST /api/reaction-simulator/simulate-mock</code> — Mock data (no LLM)</li>
+    </ul>`;
+}
+</script>
+</body>
+</html>

backend/static/user-insight.html

@@ -4,160 +4,172 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>User Insight — CDP</title>
-<link rel="stylesheet" href="/static/css/theme.css">
-<link rel="stylesheet" href="/static/css/components.css">
-<link rel="stylesheet" href="/static/css/lab.css">
+<link rel="stylesheet" href="/static/lab.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
 *{box-sizing:border-box;margin:0;padding:0}
-body{font-family:var(--font-sans,'Inter',system-ui,sans-serif);background:var(--background,#f8f7f4);min-height:100vh;color:var(--foreground,#1c1917)}
+body{font-family:'Inter',system-ui,sans-serif;background:#F8F9FC;min-height:100vh;color:#1a1a2e}
 .app-wrap{display:flex;height:100vh;overflow:hidden}
-.user-list-pane{width:320px;border-right:1px solid var(--border,#e7e5e2);display:flex;flex-direction:column;background:var(--card,#ffffff);flex-shrink:0}
-.profile-pane{flex:1;overflow-y:auto;background:var(--background,#f8f7f4)}
-.list-header{padding:20px 20px 16px;border-bottom:1px solid var(--border,#e7e5e2)}
-.list-header h2{font-size:18px;font-weight:800;color:var(--foreground,#1c1917);margin-bottom:4px}
-.list-header p{font-size:12px;color:var(--muted-fg,#78716c)}
-.search-box{margin-top:12px;width:100%;padding:9px 14px;border:1px solid var(--border,#e7e5e2);border-radius:10px;font-size:13px;outline:none;background:var(--muted,#f0efec)}
-.search-box:focus{border-color:var(--primary,#3b5998);box-shadow:0 0 0 3px rgba(59,89,152,0.08)}
+.user-list-pane{width:320px;border-right:1px solid #E5E7EB;display:flex;flex-direction:column;background:#fff;flex-shrink:0}
+.profile-pane{flex:1;overflow-y:auto;background:#F8F9FC}
+.list-header{padding:20px 20px 16px;border-bottom:1px solid #E5E7EB}
+.list-header h2{font-size:18px;font-weight:800;color:#1a1a2e;margin-bottom:4px}
+.list-header p{font-size:12px;color:#6B7280}
+.search-box{margin-top:12px;width:100%;padding:9px 14px;border:1px solid #E5E7EB;border-radius:10px;font-size:13px;outline:none;background:#F9FAFB}
+.search-box:focus{border-color:#6366F1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
 .user-items{flex:1;overflow-y:auto;padding:8px}
 .user-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;cursor:pointer;transition:all .15s;border:1.5px solid transparent;margin-bottom:4px}
-.user-item:hover{background:var(--muted,#f0efec)}
-.user-item.active{background:var(--primary-light,#eef1f8);border-color:var(--primary,#3b5998)}
+.user-item:hover{background:#F3F4F6}
+.user-item.active{background:#EEF2FF;border-color:#6366F1}
 .user-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;flex-shrink:0}
 .user-item-info{flex:1;min-width:0}
-.user-item-name{font-size:14px;font-weight:700;color:var(--foreground,#1c1917);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.user-item-meta{font-size:11px;color:var(--muted-fg,#78716c);margin-top:2px}
+.user-item-name{font-size:14px;font-weight:700;color:#1a1a2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.user-item-meta{font-size:11px;color:#6B7280;margin-top:2px}
 .user-item-right{text-align:right;flex-shrink:0}
-.user-item-right .val{font-size:14px;font-weight:800;color:var(--foreground,#1c1917)}
-.user-item-right .lbl{font-size:10px;color:var(--muted-fg,#78716c)}
+.user-item-right .val{font-size:14px;font-weight:800;color:#1a1a2e}
+.user-item-right .lbl{font-size:10px;color:#6B7280}
 .profile-content{max-width:980px;margin:0 auto;padding:24px 28px 40px}
-.profile-empty{display:flex;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--muted-fg,#78716c);font-size:15px}
+.profile-empty{display:flex;align-items:center;justify-content:center;height:100%;text-align:center;color:#9CA3AF;font-size:15px}
 
 /* Tabs */
-.profile-tabs{display:flex;gap:32px;border-bottom:2px solid var(--border,#e7e5e2);margin-bottom:24px}
-.tab-btn{padding:0 8px 16px;background:none;border:none;font-size:15px;font-weight:700;color:var(--muted-fg,#78716c);cursor:pointer;position:relative;transition:color .2s}
-.tab-btn:hover{color:var(--foreground,#1c1917)}
-.tab-btn.active{color:var(--primary,#3b5998)}
-.tab-btn.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:3px;background:var(--primary,#3b5998);border-radius:3px 3px 0 0}
+.profile-tabs{display:flex;gap:32px;border-bottom:2px solid #E5E7EB;margin-bottom:24px}
+.tab-btn{padding:0 8px 16px;background:none;border:none;font-size:15px;font-weight:700;color:#6B7280;cursor:pointer;position:relative;transition:color .2s}
+.tab-btn:hover{color:#1a1a2e}
+.tab-btn.active{color:#6366F1}
+.tab-btn.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:3px;background:#6366F1;border-radius:3px 3px 0 0}
 .tab-pane{display:none;animation:fadeIn .3s ease}
 .tab-pane.active{display:block}
 @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
 
-.section{background:var(--card,#ffffff);border:1px solid var(--border,#e7e5e2);border-radius:14px;padding:20px 24px;margin-bottom:16px}
-.section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-fg,#78716c);margin-bottom:14px}
+.section{background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:20px 24px;margin-bottom:16px}
+.section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#6B7280;margin-bottom:14px}
 /* Overview */
 .overview-grid{display:flex;align-items:center;gap:20px}
 .overview-avatar{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#fff;flex-shrink:0}
 .overview-details{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 24px}
-.overview-field-label{font-size:10px;color:var(--muted-fg,#78716c);font-weight:600}
-.overview-field-value{font-size:14px;font-weight:700;color:var(--foreground,#1c1917);margin-bottom:8px}
-.channel-tag{display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--primary-light,#eef1f8);color:var(--primary,#3b5998);margin-right:4px;margin-top:4px}
+.overview-field-label{font-size:10px;color:#9CA3AF;font-weight:600}
+.overview-field-value{font-size:14px;font-weight:700;color:#1a1a2e;margin-bottom:8px}
+.channel-tag{display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;background:#EEF2FF;color:#4338CA;margin-right:4px;margin-top:4px}
 /* Health Score */
 .health-row{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center}
 .health-ring{width:140px;height:140px;position:relative;margin:0 auto}
 .health-ring svg{width:100%;height:100%}
 .health-ring .score-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
 .health-ring .score-num{font-size:36px;font-weight:900;line-height:1}
-.health-ring .score-lbl{font-size:10px;font-weight:700;color:var(--muted-fg,#78716c);text-transform:uppercase;letter-spacing:.06em}
+.health-ring .score-lbl{font-size:10px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.06em}
 .health-factors{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
-.factor-card{padding:14px;border-radius:10px;border:1px solid var(--border,#e7e5e2);background:var(--muted,#f0efec)}
+.factor-card{padding:14px;border-radius:10px;border:1px solid #E5E7EB;background:#F9FAFB}
 .factor-card .f-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
-.factor-card .f-name{font-size:11px;font-weight:700;color:var(--foreground,#1c1917);text-transform:uppercase;letter-spacing:.04em}
+.factor-card .f-name{font-size:11px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.04em}
 .factor-card .f-score{font-size:18px;font-weight:900}
 .factor-bar{width:100%;height:6px;background:#E5E7EB;border-radius:3px;overflow:hidden}
 .factor-bar-fill{height:100%;border-radius:3px;transition:width .6s ease}
 /* Metrics */
 .metrics-row{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
-.metric-cell{text-align:center;padding:12px 8px;border-right:1px solid var(--border,#e7e5e2)}
+.metric-cell{text-align:center;padding:12px 8px;border-right:1px solid #F3F4F6}
 .metric-cell:last-child{border-right:none}
-.metric-cell .m-label{font-size:10px;color:var(--muted-fg,#78716c);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
-.metric-cell .m-value{font-size:28px;font-weight:800;color:var(--foreground,#1c1917);line-height:1}
-.metric-cell .m-unit{font-size:11px;color:var(--muted-fg,#78716c);font-weight:600}
+.metric-cell .m-label{font-size:10px;color:#6B7280;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
+.metric-cell .m-value{font-size:28px;font-weight:800;color:#1a1a2e;line-height:1}
+.metric-cell .m-unit{font-size:11px;color:#9CA3AF;font-weight:600}
 /* Predictions */
 .pred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
 .pred-card{padding:16px;border-radius:12px;text-align:center}
 .pred-card .pred-icon{font-size:24px;margin-bottom:8px}
 .pred-card .pred-val{font-size:22px;font-weight:800;line-height:1;margin-bottom:4px}
-.pred-card .pred-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-fg,#78716c)}
+.pred-card .pred-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#6B7280}
 .pred-green{background:#F0FDF4;border:1px solid #BBF7D0}.pred-green .pred-val{color:#059669}
 .pred-amber{background:#FFFBEB;border:1px solid #FDE68A}.pred-amber .pred-val{color:#D97706}
 .pred-red{background:#FEF2F2;border:1px solid #FECACA}.pred-red .pred-val{color:#DC2626}
 .pred-blue{background:#EFF6FF;border:1px solid #BFDBFE}.pred-blue .pred-val{color:#2563EB}
 /* Three-col */
 .three-col{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:16px}
-.segment-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border,#e7e5e2)}
+.segment-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #F3F4F6}
 .segment-row:last-child{border-bottom:none}
-.seg-label{font-size:13px;color:var(--foreground,#1c1917)}
+.seg-label{font-size:13px;color:#374151}
 .seg-value{font-size:13px;font-weight:700}
-.seg-high{color:#059669}.seg-medium{color:#D97706}.seg-low{color:var(--muted-fg,#78716c)}.seg-vip{color:#7C3AED}.seg-active{color:#059669}
+.seg-high{color:#059669}.seg-medium{color:#D97706}.seg-low{color:#6B7280}.seg-vip{color:#7C3AED}.seg-active{color:#059669}
 .donut-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
 .donut-svg{width:140px;height:140px}
 .donut-legend{display:flex;flex-direction:column;gap:5px;width:100%}
-.legend-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--foreground,#1c1917)}
+.legend-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#374151}
 .legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
-.legend-pct{margin-left:auto;font-weight:700;color:var(--foreground,#1c1917)}
-.attr-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border,#e7e5e2);font-size:13px}
+.legend-pct{margin-left:auto;font-weight:700;color:#1a1a2e}
+.attr-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #F3F4F6;font-size:13px}
 .attr-row:last-child{border-bottom:none}
-.attr-label{color:var(--muted-fg,#78716c)}.attr-value{font-weight:700;color:var(--foreground,#1c1917);text-align:right;max-width:55%}
+.attr-label{color:#6B7280}.attr-value{font-weight:700;color:#1a1a2e;text-align:right;max-width:55%}
 /* Product cards */
 .product-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
-.product-card{display:flex;align-items:center;gap:14px;padding:14px;background:var(--muted,#f0efec);border-radius:12px;border:1px solid var(--border,#e7e5e2)}
-.product-card-icon{width:52px;height:52px;border-radius:10px;background:var(--primary-light,#eef1f8);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
+.product-card{display:flex;align-items:center;gap:14px;padding:14px;background:#F9FAFB;border-radius:12px;border:1px solid #E5E7EB}
+.product-card-icon{width:52px;height:52px;border-radius:10px;background:#EEF2FF;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
 .product-card-info{flex:1}
-.product-card-label{font-size:10px;color:var(--muted-fg,#78716c);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
-.product-card-name{font-size:13px;font-weight:700;color:var(--foreground,#1c1917);margin-bottom:2px}
-.product-card-price{font-size:18px;font-weight:800;color:var(--foreground,#1c1917)}
+.product-card-label{font-size:10px;color:#6B7280;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
+.product-card-name{font-size:13px;font-weight:700;color:#1a1a2e;margin-bottom:2px}
+.product-card-price{font-size:18px;font-weight:800;color:#1a1a2e}
 /* Purchase Timeline */
 .timeline{position:relative;padding-left:28px}
 .timeline::before{content:'';position:absolute;left:10px;top:4px;bottom:4px;width:2px;background:#E5E7EB;border-radius:1px}
 .tl-item{position:relative;padding:10px 0 14px}
-.tl-item::before{content:'';position:absolute;left:-22px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--primary,#3b5998);border:2px solid #fff;box-shadow:0 0 0 2px var(--primary,#3b5998);z-index:1}
-.tl-date{font-size:11px;font-weight:600;color:var(--muted-fg,#78716c);margin-bottom:4px}
+.tl-item::before{content:'';position:absolute;left:-22px;top:14px;width:10px;height:10px;border-radius:50%;background:#6366F1;border:2px solid #fff;box-shadow:0 0 0 2px #6366F1;z-index:1}
+.tl-date{font-size:11px;font-weight:600;color:#9CA3AF;margin-bottom:4px}
 .tl-content{display:flex;align-items:center;gap:10px}
 .tl-icon{font-size:18px}
 .tl-detail{flex:1}
-.tl-name{font-size:13px;font-weight:700;color:var(--foreground,#1c1917)}
-.tl-sub{font-size:11px;color:var(--muted-fg,#78716c)}
-.tl-price{font-size:14px;font-weight:800;color:var(--foreground,#1c1917);flex-shrink:0}
+.tl-name{font-size:13px;font-weight:700;color:#1a1a2e}
+.tl-sub{font-size:11px;color:#6B7280}
+.tl-price{font-size:14px;font-weight:800;color:#1a1a2e;flex-shrink:0}
 /* Recommendation Engine */
-.reco-section{border-top:1px solid var(--border,#e7e5e2);padding-top:16px;margin-top:6px}
-.reco-strat-label{font-size:11px;font-weight:700;color:var(--primary,#3b5998);margin-bottom:10px;display:flex;align-items:center;gap:6px}
+.reco-section{border-top:1px solid #E5E7EB;padding-top:16px;margin-top:6px}
+.reco-strat-label{font-size:11px;font-weight:700;color:#6366F1;margin-bottom:10px;display:flex;align-items:center;gap:6px}
 .reco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
-.reco-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--muted,#f0efec);border:1px solid var(--border,#e7e5e2);border-radius:10px}
+.reco-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:10px}
 .reco-item .reco-icon{font-size:18px;flex-shrink:0}
-.reco-item .reco-name{font-size:13px;font-weight:700;color:var(--foreground,#1c1917)}
-.reco-item .reco-reason{font-size:11px;color:var(--muted-fg,#78716c);margin-top:2px}
+.reco-item .reco-name{font-size:13px;font-weight:700;color:#1a1a2e}
+.reco-item .reco-reason{font-size:11px;color:#6B7280;margin-top:2px}
 .reco-item .reco-conf{font-size:12px;font-weight:800;flex-shrink:0;margin-left:auto}
 /* Next Best Action */
 .nba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
-.nba-card{padding:16px;border-radius:12px;border:1px solid var(--border,#e7e5e2);display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:all .15s}
+.nba-card{padding:16px;border-radius:12px;border:1px solid #E5E7EB;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:all .15s}
 .nba-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-2px)}
 .nba-card .nba-icon{font-size:28px}
-.nba-card .nba-title{font-size:13px;font-weight:800;color:var(--foreground,#1c1917)}
-.nba-card .nba-desc{font-size:12px;color:var(--muted-fg,#78716c);line-height:1.4}
+.nba-card .nba-title{font-size:13px;font-weight:800;color:#1a1a2e}
+.nba-card .nba-desc{font-size:12px;color:#6B7280;line-height:1.4}
 .nba-card .nba-tag{display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;margin-top:4px}
 .nba-urgent .nba-tag{background:#FEF2F2;color:#DC2626}
 .nba-medium .nba-tag{background:#FFFBEB;color:#D97706}
 .nba-low .nba-tag{background:#F0FDF4;color:#059669}
 /* Engagement Heatmap */
 .heatmap-grid{display:grid;grid-template-columns:60px repeat(7,1fr);gap:3px;font-size:11px}
-.heatmap-grid .h-label{font-weight:600;color:var(--muted-fg,#78716c);display:flex;align-items:center}
-.heatmap-grid .h-day{text-align:center;font-weight:700;color:var(--muted-fg,#78716c);padding:4px}
-.heatmap-grid .h-cell{border-radius:4px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;color:var(--foreground,#1c1917)}
+.heatmap-grid .h-label{font-weight:600;color:#6B7280;display:flex;align-items:center}
+.heatmap-grid .h-day{text-align:center;font-weight:700;color:#6B7280;padding:4px}
+.heatmap-grid .h-cell{border-radius:4px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;color:#374151}
 /* Chat history */
 .chat-history{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto}
 .chat-msg{padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.5;max-width:85%}
-.chat-msg.user{align-self:flex-end;background:var(--primary,#3b5998);color:#fff;border-bottom-right-radius:4px}
-.chat-msg.bot{align-self:flex-start;background:var(--muted,#f0efec);color:var(--foreground,#1c1917);border-bottom-left-radius:4px}
+.chat-msg.user{align-self:flex-end;background:#6366F1;color:#fff;border-bottom-right-radius:4px}
+.chat-msg.bot{align-self:flex-start;background:#F3F4F6;color:#1a1a2e;border-bottom-left-radius:4px}
 /* Two-col */
 .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
 .mini-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
 .mini-metrics.cols-2{grid-template-columns:repeat(2,1fr)}
-.mini-cell{text-align:center;padding:12px 8px;border-right:1px solid var(--border,#e7e5e2)}
+.mini-cell{text-align:center;padding:12px 8px;border-right:1px solid #F3F4F6}
 .mini-cell:last-child{border-right:none}
-.mini-cell .m-label{font-size:10px;color:var(--muted-fg,#78716c);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
-.mini-cell .m-value{font-size:24px;font-weight:800;color:var(--foreground,#1c1917);line-height:1}
-@media(max-width:900px){.app-wrap{flex-direction:column}.user-list-pane{width:100%;height:260px;border-right:none;border-bottom:1px solid var(--border,#e7e5e2)}.three-col,.product-cards,.pred-grid,.reco-grid,.nba-grid{grid-template-columns:1fr}.overview-details{grid-template-columns:1fr 1fr}.metrics-row{grid-template-columns:repeat(3,1fr)}.two-col{grid-template-columns:1fr}}
+.mini-cell .m-label{font-size:10px;color:#6B7280;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
+.mini-cell .m-value{font-size:24px;font-weight:800;color:#1a1a2e;line-height:1}
+/* Insight Layers (6-layer chatbot insight) */
+.insight-layers{display:flex;flex-direction:column;gap:10px}
+.insight-layer{padding:14px 18px;border-radius:10px;transition:transform .15s ease,box-shadow .15s ease}
+.insight-layer:hover{transform:translateX(4px);box-shadow:0 2px 12px rgba(0,0,0,.06)}
+.insight-layer-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
+.insight-layer-icon{font-size:16px}
+.insight-layer-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
+.insight-layer-value{font-size:13px;line-height:1.6;color:#1a1a2e;font-weight:500}
+/* Data source badge */
+.data-source-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;margin-left:8px}
+.badge-api{background:#F0FDF4;color:#059669}
+.badge-mock{background:#FEF3C7;color:#92400E}
+/* Overview 4-col */
+.overview-details{grid-template-columns:1fr 1fr 1fr 1fr !important}
+@media(max-width:900px){.app-wrap{flex-direction:column}.user-list-pane{width:100%;height:260px;border-right:none;border-bottom:1px solid #E5E7EB}.three-col,.product-cards,.pred-grid,.reco-grid,.nba-grid{grid-template-columns:1fr}.overview-details{grid-template-columns:1fr 1fr !important}.metrics-row{grid-template-columns:repeat(3,1fr)}.two-col{grid-template-columns:1fr}}
 </style>
 </head>
 <body>
@@ -181,7 +193,7 @@ body{font-family:var(--font-sans,'Inter',system-ui,sans-serif);background:var(--
     <div class="profile-content" id="profileContent" style="display:none"></div>
   </div>
 </div>
-<script src="/static/js/user-insight-data.js"></script>
-<script src="/static/js/user-insight-render.js"></script>
+<script src="/static/user-insight-data.js"></script>
+<script src="/static/user-insight-render.js"></script>
 </body>
 </html>