feat(3d-banner): integrate ThreeUI Three.js 3D WebGL Neural Core banner and...

feat(3d-banner): integrate ThreeUI Three.js 3D WebGL Neural Core banner and DeepSeek-V4 model family

mock-fe/apps/app/package.json

@@ -56,6 +56,7 @@
     "@shikijs/transformers": "^4.0.2",
     "@tanstack/react-query": "^5.90.3",
     "@tanstack/react-virtual": "^3.13.23",
+    "@types/three": "^0.185.4",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "ai": "^6.0.146",
@@ -85,6 +86,7 @@
     "shiki": "^4.0.2",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
+    "three": "^0.185.1",
     "tw-animate-css": "^1.4.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
     "zustand": "^5.0.12"

mock-fe/apps/app/src/app/lib/mock-data.ts

@@ -239,22 +239,37 @@ export const MOCK_AGENTS: AgentMember[] = [
   },
 ];
 
+export const DEEPSEEK_API_ENDPOINTS = {
+  openaiBaseUrl: "https://api.deepseek.com",
+  anthropicBaseUrl: "https://api.deepseek.com/anthropic",
+  version: "DeepSeek-V4-Flash-0731",
+  contextLength: "1M (1,000,000 tokens)",
+  maxOutput: "384K tokens",
+  pricing: {
+    inputCacheHit: "$0.007 / 1M tokens",
+    inputCacheMiss: "$0.22 / 1M tokens",
+    output: "$0.66 / 1M tokens",
+  },
+};
+
 export const MOCK_MODELS: ModelItem[] = [
-  { id: "claude-3-7-sonnet", providerID: "anthropic", name: "Claude 3.7 Sonnet", reasoning: true },
+  { id: "deepseek-v4-flash", providerID: "deepseek", name: "DeepSeek V4 Flash (1M Context, Thinking)", reasoning: true },
+  { id: "deepseek-v4-pro", providerID: "deepseek", name: "DeepSeek V4 Pro (1M Context, 384K Out)", reasoning: true },
+  { id: "deepseek-v4-flash-vision-exp", providerID: "deepseek", name: "DeepSeek V4 Vision Exp", reasoning: true },
+  { id: "claude-3-7-sonnet", providerID: "anthropic", name: "Claude 3.7 Sonnet (Hybrid)", reasoning: true },
   { id: "claude-3-5-sonnet", providerID: "anthropic", name: "Claude 3.5 Sonnet", reasoning: false },
   { id: "gpt-4o", providerID: "openai", name: "GPT-4o", reasoning: false },
   { id: "o1", providerID: "openai", name: "OpenAI o1", reasoning: true },
   { id: "o3-mini", providerID: "openai", name: "o3-mini", reasoning: true },
-  { id: "deepseek-chat", providerID: "deepseek", name: "DeepSeek V3", reasoning: false },
   { id: "deepseek-reasoner", providerID: "deepseek", name: "DeepSeek R1", reasoning: true },
 ];
 
 export const MOCK_PROVIDER_LIST = {
-  connected: ["anthropic", "deepseek", "openai"],
+  connected: ["deepseek", "anthropic", "openai"],
   default: {
+    deepseek: "deepseek-v4-flash",
     anthropic: "claude-3-7-sonnet",
     openai: "gpt-4o",
-    deepseek: "deepseek-reasoner",
   },
 };
 

mock-fe/apps/app/src/react-app/domains/team/team-management-page.tsx

@@ -27,6 +27,7 @@ import {
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MOCK_AGENTS, type AgentMember } from "@/app/lib/mock-data";
+import { Banner3DCanvas } from "@/components/ui/banner-3d-canvas";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -153,6 +154,14 @@ export function TeamManagementPage({
         </div>
       </div>
 
+      {/* 3D WebGL Neural Core Banner */}
+      <div className="mt-6">
+        <Banner3DCanvas
+          title={`Trung Tâm Điều Hành 3D · ${workspaceName}`}
+          subtitle="Mô phỏng quỹ đạo liên kết 5 AI Agent thời gian thực trên nền tảng DeepSeek-V4 (1M Context) & ThreeUI WebGL"
+        />
+      </div>
+
       {/* KPI Stats Strip */}
       <div className="my-6 grid grid-cols-2 gap-4 md:grid-cols-4">
         <div className="rounded-2xl border border-border/60 bg-card p-4 shadow-xs">

mock-fe/pnpm-lock.yaml

@@ -176,6 +176,9 @@ importers:
       '@tanstack/react-virtual':
         specifier: ^3.13.23
         version: 3.13.23(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@types/three':
+        specifier: ^0.185.4
+        version: 0.185.4
       '@xterm/addon-fit':
         specifier: ^0.11.0
         version: 0.11.0
@@ -263,6 +266,9 @@ importers:
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
+      three:
+        specifier: ^0.185.1
+        version: 0.185.1
       tw-animate-css:
         specifier: ^1.4.0
         version: 1.4.0
@@ -1870,6 +1876,9 @@ packages:
     resolution: {integrity: sha512-j4kCkxyfGf9vd5SH/lQxXDr3LsatI9pm6Cr3eMnh1JZQxB4e3fbag7G2StjyUwXV7/90MOfja7xe8ntLIsoO1w==}
     deprecated: 'Moved to @daytona/sdk, same API, no breaking changes. Please update: npm uninstall @daytonaio/sdk && npm i @daytona/sdk'
 
+  '@dimforge/rapier3d-compat@0.12.0':
+    resolution: {integrity: sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==}
+
   '@dotenvx/dotenvx@1.64.0':
     resolution: {integrity: sha512-6+xRpZaWuHXEqnhBjae+VmQI9Uaqw5Uzu/ScpO+W7ww9Zp3lHSNBoNjFcUxhrCyc7pRGQzyDjhKzloqrPHERiQ==}
     hasBin: true
@@ -4714,6 +4723,9 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@tweenjs/tween.js@23.1.3':
+    resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -4809,9 +4821,15 @@ packages:
   '@types/set-cookie-parser@2.4.10':
     resolution: {integrity: sha512-GGmQVGpQWUe5qglJozEjZV/5dyxbOOZ0LHe/lqyWssB88Y4svNfst0uqBVscdDeIKl5Jy5+aPSvy7mI9tYRguw==}
 
+  '@types/stats.js@0.17.4':
+    resolution: {integrity: sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==}
+
   '@types/statuses@2.0.6':
     resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
 
+  '@types/three@0.185.4':
+    resolution: {integrity: sha512-gAsBIC07NIFrxjbf7tH2t71c38uulFfk/RFoC7FNBSjMRAQ8J1x/RBvusX0N5PJouaYFJawXQqfCQ0RKUx/1nA==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -4821,6 +4839,9 @@ packages:
   '@types/validate-npm-package-name@4.0.2':
     resolution: {integrity: sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==}
 
+  '@types/webxr@0.5.24':
+    resolution: {integrity: sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==}
+
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
@@ -6057,6 +6078,9 @@ packages:
     resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
     engines: {node: ^12.20 || >= 14.13}
 
+  fflate@0.8.3:
+    resolution: {integrity: sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==}
+
   figures@6.1.0:
     resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
     engines: {node: '>=18'}
@@ -6919,6 +6943,9 @@ packages:
     resolution: {integrity: sha512-Sz8FzjzI0kN13GK/6MVEsVzMZEPvOhnmmI1lU5+/1cGOiK3QUahntrNNtdVeihrO7t9JpoH75iMNXg6R6uWflQ==}
     engines: {node: '>=18.0.0'}
 
+  meshoptimizer@1.1.1:
+    resolution: {integrity: sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==}
+
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
@@ -8271,6 +8298,9 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  three@0.185.1:
+    resolution: {integrity: sha512-5aojFCXKwnjBRZvUnt3WFfEcvUJgkN5LlijRFN95hMy8WVkG4I0QNcJE+OuWvuJ0bOdStrbfXn0pkd6/QyiAlg==}
+
   throttleit@2.1.0:
     resolution: {integrity: sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==}
     engines: {node: '>=18'}
@@ -9883,6 +9913,8 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  '@dimforge/rapier3d-compat@0.12.0': {}
+
   '@dotenvx/dotenvx@1.64.0':
     dependencies:
       commander: 11.1.0
@@ -12562,6 +12594,8 @@ snapshots:
   '@turbo/windows-arm64@2.10.7':
     optional: true
 
+  '@tweenjs/tween.js@23.1.3': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.29.7
@@ -12683,8 +12717,19 @@ snapshots:
     dependencies:
       '@types/node': 20.12.12
 
+  '@types/stats.js@0.17.4': {}
+
   '@types/statuses@2.0.6': {}
 
+  '@types/three@0.185.4':
+    dependencies:
+      '@dimforge/rapier3d-compat': 0.12.0
+      '@tweenjs/tween.js': 23.1.3
+      '@types/stats.js': 0.17.4
+      '@types/webxr': 0.5.24
+      fflate: 0.8.3
+      meshoptimizer: 1.1.1
+
   '@types/trusted-types@2.0.7':
     optional: true
 
@@ -12692,6 +12737,8 @@ snapshots:
 
   '@types/validate-npm-package-name@4.0.2': {}
 
+  '@types/webxr@0.5.24': {}
+
   '@types/ws@8.18.1':
     dependencies:
       '@types/node': 20.12.12
@@ -13984,6 +14031,8 @@ snapshots:
       node-domexception: 1.0.0
       web-streams-polyfill: 3.3.3
 
+  fflate@0.8.3: {}
+
   figures@6.1.0:
     dependencies:
       is-unicode-supported: 2.1.0
@@ -14848,6 +14897,8 @@ snapshots:
 
   meriyah@6.1.4: {}
 
+  meshoptimizer@1.1.1: {}
+
   micromark-core-commonmark@2.0.3:
     dependencies:
       decode-named-character-reference: 1.3.0
@@ -16487,6 +16538,8 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  three@0.185.1: {}
+
   throttleit@2.1.0: {}
 
   tiny-async-pool@1.3.0: