flowchart TB
    subgraph CLIENT["Client Layer（研發繪圖筆電）"]
        direction TB
        Browser["🌐 前端 React + TypeScript SPA http://localhost:5173"]

        Skills["Skills"]

        MCPNode["MCP 工具"]

        subgraph LANGGRAPH["後端"]
            ChatAPI["/chat/* Chat API"]
            direction TB
            Intent["意圖分類"]
            RAGNode["RAG 檢索"]
            VisionNode["視覺分析"]
            Generate["生成"]

            subgraph LLAMACPP["llama.cpp（Port 8080）"]
                LLM["Qwen2.5-VL:7b 視覺理解 / 推理"]
                Embed["nomic-embed-text Embedding 生成"]
            end
        end
    end

    subgraph SERVER["Server Layer（整合部專用伺服器）"]
        direction LR
        subgraph POSTGRES["PostgreSQL 16（Port 5432）"]
            pgvector["pgvector Embeddings document_chunks"]
            RelDB["Relational DB Metadata / Users Logs / Checkpoints"]
        end
        FileStorage["📁 File Storage D:\\mechdesign-ai\\storage\\documents\\ 原始上傳文件"]
        ImportScript["📜 Document Import Script 解析 PDF / Word / 圖片 → 切分 → Embedding → 寫入 DB"]
    end

    KMSystem["🗂️ KM System 機構知識管理系統 匯出的文件來源"]

    %% Client 內部流程
    Browser -- "HTTP / SSE" --> ChatAPI
    ChatAPI --> Intent
    Intent --> RAGNode & MCPNode & VisionNode
    RAGNode --> Generate
    MCPNode --> Generate
    VisionNode --> RAGNode
    Skills --> LANGGRAPH
    Generate --> LLM

    %% Client → Server
    RAGNode <-- "Query Embedding" --> Embed
    Embed <-- "SQL / pgvector Query（內網）" --> pgvector

    %% Import Script 橋接
    FileStorage -- "Read（原始文件）" --> ImportScript
    ImportScript -- "Write（向量＋Metadata）" --> POSTGRES

    %% KM 來源
    KMSystem -- "匯出文件" --> FileStorage

    %% 樣式
    classDef clientBox fill:#dbeafe,stroke:#3b82f6,color:#1e3a5f
    classDef serverBox fill:#dcfce7,stroke:#16a34a,color:#14532d
    classDef importBox fill:#fef9c3,stroke:#ca8a04,color:#713f12
    classDef kmBox fill:#f3e8ff,stroke:#9333ea,color:#581c87

    class CLIENT clientBox
    class SERVER serverBox
    class ImportScript importBox
    class KMSystem kmBox