test: add comprehensive tests for billing integration and partner stack info handling

- Introduced a new test suite for the billing integration, covering the rendering of the billing page and plan components, ensuring all usage metrics are displayed correctly.
- Enhanced tests for the partner stack info hook to handle various scenarios, including invalid cookie JSON, absence of keys, and error handling during binding.
- Updated existing tests for the CloudPlanItem component to cover additional edge cases and ensure proper behavior during user interactions.

api/.vscode/launch.json.example

@@ -54,7 +54,7 @@
                 "--loglevel",
                 "DEBUG",
                 "-Q",
-                "dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,workflow_based_app_execution,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor"
+                "dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor"
             ]
         }
     ]

api/configs/middleware/__init__.py

@@ -259,20 +259,11 @@ class CeleryConfig(DatabaseConfig):
         description="Password of the Redis Sentinel master.",
         default=None,
     )
-
     CELERY_SENTINEL_SOCKET_TIMEOUT: PositiveFloat | None = Field(
         description="Timeout for Redis Sentinel socket operations in seconds.",
         default=0.1,
     )
 
-    CELERY_TASK_ANNOTATIONS: dict[str, Any] | None = Field(
-        description=(
-            "Annotations for Celery tasks as a JSON mapping of task name -> options "
-            "(for example, rate limits or other task-specific settings)."
-        ),
-        default=None,
-    )
-
     @computed_field
     def CELERY_RESULT_BACKEND(self) -> str | None:
         if self.CELERY_BACKEND in ("database", "rabbitmq"):

api/controllers/console/app/conversation.py

@@ -599,12 +599,7 @@ def _get_conversation(app_model, conversation_id):
     db.session.execute(
         sa.update(Conversation)
         .where(Conversation.id == conversation_id, Conversation.read_at.is_(None))
-        # Keep updated_at unchanged when only marking a conversation as read.
-        .values(
-            read_at=naive_utc_now(),
-            read_account_id=current_user.id,
-            updated_at=Conversation.updated_at,
-        )
+        .values(read_at=naive_utc_now(), read_account_id=current_user.id)
     )
     db.session.commit()
     db.session.refresh(conversation)

api/core/tools/__base/tool.py

@@ -5,7 +5,7 @@ from collections.abc import Generator
 from copy import deepcopy
 from typing import TYPE_CHECKING, Any
 
-if TYPE_CHECKING:  # pragma: no cover
+if TYPE_CHECKING:
     from models.model import File
 
 from core.tools.__base.tool_runtime import ToolRuntime
@@ -171,7 +171,7 @@ class Tool(ABC):
     def create_file_message(self, file: File) -> ToolInvokeMessage:
         return ToolInvokeMessage(
             type=ToolInvokeMessage.MessageType.FILE,
-            message=ToolInvokeMessage.FileMessage(file_marker="file_marker"),
+            message=ToolInvokeMessage.FileMessage(),
             meta={"file": file},
         )
 

api/extensions/ext_celery.py

@@ -80,14 +80,8 @@ def init_app(app: DifyApp) -> Celery:
         worker_hijack_root_logger=False,
         timezone=pytz.timezone(dify_config.LOG_TZ or "UTC"),
         task_ignore_result=True,
-        task_annotations=dify_config.CELERY_TASK_ANNOTATIONS,
     )
 
-    if dify_config.CELERY_BACKEND == "redis":
-        celery_app.conf.update(
-            result_backend_transport_options=broker_transport_options,
-        )
-
     # Apply SSL configuration if enabled
     ssl_options = _get_celery_ssl_options()
     if ssl_options:

api/tests/unit_tests/controllers/console/app/test_conversation_read_timestamp.py

@@ -1,34 +0,0 @@
-from datetime import datetime
-from types import SimpleNamespace
-from unittest.mock import MagicMock, patch
-
-from controllers.console.app.conversation import _get_conversation
-
-
-def test_get_conversation_mark_read_keeps_updated_at_unchanged():
-    app_model = SimpleNamespace(id="app-id")
-    account = SimpleNamespace(id="account-id")
-    conversation = MagicMock()
-    conversation.id = "conversation-id"
-
-    with (
-        patch("controllers.console.app.conversation.current_account_with_tenant", return_value=(account, None)),
-        patch("controllers.console.app.conversation.naive_utc_now", return_value=datetime(2026, 2, 9, 0, 0, 0)),
-        patch("controllers.console.app.conversation.db.session") as mock_session,
-    ):
-        mock_session.query.return_value.where.return_value.first.return_value = conversation
-
-        _get_conversation(app_model, "conversation-id")
-
-        statement = mock_session.execute.call_args[0][0]
-        compiled = statement.compile()
-        sql_text = str(compiled).lower()
-        compact_sql_text = sql_text.replace(" ", "")
-        params = compiled.params
-
-        assert "updated_at=current_timestamp" not in compact_sql_text
-        assert "updated_at=conversations.updated_at" in compact_sql_text
-        assert "read_at=:read_at" in compact_sql_text
-        assert "read_account_id=:read_account_id" in compact_sql_text
-        assert params["read_at"] == datetime(2026, 2, 9, 0, 0, 0)
-        assert params["read_account_id"] == "account-id"

api/tests/unit_tests/core/tools/test_base_tool.py

@@ -1,211 +0,0 @@
-from __future__ import annotations
-
-from collections.abc import Generator
-from dataclasses import dataclass
-from typing import Any, cast
-
-from core.app.entities.app_invoke_entities import InvokeFrom
-from core.tools.__base.tool import Tool
-from core.tools.__base.tool_runtime import ToolRuntime
-from core.tools.entities.common_entities import I18nObject
-from core.tools.entities.tool_entities import ToolEntity, ToolIdentity, ToolInvokeMessage, ToolProviderType
-
-
-class DummyCastType:
-    def cast_value(self, value: Any) -> str:
-        return f"cast:{value}"
-
-
-@dataclass
-class DummyParameter:
-    name: str
-    type: DummyCastType
-    form: str = "llm"
-    required: bool = False
-    default: Any = None
-    options: list[Any] | None = None
-    llm_description: str | None = None
-
-
-class DummyTool(Tool):
-    def __init__(self, entity: ToolEntity, runtime: ToolRuntime):
-        super().__init__(entity=entity, runtime=runtime)
-        self.result: ToolInvokeMessage | list[ToolInvokeMessage] | Generator[ToolInvokeMessage, None, None] = (
-            self.create_text_message("default")
-        )
-        self.runtime_parameter_overrides: list[Any] | None = None
-        self.last_invocation: dict[str, Any] | None = None
-
-    def tool_provider_type(self) -> ToolProviderType:
-        return ToolProviderType.BUILT_IN
-
-    def _invoke(
-        self,
-        user_id: str,
-        tool_parameters: dict[str, Any],
-        conversation_id: str | None = None,
-        app_id: str | None = None,
-        message_id: str | None = None,
-    ) -> ToolInvokeMessage | list[ToolInvokeMessage] | Generator[ToolInvokeMessage, None, None]:
-        self.last_invocation = {
-            "user_id": user_id,
-            "tool_parameters": tool_parameters,
-            "conversation_id": conversation_id,
-            "app_id": app_id,
-            "message_id": message_id,
-        }
-        return self.result
-
-    def get_runtime_parameters(
-        self,
-        conversation_id: str | None = None,
-        app_id: str | None = None,
-        message_id: str | None = None,
-    ):
-        if self.runtime_parameter_overrides is not None:
-            return self.runtime_parameter_overrides
-        return super().get_runtime_parameters(
-            conversation_id=conversation_id,
-            app_id=app_id,
-            message_id=message_id,
-        )
-
-
-def _build_tool(runtime: ToolRuntime | None = None) -> DummyTool:
-    entity = ToolEntity(
-        identity=ToolIdentity(author="test", name="dummy", label=I18nObject(en_US="dummy"), provider="test"),
-        parameters=[],
-        description=None,
-        has_runtime_parameters=False,
-    )
-    runtime = runtime or ToolRuntime(tenant_id="tenant-1", invoke_from=InvokeFrom.DEBUGGER, runtime_parameters={})
-    return DummyTool(entity=entity, runtime=runtime)
-
-
-def test_invoke_supports_single_message_and_parameter_casting():
-    runtime = ToolRuntime(
-        tenant_id="tenant-1",
-        invoke_from=InvokeFrom.DEBUGGER,
-        runtime_parameters={"from_runtime": "runtime-value"},
-    )
-    tool = _build_tool(runtime)
-    tool.entity.parameters = cast(
-        Any,
-        [
-            DummyParameter(name="unused", type=DummyCastType()),
-            DummyParameter(name="age", type=DummyCastType()),
-        ],
-    )
-    tool.result = tool.create_text_message("ok")
-
-    messages = list(
-        tool.invoke(
-            user_id="user-1",
-            tool_parameters={"age": "18", "raw": "keep"},
-            conversation_id="conv-1",
-            app_id="app-1",
-            message_id="msg-1",
-        )
-    )
-
-    assert len(messages) == 1
-    assert messages[0].message.text == "ok"
-    assert tool.last_invocation == {
-        "user_id": "user-1",
-        "tool_parameters": {"age": "cast:18", "raw": "keep", "from_runtime": "runtime-value"},
-        "conversation_id": "conv-1",
-        "app_id": "app-1",
-        "message_id": "msg-1",
-    }
-
-
-def test_invoke_supports_list_and_generator_results():
-    tool = _build_tool()
-    tool.result = [tool.create_text_message("a"), tool.create_text_message("b")]
-    list_messages = list(tool.invoke(user_id="user-1", tool_parameters={}))
-    assert [msg.message.text for msg in list_messages] == ["a", "b"]
-
-    def _message_generator() -> Generator[ToolInvokeMessage, None, None]:
-        yield tool.create_text_message("g1")
-        yield tool.create_text_message("g2")
-
-    tool.result = _message_generator()
-    generated_messages = list(tool.invoke(user_id="user-2", tool_parameters={}))
-    assert [msg.message.text for msg in generated_messages] == ["g1", "g2"]
-
-
-def test_fork_tool_runtime_returns_new_tool_with_copied_entity():
-    tool = _build_tool()
-    new_runtime = ToolRuntime(tenant_id="tenant-2", invoke_from=InvokeFrom.EXPLORE, runtime_parameters={})
-
-    forked = tool.fork_tool_runtime(new_runtime)
-
-    assert isinstance(forked, DummyTool)
-    assert forked is not tool
-    assert forked.runtime == new_runtime
-    assert forked.entity == tool.entity
-    assert forked.entity is not tool.entity
-
-
-def test_get_runtime_parameters_and_merge_runtime_parameters():
-    tool = _build_tool()
-    original = DummyParameter(name="temperature", type=DummyCastType(), form="schema", required=True, default="0.7")
-    tool.entity.parameters = cast(Any, [original])
-
-    default_runtime_parameters = tool.get_runtime_parameters()
-    assert default_runtime_parameters == [original]
-
-    override = DummyParameter(name="temperature", type=DummyCastType(), form="llm", required=False, default="0.5")
-    appended = DummyParameter(name="new_param", type=DummyCastType(), form="form", required=False, default="x")
-    tool.runtime_parameter_overrides = [override, appended]
-
-    merged = tool.get_merged_runtime_parameters()
-    assert len(merged) == 2
-    assert merged[0].name == "temperature"
-    assert merged[0].form == "llm"
-    assert merged[0].required is False
-    assert merged[0].default == "0.5"
-    assert merged[1].name == "new_param"
-
-
-def test_message_factory_helpers():
-    tool = _build_tool()
-
-    image_message = tool.create_image_message("https://example.com/image.png")
-    assert image_message.type == ToolInvokeMessage.MessageType.IMAGE
-    assert image_message.message.text == "https://example.com/image.png"
-
-    file_obj = object()
-    file_message = tool.create_file_message(file_obj)  # type: ignore[arg-type]
-    assert file_message.type == ToolInvokeMessage.MessageType.FILE
-    assert file_message.message.file_marker == "file_marker"
-    assert file_message.meta == {"file": file_obj}
-
-    link_message = tool.create_link_message("https://example.com")
-    assert link_message.type == ToolInvokeMessage.MessageType.LINK
-    assert link_message.message.text == "https://example.com"
-
-    text_message = tool.create_text_message("hello")
-    assert text_message.type == ToolInvokeMessage.MessageType.TEXT
-    assert text_message.message.text == "hello"
-
-    blob_message = tool.create_blob_message(b"blob", meta={"source": "unit-test"})
-    assert blob_message.type == ToolInvokeMessage.MessageType.BLOB
-    assert blob_message.message.blob == b"blob"
-    assert blob_message.meta == {"source": "unit-test"}
-
-    json_message = tool.create_json_message({"k": "v"}, suppress_output=True)
-    assert json_message.type == ToolInvokeMessage.MessageType.JSON
-    assert json_message.message.json_object == {"k": "v"}
-    assert json_message.message.suppress_output is True
-
-    variable_message = tool.create_variable_message("answer", 42, stream=False)
-    assert variable_message.type == ToolInvokeMessage.MessageType.VARIABLE
-    assert variable_message.message.variable_name == "answer"
-    assert variable_message.message.variable_value == 42
-    assert variable_message.message.stream is False
-
-
-def test_base_abstract_invoke_placeholder_returns_none():
-    tool = _build_tool()
-    assert Tool._invoke(tool, user_id="u", tool_parameters={}) is None

api/tests/unit_tests/core/tools/workflow_as_tool/test_tool.py

@@ -255,32 +255,6 @@ def test_create_variable_message():
         assert message.message.stream is False
 
 
-def test_create_file_message_should_include_file_marker():
-    entity = ToolEntity(
-        identity=ToolIdentity(author="test", name="test tool", label=I18nObject(en_US="test tool"), provider="test"),
-        parameters=[],
-        description=None,
-        has_runtime_parameters=False,
-    )
-    runtime = ToolRuntime(tenant_id="test_tool", invoke_from=InvokeFrom.EXPLORE)
-    tool = WorkflowTool(
-        workflow_app_id="",
-        workflow_as_tool_id="",
-        version="1",
-        workflow_entities={},
-        workflow_call_depth=1,
-        entity=entity,
-        runtime=runtime,
-    )
-
-    file_obj = object()
-    message = tool.create_file_message(file_obj)  # type: ignore[arg-type]
-
-    assert message.type == ToolInvokeMessage.MessageType.FILE
-    assert message.message.file_marker == "file_marker"
-    assert message.meta == {"file": file_obj}
-
-
 def test_resolve_user_from_database_falls_back_to_end_user(monkeypatch: pytest.MonkeyPatch):
     """Ensure worker context can resolve EndUser when Account is missing."""
 

docker/.env.example

@@ -62,9 +62,6 @@ LANG=C.UTF-8
 LC_ALL=C.UTF-8
 PYTHONIOENCODING=utf-8
 
-# Set UV cache directory to avoid permission issues with non-existent home directory
-UV_CACHE_DIR=/tmp/.uv-cache
-
 # ------------------------------
 # Server Configuration
 # ------------------------------
@@ -387,8 +384,6 @@ CELERY_USE_SENTINEL=false
 CELERY_SENTINEL_MASTER_NAME=
 CELERY_SENTINEL_PASSWORD=
 CELERY_SENTINEL_SOCKET_TIMEOUT=0.1
-# e.g. {"tasks.add": {"rate_limit": "10/s"}}
-CELERY_TASK_ANNOTATIONS=null
 
 # ------------------------------
 # CORS Configuration

docker/docker-compose.yaml

@@ -16,7 +16,6 @@ x-shared-env: &shared-api-worker-env
   LANG: ${LANG:-C.UTF-8}
   LC_ALL: ${LC_ALL:-C.UTF-8}
   PYTHONIOENCODING: ${PYTHONIOENCODING:-utf-8}
-  UV_CACHE_DIR: ${UV_CACHE_DIR:-/tmp/.uv-cache}
   LOG_LEVEL: ${LOG_LEVEL:-INFO}
   LOG_OUTPUT_FORMAT: ${LOG_OUTPUT_FORMAT:-text}
   LOG_FILE: ${LOG_FILE:-/app/logs/server.log}
@@ -106,7 +105,6 @@ x-shared-env: &shared-api-worker-env
   CELERY_SENTINEL_MASTER_NAME: ${CELERY_SENTINEL_MASTER_NAME:-}
   CELERY_SENTINEL_PASSWORD: ${CELERY_SENTINEL_PASSWORD:-}
   CELERY_SENTINEL_SOCKET_TIMEOUT: ${CELERY_SENTINEL_SOCKET_TIMEOUT:-0.1}
-  CELERY_TASK_ANNOTATIONS: ${CELERY_TASK_ANNOTATIONS:-null}
   WEB_API_CORS_ALLOW_ORIGINS: ${WEB_API_CORS_ALLOW_ORIGINS:-*}
   CONSOLE_CORS_ALLOW_ORIGINS: ${CONSOLE_CORS_ALLOW_ORIGINS:-*}
   COOKIE_DOMAIN: ${COOKIE_DOMAIN:-}

sdks/nodejs-client/pnpm-lock.yaml

@@ -10,7 +10,7 @@ importers:
     dependencies:
       axios:
         specifier: ^1.13.2
-        version: 1.13.5
+        version: 1.13.2
     devDependencies:
       '@eslint/js':
         specifier: ^9.39.2
@@ -544,8 +544,8 @@ packages:
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
-  axios@1.13.5:
-    resolution: {integrity: sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==}
+  axios@1.13.2:
+    resolution: {integrity: sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==}
 
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -1677,7 +1677,7 @@ snapshots:
 
   asynckit@0.4.0: {}
 
-  axios@1.13.5:
+  axios@1.13.2:
     dependencies:
       follow-redirects: 1.15.11
       form-data: 4.0.5

web/__tests__/billing-integration.test.tsx

@@ -0,0 +1,996 @@
+import type { UsagePlanInfo, UsageResetInfo } from '@/app/components/billing/type'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+import { defaultPlan, NUM_INFINITE } from '@/app/components/billing/config'
+import { Plan } from '@/app/components/billing/type'
+
+// ─── Module-level mock state ────────────────────────────────────────────────
+let mockProviderCtx: Record<string, unknown> = {}
+let mockAppCtx: Record<string, unknown> = {}
+const mockSetShowPricingModal = vi.fn()
+const mockSetShowAccountSettingModal = vi.fn()
+
+// ─── Context mocks ──────────────────────────────────────────────────────────
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => mockProviderCtx,
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => mockAppCtx,
+}))
+
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowPricingModal: mockSetShowPricingModal,
+  }),
+  useModalContextSelector: (selector: (s: Record<string, unknown>) => unknown) =>
+    selector({
+      setShowAccountSettingModal: mockSetShowAccountSettingModal,
+    }),
+}))
+
+vi.mock('@/context/i18n', () => ({
+  useGetLanguage: () => 'en-US',
+  useGetPricingPageLanguage: () => 'en',
+}))
+
+// ─── Service mocks ──────────────────────────────────────────────────────────
+const mockRefetch = vi.fn().mockResolvedValue({ data: 'https://billing.example.com' })
+vi.mock('@/service/use-billing', () => ({
+  useBillingUrl: () => ({
+    data: 'https://billing.example.com',
+    isFetching: false,
+    refetch: mockRefetch,
+  }),
+  useBindPartnerStackInfo: () => ({ mutateAsync: vi.fn() }),
+}))
+
+vi.mock('@/service/use-education', () => ({
+  useEducationVerify: () => ({
+    mutateAsync: vi.fn().mockResolvedValue({ token: 'test-token' }),
+    isPending: false,
+  }),
+}))
+
+// ─── Navigation mocks ───────────────────────────────────────────────────────
+const mockRouterPush = vi.fn()
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockRouterPush }),
+  usePathname: () => '/billing',
+  useSearchParams: () => new URLSearchParams(),
+}))
+
+vi.mock('@/hooks/use-async-window-open', () => ({
+  useAsyncWindowOpen: () => vi.fn(),
+}))
+
+// ─── External component mocks ───────────────────────────────────────────────
+vi.mock('@/app/education-apply/verify-state-modal', () => ({
+  default: ({ isShow }: { isShow: boolean }) =>
+    isShow ? <div data-testid="verify-state-modal" /> : null,
+}))
+
+vi.mock('@/app/components/header/utils/util', () => ({
+  mailToSupport: () => 'mailto:support@test.com',
+}))
+
+// ─── Test data factories ────────────────────────────────────────────────────
+type PlanOverrides = {
+  type?: string
+  usage?: Partial<UsagePlanInfo>
+  total?: Partial<UsagePlanInfo>
+  reset?: Partial<UsageResetInfo>
+}
+
+const createPlanData = (overrides: PlanOverrides = {}) => ({
+  ...defaultPlan,
+  ...overrides,
+  type: overrides.type ?? defaultPlan.type,
+  usage: { ...defaultPlan.usage, ...overrides.usage },
+  total: { ...defaultPlan.total, ...overrides.total },
+  reset: { ...defaultPlan.reset, ...overrides.reset },
+})
+
+const setupProviderContext = (planOverrides: PlanOverrides = {}, extra: Record<string, unknown> = {}) => {
+  mockProviderCtx = {
+    plan: createPlanData(planOverrides),
+    enableBilling: true,
+    isFetchedPlan: true,
+    enableEducationPlan: false,
+    isEducationAccount: false,
+    allowRefreshEducationVerify: false,
+    ...extra,
+  }
+}
+
+const setupAppContext = (overrides: Record<string, unknown> = {}) => {
+  mockAppCtx = {
+    isCurrentWorkspaceManager: true,
+    userProfile: { email: 'test@example.com' },
+    langGeniusVersionInfo: { current_version: '1.0.0' },
+    ...overrides,
+  }
+}
+
+// ─── Imports (after mocks) ──────────────────────────────────────────────────
+// These must be imported after all vi.mock() calls
+/* eslint-disable import/first */
+import AnnotationFull from '@/app/components/billing/annotation-full'
+import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
+import AppsFull from '@/app/components/billing/apps-full-in-dialog'
+import Billing from '@/app/components/billing/billing-page'
+import HeaderBillingBtn from '@/app/components/billing/header-billing-btn'
+import PlanComp from '@/app/components/billing/plan'
+import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
+import PriorityLabel from '@/app/components/billing/priority-label'
+import TriggerEventsLimitModal from '@/app/components/billing/trigger-events-limit-modal'
+import UpgradeBtn from '@/app/components/billing/upgrade-btn'
+import VectorSpaceFull from '@/app/components/billing/vector-space-full'
+/* eslint-enable import/first */
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 1. Billing Page + Plan Component Integration
+// Tests the full data flow: BillingPage → PlanComp → UsageInfo → ProgressBar
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Billing Page + Plan Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  // Verify that the billing page renders PlanComp with all 7 usage items
+  describe('Rendering complete plan information', () => {
+    it('should display all 7 usage metrics for sandbox plan', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: {
+          buildApps: 3,
+          teamMembers: 1,
+          documentsUploadQuota: 10,
+          vectorSpace: 20,
+          annotatedResponse: 5,
+          triggerEvents: 1000,
+          apiRateLimit: 2000,
+        },
+        total: {
+          buildApps: 5,
+          teamMembers: 1,
+          documentsUploadQuota: 50,
+          vectorSpace: 50,
+          annotatedResponse: 10,
+          triggerEvents: 3000,
+          apiRateLimit: 5000,
+        },
+      })
+
+      render(<Billing />)
+
+      // Plan name
+      expect(screen.getByText(/plans\.sandbox\.name/i)).toBeInTheDocument()
+
+      // All 7 usage items should be visible
+      expect(screen.getByText(/usagePage\.buildApps/i)).toBeInTheDocument()
+      expect(screen.getByText(/usagePage\.teamMembers/i)).toBeInTheDocument()
+      expect(screen.getByText(/usagePage\.documentsUploadQuota/i)).toBeInTheDocument()
+      expect(screen.getByText(/usagePage\.vectorSpace/i)).toBeInTheDocument()
+      expect(screen.getByText(/usagePage\.annotationQuota/i)).toBeInTheDocument()
+      expect(screen.getByText(/usagePage\.triggerEvents/i)).toBeInTheDocument()
+      expect(screen.getByText(/plansCommon\.apiRateLimit/i)).toBeInTheDocument()
+    })
+
+    it('should display usage values as "usage / total" format', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { buildApps: 3, teamMembers: 1 },
+        total: { buildApps: 5, teamMembers: 1 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Check that the buildApps usage fraction "3 / 5" is rendered
+      const usageContainers = screen.getAllByText('3')
+      expect(usageContainers.length).toBeGreaterThan(0)
+      const totalContainers = screen.getAllByText('5')
+      expect(totalContainers.length).toBeGreaterThan(0)
+    })
+
+    it('should show "unlimited" for infinite quotas (professional API rate limit)', () => {
+      setupProviderContext({
+        type: Plan.professional,
+        total: { apiRateLimit: NUM_INFINITE },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      expect(screen.getByText(/plansCommon\.unlimited/i)).toBeInTheDocument()
+    })
+
+    it('should display reset days for trigger events when applicable', () => {
+      setupProviderContext({
+        type: Plan.professional,
+        total: { triggerEvents: 20000 },
+        reset: { triggerEvents: 7 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Reset text should be visible
+      expect(screen.getByText(/usagePage\.resetsIn/i)).toBeInTheDocument()
+    })
+  })
+
+  // Verify billing URL button visibility and behavior
+  describe('Billing URL button', () => {
+    it('should show billing button when enableBilling and isCurrentWorkspaceManager', () => {
+      setupProviderContext({ type: Plan.sandbox })
+      setupAppContext({ isCurrentWorkspaceManager: true })
+
+      render(<Billing />)
+
+      expect(screen.getByText(/viewBillingTitle/i)).toBeInTheDocument()
+      expect(screen.getByText(/viewBillingAction/i)).toBeInTheDocument()
+    })
+
+    it('should hide billing button when user is not workspace manager', () => {
+      setupProviderContext({ type: Plan.sandbox })
+      setupAppContext({ isCurrentWorkspaceManager: false })
+
+      render(<Billing />)
+
+      expect(screen.queryByText(/viewBillingTitle/i)).not.toBeInTheDocument()
+    })
+
+    it('should hide billing button when billing is disabled', () => {
+      setupProviderContext({ type: Plan.sandbox }, { enableBilling: false })
+
+      render(<Billing />)
+
+      expect(screen.queryByText(/viewBillingTitle/i)).not.toBeInTheDocument()
+    })
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 2. Plan Type Display Integration
+// Tests that different plan types render correct visual elements
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Plan Type Display Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  it('should render sandbox plan with upgrade button (premium badge)', () => {
+    setupProviderContext({ type: Plan.sandbox })
+
+    render(<PlanComp loc="test" />)
+
+    expect(screen.getByText(/plans\.sandbox\.name/i)).toBeInTheDocument()
+    expect(screen.getByText(/plans\.sandbox\.for/i)).toBeInTheDocument()
+    // Sandbox shows premium badge upgrade button (not plain)
+    expect(screen.getByText(/upgradeBtn\.encourageShort/i)).toBeInTheDocument()
+  })
+
+  it('should render professional plan with plain upgrade button', () => {
+    setupProviderContext({ type: Plan.professional })
+
+    render(<PlanComp loc="test" />)
+
+    expect(screen.getByText(/plans\.professional\.name/i)).toBeInTheDocument()
+    // Professional shows plain button because it's not team
+    expect(screen.getByText(/upgradeBtn\.encourageShort/i)).toBeInTheDocument()
+  })
+
+  it('should render team plan with plain-style upgrade button', () => {
+    setupProviderContext({ type: Plan.team })
+
+    render(<PlanComp loc="test" />)
+
+    expect(screen.getByText(/plans\.team\.name/i)).toBeInTheDocument()
+    // Team plan has isPlain=true, so shows "upgradeBtn.plain" text
+    expect(screen.getByText(/upgradeBtn\.plain/i)).toBeInTheDocument()
+  })
+
+  it('should not render upgrade button for enterprise plan', () => {
+    setupProviderContext({ type: Plan.enterprise })
+
+    render(<PlanComp loc="test" />)
+
+    expect(screen.queryByText(/upgradeBtn\.encourageShort/i)).not.toBeInTheDocument()
+    expect(screen.queryByText(/upgradeBtn\.plain/i)).not.toBeInTheDocument()
+  })
+
+  it('should show education verify button when enableEducationPlan is true and not yet verified', () => {
+    setupProviderContext({ type: Plan.sandbox }, {
+      enableEducationPlan: true,
+      isEducationAccount: false,
+    })
+
+    render(<PlanComp loc="test" />)
+
+    expect(screen.getByText(/toVerified/i)).toBeInTheDocument()
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 3. Upgrade Flow Integration
+// Tests the flow: UpgradeBtn click → setShowPricingModal
+// and PlanUpgradeModal → close + trigger pricing
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Upgrade Flow Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+    setupProviderContext({ type: Plan.sandbox })
+  })
+
+  // UpgradeBtn triggers pricing modal
+  describe('UpgradeBtn triggers pricing modal', () => {
+    it('should call setShowPricingModal when clicking premium badge upgrade button', async () => {
+      const user = userEvent.setup()
+
+      render(<UpgradeBtn />)
+
+      const badgeText = screen.getByText(/upgradeBtn\.encourage/i)
+      await user.click(badgeText)
+
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call setShowPricingModal when clicking plain upgrade button', async () => {
+      const user = userEvent.setup()
+
+      render(<UpgradeBtn isPlain />)
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+
+    it('should use custom onClick when provided instead of setShowPricingModal', async () => {
+      const customOnClick = vi.fn()
+      const user = userEvent.setup()
+
+      render(<UpgradeBtn onClick={customOnClick} />)
+
+      const badgeText = screen.getByText(/upgradeBtn\.encourage/i)
+      await user.click(badgeText)
+
+      expect(customOnClick).toHaveBeenCalledTimes(1)
+      expect(mockSetShowPricingModal).not.toHaveBeenCalled()
+    })
+
+    it('should fire gtag event with loc parameter when clicked', async () => {
+      const mockGtag = vi.fn()
+      ;(window as unknown as Record<string, unknown>).gtag = mockGtag
+      const user = userEvent.setup()
+
+      render(<UpgradeBtn loc="billing-page" />)
+
+      const badgeText = screen.getByText(/upgradeBtn\.encourage/i)
+      await user.click(badgeText)
+
+      expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', { loc: 'billing-page' })
+      delete (window as unknown as Record<string, unknown>).gtag
+    })
+  })
+
+  // PlanUpgradeModal integration: close modal and trigger pricing
+  describe('PlanUpgradeModal upgrade flow', () => {
+    it('should call onClose and setShowPricingModal when clicking upgrade button in modal', async () => {
+      const user = userEvent.setup()
+      const onClose = vi.fn()
+
+      render(
+        <PlanUpgradeModal
+          show={true}
+          onClose={onClose}
+          title="Upgrade Required"
+          description="You need a better plan"
+        />,
+      )
+
+      // The modal should show title and description
+      expect(screen.getByText('Upgrade Required')).toBeInTheDocument()
+      expect(screen.getByText('You need a better plan')).toBeInTheDocument()
+
+      // Click the upgrade button inside the modal
+      const upgradeText = screen.getByText(/triggerLimitModal\.upgrade/i)
+      await user.click(upgradeText)
+
+      // Should close the current modal first
+      expect(onClose).toHaveBeenCalledTimes(1)
+      // Then open pricing modal
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClose and custom onUpgrade when provided', async () => {
+      const user = userEvent.setup()
+      const onClose = vi.fn()
+      const onUpgrade = vi.fn()
+
+      render(
+        <PlanUpgradeModal
+          show={true}
+          onClose={onClose}
+          onUpgrade={onUpgrade}
+          title="Test"
+          description="Test"
+        />,
+      )
+
+      const upgradeText = screen.getByText(/triggerLimitModal\.upgrade/i)
+      await user.click(upgradeText)
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+      expect(onUpgrade).toHaveBeenCalledTimes(1)
+      // Custom onUpgrade replaces default setShowPricingModal
+      expect(mockSetShowPricingModal).not.toHaveBeenCalled()
+    })
+
+    it('should call onClose when clicking dismiss button', async () => {
+      const user = userEvent.setup()
+      const onClose = vi.fn()
+
+      render(
+        <PlanUpgradeModal
+          show={true}
+          onClose={onClose}
+          title="Test"
+          description="Test"
+        />,
+      )
+
+      const dismissBtn = screen.getByText(/triggerLimitModal\.dismiss/i)
+      await user.click(dismissBtn)
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+      expect(mockSetShowPricingModal).not.toHaveBeenCalled()
+    })
+  })
+
+  // Upgrade from PlanComp: clicking upgrade button in plan component triggers pricing
+  describe('PlanComp upgrade button triggers pricing', () => {
+    it('should open pricing modal when clicking upgrade in sandbox plan', async () => {
+      const user = userEvent.setup()
+      setupProviderContext({ type: Plan.sandbox })
+
+      render(<PlanComp loc="test-loc" />)
+
+      const upgradeText = screen.getByText(/upgradeBtn\.encourageShort/i)
+      await user.click(upgradeText)
+
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 4. Capacity Full Components Integration
+// Tests AppsFull, VectorSpaceFull, AnnotationFull, TriggerEventsLimitModal
+// with real child components (UsageInfo, ProgressBar, UpgradeBtn)
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Capacity Full Components Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  // AppsFull renders with correct messaging and components
+  describe('AppsFull integration', () => {
+    it('should display upgrade tip and upgrade button for sandbox plan at capacity', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { buildApps: 5 },
+        total: { buildApps: 5 },
+      })
+
+      render(<AppsFull loc="test" />)
+
+      // Should show "full" tip
+      expect(screen.getByText(/apps\.fullTip1$/i)).toBeInTheDocument()
+      // Should show upgrade button
+      expect(screen.getByText(/upgradeBtn\.encourageShort/i)).toBeInTheDocument()
+      // Should show usage/total fraction "5/5"
+      expect(screen.getByText(/5\/5/)).toBeInTheDocument()
+      // Should have a progress bar rendered
+      expect(screen.getByTestId('billing-progress-bar')).toBeInTheDocument()
+    })
+
+    it('should display upgrade tip and upgrade button for professional plan', () => {
+      setupProviderContext({
+        type: Plan.professional,
+        usage: { buildApps: 48 },
+        total: { buildApps: 50 },
+      })
+
+      render(<AppsFull loc="test" />)
+
+      expect(screen.getByText(/apps\.fullTip1$/i)).toBeInTheDocument()
+      expect(screen.getByText(/upgradeBtn\.encourageShort/i)).toBeInTheDocument()
+    })
+
+    it('should display contact tip and contact button for team plan', () => {
+      setupProviderContext({
+        type: Plan.team,
+        usage: { buildApps: 200 },
+        total: { buildApps: 200 },
+      })
+
+      render(<AppsFull loc="test" />)
+
+      // Team plan shows different tip
+      expect(screen.getByText(/apps\.fullTip2$/i)).toBeInTheDocument()
+      // Team plan shows "Contact Us" instead of upgrade
+      expect(screen.getByText(/apps\.contactUs/i)).toBeInTheDocument()
+      expect(screen.queryByText(/upgradeBtn\.encourageShort/i)).not.toBeInTheDocument()
+    })
+
+    it('should render progress bar with correct color based on usage percentage', () => {
+      // 100% usage should show error color
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { buildApps: 5 },
+        total: { buildApps: 5 },
+      })
+
+      render(<AppsFull loc="test" />)
+
+      const progressBar = screen.getByTestId('billing-progress-bar')
+      expect(progressBar).toHaveClass('bg-components-progress-error-progress')
+    })
+  })
+
+  // VectorSpaceFull renders with VectorSpaceInfo and UpgradeBtn
+  describe('VectorSpaceFull integration', () => {
+    it('should display full tip, upgrade button, and vector space usage info', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { vectorSpace: 50 },
+        total: { vectorSpace: 50 },
+      })
+
+      render(<VectorSpaceFull />)
+
+      // Should show full tip
+      expect(screen.getByText(/vectorSpace\.fullTip/i)).toBeInTheDocument()
+      expect(screen.getByText(/vectorSpace\.fullSolution/i)).toBeInTheDocument()
+      // Should show upgrade button
+      expect(screen.getByText(/upgradeBtn\.encourage$/i)).toBeInTheDocument()
+      // Should show vector space usage info
+      expect(screen.getByText(/usagePage\.vectorSpace/i)).toBeInTheDocument()
+    })
+  })
+
+  // AnnotationFull renders with Usage component and UpgradeBtn
+  describe('AnnotationFull integration', () => {
+    it('should display annotation full tip, upgrade button, and usage info', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { annotatedResponse: 10 },
+        total: { annotatedResponse: 10 },
+      })
+
+      render(<AnnotationFull />)
+
+      expect(screen.getByText(/annotatedResponse\.fullTipLine1/i)).toBeInTheDocument()
+      expect(screen.getByText(/annotatedResponse\.fullTipLine2/i)).toBeInTheDocument()
+      // UpgradeBtn rendered
+      expect(screen.getByText(/upgradeBtn\.encourage$/i)).toBeInTheDocument()
+      // Usage component should show annotation quota
+      expect(screen.getByText(/annotatedResponse\.quotaTitle/i)).toBeInTheDocument()
+    })
+  })
+
+  // AnnotationFullModal shows modal with usage and upgrade button
+  describe('AnnotationFullModal integration', () => {
+    it('should render modal with annotation info and upgrade button when show is true', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { annotatedResponse: 10 },
+        total: { annotatedResponse: 10 },
+      })
+
+      render(<AnnotationFullModal show={true} onHide={vi.fn()} />)
+
+      expect(screen.getByText(/annotatedResponse\.fullTipLine1/i)).toBeInTheDocument()
+      expect(screen.getByText(/annotatedResponse\.quotaTitle/i)).toBeInTheDocument()
+      expect(screen.getByText(/upgradeBtn\.encourage$/i)).toBeInTheDocument()
+    })
+
+    it('should not render content when show is false', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { annotatedResponse: 10 },
+        total: { annotatedResponse: 10 },
+      })
+
+      render(<AnnotationFullModal show={false} onHide={vi.fn()} />)
+
+      expect(screen.queryByText(/annotatedResponse\.fullTipLine1/i)).not.toBeInTheDocument()
+    })
+  })
+
+  // TriggerEventsLimitModal renders PlanUpgradeModal with embedded UsageInfo
+  describe('TriggerEventsLimitModal integration', () => {
+    it('should display trigger limit title, usage info, and upgrade button', () => {
+      setupProviderContext({ type: Plan.professional })
+
+      render(
+        <TriggerEventsLimitModal
+          show={true}
+          onClose={vi.fn()}
+          onUpgrade={vi.fn()}
+          usage={18000}
+          total={20000}
+          resetInDays={5}
+        />,
+      )
+
+      // Modal title and description
+      expect(screen.getByText(/triggerLimitModal\.title/i)).toBeInTheDocument()
+      expect(screen.getByText(/triggerLimitModal\.description/i)).toBeInTheDocument()
+      // Embedded UsageInfo with trigger events data
+      expect(screen.getByText(/triggerLimitModal\.usageTitle/i)).toBeInTheDocument()
+      expect(screen.getByText('18000')).toBeInTheDocument()
+      expect(screen.getByText('20000')).toBeInTheDocument()
+      // Reset info
+      expect(screen.getByText(/usagePage\.resetsIn/i)).toBeInTheDocument()
+      // Upgrade and dismiss buttons
+      expect(screen.getByText(/triggerLimitModal\.upgrade/i)).toBeInTheDocument()
+      expect(screen.getByText(/triggerLimitModal\.dismiss/i)).toBeInTheDocument()
+    })
+
+    it('should call onClose and onUpgrade when clicking upgrade', async () => {
+      const user = userEvent.setup()
+      const onClose = vi.fn()
+      const onUpgrade = vi.fn()
+      setupProviderContext({ type: Plan.professional })
+
+      render(
+        <TriggerEventsLimitModal
+          show={true}
+          onClose={onClose}
+          onUpgrade={onUpgrade}
+          usage={20000}
+          total={20000}
+        />,
+      )
+
+      const upgradeBtn = screen.getByText(/triggerLimitModal\.upgrade/i)
+      await user.click(upgradeBtn)
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+      expect(onUpgrade).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 5. Header Billing Button Integration
+// Tests HeaderBillingBtn behavior for different plan states
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Header Billing Button Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  it('should render UpgradeBtn (premium badge) for sandbox plan', () => {
+    setupProviderContext({ type: Plan.sandbox })
+
+    render(<HeaderBillingBtn />)
+
+    expect(screen.getByText(/upgradeBtn\.encourageShort/i)).toBeInTheDocument()
+  })
+
+  it('should render "pro" badge for professional plan', () => {
+    setupProviderContext({ type: Plan.professional })
+
+    render(<HeaderBillingBtn />)
+
+    expect(screen.getByText('pro')).toBeInTheDocument()
+    expect(screen.queryByText(/upgradeBtn/i)).not.toBeInTheDocument()
+  })
+
+  it('should render "team" badge for team plan', () => {
+    setupProviderContext({ type: Plan.team })
+
+    render(<HeaderBillingBtn />)
+
+    expect(screen.getByText('team')).toBeInTheDocument()
+  })
+
+  it('should return null when billing is disabled', () => {
+    setupProviderContext({ type: Plan.sandbox }, { enableBilling: false })
+
+    const { container } = render(<HeaderBillingBtn />)
+
+    expect(container.innerHTML).toBe('')
+  })
+
+  it('should return null when plan is not fetched yet', () => {
+    setupProviderContext({ type: Plan.sandbox }, { isFetchedPlan: false })
+
+    const { container } = render(<HeaderBillingBtn />)
+
+    expect(container.innerHTML).toBe('')
+  })
+
+  it('should call onClick when clicking pro/team badge in non-display-only mode', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    setupProviderContext({ type: Plan.professional })
+
+    render(<HeaderBillingBtn onClick={onClick} />)
+
+    await user.click(screen.getByText('pro'))
+
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not call onClick when isDisplayOnly is true', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    setupProviderContext({ type: Plan.professional })
+
+    render(<HeaderBillingBtn onClick={onClick} isDisplayOnly />)
+
+    await user.click(screen.getByText('pro'))
+
+    expect(onClick).not.toHaveBeenCalled()
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 6. PriorityLabel Integration
+// Tests priority badge display for different plan types
+// ═══════════════════════════════════════════════════════════════════════════
+describe('PriorityLabel Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  it('should display "standard" priority for sandbox plan', () => {
+    setupProviderContext({ type: Plan.sandbox })
+
+    render(<PriorityLabel />)
+
+    expect(screen.getByText(/plansCommon\.priority\.standard/i)).toBeInTheDocument()
+  })
+
+  it('should display "priority" for professional plan with icon', () => {
+    setupProviderContext({ type: Plan.professional })
+
+    const { container } = render(<PriorityLabel />)
+
+    expect(screen.getByText(/plansCommon\.priority\.priority/i)).toBeInTheDocument()
+    // Professional plan should show the priority icon
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should display "top-priority" for team plan with icon', () => {
+    setupProviderContext({ type: Plan.team })
+
+    const { container } = render(<PriorityLabel />)
+
+    expect(screen.getByText(/plansCommon\.priority\.top-priority/i)).toBeInTheDocument()
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should display "top-priority" for enterprise plan', () => {
+    setupProviderContext({ type: Plan.enterprise })
+
+    render(<PriorityLabel />)
+
+    expect(screen.getByText(/plansCommon\.priority\.top-priority/i)).toBeInTheDocument()
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 7. Usage Display Edge Cases
+// Tests storage mode, threshold logic, and progress bar color integration
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Usage Display Edge Cases', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  // Vector space storage mode behavior
+  describe('VectorSpace storage mode in PlanComp', () => {
+    it('should show "< 50" for sandbox plan with low vector space usage', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { vectorSpace: 10 },
+        total: { vectorSpace: 50 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Storage mode: usage below threshold shows "< 50"
+      expect(screen.getByText(/</)).toBeInTheDocument()
+    })
+
+    it('should show indeterminate progress bar for usage below threshold', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { vectorSpace: 10 },
+        total: { vectorSpace: 50 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Should have an indeterminate progress bar
+      expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
+    })
+
+    it('should show actual usage for pro plan above threshold', () => {
+      setupProviderContext({
+        type: Plan.professional,
+        usage: { vectorSpace: 1024 },
+        total: { vectorSpace: 5120 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Pro plan above threshold shows actual value
+      expect(screen.getByText('1024')).toBeInTheDocument()
+    })
+  })
+
+  // Progress bar color logic through real components
+  describe('Progress bar color reflects usage severity', () => {
+    it('should show normal color for low usage percentage', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { buildApps: 1 },
+        total: { buildApps: 5 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // 20% usage - normal color
+      const progressBars = screen.getAllByTestId('billing-progress-bar')
+      // At least one should have the normal progress color
+      const hasNormalColor = progressBars.some(bar =>
+        bar.classList.contains('bg-components-progress-bar-progress-solid'),
+      )
+      expect(hasNormalColor).toBe(true)
+    })
+  })
+
+  // Reset days calculation in PlanComp
+  describe('Reset days integration', () => {
+    it('should not show reset for sandbox trigger events (no reset_date)', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        total: { triggerEvents: 3000 },
+        reset: { triggerEvents: null },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Find the trigger events section - should not have reset text
+      const triggerSection = screen.getByText(/usagePage\.triggerEvents/i)
+      const parent = triggerSection.closest('[class*="flex flex-col"]')
+      // No reset text should appear (sandbox doesn't show reset for triggerEvents)
+      expect(parent?.textContent).not.toContain('usagePage.resetsIn')
+    })
+
+    it('should show reset for professional trigger events with reset date', () => {
+      setupProviderContext({
+        type: Plan.professional,
+        total: { triggerEvents: 20000 },
+        reset: { triggerEvents: 14 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Professional plan with finite triggerEvents should show reset
+      const resetTexts = screen.getAllByText(/usagePage\.resetsIn/i)
+      expect(resetTexts.length).toBeGreaterThan(0)
+    })
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 8. Cross-Component Upgrade Flow (End-to-End)
+// Tests the complete chain: capacity alert → upgrade button → pricing
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Cross-Component Upgrade Flow', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  it('should trigger pricing from AppsFull upgrade button', async () => {
+    const user = userEvent.setup()
+    setupProviderContext({
+      type: Plan.sandbox,
+      usage: { buildApps: 5 },
+      total: { buildApps: 5 },
+    })
+
+    render(<AppsFull loc="app-create" />)
+
+    const upgradeText = screen.getByText(/upgradeBtn\.encourageShort/i)
+    await user.click(upgradeText)
+
+    expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+  })
+
+  it('should trigger pricing from VectorSpaceFull upgrade button', async () => {
+    const user = userEvent.setup()
+    setupProviderContext({
+      type: Plan.sandbox,
+      usage: { vectorSpace: 50 },
+      total: { vectorSpace: 50 },
+    })
+
+    render(<VectorSpaceFull />)
+
+    const upgradeText = screen.getByText(/upgradeBtn\.encourage$/i)
+    await user.click(upgradeText)
+
+    expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+  })
+
+  it('should trigger pricing from AnnotationFull upgrade button', async () => {
+    const user = userEvent.setup()
+    setupProviderContext({
+      type: Plan.sandbox,
+      usage: { annotatedResponse: 10 },
+      total: { annotatedResponse: 10 },
+    })
+
+    render(<AnnotationFull />)
+
+    const upgradeText = screen.getByText(/upgradeBtn\.encourage$/i)
+    await user.click(upgradeText)
+
+    expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+  })
+
+  it('should trigger pricing from TriggerEventsLimitModal through PlanUpgradeModal', async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    setupProviderContext({ type: Plan.professional })
+
+    render(
+      <TriggerEventsLimitModal
+        show={true}
+        onClose={onClose}
+        onUpgrade={vi.fn()}
+        usage={20000}
+        total={20000}
+      />,
+    )
+
+    // TriggerEventsLimitModal passes onUpgrade to PlanUpgradeModal
+    // PlanUpgradeModal's upgrade button calls onClose then onUpgrade
+    const upgradeBtn = screen.getByText(/triggerLimitModal\.upgrade/i)
+    await user.click(upgradeBtn)
+
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('should trigger pricing from AnnotationFullModal upgrade button', async () => {
+    const user = userEvent.setup()
+    setupProviderContext({
+      type: Plan.sandbox,
+      usage: { annotatedResponse: 10 },
+      total: { annotatedResponse: 10 },
+    })
+
+    render(<AnnotationFullModal show={true} onHide={vi.fn()} />)
+
+    const upgradeText = screen.getByText(/upgradeBtn\.encourage$/i)
+    await user.click(upgradeText)
+
+    expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+  })
+})

web/__tests__/workflow-parallel-limit.test.tsx

@@ -0,0 +1,261 @@
+/**
+ * MAX_PARALLEL_LIMIT Configuration Bug Test
+ *
+ * This test reproduces and verifies the fix for issue #23083:
+ * MAX_PARALLEL_LIMIT environment variable does not take effect in iteration panel
+ */
+
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+
+// Mock environment variables before importing constants
+const originalEnv = process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT
+
+// Test with different environment values
+function setupEnvironment(value?: string) {
+  if (value)
+    process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT = value
+  else
+    delete process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT
+
+  // Clear module cache to force re-evaluation
+  vi.resetModules()
+}
+
+function restoreEnvironment() {
+  if (originalEnv)
+    process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT = originalEnv
+  else
+    delete process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT
+
+  vi.resetModules()
+}
+
+// Mock i18next with proper implementation
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      if (key.includes('MaxParallelismTitle'))
+        return 'Max Parallelism'
+      if (key.includes('MaxParallelismDesc'))
+        return 'Maximum number of parallel executions'
+      if (key.includes('parallelMode'))
+        return 'Parallel Mode'
+      if (key.includes('parallelPanelDesc'))
+        return 'Enable parallel execution'
+      if (key.includes('errorResponseMethod'))
+        return 'Error Response Method'
+      return key
+    },
+  }),
+  initReactI18next: {
+    type: '3rdParty',
+    init: vi.fn(),
+  },
+}))
+
+// Mock i18next module completely to prevent initialization issues
+vi.mock('i18next', () => ({
+  use: vi.fn().mockReturnThis(),
+  init: vi.fn().mockReturnThis(),
+  t: vi.fn(key => key),
+  isInitialized: true,
+}))
+
+// Mock the useConfig hook
+vi.mock('@/app/components/workflow/nodes/iteration/use-config', () => ({
+  default: () => ({
+    inputs: {
+      is_parallel: true,
+      parallel_nums: 5,
+      error_handle_mode: 'terminated',
+    },
+    changeParallel: vi.fn(),
+    changeParallelNums: vi.fn(),
+    changeErrorHandleMode: vi.fn(),
+  }),
+}))
+
+// Mock other components
+vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-picker', () => ({
+  default: function MockVarReferencePicker() {
+    return <div data-testid="var-reference-picker">VarReferencePicker</div>
+  },
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/split', () => ({
+  default: function MockSplit() {
+    return <div data-testid="split">Split</div>
+  },
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/field', () => ({
+  default: function MockField({ title, children }: { title: string, children: React.ReactNode }) {
+    return (
+      <div data-testid="field">
+        <label>{title}</label>
+        {children}
+      </div>
+    )
+  },
+}))
+
+const getParallelControls = () => ({
+  numberInput: screen.getByRole('spinbutton'),
+  slider: screen.getByRole('slider'),
+})
+
+describe('MAX_PARALLEL_LIMIT Configuration Bug', () => {
+  const mockNodeData = {
+    id: 'test-iteration-node',
+    type: 'iteration' as const,
+    data: {
+      title: 'Test Iteration',
+      desc: 'Test iteration node',
+      iterator_selector: ['test'],
+      output_selector: ['output'],
+      is_parallel: true,
+      parallel_nums: 5,
+      error_handle_mode: 'terminated' as const,
+    },
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    restoreEnvironment()
+  })
+
+  afterAll(() => {
+    restoreEnvironment()
+  })
+
+  describe('Environment Variable Parsing', () => {
+    it('should parse MAX_PARALLEL_LIMIT from NEXT_PUBLIC_MAX_PARALLEL_LIMIT environment variable', async () => {
+      setupEnvironment('25')
+      const { MAX_PARALLEL_LIMIT } = await import('@/config')
+      expect(MAX_PARALLEL_LIMIT).toBe(25)
+    })
+
+    it('should fallback to default when environment variable is not set', async () => {
+      setupEnvironment() // No environment variable
+      const { MAX_PARALLEL_LIMIT } = await import('@/config')
+      expect(MAX_PARALLEL_LIMIT).toBe(10)
+    })
+
+    it('should handle invalid environment variable values', async () => {
+      setupEnvironment('invalid')
+      const { MAX_PARALLEL_LIMIT } = await import('@/config')
+
+      // Should fall back to default when parsing fails
+      expect(MAX_PARALLEL_LIMIT).toBe(10)
+    })
+
+    it('should handle empty environment variable', async () => {
+      setupEnvironment('')
+      const { MAX_PARALLEL_LIMIT } = await import('@/config')
+
+      // Should fall back to default when empty
+      expect(MAX_PARALLEL_LIMIT).toBe(10)
+    })
+
+    // Edge cases for boundary values
+    it('should clamp MAX_PARALLEL_LIMIT to MIN when env is 0 or negative', async () => {
+      setupEnvironment('0')
+      let { MAX_PARALLEL_LIMIT } = await import('@/config')
+      expect(MAX_PARALLEL_LIMIT).toBe(10) // Falls back to default
+
+      setupEnvironment('-5')
+      ;({ MAX_PARALLEL_LIMIT } = await import('@/config'))
+      expect(MAX_PARALLEL_LIMIT).toBe(10) // Falls back to default
+    })
+
+    it('should handle float numbers by parseInt behavior', async () => {
+      setupEnvironment('12.7')
+      const { MAX_PARALLEL_LIMIT } = await import('@/config')
+      // parseInt truncates to integer
+      expect(MAX_PARALLEL_LIMIT).toBe(12)
+    })
+  })
+
+  describe('UI Component Integration (Main Fix Verification)', () => {
+    it('should render iteration panel with environment-configured max value', async () => {
+      // Set environment variable to a different value
+      setupEnvironment('30')
+
+      // Import Panel after setting environment
+      const Panel = await import('@/app/components/workflow/nodes/iteration/panel').then(mod => mod.default)
+      const { MAX_PARALLEL_LIMIT } = await import('@/config')
+
+      render(
+        <Panel
+          id="test-node"
+          // @ts-expect-error  key type mismatch
+          data={mockNodeData.data}
+        />,
+      )
+
+      // Behavior-focused assertion: UI max should equal MAX_PARALLEL_LIMIT
+      const { numberInput, slider } = getParallelControls()
+      expect(numberInput).toHaveAttribute('max', String(MAX_PARALLEL_LIMIT))
+      expect(slider).toHaveAttribute('aria-valuemax', String(MAX_PARALLEL_LIMIT))
+
+      // Verify the actual values
+      expect(MAX_PARALLEL_LIMIT).toBe(30)
+      expect(numberInput.getAttribute('max')).toBe('30')
+      expect(slider.getAttribute('aria-valuemax')).toBe('30')
+    })
+
+    it('should maintain UI consistency with different environment values', async () => {
+      setupEnvironment('15')
+      const Panel = await import('@/app/components/workflow/nodes/iteration/panel').then(mod => mod.default)
+      const { MAX_PARALLEL_LIMIT } = await import('@/config')
+
+      render(
+        <Panel
+          id="test-node"
+          // @ts-expect-error  key type mismatch
+          data={mockNodeData.data}
+        />,
+      )
+
+      // Both input and slider should use the same max value from MAX_PARALLEL_LIMIT
+      const { numberInput, slider } = getParallelControls()
+
+      expect(numberInput.getAttribute('max')).toBe(slider.getAttribute('aria-valuemax'))
+      expect(numberInput.getAttribute('max')).toBe(String(MAX_PARALLEL_LIMIT))
+    })
+  })
+
+  describe('Legacy Constant Verification (For Transition Period)', () => {
+    // Marked as transition/deprecation tests
+    it('should maintain MAX_ITERATION_PARALLEL_NUM for backward compatibility', async () => {
+      const { MAX_ITERATION_PARALLEL_NUM } = await import('@/app/components/workflow/constants')
+      expect(typeof MAX_ITERATION_PARALLEL_NUM).toBe('number')
+      expect(MAX_ITERATION_PARALLEL_NUM).toBe(10) // Hardcoded legacy value
+    })
+
+    it('should demonstrate MAX_PARALLEL_LIMIT vs legacy constant difference', async () => {
+      setupEnvironment('50')
+      const { MAX_PARALLEL_LIMIT } = await import('@/config')
+      const { MAX_ITERATION_PARALLEL_NUM } = await import('@/app/components/workflow/constants')
+
+      // MAX_PARALLEL_LIMIT is configurable, MAX_ITERATION_PARALLEL_NUM is not
+      expect(MAX_PARALLEL_LIMIT).toBe(50)
+      expect(MAX_ITERATION_PARALLEL_NUM).toBe(10)
+      expect(MAX_PARALLEL_LIMIT).not.toBe(MAX_ITERATION_PARALLEL_NUM)
+    })
+  })
+
+  describe('Constants Validation', () => {
+    it('should validate that required constants exist and have correct types', async () => {
+      const { MAX_PARALLEL_LIMIT } = await import('@/config')
+      const { MIN_ITERATION_PARALLEL_NUM } = await import('@/app/components/workflow/constants')
+      expect(typeof MAX_PARALLEL_LIMIT).toBe('number')
+      expect(typeof MIN_ITERATION_PARALLEL_NUM).toBe('number')
+      expect(MAX_PARALLEL_LIMIT).toBeGreaterThanOrEqual(MIN_ITERATION_PARALLEL_NUM)
+    })
+  })
+})

web/app/components/base/badge/index.tsx

@@ -3,6 +3,7 @@ import type { CSSProperties, ReactNode } from 'react'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { cn } from '@/utils/classnames'
+import './index.css'
 
 enum BadgeState {
   Warning = 'warning',

web/app/components/base/form/components/field/input-type-select/types.tsx

@@ -1,5 +1,5 @@
 import type { RemixiconComponentType } from '@remixicon/react'
-import * as z from 'zod'
+import { z } from 'zod'
 
 export const InputTypeEnum = z.enum([
   'text-input',

web/app/components/base/form/form-scenarios/base/utils.ts

@@ -1,6 +1,6 @@
 import type { ZodNumber, ZodSchema, ZodString } from 'zod'
 import type { BaseConfiguration } from './types'
-import * as z from 'zod'
+import { z } from 'zod'
 import { BaseFieldType } from './types'
 
 export const generateZodSchema = (fields: BaseConfiguration[]) => {

web/app/components/base/form/form-scenarios/demo/types.ts

@@ -1,4 +1,4 @@
-import * as z from 'zod'
+import { z } from 'zod'
 
 const ContactMethod = z.union([
   z.literal('email'),
@@ -22,10 +22,10 @@ export const UserSchema = z.object({
     .min(3, 'Surname must be at least 3 characters long')
     .regex(/^[A-Z]/, 'Surname must start with a capital letter'),
   isAcceptingTerms: z.boolean().refine(val => val, {
-    error: 'You must accept the terms and conditions',
+    message: 'You must accept the terms and conditions',
   }),
   contact: z.object({
-    email: z.email('Invalid email address'),
+    email: z.string().email('Invalid email address'),
     phone: z.string().optional(),
     preferredContactMethod: ContactMethod,
   }),

web/app/components/base/form/form-scenarios/input-field/utils.ts

@@ -1,6 +1,6 @@
 import type { ZodSchema, ZodString } from 'zod'
 import type { InputFieldConfiguration } from './types'
-import * as z from 'zod'
+import { z } from 'zod'
 import { SupportedFileTypes, TransferMethod } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/schema'
 import { InputFieldType } from './types'
 

web/app/components/base/param-item/top-k-item.tsx

@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { env } from '@/env'
 import ParamItem from '.'
 
 type Props = {
@@ -12,7 +11,12 @@ type Props = {
   enable: boolean
 }
 
-const maxTopK = env.NEXT_PUBLIC_TOP_K_MAX_VALUE
+const maxTopK = (() => {
+  const configValue = Number.parseInt(globalThis.document?.body?.getAttribute('data-public-top-k-max-value') || '', 10)
+  if (configValue && !isNaN(configValue))
+    return configValue
+  return 10
+})()
 const VALUE_LIMIT = {
   default: 2,
   step: 1,

web/app/components/base/premium-badge/index.tsx

@@ -4,6 +4,7 @@ import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { Highlight } from '@/app/components/base/icons/src/public/common'
 import { cn } from '@/utils/classnames'
+import './index.css'
 
 const PremiumBadgeVariants = cva(
   'premium-badge',

web/app/components/base/with-input-validation/index.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import { noop } from 'es-toolkit/function'
-import * as z from 'zod'
+import { z } from 'zod'
 import withValidation from '.'
 
 describe('withValidation HOC', () => {

web/app/components/base/with-input-validation/index.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import * as z from 'zod'
+import { z } from 'zod'
 import withValidation from '.'
 
 // Sample components to wrap with validation
@@ -65,7 +65,7 @@ const ProductCard = ({ name, price, category, inStock }: ProductCardProps) => {
 // Create validated versions
 const userSchema = z.object({
   name: z.string().min(1, 'Name is required'),
-  email: z.email('Invalid email'),
+  email: z.string().email('Invalid email'),
   age: z.number().min(0).max(150),
 })
 
@@ -371,7 +371,7 @@ export const ConfigurationValidation: Story = {
     )
 
     const configSchema = z.object({
-      apiUrl: z.url('Must be valid URL'),
+      apiUrl: z.string().url('Must be valid URL'),
       timeout: z.number().min(0).max(30000),
       retries: z.number().min(0).max(5),
       debug: z.boolean(),
@@ -430,7 +430,7 @@ export const UsageDocumentation: Story = {
         <div>
           <h4 className="mb-2 text-sm font-semibold text-gray-900">Usage Example</h4>
           <pre className="overflow-x-auto rounded-lg bg-gray-900 p-4 text-xs text-gray-100">
-            {`import * as z from 'zod'
+            {`import { z } from 'zod'
 import withValidation from './withValidation'
 
 // Define your component

web/app/components/billing/partner-stack/use-ps-info.spec.tsx

@@ -193,4 +193,107 @@ describe('usePSInfo', () => {
       domain: '.dify.ai',
     })
   })
+
+  // Cookie parse failure: covers catch block (L14-16)
+  it('should fall back to empty object when cookie contains invalid JSON', () => {
+    const { get } = ensureCookieMocks()
+    get.mockReturnValue('not-valid-json{{{')
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    setSearchParams({
+      ps_partner_key: 'from-url',
+      ps_xid: 'click-url',
+    })
+
+    const { result } = renderHook(() => usePSInfo())
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      'Failed to parse partner stack info from cookie:',
+      expect.any(SyntaxError),
+    )
+    // Should still pick up values from search params
+    expect(result.current.psPartnerKey).toBe('from-url')
+    expect(result.current.psClickId).toBe('click-url')
+    consoleSpy.mockRestore()
+  })
+
+  // No keys at all: covers saveOrUpdate early return (L30) and bind no-op (L45 false branch)
+  it('should not save or bind when neither search params nor cookie have keys', () => {
+    const { get, set } = ensureCookieMocks()
+    get.mockReturnValue('{}')
+    setSearchParams({})
+
+    const { result } = renderHook(() => usePSInfo())
+
+    expect(result.current.psPartnerKey).toBeUndefined()
+    expect(result.current.psClickId).toBeUndefined()
+
+    act(() => {
+      result.current.saveOrUpdate()
+    })
+    expect(set).not.toHaveBeenCalled()
+  })
+
+  it('should not call mutateAsync when keys are missing during bind', async () => {
+    const { get } = ensureCookieMocks()
+    get.mockReturnValue('{}')
+    setSearchParams({})
+
+    const { result } = renderHook(() => usePSInfo())
+
+    const mutate = ensureMutateAsync()
+    await act(async () => {
+      await result.current.bind()
+    })
+
+    expect(mutate).not.toHaveBeenCalled()
+  })
+
+  // Non-400 error: covers L55 false branch (shouldRemoveCookie stays false)
+  it('should not remove cookie when bind fails with non-400 error', async () => {
+    const mutate = ensureMutateAsync()
+    mutate.mockRejectedValueOnce({ status: 500 })
+    setSearchParams({
+      ps_partner_key: 'bind-partner',
+      ps_xid: 'bind-click',
+    })
+
+    const { result } = renderHook(() => usePSInfo())
+
+    await act(async () => {
+      await result.current.bind()
+    })
+
+    const { remove } = ensureCookieMocks()
+    expect(remove).not.toHaveBeenCalled()
+  })
+
+  // Fallback to cookie values: covers L19-20 right side of || operator
+  it('should use cookie values when search params are absent', () => {
+    const { get } = ensureCookieMocks()
+    get.mockReturnValue(JSON.stringify({
+      partnerKey: 'cookie-partner',
+      clickId: 'cookie-click',
+    }))
+    setSearchParams({})
+
+    const { result } = renderHook(() => usePSInfo())
+
+    expect(result.current.psPartnerKey).toBe('cookie-partner')
+    expect(result.current.psClickId).toBe('cookie-click')
+  })
+
+  // Partial key missing: only partnerKey present, no clickId
+  it('should not save when only one key is available', () => {
+    const { get, set } = ensureCookieMocks()
+    get.mockReturnValue('{}')
+    setSearchParams({ ps_partner_key: 'partial-key' })
+
+    const { result } = renderHook(() => usePSInfo())
+
+    act(() => {
+      result.current.saveOrUpdate()
+    })
+
+    expect(set).not.toHaveBeenCalled()
+  })
 })

web/app/components/billing/pricing/plans/cloud-plan-item/index.spec.tsx

@@ -66,13 +66,6 @@ beforeAll(() => {
   })
 })
 
-afterAll(() => {
-  Object.defineProperty(window, 'location', {
-    configurable: true,
-    value: originalLocation,
-  })
-})
-
 beforeEach(() => {
   vi.clearAllMocks()
   mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: true })
@@ -82,6 +75,13 @@ beforeEach(() => {
   assignedHref = ''
 })
 
+afterAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: originalLocation,
+  })
+})
+
 describe('CloudPlanItem', () => {
   // Static content for each plan
   describe('Rendering', () => {
@@ -192,5 +192,128 @@ describe('CloudPlanItem', () => {
         expect(assignedHref).toBe('https://subscription.example')
       })
     })
+
+    // Covers L92-93: isFreePlan guard inside handleGetPayUrl
+    it('should do nothing when clicking sandbox plan CTA that is not the current plan', async () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.sandbox}
+          currentPlan={Plan.professional}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      // Sandbox viewed from a higher plan is disabled, but let's verify no API calls
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      await waitFor(() => {
+        expect(mockFetchSubscriptionUrls).not.toHaveBeenCalled()
+        expect(mockBillingInvoices).not.toHaveBeenCalled()
+        expect(assignedHref).toBe('')
+      })
+    })
+
+    // Covers L95: yearly subscription URL ('year' parameter)
+    it('should fetch yearly subscription url when planRange is yearly', async () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.team}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.yearly}
+          canPay
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plansCommon.getStarted' }))
+
+      await waitFor(() => {
+        expect(mockFetchSubscriptionUrls).toHaveBeenCalledWith(Plan.team, 'year')
+        expect(assignedHref).toBe('https://subscription.example')
+      })
+    })
+
+    // Covers L62-63: loading guard prevents double click
+    it('should ignore second click while loading', async () => {
+      // Make the first fetch hang until we resolve it
+      let resolveFirst!: (v: { url: string }) => void
+      mockFetchSubscriptionUrls.mockImplementationOnce(
+        () => new Promise((resolve) => { resolveFirst = resolve }),
+      )
+
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      const button = screen.getByRole('button', { name: 'billing.plansCommon.startBuilding' })
+
+      // First click starts loading
+      fireEvent.click(button)
+      // Second click while loading should be ignored
+      fireEvent.click(button)
+
+      // Resolve first request
+      resolveFirst({ url: 'https://first.example' })
+
+      await waitFor(() => {
+        expect(mockFetchSubscriptionUrls).toHaveBeenCalledTimes(1)
+      })
+    })
+
+    // Covers L82-83, L85-87: openAsyncWindow error path when invoices returns no url
+    it('should invoke onError when billing invoices returns empty url', async () => {
+      mockBillingInvoices.mockResolvedValue({ url: '' })
+      const openWindow = vi.fn(async (cb: () => Promise<string>, opts: { onError?: (e: Error) => void }) => {
+        try {
+          await cb()
+        }
+        catch (e) {
+          opts.onError?.(e as Error)
+        }
+      })
+      mockUseAsyncWindowOpen.mockReturnValue(openWindow)
+
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.professional}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plansCommon.currentPlan' }))
+
+      await waitFor(() => {
+        expect(openWindow).toHaveBeenCalledTimes(1)
+        // The onError callback should have been passed to openAsyncWindow
+        const callArgs = openWindow.mock.calls[0]
+        expect(callArgs[1]).toHaveProperty('onError')
+      })
+    })
+
+    // Covers monthly price display (L139 !isYear branch for price)
+    it('should display monthly pricing without discount', () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.team}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      const teamPlan = ALL_PLANS[Plan.team]
+      expect(screen.getByText(`$${teamPlan.price}`)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.plansCommon\.priceTip.*billing\.plansCommon\.month/)).toBeInTheDocument()
+      // Should NOT show crossed-out yearly price
+      expect(screen.queryByText(`$${teamPlan.price * 12}`)).not.toBeInTheDocument()
+    })
   })
 })

web/app/components/datasets/create/step-two/components/inputs.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import { InputNumber } from '@/app/components/base/input-number'
 import Tooltip from '@/app/components/base/tooltip'
-import { env } from '@/env'
 
 const TextLabel: FC<PropsWithChildren> = (props) => {
   return <label className="text-xs font-semibold leading-none text-text-secondary">{props.children}</label>
@@ -47,7 +46,7 @@ export const DelimiterInput: FC<InputProps & { tooltip?: string }> = (props) =>
 }
 
 export const MaxLengthInput: FC<InputNumberProps> = (props) => {
-  const maxValue = env.NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH
+  const maxValue = Number.parseInt(globalThis.document?.body?.getAttribute('data-public-indexing-max-segmentation-tokens-length') || '4000', 10)
 
   const { t } = useTranslation()
   return (

web/app/components/datasets/create/step-two/hooks/use-segmentation-state.ts

@@ -1,6 +1,5 @@
 import type { ParentMode, PreProcessingRule, ProcessRule, Rules, SummaryIndexSetting as SummaryIndexSettingType } from '@/models/datasets'
 import { useCallback, useRef, useState } from 'react'
-import { env } from '@/env'
 import { ChunkingMode, ProcessMode } from '@/models/datasets'
 import escape from './escape'
 import unescape from './unescape'
@@ -9,7 +8,10 @@ import unescape from './unescape'
 export const DEFAULT_SEGMENT_IDENTIFIER = '\\n\\n'
 export const DEFAULT_MAXIMUM_CHUNK_LENGTH = 1024
 export const DEFAULT_OVERLAP = 50
-export const MAXIMUM_CHUNK_TOKEN_LENGTH = env.NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH
+export const MAXIMUM_CHUNK_TOKEN_LENGTH = Number.parseInt(
+  globalThis.document?.body?.getAttribute('data-public-indexing-max-segmentation-tokens-length') || '4000',
+  10,
+)
 
 export type ParentChildConfig = {
   chunkForContext: ParentMode

web/app/components/datasets/documents/create-from-pipeline/process-documents/components.spec.tsx

@@ -1,7 +1,7 @@
 import type { BaseConfiguration } from '@/app/components/base/form/form-scenarios/base/types'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import * as z from 'zod'
+import { z } from 'zod'
 import { BaseFieldType } from '@/app/components/base/form/form-scenarios/base/types'
 import Toast from '@/app/components/base/toast'
 import Actions from './actions'
@@ -53,7 +53,7 @@ const createFailingSchema = () => {
         issues: [{ path: ['field1'], message: 'is required' }],
       },
     }),
-  } as unknown as z.ZodType
+  } as unknown as z.ZodSchema
 }
 
 // ==========================================

web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx

@@ -1,129 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import type { DocType } from '@/models/datasets'
-import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
-import Radio from '@/app/components/base/radio'
-import Tooltip from '@/app/components/base/tooltip'
-import { useMetadataMap } from '@/hooks/use-metadata'
-import { CUSTOMIZABLE_DOC_TYPES } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
-import s from '../style.module.css'
-
-const TypeIcon: FC<{ iconName: string, className?: string }> = ({ iconName, className = '' }) => {
-  return <div className={cn(s.commonIcon, s[`${iconName}Icon`], className)} />
-}
-
-const IconButton: FC<{ type: DocType, isChecked: boolean }> = ({ type, isChecked = false }) => {
-  const metadataMap = useMetadataMap()
-  return (
-    <Tooltip popupContent={metadataMap[type].text}>
-      <button type="button" className={cn(s.iconWrapper, 'group', isChecked ? s.iconCheck : '')}>
-        <TypeIcon
-          iconName={metadataMap[type].iconName || ''}
-          className={`group-hover:bg-primary-600 ${isChecked ? '!bg-primary-600' : ''}`}
-        />
-      </button>
-    </Tooltip>
-  )
-}
-
-type DocTypeSelectorProps = {
-  docType: DocType | ''
-  documentType?: DocType | ''
-  tempDocType: DocType | ''
-  onTempDocTypeChange: (type: DocType | '') => void
-  onConfirm: () => void
-  onCancel: () => void
-}
-
-const DocTypeSelector: FC<DocTypeSelectorProps> = ({
-  docType,
-  documentType,
-  tempDocType,
-  onTempDocTypeChange,
-  onConfirm,
-  onCancel,
-}) => {
-  const { t } = useTranslation()
-  const isFirstTime = !docType && !documentType
-  const currValue = tempDocType ?? documentType
-
-  return (
-    <>
-      {isFirstTime && (
-        <div className={s.desc}>{t('metadata.desc', { ns: 'datasetDocuments' })}</div>
-      )}
-      <div className={s.operationWrapper}>
-        {isFirstTime && (
-          <span className={s.title}>{t('metadata.docTypeSelectTitle', { ns: 'datasetDocuments' })}</span>
-        )}
-        {documentType && (
-          <>
-            <span className={s.title}>{t('metadata.docTypeChangeTitle', { ns: 'datasetDocuments' })}</span>
-            <span className={s.changeTip}>{t('metadata.docTypeSelectWarning', { ns: 'datasetDocuments' })}</span>
-          </>
-        )}
-        <Radio.Group value={currValue ?? ''} onChange={onTempDocTypeChange} className={s.radioGroup}>
-          {CUSTOMIZABLE_DOC_TYPES.map(type => (
-            <Radio key={type} value={type} className={`${s.radio} ${currValue === type ? 'shadow-none' : ''}`}>
-              <IconButton type={type} isChecked={currValue === type} />
-            </Radio>
-          ))}
-        </Radio.Group>
-        {isFirstTime && (
-          <Button variant="primary" onClick={onConfirm} disabled={!tempDocType}>
-            {t('metadata.firstMetaAction', { ns: 'datasetDocuments' })}
-          </Button>
-        )}
-        {documentType && (
-          <div className={s.opBtnWrapper}>
-            <Button onClick={onConfirm} className={`${s.opBtn} ${s.opSaveBtn}`} variant="primary">
-              {t('operation.save', { ns: 'common' })}
-            </Button>
-            <Button onClick={onCancel} className={`${s.opBtn} ${s.opCancelBtn}`}>
-              {t('operation.cancel', { ns: 'common' })}
-            </Button>
-          </div>
-        )}
-      </div>
-    </>
-  )
-}
-
-type DocumentTypeDisplayProps = {
-  displayType: DocType | ''
-  showChangeLink?: boolean
-  onChangeClick?: () => void
-}
-
-export const DocumentTypeDisplay: FC<DocumentTypeDisplayProps> = ({
-  displayType,
-  showChangeLink = false,
-  onChangeClick,
-}) => {
-  const { t } = useTranslation()
-  const metadataMap = useMetadataMap()
-  const effectiveType = displayType || 'book'
-
-  return (
-    <div className={s.documentTypeShow}>
-      {(displayType || !showChangeLink) && (
-        <>
-          <TypeIcon iconName={metadataMap[effectiveType]?.iconName || ''} className={s.iconShow} />
-          {metadataMap[effectiveType].text}
-          {showChangeLink && (
-            <div className="ml-1 inline-flex items-center gap-1">
-              ·
-              <div onClick={onChangeClick} className="cursor-pointer hover:text-text-accent">
-                {t('operation.change', { ns: 'common' })}
-              </div>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  )
-}
-
-export default DocTypeSelector

web/app/components/datasets/documents/detail/metadata/components/field-info.tsx

@@ -1,89 +0,0 @@
-'use client'
-import type { FC, ReactNode } from 'react'
-import type { inputType } from '@/hooks/use-metadata'
-import { useTranslation } from 'react-i18next'
-import AutoHeightTextarea from '@/app/components/base/auto-height-textarea'
-import Input from '@/app/components/base/input'
-import { SimpleSelect } from '@/app/components/base/select'
-import { getTextWidthWithCanvas } from '@/utils'
-import { cn } from '@/utils/classnames'
-import s from '../style.module.css'
-
-type FieldInfoProps = {
-  label: string
-  value?: string
-  valueIcon?: ReactNode
-  displayedValue?: string
-  defaultValue?: string
-  showEdit?: boolean
-  inputType?: inputType
-  selectOptions?: Array<{ value: string, name: string }>
-  onUpdate?: (v: string) => void
-}
-
-const FieldInfo: FC<FieldInfoProps> = ({
-  label,
-  value = '',
-  valueIcon,
-  displayedValue = '',
-  defaultValue,
-  showEdit = false,
-  inputType = 'input',
-  selectOptions = [],
-  onUpdate,
-}) => {
-  const { t } = useTranslation()
-  const textNeedWrap = getTextWidthWithCanvas(displayedValue) > 190
-  const editAlignTop = showEdit && inputType === 'textarea'
-  const readAlignTop = !showEdit && textNeedWrap
-
-  const renderContent = () => {
-    if (!showEdit)
-      return displayedValue
-
-    if (inputType === 'select') {
-      return (
-        <SimpleSelect
-          onSelect={({ value }) => onUpdate?.(value as string)}
-          items={selectOptions}
-          defaultValue={value}
-          className={s.select}
-          wrapperClassName={s.selectWrapper}
-          placeholder={`${t('metadata.placeholder.select', { ns: 'datasetDocuments' })}${label}`}
-        />
-      )
-    }
-
-    if (inputType === 'textarea') {
-      return (
-        <AutoHeightTextarea
-          onChange={e => onUpdate?.(e.target.value)}
-          value={value}
-          className={s.textArea}
-          placeholder={`${t('metadata.placeholder.add', { ns: 'datasetDocuments' })}${label}`}
-        />
-      )
-    }
-
-    return (
-      <Input
-        onChange={e => onUpdate?.(e.target.value)}
-        value={value}
-        defaultValue={defaultValue}
-        placeholder={`${t('metadata.placeholder.add', { ns: 'datasetDocuments' })}${label}`}
-      />
-    )
-  }
-
-  return (
-    <div className={cn('flex min-h-5 items-center gap-1 py-0.5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
-      <div className={cn('w-[200px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap text-text-tertiary', editAlignTop && 'pt-1')}>{label}</div>
-      <div className="flex grow items-center gap-1 text-text-secondary">
-        {valueIcon}
-        {renderContent()}
-      </div>
-    </div>
-  )
-}
-
-export default FieldInfo

web/app/components/datasets/documents/detail/metadata/components/metadata-field-list.tsx

@@ -1,88 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import type { metadataType } from '@/hooks/use-metadata'
-import type { FullDocumentDetail } from '@/models/datasets'
-import { get } from 'es-toolkit/compat'
-import { useBookCategories, useBusinessDocCategories, useLanguages, useMetadataMap, usePersonalDocCategories } from '@/hooks/use-metadata'
-import FieldInfo from './field-info'
-
-const map2Options = (map: Record<string, string>) => {
-  return Object.keys(map).map(key => ({ value: key, name: map[key] }))
-}
-
-function useCategoryMapResolver(mainField: metadataType | '') {
-  const languageMap = useLanguages()
-  const bookCategoryMap = useBookCategories()
-  const personalDocCategoryMap = usePersonalDocCategories()
-  const businessDocCategoryMap = useBusinessDocCategories()
-
-  return (field: string): Record<string, string> => {
-    if (field === 'language')
-      return languageMap
-    if (field === 'category' && mainField === 'book')
-      return bookCategoryMap
-    if (field === 'document_type') {
-      if (mainField === 'personal_document')
-        return personalDocCategoryMap
-      if (mainField === 'business_document')
-        return businessDocCategoryMap
-    }
-    return {}
-  }
-}
-
-type MetadataFieldListProps = {
-  mainField: metadataType | ''
-  canEdit?: boolean
-  metadata?: Record<string, string>
-  docDetail?: FullDocumentDetail
-  onFieldUpdate?: (field: string, value: string) => void
-}
-
-const MetadataFieldList: FC<MetadataFieldListProps> = ({
-  mainField,
-  canEdit = false,
-  metadata,
-  docDetail,
-  onFieldUpdate,
-}) => {
-  const metadataMap = useMetadataMap()
-  const getCategoryMap = useCategoryMapResolver(mainField)
-
-  if (!mainField)
-    return null
-
-  const fieldMap = metadataMap[mainField]?.subFieldsMap
-  const isFixedField = ['originInfo', 'technicalParameters'].includes(mainField)
-  const sourceData = isFixedField ? docDetail : metadata
-
-  const getDisplayValue = (field: string) => {
-    const val = get(sourceData, field, '')
-    if (!val && val !== 0)
-      return '-'
-    if (fieldMap[field]?.inputType === 'select')
-      return getCategoryMap(field)[val]
-    if (fieldMap[field]?.render)
-      return fieldMap[field]?.render?.(val, field === 'hit_count' ? get(sourceData, 'segment_count', 0) as number : undefined)
-    return val
-  }
-
-  return (
-    <div className="flex flex-col gap-1">
-      {Object.keys(fieldMap).map(field => (
-        <FieldInfo
-          key={fieldMap[field]?.label}
-          label={fieldMap[field]?.label}
-          displayedValue={getDisplayValue(field)}
-          value={get(sourceData, field, '')}
-          inputType={fieldMap[field]?.inputType || 'input'}
-          showEdit={canEdit}
-          onUpdate={val => onFieldUpdate?.(field, val)}
-          selectOptions={map2Options(getCategoryMap(field))}
-        />
-      ))}
-    </div>
-  )
-}
-
-export default MetadataFieldList

web/app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts

@@ -1,137 +0,0 @@
-'use client'
-import type { CommonResponse } from '@/models/common'
-import type { DocType, FullDocumentDetail } from '@/models/datasets'
-import { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
-import { ToastContext } from '@/app/components/base/toast'
-import { modifyDocMetadata } from '@/service/datasets'
-import { asyncRunSafe } from '@/utils'
-import { useDocumentContext } from '../../context'
-
-type MetadataState = {
-  documentType?: DocType | ''
-  metadata: Record<string, string>
-}
-
-/**
- * Normalize raw doc_type: treat 'others' as empty string.
- */
-const normalizeDocType = (rawDocType: string): DocType | '' => {
-  return rawDocType === 'others' ? '' : rawDocType as DocType | ''
-}
-
-type UseMetadataStateOptions = {
-  docDetail?: FullDocumentDetail
-  onUpdate?: () => void
-}
-
-export function useMetadataState({ docDetail, onUpdate }: UseMetadataStateOptions) {
-  const { doc_metadata = {} } = docDetail || {}
-  const rawDocType = docDetail?.doc_type ?? ''
-  const docType = normalizeDocType(rawDocType)
-
-  const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
-  const datasetId = useDocumentContext(s => s.datasetId)
-  const documentId = useDocumentContext(s => s.documentId)
-
-  // If no documentType yet, start in editing + showDocTypes mode
-  const [editStatus, setEditStatus] = useState(!docType)
-  const [metadataParams, setMetadataParams] = useState<MetadataState>(
-    docType
-      ? { documentType: docType, metadata: (doc_metadata || {}) as Record<string, string> }
-      : { metadata: {} },
-  )
-  const [showDocTypes, setShowDocTypes] = useState(!docType)
-  const [tempDocType, setTempDocType] = useState<DocType | ''>('')
-  const [saveLoading, setSaveLoading] = useState(false)
-
-  // Sync local state when the upstream docDetail changes (e.g. after save or navigation).
-  // These setters are intentionally called together to batch-reset multiple pieces
-  // of derived editing state that cannot be expressed as pure derived values.
-  useEffect(() => {
-    if (docDetail?.doc_type) {
-      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
-      setEditStatus(false)
-      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
-      setShowDocTypes(false)
-      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
-      setTempDocType(docType)
-      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
-      setMetadataParams({
-        documentType: docType,
-        metadata: (docDetail?.doc_metadata || {}) as Record<string, string>,
-      })
-    }
-  }, [docDetail?.doc_type, docDetail?.doc_metadata, docType])
-
-  const confirmDocType = () => {
-    if (!tempDocType)
-      return
-    setMetadataParams({
-      documentType: tempDocType,
-      // Clear metadata when switching to a different doc type
-      metadata: tempDocType === metadataParams.documentType ? metadataParams.metadata : {},
-    })
-    setEditStatus(true)
-    setShowDocTypes(false)
-  }
-
-  const cancelDocType = () => {
-    setTempDocType(metadataParams.documentType ?? '')
-    setEditStatus(true)
-    setShowDocTypes(false)
-  }
-
-  const enableEdit = () => {
-    setEditStatus(true)
-  }
-
-  const cancelEdit = () => {
-    setMetadataParams({ documentType: docType || '', metadata: { ...(docDetail?.doc_metadata || {}) } })
-    setEditStatus(!docType)
-    if (!docType)
-      setShowDocTypes(true)
-  }
-
-  const saveMetadata = async () => {
-    setSaveLoading(true)
-    const [e] = await asyncRunSafe<CommonResponse>(modifyDocMetadata({
-      datasetId,
-      documentId,
-      body: {
-        doc_type: metadataParams.documentType || docType || '',
-        doc_metadata: metadataParams.metadata,
-      },
-    }) as Promise<CommonResponse>)
-    if (!e)
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
-    else
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
-    onUpdate?.()
-    setEditStatus(false)
-    setSaveLoading(false)
-  }
-
-  const updateMetadataField = (field: string, value: string) => {
-    setMetadataParams(prev => ({ ...prev, metadata: { ...prev.metadata, [field]: value } }))
-  }
-
-  return {
-    docType,
-    editStatus,
-    showDocTypes,
-    tempDocType,
-    saveLoading,
-    metadataParams,
-    setTempDocType,
-    setShowDocTypes,
-    confirmDocType,
-    cancelDocType,
-    enableEdit,
-    cancelEdit,
-    saveMetadata,
-    updateMetadataField,
-  }
-}

web/app/components/datasets/documents/detail/metadata/index.spec.tsx

@@ -1,6 +1,7 @@
 import type { FullDocumentDetail } from '@/models/datasets'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import Metadata, { FieldInfo } from './index'
 
 // Mock document context
@@ -120,6 +121,7 @@ vi.mock('@/hooks/use-metadata', () => ({
   }),
 }))
 
+// Mock getTextWidthWithCanvas
 vi.mock('@/utils', () => ({
   asyncRunSafe: async (promise: Promise<unknown>) => {
     try {
@@ -133,32 +135,33 @@ vi.mock('@/utils', () => ({
   getTextWidthWithCanvas: () => 100,
 }))
 
-const createMockDocDetail = (overrides = {}): FullDocumentDetail => ({
-  id: 'doc-1',
-  name: 'Test Document',
-  doc_type: 'book',
-  doc_metadata: {
-    title: 'Test Book',
-    author: 'Test Author',
-    language: 'en',
-  },
-  data_source_type: 'upload_file',
-  segment_count: 10,
-  hit_count: 5,
-  ...overrides,
-} as FullDocumentDetail)
-
 describe('Metadata', () => {
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
+  const createMockDocDetail = (overrides = {}): FullDocumentDetail => ({
+    id: 'doc-1',
+    name: 'Test Document',
+    doc_type: 'book',
+    doc_metadata: {
+      title: 'Test Book',
+      author: 'Test Author',
+      language: 'en',
+    },
+    data_source_type: 'upload_file',
+    segment_count: 10,
+    hit_count: 5,
+    ...overrides,
+  } as FullDocumentDetail)
+
   const defaultProps = {
     docDetail: createMockDocDetail(),
     loading: false,
     onUpdate: vi.fn(),
   }
 
+  // Rendering tests
   describe('Rendering', () => {
     it('should render without crashing', () => {
       // Arrange & Act
@@ -188,7 +191,7 @@ describe('Metadata', () => {
       // Arrange & Act
       render(<Metadata {...defaultProps} loading={true} />)
 
-      // Assert - Loading component should be rendered, title should not
+      // Assert - Loading component should be rendered
       expect(screen.queryByText(/metadata\.title/i)).not.toBeInTheDocument()
     })
 
@@ -201,7 +204,7 @@ describe('Metadata', () => {
     })
   })
 
-  // Edit mode (tests useMetadataState hook integration)
+  // Edit mode tests
   describe('Edit Mode', () => {
     it('should enter edit mode when edit button is clicked', () => {
       // Arrange
@@ -300,7 +303,7 @@ describe('Metadata', () => {
     })
   })
 
-  // Document type selection (tests DocTypeSelector sub-component integration)
+  // Document type selection
   describe('Document Type Selection', () => {
     it('should show doc type selection when no doc_type exists', () => {
       // Arrange
@@ -350,13 +353,13 @@ describe('Metadata', () => {
     })
   })
 
-  // Fixed fields (tests MetadataFieldList sub-component integration)
+  // Origin info and technical parameters
   describe('Fixed Fields', () => {
     it('should render origin info fields', () => {
       // Arrange & Act
       render(<Metadata {...defaultProps} />)
 
-      // Assert
+      // Assert - Origin info fields should be displayed
       expect(screen.getByText('Data Source Type')).toBeInTheDocument()
     })
 
@@ -379,7 +382,7 @@ describe('Metadata', () => {
       // Act
       const { container } = render(<Metadata {...defaultProps} docDetail={docDetail} />)
 
-      // Assert
+      // Assert - should render without crashing
       expect(container.firstChild).toBeInTheDocument()
     })
 
@@ -387,7 +390,7 @@ describe('Metadata', () => {
       // Arrange & Act
       const { container } = render(<Metadata {...defaultProps} docDetail={undefined} loading={false} />)
 
-      // Assert
+      // Assert - should render without crashing
       expect(container.firstChild).toBeInTheDocument()
     })
 
@@ -422,6 +425,7 @@ describe('Metadata', () => {
   })
 })
 
+// FieldInfo component tests
 describe('FieldInfo', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -539,149 +543,3 @@ describe('FieldInfo', () => {
     })
   })
 })
-
-// --- useMetadataState hook coverage tests (via component interactions) ---
-describe('useMetadataState coverage', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  const defaultProps = {
-    docDetail: createMockDocDetail(),
-    loading: false,
-    onUpdate: vi.fn(),
-  }
-
-  describe('cancelDocType', () => {
-    it('should cancel doc type change and return to edit mode', () => {
-      // Arrange
-      render(<Metadata {...defaultProps} />)
-
-      // Enter edit mode → click change to open doc type selector
-      fireEvent.click(screen.getByText(/operation\.edit/i))
-      fireEvent.click(screen.getByText(/operation\.change/i))
-
-      // Now in doc type selector mode — should show cancel button
-      expect(screen.getByText(/operation\.cancel/i)).toBeInTheDocument()
-
-      // Act — cancel the doc type change
-      fireEvent.click(screen.getByText(/operation\.cancel/i))
-
-      // Assert — should be back to edit mode (cancel + save buttons visible)
-      expect(screen.getByText(/operation\.save/i)).toBeInTheDocument()
-    })
-  })
-
-  describe('confirmDocType', () => {
-    it('should confirm same doc type and return to edit mode keeping metadata', () => {
-      // Arrange — useEffect syncs tempDocType='book' from docDetail
-      render(<Metadata {...defaultProps} />)
-
-      // Enter edit mode → click change to open doc type selector
-      fireEvent.click(screen.getByText(/operation\.edit/i))
-      fireEvent.click(screen.getByText(/operation\.change/i))
-
-      // DocTypeSelector shows save/cancel buttons
-      expect(screen.getByText(/metadata\.docTypeChangeTitle/i)).toBeInTheDocument()
-
-      // Act — click save to confirm same doc type (tempDocType='book')
-      fireEvent.click(screen.getByText(/operation\.save/i))
-
-      // Assert — should return to edit mode with metadata fields visible
-      expect(screen.getByText(/operation\.cancel/i)).toBeInTheDocument()
-      expect(screen.getByText(/operation\.save/i)).toBeInTheDocument()
-    })
-  })
-
-  describe('cancelEdit when no docType', () => {
-    it('should show doc type selection when cancel is clicked with doc_type others', () => {
-      // Arrange — doc with 'others' type normalizes to '' internally.
-      // The useEffect sees doc_type='others' (truthy) and syncs state,
-      // so the component initially shows view mode. Enter edit → cancel to trigger cancelEdit.
-      const docDetail = createMockDocDetail({ doc_type: 'others' })
-      render(<Metadata {...defaultProps} docDetail={docDetail} />)
-
-      // 'others' is normalized to '' → useEffect fires (doc_type truthy) → view mode
-      // The rendered type uses default 'book' fallback for display
-      expect(screen.getByText(/operation\.edit/i)).toBeInTheDocument()
-
-      // Enter edit mode
-      fireEvent.click(screen.getByText(/operation\.edit/i))
-      expect(screen.getByText(/operation\.cancel/i)).toBeInTheDocument()
-
-      // Act — cancel edit; internally docType is '' so cancelEdit goes to showDocTypes
-      fireEvent.click(screen.getByText(/operation\.cancel/i))
-
-      // Assert — should show doc type selection since normalized docType was ''
-      expect(screen.getByText(/metadata\.docTypeSelectTitle/i)).toBeInTheDocument()
-    })
-  })
-
-  describe('updateMetadataField', () => {
-    it('should update metadata field value via input', () => {
-      // Arrange
-      render(<Metadata {...defaultProps} />)
-
-      // Enter edit mode
-      fireEvent.click(screen.getByText(/operation\.edit/i))
-
-      // Act — find an input and change its value (Title field)
-      const inputs = screen.getAllByRole('textbox')
-      expect(inputs.length).toBeGreaterThan(0)
-      fireEvent.change(inputs[0], { target: { value: 'Updated Title' } })
-
-      // Assert — the input should have the new value
-      expect(inputs[0]).toHaveValue('Updated Title')
-    })
-  })
-
-  describe('saveMetadata calls modifyDocMetadata with correct body', () => {
-    it('should pass doc_type and doc_metadata in save request', async () => {
-      // Arrange
-      mockModifyDocMetadata.mockResolvedValueOnce({})
-      render(<Metadata {...defaultProps} />)
-
-      // Enter edit mode
-      fireEvent.click(screen.getByText(/operation\.edit/i))
-
-      // Act — save
-      fireEvent.click(screen.getByText(/operation\.save/i))
-
-      // Assert
-      await waitFor(() => {
-        expect(mockModifyDocMetadata).toHaveBeenCalledWith(
-          expect.objectContaining({
-            datasetId: 'test-dataset-id',
-            documentId: 'test-document-id',
-            body: expect.objectContaining({
-              doc_type: 'book',
-            }),
-          }),
-        )
-      })
-    })
-  })
-
-  describe('useEffect sync', () => {
-    it('should handle doc_metadata being null in effect sync', () => {
-      // Arrange — first render with null metadata
-      const { rerender } = render(
-        <Metadata
-          {...defaultProps}
-          docDetail={createMockDocDetail({ doc_metadata: null })}
-        />,
-      )
-
-      // Act — rerender with a different doc_type to trigger useEffect sync
-      rerender(
-        <Metadata
-          {...defaultProps}
-          docDetail={createMockDocDetail({ doc_type: 'paper', doc_metadata: null })}
-        />,
-      )
-
-      // Assert — should render without crashing, showing Paper type
-      expect(screen.getByText('Paper')).toBeInTheDocument()
-    })
-  })
-})

web/app/components/datasets/documents/detail/metadata/index.tsx

@@ -1,124 +1,422 @@
 'use client'
-import type { FC } from 'react'
-import type { FullDocumentDetail } from '@/models/datasets'
+import type { FC, ReactNode } from 'react'
+import type { inputType, metadataType } from '@/hooks/use-metadata'
+import type { CommonResponse } from '@/models/common'
+import type { DocType, FullDocumentDetail } from '@/models/datasets'
 import { PencilIcon } from '@heroicons/react/24/outline'
+import { get } from 'es-toolkit/compat'
+import * as React from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import AutoHeightTextarea from '@/app/components/base/auto-height-textarea'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import Input from '@/app/components/base/input'
 import Loading from '@/app/components/base/loading'
-import { useMetadataMap } from '@/hooks/use-metadata'
-import DocTypeSelector, { DocumentTypeDisplay } from './components/doc-type-selector'
-import MetadataFieldList from './components/metadata-field-list'
-import { useMetadataState } from './hooks/use-metadata-state'
+import Radio from '@/app/components/base/radio'
+import { SimpleSelect } from '@/app/components/base/select'
+import { ToastContext } from '@/app/components/base/toast'
+import Tooltip from '@/app/components/base/tooltip'
+import { useBookCategories, useBusinessDocCategories, useLanguages, useMetadataMap, usePersonalDocCategories } from '@/hooks/use-metadata'
+import { CUSTOMIZABLE_DOC_TYPES } from '@/models/datasets'
+import { modifyDocMetadata } from '@/service/datasets'
+import { asyncRunSafe, getTextWidthWithCanvas } from '@/utils'
+import { cn } from '@/utils/classnames'
+import { useDocumentContext } from '../context'
 import s from './style.module.css'
 
-export { default as FieldInfo } from './components/field-info'
+const map2Options = (map: { [key: string]: string }) => {
+  return Object.keys(map).map(key => ({ value: key, name: map[key] }))
+}
 
-type MetadataProps = {
+type IFieldInfoProps = {
+  label: string
+  value?: string
+  valueIcon?: ReactNode
+  displayedValue?: string
+  defaultValue?: string
+  showEdit?: boolean
+  inputType?: inputType
+  selectOptions?: Array<{ value: string, name: string }>
+  onUpdate?: (v: any) => void
+}
+
+export const FieldInfo: FC<IFieldInfoProps> = ({
+  label,
+  value = '',
+  valueIcon,
+  displayedValue = '',
+  defaultValue,
+  showEdit = false,
+  inputType = 'input',
+  selectOptions = [],
+  onUpdate,
+}) => {
+  const { t } = useTranslation()
+  const textNeedWrap = getTextWidthWithCanvas(displayedValue) > 190
+  const editAlignTop = showEdit && inputType === 'textarea'
+  const readAlignTop = !showEdit && textNeedWrap
+
+  const renderContent = () => {
+    if (!showEdit)
+      return displayedValue
+
+    if (inputType === 'select') {
+      return (
+        <SimpleSelect
+          onSelect={({ value }) => onUpdate?.(value as string)}
+          items={selectOptions}
+          defaultValue={value}
+          className={s.select}
+          wrapperClassName={s.selectWrapper}
+          placeholder={`${t('metadata.placeholder.select', { ns: 'datasetDocuments' })}${label}`}
+        />
+      )
+    }
+
+    if (inputType === 'textarea') {
+      return (
+        <AutoHeightTextarea
+          onChange={e => onUpdate?.(e.target.value)}
+          value={value}
+          className={s.textArea}
+          placeholder={`${t('metadata.placeholder.add', { ns: 'datasetDocuments' })}${label}`}
+        />
+      )
+    }
+
+    return (
+      <Input
+        onChange={e => onUpdate?.(e.target.value)}
+        value={value}
+        defaultValue={defaultValue}
+        placeholder={`${t('metadata.placeholder.add', { ns: 'datasetDocuments' })}${label}`}
+      />
+    )
+  }
+
+  return (
+    <div className={cn('flex min-h-5 items-center gap-1 py-0.5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
+      <div className={cn('w-[200px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap text-text-tertiary', editAlignTop && 'pt-1')}>{label}</div>
+      <div className="flex grow items-center gap-1 text-text-secondary">
+        {valueIcon}
+        {renderContent()}
+      </div>
+    </div>
+  )
+}
+
+const TypeIcon: FC<{ iconName: string, className?: string }> = ({ iconName, className = '' }) => {
+  return (
+    <div className={cn(s.commonIcon, s[`${iconName}Icon`], className)} />
+  )
+}
+
+const IconButton: FC<{
+  type: DocType
+  isChecked: boolean
+}> = ({ type, isChecked = false }) => {
+  const metadataMap = useMetadataMap()
+
+  return (
+    <Tooltip
+      popupContent={metadataMap[type].text}
+    >
+      <button type="button" className={cn(s.iconWrapper, 'group', isChecked ? s.iconCheck : '')}>
+        <TypeIcon
+          iconName={metadataMap[type].iconName || ''}
+          className={`group-hover:bg-primary-600 ${isChecked ? '!bg-primary-600' : ''}`}
+        />
+      </button>
+    </Tooltip>
+  )
+}
+
+type IMetadataProps = {
   docDetail?: FullDocumentDetail
   loading: boolean
   onUpdate: () => void
 }
 
-const Metadata: FC<MetadataProps> = ({ docDetail, loading, onUpdate }) => {
+type MetadataState = {
+  documentType?: DocType | ''
+  metadata: Record<string, string>
+}
+
+const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
+  const { doc_metadata = {} } = docDetail || {}
+  const rawDocType = docDetail?.doc_type ?? ''
+  const doc_type = rawDocType === 'others' ? '' : rawDocType
+
   const { t } = useTranslation()
   const metadataMap = useMetadataMap()
+  const languageMap = useLanguages()
+  const bookCategoryMap = useBookCategories()
+  const personalDocCategoryMap = usePersonalDocCategories()
+  const businessDocCategoryMap = useBusinessDocCategories()
+  const [editStatus, setEditStatus] = useState(!doc_type) // if no documentType, in editing status by default
+  // the initial values are according to the documentType
+  const [metadataParams, setMetadataParams] = useState<MetadataState>(
+    doc_type
+      ? {
+          documentType: doc_type as DocType,
+          metadata: (doc_metadata || {}) as Record<string, string>,
+        }
+      : { metadata: {} },
+  )
+  const [showDocTypes, setShowDocTypes] = useState(!doc_type) // whether show doc types
+  const [tempDocType, setTempDocType] = useState<DocType | ''>('') // for remember icon click
+  const [saveLoading, setSaveLoading] = useState(false)
 
-  const {
-    docType,
-    editStatus,
-    showDocTypes,
-    tempDocType,
-    saveLoading,
-    metadataParams,
-    setTempDocType,
-    setShowDocTypes,
-    confirmDocType,
-    cancelDocType,
-    enableEdit,
-    cancelEdit,
-    saveMetadata,
-    updateMetadataField,
-  } = useMetadataState({ docDetail, onUpdate })
+  const { notify } = useContext(ToastContext)
+  const datasetId = useDocumentContext(s => s.datasetId)
+  const documentId = useDocumentContext(s => s.documentId)
+
+  useEffect(() => {
+    if (docDetail?.doc_type) {
+      setEditStatus(false)
+      setShowDocTypes(false)
+      setTempDocType(doc_type as DocType | '')
+      setMetadataParams({
+        documentType: doc_type as DocType | '',
+        metadata: (docDetail?.doc_metadata || {}) as Record<string, string>,
+      })
+    }
+  }, [docDetail?.doc_type, docDetail?.doc_metadata, doc_type])
+
+  // confirm doc type
+  const confirmDocType = () => {
+    if (!tempDocType)
+      return
+    setMetadataParams({
+      documentType: tempDocType,
+      metadata: tempDocType === metadataParams.documentType ? metadataParams.metadata : {} as Record<string, string>, // change doc type, clear metadata
+    })
+    setEditStatus(true)
+    setShowDocTypes(false)
+  }
+
+  // cancel doc type
+  const cancelDocType = () => {
+    setTempDocType(metadataParams.documentType ?? '')
+    setEditStatus(true)
+    setShowDocTypes(false)
+  }
+
+  // show doc type select
+  const renderSelectDocType = () => {
+    const { documentType } = metadataParams
 
-  if (loading) {
     return (
-      <div className={`${s.main} bg-gray-25`}>
-        <Loading type="app" />
+      <>
+        {!doc_type && !documentType && (
+          <>
+            <div className={s.desc}>{t('metadata.desc', { ns: 'datasetDocuments' })}</div>
+          </>
+        )}
+        <div className={s.operationWrapper}>
+          {!doc_type && !documentType && (
+            <>
+              <span className={s.title}>{t('metadata.docTypeSelectTitle', { ns: 'datasetDocuments' })}</span>
+            </>
+          )}
+          {documentType && (
+            <>
+              <span className={s.title}>{t('metadata.docTypeChangeTitle', { ns: 'datasetDocuments' })}</span>
+              <span className={s.changeTip}>{t('metadata.docTypeSelectWarning', { ns: 'datasetDocuments' })}</span>
+            </>
+          )}
+          <Radio.Group value={tempDocType ?? documentType ?? ''} onChange={setTempDocType} className={s.radioGroup}>
+            {CUSTOMIZABLE_DOC_TYPES.map((type, index) => {
+              const currValue = tempDocType ?? documentType
+              return (
+                <Radio key={index} value={type} className={`${s.radio} ${currValue === type ? 'shadow-none' : ''}`}>
+                  <IconButton
+                    type={type}
+                    isChecked={currValue === type}
+                  />
+                </Radio>
+              )
+            })}
+          </Radio.Group>
+          {!doc_type && !documentType && (
+            <Button
+              variant="primary"
+              onClick={confirmDocType}
+              disabled={!tempDocType}
+            >
+              {t('metadata.firstMetaAction', { ns: 'datasetDocuments' })}
+            </Button>
+          )}
+          {documentType && (
+            <div className={s.opBtnWrapper}>
+              <Button onClick={confirmDocType} className={`${s.opBtn} ${s.opSaveBtn}`} variant="primary">{t('operation.save', { ns: 'common' })}</Button>
+              <Button onClick={cancelDocType} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('operation.cancel', { ns: 'common' })}</Button>
+            </div>
+          )}
+        </div>
+      </>
+    )
+  }
+
+  // show metadata info and edit
+  const renderFieldInfos = ({ mainField = 'book', canEdit }: { mainField?: metadataType | '', canEdit?: boolean }) => {
+    if (!mainField)
+      return null
+    const fieldMap = metadataMap[mainField]?.subFieldsMap
+    const sourceData = ['originInfo', 'technicalParameters'].includes(mainField) ? docDetail : metadataParams.metadata
+
+    const getTargetMap = (field: string) => {
+      if (field === 'language')
+        return languageMap
+      if (field === 'category' && mainField === 'book')
+        return bookCategoryMap
+
+      if (field === 'document_type') {
+        if (mainField === 'personal_document')
+          return personalDocCategoryMap
+        if (mainField === 'business_document')
+          return businessDocCategoryMap
+      }
+      return {} as any
+    }
+
+    const getTargetValue = (field: string) => {
+      const val = get(sourceData, field, '')
+      if (!val && val !== 0)
+        return '-'
+      if (fieldMap[field]?.inputType === 'select')
+        return getTargetMap(field)[val]
+      if (fieldMap[field]?.render)
+        return fieldMap[field]?.render?.(val, field === 'hit_count' ? get(sourceData, 'segment_count', 0) as number : undefined)
+      return val
+    }
+
+    return (
+      <div className="flex flex-col gap-1">
+        {Object.keys(fieldMap).map((field) => {
+          return (
+            <FieldInfo
+              key={fieldMap[field]?.label}
+              label={fieldMap[field]?.label}
+              displayedValue={getTargetValue(field)}
+              value={get(sourceData, field, '')}
+              inputType={fieldMap[field]?.inputType || 'input'}
+              showEdit={canEdit}
+              onUpdate={(val) => {
+                setMetadataParams(pre => ({ ...pre, metadata: { ...pre.metadata, [field]: val } }))
+              }}
+              selectOptions={map2Options(getTargetMap(field))}
+            />
+          )
+        })}
       </div>
     )
   }
 
+  const enabledEdit = () => {
+    setEditStatus(true)
+  }
+
+  const onCancel = () => {
+    setMetadataParams({ documentType: doc_type || '', metadata: { ...docDetail?.doc_metadata } })
+    setEditStatus(!doc_type)
+    if (!doc_type)
+      setShowDocTypes(true)
+  }
+
+  const onSave = async () => {
+    setSaveLoading(true)
+    const [e] = await asyncRunSafe<CommonResponse>(modifyDocMetadata({
+      datasetId,
+      documentId,
+      body: {
+        doc_type: metadataParams.documentType || doc_type || '',
+        doc_metadata: metadataParams.metadata,
+      },
+    }) as Promise<CommonResponse>)
+    if (!e)
+      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+    else
+      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+    onUpdate?.()
+    setEditStatus(false)
+    setSaveLoading(false)
+  }
+
   return (
     <div className={`${s.main} ${editStatus ? 'bg-white' : 'bg-gray-25'}`}>
-      {/* Header: title + action buttons */}
-      <div className={s.titleWrapper}>
-        <span className={s.title}>{t('metadata.title', { ns: 'datasetDocuments' })}</span>
-        {!editStatus
-          ? (
-              <Button onClick={enableEdit} className={`${s.opBtn} ${s.opEditBtn}`}>
-                <PencilIcon className={s.opIcon} />
-                {t('operation.edit', { ns: 'common' })}
-              </Button>
-            )
-          : !showDocTypes && (
-              <div className={s.opBtnWrapper}>
-                <Button onClick={cancelEdit} className={`${s.opBtn} ${s.opCancelBtn}`}>
-                  {t('operation.cancel', { ns: 'common' })}
-                </Button>
-                <Button onClick={saveMetadata} className={`${s.opBtn} ${s.opSaveBtn}`} variant="primary" loading={saveLoading}>
-                  {t('operation.save', { ns: 'common' })}
-                </Button>
-              </div>
-            )}
-      </div>
-
-      {/* Document type display / selector */}
-      {!editStatus
-        ? <DocumentTypeDisplay displayType={docType} />
-        : showDocTypes
-          ? null
-          : (
-              <DocumentTypeDisplay
-                displayType={metadataParams.documentType || ''}
-                showChangeLink={editStatus}
-                onChangeClick={() => setShowDocTypes(true)}
-              />
-            )}
-
-      {/* Divider between type display and fields (skip when in first-time selection) */}
-      {(!docType && showDocTypes) ? null : <Divider />}
-
-      {/* Doc type selector or editable metadata fields */}
-      {showDocTypes
-        ? (
-            <DocTypeSelector
-              docType={docType}
-              documentType={metadataParams.documentType}
-              tempDocType={tempDocType}
-              onTempDocTypeChange={setTempDocType}
-              onConfirm={confirmDocType}
-              onCancel={cancelDocType}
-            />
-          )
+      {loading
+        ? (<Loading type="app" />)
         : (
-            <MetadataFieldList
-              mainField={metadataParams.documentType || ''}
-              canEdit={editStatus}
-              metadata={metadataParams.metadata}
-              docDetail={docDetail}
-              onFieldUpdate={updateMetadataField}
-            />
+            <>
+              <div className={s.titleWrapper}>
+                <span className={s.title}>{t('metadata.title', { ns: 'datasetDocuments' })}</span>
+                {!editStatus
+                  ? (
+                      <Button onClick={enabledEdit} className={`${s.opBtn} ${s.opEditBtn}`}>
+                        <PencilIcon className={s.opIcon} />
+                        {t('operation.edit', { ns: 'common' })}
+                      </Button>
+                    )
+                  : showDocTypes
+                    ? null
+                    : (
+                        <div className={s.opBtnWrapper}>
+                          <Button onClick={onCancel} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('operation.cancel', { ns: 'common' })}</Button>
+                          <Button
+                            onClick={onSave}
+                            className={`${s.opBtn} ${s.opSaveBtn}`}
+                            variant="primary"
+                            loading={saveLoading}
+                          >
+                            {t('operation.save', { ns: 'common' })}
+                          </Button>
+                        </div>
+                      )}
+              </div>
+              {/* show selected doc type and changing entry */}
+              {!editStatus
+                ? (
+                    <div className={s.documentTypeShow}>
+                      <TypeIcon iconName={metadataMap[doc_type || 'book']?.iconName || ''} className={s.iconShow} />
+                      {metadataMap[doc_type || 'book'].text}
+                    </div>
+                  )
+                : showDocTypes
+                  ? null
+                  : (
+                      <div className={s.documentTypeShow}>
+                        {metadataParams.documentType && (
+                          <>
+                            <TypeIcon iconName={metadataMap[metadataParams.documentType || 'book'].iconName || ''} className={s.iconShow} />
+                            {metadataMap[metadataParams.documentType || 'book'].text}
+                            {editStatus && (
+                              <div className="ml-1 inline-flex items-center gap-1">
+                                ·
+                                <div
+                                  onClick={() => { setShowDocTypes(true) }}
+                                  className="cursor-pointer hover:text-text-accent"
+                                >
+                                  {t('operation.change', { ns: 'common' })}
+                                </div>
+                              </div>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    )}
+              {(!doc_type && showDocTypes) ? null : <Divider />}
+              {showDocTypes ? renderSelectDocType() : renderFieldInfos({ mainField: metadataParams.documentType, canEdit: editStatus })}
+              {/* show fixed fields */}
+              <Divider />
+              {renderFieldInfos({ mainField: 'originInfo', canEdit: false })}
+              <div className={`${s.title} mt-8`}>{metadataMap.technicalParameters.text}</div>
+              <Divider />
+              {renderFieldInfos({ mainField: 'technicalParameters', canEdit: false })}
+            </>
           )}
-
-      {/* Fixed fields: origin info */}
-      <Divider />
-      <MetadataFieldList mainField="originInfo" docDetail={docDetail} />
-
-      {/* Fixed fields: technical parameters */}
-      <div className={`${s.title} mt-8`}>{metadataMap.technicalParameters.text}</div>
-      <Divider />
-      <MetadataFieldList mainField="technicalParameters" docDetail={docDetail} />
     </div>
   )
 }

web/app/components/header/account-dropdown/index.tsx

@@ -28,7 +28,6 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useDocLink } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
-import { env } from '@/env'
 import { useLogout } from '@/service/use-common'
 import { cn } from '@/utils/classnames'
 import AccountAbout from '../account-about'
@@ -179,7 +178,7 @@ export default function AppSelector() {
                           </Link>
                         </MenuItem>
                         {
-                          env.NEXT_PUBLIC_SITE_ABOUT !== 'hide' && (
+                          document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
                             <MenuItem>
                               <div
                                 className={cn(itemClassName, 'justify-between', 'data-[active]:bg-state-base-hover')}

web/app/components/provider/serwist.tsx

@@ -3,7 +3,6 @@
 import { SerwistProvider } from '@serwist/turbopack/react'
 import { useEffect } from 'react'
 import { IS_DEV } from '@/config'
-import { env } from '@/env'
 import { isClient } from '@/utils/client'
 
 export function PWAProvider({ children }: { children: React.ReactNode }) {
@@ -11,7 +10,7 @@ export function PWAProvider({ children }: { children: React.ReactNode }) {
     return <DisabledPWAProvider>{children}</DisabledPWAProvider>
   }
 
-  const basePath = env.NEXT_PUBLIC_BASE_PATH
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
   const swUrl = `${basePath}/serwist/sw.js`
 
   return (

web/app/components/rag-pipeline/components/panel/input-field/editor/form/schema.ts

@@ -1,6 +1,6 @@
 import type { TFunction } from 'i18next'
 import type { SchemaOptions } from './types'
-import * as z from 'zod'
+import { z } from 'zod'
 import { InputTypeEnum } from '@/app/components/base/form/components/field/input-type-select/types'
 import { MAX_VAR_KEY_LENGTH } from '@/config'
 import { PipelineInputVarType } from '@/models/pipeline'

web/app/components/rag-pipeline/components/update-dsl-modal.spec.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react'
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { DSLImportStatus } from '@/models/app'
 import UpdateDSLModal from './update-dsl-modal'
 
@@ -145,6 +145,11 @@ vi.mock('@/app/components/workflow/constants', () => ({
   WORKFLOW_DATA_UPDATE: 'WORKFLOW_DATA_UPDATE',
 }))
 
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
 describe('UpdateDSLModal', () => {
   const mockOnCancel = vi.fn()
   const mockOnBackup = vi.fn()

web/app/components/rag-pipeline/components/update-dsl-modal.tsx

@@ -1,17 +1,40 @@
 'use client'
 
+import type { MouseEventHandler } from 'react'
 import {
   RiAlertFill,
   RiCloseLine,
   RiFileDownloadLine,
 } from '@remixicon/react'
-import { memo } from 'react'
+import {
+  memo,
+  useCallback,
+  useRef,
+  useState,
+} from 'react'
 import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
 import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
-import { useUpdateDSLModal } from '../hooks/use-update-dsl-modal'
-import VersionMismatchModal from './version-mismatch-modal'
+import { ToastContext } from '@/app/components/base/toast'
+import { WORKFLOW_DATA_UPDATE } from '@/app/components/workflow/constants'
+import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import {
+  initialEdges,
+  initialNodes,
+} from '@/app/components/workflow/utils'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import {
+  DSLImportMode,
+  DSLImportStatus,
+} from '@/models/app'
+import {
+  useImportPipelineDSL,
+  useImportPipelineDSLConfirm,
+} from '@/service/use-pipeline'
+import { fetchWorkflowDraft } from '@/service/workflow'
 
 type UpdateDSLModalProps = {
   onCancel: () => void
@@ -25,17 +48,146 @@ const UpdateDSLModal = ({
   onImport,
 }: UpdateDSLModalProps) => {
   const { t } = useTranslation()
-  const {
-    currentFile,
-    handleFile,
-    show,
-    showErrorModal,
-    setShowErrorModal,
-    loading,
-    versions,
-    handleImport,
-    onUpdateDSLConfirm,
-  } = useUpdateDSLModal({ onCancel, onImport })
+  const { notify } = useContext(ToastContext)
+  const [currentFile, setDSLFile] = useState<File>()
+  const [fileContent, setFileContent] = useState<string>()
+  const [loading, setLoading] = useState(false)
+  const { eventEmitter } = useEventEmitterContextContext()
+  const [show, setShow] = useState(true)
+  const [showErrorModal, setShowErrorModal] = useState(false)
+  const [versions, setVersions] = useState<{ importedVersion: string, systemVersion: string }>()
+  const [importId, setImportId] = useState<string>()
+  const { handleCheckPluginDependencies } = usePluginDependencies()
+  const { mutateAsync: importDSL } = useImportPipelineDSL()
+  const { mutateAsync: importDSLConfirm } = useImportPipelineDSLConfirm()
+  const workflowStore = useWorkflowStore()
+
+  const readFile = (file: File) => {
+    const reader = new FileReader()
+    reader.onload = function (event) {
+      const content = event.target?.result
+      setFileContent(content as string)
+    }
+    reader.readAsText(file)
+  }
+
+  const handleFile = (file?: File) => {
+    setDSLFile(file)
+    if (file)
+      readFile(file)
+    if (!file)
+      setFileContent('')
+  }
+
+  const handleWorkflowUpdate = useCallback(async (pipelineId: string) => {
+    const {
+      graph,
+      hash,
+      rag_pipeline_variables,
+    } = await fetchWorkflowDraft(`/rag/pipelines/${pipelineId}/workflows/draft`)
+
+    const { nodes, edges, viewport } = graph
+
+    eventEmitter?.emit({
+      type: WORKFLOW_DATA_UPDATE,
+      payload: {
+        nodes: initialNodes(nodes, edges),
+        edges: initialEdges(edges, nodes),
+        viewport,
+        hash,
+        rag_pipeline_variables: rag_pipeline_variables || [],
+      },
+    } as any)
+  }, [eventEmitter])
+
+  const isCreatingRef = useRef(false)
+  const handleImport: MouseEventHandler = useCallback(async () => {
+    const { pipelineId } = workflowStore.getState()
+    if (isCreatingRef.current)
+      return
+    isCreatingRef.current = true
+    if (!currentFile)
+      return
+    try {
+      if (pipelineId && fileContent) {
+        setLoading(true)
+        const response = await importDSL({ mode: DSLImportMode.YAML_CONTENT, yaml_content: fileContent, pipeline_id: pipelineId })
+        const { id, status, pipeline_id, imported_dsl_version, current_dsl_version } = response
+
+        if (status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
+          if (!pipeline_id) {
+            notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
+            return
+          }
+          handleWorkflowUpdate(pipeline_id)
+          if (onImport)
+            onImport()
+          notify({
+            type: status === DSLImportStatus.COMPLETED ? 'success' : 'warning',
+            message: t(status === DSLImportStatus.COMPLETED ? 'common.importSuccess' : 'common.importWarning', { ns: 'workflow' }),
+            children: status === DSLImportStatus.COMPLETED_WITH_WARNINGS && t('common.importWarningDetails', { ns: 'workflow' }),
+          })
+          await handleCheckPluginDependencies(pipeline_id, true)
+          setLoading(false)
+          onCancel()
+        }
+        else if (status === DSLImportStatus.PENDING) {
+          setShow(false)
+          setTimeout(() => {
+            setShowErrorModal(true)
+          }, 300)
+          setVersions({
+            importedVersion: imported_dsl_version ?? '',
+            systemVersion: current_dsl_version ?? '',
+          })
+          setImportId(id)
+        }
+        else {
+          setLoading(false)
+          notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
+        }
+      }
+    }
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    catch (e) {
+      setLoading(false)
+      notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
+    }
+    isCreatingRef.current = false
+  }, [currentFile, fileContent, onCancel, notify, t, onImport, handleWorkflowUpdate, handleCheckPluginDependencies, workflowStore, importDSL])
+
+  const onUpdateDSLConfirm: MouseEventHandler = async () => {
+    try {
+      if (!importId)
+        return
+      const response = await importDSLConfirm(importId)
+
+      const { status, pipeline_id } = response
+
+      if (status === DSLImportStatus.COMPLETED) {
+        if (!pipeline_id) {
+          notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
+          return
+        }
+        handleWorkflowUpdate(pipeline_id)
+        await handleCheckPluginDependencies(pipeline_id, true)
+        if (onImport)
+          onImport()
+        notify({ type: 'success', message: t('common.importSuccess', { ns: 'workflow' }) })
+        setLoading(false)
+        onCancel()
+      }
+      else if (status === DSLImportStatus.FAILED) {
+        setLoading(false)
+        notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
+      }
+    }
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    catch (e) {
+      setLoading(false)
+      notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
+    }
+  }
 
   return (
     <>
@@ -98,12 +250,32 @@ const UpdateDSLModal = ({
           </Button>
         </div>
       </Modal>
-      <VersionMismatchModal
+      <Modal
         isShow={showErrorModal}
-        versions={versions}
         onClose={() => setShowErrorModal(false)}
-        onConfirm={onUpdateDSLConfirm}
-      />
+        className="w-[480px]"
+      >
+        <div className="flex flex-col items-start gap-2 self-stretch pb-4">
+          <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
+          <div className="system-md-regular flex grow flex-col text-text-secondary">
+            <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
+            <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
+            <br />
+            <div>
+              {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
+              <span className="system-md-medium">{versions?.importedVersion}</span>
+            </div>
+            <div>
+              {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
+              <span className="system-md-medium">{versions?.systemVersion}</span>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-start justify-end gap-2 self-stretch pt-6">
+          <Button variant="secondary" onClick={() => setShowErrorModal(false)}>{t('newApp.Cancel', { ns: 'app' })}</Button>
+          <Button variant="primary" destructive onClick={onUpdateDSLConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
+        </div>
+      </Modal>
     </>
   )
 }

web/app/components/rag-pipeline/components/version-mismatch-modal.spec.tsx

@@ -1,117 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import VersionMismatchModal from './version-mismatch-modal'
-
-describe('VersionMismatchModal', () => {
-  const mockOnClose = vi.fn()
-  const mockOnConfirm = vi.fn()
-
-  const defaultVersions = {
-    importedVersion: '0.8.0',
-    systemVersion: '1.0.0',
-  }
-
-  const defaultProps = {
-    isShow: true,
-    versions: defaultVersions,
-    onClose: mockOnClose,
-    onConfirm: mockOnConfirm,
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('rendering', () => {
-    it('should render dialog when isShow is true', () => {
-      render(<VersionMismatchModal {...defaultProps} />)
-
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-    })
-
-    it('should not render dialog when isShow is false', () => {
-      render(<VersionMismatchModal {...defaultProps} isShow={false} />)
-
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
-    })
-
-    it('should render error title', () => {
-      render(<VersionMismatchModal {...defaultProps} />)
-
-      expect(screen.getByText('app.newApp.appCreateDSLErrorTitle')).toBeInTheDocument()
-    })
-
-    it('should render all error description parts', () => {
-      render(<VersionMismatchModal {...defaultProps} />)
-
-      expect(screen.getByText('app.newApp.appCreateDSLErrorPart1')).toBeInTheDocument()
-      expect(screen.getByText('app.newApp.appCreateDSLErrorPart2')).toBeInTheDocument()
-      expect(screen.getByText('app.newApp.appCreateDSLErrorPart3')).toBeInTheDocument()
-      expect(screen.getByText('app.newApp.appCreateDSLErrorPart4')).toBeInTheDocument()
-    })
-
-    it('should display imported and system version numbers', () => {
-      render(<VersionMismatchModal {...defaultProps} />)
-
-      expect(screen.getByText('0.8.0')).toBeInTheDocument()
-      expect(screen.getByText('1.0.0')).toBeInTheDocument()
-    })
-
-    it('should render cancel and confirm buttons', () => {
-      render(<VersionMismatchModal {...defaultProps} />)
-
-      expect(screen.getByRole('button', { name: /app\.newApp\.Cancel/ })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: /app\.newApp\.Confirm/ })).toBeInTheDocument()
-    })
-  })
-
-  describe('user interactions', () => {
-    it('should call onClose when cancel button is clicked', () => {
-      render(<VersionMismatchModal {...defaultProps} />)
-
-      fireEvent.click(screen.getByRole('button', { name: /app\.newApp\.Cancel/ }))
-
-      expect(mockOnClose).toHaveBeenCalledTimes(1)
-    })
-
-    it('should call onConfirm when confirm button is clicked', () => {
-      render(<VersionMismatchModal {...defaultProps} />)
-
-      fireEvent.click(screen.getByRole('button', { name: /app\.newApp\.Confirm/ }))
-
-      expect(mockOnConfirm).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  describe('button variants', () => {
-    it('should render cancel button with secondary variant', () => {
-      render(<VersionMismatchModal {...defaultProps} />)
-
-      const cancelBtn = screen.getByRole('button', { name: /app\.newApp\.Cancel/ })
-      expect(cancelBtn).toHaveClass('btn-secondary')
-    })
-
-    it('should render confirm button with primary destructive variant', () => {
-      render(<VersionMismatchModal {...defaultProps} />)
-
-      const confirmBtn = screen.getByRole('button', { name: /app\.newApp\.Confirm/ })
-      expect(confirmBtn).toHaveClass('btn-primary')
-      expect(confirmBtn).toHaveClass('btn-destructive')
-    })
-  })
-
-  describe('edge cases', () => {
-    it('should handle undefined versions gracefully', () => {
-      render(<VersionMismatchModal {...defaultProps} versions={undefined} />)
-
-      expect(screen.getByText('app.newApp.appCreateDSLErrorTitle')).toBeInTheDocument()
-    })
-
-    it('should handle empty version strings', () => {
-      const emptyVersions = { importedVersion: '', systemVersion: '' }
-      render(<VersionMismatchModal {...defaultProps} versions={emptyVersions} />)
-
-      expect(screen.getByText('app.newApp.appCreateDSLErrorTitle')).toBeInTheDocument()
-    })
-  })
-})

web/app/components/rag-pipeline/components/version-mismatch-modal.tsx

@@ -1,54 +0,0 @@
-import type { MouseEventHandler } from 'react'
-import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
-import Modal from '@/app/components/base/modal'
-
-type VersionMismatchModalProps = {
-  isShow: boolean
-  versions?: {
-    importedVersion: string
-    systemVersion: string
-  }
-  onClose: () => void
-  onConfirm: MouseEventHandler
-}
-
-const VersionMismatchModal = ({
-  isShow,
-  versions,
-  onClose,
-  onConfirm,
-}: VersionMismatchModalProps) => {
-  const { t } = useTranslation()
-
-  return (
-    <Modal
-      isShow={isShow}
-      onClose={onClose}
-      className="w-[480px]"
-    >
-      <div className="flex flex-col items-start gap-2 self-stretch pb-4">
-        <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-        <div className="system-md-regular flex grow flex-col text-text-secondary">
-          <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
-          <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
-          <br />
-          <div>
-            {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
-            <span className="system-md-medium">{versions?.importedVersion}</span>
-          </div>
-          <div>
-            {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
-            <span className="system-md-medium">{versions?.systemVersion}</span>
-          </div>
-        </div>
-      </div>
-      <div className="flex items-start justify-end gap-2 self-stretch pt-6">
-        <Button variant="secondary" onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-        <Button variant="primary" destructive onClick={onConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
-      </div>
-    </Modal>
-  )
-}
-
-export default VersionMismatchModal

web/app/components/rag-pipeline/hooks/use-nodes-sync-draft.spec.ts

@@ -68,20 +68,23 @@ vi.mock('@/config', () => ({
   API_PREFIX: '/api',
 }))
 
-// Mock postWithKeepalive from service/fetch
-const mockPostWithKeepalive = vi.fn()
-vi.mock('@/service/fetch', () => ({
-  postWithKeepalive: (...args: unknown[]) => mockPostWithKeepalive(...args),
-}))
-
 // ============================================================================
 // Tests
 // ============================================================================
 
 describe('useNodesSyncDraft', () => {
+  const mockSendBeacon = vi.fn()
+
   beforeEach(() => {
     vi.clearAllMocks()
 
+    // Setup navigator.sendBeacon mock
+    Object.defineProperty(navigator, 'sendBeacon', {
+      value: mockSendBeacon,
+      writable: true,
+      configurable: true,
+    })
+
     // Default store state
     mockStoreGetState.mockReturnValue({
       getNodes: mockGetNodes,
@@ -131,7 +134,7 @@ describe('useNodesSyncDraft', () => {
   })
 
   describe('syncWorkflowDraftWhenPageClose', () => {
-    it('should not call postWithKeepalive when nodes are read only', () => {
+    it('should not call sendBeacon when nodes are read only', () => {
       mockGetNodesReadOnly.mockReturnValue(true)
 
       const { result } = renderHook(() => useNodesSyncDraft())
@@ -140,10 +143,10 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      expect(mockPostWithKeepalive).not.toHaveBeenCalled()
+      expect(mockSendBeacon).not.toHaveBeenCalled()
     })
 
-    it('should call postWithKeepalive with correct URL and params', () => {
+    it('should call sendBeacon with correct URL and params', () => {
       mockGetNodesReadOnly.mockReturnValue(false)
       mockGetNodes.mockReturnValue([
         { id: 'node-1', data: { type: 'start' }, position: { x: 0, y: 0 } },
@@ -155,16 +158,13 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      expect(mockPostWithKeepalive).toHaveBeenCalledWith(
+      expect(mockSendBeacon).toHaveBeenCalledWith(
         '/api/rag/pipelines/test-pipeline-id/workflows/draft',
-        expect.objectContaining({
-          graph: expect.any(Object),
-          hash: 'test-hash',
-        }),
+        expect.any(String),
       )
     })
 
-    it('should not call postWithKeepalive when pipelineId is missing', () => {
+    it('should not call sendBeacon when pipelineId is missing', () => {
       mockWorkflowStoreGetState.mockReturnValue({
         pipelineId: undefined,
         environmentVariables: [],
@@ -178,10 +178,10 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      expect(mockPostWithKeepalive).not.toHaveBeenCalled()
+      expect(mockSendBeacon).not.toHaveBeenCalled()
     })
 
-    it('should not call postWithKeepalive when nodes array is empty', () => {
+    it('should not call sendBeacon when nodes array is empty', () => {
       mockGetNodes.mockReturnValue([])
 
       const { result } = renderHook(() => useNodesSyncDraft())
@@ -190,7 +190,7 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      expect(mockPostWithKeepalive).not.toHaveBeenCalled()
+      expect(mockSendBeacon).not.toHaveBeenCalled()
     })
 
     it('should filter out temp nodes', () => {
@@ -204,8 +204,8 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      // Should not call postWithKeepalive because after filtering temp nodes, array is empty
-      expect(mockPostWithKeepalive).not.toHaveBeenCalled()
+      // Should not call sendBeacon because after filtering temp nodes, array is empty
+      expect(mockSendBeacon).not.toHaveBeenCalled()
     })
 
     it('should remove underscore-prefixed data keys from nodes', () => {
@@ -219,9 +219,9 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      expect(mockPostWithKeepalive).toHaveBeenCalled()
-      const sentParams = mockPostWithKeepalive.mock.calls[0][1]
-      expect(sentParams.graph.nodes[0].data._privateData).toBeUndefined()
+      expect(mockSendBeacon).toHaveBeenCalled()
+      const sentData = JSON.parse(mockSendBeacon.mock.calls[0][1])
+      expect(sentData.graph.nodes[0].data._privateData).toBeUndefined()
     })
   })
 
@@ -395,8 +395,8 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      const sentParams = mockPostWithKeepalive.mock.calls[0][1]
-      expect(sentParams.graph.viewport).toEqual({ x: 100, y: 200, zoom: 1.5 })
+      const sentData = JSON.parse(mockSendBeacon.mock.calls[0][1])
+      expect(sentData.graph.viewport).toEqual({ x: 100, y: 200, zoom: 1.5 })
     })
 
     it('should include environment variables in params', () => {
@@ -418,8 +418,8 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      const sentParams = mockPostWithKeepalive.mock.calls[0][1]
-      expect(sentParams.environment_variables).toEqual([{ key: 'API_KEY', value: 'secret' }])
+      const sentData = JSON.parse(mockSendBeacon.mock.calls[0][1])
+      expect(sentData.environment_variables).toEqual([{ key: 'API_KEY', value: 'secret' }])
     })
 
     it('should include rag pipeline variables in params', () => {
@@ -441,8 +441,8 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      const sentParams = mockPostWithKeepalive.mock.calls[0][1]
-      expect(sentParams.rag_pipeline_variables).toEqual([{ variable: 'input', type: 'text-input' }])
+      const sentData = JSON.parse(mockSendBeacon.mock.calls[0][1])
+      expect(sentData.rag_pipeline_variables).toEqual([{ variable: 'input', type: 'text-input' }])
     })
 
     it('should remove underscore-prefixed keys from edges', () => {
@@ -461,9 +461,9 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      const sentParams = mockPostWithKeepalive.mock.calls[0][1]
-      expect(sentParams.graph.edges[0].data._hidden).toBeUndefined()
-      expect(sentParams.graph.edges[0].data.visible).toBe(false)
+      const sentData = JSON.parse(mockSendBeacon.mock.calls[0][1])
+      expect(sentData.graph.edges[0].data._hidden).toBeUndefined()
+      expect(sentData.graph.edges[0].data.visible).toBe(false)
     })
   })
 })

web/app/components/rag-pipeline/hooks/use-nodes-sync-draft.ts

@@ -9,7 +9,6 @@ import {
   useWorkflowStore,
 } from '@/app/components/workflow/store'
 import { API_PREFIX } from '@/config'
-import { postWithKeepalive } from '@/service/fetch'
 import { syncWorkflowDraft } from '@/service/workflow'
 import { usePipelineRefreshDraft } from '.'
 
@@ -77,8 +76,12 @@ export const useNodesSyncDraft = () => {
       return
     const postParams = getPostParams()
 
-    if (postParams)
-      postWithKeepalive(`${API_PREFIX}${postParams.url}`, postParams.params)
+    if (postParams) {
+      navigator.sendBeacon(
+        `${API_PREFIX}${postParams.url}`,
+        JSON.stringify(postParams.params),
+      )
+    }
   }, [getPostParams, getNodesReadOnly])
 
   const performSync = useCallback(async (

web/app/components/rag-pipeline/hooks/use-update-dsl-modal.spec.ts

@@ -1,551 +0,0 @@
-import { act, renderHook } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { DSLImportMode, DSLImportStatus } from '@/models/app'
-import { useUpdateDSLModal } from './use-update-dsl-modal'
-
-// --- FileReader stub ---
-class MockFileReader {
-  onload: ((this: FileReader, event: ProgressEvent<FileReader>) => void) | null = null
-
-  readAsText(_file: Blob) {
-    const event = { target: { result: 'test content' } } as unknown as ProgressEvent<FileReader>
-    this.onload?.call(this as unknown as FileReader, event)
-  }
-}
-vi.stubGlobal('FileReader', MockFileReader as unknown as typeof FileReader)
-
-// --- Module-level mock functions ---
-const mockNotify = vi.fn()
-const mockEmit = vi.fn()
-const mockImportDSL = vi.fn()
-const mockImportDSLConfirm = vi.fn()
-const mockHandleCheckPluginDependencies = vi.fn()
-
-// --- Mocks ---
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: (key: string) => key }),
-}))
-
-vi.mock('use-context-selector', () => ({
-  useContext: () => ({ notify: mockNotify }),
-}))
-
-vi.mock('@/app/components/base/toast', () => ({
-  ToastContext: {},
-}))
-
-vi.mock('@/context/event-emitter', () => ({
-  useEventEmitterContextContext: () => ({
-    eventEmitter: { emit: mockEmit },
-  }),
-}))
-
-vi.mock('@/app/components/workflow/store', () => ({
-  useWorkflowStore: () => ({
-    getState: () => ({ pipelineId: 'test-pipeline-id' }),
-  }),
-}))
-
-vi.mock('@/app/components/workflow/utils', () => ({
-  initialNodes: (nodes: unknown[]) => nodes,
-  initialEdges: (edges: unknown[]) => edges,
-}))
-
-vi.mock('@/app/components/workflow/constants', () => ({
-  WORKFLOW_DATA_UPDATE: 'WORKFLOW_DATA_UPDATE',
-}))
-
-vi.mock('@/app/components/workflow/plugin-dependency/hooks', () => ({
-  usePluginDependencies: () => ({
-    handleCheckPluginDependencies: mockHandleCheckPluginDependencies,
-  }),
-}))
-
-vi.mock('@/service/use-pipeline', () => ({
-  useImportPipelineDSL: () => ({ mutateAsync: mockImportDSL }),
-  useImportPipelineDSLConfirm: () => ({ mutateAsync: mockImportDSLConfirm }),
-}))
-
-vi.mock('@/service/workflow', () => ({
-  fetchWorkflowDraft: vi.fn().mockResolvedValue({
-    graph: { nodes: [], edges: [], viewport: { x: 0, y: 0, zoom: 1 } },
-    hash: 'test-hash',
-    rag_pipeline_variables: [],
-  }),
-}))
-
-// --- Helpers ---
-const createFile = () => new File(['test content'], 'test.pipeline', { type: 'text/yaml' })
-
-// Cast MouseEventHandler to a plain callable for tests (event param is unused)
-type AsyncFn = () => Promise<void>
-
-describe('useUpdateDSLModal', () => {
-  const mockOnCancel = vi.fn()
-  const mockOnImport = vi.fn()
-
-  const renderUpdateDSLModal = (overrides?: { onImport?: () => void }) =>
-    renderHook(() =>
-      useUpdateDSLModal({
-        onCancel: mockOnCancel,
-        onImport: overrides?.onImport ?? mockOnImport,
-      }),
-    )
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockImportDSL.mockResolvedValue({
-      id: 'import-id',
-      status: DSLImportStatus.COMPLETED,
-      pipeline_id: 'test-pipeline-id',
-    })
-    mockHandleCheckPluginDependencies.mockResolvedValue(undefined)
-  })
-
-  // Initial state values
-  describe('initial state', () => {
-    it('should return correct defaults', () => {
-      const { result } = renderUpdateDSLModal()
-
-      expect(result.current.currentFile).toBeUndefined()
-      expect(result.current.show).toBe(true)
-      expect(result.current.showErrorModal).toBe(false)
-      expect(result.current.loading).toBe(false)
-      expect(result.current.versions).toBeUndefined()
-    })
-  })
-
-  // File handling
-  describe('handleFile', () => {
-    it('should set currentFile when file is provided', () => {
-      const { result } = renderUpdateDSLModal()
-      const file = createFile()
-
-      act(() => {
-        result.current.handleFile(file)
-      })
-
-      expect(result.current.currentFile).toBe(file)
-    })
-
-    it('should clear currentFile when called with undefined', () => {
-      const { result } = renderUpdateDSLModal()
-
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-      act(() => {
-        result.current.handleFile(undefined)
-      })
-
-      expect(result.current.currentFile).toBeUndefined()
-    })
-  })
-
-  // Modal state management
-  describe('modal state', () => {
-    it('should allow toggling showErrorModal', () => {
-      const { result } = renderUpdateDSLModal()
-
-      expect(result.current.showErrorModal).toBe(false)
-
-      act(() => {
-        result.current.setShowErrorModal(true)
-      })
-      expect(result.current.showErrorModal).toBe(true)
-
-      act(() => {
-        result.current.setShowErrorModal(false)
-      })
-      expect(result.current.showErrorModal).toBe(false)
-    })
-  })
-
-  // Import flow
-  describe('handleImport', () => {
-    it('should call importDSL with correct parameters', async () => {
-      const { result } = renderUpdateDSLModal()
-
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-      })
-
-      expect(mockImportDSL).toHaveBeenCalledWith({
-        mode: DSLImportMode.YAML_CONTENT,
-        yaml_content: 'test content',
-        pipeline_id: 'test-pipeline-id',
-      })
-    })
-
-    it('should not call importDSL when no file is selected', async () => {
-      const { result } = renderUpdateDSLModal()
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-      })
-
-      expect(mockImportDSL).not.toHaveBeenCalled()
-    })
-
-    // COMPLETED status
-    it('should notify success on COMPLETED status', async () => {
-      const { result } = renderUpdateDSLModal()
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-      })
-
-      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'success' }))
-    })
-
-    it('should call onImport on successful import', async () => {
-      const { result } = renderUpdateDSLModal()
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-      })
-
-      expect(mockOnImport).toHaveBeenCalled()
-    })
-
-    it('should call onCancel on successful import', async () => {
-      const { result } = renderUpdateDSLModal()
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-      })
-
-      expect(mockOnCancel).toHaveBeenCalled()
-    })
-
-    it('should emit workflow update event on success', async () => {
-      const { result } = renderUpdateDSLModal()
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-      })
-
-      expect(mockEmit).toHaveBeenCalled()
-    })
-
-    it('should call handleCheckPluginDependencies on success', async () => {
-      const { result } = renderUpdateDSLModal()
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-      })
-
-      expect(mockHandleCheckPluginDependencies).toHaveBeenCalledWith('test-pipeline-id', true)
-    })
-
-    // COMPLETED_WITH_WARNINGS status
-    it('should notify warning on COMPLETED_WITH_WARNINGS status', async () => {
-      mockImportDSL.mockResolvedValue({
-        id: 'import-id',
-        status: DSLImportStatus.COMPLETED_WITH_WARNINGS,
-        pipeline_id: 'test-pipeline-id',
-      })
-
-      const { result } = renderUpdateDSLModal()
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-      })
-
-      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'warning' }))
-    })
-
-    // PENDING status (version mismatch)
-    it('should switch to version mismatch modal on PENDING status', async () => {
-      vi.useFakeTimers({ shouldAdvanceTime: true })
-
-      mockImportDSL.mockResolvedValue({
-        id: 'import-id',
-        status: DSLImportStatus.PENDING,
-        pipeline_id: 'test-pipeline-id',
-        imported_dsl_version: '0.8.0',
-        current_dsl_version: '1.0.0',
-      })
-
-      const { result } = renderUpdateDSLModal()
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-        await vi.advanceTimersByTimeAsync(350)
-      })
-
-      expect(result.current.show).toBe(false)
-      expect(result.current.showErrorModal).toBe(true)
-      expect(result.current.versions).toEqual({
-        importedVersion: '0.8.0',
-        systemVersion: '1.0.0',
-      })
-
-      vi.useRealTimers()
-    })
-
-    it('should default version strings to empty when undefined', async () => {
-      vi.useFakeTimers({ shouldAdvanceTime: true })
-
-      mockImportDSL.mockResolvedValue({
-        id: 'import-id',
-        status: DSLImportStatus.PENDING,
-        pipeline_id: 'test-pipeline-id',
-        imported_dsl_version: undefined,
-        current_dsl_version: undefined,
-      })
-
-      const { result } = renderUpdateDSLModal()
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-        await vi.advanceTimersByTimeAsync(350)
-      })
-
-      expect(result.current.versions).toEqual({
-        importedVersion: '',
-        systemVersion: '',
-      })
-
-      vi.useRealTimers()
-    })
-
-    // FAILED / unknown status
-    it('should notify error on FAILED status', async () => {
-      mockImportDSL.mockResolvedValue({
-        id: 'import-id',
-        status: DSLImportStatus.FAILED,
-        pipeline_id: 'test-pipeline-id',
-      })
-
-      const { result } = renderUpdateDSLModal()
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-      })
-
-      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
-    })
-
-    // Exception
-    it('should notify error when importDSL throws', async () => {
-      mockImportDSL.mockRejectedValue(new Error('Network error'))
-
-      const { result } = renderUpdateDSLModal()
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-      })
-
-      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
-    })
-
-    // Missing pipeline_id
-    it('should notify error when pipeline_id is missing on success', async () => {
-      mockImportDSL.mockResolvedValue({
-        id: 'import-id',
-        status: DSLImportStatus.COMPLETED,
-        pipeline_id: undefined,
-      })
-
-      const { result } = renderUpdateDSLModal()
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-      })
-
-      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
-    })
-  })
-
-  // Confirm flow (after PENDING → version mismatch)
-  describe('onUpdateDSLConfirm', () => {
-    // Helper: drive the hook into PENDING state so importId is set
-    const setupPendingState = async (result: { current: ReturnType<typeof useUpdateDSLModal> }) => {
-      vi.useFakeTimers({ shouldAdvanceTime: true })
-
-      mockImportDSL.mockResolvedValue({
-        id: 'import-id',
-        status: DSLImportStatus.PENDING,
-        pipeline_id: 'test-pipeline-id',
-        imported_dsl_version: '0.8.0',
-        current_dsl_version: '1.0.0',
-      })
-
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-        await vi.advanceTimersByTimeAsync(350)
-      })
-
-      vi.useRealTimers()
-      vi.clearAllMocks()
-      mockHandleCheckPluginDependencies.mockResolvedValue(undefined)
-    }
-
-    it('should call importDSLConfirm with the stored importId', async () => {
-      mockImportDSLConfirm.mockResolvedValue({
-        status: DSLImportStatus.COMPLETED,
-        pipeline_id: 'test-pipeline-id',
-      })
-
-      const { result } = renderUpdateDSLModal()
-      await setupPendingState(result)
-
-      await act(async () => {
-        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
-      })
-
-      expect(mockImportDSLConfirm).toHaveBeenCalledWith('import-id')
-    })
-
-    it('should notify success and call onCancel after successful confirm', async () => {
-      mockImportDSLConfirm.mockResolvedValue({
-        status: DSLImportStatus.COMPLETED,
-        pipeline_id: 'test-pipeline-id',
-      })
-
-      const { result } = renderUpdateDSLModal()
-      await setupPendingState(result)
-
-      await act(async () => {
-        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
-      })
-
-      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'success' }))
-      expect(mockOnCancel).toHaveBeenCalled()
-    })
-
-    it('should call onImport after successful confirm', async () => {
-      mockImportDSLConfirm.mockResolvedValue({
-        status: DSLImportStatus.COMPLETED,
-        pipeline_id: 'test-pipeline-id',
-      })
-
-      const { result } = renderUpdateDSLModal()
-      await setupPendingState(result)
-
-      await act(async () => {
-        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
-      })
-
-      expect(mockOnImport).toHaveBeenCalled()
-    })
-
-    it('should notify error on FAILED confirm status', async () => {
-      mockImportDSLConfirm.mockResolvedValue({
-        status: DSLImportStatus.FAILED,
-        pipeline_id: 'test-pipeline-id',
-      })
-
-      const { result } = renderUpdateDSLModal()
-      await setupPendingState(result)
-
-      await act(async () => {
-        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
-      })
-
-      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
-    })
-
-    it('should notify error when confirm throws exception', async () => {
-      mockImportDSLConfirm.mockRejectedValue(new Error('Confirm failed'))
-
-      const { result } = renderUpdateDSLModal()
-      await setupPendingState(result)
-
-      await act(async () => {
-        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
-      })
-
-      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
-    })
-
-    it('should notify error when confirm succeeds but pipeline_id is missing', async () => {
-      mockImportDSLConfirm.mockResolvedValue({
-        status: DSLImportStatus.COMPLETED,
-        pipeline_id: undefined,
-      })
-
-      const { result } = renderUpdateDSLModal()
-      await setupPendingState(result)
-
-      await act(async () => {
-        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
-      })
-
-      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
-    })
-
-    it('should not call importDSLConfirm when importId is not set', async () => {
-      const { result } = renderUpdateDSLModal()
-
-      // No pending state → importId is undefined
-      await act(async () => {
-        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
-      })
-
-      expect(mockImportDSLConfirm).not.toHaveBeenCalled()
-    })
-  })
-
-  // Optional onImport callback
-  describe('optional onImport', () => {
-    it('should work without onImport callback', async () => {
-      const { result } = renderHook(() =>
-        useUpdateDSLModal({ onCancel: mockOnCancel }),
-      )
-
-      act(() => {
-        result.current.handleFile(createFile())
-      })
-
-      await act(async () => {
-        await (result.current.handleImport as unknown as AsyncFn)()
-      })
-
-      // Should succeed without throwing
-      expect(mockOnCancel).toHaveBeenCalled()
-    })
-  })
-})

web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts

@@ -1,205 +0,0 @@
-import type { MouseEventHandler } from 'react'
-import {
-  useCallback,
-  useRef,
-  useState,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
-import { ToastContext } from '@/app/components/base/toast'
-import { WORKFLOW_DATA_UPDATE } from '@/app/components/workflow/constants'
-import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
-import { useWorkflowStore } from '@/app/components/workflow/store'
-import {
-  initialEdges,
-  initialNodes,
-} from '@/app/components/workflow/utils'
-import { useEventEmitterContextContext } from '@/context/event-emitter'
-import {
-  DSLImportMode,
-  DSLImportStatus,
-} from '@/models/app'
-import {
-  useImportPipelineDSL,
-  useImportPipelineDSLConfirm,
-} from '@/service/use-pipeline'
-import { fetchWorkflowDraft } from '@/service/workflow'
-
-type VersionInfo = {
-  importedVersion: string
-  systemVersion: string
-}
-
-type UseUpdateDSLModalParams = {
-  onCancel: () => void
-  onImport?: () => void
-}
-
-const isCompletedStatus = (status: DSLImportStatus): boolean =>
-  status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS
-
-export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParams) => {
-  const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
-  const { eventEmitter } = useEventEmitterContextContext()
-  const workflowStore = useWorkflowStore()
-  const { handleCheckPluginDependencies } = usePluginDependencies()
-  const { mutateAsync: importDSL } = useImportPipelineDSL()
-  const { mutateAsync: importDSLConfirm } = useImportPipelineDSLConfirm()
-
-  // File state
-  const [currentFile, setDSLFile] = useState<File>()
-  const [fileContent, setFileContent] = useState<string>()
-
-  // Modal state
-  const [show, setShow] = useState(true)
-  const [showErrorModal, setShowErrorModal] = useState(false)
-
-  // Import state
-  const [loading, setLoading] = useState(false)
-  const [versions, setVersions] = useState<VersionInfo>()
-  const [importId, setImportId] = useState<string>()
-  const isCreatingRef = useRef(false)
-
-  const readFile = (file: File) => {
-    const reader = new FileReader()
-    reader.onload = (event) => {
-      setFileContent(event.target?.result as string)
-    }
-    reader.readAsText(file)
-  }
-
-  const handleFile = (file?: File) => {
-    setDSLFile(file)
-    if (file)
-      readFile(file)
-    if (!file)
-      setFileContent('')
-  }
-
-  const notifyError = useCallback(() => {
-    setLoading(false)
-    notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
-  }, [notify, t])
-
-  const updateWorkflow = useCallback(async (pipelineId: string) => {
-    const { graph, hash, rag_pipeline_variables } = await fetchWorkflowDraft(
-      `/rag/pipelines/${pipelineId}/workflows/draft`,
-    )
-    const { nodes, edges, viewport } = graph
-
-    eventEmitter?.emit({
-      type: WORKFLOW_DATA_UPDATE,
-      payload: {
-        nodes: initialNodes(nodes, edges),
-        edges: initialEdges(edges, nodes),
-        viewport,
-        hash,
-        rag_pipeline_variables: rag_pipeline_variables || [],
-      },
-    })
-  }, [eventEmitter])
-
-  const completeImport = useCallback(async (
-    pipelineId: string | undefined,
-    status: DSLImportStatus = DSLImportStatus.COMPLETED,
-  ) => {
-    if (!pipelineId) {
-      notifyError()
-      return
-    }
-
-    updateWorkflow(pipelineId)
-    onImport?.()
-
-    const isWarning = status === DSLImportStatus.COMPLETED_WITH_WARNINGS
-    notify({
-      type: isWarning ? 'warning' : 'success',
-      message: t(isWarning ? 'common.importWarning' : 'common.importSuccess', { ns: 'workflow' }),
-      children: isWarning && t('common.importWarningDetails', { ns: 'workflow' }),
-    })
-
-    await handleCheckPluginDependencies(pipelineId, true)
-    setLoading(false)
-    onCancel()
-  }, [updateWorkflow, onImport, notify, t, handleCheckPluginDependencies, onCancel, notifyError])
-
-  const showVersionMismatch = useCallback((
-    id: string,
-    importedVersion?: string,
-    systemVersion?: string,
-  ) => {
-    setShow(false)
-    setTimeout(() => setShowErrorModal(true), 300)
-    setVersions({
-      importedVersion: importedVersion ?? '',
-      systemVersion: systemVersion ?? '',
-    })
-    setImportId(id)
-  }, [])
-
-  const handleImport: MouseEventHandler = useCallback(async () => {
-    const { pipelineId } = workflowStore.getState()
-    if (isCreatingRef.current)
-      return
-    isCreatingRef.current = true
-    if (!currentFile)
-      return
-
-    try {
-      if (!pipelineId || !fileContent)
-        return
-
-      setLoading(true)
-      const response = await importDSL({
-        mode: DSLImportMode.YAML_CONTENT,
-        yaml_content: fileContent,
-        pipeline_id: pipelineId,
-      })
-      const { id, status, pipeline_id, imported_dsl_version, current_dsl_version } = response
-
-      if (isCompletedStatus(status))
-        await completeImport(pipeline_id, status)
-      else if (status === DSLImportStatus.PENDING)
-        showVersionMismatch(id, imported_dsl_version, current_dsl_version)
-      else
-        notifyError()
-    }
-    catch {
-      notifyError()
-    }
-    isCreatingRef.current = false
-  }, [currentFile, fileContent, workflowStore, importDSL, completeImport, showVersionMismatch, notifyError])
-
-  const onUpdateDSLConfirm: MouseEventHandler = useCallback(async () => {
-    if (!importId)
-      return
-
-    try {
-      const { status, pipeline_id } = await importDSLConfirm(importId)
-
-      if (status === DSLImportStatus.COMPLETED) {
-        await completeImport(pipeline_id)
-        return
-      }
-
-      if (status === DSLImportStatus.FAILED)
-        notifyError()
-    }
-    catch {
-      notifyError()
-    }
-  }, [importId, importDSLConfirm, completeImport, notifyError])
-
-  return {
-    currentFile,
-    handleFile,
-    show,
-    showErrorModal,
-    setShowErrorModal,
-    loading,
-    versions,
-    handleImport,
-    onUpdateDSLConfirm,
-  }
-}

web/app/components/sentry-initializer.tsx

@@ -4,13 +4,12 @@ import * as Sentry from '@sentry/react'
 import { useEffect } from 'react'
 
 import { IS_DEV } from '@/config'
-import { env } from '@/env'
 
 const SentryInitializer = ({
   children,
 }: { children: React.ReactElement }) => {
   useEffect(() => {
-    const SENTRY_DSN = env.NEXT_PUBLIC_SENTRY_DSN
+    const SENTRY_DSN = document?.body?.getAttribute('data-public-sentry-dsn')
     if (!IS_DEV && SENTRY_DSN) {
       Sentry.init({
         dsn: SENTRY_DSN,

web/app/components/tools/workflow-tool/utils.test.ts

@@ -13,54 +13,6 @@ describe('buildWorkflowOutputParameters', () => {
     expect(result).toBe(params)
   })
 
-  it('fills missing output description and type from schema when array input exists', () => {
-    const params: WorkflowToolProviderOutputParameter[] = [
-      { name: 'answer', description: '', type: undefined },
-      { name: 'files', description: 'keep this description', type: VarType.arrayFile },
-    ]
-    const schema: WorkflowToolProviderOutputSchema = {
-      type: 'object',
-      properties: {
-        answer: {
-          type: VarType.string,
-          description: 'Generated answer',
-        },
-        files: {
-          type: VarType.arrayFile,
-          description: 'Schema files description',
-        },
-      },
-    }
-
-    const result = buildWorkflowOutputParameters(params, schema)
-
-    expect(result).toEqual([
-      { name: 'answer', description: 'Generated answer', type: VarType.string },
-      { name: 'files', description: 'keep this description', type: VarType.arrayFile },
-    ])
-  })
-
-  it('falls back to empty description when both payload and schema descriptions are missing', () => {
-    const params: WorkflowToolProviderOutputParameter[] = [
-      { name: 'missing_desc', description: '', type: undefined },
-    ]
-    const schema: WorkflowToolProviderOutputSchema = {
-      type: 'object',
-      properties: {
-        other_field: {
-          type: VarType.string,
-          description: 'Other',
-        },
-      },
-    }
-
-    const result = buildWorkflowOutputParameters(params, schema)
-
-    expect(result).toEqual([
-      { name: 'missing_desc', description: '', type: undefined },
-    ])
-  })
-
   it('derives parameters from schema when explicit array missing', () => {
     const schema: WorkflowToolProviderOutputSchema = {
       type: 'object',
@@ -92,56 +44,4 @@ describe('buildWorkflowOutputParameters', () => {
   it('returns empty array when no source information is provided', () => {
     expect(buildWorkflowOutputParameters(null, null)).toEqual([])
   })
-
-  it('derives parameters from schema when explicit array is empty', () => {
-    const schema: WorkflowToolProviderOutputSchema = {
-      type: 'object',
-      properties: {
-        output_text: {
-          type: VarType.string,
-          description: 'Output text',
-        },
-      },
-    }
-
-    const result = buildWorkflowOutputParameters([], schema)
-
-    expect(result).toEqual([
-      { name: 'output_text', description: 'Output text', type: VarType.string },
-    ])
-  })
-
-  it('returns undefined type when schema output type is missing', () => {
-    const schema = {
-      type: 'object',
-      properties: {
-        answer: {
-          description: 'Answer without type',
-        },
-      },
-    } as unknown as WorkflowToolProviderOutputSchema
-
-    const result = buildWorkflowOutputParameters(undefined, schema)
-
-    expect(result).toEqual([
-      { name: 'answer', description: 'Answer without type', type: undefined },
-    ])
-  })
-
-  it('falls back to empty description when schema-derived description is missing', () => {
-    const schema = {
-      type: 'object',
-      properties: {
-        answer: {
-          type: VarType.string,
-        },
-      },
-    } as unknown as WorkflowToolProviderOutputSchema
-
-    const result = buildWorkflowOutputParameters(undefined, schema)
-
-    expect(result).toEqual([
-      { name: 'answer', description: '', type: VarType.string },
-    ])
-  })
 })

web/app/components/tools/workflow-tool/utils.ts

@@ -14,28 +14,15 @@ export const buildWorkflowOutputParameters = (
   outputParameters: WorkflowToolProviderOutputParameter[] | null | undefined,
   outputSchema?: WorkflowToolProviderOutputSchema | null,
 ): WorkflowToolProviderOutputParameter[] => {
-  const schemaProperties = outputSchema?.properties
+  if (Array.isArray(outputParameters))
+    return outputParameters
 
-  if (Array.isArray(outputParameters) && outputParameters.length > 0) {
-    if (!schemaProperties)
-      return outputParameters
-
-    return outputParameters.map((item) => {
-      const schema = schemaProperties[item.name]
-      return {
-        ...item,
-        description: item.description || schema?.description || '',
-        type: normalizeVarType(item.type || schema?.type),
-      }
-    })
-  }
-
-  if (!schemaProperties)
+  if (!outputSchema?.properties)
     return []
 
-  return Object.entries(schemaProperties).map(([name, schema]) => ({
+  return Object.entries(outputSchema.properties).map(([name, schema]) => ({
     name,
-    description: schema.description || '',
+    description: schema.description,
     type: normalizeVarType(schema.type),
   }))
 }

web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts

@@ -6,7 +6,6 @@ import { useSerialAsyncCallback } from '@/app/components/workflow/hooks/use-seri
 import { useNodesReadOnly } from '@/app/components/workflow/hooks/use-workflow'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { API_PREFIX } from '@/config'
-import { postWithKeepalive } from '@/service/fetch'
 import { syncWorkflowDraft } from '@/service/workflow'
 import { useWorkflowRefreshDraft } from '.'
 
@@ -86,7 +85,7 @@ export const useNodesSyncDraft = () => {
     const postParams = getPostParams()
 
     if (postParams)
-      postWithKeepalive(`${API_PREFIX}${postParams.url}`, postParams.params)
+      navigator.sendBeacon(`${API_PREFIX}${postParams.url}`, JSON.stringify(postParams.params))
   }, [getPostParams, getNodesReadOnly])
 
   const performSync = useCallback(async (

web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts

@@ -159,9 +159,6 @@ const useLastRun = <T>({
     if (!warningForNode)
       return false
 
-    if (warningForNode.unConnected && !warningForNode.errorMessage)
-      return false
-
     const message = warningForNode.errorMessage || 'This node has unresolved checklist issues'
     Toast.notify({ type: 'error', message })
     return true

web/app/components/workflow/nodes/_base/node.tsx

@@ -4,6 +4,13 @@ import type {
 } from 'react'
 import type { IterationNodeType } from '@/app/components/workflow/nodes/iteration/types'
 import type { NodeProps } from '@/app/components/workflow/types'
+import {
+  RiAlertFill,
+  RiCheckboxCircleFill,
+  RiErrorWarningFill,
+  RiLoader2Line,
+  RiPauseCircleFill,
+} from '@remixicon/react'
 import {
   cloneElement,
   memo,
@@ -102,7 +109,7 @@ const BaseNode: FC<BaseNodeProps> = ({
   } = useMemo(() => {
     return {
       showRunningBorder: (data._runningStatus === NodeRunningStatus.Running || data._runningStatus === NodeRunningStatus.Paused) && !showSelectedBorder,
-      showSuccessBorder: (data._runningStatus === NodeRunningStatus.Succeeded || (hasVarValue && !data._runningStatus)) && !showSelectedBorder,
+      showSuccessBorder: (data._runningStatus === NodeRunningStatus.Succeeded || hasVarValue) && !showSelectedBorder,
       showFailedBorder: data._runningStatus === NodeRunningStatus.Failed && !showSelectedBorder,
       showExceptionBorder: data._runningStatus === NodeRunningStatus.Exception && !showSelectedBorder,
     }
@@ -120,7 +127,7 @@ const BaseNode: FC<BaseNodeProps> = ({
       return (
         <div
           className={cn(
-            'mr-2 text-text-tertiary system-xs-medium',
+            'system-xs-medium mr-2 text-text-tertiary',
             data._runningStatus === NodeRunningStatus.Running && 'text-text-accent',
           )}
         >
@@ -160,7 +167,7 @@ const BaseNode: FC<BaseNodeProps> = ({
       {
         data.type === BlockEnum.DataSource && (
           <div className="absolute inset-[-2px] top-[-22px] z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]">
-            <div className="flex h-5 items-center px-2.5 text-text-tertiary system-2xs-semibold-uppercase">
+            <div className="system-2xs-semibold-uppercase flex h-5 items-center px-2.5 text-text-tertiary">
               {t('blocks.datasource', { ns: 'workflow' })}
             </div>
           </div>
@@ -245,7 +252,7 @@ const BaseNode: FC<BaseNodeProps> = ({
           />
           <div
             title={data.title}
-            className="mr-1 flex grow items-center truncate text-text-primary system-sm-semibold-uppercase"
+            className="system-sm-semibold-uppercase mr-1 flex grow items-center truncate text-text-primary"
           >
             <div>
               {data.title}
@@ -261,7 +268,7 @@ const BaseNode: FC<BaseNodeProps> = ({
                   </div>
                 )}
                 >
-                  <div className="ml-1 flex items-center justify-center rounded-[5px] border-[1px] border-text-warning px-[5px] py-[3px] text-text-warning system-2xs-medium-uppercase">
+                  <div className="system-2xs-medium-uppercase ml-1 flex items-center justify-center rounded-[5px] border-[1px] border-text-warning px-[5px] py-[3px] text-text-warning ">
                     {t('nodes.iteration.parallelModeUpper', { ns: 'workflow' })}
                   </div>
                 </Tooltip>
@@ -281,26 +288,26 @@ const BaseNode: FC<BaseNodeProps> = ({
             !!(data.type === BlockEnum.Loop && data._loopIndex) && LoopIndex
           }
           {
-            isLoading && <span className="i-ri-loader-2-line h-3.5 w-3.5 animate-spin text-text-accent" />
+            isLoading && <RiLoader2Line className="h-3.5 w-3.5 animate-spin text-text-accent" />
           }
           {
             !isLoading && data._runningStatus === NodeRunningStatus.Failed && (
-              <span className="i-ri-error-warning-fill h-3.5 w-3.5 text-text-destructive" />
+              <RiErrorWarningFill className="h-3.5 w-3.5 text-text-destructive" />
             )
           }
           {
             !isLoading && data._runningStatus === NodeRunningStatus.Exception && (
-              <span className="i-ri-alert-fill h-3.5 w-3.5 text-text-warning-secondary" />
+              <RiAlertFill className="h-3.5 w-3.5 text-text-warning-secondary" />
             )
           }
           {
-            !isLoading && (data._runningStatus === NodeRunningStatus.Succeeded || (hasVarValue && !data._runningStatus)) && (
-              <span className="i-ri-checkbox-circle-fill h-3.5 w-3.5 text-text-success" />
+            !isLoading && (data._runningStatus === NodeRunningStatus.Succeeded || hasVarValue) && (
+              <RiCheckboxCircleFill className="h-3.5 w-3.5 text-text-success" />
             )
           }
           {
             !isLoading && data._runningStatus === NodeRunningStatus.Paused && (
-              <span className="i-ri-pause-circle-fill h-3.5 w-3.5 text-text-warning-secondary" />
+              <RiPauseCircleFill className="h-3.5 w-3.5 text-text-warning-secondary" />
             )
           }
         </div>
@@ -334,7 +341,7 @@ const BaseNode: FC<BaseNodeProps> = ({
         }
         {
           !!(data.desc && data.type !== BlockEnum.Iteration && data.type !== BlockEnum.Loop) && (
-            <div className="whitespace-pre-line break-words px-3 pb-2 pt-1 text-text-tertiary system-xs-regular">
+            <div className="system-xs-regular whitespace-pre-line break-words px-3 pb-2 pt-1 text-text-tertiary">
               {data.desc}
             </div>
           )

web/app/components/workflow/nodes/human-input/__tests__/human-input.test.tsx

@@ -1,567 +0,0 @@
-import type { ReactNode } from 'react'
-import type { HumanInputNodeType } from '@/app/components/workflow/nodes/human-input/types'
-import type {
-  Edge,
-  Node,
-} from '@/app/components/workflow/types'
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-import { WORKFLOW_COMMON_NODES } from '@/app/components/workflow/constants/node'
-import humanInputDefault from '@/app/components/workflow/nodes/human-input/default'
-import HumanInputNode from '@/app/components/workflow/nodes/human-input/node'
-import {
-  DeliveryMethodType,
-  UserActionButtonType,
-} from '@/app/components/workflow/nodes/human-input/types'
-import { BlockEnum } from '@/app/components/workflow/types'
-import { initialNodes, preprocessNodesAndEdges } from '@/app/components/workflow/utils/workflow-init'
-
-// Mock reactflow which is needed by initialNodes and NodeSourceHandle
-vi.mock('reactflow', async () => {
-  const reactflow = await vi.importActual('reactflow')
-  return {
-    ...reactflow,
-    Handle: ({ children }: { children?: ReactNode }) => <div data-testid="handle">{children}</div>,
-  }
-})
-
-// Minimal store state mirroring the fields that NodeSourceHandle selects
-const mockStoreState = {
-  shouldAutoOpenStartNodeSelector: false,
-  setShouldAutoOpenStartNodeSelector: vi.fn(),
-  setHasSelectedStartNode: vi.fn(),
-}
-
-// Mock workflow store used by NodeSourceHandle
-// useStore accepts a selector and applies it to the state, so tests break
-// if the component starts selecting fields that aren't provided here.
-vi.mock('@/app/components/workflow/store', () => ({
-  useStore: vi.fn((selector?: (s: typeof mockStoreState) => unknown) =>
-    selector ? selector(mockStoreState) : mockStoreState,
-  ),
-  useWorkflowStore: vi.fn(() => ({
-    getState: () => ({
-      getNodes: () => [],
-    }),
-  })),
-}))
-
-// Mock workflow hooks barrel (used by NodeSourceHandle via ../../../hooks)
-vi.mock('@/app/components/workflow/hooks', () => ({
-  useNodesInteractions: () => ({
-    handleNodeAdd: vi.fn(),
-  }),
-  useNodesReadOnly: () => ({
-    getNodesReadOnly: () => false,
-    nodesReadOnly: false,
-  }),
-  useAvailableBlocks: () => ({
-    availableNextBlocks: [],
-    availablePrevBlocks: [],
-  }),
-  useIsChatMode: () => false,
-}))
-
-// ── Factory: Build a realistic human-input node as it would appear after DSL import ──
-const createHumanInputNode = (overrides?: Partial<HumanInputNodeType>): Node => ({
-  id: 'human-input-1',
-  type: 'custom',
-  position: { x: 400, y: 200 },
-  data: {
-    type: BlockEnum.HumanInput,
-    title: 'Human Input',
-    desc: 'Wait for human input',
-    delivery_methods: [
-      {
-        id: 'dm-1',
-        type: DeliveryMethodType.WebApp,
-        enabled: true,
-      },
-      {
-        id: 'dm-2',
-        type: DeliveryMethodType.Email,
-        enabled: true,
-        config: {
-          recipients: { whole_workspace: false, items: [] },
-          subject: 'Please review',
-          body: 'Please review the form',
-          debug_mode: false,
-        },
-      },
-    ],
-    form_content: '# Review Form\nPlease fill in the details below.',
-    inputs: [
-      {
-        type: 'text-input',
-        output_variable_name: 'review_result',
-        default: { selector: [], type: 'constant' as const, value: '' },
-      },
-    ],
-    user_actions: [
-      {
-        id: 'approve',
-        title: 'Approve',
-        button_style: UserActionButtonType.Primary,
-      },
-      {
-        id: 'reject',
-        title: 'Reject',
-        button_style: UserActionButtonType.Default,
-      },
-    ],
-    timeout: 3,
-    timeout_unit: 'day' as const,
-    ...overrides,
-  } as HumanInputNodeType,
-})
-
-const createStartNode = (): Node => ({
-  id: 'start-1',
-  type: 'custom',
-  position: { x: 100, y: 200 },
-  data: {
-    type: BlockEnum.Start,
-    title: 'Start',
-    desc: '',
-  } as Node['data'],
-})
-
-const createEdge = (source: string, target: string, sourceHandle = 'source', targetHandle = 'target'): Edge => ({
-  id: `${source}-${sourceHandle}-${target}-${targetHandle}`,
-  type: 'custom',
-  source,
-  sourceHandle,
-  target,
-  targetHandle,
-  data: {},
-} as Edge)
-
-describe('DSL Import with Human Input Node', () => {
-  // ── preprocessNodesAndEdges: human-input nodes pass through without error ──
-  describe('preprocessNodesAndEdges', () => {
-    it('should pass through a workflow containing a human-input node unchanged', () => {
-      const humanInputNode = createHumanInputNode()
-      const startNode = createStartNode()
-      const nodes = [startNode, humanInputNode]
-      const edges = [createEdge('start-1', 'human-input-1')]
-
-      const result = preprocessNodesAndEdges(nodes as Node[], edges as Edge[])
-
-      expect(result.nodes).toHaveLength(2)
-      expect(result.edges).toHaveLength(1)
-      expect(result.nodes).toEqual(nodes)
-      expect(result.edges).toEqual(edges)
-    })
-
-    it('should not treat human-input node as an iteration or loop node', () => {
-      const humanInputNode = createHumanInputNode()
-      const nodes = [humanInputNode]
-
-      const result = preprocessNodesAndEdges(nodes as Node[], [])
-
-      // No extra iteration/loop start nodes should be injected
-      expect(result.nodes).toHaveLength(1)
-      expect(result.nodes[0].data.type).toBe(BlockEnum.HumanInput)
-    })
-  })
-
-  // ── initialNodes: human-input nodes are properly initialized ──
-  describe('initialNodes', () => {
-    it('should initialize a human-input node with connected handle IDs', () => {
-      const humanInputNode = createHumanInputNode()
-      const startNode = createStartNode()
-      const nodes = [startNode, humanInputNode]
-      const edges = [createEdge('start-1', 'human-input-1')]
-
-      const result = initialNodes(nodes as Node[], edges as Edge[])
-
-      const processedHumanInput = result.find(n => n.id === 'human-input-1')
-      expect(processedHumanInput).toBeDefined()
-      expect(processedHumanInput!.data.type).toBe(BlockEnum.HumanInput)
-      // initialNodes sets _connectedSourceHandleIds and _connectedTargetHandleIds
-      expect(processedHumanInput!.data._connectedSourceHandleIds).toBeDefined()
-      expect(processedHumanInput!.data._connectedTargetHandleIds).toBeDefined()
-    })
-
-    it('should preserve human-input node data after initialization', () => {
-      const humanInputNode = createHumanInputNode()
-      const nodes = [humanInputNode]
-
-      const result = initialNodes(nodes as Node[], [])
-
-      const processed = result[0]
-      const nodeData = processed.data as HumanInputNodeType
-      expect(nodeData.delivery_methods).toHaveLength(2)
-      expect(nodeData.user_actions).toHaveLength(2)
-      expect(nodeData.form_content).toBe('# Review Form\nPlease fill in the details below.')
-      expect(nodeData.timeout).toBe(3)
-      expect(nodeData.timeout_unit).toBe('day')
-    })
-
-    it('should set node type to custom if not set', () => {
-      const humanInputNode = createHumanInputNode()
-      delete (humanInputNode as Record<string, unknown>).type
-
-      const result = initialNodes([humanInputNode] as Node[], [])
-
-      expect(result[0].type).toBe('custom')
-    })
-  })
-
-  // ── Node component: renders without crashing for all data variations ──
-  describe('HumanInputNode Component', () => {
-    it('should render without crashing with full DSL data', () => {
-      const node = createHumanInputNode()
-
-      expect(() => {
-        render(
-          <HumanInputNode
-            id={node.id}
-            data={node.data as HumanInputNodeType}
-          />,
-        )
-      }).not.toThrow()
-    })
-
-    it('should display delivery method labels when methods are present', () => {
-      const node = createHumanInputNode()
-
-      render(
-        <HumanInputNode
-          id={node.id}
-          data={node.data as HumanInputNodeType}
-        />,
-      )
-
-      // Delivery method type labels are rendered in lowercase
-      expect(screen.getByText('webapp')).toBeInTheDocument()
-      expect(screen.getByText('email')).toBeInTheDocument()
-    })
-
-    it('should display user action IDs', () => {
-      const node = createHumanInputNode()
-
-      render(
-        <HumanInputNode
-          id={node.id}
-          data={node.data as HumanInputNodeType}
-        />,
-      )
-
-      expect(screen.getByText('approve')).toBeInTheDocument()
-      expect(screen.getByText('reject')).toBeInTheDocument()
-    })
-
-    it('should always display Timeout handle', () => {
-      const node = createHumanInputNode()
-
-      render(
-        <HumanInputNode
-          id={node.id}
-          data={node.data as HumanInputNodeType}
-        />,
-      )
-
-      expect(screen.getByText('Timeout')).toBeInTheDocument()
-    })
-
-    it('should render without crashing when delivery_methods is empty', () => {
-      const node = createHumanInputNode({ delivery_methods: [] })
-
-      expect(() => {
-        render(
-          <HumanInputNode
-            id={node.id}
-            data={node.data as HumanInputNodeType}
-          />,
-        )
-      }).not.toThrow()
-
-      // Delivery method section should not be rendered
-      expect(screen.queryByText('webapp')).not.toBeInTheDocument()
-      expect(screen.queryByText('email')).not.toBeInTheDocument()
-    })
-
-    it('should render without crashing when user_actions is empty', () => {
-      const node = createHumanInputNode({ user_actions: [] })
-
-      expect(() => {
-        render(
-          <HumanInputNode
-            id={node.id}
-            data={node.data as HumanInputNodeType}
-          />,
-        )
-      }).not.toThrow()
-
-      // Timeout handle should still exist
-      expect(screen.getByText('Timeout')).toBeInTheDocument()
-    })
-
-    it('should render without crashing when both delivery_methods and user_actions are empty', () => {
-      const node = createHumanInputNode({
-        delivery_methods: [],
-        user_actions: [],
-        form_content: '',
-        inputs: [],
-      })
-
-      expect(() => {
-        render(
-          <HumanInputNode
-            id={node.id}
-            data={node.data as HumanInputNodeType}
-          />,
-        )
-      }).not.toThrow()
-    })
-
-    it('should render with only webapp delivery method', () => {
-      const node = createHumanInputNode({
-        delivery_methods: [
-          { id: 'dm-1', type: DeliveryMethodType.WebApp, enabled: true },
-        ],
-      })
-
-      render(
-        <HumanInputNode
-          id={node.id}
-          data={node.data as HumanInputNodeType}
-        />,
-      )
-
-      expect(screen.getByText('webapp')).toBeInTheDocument()
-      expect(screen.queryByText('email')).not.toBeInTheDocument()
-    })
-
-    it('should render with multiple user actions', () => {
-      const node = createHumanInputNode({
-        user_actions: [
-          { id: 'action_1', title: 'Approve', button_style: UserActionButtonType.Primary },
-          { id: 'action_2', title: 'Reject', button_style: UserActionButtonType.Default },
-          { id: 'action_3', title: 'Escalate', button_style: UserActionButtonType.Accent },
-        ],
-      })
-
-      render(
-        <HumanInputNode
-          id={node.id}
-          data={node.data as HumanInputNodeType}
-        />,
-      )
-
-      expect(screen.getByText('action_1')).toBeInTheDocument()
-      expect(screen.getByText('action_2')).toBeInTheDocument()
-      expect(screen.getByText('action_3')).toBeInTheDocument()
-    })
-  })
-
-  // ── Node registration: human-input is included in the workflow node registry ──
-  // Verify via WORKFLOW_COMMON_NODES (lightweight metadata-only imports) instead
-  // of NodeComponentMap/PanelComponentMap which pull in every node's heavy UI deps.
-  describe('Node Registration', () => {
-    it('should have HumanInput included in WORKFLOW_COMMON_NODES', () => {
-      const entry = WORKFLOW_COMMON_NODES.find(
-        n => n.metaData.type === BlockEnum.HumanInput,
-      )
-      expect(entry).toBeDefined()
-    })
-  })
-
-  // ── Default config & validation ──
-  describe('HumanInput Default Configuration', () => {
-    it('should provide default values for a new human-input node', () => {
-      const defaultValue = humanInputDefault.defaultValue
-
-      expect(defaultValue.delivery_methods).toEqual([])
-      expect(defaultValue.user_actions).toEqual([])
-      expect(defaultValue.form_content).toBe('')
-      expect(defaultValue.inputs).toEqual([])
-      expect(defaultValue.timeout).toBe(3)
-      expect(defaultValue.timeout_unit).toBe('day')
-    })
-
-    it('should validate that delivery methods are required', () => {
-      const t = (key: string) => key
-      const payload = {
-        ...humanInputDefault.defaultValue,
-        delivery_methods: [],
-      } as HumanInputNodeType
-
-      const result = humanInputDefault.checkValid(payload, t)
-
-      expect(result.isValid).toBe(false)
-      expect(result.errorMessage).toBeTruthy()
-    })
-
-    it('should validate that at least one delivery method is enabled', () => {
-      const t = (key: string) => key
-      const payload = {
-        ...humanInputDefault.defaultValue,
-        delivery_methods: [
-          { id: 'dm-1', type: DeliveryMethodType.WebApp, enabled: false },
-        ],
-        user_actions: [
-          { id: 'approve', title: 'Approve', button_style: UserActionButtonType.Primary },
-        ],
-      } as HumanInputNodeType
-
-      const result = humanInputDefault.checkValid(payload, t)
-
-      expect(result.isValid).toBe(false)
-    })
-
-    it('should validate that user actions are required', () => {
-      const t = (key: string) => key
-      const payload = {
-        ...humanInputDefault.defaultValue,
-        delivery_methods: [
-          { id: 'dm-1', type: DeliveryMethodType.WebApp, enabled: true },
-        ],
-        user_actions: [],
-      } as HumanInputNodeType
-
-      const result = humanInputDefault.checkValid(payload, t)
-
-      expect(result.isValid).toBe(false)
-    })
-
-    it('should validate that user action IDs are not duplicated', () => {
-      const t = (key: string) => key
-      const payload = {
-        ...humanInputDefault.defaultValue,
-        delivery_methods: [
-          { id: 'dm-1', type: DeliveryMethodType.WebApp, enabled: true },
-        ],
-        user_actions: [
-          { id: 'approve', title: 'Approve', button_style: UserActionButtonType.Primary },
-          { id: 'approve', title: 'Also Approve', button_style: UserActionButtonType.Default },
-        ],
-      } as HumanInputNodeType
-
-      const result = humanInputDefault.checkValid(payload, t)
-
-      expect(result.isValid).toBe(false)
-    })
-
-    it('should pass validation with correct configuration', () => {
-      const t = (key: string) => key
-      const payload = {
-        ...humanInputDefault.defaultValue,
-        delivery_methods: [
-          { id: 'dm-1', type: DeliveryMethodType.WebApp, enabled: true },
-        ],
-        user_actions: [
-          { id: 'approve', title: 'Approve', button_style: UserActionButtonType.Primary },
-          { id: 'reject', title: 'Reject', button_style: UserActionButtonType.Default },
-        ],
-      } as HumanInputNodeType
-
-      const result = humanInputDefault.checkValid(payload, t)
-
-      expect(result.isValid).toBe(true)
-      expect(result.errorMessage).toBe('')
-    })
-  })
-
-  // ── Output variables generation ──
-  describe('HumanInput Output Variables', () => {
-    it('should generate output variables from form inputs', () => {
-      const payload = {
-        ...humanInputDefault.defaultValue,
-        inputs: [
-          { type: 'text-input', output_variable_name: 'review_result', default: { selector: [], type: 'constant' as const, value: '' } },
-          { type: 'text-input', output_variable_name: 'comment', default: { selector: [], type: 'constant' as const, value: '' } },
-        ],
-      } as HumanInputNodeType
-
-      const outputVars = humanInputDefault.getOutputVars!(payload, {}, [])
-
-      expect(outputVars).toEqual([
-        { variable: 'review_result', type: 'string' },
-        { variable: 'comment', type: 'string' },
-      ])
-    })
-
-    it('should return empty output variables when no form inputs exist', () => {
-      const payload = {
-        ...humanInputDefault.defaultValue,
-        inputs: [],
-      } as HumanInputNodeType
-
-      const outputVars = humanInputDefault.getOutputVars!(payload, {}, [])
-
-      expect(outputVars).toEqual([])
-    })
-  })
-
-  // ── Full DSL import simulation: start → human-input → end ──
-  describe('Full Workflow with Human Input Node', () => {
-    it('should process a start → human-input → end workflow without errors', () => {
-      const startNode = createStartNode()
-      const humanInputNode = createHumanInputNode()
-      const endNode: Node = {
-        id: 'end-1',
-        type: 'custom',
-        position: { x: 700, y: 200 },
-        data: {
-          type: BlockEnum.End,
-          title: 'End',
-          desc: '',
-          outputs: [],
-        } as Node['data'],
-      }
-
-      const nodes = [startNode, humanInputNode, endNode]
-      const edges = [
-        createEdge('start-1', 'human-input-1'),
-        createEdge('human-input-1', 'end-1', 'approve', 'target'),
-      ]
-
-      const processed = preprocessNodesAndEdges(nodes as Node[], edges as Edge[])
-      expect(processed.nodes).toHaveLength(3)
-      expect(processed.edges).toHaveLength(2)
-
-      const initialized = initialNodes(nodes as Node[], edges as Edge[])
-      expect(initialized).toHaveLength(3)
-
-      // All node types should be preserved
-      const types = initialized.map(n => n.data.type)
-      expect(types).toContain(BlockEnum.Start)
-      expect(types).toContain(BlockEnum.HumanInput)
-      expect(types).toContain(BlockEnum.End)
-    })
-
-    it('should handle multiple branches from human-input user actions', () => {
-      const startNode = createStartNode()
-      const humanInputNode = createHumanInputNode()
-      const approveEndNode: Node = {
-        id: 'approve-end',
-        type: 'custom',
-        position: { x: 700, y: 100 },
-        data: { type: BlockEnum.End, title: 'Approve End', desc: '', outputs: [] } as Node['data'],
-      }
-      const rejectEndNode: Node = {
-        id: 'reject-end',
-        type: 'custom',
-        position: { x: 700, y: 300 },
-        data: { type: BlockEnum.End, title: 'Reject End', desc: '', outputs: [] } as Node['data'],
-      }
-
-      const nodes = [startNode, humanInputNode, approveEndNode, rejectEndNode]
-      const edges = [
-        createEdge('start-1', 'human-input-1'),
-        createEdge('human-input-1', 'approve-end', 'approve', 'target'),
-        createEdge('human-input-1', 'reject-end', 'reject', 'target'),
-      ]
-
-      const initialized = initialNodes(nodes as Node[], edges as Edge[])
-      expect(initialized).toHaveLength(4)
-
-      // Human input node should still have correct data
-      const hiNode = initialized.find(n => n.id === 'human-input-1')!
-      expect((hiNode.data as HumanInputNodeType).user_actions).toHaveLength(2)
-      expect((hiNode.data as HumanInputNodeType).delivery_methods).toHaveLength(2)
-    })
-  })
-})

web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import { InputNumber } from '@/app/components/base/input-number'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
-import { env } from '@/env'
 
 export type TopKAndScoreThresholdProps = {
   topK: number
@@ -16,7 +15,12 @@ export type TopKAndScoreThresholdProps = {
   hiddenScoreThreshold?: boolean
 }
 
-const maxTopK = env.NEXT_PUBLIC_TOP_K_MAX_VALUE
+const maxTopK = (() => {
+  const configValue = Number.parseInt(globalThis.document?.body?.getAttribute('data-public-top-k-max-value') || '', 10)
+  if (configValue && !isNaN(configValue))
+    return configValue
+  return 10
+})()
 const TOP_K_VALUE_LIMIT = {
   amount: 1,
   min: 1,

web/app/components/workflow/nodes/llm/utils.ts

@@ -1,6 +1,6 @@
 import type { ValidationError } from 'jsonschema'
 import type { ArrayItems, Field, LLMNodeType } from './types'
-import * as z from 'zod'
+import { z } from 'zod'
 import { draft07Validator, forbidBooleanProperties } from '@/utils/validators'
 import { ArrayType, Type } from './types'
 

web/app/components/workflow/variable-inspect/utils.tsx

@@ -1,4 +1,4 @@
-import * as z from 'zod'
+import { z } from 'zod'
 
 const arrayStringSchemaParttern = z.array(z.string())
 const arrayNumberSchemaParttern = z.array(z.number())
@@ -7,7 +7,7 @@ const arrayNumberSchemaParttern = z.array(z.number())
 const literalSchema = z.union([z.string(), z.number(), z.boolean(), z.null()])
 type Literal = z.infer<typeof literalSchema>
 type Json = Literal | { [key: string]: Json } | Json[]
-const jsonSchema: z.ZodType<Json> = z.lazy(() => z.union([literalSchema, z.array(jsonSchema), z.record(z.string(), jsonSchema)]))
+const jsonSchema: z.ZodType<Json> = z.lazy(() => z.union([literalSchema, z.array(jsonSchema), z.record(jsonSchema)]))
 const arrayJsonSchema: z.ZodType<Json[]> = z.lazy(() => z.array(jsonSchema))
 
 export const validateJSONSchema = (schema: any, type: string) => {

web/app/forgot-password/ForgotPasswordForm.tsx

@@ -7,7 +7,7 @@ import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import * as z from 'zod'
+import { z } from 'zod'
 import Button from '@/app/components/base/button'
 import { formContext, useAppForm } from '@/app/components/base/form'
 import { zodSubmitValidator } from '@/app/components/base/form/utils/zod-submit-validator'
@@ -22,10 +22,10 @@ import Input from '../components/base/input'
 import Loading from '../components/base/loading'
 
 const accountFormSchema = z.object({
-  email: z.email('error.emailInValid')
-    .min(1, {
-      error: 'error.emailInValid',
-    }),
+  email: z
+    .string()
+    .min(1, { message: 'error.emailInValid' })
+    .email('error.emailInValid'),
 })
 
 const ForgotPasswordForm = () => {

web/app/install/installForm.tsx

@@ -7,7 +7,7 @@ import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import * as z from 'zod'
+import { z } from 'zod'
 import Button from '@/app/components/base/button'
 import { formContext, useAppForm } from '@/app/components/base/form'
 import { zodSubmitValidator } from '@/app/components/base/form/utils/zod-submit-validator'
@@ -22,15 +22,13 @@ import { encryptPassword as encodePassword } from '@/utils/encryption'
 import Loading from '../components/base/loading'
 
 const accountFormSchema = z.object({
-  email: z.email('error.emailInValid')
-    .min(1, {
-      error: 'error.emailInValid',
-    }),
-  name: z.string().min(1, {
-    error: 'error.nameEmpty',
-  }),
+  email: z
+    .string()
+    .min(1, { message: 'error.emailInValid' })
+    .email('error.emailInValid'),
+  name: z.string().min(1, { message: 'error.nameEmpty' }),
   password: z.string().min(8, {
-    error: 'error.passwordLengthInValid',
+    message: 'error.passwordLengthInValid',
   }).regex(validPassword, 'error.passwordInvalid'),
 })
 
@@ -199,7 +197,7 @@ const InstallForm = () => {
                       </div>
 
                       <div className={cn('mt-1 text-xs text-text-secondary', {
-                        '!text-sm text-red-400': passwordErrors && passwordErrors.length > 0,
+                        'text-red-400 !text-sm': passwordErrors && passwordErrors.length > 0,
                       })}
                       >
                         {t('error.passwordInvalid', { ns: 'login' })}

web/app/layout.tsx

@@ -5,8 +5,8 @@ import { Instrument_Serif } from 'next/font/google'
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import GlobalPublicStoreProvider from '@/context/global-public-context'
 import { TanstackQueryInitializer } from '@/context/query-client'
-import { getDatasetMap } from '@/env'
 import { getLocaleOnServer } from '@/i18n-config/server'
+import { DatasetAttr } from '@/types/feature'
 import { cn } from '@/utils/classnames'
 import { ToastProvider } from './components/base/toast'
 import BrowserInitializer from './components/browser-initializer'
@@ -39,7 +39,40 @@ const LocaleLayout = async ({
   children: React.ReactNode
 }) => {
   const locale = await getLocaleOnServer()
-  const datasetMap = getDatasetMap()
+
+  const datasetMap: Record<DatasetAttr, string | undefined> = {
+    [DatasetAttr.DATA_API_PREFIX]: process.env.NEXT_PUBLIC_API_PREFIX,
+    [DatasetAttr.DATA_PUBLIC_API_PREFIX]: process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX,
+    [DatasetAttr.DATA_MARKETPLACE_API_PREFIX]: process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX,
+    [DatasetAttr.DATA_MARKETPLACE_URL_PREFIX]: process.env.NEXT_PUBLIC_MARKETPLACE_URL_PREFIX,
+    [DatasetAttr.DATA_PUBLIC_EDITION]: process.env.NEXT_PUBLIC_EDITION,
+    [DatasetAttr.DATA_PUBLIC_AMPLITUDE_API_KEY]: process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY,
+    [DatasetAttr.DATA_PUBLIC_COOKIE_DOMAIN]: process.env.NEXT_PUBLIC_COOKIE_DOMAIN,
+    [DatasetAttr.DATA_PUBLIC_SUPPORT_MAIL_LOGIN]: process.env.NEXT_PUBLIC_SUPPORT_MAIL_LOGIN,
+    [DatasetAttr.DATA_PUBLIC_SENTRY_DSN]: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    [DatasetAttr.DATA_PUBLIC_MAINTENANCE_NOTICE]: process.env.NEXT_PUBLIC_MAINTENANCE_NOTICE,
+    [DatasetAttr.DATA_PUBLIC_SITE_ABOUT]: process.env.NEXT_PUBLIC_SITE_ABOUT,
+    [DatasetAttr.DATA_PUBLIC_TEXT_GENERATION_TIMEOUT_MS]: process.env.NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS,
+    [DatasetAttr.DATA_PUBLIC_MAX_TOOLS_NUM]: process.env.NEXT_PUBLIC_MAX_TOOLS_NUM,
+    [DatasetAttr.DATA_PUBLIC_MAX_PARALLEL_LIMIT]: process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT,
+    [DatasetAttr.DATA_PUBLIC_TOP_K_MAX_VALUE]: process.env.NEXT_PUBLIC_TOP_K_MAX_VALUE,
+    [DatasetAttr.DATA_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH]: process.env.NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH,
+    [DatasetAttr.DATA_PUBLIC_LOOP_NODE_MAX_COUNT]: process.env.NEXT_PUBLIC_LOOP_NODE_MAX_COUNT,
+    [DatasetAttr.DATA_PUBLIC_MAX_ITERATIONS_NUM]: process.env.NEXT_PUBLIC_MAX_ITERATIONS_NUM,
+    [DatasetAttr.DATA_PUBLIC_MAX_TREE_DEPTH]: process.env.NEXT_PUBLIC_MAX_TREE_DEPTH,
+    [DatasetAttr.DATA_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME]: process.env.NEXT_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME,
+    [DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_JINAREADER]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER,
+    [DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_FIRECRAWL]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL,
+    [DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_WATERCRAWL]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL,
+    [DatasetAttr.DATA_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX]: process.env.NEXT_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX,
+    [DatasetAttr.NEXT_PUBLIC_ZENDESK_WIDGET_KEY]: process.env.NEXT_PUBLIC_ZENDESK_WIDGET_KEY,
+    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT,
+    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION,
+    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL,
+    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID,
+    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN,
+    [DatasetAttr.DATA_PUBLIC_BATCH_CONCURRENCY]: process.env.NEXT_PUBLIC_BATCH_CONCURRENCY,
+  }
 
   return (
     <html lang={locale ?? 'en'} className={cn('h-full', instrumentSerif.variable)} suppressHydrationWarning>

web/app/serwist/[path]/route.ts

@@ -1,7 +1,6 @@
 import { createSerwistRoute } from '@serwist/turbopack'
-import { env } from '@/env'
 
-const basePath = env.NEXT_PUBLIC_BASE_PATH
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
 
 export const { dynamic, dynamicParams, revalidate, generateStaticParams, GET } = createSerwistRoute({
   swSrc: 'app/sw.ts',

web/app/styles/globals.css

@@ -1,16 +1,15 @@
 @import "preflight.css";
 
+
 @import '../../themes/light.css';
 @import '../../themes/dark.css';
 @import "../../themes/manual-light.css";
 @import "../../themes/manual-dark.css";
 @import "./monaco-sticky-fix.css";
 
-@import "../components/base/action-button/index.css";
-@import "../components/base/badge/index.css";
 @import "../components/base/button/index.css";
+@import "../components/base/action-button/index.css";
 @import "../components/base/modal/index.css";
-@import "../components/base/premium-badge/index.css";
 
 @tailwind base;
 @tailwind components;

web/config/index.ts

@@ -1,51 +1,101 @@
 import type { ModelParameterRule } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { InputVarType } from '@/app/components/workflow/types'
-import { env } from '@/env'
 import { PromptRole } from '@/models/debug'
 import { PipelineInputVarType } from '@/models/pipeline'
 import { AgentStrategy } from '@/types/app'
+import { DatasetAttr } from '@/types/feature'
 import pkg from '../package.json'
 
+const getBooleanConfig = (
+  envVar: string | undefined,
+  dataAttrKey: DatasetAttr,
+  defaultValue: boolean = true,
+) => {
+  if (envVar !== undefined && envVar !== '')
+    return envVar === 'true'
+  const attrValue = globalThis.document?.body?.getAttribute(dataAttrKey)
+  if (attrValue !== undefined && attrValue !== '')
+    return attrValue === 'true'
+  return defaultValue
+}
+
+const getNumberConfig = (
+  envVar: string | undefined,
+  dataAttrKey: DatasetAttr,
+  defaultValue: number,
+) => {
+  if (envVar) {
+    const parsed = Number.parseInt(envVar)
+    if (!Number.isNaN(parsed) && parsed > 0)
+      return parsed
+  }
+
+  const attrValue = globalThis.document?.body?.getAttribute(dataAttrKey)
+  if (attrValue) {
+    const parsed = Number.parseInt(attrValue)
+    if (!Number.isNaN(parsed) && parsed > 0)
+      return parsed
+  }
+  return defaultValue
+}
+
 const getStringConfig = (
   envVar: string | undefined,
+  dataAttrKey: DatasetAttr,
   defaultValue: string,
 ) => {
   if (envVar)
     return envVar
+
+  const attrValue = globalThis.document?.body?.getAttribute(dataAttrKey)
+  if (attrValue)
+    return attrValue
   return defaultValue
 }
 
 export const API_PREFIX = getStringConfig(
-  env.NEXT_PUBLIC_API_PREFIX,
+  process.env.NEXT_PUBLIC_API_PREFIX,
+  DatasetAttr.DATA_API_PREFIX,
   'http://localhost:5001/console/api',
 )
 export const PUBLIC_API_PREFIX = getStringConfig(
-  env.NEXT_PUBLIC_PUBLIC_API_PREFIX,
+  process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX,
+  DatasetAttr.DATA_PUBLIC_API_PREFIX,
   'http://localhost:5001/api',
 )
 export const MARKETPLACE_API_PREFIX = getStringConfig(
-  env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX,
+  process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX,
+  DatasetAttr.DATA_MARKETPLACE_API_PREFIX,
   'http://localhost:5002/api',
 )
 export const MARKETPLACE_URL_PREFIX = getStringConfig(
-  env.NEXT_PUBLIC_MARKETPLACE_URL_PREFIX,
+  process.env.NEXT_PUBLIC_MARKETPLACE_URL_PREFIX,
+  DatasetAttr.DATA_MARKETPLACE_URL_PREFIX,
   '',
 )
 
-const EDITION = env.NEXT_PUBLIC_EDITION
+const EDITION = getStringConfig(
+  process.env.NEXT_PUBLIC_EDITION,
+  DatasetAttr.DATA_PUBLIC_EDITION,
+  'SELF_HOSTED',
+)
 
 export const IS_CE_EDITION = EDITION === 'SELF_HOSTED'
 export const IS_CLOUD_EDITION = EDITION === 'CLOUD'
 
 export const AMPLITUDE_API_KEY = getStringConfig(
-  env.NEXT_PUBLIC_AMPLITUDE_API_KEY,
+  process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY,
+  DatasetAttr.DATA_PUBLIC_AMPLITUDE_API_KEY,
   '',
 )
 
-export const IS_DEV = env.NODE_ENV === 'development'
-export const IS_PROD = env.NODE_ENV === 'production'
+export const IS_DEV = process.env.NODE_ENV === 'development'
+export const IS_PROD = process.env.NODE_ENV === 'production'
 
-export const SUPPORT_MAIL_LOGIN = env.NEXT_PUBLIC_SUPPORT_MAIL_LOGIN
+export const SUPPORT_MAIL_LOGIN = !!(
+  process.env.NEXT_PUBLIC_SUPPORT_MAIL_LOGIN
+  || globalThis.document?.body?.getAttribute('data-public-support-mail-login')
+)
 
 export const TONE_LIST = [
   {
@@ -111,11 +161,16 @@ export const getMaxToken = (modelId: string) => {
 export const LOCALE_COOKIE_NAME = 'locale'
 
 const COOKIE_DOMAIN = getStringConfig(
-  env.NEXT_PUBLIC_COOKIE_DOMAIN,
+  process.env.NEXT_PUBLIC_COOKIE_DOMAIN,
+  DatasetAttr.DATA_PUBLIC_COOKIE_DOMAIN,
   '',
 ).trim()
 
-export const BATCH_CONCURRENCY = env.NEXT_PUBLIC_BATCH_CONCURRENCY
+export const BATCH_CONCURRENCY = getNumberConfig(
+  process.env.NEXT_PUBLIC_BATCH_CONCURRENCY,
+  DatasetAttr.DATA_PUBLIC_BATCH_CONCURRENCY,
+  5, // default
+)
 
 export const CSRF_COOKIE_NAME = () => {
   if (COOKIE_DOMAIN)
@@ -289,62 +344,112 @@ export const resetReg = () => (VAR_REGEX.lastIndex = 0)
 export const HITL_INPUT_REG = /\{\{(#\$output\.(?:[a-z_]\w{0,29}){1,10}#)\}\}/gi
 export const resetHITLInputReg = () => HITL_INPUT_REG.lastIndex = 0
 
-export const DISABLE_UPLOAD_IMAGE_AS_ICON = env.NEXT_PUBLIC_DISABLE_UPLOAD_IMAGE_AS_ICON
+export const DISABLE_UPLOAD_IMAGE_AS_ICON = process.env.NEXT_PUBLIC_DISABLE_UPLOAD_IMAGE_AS_ICON === 'true'
 
 export const GITHUB_ACCESS_TOKEN
-  = env.NEXT_PUBLIC_GITHUB_ACCESS_TOKEN
+  = process.env.NEXT_PUBLIC_GITHUB_ACCESS_TOKEN || ''
 
 export const SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS = '.difypkg,.difybndl'
 export const FULL_DOC_PREVIEW_LENGTH = 50
 
 export const JSON_SCHEMA_MAX_DEPTH = 10
 
-export const MAX_TOOLS_NUM = env.NEXT_PUBLIC_MAX_TOOLS_NUM
-export const MAX_PARALLEL_LIMIT = env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT
-export const TEXT_GENERATION_TIMEOUT_MS = env.NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS
-export const LOOP_NODE_MAX_COUNT = env.NEXT_PUBLIC_LOOP_NODE_MAX_COUNT
-export const MAX_ITERATIONS_NUM = env.NEXT_PUBLIC_MAX_ITERATIONS_NUM
-export const MAX_TREE_DEPTH = env.NEXT_PUBLIC_MAX_TREE_DEPTH
+export const MAX_TOOLS_NUM = getNumberConfig(
+  process.env.NEXT_PUBLIC_MAX_TOOLS_NUM,
+  DatasetAttr.DATA_PUBLIC_MAX_TOOLS_NUM,
+  10,
+)
+export const MAX_PARALLEL_LIMIT = getNumberConfig(
+  process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT,
+  DatasetAttr.DATA_PUBLIC_MAX_PARALLEL_LIMIT,
+  10,
+)
+export const TEXT_GENERATION_TIMEOUT_MS = getNumberConfig(
+  process.env.NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS,
+  DatasetAttr.DATA_PUBLIC_TEXT_GENERATION_TIMEOUT_MS,
+  60000,
+)
+export const LOOP_NODE_MAX_COUNT = getNumberConfig(
+  process.env.NEXT_PUBLIC_LOOP_NODE_MAX_COUNT,
+  DatasetAttr.DATA_PUBLIC_LOOP_NODE_MAX_COUNT,
+  100,
+)
+export const MAX_ITERATIONS_NUM = getNumberConfig(
+  process.env.NEXT_PUBLIC_MAX_ITERATIONS_NUM,
+  DatasetAttr.DATA_PUBLIC_MAX_ITERATIONS_NUM,
+  99,
+)
+export const MAX_TREE_DEPTH = getNumberConfig(
+  process.env.NEXT_PUBLIC_MAX_TREE_DEPTH,
+  DatasetAttr.DATA_PUBLIC_MAX_TREE_DEPTH,
+  50,
+)
 
-export const ALLOW_UNSAFE_DATA_SCHEME = env.NEXT_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME
-export const ENABLE_WEBSITE_JINAREADER = env.NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER
-export const ENABLE_WEBSITE_FIRECRAWL = env.NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL
-export const ENABLE_WEBSITE_WATERCRAWL = env.NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL
-export const ENABLE_SINGLE_DOLLAR_LATEX = env.NEXT_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX
+export const ALLOW_UNSAFE_DATA_SCHEME = getBooleanConfig(
+  process.env.NEXT_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME,
+  DatasetAttr.DATA_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME,
+  false,
+)
+export const ENABLE_WEBSITE_JINAREADER = getBooleanConfig(
+  process.env.NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER,
+  DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_JINAREADER,
+  true,
+)
+export const ENABLE_WEBSITE_FIRECRAWL = getBooleanConfig(
+  process.env.NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL,
+  DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_FIRECRAWL,
+  true,
+)
+export const ENABLE_WEBSITE_WATERCRAWL = getBooleanConfig(
+  process.env.NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL,
+  DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_WATERCRAWL,
+  false,
+)
+export const ENABLE_SINGLE_DOLLAR_LATEX = getBooleanConfig(
+  process.env.NEXT_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX,
+  DatasetAttr.DATA_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX,
+  false,
+)
 
 export const VALUE_SELECTOR_DELIMITER = '@@@'
 
 export const validPassword = /^(?=.*[a-z])(?=.*\d)\S{8,}$/i
 
 export const ZENDESK_WIDGET_KEY = getStringConfig(
-  env.NEXT_PUBLIC_ZENDESK_WIDGET_KEY,
+  process.env.NEXT_PUBLIC_ZENDESK_WIDGET_KEY,
+  DatasetAttr.NEXT_PUBLIC_ZENDESK_WIDGET_KEY,
   '',
 )
 export const ZENDESK_FIELD_IDS = {
   ENVIRONMENT: getStringConfig(
-    env.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT,
+    process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT,
+    DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT,
     '',
   ),
   VERSION: getStringConfig(
-    env.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION,
+    process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION,
+    DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION,
     '',
   ),
   EMAIL: getStringConfig(
-    env.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL,
+    process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL,
+    DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL,
     '',
   ),
   WORKSPACE_ID: getStringConfig(
-    env.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID,
+    process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID,
+    DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID,
     '',
   ),
   PLAN: getStringConfig(
-    env.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN,
+    process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN,
+    DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN,
     '',
   ),
 }
 export const APP_VERSION = pkg.version
 
-export const IS_MARKETPLACE = env.NEXT_PUBLIC_IS_MARKETPLACE
+export const IS_MARKETPLACE = globalThis.document?.body?.getAttribute('data-is-marketplace') === 'true'
 
 export const RAG_PIPELINE_PREVIEW_CHUNK_NUM = 20
 

web/context/app-context.tsx

@@ -10,7 +10,6 @@ import { setUserId, setUserProperties } from '@/app/components/base/amplitude'
 import { setZendeskConversationFields } from '@/app/components/base/zendesk/utils'
 import MaintenanceNotice from '@/app/components/header/maintenance-notice'
 import { ZENDESK_FIELD_IDS } from '@/config'
-import { env } from '@/env'
 import {
   useCurrentWorkspace,
   useLangGeniusVersion,
@@ -205,7 +204,7 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
     }}
     >
       <div className="flex h-full flex-col overflow-y-auto">
-        {env.NEXT_PUBLIC_MAINTENANCE_NOTICE && <MaintenanceNotice />}
+        {globalThis.document?.body?.getAttribute('data-public-maintenance-notice') && <MaintenanceNotice />}
         <div className="relative flex grow flex-col overflow-y-auto overflow-x-hidden bg-background-body">
           {children}
         </div>

web/context/event-emitter.tsx

@@ -4,19 +4,7 @@ import type { EventEmitter } from 'ahooks/lib/useEventEmitter'
 import { useEventEmitter } from 'ahooks'
 import { createContext, useContext } from 'use-context-selector'
 
-/**
- * Typed event object emitted via the shared EventEmitter.
- * Covers workflow updates, prompt-editor commands, DSL export checks, etc.
- */
-export type EventEmitterMessage = {
-  type: string
-  payload?: unknown
-  instanceId?: string
-}
-
-export type EventEmitterValue = string | EventEmitterMessage
-
-const EventEmitterContext = createContext<{ eventEmitter: EventEmitter<EventEmitterValue> | null }>({
+const EventEmitterContext = createContext<{ eventEmitter: EventEmitter<string> | null }>({
   eventEmitter: null,
 })
 
@@ -28,7 +16,7 @@ type EventEmitterContextProviderProps = {
 export const EventEmitterContextProvider = ({
   children,
 }: EventEmitterContextProviderProps) => {
-  const eventEmitter = useEventEmitter<EventEmitterValue>()
+  const eventEmitter = useEventEmitter<string>()
 
   return (
     <EventEmitterContext.Provider value={{ eventEmitter }}>

web/env.ts

@@ -1,235 +0,0 @@
-import type { CamelCase, Replace } from 'string-ts'
-import { createEnv } from '@t3-oss/env-nextjs'
-import { concat, kebabCase, length, slice } from 'string-ts'
-import * as z from 'zod'
-import { isClient, isServer } from './utils/client'
-import { ObjectFromEntries, ObjectKeys } from './utils/object'
-
-const CLIENT_ENV_PREFIX = 'NEXT_PUBLIC_'
-type ClientSchema = Record<`${typeof CLIENT_ENV_PREFIX}${string}`, z.ZodType>
-
-const coercedBoolean = z.string()
-  .refine(s => s === 'true' || s === 'false' || s === '0' || s === '1')
-  .transform(s => s === 'true' || s === '1')
-const coercedNumber = z.coerce.number().int().positive()
-
-/// keep-sorted
-const clientSchema = {
-  /**
-   * Default is not allow to embed into iframe to prevent Clickjacking: https://owasp.org/www-community/attacks/Clickjacking
-   */
-  NEXT_PUBLIC_ALLOW_EMBED: coercedBoolean.default(false),
-  /**
-   * Allow rendering unsafe URLs which have "data:" scheme.
-   */
-  NEXT_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME: coercedBoolean.default(false),
-  /**
-   * The API key of amplitude
-   */
-  NEXT_PUBLIC_AMPLITUDE_API_KEY: z.string().optional(),
-  /**
-   * The base URL of console application, refers to the Console base URL of WEB service if console domain is
-   * different from api or web app domain.
-   * example: http://cloud.dify.ai/console/api
-   */
-  NEXT_PUBLIC_API_PREFIX: z.string().optional(),
-  /**
-   * The base path for the application
-   */
-  NEXT_PUBLIC_BASE_PATH: z.string().regex(/^\/.*[^/]$/).or(z.literal('')).default(''),
-  /**
-   * number of concurrency
-   */
-  NEXT_PUBLIC_BATCH_CONCURRENCY: coercedNumber.default(5),
-  /**
-   * When the frontend and backend run on different subdomains, set NEXT_PUBLIC_COOKIE_DOMAIN=1.
-   */
-  NEXT_PUBLIC_COOKIE_DOMAIN: z.string().optional(),
-  /**
-   * CSP https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
-   */
-  NEXT_PUBLIC_CSP_WHITELIST: z.string().optional(),
-  /**
-   * For production release, change this to PRODUCTION
-   */
-  NEXT_PUBLIC_DEPLOY_ENV: z.enum(['DEVELOPMENT', 'PRODUCTION', 'TESTING']).optional(),
-  NEXT_PUBLIC_DISABLE_UPLOAD_IMAGE_AS_ICON: coercedBoolean.default(false),
-  /**
-   * The deployment edition, SELF_HOSTED
-   */
-  NEXT_PUBLIC_EDITION: z.enum(['SELF_HOSTED', 'CLOUD']).default('SELF_HOSTED'),
-  /**
-   * Enable inline LaTeX rendering with single dollar signs ($...$)
-   * Default is false for security reasons to prevent conflicts with regular text
-   */
-  NEXT_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX: coercedBoolean.default(false),
-  NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL: coercedBoolean.default(true),
-  NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER: coercedBoolean.default(true),
-  NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL: coercedBoolean.default(false),
-  /**
-   * Github Access Token, used for invoking Github API
-   */
-  NEXT_PUBLIC_GITHUB_ACCESS_TOKEN: z.string().optional(),
-  /**
-   * The maximum number of tokens for segmentation
-   */
-  NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: coercedNumber.default(4000),
-  NEXT_PUBLIC_IS_MARKETPLACE: coercedBoolean.default(false),
-  /**
-   * Maximum loop count in the workflow
-   */
-  NEXT_PUBLIC_LOOP_NODE_MAX_COUNT: coercedNumber.default(100),
-  NEXT_PUBLIC_MAINTENANCE_NOTICE: z.string().optional(),
-  /**
-   * The API PREFIX for MARKETPLACE
-   */
-  NEXT_PUBLIC_MARKETPLACE_API_PREFIX: z.url().optional(),
-  /**
-   * The URL for MARKETPLACE
-   */
-  NEXT_PUBLIC_MARKETPLACE_URL_PREFIX: z.url().optional(),
-  /**
-   * The maximum number of iterations for agent setting
-   */
-  NEXT_PUBLIC_MAX_ITERATIONS_NUM: coercedNumber.default(99),
-  /**
-   * Maximum number of Parallelism branches in the workflow
-   */
-  NEXT_PUBLIC_MAX_PARALLEL_LIMIT: coercedNumber.default(10),
-  /**
-   * Maximum number of tools in the agent/workflow
-   */
-  NEXT_PUBLIC_MAX_TOOLS_NUM: coercedNumber.default(10),
-  /**
-   * The maximum number of tree node depth for workflow
-   */
-  NEXT_PUBLIC_MAX_TREE_DEPTH: coercedNumber.default(50),
-  /**
-   * The URL for Web APP, refers to the Web App base URL of WEB service if web app domain is different from
-   * console or api domain.
-   * example: http://udify.app/api
-   */
-  NEXT_PUBLIC_PUBLIC_API_PREFIX: z.string().optional(),
-  /**
-   * SENTRY
-   */
-  NEXT_PUBLIC_SENTRY_DSN: z.string().optional(),
-  NEXT_PUBLIC_SITE_ABOUT: z.string().optional(),
-  NEXT_PUBLIC_SUPPORT_MAIL_LOGIN: coercedBoolean.default(false),
-  /**
-   * The timeout for the text generation in millisecond
-   */
-  NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS: coercedNumber.default(60000),
-  /**
-   * The maximum number of top-k value for RAG.
-   */
-  NEXT_PUBLIC_TOP_K_MAX_VALUE: coercedNumber.default(10),
-  /**
-   * Disable Upload Image as WebApp icon default is false
-   */
-  NEXT_PUBLIC_UPLOAD_IMAGE_AS_ICON: coercedBoolean.default(false),
-  NEXT_PUBLIC_WEB_PREFIX: z.url().optional(),
-  NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL: z.string().optional(),
-  NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT: z.string().optional(),
-  NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN: z.string().optional(),
-  NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION: z.string().optional(),
-  NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID: z.string().optional(),
-  NEXT_PUBLIC_ZENDESK_WIDGET_KEY: z.string().optional(),
-} satisfies ClientSchema
-
-export const env = createEnv({
-  server: {
-    /**
-     * Maximum length of segmentation tokens for indexing
-     */
-    INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: coercedNumber.default(4000),
-    /**
-     * Disable Next.js Telemetry (https://nextjs.org/telemetry)
-     */
-    NEXT_TELEMETRY_DISABLED: coercedBoolean.optional(),
-    PORT: coercedNumber.default(3000),
-    /**
-     * The timeout for the text generation in millisecond
-     */
-    TEXT_GENERATION_TIMEOUT_MS: coercedNumber.default(60000),
-  },
-  shared: {
-    NODE_ENV: z.enum(['development', 'test', 'production']).default('development'),
-  },
-  client: clientSchema,
-  experimental__runtimeEnv: {
-    NODE_ENV: process.env.NODE_ENV,
-    NEXT_PUBLIC_ALLOW_EMBED: isServer ? process.env.NEXT_PUBLIC_ALLOW_EMBED : getRuntimeEnvFromBody('allowEmbed'),
-    NEXT_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME: isServer ? process.env.NEXT_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME : getRuntimeEnvFromBody('allowUnsafeDataScheme'),
-    NEXT_PUBLIC_AMPLITUDE_API_KEY: isServer ? process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY : getRuntimeEnvFromBody('amplitudeApiKey'),
-    NEXT_PUBLIC_API_PREFIX: isServer ? process.env.NEXT_PUBLIC_API_PREFIX : getRuntimeEnvFromBody('apiPrefix'),
-    NEXT_PUBLIC_BASE_PATH: isServer ? process.env.NEXT_PUBLIC_BASE_PATH : getRuntimeEnvFromBody('basePath'),
-    NEXT_PUBLIC_BATCH_CONCURRENCY: isServer ? process.env.NEXT_PUBLIC_BATCH_CONCURRENCY : getRuntimeEnvFromBody('batchConcurrency'),
-    NEXT_PUBLIC_COOKIE_DOMAIN: isServer ? process.env.NEXT_PUBLIC_COOKIE_DOMAIN : getRuntimeEnvFromBody('cookieDomain'),
-    NEXT_PUBLIC_CSP_WHITELIST: isServer ? process.env.NEXT_PUBLIC_CSP_WHITELIST : getRuntimeEnvFromBody('cspWhitelist'),
-    NEXT_PUBLIC_DEPLOY_ENV: isServer ? process.env.NEXT_PUBLIC_DEPLOY_ENV : getRuntimeEnvFromBody('deployEnv'),
-    NEXT_PUBLIC_DISABLE_UPLOAD_IMAGE_AS_ICON: isServer ? process.env.NEXT_PUBLIC_DISABLE_UPLOAD_IMAGE_AS_ICON : getRuntimeEnvFromBody('disableUploadImageAsIcon'),
-    NEXT_PUBLIC_EDITION: isServer ? process.env.NEXT_PUBLIC_EDITION : getRuntimeEnvFromBody('edition'),
-    NEXT_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX: isServer ? process.env.NEXT_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX : getRuntimeEnvFromBody('enableSingleDollarLatex'),
-    NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL: isServer ? process.env.NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL : getRuntimeEnvFromBody('enableWebsiteFirecrawl'),
-    NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER: isServer ? process.env.NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER : getRuntimeEnvFromBody('enableWebsiteJinareader'),
-    NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL: isServer ? process.env.NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL : getRuntimeEnvFromBody('enableWebsiteWatercrawl'),
-    NEXT_PUBLIC_GITHUB_ACCESS_TOKEN: isServer ? process.env.NEXT_PUBLIC_GITHUB_ACCESS_TOKEN : getRuntimeEnvFromBody('githubAccessToken'),
-    NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: isServer ? process.env.NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH : getRuntimeEnvFromBody('indexingMaxSegmentationTokensLength'),
-    NEXT_PUBLIC_IS_MARKETPLACE: isServer ? process.env.NEXT_PUBLIC_IS_MARKETPLACE : getRuntimeEnvFromBody('isMarketplace'),
-    NEXT_PUBLIC_LOOP_NODE_MAX_COUNT: isServer ? process.env.NEXT_PUBLIC_LOOP_NODE_MAX_COUNT : getRuntimeEnvFromBody('loopNodeMaxCount'),
-    NEXT_PUBLIC_MAINTENANCE_NOTICE: isServer ? process.env.NEXT_PUBLIC_MAINTENANCE_NOTICE : getRuntimeEnvFromBody('maintenanceNotice'),
-    NEXT_PUBLIC_MARKETPLACE_API_PREFIX: isServer ? process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX : getRuntimeEnvFromBody('marketplaceApiPrefix'),
-    NEXT_PUBLIC_MARKETPLACE_URL_PREFIX: isServer ? process.env.NEXT_PUBLIC_MARKETPLACE_URL_PREFIX : getRuntimeEnvFromBody('marketplaceUrlPrefix'),
-    NEXT_PUBLIC_MAX_ITERATIONS_NUM: isServer ? process.env.NEXT_PUBLIC_MAX_ITERATIONS_NUM : getRuntimeEnvFromBody('maxIterationsNum'),
-    NEXT_PUBLIC_MAX_PARALLEL_LIMIT: isServer ? process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT : getRuntimeEnvFromBody('maxParallelLimit'),
-    NEXT_PUBLIC_MAX_TOOLS_NUM: isServer ? process.env.NEXT_PUBLIC_MAX_TOOLS_NUM : getRuntimeEnvFromBody('maxToolsNum'),
-    NEXT_PUBLIC_MAX_TREE_DEPTH: isServer ? process.env.NEXT_PUBLIC_MAX_TREE_DEPTH : getRuntimeEnvFromBody('maxTreeDepth'),
-    NEXT_PUBLIC_PUBLIC_API_PREFIX: isServer ? process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX : getRuntimeEnvFromBody('publicApiPrefix'),
-    NEXT_PUBLIC_SENTRY_DSN: isServer ? process.env.NEXT_PUBLIC_SENTRY_DSN : getRuntimeEnvFromBody('sentryDsn'),
-    NEXT_PUBLIC_SITE_ABOUT: isServer ? process.env.NEXT_PUBLIC_SITE_ABOUT : getRuntimeEnvFromBody('siteAbout'),
-    NEXT_PUBLIC_SUPPORT_MAIL_LOGIN: isServer ? process.env.NEXT_PUBLIC_SUPPORT_MAIL_LOGIN : getRuntimeEnvFromBody('supportMailLogin'),
-    NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS: isServer ? process.env.NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS : getRuntimeEnvFromBody('textGenerationTimeoutMs'),
-    NEXT_PUBLIC_TOP_K_MAX_VALUE: isServer ? process.env.NEXT_PUBLIC_TOP_K_MAX_VALUE : getRuntimeEnvFromBody('topKMaxValue'),
-    NEXT_PUBLIC_UPLOAD_IMAGE_AS_ICON: isServer ? process.env.NEXT_PUBLIC_UPLOAD_IMAGE_AS_ICON : getRuntimeEnvFromBody('uploadImageAsIcon'),
-    NEXT_PUBLIC_WEB_PREFIX: isServer ? process.env.NEXT_PUBLIC_WEB_PREFIX : getRuntimeEnvFromBody('webPrefix'),
-    NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL: isServer ? process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL : getRuntimeEnvFromBody('zendeskFieldIdEmail'),
-    NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT: isServer ? process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT : getRuntimeEnvFromBody('zendeskFieldIdEnvironment'),
-    NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN: isServer ? process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN : getRuntimeEnvFromBody('zendeskFieldIdPlan'),
-    NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION: isServer ? process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION : getRuntimeEnvFromBody('zendeskFieldIdVersion'),
-    NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID: isServer ? process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID : getRuntimeEnvFromBody('zendeskFieldIdWorkspaceId'),
-    NEXT_PUBLIC_ZENDESK_WIDGET_KEY: isServer ? process.env.NEXT_PUBLIC_ZENDESK_WIDGET_KEY : getRuntimeEnvFromBody('zendeskWidgetKey'),
-  },
-  emptyStringAsUndefined: true,
-})
-
-type ClientEnvKey = keyof typeof clientSchema
-type DatasetKey = CamelCase<Replace<ClientEnvKey, typeof CLIENT_ENV_PREFIX>>
-
-/**
- * Browser-only function to get runtime env value from HTML body dataset.
- */
-function getRuntimeEnvFromBody(key: DatasetKey) {
-  if (typeof window === 'undefined') {
-    throw new TypeError('getRuntimeEnvFromBody can only be called in the browser')
-  }
-
-  const value = document.body.dataset[key]
-  return value || undefined
-}
-
-/**
- * Server-only function to get dataset map for embedding into the HTML body.
- */
-export function getDatasetMap() {
-  if (isClient) {
-    throw new TypeError('getDatasetMap can only be called on the server')
-  }
-  return ObjectFromEntries(
-    ObjectKeys(clientSchema)
-      .map(envKey => [
-        concat('data-', kebabCase(slice(envKey, length(CLIENT_ENV_PREFIX)))),
-        env[envKey],
-      ]),
-  )
-}

web/eslint-suppressions.json

@@ -2512,6 +2512,11 @@
       "count": 1
     }
   },
+  "app/components/base/param-item/top-k-item.tsx": {
+    "unicorn/prefer-number-properties": {
+      "count": 1
+    }
+  },
   "app/components/base/portal-to-follow-elem/index.tsx": {
     "react-refresh/only-export-components": {
       "count": 2
@@ -2997,11 +3002,6 @@
       "count": 1
     }
   },
-  "app/components/billing/pricing/plans/cloud-plan-item/index.spec.tsx": {
-    "test/prefer-hooks-in-order": {
-      "count": 1
-    }
-  },
   "app/components/billing/pricing/plans/cloud-plan-item/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 6
@@ -3817,6 +3817,14 @@
       "count": 3
     }
   },
+  "app/components/datasets/documents/detail/metadata/index.tsx": {
+    "react-hooks-extra/no-direct-set-state-in-use-effect": {
+      "count": 4
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
   "app/components/datasets/documents/detail/new-segment.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 3
@@ -5651,12 +5659,10 @@
   },
   "app/components/rag-pipeline/components/update-dsl-modal.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/rag-pipeline/components/version-mismatch-modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
+      "count": 5
+    },
+    "ts/no-explicit-any": {
+      "count": 1
     }
   },
   "app/components/rag-pipeline/hooks/use-DSL.ts": {
@@ -6800,6 +6806,12 @@
     }
   },
   "app/components/workflow/nodes/_base/node.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 5
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -7255,6 +7267,9 @@
   "app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
+    },
+    "unicorn/prefer-number-properties": {
+      "count": 1
     }
   },
   "app/components/workflow/nodes/knowledge-base/components/retrieval-setting/type.ts": {
@@ -8570,6 +8585,11 @@
       "count": 7
     }
   },
+  "app/install/installForm.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
   "app/reset-password/check-code/page.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 4

web/eslint.config.mjs

@@ -7,10 +7,6 @@ import sonar from 'eslint-plugin-sonarjs'
 import storybook from 'eslint-plugin-storybook'
 import dify from './eslint-rules/index.js'
 
-// Enable Tailwind CSS IntelliSense mode for ESLint runs
-// See: tailwind-css-plugin.ts
-process.env.TAILWIND_MODE ??= 'ESLINT'
-
 export default antfu(
   {
     react: {

web/next.config.ts

@@ -1,9 +1,10 @@
 import type { NextConfig } from 'next'
+import process from 'node:process'
+import withBundleAnalyzerInit from '@next/bundle-analyzer'
 import createMDX from '@next/mdx'
 import { codeInspectorPlugin } from 'code-inspector-plugin'
-import { env } from './env'
 
-const isDev = env.NODE_ENV === 'development'
+const isDev = process.env.NODE_ENV === 'development'
 const withMDX = createMDX({
   extension: /\.mdx?$/,
   options: {
@@ -16,17 +17,20 @@ const withMDX = createMDX({
     // providerImportSource: "@mdx-js/react",
   },
 })
+const withBundleAnalyzer = withBundleAnalyzerInit({
+  enabled: process.env.ANALYZE === 'true',
+})
 
 // the default url to prevent parse url error when running jest
-const hasSetWebPrefix = env.NEXT_PUBLIC_WEB_PREFIX
-const port = env.PORT
+const hasSetWebPrefix = process.env.NEXT_PUBLIC_WEB_PREFIX
+const port = process.env.PORT || 3000
 const locImageURLs = !hasSetWebPrefix ? [new URL(`http://localhost:${port}/**`), new URL(`http://127.0.0.1:${port}/**`)] : []
-const remoteImageURLs = ([hasSetWebPrefix ? new URL(`${env.NEXT_PUBLIC_WEB_PREFIX}/**`) : '', ...locImageURLs].filter(item => !!item)) as URL[]
+const remoteImageURLs = ([hasSetWebPrefix ? new URL(`${process.env.NEXT_PUBLIC_WEB_PREFIX}/**`) : '', ...locImageURLs].filter(item => !!item)) as URL[]
 
 const nextConfig: NextConfig = {
-  basePath: env.NEXT_PUBLIC_BASE_PATH,
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
   serverExternalPackages: ['esbuild'],
-  transpilePackages: ['@t3-oss/env-core', '@t3-oss/env-nextjs', 'echarts', 'zrender'],
+  transpilePackages: ['echarts', 'zrender'],
   turbopack: {
     rules: codeInspectorPlugin({
       bundler: 'turbopack',
@@ -68,4 +72,4 @@ const nextConfig: NextConfig = {
   },
 }
 
-export default withMDX(nextConfig)
+export default withBundleAnalyzer(withMDX(nextConfig))

web/package.json

@@ -54,7 +54,7 @@
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "preinstall": "npx only-allow pnpm",
-    "analyze": "next experimental-analyze",
+    "analyze": "ANALYZE=true pnpm build",
     "knip": "knip"
   },
   "dependencies": {
@@ -82,7 +82,6 @@
     "@remixicon/react": "4.7.0",
     "@sentry/react": "8.55.0",
     "@svgdotjs/svg.js": "3.2.5",
-    "@t3-oss/env-nextjs": "0.13.10",
     "@tailwindcss/typography": "0.5.19",
     "@tanstack/react-form": "1.23.7",
     "@tanstack/react-query": "5.90.5",
@@ -160,7 +159,7 @@
     "ufo": "1.6.3",
     "use-context-selector": "2.0.0",
     "uuid": "10.0.0",
-    "zod": "4.3.6",
+    "zod": "3.25.76",
     "zundo": "2.3.0",
     "zustand": "5.0.9"
   },
@@ -173,6 +172,7 @@
     "@iconify-json/ri": "1.2.9",
     "@mdx-js/loader": "3.1.1",
     "@mdx-js/react": "3.1.1",
+    "@next/bundle-analyzer": "16.1.5",
     "@next/eslint-plugin-next": "16.1.6",
     "@next/mdx": "16.1.5",
     "@rgrove/parse-xml": "4.2.0",

web/pnpm-lock.yaml

@@ -125,9 +125,6 @@ importers:
       '@svgdotjs/svg.js':
         specifier: 3.2.5
         version: 3.2.5
-      '@t3-oss/env-nextjs':
-        specifier: 0.13.10
-        version: 0.13.10(typescript@5.9.3)(valibot@1.2.0(typescript@5.9.3))(zod@4.3.6)
       '@tailwindcss/typography':
         specifier: 0.5.19
         version: 0.5.19(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))
@@ -360,8 +357,8 @@ importers:
         specifier: 10.0.0
         version: 10.0.0
       zod:
-        specifier: 4.3.6
-        version: 4.3.6
+        specifier: 3.25.76
+        version: 3.25.76
       zundo:
         specifier: 2.3.0
         version: 2.3.0(zustand@5.0.9(@types/react@19.2.9)(immer@11.1.0)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4)))
@@ -393,6 +390,9 @@ importers:
       '@mdx-js/react':
         specifier: 3.1.1
         version: 3.1.1(@types/react@19.2.9)(react@19.2.4)
+      '@next/bundle-analyzer':
+        specifier: 16.1.5
+        version: 16.1.5
       '@next/eslint-plugin-next':
         specifier: 16.1.6
         version: 16.1.6
@@ -1767,6 +1767,9 @@ packages:
   '@neoconfetti/react@1.0.0':
     resolution: {integrity: sha512-klcSooChXXOzIm+SE5IISIAn3bYzYfPjbX7D7HoqZL84oAfgREeSg5vSIaSFH+DaGzzvImTyWe1OyrJ67vik4A==}
 
+  '@next/bundle-analyzer@16.1.5':
+    resolution: {integrity: sha512-/iPMrxbvgMZQX1huKZu+rnh7bxo2m5/o0PpOWLMRcAlQ2METpZ7/a3SP/aXFePZAyrQpgpndTldXW3LxPXM/KA==}
+
   '@next/env@16.0.0':
     resolution: {integrity: sha512-s5j2iFGp38QsG1LWRQaE2iUY3h1jc014/melHFfLdrsMJPqxqDQwWNwyQTcNoUSGZlCVZuM7t7JDMmSyRilsnA==}
 
@@ -2856,40 +2859,6 @@ packages:
   '@swc/types@0.1.25':
     resolution: {integrity: sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g==}
 
-  '@t3-oss/env-core@0.13.10':
-    resolution: {integrity: sha512-NNFfdlJ+HmPHkLi2HKy7nwuat9SIYOxei9K10lO2YlcSObDILY7mHZNSHsieIM3A0/5OOzw/P/b+yLvPdaG52g==}
-    peerDependencies:
-      arktype: ^2.1.0
-      typescript: '>=5.0.0'
-      valibot: ^1.0.0-beta.7 || ^1.0.0
-      zod: ^3.24.0 || ^4.0.0
-    peerDependenciesMeta:
-      arktype:
-        optional: true
-      typescript:
-        optional: true
-      valibot:
-        optional: true
-      zod:
-        optional: true
-
-  '@t3-oss/env-nextjs@0.13.10':
-    resolution: {integrity: sha512-JfSA2WXOnvcc/uMdp31paMsfbYhhdvLLRxlwvrnlPE9bwM/n0Z+Qb9xRv48nPpvfMhOrkrTYw1I5Yc06WIKBJQ==}
-    peerDependencies:
-      arktype: ^2.1.0
-      typescript: '>=5.0.0'
-      valibot: ^1.0.0-beta.7 || ^1.0.0
-      zod: ^3.24.0 || ^4.0.0
-    peerDependenciesMeta:
-      arktype:
-        optional: true
-      typescript:
-        optional: true
-      valibot:
-        optional: true
-      zod:
-        optional: true
-
   '@tailwindcss/typography@0.5.19':
     resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
     peerDependencies:
@@ -3660,6 +3629,10 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
+    engines: {node: '>=0.4.0'}
+
   acorn@8.15.0:
     resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
     engines: {node: '>=0.4.0'}
@@ -4319,6 +4292,9 @@ packages:
   dayjs@1.11.19:
     resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
 
+  debounce@1.2.1:
+    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -4431,6 +4407,9 @@ packages:
     resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
     engines: {node: '>=12'}
 
+  duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+
   echarts-for-react@3.0.5:
     resolution: {integrity: sha512-YpEI5Ty7O/2nvCfQ7ybNa+S90DwE8KYZWacGvJW4luUqywP7qStQ+pxDlYOmr4jGDu10mhEkiAuMKcUlT4W5vg==}
     peerDependencies:
@@ -5100,6 +5079,10 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  gzip-size@6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
+    engines: {node: '>=10'}
+
   hachure-fill@0.5.2:
     resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
 
@@ -5376,6 +5359,10 @@ packages:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
@@ -6108,6 +6095,10 @@ packages:
   openapi-types@12.1.3:
     resolution: {integrity: sha512-N4YtSYJqghVu4iek2ZUvcN/0aqH1kRDuNqzcycDxhOUpg7GdvLa2F3DgS6yBNhInhv2r/6I0Flkn7CqL8+nIcw==}
 
+  opener@1.5.2:
+    resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==}
+    hasBin: true
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -6849,6 +6840,10 @@ packages:
   simple-swizzle@0.2.4:
     resolution: {integrity: sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==}
 
+  sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+
   sirv@3.0.2:
     resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
     engines: {node: '>=18'}
@@ -7561,6 +7556,11 @@ packages:
     resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
     engines: {node: '>=20'}
 
+  webpack-bundle-analyzer@4.10.1:
+    resolution: {integrity: sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==}
+    engines: {node: '>= 10.13.0'}
+    hasBin: true
+
   webpack-sources@3.3.3:
     resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
     engines: {node: '>=10.13.0'}
@@ -7627,6 +7627,18 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  ws@7.5.10:
+    resolution: {integrity: sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==}
+    engines: {node: '>=8.3.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   ws@8.19.0:
     resolution: {integrity: sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==}
     engines: {node: '>=10.0.0'}
@@ -7697,6 +7709,9 @@ packages:
     peerDependencies:
       zod: ^3.25.0 || ^4.0.0
 
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
   zod@4.3.6:
     resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
 
@@ -8402,7 +8417,7 @@ snapshots:
       eslint: 9.39.2(jiti@1.21.7)
       ts-pattern: 5.9.0
       typescript: 5.9.3
-      zod: 4.3.6
+      zod: 3.25.76
     transitivePeerDependencies:
       - supports-color
 
@@ -9134,6 +9149,13 @@ snapshots:
 
   '@neoconfetti/react@1.0.0': {}
 
+  '@next/bundle-analyzer@16.1.5':
+    dependencies:
+      webpack-bundle-analyzer: 4.10.1
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   '@next/env@16.0.0': {}
 
   '@next/env@16.1.5': {}
@@ -9434,8 +9456,7 @@ snapshots:
 
   '@pkgr/core@0.2.9': {}
 
-  '@polka/url@1.0.0-next.29':
-    optional: true
+  '@polka/url@1.0.0-next.29': {}
 
   '@preact/signals-core@1.12.2': {}
 
@@ -10150,20 +10171,6 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
-  '@t3-oss/env-core@0.13.10(typescript@5.9.3)(valibot@1.2.0(typescript@5.9.3))(zod@4.3.6)':
-    optionalDependencies:
-      typescript: 5.9.3
-      valibot: 1.2.0(typescript@5.9.3)
-      zod: 4.3.6
-
-  '@t3-oss/env-nextjs@0.13.10(typescript@5.9.3)(valibot@1.2.0(typescript@5.9.3))(zod@4.3.6)':
-    dependencies:
-      '@t3-oss/env-core': 0.13.10(typescript@5.9.3)(valibot@1.2.0(typescript@5.9.3))(zod@4.3.6)
-    optionalDependencies:
-      typescript: 5.9.3
-      valibot: 1.2.0(typescript@5.9.3)
-      zod: 4.3.6
-
   '@tailwindcss/typography@0.5.19(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       postcss-selector-parser: 6.0.10
@@ -11169,6 +11176,10 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
+  acorn-walk@8.3.4:
+    dependencies:
+      acorn: 8.15.0
+
   acorn@8.15.0: {}
 
   agent-base@7.1.4: {}
@@ -11846,6 +11857,8 @@ snapshots:
 
   dayjs@1.11.19: {}
 
+  debounce@1.2.1: {}
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
@@ -11939,6 +11952,8 @@ snapshots:
 
   dotenv@16.6.1: {}
 
+  duplexer@0.1.2: {}
+
   echarts-for-react@3.0.5(echarts@5.6.0)(react@19.2.4):
     dependencies:
       echarts: 5.6.0
@@ -12242,8 +12257,8 @@ snapshots:
       '@babel/parser': 7.28.6
       eslint: 9.39.2(jiti@1.21.7)
       hermes-parser: 0.25.1
-      zod: 4.3.6
-      zod-validation-error: 4.0.2(zod@4.3.6)
+      zod: 3.25.76
+      zod-validation-error: 4.0.2(zod@3.25.76)
     transitivePeerDependencies:
       - supports-color
 
@@ -12807,6 +12822,10 @@ snapshots:
 
   graphemer@1.4.0: {}
 
+  gzip-size@6.0.0:
+    dependencies:
+      duplexer: 0.1.2
+
   hachure-fill@0.5.2: {}
 
   has-flag@4.0.0: {}
@@ -13139,6 +13158,8 @@ snapshots:
 
   is-plain-obj@4.1.0: {}
 
+  is-plain-object@5.0.0: {}
+
   is-potential-custom-element-name@1.0.1: {}
 
   is-stream@3.0.0: {}
@@ -14032,8 +14053,7 @@ snapshots:
 
   mri@1.2.0: {}
 
-  mrmime@2.0.1:
-    optional: true
+  mrmime@2.0.1: {}
 
   ms@2.1.3: {}
 
@@ -14153,6 +14173,8 @@ snapshots:
 
   openapi-types@12.1.3: {}
 
+  opener@1.5.2: {}
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -15094,6 +15116,12 @@ snapshots:
     dependencies:
       is-arrayish: 0.3.4
 
+  sirv@2.0.4:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
   sirv@3.0.2:
     dependencies:
       '@polka/url': 1.0.0-next.29
@@ -15414,8 +15442,7 @@ snapshots:
     dependencies:
       eslint-visitor-keys: 5.0.0
 
-  totalist@3.0.1:
-    optional: true
+  totalist@3.0.1: {}
 
   tough-cookie@6.0.0:
     dependencies:
@@ -15801,6 +15828,25 @@ snapshots:
 
   webidl-conversions@8.0.1: {}
 
+  webpack-bundle-analyzer@4.10.1:
+    dependencies:
+      '@discoveryjs/json-ext': 0.5.7
+      acorn: 8.15.0
+      acorn-walk: 8.3.4
+      commander: 7.2.0
+      debounce: 1.2.1
+      escape-string-regexp: 4.0.0
+      gzip-size: 6.0.0
+      html-escaper: 2.0.2
+      is-plain-object: 5.0.0
+      opener: 1.5.2
+      picocolors: 1.1.1
+      sirv: 2.0.4
+      ws: 7.5.10
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   webpack-sources@3.3.3:
     optional: true
 
@@ -15889,6 +15935,8 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  ws@7.5.10: {}
+
   ws@8.19.0: {}
 
   wsl-utils@0.1.0:
@@ -15932,9 +15980,11 @@ snapshots:
 
   zen-observable@0.8.15: {}
 
-  zod-validation-error@4.0.2(zod@4.3.6):
+  zod-validation-error@4.0.2(zod@3.25.76):
     dependencies:
-      zod: 4.3.6
+      zod: 3.25.76
+
+  zod@3.25.76: {}
 
   zod@4.3.6: {}
 

web/proxy.ts

@@ -1,14 +1,13 @@
 import type { NextRequest } from 'next/server'
 import { Buffer } from 'node:buffer'
 import { NextResponse } from 'next/server'
-import { env } from '@/env'
 
 const NECESSARY_DOMAIN = '*.sentry.io http://localhost:* http://127.0.0.1:* https://analytics.google.com googletagmanager.com *.googletagmanager.com https://www.google-analytics.com https://api.github.com https://api2.amplitude.com *.amplitude.com'
 
 const wrapResponseWithXFrameOptions = (response: NextResponse, pathname: string) => {
   // prevent clickjacking: https://owasp.org/www-community/attacks/Clickjacking
   // Chatbot page should be allowed to be embedded in iframe. It's a feature
-  if (env.NEXT_PUBLIC_ALLOW_EMBED !== true && !pathname.startsWith('/chat') && !pathname.startsWith('/workflow') && !pathname.startsWith('/completion') && !pathname.startsWith('/webapp-signin'))
+  if (process.env.NEXT_PUBLIC_ALLOW_EMBED !== 'true' && !pathname.startsWith('/chat') && !pathname.startsWith('/workflow') && !pathname.startsWith('/completion') && !pathname.startsWith('/webapp-signin'))
     response.headers.set('X-Frame-Options', 'DENY')
 
   return response
@@ -22,11 +21,11 @@ export function proxy(request: NextRequest) {
     },
   })
 
-  const isWhiteListEnabled = !!env.NEXT_PUBLIC_CSP_WHITELIST && env.NODE_ENV === 'production'
+  const isWhiteListEnabled = !!process.env.NEXT_PUBLIC_CSP_WHITELIST && process.env.NODE_ENV === 'production'
   if (!isWhiteListEnabled)
     return wrapResponseWithXFrameOptions(response, pathname)
 
-  const whiteList = `${env.NEXT_PUBLIC_CSP_WHITELIST} ${NECESSARY_DOMAIN}`
+  const whiteList = `${process.env.NEXT_PUBLIC_CSP_WHITELIST} ${NECESSARY_DOMAIN}`
   const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
   const csp = `'nonce-${nonce}'`
 

web/service/client.spec.ts

@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 const loadGetBaseURL = async (isClientValue: boolean) => {
   vi.resetModules()
-  vi.doMock('@/utils/client', () => ({ isClient: isClientValue, isServer: !isClientValue }))
+  vi.doMock('@/utils/client', () => ({ isClient: isClientValue }))
   const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
   // eslint-disable-next-line next/no-assign-module-variable
   const module = await import('./client')

web/service/fetch.ts

@@ -240,30 +240,4 @@ async function base<T>(url: string, options: FetchOptionType = {}, otherOptions:
   return await res.json() as T
 }
 
-/**
- * Fire-and-forget POST with `keepalive: true` for use during page unload.
- * Includes credentials, Authorization (if available), and CSRF header
- * so the request is authenticated, matching the headers sent by the
- * standard `base()` fetch wrapper.
- */
-export function postWithKeepalive(url: string, body: Record<string, unknown>): void {
-  const headers: Record<string, string> = {
-    'Content-Type': ContentType.json,
-    [CSRF_HEADER_NAME]: Cookies.get(CSRF_COOKIE_NAME()) || '',
-  }
-
-  // Add Authorization header if an access token is available
-  const accessToken = getWebAppAccessToken()
-  if (accessToken)
-    headers.Authorization = `Bearer ${accessToken}`
-
-  globalThis.fetch(url, {
-    method: 'POST',
-    keepalive: true,
-    credentials: 'include',
-    headers,
-    body: JSON.stringify(body),
-  }).catch(() => {})
-}
-
 export { base }

web/tailwind-common-config.ts

@@ -182,11 +182,6 @@ const config = {
     }),
     cssAsPlugin([
       path.resolve(_dirname, './app/styles/globals.css'),
-      path.resolve(_dirname, './app/components/base/action-button/index.css'),
-      path.resolve(_dirname, './app/components/base/badge/index.css'),
-      path.resolve(_dirname, './app/components/base/button/index.css'),
-      path.resolve(_dirname, './app/components/base/modal/index.css'),
-      path.resolve(_dirname, './app/components/base/premium-badge/index.css'),
     ]),
   ],
   // https://github.com/tailwindlabs/tailwindcss/discussions/5969

web/tailwind-css-plugin.ts

@@ -7,11 +7,9 @@ import { parse } from 'postcss'
 import { objectify } from 'postcss-js'
 
 export const cssAsPlugin: (cssPath: string[]) => PluginCreator = (cssPath: string[]) => {
-  const isTailwindCSSIntelliSenseMode = 'TAILWIND_MODE' in process.env
-  if (!isTailwindCSSIntelliSenseMode) {
+  if (process.env.NODE_ENV === 'production') {
     return () => {}
   }
-
   return ({ addUtilities, addComponents, addBase }) => {
     const jssList = cssPath.map(p => objectify(parse(readFileSync(p, 'utf8'))))
 

web/types/feature.ts

@@ -107,3 +107,37 @@ export const defaultSystemFeatures: SystemFeatures = {
   enable_trial_app: false,
   enable_explore_banner: false,
 }
+
+export enum DatasetAttr {
+  DATA_API_PREFIX = 'data-api-prefix',
+  DATA_PUBLIC_API_PREFIX = 'data-public-api-prefix',
+  DATA_MARKETPLACE_API_PREFIX = 'data-marketplace-api-prefix',
+  DATA_MARKETPLACE_URL_PREFIX = 'data-marketplace-url-prefix',
+  DATA_PUBLIC_EDITION = 'data-public-edition',
+  DATA_PUBLIC_AMPLITUDE_API_KEY = 'data-public-amplitude-api-key',
+  DATA_PUBLIC_COOKIE_DOMAIN = 'data-public-cookie-domain',
+  DATA_PUBLIC_SUPPORT_MAIL_LOGIN = 'data-public-support-mail-login',
+  DATA_PUBLIC_SENTRY_DSN = 'data-public-sentry-dsn',
+  DATA_PUBLIC_MAINTENANCE_NOTICE = 'data-public-maintenance-notice',
+  DATA_PUBLIC_SITE_ABOUT = 'data-public-site-about',
+  DATA_PUBLIC_TEXT_GENERATION_TIMEOUT_MS = 'data-public-text-generation-timeout-ms',
+  DATA_PUBLIC_MAX_TOOLS_NUM = 'data-public-max-tools-num',
+  DATA_PUBLIC_MAX_PARALLEL_LIMIT = 'data-public-max-parallel-limit',
+  DATA_PUBLIC_TOP_K_MAX_VALUE = 'data-public-top-k-max-value',
+  DATA_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH = 'data-public-indexing-max-segmentation-tokens-length',
+  DATA_PUBLIC_LOOP_NODE_MAX_COUNT = 'data-public-loop-node-max-count',
+  DATA_PUBLIC_MAX_ITERATIONS_NUM = 'data-public-max-iterations-num',
+  DATA_PUBLIC_MAX_TREE_DEPTH = 'data-public-max-tree-depth',
+  DATA_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME = 'data-public-allow-unsafe-data-scheme',
+  DATA_PUBLIC_ENABLE_WEBSITE_JINAREADER = 'data-public-enable-website-jinareader',
+  DATA_PUBLIC_ENABLE_WEBSITE_FIRECRAWL = 'data-public-enable-website-firecrawl',
+  DATA_PUBLIC_ENABLE_WEBSITE_WATERCRAWL = 'data-public-enable-website-watercrawl',
+  DATA_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX = 'data-public-enable-single-dollar-latex',
+  NEXT_PUBLIC_ZENDESK_WIDGET_KEY = 'next-public-zendesk-widget-key',
+  NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT = 'next-public-zendesk-field-id-environment',
+  NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION = 'next-public-zendesk-field-id-version',
+  NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL = 'next-public-zendesk-field-id-email',
+  NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID = 'next-public-zendesk-field-id-workspace-id',
+  NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN = 'next-public-zendesk-field-id-plan',
+  DATA_PUBLIC_BATCH_CONCURRENCY = 'data-public-batch-concurrency',
+}

web/utils/var.ts

@@ -8,7 +8,6 @@ import {
 } from '@/app/components/base/prompt-editor/constants'
 import { InputVarType } from '@/app/components/workflow/types'
 import { getMaxVarNameLength, MARKETPLACE_URL_PREFIX, MAX_VAR_KEY_LENGTH, VAR_ITEM_TEMPLATE, VAR_ITEM_TEMPLATE_IN_WORKFLOW } from '@/config'
-import { env } from '@/env'
 
 const otherAllowedRegex = /^\w+$/
 
@@ -130,7 +129,7 @@ export const getVars = (value: string) => {
 
 // Set the value of basePath
 // example: /dify
-export const basePath = env.NEXT_PUBLIC_BASE_PATH
+export const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
 
 export function getMarketplaceUrl(path: string, params?: Record<string, string | undefined>) {
   const searchParams = new URLSearchParams({ source: encodeURIComponent(window.location.origin) })

web/utils/zod.spec.ts

@@ -0,0 +1,173 @@
+import { z, ZodError } from 'zod'
+
+describe('Zod Features', () => {
+  it('should support string', () => {
+    const stringSchema = z.string()
+    const numberLikeStringSchema = z.coerce.string() // 12 would be converted to '12'
+    const stringSchemaWithError = z.string({
+      required_error: 'Name is required',
+      invalid_type_error: 'Invalid name type, expected string',
+    })
+
+    const urlSchema = z.string().url()
+    const uuidSchema = z.string().uuid()
+
+    expect(stringSchema.parse('hello')).toBe('hello')
+    expect(() => stringSchema.parse(12)).toThrow()
+    expect(numberLikeStringSchema.parse('12')).toBe('12')
+    expect(numberLikeStringSchema.parse(12)).toBe('12')
+    expect(() => stringSchemaWithError.parse(undefined)).toThrow('Name is required')
+    expect(() => stringSchemaWithError.parse(12)).toThrow('Invalid name type, expected string')
+
+    expect(urlSchema.parse('https://dify.ai')).toBe('https://dify.ai')
+    expect(uuidSchema.parse('123e4567-e89b-12d3-a456-426614174000')).toBe('123e4567-e89b-12d3-a456-426614174000')
+  })
+
+  it('should support enum', () => {
+    enum JobStatus {
+      waiting = 'waiting',
+      processing = 'processing',
+      completed = 'completed',
+    }
+    expect(z.nativeEnum(JobStatus).parse(JobStatus.waiting)).toBe(JobStatus.waiting)
+    expect(z.nativeEnum(JobStatus).parse('completed')).toBe('completed')
+    expect(() => z.nativeEnum(JobStatus).parse('invalid')).toThrow()
+  })
+
+  it('should support number', () => {
+    const numberSchema = z.number()
+    const numberWithMin = z.number().gt(0) // alias min
+    const numberWithMinEqual = z.number().gte(0)
+    const numberWithMax = z.number().lt(100) // alias max
+
+    expect(numberSchema.parse(123)).toBe(123)
+    expect(numberWithMin.parse(50)).toBe(50)
+    expect(numberWithMinEqual.parse(0)).toBe(0)
+    expect(() => numberWithMin.parse(-1)).toThrow()
+    expect(numberWithMax.parse(50)).toBe(50)
+    expect(() => numberWithMax.parse(101)).toThrow()
+  })
+
+  it('should support boolean', () => {
+    const booleanSchema = z.boolean()
+    expect(booleanSchema.parse(true)).toBe(true)
+    expect(booleanSchema.parse(false)).toBe(false)
+    expect(() => booleanSchema.parse('true')).toThrow()
+  })
+
+  it('should support date', () => {
+    const dateSchema = z.date()
+    expect(dateSchema.parse(new Date('2023-01-01'))).toEqual(new Date('2023-01-01'))
+  })
+
+  it('should support object', () => {
+    const userSchema = z.object({
+      id: z.union([z.string(), z.number()]),
+      name: z.string(),
+      email: z.string().email(),
+      age: z.number().min(0).max(120).optional(),
+    })
+
+    type User = z.infer<typeof userSchema>
+
+    const validUser: User = {
+      id: 1,
+      name: 'John',
+      email: 'john@example.com',
+      age: 30,
+    }
+
+    expect(userSchema.parse(validUser)).toEqual(validUser)
+  })
+
+  it('should support object optional field', () => {
+    const userSchema = z.object({
+      name: z.string(),
+      optionalField: z.optional(z.string()),
+    })
+    type User = z.infer<typeof userSchema>
+
+    const user: User = {
+      name: 'John',
+    }
+    const userWithOptionalField: User = {
+      name: 'John',
+      optionalField: 'optional',
+    }
+    expect(userSchema.safeParse(user).success).toEqual(true)
+    expect(userSchema.safeParse(userWithOptionalField).success).toEqual(true)
+  })
+
+  it('should support object intersection', () => {
+    const Person = z.object({
+      name: z.string(),
+    })
+
+    const Employee = z.object({
+      role: z.string(),
+    })
+
+    const EmployedPerson = z.intersection(Person, Employee)
+    const validEmployedPerson = {
+      name: 'John',
+      role: 'Developer',
+    }
+    expect(EmployedPerson.parse(validEmployedPerson)).toEqual(validEmployedPerson)
+  })
+
+  it('should support record', () => {
+    const recordSchema = z.record(z.string(), z.number())
+    const validRecord = {
+      a: 1,
+      b: 2,
+    }
+    expect(recordSchema.parse(validRecord)).toEqual(validRecord)
+  })
+
+  it('should support array', () => {
+    const numbersSchema = z.array(z.number())
+    const stringArraySchema = z.string().array()
+
+    expect(numbersSchema.parse([1, 2, 3])).toEqual([1, 2, 3])
+    expect(stringArraySchema.parse(['a', 'b', 'c'])).toEqual(['a', 'b', 'c'])
+  })
+
+  it('should support promise', async () => {
+    const promiseSchema = z.promise(z.string())
+    const validPromise = Promise.resolve('success')
+
+    await expect(promiseSchema.parse(validPromise)).resolves.toBe('success')
+  })
+
+  it('should support unions', () => {
+    const unionSchema = z.union([z.string(), z.number()])
+
+    expect(unionSchema.parse('success')).toBe('success')
+    expect(unionSchema.parse(404)).toBe(404)
+  })
+
+  it('should support functions', () => {
+    const functionSchema = z.function().args(z.string(), z.number(), z.optional(z.string())).returns(z.number())
+    const validFunction = (name: string, age: number, _optional?: string): number => {
+      return age
+    }
+    expect(functionSchema.safeParse(validFunction).success).toEqual(true)
+  })
+
+  it('should support undefined, null, any, and void', () => {
+    const undefinedSchema = z.undefined()
+    const nullSchema = z.null()
+    const anySchema = z.any()
+
+    expect(undefinedSchema.parse(undefined)).toBeUndefined()
+    expect(nullSchema.parse(null)).toBeNull()
+    expect(anySchema.parse('anything')).toBe('anything')
+    expect(anySchema.parse(3)).toBe(3)
+  })
+
+  it('should safeParse would not throw', () => {
+    expect(z.string().safeParse('abc').success).toBe(true)
+    expect(z.string().safeParse(123).success).toBe(false)
+    expect(z.string().safeParse(123).error).toBeInstanceOf(ZodError)
+  })
+})