chore: add random sleep for workflow cleanup

.codex/skills/component-refactoring

@@ -0,0 +1 @@
+../../.agents/skills/component-refactoring

.codex/skills/frontend-code-review

@@ -0,0 +1 @@
+../../.agents/skills/frontend-code-review

.codex/skills/frontend-testing

@@ -0,0 +1 @@
+../../.agents/skills/frontend-testing

.codex/skills/orpc-contract-first

@@ -0,0 +1 @@
+../../.agents/skills/orpc-contract-first

.github/workflows/autofix.yml

@@ -79,6 +79,29 @@ jobs:
           find . -name "*.py" -type f -exec sed -i.bak -E 's/"([^"]+)" \| None/Optional["\1"]/g; s/'"'"'([^'"'"']+)'"'"' \| None/Optional['"'"'\1'"'"']/g' {} \;
           find . -name "*.py.bak" -type f -delete
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          package_json_file: web/package.json
+          run_install: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: pnpm
+          cache-dependency-path: ./web/pnpm-lock.yaml
+
+      - name: Install web dependencies
+        run: |
+          cd web
+          pnpm install --frozen-lockfile
+
+      - name: ESLint autofix
+        run: |
+          cd web
+          pnpm lint:fix || true
+
       # mdformat breaks YAML front matter in markdown files. Add --exclude for directories containing YAML front matter.
       - name: mdformat
         run: |

api/.env.example

@@ -715,5 +715,6 @@ ANNOTATION_IMPORT_MAX_CONCURRENT=5
 # Sandbox expired records clean configuration
 SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD=21
 SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE=1000
+SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL=200
 SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS=30
 SANDBOX_EXPIRED_RECORDS_CLEAN_TASK_LOCK_TTL=90000

api/.importlinter

@@ -102,8 +102,6 @@ forbidden_modules =
     core.trigger
     core.variables
 ignore_imports =
-    core.workflow.nodes.agent.agent_node -> core.db.session_factory
-    core.workflow.nodes.agent.agent_node -> models.tools
     core.workflow.nodes.loop.loop_node -> core.app.workflow.node_factory
     core.workflow.graph_engine.command_channels.redis_channel -> extensions.ext_redis
     core.workflow.workflow_entry -> core.app.workflow.layers.observability
@@ -138,6 +136,7 @@ ignore_imports =
     core.workflow.nodes.llm.llm_utils -> models.provider
     core.workflow.nodes.llm.llm_utils -> services.credit_pool_service
     core.workflow.nodes.llm.node -> core.tools.signature
+    core.workflow.nodes.template_transform.template_transform_node -> configs
     core.workflow.nodes.tool.tool_node -> core.callback_handler.workflow_tool_callback_handler
     core.workflow.nodes.tool.tool_node -> core.tools.tool_engine
     core.workflow.nodes.tool.tool_node -> core.tools.tool_manager

api/commands.py

@@ -739,10 +739,8 @@ def upgrade_db():
 
             click.echo(click.style("Database migration successful!", fg="green"))
 
-        except Exception as e:
+        except Exception:
             logger.exception("Failed to execute database migration")
-            click.echo(click.style(f"Database migration failed: {e}", fg="red"))
-            raise SystemExit(1)
         finally:
             lock.release()
     else:

api/configs/feature/__init__.py

@@ -1309,6 +1309,10 @@ class SandboxExpiredRecordsCleanConfig(BaseSettings):
         description="Maximum number of records to process in each batch",
         default=1000,
     )
+    SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL: PositiveInt = Field(
+        description="Maximum interval in milliseconds between batches",
+        default=200,
+    )
     SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS: PositiveInt = Field(
         description="Retention days for sandbox expired workflow_run records and message records",
         default=30,

api/controllers/console/app/app.py

@@ -1,4 +1,3 @@
-import logging
 import uuid
 from datetime import datetime
 from typing import Any, Literal, TypeAlias
@@ -55,8 +54,6 @@ ALLOW_CREATE_APP_MODES = ["chat", "agent-chat", "advanced-chat", "workflow", "co
 
 register_enum_models(console_ns, IconType)
 
-_logger = logging.getLogger(__name__)
-
 
 class AppListQuery(BaseModel):
     page: int = Field(default=1, ge=1, le=99999, description="Page number (1-99999)")
@@ -502,7 +499,6 @@ class AppListApi(Resource):
                     select(Workflow).where(
                         Workflow.version == Workflow.VERSION_DRAFT,
                         Workflow.app_id.in_(workflow_capable_app_ids),
-                        Workflow.tenant_id == current_tenant_id,
                     )
                 )
                 .scalars()
@@ -514,14 +510,12 @@ class AppListApi(Resource):
                 NodeType.TRIGGER_PLUGIN,
             }
             for workflow in draft_workflows:
-                node_id = None
                 try:
-                    for node_id, node_data in workflow.walk_nodes():
+                    for _, node_data in workflow.walk_nodes():
                         if node_data.get("type") in trigger_node_types:
                             draft_trigger_app_ids.add(str(workflow.app_id))
                             break
                 except Exception:
-                    _logger.exception("error while walking nodes, workflow_id=%s, node_id=%s", workflow.id, node_id)
                     continue
 
         for app in app_pagination.items:

api/core/app/workflow/node_factory.py

@@ -47,7 +47,6 @@ class DifyNodeFactory(NodeFactory):
         code_providers: Sequence[type[CodeNodeProvider]] | None = None,
         code_limits: CodeNodeLimits | None = None,
         template_renderer: Jinja2TemplateRenderer | None = None,
-        template_transform_max_output_length: int | None = None,
         http_request_http_client: HttpClientProtocol | None = None,
         http_request_tool_file_manager_factory: Callable[[], ToolFileManager] = ToolFileManager,
         http_request_file_manager: FileManagerProtocol | None = None,
@@ -69,9 +68,6 @@ class DifyNodeFactory(NodeFactory):
             max_object_array_length=dify_config.CODE_MAX_OBJECT_ARRAY_LENGTH,
         )
         self._template_renderer = template_renderer or CodeExecutorJinja2TemplateRenderer()
-        self._template_transform_max_output_length = (
-            template_transform_max_output_length or dify_config.TEMPLATE_TRANSFORM_MAX_LENGTH
-        )
         self._http_request_http_client = http_request_http_client or ssrf_proxy
         self._http_request_tool_file_manager_factory = http_request_tool_file_manager_factory
         self._http_request_file_manager = http_request_file_manager or file_manager
@@ -126,7 +122,6 @@ class DifyNodeFactory(NodeFactory):
                 graph_init_params=self.graph_init_params,
                 graph_runtime_state=self.graph_runtime_state,
                 template_renderer=self._template_renderer,
-                max_output_length=self._template_transform_max_output_length,
             )
 
         if node_type == NodeType.HTTP_REQUEST:

api/core/helper/marketplace.py

@@ -6,8 +6,7 @@ from yarl import URL
 
 from configs import dify_config
 from core.helper.download import download_with_size_limit
-from core.plugin.entities.marketplace import MarketplacePluginDeclaration, MarketplacePluginSnapshot
-from extensions.ext_redis import redis_client
+from core.plugin.entities.marketplace import MarketplacePluginDeclaration
 
 marketplace_api_url = URL(str(dify_config.MARKETPLACE_API_URL))
 logger = logging.getLogger(__name__)
@@ -44,37 +43,28 @@ def batch_fetch_plugin_by_ids(plugin_ids: list[str]) -> list[dict]:
     return data.get("data", {}).get("plugins", [])
 
 
+def batch_fetch_plugin_manifests_ignore_deserialization_error(
+    plugin_ids: list[str],
+) -> Sequence[MarketplacePluginDeclaration]:
+    if len(plugin_ids) == 0:
+        return []
+
+    url = str(marketplace_api_url / "api/v1/plugins/batch")
+    response = httpx.post(url, json={"plugin_ids": plugin_ids}, headers={"X-Dify-Version": dify_config.project.version})
+    response.raise_for_status()
+    result: list[MarketplacePluginDeclaration] = []
+    for plugin in response.json()["data"]["plugins"]:
+        try:
+            result.append(MarketplacePluginDeclaration.model_validate(plugin))
+        except Exception:
+            logger.exception(
+                "Failed to deserialize marketplace plugin manifest for %s", plugin.get("plugin_id", "unknown")
+            )
+
+    return result
+
+
 def record_install_plugin_event(plugin_unique_identifier: str):
     url = str(marketplace_api_url / "api/v1/stats/plugins/install_count")
     response = httpx.post(url, json={"unique_identifier": plugin_unique_identifier})
     response.raise_for_status()
-
-
-def fetch_global_plugin_manifest(cache_key_prefix: str, cache_ttl: int) -> None:
-    """
-    Fetch all plugin manifests from marketplace and cache them in Redis.
-    This should be called once per check cycle to populate the instance-level cache.
-
-    Args:
-        cache_key_prefix: Redis key prefix for caching plugin manifests
-        cache_ttl: Cache TTL in seconds
-
-    Raises:
-        httpx.HTTPError: If the HTTP request fails
-        Exception: If any other error occurs during fetching or caching
-    """
-    url = str(marketplace_api_url / "api/v1/dist/plugins/manifest.json")
-    response = httpx.get(url, headers={"X-Dify-Version": dify_config.project.version}, timeout=30)
-    response.raise_for_status()
-
-    raw_json = response.json()
-    plugins_data = raw_json.get("plugins", [])
-
-    # Parse and cache all plugin snapshots
-    for plugin_data in plugins_data:
-        plugin_snapshot = MarketplacePluginSnapshot.model_validate(plugin_data)
-        redis_client.setex(
-            name=f"{cache_key_prefix}{plugin_snapshot.plugin_id}",
-            time=cache_ttl,
-            value=plugin_snapshot.model_dump_json(),
-        )

api/core/plugin/entities/marketplace.py

@@ -1,4 +1,4 @@
-from pydantic import BaseModel, Field, computed_field, model_validator
+from pydantic import BaseModel, Field, model_validator
 
 from core.model_runtime.entities.provider_entities import ProviderEntity
 from core.plugin.entities.endpoint import EndpointProviderDeclaration
@@ -48,15 +48,3 @@ class MarketplacePluginDeclaration(BaseModel):
         if "tool" in data and not data["tool"]:
             del data["tool"]
         return data
-
-
-class MarketplacePluginSnapshot(BaseModel):
-    org: str
-    name: str
-    latest_version: str
-    latest_package_identifier: str
-    latest_package_url: str
-
-    @computed_field
-    def plugin_id(self) -> str:
-        return f"{self.org}/{self.name}"

api/core/variables/variables.py

@@ -112,7 +112,7 @@ class ArrayBooleanVariable(ArrayBooleanSegment, ArrayVariable):
 
 class RAGPipelineVariable(BaseModel):
     belong_to_node_id: str = Field(description="belong to which node id, shared means public")
-    type: str = Field(description="variable type, text-input, paragraph, select, number, file, file-list")
+    type: str = Field(description="variable type, text-input, paragraph, select, number,  file, file-list")
     label: str = Field(description="label")
     description: str | None = Field(description="description", default="")
     variable: str = Field(description="variable key", default="")

api/core/workflow/nodes/agent/agent_node.py

@@ -2,7 +2,7 @@ from __future__ import annotations
 
 import json
 from collections.abc import Generator, Mapping, Sequence
-from typing import TYPE_CHECKING, Any, Union, cast
+from typing import TYPE_CHECKING, Any, cast
 
 from packaging.version import Version
 from pydantic import ValidationError
@@ -11,7 +11,6 @@ from sqlalchemy.orm import Session
 
 from core.agent.entities import AgentToolEntity
 from core.agent.plugin_entities import AgentStrategyParameter
-from core.db.session_factory import session_factory
 from core.file import File, FileTransferMethod
 from core.memory.token_buffer_memory import TokenBufferMemory
 from core.model_manager import ModelInstance, ModelManager
@@ -50,12 +49,6 @@ from factories import file_factory
 from factories.agent_factory import get_plugin_agent_strategy
 from models import ToolFile
 from models.model import Conversation
-from models.tools import (
-    ApiToolProvider,
-    BuiltinToolProvider,
-    MCPToolProvider,
-    WorkflowToolProvider,
-)
 from services.tools.builtin_tools_manage_service import BuiltinToolManageService
 
 from .exc import (
@@ -266,7 +259,7 @@ class AgentNode(Node[AgentNodeData]):
                     value = cast(list[dict[str, Any]], value)
                     tool_value = []
                     for tool in value:
-                        provider_type = self._infer_tool_provider_type(tool, self.tenant_id)
+                        provider_type = ToolProviderType(tool.get("type", ToolProviderType.BUILT_IN))
                         setting_params = tool.get("settings", {})
                         parameters = tool.get("parameters", {})
                         manual_input_params = [key for key, value in parameters.items() if value is not None]
@@ -755,34 +748,3 @@ class AgentNode(Node[AgentNodeData]):
                 llm_usage=llm_usage,
             )
         )
-
-    @staticmethod
-    def _infer_tool_provider_type(tool_config: dict[str, Any], tenant_id: str) -> ToolProviderType:
-        provider_type_str = tool_config.get("type")
-        if provider_type_str:
-            return ToolProviderType(provider_type_str)
-
-        provider_id = tool_config.get("provider_name")
-        if not provider_id:
-            return ToolProviderType.BUILT_IN
-
-        with session_factory.create_session() as session:
-            provider_map: dict[
-                type[Union[WorkflowToolProvider, MCPToolProvider, ApiToolProvider, BuiltinToolProvider]],
-                ToolProviderType,
-            ] = {
-                WorkflowToolProvider: ToolProviderType.WORKFLOW,
-                MCPToolProvider: ToolProviderType.MCP,
-                ApiToolProvider: ToolProviderType.API,
-                BuiltinToolProvider: ToolProviderType.BUILT_IN,
-            }
-
-            for provider_model, provider_type in provider_map.items():
-                stmt = select(provider_model).where(
-                    provider_model.id == provider_id,
-                    provider_model.tenant_id == tenant_id,
-                )
-                if session.scalar(stmt):
-                    return provider_type
-
-        raise AgentNodeError(f"Tool provider with ID '{provider_id}' not found.")

api/core/workflow/nodes/template_transform/template_transform_node.py

@@ -1,6 +1,7 @@
 from collections.abc import Mapping, Sequence
 from typing import TYPE_CHECKING, Any
 
+from configs import dify_config
 from core.workflow.enums import NodeType, WorkflowNodeExecutionStatus
 from core.workflow.node_events import NodeRunResult
 from core.workflow.nodes.base.node import Node
@@ -15,13 +16,12 @@ if TYPE_CHECKING:
     from core.workflow.entities import GraphInitParams
     from core.workflow.runtime import GraphRuntimeState
 
-DEFAULT_TEMPLATE_TRANSFORM_MAX_OUTPUT_LENGTH = 400_000
+MAX_TEMPLATE_TRANSFORM_OUTPUT_LENGTH = dify_config.TEMPLATE_TRANSFORM_MAX_LENGTH
 
 
 class TemplateTransformNode(Node[TemplateTransformNodeData]):
     node_type = NodeType.TEMPLATE_TRANSFORM
     _template_renderer: Jinja2TemplateRenderer
-    _max_output_length: int
 
     def __init__(
         self,
@@ -31,7 +31,6 @@ class TemplateTransformNode(Node[TemplateTransformNodeData]):
         graph_runtime_state: "GraphRuntimeState",
         *,
         template_renderer: Jinja2TemplateRenderer | None = None,
-        max_output_length: int | None = None,
     ) -> None:
         super().__init__(
             id=id,
@@ -41,10 +40,6 @@ class TemplateTransformNode(Node[TemplateTransformNodeData]):
         )
         self._template_renderer = template_renderer or CodeExecutorJinja2TemplateRenderer()
 
-        if max_output_length is not None and max_output_length <= 0:
-            raise ValueError("max_output_length must be a positive integer")
-        self._max_output_length = max_output_length or DEFAULT_TEMPLATE_TRANSFORM_MAX_OUTPUT_LENGTH
-
     @classmethod
     def get_default_config(cls, filters: Mapping[str, object] | None = None) -> Mapping[str, object]:
         """
@@ -74,11 +69,11 @@ class TemplateTransformNode(Node[TemplateTransformNodeData]):
         except TemplateRenderError as e:
             return NodeRunResult(inputs=variables, status=WorkflowNodeExecutionStatus.FAILED, error=str(e))
 
-        if len(rendered) > self._max_output_length:
+        if len(rendered) > MAX_TEMPLATE_TRANSFORM_OUTPUT_LENGTH:
             return NodeRunResult(
                 inputs=variables,
                 status=WorkflowNodeExecutionStatus.FAILED,
-                error=f"Output length exceeds {self._max_output_length} characters",
+                error=f"Output length exceeds {MAX_TEMPLATE_TRANSFORM_OUTPUT_LENGTH} characters",
             )
 
         return NodeRunResult(

api/migrations/versions/2025_12_25_1039-7df29de0f6be_add_credit_pool.py

@@ -10,10 +10,6 @@ import models as models
 import sqlalchemy as sa
 from sqlalchemy.dialects import postgresql
 
-
-def _is_pg(conn):
-    return conn.dialect.name == "postgresql"
-
 # revision identifiers, used by Alembic.
 revision = '7df29de0f6be'
 down_revision = '03ea244985ce'
@@ -23,31 +19,16 @@ depends_on = None
 
 def upgrade():
     # ### commands auto generated by Alembic - please adjust! ###
-    conn = op.get_bind()
-
-    if _is_pg(conn):
-        op.create_table('tenant_credit_pools',
-        sa.Column('id', models.types.StringUUID(), server_default=sa.text('uuid_generate_v4()'), nullable=False),
-        sa.Column('tenant_id', models.types.StringUUID(), nullable=False),
-        sa.Column('pool_type', sa.String(length=40), server_default='trial', nullable=False),
-        sa.Column('quota_limit', sa.BigInteger(), nullable=False),
-        sa.Column('quota_used', sa.BigInteger(), nullable=False),
-        sa.Column('created_at', sa.DateTime(), server_default=sa.text('CURRENT_TIMESTAMP'), nullable=False),
-        sa.Column('updated_at', sa.DateTime(), server_default=sa.text('CURRENT_TIMESTAMP'), nullable=False),
-        sa.PrimaryKeyConstraint('id', name='tenant_credit_pool_pkey')
-        )
-    else:
-        # For MySQL and other databases, UUID should be generated at application level
-        op.create_table('tenant_credit_pools',
-        sa.Column('id', models.types.StringUUID(), nullable=False),
-        sa.Column('tenant_id', models.types.StringUUID(), nullable=False),
-        sa.Column('pool_type', sa.String(length=40), server_default='trial', nullable=False),
-        sa.Column('quota_limit', sa.BigInteger(), nullable=False),
-        sa.Column('quota_used', sa.BigInteger(), nullable=False),
-        sa.Column('created_at', sa.DateTime(), server_default=sa.func.current_timestamp(), nullable=False),
-        sa.Column('updated_at', sa.DateTime(), server_default=sa.func.current_timestamp(), nullable=False),
-        sa.PrimaryKeyConstraint('id', name='tenant_credit_pool_pkey')
-        )
+    op.create_table('tenant_credit_pools',
+    sa.Column('id', models.types.StringUUID(), server_default=sa.text('uuid_generate_v4()'), nullable=False),
+    sa.Column('tenant_id', models.types.StringUUID(), nullable=False),
+    sa.Column('pool_type', sa.String(length=40), server_default='trial', nullable=False),
+    sa.Column('quota_limit', sa.BigInteger(), nullable=False),
+    sa.Column('quota_used', sa.BigInteger(), nullable=False),
+    sa.Column('created_at', sa.DateTime(), server_default=sa.text('CURRENT_TIMESTAMP'), nullable=False),
+    sa.Column('updated_at', sa.DateTime(), server_default=sa.text('CURRENT_TIMESTAMP'), nullable=False),
+    sa.PrimaryKeyConstraint('id', name='tenant_credit_pool_pkey')
+    )
     with op.batch_alter_table('tenant_credit_pools', schema=None) as batch_op:
         batch_op.create_index('tenant_credit_pool_pool_type_idx', ['pool_type'], unique=False)
         batch_op.create_index('tenant_credit_pool_tenant_id_idx', ['tenant_id'], unique=False)

api/models/model.py

@@ -2166,9 +2166,7 @@ class TenantCreditPool(TypeBase):
         sa.Index("tenant_credit_pool_pool_type_idx", "pool_type"),
     )
 
-    id: Mapped[str] = mapped_column(
-        StringUUID, insert_default=lambda: str(uuid4()), default_factory=lambda: str(uuid4()), init=False
-    )
+    id: Mapped[str] = mapped_column(StringUUID, primary_key=True, server_default=text("uuid_generate_v4()"), init=False)
     tenant_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
     pool_type: Mapped[str] = mapped_column(String(40), nullable=False, default="trial", server_default="trial")
     quota_limit: Mapped[int] = mapped_column(BigInteger, nullable=False, default=0)

api/models/web.py

@@ -16,6 +16,7 @@ class SavedMessage(TypeBase):
     __table_args__ = (
         sa.PrimaryKeyConstraint("id", name="saved_message_pkey"),
         sa.Index("saved_message_message_idx", "app_id", "message_id", "created_by_role", "created_by"),
+        sa.Index("saved_message_message_id_idx", "message_id"),
     )
 
     id: Mapped[str] = mapped_column(

api/schedule/check_upgradable_plugin_task.py

@@ -1,24 +1,16 @@
-import logging
 import math
 import time
 
 import click
 
 import app
-from core.helper.marketplace import fetch_global_plugin_manifest
 from extensions.ext_database import db
 from models.account import TenantPluginAutoUpgradeStrategy
 from tasks import process_tenant_plugin_autoupgrade_check_task as check_task
 
-logger = logging.getLogger(__name__)
-
 AUTO_UPGRADE_MINIMAL_CHECKING_INTERVAL = 15 * 60  # 15 minutes
 MAX_CONCURRENT_CHECK_TASKS = 20
 
-# Import cache constants from the task module
-CACHE_REDIS_KEY_PREFIX = check_task.CACHE_REDIS_KEY_PREFIX
-CACHE_REDIS_TTL = check_task.CACHE_REDIS_TTL
-
 
 @app.celery.task(queue="plugin")
 def check_upgradable_plugin_task():
@@ -48,22 +40,6 @@ def check_upgradable_plugin_task():
     )  # make sure all strategies are checked in this interval
     batch_interval_time = (AUTO_UPGRADE_MINIMAL_CHECKING_INTERVAL / batch_chunk_count) if batch_chunk_count > 0 else 0
 
-    if total_strategies == 0:
-        click.echo(click.style("no strategies to process, skipping plugin manifest fetch.", fg="green"))
-        return
-
-    # Fetch and cache all plugin manifests before processing tenants
-    # This reduces load on marketplace from 300k requests to 1 request per check cycle
-    logger.info("fetching global plugin manifest from marketplace")
-    try:
-        fetch_global_plugin_manifest(CACHE_REDIS_KEY_PREFIX, CACHE_REDIS_TTL)
-        logger.info("successfully fetched and cached global plugin manifest")
-    except Exception as e:
-        logger.exception("failed to fetch global plugin manifest")
-        click.echo(click.style(f"failed to fetch global plugin manifest: {e}", fg="red"))
-        click.echo(click.style("skipping plugin upgrade check for this cycle", fg="yellow"))
-        return
-
     for i in range(0, total_strategies, MAX_CONCURRENT_CHECK_TASKS):
         batch_strategies = strategies[i : i + MAX_CONCURRENT_CHECK_TASKS]
         for strategy in batch_strategies:

api/services/retention/conversation/messages_clean_service.py

@@ -1,6 +1,8 @@
 import datetime
 import logging
+import os
 import random
+import time
 from collections.abc import Sequence
 from typing import cast
 
@@ -193,11 +195,15 @@ class MessagesCleanService:
             self._end_before,
         )
 
+        max_batch_interval_ms = int(os.environ.get("SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL", 200))
+
         while True:
             stats["batches"] += 1
+            batch_start = time.monotonic()
 
             # Step 1: Fetch a batch of messages using cursor
             with Session(db.engine, expire_on_commit=False) as session:
+                fetch_messages_start = time.monotonic()
                 msg_stmt = (
                     select(Message.id, Message.app_id, Message.created_at)
                     .where(Message.created_at < self._end_before)
@@ -223,6 +229,12 @@ class MessagesCleanService:
                     SimpleMessage(id=msg_id, app_id=app_id, created_at=msg_created_at)
                     for msg_id, app_id, msg_created_at in raw_messages
                 ]
+                logger.info(
+                    "clean_messages (batch %s): fetched %s messages in %sms",
+                    stats["batches"],
+                    len(messages),
+                    int((time.monotonic() - fetch_messages_start) * 1000),
+                )
 
                 # Track total messages fetched across all batches
                 stats["total_messages"] += len(messages)
@@ -241,8 +253,16 @@ class MessagesCleanService:
                     logger.info("clean_messages (batch %s): no app_ids found, skip", stats["batches"])
                     continue
 
+                fetch_apps_start = time.monotonic()
                 app_stmt = select(App.id, App.tenant_id).where(App.id.in_(app_ids))
                 apps = list(session.execute(app_stmt).all())
+                logger.info(
+                    "clean_messages (batch %s): fetched %s apps for %s app_ids in %sms",
+                    stats["batches"],
+                    len(apps),
+                    len(app_ids),
+                    int((time.monotonic() - fetch_apps_start) * 1000),
+                )
 
             if not apps:
                 logger.info("clean_messages (batch %s): no apps found, skip", stats["batches"])
@@ -252,7 +272,15 @@ class MessagesCleanService:
             app_to_tenant: dict[str, str] = {app.id: app.tenant_id for app in apps}
 
             # Step 3: Delegate to policy to determine which messages to delete
+            policy_start = time.monotonic()
             message_ids_to_delete = self._policy.filter_message_ids(messages, app_to_tenant)
+            logger.info(
+                "clean_messages (batch %s): policy selected %s/%s messages in %sms",
+                stats["batches"],
+                len(message_ids_to_delete),
+                len(messages),
+                int((time.monotonic() - policy_start) * 1000),
+            )
 
             if not message_ids_to_delete:
                 logger.info("clean_messages (batch %s): no messages to delete, skip", stats["batches"])
@@ -263,14 +291,20 @@ class MessagesCleanService:
             # Step 4: Batch delete messages and their relations
             if not self._dry_run:
                 with Session(db.engine, expire_on_commit=False) as session:
+                    delete_relations_start = time.monotonic()
                     # Delete related records first
                     self._batch_delete_message_relations(session, message_ids_to_delete)
+                    delete_relations_ms = int((time.monotonic() - delete_relations_start) * 1000)
 
                     # Delete messages
+                    delete_messages_start = time.monotonic()
                     delete_stmt = delete(Message).where(Message.id.in_(message_ids_to_delete))
                     delete_result = cast(CursorResult, session.execute(delete_stmt))
                     messages_deleted = delete_result.rowcount
+                    delete_messages_ms = int((time.monotonic() - delete_messages_start) * 1000)
+                    commit_start = time.monotonic()
                     session.commit()
+                    commit_ms = int((time.monotonic() - commit_start) * 1000)
 
                     stats["total_deleted"] += messages_deleted
 
@@ -280,6 +314,19 @@ class MessagesCleanService:
                         len(messages),
                         messages_deleted,
                     )
+                    logger.info(
+                        "clean_messages (batch %s): relations %sms,  messages %sms, commit %sms, batch total %sms",
+                        stats["batches"],
+                        delete_relations_ms,
+                        delete_messages_ms,
+                        commit_ms,
+                        int((time.monotonic() - batch_start) * 1000),
+                    )
+
+                # Random sleep between batches to avoid overwhelming the database
+                sleep_ms = random.uniform(0, max_batch_interval_ms)  # noqa: S311
+                logger.info("clean_messages (batch %s): sleeping for %.2fms", stats["batches"], sleep_ms)
+                time.sleep(sleep_ms / 1000)
             else:
                 # Log random sample of message IDs that would be deleted (up to 10)
                 sample_size = min(10, len(message_ids_to_delete))

api/services/retention/workflow_run/clear_free_plan_expired_workflow_run_logs.py

@@ -1,5 +1,8 @@
 import datetime
 import logging
+import os
+import random
+import time
 from collections.abc import Iterable, Sequence
 
 import click
@@ -72,7 +75,12 @@ class WorkflowRunCleanup:
         batch_index = 0
         last_seen: tuple[datetime.datetime, str] | None = None
 
+        max_batch_interval_ms = int(os.environ.get("SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL", 200))
+
         while True:
+            batch_start = time.monotonic()
+
+            fetch_start = time.monotonic()
             run_rows = self.workflow_run_repo.get_runs_batch_by_time_range(
                 start_from=self.window_start,
                 end_before=self.window_end,
@@ -80,12 +88,30 @@ class WorkflowRunCleanup:
                 batch_size=self.batch_size,
             )
             if not run_rows:
+                logger.info("workflow_run_cleanup (batch #%s): no more rows to process", batch_index + 1)
                 break
 
             batch_index += 1
             last_seen = (run_rows[-1].created_at, run_rows[-1].id)
+            logger.info(
+                "workflow_run_cleanup (batch #%s): fetched %s rows in %sms",
+                batch_index,
+                len(run_rows),
+                int((time.monotonic() - fetch_start) * 1000),
+            )
+
             tenant_ids = {row.tenant_id for row in run_rows}
+
+            filter_start = time.monotonic()
             free_tenants = self._filter_free_tenants(tenant_ids)
+            logger.info(
+                "workflow_run_cleanup (batch #%s): filtered %s free tenants from %s tenants in %sms",
+                batch_index,
+                len(free_tenants),
+                len(tenant_ids),
+                int((time.monotonic() - filter_start) * 1000),
+            )
+
             free_runs = [row for row in run_rows if row.tenant_id in free_tenants]
             paid_or_skipped = len(run_rows) - len(free_runs)
 
@@ -104,11 +130,17 @@ class WorkflowRunCleanup:
             total_runs_targeted += len(free_runs)
 
             if self.dry_run:
+                count_start = time.monotonic()
                 batch_counts = self.workflow_run_repo.count_runs_with_related(
                     free_runs,
                     count_node_executions=self._count_node_executions,
                     count_trigger_logs=self._count_trigger_logs,
                 )
+                logger.info(
+                    "workflow_run_cleanup (batch #%s, dry_run): counted related records in %sms",
+                    batch_index,
+                    int((time.monotonic() - count_start) * 1000),
+                )
                 if related_totals is not None:
                     for key in related_totals:
                         related_totals[key] += batch_counts.get(key, 0)
@@ -120,14 +152,21 @@ class WorkflowRunCleanup:
                         fg="yellow",
                     )
                 )
+                logger.info(
+                    "workflow_run_cleanup (batch #%s, dry_run): batch total %sms",
+                    batch_index,
+                    int((time.monotonic() - batch_start) * 1000),
+                )
                 continue
 
             try:
+                delete_start = time.monotonic()
                 counts = self.workflow_run_repo.delete_runs_with_related(
                     free_runs,
                     delete_node_executions=self._delete_node_executions,
                     delete_trigger_logs=self._delete_trigger_logs,
                 )
+                delete_ms = int((time.monotonic() - delete_start) * 1000)
             except Exception:
                 logger.exception("Failed to delete workflow runs batch ending at %s", last_seen[0])
                 raise
@@ -143,6 +182,17 @@ class WorkflowRunCleanup:
                     fg="green",
                 )
             )
+            logger.info(
+                "workflow_run_cleanup (batch #%s): delete %sms, batch total %sms",
+                batch_index,
+                delete_ms,
+                int((time.monotonic() - batch_start) * 1000),
+            )
+
+            # Random sleep between batches to avoid overwhelming the database
+            sleep_ms = random.uniform(0, max_batch_interval_ms)  # noqa: S311
+            logger.info("workflow_run_cleanup (batch #%s): sleeping for %.2fms", batch_index, sleep_ms)
+            time.sleep(sleep_ms / 1000)
 
         if self.dry_run:
             if self.window_start:

api/tasks/process_tenant_plugin_autoupgrade_check_task.py

@@ -6,8 +6,8 @@ import typing
 import click
 from celery import shared_task
 
-from core.helper.marketplace import record_install_plugin_event
-from core.plugin.entities.marketplace import MarketplacePluginSnapshot
+from core.helper import marketplace
+from core.helper.marketplace import MarketplacePluginDeclaration
 from core.plugin.entities.plugin import PluginInstallationSource
 from core.plugin.impl.plugin import PluginInstaller
 from extensions.ext_redis import redis_client
@@ -16,7 +16,7 @@ from models.account import TenantPluginAutoUpgradeStrategy
 logger = logging.getLogger(__name__)
 
 RETRY_TIMES_OF_ONE_PLUGIN_IN_ONE_TENANT = 3
-CACHE_REDIS_KEY_PREFIX = "plugin_autoupgrade_check_task:cached_plugin_snapshot:"
+CACHE_REDIS_KEY_PREFIX = "plugin_autoupgrade_check_task:cached_plugin_manifests:"
 CACHE_REDIS_TTL = 60 * 60  # 1 hour
 
 
@@ -25,11 +25,11 @@ def _get_redis_cache_key(plugin_id: str) -> str:
     return f"{CACHE_REDIS_KEY_PREFIX}{plugin_id}"
 
 
-def _get_cached_manifest(plugin_id: str) -> typing.Union[MarketplacePluginSnapshot, None, bool]:
+def _get_cached_manifest(plugin_id: str) -> typing.Union[MarketplacePluginDeclaration, None, bool]:
     """
     Get cached plugin manifest from Redis.
     Returns:
-        - MarketplacePluginSnapshot: if found in cache
+        - MarketplacePluginDeclaration: if found in cache
         - None: if cached as not found (marketplace returned no result)
         - False: if not in cache at all
     """
@@ -43,31 +43,76 @@ def _get_cached_manifest(plugin_id: str) -> typing.Union[MarketplacePluginSnapsh
         if cached_json is None:
             return None
 
-        return MarketplacePluginSnapshot.model_validate(cached_json)
+        return MarketplacePluginDeclaration.model_validate(cached_json)
     except Exception:
         logger.exception("Failed to get cached manifest for plugin %s", plugin_id)
         return False
 
 
+def _set_cached_manifest(plugin_id: str, manifest: typing.Union[MarketplacePluginDeclaration, None]) -> None:
+    """
+    Cache plugin manifest in Redis.
+    Args:
+        plugin_id: The plugin ID
+        manifest: The manifest to cache, or None if not found in marketplace
+    """
+    try:
+        key = _get_redis_cache_key(plugin_id)
+        if manifest is None:
+            # Cache the fact that this plugin was not found
+            redis_client.setex(key, CACHE_REDIS_TTL, json.dumps(None))
+        else:
+            # Cache the manifest data
+            redis_client.setex(key, CACHE_REDIS_TTL, manifest.model_dump_json())
+    except Exception:
+        # If Redis fails, continue without caching
+        # traceback.print_exc()
+        logger.exception("Failed to set cached manifest for plugin %s", plugin_id)
+
+
 def marketplace_batch_fetch_plugin_manifests(
     plugin_ids_plain_list: list[str],
-) -> list[MarketplacePluginSnapshot]:
-    """
-    Fetch plugin manifests from Redis cache only.
-    This function assumes fetch_global_plugin_manifest() has been called
-    to pre-populate the cache with all marketplace plugins.
-    """
-    result: list[MarketplacePluginSnapshot] = []
+) -> list[MarketplacePluginDeclaration]:
+    """Fetch plugin manifests with Redis caching support."""
+    cached_manifests: dict[str, typing.Union[MarketplacePluginDeclaration, None]] = {}
+    not_cached_plugin_ids: list[str] = []
 
     # Check Redis cache for each plugin
     for plugin_id in plugin_ids_plain_list:
         cached_result = _get_cached_manifest(plugin_id)
-        if not isinstance(cached_result, MarketplacePluginSnapshot):
-            # cached_result is False (not in cache) or None (cached as not found)
-            logger.warning("plugin %s not found in cache, skipping", plugin_id)
-            continue
+        if cached_result is False:
+            # Not in cache, need to fetch
+            not_cached_plugin_ids.append(plugin_id)
+        else:
+            # Either found manifest or cached as None (not found in marketplace)
+            # At this point, cached_result is either MarketplacePluginDeclaration or None
+            if isinstance(cached_result, bool):
+                # This should never happen due to the if condition above, but for type safety
+                continue
+            cached_manifests[plugin_id] = cached_result
 
-        result.append(cached_result)
+    # Fetch uncached plugins from marketplace
+    if not_cached_plugin_ids:
+        manifests = marketplace.batch_fetch_plugin_manifests_ignore_deserialization_error(not_cached_plugin_ids)
+
+        # Cache the fetched manifests
+        for manifest in manifests:
+            cached_manifests[manifest.plugin_id] = manifest
+            _set_cached_manifest(manifest.plugin_id, manifest)
+
+        # Cache plugins that were not found in marketplace
+        fetched_plugin_ids = {manifest.plugin_id for manifest in manifests}
+        for plugin_id in not_cached_plugin_ids:
+            if plugin_id not in fetched_plugin_ids:
+                cached_manifests[plugin_id] = None
+                _set_cached_manifest(plugin_id, None)
+
+    # Build result list from cached manifests
+    result: list[MarketplacePluginDeclaration] = []
+    for plugin_id in plugin_ids_plain_list:
+        cached_manifest: typing.Union[MarketplacePluginDeclaration, None] = cached_manifests.get(plugin_id)
+        if cached_manifest is not None:
+            result.append(cached_manifest)
 
     return result
 
@@ -166,7 +211,7 @@ def process_tenant_plugin_autoupgrade_check_task(
                         # execute upgrade
                         new_unique_identifier = manifest.latest_package_identifier
 
-                        record_install_plugin_event(new_unique_identifier)
+                        marketplace.record_install_plugin_event(new_unique_identifier)
                         click.echo(
                             click.style(
                                 f"Upgrade plugin: {original_unique_identifier} -> {new_unique_identifier}",

api/tests/unit_tests/core/workflow/nodes/agent/test_agent_node.py

@@ -1,197 +0,0 @@
-from unittest.mock import MagicMock, patch
-
-import pytest
-
-from core.tools.entities.tool_entities import ToolProviderType
-from core.workflow.nodes.agent.agent_node import AgentNode
-
-
-class TestInferToolProviderType:
-    """Test cases for AgentNode._infer_tool_provider_type method."""
-
-    def test_infer_type_from_config_workflow(self):
-        """Test inferring workflow provider type from config."""
-        tool_config = {
-            "type": "workflow",
-            "provider_name": "workflow-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-        assert result == ToolProviderType.WORKFLOW
-
-    def test_infer_type_from_config_builtin(self):
-        """Test inferring builtin provider type from config."""
-        tool_config = {
-            "type": "builtin",
-            "provider_name": "builtin-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-        assert result == ToolProviderType.BUILT_IN
-
-    def test_infer_type_from_config_api(self):
-        """Test inferring API provider type from config."""
-        tool_config = {
-            "type": "api",
-            "provider_name": "api-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-        assert result == ToolProviderType.API
-
-    def test_infer_type_from_config_mcp(self):
-        """Test inferring MCP provider type from config."""
-        tool_config = {
-            "type": "mcp",
-            "provider_name": "mcp-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-        assert result == ToolProviderType.MCP
-
-    def test_infer_type_invalid_config_value_raises_error(self):
-        """Test that invalid type value in config raises ValueError."""
-        tool_config = {
-            "type": "invalid-type",
-            "provider_name": "workflow-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with pytest.raises(ValueError):
-            AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-    def test_infer_workflow_type_from_database(self):
-        """Test inferring workflow provider type from database."""
-        tool_config = {
-            "provider_name": "workflow-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with patch("core.db.session_factory.session_factory.create_session") as mock_create_session:
-            mock_session = MagicMock()
-            mock_create_session.return_value.__enter__.return_value = mock_session
-
-            # First query (WorkflowToolProvider) returns a result
-            mock_session.scalar.return_value = True
-
-            result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-            assert result == ToolProviderType.WORKFLOW
-            # Should only query once (after finding WorkflowToolProvider)
-            assert mock_session.scalar.call_count == 1
-
-    def test_infer_mcp_type_from_database(self):
-        """Test inferring MCP provider type from database."""
-        tool_config = {
-            "provider_name": "mcp-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with patch("core.db.session_factory.session_factory.create_session") as mock_create_session:
-            mock_session = MagicMock()
-            mock_create_session.return_value.__enter__.return_value = mock_session
-
-            # First query (WorkflowToolProvider) returns None
-            # Second query (MCPToolProvider) returns a result
-            mock_session.scalar.side_effect = [None, True]
-
-            result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-            assert result == ToolProviderType.MCP
-            assert mock_session.scalar.call_count == 2
-
-    def test_infer_api_type_from_database(self):
-        """Test inferring API provider type from database."""
-        tool_config = {
-            "provider_name": "api-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with patch("core.db.session_factory.session_factory.create_session") as mock_create_session:
-            mock_session = MagicMock()
-            mock_create_session.return_value.__enter__.return_value = mock_session
-
-            # First query (WorkflowToolProvider) returns None
-            # Second query (MCPToolProvider) returns None
-            # Third query (ApiToolProvider) returns a result
-            mock_session.scalar.side_effect = [None, None, True]
-
-            result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-            assert result == ToolProviderType.API
-            assert mock_session.scalar.call_count == 3
-
-    def test_infer_builtin_type_from_database(self):
-        """Test inferring builtin provider type from database."""
-        tool_config = {
-            "provider_name": "builtin-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with patch("core.db.session_factory.session_factory.create_session") as mock_create_session:
-            mock_session = MagicMock()
-            mock_create_session.return_value.__enter__.return_value = mock_session
-
-            # First three queries return None
-            # Fourth query (BuiltinToolProvider) returns a result
-            mock_session.scalar.side_effect = [None, None, None, True]
-
-            result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-            assert result == ToolProviderType.BUILT_IN
-            assert mock_session.scalar.call_count == 4
-
-    def test_infer_type_default_when_not_found(self):
-        """Test raising AgentNodeError when provider is not found in database."""
-        tool_config = {
-            "provider_name": "unknown-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with patch("core.db.session_factory.session_factory.create_session") as mock_create_session:
-            mock_session = MagicMock()
-            mock_create_session.return_value.__enter__.return_value = mock_session
-
-            # All queries return None
-            mock_session.scalar.return_value = None
-
-            # Current implementation raises AgentNodeError when provider not found
-            from core.workflow.nodes.agent.exc import AgentNodeError
-
-            with pytest.raises(AgentNodeError, match="Tool provider with ID 'unknown-provider-id' not found"):
-                AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-    def test_infer_type_default_when_no_provider_name(self):
-        """Test defaulting to BUILT_IN when provider_name is missing."""
-        tool_config = {}
-        tenant_id = "test-tenant"
-
-        result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-        assert result == ToolProviderType.BUILT_IN
-
-    def test_infer_type_database_exception_propagates(self):
-        """Test that database exception propagates (current implementation doesn't catch it)."""
-        tool_config = {
-            "provider_name": "provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with patch("core.db.session_factory.session_factory.create_session") as mock_create_session:
-            mock_session = MagicMock()
-            mock_create_session.return_value.__enter__.return_value = mock_session
-
-            # Database query raises exception
-            mock_session.scalar.side_effect = Exception("Database error")
-
-            # Current implementation doesn't catch exceptions, so it propagates
-            with pytest.raises(Exception, match="Database error"):
-                AgentNode._infer_tool_provider_type(tool_config, tenant_id)

api/tests/unit_tests/core/workflow/nodes/template_transform/template_transform_node_spec.py

@@ -217,6 +217,7 @@ class TestTemplateTransformNode:
     @patch(
         "core.workflow.nodes.template_transform.template_transform_node.CodeExecutorJinja2TemplateRenderer.render_template"
     )
+    @patch("core.workflow.nodes.template_transform.template_transform_node.MAX_TEMPLATE_TRANSFORM_OUTPUT_LENGTH", 10)
     def test_run_output_length_exceeds_limit(
         self, mock_execute, basic_node_data, mock_graph, mock_graph_runtime_state, graph_init_params
     ):
@@ -230,7 +231,6 @@ class TestTemplateTransformNode:
             graph_init_params=graph_init_params,
             graph=mock_graph,
             graph_runtime_state=mock_graph_runtime_state,
-            max_output_length=10,
         )
 
         result = node._run()

docker/.env.example

@@ -1518,5 +1518,6 @@ AMPLITUDE_API_KEY=
 # Sandbox expired records clean configuration
 SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD=21
 SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE=1000
+SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL=200
 SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS=30
 SANDBOX_EXPIRED_RECORDS_CLEAN_TASK_LOCK_TTL=90000

docker/docker-compose.yaml

@@ -682,6 +682,7 @@ x-shared-env: &shared-api-worker-env
   AMPLITUDE_API_KEY: ${AMPLITUDE_API_KEY:-}
   SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD: ${SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD:-21}
   SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE: ${SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE:-1000}
+  SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL: ${SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL:-200}
   SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS: ${SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS:-30}
   SANDBOX_EXPIRED_RECORDS_CLEAN_TASK_LOCK_TTL: ${SANDBOX_EXPIRED_RECORDS_CLEAN_TASK_LOCK_TTL:-90000}
 

web/app/components/base/effect/index.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable tailwindcss/classnames-order */
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import Effect from '.'
 
@@ -28,8 +29,8 @@ type Story = StoryObj<typeof meta>
 export const Playground: Story = {
   render: () => (
     <div className="relative h-40 w-72 overflow-hidden rounded-2xl border border-divider-subtle bg-background-default-subtle">
-      <Effect className="left-8 top-6" />
-      <Effect className="bg-util-colors-purple-brand-purple-brand-500 right-10 top-14" />
+      <Effect className="top-6 left-8" />
+      <Effect className="top-14 right-10 bg-util-colors-purple-brand-purple-brand-500" />
       <div className="absolute inset-x-0 bottom-4 flex justify-center text-xs text-text-secondary">
         Accent glow
       </div>

web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx

@@ -14,6 +14,7 @@ const ErrorMessage = ({
   errorMsg,
 }: ErrorMessageProps) => {
   return (
+    // eslint-disable-next-line tailwindcss/migration-from-tailwind-2
     <div className={cn(
       'flex gap-x-0.5 rounded-xl border-[0.5px] border-components-panel-border bg-opacity-40 bg-toast-error-bg p-2 shadow-xs shadow-shadow-shadow-3',
       className,

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/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-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/serwist/[path]/route.ts

@@ -1,11 +1,14 @@
+import { spawnSync } from 'node:child_process'
+import { randomUUID } from 'node:crypto'
 import { createSerwistRoute } from '@serwist/turbopack'
 
 const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
+const revision = spawnSync('git', ['rev-parse', 'HEAD'], { encoding: 'utf-8' }).stdout?.trim() || randomUUID()
 
 export const { dynamic, dynamicParams, revalidate, generateStaticParams, GET } = createSerwistRoute({
+  additionalPrecacheEntries: [{ url: `${basePath}/_offline.html`, revision }],
   swSrc: 'app/sw.ts',
   nextConfig: {
     basePath,
   },
-  useNativeEsbuild: true,
 })

web/app/sw.ts

@@ -3,9 +3,7 @@
 /// <reference lib="webworker" />
 
 import type { PrecacheEntry, SerwistGlobalConfig } from 'serwist'
-import { defaultCache } from '@serwist/turbopack/worker'
-import { Serwist } from 'serwist'
-import { withLeadingSlash } from 'ufo'
+import { CacheableResponsePlugin, CacheFirst, ExpirationPlugin, NetworkFirst, Serwist, StaleWhileRevalidate } from 'serwist'
 
 declare global {
   // eslint-disable-next-line ts/consistent-type-definitions
@@ -20,30 +18,78 @@ const scopePathname = new URL(self.registration.scope).pathname
 const basePath = scopePathname.replace(/\/serwist\/$/, '').replace(/\/$/, '')
 const offlineUrl = `${basePath}/_offline.html`
 
-const normalizeManifestUrl = (url: string): string => {
-  if (url.startsWith('/serwist/'))
-    return url.replace(/^\/serwist\//, '/')
-
-  return withLeadingSlash(url)
-}
-
-const manifest = self.__SW_MANIFEST?.map((entry) => {
-  if (typeof entry === 'string')
-    return normalizeManifestUrl(entry)
-
-  return {
-    ...entry,
-    url: normalizeManifestUrl(entry.url),
-  }
-})
-
 const serwist = new Serwist({
-  precacheEntries: manifest,
+  precacheEntries: self.__SW_MANIFEST,
   skipWaiting: true,
   disableDevLogs: true,
   clientsClaim: true,
   navigationPreload: true,
-  runtimeCaching: defaultCache,
+  runtimeCaching: [
+    {
+      matcher: ({ url }) => url.origin === 'https://fonts.googleapis.com',
+      handler: new CacheFirst({
+        cacheName: 'google-fonts',
+        plugins: [
+          new CacheableResponsePlugin({ statuses: [0, 200] }),
+          new ExpirationPlugin({
+            maxEntries: 4,
+            maxAgeSeconds: 365 * 24 * 60 * 60,
+          }),
+        ],
+      }),
+    },
+    {
+      matcher: ({ url }) => url.origin === 'https://fonts.gstatic.com',
+      handler: new CacheFirst({
+        cacheName: 'google-fonts-webfonts',
+        plugins: [
+          new CacheableResponsePlugin({ statuses: [0, 200] }),
+          new ExpirationPlugin({
+            maxEntries: 4,
+            maxAgeSeconds: 365 * 24 * 60 * 60,
+          }),
+        ],
+      }),
+    },
+    {
+      matcher: ({ request }) => request.destination === 'image',
+      handler: new CacheFirst({
+        cacheName: 'images',
+        plugins: [
+          new CacheableResponsePlugin({ statuses: [0, 200] }),
+          new ExpirationPlugin({
+            maxEntries: 64,
+            maxAgeSeconds: 30 * 24 * 60 * 60,
+          }),
+        ],
+      }),
+    },
+    {
+      matcher: ({ request }) => request.destination === 'script' || request.destination === 'style',
+      handler: new StaleWhileRevalidate({
+        cacheName: 'static-resources',
+        plugins: [
+          new ExpirationPlugin({
+            maxEntries: 32,
+            maxAgeSeconds: 24 * 60 * 60,
+          }),
+        ],
+      }),
+    },
+    {
+      matcher: ({ url, sameOrigin }) => sameOrigin && url.pathname.startsWith('/api/'),
+      handler: new NetworkFirst({
+        cacheName: 'api-cache',
+        networkTimeoutSeconds: 10,
+        plugins: [
+          new ExpirationPlugin({
+            maxEntries: 16,
+            maxAgeSeconds: 60 * 60,
+          }),
+        ],
+      }),
+    },
+  ],
   fallbacks: {
     entries: [
       {

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/docs/lint.md

@@ -38,11 +38,6 @@ pnpm lint:tss
 
 This command lints the entire project and is intended for final verification before committing or pushing changes.
 
-### Introducing New Plugins or Rules
-
-If a new rule causes many existing code errors or automatic fixes generate too many diffs, do not use the `--fix` option for automatic fixes.
-You can introduce the rule first, then use the `--suppress-all` option to temporarily suppress these errors, and gradually fix them in subsequent changes.
-
 ## Type Check
 
 You should be able to see suggestions from TypeScript in your editor for all open files.

web/eslint.config.mjs

@@ -1,9 +1,9 @@
 // @ts-check
 import antfu from '@antfu/eslint-config'
 import pluginQuery from '@tanstack/eslint-plugin-query'
-import tailwindcss from 'eslint-plugin-better-tailwindcss'
 import sonar from 'eslint-plugin-sonarjs'
 import storybook from 'eslint-plugin-storybook'
+import tailwind from 'eslint-plugin-tailwindcss'
 import dify from './eslint-rules/index.js'
 
 export default antfu(
@@ -23,7 +23,7 @@ export default antfu(
       },
     },
     nextjs: true,
-    ignores: ['public', 'types/doc-paths.ts', 'eslint-suppressions.json'],
+    ignores: ['public', 'types/doc-paths.ts'],
     typescript: {
       overrides: {
         'ts/consistent-type-definitions': ['error', 'type'],
@@ -66,16 +66,42 @@ export default antfu(
       sonarjs: sonar,
     },
   },
+  tailwind.configs['flat/recommended'],
   {
-    files: ['**/*.{ts,tsx}'],
-    plugins: {
-      tailwindcss,
+    settings: {
+      tailwindcss: {
+        // These are the default values but feel free to customize
+        callees: ['classnames', 'clsx', 'ctl', 'cn', 'classNames'],
+        config: 'tailwind.config.js', // returned from `loadConfig()` utility if not provided
+        cssFiles: [
+          '**/*.css',
+          '!**/node_modules',
+          '!**/.*',
+          '!**/dist',
+          '!**/build',
+          '!**/.storybook',
+          '!**/.next',
+          '!**/.public',
+        ],
+        cssFilesRefreshRate: 5_000,
+        removeDuplicates: true,
+        skipClassAttribute: false,
+        whitelist: [],
+        tags: [], // can be set to e.g. ['tw'] for use in tw`bg-blue`
+        classRegex: '^class(Name)?$', // can be modified to support custom attributes. E.g. "^tw$" for `twin.macro`
+      },
     },
     rules: {
-      'tailwindcss/enforce-consistent-class-order': 'error',
-      'tailwindcss/no-duplicate-classes': 'error',
-      'tailwindcss/no-unnecessary-whitespace': 'error',
-      'tailwindcss/no-unknown-classes': 'warn',
+      // due to 1k lines of tailwind config, these rule have performance issue
+      'tailwindcss/no-contradicting-classname': 'off',
+      'tailwindcss/enforces-shorthand': 'off',
+      'tailwindcss/no-custom-classname': 'off',
+      'tailwindcss/no-unnecessary-arbitrary-value': 'off',
+
+      'tailwindcss/no-arbitrary-value': 'off',
+      'tailwindcss/classnames-order': 'warn',
+      'tailwindcss/enforces-negative-arbitrary-values': 'warn',
+      'tailwindcss/migration-from-tailwind-2': 'warn',
     },
   },
   {

web/next.config.ts

@@ -29,7 +29,7 @@ const remoteImageURLs = ([hasSetWebPrefix ? new URL(`${process.env.NEXT_PUBLIC_W
 
 const nextConfig: NextConfig = {
   basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
-  serverExternalPackages: ['esbuild'],
+  serverExternalPackages: ['esbuild-wasm'],
   transpilePackages: ['echarts', 'zrender'],
   turbopack: {
     rules: codeInspectorPlugin({

web/package.json

@@ -154,9 +154,8 @@
     "sharp": "0.33.5",
     "sortablejs": "1.15.6",
     "string-ts": "2.3.1",
-    "tailwind-merge": "2.6.1",
+    "tailwind-merge": "2.6.0",
     "tldts": "7.0.17",
-    "ufo": "1.6.3",
     "use-context-selector": "2.0.0",
     "uuid": "10.0.0",
     "zod": "3.25.76",
@@ -166,21 +165,21 @@
   "devDependencies": {
     "@antfu/eslint-config": "7.2.0",
     "@chromatic-com/storybook": "5.0.0",
-    "@eslint-react/eslint-plugin": "2.9.4",
+    "@eslint-react/eslint-plugin": "2.8.1",
     "@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",
-    "@serwist/turbopack": "9.5.4",
+    "@serwist/turbopack": "9.5.0",
     "@storybook/addon-docs": "10.2.0",
     "@storybook/addon-links": "10.2.0",
     "@storybook/addon-onboarding": "10.2.0",
     "@storybook/addon-themes": "10.2.0",
     "@storybook/nextjs-vite": "10.2.0",
     "@storybook/react": "10.2.0",
-    "@tanstack/eslint-plugin-query": "5.91.4",
+    "@tanstack/eslint-plugin-query": "5.91.3",
     "@tanstack/react-devtools": "0.9.2",
     "@tanstack/react-form-devtools": "0.2.12",
     "@tanstack/react-query-devtools": "5.90.2",
@@ -211,13 +210,13 @@
     "autoprefixer": "10.4.21",
     "code-inspector-plugin": "1.3.6",
     "cross-env": "10.1.0",
-    "esbuild": "0.27.2",
+    "esbuild-wasm": "0.27.2",
     "eslint": "9.39.2",
-    "eslint-plugin-better-tailwindcss": "4.1.1",
     "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-react-refresh": "0.5.0",
+    "eslint-plugin-react-refresh": "0.4.26",
     "eslint-plugin-sonarjs": "3.0.6",
-    "eslint-plugin-storybook": "10.2.6",
+    "eslint-plugin-storybook": "10.2.1",
+    "eslint-plugin-tailwindcss": "3.18.2",
     "husky": "9.1.7",
     "jsdom": "27.3.0",
     "jsdom-testing-mocks": "1.16.0",
@@ -227,9 +226,9 @@
     "postcss": "8.5.6",
     "react-scan": "0.4.3",
     "sass": "1.93.2",
-    "serwist": "9.5.4",
+    "serwist": "9.5.0",
     "storybook": "10.2.0",
-    "tailwindcss": "3.4.19",
+    "tailwindcss": "3.4.18",
     "tsx": "4.21.0",
     "typescript": "5.9.3",
     "uglify-js": "3.19.3",

web/utils/classnames.spec.ts

@@ -0,0 +1,157 @@
+/**
+ * Test suite for the classnames utility function
+ * This utility combines the classnames library with tailwind-merge
+ * to handle conditional CSS classes and merge conflicting Tailwind classes
+ */
+import { cn } from './classnames'
+
+describe('classnames', () => {
+  /**
+   * Tests basic classnames library features:
+   * - String concatenation
+   * - Array handling
+   * - Falsy value filtering
+   * - Object-based conditional classes
+   */
+  it('classnames libs feature', () => {
+    expect(cn('foo')).toBe('foo')
+    expect(cn('foo', 'bar')).toBe('foo bar')
+    expect(cn(['foo', 'bar'])).toBe('foo bar')
+
+    expect(cn(undefined)).toBe('')
+    expect(cn(null)).toBe('')
+    expect(cn(false)).toBe('')
+
+    expect(cn({
+      foo: true,
+      bar: false,
+      baz: true,
+    })).toBe('foo baz')
+  })
+
+  /**
+   * Tests tailwind-merge functionality:
+   * - Conflicting class resolution (last one wins)
+   * - Modifier handling (hover, focus, etc.)
+   * - Important prefix (!)
+   * - Custom color classes
+   * - Arbitrary values
+   */
+  it('tailwind-merge', () => {
+    /* eslint-disable tailwindcss/classnames-order */
+    expect(cn('p-0')).toBe('p-0')
+    expect(cn('text-right text-center text-left')).toBe('text-left')
+    expect(cn('pl-4 p-8')).toBe('p-8')
+    expect(cn('m-[2px] m-[4px]')).toBe('m-[4px]')
+    expect(cn('m-1 m-[4px]')).toBe('m-[4px]')
+    expect(cn('overflow-x-auto hover:overflow-x-hidden overflow-x-scroll')).toBe(
+      'hover:overflow-x-hidden overflow-x-scroll',
+    )
+    expect(cn('h-10 h-min')).toBe('h-min')
+    expect(cn('bg-grey-5 bg-hotpink')).toBe('bg-hotpink')
+
+    expect(cn('hover:block hover:inline')).toBe('hover:inline')
+
+    expect(cn('font-medium !font-bold')).toBe('font-medium !font-bold')
+    expect(cn('!font-medium !font-bold')).toBe('!font-bold')
+
+    expect(cn('text-gray-100 text-primary-200')).toBe('text-primary-200')
+    expect(cn('text-some-unknown-color text-components-input-bg-disabled text-primary-200')).toBe('text-primary-200')
+    expect(cn('bg-some-unknown-color bg-components-input-bg-disabled bg-primary-200')).toBe('bg-primary-200')
+
+    expect(cn('border-t border-white/10')).toBe('border-t border-white/10')
+    expect(cn('border-t border-white')).toBe('border-t border-white')
+    expect(cn('text-3.5xl text-black')).toBe('text-3.5xl text-black')
+  })
+
+  /**
+   * Tests the integration of classnames and tailwind-merge:
+   * - Object-based conditional classes with Tailwind conflict resolution
+   */
+  it('classnames combined with tailwind-merge', () => {
+    expect(cn('text-right', {
+      'text-center': true,
+    })).toBe('text-center')
+
+    expect(cn('text-right', {
+      'text-center': false,
+    })).toBe('text-right')
+  })
+
+  /**
+   * Tests handling of multiple mixed argument types:
+   * - Strings, arrays, and objects in a single call
+   * - Tailwind merge working across different argument types
+   */
+  it('multiple mixed argument types', () => {
+    expect(cn('foo', ['bar', 'baz'], { qux: true, quux: false })).toBe('foo bar baz qux')
+    expect(cn('p-4', ['p-2', 'm-4'], { 'text-left': true, 'text-right': true })).toBe('p-2 m-4 text-right')
+  })
+
+  /**
+   * Tests nested array handling:
+   * - Deep array flattening
+   * - Tailwind merge with nested structures
+   */
+  it('nested arrays', () => {
+    expect(cn(['foo', ['bar', 'baz']])).toBe('foo bar baz')
+    expect(cn(['p-4', ['p-2', 'text-center']])).toBe('p-2 text-center')
+  })
+
+  /**
+   * Tests empty input handling:
+   * - Empty strings, arrays, and objects
+   * - Mixed empty and non-empty values
+   */
+  it('empty inputs', () => {
+    expect(cn('')).toBe('')
+    expect(cn([])).toBe('')
+    expect(cn({})).toBe('')
+    expect(cn('', [], {})).toBe('')
+    expect(cn('foo', '', 'bar')).toBe('foo bar')
+  })
+
+  /**
+   * Tests number input handling:
+   * - Truthy numbers converted to strings
+   * - Zero treated as falsy
+   */
+  it('numbers as inputs', () => {
+    expect(cn(1)).toBe('1')
+    expect(cn(0)).toBe('')
+    expect(cn('foo', 1, 'bar')).toBe('foo 1 bar')
+  })
+
+  /**
+   * Tests multiple object arguments:
+   * - Object merging
+   * - Tailwind conflict resolution across objects
+   */
+  it('multiple objects', () => {
+    expect(cn({ foo: true }, { bar: true })).toBe('foo bar')
+    expect(cn({ foo: true, bar: false }, { bar: true, baz: true })).toBe('foo bar baz')
+    expect(cn({ 'p-4': true }, { 'p-2': true })).toBe('p-2')
+  })
+
+  /**
+   * Tests complex edge cases:
+   * - Mixed falsy values
+   * - Nested arrays with falsy values
+   * - Multiple conflicting Tailwind classes
+   */
+  it('complex edge cases', () => {
+    expect(cn('foo', null, undefined, false, 'bar', 0, 1, '')).toBe('foo bar 1')
+    expect(cn(['foo', null, ['bar', undefined, 'baz']])).toBe('foo bar baz')
+    expect(cn('text-sm', { 'text-lg': false, 'text-xl': true }, 'text-2xl')).toBe('text-2xl')
+  })
+
+  /**
+   * Tests important (!) modifier behavior:
+   * - Important modifiers in objects
+   * - Conflict resolution with important prefix
+   */
+  it('important modifier with objects', () => {
+    expect(cn({ '!font-medium': true }, { '!font-bold': true })).toBe('!font-bold')
+    expect(cn('font-normal', { '!font-bold': true })).toBe('font-normal !font-bold')
+  })
+})