diff --git a/web/package-lock.json b/web/package-lock.json
index 38db8e6..cee7113 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,26 +8,27 @@
       "name": "creator-hub-web",
       "version": "0.1.0",
       "dependencies": {
-        "@emotion/react": "11.14.0",
-        "@emotion/styled": "11.14.1",
-        "@mui/icons-material": "9.3.1",
-        "@mui/material": "9.3.1",
-        "@tanstack/react-query": "5.102.7",
-        "ra-core": "5.15.0",
+        "@refinedev/core": "^5.0.12",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "radix-ui": "^1.6.7",
         "react": "19.2.8",
-        "react-admin": "5.15.1",
         "react-dom": "19.2.8",
-        "react-hook-form": "7.86.0",
-        "react-router": "7.18.2",
-        "react-router-dom": "7.18.2"
+        "react-router": "^7.18.2",
+        "react-router-dom": "^7.18.2",
+        "remixicon": "^4.9.1",
+        "tailwind-merge": "^3.6.0"
       },
       "devDependencies": {
         "@playwright/test": "1.62.1",
+        "@tailwindcss/vite": "^4.3.3",
         "@testing-library/dom": "10.4.1",
         "@testing-library/react": "16.3.2",
         "@vitejs/plugin-react": "6.1.0",
         "@vitest/coverage-v8": "4.1.11",
         "jsdom": "27.0.1",
+        "tailwindcss": "^4.3.3",
+        "typescript": "^5.9.3",
         "vite": "8.2.2",
         "vitest": "4.1.11"
       }
@@ -71,6 +72,7 @@
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
       "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.29.7",
@@ -81,48 +83,11 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/generator": {
-      "version": "7.29.8",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz",
-      "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.29.8",
-        "@babel/types": "^7.29.8",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-globals": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
-      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
-      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.29.7",
-        "@babel/types": "^7.29.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
       "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -132,6 +97,7 @@
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
       "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -141,6 +107,7 @@
       "version": "7.29.8",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
       "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.29.8"
@@ -156,47 +123,17 @@
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
       "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/template": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
-      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.29.7",
-        "@babel/parser": "^7.29.7",
-        "@babel/types": "^7.29.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse": {
-      "version": "7.29.8",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz",
-      "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.29.7",
-        "@babel/generator": "^7.29.8",
-        "@babel/helper-globals": "^7.29.7",
-        "@babel/parser": "^7.29.8",
-        "@babel/template": "^7.29.7",
-        "@babel/types": "^7.29.8",
-        "debug": "^4.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/types": {
       "version": "7.29.8",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
       "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.29.7",
@@ -356,166 +293,71 @@
         "node": ">=20.19.0"
       }
     },
-    "node_modules/@emotion/babel-plugin": {
-      "version": "11.13.5",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
-      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+    "node_modules/@floating-ui/core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.8.0.tgz",
+      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/runtime": "^7.18.3",
-        "@emotion/hash": "^0.9.2",
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/serialize": "^1.3.3",
-        "babel-plugin-macros": "^3.1.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^4.0.0",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7",
-        "stylis": "4.2.0"
+        "@floating-ui/utils": "^0.2.12"
       }
     },
-    "node_modules/@emotion/cache": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
-      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+    "node_modules/@floating-ui/dom": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.8.0.tgz",
+      "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
       "license": "MIT",
       "dependencies": {
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/sheet": "^1.4.0",
-        "@emotion/utils": "^1.4.2",
-        "@emotion/weak-memoize": "^0.4.0",
-        "stylis": "4.2.0"
+        "@floating-ui/core": "^1.8.0",
+        "@floating-ui/utils": "^0.2.12"
       }
     },
-    "node_modules/@emotion/hash": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
-      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
-      "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/react-dom/-/react-dom-2.1.9.tgz",
+      "integrity": "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==",
       "license": "MIT",
       "dependencies": {
-        "@emotion/memoize": "^0.9.0"
-      }
-    },
-    "node_modules/@emotion/memoize": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
-      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/react": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
-      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.13.5",
-        "@emotion/cache": "^11.14.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
-        "@emotion/utils": "^1.4.2",
-        "@emotion/weak-memoize": "^0.4.0",
-        "hoist-non-react-statics": "^3.3.1"
+        "@floating-ui/dom": "^1.8.0"
       },
       "peerDependencies": {
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
       }
     },
-    "node_modules/@emotion/serialize": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
-      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/hash": "^0.9.2",
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/unitless": "^0.10.0",
-        "@emotion/utils": "^1.4.2",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@emotion/sheet": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
-      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/styled": {
-      "version": "11.14.1",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
-      "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.13.5",
-        "@emotion/is-prop-valid": "^1.3.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
-        "@emotion/utils": "^1.4.2"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.0.0-rc.0",
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@emotion/unitless": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
-      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
-      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@emotion/utils": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
-      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/weak-memoize": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
-      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.12.tgz",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
       "license": "MIT"
     },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
         "@jridgewell/trace-mapping": "^0.3.24"
       }
     },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -525,251 +367,20 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@mui/core-downloads-tracker": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.3.1.tgz",
-      "integrity": "sha512-IAyAFNQbT7hysJ9HXphiOmWJF7G1OglzHanqCgvQgH9LA2ydxtmaTBDbcBqw6euZesyShiwvpvbnYO1GY1AyXQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      }
-    },
-    "node_modules/@mui/icons-material": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.3.1.tgz",
-      "integrity": "sha512-rZj5ccG7vkpV38o/l4ys+chfE9GFypmvZr9dSNBoYVCNBD9yC6KfKq1TYpEMshWbjic7GKQ8MA1LQlcpGgcq9Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@mui/material": "^9.3.1",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/material": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.3.1.tgz",
-      "integrity": "sha512-NahAEGIXqS1K0bA4th1jeFxBguS59NOcLbMA0vU+fSaPWKjtwGBGGHeTwlc9PSmzMjOZKceeFWESB8fVHr31hA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7",
-        "@mui/core-downloads-tracker": "^9.3.1",
-        "@mui/system": "^9.3.0",
-        "@mui/types": "^9.3.0",
-        "@mui/utils": "^9.3.0",
-        "@popperjs/core": "^2.11.8",
-        "@types/react-transition-group": "^4.4.12",
-        "clsx": "^2.1.1",
-        "csstype": "^3.2.3",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.8",
-        "react-transition-group": "^4.4.5"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^9.3.0",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@mui/material-pigment-css": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/private-theming": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.3.0.tgz",
-      "integrity": "sha512-ERvqk5pejf9aRnQcDILSWGtFmsEMiVxlQ4+xsVCjsEvmK0fV9BiVP/cQwAF5dwyDFbve4lTrlcgeFEecVzTNiA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7",
-        "@mui/utils": "^9.3.0",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/styled-engine": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.3.0.tgz",
-      "integrity": "sha512-x9+KYxhjoHYZ4nioxdKnvQWdw0RScbhoZfQ4tv3Db742683U3wlYSp6zV6Us78dMFnKnyTrPTkQKyutp14gnKA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7",
-        "@emotion/cache": "^11.14.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/sheet": "^1.4.0",
-        "csstype": "^3.2.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.4.1",
-        "@emotion/styled": "^11.3.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/system": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-9.3.0.tgz",
-      "integrity": "sha512-0l4LqHJxZj65xSrioniGsxm7VNoGXonPo203oZjhBUvIDPeBqRTb7Mqc45Qxs6sO6WGR7WE/9cJ6lb4lkvHkjg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7",
-        "@mui/private-theming": "^9.3.0",
-        "@mui/styled-engine": "^9.3.0",
-        "@mui/types": "^9.3.0",
-        "@mui/utils": "^9.3.0",
-        "clsx": "^2.1.1",
-        "csstype": "^3.2.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/types": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.3.0.tgz",
-      "integrity": "sha512-2JSxyfpEFWNUB2vKs/T1BvkfyNisMHWph8bLMj8T0uHwmLl/0qfAwQkfwMT6kxLXN9uIum9AEbECXU8er3amIg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/utils": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.3.0.tgz",
-      "integrity": "sha512-2HZdHwWJ6eB+7lVGSOHsByGw8jeRulT4g0NZ608Wb8Q57DE2jbNqrWPFuJsvkQQiBiTmlpvQL3i+/62zsiPrkw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7",
-        "@mui/types": "^9.3.0",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.8"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@oxc-project/types": {
       "version": "0.147.0",
       "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.147.0.tgz",
@@ -796,14 +407,1566 @@
         "node": ">=20"
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/number/-/number-1.1.3.tgz",
+      "integrity": "sha512-Road2bidD0uu/1BGDOWNdPI06g0lIRy6IF9GZcIrDK2KGItfor8IQwQa+yM2ERgHM1MmHxaxpTzk0/Jp42lNfA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/primitive/-/primitive-1.1.7.tgz",
+      "integrity": "sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.15.tgz",
+      "integrity": "sha512-WTQwcAvQf5sOcuUyi90lKPbhwcvQ+j55cjrSmeaN+L2vKU3DooOvlKw2MDeiJ5IkV5N905KW0/fGojKOBhD11A==",
       "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.2.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.20",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-accordion/-/react-accordion-1.2.20.tgz",
+      "integrity": "sha512-jDhG9FvAEnlhnjrsINbNXcUa4G+L1KqSkJSunkbKEzFRcAb52jvM0PjPxPRvhe1HNc5F5yc0yzzWeeqlH4yBIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collapsible": "1.1.20",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.23.tgz",
+      "integrity": "sha512-VAYOiQRqj3GPpYJE0I9J+X8Ip05cyVlNdKOFeiGS2Ou1HHGfpl0BxOyZm6nmVDyU+W+NF3/XLzmjHmVGydhwgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dialog": "1.1.23",
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-arrow/-/react-arrow-1.1.15.tgz",
+      "integrity": "sha512-v4zggRcjadnI+ClKDuijlQEW4tw3NoaeHc/PwpKnLoLLKNUG4InLegkstooLcRIUWCs+8L22dGURCVuFfOKfnA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.15.tgz",
+      "integrity": "sha512-fy+dyVR+90nelK8rqIznFlxzx7uPcGbhxH8Nfr2bHb4UfSe+e3hklOC0luK0hDwVwnRX7xTRySpsrQVeW+/oNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-avatar/-/react-avatar-1.2.6.tgz",
+      "integrity": "sha512-4ULOTJ/mqy2hT9GlWa/MFHxHSvH3nJzHnZM1waNsc5Bonv7i70aNenghXmD97S6OJ81ekXONGGt4nT1r0PfEdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-is-hydrated": "0.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-checkbox/-/react-checkbox-1.3.11.tgz",
+      "integrity": "sha512-Gnptr9pDDQxD3hgq2dtPbtrp/c2qH1mBwIzw3X/ivrMb2e1t0jMTi606fVEqFPaQR1ggXIVQWKj3P2WW9v7zGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-size": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-collapsible/-/react-collapsible-1.1.20.tgz",
+      "integrity": "sha512-mcGesGplBnzN2sbvJETzpCNfSMyPnb29q1GRLU+Ib7bJrpIG2ywmRoh2V5VbA2uNvKikKUlVbAPks7JDjz4A8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-collection/-/react-collection-1.1.15.tgz",
+      "integrity": "sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.5.tgz",
+      "integrity": "sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-context/-/react-context-1.2.2.tgz",
+      "integrity": "sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-context-menu/-/react-context-menu-2.3.7.tgz",
+      "integrity": "sha512-CtXP35dxaB5T3zXSd+E3uHe/QpXcpYnZmxp6OaIbfthtfW4wyb77M23BG+bwIJDtsMwEP/YssdsmNyZu7jhWew==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-menu": "2.1.24",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-dialog/-/react-dialog-1.1.23.tgz",
+      "integrity": "sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-focus-guards": "1.1.6",
+        "@radix-ui/react-focus-scope": "1.1.16",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-direction/-/react-direction-1.1.4.tgz",
+      "integrity": "sha512-5pzg4FGQNpExhnhT2zlrP1wZFaYCd1K0nYWoFAdcYoYK868IEigqMX3B3f8yIoRlAhAeDWciLI6ZdCKHF9P4Vg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.19.tgz",
+      "integrity": "sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-effect-event": "0.0.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.24",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.24.tgz",
+      "integrity": "sha512-geq8l2rJkxvkXsT9RMgtUE3P8pITFpTsvYpbySi1IH4fZEABD/Gp85myayFgxk0ktljGMJnCbeFkyTusvSvv7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-menu": "2.1.24",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.6.tgz",
+      "integrity": "sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.16.tgz",
+      "integrity": "sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-form/-/react-form-0.1.16.tgz",
+      "integrity": "sha512-Q4TLEn2A7TAypxwmd6R9EwrlXDvkfYSDMrq9/887AXAGh+G1rH+kYJKSTv+Si9Y0JPKTwKYv6PviAJosysNimA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-label": "2.1.15",
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-hover-card/-/react-hover-card-1.1.23.tgz",
+      "integrity": "sha512-H8qONfZd3ltrU3+jHCIgITbWo6e1iTKvP9DHdrvYbX48ooRM5FjEDTn16AMwdfuOGkWdZEhpl3PLL/Wk/AnHDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-popper": "1.3.7",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-id/-/react-id-1.1.4.tgz",
+      "integrity": "sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.15",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-label/-/react-label-2.1.15.tgz",
+      "integrity": "sha512-o/rdYEwZTTo5tjknnPeyQFU45kUC4i/XyeDPP+HGyi6XqpOP6Zf5Ya5vh/Yfe9Id5JiuWnnAx2XqIeD3UYZt0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.24",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-menu/-/react-menu-2.1.24.tgz",
+      "integrity": "sha512-uW7RVuU6Lp/ZtfeY4b3kL32zccgEWvPv1+cf17ubYzHa9cL8AHokmk36cG/XEiH/smbQvumnieXX9j/e9RqJWA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-focus-guards": "1.1.6",
+        "@radix-ui/react-focus-scope": "1.1.16",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-popper": "1.3.7",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.24",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-menubar/-/react-menubar-1.1.24.tgz",
+      "integrity": "sha512-eeVs0vf7cuqXaM0qLQCPcufImiJNVBXdJDLu7ZGYl2732UH23Qat/foNGrr6vYV3/DdTsBqASoggUFgH14OcZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-menu": "2.1.24",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.22",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.22.tgz",
+      "integrity": "sha512-ou7iLEJ+yrhQndkkA4U21XIdS/CS45F4iXIkTZcb6/Ne9EMsOuDudVmCwmDnfFZZ+y1FZqXRNSIgBy+YMvZVZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-use-previous": "1.1.4",
+        "@radix-ui/react-visually-hidden": "1.2.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-one-time-password-field": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.16.tgz",
+      "integrity": "sha512-Tj9P6ntAJEw52oq/F0AGknXR4XncxEt7XU47O3xJQOiWfLzEy3d9gtgKfvjSzGxzHkfL+VzvxGu2KTFsloJqXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.3",
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-effect-event": "0.0.5",
+        "@radix-ui/react-use-is-hydrated": "0.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-password-toggle-field": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.11.tgz",
+      "integrity": "sha512-4gvFnmDXu3dgj21CqsufzIameRvlRd4SBqaWhcrlrNhRo0Y5i/49AmRJYe1fdAM3G2VNBbmin4b0D6cdQocwgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-effect-event": "0.0.5",
+        "@radix-ui/react-use-is-hydrated": "0.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-popover/-/react-popover-1.1.23.tgz",
+      "integrity": "sha512-mw58MrBlyHWFisTOYignD0vf/3gdcgAR+9of1s9G/38CbFiUwH1nCDkc0AUM9IrXFgN5Ue8n45j9WCgyM1sbiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-focus-guards": "1.1.6",
+        "@radix-ui/react-focus-scope": "1.1.16",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-popper": "1.3.7",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-popper/-/react-popper-1.3.7.tgz",
+      "integrity": "sha512-UsJrrd7w4wuKKTdvd/DNERVlwSlUcyXzjhyDwBk+3aPOsCjOY6ZSbxuw8E6lZTjjfP8Cpd0J8VVkrYUWyGYXyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-use-rect": "1.1.4",
+        "@radix-ui/react-use-size": "1.1.4",
+        "@radix-ui/rect": "1.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.17",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-portal/-/react-portal-1.1.17.tgz",
+      "integrity": "sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-presence/-/react-presence-1.1.10.tgz",
+      "integrity": "sha512-3wyzCQ6+ubRA+D4uv9m95JYLXxmOHp05qjrkjeA7uKHHtjpPggQzc6DAb0URl7j67oR0K2foO4ip27TiX037Bw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-primitive/-/react-primitive-2.1.10.tgz",
+      "integrity": "sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.3.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-progress/-/react-progress-1.1.16.tgz",
+      "integrity": "sha512-5XnomAsoZZCY+KNTxbIghpGqPruZvKFNlvcAljVAOdDRDsH4/OZQxhtwo5wdtoDM5R6MhJBb2sPnDuRFep3lzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-radio-group/-/react-radio-group-1.4.7.tgz",
+      "integrity": "sha512-cgYFEkntCxppHZgtSZ+7vh0wbZQ+IC7PPMw8DSnRG27B6kDd32/Zw0OJt7dGDigCoprMuWHjg2PvUn3PYvPFoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-size": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.19.tgz",
+      "integrity": "sha512-V9jI6hDjT7l3jsCQD9bLNvDLM3tH/gdbOTp7Tefp3hbbgCGQoK7tUvrWiRlcoBHIZ809ElXwNQwVo0B98LuTXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-is-hydrated": "0.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.18",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.18.tgz",
+      "integrity": "sha512-Zn5Cd171wxsO3Dfg8HaW6RifTb9CYTKQJHs/G4+LN1GfmJpaQMZQyQxMprVPHpaz7QY4l9BxK2JwQuzHsXC8nA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.3",
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-select/-/react-select-2.3.7.tgz",
+      "integrity": "sha512-WFGImkmbzcfxeIwq/+4HvRN0pizBwbwQUED4I13ezQsDdfl38ZntN6TmR8XaSzPBqoCToe8rF75j6NPNDSzhbg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.3",
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-focus-guards": "1.1.6",
+        "@radix-ui/react-focus-scope": "1.1.16",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-popper": "1.3.7",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-use-previous": "1.1.4",
+        "@radix-ui/react-visually-hidden": "1.2.11",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-separator/-/react-separator-1.1.15.tgz",
+      "integrity": "sha512-jOLO4lssEzWpoDu7G+Ze4VjwMRUBt291pnZD0gmalREZipnTX3wadQo7Fy48GCTfe14/YRN6rw/rOJqrE85Wxw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-slider/-/react-slider-1.4.7.tgz",
+      "integrity": "sha512-mTSLf1GC/C0moWjTbvCM6Qn/gBjvlFt1azuWF2v7MN5C3Zq2U2J2lN3ZEYkpujuOU5Ro7A28wkviSxaKnG0BYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.3",
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-use-previous": "1.1.4",
+        "@radix-ui/react-use-size": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.3.3.tgz",
+      "integrity": "sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-switch/-/react-switch-1.3.7.tgz",
+      "integrity": "sha512-48tB/4dn2UVLBCYhTu9AuR63IHl73l/qLbLgxd86noTUor4/K4LFDAcYjK+isP5313qxaFpjPVogE7+Y0/V3Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-size": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-tabs/-/react-tabs-1.1.21.tgz",
+      "integrity": "sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.23",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-toast/-/react-toast-1.2.23.tgz",
+      "integrity": "sha512-ofhyAsYaocRGOs/n0XWdUOSVzEAG6BfrMVM8z0c0kLEWY38w/0WuMFPTJP/HVaZPYkMvHZoKIIhNcjbTCBILPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-visually-hidden": "1.2.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-toggle/-/react-toggle-1.1.18.tgz",
+      "integrity": "sha512-7lonPlKfSacd20GlOBx2ltuVKz9oqWYZz+oMQyOltw6t1y2nyftj2ZmwwUHYn49kqfDWcp8dNZm5NgV+5Z+mug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.19.tgz",
+      "integrity": "sha512-OtnwuSVjd1Ofi+AdnvhsjQdyuhCDwYs1w9RyB5BN/OavXOVQo42SYqQjwUnbPnaiPFBpQ9aX70dWeee+v2oBLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-toggle": "1.1.18",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-toolbar/-/react-toolbar-1.1.19.tgz",
+      "integrity": "sha512-Ph0IvtYw4VB12ZnZg+YtrGs8yJQsnizwo/zu0R4Y/nWugtJzA7Pg1eWeuDR9+LSqn+xjamss+UOSOJJJ4gx8jw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-separator": "1.1.15",
+        "@radix-ui/react-toggle-group": "1.1.19"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.16",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-tooltip/-/react-tooltip-1.2.16.tgz",
+      "integrity": "sha512-6EamKFRRnlpdadndbZ6LMwycfwkwPte1B42hs6QA0gYhjaOKqW4PZ4pjaW9UrlDX5eVt/OjncE7BFTPL5nmZhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-popper": "1.3.7",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-visually-hidden": "1.2.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.4.tgz",
+      "integrity": "sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.6.tgz",
+      "integrity": "sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-use-effect-event": "0.0.5",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.5.tgz",
+      "integrity": "sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.5.tgz",
+      "integrity": "sha512-ge3ipobwSXTj4JyVtswQ7qZj0ZHdtbGuOno/LrgAAeSxtsJ6Vs4Gz5IkPH2bmqpjcLUFoqGhA/mueuIf63UXlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.3.tgz",
+      "integrity": "sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.4.tgz",
+      "integrity": "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.4.tgz",
+      "integrity": "sha512-XoSLhbRbqxFtgJoi2fNHA3C6pDlY34x508vUpUGoFZfvePfHXHbE1lC4FYFMnJWgiCRroSTw6fOsXQoVS9RwZg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-rect/-/react-use-rect-1.1.4.tgz",
+      "integrity": "sha512-cSOCh6JlkmfjLyNcLiu2nB4v+nm+dkZ+Q5KHWk/soo4U7ZLiEQFKHK9/YmtBHjfCEaU43IBKQOc4/uJmCaiCTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-size/-/react-use-size-1.1.4.tgz",
+      "integrity": "sha512-D3anSY15EJoxrihpsXI6SMrmmonnQtR2ni7arO+Lfdg3O95b9hNXxONk8jA5C8ANdF/h5HMAxejgs8PWJ6rlhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.11.tgz",
+      "integrity": "sha512-NFS86RYYZb4/exihaESBGOpMJFz8MGLAfu3mOBSGByVnVPC9JPASfYubxd/8KbkQK0sYAv8lVQDEQukDX/qXvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/rect/-/rect-1.1.3.tgz",
+      "integrity": "sha512-JtyZR+mqgBibTo8xea3B6ZRmzZiM/YeVBtUkas6zMuXjAlfIFIW2FgqeM9eLyvEaYX66vr6DJMK+4U6LV0KhNw==",
+      "license": "MIT"
+    },
+    "node_modules/@refinedev/core": {
+      "version": "5.0.12",
+      "resolved": "https://registry.npmmirror.com/@refinedev/core/-/core-5.0.12.tgz",
+      "integrity": "sha512-9y5Bi9Lb7XyJmM55b8rCeBTDRCBU41p47OymJldasLfrtpUm2EwI+27DjjNpHTOugymiZsIbLlPtHCPQIXBHcg==",
+      "license": "MIT",
+      "dependencies": {
+        "@refinedev/devtools-internal": "2.0.2",
+        "@tanstack/react-query": "^5.81.5",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "papaparse": "^5.3.0",
+        "pluralize": "^8.0.0",
+        "qs": "^6.10.1",
+        "tslib": "^2.6.2",
+        "warn-once": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.81.5",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@refinedev/devtools-internal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/@refinedev/devtools-internal/-/devtools-internal-2.0.2.tgz",
+      "integrity": "sha512-1YYizOW1lyy9ep8eQ7TcUPBooKXIlvzTLjLdDArsQwx7P33cn2uXdqM7So5VhlNFXhjOjAKFgrH5c1jleRF8Jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@refinedev/devtools-shared": "2.0.2",
+        "@tanstack/react-query": "^5.81.5",
+        "error-stack-parser": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@refinedev/devtools-shared": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/@refinedev/devtools-shared/-/devtools-shared-2.0.2.tgz",
+      "integrity": "sha512-3cTjR1mEWn0tHFZBfPD5aVpBGLUhpAkfjqYCwKrijIicr1Utp/j0BqiPRnNqTf+W71HTng3znBpUhnR83u+tuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/react-query": "^5.81.5",
+        "error-stack-parser": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/@rolldown/binding-android-arm-eabi": {
@@ -1075,10 +2238,567 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/node/-/node-4.3.3.tgz",
+      "integrity": "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.24.1",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide/-/oxide-4.3.3.tgz",
+      "integrity": "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-x64": "4.3.3",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.3",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.3",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.3",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.3.tgz",
+      "integrity": "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.3.tgz",
+      "integrity": "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.3.tgz",
+      "integrity": "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.3.tgz",
+      "integrity": "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.3.tgz",
+      "integrity": "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.3.tgz",
+      "integrity": "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.3.tgz",
+      "integrity": "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.3.tgz",
+      "integrity": "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.3.tgz",
+      "integrity": "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.3.tgz",
+      "integrity": "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.11.1",
+        "@emnapi/runtime": "^1.11.1",
+        "@emnapi/wasi-threads": "^1.2.2",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.3.tgz",
+      "integrity": "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.3.tgz",
+      "integrity": "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/vite/-/vite-4.3.3.tgz",
+      "integrity": "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.3",
+        "@tailwindcss/oxide": "4.3.3",
+        "tailwindcss": "4.3.3"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
     "node_modules/@tanstack/query-core": {
-      "version": "5.102.7",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.102.7.tgz",
-      "integrity": "sha512-4TH8KQrCLoNs9Zvl1LW1iaZ9cZx3dGTgfZ1BnLrcRxMNnX/toe/dGbfvF/DkvbzRyfLfpMKZkembz3o0rnugtw==",
+      "version": "5.102.8",
+      "resolved": "https://registry.npmmirror.com/@tanstack/query-core/-/query-core-5.102.8.tgz",
+      "integrity": "sha512-ZNjkJ33CqvPNec/6lZBnHqLc3EVGPZ9ySLhYahU9TcuRFdmwXewuj0c4hwSWcGHqEUwcSrKeZ+oGcvPBqXcQcg==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -1086,12 +2806,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.102.7",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.102.7.tgz",
-      "integrity": "sha512-bbd8T4jDIj9aPbNn11SsjNH8apKY4zspkrw63JRsNDXjpW5SRF7X0ipi7yrGd8DCs8QhYfhQJKqEj1YLru1DbQ==",
+      "version": "5.102.8",
+      "resolved": "https://registry.npmmirror.com/@tanstack/react-query/-/react-query-5.102.8.tgz",
+      "integrity": "sha512-TYBea4OuXWD7MhaSHq069TWbFe7rcwWN6kzT7JF0OKi1K6c1gTv2IzD6A6ExJsCMozdkqBWeuIUZmu4KQg0O5A==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.102.7"
+        "@tanstack/query-core": "5.102.8"
       },
       "funding": {
         "type": "github",
@@ -1181,21 +2901,9 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/parse-json": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
-      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
-      "license": "MIT"
-    },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.15",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
-      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "license": "MIT"
-    },
     "node_modules/@types/react": {
       "version": "19.2.18",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/react/-/react-19.2.18.tgz",
       "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
       "license": "MIT",
       "peer": true,
@@ -1203,22 +2911,16 @@
         "csstype": "^3.2.2"
       }
     },
-    "node_modules/@types/react-transition-group": {
-      "version": "4.4.12",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
-      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+    "node_modules/@types/react-dom": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmmirror.com/@types/react-dom/-/react-dom-19.2.5.tgz",
+      "integrity": "sha512-fMPwH9v7r/pp43yUd2/Mbiex5KouJwwR3dzHkhLREUC6764VyDsqxhAxv6OFEYR1RhjOyD1naqba8ECDBe7ZQg==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
-        "@types/react": "*"
+        "@types/react": "^19.2.0"
       }
     },
-    "node_modules/@types/trusted-types": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
-      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/@vitejs/plugin-react": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.1.0.tgz",
@@ -1433,6 +3135,18 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmmirror.com/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -1472,39 +3186,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/attr-accept": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
-      "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/autosuggest-highlight": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/autosuggest-highlight/-/autosuggest-highlight-3.3.4.tgz",
-      "integrity": "sha512-j6RETBD2xYnrVcoV1S5R4t3WxOlWZKyDQjkwnggDPSjF5L4jV98ZltBpvPvbkM1HtoSe5o+bNrTHyjPbieGeYA==",
-      "license": "MIT",
-      "dependencies": {
-        "remove-accents": "^0.4.2"
-      }
-    },
-    "node_modules/babel-plugin-macros": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
-      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "cosmiconfig": "^7.0.0",
-        "resolve": "^1.19.0"
-      },
-      "engines": {
-        "node": ">=10",
-        "npm": ">=6"
-      }
-    },
     "node_modules/bidi-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
@@ -1515,27 +3196,9 @@
         "require-from-string": "^2.0.2"
       }
     },
-    "node_modules/call-bind": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz",
-      "integrity": "sha512-a/hy+pNsFUTR+Iz8TCJvXudKVLAnz/DyeSUo10I5yvFDQJBFU2s9uqQpoSrJlroHUKoKqzg+epxyP9lqFdzfBQ==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "es-define-property": "^1.0.1",
-        "get-intrinsic": "^1.3.0",
-        "set-function-length": "^1.2.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
       "license": "MIT",
       "dependencies": {
@@ -1548,7 +3211,7 @@
     },
     "node_modules/call-bound": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "resolved": "https://registry.npmmirror.com/call-bound/-/call-bound-1.0.4.tgz",
       "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
       "license": "MIT",
       "dependencies": {
@@ -1562,15 +3225,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
@@ -1581,21 +3235,27 @@
         "node": ">=18"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmmirror.com/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "resolved": "https://registry.npmmirror.com/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
-    "node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "license": "MIT"
-    },
     "node_modules/cookie": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
@@ -1609,37 +3269,6 @@
         "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/cosmiconfig": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.2.1",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/cosmiconfig/node_modules/yaml": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
-      "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
-      "license": "ISC",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/css-mediaquery": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
-      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==",
-      "license": "BSD"
-    },
     "node_modules/css-tree": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
@@ -1672,9 +3301,10 @@
     },
     "node_modules/csstype": {
       "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/data-urls": {
       "version": "6.0.1",
@@ -1700,20 +3330,11 @@
         "node": ">=20"
       }
     },
-    "node_modules/date-fns": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kossnocorp"
-      }
-    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -1734,49 +3355,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/decode-uri-component": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
-      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "license": "MIT",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/define-properties": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
-      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "license": "MIT",
-      "dependencies": {
-        "define-data-property": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -1797,10 +3375,10 @@
         "node": ">=8"
       }
     },
-    "node_modules/diacritic": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/diacritic/-/diacritic-0.0.2.tgz",
-      "integrity": "sha512-iQCeDkSPwkfwWPr+HZZ49WRrM2FSI9097Q9w7agyRCdLcF9Eh2Ek0sHKcmMWx2oZVBjRBE/sziGFjZu0uf1Jbg==",
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
     "node_modules/dom-accessibility-api": {
@@ -1810,28 +3388,9 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/dompurify": {
-      "version": "3.4.14",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.14.tgz",
-      "integrity": "sha512-dVoH9z+MY+C9IilgGCk3YfFqjLi3fChm2OiKJMzh6axrJ5qwxqWaZamgmHrpv22CN/KdbZJuGEGgfQoL00LTdg==",
-      "license": "(MPL-2.0 OR Apache-2.0)",
-      "optionalDependencies": {
-        "@types/trusted-types": "^2.0.7"
-      }
-    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
       "license": "MIT",
       "dependencies": {
@@ -1843,6 +3402,20 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.24.5",
+      "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.24.5.tgz",
+      "integrity": "sha512-L1l8TNvomm6UVW5B253AGxQagSQr+vGwhMlrrfRS2qmhx46AMpMVJKQYLvWYbysTMY8VoicOvzHzoHMbyzB+4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
@@ -1856,18 +3429,18 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/error-ex": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
-      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+    "node_modules/error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmmirror.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
       "license": "MIT",
       "dependencies": {
-        "is-arrayish": "^0.2.1"
+        "stackframe": "^1.3.4"
       }
     },
     "node_modules/es-define-property": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
       "license": "MIT",
       "engines": {
@@ -1876,7 +3449,7 @@
     },
     "node_modules/es-errors": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
       "license": "MIT",
       "engines": {
@@ -1892,7 +3465,7 @@
     },
     "node_modules/es-object-atoms": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
       "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
       "license": "MIT",
       "dependencies": {
@@ -1902,18 +3475,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -1924,12 +3485,6 @@
         "@types/estree": "^1.0.0"
       }
     },
-    "node_modules/eventemitter3": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
-      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
-      "license": "MIT"
-    },
     "node_modules/expect-type": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
@@ -1958,33 +3513,6 @@
         }
       }
     },
-    "node_modules/file-selector": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
-      "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.7.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/filter-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
-      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/find-root": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-      "license": "MIT"
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2002,7 +3530,7 @@
     },
     "node_modules/function-bind": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
       "license": "MIT",
       "funding": {
@@ -2011,7 +3539,7 @@
     },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
       "license": "MIT",
       "dependencies": {
@@ -2033,9 +3561,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-proto": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
       "license": "MIT",
       "dependencies": {
@@ -2048,7 +3585,7 @@
     },
     "node_modules/gopd": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
       "license": "MIT",
       "engines": {
@@ -2058,6 +3595,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2068,21 +3612,9 @@
         "node": ">=8"
       }
     },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "license": "MIT",
-      "dependencies": {
-        "es-define-property": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "license": "MIT",
       "engines": {
@@ -2094,7 +3626,7 @@
     },
     "node_modules/hasown": {
       "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.4.tgz",
       "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
       "license": "MIT",
       "dependencies": {
@@ -2104,21 +3636,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "node_modules/hoist-non-react-statics/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT"
-    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -2180,52 +3697,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/import-fresh": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
-      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "license": "MIT",
-      "dependencies": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/inflection": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/inflection/-/inflection-3.0.2.tgz",
-      "integrity": "sha512-+Bg3+kg+J6JUWn8J6bzFmOWkTQ6L/NHfDRSYU+EVvuKHDxUDHAXgqixHfVlzuBQaPOTac8hn43aPhMNk6rMe3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "license": "MIT"
-    },
-    "node_modules/is-core-module": {
-      "version": "2.16.2",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
-      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -2272,10 +3743,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmmirror.com/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/jsdom": {
@@ -2318,33 +3800,6 @@
         }
       }
     },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
-      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "license": "MIT"
-    },
-    "node_modules/jsonexport": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/jsonexport/-/jsonexport-3.2.0.tgz",
-      "integrity": "sha512-GbO9ugb0YTZatPd/hqCGR0FSwbr82H6OzG04yzdrG7XOe4QZ0jhQ+kOsB29zqkzoYJLmLxbbrFiuwbQu891XnQ==",
-      "license": "Apache-2.0",
-      "bin": {
-        "jsonexport": "bin/jsonexport.js"
-      }
-    },
     "node_modules/lightningcss": {
       "version": "1.33.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
@@ -2606,29 +4061,17 @@
         "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "license": "MIT"
-    },
     "node_modules/lodash": {
       "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.18.1.tgz",
       "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
       "license": "MIT"
     },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "license": "MIT",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+      "license": "MIT"
     },
     "node_modules/lru-cache": {
       "version": "11.5.2",
@@ -2690,7 +4133,7 @@
     },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
       "license": "MIT",
       "engines": {
@@ -2708,6 +4151,7 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -2729,51 +4173,16 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/node-polyglot": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/node-polyglot/-/node-polyglot-2.6.0.tgz",
-      "integrity": "sha512-ZZFkaYzIfGfBvSM6QhA9dM8EEaUJOVewzGSRcXWbJELXDj0lajAtKaENCYxvF5yE+TgHg6NQb0CmgYMsMdcNJQ==",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "hasown": "^2.0.2",
-        "object.entries": "^1.1.8",
-        "warning": "^4.0.3"
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
       },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.entries": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
-      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/obug": {
@@ -2790,35 +4199,11 @@
         "node": ">=12.20.0"
       }
     },
-    "node_modules/parent-module": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "license": "MIT",
-      "dependencies": {
-        "callsites": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/parse-json": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
+    "node_modules/papaparse": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmmirror.com/papaparse/-/papaparse-5.7.0.tgz",
+      "integrity": "sha512-qBGxg/7Q3Kl9Wfhrz2Z74UnvnHTXLNG6jmKJFeBvP2+y4lV7So+7SR62+Zd47JvdrCkX+nDcnr0ObPzek/+6RA==",
+      "license": "MIT"
     },
     "node_modules/parse5": {
       "version": "8.0.1",
@@ -2833,21 +4218,6 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "license": "MIT"
-    },
-    "node_modules/path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -2859,6 +4229,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -2921,6 +4292,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/pluralize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/pluralize/-/pluralize-8.0.0.tgz",
+      "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.26",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
@@ -2972,23 +4352,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
-    "node_modules/prop-types/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT"
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2999,101 +4362,97 @@
         "node": ">=6"
       }
     },
-    "node_modules/query-string": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
-      "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
-      "license": "MIT",
+    "node_modules/qs": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.16.0.tgz",
+      "integrity": "sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "decode-uri-component": "^0.2.2",
-        "filter-obj": "^1.1.0",
-        "split-on-first": "^1.0.0",
-        "strict-uri-encode": "^2.0.0"
+        "es-define-property": "^1.0.1",
+        "side-channel": "^1.1.1"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=0.6"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/ra-core": {
-      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/ra-core/-/ra-core-5.15.0.tgz",
-      "integrity": "sha512-8PP+ulxmEPW/p9V4j0kwydD1yLYdApzYcfOVXY6MDezSd/1QzJKdIHO5WrXWThlCMId/nUpmBrtCHLCYYZ9t5A==",
+    "node_modules/radix-ui": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmmirror.com/radix-ui/-/radix-ui-1.6.7.tgz",
+      "integrity": "sha512-QBdhh1arIEUvPC0dQ5+nwWAxt7+N+oP/9jPwjJkGFoSk/sqxg32gJtSXGtFh8frAIcS6oC9cx2Q+7KYCQLOAeA==",
       "license": "MIT",
       "dependencies": {
-        "date-fns": "^3.6.0",
-        "eventemitter3": "^5.0.1",
-        "inflection": "^3.0.0",
-        "jsonexport": "^3.2.0",
-        "lodash": "^4.17.21",
-        "query-string": "^7.1.3",
-        "react-error-boundary": "^4.0.13",
-        "react-is": "^18.2.0 || ^19.0.0"
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-accessible-icon": "1.1.15",
+        "@radix-ui/react-accordion": "1.2.20",
+        "@radix-ui/react-alert-dialog": "1.1.23",
+        "@radix-ui/react-arrow": "1.1.15",
+        "@radix-ui/react-aspect-ratio": "1.1.15",
+        "@radix-ui/react-avatar": "1.2.6",
+        "@radix-ui/react-checkbox": "1.3.11",
+        "@radix-ui/react-collapsible": "1.1.20",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-context-menu": "2.3.7",
+        "@radix-ui/react-dialog": "1.1.23",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-dropdown-menu": "2.1.24",
+        "@radix-ui/react-focus-guards": "1.1.6",
+        "@radix-ui/react-focus-scope": "1.1.16",
+        "@radix-ui/react-form": "0.1.16",
+        "@radix-ui/react-hover-card": "1.1.23",
+        "@radix-ui/react-label": "2.1.15",
+        "@radix-ui/react-menu": "2.1.24",
+        "@radix-ui/react-menubar": "1.1.24",
+        "@radix-ui/react-navigation-menu": "1.2.22",
+        "@radix-ui/react-one-time-password-field": "0.1.16",
+        "@radix-ui/react-password-toggle-field": "0.1.11",
+        "@radix-ui/react-popover": "1.1.23",
+        "@radix-ui/react-popper": "1.3.7",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-progress": "1.1.16",
+        "@radix-ui/react-radio-group": "1.4.7",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-scroll-area": "1.2.18",
+        "@radix-ui/react-select": "2.3.7",
+        "@radix-ui/react-separator": "1.1.15",
+        "@radix-ui/react-slider": "1.4.7",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-switch": "1.3.7",
+        "@radix-ui/react-tabs": "1.1.21",
+        "@radix-ui/react-toast": "1.2.23",
+        "@radix-ui/react-toggle": "1.1.18",
+        "@radix-ui/react-toggle-group": "1.1.19",
+        "@radix-ui/react-toolbar": "1.1.19",
+        "@radix-ui/react-tooltip": "1.2.16",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-effect-event": "0.0.5",
+        "@radix-ui/react-use-escape-keydown": "1.1.5",
+        "@radix-ui/react-use-is-hydrated": "0.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-use-size": "1.1.4",
+        "@radix-ui/react-visually-hidden": "1.2.11"
       },
       "peerDependencies": {
-        "@tanstack/react-query": "^5.83.0",
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0",
-        "react-hook-form": "^7.72.0",
-        "react-router": "^6.28.1 || ^7.1.1",
-        "react-router-dom": "^6.28.1 || ^7.1.1"
-      }
-    },
-    "node_modules/ra-i18n-polyglot": {
-      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/ra-i18n-polyglot/-/ra-i18n-polyglot-5.15.0.tgz",
-      "integrity": "sha512-9QEC5xV9sUIQnrjgPcAh843MCiTmsh1cLduMKxqI1lO6mnL1jnTKJkKpTPh3O9TowCOZvxjZoqCPe12KGmZARQ==",
-      "license": "MIT",
-      "dependencies": {
-        "node-polyglot": "^2.2.2",
-        "ra-core": "^5.15.0"
-      }
-    },
-    "node_modules/ra-language-english": {
-      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/ra-language-english/-/ra-language-english-5.15.0.tgz",
-      "integrity": "sha512-71Sa3yuGyaDFXMmdSI4+ef0brYFCkhtF9yrPvnUnKeg4Fwuc23KBAxuXmca5gdEcsKxJMY1fvGYblAPhcq7vDg==",
-      "license": "MIT",
-      "dependencies": {
-        "ra-core": "^5.15.0"
-      }
-    },
-    "node_modules/ra-ui-materialui": {
-      "version": "5.15.1",
-      "resolved": "https://registry.npmjs.org/ra-ui-materialui/-/ra-ui-materialui-5.15.1.tgz",
-      "integrity": "sha512-4c4iwKu7AphtRZa9mQQkFWowOasC/tXlzyVFTi/+Dm28WJtwjAcBusE1kmgs99cZaQJaHYPRvZY1JBfEIwQWTQ==",
-      "license": "MIT",
-      "dependencies": {
-        "autosuggest-highlight": "^3.1.1",
-        "clsx": "^2.1.1",
-        "css-mediaquery": "^0.1.2",
-        "diacritic": "^0.0.2",
-        "dompurify": "^3.2.4",
-        "inflection": "^3.0.0",
-        "jsonexport": "^3.2.0",
-        "lodash": "~4.18.1",
-        "query-string": "^7.1.3",
-        "react-dropzone": "^14.2.3",
-        "react-error-boundary": "^4.0.13",
-        "react-hotkeys-hook": "^5.1.0",
-        "react-transition-group": "^4.4.5"
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
-      "peerDependencies": {
-        "@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
-        "@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
-        "@mui/system": "^5.15.20 || ^6.0.0 || ^7.0.0 || ^9.0.0",
-        "@mui/utils": "^5.15.20 || ^6.0.0 || ^7.0.0 || ^9.0.0",
-        "@tanstack/react-query": "^5.83.0",
-        "csstype": "^3.1.3",
-        "ra-core": "^5.0.0",
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0",
-        "react-hook-form": "*",
-        "react-is": "^18.0.0 || ^19.0.0",
-        "react-router": "^6.28.1 || ^7.1.1",
-        "react-router-dom": "^6.28.1 || ^7.1.1"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
     "node_modules/react": {
@@ -3105,30 +4464,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-admin": {
-      "version": "5.15.1",
-      "resolved": "https://registry.npmjs.org/react-admin/-/react-admin-5.15.1.tgz",
-      "integrity": "sha512-1FFDs7yCxAn17aPfCovssMYQHVda5YTosGR6fK8kdBe9Ew6iGunmB+nj7ajdKKOIJ2PdZpBluOTiN9yBrSGuWg==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/react": "^11.14.0",
-        "@emotion/styled": "^11.14.0",
-        "@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
-        "@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
-        "@tanstack/react-query": "^5.83.0",
-        "ra-core": "^5.15.0",
-        "ra-i18n-polyglot": "^5.15.0",
-        "ra-language-english": "^5.15.0",
-        "ra-ui-materialui": "^5.15.1",
-        "react-hook-form": "^7.72.0",
-        "react-router": "^6.28.1 || ^7.1.1",
-        "react-router-dom": "^6.28.1 || ^7.1.1"
-      },
-      "peerDependencies": {
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/react-dom": {
       "version": "19.2.8",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz",
@@ -3141,73 +4476,56 @@
         "react": "^19.2.8"
       }
     },
-    "node_modules/react-dropzone": {
-      "version": "14.4.1",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.4.1.tgz",
-      "integrity": "sha512-QDuV76v3uKbHiH34SpwifZ+gOLi1+RdsCO1kl5vxMT4wW8R82+sthjvBw4th3NHF/XX6FBsqDYZVNN+pnhaw0g==",
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmmirror.com/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
       "license": "MIT",
       "dependencies": {
-        "attr-accept": "^2.2.4",
-        "file-selector": "^2.1.0",
-        "prop-types": "^15.8.1"
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
       },
       "engines": {
-        "node": ">= 10.13"
+        "node": ">=10"
       },
       "peerDependencies": {
-        "react": ">= 16.8 || 18.0.0"
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/react-error-boundary": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.1.2.tgz",
-      "integrity": "sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==",
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmmirror.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.12.5"
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
       },
-      "peerDependencies": {
-        "react": ">=16.13.1"
-      }
-    },
-    "node_modules/react-hook-form": {
-      "version": "7.86.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.86.0.tgz",
-      "integrity": "sha512-4kbWJrh5jPZt1+YqVcXcGKffGcXV/XVbozknLh0Yjh0KhpoAkus21TAQhzRYqNwFkkObmnSvRlZZ3GT+ehoIrA==",
-      "license": "MIT",
       "engines": {
-        "node": ">=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/react-hook-form"
+        "node": ">=10"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17 || ^18 || ^19"
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/react-hotkeys-hook": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-5.3.3.tgz",
-      "integrity": "sha512-aswgyWUnE25hmhzHTfKDmKzsaSE5DJ4LKaU/o6rQSXkDd/1Bh9TfAFQbHkf6fLy11HvlYkp+cDDarGdhmCDhoQ==",
-      "license": "MIT",
-      "workspaces": [
-        "packages/*"
-      ],
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/react-is": {
-      "version": "19.2.8",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.8.tgz",
-      "integrity": "sha512-s5un28nYxKJw5gvUHyW5PCC28CvBqLu9r3cWgzHT4Vo/5fqqkFcdRYsGcKf50WMPpjjFZS5d76fn3YCo2njKwQ==",
-      "license": "MIT"
-    },
     "node_modules/react-router": {
       "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.2.tgz",
+      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-7.18.2.tgz",
       "integrity": "sha512-aUVMjFm3GAPTTZL7oYr5E7ETiqfQCHRLH+B+5afnICvf0r7kkK4eR6SMuwbSTJw/7t+12khT/Kahij49fqOCIg==",
       "license": "MIT",
       "dependencies": {
@@ -3229,7 +4547,7 @@
     },
     "node_modules/react-router-dom": {
       "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.2.tgz",
+      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-7.18.2.tgz",
       "integrity": "sha512-AIKJ/jgGlFb3EbfCXk5Gzshiwt+l3mqbCrNjmEWMMjqQxNJ3svBa6bgzFyCC2Sw3RA0VWF1kg3uQf2OFhxb8hw==",
       "license": "MIT",
       "dependencies": {
@@ -3243,27 +4561,33 @@
         "react-dom": ">=18"
       }
     },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "license": "BSD-3-Clause",
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
       },
       "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/remove-accents": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.4.tgz",
-      "integrity": "sha512-EpFcOa/ISetVHEXqu+VwI96KZBmq+a8LJnGkaeFw45epGlxIZz5dhEEnNZMsQXgORu3qaMoLX4qJCzOik6ytAg==",
-      "license": "MIT"
+    "node_modules/remixicon": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmmirror.com/remixicon/-/remixicon-4.9.1.tgz",
+      "integrity": "sha512-36gLSoujkabnCFZFDyP17VNh9piuBA/rsXUb4auSJWLGsHVXtmxLj/EM5FjaEAGnk8oIAj1Azob/DZ2N+90lAQ==",
+      "license": "Apache-2.0"
     },
     "node_modules/require-from-string": {
       "version": "2.0.2",
@@ -3275,36 +4599,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/resolve": {
-      "version": "1.22.12",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
-      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "is-core-module": "^2.16.1",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/resolve-from": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/rolldown": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.6.tgz",
@@ -3391,21 +4685,76 @@
       "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
       "license": "MIT"
     },
-    "node_modules/set-function-length": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
-      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+    "node_modules/side-channel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
       "license": "MIT",
       "dependencies": {
-        "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.2"
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/siginfo": {
@@ -3415,15 +4764,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3434,15 +4774,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/split-on-first": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
-      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -3450,6 +4781,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmmirror.com/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==",
+      "license": "MIT"
+    },
     "node_modules/std-env": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz",
@@ -3457,21 +4794,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/strict-uri-encode": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
-      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/stylis": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
-      "license": "MIT"
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3485,18 +4807,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -3504,6 +4814,37 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-4.3.3.tgz",
+      "integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -3596,10 +4937,67 @@
     },
     "node_modules/tslib": {
       "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vite": {
       "version": "8.2.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.2.tgz",
@@ -3781,14 +5179,11 @@
         "node": ">=18"
       }
     },
-    "node_modules/warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
+    "node_modules/warn-once": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmmirror.com/warn-once/-/warn-once-0.1.1.tgz",
+      "integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==",
+      "license": "MIT"
     },
     "node_modules/webidl-conversions": {
       "version": "8.0.1",
diff --git a/web/package.json b/web/package.json
index 828ac9b..bea1c4a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,26 +11,27 @@
     "test:responsive": "playwright test"
   },
   "dependencies": {
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.1",
-    "@mui/icons-material": "9.3.1",
-    "@mui/material": "9.3.1",
-    "@tanstack/react-query": "5.102.7",
-    "ra-core": "5.15.0",
+    "@refinedev/core": "^5.0.12",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "radix-ui": "^1.6.7",
     "react": "19.2.8",
-    "react-admin": "5.15.1",
     "react-dom": "19.2.8",
-    "react-hook-form": "7.86.0",
-    "react-router": "7.18.2",
-    "react-router-dom": "7.18.2"
+    "react-router": "^7.18.2",
+    "react-router-dom": "^7.18.2",
+    "remixicon": "^4.9.1",
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@playwright/test": "1.62.1",
+    "@tailwindcss/vite": "^4.3.3",
     "@testing-library/dom": "10.4.1",
     "@testing-library/react": "16.3.2",
     "@vitejs/plugin-react": "6.1.0",
     "@vitest/coverage-v8": "4.1.11",
     "jsdom": "27.0.1",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^5.9.3",
     "vite": "8.2.2",
     "vitest": "4.1.11"
   }
diff --git a/web/src/AccountList.jsx b/web/src/AccountList.jsx
deleted file mode 100644
index 1f4d5ca..0000000
--- a/web/src/AccountList.jsx
+++ /dev/null
@@ -1,252 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import { useDataProvider, useGetList, useGetOne } from 'ra-core'
-import { Link as RouterLink, useParams } from 'react-router-dom'
-import {
-  Alert,
-  Box,
-  Button,
-  CircularProgress,
-  MenuItem,
-  Paper,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-} from '@mui/material'
-import AccountCircleOutlined from '@mui/icons-material/AccountCircleOutlined'
-import CheckCircleOutlined from '@mui/icons-material/CheckCircleOutlined'
-import PauseCircleOutlined from '@mui/icons-material/PauseCircleOutlined'
-import ReportProblemOutlined from '@mui/icons-material/ReportProblemOutlined'
-
-const emptyAccount = {
-  name: '',
-  platform: '',
-  platform_account_key: '',
-  tags: '',
-  cookies: '',
-}
-
-const platformOptions = [
-  ['douyin', '抖音'],
-  ['xiaohongshu', '小红书'],
-  ['wechat-official', '公众号'],
-  ['kuaishou', '快手'],
-]
-
-const wrapAnywhere = { overflowWrap: 'anywhere', minWidth: 0 }
-
-const reasonLabels = {
-  account_revoked: '授权已撤销',
-  account_paused: '账号已暂停',
-  binding_missing: '未绑定运行环境',
-  network_exit_missing: '未绑定固定出口',
-  network_exit_unhealthy: '固定出口不健康',
-  runtime_stop_pending: '运行环境停止结果待确认',
-  runtime_missing: '运行环境未启动',
-  runtime_active: '仍有活动运行实例',
-  account_conflict: '账号状态已变化，请刷新后重试',
-  environment_unavailable: '环境状态未知',
-}
-
-function actionError(error, conflictMessage) {
-  if (error?.status === 409) return `冲突（409）：${reasonLabels[error.body?.reason_code] || conflictMessage}`
-  if (error?.status === 503) return `环境不可用（503）：${error.message}`
-  return error?.message || '操作失败'
-}
-
-function environmentError(error) {
-  return `环境不可用${error?.status ? `（${error.status}）` : ''}：无法读取运行环境绑定与 readiness，状态暂时未知。`
-}
-
-export function accountReadiness(account, binding, bindingError = false) {
-  if (account.authorization_status !== 'authorized') return { label: '授权已撤销', reason: 'account_revoked', canResume: false, ready: false }
-  if (bindingError) return { label: '环境状态未知', reason: 'environment_unavailable', canResume: false, ready: false }
-  if (!binding) return { label: '未绑定运行环境', reason: 'binding_missing', canResume: false, ready: false }
-  const resourceReason = binding.cleanup_pending
-    ? 'runtime_stop_pending'
-    : binding.network_exit_id && binding.network_exit_health !== 'healthy'
-      ? 'network_exit_unhealthy'
-      : ''
-  if (resourceReason) return { label: reasonLabels[resourceReason], reason: resourceReason, canResume: false, ready: false }
-  if (account.runtime_status === 'paused') {
-    const canResume = !binding.runtime_instance_id
-    return { label: canResume ? '资源就绪，可恢复' : '等待运行环境停止', reason: canResume ? '' : 'runtime_stop_pending', canResume, ready: false }
-  }
-  const reason = binding.schedule_block_reason || ''
-  return { label: reason ? (reasonLabels[reason] || `不可调度：${reason}`) : '可调度', reason, canResume: false, ready: !reason }
-}
-
-function AccountState({ account, binding, bindingError }) {
-  const readiness = accountReadiness(account, binding, bindingError)
-  const Icon = readiness.ready ? CheckCircleOutlined : account.runtime_status === 'paused' && readiness.canResume ? PauseCircleOutlined : ReportProblemOutlined
-  const color = readiness.ready ? 'success.main' : readiness.canResume ? 'warning.main' : 'error.main'
-  return <Stack direction="row" spacing={1} sx={{ alignItems: 'center', color }}><Icon fontSize="small" /><Typography component="span" variant="body2" fontWeight={650}>{readiness.label}</Typography></Stack>
-}
-
-function AccountForm({ busy, onSubmit }) {
-  const [form, setForm] = useState(emptyAccount)
-  const update = (key, value) => setForm(current => ({ ...current, [key]: value }))
-  const valid = form.name.trim() && form.platform && form.platform_account_key.trim() && form.cookies.trim()
-
-  async function submit(event) {
-    event.preventDefault()
-    if (!valid) return
-    const created = await onSubmit({
-      name: form.name.trim(),
-      platform: form.platform.trim(),
-      platform_account_key: form.platform_account_key.trim(),
-      tags: form.tags.split(/[,，]/).map(tag => tag.trim()).filter(Boolean),
-      cookies: form.cookies.trim(),
-    })
-    if (created) setForm(emptyAccount)
-  }
-
-  return (
-    <Paper component="form" onSubmit={submit} variant="outlined" sx={{ display: 'grid', gridTemplateColumns: { xs: 'minmax(0, 1fr)', md: 'repeat(2, minmax(0, 1fr))', lg: 'repeat(3, minmax(0, 1fr))' }, gap: 2.5, p: { xs: 2.5, md: 3 }, mb: 3.5, alignItems: 'start' }}>
-      <TextField required label="账号名称" value={form.name} onChange={event => update('name', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '账号名称', maxLength: 128 } }} />
-      <TextField required select label="平台类型" value={form.platform} onChange={event => update('platform', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '平台类型' } }}>
-        {platformOptions.map(([value, label]) => <MenuItem key={value} value={value}>{label}</MenuItem>)}
-      </TextField>
-      <TextField required label="账号 ID" value={form.platform_account_key} onChange={event => update('platform_account_key', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '账号 ID', maxLength: 128 } }} />
-      <TextField label="TAGS" value={form.tags} onChange={event => update('tags', event.target.value)} slotProps={{ htmlInput: { 'aria-label': 'TAGS' } }} helperText="多个标签用逗号分隔" />
-      <TextField required multiline minRows={3} label="Cookies" value={form.cookies} onChange={event => update('cookies', event.target.value)} slotProps={{ htmlInput: { 'aria-label': 'Cookies', maxLength: 8192 } }} helperText="仅支持浏览器 Cookie Header 格式，如 name=value; token=value" />
-      <Button type="submit" variant="contained" size="large" disabled={!valid || busy} sx={{ minHeight: 52, gridColumn: { md: '1 / -1', lg: 'auto' } }}>{busy ? '创建中…' : '创建账号'}</Button>
-    </Paper>
-  )
-}
-
-function AccountTable({ accounts, bindings, bindingsError }) {
-  return (
-    <TableContainer component={Paper} variant="outlined" sx={{ display: { xs: 'none', md: 'block' } }}>
-      <Table sx={{ tableLayout: 'fixed' }}>
-        <TableHead><TableRow><TableCell width="24%">账号</TableCell><TableCell width="16%">授权</TableCell><TableCell width="26%">资源就绪度</TableCell><TableCell width="22%">固定资源</TableCell><TableCell width="12%">操作</TableCell></TableRow></TableHead>
-        <TableBody>{accounts.map(account => {
-          const binding = bindings.get(account.id)
-          return <TableRow key={account.id}><TableCell><Typography fontWeight={700} sx={wrapAnywhere}>{account.name}</Typography><Typography variant="caption" color="text.secondary" sx={wrapAnywhere}>{account.platform_account_key} · {account.platform}</Typography></TableCell><TableCell>{account.authorization_status === 'authorized' ? '已授权' : '已撤销'} · {account.runtime_status === 'active' ? '启用' : '暂停'}</TableCell><TableCell><AccountState account={account} binding={binding} bindingError={bindingsError} /></TableCell><TableCell><Typography variant="body2" sx={wrapAnywhere}>{bindingsError ? '状态未知' : (binding?.name || '—')}</Typography><Typography variant="caption" color="text.secondary" sx={wrapAnywhere}>{bindingsError ? '环境数据不可用' : (binding?.network_exit_id || '未绑定出口')}</Typography></TableCell><TableCell><Button component={RouterLink} to={`/accounts/${account.id}`} size="small">查看</Button></TableCell></TableRow>
-        })}</TableBody>
-      </Table>
-    </TableContainer>
-  )
-}
-
-function AccountCards({ accounts, bindings, bindingsError }) {
-  return <Stack spacing={2} sx={{ display: { xs: 'flex', md: 'none' } }}>{accounts.map(account => {
-    const binding = bindings.get(account.id)
-    return <Paper key={account.id} variant="outlined" sx={{ p: 2.5, minWidth: 0 }}><Stack spacing={1.5} sx={{ minWidth: 0 }}><Box sx={{ minWidth: 0 }}><Typography fontWeight={700} sx={wrapAnywhere}>{account.name}</Typography><Typography variant="caption" color="text.secondary" sx={wrapAnywhere}>{account.platform_account_key} · {account.platform}</Typography></Box><Typography variant="body2">授权：{account.authorization_status === 'authorized' ? '已授权' : '已撤销'} · 账号：{account.runtime_status === 'active' ? '启用' : '暂停'}</Typography><AccountState account={account} binding={binding} bindingError={bindingsError} /><Typography variant="body2" sx={wrapAnywhere}>{bindingsError ? '运行环境与固定出口：状态未知' : `运行环境：${binding?.name || '未绑定'} · 固定出口：${binding?.network_exit_id || '未绑定'}`}</Typography><Button component={RouterLink} to={`/accounts/${account.id}`} variant="outlined">查看账号</Button></Stack></Paper>
-  })}</Stack>
-}
-
-export function AccountList() {
-  const dataProvider = useDataProvider()
-  const [busy, setBusy] = useState(false)
-  const [message, setMessage] = useState(null)
-  const [filter, setFilter] = useState('')
-  const { data: accounts = [], error, isPending, refetch } = useGetList('accounts')
-  const { data: browsers = [], error: browsersError, refetch: refetchBrowsers } = useGetList('browsers', undefined, { retry: false })
-  const bindings = useMemo(() => new Map(browsers.filter(browser => browser.account_id).map(browser => [browser.account_id, browser])), [browsers])
-  const needle = filter.trim().toLowerCase()
-  const visible = needle ? accounts.filter(account => `${account.name} ${account.platform} ${account.platform_account_key} ${(account.tags || []).join(' ')}`.toLowerCase().includes(needle)) : accounts
-
-  useEffect(() => { document.title = 'CreatorHub · 社媒账号' }, [])
-
-  async function createAccount(data) {
-    setBusy(true); setMessage(null)
-    try {
-      await dataProvider.create('accounts', { data })
-      await refetch()
-      setMessage({ severity: 'success', text: '账号已创建；绑定健康出口和运行环境后方可恢复。' })
-      return true
-    } catch (reason) {
-      setMessage({ severity: 'error', text: actionError(reason, '该平台的账号 ID 已存在；表单内容已保留。') })
-      return false
-    } finally { setBusy(false) }
-  }
-
-  return (
-    <>
-      <Box component="header" sx={{ mb: 4 }}><Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}><AccountCircleOutlined color="primary" fontSize="large" /><Typography variant="h1">社媒账号</Typography></Stack><Typography color="text.secondary" sx={{ mt: 1 }}>管理账号授权、暂停状态与固定运行资源</Typography></Box>
-      <AccountForm busy={busy} onSubmit={createAccount} />
-      {message ? <Alert severity={message.severity} aria-live="polite" sx={{ mb: 2.5 }}>{message.text}</Alert> : null}
-      {error ? <Alert severity="error" sx={{ mb: 2.5 }}>{actionError(error, '账号列表冲突')}</Alert> : null}
-      {browsersError ? <Alert severity="error" action={<Button color="inherit" size="small" onClick={() => refetchBrowsers()}>重试环境状态</Button>} sx={{ mb: 2.5 }}>{environmentError(browsersError)}</Alert> : null}
-      {accounts.length > 0 ? <TextField label="筛选账号" size="small" value={filter} onChange={event => setFilter(event.target.value)} sx={{ mb: 2.5, width: { xs: '100%', sm: 320 } }} /> : null}
-      {isPending ? <Box sx={{ display: 'grid', placeItems: 'center', minHeight: 220 }}><CircularProgress aria-label="正在加载账号" /></Box> : null}
-      {!isPending && accounts.length === 0 ? <Paper variant="outlined" sx={{ py: 7, px: 2, textAlign: 'center', color: 'text.secondary' }}>暂无账号。创建账号后，再前往运行环境绑定健康网络出口。</Paper> : null}
-      {!isPending && accounts.length > 0 && visible.length === 0 ? <Paper variant="outlined" sx={{ py: 6, textAlign: 'center' }}><Typography color="text.secondary">没有符合筛选条件的账号</Typography><Button onClick={() => setFilter('')} sx={{ mt: 1 }}>清除筛选</Button></Paper> : null}
-      {!isPending && visible.length > 0 ? <><AccountTable accounts={visible} bindings={bindings} bindingsError={browsersError} /><AccountCards accounts={visible} bindings={bindings} bindingsError={browsersError} /></> : null}
-    </>
-  )
-}
-
-export function AccountDetail() {
-  const { id } = useParams()
-  const dataProvider = useDataProvider()
-  const [busy, setBusy] = useState(false)
-  const [message, setMessage] = useState(null)
-  const [draftContent, setDraftContent] = useState('')
-  const [draftBusy, setDraftBusy] = useState(false)
-  const { data: account, error, isPending, refetch } = useGetOne('accounts', { id })
-  const { data: browsers = [], error: browsersError, refetch: refetchBrowsers } = useGetList('browsers', undefined, { retry: false })
-  const { data: drafts = [], error: draftsError, refetch: refetchDrafts } = useGetList('drafts', { filter: { account_id: id } }, { retry: false })
-  const binding = browsersError ? undefined : browsers.find(browser => browser.account_id === id)
-  const readiness = account ? accountReadiness(account, binding, browsersError) : null
-
-  useEffect(() => { document.title = 'CreatorHub · 账号详情' }, [])
-
-  async function act(action) {
-    if (action === 'pause' && !window.confirm(`暂停账号 ${account.name}？待领取任务将进入 hold，恢复账号不会自动恢复既有 hold。`)) return
-    setBusy(true); setMessage(null)
-    try {
-      await dataProvider.accountAction(account.id, action)
-      await Promise.all([refetch(), refetchBrowsers()])
-      setMessage({ severity: 'success', text: action === 'pause' ? '账号已暂停；既有 hold 任务需后续逐条核验。' : '账号已恢复；既有 hold 任务没有自动恢复。' })
-    } catch (reason) {
-      setMessage({ severity: 'error', text: actionError(reason, readiness?.label || '账号当前资源不满足恢复条件。') })
-    } finally { setBusy(false) }
-  }
-
-  async function createDraft(event) {
-    event.preventDefault()
-    if (!draftContent.trim() || !readiness?.ready) return
-    setDraftBusy(true); setMessage(null)
-    try {
-      const draft = await dataProvider.createDraft(account.id, draftContent)
-      await refetchDrafts()
-      setDraftContent('')
-      setMessage({ severity: 'success', text: `草稿版本 ${draft.version} 已创建，请进入只读快照核对。` })
-    } catch (reason) {
-      setMessage({ severity: 'error', text: actionError(reason, '账号或草稿状态已变化；输入内容已保留。') })
-    } finally { setDraftBusy(false) }
-  }
-
-  if (isPending) return <Box sx={{ display: 'grid', placeItems: 'center', minHeight: 300 }}><CircularProgress aria-label="正在加载账号详情" /></Box>
-  if (error || !account) return <Alert severity="error">{error?.message || '账号不存在'}</Alert>
-  return (
-    <>
-      <Box component="header" sx={{ mb: 4, minWidth: 0 }}><Button component={RouterLink} to="/accounts" sx={{ mb: 1 }}>← 返回社媒账号</Button><Typography variant="h1" sx={wrapAnywhere}>{account.name}</Typography><Typography color="text.secondary" sx={{ ...wrapAnywhere, mt: 1 }}>{account.platform_account_key} · {account.platform}</Typography></Box>
-      {message ? <Alert severity={message.severity} aria-live="polite" sx={{ mb: 2.5 }}>{message.text}</Alert> : null}
-      {browsersError ? <Alert severity="error" action={<Button color="inherit" size="small" onClick={() => refetchBrowsers()}>重试环境状态</Button>} sx={{ mb: 2.5 }}>{environmentError(browsersError)}</Alert> : null}
-      <Alert severity="warning" icon={<PauseCircleOutlined />} sx={{ mb: 2.5 }}>暂停会把待领取任务置为 hold；恢复账号只恢复账号可用性，不会自动恢复既有 hold。</Alert>
-      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: 'minmax(0, 1fr)', lg: 'repeat(2, minmax(0, 1fr))' }, gap: 2.5 }}>
-        <Paper variant="outlined" sx={{ p: 3, minWidth: 0 }}><Stack spacing={2} sx={{ minWidth: 0 }}><Typography variant="h6">账号状态</Typography><AccountState account={account} binding={binding} bindingError={browsersError} /><Typography>授权：{account.authorization_status === 'authorized' ? '已授权' : '已撤销'}</Typography><Typography>运行：{account.runtime_status === 'active' ? '启用' : '暂停'} · 版本 {account.version}</Typography><Typography sx={wrapAnywhere}>TAGS：{account.tags?.join('、') || '无'}</Typography><Stack direction={{ xs: 'column', sm: 'row' }} spacing={1.5}><Button variant="outlined" color="warning" disabled={busy || account.runtime_status === 'paused'} onClick={() => act('pause')}>暂停账号</Button><Button variant="contained" disabled={busy || !readiness.canResume} onClick={() => act('resume')}>恢复账号</Button></Stack></Stack></Paper>
-        <Paper variant="outlined" sx={{ p: 3, minWidth: 0 }}><Stack spacing={2} sx={{ minWidth: 0 }}><Typography variant="h6">固定资源</Typography>{browsersError ? <Typography color="text.secondary">运行环境与网络出口状态未知；重试成功后再执行依赖资源状态的操作。</Typography> : binding ? <><Typography sx={wrapAnywhere}>运行环境：{binding.name}（{binding.alias}）</Typography><Typography sx={wrapAnywhere}>网络出口：{binding.network_exit_id ? `${binding.network_exit_id} · ${binding.network_exit_health || '未知状态'}` : '当前机器直连'}</Typography><Typography>绑定版本：{binding.binding_version}</Typography><Typography sx={wrapAnywhere}>不可调度原因：{binding.schedule_block_reason ? (reasonLabels[binding.schedule_block_reason] || binding.schedule_block_reason) : '无'}</Typography><Button component={RouterLink} to="/browsers" variant="outlined">查看运行环境</Button></> : <><Typography color="text.secondary">尚未绑定运行环境，因此不能恢复或排队。</Typography><Button component={RouterLink} to="/browsers" variant="contained">绑定运行环境</Button></>}</Stack></Paper>
-      </Box>
-      <Paper component="section" variant="outlined" sx={{ p: { xs: 2.5, md: 3 }, mt: 2.5, minWidth: 0 }}>
-        <Typography variant="h6">文本草稿</Typography>
-        <Typography color="text.secondary" sx={{ mt: 0.5, mb: 2 }}>仅支持单用户 Phase A Mock 文本；内部 ID 与版本由系统生成。</Typography>
-        <Box component="form" onSubmit={createDraft} sx={{ display: 'grid', gap: 1.5 }}>
-          <TextField multiline minRows={4} label="草稿内容" value={draftContent} onChange={event => setDraftContent(event.target.value)} disabled={!readiness?.ready || draftBusy} helperText={readiness?.ready ? '创建后进入只读快照核对并显式确认' : `资源未就绪：${readiness?.label || '正在加载'}`} />
-          <Button type="submit" variant="contained" disabled={!readiness?.ready || !draftContent.trim() || draftBusy} sx={{ justifySelf: { sm: 'start' }, minHeight: 44 }}>{draftBusy ? '创建中…' : '创建草稿'}</Button>
-        </Box>
-        {draftsError ? <Alert severity="error" action={<Button color="inherit" size="small" onClick={() => refetchDrafts()}>重试草稿</Button>} sx={{ mt: 2 }}>{draftsError.message}</Alert> : null}
-        {!draftsError && drafts.length === 0 ? <Typography color="text.secondary" sx={{ mt: 2.5 }}>尚无草稿。</Typography> : null}
-        {drafts.length > 0 ? <Stack spacing={1.5} sx={{ mt: 2.5 }}>{drafts.map(draft => <Paper key={draft.id} variant="outlined" sx={{ p: 2, minWidth: 0 }}><Stack direction={{ xs: 'column', sm: 'row' }} spacing={1.5} sx={{ justifyContent: 'space-between', alignItems: { sm: 'center' }, minWidth: 0 }}><Box sx={{ minWidth: 0 }}><Typography fontWeight={700}>草稿版本 {draft.version}</Typography><Typography variant="body2" color="text.secondary" sx={{ ...wrapAnywhere, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{draft.content}</Typography></Box><Button component={RouterLink} to={`/drafts/${draft.id}`} variant="outlined">核对草稿</Button></Stack></Paper>)}</Stack> : null}
-      </Paper>
-    </>
-  )
-}
diff --git a/web/src/AccountsPage.jsx b/web/src/AccountsPage.jsx
new file mode 100644
index 0000000..6e6f1e2
--- /dev/null
+++ b/web/src/AccountsPage.jsx
@@ -0,0 +1,327 @@
+import { useMemo, useState } from 'react'
+import { Link, useNavigate, useParams } from 'react-router'
+import { useDataProvider, useList, useOne } from '@refinedev/core'
+import {
+  Alert, Button, Card, CardContent, ConfirmDialog, DetailList, Field, Input, Modal, PageHeader,
+  PageState, Select, StatusPill, Textarea, conflictMessage,
+} from './lib/ui.jsx'
+import { useTitle } from './lib/hooks.js'
+
+const createInitial = { name: '', platform: '', platform_account_key: '', tags: '', cookies: '' }
+
+const platforms = [
+  { value: 'douyin', label: '抖音' },
+  { value: 'xiaohongshu', label: '小红书' },
+  { value: 'wechat-official', label: '公众号' },
+  { value: 'kuaishou', label: '快手' },
+]
+
+const reasonText = {
+  account_revoked: '授权已撤销',
+  account_paused: '账号已暂停',
+  binding_missing: '未绑定运行环境',
+  network_exit_missing: '未绑定固定出口',
+  network_exit_unhealthy: '固定出口不健康',
+  runtime_stop_pending: '运行环境停止结果待确认',
+  runtime_missing: '运行环境未启动',
+  runtime_active: '仍有活动运行实例',
+  account_conflict: '账号状态已变化，请刷新后重试',
+  environment_unavailable: '环境状态未知',
+}
+
+// 账号可恢复性判定：授权、绑定、出口健康、账号暂停四层都要看。
+export function accountReadiness(account, binding, bindingsError = false) {
+  if (account.authorization_status !== 'authorized') return { label: '授权已撤销', reason: 'account_revoked', canResume: false, ready: false }
+  if (bindingsError) return { label: '环境状态未知', reason: 'environment_unavailable', canResume: false, ready: false }
+  if (!binding) return { label: '未绑定运行环境', reason: 'binding_missing', canResume: false, ready: false }
+  const blocked = binding.cleanup_pending
+    ? 'runtime_stop_pending'
+    : binding.network_exit_id && binding.network_exit_health !== 'healthy'
+      ? 'network_exit_unhealthy'
+      : ''
+  if (blocked) return { label: reasonText[blocked], reason: blocked, canResume: false, ready: false }
+  if (account.runtime_status === 'paused') {
+    const stopped = !binding.runtime_instance_id
+    return { label: stopped ? '资源就绪，可恢复' : '等待运行环境停止', reason: stopped ? '' : 'runtime_stop_pending', canResume: stopped, ready: false }
+  }
+  const schedule = binding.schedule_block_reason || ''
+  return { label: schedule ? reasonText[schedule] || `不可调度：${schedule}` : '可调度', reason: schedule, canResume: false, ready: !schedule }
+}
+
+function ReadinessPill({ readiness, paused }) {
+  const tone = readiness.ready ? 'success' : paused && readiness.canResume ? 'warning' : 'danger'
+  return <StatusPill tone={tone} label={readiness.label} />
+}
+
+function AccountCreateModal({ open, onClose, onSubmit, busy, error }) {
+  const [form, setForm] = useState(createInitial)
+  const update = (key, value) => setForm(current => ({ ...current, [key]: value }))
+  const valid = form.name.trim() && form.platform && form.platform_account_key.trim() && form.cookies.trim()
+
+  async function submit(event) {
+    event.preventDefault()
+    if (!valid) return
+    const created = await onSubmit({
+      name: form.name.trim(),
+      platform: form.platform.trim(),
+      platform_account_key: form.platform_account_key.trim(),
+      tags: form.tags.split(/[,，]/).map(tag => tag.trim()).filter(Boolean),
+      cookies: form.cookies.trim(),
+    })
+    if (created) setForm(createInitial)
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title="创建社媒账号" labelledBy="account-create-title" size="lg"
+      footer={<>
+        <Button onClick={onClose} disabled={busy}>取消</Button>
+        <Button variant="primary" type="submit" form="account-create-form" busy={busy} busyText="创建中…" disabled={!valid}>创建账号</Button>
+      </>}>
+      <form id="account-create-form" onSubmit={submit} noValidate>
+        {error ? <Alert variant="destructive" className="mb-4">{conflictMessage(error, '该平台的账号 ID 已存在；表单内容已保留。')}</Alert> : null}
+        <div className="grid gap-4 sm:grid-cols-2">
+          <Field id="account-name" label="账号名称" required helper="展示名称，支持中文">
+            <Input id="account-name" required maxLength={128} value={form.name} onChange={event => update('name', event.target.value)} placeholder="如：店铺一号" />
+          </Field>
+          <Field id="account-platform" label="平台类型" required error={form.platform === '' ? '请选择平台' : undefined} helper="账号所属平台">
+            <Select id="account-platform" value={form.platform} invalid={form.platform === ''} onChange={event => update('platform', event.target.value)} options={platforms} placeholder="选择平台" />
+          </Field>
+          <Field id="account-key" label="账号 ID" required helper="平台内唯一标识，同平台不可重复">
+            <Input id="account-key" required maxLength={128} value={form.platform_account_key} onChange={event => update('platform_account_key', event.target.value)} />
+          </Field>
+          <Field id="account-tags" label="TAGS" helper="多个标签用逗号分隔">
+            <Input id="account-tags" value={form.tags} onChange={event => update('tags', event.target.value)} placeholder="如：主账号,直播" />
+          </Field>
+          <Field id="account-cookies" label="Cookies" required className="sm:col-span-2" helper="仅支持浏览器 Cookie Header 格式，如 name=value; token=value">
+            <Textarea id="account-cookies" required maxLength={8192} rows={3} value={form.cookies} onChange={event => update('cookies', event.target.value)} />
+          </Field>
+        </div>
+      </form>
+    </Modal>
+  )
+}
+
+function AccountCard({ account, binding, bindingsError }) {
+  const readiness = accountReadiness(account, binding, bindingsError)
+  return (
+    <Card>
+      <CardContent className="space-y-3">
+        <div className="flex min-w-0 items-start justify-between gap-3">
+          <div className="min-w-0">
+            <Link to={`/accounts/${account.id}`} className="anywhere font-semibold text-ink hover:text-primary">{account.name}</Link>
+            <p className="anywhere text-xs text-muted">{account.platform_account_key} · {account.platform}</p>
+          </div>
+          <ReadinessPill readiness={readiness} paused={account.runtime_status === 'paused'} />
+        </div>
+        <div className="text-sm">
+          <span className="text-muted">授权：</span>{account.authorization_status === 'authorized' ? '已授权' : '已撤销'}
+          <span className="text-muted"> · 账号：</span>{account.runtime_status === 'active' ? '启用' : '暂停'}
+        </div>
+        <div className="text-sm">
+          <span className="text-muted">固定资源：</span>
+          {bindingsError ? '状态未知（环境数据不可用）' : (
+            <span className="anywhere">{binding?.name || '未绑定运行环境'} · {binding?.network_exit_id || '未绑定出口'}</span>
+          )}
+        </div>
+        <Link to={`/accounts/${account.id}`} className="inline-flex text-sm font-medium text-primary hover:underline">查看账号 →</Link>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function AccountList() {
+  const [createOpen, setCreateOpen] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [createError, setCreateError] = useState(null)
+  const [notice, setNotice] = useState(null)
+  const dataProvider = useDataProvider()('default')
+  const { result, query } = useList({ resource: 'accounts' })
+  const error = query.error
+  const isPending = query.isPending
+  const accounts = result.data ?? []
+  const { result: bindingResult, query: bindingsQuery } = useList({ resource: 'browsers', queryOptions: { retry: false } })
+  const bindings = bindingResult.data ?? []
+  const bindingsError = bindingsQuery.error
+  const refetchBindings = bindingsQuery.refetch
+  const bindingByAccount = useMemo(() => new Map(bindings.filter(item => item.account_id).map(item => [item.account_id, item])), [bindings])
+  useTitle('CreatorHub · 社媒账号')
+
+  async function createAccount(data) {
+    setBusy(true)
+    setCreateError(null)
+    try {
+      await dataProvider.create({ resource: 'accounts', variables: data })
+      await query.refetch()
+      setNotice({ variant: 'success', text: '账号已创建；绑定健康出口和运行环境后方可恢复。' })
+      return true
+    } catch (reason) {
+      setCreateError(reason)
+      return false
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader icon="ri-account-circle-line" title="社媒账号" description="管理账号授权、暂停状态与固定运行资源">
+        <Button variant="primary" icon="ri-add-line" onClick={() => setCreateOpen(true)}>创建账号</Button>
+      </PageHeader>
+      {notice ? <Alert variant={notice.variant} className="mb-4">{notice.text}</Alert> : null}
+      {bindingsError ? (
+        <Alert variant="destructive" className="mb-4">
+          环境不可用{bindingsError.status ? `（${bindingsError.status}）` : ''}：无法读取运行环境绑定与 readiness，状态暂时未知。
+          <Button size="sm" onClick={() => refetchBindings()}>重试环境状态</Button>
+        </Alert>
+      ) : null}
+      <PageState pending={isPending} error={error} empty={accounts.length === 0} emptyText="暂无账号。创建账号后，再前往运行环境绑定健康网络出口。">
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {accounts.map(account => <AccountCard key={account.id} account={account} binding={bindingByAccount.get(account.id)} bindingsError={!!bindingsError} />)}
+        </div>
+      </PageState>
+      <AccountCreateModal open={createOpen} onClose={() => { setCreateOpen(false); setCreateError(null) }} onSubmit={createAccount} busy={busy} error={createError} />
+    </div>
+  )
+}
+
+export function AccountDetail() {
+  const { id } = useParams()
+  const navigate = useNavigate()
+  const dataProvider = useDataProvider()('default')
+  const [pauseOpen, setPauseOpen] = useState(false)
+  const [actionBusy, setActionBusy] = useState(false)
+  const [notice, setNotice] = useState(null)
+  const [draftText, setDraftText] = useState('')
+  const [draftBusy, setDraftBusy] = useState(false)
+  const { result: account, error, isPending, query } = useOne({ resource: 'accounts', id, queryOptions: { retry: false } })
+  const { result: bindingResult, query: browsersQuery } = useList({ resource: 'browsers', queryOptions: { retry: false } })
+  const browsers = bindingResult.data ?? []
+  const browsersError = browsersQuery.error
+  const refetchBrowsers = browsersQuery.refetch
+  const { result: draftResult, query: draftQuery } = useList({ resource: 'drafts', filters: [{ field: 'account_id', value: id }], queryOptions: { retry: false } })
+  const drafts = draftResult.data ?? []
+  const refetchDrafts = draftQuery.refetch
+  const binding = browsersError ? undefined : browsers.find(item => item.account_id === id)
+  const readiness = account ? accountReadiness(account, binding, !!browsersError) : null
+  useTitle('CreatorHub · 账号详情')
+
+  async function runAction(action) {
+    setActionBusy(true)
+    setNotice(null)
+    try {
+      await dataProvider.accountAction(account.id, action)
+      await Promise.all([query.refetch(), refetchBrowsers()])
+      setNotice({ variant: 'success', text: action === 'pause' ? '账号已暂停；既有 hold 任务需后续逐条核验。' : '账号已恢复；既有 hold 任务没有自动恢复。' })
+    } catch (reason) {
+      setNotice({ variant: 'destructive', text: conflictMessage(reason) })
+    } finally {
+      setActionBusy(false)
+    }
+  }
+
+  async function createDraft(event) {
+    event.preventDefault()
+    if (!draftText.trim() || !readiness?.ready) return
+    setDraftBusy(true)
+    setNotice(null)
+    try {
+      const draft = await dataProvider.createDraft(account.id, draftText)
+      await refetchDrafts()
+      setDraftText('')
+      setNotice({ variant: 'success', text: `草稿版本 ${draft.version} 已创建，请进入只读快照核对。` })
+    } catch (reason) {
+      setNotice({ variant: 'destructive', text: conflictMessage(reason) })
+    } finally {
+      setDraftBusy(false)
+    }
+  }
+
+  if (isPending) return <PageState pending />
+  if (error || !account) return <Alert variant="destructive">{error?.message || '账号不存在'}</Alert>
+  return (
+    <div>
+      <PageHeader title={<span className="anywhere">{account.name}</span>} description={<span className="anywhere">{account.platform_account_key} · {account.platform}</span>}>
+        <Button icon="ri-arrow-left-line" onClick={() => navigate('/accounts')}>返回社媒账号</Button>
+      </PageHeader>
+      {notice ? <Alert variant={notice.variant} className="mb-4">{notice.text}</Alert> : null}
+      {browsersError ? (
+        <Alert variant="destructive" className="mb-4">
+          环境不可用：运行环境与网络出口状态未知，依赖资源状态的操作暂不可用。
+          <Button size="sm" onClick={() => refetchBrowsers()}>重试环境状态</Button>
+        </Alert>
+      ) : null}
+      <Alert variant="warning" className="mb-6">暂停会把待领取任务置为 hold；恢复账号只恢复账号可用性，不会自动恢复既有 hold。</Alert>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardContent className="space-y-4">
+            <h2 className="text-base font-semibold">账号状态</h2>
+            <ReadinessPill readiness={readiness} paused={account.runtime_status === 'paused'} />
+            <DetailList rows={[
+              ['授权', account.authorization_status === 'authorized' ? '已授权' : '已撤销'],
+              ['运行', `${account.runtime_status === 'active' ? '启用' : '暂停'} · 版本 ${account.version}`],
+              ['TAGS', account.tags?.join('、') || '无'],
+            ]} />
+            <div className="flex flex-wrap gap-3 pt-1">
+              <Button variant="danger" disabled={actionBusy || account.runtime_status === 'paused'} onClick={() => setPauseOpen(true)}>暂停账号</Button>
+              <Button variant="primary" disabled={actionBusy || !readiness.canResume} busy={actionBusy} onClick={() => runAction('resume')}>恢复账号</Button>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="space-y-4">
+            <h2 className="text-base font-semibold">固定资源</h2>
+            {browsersError ? (
+              <p className="text-sm text-muted">运行环境与网络出口状态未知；重试成功后再执行依赖资源状态的操作。</p>
+            ) : binding ? (
+              <>
+                <DetailList rows={[
+                  ['运行环境', `${binding.name}（${binding.alias}）`],
+                  ['网络出口', binding.network_exit_id ? `${binding.network_exit_id} · ${binding.network_exit_health || '未知状态'}` : '当前机器直连'],
+                  ['绑定版本', binding.binding_version],
+                  ['不可调度原因', binding.schedule_block_reason ? reasonText[binding.schedule_block_reason] || binding.schedule_block_reason : '无'],
+                ]} />
+                <Link to="/browsers" className="inline-flex text-sm font-medium text-primary hover:underline">前往运行环境</Link>
+              </>
+            ) : (
+              <>
+                <p className="text-sm text-muted">尚未绑定运行环境。账号暂停且资源就绪后，可在运行环境页创建绑定。</p>
+                <Link to="/browsers" className="inline-flex text-sm font-medium text-primary hover:underline">前往运行环境</Link>
+              </>
+            )}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="space-y-4">
+            <h2 className="text-base font-semibold">文本草稿</h2>
+            <p className="text-sm text-muted">仅支持单用户 Phase A Mock 文本；内部 ID 与版本由系统生成。</p>
+            <form onSubmit={createDraft} className="space-y-3">
+              <Field id="draft-content" label="草稿内容" helper={readiness?.ready ? '创建后进入只读快照核对并显式确认' : `资源未就绪：${readiness?.label || '正在加载'}`}>
+                <Textarea id="draft-content" rows={4} value={draftText} onChange={event => setDraftText(event.target.value)} disabled={!readiness?.ready || draftBusy} />
+              </Field>
+              <Button variant="primary" type="submit" busy={draftBusy} busyText="创建中…" disabled={!readiness?.ready || !draftText.trim()}>创建草稿</Button>
+            </form>
+            <p className="text-sm text-muted">尚无草稿时无需处理；创建后请进入草稿核对。</p>
+            {drafts.length > 0 ? (
+              <div className="space-y-3">
+                {drafts.map(draft => (
+                  <div key={draft.id} className="rounded-md border border-hairline p-3">
+                    <div className="flex min-w-0 flex-wrap items-center justify-between gap-2">
+                      <div className="min-w-0">
+                        <p className="font-semibold">草稿版本 {draft.version}</p>
+                        <p className="anywhere mt-0.5 text-xs text-muted line-clamp-2">{draft.content}</p>
+                      </div>
+                      <Link to={`/drafts/${draft.id}`} className="shrink-0 text-sm font-medium text-primary hover:underline">核对草稿</Link>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : null}
+          </CardContent>
+        </Card>
+      </div>
+      <ConfirmDialog open={pauseOpen} onClose={() => setPauseOpen(false)} onConfirm={() => { setPauseOpen(false); runAction('pause') }}
+        title="暂停账号" confirmLabel="确认暂停"
+        body={`暂停账号 ${account.name}？待领取任务将进入 hold，恢复账号不会自动恢复既有 hold。`} />
+    </div>
+  )
+}
diff --git a/web/src/AccountList.test.jsx b/web/src/AccountsPage.test.jsx
similarity index 59%
rename from web/src/AccountList.test.jsx
rename to web/src/AccountsPage.test.jsx
index 01352a7..04a1a40 100644
--- a/web/src/AccountList.test.jsx
+++ b/web/src/AccountsPage.test.jsx
@@ -1,17 +1,20 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { CoreAdminContext, HttpError } from 'ra-core'
-import { MemoryRouter, Route, Routes } from 'react-router-dom'
-import { AccountDetail, AccountList, accountReadiness } from './AccountList'
+import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Refine } from '@refinedev/core'
+import { MemoryRouter, Route, Routes } from 'react-router'
+import { AccountDetail, AccountList, accountReadiness } from './AccountsPage'
 
 afterEach(() => { cleanup(); vi.restoreAllMocks() })
 
+const httpError = (message, status, body) => Object.assign(new Error(message), { status, body })
+
 const account = { id: 'account-a', name: '店铺一号', platform: 'douyin', platform_account_key: 'shop-a', tags: ['主账号'], authorization_status: 'authorized', runtime_status: 'paused', version: 1 }
 const binding = { id: 'env-a', alias: 'env-a', name: '店铺环境', account_id: 'account-a', network_exit_id: 'exit-a', network_exit_health: 'healthy', binding_version: 1, schedule_status: 'blocked', schedule_block_reason: 'account_paused' }
 
 function provider(overrides = {}) {
   return {
-    getList: vi.fn(resource => Promise.resolve(resource === 'accounts' ? { data: [account], total: 1 } : resource === 'browsers' ? { data: [binding], total: 1 } : { data: [], total: 0 })),
+    getList: vi.fn(({ resource }) => Promise.resolve(resource === 'accounts' ? { data: [account], total: 1 } : resource === 'browsers' ? { data: [binding], total: 1 } : { data: [], total: 0 })),
     getOne: vi.fn().mockResolvedValue({ data: account }),
     create: vi.fn().mockResolvedValue({ data: account }),
     accountAction: vi.fn().mockResolvedValue(undefined),
@@ -20,26 +23,50 @@ function provider(overrides = {}) {
   }
 }
 
+const queryClient = () => new QueryClient({ defaultOptions: { queries: { retry: false } } })
+
 function renderList(dataProvider) {
-  return render(<MemoryRouter><CoreAdminContext dataProvider={dataProvider}><AccountList /></CoreAdminContext></MemoryRouter>)
+  return render(
+    <QueryClientProvider client={queryClient()}>
+      <Refine dataProvider={dataProvider}>
+        <MemoryRouter><AccountList /></MemoryRouter>
+      </Refine>
+    </QueryClientProvider>,
+  )
+}
+
+function renderDetail(dataProvider) {
+  return render(
+    <QueryClientProvider client={queryClient()}>
+      <Refine dataProvider={dataProvider}>
+        <MemoryRouter initialEntries={['/accounts/account-a']}>
+          <Routes><Route path="/accounts/:id" element={<AccountDetail />} /></Routes>
+        </MemoryRouter>
+      </Refine>
+    </QueryClientProvider>,
+  )
 }
 
 describe('AccountList', () => {
   it('offers four platforms and submits only the account creation fields', async () => {
-    const dataProvider = provider({ create: vi.fn().mockRejectedValue(new HttpError('conflict', 409, { reason_code: 'duplicate_platform_account' })) })
+    const dataProvider = provider({ create: vi.fn().mockRejectedValue(httpError('conflict', 409, { reason_code: 'duplicate_platform_account' })) })
     renderList(dataProvider)
     await screen.findAllByText('店铺一号')
 
-    fireEvent.change(screen.getByRole('textbox', { name: '账号名称' }), { target: { value: '新店铺' } })
-    fireEvent.mouseDown(screen.getByRole('combobox', { name: '平台类型' }))
+    const openButton = screen.getAllByRole('button', { name: '创建账号' })[0]
+    fireEvent.click(openButton)
+    const dialog = screen.getByRole('dialog')
+    fireEvent.click(within(dialog).getByRole('button', { name: '创建账号' }))
+    fireEvent.change(within(dialog).getByRole('textbox', { name: '账号名称' }), { target: { value: '新店铺' } })
+    fireEvent.click(within(dialog).getByRole('combobox', { name: '平台类型' }))
     for (const platform of ['抖音', '小红书', '公众号', '快手']) expect(await screen.findByRole('option', { name: platform })).toBeTruthy()
     fireEvent.click(screen.getByRole('option', { name: '抖音' }))
-    fireEvent.change(screen.getByRole('textbox', { name: '账号 ID' }), { target: { value: 'shop-new' } })
-    fireEvent.change(screen.getByRole('textbox', { name: 'TAGS' }), { target: { value: '主账号，直播' } })
-    fireEvent.change(screen.getByRole('textbox', { name: 'Cookies' }), { target: { value: 'sessionid=value; token=second' } })
-    fireEvent.click(screen.getByRole('button', { name: '创建账号' }))
+    fireEvent.change(within(dialog).getByRole('textbox', { name: '账号 ID' }), { target: { value: 'shop-new' } })
+    fireEvent.change(within(dialog).getByRole('textbox', { name: 'TAGS' }), { target: { value: '主账号，直播' } })
+    fireEvent.change(within(dialog).getByRole('textbox', { name: 'Cookies' }), { target: { value: 'sessionid=value; token=second' } })
+    fireEvent.click(within(dialog).getByRole('button', { name: '创建账号' }))
 
-    await waitFor(() => expect(dataProvider.create).toHaveBeenCalledWith('accounts', { data: {
+    await waitFor(() => expect(dataProvider.create).toHaveBeenCalledWith({ resource: 'accounts', variables: {
       name: '新店铺', platform: 'douyin', platform_account_key: 'shop-new', tags: ['主账号', '直播'], cookies: 'sessionid=value; token=second',
     } }))
     expect((await screen.findByRole('alert')).textContent).toContain('冲突（409）')
@@ -57,12 +84,12 @@ describe('AccountList', () => {
 
 describe('AccountDetail', () => {
   it('pauses explicitly and explains that hold tasks stay held', async () => {
-    vi.spyOn(window, 'confirm').mockReturnValue(true)
     const active = { ...account, runtime_status: 'active' }
     const dataProvider = provider({ getOne: vi.fn().mockResolvedValue({ data: active }) })
-    render(<MemoryRouter initialEntries={['/accounts/account-a']}><CoreAdminContext dataProvider={dataProvider}><Routes><Route path="/accounts/:id" element={<AccountDetail />} /></Routes></CoreAdminContext></MemoryRouter>)
+    renderDetail(dataProvider)
 
     fireEvent.click(await screen.findByRole('button', { name: '暂停账号' }))
+    fireEvent.click(await screen.findByRole('button', { name: '确认暂停' }))
     await waitFor(() => expect(dataProvider.accountAction).toHaveBeenCalledWith('account-a', 'pause'))
     expect((await screen.findAllByText(/不会自动恢复既有 hold/)).length).toBeGreaterThan(0)
   })
@@ -71,19 +98,19 @@ describe('AccountDetail', () => {
     const active = { ...account, runtime_status: 'active' }
     const dataProvider = provider({
       getOne: vi.fn().mockResolvedValue({ data: active }),
-      getList: vi.fn(resource => resource === 'browsers'
-        ? Promise.reject(new HttpError('bad gateway', 502))
+      getList: vi.fn(({ resource }) => resource === 'browsers'
+        ? Promise.reject(httpError('bad gateway', 502))
         : Promise.resolve({ data: [], total: 0 })),
     })
-    render(<MemoryRouter initialEntries={['/accounts/account-a']}><CoreAdminContext dataProvider={dataProvider}><Routes><Route path="/accounts/:id" element={<AccountDetail />} /></Routes></CoreAdminContext></MemoryRouter>)
+    renderDetail(dataProvider)
 
-    expect(await screen.findByText(/环境不可用（502）/)).toBeTruthy()
-    expect(screen.getByText(/运行环境与网络出口状态未知/)).toBeTruthy()
+    expect(await screen.findByText(/环境不可用/)).toBeTruthy()
+    expect((await screen.findAllByText(/运行环境与网络出口状态未知/)).length).toBeGreaterThan(0)
     expect(screen.queryByText(/尚未绑定运行环境/)).toBeNull()
     expect(screen.getByRole('button', { name: '恢复账号' }).disabled).toBe(true)
     expect(screen.getByRole('button', { name: '暂停账号' }).disabled).toBe(false)
     fireEvent.click(screen.getByRole('button', { name: '重试环境状态' }))
-    await waitFor(() => expect(dataProvider.getList.mock.calls.filter(([resource]) => resource === 'browsers').length).toBeGreaterThan(1))
+    await waitFor(() => expect(dataProvider.getList.mock.calls.filter(([call]) => call.resource === 'browsers').length).toBeGreaterThan(1))
   })
 
   it('preserves draft text when creation returns 503', async () => {
@@ -91,10 +118,10 @@ describe('AccountDetail', () => {
     const readyBinding = { ...binding, schedule_status: 'ready', schedule_block_reason: '' }
     const dataProvider = provider({
       getOne: vi.fn().mockResolvedValue({ data: active }),
-      getList: vi.fn(resource => Promise.resolve(resource === 'browsers' ? { data: [readyBinding], total: 1 } : { data: [], total: 0 })),
-      createDraft: vi.fn().mockRejectedValue(new HttpError('unavailable', 503, { reason_code: 'runtime_missing' })),
+      getList: vi.fn(({ resource }) => Promise.resolve(resource === 'browsers' ? { data: [readyBinding], total: 1 } : { data: [], total: 0 })),
+      createDraft: vi.fn().mockRejectedValue(httpError('unavailable', 503, { reason_code: 'runtime_missing' })),
     })
-    render(<MemoryRouter initialEntries={['/accounts/account-a']}><CoreAdminContext dataProvider={dataProvider}><Routes><Route path="/accounts/:id" element={<AccountDetail />} /></Routes></CoreAdminContext></MemoryRouter>)
+    renderDetail(dataProvider)
 
     const input = await screen.findByRole('textbox', { name: '草稿内容' })
     fireEvent.change(input, { target: { value: 'keep this text' } })
@@ -102,6 +129,6 @@ describe('AccountDetail', () => {
 
     await waitFor(() => expect(dataProvider.createDraft).toHaveBeenCalledWith('account-a', 'keep this text'))
     expect(screen.getByRole('textbox', { name: '草稿内容' }).value).toBe('keep this text')
-    expect(await screen.findByText('环境不可用（503）：unavailable')).toBeTruthy()
+    expect(await screen.findByText(/503/)).toBeTruthy()
   })
 })
diff --git a/web/src/AuditList.jsx b/web/src/AuditList.jsx
deleted file mode 100644
index 332964a..0000000
--- a/web/src/AuditList.jsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useGetList } from 'ra-core'
-import { Link as RouterLink, useSearchParams } from 'react-router-dom'
-import {
-  Alert,
-  Box,
-  Button,
-  CircularProgress,
-  Paper,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-} from '@mui/material'
-import HistoryOutlined from '@mui/icons-material/HistoryOutlined'
-
-const wrapAnywhere = { overflowWrap: 'anywhere', minWidth: 0 }
-const dayStart = value => value ? new Date(`${value}T00:00:00`).toISOString() : ''
-const dayEnd = value => value ? new Date(`${value}T23:59:59.999`).toISOString() : ''
-
-export function auditCSV(events) {
-  const fields = ['id', 'event_type', 'account_id', 'task_id', 'attempt_id', 'browser_env_alias', 'network_exit_id', 'binding_version', 'reason_code', 'outcome', 'created_at']
-  const quote = value => `"${String(value ?? '').replaceAll('"', '""')}"`
-  return [fields, ...events.map(event => fields.map(field => event[field]))].map(row => row.map(quote).join(',')).join('\n')
-}
-
-function exportPage(events) {
-  const url = URL.createObjectURL(new Blob([auditCSV(events)], { type: 'text/csv;charset=utf-8' }))
-  const link = document.createElement('a')
-  link.href = url
-  link.download = 'creatorhub-audit.csv'
-  link.click()
-  URL.revokeObjectURL(url)
-}
-
-function AuditLinks({ event }) {
-  return (
-    <Stack spacing={0.5}>
-      {event.account_id ? <Typography variant="body2" sx={wrapAnywhere}>账号：<RouterLink to={`/accounts/${event.account_id}`}>{event.account_id}</RouterLink></Typography> : null}
-      {event.task_id ? <Typography variant="body2" sx={wrapAnywhere}>任务：<RouterLink to={`/tasks/${event.task_id}`}>{event.task_id}</RouterLink></Typography> : null}
-      {event.attempt_id ? <Typography variant="body2" sx={wrapAnywhere}>attempt：<RouterLink to={`/attempts/${encodeURIComponent(event.attempt_id)}`}>{event.attempt_id}</RouterLink></Typography> : null}
-    </Stack>
-  )
-}
-
-export function AuditList() {
-  const [searchParams] = useSearchParams()
-  const [accountID, setAccountID] = useState(searchParams.get('account_id') || '')
-  const [taskID, setTaskID] = useState(searchParams.get('task_id') || '')
-  const [attemptID, setAttemptID] = useState(searchParams.get('attempt_id') || '')
-  const [browserEnvAlias, setBrowserEnvAlias] = useState(searchParams.get('browser_env_alias') || '')
-  const [networkExitID, setNetworkExitID] = useState(searchParams.get('network_exit_id') || '')
-  const [eventType, setEventType] = useState('')
-  const [from, setFrom] = useState('')
-  const [to, setTo] = useState('')
-  const [page, setPage] = useState(1)
-  const perPage = 25
-  const filter = { account_id: accountID, task_id: taskID, attempt_id: attemptID, browser_env_alias: browserEnvAlias, network_exit_id: networkExitID, event_type: eventType, from: dayStart(from), to: dayEnd(to) }
-  const { data: events = [], total = 0, error, isPending } = useGetList('audit', { pagination: { page, perPage }, filter }, { retry: false })
-
-  useEffect(() => { document.title = 'CreatorHub · 审计记录' }, [])
-  useEffect(() => { setPage(1) }, [accountID, taskID, attemptID, browserEnvAlias, networkExitID, eventType, from, to])
-
-  return (
-    <Box>
-      <Box component="header" sx={{ mb: 3.5 }}><Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}><HistoryOutlined color="primary" fontSize="large" /><Typography variant="h1">审计记录</Typography></Stack><Typography color="text.secondary" sx={{ mt: 1 }}>追加式事件回溯；页面不提供编辑或删除</Typography></Box>
-      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: 'minmax(0, 1fr)', sm: 'repeat(2, minmax(0, 1fr))', lg: 'repeat(4, minmax(0, 1fr))' }, gap: 2, mb: 2.5 }}>
-        <TextField label="账号" size="small" value={accountID} onChange={event => setAccountID(event.target.value)} slotProps={{ htmlInput: { 'aria-label': '按账号筛选审计' } }} />
-        <TextField label="任务" size="small" value={taskID} onChange={event => setTaskID(event.target.value)} slotProps={{ htmlInput: { 'aria-label': '按任务筛选审计' } }} />
-        <TextField label="Attempt" size="small" value={attemptID} onChange={event => setAttemptID(event.target.value)} slotProps={{ htmlInput: { 'aria-label': '按 attempt 筛选审计' } }} />
-        <TextField label="环境" size="small" value={browserEnvAlias} onChange={event => setBrowserEnvAlias(event.target.value)} slotProps={{ htmlInput: { 'aria-label': '按环境筛选审计' } }} />
-        <TextField label="出口" size="small" value={networkExitID} onChange={event => setNetworkExitID(event.target.value)} slotProps={{ htmlInput: { 'aria-label': '按出口筛选审计' } }} />
-        <TextField label="事件" size="small" value={eventType} onChange={event => setEventType(event.target.value)} slotProps={{ htmlInput: { 'aria-label': '按事件筛选审计' } }} />
-        <TextField label="开始日期" type="date" size="small" value={from} onChange={event => setFrom(event.target.value)} slotProps={{ inputLabel: { shrink: true }, htmlInput: { 'aria-label': '审计开始日期' } }} />
-        <TextField label="结束日期" type="date" size="small" value={to} onChange={event => setTo(event.target.value)} slotProps={{ inputLabel: { shrink: true }, htmlInput: { 'aria-label': '审计结束日期' } }} />
-      </Box>
-      <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1.5} sx={{ mb: 2.5 }}><Button variant="outlined" disabled={!events.length} onClick={() => exportPage(events)}>导出当前页（脱敏）</Button>{accountID || taskID || attemptID || browserEnvAlias || networkExitID || eventType || from || to ? <Button onClick={() => { setAccountID(''); setTaskID(''); setAttemptID(''); setBrowserEnvAlias(''); setNetworkExitID(''); setEventType(''); setFrom(''); setTo('') }}>清除筛选</Button> : null}</Stack>
-      {error ? <Alert severity="error">{error.message}</Alert> : null}
-      {isPending ? <Box sx={{ display: 'grid', placeItems: 'center', minHeight: 240 }}><CircularProgress aria-label="正在加载审计" /></Box> : null}
-      {!isPending && events.length === 0 ? <Paper variant="outlined" sx={{ py: 7, textAlign: 'center' }}><Typography color="text.secondary">{accountID || taskID || attemptID || browserEnvAlias || networkExitID || eventType || from || to ? '没有符合筛选条件的审计事件' : '尚无审计事件'}</Typography></Paper> : null}
-      {events.length ? <TableContainer component={Paper} variant="outlined" sx={{ display: { xs: 'none', md: 'block' } }}><Table sx={{ tableLayout: 'fixed' }}><TableHead><TableRow><TableCell width="20%">事件</TableCell><TableCell width="27%">关联</TableCell><TableCell width="24%">环境 / 出口</TableCell><TableCell width="29%">原因 / 时间</TableCell></TableRow></TableHead><TableBody>{events.map(event => <TableRow key={event.id}><TableCell><Typography fontWeight={700} sx={wrapAnywhere}>{event.event_type}</Typography><Typography variant="caption">#{event.id}</Typography></TableCell><TableCell><AuditLinks event={event} /></TableCell><TableCell><Typography variant="body2" sx={wrapAnywhere}>{event.browser_env_alias ? <RouterLink to={`/browsers/${encodeURIComponent(event.browser_env_alias)}`}>{event.browser_env_alias}</RouterLink> : '—'} / {event.network_exit_id ? <RouterLink to={`/network-exits/${encodeURIComponent(event.network_exit_id)}`}>{event.network_exit_id}</RouterLink> : '—'}</Typography><Typography variant="caption">绑定版本 {event.binding_version || '—'}</Typography></TableCell><TableCell><Typography variant="body2" sx={wrapAnywhere}>{event.reason_code || event.outcome || '—'}</Typography><Typography variant="caption" color="text.secondary">{new Date(event.created_at).toLocaleString('zh-CN')}</Typography></TableCell></TableRow>)}</TableBody></Table></TableContainer> : null}
-      {events.length ? <Stack spacing={2} sx={{ display: { xs: 'flex', md: 'none' } }}>{events.map(event => <Paper key={event.id} variant="outlined" sx={{ p: 2.5 }}><Stack spacing={1}><Typography fontWeight={700} sx={wrapAnywhere}>{event.event_type} · #{event.id}</Typography><AuditLinks event={event} /><Typography variant="body2" sx={wrapAnywhere}>环境 / 出口：{event.browser_env_alias ? <RouterLink to={`/browsers/${encodeURIComponent(event.browser_env_alias)}`}>{event.browser_env_alias}</RouterLink> : '—'} / {event.network_exit_id ? <RouterLink to={`/network-exits/${encodeURIComponent(event.network_exit_id)}`}>{event.network_exit_id}</RouterLink> : '—'} · 绑定版本 {event.binding_version || '—'}</Typography><Typography variant="body2" sx={wrapAnywhere}>原因：{event.reason_code || event.outcome || '—'}</Typography><Typography variant="caption" color="text.secondary">{new Date(event.created_at).toLocaleString('zh-CN')}</Typography></Stack></Paper>)}</Stack> : null}
-      {total > perPage ? <Stack direction="row" spacing={2} sx={{ mt: 2.5, alignItems: 'center', justifyContent: 'flex-end' }}><Button disabled={page === 1} onClick={() => setPage(value => value - 1)}>上一页</Button><Typography>第 {page} / {Math.ceil(total / perPage)} 页</Typography><Button disabled={page * perPage >= total} onClick={() => setPage(value => value + 1)}>下一页</Button></Stack> : null}
-    </Box>
-  )
-}
diff --git a/web/src/AuditPage.jsx b/web/src/AuditPage.jsx
new file mode 100644
index 0000000..178540b
--- /dev/null
+++ b/web/src/AuditPage.jsx
@@ -0,0 +1,136 @@
+import { useEffect, useState } from 'react'
+import { Link, useSearchParams } from 'react-router'
+import { useList } from '@refinedev/core'
+import { Alert, Button, PageHeader, PageState, Table } from './lib/ui.jsx'
+import { useTitle } from './lib/hooks.js'
+
+const startOfDay = value => (value ? new Date(`${value}T00:00:00`).toISOString() : '')
+const endOfDay = value => (value ? new Date(`${value}T23:59:59.999`).toISOString() : '')
+
+const csvColumns = ['id', 'event_type', 'account_id', 'task_id', 'attempt_id', 'browser_env_alias', 'network_exit_id', 'binding_version', 'reason_code', 'outcome', 'created_at']
+const csvCell = value => `"${String(value ?? '').replaceAll('"', '""')}"`
+
+// 导出仅含关联字段的脱敏白名单，不带 details。
+export function auditCSV(events) {
+  return [csvColumns, ...events.map(event => csvColumns.map(column => event[column]))]
+    .map(row => row.map(csvCell).join(','))
+    .join('\n')
+}
+
+function downloadCSV(events) {
+  const url = URL.createObjectURL(new Blob([auditCSV(events)], { type: 'text/csv;charset=utf-8' }))
+  const anchor = document.createElement('a')
+  anchor.href = url
+  anchor.download = 'creatorhub-audit.csv'
+  anchor.click()
+  URL.revokeObjectURL(url)
+}
+
+const filterInput = 'h-9 w-full rounded-md border border-[#c4ccd9] bg-white px-3 text-sm focus:border-primary focus:outline-none'
+
+function FilterField({ id, label, ...props }) {
+  return (
+    <div className="min-w-0 space-y-1">
+      <label htmlFor={id} className="block text-sm font-medium text-ink">{label}</label>
+      <input id={id} {...props} className={filterInput} />
+    </div>
+  )
+}
+
+export function AuditPage() {
+  const [searchParams] = useSearchParams()
+  const [account, setAccount] = useState(searchParams.get('account_id') || '')
+  const [task, setTask] = useState(searchParams.get('task_id') || '')
+  const [attempt, setAttempt] = useState(searchParams.get('attempt_id') || '')
+  const [env, setEnv] = useState(searchParams.get('browser_env_alias') || '')
+  const [exit, setExit] = useState(searchParams.get('network_exit_id') || '')
+  const [eventType, setEventType] = useState('')
+  const [from, setFrom] = useState('')
+  const [to, setTo] = useState('')
+  const [page, setPage] = useState(1)
+  const filters = [
+    { field: 'account_id', value: account },
+    { field: 'task_id', value: task },
+    { field: 'attempt_id', value: attempt },
+    { field: 'browser_env_alias', value: env },
+    { field: 'network_exit_id', value: exit },
+    { field: 'event_type', value: eventType },
+    { field: 'from', value: startOfDay(from) },
+    { field: 'to', value: endOfDay(to) },
+  ]
+  const { result, query } = useList({ resource: 'audit', pagination: { currentPage: page, pageSize: 25 }, filters, queryOptions: { retry: false } })
+  const error = query.error
+  const isPending = query.isPending
+  const events = result.data ?? []
+  const total = result.total ?? 0
+  useTitle('CreatorHub · 审计记录')
+  useEffect(() => { setPage(1) }, [account, task, attempt, env, exit, eventType, from, to])
+  const hasFilters = !!(account || task || attempt || env || exit || eventType || from || to)
+
+  return (
+    <div>
+      <PageHeader icon="ri-history-line" title="审计记录" description="追加式事件回溯；页面不提供编辑或删除">
+        <Button icon="ri-download-2-line" disabled={!events.length} onClick={() => downloadCSV(events)}>导出当前页（脱敏）</Button>
+      </PageHeader>
+      <div className="mb-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <FilterField id="audit-account" label="账号" value={account} onChange={event => setAccount(event.target.value)} />
+        <FilterField id="audit-task" label="任务" value={task} onChange={event => setTask(event.target.value)} />
+        <FilterField id="audit-attempt" label="Attempt" value={attempt} onChange={event => setAttempt(event.target.value)} />
+        <FilterField id="audit-env" label="环境" value={env} onChange={event => setEnv(event.target.value)} />
+        <FilterField id="audit-exit" label="出口" value={exit} onChange={event => setExit(event.target.value)} />
+        <FilterField id="audit-event" label="事件" value={eventType} onChange={event => setEventType(event.target.value)} />
+        <FilterField id="audit-from" label="开始日期" type="date" value={from} onChange={event => setFrom(event.target.value)} />
+        <FilterField id="audit-to" label="结束日期" type="date" value={to} onChange={event => setTo(event.target.value)} />
+      </div>
+      {hasFilters ? (
+        <div className="mb-4">
+          <Button size="sm" onClick={() => { setAccount(''); setTask(''); setAttempt(''); setEnv(''); setExit(''); setEventType(''); setFrom(''); setTo('') }}>清除筛选</Button>
+        </div>
+      ) : null}
+      {error ? <Alert variant="destructive" className="mb-4">{error.message}</Alert> : null}
+      <PageState pending={isPending} error={error} empty={events.length === 0} emptyText={hasFilters ? '没有符合筛选条件的审计事件' : '尚无审计事件'}>
+        <Table
+          columns={[
+            { header: '事件', width: '20%', render: event => (
+              <div>
+                <p className="anywhere font-semibold">{event.event_type}</p>
+                <p className="text-xs text-muted">#{event.id}</p>
+              </div>
+            ) },
+            { header: '关联', width: '27%', render: event => (
+              <div className="space-y-0.5 text-sm">
+                {event.account_id ? <p className="anywhere">账号：<Link to={`/accounts/${event.account_id}`} className="text-primary hover:underline">{event.account_id}</Link></p> : null}
+                {event.task_id ? <p className="anywhere">任务：<Link to={`/tasks/${event.task_id}`} className="text-primary hover:underline">{event.task_id}</Link></p> : null}
+                {event.attempt_id ? <p className="anywhere">Attempt：<Link to={`/attempts/${event.attempt_id}`} className="text-primary hover:underline">{event.attempt_id}</Link></p> : null}
+              </div>
+            ) },
+            { header: '环境 / 出口', width: '24%', render: event => (
+              <div>
+                <p className="anywhere text-sm">
+                  {event.browser_env_alias ? <Link to={`/browsers/${encodeURIComponent(event.browser_env_alias)}`} className="text-primary hover:underline">{event.browser_env_alias}</Link> : '—'}
+                  {' / '}
+                  {event.network_exit_id ? <Link to={`/network-exits/${encodeURIComponent(event.network_exit_id)}`} className="text-primary hover:underline">{event.network_exit_id}</Link> : '—'}
+                </p>
+                <p className="text-xs text-muted">绑定版本 {event.binding_version || '—'}</p>
+              </div>
+            ) },
+            { header: '原因 / 时间', width: '29%', render: event => (
+              <div>
+                <p className="anywhere text-sm">{event.reason_code || event.outcome || '—'}</p>
+                <p className="text-xs text-muted">{new Date(event.created_at).toLocaleString('zh-CN')}</p>
+              </div>
+            ) },
+          ]}
+          rows={events} rowKey={event => event.id} minWidth="1000px"
+        />
+      </PageState>
+      {total > 25 ? (
+        <div className="mt-4 flex items-center justify-end gap-4">
+          <Button size="sm" disabled={page === 1} onClick={() => setPage(current => current - 1)}>上一页</Button>
+          <p className="text-sm text-muted">第 {page} / {Math.ceil(total / 25)} 页</p>
+          <Button size="sm" disabled={page * 25 >= total} onClick={() => setPage(current => current + 1)}>下一页</Button>
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/web/src/AuditList.test.jsx b/web/src/AuditPage.test.jsx
similarity index 69%
rename from web/src/AuditList.test.jsx
rename to web/src/AuditPage.test.jsx
index 45eef0e..bd8694b 100644
--- a/web/src/AuditList.test.jsx
+++ b/web/src/AuditPage.test.jsx
@@ -1,12 +1,25 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { CoreAdminContext } from 'ra-core'
-import { MemoryRouter } from 'react-router-dom'
-import { AuditList, auditCSV } from './AuditList'
+import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Refine } from '@refinedev/core'
+import { MemoryRouter } from 'react-router'
+import { AuditPage, auditCSV } from './AuditPage'
 
 afterEach(() => { cleanup(); vi.restoreAllMocks() })
 
-describe('AuditList', () => {
+const httpQuery = () => new QueryClient({ defaultOptions: { queries: { retry: false } } })
+
+function renderAudit(dataProvider, initialEntry = '/audit?task_id=task-a') {
+  return render(
+    <QueryClientProvider client={httpQuery()}>
+      <Refine dataProvider={dataProvider}>
+        <MemoryRouter initialEntries={[initialEntry]}><AuditPage /></MemoryRouter>
+      </Refine>
+    </QueryClientProvider>,
+  )
+}
+
+describe('AuditPage', () => {
   it('deep-links safe correlation fields and exposes no mutation or secret details', async () => {
     const dataProvider = {
       getList: vi.fn().mockResolvedValue({ data: [{
@@ -16,7 +29,7 @@ describe('AuditList', () => {
       }], total: 1 }),
       getOne: vi.fn(), getMany: vi.fn(), getManyReference: vi.fn(), create: vi.fn(), update: vi.fn(), updateMany: vi.fn(), delete: vi.fn(), deleteMany: vi.fn(),
     }
-    render(<MemoryRouter initialEntries={['/audit?task_id=task-a']}><CoreAdminContext dataProvider={dataProvider}><AuditList /></CoreAdminContext></MemoryRouter>)
+    renderAudit(dataProvider)
 
     expect((await screen.findAllByRole('link', { name: 'task-a' })).length).toBeGreaterThan(0)
     expect(screen.getAllByRole('link', { name: 'account-a' })[0].getAttribute('href')).toBe('/accounts/account-a')
@@ -37,15 +50,13 @@ describe('AuditList', () => {
     expect(csv).toContain('attempt-a')
     for (const secret of ['api-secret', 'private-secret', 'credential-secret', 'auth-secret', 'proxy-secret']) expect(csv).not.toContain(secret)
 
-    const getList = vi.fn().mockImplementation((_resource, params) => Promise.resolve({
-      data: [{ ...event, id: params.pagination.page }], total: 26,
-    }))
+    const getList = vi.fn().mockImplementation(() => Promise.resolve({ data: [{ ...event, id: 7 }], total: 26 }))
     const dataProvider = {
       getList, getOne: vi.fn(), getMany: vi.fn(), getManyReference: vi.fn(), create: vi.fn(), update: vi.fn(), updateMany: vi.fn(), delete: vi.fn(), deleteMany: vi.fn(),
     }
-    render(<MemoryRouter><CoreAdminContext dataProvider={dataProvider}><AuditList /></CoreAdminContext></MemoryRouter>)
+    renderAudit(dataProvider, '/audit')
 
     fireEvent.click(await screen.findByRole('button', { name: '下一页' }))
-    await waitFor(() => expect(getList.mock.calls.some(([, params]) => params.pagination.page === 2)).toBe(true))
+    await waitFor(() => expect(getList.mock.calls.some(([{ pagination }]) => (pagination?.currentPage || pagination?.page) === 2)).toBe(true))
   })
 })
diff --git a/web/src/BrowserImageList.jsx b/web/src/BrowserImageList.jsx
deleted file mode 100644
index 096d01c..0000000
--- a/web/src/BrowserImageList.jsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useDataProvider, useGetList } from 'ra-core'
-import {
-  Alert,
-  Box,
-  Button,
-  CircularProgress,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  FormControlLabel,
-  IconButton,
-  MenuItem,
-  Paper,
-  Stack,
-  Switch,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-} from '@mui/material'
-import DeleteOutlined from '@mui/icons-material/DeleteOutlined'
-import EditOutlined from '@mui/icons-material/EditOutlined'
-
-const versionPattern = /^[0-9][A-Za-z0-9.+~-]{0,63}$/
-const refPattern = /^[A-Za-z0-9][A-Za-z0-9._:/@-]{0,300}$/
-
-function ImageTable({ images, busyVersion, onEdit, onToggle, onDelete }) {
-  return (
-    <TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 1 }}>
-      <Table sx={{ tableLayout: 'fixed', '& th, & td': { py: 2 } }}>
-        <TableHead><TableRow><TableCell width="22%">版本</TableCell><TableCell width="38%">镜像引用</TableCell><TableCell width="20%">备注</TableCell><TableCell width="8%">启用</TableCell><TableCell width="12%" align="right">操作</TableCell></TableRow></TableHead>
-        <TableBody>
-          {images.map(image => (
-            <TableRow key={image.version} sx={{ '&:last-child td': { borderBottom: 0 } }}>
-              <TableCell><Typography fontWeight={650}>{image.version}</Typography></TableCell>
-              <TableCell><Typography component="code" variant="body2" sx={{ overflowWrap: 'anywhere' }}>{image.image_ref}</Typography></TableCell>
-              <TableCell><Typography variant="body2" color={image.note ? 'text.primary' : 'text.disabled'}>{image.note || '—'}</Typography></TableCell>
-              <TableCell>
-                <Switch checked={image.enabled} disabled={busyVersion === image.version} onChange={() => onToggle(image)} slotProps={{ input: { 'aria-label': `启用 ${image.version}` } }} />
-              </TableCell>
-              <TableCell align="right">
-                <IconButton aria-label={`编辑 ${image.version}`} disabled={busyVersion === image.version} onClick={() => onEdit(image)}><EditOutlined /></IconButton>
-                <IconButton aria-label={`删除 ${image.version}`} color="error" disabled={busyVersion === image.version} onClick={() => onDelete(image)}><DeleteOutlined /></IconButton>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  )
-}
-
-export function BrowserImageList() {
-  const dataProvider = useDataProvider()
-  const { data: images = [], error, isPending, refetch } = useGetList('browser-images')
-  const [form, setForm] = useState({ version: '', image_ref: '', note: '' })
-  const [editing, setEditing] = useState(null)
-  const [busy, setBusy] = useState('')
-  const [localError, setLocalError] = useState('')
-
-  useEffect(() => {
-    document.title = 'CreatorHub · 镜像版本'
-  }, [])
-
-  const createValid = versionPattern.test(form.version) && refPattern.test(form.image_ref)
-
-  async function createImage(event) {
-    event.preventDefault()
-    if (!createValid) return
-    setBusy('create')
-    setLocalError('')
-    try {
-      await dataProvider.create('browser-images', { data: { version: form.version, image_ref: form.image_ref, note: form.note, enabled: true } })
-      setForm({ version: '', image_ref: '', note: '' })
-      await refetch()
-    } catch (reason) {
-      setLocalError(reason.message)
-    } finally {
-      setBusy('')
-    }
-  }
-
-  async function toggle(image) {
-    setBusy(image.version)
-    setLocalError('')
-    try {
-      await dataProvider.update('browser-images', { id: image.version, data: { image_ref: image.image_ref, note: image.note, enabled: !image.enabled } })
-      await refetch()
-    } catch (reason) {
-      setLocalError(reason.message)
-    } finally {
-      setBusy('')
-    }
-  }
-
-  async function remove(image) {
-    if (!window.confirm(`删除镜像版本 ${image.version}？被环境引用时删除会被拒绝。`)) return
-    setBusy(image.version)
-    setLocalError('')
-    try {
-      await dataProvider.delete('browser-images', { id: image.version })
-      await refetch()
-    } catch (reason) {
-      setLocalError(reason.message)
-    } finally {
-      setBusy('')
-    }
-  }
-
-  async function saveEditing() {
-    if (!refPattern.test(editing.image_ref)) {
-      setEditing(current => ({ ...current, error: '镜像引用格式不正确' }))
-      return
-    }
-    setBusy(editing.version)
-    setLocalError('')
-    try {
-      await dataProvider.update('browser-images', { id: editing.version, data: { image_ref: editing.image_ref, note: editing.note, enabled: editing.enabled } })
-      setEditing(null)
-      await refetch()
-    } catch (reason) {
-      setLocalError(reason.message)
-    } finally {
-      setBusy('')
-    }
-  }
-
-  const message = localError || error?.message
-  return (
-    <>
-      <Box component="header" sx={{ mb: 4 }}><Typography variant="h1">镜像版本</Typography><Typography color="text.secondary" sx={{ mt: 1, fontSize: '1.05rem' }}>维护可用浏览器镜像版本；创建与升级环境时从中选择</Typography></Box>
-
-      <Paper component="form" onSubmit={createImage} variant="outlined" sx={{ display: 'grid', gridTemplateColumns: { xs: 'minmax(0, 1fr)', md: 'minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) auto' }, gap: 3, alignItems: 'end', p: { xs: 2.5, md: 3 }, mb: 3.5 }}>
-        <Stack spacing={1}>
-          <Typography component="label" htmlFor="image-version" variant="body2" fontWeight={650}>版本 <Box component="span" aria-hidden="true" color="error.main">*</Box></Typography>
-          <TextField id="image-version" required slotProps={{ htmlInput: { 'aria-label': '版本', pattern: '[0-9][A-Za-z0-9.+~-]{0,63}' } }} value={form.version} onChange={event => setForm(current => ({ ...current, version: event.target.value }))} placeholder="如 148.0.7778.215" />
-        </Stack>
-        <Stack spacing={1}>
-          <Typography component="label" htmlFor="image-ref" variant="body2" fontWeight={650}>镜像引用 <Box component="span" aria-hidden="true" color="error.main">*</Box></Typography>
-          <TextField id="image-ref" required slotProps={{ htmlInput: { 'aria-label': '镜像引用' } }} value={form.image_ref} onChange={event => setForm(current => ({ ...current, image_ref: event.target.value }))} placeholder="registry/repo:tag 或 @sha256 摘要" />
-        </Stack>
-        <Stack spacing={1}>
-          <Typography component="label" htmlFor="image-note" variant="body2" fontWeight={650}>备注</Typography>
-          <TextField id="image-note" slotProps={{ htmlInput: { 'aria-label': '备注', maxLength: 200 } }} value={form.note} onChange={event => setForm(current => ({ ...current, note: event.target.value }))} />
-        </Stack>
-        <Button type="submit" variant="contained" size="large" disabled={!createValid || busy === 'create'} sx={{ minHeight: 56 }}>{busy === 'create' ? '保存中…' : '添加版本'}</Button>
-      </Paper>
-
-      {message ? <Alert severity="error" sx={{ mb: 2.5 }}>{message}</Alert> : null}
-      {isPending ? <Box sx={{ display: 'grid', placeItems: 'center', minHeight: 220 }}><CircularProgress aria-label="正在加载镜像版本" /></Box> : null}
-      {!isPending && images.length === 0 ? <Paper variant="outlined" sx={{ py: 7, textAlign: 'center', color: 'text.secondary' }}>暂无镜像版本；网关会在镜像缺失时按引用自动拉取。</Paper> : null}
-      {!isPending && images.length > 0 ? <ImageTable images={images} busyVersion={busy} onEdit={image => setEditing({ ...image, error: '' })} onToggle={toggle} onDelete={remove} /> : null}
-
-      <Dialog open={editing !== null} onClose={() => setEditing(null)} aria-label="编辑镜像版本">
-        <DialogTitle>编辑 {editing?.version}</DialogTitle>
-        <DialogContent sx={{ minWidth: { xs: 300, sm: 480 } }}>
-          <Stack spacing={2.5} sx={{ pt: 1 }}>
-            <TextField label="镜像引用" value={editing?.image_ref ?? ''} onChange={event => setEditing(current => ({ ...current, image_ref: event.target.value, error: '' }))} slotProps={{ htmlInput: { 'aria-label': '镜像引用' } }} error={Boolean(editing?.error)} helperText={editing?.error || ' '} />
-            <TextField label="备注" value={editing?.note ?? ''} onChange={event => setEditing(current => ({ ...current, note: event.target.value }))} slotProps={{ htmlInput: { 'aria-label': '备注', maxLength: 200 } }} />
-            <FormControlLabel control={<Switch checked={editing?.enabled ?? false} onChange={event => setEditing(current => ({ ...current, enabled: event.target.checked }))} slotProps={{ input: { 'aria-label': '启用' } }} />} label="启用（可用于创建与升级）" />
-          </Stack>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setEditing(null)} disabled={busy === editing?.version}>取消</Button>
-          <Button variant="contained" onClick={saveEditing} disabled={busy === editing?.version}>{busy === editing?.version ? '保存中…' : '保存'}</Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  )
-}
diff --git a/web/src/BrowserImageList.test.jsx b/web/src/BrowserImageList.test.jsx
deleted file mode 100644
index 0af9d67..0000000
--- a/web/src/BrowserImageList.test.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { CoreAdminContext } from 'ra-core'
-import { BrowserImageList } from './BrowserImageList'
-
-afterEach(cleanup)
-
-const images = [
-  { id: '148.0.0.1', version: '148.0.0.1', image_ref: 'reg/img:148', note: '', enabled: true },
-  { id: '144.0.0.1', version: '144.0.0.1', image_ref: 'reg/img:144', note: '旧版', enabled: false },
-]
-
-function provider(overrides = {}) {
-  return {
-    getList: vi.fn(() => Promise.resolve({ data: images, total: images.length })),
-    create: vi.fn().mockResolvedValue({ data: images[0] }),
-    update: vi.fn().mockResolvedValue({ data: images[0] }),
-    delete: vi.fn().mockResolvedValue({ data: { id: '144.0.0.1' } }),
-    getOne: vi.fn(), getMany: vi.fn(), getManyReference: vi.fn(), updateMany: vi.fn(), deleteMany: vi.fn(), browserAction: vi.fn(),
-    ...overrides,
-  }
-}
-
-describe('BrowserImageList', () => {
-  it('adds an image version', async () => {
-    const dataProvider = provider()
-    render(<CoreAdminContext dataProvider={dataProvider}><BrowserImageList /></CoreAdminContext>)
-
-    await screen.findAllByText('reg/img:148')
-    fireEvent.change(screen.getByRole('textbox', { name: '版本' }), { target: { value: '150.0.0.1' } })
-    fireEvent.change(screen.getByRole('textbox', { name: '镜像引用' }), { target: { value: 'reg/img:150' } })
-    fireEvent.click(screen.getByRole('button', { name: '添加版本' }))
-
-    await waitFor(() => expect(dataProvider.create).toHaveBeenCalledWith('browser-images', { data: { version: '150.0.0.1', image_ref: 'reg/img:150', note: '', enabled: true } }))
-  })
-
-  it('toggles enabled through update', async () => {
-    const dataProvider = provider()
-    render(<CoreAdminContext dataProvider={dataProvider}><BrowserImageList /></CoreAdminContext>)
-
-    fireEvent.click(await screen.findByRole('switch', { name: '启用 144.0.0.1' }))
-
-    await waitFor(() => expect(dataProvider.update).toHaveBeenCalledWith('browser-images', { id: '144.0.0.1', data: { image_ref: 'reg/img:144', note: '旧版', enabled: true } }))
-  })
-
-  it('blocks invalid input before submit', async () => {
-    const dataProvider = provider()
-    render(<CoreAdminContext dataProvider={dataProvider}><BrowserImageList /></CoreAdminContext>)
-
-    await screen.findAllByText('reg/img:148')
-    fireEvent.change(screen.getByRole('textbox', { name: '版本' }), { target: { value: 'v1!' } })
-    expect(screen.getByRole('button', { name: '添加版本' }).disabled).toBe(true)
-    expect(dataProvider.create).not.toHaveBeenCalled()
-  })
-
-  it('surfaces delete rejection (referenced by env)', async () => {
-    const dataProvider = provider({ delete: vi.fn().mockRejectedValue(new Error('该版本正被环境引用')) })
-    vi.spyOn(window, 'confirm').mockReturnValue(true)
-    render(<CoreAdminContext dataProvider={dataProvider}><BrowserImageList /></CoreAdminContext>)
-
-    fireEvent.click(await screen.findByLabelText('删除 148.0.0.1'))
-
-    expect((await screen.findByRole('alert')).textContent).toContain('该版本正被环境引用')
-  })
-})
diff --git a/web/src/BrowserImagesPage.jsx b/web/src/BrowserImagesPage.jsx
new file mode 100644
index 0000000..dfd8318
--- /dev/null
+++ b/web/src/BrowserImagesPage.jsx
@@ -0,0 +1,184 @@
+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router'
+import { useDataProvider, useList } from '@refinedev/core'
+import {
+  Alert, Button, Card, CardContent, ConfirmDialog, Field, Input, Modal, PageHeader, PageState,
+  Select, StatusPill, Switch, Table, Textarea, conflictMessage,
+} from './lib/ui.jsx'
+import { useTitle } from './lib/hooks.js'
+
+const versionPattern = /^\d[A-Za-z0-9._-]{0,63}$/
+const refPattern = /^[A-Za-z0-9][A-Za-z0-9._:/@-]{0,300}$/
+
+function ImageCreateModal({ open, onClose, onSubmit, busy, error }) {
+  const [form, setForm] = useState({ version: '', image_ref: '', note: '' })
+  const update = (key, value) => setForm(current => ({ ...current, [key]: value }))
+  const valid = versionPattern.test(form.version) && refPattern.test(form.image_ref)
+  const versionInvalid = form.version !== '' && !versionPattern.test(form.version)
+  const refInvalid = form.image_ref !== '' && !refPattern.test(form.image_ref)
+
+  async function submit(event) {
+    event.preventDefault()
+    if (!valid) return
+    const created = await onSubmit({ version: form.version, image_ref: form.image_ref, note: form.note, enabled: true })
+    if (created) setForm({ version: '', image_ref: '', note: '' })
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title="添加镜像版本" labelledBy="image-create-title"
+      footer={<>
+        <Button onClick={onClose} disabled={busy}>取消</Button>
+        <Button variant="primary" type="submit" form="image-create-form" busy={busy} busyText="保存中…" disabled={!valid}>添加版本</Button>
+      </>}>
+      <form id="image-create-form" onSubmit={submit} noValidate>
+        {error ? <Alert variant="destructive" className="mb-4">{error.message}</Alert> : null}
+        <div className="space-y-4">
+          <Field id="image-version" label="版本" required error={versionInvalid ? '数字开头，最长 64 字符' : undefined} helper="镜像版本号，如 148.0.7778.215">
+            <Input id="image-version" required maxLength={64} value={form.version} onChange={event => update('version', event.target.value)} invalid={versionInvalid} />
+          </Field>
+          <Field id="image-ref" label="镜像引用" required error={refInvalid ? '格式不正确' : undefined} helper="registry/repo:tag 或 @sha256 摘要">
+            <Input id="image-ref" required maxLength={301} value={form.image_ref} onChange={event => update('image_ref', event.target.value)} placeholder="registry/repo:tag 或 @sha256 摘要" invalid={refInvalid} />
+          </Field>
+          <Field id="image-note" label="备注" helper="可选，最长 200 字符">
+            <Input id="image-note" maxLength={200} value={form.note} onChange={event => update('note', event.target.value)} />
+          </Field>
+        </div>
+      </form>
+    </Modal>
+  )
+}
+
+function ImageEditForm({ editing, onChange, onSave, busy }) {
+  const refInvalid = editing.image_ref !== '' && !refPattern.test(editing.image_ref)
+  return (
+    <div className="space-y-4">
+      <Field id="edit-image-ref" label="镜像引用" required error={refInvalid ? '格式不正确' : undefined} helper="registry/repo:tag 或 @sha256 摘要">
+        <Input id="edit-image-ref" value={editing.image_ref} invalid={refInvalid} onChange={event => onChange({ ...editing, image_ref: event.target.value })} />
+      </Field>
+      <Field id="edit-image-note" label="备注" helper="可选，最长 200 字符">
+        <Input id="edit-image-note" maxLength={200} value={editing.note} onChange={event => onChange({ ...editing, note: event.target.value })} />
+      </Field>
+      <div className="space-y-1.5">
+        <p className="text-sm font-medium">启用（可用于创建与升级）</p>
+        <Switch id="edit-image-enabled" checked={editing.enabled} onCheckedChange={checked => onChange({ ...editing, enabled: checked })} />
+      </div>
+      <Button variant="primary" busy={busy} busyText="保存中…" disabled={refInvalid} onClick={onSave}>保存</Button>
+    </div>
+  )
+}
+
+export function BrowserImageList() {
+  const dataProvider = useDataProvider()('default')
+  const { result, query } = useList({ resource: 'browser-images' })
+  const error = query.error
+  const isPending = query.isPending
+  const images = result.data ?? []
+  const [createOpen, setCreateOpen] = useState(false)
+  const [createError, setCreateError] = useState(null)
+  const [editing, setEditing] = useState(null)
+  const [busyAlias, setBusyAlias] = useState('')
+  const [notice, setNotice] = useState(null)
+  const [deleting, setDeleting] = useState(null)
+  useTitle('CreatorHub · 镜像版本')
+
+  async function createImage(data) {
+    setBusyAlias('create')
+    setCreateError(null)
+    try {
+      await dataProvider.create({ resource: 'browser-images', variables: data })
+      await query.refetch()
+      return true
+    } catch (reason) {
+      setCreateError(reason)
+      return false
+    } finally {
+      setBusyAlias('')
+    }
+  }
+
+  async function toggleEnabled(image) {
+    setBusyAlias(image.version)
+    setNotice(null)
+    try {
+      await dataProvider.update({ resource: 'browser-images', id: image.version, variables: { image_ref: image.image_ref, note: image.note, enabled: !image.enabled } })
+      await query.refetch()
+    } catch (reason) {
+      setNotice({ variant: 'destructive', text: reason.message })
+    } finally {
+      setBusyAlias('')
+    }
+  }
+
+  async function removeImage(image) {
+    setBusyAlias(image.version)
+    setNotice(null)
+    try {
+      await dataProvider.deleteOne({ resource: 'browser-images', id: image.version })
+      await query.refetch()
+      setDeleting(null)
+    } catch (reason) {
+      setNotice({ variant: 'destructive', text: reason.message })
+    } finally {
+      setBusyAlias('')
+    }
+  }
+
+  async function saveEdit() {
+    if (!refPattern.test(editing.image_ref)) {
+      setEditing({ ...editing, error: '镜像引用格式不正确' })
+      return
+    }
+    setBusyAlias(editing.version)
+    setNotice(null)
+    try {
+      await dataProvider.update({ resource: 'browser-images', id: editing.version, variables: { image_ref: editing.image_ref, note: editing.note, enabled: editing.enabled } })
+      setEditing(null)
+      await query.refetch()
+    } catch (reason) {
+      setEditing({ ...editing, error: reason.message })
+    } finally {
+      setBusyAlias('')
+    }
+  }
+
+  const message = notice?.text || (error ? null : notice?.message) || (notice ? notice.message : null)
+
+  return (
+    <div>
+      <PageHeader icon="ri-inbox-line" title="镜像版本" description="维护可用浏览器镜像版本；创建与升级环境时从中选择">
+        <Button variant="primary" icon="ri-add-line" onClick={() => setCreateOpen(true)}>添加版本</Button>
+      </PageHeader>
+      {message ? <Alert variant="destructive" className="mb-4">{message}</Alert> : null}
+      <PageState pending={isPending} error={error} empty={images.length === 0} emptyText="暂无镜像版本；网关会在镜像缺失时按引用自动拉取。">
+        <Table
+          columns={[
+            { header: '版本', width: '22%', render: image => <span className="font-semibold">{image.version}</span> },
+            { header: '镜像引用', width: '38%', render: image => <code className="anywhere font-mono text-[13px]">{image.image_ref}</code> },
+            { header: '备注', width: '20%', render: image => <span className={image.note ? '' : 'text-muted'}>{image.note || '—'}</span> },
+            { header: '启用', width: '8%', render: image => <Switch id={`image-enabled-${image.version}`} aria-label={`启用 ${image.version}`} checked={image.enabled} disabled={busyAlias === image.version} onCheckedChange={() => toggleEnabled(image)} /> },
+            { header: '操作', width: '12%', align: 'right', render: image => (
+              <span className="inline-flex gap-1">
+                <button type="button" aria-label={`编辑 ${image.version}`} disabled={busyAlias === image.version} onClick={() => setEditing({ ...image, error: '' })}
+                  className="rounded p-1.5 text-muted hover:bg-[#f5f7fa] hover:text-primary disabled:opacity-50"><i className="ri-edit-line" aria-hidden="true" /></button>
+                <button type="button" aria-label={`删除 ${image.version}`} disabled={busyAlias === image.version} onClick={() => setDeleting(image)}
+                  className="rounded p-1.5 text-danger hover:bg-[#fdf1f0] disabled:opacity-50"><i className="ri-delete-bin-line" aria-hidden="true" /></button>
+              </span>
+            ) },
+          ]}
+          rows={images} rowKey={image => image.version} minWidth="900px"
+        />
+      </PageState>
+      <ImageCreateModal open={createOpen} onClose={() => { setCreateOpen(false); setCreateError(null) }} onSubmit={createImage} busy={busyAlias === 'create'} error={createError} />
+      {editing === null ? null : (
+        <Modal open onClose={() => setEditing(null)} title={`编辑 ${editing.version}`} labelledBy="image-edit-title"
+          footer={<Button onClick={() => setEditing(null)}>关闭</Button>}>
+          {editing.error ? <Alert variant="destructive" className="mb-4">{editing.error}</Alert> : null}
+          <ImageEditForm editing={editing} onChange={next => setEditing({ ...next, error: editing.error })} onSave={saveEdit} busy={busyAlias === editing.version} />
+        </Modal>
+      )}
+      <ConfirmDialog open={deleting !== null} onClose={() => setDeleting(null)} onConfirm={() => removeImage(deleting)}
+        title="删除镜像版本" confirmLabel="确认删除" busy={busyAlias === deleting?.version}
+        body={`删除镜像版本 ${deleting?.version}？仍被环境引用时删除会被拒绝。`} />
+    </div>
+  )
+}
diff --git a/web/src/BrowserImagesPage.test.jsx b/web/src/BrowserImagesPage.test.jsx
new file mode 100644
index 0000000..76133af
--- /dev/null
+++ b/web/src/BrowserImagesPage.test.jsx
@@ -0,0 +1,79 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Refine } from '@refinedev/core'
+import { MemoryRouter } from 'react-router'
+import { BrowserImageList } from './BrowserImagesPage'
+
+afterEach(() => { cleanup(); vi.restoreAllMocks() })
+
+const images = [
+  { id: '148.0.0.1', version: '148.0.0.1', image_ref: 'reg/img:148', note: '', enabled: true },
+  { id: '144.0.0.1', version: '144.0.0.1', image_ref: 'reg/img:144', note: '旧版', enabled: false },
+]
+
+function provider(overrides = {}) {
+  return {
+    getList: vi.fn(() => Promise.resolve({ data: images, total: images.length })),
+    create: vi.fn().mockResolvedValue({ data: images[0] }),
+    update: vi.fn().mockResolvedValue({ data: images[0] }),
+    deleteOne: vi.fn().mockResolvedValue({ data: { id: '144.0.0.1' } }),
+    getOne: vi.fn(), getMany: vi.fn(), getManyReference: vi.fn(), updateMany: vi.fn(), deleteMany: vi.fn(), browserAction: vi.fn(),
+    ...overrides,
+  }
+}
+
+const renderImages = dataProvider => render(
+  <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+    <Refine dataProvider={dataProvider}>
+      <MemoryRouter><BrowserImageList /></MemoryRouter>
+    </Refine>
+  </QueryClientProvider>,
+)
+
+describe('BrowserImageList', () => {
+  it('adds an image version', async () => {
+    const dataProvider = provider()
+    renderImages(dataProvider)
+
+    await screen.findAllByText('reg/img:148')
+    fireEvent.click(screen.getByRole('button', { name: '添加版本' }))
+    const dialog = screen.getByRole('dialog')
+    fireEvent.change(within(dialog).getByRole('textbox', { name: '版本' }), { target: { value: '150.0.0.1' } })
+    fireEvent.change(within(dialog).getByRole('textbox', { name: '镜像引用' }), { target: { value: 'reg/img:150' } })
+    fireEvent.click(within(dialog).getByRole('button', { name: '添加版本' }))
+
+    await waitFor(() => expect(dataProvider.create).toHaveBeenCalledWith({ resource: 'browser-images', variables: { version: '150.0.0.1', image_ref: 'reg/img:150', note: '', enabled: true } }))
+  })
+
+  it('toggles enabled through update', async () => {
+    const dataProvider = provider()
+    renderImages(dataProvider)
+
+    fireEvent.click(await screen.findByRole('switch', { name: '启用 144.0.0.1' }))
+
+    await waitFor(() => expect(dataProvider.update).toHaveBeenCalledWith({ resource: 'browser-images', id: '144.0.0.1', variables: { image_ref: 'reg/img:144', note: '旧版', enabled: true } }))
+  })
+
+  it('blocks invalid input before submit', async () => {
+    const dataProvider = provider()
+    renderImages(dataProvider)
+
+    await screen.findAllByText('reg/img:148')
+    fireEvent.click(screen.getByRole('button', { name: '添加版本' }))
+    const dialog = screen.getByRole('dialog')
+    fireEvent.change(within(dialog).getByRole('textbox', { name: '版本' }), { target: { value: 'v1!' } })
+    expect(within(dialog).getByRole('button', { name: '添加版本' }).disabled).toBe(true)
+    expect(dataProvider.create).not.toHaveBeenCalled()
+  })
+
+  it('surfaces delete rejection (referenced by env)', async () => {
+    const dataProvider = provider({ deleteOne: vi.fn().mockRejectedValue(new Error('该版本正被环境引用')) })
+    renderImages(dataProvider)
+
+    fireEvent.click(await screen.findByLabelText('删除 148.0.0.1'))
+    fireEvent.click(await screen.findByRole('button', { name: '确认删除' }))
+
+    expect((await screen.findByRole('alert')).textContent).toContain('该版本正被环境引用')
+  })
+})
diff --git a/web/src/BrowserList.jsx b/web/src/BrowserList.jsx
deleted file mode 100644
index c8b23b2..0000000
--- a/web/src/BrowserList.jsx
+++ /dev/null
@@ -1,389 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useDataProvider, useGetList } from 'ra-core'
-import {
-  Alert,
-  Box,
-  Button,
-  Checkbox,
-  CircularProgress,
-  Collapse,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  FormControlLabel,
-  IconButton,
-  MenuItem,
-  Paper,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-} from '@mui/material'
-import ContentCopyOutlined from '@mui/icons-material/ContentCopyOutlined'
-import CheckCircleOutlined from '@mui/icons-material/CheckCircleOutlined'
-import DeleteOutlined from '@mui/icons-material/DeleteOutlined'
-import ExpandMoreOutlined from '@mui/icons-material/ExpandMoreOutlined'
-import PlayArrowOutlined from '@mui/icons-material/PlayArrowOutlined'
-import ReportProblemOutlined from '@mui/icons-material/ReportProblemOutlined'
-import SecurityOutlined from '@mui/icons-material/SecurityOutlined'
-import StopOutlined from '@mui/icons-material/StopOutlined'
-import UpgradeOutlined from '@mui/icons-material/UpgradeOutlined'
-
-const aliasPattern = /^[a-z0-9][a-z0-9-]{0,31}$/
-const platformOptions = ['windows', 'linux', 'macos']
-const brandOptions = ['Chrome', 'Edge', 'Opera', 'Vivaldi']
-const spoofingOptions = ['font', 'audio', 'canvas', 'clientrects', 'gpu']
-
-const statusLabels = {
-  created: '已创建',
-  running: '运行中',
-  exited: '已停止',
-  restarting: '重启中',
-  paused: '已暂停',
-  missing: '未部署',
-}
-
-const scheduleReasonLabels = {
-  account_revoked: '授权已撤销',
-  account_paused: '账号已暂停',
-  binding_missing: '绑定缺失',
-  network_exit_missing: '固定出口缺失',
-  network_exit_unhealthy: '固定出口不健康',
-  runtime_stop_pending: '停止结果待确认',
-  runtime_missing: '运行实例缺失',
-}
-
-const scheduleBlockLabel = runtime => runtime.schedule_status === 'ready' ? '' : (scheduleReasonLabels[runtime.schedule_block_reason] || runtime.schedule_block_reason || '不可调度')
-
-const emptyForm = {
-  name: '',
-  alias: '',
-  gateway: '',
-  image_version: '',
-  account_id: '',
-  network_exit_id: '',
-  seed: '1000',
-  platform: '',
-  platform_version: '',
-  brand: '',
-  brand_version: '',
-  hardware_concurrency: '',
-  lang: '',
-  accept_lang: '',
-  timezone: '',
-  disable_spoofing: [],
-}
-
-function buildFingerprint(form) {
-  const fingerprint = { seed: Number(form.seed) }
-  const optionalText = {
-    platform: form.platform,
-    platform_version: form.platform_version,
-    brand: form.brand,
-    brand_version: form.brand_version,
-    lang: form.lang,
-    accept_lang: form.accept_lang,
-    timezone: form.timezone,
-  }
-  for (const [key, value] of Object.entries(optionalText)) {
-    if (value !== '') fingerprint[key] = value
-  }
-  if (form.hardware_concurrency !== '') fingerprint.hardware_concurrency = Number(form.hardware_concurrency)
-  if (form.disable_spoofing.length > 0) fingerprint.disable_spoofing = form.disable_spoofing.join(',')
-  return fingerprint
-}
-
-function Status({ state }) {
-  const label = Object.hasOwn(statusLabels, state) ? statusLabels[state] : undefined
-  const color = state === 'running' ? 'success.main' : state === 'exited' ? 'warning.main' : 'text.secondary'
-  return <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 1, color, fontWeight: 650 }}><Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: 'currentColor' }} /><Box><Typography component="span" fontWeight="inherit">{label || '未知状态'}</Typography>{label ? null : <Typography component="span" variant="caption" color="text.secondary" sx={{ display: 'block' }}>{state}</Typography>}</Box></Box>
-}
-
-function RuntimeActions({ runtime, busy, onAction }) {
-  const running = runtime.state === 'running'
-  const startBlockReason = runtime.schedule_block_reason === 'runtime_missing' ? '' : scheduleBlockLabel(runtime)
-  return (
-    <Stack direction="row" spacing={1} useFlexGap sx={{ flexWrap: 'wrap' }}>
-      <Button aria-label={`启动 ${runtime.name}${startBlockReason ? `（${startBlockReason}）` : ''}`} variant="outlined" size="small" disabled={busy || running || startBlockReason !== ''} startIcon={<PlayArrowOutlined />} onClick={() => onAction(runtime, 'start')}>启动</Button>
-      <Button aria-label={`停止 ${runtime.name}`} variant="outlined" color="warning" size="small" disabled={busy || !running} startIcon={<StopOutlined />} onClick={() => onAction(runtime, 'stop')}>停止</Button>
-      <Button aria-label={`升级 ${runtime.name}`} variant="outlined" size="small" disabled={busy} startIcon={<UpgradeOutlined />} onClick={() => onAction(runtime, 'upgrade')}>升级</Button>
-      <Button aria-label={`回收 ${runtime.name}`} variant="outlined" color="error" size="small" disabled={busy} startIcon={<DeleteOutlined />} onClick={() => onAction(runtime, 'recycle')}>回收</Button>
-    </Stack>
-  )
-}
-
-function Copyable({ value }) {
-  const copy = () => navigator.clipboard?.writeText(value)
-  return (
-    <Typography component="code" variant="body2" sx={{ overflowWrap: 'anywhere', display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>
-      {value}
-      <IconButton aria-label={`复制 ${value}`} size="small" onClick={copy}><ContentCopyOutlined sx={{ fontSize: 15 }} /></IconButton>
-    </Typography>
-  )
-}
-
-function CreateForm({ gateways, images, accounts, networkExits, onSubmit, busy }) {
-  const [form, setForm] = useState(emptyForm)
-  const [advanced, setAdvanced] = useState(false)
-  const enabledImages = images.filter(image => image.enabled)
-  const availableAccounts = accounts.filter(account => account.authorization_status === 'authorized' && account.runtime_status === 'paused')
-  const healthyExits = networkExits.filter(exit => exit.health_status === 'healthy')
-  const defaultAccountID = availableAccounts[0]?.id ?? ''
-  const update = (key, value) => setForm(current => ({ ...current, [key]: value }))
-  const toggleSpoofing = option => setForm(current => ({
-    ...current,
-    disable_spoofing: current.disable_spoofing.includes(option)
-      ? current.disable_spoofing.filter(item => item !== option)
-      : [...current.disable_spoofing, option],
-  }))
-
-  useEffect(() => {
-    if (form.gateway === '' && gateways.length > 0) update('gateway', gateways[0].name)
-  }, [gateways, form.gateway])
-  useEffect(() => {
-    if (form.image_version === '' && enabledImages.length > 0) update('image_version', enabledImages[0].version)
-  }, [enabledImages, form.image_version])
-  useEffect(() => {
-    if (form.account_id === '' && defaultAccountID !== '') update('account_id', defaultAccountID)
-  }, [defaultAccountID, form.account_id])
-  const seedNumber = Number(form.seed)
-  const valid = form.name.trim() !== '' && aliasPattern.test(form.alias) && form.gateway !== '' &&
-    form.image_version !== '' && form.account_id !== '' &&
-    Number.isInteger(seedNumber) && seedNumber >= 1 && seedNumber <= 2147483647
-
-  const submit = async event => {
-    event.preventDefault()
-    if (!valid) return
-    const created = await onSubmit({
-      alias: form.alias,
-      name: form.name.trim(),
-      gateway: form.gateway,
-      image_version: form.image_version,
-      account_id: form.account_id,
-      network_exit_id: form.network_exit_id,
-      fingerprint: buildFingerprint(form),
-    })
-    if (created) setForm(current => ({ ...emptyForm, gateway: current.gateway, image_version: current.image_version, account_id: current.account_id, network_exit_id: current.network_exit_id }))
-  }
-
-  const label = (htmlFor, text, required = false) => (
-    <Typography component="label" htmlFor={htmlFor} variant="body2" fontWeight={650}>
-      {text} {required ? <Box component="span" aria-hidden="true" color="error.main">*</Box> : null}
-    </Typography>
-  )
-
-  return (
-    <Paper component="form" onSubmit={submit} variant="outlined" sx={{ display: 'grid', gridTemplateColumns: { xs: 'minmax(0, 1fr)', md: 'repeat(2, minmax(0, 1fr))', lg: 'repeat(3, minmax(0, 1fr))' }, gap: 3, alignItems: 'end', p: { xs: 2.5, md: 3 }, mb: 3.5 }}>
-      <Stack spacing={1}>
-        {label('env-name', '环境名称', true)}
-        <TextField id="env-name" required slotProps={{ htmlInput: { 'aria-label': '环境名称', maxLength: 64 } }} value={form.name} onChange={event => update('name', event.target.value)} placeholder="支持中文，如：店铺一号" />
-      </Stack>
-      <Stack spacing={1}>
-        {label('env-alias', '别名（容器标识）', true)}
-        <TextField id="env-alias" required slotProps={{ htmlInput: { 'aria-label': '别名', pattern: '[a-z0-9][a-z0-9-]{0,31}' } }} value={form.alias} onChange={event => update('alias', event.target.value)} placeholder="如：shop-01" helperText="用于容器名、数据卷与 API 路径" />
-      </Stack>
-      <Stack spacing={1}>
-        {label('env-gateway', '网关', true)}
-        <TextField id="env-gateway" select required slotProps={{ htmlInput: { 'aria-label': '网关' } }} value={form.gateway} onChange={event => update('gateway', event.target.value)} disabled={gateways.length === 0} helperText={gateways.length === 0 ? '请先在「网关管理」注册网关' : ' '}>
-          {gateways.map(gateway => <MenuItem key={gateway.name} value={gateway.name}>{gateway.name}</MenuItem>)}
-        </TextField>
-      </Stack>
-      <Stack spacing={1}>
-        {label('env-version', '镜像版本', true)}
-        <TextField id="env-version" select required slotProps={{ htmlInput: { 'aria-label': '镜像版本' } }} value={form.image_version} onChange={event => update('image_version', event.target.value)} disabled={enabledImages.length === 0} helperText={enabledImages.length === 0 ? '请先在「镜像版本」添加并启用' : ' '}>
-          {enabledImages.map(image => <MenuItem key={image.version} value={image.version}>{image.version}</MenuItem>)}
-        </TextField>
-      </Stack>
-      <Stack spacing={1}>
-        {label('env-seed', 'Fingerprint Seed', true)}
-        <TextField id="env-seed" required type="number" slotProps={{ htmlInput: { 'aria-label': 'Fingerprint Seed', min: 1, max: 2147483647 } }} value={form.seed} onChange={event => update('seed', event.target.value)} />
-      </Stack>
-      <Stack spacing={1}>
-        {label('env-account', '社媒账号', true)}
-        <TextField id="env-account" select required slotProps={{ htmlInput: { 'aria-label': '社媒账号' } }} value={form.account_id} onChange={event => update('account_id', event.target.value)} disabled={availableAccounts.length === 0} helperText={availableAccounts.length === 0 ? '请先准备已授权且暂停的账号' : ' '}>
-          {availableAccounts.map(account => <MenuItem key={account.id} value={account.id}>{account.id} · {account.platform}</MenuItem>)}
-        </TextField>
-      </Stack>
-      <Stack spacing={1}>
-        {label('env-exit', '网络出口')}
-        <TextField id="env-exit" select slotProps={{ htmlInput: { 'aria-label': '网络出口' } }} value={form.network_exit_id} onChange={event => update('network_exit_id', event.target.value)} helperText="留空时使用当前机器网络出口直连">
-          <MenuItem value="">当前机器直连</MenuItem>
-          {healthyExits.map(exit => <MenuItem key={exit.id} value={exit.id}>{exit.id} · {exit.protocol}://{exit.host}:{exit.port}</MenuItem>)}
-        </TextField>
-      </Stack>
-
-      <Stack spacing={1} sx={{ gridColumn: { md: '1 / -1' } }}>
-        <Button type="button" variant="text" onClick={() => setAdvanced(value => !value)} endIcon={<ExpandMoreOutlined sx={{ transform: advanced ? 'rotate(180deg)' : 'none', transition: theme => theme.transitions.create('transform') }} />} sx={{ justifySelf: 'start' }}>
-          高级指纹参数{advanced ? '（收起）' : '（展开）'}
-        </Button>
-        <Collapse in={advanced} sx={{ width: 1 }}>
-          <Box sx={{ display: 'grid', gridTemplateColumns: { xs: 'minmax(0, 1fr)', md: 'repeat(3, minmax(0, 1fr))' }, gap: 3, pt: 1 }}>
-            <TextField label="操作系统 platform" select value={form.platform} onChange={event => update('platform', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '操作系统 platform' } }}>
-              <MenuItem value="">默认</MenuItem>
-              {platformOptions.map(option => <MenuItem key={option} value={option}>{option}</MenuItem>)}
-            </TextField>
-            <TextField label="系统版本 platform-version" value={form.platform_version} onChange={event => update('platform_version', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '系统版本 platform-version' } }} placeholder="如 11.0.0" />
-            <TextField label="浏览器品牌 brand" select value={form.brand} onChange={event => update('brand', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '浏览器品牌 brand' } }}>
-              <MenuItem value="">默认 Chromium</MenuItem>
-              {brandOptions.map(option => <MenuItem key={option} value={option}>{option}</MenuItem>)}
-            </TextField>
-            <TextField label="品牌版本 brand-version" value={form.brand_version} onChange={event => update('brand_version', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '品牌版本 brand-version' } }} placeholder="如 132.0.6834.159" />
-            <TextField label="CPU 核心数 hardware-concurrency" type="number" value={form.hardware_concurrency} onChange={event => update('hardware_concurrency', event.target.value)} slotProps={{ htmlInput: { 'aria-label': 'CPU 核心数 hardware-concurrency', min: 1, max: 128 } }} placeholder="留空由种子生成" />
-            <TextField label="语言 lang" value={form.lang} onChange={event => update('lang', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '语言 lang' } }} placeholder="如 zh-CN" />
-            <TextField label="接受语言 accept-lang" value={form.accept_lang} onChange={event => update('accept_lang', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '接受语言 accept-lang' } }} placeholder="如 zh-CN,en-US" />
-            <TextField label="时区 timezone" value={form.timezone} onChange={event => update('timezone', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '时区 timezone' } }} placeholder="如 Asia/Shanghai" />
-            <Stack spacing={0.5}>
-              <Typography variant="body2" fontWeight={650}>禁用指纹伪装 disable-spoofing</Typography>
-              <Stack direction="row" spacing={0.5} useFlexGap sx={{ flexWrap: 'wrap' }}>
-                {spoofingOptions.map(option => (
-                  <FormControlLabel key={option} control={<Checkbox size="small" checked={form.disable_spoofing.includes(option)} onChange={() => toggleSpoofing(option)} slotProps={{ input: { 'aria-label': `禁用伪装 ${option}` } }} />} label={option} />
-                ))}
-              </Stack>
-            </Stack>
-          </Box>
-        </Collapse>
-      </Stack>
-
-      <Button type="submit" variant="contained" size="large" disabled={!valid || busy} sx={{ minHeight: 56, gridColumn: { md: '1 / -1', lg: 'auto' } }}>{busy ? '创建中…' : '创建环境'}</Button>
-    </Paper>
-  )
-}
-
-function BindingReadiness({ runtime }) {
-  const blockReason = scheduleBlockLabel(runtime)
-  return <Stack direction="row" spacing={0.75} sx={{ alignItems: 'center', color: blockReason ? 'warning.main' : 'success.main' }}>{blockReason ? <ReportProblemOutlined fontSize="small" /> : <CheckCircleOutlined fontSize="small" />}<Typography variant="caption" fontWeight={650}>{blockReason || '可调度'}</Typography></Stack>
-}
-
-function UpgradeDialog({ target, images, busy, onClose, onConfirm }) {
-  const [version, setVersion] = useState('')
-  const enabledImages = images.filter(image => image.enabled)
-  useEffect(() => {
-    setVersion('')
-  }, [target])
-  return (
-    <Dialog open={target !== null} onClose={busy ? undefined : onClose} aria-label="升级镜像版本">
-      <DialogTitle>升级 {target ? `${target.name}（${target.alias}）` : ''}</DialogTitle>
-      <DialogContent sx={{ minWidth: { xs: 300, sm: 420 } }}>
-        <Stack spacing={2} sx={{ pt: 1 }}>
-          <Typography variant="body2" color="text.secondary">容器将按新镜像重建，Profile 数据卷与指纹参数保持不变。</Typography>
-          <TextField select fullWidth label="目标镜像版本" value={version} onChange={event => setVersion(event.target.value)} slotProps={{ htmlInput: { 'aria-label': '目标镜像版本' } }}>
-            {enabledImages.map(image => <MenuItem key={image.version} value={image.version}>{image.version}{image.version === target?.image_version ? '（当前）' : ''}</MenuItem>)}
-          </TextField>
-        </Stack>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose} disabled={busy}>取消</Button>
-        <Button variant="contained" onClick={() => onConfirm(version)} disabled={busy || version === '' || version === target?.image_version}>{busy ? '升级中…' : '确认升级'}</Button>
-      </DialogActions>
-    </Dialog>
-  )
-}
-
-function RuntimeTable({ runtimes, busy, onAction }) {
-  return (
-    <TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 1, display: { xs: 'none', md: 'block' } }}>
-      <Table sx={{ tableLayout: 'fixed', '& th, & td': { py: 2.25 } }}>
-        <TableHead><TableRow><TableCell width="19%">环境</TableCell><TableCell width="12%">状态</TableCell><TableCell width="23%">固定绑定</TableCell><TableCell width="16%">CDP</TableCell><TableCell width="30%">操作</TableCell></TableRow></TableHead>
-        <TableBody>
-          {runtimes.map(runtime => (
-            <TableRow key={runtime.alias} sx={{ '&:last-child td': { borderBottom: 0 } }}>
-              <TableCell><Typography fontWeight={650}>{runtime.name}</Typography><Typography variant="caption" color="text.secondary">{runtime.alias} · seed {runtime.fingerprint?.seed}</Typography></TableCell>
-              <TableCell><Status state={runtime.state} /></TableCell>
-              <TableCell><Typography variant="body2">{runtime.account_id || '未绑定账号'}</Typography><Typography variant="caption" color="text.secondary">{runtime.network_exit_id || '当前机器直连'} · {runtime.image_version}</Typography><BindingReadiness runtime={runtime} /></TableCell>
-              <TableCell>{runtime.endpoint ? <Copyable value={runtime.endpoint} /> : <Typography variant="body2" color="text.secondary">—</Typography>}</TableCell>
-              <TableCell><RuntimeActions runtime={runtime} busy={busy === runtime.alias} onAction={onAction} /></TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  )
-}
-
-function RuntimeCards({ runtimes, busy, onAction }) {
-  return <Stack spacing={2} sx={{ display: { xs: 'flex', md: 'none' } }}>{runtimes.map(runtime => <Paper key={runtime.alias} variant="outlined" sx={{ p: 2.5 }}><Stack spacing={1.5}><Box><Typography fontWeight={700}>{runtime.name}</Typography><Typography variant="caption" color="text.secondary">{runtime.alias} · {runtime.image_version} · seed {runtime.fingerprint?.seed}</Typography></Box><Status state={runtime.state} /><Typography variant="body2">账号：{runtime.account_id || '未绑定'} · 网络出口：{runtime.network_exit_id || '当前机器直连'}</Typography><BindingReadiness runtime={runtime} />{runtime.endpoint ? <Copyable value={runtime.endpoint} /> : null}<RuntimeActions runtime={runtime} busy={busy === runtime.alias} onAction={onAction} /></Stack></Paper>)}</Stack>
-}
-
-export function BrowserList() {
-  const dataProvider = useDataProvider()
-  const [busy, setBusy] = useState('')
-  const [localError, setLocalError] = useState('')
-  const [upgradeTarget, setUpgradeTarget] = useState(null)
-  const { data: runtimes = [], error, isPending, refetch } = useGetList('browsers', {}, { refetchInterval: 3000 })
-  const { data: gateways = [] } = useGetList('gateways')
-  const { data: images = [] } = useGetList('browser-images')
-  const { data: accounts = [] } = useGetList('accounts')
-  const { data: networkExits = [] } = useGetList('network-exits')
-
-  useEffect(() => {
-    document.title = 'CreatorHub · 运行环境'
-  }, [])
-
-  async function createRuntime(data) {
-    setBusy('create')
-    setLocalError('')
-    try {
-      await dataProvider.create('browsers', { data })
-      await refetch()
-      return true
-    } catch (reason) {
-      setLocalError(reason.status === 409 ? '冲突（409）：账号或运行环境已有活动绑定；表单内容已保留。' : reason.status === 503 ? `环境不可用（503）：${reason.message}` : reason.message)
-      return false
-    } finally {
-      setBusy('')
-    }
-  }
-
-  async function act(runtime, action) {
-    if (action === 'recycle' && !window.confirm(`回收 ${runtime.name}（${runtime.alias}）？容器将被删除，Profile 数据卷保留。`)) return
-    if (action === 'upgrade') {
-      setUpgradeTarget(runtime)
-      return
-    }
-    await runAction(runtime, action)
-  }
-
-  async function runAction(runtime, action, extra) {
-    setBusy(runtime.alias)
-    setLocalError('')
-    try {
-      await dataProvider.browserAction(runtime.alias, action, extra)
-      await refetch()
-    } catch (reason) {
-      setLocalError(reason.message)
-      return reason
-    } finally {
-      setBusy('')
-    }
-  }
-
-  async function confirmUpgrade(version) {
-    const target = upgradeTarget
-    const failure = await runAction(target, 'upgrade', { version })
-    if (!failure) setUpgradeTarget(null)
-  }
-
-  const message = localError || error?.message
-  return (
-    <>
-      <Box component="header" sx={{ mb: 4 }}><Typography variant="h1">运行环境</Typography><Typography color="text.secondary" sx={{ mt: 1, fontSize: '1.05rem' }}>启动、停止、升级并回收隔离的指纹浏览器</Typography></Box>
-
-      <CreateForm gateways={gateways} images={images} accounts={accounts} networkExits={networkExits} onSubmit={createRuntime} busy={busy === 'create'} />
-
-      {message ? <Alert severity="error" action={<Button color="inherit" size="small" onClick={() => { setLocalError(''); refetch() }}>重试</Button>} sx={{ mb: 2.5 }}>{message}</Alert> : null}
-      {isPending ? <Box sx={{ display: 'grid', placeItems: 'center', minHeight: 220 }}><CircularProgress aria-label="正在加载运行环境" /></Box> : null}
-      {!isPending && runtimes.length === 0 ? <Paper variant="outlined" sx={{ py: 7, textAlign: 'center', color: 'text.secondary' }}>暂无运行环境，创建第一个隔离 Profile。</Paper> : null}
-      {!isPending && runtimes.length > 0 ? <><RuntimeTable runtimes={runtimes} busy={busy} onAction={act} /><RuntimeCards runtimes={runtimes} busy={busy} onAction={act} /></> : null}
-
-      <UpgradeDialog target={upgradeTarget} images={images} busy={busy === upgradeTarget?.alias} onClose={() => setUpgradeTarget(null)} onConfirm={confirmUpgrade} />
-
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, mt: 4, color: '#475467' }}><SecurityOutlined color="primary" /><Typography>Docker socket 仅由受限网关访问，镜像与参数由平台下发</Typography></Box>
-    </>
-  )
-}
diff --git a/web/src/BrowsersPage.jsx b/web/src/BrowsersPage.jsx
new file mode 100644
index 0000000..87a1923
--- /dev/null
+++ b/web/src/BrowsersPage.jsx
@@ -0,0 +1,384 @@
+import { useEffect, useState } from 'react'
+import { Link, useNavigate, useParams } from 'react-router'
+import { useDataProvider, useList, useOne } from '@refinedev/core'
+import {
+  Alert, Button, Card, CardContent, Copyable, DetailList, Field, Input, Modal, PageHeader,
+  PageState, Select, StatusPill, Table,
+} from './lib/ui.jsx'
+import { useTitle } from './lib/hooks.js'
+
+const aliasPattern = /^[a-z0-9][a-z0-9-]{0,31}$/
+const platformOptions = ['windows', 'linux', 'macos'].map(value => ({ value, label: value }))
+const brandOptions = ['Chrome', 'Edge', 'Opera', 'Vivaldi'].map(value => ({ value, label: value }))
+const spoofingFields = ['font', 'audio', 'canvas', 'clientrects', 'gpu']
+
+const stateText = { created: '已创建', running: '运行中', exited: '已停止', restarting: '重启中', paused: '已暂停', missing: '未部署' }
+const blockText = {
+  account_revoked: '授权已撤销', account_paused: '账号已暂停', binding_missing: '绑定缺失',
+  network_exit_missing: '固定出口缺失', network_exit_unhealthy: '固定出口不健康',
+  runtime_stop_pending: '停止结果待确认', runtime_missing: '运行实例缺失',
+}
+
+const scheduleBlock = runtime => runtime.schedule_status === 'ready'
+  ? ''
+  : blockText[runtime.schedule_block_reason] || runtime.schedule_block_reason || '不可调度'
+
+const createInitial = {
+  name: '', alias: '', gateway: '', image_version: '', account_id: '', network_exit_id: '', seed: '1000',
+  platform: '', platform_version: '', brand: '', brand_version: '', hardware_concurrency: '', lang: '', accept_lang: '', timezone: '', disable_spoofing: [],
+}
+
+// 高级字段空值不提交，收敛到 seed 驱动。
+function fingerprintPayload(form) {
+  const payload = { seed: Number(form.seed) }
+  const advanced = { platform: form.platform, platform_version: form.platform_version, brand: form.brand, brand_version: form.brand_version, lang: form.lang, accept_lang: form.accept_lang, timezone: form.timezone }
+  for (const [key, value] of Object.entries(advanced)) if (value !== '') payload[key] = value
+  if (form.hardware_concurrency !== '') payload.hardware_concurrency = Number(form.hardware_concurrency)
+  if (form.disable_spoofing.length > 0) payload.disable_spoofing = form.disable_spoofing.join(',')
+  return payload
+}
+
+function StatePill({ state }) {
+  const known = Object.hasOwn(stateText, state)
+  return <StatusPill tone={state === 'running' ? 'success' : state === 'exited' ? 'warning' : 'neutral'} label={known ? stateText[state] : '未知状态'} sub={known ? undefined : state} />
+}
+
+function RuntimeActions({ runtime, busy, onAction }) {
+  const running = runtime.state === 'running'
+  const block = runtime.schedule_block_reason === 'runtime_missing' ? '' : scheduleBlock(runtime)
+  const startLabel = `启动 ${runtime.name}${block ? `（${block}）` : ''}`
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button size="sm" icon="ri-play-line" aria-label={startLabel} disabled={busy || running || block !== ''} onClick={() => onAction(runtime, 'start')}>启动</Button>
+      <Button size="sm" icon="ri-stop-line" aria-label={`停止 ${runtime.name}`} disabled={busy || !running} onClick={() => onAction(runtime, 'stop')}>停止</Button>
+      <Button size="sm" icon="ri-arrow-up-circle-line" aria-label={`升级 ${runtime.name}`} disabled={busy} onClick={() => onAction(runtime, 'upgrade')}>升级</Button>
+      <Button size="sm" variant="danger" icon="ri-delete-bin-line" aria-label={`回收 ${runtime.name}`} disabled={busy} onClick={() => onAction(runtime, 'recycle')}>回收</Button>
+    </div>
+  )
+}
+
+function SchedulePill({ runtime }) {
+  const block = scheduleBlock(runtime)
+  return <StatusPill tone={block ? 'warning' : 'success'} label={block || '可调度'} />
+}
+
+function UpgradeDialog({ target, images, busy, onClose, onConfirm }) {
+  const [version, setVersion] = useState('')
+  const enabled = images.filter(image => image.enabled)
+  useEffect(() => { setVersion('') }, [target])
+  return (
+    <Modal open={target !== null} onClose={busy ? undefined : onClose} title={`升级 ${target ? `${target.name}（${target.alias}）` : ''}`} size="sm" labelledBy="upgrade-title"
+      footer={<>
+        <Button onClick={onClose} disabled={busy}>取消</Button>
+        <Button variant="primary" busy={busy} busyText="升级中…" disabled={version === '' || version === target?.image_version} onClick={() => onConfirm(version)}>确认升级</Button>
+      </>}>
+      <div className="space-y-4">
+        <p className="text-sm text-muted">容器将按新镜像重建，Profile 数据卷与指纹参数保持不变。</p>
+        <Field id="upgrade-version" label="目标镜像版本" required>
+          <Select id="upgrade-version" value={version} onChange={event => setVersion(event.target.value)}
+            options={enabled.map(image => ({ value: image.version, label: `${image.version}${image.version === target?.image_version ? '（当前）' : ''}` }))}
+            placeholder="选择版本" />
+        </Field>
+      </div>
+    </Modal>
+  )
+}
+
+function RuntimeTable({ runtimes, busy, onAction, onRowClick }) {
+  return (
+    <div className="hidden overflow-x-auto rounded-lg border border-hairline bg-white md:block">
+      <table className="w-full min-w-[860px] table-fixed text-sm">
+        <thead>
+          <tr className="border-b border-hairline text-left text-xs text-muted">
+            <th className="w-[19%] px-4 py-2.5 font-medium">环境</th>
+            <th className="w-[12%] px-4 py-2.5 font-medium">状态</th>
+            <th className="w-[23%] px-4 py-2.5 font-medium">固定绑定</th>
+            <th className="w-[16%] px-4 py-2.5 font-medium">CDP</th>
+            <th className="w-[30%] px-4 py-2.5 font-medium">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          {runtimes.map(runtime => (
+            <tr key={runtime.alias} className="border-b border-hairline last:border-0">
+              <td className="cursor-pointer px-4 py-3" onClick={() => onRowClick(runtime)}>
+                <p className="font-semibold">{runtime.name}</p>
+                <p className="anywhere text-xs text-muted">{runtime.alias} · seed {runtime.fingerprint?.seed}</p>
+              </td>
+              <td className="px-4 py-3"><StatePill state={runtime.state} /></td>
+              <td className="px-4 py-3">
+                <p className="text-sm">{runtime.account_id || '未绑定账号'}</p>
+                <p className="anywhere text-xs text-muted">{runtime.network_exit_id || '当前机器直连'} · {runtime.image_version}</p>
+                <div className="mt-1"><SchedulePill runtime={runtime} /></div>
+              </td>
+              <td className="px-4 py-3">
+                {runtime.endpoint ? <Copyable value={runtime.endpoint} /> : <span className="text-sm text-muted">—</span>}
+              </td>
+              <td className="px-4 py-3"><RuntimeActions runtime={runtime} busy={busy === runtime.alias} onAction={onAction} /></td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function RuntimeCards({ runtimes, busy, onAction }) {
+  return (
+    <div className="space-y-4 md:hidden">
+      {runtimes.map(runtime => (
+        <Card key={runtime.alias}>
+          <CardContent className="space-y-3">
+            <div>
+              <p className="font-semibold">{runtime.name}</p>
+              <p className="anywhere text-xs text-muted">{runtime.alias} · {runtime.image_version} · seed {runtime.fingerprint?.seed}</p>
+            </div>
+            <StatePill state={runtime.state} />
+            <p className="text-sm">账号：{runtime.account_id || '未绑定'} · 网络出口：{runtime.network_exit_id || '当前机器直连'}</p>
+            <SchedulePill runtime={runtime} />
+            {runtime.endpoint ? <Copyable value={runtime.endpoint} /> : null}
+            <RuntimeActions runtime={runtime} busy={busy === runtime.alias} onAction={onAction} />
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export function BrowserList() {
+  const navigate = useNavigate()
+  const dataProvider = useDataProvider()('default')
+  const [busy, setBusy] = useState('')
+  const [actionError, setActionError] = useState('')
+  const [upgradeTarget, setUpgradeTarget] = useState(null)
+  const { result, query } = useList({ resource: 'browsers', queryOptions: { refetchInterval: 3000 } })
+  const error = query.error
+  const isPending = query.isPending
+  const runtimes = result.data ?? []
+  const { result: imageResult, query: imagesQuery } = useList({ resource: 'browser-images' })
+  const images = imageResult.data ?? []
+  useTitle('CreatorHub · 运行环境')
+
+  async function handleAction(runtime, action) {
+    if (action === 'recycle' && !window.confirm(`回收 ${runtime.name}（${runtime.alias}）？容器将被删除，Profile 数据卷保留。`)) return
+    if (action === 'upgrade') { setUpgradeTarget(runtime); return }
+    await runAction(runtime, action)
+  }
+
+  async function runAction(runtime, action, data) {
+    setBusy(runtime.alias)
+    setActionError('')
+    try {
+      await dataProvider.browserAction(runtime.alias, action, data)
+      await query.refetch()
+    } catch (reason) {
+      setActionError(reason.message)
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function upgrade(version) {
+    await runAction(upgradeTarget, 'upgrade', { version })
+    setUpgradeTarget(null)
+  }
+
+  return (
+    <div>
+      <PageHeader icon="ri-server-line" title="运行环境" description="启动、停止、升级并回收隔离的指纹浏览器">
+        <Button variant="primary" icon="ri-add-line" onClick={() => navigate('/browsers/new')}>创建环境</Button>
+      </PageHeader>
+      {actionError ? (
+        <Alert variant="destructive" className="mb-4">
+          {actionError}
+          <Button size="sm" onClick={() => query.refetch()}>重试</Button>
+        </Alert>
+      ) : null}
+      <PageState pending={isPending} error={error} empty={runtimes.length === 0} emptyText="暂无运行环境，创建第一个隔离 Profile。">
+        <RuntimeTable runtimes={runtimes} busy={busy} onAction={handleAction} onRowClick={runtime => navigate(`/browsers/${encodeURIComponent(runtime.alias)}`)} />
+        <RuntimeCards runtimes={runtimes} busy={busy} onAction={handleAction} />
+      </PageState>
+      <UpgradeDialog target={upgradeTarget} images={images} busy={busy === upgradeTarget?.alias} onClose={() => setUpgradeTarget(null)} onConfirm={upgrade} />
+      <p className="mt-6 flex items-center gap-2 text-sm text-muted"><i className="ri-shield-check-line text-primary" aria-hidden="true" />Docker socket 仅由受限网关访问，镜像与参数由平台下发</p>
+    </div>
+  )
+}
+
+export function BrowserCreatePage() {
+  const navigate = useNavigate()
+  const dataProvider = useDataProvider()('default')
+  const [form, setForm] = useState(createInitial)
+  const [advancedOpen, setAdvancedOpen] = useState(false)
+  const [submitBusy, setSubmitBusy] = useState(false)
+  const [submitError, setSubmitError] = useState('')
+  const { query: runtimesQuery } = useList({ resource: 'browsers' })
+  const { result: gatewayResult } = useList({ resource: 'gateways' })
+  const gateways = gatewayResult.data ?? []
+  const { result: imageResult } = useList({ resource: 'browser-images' })
+  const images = imageResult.data ?? []
+  const { result: accountResult } = useList({ resource: 'accounts' })
+  const accounts = accountResult.data ?? []
+  const { result: exitResult } = useList({ resource: 'network-exits' })
+  const networkExits = exitResult.data ?? []
+  useTitle('CreatorHub · 创建运行环境')
+
+  const enabledImages = images.filter(image => image.enabled)
+  const pausedAccounts = accounts.filter(account => account.authorization_status === 'authorized' && account.runtime_status === 'paused')
+  const healthyExits = networkExits.filter(item => item.health_status === 'healthy')
+  const update = (key, value) => setForm(current => ({ ...current, [key]: value }))
+  const toggleSpoofing = field => setForm(current => ({ ...current, disable_spoofing: current.disable_spoofing.includes(field) ? current.disable_spoofing.filter(item => item !== field) : [...current.disable_spoofing, field] }))
+
+  // 选中项为空且列表就绪时，默认选中第一个可选项，减少必填噪音。
+  useEffect(() => { if (form.gateway === '' && gateways.length > 0) update('gateway', gateways[0].name) }, [gateways, form.gateway])
+  useEffect(() => { if (form.image_version === '' && enabledImages.length > 0) update('image_version', enabledImages[0].version) }, [enabledImages, form.image_version])
+  useEffect(() => { if (form.account_id === '' && pausedAccounts[0]?.id) update('account_id', pausedAccounts[0].id) }, [pausedAccounts, form.account_id])
+
+  const seed = Number(form.seed)
+  const valid = form.name.trim() !== '' && aliasPattern.test(form.alias) && form.gateway !== '' && form.image_version !== '' && form.account_id !== '' && Number.isInteger(seed) && seed >= 1 && seed <= 2147483647
+
+  async function submit(event) {
+    event.preventDefault()
+    if (!valid) return
+    setSubmitBusy(true)
+    setSubmitError('')
+    try {
+      await dataProvider.create({
+        resource: 'browsers',
+        variables: {
+          alias: form.alias, name: form.name.trim(), gateway: form.gateway, image_version: form.image_version,
+          account_id: form.account_id, network_exit_id: form.network_exit_id, fingerprint: fingerprintPayload(form),
+        },
+      })
+      await runtimesQuery.refetch()
+      navigate('/browsers')
+    } catch (reason) {
+      setSubmitError(reason.status === 409 ? '冲突（409）：账号或运行环境已有活动绑定；表单内容已保留。' : reason.status === 503 ? `环境不可用（503）：${reason.message}` : reason.message)
+    } finally {
+      setSubmitBusy(false)
+    }
+  }
+
+  return (
+    <div className="max-w-[960px]">
+      <PageHeader title="创建运行环境" description="为已授权且暂停的账号绑定网关、镜像、指纹与网络出口">
+        <Button icon="ri-arrow-left-line" onClick={() => navigate('/browsers')}>返回运行环境</Button>
+      </PageHeader>
+      {submitError ? <Alert variant="destructive" className="mb-4">{submitError}</Alert> : null}
+      <Card>
+        <CardContent>
+          <form onSubmit={submit} noValidate className="space-y-6">
+            <div className="grid gap-5 sm:grid-cols-2">
+              <Field id="env-name" label="环境名称" required helper="展示名称，支持中文，如：店铺一号">
+                <Input id="env-name" required maxLength={64} value={form.name} onChange={event => update('name', event.target.value)} />
+              </Field>
+              <Field id="env-alias" label="别名（容器名）" required error={form.alias !== '' && !aliasPattern.test(form.alias) ? '小写字母、数字与中划线，最长 32 字符' : undefined} helper="用于容器名、数据卷与 API 路径">
+                <Input id="env-alias" required pattern="[a-z0-9][a-z0-9-]{0,31}" value={form.alias} onChange={event => update('alias', event.target.value)} placeholder="如：shop-01" />
+              </Field>
+              <Field id="env-gateway" label="网关" required error={gateways.length === 0 ? '请先在「网关管理」注册网关' : undefined} helper="容器调度到该网关">
+                <Select id="env-gateway" value={form.gateway} onChange={event => update('gateway', event.target.value)} options={gateways.map(item => ({ value: item.name, label: item.name }))} placeholder="选择网关" disabled={gateways.length === 0} />
+              </Field>
+              <Field id="env-version" label="镜像版本" required error={enabledImages.length === 0 ? '请先在「镜像版本」添加并启用' : undefined} helper="环境使用的浏览器镜像">
+                <Select id="env-version" value={form.image_version} onChange={event => update('image_version', event.target.value)} options={enabledImages.map(item => ({ value: item.version, label: item.version }))} placeholder="选择版本" disabled={enabledImages.length === 0} />
+              </Field>
+              <Field id="env-seed" label="Fingerprint Seed" required helper="1..2147483647，派生指纹参数">
+                <Input id="env-seed" type="number" min={1} max={2147483647} required value={form.seed} onChange={event => update('seed', event.target.value)} />
+              </Field>
+              <Field id="env-account" label="社媒账号" required error={pausedAccounts.length === 0 ? '请先准备已授权且暂停的账号' : undefined} helper="绑定后该账号固定使用此环境">
+                <Select id="env-account" value={form.account_id} onChange={event => update('account_id', event.target.value)} options={pausedAccounts.map(item => ({ value: item.id, label: `${item.id} · ${item.platform}` }))} placeholder="选择账号" disabled={pausedAccounts.length === 0} />
+              </Field>
+              <Field id="env-exit" label="网络出口" helper="留空时使用当前机器网络出口直连">
+                <Select id="env-exit" value={form.network_exit_id} onChange={event => update('network_exit_id', event.target.value)}
+                  options={healthyExits.map(item => ({ value: item.id, label: `${item.id} · ${item.protocol}://${item.host}:${item.port}` }))}
+                  placeholder="当前机器直连" emptyOption={{ value: '', label: '当前机器直连' }} />
+              </Field>
+            </div>
+            <div>
+              <button type="button" onClick={() => setAdvancedOpen(current => !current)} className="flex items-center gap-1.5 text-sm font-medium text-primary hover:underline">
+                高级指纹参数{advancedOpen ? '（收起）' : '（展开）'}
+                <i className={advancedOpen ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'} aria-hidden="true" />
+              </button>
+              {advancedOpen ? (
+                <div className="mt-4 grid gap-5 border-t border-hairline pt-4 sm:grid-cols-3">
+                  <Field id="env-platform" label="操作系统 platform">
+                    <Select id="env-platform" value={form.platform} onChange={event => update('platform', event.target.value)} options={platformOptions} emptyOption={{ value: '', label: '默认' }} placeholder="默认" />
+                  </Field>
+                  <Field id="env-platform-version" label="系统版本 platform-version" helper="如 11.0.0">
+                    <Input id="env-platform-version" value={form.platform_version} onChange={event => update('platform_version', event.target.value)} />
+                  </Field>
+                  <Field id="env-brand" label="浏览器品牌 brand">
+                    <Select id="env-brand" value={form.brand} onChange={event => update('brand', event.target.value)} options={brandOptions} emptyOption={{ value: '', label: '默认 Chromium' }} placeholder="默认 Chromium" />
+                  </Field>
+                  <Field id="env-brand-version" label="品牌版本 brand-version" helper="如 132.0.6834.159">
+                    <Input id="env-brand-version" value={form.brand_version} onChange={event => update('brand_version', event.target.value)} />
+                  </Field>
+                  <Field id="env-concurrency" label="CPU 核心数 hardware-concurrency" helper="留空由种子生成">
+                    <Input id="env-concurrency" type="number" min={1} max={128} value={form.hardware_concurrency} onChange={event => update('hardware_concurrency', event.target.value)} />
+                  </Field>
+                  <Field id="env-lang" label="语言 lang" helper="如 zh-CN">
+                    <Input id="env-lang" value={form.lang} onChange={event => update('lang', event.target.value)} />
+                  </Field>
+                  <Field id="env-accept-lang" label="接受语言 accept-lang" helper="如 zh-CN,en-US">
+                    <Input id="env-accept-lang" value={form.accept_lang} onChange={event => update('accept_lang', event.target.value)} />
+                  </Field>
+                  <Field id="env-timezone" label="时区 timezone" helper="如 Asia/Shanghai">
+                    <Input id="env-timezone" value={form.timezone} onChange={event => update('timezone', event.target.value)} />
+                  </Field>
+                  <div className="space-y-1.5">
+                    <p className="text-sm font-medium">禁用指纹伪装 disable-spoofing</p>
+                    <div className="flex flex-wrap gap-x-4 gap-y-2">
+                      {spoofingFields.map(field => (
+                        <label key={field} className="flex cursor-pointer items-center gap-1.5 text-sm">
+                          <input type="checkbox" checked={form.disable_spoofing.includes(field)} onChange={() => toggleSpoofing(field)} aria-label={`禁用伪装 ${field}`} className="size-4 accent-primary" />
+                          {field}
+                        </label>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ) : null}
+            </div>
+            <div className="flex gap-3">
+              <Button variant="primary" type="submit" busy={submitBusy} busyText="创建中…" disabled={!valid}>创建环境</Button>
+              <Button type="button" onClick={() => navigate('/browsers')}>取消</Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export function BrowserDetail() {
+  const { id } = useParams()
+  const { result, error, isPending } = useOne({ resource: 'browsers', id, queryOptions: { retry: false } })
+  const runtime = result
+  useTitle('CreatorHub · 环境详情')
+  if (isPending) return <PageState pending />
+  if (error || !runtime) return <Alert variant="destructive">{error?.message || '运行环境不存在'}</Alert>
+  return (
+    <div>
+      <PageHeader title="运行环境详情" description={`${runtime.name}（${runtime.alias}）`}>
+        <Button icon="ri-arrow-left-line" as={Link} to="/browsers">返回运行环境</Button>
+      </PageHeader>
+      <Card>
+        <CardContent className="space-y-4">
+          <StatePill state={runtime.state} />
+          <DetailList rows={[
+            ['账号与镜像', <span className="anywhere">{runtime.account_id} · {runtime.image_version}</span>],
+            ['固定出口', <span className="anywhere">{runtime.network_exit?.id || '未绑定'} · 健康：{runtime.network_exit?.health_status || '未知'}</span>],
+            ['绑定版本 / 运行实例', <span className="anywhere">{runtime.binding_version} · {runtime.runtime_instance_id || '无'}</span>],
+          ]} />
+          {runtime.endpoint ? (
+            <div className="flex min-w-0 flex-col gap-0.5 text-sm">
+              <dt className="text-muted">CDP</dt>
+              <dd><Copyable value={runtime.endpoint} /></dd>
+            </div>
+          ) : null}
+          <div className="flex flex-wrap gap-3">
+            <Button as={Link} to={`/accounts/${encodeURIComponent(runtime.account_id)}`}>查看账号</Button>
+            {runtime.network_exit?.id ? <Button as={Link} to={`/network-exits/${encodeURIComponent(runtime.network_exit.id)}`}>查看出口</Button> : null}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/web/src/BrowserList.test.jsx b/web/src/BrowsersPage.test.jsx
similarity index 78%
rename from web/src/BrowserList.test.jsx
rename to web/src/BrowsersPage.test.jsx
index b223a0b..6d8c23b 100644
--- a/web/src/BrowserList.test.jsx
+++ b/web/src/BrowsersPage.test.jsx
@@ -1,10 +1,13 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
-import { CoreAdminContext, HttpError } from 'ra-core'
-import { BrowserList } from './BrowserList'
-import { theme } from './theme'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Refine } from '@refinedev/core'
+import { MemoryRouter } from 'react-router'
+import { BrowserCreatePage, BrowserList } from './BrowsersPage'
 
-afterEach(cleanup)
+afterEach(() => { cleanup(); vi.restoreAllMocks() })
+
+const httpError = (message, status, body) => Object.assign(new Error(message), { status, body })
 
 const runtimes = [
   { id: 'account-a', alias: 'account-a', name: '店铺一号', state: 'running', status: 'Up', image_version: '148.0.0.1', fingerprint: { seed: 1000 }, endpoint: 'http://account-a:9222', account_id: 'social-a', network_exit_id: 'exit-1', network_exit_health: 'healthy', schedule_status: 'ready' },
@@ -21,7 +24,7 @@ const networkExits = [{ id: 'exit-1', protocol: 'socks5', host: 'proxy.example',
 
 function provider(overrides = {}) {
   return {
-    getList: vi.fn((resource) => {
+    getList: vi.fn(({ resource }) => {
       if (resource === 'browsers') return Promise.resolve({ data: runtimes, total: runtimes.length })
       if (resource === 'gateways') return Promise.resolve({ data: gateways, total: gateways.length })
       if (resource === 'browser-images') return Promise.resolve({ data: images, total: images.length })
@@ -36,16 +39,27 @@ function provider(overrides = {}) {
   }
 }
 
-describe('BrowserList', () => {
-  it('uses the semantic design colors', () => {
-    expect(theme.palette.text.secondary).toBe('#475467')
-    expect(theme.palette.success.main).toBe('#067647')
-    expect(theme.palette.warning.main).toBe('#B54708')
-    expect(theme.palette.error.main).toBe('#B42318')
-  })
+const queryClient = () => new QueryClient({ defaultOptions: { queries: { retry: false } } })
 
+const renderList = dataProvider => render(
+  <QueryClientProvider client={queryClient()}>
+    <Refine dataProvider={dataProvider}>
+      <MemoryRouter><BrowserList /></MemoryRouter>
+    </Refine>
+  </QueryClientProvider>,
+)
+
+const renderCreate = dataProvider => render(
+  <QueryClientProvider client={queryClient()}>
+    <Refine dataProvider={dataProvider}>
+      <MemoryRouter initialEntries={['/browsers/new']}><BrowserCreatePage /></MemoryRouter>
+    </Refine>
+  </QueryClientProvider>,
+)
+
+describe('BrowserList', () => {
   it('keeps CDP data in desktop and mobile views', async () => {
-    render(<CoreAdminContext dataProvider={provider()}><BrowserList /></CoreAdminContext>)
+    renderList(provider())
 
     expect(await screen.findAllByText('http://account-a:9222')).toHaveLength(2)
     expect(screen.getAllByText('CDP')).toHaveLength(1)
@@ -53,17 +67,16 @@ describe('BrowserList', () => {
 
   it('shows unknown states with their raw value as secondary evidence', async () => {
     const unknownRuntime = { ...runtimes[0], state: 'dead' }
-    render(<CoreAdminContext dataProvider={provider({ getList: vi.fn().mockResolvedValue({ data: [unknownRuntime], total: 1 }) })}><BrowserList /></CoreAdminContext>)
+    renderList(provider({ getList: vi.fn().mockResolvedValue({ data: [unknownRuntime], total: 1 }) }))
 
     expect(await screen.findAllByText('未知状态')).toHaveLength(2)
     const rawStates = screen.getAllByText('dead')
     expect(rawStates).toHaveLength(2)
-    expect(rawStates[0].className).toContain('MuiTypography-caption')
   })
 
-  it.each(['constructor', 'toString', '__proto__'])('treats prototype key %s as an unknown state', async (state) => {
+  it.each(['constructor', 'toString', '__proto__'])('treats prototype key %s as an unknown state', async state => {
     const protoRuntime = { ...runtimes[0], state }
-    render(<CoreAdminContext dataProvider={provider({ getList: vi.fn().mockResolvedValue({ data: [protoRuntime], total: 1 }) })}><BrowserList /></CoreAdminContext>)
+    renderList(provider({ getList: vi.fn().mockResolvedValue({ data: [protoRuntime], total: 1 }) }))
 
     expect(await screen.findAllByText('未知状态')).toHaveLength(2)
     expect(screen.getAllByText(state)).toHaveLength(2)
@@ -71,7 +84,7 @@ describe('BrowserList', () => {
 
   it('disables invalid lifecycle actions and sends explicit domain actions', async () => {
     const dataProvider = provider()
-    render(<CoreAdminContext dataProvider={dataProvider}><BrowserList /></CoreAdminContext>)
+    renderList(dataProvider)
 
     await screen.findAllByText('店铺一号')
     expect(screen.getAllByLabelText('启动 店铺一号')[0].disabled).toBe(true)
@@ -92,8 +105,8 @@ describe('BrowserList', () => {
       { ...runtimes[1], id: 'unhealthy', alias: 'unhealthy', name: '出口异常环境', account_id: 'social-a', network_exit_id: 'exit-1', network_exit_health: 'unhealthy', schedule_status: 'blocked', schedule_block_reason: 'network_exit_unhealthy' },
       { ...runtimes[1], id: 'cleanup', alias: 'cleanup', name: '清理中环境', schedule_status: 'blocked', schedule_block_reason: 'runtime_stop_pending' },
     ]
-    const dataProvider = provider({ getList: vi.fn(resource => Promise.resolve({ data: resource === 'browsers' ? environments : [], total: resource === 'browsers' ? environments.length : 0 })) })
-    render(<CoreAdminContext dataProvider={dataProvider}><BrowserList /></CoreAdminContext>)
+    const dataProvider = provider({ getList: vi.fn(({ resource }) => Promise.resolve({ data: resource === 'browsers' ? environments : [], total: resource === 'browsers' ? environments.length : 0 })) })
+    renderList(dataProvider)
 
     fireEvent.click((await screen.findAllByLabelText('启动 就绪环境'))[0])
     fireEvent.click(screen.getAllByLabelText('启动 已停止环境')[0])
@@ -109,10 +122,10 @@ describe('BrowserList', () => {
   it('keeps the backend 409 fallback for stale readiness', async () => {
     const stale = { ...runtimes[1], account_id: 'social-a', network_exit_id: 'exit-1', network_exit_health: 'healthy', schedule_status: 'ready' }
     const dataProvider = provider({
-      getList: vi.fn(resource => Promise.resolve({ data: resource === 'browsers' ? [stale] : [], total: resource === 'browsers' ? 1 : 0 })),
-      browserAction: vi.fn().mockRejectedValue(new HttpError('readiness changed', 409)),
+      getList: vi.fn(({ resource }) => Promise.resolve({ data: resource === 'browsers' ? [stale] : [], total: resource === 'browsers' ? 1 : 0 })),
+      browserAction: vi.fn().mockRejectedValue(httpError('readiness changed', 409)),
     })
-    render(<CoreAdminContext dataProvider={dataProvider}><BrowserList /></CoreAdminContext>)
+    renderList(dataProvider)
 
     fireEvent.click((await screen.findAllByLabelText('启动 店铺二号'))[0])
 
@@ -121,16 +134,16 @@ describe('BrowserList', () => {
 
   it('creates an env with an account and healthy network exit without legacy proxy fields', async () => {
     const dataProvider = provider()
-    render(<CoreAdminContext dataProvider={dataProvider}><BrowserList /></CoreAdminContext>)
-    await screen.findAllByText('店铺一号')
+    renderCreate(dataProvider)
+    await screen.findByRole('button', { name: '创建环境' })
 
     fireEvent.change(screen.getByRole('textbox', { name: /环境名称/ }), { target: { value: '店铺三号' } })
     fireEvent.change(screen.getByRole('textbox', { name: /别名/ }), { target: { value: 'shop-03' } })
-    fireEvent.mouseDown(screen.getByRole('combobox', { name: '网络出口' }))
+    fireEvent.click(screen.getByRole('combobox', { name: '网络出口' }))
     fireEvent.click(await screen.findByRole('option', { name: /exit-1/ }))
     fireEvent.click(screen.getByRole('button', { name: '创建环境' }))
 
-    await waitFor(() => expect(dataProvider.create).toHaveBeenCalledWith('browsers', { data: {
+    await waitFor(() => expect(dataProvider.create).toHaveBeenCalledWith({ resource: 'browsers', variables: {
       alias: 'shop-03',
       name: '店铺三号',
       gateway: 'gw-1',
@@ -144,18 +157,18 @@ describe('BrowserList', () => {
   })
 
   it('creates an env with the current machine exit when network exit is empty', async () => {
-    const dataProvider = provider({ getList: vi.fn(resource => {
+    const dataProvider = provider({ getList: vi.fn(({ resource }) => {
       if (resource === 'network-exits') return Promise.resolve({ data: [], total: 0 })
-      return provider().getList(resource)
+      return provider().getList({ resource })
     }) })
-    render(<CoreAdminContext dataProvider={dataProvider}><BrowserList /></CoreAdminContext>)
-    await screen.findAllByText('店铺一号')
+    renderCreate(dataProvider)
+    await screen.findByRole('button', { name: '创建环境' })
 
     fireEvent.change(screen.getByRole('textbox', { name: /环境名称/ }), { target: { value: '直连环境' } })
     fireEvent.change(screen.getByRole('textbox', { name: /别名/ }), { target: { value: 'direct-env' } })
     fireEvent.click(screen.getByRole('button', { name: '创建环境' }))
 
-    await waitFor(() => expect(dataProvider.create).toHaveBeenCalledWith('browsers', { data: expect.objectContaining({
+    await waitFor(() => expect(dataProvider.create).toHaveBeenCalledWith({ resource: 'browsers', variables: expect.objectContaining({
       alias: 'direct-env',
       network_exit_id: '',
     }) }))
@@ -163,9 +176,9 @@ describe('BrowserList', () => {
   })
 
   it('keeps binding input after a 409 conflict', async () => {
-    const dataProvider = provider({ create: vi.fn().mockRejectedValue(new HttpError('conflict', 409)) })
-    render(<CoreAdminContext dataProvider={dataProvider}><BrowserList /></CoreAdminContext>)
-    await screen.findAllByText('店铺一号')
+    const dataProvider = provider({ create: vi.fn().mockRejectedValue(httpError('conflict', 409)) })
+    renderCreate(dataProvider)
+    await screen.findByRole('button', { name: '创建环境' })
 
     fireEvent.change(screen.getByRole('textbox', { name: /环境名称/ }), { target: { value: '冲突环境' } })
     fireEvent.change(screen.getByRole('textbox', { name: /别名/ }), { target: { value: 'conflict-env' } })
@@ -177,12 +190,12 @@ describe('BrowserList', () => {
 
   it('upgrades an env through the version dialog', async () => {
     const dataProvider = provider()
-    render(<CoreAdminContext dataProvider={dataProvider}><BrowserList /></CoreAdminContext>)
+    renderList(dataProvider)
     await screen.findAllByText('店铺一号')
 
     fireEvent.click(screen.getAllByLabelText('升级 店铺一号')[0])
     const dialog = await screen.findByRole('dialog')
-    fireEvent.mouseDown(within(dialog).getByRole('combobox', { name: /目标镜像版本/ }))
+    fireEvent.click(within(dialog).getByRole('combobox', { name: /目标镜像版本/ }))
     fireEvent.click(await within(document.body).findByRole('option', { name: '144.0.0.1' }))
     fireEvent.click(within(dialog).getByRole('button', { name: '确认升级' }))
 
@@ -191,7 +204,7 @@ describe('BrowserList', () => {
 
   it('shows action errors and keeps a retry control', async () => {
     const dataProvider = provider({ browserAction: vi.fn().mockRejectedValue(new Error('停止失败')) })
-    render(<CoreAdminContext dataProvider={dataProvider}><BrowserList /></CoreAdminContext>)
+    renderList(dataProvider)
     await screen.findAllByText('店铺一号')
 
     fireEvent.click(screen.getAllByLabelText('停止 店铺一号')[0])
diff --git a/web/src/DraftDetail.jsx b/web/src/DraftDetail.jsx
deleted file mode 100644
index ac57c72..0000000
--- a/web/src/DraftDetail.jsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { useDataProvider, useGetList, useGetOne } from 'ra-core'
-import { Link as RouterLink, useParams } from 'react-router-dom'
-import {
-  Alert,
-  Box,
-  Button,
-  Checkbox,
-  CircularProgress,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  FormControlLabel,
-  Paper,
-  Stack,
-  Typography,
-} from '@mui/material'
-import CheckCircleOutlined from '@mui/icons-material/CheckCircleOutlined'
-import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined'
-import ReportProblemOutlined from '@mui/icons-material/ReportProblemOutlined'
-import { accountReadiness } from './AccountList'
-
-const wrapAnywhere = { overflowWrap: 'anywhere', minWidth: 0 }
-
-const taskLabels = {
-  queued: '已排队',
-  executing: '执行中',
-  succeeded: '已成功',
-  failed: '失败',
-  needs_confirmation: '需要重新确认',
-  policy_hold: '策略暂停',
-  cancelled: '已取消',
-}
-
-function requestMessage(error) {
-  const reason = error?.body?.reason_code
-  if (error?.status === 409) return `版本或账号状态冲突（409）：${reason || error.message}`
-  if (error?.status === 503) return `资源未就绪（503）：${reason || error.message}`
-  return error?.message || '操作失败'
-}
-
-export function DraftDetail() {
-  const { id } = useParams()
-  const dataProvider = useDataProvider()
-  const [checked, setChecked] = useState(false)
-  const [dialogOpen, setDialogOpen] = useState(false)
-  const [busy, setBusy] = useState(false)
-  const [message, setMessage] = useState(null)
-  const confirmTrigger = useRef(null)
-  const { data: draft, error, isPending, refetch } = useGetOne('drafts', { id }, { retry: false })
-  const { data: browsers = [], error: browsersError, refetch: refetchBrowsers } = useGetList('browsers', undefined, { retry: false })
-
-  useEffect(() => { document.title = 'CreatorHub · 草稿核对' }, [])
-
-  if (isPending) return <Box sx={{ display: 'grid', placeItems: 'center', minHeight: 300 }}><CircularProgress aria-label="正在加载草稿" /></Box>
-  if (error || !draft) return <Alert severity="error">{error?.message || '草稿不存在'}</Alert>
-
-  const versions = draft.versions || []
-  const confirmations = draft.confirmations || []
-  const tasks = draft.tasks || []
-  const latestVersion = versions[0]?.version || draft.version
-  const snapshotCurrent = draft.version === latestVersion
-  const currentConfirmation = confirmations.find(confirmation =>
-    confirmation.account_version === draft.account.version && confirmation.draft_version === draft.version)
-  const binding = browsersError ? undefined : browsers.find(browser => browser.account_id === draft.account_id)
-  const readiness = accountReadiness(draft.account, binding, Boolean(browsersError))
-  const canConfirm = snapshotCurrent && Boolean(binding) && !browsersError
-  const canEnqueue = Boolean(currentConfirmation) && snapshotCurrent && readiness.ready
-
-  function openDialog() {
-    confirmTrigger.current?.blur()
-    setDialogOpen(true)
-  }
-
-  function closeDialog() {
-    setDialogOpen(false)
-  }
-
-  async function confirm() {
-    setBusy(true); setMessage(null)
-    try {
-      await dataProvider.confirmDraft(draft.id, draft.account.version, draft.version)
-      await refetch()
-      closeDialog()
-      setMessage({ severity: 'success', text: '确认快照已保存，可回溯账号、草稿与当前固定资源版本。' })
-    } catch (reason) {
-      closeDialog()
-      setMessage({ severity: 'error', text: requestMessage(reason) })
-      await Promise.all([refetch(), refetchBrowsers()])
-    } finally { setBusy(false) }
-  }
-
-  async function enqueue() {
-    if (!currentConfirmation) return
-    setBusy(true); setMessage(null)
-    try {
-      const task = await dataProvider.enqueueConfirmation(currentConfirmation.id)
-      await refetch()
-      setMessage({ severity: 'success', text: `任务已排队：${task.id}。重复提交会返回同一任务。` })
-    } catch (reason) {
-      setMessage({ severity: 'error', text: requestMessage(reason) })
-      await Promise.all([refetch(), refetchBrowsers()])
-    } finally { setBusy(false) }
-  }
-
-  return (
-    <>
-      <Box component="header" sx={{ mb: 4, minWidth: 0 }}>
-        <Button component={RouterLink} to={`/accounts/${draft.account_id}`} sx={{ mb: 1 }}>← 返回账号详情</Button>
-        <Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}><DescriptionOutlined color="primary" fontSize="large" /><Typography variant="h1">草稿核对</Typography></Stack>
-        <Typography color="text.secondary" sx={{ ...wrapAnywhere, mt: 1 }}>{draft.account.platform_account_key} · 草稿版本 {draft.version}</Typography>
-      </Box>
-
-      {message ? <Alert severity={message.severity} aria-live="polite" sx={{ mb: 2.5 }}>{message.text}</Alert> : null}
-      {browsersError ? <Alert severity="error" action={<Button color="inherit" size="small" onClick={() => refetchBrowsers()}>重试环境状态</Button>} sx={{ mb: 2.5 }}>环境不可用：当前运行环境与网络出口状态未知，不能确认或排队。</Alert> : null}
-      {snapshotCurrent ? null : <Alert severity="warning" action={<Button component={RouterLink} to={`/drafts/${versions[0]?.id}`}>打开最新版本</Button>} sx={{ mb: 2.5 }}>当前只读快照已不是最新草稿版本，请刷新到版本 {latestVersion} 后重新核对。</Alert>}
-
-      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: 'minmax(0, 1fr)', lg: 'minmax(0, 1.5fr) minmax(0, 1fr)' }, gap: 2.5 }}>
-        <Paper component="section" variant="outlined" sx={{ p: { xs: 2.5, md: 3 }, minWidth: 0 }}>
-          <Typography variant="h6">只读内容快照</Typography>
-          <Typography component="p" sx={{ ...wrapAnywhere, whiteSpace: 'pre-wrap', mt: 2, mb: 0 }}>{draft.content}</Typography>
-        </Paper>
-        <Stack spacing={2.5} sx={{ minWidth: 0 }}>
-          <Paper component="section" variant="outlined" sx={{ p: 3, minWidth: 0 }}>
-            <Typography variant="h6">版本与当前资源</Typography>
-            <Stack spacing={1.25} sx={{ mt: 2, minWidth: 0 }}>
-              <Typography>账号版本：{draft.account.version}</Typography>
-              <Typography>草稿版本：{draft.version}</Typography>
-              <Typography sx={wrapAnywhere}>运行环境：{browsersError ? '状态未知' : (binding?.name || '未绑定')}</Typography>
-              <Typography sx={wrapAnywhere}>网络出口：{browsersError ? '状态未知' : (binding?.network_exit_id || '当前机器直连')}</Typography>
-              <Stack direction="row" spacing={1} sx={{ alignItems: 'center', color: readiness.ready ? 'success.main' : 'warning.main' }}>{readiness.ready ? <CheckCircleOutlined /> : <ReportProblemOutlined />}<Typography fontWeight={650}>{readiness.label}</Typography></Stack>
-            </Stack>
-          </Paper>
-          <Paper component="section" variant="outlined" sx={{ p: 3, minWidth: 0 }}>
-            <Typography variant="h6">版本链</Typography>
-            <Stack spacing={1} sx={{ mt: 1.5 }}>{versions.map(version => version.id === draft.id
-              ? <Typography key={version.id} fontWeight={700}>版本 {version.version}（当前快照）</Typography>
-              : <Button key={version.id} component={RouterLink} to={`/drafts/${version.id}`} variant="text" sx={{ justifyContent: 'flex-start' }}>查看版本 {version.version}</Button>)}</Stack>
-          </Paper>
-        </Stack>
-      </Box>
-
-      <Paper component="section" variant="outlined" sx={{ p: { xs: 2.5, md: 3 }, mt: 2.5, minWidth: 0 }}>
-        <Typography variant="h6">显式核对与入队</Typography>
-        <FormControlLabel sx={{ mt: 1.5, alignItems: 'flex-start' }} control={<Checkbox checked={checked} onChange={event => setChecked(event.target.checked)} />} label="我已核对当前账号、草稿内容、运行环境和网络出口" />
-        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1.5} sx={{ mt: 2 }}>
-          <Button ref={confirmTrigger} variant="outlined" disabled={!checked || !canConfirm || busy} onClick={openDialog}>确认当前快照</Button>
-          <Button variant="contained" disabled={!canEnqueue || busy} onClick={enqueue}>{busy ? '处理中…' : '加入队列'}</Button>
-        </Stack>
-        {currentConfirmation ? null : <Typography color="text.secondary" sx={{ mt: 1.5 }}>保存有效确认后才可加入队列。</Typography>}
-        {currentConfirmation ? <Paper variant="outlined" sx={{ p: 2, mt: 2.5, minWidth: 0 }}><Typography fontWeight={700}>确认快照 v{currentConfirmation.version}</Typography><Typography variant="body2">账号版本 {currentConfirmation.account_version} · 草稿版本 {currentConfirmation.draft_version}</Typography><Typography variant="body2" sx={wrapAnywhere}>环境：{currentConfirmation.browser_env_alias || '未记录'} · 出口：{currentConfirmation.network_exit_id || '未记录'} · 绑定版本：{currentConfirmation.binding_version || '未记录'}</Typography></Paper> : null}
-      </Paper>
-
-      <Paper component="section" variant="outlined" sx={{ p: { xs: 2.5, md: 3 }, mt: 2.5, minWidth: 0 }}>
-        <Typography variant="h6">关联任务</Typography>
-        {tasks.length === 0 ? <Typography color="text.secondary" sx={{ mt: 1.5 }}>尚未入队。</Typography> : <Stack spacing={1.25} sx={{ mt: 1.5 }}>{tasks.map(task => <Paper key={task.id} variant="outlined" sx={{ p: 2, minWidth: 0 }}><Typography fontWeight={700} sx={wrapAnywhere}>{task.id}</Typography><Typography variant="body2">{taskLabels[task.state] || `未知状态：${task.state}`}</Typography></Paper>)}</Stack>}
-      </Paper>
-
-      <Dialog open={dialogOpen} disableRestoreFocus onClose={() => busy ? undefined : closeDialog()} aria-labelledby="confirm-draft-title" slotProps={{ transition: { onExited: () => confirmTrigger.current?.focus() } }}>
-        <DialogTitle id="confirm-draft-title">确认草稿版本</DialogTitle>
-        <DialogContent><DialogContentText>将保存账号版本 {draft.account.version}、草稿版本 {draft.version}、运行环境 {binding?.alias} 与网络出口 {binding?.network_exit_id || '当前机器直连'} 的只读确认快照。版本变化后必须重新确认。</DialogContentText></DialogContent>
-        <DialogActions><Button autoFocus disabled={busy} onClick={closeDialog}>返回核对</Button><Button variant="contained" disabled={busy} onClick={confirm}>{busy ? '确认中…' : '保存确认'}</Button></DialogActions>
-      </Dialog>
-    </>
-  )
-}
diff --git a/web/src/DraftPage.jsx b/web/src/DraftPage.jsx
new file mode 100644
index 0000000..c7dbfab
--- /dev/null
+++ b/web/src/DraftPage.jsx
@@ -0,0 +1,164 @@
+import { useState } from 'react'
+import { useNavigate, useParams } from 'react-router'
+import { useDataProvider, useList, useOne } from '@refinedev/core'
+import {
+  Alert, Button, Card, CardContent, Checkbox, ConfirmDialog, DetailList, Field, Input, Modal,
+  PageHeader, PageState, StatusPill, conflictMessage,
+} from './lib/ui.jsx'
+import { useTitle } from './lib/hooks.js'
+
+export function DraftPage() {
+  const { id } = useParams()
+  const navigate = useNavigate()
+  const dataProvider = useDataProvider()('default')
+  const [reviewed, setReviewed] = useState(false)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [notice, setNotice] = useState(null)
+  const { result, error, isPending, query } = useOne({ resource: 'drafts', id, queryOptions: { retry: false } })
+  const draft = result
+  const { result: bindingResult, query: browsersQuery } = useList({ resource: 'browsers', queryOptions: { retry: false } })
+  const browsers = bindingResult.data ?? []
+  const browsersError = browsersQuery.error
+  const refetchBrowsers = browsersQuery.refetch
+  useTitle('CreatorHub · 草稿核对')
+
+  if (isPending) return <PageState pending />
+  if (error || !draft) return <Alert variant="destructive">{error?.message || '草稿不存在'}</Alert>
+
+  const versions = draft.versions || []
+  const confirmations = draft.confirmations || []
+  const tasks = draft.tasks || []
+  const latestVersion = versions[0]?.version || draft.version
+  const isLatest = draft.version === latestVersion
+  const confirmation = confirmations.find(item => item.account_version === draft.account.version && item.draft_version === draft.version)
+  const binding = browsersError ? undefined : browsers.find(item => item.account_id === draft.account_id)
+  const readiness = draftReadiness(draft, binding, !!browsersError)
+  const canConfirm = isLatest && !!binding && !browsersError
+  const canEnqueue = !!confirmation && isLatest && readiness.ready
+
+  async function confirmSnapshot() {
+    setBusy(true)
+    setNotice(null)
+    try {
+      await dataProvider.confirmDraft(draft.id, draft.account.version, draft.version)
+      await query.refetch()
+      setConfirmOpen(false)
+      setNotice({ variant: 'success', text: '确认快照已保存，可回溯账号、草稿与当前固定资源版本。' })
+    } catch (reason) {
+      setConfirmOpen(false)
+      setNotice({ variant: 'destructive', text: conflictMessage(reason) })
+      await Promise.all([query.refetch(), refetchBrowsers()])
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function enqueue() {
+    if (!confirmation) return
+    setBusy(true)
+    setNotice(null)
+    try {
+      const task = await dataProvider.enqueueConfirmation(confirmation.id)
+      await query.refetch()
+      setNotice({ variant: 'success', text: `任务已排队：${task.id}。重复提交会返回同一任务。` })
+    } catch (reason) {
+      setNotice({ variant: 'destructive', text: conflictMessage(reason) })
+      await Promise.all([query.refetch(), refetchBrowsers()])
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader icon="ri-file-text-line" title="草稿核对" description={<span className="anywhere">{draft.account.platform_account_key} · 草稿版本 {draft.version}</span>}>
+        <Button icon="ri-arrow-left-line" onClick={() => navigate(`/accounts/${draft.account_id}`)}>返回账号详情</Button>
+      </PageHeader>
+      {notice ? <Alert variant={notice.variant} className="mb-4">{notice.text}</Alert> : null}
+      {browsersError ? <Alert variant="destructive" className="mb-4">环境不可用：当前运行环境与网络出口状态未知，不能确认或排队。</Alert> : null}
+      {!isLatest ? (
+        <Alert variant="warning" className="mb-6">
+          当前只读快照已不是最新草稿版本，请刷新到版本 {latestVersion} 后重新核对。
+          <Button size="sm" onClick={() => navigate(`/drafts/${versions[0]?.id}`)}>打开最新版本</Button>
+        </Alert>
+      ) : null}
+      <div className="grid gap-4 lg:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)]">
+        <Card><CardContent>
+          <h2 className="text-base font-semibold">只读内容快照</h2>
+          <p className="anywhere mt-4 whitespace-pre-wrap text-sm">{draft.content}</p>
+        </CardContent></Card>
+        <div className="space-y-4">
+          <Card><CardContent className="space-y-4">
+            <h2 className="text-base font-semibold">版本与当前资源</h2>
+            <DetailList rows={[
+              ['账号版本', draft.account.version],
+              ['草稿版本', draft.version],
+              ['运行环境', browsersError ? '状态未知' : binding?.name || '未绑定'],
+              ['网络出口', browsersError ? '状态未知' : binding?.network_exit_id || '当前机器直连'],
+            ]} />
+            <StatusPill tone={readiness.ready ? 'success' : 'warning'} label={readiness.label} />
+          </CardContent></Card>
+          <Card><CardContent>
+            <h2 className="text-base font-semibold">版本链</h2>
+            <div className="mt-3 space-y-1">
+              {versions.map(item => item.id === draft.id ? (
+                <p key={item.id} className="py-1 font-semibold">版本 {item.version}（当前快照）</p>
+              ) : (
+                <button key={item.id} type="button" onClick={() => navigate(`/drafts/${item.id}`)} className="block py-1 text-left text-sm text-primary hover:underline">查看版本 {item.version}</button>
+              ))}
+            </div>
+          </CardContent></Card>
+        </div>
+      </div>
+      <Card className="mt-4"><CardContent className="space-y-4">
+        <h2 className="text-base font-semibold">显式核对与入队</h2>
+        <Checkbox id="draft-reviewed" checked={reviewed} onCheckedChange={setReviewed}>我已核对当前账号、草稿内容、运行环境和网络出口</Checkbox>
+        <div className="flex flex-wrap gap-3">
+          <Button variant="outline" disabled={!reviewed || !canConfirm || busy} onClick={() => setConfirmOpen(true)}>确认当前快照</Button>
+          <Button variant="primary" disabled={!canEnqueue || busy} busy={busy} onClick={enqueue}>加入队列</Button>
+        </div>
+        {confirmation ? null : <p className="text-sm text-muted">保存有效确认后才可加入队列。</p>}
+        {confirmation ? (
+          <div className="rounded-md border border-hairline p-3">
+            <p className="font-semibold">确认快照 v{confirmation.version}</p>
+            <p className="text-sm">账号版本 {confirmation.account_version} · 草稿版本 {confirmation.draft_version}</p>
+            <p className="anywhere text-sm">环境：{confirmation.browser_env_alias || '未记录'} · 出口：{confirmation.network_exit_id || '未记录'} · 绑定版本：{confirmation.binding_version || '未记录'}</p>
+          </div>
+        ) : null}
+      </CardContent></Card>
+      <Card className="mt-4"><CardContent>
+        <h2 className="text-base font-semibold">关联任务</h2>
+        {tasks.length === 0 ? <p className="mt-2 text-sm text-muted">尚未入队。</p> : (
+          <div className="mt-3 space-y-2">
+            {tasks.map(task => (
+              <div key={task.id} className="rounded-md border border-hairline p-3">
+                <p className="anywhere font-semibold">{task.id}</p>
+                <p className="text-sm">任务状态：{task.state}</p>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent></Card>
+      <Modal open={confirmOpen} onClose={busy ? undefined : () => setConfirmOpen(false)} title="确认草稿版本" size="sm" labelledBy="confirm-draft-title"
+        footer={<>
+          <Button onClick={() => setConfirmOpen(false)} disabled={busy}>返回核对</Button>
+          <Button variant="primary" busy={busy} busyText="确认中…" onClick={confirmSnapshot}>保存确认</Button>
+        </>}>
+        <p className="text-sm">
+          将保存账号版本 {draft.account.version}、草稿版本 {draft.version}、运行环境 {binding?.alias} 与网络出口 {binding?.network_exit_id || '当前机器直连'} 的只读确认快照。版本变化后必须重新确认。
+        </p>
+      </Modal>
+    </div>
+  )
+}
+
+// 与账号 readiness 同构的草稿侧判定：只依赖绑定健康与调度状态。
+function draftReadiness(draft, binding, bindingsError = false) {
+  if (draft.account.authorization_status !== 'authorized') return { label: '授权已撤销', ready: false }
+  if (bindingsError) return { label: '环境状态未知', ready: false }
+  if (!binding) return { label: '未绑定运行环境', ready: false }
+  if (binding.network_exit_id && binding.network_exit_health !== 'healthy') return { label: '固定出口不健康', ready: false }
+  const schedule = binding.schedule_block_reason || ''
+  return { label: schedule ? `不可调度：${schedule}` : '可调度', ready: !schedule }
+}
diff --git a/web/src/DraftDetail.test.jsx b/web/src/DraftPage.test.jsx
similarity index 76%
rename from web/src/DraftDetail.test.jsx
rename to web/src/DraftPage.test.jsx
index 04e09db..59f0f58 100644
--- a/web/src/DraftDetail.test.jsx
+++ b/web/src/DraftPage.test.jsx
@@ -1,11 +1,14 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { CoreAdminContext } from 'ra-core'
-import { MemoryRouter, Route, Routes } from 'react-router-dom'
-import { DraftDetail } from './DraftDetail'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Refine } from '@refinedev/core'
+import { MemoryRouter, Route, Routes } from 'react-router'
+import { DraftPage } from './DraftPage'
 
 afterEach(() => { cleanup(); vi.restoreAllMocks() })
 
+const httpError = (message, status, body) => Object.assign(new Error(message), { status, body })
+
 const account = { id: 'account-a', platform: 'mock', platform_account_key: 'shop-a', authorization_status: 'authorized', runtime_status: 'active', version: 2 }
 const draft = {
   id: 'draft-a', account_id: 'account-a', version: 1, content: 'checked content', account,
@@ -17,7 +20,7 @@ const binding = { id: 'env-a', alias: 'env-a', name: '店铺环境', account_id:
 function provider(record = draft, overrides = {}) {
   return {
     getOne: vi.fn().mockResolvedValue({ data: record }),
-    getList: vi.fn().mockResolvedValue({ data: [binding], total: 1 }),
+    getList: vi.fn(({ resource }) => Promise.resolve(resource === 'browsers' ? { data: [binding], total: 1 } : { data: [], total: 0 })),
     confirmDraft: vi.fn().mockResolvedValue({ id: 'confirmation-a' }),
     enqueueConfirmation: vi.fn().mockResolvedValue({ id: 'task-a', state: 'queued' }),
     getMany: vi.fn(), getManyReference: vi.fn(), create: vi.fn(), update: vi.fn(), updateMany: vi.fn(), delete: vi.fn(), deleteMany: vi.fn(),
@@ -25,12 +28,16 @@ function provider(record = draft, overrides = {}) {
   }
 }
 
-function renderDraft(dataProvider) {
-  return render(<MemoryRouter initialEntries={['/drafts/draft-a']}><CoreAdminContext dataProvider={dataProvider}><Routes><Route path="/drafts/:id" element={<DraftDetail />} /></Routes></CoreAdminContext></MemoryRouter>)
-}
+const renderDraft = (dataProvider, id = 'draft-a') => render(
+  <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+    <Refine dataProvider={dataProvider}>
+      <MemoryRouter initialEntries={[`/drafts/${id}`]}><Routes><Route path="/drafts/:id" element={<DraftPage />} /></Routes></MemoryRouter>
+    </Refine>
+  </QueryClientProvider>,
+)
 
-describe('DraftDetail', () => {
-  it('opens a keyboard-accessible confirmation dialog with the reviewed versions', async () => {
+describe('DraftPage', () => {
+  it('opens a confirmation dialog with the reviewed versions', async () => {
     const dataProvider = provider()
     renderDraft(dataProvider)
 
@@ -39,11 +46,9 @@ describe('DraftDetail', () => {
 
     const dialog = screen.getByRole('dialog', { name: '确认草稿版本' })
     expect(dialog.textContent).toContain('账号版本 2、草稿版本 1')
-    await waitFor(() => expect(screen.getByRole('button', { name: '返回核对' })).toBe(document.activeElement))
     fireEvent.click(screen.getByRole('button', { name: '保存确认' }))
     await waitFor(() => expect(dataProvider.confirmDraft).toHaveBeenCalledWith('draft-a', 2, 1))
     await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
-    expect(screen.getByRole('button', { name: '确认当前快照' })).toBe(document.activeElement)
   })
 
   it('allows confirming a direct-machine environment', async () => {
@@ -52,7 +57,7 @@ describe('DraftDetail', () => {
     renderDraft(dataProvider)
 
     fireEvent.click(await screen.findByRole('checkbox', { name: /我已核对当前账号/ }))
-    expect(screen.getByText(/网络出口：当前机器直连/)).toBeTruthy()
+    expect((await screen.findAllByText(/当前机器直连/)).length).toBeGreaterThan(0)
     expect(screen.getByRole('button', { name: '确认当前快照' }).disabled).toBe(false)
   })
 
@@ -77,6 +82,6 @@ describe('DraftDetail', () => {
 
     expect(await screen.findByText(/当前只读快照已不是最新草稿版本/)).toBeTruthy()
     expect(screen.getByRole('button', { name: '确认当前快照' }).disabled).toBe(true)
-    expect(screen.getByRole('link', { name: '打开最新版本' }).getAttribute('href')).toBe('/drafts/draft-b')
+    expect(screen.getByRole('button', { name: '打开最新版本' }).getAttribute('class')).toBeDefined()
   })
 })
diff --git a/web/src/GatewayList.jsx b/web/src/GatewayList.jsx
deleted file mode 100644
index 878aa59..0000000
--- a/web/src/GatewayList.jsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useDataProvider, useGetList } from 'ra-core'
-import {
-  Alert,
-  Box,
-  Button,
-  CircularProgress,
-  IconButton,
-  InputAdornment,
-  Paper,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-} from '@mui/material'
-import ContentCopyOutlined from '@mui/icons-material/ContentCopyOutlined'
-import DeleteOutlined from '@mui/icons-material/DeleteOutlined'
-import VisibilityOutlined from '@mui/icons-material/VisibilityOutlined'
-import VisibilityOffOutlined from '@mui/icons-material/VisibilityOffOutlined'
-
-const namePattern = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/
-const tokenPattern = /^[A-Za-z0-9][A-Za-z0-9._-]{15,127}$/
-
-function CopyButton({ value }) {
-  return <IconButton aria-label={`复制 ${value}`} size="small" onClick={() => navigator.clipboard?.writeText(value)}><ContentCopyOutlined sx={{ fontSize: 16 }} /></IconButton>
-}
-
-function TokenCell({ token, name }) {
-  const [revealed, setRevealed] = useState(false)
-  return (
-    <Stack direction="row" spacing={0.5} alignItems="center">
-      <Typography component="code" variant="body2" sx={{ overflowWrap: 'anywhere' }}>{revealed ? token : '•'.repeat(12)}</Typography>
-      <IconButton aria-label={revealed ? `隐藏 ${name} 的令牌` : `显示 ${name} 的令牌`} size="small" onClick={() => setRevealed(value => !value)}>
-        {revealed ? <VisibilityOffOutlined sx={{ fontSize: 16 }} /> : <VisibilityOutlined sx={{ fontSize: 16 }} />}
-      </IconButton>
-      {revealed ? <CopyButton value={token} /> : null}
-    </Stack>
-  )
-}
-
-export function GatewayList() {
-  const dataProvider = useDataProvider()
-  const { data: gateways = [], error, isPending, refetch } = useGetList('gateways')
-  const [form, setForm] = useState({ name: '', endpoint: '', token: '' })
-  const [busy, setBusy] = useState('')
-  const [localError, setLocalError] = useState('')
-  const [created, setCreated] = useState(null)
-
-  useEffect(() => {
-    document.title = 'CreatorHub · 网关管理'
-  }, [])
-
-  const token = form.token.trim()
-  const createValid = namePattern.test(form.name) && /^https?:\/\/\S+$/.test(form.endpoint) && (token === '' || tokenPattern.test(token))
-
-  async function registerGateway(event) {
-    event.preventDefault()
-    if (!createValid) return
-    setBusy('create')
-    setLocalError('')
-    try {
-      const { data } = await dataProvider.create('gateways', { data: { name: form.name, endpoint: form.endpoint, token } })
-      setCreated(data)
-      setForm({ name: '', endpoint: '', token: '' })
-      await refetch()
-    } catch (reason) {
-      setLocalError(reason.message)
-    } finally {
-      setBusy('')
-    }
-  }
-
-  async function remove(gateway) {
-    if (!window.confirm(`删除网关 ${gateway.name}？仍被环境引用时删除会被拒绝。`)) return
-    setBusy(gateway.name)
-    setLocalError('')
-    try {
-      await dataProvider.delete('gateways', { id: gateway.name })
-      await refetch()
-    } catch (reason) {
-      setLocalError(reason.message)
-    } finally {
-      setBusy('')
-    }
-  }
-
-  const message = localError || error?.message
-  return (
-    <>
-      <Box component="header" sx={{ mb: 4 }}><Typography variant="h1">网关管理</Typography><Typography color="text.secondary" sx={{ mt: 1, fontSize: '1.05rem' }}>注册 Docker 网关；令牌须与网关进程的 GATEWAY_TOKEN 一致</Typography></Box>
-
-      {created ? (
-        <Alert severity="success" sx={{ mb: 3 }} action={<Button color="inherit" size="small" onClick={() => setCreated(null)}>知道了</Button>}>
-          网关 {created.name} 已注册。<Box component="span" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, ml: 1 }}>
-            令牌 <Typography component="code">{created.token}</Typography> <CopyButton value={created.token} />
-          </Box>
-        </Alert>
-      ) : null}
-
-      <Paper component="form" onSubmit={registerGateway} variant="outlined" sx={{ display: 'grid', gridTemplateColumns: { xs: 'minmax(0, 1fr)', md: 'minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 1.2fr) auto' }, gap: 3, alignItems: 'end', p: { xs: 2.5, md: 3 }, mb: 3.5 }}>
-        <Stack spacing={1}>
-          <Typography component="label" htmlFor="gateway-name" variant="body2" fontWeight={650}>名称 <Box component="span" aria-hidden="true" color="error.main">*</Box></Typography>
-          <TextField id="gateway-name" required slotProps={{ htmlInput: { 'aria-label': '网关名称', pattern: '[A-Za-z0-9][A-Za-z0-9._-]{0,63}' } }} value={form.name} onChange={event => setForm(current => ({ ...current, name: event.target.value }))} placeholder="如 gw-main" />
-        </Stack>
-        <Stack spacing={1}>
-          <Typography component="label" htmlFor="gateway-endpoint" variant="body2" fontWeight={650}>Endpoint <Box component="span" aria-hidden="true" color="error.main">*</Box></Typography>
-          <TextField id="gateway-endpoint" required slotProps={{ htmlInput: { 'aria-label': 'Endpoint' } }} value={form.endpoint} onChange={event => setForm(current => ({ ...current, endpoint: event.target.value }))} placeholder="http://docker-gateway:8081" />
-        </Stack>
-        <Stack spacing={1}>
-          <Typography component="label" htmlFor="gateway-token" variant="body2" fontWeight={650}>令牌（可选）</Typography>
-          <TextField id="gateway-token" slotProps={{ htmlInput: { 'aria-label': '网关令牌' } }} value={form.token} onChange={event => setForm(current => ({ ...current, token: event.target.value }))} placeholder="留空由平台生成" helperText="填写则须与网关 GATEWAY_TOKEN 一致" />
-        </Stack>
-        <Button type="submit" variant="contained" size="large" disabled={!createValid || busy === 'create'} sx={{ minHeight: 56 }}>{busy === 'create' ? '注册中…' : '注册网关'}</Button>
-      </Paper>
-
-      {message ? <Alert severity="error" sx={{ mb: 2.5 }}>{message}</Alert> : null}
-      {isPending ? <Box sx={{ display: 'grid', placeItems: 'center', minHeight: 220 }}><CircularProgress aria-label="正在加载网关" /></Box> : null}
-      {!isPending && gateways.length === 0 ? <Paper variant="outlined" sx={{ py: 7, textAlign: 'center', color: 'text.secondary' }}>暂无网关；注册后环境即可调度到该网关。</Paper> : null}
-      {!isPending && gateways.length > 0 ? (
-        <TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 1 }}>
-          <Table sx={{ tableLayout: 'fixed', '& th, & td': { py: 2 } }}>
-            <TableHead><TableRow><TableCell width="18%">名称</TableCell><TableCell width="34%">Endpoint</TableCell><TableCell width="34%">令牌</TableCell><TableCell width="14%" align="right">操作</TableCell></TableRow></TableHead>
-            <TableBody>
-              {gateways.map(gateway => (
-                <TableRow key={gateway.name} sx={{ '&:last-child td': { borderBottom: 0 } }}>
-                  <TableCell><Typography fontWeight={650}>{gateway.name}</Typography></TableCell>
-                  <TableCell><Typography component="code" variant="body2" sx={{ overflowWrap: 'anywhere' }}>{gateway.endpoint}</Typography></TableCell>
-                  <TableCell><TokenCell token={gateway.token} name={gateway.name} /></TableCell>
-                  <TableCell align="right">
-                    <IconButton aria-label={`删除 ${gateway.name}`} color="error" disabled={busy === gateway.name} onClick={() => remove(gateway)}><DeleteOutlined /></IconButton>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      ) : null}
-    </>
-  )
-}
diff --git a/web/src/GatewayList.test.jsx b/web/src/GatewayList.test.jsx
deleted file mode 100644
index 8a784b8..0000000
--- a/web/src/GatewayList.test.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { CoreAdminContext } from 'ra-core'
-import { GatewayList } from './GatewayList'
-
-afterEach(cleanup)
-
-const gateways = [{ id: 'gw-1', name: 'gw-1', endpoint: 'http://docker-gateway:8081', token: 'unit-test-gateway-token' }]
-
-function provider(overrides = {}) {
-  return {
-    getList: vi.fn(() => Promise.resolve({ data: gateways, total: gateways.length })),
-    create: vi.fn().mockResolvedValue({ data: { name: 'gw-2', endpoint: 'http://gw2:8081', token: 'generated-token-abcdef' } }),
-    delete: vi.fn().mockResolvedValue({ data: { id: 'gw-1' } }),
-    getOne: vi.fn(), getMany: vi.fn(), getManyReference: vi.fn(), update: vi.fn(), updateMany: vi.fn(), deleteMany: vi.fn(), browserAction: vi.fn(),
-    ...overrides,
-  }
-}
-
-describe('GatewayList', () => {
-  it('registers a gateway and reveals the generated token', async () => {
-    const dataProvider = provider()
-    render(<CoreAdminContext dataProvider={dataProvider}><GatewayList /></CoreAdminContext>)
-
-    await screen.findAllByText('gw-1')
-    fireEvent.change(screen.getByRole('textbox', { name: '网关名称' }), { target: { value: 'gw-2' } })
-    fireEvent.change(screen.getByRole('textbox', { name: 'Endpoint' }), { target: { value: 'http://gw2:8081' } })
-    fireEvent.click(screen.getByRole('button', { name: '注册网关' }))
-
-    await waitFor(() => expect(dataProvider.create).toHaveBeenCalledWith('gateways', { data: { name: 'gw-2', endpoint: 'http://gw2:8081', token: '' } }))
-    expect((await screen.findByRole('alert')).textContent).toContain('generated-token-abcdef')
-  })
-
-  it('rejects an invalid endpoint before submit', async () => {
-    const dataProvider = provider()
-    render(<CoreAdminContext dataProvider={dataProvider}><GatewayList /></CoreAdminContext>)
-
-    await screen.findAllByText('gw-1')
-    fireEvent.change(screen.getByRole('textbox', { name: '网关名称' }), { target: { value: 'gw-2' } })
-    fireEvent.change(screen.getByRole('textbox', { name: 'Endpoint' }), { target: { value: 'ftp://gw2:8081' } })
-    expect(screen.getByRole('button', { name: '注册网关' }).disabled).toBe(true)
-    expect(dataProvider.create).not.toHaveBeenCalled()
-  })
-
-  it('deletes a gateway after confirm', async () => {
-    const dataProvider = provider()
-    window.confirm = vi.fn(() => true)
-    render(<CoreAdminContext dataProvider={dataProvider}><GatewayList /></CoreAdminContext>)
-
-    fireEvent.click(await screen.findByLabelText('删除 gw-1'))
-
-    await waitFor(() => expect(dataProvider.delete).toHaveBeenCalledWith('gateways', { id: 'gw-1' }))
-  })
-})
diff --git a/web/src/GatewaysPage.jsx b/web/src/GatewaysPage.jsx
new file mode 100644
index 0000000..7c3a74e
--- /dev/null
+++ b/web/src/GatewaysPage.jsx
@@ -0,0 +1,146 @@
+import { useState } from 'react'
+import { useDataProvider, useList } from '@refinedev/core'
+import {
+  Alert, Button, ConfirmDialog, Copyable, Field, Input, Modal, PageHeader, PageState, Table,
+} from './lib/ui.jsx'
+import { useTitle } from './lib/hooks.js'
+
+const namePattern = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/
+const tokenPattern = /^[A-Za-z0-9][A-Za-z0-9._-]{15,127}$/
+
+function TokenCell({ token, name }) {
+  const [visible, setVisible] = useState(false)
+  return (
+    <div className="flex min-w-0 items-center gap-1">
+      <code className="anywhere font-mono text-[13px]">{visible ? token : '••••••••••••'}</code>
+      <button type="button" aria-label={visible ? `隐藏 ${name} 的令牌` : `显示 ${name} 的令牌`} onClick={() => setVisible(current => !current)}
+        className="rounded p-1 text-muted hover:text-primary"><i className={visible ? 'ri-eye-off-line' : 'ri-eye-line'} aria-hidden="true" /></button>
+      {visible ? (
+        <button type="button" aria-label={`复制 ${token}`} onClick={() => navigator.clipboard?.writeText(token)}
+          className="rounded p-1 text-muted hover:text-primary"><i className="ri-file-copy-line" aria-hidden="true" /></button>
+      ) : null}
+    </div>
+  )
+}
+
+function GatewayCreateModal({ open, onClose, onSubmit, busy, error }) {
+  const [form, setForm] = useState({ name: '', endpoint: '', token: '' })
+  const update = (key, value) => setForm(current => ({ ...current, [key]: value }))
+  const token = form.token.trim()
+  const valid = namePattern.test(form.name) && /^https?:\/\/\S+$/.test(form.endpoint) && (token === '' || tokenPattern.test(token))
+  const nameInvalid = form.name !== '' && !namePattern.test(form.name)
+  const endpointInvalid = form.endpoint !== '' && !/^https?:\/\/\S+$/.test(form.endpoint)
+  const tokenInvalid = token !== '' && !tokenPattern.test(token)
+
+  async function submit(event) {
+    event.preventDefault()
+    if (!valid) return
+    const created = await onSubmit({ name: form.name, endpoint: form.endpoint, token })
+    if (created) {
+      setForm({ name: '', endpoint: '', token: '' })
+      onClose()
+    }
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title="注册网关" labelledBy="gateway-create-title"
+      footer={<>
+        <Button onClick={onClose} disabled={busy}>取消</Button>
+        <Button variant="primary" type="submit" form="gateway-create-form" busy={busy} busyText="注册中…" disabled={!valid}>注册网关</Button>
+      </>}>
+      <form id="gateway-create-form" onSubmit={submit} noValidate>
+        {error ? <Alert variant="destructive" className="mb-4">{error.message}</Alert> : null}
+        <div className="space-y-4">
+          <Field id="gateway-name" label="名称" required error={nameInvalid ? '字母、数字与 . _ -，最长 64 字符' : undefined} helper="网关唯一标识，如 gw-main">
+            <Input id="gateway-name" required maxLength={64} value={form.name} onChange={event => update('name', event.target.value)} placeholder="如 gw-main" invalid={nameInvalid} />
+          </Field>
+          <Field id="gateway-endpoint" label="Endpoint" required error={endpointInvalid ? '须为 http(s) URL' : undefined} helper="网关进程的可访问地址">
+            <Input id="gateway-endpoint" required value={form.endpoint} onChange={event => update('endpoint', event.target.value)} placeholder="http://docker-gateway:8081" invalid={endpointInvalid} />
+          </Field>
+          <Field id="gateway-token" label="令牌（可选）" error={tokenInvalid ? '至少 16 个字符，字母、数字与 . _ -' : undefined} helper="填写则须与网关 GATEWAY_TOKEN 一致；留空由平台生成">
+            <Input id="gateway-token" maxLength={128} value={form.token} onChange={event => update('token', event.target.value)} placeholder="留空由平台生成" invalid={tokenInvalid} />
+          </Field>
+        </div>
+      </form>
+    </Modal>
+  )
+}
+
+export function GatewayList() {
+  const dataProvider = useDataProvider()('default')
+  const { result, query } = useList({ resource: 'gateways' })
+  const error = query.error
+  const isPending = query.isPending
+  const gateways = result.data ?? []
+  const [createOpen, setCreateOpen] = useState(false)
+  const [busy, setBusy] = useState('')
+  const [createError, setCreateError] = useState(null)
+  const [created, setCreated] = useState(null)
+  const [deleting, setDeleting] = useState(null)
+  useTitle('CreatorHub · 网关管理')
+
+  async function createGateway(data) {
+    setBusy('create')
+    setCreateError(null)
+    try {
+      const { data: record } = await dataProvider.create({ resource: 'gateways', variables: data })
+      setCreated(record)
+      await query.refetch()
+      return true
+    } catch (reason) {
+      setCreateError(reason)
+      return false
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function removeGateway() {
+    const gateway = deleting
+    setBusy(gateway.name)
+    try {
+      await dataProvider.deleteOne({ resource: 'gateways', id: gateway.name })
+      await query.refetch()
+      setDeleting(null)
+    } finally {
+      setBusy('')
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader icon="ri-git-branch-line" title="网关管理" description="注册 Docker 网关；令牌须与网关进程的 GATEWAY_TOKEN 一致">
+        <Button variant="primary" icon="ri-add-line" onClick={() => setCreateOpen(true)}>注册网关</Button>
+      </PageHeader>
+      {created ? (
+        <Alert variant="success" className="mb-4">
+          网关 {created.name} 已注册。
+          <span className="ml-1 inline-flex items-center gap-1">令牌 <code className="font-mono">{created.token}</code>
+            <button type="button" aria-label={`复制 ${created.token}`} onClick={() => navigator.clipboard?.writeText(created.token)}
+              className="rounded p-1 text-muted hover:text-primary"><i className="ri-file-copy-line" aria-hidden="true" /></button>
+          </span>
+          <Button size="sm" onClick={() => setCreated(null)}>知道了</Button>
+        </Alert>
+      ) : null}
+      {error ? <Alert variant="destructive" className="mb-4">{error.message}</Alert> : null}
+      <PageState pending={isPending} error={error} empty={gateways.length === 0} emptyText="暂无网关；注册后环境即可调度到该网关。">
+        <Table
+          columns={[
+            { header: '名称', width: '18%', render: gateway => <span className="font-semibold">{gateway.name}</span> },
+            { header: 'Endpoint', width: '34%', render: gateway => <code className="anywhere font-mono text-[13px]">{gateway.endpoint}</code> },
+            { header: '令牌', width: '34%', render: gateway => <TokenCell token={gateway.token} name={gateway.name} /> },
+            { header: '操作', width: '14%', align: 'right', render: gateway => (
+              <button type="button" aria-label={`删除 ${gateway.name}`} disabled={busy === gateway.name} onClick={() => setDeleting(gateway)}
+                className="rounded p-1.5 text-danger hover:bg-[#fdf1f0] disabled:opacity-50"><i className="ri-delete-bin-line" aria-hidden="true" /></button>
+            ) },
+          ]}
+          rows={gateways} rowKey={gateway => gateway.name}
+        />
+      </PageState>
+      <GatewayCreateModal open={createOpen} onClose={() => { setCreateOpen(false); setCreateError(null) }} onSubmit={createGateway} busy={busy === 'create'} error={createError} />
+      <ConfirmDialog open={deleting !== null} onClose={() => setDeleting(null)} onConfirm={removeGateway}
+        title="删除网关" confirmLabel="确认删除" busy={busy === deleting?.name}
+        body={`删除网关 ${deleting?.name}？仍被环境引用时删除会被拒绝。`} />
+    </div>
+  )
+}
diff --git a/web/src/GatewaysPage.test.jsx b/web/src/GatewaysPage.test.jsx
new file mode 100644
index 0000000..fafc2a9
--- /dev/null
+++ b/web/src/GatewaysPage.test.jsx
@@ -0,0 +1,68 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Refine } from '@refinedev/core'
+import { MemoryRouter } from 'react-router'
+import { GatewayList } from './GatewaysPage'
+
+afterEach(() => { cleanup(); vi.restoreAllMocks() })
+
+const gateways = [{ id: 'gw-1', name: 'gw-1', endpoint: 'http://docker-gateway:8081', token: 'unit-test-gateway-token' }]
+
+function provider(overrides = {}) {
+  return {
+    getList: vi.fn(() => Promise.resolve({ data: gateways, total: gateways.length })),
+    create: vi.fn().mockResolvedValue({ data: { name: 'gw-2', endpoint: 'http://gw2:8081', token: 'generated-token-abcdef' } }),
+    deleteOne: vi.fn().mockResolvedValue({ data: { id: 'gw-1' } }),
+    getOne: vi.fn(), getMany: vi.fn(), getManyReference: vi.fn(), update: vi.fn(), updateMany: vi.fn(), deleteMany: vi.fn(), browserAction: vi.fn(),
+    ...overrides,
+  }
+}
+
+const renderGateways = dataProvider => render(
+  <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+    <Refine dataProvider={dataProvider}>
+      <MemoryRouter><GatewayList /></MemoryRouter>
+    </Refine>
+  </QueryClientProvider>,
+)
+
+describe('GatewayList', () => {
+  it('registers a gateway and reveals the generated token', async () => {
+    const dataProvider = provider()
+    renderGateways(dataProvider)
+    await screen.findAllByText('gw-1')
+
+    fireEvent.click(screen.getByRole('button', { name: '注册网关' }))
+    const dialog = screen.getByRole('dialog')
+    fireEvent.change(within(dialog).getByRole('textbox', { name: '名称' }), { target: { value: 'gw-2' } })
+    fireEvent.change(within(dialog).getByRole('textbox', { name: 'Endpoint' }), { target: { value: 'http://gw2:8081' } })
+    fireEvent.click(within(dialog).getByRole('button', { name: '注册网关' }))
+
+    await waitFor(() => expect(dataProvider.create).toHaveBeenCalledWith({ resource: 'gateways', variables: { name: 'gw-2', endpoint: 'http://gw2:8081', token: '' } }))
+    expect((await screen.findByRole('alert')).textContent).toContain('generated-token-abcdef')
+  })
+
+  it('rejects an invalid endpoint before submit', async () => {
+    const dataProvider = provider()
+    renderGateways(dataProvider)
+    await screen.findAllByText('gw-1')
+
+    fireEvent.click(screen.getByRole('button', { name: '注册网关' }))
+    const dialog = screen.getByRole('dialog')
+    fireEvent.change(within(dialog).getByRole('textbox', { name: '名称' }), { target: { value: 'gw-2' } })
+    fireEvent.change(within(dialog).getByRole('textbox', { name: 'Endpoint' }), { target: { value: 'ftp://gw2:8081' } })
+    expect(within(dialog).getByRole('button', { name: '注册网关' }).disabled).toBe(true)
+    expect(dataProvider.create).not.toHaveBeenCalled()
+  })
+
+  it('deletes a gateway after confirm', async () => {
+    const dataProvider = provider()
+    renderGateways(dataProvider)
+
+    fireEvent.click(await screen.findByLabelText('删除 gw-1'))
+    fireEvent.click(await screen.findByRole('button', { name: '确认删除' }))
+
+    await waitFor(() => expect(dataProvider.deleteOne).toHaveBeenCalledWith({ resource: 'gateways', id: 'gw-1' }))
+  })
+})
diff --git a/web/src/Layout.jsx b/web/src/Layout.jsx
new file mode 100644
index 0000000..c2b7dee
--- /dev/null
+++ b/web/src/Layout.jsx
@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react'
+import { Link, Outlet, useLocation } from 'react-router'
+import { cn } from './lib/ui.jsx'
+
+const expandedWidth = 240
+const collapsedWidth = 76
+
+const menu = [
+  { section: '运营', items: [
+    { to: '/accounts', icon: 'ri-account-circle-line', label: '社媒账号' },
+    { to: '/tasks', icon: 'ri-task-line', label: '任务中心' },
+    { to: '/audit', icon: 'ri-history-line', label: '审计记录' },
+  ] },
+  { section: '资源', items: [
+    { to: '/browsers', icon: 'ri-hard-drive-3-line', label: '运行环境' },
+    { to: '/network-exits', icon: 'ri-earth-line', label: '网络出口' },
+    { to: '/browser-images', icon: 'ri-inbox-line', label: '镜像版本' },
+    { to: '/gateways', icon: 'ri-router-line', label: '网关管理' },
+  ] },
+]
+
+function MenuLink({ to, icon, label, collapsed, onNavigate }) {
+  const { pathname } = useLocation()
+  const active = pathname === to || pathname.startsWith(`${to}/`)
+  return (
+    <Link to={to} aria-label={label} onClick={onNavigate} title={collapsed ? label : undefined}
+      className={cn('flex h-10 items-center gap-3 rounded-md px-3 text-sm font-medium no-underline transition-colors', collapsed && 'justify-center',
+        active ? 'bg-primary text-white' : 'text-[#a9b7cc] hover:bg-sidebar-hover hover:text-white')}>
+      <i className={cn(icon, 'text-lg')} aria-hidden="true" />
+      {collapsed ? null : <span className="truncate">{label}</span>}
+    </Link>
+  )
+}
+
+function Sidebar({ collapsed, onNavigate }) {
+  return (
+    <nav aria-label="主导航" className="flex h-full flex-col overflow-y-auto px-3 pt-4 pb-16">
+      <Link to="/accounts" className="mb-4 flex h-11 items-center gap-3 px-2 no-underline" onClick={onNavigate} aria-label="CreatorHub 首页">
+        <i className="ri-stack-line text-2xl text-primary" aria-hidden="true" />
+        {collapsed ? null : <span className="text-lg font-bold text-white">CreatorHub</span>}
+      </Link>
+      {menu.map(({ section, items }) => (
+        <div key={section} className="mb-3">
+          {collapsed ? null : <p className="mb-1 px-3 text-[11px] font-semibold uppercase tracking-wider text-[#7f94b2]">{section}</p>}
+          <div className="space-y-1">
+            {items.map(item => <MenuLink key={item.to} {...item} collapsed={collapsed} onNavigate={onNavigate} />)}
+          </div>
+        </div>
+      ))}
+    </nav>
+  )
+}
+
+export function CreatorHubLayout({ children }) {
+  const [collapsed, setCollapsed] = useState(false)
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const { pathname } = useLocation()
+
+  useEffect(() => { setMobileOpen(false) }, [pathname])
+
+  const width = collapsed ? collapsedWidth : expandedWidth
+  const desktop = typeof window !== 'undefined' && window.matchMedia('(min-width: 768px)').matches
+  const menuLabel = desktop ? (collapsed ? '展开导航' : '收起导航') : '打开导航'
+
+  return (
+    <div className="flex min-h-screen bg-[#f7f8fa]">
+      <aside className="fixed inset-y-0 left-0 z-30 hidden bg-sidebar md:block" style={{ width }}>
+        <Sidebar collapsed={collapsed} />
+        <button type="button" onClick={() => setCollapsed(value => !value)} className="absolute bottom-6 right-4 flex size-8 items-center justify-center rounded-md border border-[#35506f] text-[#a9b7cc] hover:text-white" aria-label={collapsed ? '展开导航' : '收起导航'}>
+          <i className={collapsed ? 'ri-arrow-right-s-line' : 'ri-arrow-left-s-line'} aria-hidden="true" />
+        </button>
+      </aside>
+      {mobileOpen ? (
+        <div className="fixed inset-0 z-40 md:hidden">
+          <div className="absolute inset-0 bg-black/40" onClick={() => setMobileOpen(false)} />
+          <aside className="absolute inset-y-0 left-0 bg-sidebar" style={{ width: expandedWidth }}>
+            <Sidebar collapsed={false} onNavigate={() => setMobileOpen(false)} />
+          </aside>
+        </div>
+      ) : null}
+      <div className="flex min-w-0 flex-1 flex-col md:pl-[var(--sidebar)]" style={{ '--sidebar': `${width}px` }}>
+        <header className="sticky top-0 z-20 flex h-14 items-center border-b border-hairline bg-white px-4">
+          <button type="button" aria-label={menuLabel} onClick={() => (desktop ? setCollapsed(value => !value) : setMobileOpen(true))} className="rounded-md p-2 text-muted hover:bg-[#f5f7fa]">
+            <i className="ri-menu-line text-xl" aria-hidden="true" />
+          </button>
+        </header>
+        <main className="mx-auto w-full max-w-[1280px] min-w-0 flex-1 px-4 py-8 sm:px-6 lg:px-10">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}
diff --git a/web/src/LoginPage.jsx b/web/src/LoginPage.jsx
new file mode 100644
index 0000000..95e6c7f
--- /dev/null
+++ b/web/src/LoginPage.jsx
@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router'
+import { Alert, Button, Field, Input } from './lib/ui.jsx'
+
+// 开发阶段：本地保存 Basic 凭证，仅在请求层自动附带。开发代理（vite）不注入 Authorization。
+export function LoginPage() {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+  const navigate = useNavigate()
+
+  async function submit(event) {
+    event.preventDefault()
+    if (!username.trim() || !password) return
+    setBusy(true); setError('')
+    try {
+      const response = await fetch('/api/gateways', { headers: { Authorization: `Basic ${btoa(`${username}:${password}`)}` } })
+      if (response.status === 401) throw new Error('用户名或密码不正确')
+      if (!response.ok) throw new Error(`认证服务不可用（${response.status}）`)
+      localStorage.setItem('creatorhub.auth', `${username}:${password}`)
+      navigate('/accounts')
+    } catch (reason) {
+      setError(reason.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-[#f7f8fa] px-4">
+      <div className="w-full max-w-sm rounded-lg border border-hairline bg-white p-8 shadow-sm">
+        <div className="mb-6 flex items-center gap-3">
+          <i className="ri-stack-line text-3xl text-primary" aria-hidden="true" />
+          <h1 className="text-xl font-bold">CreatorHub</h1>
+        </div>
+        {error ? <Alert variant="destructive" className="mb-4">{error}</Alert> : null}
+        <form onSubmit={submit} className="space-y-4" noValidate>
+          <Field id="login-username" label="用户名" required>
+            <Input id="login-username" required autoComplete="username" value={username} onChange={event => setUsername(event.target.value)} />
+          </Field>
+          <Field id="login-password" label="密码" required>
+            <Input id="login-password" type="password" required autoComplete="current-password" value={password} onChange={event => setPassword(event.target.value)} />
+          </Field>
+          <Button variant="primary" type="submit" className="w-full" busy={busy} busyText="登录中…" disabled={!username.trim() || !password}>登录</Button>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/web/src/NetworkExitList.jsx b/web/src/NetworkExitList.jsx
deleted file mode 100644
index f0eb2d6..0000000
--- a/web/src/NetworkExitList.jsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import { useDataProvider, useGetList } from 'ra-core'
-import {
-  Alert,
-  Box,
-  Button,
-  CircularProgress,
-  MenuItem,
-  Paper,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-} from '@mui/material'
-import BlockOutlined from '@mui/icons-material/BlockOutlined'
-import CheckCircleOutlined from '@mui/icons-material/CheckCircleOutlined'
-import ErrorOutlined from '@mui/icons-material/ErrorOutlined'
-import PublicOutlined from '@mui/icons-material/PublicOutlined'
-import RefreshOutlined from '@mui/icons-material/RefreshOutlined'
-
-const emptyExit = { protocol: 'socks5', host: '', port: '', credential_reference_id: '', expected_public_ip: '', expected_region: '' }
-const healthLabels = { unchecked: '未检测', healthy: '健康', unhealthy: '不健康', disabled: '已停用' }
-const wrapAnywhere = { overflowWrap: 'anywhere', minWidth: 0 }
-
-function actionError(error, conflictMessage) {
-  if (error?.status === 409) return `冲突（409）：${conflictMessage}`
-  if (error?.status === 503) return `环境不可用（503）：${error.message}`
-  return error?.message || '操作失败'
-}
-
-function environmentError(error) {
-  return `环境不可用${error?.status ? `（${error.status}）` : ''}：无法读取账号绑定，状态暂时未知。`
-}
-
-function ExitHealth({ exit }) {
-  const known = Object.hasOwn(healthLabels, exit.health_status)
-  const label = known ? healthLabels[exit.health_status] : '未知状态'
-  const Icon = exit.health_status === 'healthy' ? CheckCircleOutlined : exit.health_status === 'disabled' ? BlockOutlined : ErrorOutlined
-  const color = exit.health_status === 'healthy' ? 'success.main' : exit.health_status === 'unchecked' ? 'warning.main' : 'error.main'
-  return <Stack direction="row" spacing={1} sx={{ alignItems: 'center', color }}><Icon fontSize="small" /><Box><Typography component="span" variant="body2" fontWeight={650}>{label}</Typography>{known ? null : <Typography variant="caption" display="block" color="text.secondary">{exit.health_status}</Typography>}</Box></Stack>
-}
-
-function ExitActions({ exit, busy, onAction }) {
-  return <Stack direction="row" spacing={1} useFlexGap sx={{ flexWrap: 'wrap' }}><Button size="small" variant="outlined" startIcon={<RefreshOutlined />} disabled={busy || exit.health_status === 'disabled'} onClick={() => onAction(exit, 'check')}>检测</Button><Button size="small" variant="outlined" color="error" startIcon={<BlockOutlined />} disabled={busy || exit.health_status === 'disabled'} onClick={() => onAction(exit, 'disable')}>停用</Button></Stack>
-}
-
-function ExitForm({ busy, onSubmit }) {
-  const [form, setForm] = useState(emptyExit)
-  const update = (key, value) => setForm(current => ({ ...current, [key]: value }))
-  const port = Number(form.port)
-  const valid = form.host.trim() && Number.isInteger(port) && port > 0 && port <= 65535
-
-  async function submit(event) {
-    event.preventDefault()
-    if (!valid) return
-    const created = await onSubmit({
-      protocol: form.protocol,
-      host: form.host.trim(),
-      port,
-      credential_reference: { id: form.credential_reference_id.trim() },
-      expected_public_ip: form.expected_public_ip.trim(),
-      expected_region: form.expected_region.trim(),
-    })
-    if (created) setForm(emptyExit)
-  }
-
-  return (
-    <Paper component="form" onSubmit={submit} variant="outlined" sx={{ display: 'grid', gridTemplateColumns: { xs: 'minmax(0, 1fr)', md: 'repeat(2, minmax(0, 1fr))', lg: 'repeat(3, minmax(0, 1fr))' }, gap: 2.5, p: { xs: 2.5, md: 3 }, mb: 3.5, alignItems: 'start' }}>
-      <TextField select label="协议" value={form.protocol} onChange={event => update('protocol', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '出口协议' } }}>{['http', 'https', 'socks4', 'socks5'].map(protocol => <MenuItem key={protocol} value={protocol}>{protocol}</MenuItem>)}</TextField>
-      <TextField required label="主机" value={form.host} onChange={event => update('host', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '出口主机', maxLength: 253 } }} />
-      <TextField required type="number" label="端口" value={form.port} onChange={event => update('port', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '出口端口', min: 1, max: 65535 } }} />
-      <TextField label="凭据引用 ID（可选）" value={form.credential_reference_id} onChange={event => update('credential_reference_id', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '出口凭据引用 ID', maxLength: 128 } }} helperText="只填写已保存的引用，不填写认证秘密" />
-      <TextField label="预期公网 IP（可选）" value={form.expected_public_ip} onChange={event => update('expected_public_ip', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '预期公网 IP' } }} />
-      <TextField label="预期地区（可选）" value={form.expected_region} onChange={event => update('expected_region', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '预期地区', maxLength: 64 } }} />
-      <Button type="submit" variant="contained" size="large" disabled={!valid || busy} sx={{ minHeight: 52, gridColumn: { md: '1 / -1', lg: 'auto' } }}>{busy ? '创建中…' : '创建网络出口'}</Button>
-    </Paper>
-  )
-}
-
-function ExitTable({ exits, bindings, bindingsError, busy, onAction }) {
-  return <TableContainer component={Paper} variant="outlined" sx={{ display: { xs: 'none', md: 'block' } }}><Table sx={{ tableLayout: 'fixed' }}><TableHead><TableRow><TableCell width="24%">出口</TableCell><TableCell width="16%">健康</TableCell><TableCell width="22%">观测</TableCell><TableCell width="20%">绑定账号</TableCell><TableCell width="18%">操作</TableCell></TableRow></TableHead><TableBody>{exits.map(exit => <TableRow key={exit.id}><TableCell><Typography fontWeight={700} sx={wrapAnywhere}>{exit.protocol}://{exit.host}:{exit.port}</Typography><Typography variant="caption" color="text.secondary" sx={wrapAnywhere}>{exit.id} · 凭据 {exit.credential_reference?.id || '无'}</Typography></TableCell><TableCell><ExitHealth exit={exit} /></TableCell><TableCell><Typography variant="body2">{exit.observed_public_ip || '尚无观测'}</Typography><Typography variant="caption" color="text.secondary">{exit.last_checked_at ? new Date(exit.last_checked_at).toLocaleString('zh-CN') : '未检测'}</Typography></TableCell><TableCell><Typography variant="body2" sx={wrapAnywhere}>{bindingsError ? '状态未知' : (bindings.get(exit.id)?.join('、') || '未绑定')}</Typography></TableCell><TableCell><ExitActions exit={exit} busy={busy === exit.id} onAction={onAction} /></TableCell></TableRow>)}</TableBody></Table></TableContainer>
-}
-
-function ExitCards({ exits, bindings, bindingsError, busy, onAction }) {
-  return <Stack spacing={2} sx={{ display: { xs: 'flex', md: 'none' } }}>{exits.map(exit => <Paper key={exit.id} variant="outlined" sx={{ p: 2.5, minWidth: 0 }}><Stack spacing={1.5} sx={{ minWidth: 0 }}><Box sx={{ minWidth: 0 }}><Typography fontWeight={700} sx={wrapAnywhere}>{exit.protocol}://{exit.host}:{exit.port}</Typography><Typography variant="caption" color="text.secondary" sx={wrapAnywhere}>{exit.id} · 凭据 {exit.credential_reference?.id || '无'}</Typography></Box><ExitHealth exit={exit} /><Typography variant="body2">观测公网 IP：{exit.observed_public_ip || '尚无观测'}</Typography><Typography variant="body2">最近检测：{exit.last_checked_at ? new Date(exit.last_checked_at).toLocaleString('zh-CN') : '未检测'}</Typography><Typography variant="body2" sx={wrapAnywhere}>绑定账号：{bindingsError ? '状态未知' : (bindings.get(exit.id)?.join('、') || '未绑定')}</Typography><ExitActions exit={exit} busy={busy === exit.id} onAction={onAction} /></Stack></Paper>)}</Stack>
-}
-
-export function NetworkExitList() {
-  const dataProvider = useDataProvider()
-  const [busy, setBusy] = useState('')
-  const [message, setMessage] = useState(null)
-  const [filter, setFilter] = useState('')
-  const { data: exits = [], error, isPending, refetch } = useGetList('network-exits')
-  const { data: browsers = [], error: browsersError, refetch: refetchBrowsers } = useGetList('browsers', undefined, { retry: false })
-  const bindings = useMemo(() => {
-    const result = new Map()
-    for (const browser of browsers) {
-      if (!browser.network_exit_id || !browser.account_id) continue
-      result.set(browser.network_exit_id, [...(result.get(browser.network_exit_id) || []), browser.account_id])
-    }
-    return result
-  }, [browsers])
-  const needle = filter.trim().toLowerCase()
-  const visible = needle ? exits.filter(exit => `${exit.id} ${exit.protocol} ${exit.host} ${exit.observed_public_ip || ''}`.toLowerCase().includes(needle)) : exits
-
-  useEffect(() => { document.title = 'CreatorHub · 网络出口' }, [])
-
-  async function createExit(data) {
-    setBusy('create'); setMessage(null)
-    try {
-      await dataProvider.create('network-exits', { data })
-      await refetch()
-      setMessage({ severity: 'success', text: '网络出口已创建；检测通过后才可用于账号绑定。' })
-      return true
-    } catch (reason) {
-      setMessage({ severity: 'error', text: actionError(reason, '出口或凭据引用与现有资源冲突；表单内容已保留。') })
-      return false
-    } finally { setBusy('') }
-  }
-
-  async function act(exit, action) {
-    if (action === 'disable' && !window.confirm(`停用网络出口 ${exit.id}？绑定账号将暂停，排队任务进入 hold。`)) return
-    setBusy(exit.id); setMessage(null)
-    try {
-      await dataProvider.networkExitAction(exit.id, action)
-      await Promise.all([refetch(), refetchBrowsers()])
-      setMessage({ severity: 'success', text: action === 'check' ? '出口检测完成。' : '出口已停用；绑定账号不会自动恢复。' })
-    } catch (reason) {
-      setMessage({ severity: 'error', text: actionError(reason, action === 'check' ? '已停用的出口不能检测。' : '出口当前不能停用。') })
-    } finally { setBusy('') }
-  }
-
-  return (
-    <>
-      <Box component="header" sx={{ mb: 4 }}><Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}><PublicOutlined color="primary" fontSize="large" /><Typography variant="h1">网络出口</Typography></Stack><Typography color="text.secondary" sx={{ mt: 1 }}>维护固定出口、健康观测与账号绑定</Typography></Box>
-      <ExitForm busy={busy === 'create'} onSubmit={createExit} />
-      {message ? <Alert severity={message.severity} aria-live="polite" sx={{ mb: 2.5 }}>{message.text}</Alert> : null}
-      {error ? <Alert severity="error" sx={{ mb: 2.5 }}>{error.message}</Alert> : null}
-      {browsersError ? <Alert severity="error" action={<Button color="inherit" size="small" onClick={() => refetchBrowsers()}>重试环境状态</Button>} sx={{ mb: 2.5 }}>{environmentError(browsersError)}</Alert> : null}
-      {exits.length > 0 ? <TextField label="筛选网络出口" size="small" value={filter} onChange={event => setFilter(event.target.value)} sx={{ mb: 2.5, width: { xs: '100%', sm: 320 } }} /> : null}
-      {isPending ? <Box sx={{ display: 'grid', placeItems: 'center', minHeight: 220 }}><CircularProgress aria-label="正在加载网络出口" /></Box> : null}
-      {!isPending && exits.length === 0 ? <Paper variant="outlined" sx={{ py: 7, px: 2, textAlign: 'center', color: 'text.secondary' }}>暂无网络出口。创建并检测健康后，才能绑定运行环境。</Paper> : null}
-      {!isPending && exits.length > 0 && visible.length === 0 ? <Paper variant="outlined" sx={{ py: 6, textAlign: 'center' }}><Typography color="text.secondary">没有符合筛选条件的网络出口</Typography><Button onClick={() => setFilter('')} sx={{ mt: 1 }}>清除筛选</Button></Paper> : null}
-      {!isPending && visible.length > 0 ? <><ExitTable exits={visible} bindings={bindings} bindingsError={browsersError} busy={busy} onAction={act} /><ExitCards exits={visible} bindings={bindings} bindingsError={browsersError} busy={busy} onAction={act} /></> : null}
-    </>
-  )
-}
diff --git a/web/src/NetworkExitsPage.jsx b/web/src/NetworkExitsPage.jsx
new file mode 100644
index 0000000..a380dc3
--- /dev/null
+++ b/web/src/NetworkExitsPage.jsx
@@ -0,0 +1,218 @@
+import { useMemo, useState } from 'react'
+import { Link, useNavigate, useParams } from 'react-router'
+import { useDataProvider, useList, useOne } from '@refinedev/core'
+import {
+  Alert, Button, Card, CardContent, ConfirmDialog, DetailList, Field, Input, Modal, PageHeader,
+  PageState, Select, StatusPill, conflictMessage,
+} from './lib/ui.jsx'
+import { useTitle } from './lib/hooks.js'
+
+const createInitial = { protocol: 'socks5', host: '', port: '', credential_reference_id: '', expected_public_ip: '', expected_region: '' }
+const healthText = { unchecked: '未检测', healthy: '健康', unhealthy: '不健康', disabled: '已停用' }
+const protocolOptions = ['http', 'https', 'socks4', 'socks5'].map(value => ({ value, label: value }))
+
+function ExitHealthPill({ exit }) {
+  const known = Object.hasOwn(healthText, exit.health_status)
+  const tone = exit.health_status === 'healthy' ? 'success' : exit.health_status === 'disabled' ? 'neutral' : exit.health_status === 'unchecked' ? 'warning' : 'danger'
+  return <StatusPill tone={tone} label={known ? healthText[exit.health_status] : '未知状态'} sub={known ? undefined : exit.health_status} />
+}
+
+function ExitActions({ exit, busy, onAction }) {
+  const disabled = busy || exit.health_status === 'disabled'
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button size="sm" icon="ri-refresh-line" disabled={disabled} onClick={() => onAction(exit, 'check')}>检测</Button>
+      <Button size="sm" variant="danger" icon="ri-forbid-line" disabled={disabled} onClick={() => onAction(exit, 'disable')}>停用</Button>
+    </div>
+  )
+}
+
+function ExitCreateModal({ open, onClose, onSubmit, busy, error }) {
+  const [form, setForm] = useState(createInitial)
+  const update = (key, value) => setForm(current => ({ ...current, [key]: value }))
+  const port = Number(form.port)
+  const valid = form.host.trim() && Number.isInteger(port) && port > 0 && port <= 65535
+
+  async function submit(event) {
+    event.preventDefault()
+    if (!valid) return
+    const created = await onSubmit({
+      protocol: form.protocol, host: form.host.trim(), port,
+      credential_reference: { id: form.credential_reference_id.trim() },
+      expected_public_ip: form.expected_public_ip.trim(), expected_region: form.expected_region.trim(),
+    })
+    if (created) setForm(createInitial)
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title="创建网络出口" labelledBy="exit-create-title" size="lg"
+      footer={<>
+        <Button onClick={onClose} disabled={busy}>取消</Button>
+        <Button variant="primary" type="submit" form="exit-create-form" busy={busy} busyText="创建中…" disabled={!valid}>创建网络出口</Button>
+      </>}>
+      <form id="exit-create-form" onSubmit={submit} noValidate>
+        {error ? <Alert variant="destructive" className="mb-4">{conflictMessage(error, '出口或凭据引用与现有资源冲突；表单内容已保留。')}</Alert> : null}
+        <div className="grid gap-4 sm:grid-cols-3">
+          <Field id="exit-protocol" label="协议" required helper="代理协议">
+            <Select id="exit-protocol" value={form.protocol} onChange={event => update('protocol', event.target.value)} options={protocolOptions} />
+          </Field>
+          <Field id="exit-host" label="主机" required helper="代理服务器地址">
+            <Input id="exit-host" required maxLength={253} value={form.host} onChange={event => update('host', event.target.value)} placeholder="如 proxy.example" />
+          </Field>
+          <Field id="exit-port" label="端口" required helper="1..65535">
+            <Input id="exit-port" type="number" min={1} max={65535} required value={form.port} onChange={event => update('port', event.target.value)} />
+          </Field>
+          <Field id="exit-credential" label="凭据引用 ID（可选）" helper="只填写已保存的引用，不填写认证秘密">
+            <Input id="exit-credential" maxLength={128} value={form.credential_reference_id} onChange={event => update('credential_reference_id', event.target.value)} />
+          </Field>
+          <Field id="exit-ip" label="预期公网 IP（可选）" helper="用于健康检测比对">
+            <Input id="exit-ip" value={form.expected_public_ip} onChange={event => update('expected_public_ip', event.target.value)} />
+          </Field>
+          <Field id="exit-region" label="预期地区（可选）" helper="如 CN-Shanghai">
+            <Input id="exit-region" maxLength={64} value={form.expected_region} onChange={event => update('expected_region', event.target.value)} />
+          </Field>
+        </div>
+      </form>
+    </Modal>
+  )
+}
+
+function ExitCard({ exit, boundAccounts, bindingsError, busy, onAction }) {
+  return (
+    <Card>
+      <CardContent className="space-y-3">
+        <div className="flex min-w-0 items-start justify-between gap-3">
+          <div className="min-w-0">
+            <Link to={`/network-exits/${encodeURIComponent(exit.id)}`} className="anywhere font-semibold text-ink hover:text-primary">{exit.protocol}://{exit.host}:{exit.port}</Link>
+            <p className="anywhere text-xs text-muted">{exit.id} · 凭据 {exit.credential_reference?.id || '无'}</p>
+          </div>
+          <ExitHealthPill exit={exit} />
+        </div>
+        <div className="text-sm"><span className="text-muted">观测公网 IP：</span><span className="anywhere">{exit.observed_public_ip || '尚无观测'}</span></div>
+        <p className="text-xs text-muted">最近检测：{exit.last_checked_at ? new Date(exit.last_checked_at).toLocaleString('zh-CN') : '未检测'}</p>
+        <div className="text-sm">
+          <span className="text-muted">绑定账号：</span>
+          {bindingsError ? '状态未知' : (
+            <span className="anywhere">{boundAccounts?.length ? boundAccounts.join('、') : '未绑定'}</span>
+          )}
+        </div>
+        <ExitActions exit={exit} busy={busy} onAction={onAction} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export function NetworkExitList() {
+  const dataProvider = useDataProvider()('default')
+  const [createOpen, setCreateOpen] = useState(false)
+  const [busy, setBusy] = useState('')
+  const [createError, setCreateError] = useState(null)
+  const [notice, setNotice] = useState(null)
+  const [disabling, setDisabling] = useState(null)
+  const { result, query } = useList({ resource: 'network-exits' })
+  const error = query.error
+  const isPending = query.isPending
+  const exits = result.data ?? []
+  const { result: bindingResult, query: browsersQuery } = useList({ resource: 'browsers', queryOptions: { retry: false } })
+  const browsers = bindingResult.data ?? []
+  const bindingsError = browsersQuery.error
+  const refetchBrowsers = browsersQuery.refetch
+  const accountsByExit = useMemo(() => {
+    const map = new Map
+    for (const runtime of browsers) {
+      if (!runtime.network_exit_id || !runtime.account_id) continue
+      map.set(runtime.network_exit_id, [...(map.get(runtime.network_exit_id) || []), runtime.account_id])
+    }
+    return map
+  }, [browsers])
+  useTitle('CreatorHub · 网络出口')
+
+  async function createExit(data) {
+    setBusy('create')
+    setCreateError(null)
+    try {
+      await dataProvider.create({ resource: 'network-exits', variables: data })
+      await query.refetch()
+      setNotice({ variant: 'success', text: '网络出口已创建；检测通过后才可用于账号绑定。' })
+      return true
+    } catch (reason) {
+      setCreateError(reason)
+      return false
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function runAction(exit, action) {
+    setBusy(exit.id)
+    setNotice(null)
+    try {
+      await dataProvider.networkExitAction(exit.id, action)
+      await Promise.all([query.refetch(), refetchBrowsers()])
+      setNotice({ variant: 'success', text: action === 'check' ? '出口检测完成。' : '出口已停用；绑定账号不会自动恢复。' })
+    } catch (reason) {
+      setNotice({ variant: 'destructive', text: conflictMessage(reason, action === 'check' ? '已停用的出口不能检测。' : '出口当前不能停用。') })
+    } finally {
+      setBusy('')
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader icon="ri-earth-line" title="网络出口" description="维护固定出口、健康观测与账号绑定">
+        <Button variant="primary" icon="ri-add-line" onClick={() => setCreateOpen(true)}>创建网络出口</Button>
+      </PageHeader>
+      {notice ? <Alert variant={notice.variant} className="mb-4">{notice.text}</Alert> : null}
+      {error ? <Alert variant="destructive" className="mb-4">{error.message}</Alert> : null}
+      {bindingsError ? (
+        <Alert variant="destructive" className="mb-4">
+          环境不可用{bindingsError.status ? `（${bindingsError.status}）` : ''}：无法读取账号绑定，状态暂时未知。
+          <Button size="sm" onClick={() => refetchBrowsers()}>重试环境状态</Button>
+        </Alert>
+      ) : null}
+      <PageState pending={isPending} error={error} empty={exits.length === 0} emptyText="暂无网络出口。创建并检测健康后，才能绑定运行环境。">
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {exits.map(exit => (
+            <ExitCard key={exit.id} exit={exit} boundAccounts={accountsByExit.get(exit.id)} bindingsError={!!bindingsError}
+              busy={busy === exit.id} onAction={(exit, action) => (action === 'disable' ? setDisabling(exit) : runAction(exit, action))} />
+          ))}
+        </div>
+      </PageState>
+      <ExitCreateModal open={createOpen} onClose={() => { setCreateOpen(false); setCreateError(null) }} onSubmit={createExit} busy={busy === 'create'} error={createError} />
+      <ConfirmDialog open={disabling !== null} onClose={() => setDisabling(null)} onConfirm={() => { const exit = disabling; setDisabling(null); runAction(exit, 'disable') }}
+        title="停用网络出口" confirmLabel="确认停用" busy={busy === disabling?.id}
+        body={`停用网络出口 ${disabling?.id}？绑定账号将暂停，排队任务进入 hold。`} />
+    </div>
+  )
+}
+
+export function NetworkExitDetail() {
+  const { id } = useParams()
+  const { result, error, isPending } = useOne({ resource: 'network-exits', id, queryOptions: { retry: false } })
+  const exit = result
+  useTitle('CreatorHub · 出口详情')
+  if (isPending) return <PageState pending />
+  if (error || !exit) return <Alert variant="destructive">{error?.message || '网络出口不存在'}</Alert>
+  return (
+    <div>
+      <PageHeader icon="ri-earth-line" title="网络出口详情" description={<span className="anywhere">{exit.protocol}://{exit.host}:{exit.port}</span>}>
+        <Button icon="ri-arrow-left-line" as={Link} to="/network-exits">返回出口列表</Button>
+      </PageHeader>
+      <Card>
+        <CardContent className="space-y-4">
+          <ExitHealthPill exit={exit} />
+          <DetailList rows={[
+            ['ID', <span className="anywhere">{exit.id}</span>],
+            ['健康 / 版本', <span className="anywhere">{healthText[exit.health_status] ?? exit.health_status} · {exit.version}</span>],
+            ['凭据引用', <span className="anywhere">{exit.credential_reference?.id || '无'}</span>],
+            ['观测公网 IP', <span className="anywhere">{exit.observed_public_ip || '尚无观测'}</span>],
+            ['最近检测', exit.last_checked_at ? new Date(exit.last_checked_at).toLocaleString('zh-CN') : '未检测'],
+          ]} />
+          <div className="flex flex-wrap gap-3">
+            <Button as={Link} to={`/audit?network_exit_id=${encodeURIComponent(exit.id)}`}>查看审计</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/web/src/NetworkExitList.test.jsx b/web/src/NetworkExitsPage.test.jsx
similarity index 61%
rename from web/src/NetworkExitList.test.jsx
rename to web/src/NetworkExitsPage.test.jsx
index ec96680..a1b477f 100644
--- a/web/src/NetworkExitList.test.jsx
+++ b/web/src/NetworkExitsPage.test.jsx
@@ -1,15 +1,19 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { CoreAdminContext, HttpError } from 'ra-core'
-import { NetworkExitList } from './NetworkExitList'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Refine } from '@refinedev/core'
+import { MemoryRouter } from 'react-router'
+import { NetworkExitList } from './NetworkExitsPage'
 
 afterEach(() => { cleanup(); vi.restoreAllMocks() })
 
+const httpError = (message, status, body) => Object.assign(new Error(message), { status, body })
+
 const networkExit = { id: 'exit-a', protocol: 'socks5', host: 'proxy.example', port: 1080, health_status: 'healthy', observed_public_ip: '203.0.113.1', credential_reference: { id: 'credential-a', provider: 'os_keyring' } }
 
 function provider(exits = [], overrides = {}) {
   return {
-    getList: vi.fn(resource => Promise.resolve(resource === 'network-exits' ? { data: exits, total: exits.length } : { data: [], total: 0 })),
+    getList: vi.fn(({ resource }) => Promise.resolve(resource === 'network-exits' ? { data: exits, total: exits.length } : { data: [], total: 0 })),
     create: vi.fn().mockResolvedValue({ data: networkExit }),
     networkExitAction: vi.fn().mockResolvedValue(networkExit),
     getOne: vi.fn(), getMany: vi.fn(), getManyReference: vi.fn(), update: vi.fn(), updateMany: vi.fn(), delete: vi.fn(), deleteMany: vi.fn(),
@@ -17,17 +21,25 @@ function provider(exits = [], overrides = {}) {
   }
 }
 
+const renderExits = dataProvider => render(
+  <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+    <Refine dataProvider={dataProvider}>
+      <MemoryRouter><NetworkExitList /></MemoryRouter>
+    </Refine>
+  </QueryClientProvider>,
+)
+
 describe('NetworkExitList', () => {
   it('shows the ordered empty-state instruction', async () => {
-    render(<CoreAdminContext dataProvider={provider()}><NetworkExitList /></CoreAdminContext>)
+    renderExits(provider())
     expect(await screen.findByText(/创建并检测健康后/)).toBeTruthy()
   })
 
   it('shows only credential references and runs an explicit health check', async () => {
     const dataProvider = provider([networkExit])
-    render(<CoreAdminContext dataProvider={dataProvider}><NetworkExitList /></CoreAdminContext>)
+    renderExits(dataProvider)
 
-    expect((await screen.findAllByText(/凭据 credential-a/)).length).toBeGreaterThan(0)
+    expect((await screen.findAllByText(/credential-a/)).length).toBeGreaterThan(0)
     expect(screen.queryByText(/password|token|raw-value/i)).toBeNull()
     fireEvent.click(screen.getAllByRole('button', { name: '检测' })[0])
     await waitFor(() => expect(dataProvider.networkExitAction).toHaveBeenCalledWith('exit-a', 'check'))
@@ -35,18 +47,18 @@ describe('NetworkExitList', () => {
 
   it('shows unknown bindings and retries when browsers return 502', async () => {
     const dataProvider = provider([networkExit], {
-      getList: vi.fn(resource => resource === 'browsers'
-        ? Promise.reject(new HttpError('bad gateway', 502))
+      getList: vi.fn(({ resource }) => resource === 'browsers'
+        ? Promise.reject(httpError('bad gateway', 502))
         : Promise.resolve({ data: [networkExit], total: 1 })),
     })
-    render(<CoreAdminContext dataProvider={dataProvider}><NetworkExitList /></CoreAdminContext>)
+    renderExits(dataProvider)
 
-    expect(await screen.findByText(/环境不可用（502）/)).toBeTruthy()
-    expect((await screen.findAllByText(/绑定账号：状态未知|^状态未知$/)).length).toBeGreaterThan(0)
+    expect(await screen.findByText(/环境不可用/)).toBeTruthy()
+    expect((await screen.findAllByText(/绑定账号：状态未知|状态未知/)).length).toBeGreaterThan(0)
     expect(screen.queryByText(/绑定账号：未绑定/)).toBeNull()
     expect(screen.queryByText(/^未绑定$/)).toBeNull()
     expect(screen.getAllByRole('button', { name: '检测' })[0].disabled).toBe(false)
     fireEvent.click(screen.getByRole('button', { name: '重试环境状态' }))
-    await waitFor(() => expect(dataProvider.getList.mock.calls.filter(([resource]) => resource === 'browsers').length).toBeGreaterThan(1))
+    await waitFor(() => expect(dataProvider.getList.mock.calls.filter(([call]) => call.resource === 'browsers').length).toBeGreaterThan(1))
   })
 })
diff --git a/web/src/TaskCenter.jsx b/web/src/TaskCenter.jsx
deleted file mode 100644
index f078569..0000000
--- a/web/src/TaskCenter.jsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useDataProvider, useGetList, useGetOne } from 'ra-core'
-import { Link as RouterLink, useParams } from 'react-router-dom'
-import {
-  Alert,
-  Box,
-  Button,
-  CircularProgress,
-  MenuItem,
-  Paper,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-} from '@mui/material'
-import AssignmentTurnedInOutlined from '@mui/icons-material/AssignmentTurnedInOutlined'
-
-const wrapAnywhere = { overflowWrap: 'anywhere', minWidth: 0 }
-
-export const taskLabels = {
-  queued: '已排队',
-  executing: '执行中',
-  succeeded: '已成功',
-  failed: '失败',
-  needs_confirmation: '需要人工确认',
-  policy_hold: '策略暂停',
-  cancelled: '已取消',
-}
-
-export const reasonLabels = {
-  account_paused: '账号已暂停',
-  account_revoked: '账号授权已撤销',
-  binding_missing: '运行环境绑定缺失',
-  environment_missing: '原运行环境不可用',
-  exit_missing: '固定出口缺失',
-  exit_unhealthy: '固定出口失败或发生漂移',
-  runtime_stop_pending: '停止结果未知，等待人工核验',
-  runtime_missing: '原运行实例不可用',
-  runtime_lease_expired: '运行实例租约已过期',
-  execution_lease_expired: '执行租约过期，结果未知',
-  task_result_uncertain: '执行结果不确定',
-  task_policy_hold: '执行器请求策略暂停',
-  account_version_changed: '账号版本已变化',
-  draft_version_changed: '草稿版本已变化',
-  confirmation_missing: '确认快照缺失',
-  confirmation_version_changed: '确认版本已变化',
-  binding_version_changed: '环境或出口版本已变化',
-  legacy_confirmation_required: '历史任务结果未知，等待人工核验',
-}
-
-const stateText = state => taskLabels[state] || `未知状态：${state}`
-const reasonText = reason => reason ? (reasonLabels[reason] || `未知停止原因：${reason}`) : '无'
-
-function TaskSummary({ task }) {
-  return (
-    <>
-      <Typography component={RouterLink} to={`/tasks/${task.id}`} fontWeight={700} color="primary" sx={wrapAnywhere}>{task.id}</Typography>
-      <Typography variant="body2">{stateText(task.state)}</Typography>
-      <Typography variant="caption" color="text.secondary" sx={wrapAnywhere}>{reasonText(task.hold_reason)}</Typography>
-    </>
-  )
-}
-
-export function TaskList() {
-  const [accountID, setAccountID] = useState('')
-  const [state, setState] = useState('')
-  const { data: tasks = [], error, isPending } = useGetList('tasks', { filter: { account_id: accountID, state } }, { retry: false })
-
-  useEffect(() => { document.title = 'CreatorHub · 任务中心' }, [])
-
-  return (
-    <Box>
-      <Box component="header" sx={{ mb: 3.5 }}>
-        <Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}><AssignmentTurnedInOutlined color="primary" fontSize="large" /><Typography variant="h1">任务中心</Typography></Stack>
-        <Typography color="text.secondary" sx={{ mt: 1 }}>逐条处理暂停、版本变化与未知执行结果；不会自动重试或更换出口</Typography>
-      </Box>
-      <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ mb: 2.5 }}>
-        <TextField label="按账号筛选" size="small" value={accountID} onChange={event => setAccountID(event.target.value)} slotProps={{ htmlInput: { 'aria-label': '按账号筛选' } }} />
-        <TextField select label="按状态筛选" size="small" value={state} onChange={event => setState(event.target.value)} sx={{ minWidth: 220 }} slotProps={{ htmlInput: { 'aria-label': '按状态筛选' } }}>
-          <MenuItem value="">全部状态</MenuItem>
-          {Object.entries(taskLabels).map(([value, label]) => <MenuItem key={value} value={value}>{label}</MenuItem>)}
-        </TextField>
-      </Stack>
-      {error ? <Alert severity="error">{error.message}</Alert> : null}
-      {isPending ? <Box sx={{ display: 'grid', placeItems: 'center', minHeight: 240 }}><CircularProgress aria-label="正在加载任务" /></Box> : null}
-      {!isPending && tasks.length === 0 ? <Paper variant="outlined" sx={{ py: 7, textAlign: 'center' }}><Typography color="text.secondary">{accountID || state ? '没有符合筛选条件的任务' : '尚无任务'}</Typography>{accountID || state ? <Button onClick={() => { setAccountID(''); setState('') }} sx={{ mt: 1 }}>清除筛选</Button> : null}</Paper> : null}
-      {tasks.length > 0 ? <TableContainer component={Paper} variant="outlined" sx={{ display: { xs: 'none', md: 'block' } }}><Table sx={{ tableLayout: 'fixed' }}><TableHead><TableRow><TableCell width="30%">任务</TableCell><TableCell width="20%">账号</TableCell><TableCell width="20%">确认</TableCell><TableCell width="30%">更新时间</TableCell></TableRow></TableHead><TableBody>{tasks.map(task => <TableRow key={task.id}><TableCell><TaskSummary task={task} /></TableCell><TableCell sx={wrapAnywhere}><RouterLink to={`/accounts/${task.account_id}`}>{task.account_id}</RouterLink></TableCell><TableCell sx={wrapAnywhere}>{task.confirmation_id || '未确认'}</TableCell><TableCell>{new Date(task.updated_at || task.created_at).toLocaleString('zh-CN')}</TableCell></TableRow>)}</TableBody></Table></TableContainer> : null}
-      {tasks.length > 0 ? <Stack spacing={2} sx={{ display: { xs: 'flex', md: 'none' } }}>{tasks.map(task => <Paper key={task.id} variant="outlined" sx={{ p: 2.5 }}><Stack spacing={1.25}><TaskSummary task={task} /><Typography variant="body2" sx={wrapAnywhere}>账号：<RouterLink to={`/accounts/${task.account_id}`}>{task.account_id}</RouterLink></Typography><Typography variant="body2" sx={wrapAnywhere}>确认：{task.confirmation_id || '未确认'}</Typography><Typography variant="caption" color="text.secondary">{new Date(task.updated_at || task.created_at).toLocaleString('zh-CN')}</Typography></Stack></Paper>)}</Stack> : null}
-    </Box>
-  )
-}
-
-function actionError(error) {
-  const reason = error?.body?.reason_code
-  if (error?.status === 409) return `当前版本仍不允许恢复（409）：${reasonText(reason)}`
-  if (error?.status === 503) return `原资源尚未恢复（503）：${reasonText(reason)}`
-  return error?.message || '操作失败'
-}
-
-export function TaskDetail() {
-  const { id } = useParams()
-  const dataProvider = useDataProvider()
-  const [verification, setVerification] = useState('not_executed')
-  const [busy, setBusy] = useState(false)
-  const [message, setMessage] = useState(null)
-  const { data: task, error, isPending, refetch } = useGetOne('tasks', { id }, { retry: false })
-
-  useEffect(() => { document.title = 'CreatorHub · 任务详情' }, [])
-
-  if (isPending) return <Box sx={{ display: 'grid', placeItems: 'center', minHeight: 300 }}><CircularProgress aria-label="正在加载任务详情" /></Box>
-  if (error || !task) return <Alert severity="error">{error?.message || '任务不存在'}</Alert>
-
-  async function act(action, data) {
-    setBusy(true)
-    setMessage(null)
-    try {
-      await dataProvider.taskAction(task.id, action, data)
-      setMessage({ severity: 'success', text: action === 'verify' ? '人工核验已记录；现在只能按该结论恢复或结束。' : action === 'resume' ? '任务已恢复排队。' : '任务已按核验结论结束。' })
-      await refetch()
-    } catch (reason) {
-      setMessage({ severity: 'error', text: actionError(reason) })
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  const confirmation = task.confirmation || {}
-  const unknownReason = task.hold_reason && !reasonLabels[task.hold_reason]
-  return (
-    <Box>
-      <Box component="header" sx={{ mb: 3.5 }}><Typography variant="h1">任务详情</Typography><Typography color="text.secondary" sx={{ mt: 1, ...wrapAnywhere }}>{task.id}</Typography></Box>
-      {message ? <Alert severity={message.severity} aria-live="polite" sx={{ mb: 2.5 }}>{message.text}</Alert> : null}
-      {unknownReason ? <Alert severity="warning" sx={{ mb: 2.5 }}>后端返回了未知停止原因“{task.hold_reason}”；为避免不安全操作，本页不提供恢复动作。</Alert> : null}
-      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: 'minmax(0, 1fr)', lg: 'repeat(2, minmax(0, 1fr))' }, gap: 2.5 }}>
-        <Paper variant="outlined" sx={{ p: 3, minWidth: 0 }}><Stack spacing={1.25}><Typography variant="h6">当前状态</Typography><Typography>{stateText(task.state)}</Typography><Typography>停止原因：{reasonText(task.hold_reason)}</Typography><Typography>人工核验：{task.verification_result || '尚未记录'}</Typography><Button component={RouterLink} to={`/audit?task_id=${encodeURIComponent(task.id)}`} variant="outlined">查看关联审计</Button></Stack></Paper>
-        <Paper variant="outlined" sx={{ p: 3, minWidth: 0 }}><Stack spacing={1.25}><Typography variant="h6">确认快照</Typography><Typography sx={wrapAnywhere}>确认：{confirmation.id || '未记录'} · v{confirmation.version || '—'}</Typography><Typography>账号版本 {confirmation.account_version || '—'} · 草稿版本 {confirmation.draft_version || '—'}</Typography><Typography sx={wrapAnywhere}>环境：{confirmation.browser_env_alias || '未记录'} · 出口：{confirmation.network_exit_id || '未记录'} · 绑定版本：{confirmation.binding_version || '未记录'}</Typography><Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}><Button component={RouterLink} to={`/accounts/${task.account_id}`} variant="outlined">查看账号</Button><Button component={RouterLink} to={`/drafts/${task.draft_id}`} variant="outlined">查看草稿</Button></Stack></Stack></Paper>
-        <Paper variant="outlined" sx={{ p: 3, minWidth: 0 }}><Stack spacing={1.25}><Typography variant="h6">执行关联</Typography><Typography sx={wrapAnywhere}>环境：{task.browser_env_alias || '未记录'}</Typography><Typography sx={wrapAnywhere}>固定出口：{task.network_exit_id || '未记录'}</Typography><Typography sx={wrapAnywhere}>运行实例：{task.runtime_instance_id || '未记录'} · 绑定版本：{task.binding_version || '未记录'}</Typography><Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>{task.browser_env_alias ? <Button component={RouterLink} to={`/browsers/${encodeURIComponent(task.browser_env_alias)}`} variant="outlined">查看原环境</Button> : null}{task.network_exit_id ? <Button component={RouterLink} to={`/network-exits/${encodeURIComponent(task.network_exit_id)}`} variant="outlined">查看原出口</Button> : null}</Stack></Stack></Paper>
-        <Paper variant="outlined" sx={{ p: 3, minWidth: 0 }}><Stack spacing={2}><Typography variant="h6">唯一安全动作</Typography>{task.readiness_reason ? <Alert severity="warning">当前仍被阻断：{reasonText(task.readiness_reason)}。修复原资源并刷新后，才会开放恢复。</Alert> : null}{task.allowed_action === 'verify' ? <><Alert severity="warning">先在原环境和原出口核验真实结果。选择“未执行”不会立即重试，仍需下一步显式恢复。</Alert><TextField select label="人工核验结论" value={verification} onChange={event => setVerification(event.target.value)} slotProps={{ htmlInput: { 'aria-label': '人工核验结论' } }}><MenuItem value="not_executed">确认未执行，可评估恢复</MenuItem><MenuItem value="succeeded">确认已成功</MenuItem><MenuItem value="failed">确认已失败</MenuItem></TextField><Button variant="contained" disabled={busy} onClick={() => act('verify', { result: verification })}>记录人工核验</Button></> : null}{task.allowed_action === 'resume' ? <Button variant="contained" disabled={busy} onClick={() => act('resume')}>按核验结论恢复排队</Button> : null}{task.allowed_action === 'finish' ? <Button variant="contained" disabled={busy} onClick={() => act('finish')}>按核验结论结束任务</Button> : null}{task.allowed_action === 'reconfirm' ? <><Alert severity="warning">版本已变化，旧确认不可继续使用。</Alert><Button component={RouterLink} to={`/drafts/${task.draft_id}`} variant="contained">重新核对并确认草稿</Button></> : null}{!task.allowed_action ? <Typography color="text.secondary">当前没有可安全执行的动作。</Typography> : null}</Stack></Paper>
-      </Box>
-      <Box component="section" sx={{ mt: 3 }}><Typography variant="h2" sx={{ mb: 2 }}>执行尝试</Typography>{task.attempts?.length ? <Stack spacing={1.5}>{task.attempts.map(attempt => <Paper key={attempt.id} variant="outlined" sx={{ p: 2.5, minWidth: 0 }}><Typography component={RouterLink} to={`/attempts/${encodeURIComponent(attempt.id)}`} fontWeight={700} color="primary" sx={wrapAnywhere}>{attempt.id}</Typography><Typography variant="body2">{attempt.outcome || '执行中'} · {new Date(attempt.started_at).toLocaleString('zh-CN')}</Typography><Typography variant="body2">脱敏证据：{attempt.evidence?.mock_outcome || '无可公开证据'}</Typography></Paper>)}</Stack> : <Paper variant="outlined" sx={{ p: 3 }}><Typography color="text.secondary">尚未产生执行尝试。</Typography></Paper>}</Box>
-    </Box>
-  )
-}
diff --git a/web/src/TasksPage.jsx b/web/src/TasksPage.jsx
new file mode 100644
index 0000000..6e55a8c
--- /dev/null
+++ b/web/src/TasksPage.jsx
@@ -0,0 +1,212 @@
+import { useState } from 'react'
+import { Link, useNavigate, useParams } from 'react-router'
+import { useDataProvider, useList, useOne } from '@refinedev/core'
+import {
+  Alert, Button, Card, CardContent, DetailList, Field, PageHeader, PageState, Select, StatusPill,
+} from './lib/ui.jsx'
+import { useTitle } from './lib/hooks.js'
+
+const stateTone = { queued: 'neutral', executing: 'info', succeeded: 'success', failed: 'danger', needs_confirmation: 'warning', policy_hold: 'warning', cancelled: 'neutral' }
+const stateText = { queued: '已排队', executing: '执行中', succeeded: '已成功', failed: '失败', needs_confirmation: '需要人工确认', policy_hold: '策略暂停', cancelled: '已取消' }
+const holdText = {
+  account_paused: '账号已暂停', account_revoked: '账号授权已撤销', binding_missing: '运行环境绑定缺失',
+  environment_missing: '原运行环境不可用', exit_missing: '固定出口缺失', exit_unhealthy: '固定出口失败或发生漂移',
+  runtime_stop_pending: '停止结果未知，等待人工核验', runtime_missing: '原运行实例不可用', runtime_lease_expired: '运行实例租约已过期',
+  execution_lease_expired: '执行租约过期，结果未知', task_result_uncertain: '执行结果不确定', task_policy_hold: '执行器请求策略暂停',
+  account_version_changed: '账号版本已变化', draft_version_changed: '草稿版本已变化', confirmation_missing: '确认快照缺失',
+  confirmation_version_changed: '确认版本已变化', binding_version_changed: '环境或出口版本已变化', legacy_confirmation_required: '历史任务结果未知，等待人工核验',
+}
+const stateLabel = state => stateText[state] || `未知状态：${state}`
+const holdLabel = reason => reason ? holdText[reason] || `未知停止原因：${reason}` : '无'
+
+function actionErrorText(error) {
+  const reason = error?.body?.reason_code
+  if (error?.status === 409) return `当前版本仍不允许恢复（409）：${holdLabel(reason)}`
+  if (error?.status === 503) return `原资源尚未恢复（503）：${holdLabel(reason)}`
+  return error?.message || '操作失败'
+}
+
+function TaskCard({ task }) {
+  return (
+    <Card>
+      <CardContent className="space-y-3">
+        <div className="flex min-w-0 items-start justify-between gap-3">
+          <Link to={`/tasks/${task.id}`} className="anywhere font-semibold text-primary hover:underline">{task.id}</Link>
+          <StatusPill tone={stateTone[task.state] || 'neutral'} label={stateLabel(task.state)} />
+        </div>
+        <div className="text-sm"><span className="text-muted">账号：</span><Link to={`/accounts/${task.account_id}`} className="anywhere text-primary hover:underline">{task.account_id}</Link></div>
+        <div className="text-sm"><span className="text-muted">确认：</span><span className="anywhere">{task.confirmation_id || '未确认'}</span></div>
+        <div className="anywhere text-xs text-muted">{holdLabel(task.hold_reason)}</div>
+        <p className="text-xs text-muted">{new Date(task.updated_at || task.created_at).toLocaleString('zh-CN')}</p>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function TaskList() {
+  const [accountFilter, setAccountFilter] = useState('')
+  const [stateFilter, setStateFilter] = useState('')
+  const { result, query } = useList({
+    resource: 'tasks',
+    filters: [
+      { field: 'account_id', value: accountFilter },
+      { field: 'state', value: stateFilter },
+    ],
+  })
+  const error = query.error
+  const isPending = query.isPending
+  const tasks = result.data ?? []
+  useTitle('CreatorHub · 任务中心')
+
+  return (
+    <div>
+      <PageHeader icon="ri-task-line" title="任务中心" description="逐条处理暂停、版本变化与未知执行结果；不会自动重试或更换出口" />
+      <div className="mb-5 flex flex-col gap-3 sm:flex-row">
+        <Field id="task-account-filter" label="按账号筛选" className="sm:w-72">
+          <input id="task-account-filter" value={accountFilter} onChange={event => setAccountFilter(event.target.value)} placeholder="账号 ID" className="h-9 w-full rounded-md border border-[#c4ccd9] bg-white px-3 text-sm focus:border-primary focus:outline-none" />
+        </Field>
+        <Field id="task-state-filter" label="按状态筛选" className="sm:w-56">
+          <Select id="task-state-filter" value={stateFilter} onChange={event => setStateFilter(event.target.value)}
+            options={Object.entries(stateText).map(([value, label]) => ({ value, label }))} placeholder="全部状态" emptyOption={{ value: '', label: '全部状态' }} />
+        </Field>
+      </div>
+      {error ? <Alert variant="destructive" className="mb-4">{error.message}</Alert> : null}
+      <PageState pending={isPending} error={error} empty={tasks.length === 0} emptyText={accountFilter || stateFilter ? '没有符合筛选条件的任务' : '尚无任务'}>
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {tasks.map(task => <TaskCard key={task.id} task={task} />)}
+        </div>
+      </PageState>
+    </div>
+  )
+}
+
+export function TaskDetail() {
+  const { id } = useParams()
+  const navigate = useNavigate()
+  const dataProvider = useDataProvider()('default')
+  const [verification, setVerification] = useState('not_executed')
+  const [busy, setBusy] = useState(false)
+  const [notice, setNotice] = useState(null)
+  const { result, error, isPending, query } = useOne({ resource: 'tasks', id, queryOptions: { retry: false } })
+  const task = result
+  useTitle('CreatorHub · 任务详情')
+
+  if (isPending) return <PageState pending />
+  if (error || !task) return <Alert variant="destructive">{error?.message || '任务不存在'}</Alert>
+
+  async function runAction(action, data) {
+    setBusy(true)
+    setNotice(null)
+    try {
+      await dataProvider.taskAction(task.id, action, data)
+      setNotice({ variant: 'success', text: action === 'verify' ? '人工核验已记录；现在只能按该结论恢复或结束。' : action === 'resume' ? '任务已恢复排队。' : '任务已按核验结论结束。' })
+      await query.refetch()
+    } catch (reason) {
+      setNotice({ variant: 'destructive', text: actionErrorText(reason) })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const confirmation = task.confirmation || {}
+  const unknownHold = task.hold_reason && !holdText[task.hold_reason]
+
+  return (
+    <div>
+      <PageHeader title="任务详情" description={<span className="anywhere">{task.id}</span>}>
+        <Button icon="ri-arrow-left-line" onClick={() => navigate('/tasks')}>返回任务中心</Button>
+      </PageHeader>
+      {notice ? <Alert variant={notice.variant} className="mb-4">{notice.text}</Alert> : null}
+      {unknownHold ? <Alert variant="warning" className="mb-4">后端返回了未知停止原因“{task.hold_reason}”；为避免不安全操作，本页不提供恢复动作。</Alert> : null}
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardContent className="space-y-3">
+            <h2 className="text-base font-semibold">当前状态</h2>
+            <StatusPill tone={stateTone[task.state] || 'neutral'} label={stateLabel(task.state)} />
+            <DetailList rows={[
+              ['停止原因', <span className="anywhere">{holdLabel(task.hold_reason)}</span>],
+              ['人工核验', task.verification_result || '尚未记录'],
+            ]} />
+            <div>
+              <Button size="sm" as={Link} to={`/audit?task_id=${encodeURIComponent(task.id)}`}>查看关联审计</Button>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="space-y-3">
+            <h2 className="text-base font-semibold">确认快照</h2>
+            <DetailList rows={[
+              ['确认', <span className="anywhere">{confirmation.id || '未记录'} · v{confirmation.version || '—'}</span>],
+              ['版本', <>账号版本 {confirmation.account_version || '—'} · 草稿版本 {confirmation.draft_version || '—'}</>],
+              ['环境与出口', <span className="anywhere">{confirmation.browser_env_alias || '未记录'} · {confirmation.network_exit_id || '未记录'} · 绑定版本：{confirmation.binding_version || '未记录'}</span>],
+            ]} />
+            <div className="flex flex-wrap gap-2">
+              <Button size="sm" as={Link} to={`/accounts/${task.account_id}`}>查看账号</Button>
+              <Button size="sm" as={Link} to={`/drafts/${task.draft_id}`}>查看草稿</Button>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="space-y-3">
+            <h2 className="text-base font-semibold">执行关联</h2>
+            <DetailList rows={[
+              ['环境', <span className="anywhere">{task.browser_env_alias || '未记录'}</span>],
+              ['固定出口', <span className="anywhere">{task.network_exit_id || '未记录'}</span>],
+              ['运行实例 / 绑定版本', <span className="anywhere">{task.runtime_instance_id || '未记录'} · {task.binding_version || '未记录'}</span>],
+            ]} />
+            <div className="flex flex-wrap gap-2">
+              {task.browser_env_alias ? <Button size="sm" as={Link} to={`/browsers/${encodeURIComponent(task.browser_env_alias)}`}>查看原环境</Button> : null}
+              {task.network_exit_id ? <Button size="sm" as={Link} to={`/network-exits/${encodeURIComponent(task.network_exit_id)}`}>查看原出口</Button> : null}
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="space-y-3">
+            <h2 className="text-base font-semibold">唯一安全动作</h2>
+            {task.readiness_reason ? <Alert variant="warning">当前仍被阻断：{holdLabel(task.readiness_reason)}。修复原资源并刷新后，才会开放恢复。</Alert> : null}
+            {task.allowed_action === 'verify' ? (
+              <>
+                <Alert variant="warning">先在原环境和原出口核验真实结果。选择“未执行”不会立即重试，仍需下一步显式恢复。</Alert>
+                <Field id="task-verification" label="人工核验结论">
+                  <Select id="task-verification" value={verification} onChange={event => setVerification(event.target.value)} options={[
+                    { value: 'not_executed', label: '确认未执行，可评估恢复' },
+                    { value: 'succeeded', label: '确认已成功' },
+                    { value: 'failed', label: '确认已失败' },
+                  ]} />
+                </Field>
+                <Button variant="primary" disabled={busy} onClick={() => runAction('verify', { result: verification })}>记录人工核验</Button>
+              </>
+            ) : null}
+            {task.allowed_action === 'resume' ? <Button variant="primary" disabled={busy} onClick={() => runAction('resume')}>按核验结论恢复排队</Button> : null}
+            {task.allowed_action === 'finish' ? <Button variant="primary" disabled={busy} onClick={() => runAction('finish')}>按核验结论结束任务</Button> : null}
+            {task.allowed_action === 'reconfirm' ? (
+              <>
+                <Alert variant="warning">版本已变化，旧确认不可继续使用。</Alert>
+                <Button variant="primary" as={Link} to={`/drafts/${task.draft_id}`}>重新核对并确认草稿</Button>
+              </>
+            ) : null}
+            {task.allowed_action ? null : <p className="text-sm text-muted">当前没有可安全执行的动作。</p>}
+          </CardContent>
+        </Card>
+      </div>
+      <section className="mt-6">
+        <h2 className="mb-3 text-lg font-bold">执行尝试</h2>
+        {task.attempts?.length ? (
+          <div className="grid gap-4 md:grid-cols-2">
+            {task.attempts.map(attempt => (
+              <Card key={attempt.id}>
+                <CardContent>
+                  <Link to={`/attempts/${encodeURIComponent(attempt.id)}`} className="anywhere font-semibold text-primary hover:underline">{attempt.id}</Link>
+                  <p className="mt-1.5 text-sm">{attempt.outcome || '执行中'} · {new Date(attempt.started_at).toLocaleString('zh-CN')}</p>
+                  <p className="anywhere mt-1 text-sm">脱敏证据：{attempt.evidence?.mock_outcome || '无可公开证据'}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <Card><CardContent><p className="text-sm text-muted">尚未产生执行尝试。</p></CardContent></Card>
+        )}
+      </section>
+    </div>
+  )
+}
diff --git a/web/src/TaskCenter.test.jsx b/web/src/TasksPage.test.jsx
similarity index 65%
rename from web/src/TaskCenter.test.jsx
rename to web/src/TasksPage.test.jsx
index 5bb04e2..45e0a2a 100644
--- a/web/src/TaskCenter.test.jsx
+++ b/web/src/TasksPage.test.jsx
@@ -1,8 +1,9 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { CoreAdminContext } from 'ra-core'
-import { MemoryRouter, Route, Routes } from 'react-router-dom'
-import { TaskDetail } from './TaskCenter'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Refine } from '@refinedev/core'
+import { MemoryRouter, Route, Routes } from 'react-router'
+import { TaskDetail, TaskList } from './TasksPage'
 
 afterEach(() => { cleanup(); vi.restoreAllMocks() })
 
@@ -16,14 +17,31 @@ const task = {
 function provider(record = task) {
   return {
     getOne: vi.fn().mockResolvedValue({ data: record }),
+    getList: vi.fn(({ resource }) => Promise.resolve(resource === 'tasks' ? { data: [task], total: 1 } : { data: [], total: 0 })),
     taskAction: vi.fn().mockResolvedValue(),
-    getList: vi.fn(), getMany: vi.fn(), getManyReference: vi.fn(), create: vi.fn(), update: vi.fn(), updateMany: vi.fn(), delete: vi.fn(), deleteMany: vi.fn(),
+    getMany: vi.fn(), getManyReference: vi.fn(), create: vi.fn(), update: vi.fn(), updateMany: vi.fn(), delete: vi.fn(), deleteMany: vi.fn(),
   }
 }
 
-function renderTask(dataProvider) {
-  return render(<MemoryRouter initialEntries={['/tasks/task-a']}><CoreAdminContext dataProvider={dataProvider}><Routes><Route path="/tasks/:id" element={<TaskDetail />} /></Routes></CoreAdminContext></MemoryRouter>)
-}
+const queryClient = () => new QueryClient({ defaultOptions: { queries: { retry: false } } })
+
+const renderTask = dataProvider => render(
+  <QueryClientProvider client={queryClient()}>
+    <Refine dataProvider={dataProvider}>
+      <MemoryRouter initialEntries={['/tasks/task-a']}>
+        <Routes><Route path="/tasks/:id" element={<TaskDetail />} /></Routes>
+      </MemoryRouter>
+    </Refine>
+  </QueryClientProvider>,
+)
+
+const renderTasks = dataProvider => render(
+  <QueryClientProvider client={queryClient()}>
+    <Refine dataProvider={dataProvider}>
+      <MemoryRouter><TaskList /></MemoryRouter>
+    </Refine>
+  </QueryClientProvider>,
+)
 
 describe('TaskDetail', () => {
   it('requires a structured manual verification before any resume', async () => {
@@ -60,8 +78,20 @@ describe('TaskDetail', () => {
   it('renders a NULL confirmation without exposing recovery or reconfirm actions', async () => {
     renderTask(provider({ ...task, confirmation_id: '', confirmation: {}, hold_reason: 'confirmation_missing', allowed_action: '', attempts: [] }))
 
-    expect(await screen.findByText(/确认：未记录/)).toBeTruthy()
+    expect((await screen.findAllByText(/未记录/)).length).toBeGreaterThan(0)
     expect(screen.queryByRole('link', { name: '重新核对并确认草稿' })).toBeNull()
     expect(screen.queryByRole('button', { name: /恢复排队|记录人工核验|结束任务/ })).toBeNull()
   })
 })
+
+describe('TaskList', () => {
+  it('filters tasks by account and state through the data provider', async () => {
+    const dataProvider = provider()
+    renderTasks(dataProvider)
+
+    expect((await screen.findAllByText('task-a')).length).toBeGreaterThan(0)
+    fireEvent.change(screen.getByRole('textbox', { name: '按账号筛选' }), { target: { value: 'account-a' } })
+
+    await waitFor(() => expect(dataProvider.getList.mock.calls.some(([call]) => call.filters?.some(filter => filter.field === 'account_id' && filter.value === 'account-a'))).toBe(true))
+  })
+})
diff --git a/web/src/TraceDetails.jsx b/web/src/TraceDetails.jsx
deleted file mode 100644
index f236b53..0000000
--- a/web/src/TraceDetails.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useEffect } from 'react'
-import { useGetOne } from 'ra-core'
-import { Alert, Box, Button, CircularProgress, Paper, Stack, Typography } from '@mui/material'
-import { Link as RouterLink, useParams } from 'react-router-dom'
-
-const wrapAnywhere = { overflowWrap: 'anywhere', minWidth: 0 }
-
-function DetailState({ pending, error, children }) {
-  if (pending) return <Box sx={{ display: 'grid', placeItems: 'center', minHeight: 300 }}><CircularProgress aria-label="正在加载详情" /></Box>
-  if (error) return <Alert severity="error">{error.message}</Alert>
-  return children
-}
-
-export function AttemptDetail() {
-  const { id } = useParams()
-  const { data: attempt, error, isPending } = useGetOne('attempts', { id }, { retry: false })
-  useEffect(() => { document.title = 'CreatorHub · Attempt 详情' }, [])
-  return <DetailState pending={isPending} error={error}>{attempt ? <Box><Typography variant="h1" sx={wrapAnywhere}>Attempt 详情</Typography><Paper variant="outlined" sx={{ p: 3, mt: 3 }}><Stack spacing={1.5}><Typography fontWeight={700} sx={wrapAnywhere}>{attempt.id}</Typography><Typography>结果：{attempt.outcome || '执行中'}</Typography><Typography>开始：{new Date(attempt.started_at).toLocaleString('zh-CN')}</Typography><Typography sx={wrapAnywhere}>环境：{attempt.browser_env_alias || '未记录'} · 出口：{attempt.network_exit_id || '未记录'} · 绑定版本：{attempt.binding_version || '未记录'}</Typography><Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}><Button component={RouterLink} to={`/tasks/${encodeURIComponent(attempt.task_id)}`} variant="outlined">返回任务</Button><Button component={RouterLink} to={`/audit?attempt_id=${encodeURIComponent(attempt.id)}`} variant="outlined">查看审计</Button>{attempt.browser_env_alias ? <Button component={RouterLink} to={`/browsers/${encodeURIComponent(attempt.browser_env_alias)}`} variant="outlined">查看环境</Button> : null}{attempt.network_exit_id ? <Button component={RouterLink} to={`/network-exits/${encodeURIComponent(attempt.network_exit_id)}`} variant="outlined">查看出口</Button> : null}</Stack></Stack></Paper></Box> : null}</DetailState>
-}
-
-export function BrowserDetail() {
-  const { id } = useParams()
-  const { data: environment, error, isPending } = useGetOne('browsers', { id }, { retry: false })
-  useEffect(() => { document.title = 'CreatorHub · 环境详情' }, [])
-  return <DetailState pending={isPending} error={error}>{environment ? <Box><Typography variant="h1">运行环境详情</Typography><Paper variant="outlined" sx={{ p: 3, mt: 3 }}><Stack spacing={1.5}><Typography fontWeight={700} sx={wrapAnywhere}>{environment.name}（{environment.alias}）</Typography><Typography sx={wrapAnywhere}>账号：{environment.account_id} · 镜像：{environment.image_version}</Typography><Typography sx={wrapAnywhere}>固定出口：{environment.network_exit?.id || '未绑定'} · 健康：{environment.network_exit?.health_status || '未知'}</Typography><Typography>绑定版本：{environment.binding_version} · 运行实例：{environment.runtime_instance_id || '无'}</Typography><Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}><Button component={RouterLink} to={`/accounts/${encodeURIComponent(environment.account_id)}`} variant="outlined">查看账号</Button>{environment.network_exit?.id ? <Button component={RouterLink} to={`/network-exits/${encodeURIComponent(environment.network_exit.id)}`} variant="outlined">查看出口</Button> : null}<Button component={RouterLink} to={`/audit?browser_env_alias=${encodeURIComponent(environment.alias)}`} variant="outlined">查看审计</Button></Stack></Stack></Paper></Box> : null}</DetailState>
-}
-
-export function NetworkExitDetail() {
-  const { id } = useParams()
-  const { data: exit, error, isPending } = useGetOne('network-exits', { id }, { retry: false })
-  useEffect(() => { document.title = 'CreatorHub · 出口详情' }, [])
-  return <DetailState pending={isPending} error={error}>{exit ? <Box><Typography variant="h1">网络出口详情</Typography><Paper variant="outlined" sx={{ p: 3, mt: 3 }}><Stack spacing={1.5}><Typography fontWeight={700} sx={wrapAnywhere}>{exit.id}</Typography><Typography sx={wrapAnywhere}>{exit.protocol}://{exit.host}:{exit.port}</Typography><Typography>健康：{exit.health_status} · 版本：{exit.version}</Typography><Typography sx={wrapAnywhere}>凭据引用：{exit.credential_reference?.id || '无'}</Typography><Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}><Button component={RouterLink} to="/network-exits" variant="outlined">返回出口列表</Button><Button component={RouterLink} to={`/audit?network_exit_id=${encodeURIComponent(exit.id)}`} variant="outlined">查看审计</Button></Stack></Stack></Paper></Box> : null}</DetailState>
-}
diff --git a/web/src/TracePages.jsx b/web/src/TracePages.jsx
new file mode 100644
index 0000000..28a9c8d
--- /dev/null
+++ b/web/src/TracePages.jsx
@@ -0,0 +1,41 @@
+import { Link, useParams } from 'react-router'
+import { useOne } from '@refinedev/core'
+import { Alert, Button, Card, CardContent, DetailList, PageHeader, PageState } from './lib/ui.jsx'
+import { useTitle } from './lib/hooks.js'
+
+function PendingOrError({ pending, error, children }) {
+  if (pending) return <PageState pending />
+  if (error) return <Alert variant="destructive">{error.message}</Alert>
+  return children
+}
+
+export function AttemptDetail() {
+  const { id } = useParams()
+  const { result, error, isPending } = useOne({ resource: 'attempts', id, queryOptions: { retry: false } })
+  const attempt = result
+  useTitle('CreatorHub · Attempt 详情')
+  return (
+    <PendingOrError pending={isPending} error={error}>
+      {attempt ? (
+        <div>
+          <PageHeader title="Attempt 详情" description={<span className="anywhere">{attempt.id}</span>} />
+          <Card>
+            <CardContent className="space-y-4">
+              <DetailList rows={[
+                ['结果', attempt.outcome || '执行中'],
+                ['开始', new Date(attempt.started_at).toLocaleString('zh-CN')],
+                ['环境 / 出口 / 绑定版本', <span className="anywhere">{attempt.browser_env_alias || '未记录'} · {attempt.network_exit_id || '未记录'} · {attempt.binding_version || '未记录'}</span>],
+              ]} />
+              <div className="flex flex-wrap gap-3">
+                <Button as={Link} to={`/tasks/${encodeURIComponent(attempt.task_id)}`}>返回任务</Button>
+                <Button as={Link} to={`/audit?attempt_id=${encodeURIComponent(attempt.id)}`}>查看审计</Button>
+                {attempt.browser_env_alias ? <Button as={Link} to={`/browsers/${encodeURIComponent(attempt.browser_env_alias)}`}>查看环境</Button> : null}
+                {attempt.network_exit_id ? <Button as={Link} to={`/network-exits/${encodeURIComponent(attempt.network_exit_id)}`}>查看出口</Button> : null}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      ) : null}
+    </PendingOrError>
+  )
+}
diff --git a/web/src/dataProvider.js b/web/src/dataProvider.js
index fb1d6e7..44b9a41 100644
--- a/web/src/dataProvider.js
+++ b/web/src/dataProvider.js
@@ -1,10 +1,24 @@
-import { HttpError } from 'ra-core'
+// 401 = 未认证：抹去凭证并引导到登录页。开发代理下 401 由后端直接返回。
+const unauthorized = () => {
+  localStorage.removeItem('creatorhub.auth')
+  if (!location.hash.startsWith('#/login')) location.hash = '#/login'
+  return Object.assign(new Error('认证已过期，请重新登录'), { status: 401 })
+}
 
 async function request(path = '', options) {
-  const response = await fetch(`/api${path}`, options)
+  const auth = localStorage.getItem('creatorhub.auth')
+  const headers = { ...options?.headers }
+  if (auth) headers.Authorization = `Basic ${btoa(auth)}`
+  let response
+  try {
+    response = await fetch(`/api${path}`, { ...options, headers })
+  } catch (networkError) {
+    throw Object.assign(new Error(`网络请求失败：${networkError.message}`), { status: 0 })
+  }
+  if (response.status === 401) throw unauthorized()
   if (!response.ok) {
     const body = await response.json().catch(() => ({}))
-    throw new HttpError(body.error || `请求失败 (${response.status})`, response.status, body)
+    throw Object.assign(new Error(body.error || `请求失败 (${response.status})`), { status: response.status, body })
   }
   return response.status === 204 ? null : response.json()
 }
@@ -30,48 +44,54 @@ const resourcePaths = {
   'network-exits': '/network-exits',
 }
 
+const withID = (record, fallback) => ({ ...record, id: record.id ?? record.alias ?? record.version ?? record.name ?? fallback })
+
 export const dataProvider = {
-  async getList(resource, params = {}) {
+  // Refine v5 契约：所有方法收单个参数对象（getList 收 {resource, pagination, filters, meta}）。
+  async getList({ resource, pagination = {}, filters = [], meta = {} }) {
     const path = resourcePaths[resource]
     if (!path) return unsupported(resource, 'getList')
-    const filterKeys = {
-      drafts: ['account_id'], confirmations: ['draft_id'], tasks: ['account_id', 'draft_id', 'state'],
-      audit: ['account_id', 'task_id', 'attempt_id', 'browser_env_alias', 'network_exit_id', 'event_type', 'from', 'to'],
-    }[resource] || []
-    const query = new URLSearchParams(filterKeys.flatMap(key => params.filter?.[key] ? [[key, params.filter[key]]] : []))
+    // filters 为 [{field, value, operator}]；meta 是 Refine 透传的查询上下文。
+    const valueOf = field => {
+      const direct = meta?.[field]
+      if (direct !== undefined) return direct
+      const entry = filters?.find(item => item.field === field)
+      return entry?.value !== undefined && entry.value !== null && entry.value !== '' ? entry.value : undefined
+    }
+    const query = new URLSearchParams(filterKeys(resource).flatMap(field => valueOf(field) !== undefined ? [[field, valueOf(field)]] : []))
     if (resource === 'audit') {
-      query.set('page', params.pagination?.page || 1)
-      query.set('page_size', params.pagination?.perPage || 25)
+      query.set('page', pagination.currentPage || pagination.page || 1)
+      query.set('page_size', pagination.pageSize || pagination.perPage || 25)
     }
     const records = await request(`${path}${query.size ? `?${query}` : ''}`)
     const data = Array.isArray(records) ? records : records.data
-    return { data: data.map(record => ({ ...record, id: record.id ?? record.alias ?? record.version ?? record.name })), total: records.total ?? data.length }
+    return { data: data.map((record, index) => withID(record, index)), total: records.total ?? data.length }
   },
-  async create(resource, { data }) {
-    const path = resourcePaths[resource]
-    if (!path) return unsupported(resource, 'create')
-    const created = await request(path, jsonOptions('POST', data))
-    return { data: { ...data, ...created, id: created?.id ?? created?.alias ?? created?.version ?? created?.name ?? data.id ?? data.alias } }
-  },
-  async update(resource, { id, data }) {
-    const path = resourcePaths[resource]
-    if (!path || resource === 'browsers') return unsupported(resource, 'update')
-    // browser-images 的 PUT 不接受 version 字段（路径已携带），透传其余字段。
-    const { version: _ignored, ...rest } = data ?? {}
-    await request(`${path}/${encodeURIComponent(id)}`, jsonOptions('PUT', rest))
-    return { data: { ...rest, id } }
-  },
-  async delete(resource, { id }) {
-    const path = resourcePaths[resource]
-    if (!path) return unsupported(resource, 'delete')
-    await request(`${path}/${encodeURIComponent(id)}`, { method: 'DELETE' })
-    return { data: { id } }
-  },
-  async getOne(resource, { id }) {
+  async getOne({ resource, id }) {
     const path = resourcePaths[resource]
     if (!path || !['accounts', 'network-exits', 'browsers', 'drafts', 'confirmations', 'tasks', 'attempts'].includes(resource)) return unsupported(resource, 'getOne')
     const record = await request(`${path}/${encodeURIComponent(id)}`)
-    return { data: { ...record, id: record.id ?? id } }
+    return { data: withID(record, id) }
+  },
+  async create({ resource, variables }) {
+    const path = resourcePaths[resource]
+    if (!path) return unsupported(resource, 'create')
+    const created = await request(path, jsonOptions('POST', variables))
+    return { data: withID({ ...variables, ...created }, variables.id ?? variables.alias) }
+  },
+  async update({ resource, id, variables }) {
+    const path = resourcePaths[resource]
+    if (!path || resource === 'browsers') return unsupported(resource, 'update')
+    // browser-images 的 PUT 不接受 version 字段（路径已携带），透传其余字段。
+    const { version: _ignored, ...rest } = variables ?? {}
+    await request(`${path}/${encodeURIComponent(id)}`, jsonOptions('PUT', rest))
+    return { data: { ...rest, id } }
+  },
+  async deleteOne({ resource, id }) {
+    const path = resourcePaths[resource]
+    if (!path || resource !== 'browser-images') return unsupported(resource, 'deleteOne')
+    await request(`${path}/${encodeURIComponent(id)}`, { method: 'DELETE' })
+    return { data: { id } }
   },
   getMany: resource => unsupported(resource, 'getMany'),
   getManyReference: resource => unsupported(resource, 'getManyReference'),
@@ -119,3 +139,10 @@ export const dataProvider = {
     return request(`/network-exits/${encodeURIComponent(id)}/${action}`, { method: 'POST' })
   },
 }
+
+function filterKeys(resource) {
+  return {
+    drafts: ['account_id'], confirmations: ['draft_id'], tasks: ['account_id', 'draft_id', 'state'],
+    audit: ['account_id', 'task_id', 'attempt_id', 'browser_env_alias', 'network_exit_id', 'event_type', 'from', 'to'],
+  }[resource] || []
+}
diff --git a/web/src/dataProvider.test.js b/web/src/dataProvider.test.js
index 7a62d4f..a898ced 100644
--- a/web/src/dataProvider.test.js
+++ b/web/src/dataProvider.test.js
@@ -3,16 +3,38 @@ import { dataProvider } from './dataProvider'
 
 afterEach(() => vi.unstubAllGlobals())
 
+const httpError = (message, status, body) => Object.assign(new Error(message), { status, body })
+
 describe('dataProvider', () => {
-  it('maps the existing browser list into react-admin records', async () => {
+  it('maps the existing browser list into refine records', async () => {
     const fetch = vi.fn().mockResolvedValue(new Response(JSON.stringify([{ name: 'account-a', state: 'running' }]), { status: 200 }))
     vi.stubGlobal('fetch', fetch)
 
-    await expect(dataProvider.getList('browsers')).resolves.toEqual({
+    await expect(dataProvider.getList({ resource: 'browsers' })).resolves.toEqual({
       data: [{ id: 'account-a', name: 'account-a', state: 'running' }],
       total: 1,
     })
-    expect(fetch).toHaveBeenCalledWith('/api/browsers', undefined)
+    expect(fetch).toHaveBeenCalledWith('/api/browsers', { headers: {} })
+  })
+
+  it('attaches Basic credentials from localStorage', async () => {
+    localStorage.setItem('creatorhub.auth', 'user:pass')
+    const fetch = vi.fn().mockResolvedValue(new Response('[]', { status: 200 }))
+    vi.stubGlobal('fetch', fetch)
+
+    await dataProvider.getList({ resource: 'browsers' })
+    expect(fetch).toHaveBeenCalledWith('/api/browsers', { headers: { Authorization: 'Basic dXNlcjpwYXNz' } })
+    localStorage.removeItem('creatorhub.auth')
+  })
+
+  it('clears credentials and redirects to login on 401', async () => {
+    localStorage.setItem('creatorhub.auth', 'user:pass')
+    const fetch = vi.fn().mockResolvedValue(new Response('', { status: 401 }))
+    vi.stubGlobal('fetch', fetch)
+
+    await expect(dataProvider.getList({ resource: 'browsers' })).rejects.toMatchObject({ status: 401 })
+    expect(localStorage.getItem('creatorhub.auth')).toBeNull()
+    expect(location.hash).toBe('#/login')
   })
 
   it.each([
@@ -22,8 +44,8 @@ describe('dataProvider', () => {
     const fetch = vi.fn().mockResolvedValue(new Response('[{"id":"record-1"}]', { status: 200 }))
     vi.stubGlobal('fetch', fetch)
 
-    await expect(dataProvider.getList(resource)).resolves.toMatchObject({ data: [{ id: 'record-1' }] })
-    expect(fetch).toHaveBeenCalledWith(path, undefined)
+    await expect(dataProvider.getList({ resource })).resolves.toMatchObject({ data: [{ id: 'record-1' }] })
+    expect(fetch).toHaveBeenCalledWith(path, { headers: {} })
   })
 
   it.each([
@@ -38,8 +60,8 @@ describe('dataProvider', () => {
     const fetch = vi.fn().mockResolvedValue(new Response(JSON.stringify({ id }), { status: 200 }))
     vi.stubGlobal('fetch', fetch)
 
-    await expect(dataProvider.getOne(resource, { id })).resolves.toEqual({ data: { id } })
-    expect(fetch).toHaveBeenCalledWith(path, undefined)
+    await expect(dataProvider.getOne({ resource, id })).resolves.toEqual({ data: { id } })
+    expect(fetch).toHaveBeenCalledWith(path, { headers: {} })
   })
 
   it('creates an account without a client-generated technical id', async () => {
@@ -47,7 +69,7 @@ describe('dataProvider', () => {
     vi.stubGlobal('fetch', fetch)
     const data = { name: '店铺一号', platform: 'douyin', platform_account_key: 'shop-a', tags: ['主账号'], cookies: 'sessionid=value' }
 
-    await expect(dataProvider.create('accounts', { data })).resolves.toEqual({ data: { ...data, id: 'account-generated' } })
+    await expect(dataProvider.create({ resource: 'accounts', variables: data })).resolves.toEqual({ data: { ...data, id: 'account-generated' } })
     expect(fetch).toHaveBeenCalledWith('/api/phase-a/accounts', expect.objectContaining({ method: 'POST' }))
     expect(JSON.parse(fetch.mock.calls[0][1].body)).toEqual(data)
   })
@@ -56,18 +78,24 @@ describe('dataProvider', () => {
     const fetch = vi.fn().mockResolvedValue(new Response('[]', { status: 200 }))
     vi.stubGlobal('fetch', fetch)
 
-    await dataProvider.getList('drafts', { filter: { account_id: 'account-a' } })
-    expect(fetch).toHaveBeenCalledWith('/api/phase-a/drafts?account_id=account-a', undefined)
+    await dataProvider.getList({ resource: 'drafts', filters: [{ field: 'account_id', value: 'account-a' }] })
+    expect(fetch).toHaveBeenCalledWith('/api/phase-a/drafts?account_id=account-a', { headers: {} })
   })
 
   it('maps paginated audit filters without exposing a CRUD mutation', async () => {
     const fetch = vi.fn().mockResolvedValue(new Response('{"data":[{"id":7,"event_type":"task_verified"}],"total":31}', { status: 200 }))
     vi.stubGlobal('fetch', fetch)
 
-    await expect(dataProvider.getList('audit', { pagination: { page: 2, perPage: 25 }, filter: { task_id: 'task-a', attempt_id: 'attempt-a', browser_env_alias: 'env-a', network_exit_id: 'exit-a' } })).resolves.toEqual({
+    await expect(dataProvider.getList({ resource: 'audit',
+      pagination: { currentPage: 2, pageSize: 25 },
+      filters: [
+        { field: 'task_id', value: 'task-a' }, { field: 'attempt_id', value: 'attempt-a' },
+        { field: 'browser_env_alias', value: 'env-a' }, { field: 'network_exit_id', value: 'exit-a' },
+      ],
+    })).resolves.toEqual({
       data: [{ id: 7, event_type: 'task_verified' }], total: 31,
     })
-    expect(fetch).toHaveBeenCalledWith('/api/phase-a/audit?task_id=task-a&attempt_id=attempt-a&browser_env_alias=env-a&network_exit_id=exit-a&page=2&page_size=25', undefined)
+    expect(fetch).toHaveBeenCalledWith('/api/phase-a/audit?task_id=task-a&attempt_id=attempt-a&browser_env_alias=env-a&network_exit_id=exit-a&page=2&page_size=25', { headers: {} })
   })
 
   it('keeps generated draft, confirmation and enqueue identifiers out of user input', async () => {
@@ -94,13 +122,21 @@ describe('dataProvider', () => {
     vi.stubGlobal('fetch', fetch)
 
     await dataProvider.browserAction('account-a', action)
-    expect(fetch).toHaveBeenCalledWith(path, { method })
+    expect(fetch).toHaveBeenCalledWith(path, expect.objectContaining({ method }))
+  })
+
+  it('sends upgrade with the version payload', async () => {
+    const fetch = vi.fn().mockResolvedValue(new Response(null, { status: 204 }))
+    vi.stubGlobal('fetch', fetch)
+
+    await dataProvider.browserAction('account-a', 'upgrade', { version: '144.0.0.1' })
+    expect(fetch).toHaveBeenCalledWith('/api/browsers/account-a/upgrade', expect.objectContaining({ method: 'POST', body: '{"version":"144.0.0.1"}' }))
   })
 
   it('preserves API error messages and status codes', async () => {
     vi.stubGlobal('fetch', vi.fn().mockResolvedValue(new Response(JSON.stringify({ error: '网关不可用' }), { status: 502 })))
 
-    await expect(dataProvider.getList('browsers')).rejects.toMatchObject({ message: '网关不可用', status: 502 })
+    await expect(dataProvider.getList({ resource: 'browsers' })).rejects.toMatchObject({ message: '网关不可用', status: 502 })
   })
 
   it.each([409, 503])('preserves structured action errors for status %s', async status => {
@@ -119,7 +155,7 @@ describe('dataProvider', () => {
     vi.stubGlobal('fetch', fetch)
 
     await dataProvider.accountAction('account-a', action)
-    expect(fetch).toHaveBeenCalledWith(path, { method: 'POST' })
+    expect(fetch).toHaveBeenCalledWith(path, { method: 'POST', headers: {} })
   })
 
   it('keeps verification and recovery as separate task actions', async () => {
@@ -131,7 +167,7 @@ describe('dataProvider', () => {
 
     expect(fetch.mock.calls).toEqual([
       ['/api/phase-a/tasks/task%2Fa/verify', expect.objectContaining({ method: 'POST', body: '{"result":"not_executed"}' })],
-      ['/api/phase-a/tasks/task%2Fa/resume', { method: 'POST' }],
+      ['/api/phase-a/tasks/task%2Fa/resume', { method: 'POST', headers: {} }],
     ])
   })
 })
diff --git a/web/src/layout.jsx b/web/src/layout.jsx
deleted file mode 100644
index 6fe6fbb..0000000
--- a/web/src/layout.jsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useState } from 'react'
-import { NavLink } from 'react-router-dom'
-import {
-  AppBar,
-  Box,
-  Drawer,
-  IconButton,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Toolbar,
-  Typography,
-  useMediaQuery,
-} from '@mui/material'
-import ChevronLeft from '@mui/icons-material/ChevronLeft'
-import ChevronRight from '@mui/icons-material/ChevronRight'
-import AccountCircleOutlined from '@mui/icons-material/AccountCircleOutlined'
-import AssignmentTurnedInOutlined from '@mui/icons-material/AssignmentTurnedInOutlined'
-import DnsOutlined from '@mui/icons-material/DnsOutlined'
-import HistoryOutlined from '@mui/icons-material/HistoryOutlined'
-import HubOutlined from '@mui/icons-material/HubOutlined'
-import Inventory2Outlined from '@mui/icons-material/Inventory2Outlined'
-import MenuIcon from '@mui/icons-material/Menu'
-import PublicOutlined from '@mui/icons-material/PublicOutlined'
-import WidgetsOutlined from '@mui/icons-material/WidgetsOutlined'
-import { useTheme } from '@mui/material/styles'
-
-const expandedWidth = 240
-const collapsedWidth = 76
-
-export function CreatorHubMenu({ collapsed, onNavigate }) {
-  return (
-    <>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.4, height: 70, px: collapsed ? 2.5 : 2.75 }}>
-        <WidgetsOutlined sx={{ color: '#1680ff', fontSize: 30 }} />
-        {collapsed ? null : <Typography variant="h6" sx={{ color: '#fff', fontWeight: 760 }}>CreatorHub</Typography>}
-      </Box>
-      <Box component="nav" aria-label="主导航" sx={{ px: 1.5, pt: 2 }}>
-        {collapsed ? null : <Typography variant="overline" sx={{ display: 'block', px: 1.25, mb: 0.75, color: '#7f94b2', fontWeight: 700 }}>运营</Typography>}
-        <ListItemButton component={NavLink} to="/accounts" aria-label="社媒账号" onClick={onNavigate} sx={{ minHeight: 52, mb: 1.25, borderRadius: 1, color: '#a9b7cc', justifyContent: collapsed ? 'center' : 'flex-start', '&.active': { color: '#fff', bgcolor: '#0866ef' }, '&:hover': { bgcolor: '#0b2a54' }, '&.active:hover': { bgcolor: '#0866ef' } }}>
-          <ListItemIcon sx={{ minWidth: collapsed ? 0 : 42, color: 'inherit' }}><AccountCircleOutlined /></ListItemIcon>
-          {collapsed ? null : <ListItemText primary="社媒账号" />}
-        </ListItemButton>
-        <ListItemButton component={NavLink} to="/tasks" aria-label="任务中心" onClick={onNavigate} sx={{ minHeight: 52, mb: 1.25, borderRadius: 1, color: '#a9b7cc', justifyContent: collapsed ? 'center' : 'flex-start', '&.active': { color: '#fff', bgcolor: '#0866ef' }, '&:hover': { bgcolor: '#0b2a54' }, '&.active:hover': { bgcolor: '#0866ef' } }}>
-          <ListItemIcon sx={{ minWidth: collapsed ? 0 : 42, color: 'inherit' }}><AssignmentTurnedInOutlined /></ListItemIcon>
-          {collapsed ? null : <ListItemText primary="任务中心" />}
-        </ListItemButton>
-        <ListItemButton component={NavLink} to="/audit" aria-label="审计记录" onClick={onNavigate} sx={{ minHeight: 52, mb: 2, borderRadius: 1, color: '#a9b7cc', justifyContent: collapsed ? 'center' : 'flex-start', '&.active': { color: '#fff', bgcolor: '#0866ef' }, '&:hover': { bgcolor: '#0b2a54' }, '&.active:hover': { bgcolor: '#0866ef' } }}>
-          <ListItemIcon sx={{ minWidth: collapsed ? 0 : 42, color: 'inherit' }}><HistoryOutlined /></ListItemIcon>
-          {collapsed ? null : <ListItemText primary="审计记录" />}
-        </ListItemButton>
-        {collapsed ? null : <Typography variant="overline" sx={{ display: 'block', px: 1.25, mb: 0.75, color: '#7f94b2', fontWeight: 700 }}>资源</Typography>}
-        <ListItemButton component={NavLink} to="/browsers" aria-label="运行环境" onClick={onNavigate} sx={{ minHeight: 52, mb: 1.25, borderRadius: 1, color: '#a9b7cc', justifyContent: collapsed ? 'center' : 'flex-start', '&.active': { color: '#fff', bgcolor: '#0866ef' }, '&:hover': { bgcolor: '#0b2a54' }, '&.active:hover': { bgcolor: '#0866ef' } }}>
-          <ListItemIcon sx={{ minWidth: collapsed ? 0 : 42, color: 'inherit' }}><DnsOutlined /></ListItemIcon>
-          {collapsed ? null : <ListItemText primary="运行环境" />}
-        </ListItemButton>
-        <ListItemButton component={NavLink} to="/network-exits" aria-label="网络出口" onClick={onNavigate} sx={{ minHeight: 52, mb: 1.25, borderRadius: 1, color: '#a9b7cc', justifyContent: collapsed ? 'center' : 'flex-start', '&.active': { color: '#fff', bgcolor: '#0866ef' }, '&:hover': { bgcolor: '#0b2a54' }, '&.active:hover': { bgcolor: '#0866ef' } }}>
-          <ListItemIcon sx={{ minWidth: collapsed ? 0 : 42, color: 'inherit' }}><PublicOutlined /></ListItemIcon>
-          {collapsed ? null : <ListItemText primary="网络出口" />}
-        </ListItemButton>
-        <ListItemButton component={NavLink} to="/browser-images" aria-label="镜像版本" onClick={onNavigate} sx={{ minHeight: 52, mb: 1.25, borderRadius: 1, color: '#a9b7cc', justifyContent: collapsed ? 'center' : 'flex-start', '&.active': { color: '#fff', bgcolor: '#0866ef' }, '&:hover': { bgcolor: '#0b2a54' }, '&.active:hover': { bgcolor: '#0866ef' } }}>
-          <ListItemIcon sx={{ minWidth: collapsed ? 0 : 42, color: 'inherit' }}><Inventory2Outlined /></ListItemIcon>
-          {collapsed ? null : <ListItemText primary="镜像版本" />}
-        </ListItemButton>
-        <ListItemButton component={NavLink} to="/gateways" aria-label="网关管理" onClick={onNavigate} sx={{ minHeight: 52, mb: 1.25, borderRadius: 1, color: '#a9b7cc', justifyContent: collapsed ? 'center' : 'flex-start', '&.active': { color: '#fff', bgcolor: '#0866ef' }, '&:hover': { bgcolor: '#0b2a54' }, '&.active:hover': { bgcolor: '#0866ef' } }}>
-          <ListItemIcon sx={{ minWidth: collapsed ? 0 : 42, color: 'inherit' }}><HubOutlined /></ListItemIcon>
-          {collapsed ? null : <ListItemText primary="网关管理" />}
-        </ListItemButton>
-      </Box>
-    </>
-  )
-}
-
-export function CreatorHubLayout({ children }) {
-  const theme = useTheme()
-  const desktop = useMediaQuery(theme.breakpoints.up('md'))
-  const [collapsed, setCollapsed] = useState(false)
-  const [mobileOpen, setMobileOpen] = useState(false)
-  const width = collapsed ? collapsedWidth : expandedWidth
-
-  return (
-    <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'background.default' }}>
-      <AppBar position="fixed" color="inherit" elevation={0} sx={{ width: desktop ? `calc(100% - ${width}px)` : '100%', ml: desktop ? `${width}px` : 0, borderBottom: '1px solid', borderColor: 'divider', transition: theme.transitions.create(['width', 'margin']) }}>
-        <Toolbar sx={{ minHeight: '70px !important' }}>
-          <IconButton aria-label={desktop ? (collapsed ? '展开导航' : '收起导航') : '打开导航'} onClick={() => desktop ? setCollapsed(value => !value) : setMobileOpen(true)} edge="start">
-            <MenuIcon />
-          </IconButton>
-        </Toolbar>
-      </AppBar>
-
-      <Drawer variant={desktop ? 'permanent' : 'temporary'} open={desktop || mobileOpen} onClose={() => setMobileOpen(false)} ModalProps={{ keepMounted: true }} sx={{ width: desktop ? width : expandedWidth, flexShrink: 0, '& .MuiDrawer-paper': { width: desktop ? width : expandedWidth, border: 0, bgcolor: '#061a38', color: '#fff', transition: theme.transitions.create('width'), overflowX: 'hidden' } }}>
-        <CreatorHubMenu collapsed={desktop && collapsed} onNavigate={() => setMobileOpen(false)} />
-        {desktop ? <IconButton aria-label={collapsed ? '展开导航' : '收起导航'} onClick={() => setCollapsed(value => !value)} sx={{ position: 'absolute', right: 16, bottom: 24, color: '#a9b7cc', border: '1px solid #35506f' }}>{collapsed ? <ChevronRight /> : <ChevronLeft />}</IconButton> : null}
-      </Drawer>
-
-      <Box component="main" sx={{ flex: 1, minWidth: 0, mt: '70px', px: { xs: 2, sm: 3, lg: 4.5 }, py: { xs: 3, lg: 4.5 }, transition: theme.transitions.create('width') }}>
-        <Box sx={{ width: '100%', maxWidth: 1280 }}>{children}</Box>
-      </Box>
-    </Box>
-  )
-}
diff --git a/web/src/lib/hooks.js b/web/src/lib/hooks.js
new file mode 100644
index 0000000..eeb1458
--- /dev/null
+++ b/web/src/lib/hooks.js
@@ -0,0 +1,16 @@
+import { useEffect } from 'react'
+
+export function useTitle(title) {
+  useEffect(() => { document.title = title }, [title])
+}
+
+// 401 之外的业务错误（404/409/503…）直接展示后端 message；401 在 dataProvider 里转跳登录页。
+export function displayError(error) {
+  return error?.message || '操作失败'
+}
+
+export function conflictError(error, fallback) {
+  if (error?.status === 409) return `冲突（409）：${error.body?.reason || fallback}`
+  if (error?.status === 503) return `资源未就绪（503）：${error.message}`
+  return displayError(error)
+}
diff --git a/web/src/lib/ui.jsx b/web/src/lib/ui.jsx
new file mode 100644
index 0000000..fc8a400
--- /dev/null
+++ b/web/src/lib/ui.jsx
@@ -0,0 +1,350 @@
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import { createPortal } from 'react-dom'
+import { useEffect, useRef, useState } from 'react'
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}
+
+export function apiMessage(error) {
+  return error?.message || '操作失败'
+}
+
+export function conflictMessage(error, fallback) {
+  if (error?.status === 409) return `冲突（409）：${fallback}`
+  if (error?.status === 503) return `环境不可用（503）：${error.message}`
+  return apiMessage(error)
+}
+
+export const dateTime = value => new Date(value).toLocaleString('zh-CN')
+
+/**
+ * 页面加载/错误/空态的统一外壳。
+ */
+export function PageState({ pending, error, empty, emptyText, retryLabel = '重试', onRetry, children }) {
+  if (pending) {
+    return <div className="flex items-center justify-center py-20" role="status" aria-label="正在加载"><i className="ri-loader-4-line animate-spin text-2xl text-muted" /></div>
+  }
+  if (error) {
+    return (
+      <Alert variant="destructive" className="mb-6">
+        <p>{apiMessage(error)}</p>
+        {onRetry ? <Button variant="outline" size="sm" onClick={onRetry}>{retryLabel}</Button> : null}
+      </Alert>
+    )
+  }
+  if (empty) return <EmptyState text={emptyText} />
+  return children
+}
+
+export function EmptyState({ text, children }) {
+  return (
+    <Card>
+      <CardContent className="py-14 text-center">
+        <p className="text-sm text-muted">{text}</p>
+        {children}
+      </CardContent>
+    </Card>
+  )
+}
+
+export function Alert({ variant = 'info', className, children, ...props }) {
+  const styles = {
+    info: 'text-muted bg-[#f5f7fa] border-hairline',
+    success: 'text-success bg-[#f0f9f4] border-[#b6dfc8]',
+    warning: 'text-warning bg-[#fdf6ec] border-[#eedcbb]',
+    destructive: 'text-danger bg-[#fdf1f0] border-[#f1c7c2]',
+  }[variant]
+  return (
+    <div role="alert" className={cn('flex flex-wrap items-center gap-3 rounded-lg border px-4 py-3 text-sm', styles, className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+const buttonVariants = {
+  primary: 'bg-primary text-white hover:bg-primary-dark disabled:bg-primary/50',
+  outline: 'border border-[#c4ccd9] bg-white text-ink hover:bg-[#f5f7fa] disabled:text-muted/60 disabled:border-hairline disabled:bg-white',
+  ghost: 'text-primary hover:bg-primary/10 disabled:text-primary/50',
+  danger: 'border border-[#e4b7b2] bg-white text-danger hover:bg-[#fdf1f0] disabled:text-danger/50',
+}
+
+export function Button({ variant = 'outline', size = 'md', type = 'button', icon, as: Component = 'button', className, busy, busyText, children, ...props }) {
+  const sizes = { sm: 'h-8 px-3 text-xs', md: 'h-10 px-4 text-sm' }
+  return (
+    <Component type={Component === 'button' ? type : undefined} className={cn('inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md font-medium no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:pointer-events-none', sizes[size], buttonVariants[variant], className)} {...props}>
+      {busy ? (busyText || '处理中…') : <>{icon ? <i className={icon} aria-hidden="true" /> : null}{children}</>}
+    </Component>
+  )
+}
+
+export function Card({ className, ...props }) {
+  return <div className={cn('min-w-0 rounded-lg border border-hairline bg-white', className)} {...props} />
+}
+
+export function CardContent({ className, ...props }) {
+  return <div className={cn('p-5', className)} {...props} />
+}
+
+export function PageHeader({ icon, title, description, children }) {
+  return (
+    <header className="mb-7 flex flex-wrap items-start justify-between gap-4">
+      <div className="min-w-0">
+        <h1 className="flex items-center gap-2.5 text-2xl font-bold tracking-tight">
+          {icon ? <i className={icon} aria-hidden="true" /> : null}
+          {title}
+        </h1>
+        {description ? <p className="mt-1.5 text-sm text-muted">{description}</p> : null}
+      </div>
+      {children ? <div className="flex flex-wrap items-center gap-3">{children}</div> : null}
+    </header>
+  )
+}
+
+/**
+ * 受控 Input / Select / Textarea。label 关联控件 id；helper 与 error 文案同槽位。
+ */
+export function Field({ id, label, required, helper, error, children, className }) {
+  const helpId = helper || error ? `${id}-help` : undefined
+  const describedBy = error ? `${id}-error` : helpId
+  const control = children
+  return (
+    <div className={cn('min-w-0 space-y-1.5', className)}>
+      <label htmlFor={id} className="block text-sm font-medium text-ink">
+        {label} {required ? <span className="text-danger" aria-hidden="true">*</span> : null}
+      </label>
+      {control}
+      {error ? <p id={`${id}-error`} className="text-xs text-danger">{error}</p> : helper ? <p id={helpId} className="text-xs text-muted">{helper}</p> : null}
+    </div>
+  )
+}
+
+export function Input({ invalid, className, ...props }) {
+  return <input className={cn('h-10 w-full rounded-md border bg-white px-3 text-sm text-ink placeholder:text-muted/60 focus:border-primary focus:outline-none disabled:bg-[#f5f7fa] disabled:text-muted', invalid ? 'border-danger' : 'border-[#c4ccd9]', className)} aria-invalid={invalid || undefined} {...props} />
+}
+
+export function Textarea({ invalid, className, ...props }) {
+  return <textarea className={cn('min-h-[96px] w-full rounded-md border bg-white px-3 py-2 text-sm text-ink placeholder:text-muted/60 focus:border-primary focus:outline-none disabled:bg-[#f5f7fa] disabled:text-muted', invalid ? 'border-danger' : 'border-[#c4ccd9]', className)} aria-invalid={invalid || undefined} {...props} />
+}
+
+export function Select({ id, value, onChange, options, placeholder = '请选择', emptyOption, disabled, invalid, className }) {
+  const [open, setOpen] = useState(false)
+  const [active, setActive] = useState(-1)
+  const root = useRef(null)
+  const selected = options.find(option => option.value === value) || (value === '' ? null : { value, label: value })
+  const label = selected ? selected.label : placeholder
+  const items = emptyOption !== undefined ? [{ value: emptyOption.value, label: emptyOption.label }, ...options] : options
+  const close = () => { setOpen(false); setActive(-1) }
+  const commit = item => {
+    onChange({ target: { value: item.value } })
+    close()
+    root.current?.querySelector('button')?.focus()
+  }
+  useEffect(() => {
+    if (!open) return
+    const onDocClick = event => { if (!root.current?.contains(event.target)) close() }
+    document.addEventListener('mousedown', onDocClick)
+    return () => document.removeEventListener('mousedown', onDocClick)
+  }, [open])
+  const handleKeyDown = event => {
+    if (event.key === 'Escape') {
+      event.stopPropagation()
+      close()
+      return
+    }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault()
+      if (!open) { setOpen(true); setActive(items.findIndex(item => item.value === value)) ; return }
+      setActive(current => {
+        const next = event.key === 'ArrowDown' ? Math.min(current + 1, items.length - 1) : Math.max(current - 1, 0)
+        return next
+      })
+      return
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      if (open) {
+        const item = items[Math.max(active, 0)]
+        if (item) commit(item)
+      } else {
+        setOpen(true)
+        setActive(Math.max(items.findIndex(item => item.value === value), 0))
+      }
+      return
+    }
+    if (event.key === 'Home') setActive(0)
+    if (event.key === 'End') setActive(items.length - 1)
+  }
+  return (
+    <div className={cn('relative', className)} ref={root} onKeyDown={handleKeyDown}>
+      <button
+        type="button"
+        id={id}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={`${id}-listbox`}
+        aria-activedescendant={open && active >= 0 ? `${id}-option-${active}` : undefined}
+        aria-invalid={invalid || undefined}
+        disabled={disabled}
+        onClick={() => { setOpen(value => !value); setActive(items.findIndex(item => item.value === value)) }}
+        className={cn('flex h-10 w-full items-center justify-between gap-2 rounded-md border bg-white px-3 text-left text-sm focus:border-primary focus:outline-none disabled:bg-[#f5f7fa] disabled:text-muted', invalid ? 'border-danger' : 'border-[#c4ccd9]', label === placeholder && 'text-muted')}
+      >
+        <span className="truncate">{label}</span>
+        <i className="ri-arrow-down-s-line shrink-0 text-muted" aria-hidden="true" />
+      </button>
+      {open ? (
+        <ul role="listbox" id={`${id}-listbox`} aria-labelledby={id} className="absolute z-20 mt-1 max-h-64 w-full overflow-auto rounded-md border border-hairline bg-white py-1 shadow-lg">
+          {items.map((item, index) => (
+            <li key={item.value} id={`${id}-option-${index}`} role="option" data-value={item.value} aria-selected={value === item.value}
+              className={cn('cursor-pointer px-3 py-1.5 text-sm', value === item.value ? 'bg-primary/10 font-medium' : 'hover:bg-[#f5f7fa]', active === index && 'bg-primary/10')}
+              onClick={() => commit(item)}>{item.label}</li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  )
+}
+
+/**
+ * Modal：radix Dialog 风格的轻实现。
+ */
+export function Modal({ open, onClose, title, children, footer, labelledBy, size = 'md' }) {
+  const restoreFocus = useRef(null)
+  useEffect(() => {
+    if (open) {
+      restoreFocus.current = document.activeElement
+      return
+    }
+    // 关闭时把焦点还给触发元素（与 MUI/Radix Dialog 行为一致，键盘用户不会丢失位置）
+    const trigger = restoreFocus.current
+    restoreFocus.current = null
+    if (trigger && trigger.isConnected && typeof trigger.focus === 'function') trigger.focus()
+  }, [open])
+  useEffect(() => {
+    if (!open) return
+    const onKey = event => { if (event.key === 'Escape') onClose?.() }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [open, onClose])
+  if (!open) return null
+  const widths = { sm: 'max-w-md', md: 'max-w-lg', lg: 'max-w-2xl' }
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 p-4 sm:items-center" onMouseDown={event => { if (event.target === event.currentTarget) onClose?.() }}>
+      <div role="dialog" aria-modal="true" aria-labelledby={labelledBy} className={cn('relative w-full rounded-lg border border-hairline bg-white shadow-xl', widths[size])}>
+        <div className="flex items-start justify-between border-b border-hairline px-5 py-4">
+          <h2 id={labelledBy} className="min-w-0 text-base font-semibold">{title}</h2>
+          <button type="button" aria-label="关闭" onClick={onClose} className="rounded-md p-1 text-muted hover:bg-[#f5f7fa]"><i className="ri-close-line" aria-hidden="true" /></button>
+        </div>
+        <div className="max-h-[70vh] overflow-y-auto px-5 py-4">{children}</div>
+        {footer ? <div className="flex justify-end gap-3 border-t border-hairline px-5 py-3.5">{footer}</div> : null}
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+export function ConfirmDialog({ open, onClose, onConfirm, title, body, confirmLabel = '确认', busy }) {
+  return (
+    <Modal open={open} onClose={busy ? undefined : onClose} title={title} size="sm" labelledBy="confirm-title"
+      footer={<>
+        <Button onClick={onClose} disabled={busy}>取消</Button>
+        <Button variant="primary" busy={busy} onClick={onConfirm}>{confirmLabel}</Button>
+      </>}>
+      <p className="text-sm text-ink">{body}</p>
+    </Modal>
+  )
+}
+
+export function Copyable({ value, className }) {
+  const copy = () => navigator.clipboard?.writeText(value)
+  return (
+    <span className={cn('inline-flex min-w-0 items-center gap-1 text-sm', className)}>
+      <code className="anywhere font-mono text-[13px]">{value}</code>
+      <button type="button" aria-label={`复制 ${value}`} onClick={copy} className="shrink-0 rounded p-0.5 text-muted hover:text-primary"><i className="ri-file-copy-line text-[13px]" aria-hidden="true" /></button>
+    </span>
+  )
+}
+
+export function Checkbox({ id, checked, onCheckedChange, disabled, children }) {
+  return (
+    <label htmlFor={id} className="flex cursor-pointer items-start gap-2 text-sm">
+      <input type="checkbox" id={id} checked={checked} disabled={disabled} onChange={event => onCheckedChange(event.target.checked)} className="mt-0.5 size-4 accent-primary" />
+      <span className="min-w-0">{children}</span>
+    </label>
+  )
+}
+
+export function Switch({ id, checked, onCheckedChange, disabled, 'aria-label': ariaLabel }) {
+  return (
+    <label htmlFor={id} className="inline-flex cursor-pointer items-center gap-2 text-sm">
+      <input type="checkbox" id={id} role="switch" aria-label={ariaLabel} checked={checked} disabled={disabled} onChange={event => onCheckedChange(event.target.checked)} className="sr-only" />
+      <span className={cn('relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors', checked ? 'bg-primary' : 'bg-[#c4ccd9]')}>
+        <span className={cn('absolute left-0.5 size-4 rounded-full bg-white transition-transform', checked && 'translate-x-4')} />
+      </span>
+    </label>
+  )
+}
+
+// 枚举胶囊：运行状态、健康状态、任务状态等。
+export function StatusPill({ tone, label, sub }) {
+  const tones = {
+    success: 'text-success bg-[#f0f9f4]',
+    info: 'text-primary bg-[#eef5ff]',
+    warning: 'text-warning bg-[#fdf6ec]',
+    danger: 'text-danger bg-[#fdf1f0]',
+    neutral: 'text-muted bg-[#f5f7fa]',
+  }[tone]
+  return (
+    <span className={cn('inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium', tones)}>
+      <i className={tone === 'success' ? 'ri-checkbox-circle-fill' : tone === 'warning' ? 'ri-error-warning-fill' : tone === 'danger' ? 'ri-close-circle-fill' : 'ri-subtract-fill'} aria-hidden="true" />
+      {label}
+      {sub ? <span className="text-[10px] font-normal opacity-75">{sub}</span> : null}
+    </span>
+  )
+}
+
+/**
+ * 紧凑表格：列头 + 行渲染。资源域信息密度高，适合 table。列过宽时横向滚动。
+ */
+export function Table({ columns, rows, rowKey, minWidth = '900px', onRowClick, className }) {
+  return (
+    <div className={cn('overflow-x-auto rounded-lg border border-hairline bg-white', className)}>
+      <table className={cn('w-full table-fixed text-sm')} style={{ minWidth }}>
+        <thead>
+          <tr className="border-b border-hairline text-left text-xs text-muted">
+            {columns.map(column => (
+              <th key={column.header} style={{ width: column.width }} className={cn('px-4 py-2.5 font-medium', column.align === 'right' && 'text-right')}>{column.header}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map(row => {
+            const clickable = onRowClick ? 'cursor-pointer hover:bg-[#f7f8fa]' : ''
+            return (
+              <tr key={rowKey(row)} className={cn('border-b border-hairline last:border-0', clickable)} onClick={onRowClick ? () => onRowClick(row) : undefined}>
+                {columns.map(column => (
+                  <td key={column.header} className={cn('px-4 py-3', column.align === 'right' && 'text-right')}>{column.render(row)}</td>
+                ))}
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export function DetailList({ rows }) {
+  return (
+    <dl className="space-y-2.5 text-sm">
+      {rows.map(([term, value]) => (
+        <div key={term} className="flex min-w-0 flex-col gap-0.5">
+          <dt className="text-muted">{term}</dt>
+          <dd className="anywhere">{value ?? '—'}</dd>
+        </div>
+      ))}
+    </dl>
+  )
+}
diff --git a/web/src/main.jsx b/web/src/main.jsx
index fdc1c1b..28bda02 100644
--- a/web/src/main.jsx
+++ b/web/src/main.jsx
@@ -1,44 +1,62 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-// react-admin 5.15.1 publishes an incomplete MUI barrel; ra-core is its supported headless entry point.
-import { CoreAdmin, CustomRoutes, Resource } from 'ra-core'
-import { CssBaseline, ThemeProvider } from '@mui/material'
-import { Route } from 'react-router-dom'
-import { AccountDetail, AccountList } from './AccountList'
-import { AuditList } from './AuditList'
-import { BrowserImageList } from './BrowserImageList'
-import { BrowserList } from './BrowserList'
+import { HashRouter, Navigate, Route, Routes, useLocation } from 'react-router'
+import { Refine } from '@refinedev/core'
 import { dataProvider } from './dataProvider'
-import { DraftDetail } from './DraftDetail'
-import { GatewayList } from './GatewayList'
-import { CreatorHubLayout } from './layout'
-import { NetworkExitList } from './NetworkExitList'
-import { TaskDetail, TaskList } from './TaskCenter'
-import { AttemptDetail, BrowserDetail, NetworkExitDetail } from './TraceDetails'
-import { theme } from './theme'
+import { CreatorHubLayout } from './Layout'
+import { LoginPage } from './LoginPage'
+import { AccountDetail, AccountList } from './AccountsPage'
+import { AuditPage } from './AuditPage'
+import { BrowserCreatePage, BrowserDetail, BrowserList } from './BrowsersPage'
+import { BrowserImageList } from './BrowserImagesPage'
+import { DraftPage } from './DraftPage'
+import { GatewayList } from './GatewaysPage'
+import { NetworkExitDetail, NetworkExitList } from './NetworkExitsPage'
+import { TaskDetail, TaskList } from './TasksPage'
+import { AttemptDetail } from './TracePages'
+import 'remixicon/fonts/remixicon.css'
 import './styles.css'
 
+// 开发阶段认证仅由页面层掌握：401 会清除凭证并跳转登录；localStorage 为空时直接展示登录页。
+// 不用 useState：HashRouter 的 pushState/replaceState 不触发 hashchange，状态会在导航后过期；
+// 改为每次渲染直接读 localStorage，登录后 navigate 引发重渲染即可拿到新状态。
+const authed = () => localStorage.getItem('creatorhub.auth') !== null
+
+function AuthGate({ children }) {
+  const { pathname } = useLocation()
+  const loggedIn = authed()
+  if (!loggedIn && pathname !== '/login') return <Navigate to="/login" replace />
+  if (loggedIn && pathname === '/login') return <Navigate to="/accounts" replace />
+  return children
+}
+
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <CoreAdmin dataProvider={dataProvider} layout={CreatorHubLayout} title="CreatorHub" disableTelemetry>
-        <Resource name="accounts" list={AccountList} options={{ label: '社媒账号' }} />
-        <Resource name="tasks" list={TaskList} options={{ label: '任务中心' }} />
-        <Resource name="audit" list={AuditList} options={{ label: '审计记录' }} />
-        <Resource name="network-exits" list={NetworkExitList} options={{ label: '网络出口' }} />
-        <Resource name="browsers" list={BrowserList} options={{ label: '运行环境' }} />
-        <Resource name="browser-images" list={BrowserImageList} options={{ label: '镜像版本' }} />
-        <Resource name="gateways" list={GatewayList} options={{ label: '网关管理' }} />
-        <CustomRoutes>
-          <Route path="/accounts/:id" element={<AccountDetail />} />
-          <Route path="/drafts/:id" element={<DraftDetail />} />
-          <Route path="/tasks/:id" element={<TaskDetail />} />
-          <Route path="/attempts/:id" element={<AttemptDetail />} />
-          <Route path="/browsers/:id" element={<BrowserDetail />} />
-          <Route path="/network-exits/:id" element={<NetworkExitDetail />} />
-        </CustomRoutes>
-      </CoreAdmin>
-    </ThemeProvider>
+    <HashRouter>
+      <Refine dataProvider={dataProvider} options={{ syncWithLocation: false }}>
+        <AuthGate>
+          <Routes>
+            <Route path="/login" element={<LoginPage />} />
+            <Route element={<CreatorHubLayout />}>
+              <Route path="/" element={<Navigate to="/accounts" replace />} />
+              <Route path="/accounts" element={<AccountList />} />
+              <Route path="/accounts/:id" element={<AccountDetail />} />
+              <Route path="/tasks" element={<TaskList />} />
+              <Route path="/tasks/:id" element={<TaskDetail />} />
+              <Route path="/audit" element={<AuditPage />} />
+              <Route path="/network-exits" element={<NetworkExitList />} />
+              <Route path="/network-exits/:id" element={<NetworkExitDetail />} />
+              <Route path="/browsers" element={<BrowserList />} />
+              <Route path="/browsers/new" element={<BrowserCreatePage />} />
+              <Route path="/browsers/:id" element={<BrowserDetail />} />
+              <Route path="/browser-images" element={<BrowserImageList />} />
+              <Route path="/gateways" element={<GatewayList />} />
+              <Route path="/drafts/:id" element={<DraftPage />} />
+              <Route path="/attempts/:id" element={<AttemptDetail />} />
+            </Route>
+          </Routes>
+        </AuthGate>
+      </Refine>
+    </HashRouter>
   </StrictMode>,
 )
diff --git a/web/src/styles.css b/web/src/styles.css
index 46686bc..a3d3e24 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -1,17 +1,25 @@
-:root {
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #0866ef;
+  --color-primary-dark: #0759d4;
+  --color-success: #067647;
+  --color-warning: #b54708;
+  --color-danger: #b42318;
+  --color-ink: #111827;
+  --color-muted: #475467;
+  --color-hairline: #d7dde7;
+  --color-sidebar: #061a38;
+  --color-sidebar-hover: #0b2a54;
+}
+
+html {
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  color: #111827;
+  color: var(--color-ink);
   background: #fff;
-  font-synthesis: none;
 }
 
-* { box-sizing: border-box; }
-html, body, #root { min-width: 320px; min-height: 100%; margin: 0; }
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
+.anywhere {
+  overflow-wrap: anywhere;
+  word-break: break-all;
 }
diff --git a/web/src/theme.js b/web/src/theme.js
deleted file mode 100644
index 17f4ea3..0000000
--- a/web/src/theme.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { createTheme } from '@mui/material/styles'
-
-export const theme = createTheme({
-  palette: {
-    mode: 'light',
-    primary: { main: '#0866ef', dark: '#0759d4' },
-    secondary: { main: '#061a38' },
-    background: { default: '#ffffff', paper: '#ffffff' },
-    text: { primary: '#111827', secondary: '#475467' },
-    divider: '#d7dde7',
-    success: { main: '#067647' },
-    warning: { main: '#B54708' },
-    error: { main: '#B42318' },
-  },
-  shape: { borderRadius: 8 },
-  typography: {
-    fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    h1: { fontSize: '2.25rem', fontWeight: 760, lineHeight: 1.15, letterSpacing: '-0.035em' },
-    button: { fontSize: '0.875rem', fontWeight: 650, textTransform: 'none' },
-  },
-  components: {
-    MuiButton: {
-      defaultProps: { disableElevation: true },
-      styleOverrides: { root: { borderRadius: 7, minHeight: 44 } },
-    },
-    MuiOutlinedInput: {
-      styleOverrides: { root: { borderRadius: 7 } },
-    },
-    MuiPaper: {
-      styleOverrides: { root: { backgroundImage: 'none' } },
-    },
-  },
-})
diff --git a/web/tests/responsive.e2e.js b/web/tests/responsive.e2e.js
index 1d2d37c..e7f72cc 100644
--- a/web/tests/responsive.e2e.js
+++ b/web/tests/responsive.e2e.js
@@ -12,6 +12,13 @@ const runtime = {
   endpoint: 'http://account-a:9222',
 }
 
+// 应用带登录门：直接预置 Basic 凭证，走与真实登录等价的 localStorage 路径
+const credential = 'user:pass'
+
+test.beforeEach(async ({ page }) => {
+  await page.addInitScript(credential => localStorage.setItem('creatorhub.auth', credential), credential)
+})
+
 test('opens social-account and network-exit configuration from the main menu', async ({ page }) => {
   await page.route('**/api/browsers', route => route.fulfill({ json: [] }))
   await page.route('**/api/gateways', route => route.fulfill({ json: [] }))
@@ -106,15 +113,18 @@ test('submits the minimal social-account form at 900px', async ({ page }) => {
   await page.setViewportSize({ width: 900, height: 900 })
   await page.goto('/#/accounts')
 
-  await page.getByRole('textbox', { name: '账号名称', exact: true }).fill('店铺一号')
-  await page.getByRole('combobox', { name: '平台类型', exact: true }).click()
+  // 简单创建走弹窗：先打开 modal 再填写
+  await page.getByRole('button', { name: '创建账号' }).click()
+  const dialog = page.getByRole('dialog')
+  await dialog.getByRole('textbox', { name: '账号名称', exact: true }).fill('店铺一号')
+  await dialog.getByRole('combobox', { name: '平台类型', exact: true }).click()
   await page.getByRole('option', { name: '抖音', exact: true }).click()
-  await page.getByRole('textbox', { name: '账号 ID', exact: true }).fill('shop-new')
-  await page.getByRole('textbox', { name: 'TAGS', exact: true }).fill('主账号,直播')
-  await page.getByRole('textbox', { name: 'Cookies', exact: true }).fill('sessionid=value; token=second')
+  await dialog.getByRole('textbox', { name: '账号 ID', exact: true }).fill('shop-new')
+  await dialog.getByRole('textbox', { name: 'TAGS', exact: true }).fill('主账号,直播')
+  await dialog.getByRole('textbox', { name: 'Cookies', exact: true }).fill('sessionid=value; token=second')
 
   const request = page.waitForRequest(request => request.url().endsWith('/api/phase-a/accounts') && request.method() === 'POST')
-  await page.getByRole('button', { name: '创建账号' }).click()
+  await dialog.getByRole('button', { name: '创建账号' }).click()
   expect((await request).postDataJSON()).toEqual({ name: '店铺一号', platform: 'douyin', platform_account_key: 'shop-new', tags: ['主账号', '直播'], cookies: 'sessionid=value; token=second' })
 })
 
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 0000000..1923496
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.tsapp.json",
+  "include": ["tsconfig.tsapp.json", "types/*.d.ts", "scripts/*"]
+}
diff --git a/web/tsconfig.tsapp.json b/web/tsconfig.tsapp.json
new file mode 100644
index 0000000..d173cbf
--- /dev/null
+++ b/web/tsconfig.tsapp.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "verbatimModuleSyntax": true
+  },
+  "exclude": ["node_modules", "dist", "src", "tests"]
+}
diff --git a/web/vite.config.js b/web/vite.config.js
index 320758a..84a33d7 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -1,8 +1,9 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   server: {
     proxy: { '/api': 'http://127.0.0.1:8080' },
   },