import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
      '/ws': {
        target: 'ws://localhost:8000',
        ws: true,
      },
      '/openclaw': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        ws: true,
      },
    },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // Monaco Editor — only used by Scenarios page, cleanly isolated.
          if (id.includes('@monaco-editor') || id.includes('monaco-editor')) {
            return 'vendor-monaco'
          }
          // Ant Design core — used everywhere, one-way deps (no circular chunk).
          if (id.includes('antd') || id.includes('@ant-design/icons')) {
            return 'vendor-antd'
          }
          // Everything else (React, @ant-design/charts + @antv/*, etc.) → vendor.
          // NOTE: do NOT split @ant-design/charts into its own chunk — its deep
          // @antv dependency graph creates a circular chunk reference that causes
          // a runtime TDZ crash ("Cannot access 'd' before initialization").
          // charts is loaded on the Home page (default route) anyway, so a
          // separate chunk buys almost nothing.
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        },
      },
    },
  },
})