flowchart TB
    subgraph CLIENT["Client Layer（研發繪圖筆電）"]
        direction TB
        Browser["🌐 Web Browser\nReact + TypeScript SPA\nhttp://localhost:5173"]

        subgraph FASTAPI["FastAPI Service（Port 8000）"]
            ChatAPI["/chat/*\nChat API"]
            DocAPI["/documents/*\nDocument API"]
            AdminAPI["/admin/*\nAdmin API"]
        end

        subgraph LANGGRAPH["LangGraph Agent Engine"]
            direction LR
            Intent["意圖分類"]
            RAGNode["RAG 檢索"]
            MCPNode["MCP 工具"]
            VisionNode["視覺分析"]
            Generate["生成"]
        end

        subgraph MCPSERVERS["MCP Servers"]
            CADMCP["CAD Tools MCP\nPort 8100\n指令查詢 / 功能說明"]
            KMMCP["Knowledge MCP\nPort 8101\n專業知識擴充"]
        end

        Skills["⚙️ Skills\n本機輕量工具\n（無需遠端資源）"]

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

    subgraph SERVER["Server Layer（整合部專用伺服器）"]
        direction LR
        subgraph POSTGRES["PostgreSQL 16（Port 5432）"]
            pgvector["pgvector\nEmbeddings\ndocument_chunks"]
            RelDB["Relational DB\nMetadata / Users\nLogs / Checkpoints"]
        end
        FileStorage["📁 File Storage\nD:\\mechdesign-ai\\storage\\documents\\\n原始上傳文件"]
    end

    ImportScript["📜 Document Import Script\n解析 PDF / Word / 圖片\n→ 切分 → Embedding → 寫入 DB"]

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

    %% Client 內部流程
    Browser -- "HTTP / SSE" --> FASTAPI
    ChatAPI & DocAPI & AdminAPI --> LANGGRAPH
    Intent --> RAGNode & MCPNode & VisionNode
    RAGNode --> Generate
    MCPNode --> Generate
    VisionNode --> RAGNode
    LANGGRAPH --> MCPSERVERS
    LANGGRAPH --> Skills
    LANGGRAPH --> LLAMACPP

    %% Client → Server
    CLIENT -- "SQL / pgvector Query（內網）" --> SERVER

    %% 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