Merge branch 'main' into fix/workflow-sync-draft

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

.agents/skills/component-refactoring/SKILL.md

@@ -480,4 +480,4 @@ const useButtonState = () => {
 ### Related Skills
 
 - `frontend-testing` - For testing refactored components
-- `web/testing/testing.md` - Testing specification
+- `web/docs/test.md` - Testing specification

.agents/skills/frontend-testing/SKILL.md

@@ -7,7 +7,7 @@ description: Generate Vitest + React Testing Library tests for Dify frontend com
 
 This skill enables Claude to generate high-quality, comprehensive frontend tests for the Dify project following established conventions and best practices.
 
-> **⚠️ Authoritative Source**: This skill is derived from `web/testing/testing.md`. Use Vitest mock/timer APIs (`vi.*`).
+> **⚠️ Authoritative Source**: This skill is derived from `web/docs/test.md`. Use Vitest mock/timer APIs (`vi.*`).
 
 ## When to Apply This Skill
 
@@ -309,7 +309,7 @@ For more detailed information, refer to:
 
 ### Primary Specification (MUST follow)
 
-- **`web/testing/testing.md`** - The canonical testing specification. This skill is derived from this document.
+- **`web/docs/test.md`** - The canonical testing specification. This skill is derived from this document.
 
 ### Reference Examples in Codebase
 

.agents/skills/frontend-testing/references/workflow.md

@@ -4,7 +4,7 @@ This guide defines the workflow for generating tests, especially for complex com
 
 ## Scope Clarification
 
-This guide addresses **multi-file workflow** (how to process multiple test files). For coverage requirements within a single test file, see `web/testing/testing.md` § Coverage Goals.
+This guide addresses **multi-file workflow** (how to process multiple test files). For coverage requirements within a single test file, see `web/docs/test.md` § Coverage Goals.
 
 | Scope | Rule |
 |-------|------|

.github/workflows/api-tests.yml

@@ -72,6 +72,7 @@ jobs:
           OPENDAL_FS_ROOT: /tmp/dify-storage
         run: |
           uv run --project api pytest \
+            -n auto \
             --timeout "${PYTEST_TIMEOUT:-180}" \
             api/tests/integration_tests/workflow \
             api/tests/integration_tests/tools \

.github/workflows/style.yml

@@ -47,13 +47,9 @@ jobs:
         if: steps.changed-files.outputs.any_changed == 'true'
         run: uv run --directory api --dev lint-imports
 
-      - name: Run Basedpyright Checks
+      - name: Run Type Checks
         if: steps.changed-files.outputs.any_changed == 'true'
-        run: dev/basedpyright-check
-
-      - name: Run Mypy Type Checks
-        if: steps.changed-files.outputs.any_changed == 'true'
-        run: uv --directory api run mypy --exclude-gitignore --exclude 'tests/' --exclude 'migrations/' --check-untyped-defs --disable-error-code=import-untyped .
+        run: make type-check
 
       - name: Dotenv check
         if: steps.changed-files.outputs.any_changed == 'true'

AGENTS.md

@@ -7,7 +7,7 @@ Dify is an open-source platform for developing LLM applications with an intuitiv
 The codebase is split into:
 
 - **Backend API** (`/api`): Python Flask application organized with Domain-Driven Design
-- **Frontend Web** (`/web`): Next.js 15 application using TypeScript and React 19
+- **Frontend Web** (`/web`): Next.js application using TypeScript and React
 - **Docker deployment** (`/docker`): Containerized deployment configurations
 
 ## Backend Workflow
@@ -18,36 +18,7 @@ The codebase is split into:
 
 ## Frontend Workflow
 
-```bash
-cd web
-pnpm lint:fix
-pnpm type-check:tsgo
-pnpm test
-```
-
-### Frontend Linting
-
-ESLint is used for frontend code quality. Available commands:
-
-```bash
-# Lint all files (report only)
-pnpm lint
-
-# Lint and auto-fix issues
-pnpm lint:fix
-
-# Lint specific files or directories
-pnpm lint:fix app/components/base/button/
-pnpm lint:fix app/components/base/button/index.tsx
-
-# Lint quietly (errors only, no warnings)
-pnpm lint:quiet
-
-# Check code complexity
-pnpm lint:complexity
-```
-
-**Important**: Always run `pnpm lint:fix` before committing. The pre-commit hook runs `lint-staged` which only lints staged files.
+- Read `web/AGENTS.md` for details
 
 ## Testing & Quality Practices
 

CONTRIBUTING.md

@@ -77,7 +77,7 @@ How we prioritize:
 
 For setting up the frontend service, please refer to our comprehensive [guide](https://github.com/langgenius/dify/blob/main/web/README.md) in the `web/README.md` file. This document provides detailed instructions to help you set up the frontend environment properly.
 
-**Testing**: All React components must have comprehensive test coverage. See [web/testing/testing.md](https://github.com/langgenius/dify/blob/main/web/testing/testing.md) for the canonical frontend testing guidelines and follow every requirement described there.
+**Testing**: All React components must have comprehensive test coverage. See [web/docs/test.md](https://github.com/langgenius/dify/blob/main/web/docs/test.md) for the canonical frontend testing guidelines and follow every requirement described there.
 
 #### Backend
 

Makefile

@@ -68,9 +68,11 @@ lint:
 	@echo "✅ Linting complete"
 
 type-check:
-	@echo "📝 Running type check with basedpyright..."
-	@uv run --directory api --dev basedpyright
-	@echo "✅ Type check complete"
+	@echo "📝 Running type checks (basedpyright + mypy + ty)..."
+	@./dev/basedpyright-check $(PATH_TO_CHECK)
+	@uv --directory api run mypy --exclude-gitignore --exclude 'tests/' --exclude 'migrations/' --check-untyped-defs --disable-error-code=import-untyped .
+	@cd api && uv run ty check
+	@echo "✅ Type checks complete"
 
 test:
 	@echo "🧪 Running backend unit tests..."
@@ -78,7 +80,7 @@ test:
 		echo "Target: $(TARGET_TESTS)"; \
 		uv run --project api --dev pytest $(TARGET_TESTS); \
 	else \
-		uv run --project api --dev dev/pytest/pytest_unit_tests.sh; \
+		PYTEST_XDIST_ARGS="-n auto" uv run --project api --dev dev/pytest/pytest_unit_tests.sh; \
 	fi
 	@echo "✅ Tests complete"
 
@@ -130,7 +132,7 @@ help:
 	@echo "  make format         - Format code with ruff"
 	@echo "  make check          - Check code with ruff"
 	@echo "  make lint           - Format, fix, and lint code (ruff, imports, dotenv)"
-	@echo "  make type-check     - Run type checking with basedpyright"
+	@echo "  make type-check     - Run type checks (basedpyright, mypy, ty)"
 	@echo "  make test           - Run backend unit tests (or TARGET_TESTS=./api/tests/<target_tests>)"
 	@echo ""
 	@echo "Docker Build Targets:"

api/.env.example

@@ -617,6 +617,7 @@ PLUGIN_DAEMON_URL=http://127.0.0.1:5002
 PLUGIN_REMOTE_INSTALL_PORT=5003
 PLUGIN_REMOTE_INSTALL_HOST=localhost
 PLUGIN_MAX_PACKAGE_SIZE=15728640
+PLUGIN_MODEL_SCHEMA_CACHE_TTL=3600
 INNER_API_KEY_FOR_PLUGIN=QaHbTe77CtuXmsfyhR7+vRjI/+XbV1AaFy691iy+kGDv2Jvy0/eAh8Y1
 
 # Marketplace configuration
@@ -716,4 +717,3 @@ SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD=21
 SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE=1000
 SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS=30
 SANDBOX_EXPIRED_RECORDS_CLEAN_TASK_LOCK_TTL=90000
-

api/app.py

@@ -1,4 +1,12 @@
+from __future__ import annotations
+
 import sys
+from typing import TYPE_CHECKING, cast
+
+if TYPE_CHECKING:
+    from celery import Celery
+
+    celery: Celery
 
 
 def is_db_command() -> bool:
@@ -23,7 +31,7 @@ else:
     from app_factory import create_app
 
     app = create_app()
-    celery = app.extensions["celery"]
+    celery = cast("Celery", app.extensions["celery"])
 
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=5001)

api/app_factory.py

@@ -149,7 +149,7 @@ def initialize_extensions(app: DifyApp):
             logger.info("Loaded %s (%s ms)", short_name, round((end_time - start_time) * 1000, 2))
 
 
-def create_migrations_app():
+def create_migrations_app() -> DifyApp:
     app = create_flask_app_with_configs()
     from extensions import ext_database, ext_migrate
 

api/configs/feature/__init__.py

@@ -245,7 +245,7 @@ class PluginConfig(BaseSettings):
 
     PLUGIN_MODEL_SCHEMA_CACHE_TTL: PositiveInt = Field(
         description="TTL in seconds for caching plugin model schemas in Redis",
-        default=24 * 60 * 60,
+        default=60 * 60,
     )
 
 

api/controllers/console/__init__.py

@@ -115,12 +115,6 @@ from .explore import (
     trial,
 )
 
-# Import evaluation controllers
-from .evaluation import evaluation
-
-# Import snippet controllers
-from .snippets import snippet_workflow
-
 # Import tag controllers
 from .tag import tags
 
@@ -134,7 +128,6 @@ from .workspace import (
     model_providers,
     models,
     plugin,
-    snippets,
     tool_providers,
     trigger_providers,
     workspace,
@@ -172,7 +165,6 @@ __all__ = [
     "datasource_content_preview",
     "email_register",
     "endpoint",
-    "evaluation",
     "extension",
     "external",
     "feature",
@@ -205,8 +197,6 @@ __all__ = [
     "saved_message",
     "setup",
     "site",
-    "snippet_workflow",
-    "snippets",
     "spec",
     "statistic",
     "tags",

api/controllers/console/evaluation/__init__.py

@@ -1 +0,0 @@
-# Evaluation controller module

api/controllers/console/evaluation/evaluation.py

@@ -1,288 +0,0 @@
-import logging
-from collections.abc import Callable
-from functools import wraps
-from typing import ParamSpec, TypeVar, Union
-
-from flask import request
-from flask_restx import Resource, fields
-from pydantic import BaseModel, Field
-from werkzeug.exceptions import NotFound
-
-from controllers.common.schema import register_schema_models
-from controllers.console import console_ns
-from controllers.console.wraps import (
-    account_initialization_required,
-    edit_permission_required,
-    setup_required,
-)
-from extensions.ext_database import db
-from libs.helper import TimestampField
-from libs.login import current_account_with_tenant, login_required
-from models import App
-from models.snippet import CustomizedSnippet
-
-logger = logging.getLogger(__name__)
-
-P = ParamSpec("P")
-R = TypeVar("R")
-
-# Valid evaluation target types
-EVALUATE_TARGET_TYPES = {"app", "snippets"}
-
-
-class VersionQuery(BaseModel):
-    """Query parameters for version endpoint."""
-
-    version: str
-
-
-register_schema_models(
-    console_ns,
-    VersionQuery,
-)
-
-
-# Response field definitions
-file_info_fields = {
-    "id": fields.String,
-    "name": fields.String,
-}
-
-evaluation_log_fields = {
-    "created_at": TimestampField,
-    "created_by": fields.String,
-    "test_file": fields.Nested(
-        console_ns.model(
-            "EvaluationTestFile",
-            file_info_fields,
-        )
-    ),
-    "result_file": fields.Nested(
-        console_ns.model(
-            "EvaluationResultFile",
-            file_info_fields,
-        ),
-        allow_null=True,
-    ),
-    "version": fields.String,
-}
-
-evaluation_log_list_model = console_ns.model(
-    "EvaluationLogList",
-    {
-        "data": fields.List(fields.Nested(console_ns.model("EvaluationLog", evaluation_log_fields))),
-    },
-)
-
-customized_matrix_fields = {
-    "evaluation_workflow_id": fields.String,
-    "input_fields": fields.Raw,
-    "output_fields": fields.Raw,
-}
-
-condition_fields = {
-    "name": fields.List(fields.String),
-    "comparison_operator": fields.String,
-    "value": fields.String,
-}
-
-judgement_conditions_fields = {
-    "logical_operator": fields.String,
-    "conditions": fields.List(fields.Nested(console_ns.model("EvaluationCondition", condition_fields))),
-}
-
-evaluation_detail_fields = {
-    "evaluation_model": fields.String,
-    "evaluation_model_provider": fields.String,
-    "customized_matrix": fields.Nested(
-        console_ns.model("EvaluationCustomizedMatrix", customized_matrix_fields),
-        allow_null=True,
-    ),
-    "judgement_conditions": fields.Nested(
-        console_ns.model("EvaluationJudgementConditions", judgement_conditions_fields),
-        allow_null=True,
-    ),
-}
-
-evaluation_detail_model = console_ns.model("EvaluationDetail", evaluation_detail_fields)
-
-
-def get_evaluation_target(view_func: Callable[P, R]):
-    """
-    Decorator to resolve polymorphic evaluation target (app or snippet).
-
-    Validates the target_type parameter and fetches the corresponding
-    model (App or CustomizedSnippet) with tenant isolation.
-    """
-
-    @wraps(view_func)
-    def decorated_view(*args: P.args, **kwargs: P.kwargs):
-        target_type = kwargs.get("evaluate_target_type")
-        target_id = kwargs.get("evaluate_target_id")
-
-        if target_type not in EVALUATE_TARGET_TYPES:
-            raise NotFound(f"Invalid evaluation target type: {target_type}")
-
-        _, current_tenant_id = current_account_with_tenant()
-
-        target_id = str(target_id)
-
-        # Remove path parameters
-        del kwargs["evaluate_target_type"]
-        del kwargs["evaluate_target_id"]
-
-        target: Union[App, CustomizedSnippet] | None = None
-
-        if target_type == "app":
-            target = (
-                db.session.query(App).where(App.id == target_id, App.tenant_id == current_tenant_id).first()
-            )
-        elif target_type == "snippets":
-            target = (
-                db.session.query(CustomizedSnippet)
-                .where(CustomizedSnippet.id == target_id, CustomizedSnippet.tenant_id == current_tenant_id)
-                .first()
-            )
-
-        if not target:
-            raise NotFound(f"{str(target_type)} not found")
-
-        kwargs["target"] = target
-        kwargs["target_type"] = target_type
-
-        return view_func(*args, **kwargs)
-
-    return decorated_view
-
-
-@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/dataset-template/download")
-class EvaluationDatasetTemplateDownloadApi(Resource):
-    @console_ns.doc("download_evaluation_dataset_template")
-    @console_ns.response(200, "Template download URL generated successfully")
-    @console_ns.response(404, "Target not found")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_evaluation_target
-    @edit_permission_required
-    def post(self, target: Union[App, CustomizedSnippet], target_type: str):
-        """
-        Download evaluation dataset template.
-
-        Generates a download URL for the evaluation dataset template
-        based on the target type (app or snippets).
-        """
-        # TODO: Implement actual template generation logic
-        # This is a placeholder implementation
-        return {
-            "download_url": f"/api/evaluation/{target_type}/{target.id}/template.csv",
-        }
-
-
-@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation")
-class EvaluationDetailApi(Resource):
-    @console_ns.doc("get_evaluation_detail")
-    @console_ns.response(200, "Evaluation details retrieved successfully", evaluation_detail_model)
-    @console_ns.response(404, "Target not found")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_evaluation_target
-    def get(self, target: Union[App, CustomizedSnippet], target_type: str):
-        """
-        Get evaluation details for the target.
-
-        Returns evaluation configuration including model settings,
-        customized matrix, and judgement conditions.
-        """
-        # TODO: Implement actual evaluation detail retrieval
-        # This is a placeholder implementation
-        return {
-            "evaluation_model": None,
-            "evaluation_model_provider": None,
-            "customized_matrix": None,
-            "judgement_conditions": None,
-        }
-
-
-@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation/logs")
-class EvaluationLogsApi(Resource):
-    @console_ns.doc("get_evaluation_logs")
-    @console_ns.response(200, "Evaluation logs retrieved successfully", evaluation_log_list_model)
-    @console_ns.response(404, "Target not found")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_evaluation_target
-    def get(self, target: Union[App, CustomizedSnippet], target_type: str):
-        """
-        Get offline evaluation logs for the target.
-
-        Returns a list of evaluation runs with test files,
-        result files, and version information.
-        """
-        # TODO: Implement actual evaluation logs retrieval
-        # This is a placeholder implementation
-        return {
-            "data": [],
-        }
-
-
-@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation/files/<uuid:file_id>")
-class EvaluationFileDownloadApi(Resource):
-    @console_ns.doc("download_evaluation_file")
-    @console_ns.response(200, "File download URL generated successfully")
-    @console_ns.response(404, "Target or file not found")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_evaluation_target
-    def get(self, target: Union[App, CustomizedSnippet], target_type: str, file_id: str):
-        """
-        Download evaluation test file or result file.
-
-        Returns file information and download URL for the specified file.
-        """
-        file_id = str(file_id)
-
-        # TODO: Implement actual file download logic
-        # This is a placeholder implementation
-        return {
-            "created_at": None,
-            "created_by": None,
-            "test_file": None,
-            "result_file": None,
-            "version": None,
-        }
-
-
-@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation/version")
-class EvaluationVersionApi(Resource):
-    @console_ns.doc("get_evaluation_version_detail")
-    @console_ns.expect(console_ns.models.get(VersionQuery.__name__))
-    @console_ns.response(200, "Version details retrieved successfully")
-    @console_ns.response(404, "Target or version not found")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_evaluation_target
-    def get(self, target: Union[App, CustomizedSnippet], target_type: str):
-        """
-        Get evaluation target version details.
-
-        Returns the workflow graph for the specified version.
-        """
-        version = request.args.get("version")
-
-        if not version:
-            return {"message": "version parameter is required"}, 400
-
-        # TODO: Implement actual version detail retrieval
-        # For now, return the current graph if available
-        graph = {}
-        if target_type == "snippets" and isinstance(target, CustomizedSnippet):
-            graph = target.graph_dict
-
-        return {
-            "graph": graph,
-        }

api/controllers/console/snippets/payloads.py

@@ -1,75 +0,0 @@
-from typing import Any, Literal
-
-from pydantic import BaseModel, Field
-
-
-class SnippetListQuery(BaseModel):
-    """Query parameters for listing snippets."""
-
-    page: int = Field(default=1, ge=1, le=99999)
-    limit: int = Field(default=20, ge=1, le=100)
-    keyword: str | None = None
-
-
-class IconInfo(BaseModel):
-    """Icon information model."""
-
-    icon: str | None = None
-    icon_type: Literal["emoji", "image"] | None = None
-    icon_background: str | None = None
-    icon_url: str | None = None
-
-
-class InputFieldDefinition(BaseModel):
-    """Input field definition for snippet parameters."""
-
-    default: str | None = None
-    hint: bool | None = None
-    label: str | None = None
-    max_length: int | None = None
-    options: list[str] | None = None
-    placeholder: str | None = None
-    required: bool | None = None
-    type: str | None = None  # e.g., "text-input"
-
-
-class CreateSnippetPayload(BaseModel):
-    """Payload for creating a new snippet."""
-
-    name: str = Field(..., min_length=1, max_length=255)
-    description: str | None = Field(default=None, max_length=2000)
-    type: Literal["node", "group"] = "node"
-    icon_info: IconInfo | None = None
-    graph: dict[str, Any] | None = None
-    input_fields: list[InputFieldDefinition] | None = Field(default_factory=list)
-
-
-class UpdateSnippetPayload(BaseModel):
-    """Payload for updating a snippet."""
-
-    name: str | None = Field(default=None, min_length=1, max_length=255)
-    description: str | None = Field(default=None, max_length=2000)
-    icon_info: IconInfo | None = None
-
-
-class SnippetDraftSyncPayload(BaseModel):
-    """Payload for syncing snippet draft workflow."""
-
-    graph: dict[str, Any]
-    hash: str | None = None
-    environment_variables: list[dict[str, Any]] | None = None
-    conversation_variables: list[dict[str, Any]] | None = None
-    input_variables: list[dict[str, Any]] | None = None
-
-
-class WorkflowRunQuery(BaseModel):
-    """Query parameters for workflow runs."""
-
-    last_id: str | None = None
-    limit: int = Field(default=20, ge=1, le=100)
-
-
-class PublishWorkflowPayload(BaseModel):
-    """Payload for publishing snippet workflow."""
-
-    knowledge_base_setting: dict[str, Any] | None = None

api/controllers/console/snippets/snippet_workflow.py

@@ -1,306 +0,0 @@
-import logging
-from collections.abc import Callable
-from functools import wraps
-from typing import ParamSpec, TypeVar
-
-from flask import request
-from flask_restx import Resource, marshal_with
-from sqlalchemy.orm import Session
-from werkzeug.exceptions import NotFound
-
-from controllers.common.schema import register_schema_models
-from controllers.console import console_ns
-from controllers.console.app.error import DraftWorkflowNotExist, DraftWorkflowNotSync
-from controllers.console.app.workflow import workflow_model
-from controllers.console.app.workflow_run import (
-    workflow_run_detail_model,
-    workflow_run_node_execution_list_model,
-    workflow_run_pagination_model,
-)
-from controllers.console.snippets.payloads import (
-    PublishWorkflowPayload,
-    SnippetDraftSyncPayload,
-    WorkflowRunQuery,
-)
-from controllers.console.wraps import (
-    account_initialization_required,
-    edit_permission_required,
-    setup_required,
-)
-from extensions.ext_database import db
-from factories import variable_factory
-from libs.helper import TimestampField
-from libs.login import current_account_with_tenant, login_required
-from models.snippet import CustomizedSnippet
-from services.errors.app import WorkflowHashNotEqualError
-from services.snippet_service import SnippetService
-
-logger = logging.getLogger(__name__)
-
-P = ParamSpec("P")
-R = TypeVar("R")
-
-# Register Pydantic models with Swagger
-register_schema_models(
-    console_ns,
-    SnippetDraftSyncPayload,
-    WorkflowRunQuery,
-    PublishWorkflowPayload,
-)
-
-
-class SnippetNotFoundError(Exception):
-    """Snippet not found error."""
-
-    pass
-
-
-def get_snippet(view_func: Callable[P, R]):
-    """Decorator to fetch and validate snippet access."""
-
-    @wraps(view_func)
-    def decorated_view(*args: P.args, **kwargs: P.kwargs):
-        if not kwargs.get("snippet_id"):
-            raise ValueError("missing snippet_id in path parameters")
-
-        _, current_tenant_id = current_account_with_tenant()
-
-        snippet_id = str(kwargs.get("snippet_id"))
-        del kwargs["snippet_id"]
-
-        snippet = SnippetService.get_snippet_by_id(
-            snippet_id=snippet_id,
-            tenant_id=current_tenant_id,
-        )
-
-        if not snippet:
-            raise NotFound("Snippet not found")
-
-        kwargs["snippet"] = snippet
-
-        return view_func(*args, **kwargs)
-
-    return decorated_view
-
-
-@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft")
-class SnippetDraftWorkflowApi(Resource):
-    @console_ns.doc("get_snippet_draft_workflow")
-    @console_ns.response(200, "Draft workflow retrieved successfully", workflow_model)
-    @console_ns.response(404, "Snippet or draft workflow not found")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_snippet
-    @edit_permission_required
-    @marshal_with(workflow_model)
-    def get(self, snippet: CustomizedSnippet):
-        """Get draft workflow for snippet."""
-        snippet_service = SnippetService()
-        workflow = snippet_service.get_draft_workflow(snippet=snippet)
-
-        if not workflow:
-            raise DraftWorkflowNotExist()
-
-        return workflow
-
-    @console_ns.doc("sync_snippet_draft_workflow")
-    @console_ns.expect(console_ns.models.get(SnippetDraftSyncPayload.__name__))
-    @console_ns.response(200, "Draft workflow synced successfully")
-    @console_ns.response(400, "Hash mismatch")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_snippet
-    @edit_permission_required
-    def post(self, snippet: CustomizedSnippet):
-        """Sync draft workflow for snippet."""
-        current_user, _ = current_account_with_tenant()
-
-        payload = SnippetDraftSyncPayload.model_validate(console_ns.payload or {})
-
-        try:
-            environment_variables_list = payload.environment_variables or []
-            environment_variables = [
-                variable_factory.build_environment_variable_from_mapping(obj) for obj in environment_variables_list
-            ]
-            conversation_variables_list = payload.conversation_variables or []
-            conversation_variables = [
-                variable_factory.build_conversation_variable_from_mapping(obj) for obj in conversation_variables_list
-            ]
-            snippet_service = SnippetService()
-            workflow = snippet_service.sync_draft_workflow(
-                snippet=snippet,
-                graph=payload.graph,
-                unique_hash=payload.hash,
-                account=current_user,
-                environment_variables=environment_variables,
-                conversation_variables=conversation_variables,
-                input_variables=payload.input_variables,
-            )
-        except WorkflowHashNotEqualError:
-            raise DraftWorkflowNotSync()
-
-        return {
-            "result": "success",
-            "hash": workflow.unique_hash,
-            "updated_at": TimestampField().format(workflow.updated_at or workflow.created_at),
-        }
-
-
-@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/config")
-class SnippetDraftConfigApi(Resource):
-    @console_ns.doc("get_snippet_draft_config")
-    @console_ns.response(200, "Draft config retrieved successfully")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_snippet
-    @edit_permission_required
-    def get(self, snippet: CustomizedSnippet):
-        """Get snippet draft workflow configuration limits."""
-        return {
-            "parallel_depth_limit": 3,
-        }
-
-
-@console_ns.route("/snippets/<uuid:snippet_id>/workflows/publish")
-class SnippetPublishedWorkflowApi(Resource):
-    @console_ns.doc("get_snippet_published_workflow")
-    @console_ns.response(200, "Published workflow retrieved successfully", workflow_model)
-    @console_ns.response(404, "Snippet not found")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_snippet
-    @edit_permission_required
-    @marshal_with(workflow_model)
-    def get(self, snippet: CustomizedSnippet):
-        """Get published workflow for snippet."""
-        if not snippet.is_published:
-            return None
-
-        snippet_service = SnippetService()
-        workflow = snippet_service.get_published_workflow(snippet=snippet)
-
-        return workflow
-
-    @console_ns.doc("publish_snippet_workflow")
-    @console_ns.expect(console_ns.models.get(PublishWorkflowPayload.__name__))
-    @console_ns.response(200, "Workflow published successfully")
-    @console_ns.response(400, "No draft workflow found")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_snippet
-    @edit_permission_required
-    def post(self, snippet: CustomizedSnippet):
-        """Publish snippet workflow."""
-        current_user, _ = current_account_with_tenant()
-        snippet_service = SnippetService()
-
-        with Session(db.engine) as session:
-            snippet = session.merge(snippet)
-            try:
-                workflow = snippet_service.publish_workflow(
-                    session=session,
-                    snippet=snippet,
-                    account=current_user,
-                )
-                workflow_created_at = TimestampField().format(workflow.created_at)
-                session.commit()
-            except ValueError as e:
-                return {"message": str(e)}, 400
-
-        return {
-            "result": "success",
-            "created_at": workflow_created_at,
-        }
-
-
-@console_ns.route("/snippets/<uuid:snippet_id>/workflows/default-workflow-block-configs")
-class SnippetDefaultBlockConfigsApi(Resource):
-    @console_ns.doc("get_snippet_default_block_configs")
-    @console_ns.response(200, "Default block configs retrieved successfully")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_snippet
-    @edit_permission_required
-    def get(self, snippet: CustomizedSnippet):
-        """Get default block configurations for snippet workflow."""
-        snippet_service = SnippetService()
-        return snippet_service.get_default_block_configs()
-
-
-@console_ns.route("/snippets/<uuid:snippet_id>/workflow-runs")
-class SnippetWorkflowRunsApi(Resource):
-    @console_ns.doc("list_snippet_workflow_runs")
-    @console_ns.response(200, "Workflow runs retrieved successfully", workflow_run_pagination_model)
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_snippet
-    @marshal_with(workflow_run_pagination_model)
-    def get(self, snippet: CustomizedSnippet):
-        """List workflow runs for snippet."""
-        query = WorkflowRunQuery.model_validate(
-            {
-                "last_id": request.args.get("last_id"),
-                "limit": request.args.get("limit", type=int, default=20),
-            }
-        )
-        args = {
-            "last_id": query.last_id,
-            "limit": query.limit,
-        }
-
-        snippet_service = SnippetService()
-        result = snippet_service.get_snippet_workflow_runs(snippet=snippet, args=args)
-
-        return result
-
-
-@console_ns.route("/snippets/<uuid:snippet_id>/workflow-runs/<uuid:run_id>")
-class SnippetWorkflowRunDetailApi(Resource):
-    @console_ns.doc("get_snippet_workflow_run_detail")
-    @console_ns.response(200, "Workflow run detail retrieved successfully", workflow_run_detail_model)
-    @console_ns.response(404, "Workflow run not found")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_snippet
-    @marshal_with(workflow_run_detail_model)
-    def get(self, snippet: CustomizedSnippet, run_id):
-        """Get workflow run detail for snippet."""
-        run_id = str(run_id)
-
-        snippet_service = SnippetService()
-        workflow_run = snippet_service.get_snippet_workflow_run(snippet=snippet, run_id=run_id)
-
-        if not workflow_run:
-            raise NotFound("Workflow run not found")
-
-        return workflow_run
-
-
-@console_ns.route("/snippets/<uuid:snippet_id>/workflow-runs/<uuid:run_id>/node-executions")
-class SnippetWorkflowRunNodeExecutionsApi(Resource):
-    @console_ns.doc("list_snippet_workflow_run_node_executions")
-    @console_ns.response(200, "Node executions retrieved successfully", workflow_run_node_execution_list_model)
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @get_snippet
-    @marshal_with(workflow_run_node_execution_list_model)
-    def get(self, snippet: CustomizedSnippet, run_id):
-        """List node executions for a workflow run."""
-        run_id = str(run_id)
-
-        snippet_service = SnippetService()
-        node_executions = snippet_service.get_snippet_workflow_run_node_executions(
-            snippet=snippet,
-            run_id=run_id,
-        )
-
-        return {"data": node_executions}

api/controllers/console/workspace/snippets.py

@@ -1,202 +0,0 @@
-import logging
-
-from flask import request
-from flask_restx import Resource, marshal, marshal_with
-from sqlalchemy.orm import Session
-from werkzeug.exceptions import NotFound
-
-from controllers.common.schema import register_schema_models
-from controllers.console import console_ns
-from controllers.console.snippets.payloads import (
-    CreateSnippetPayload,
-    SnippetListQuery,
-    UpdateSnippetPayload,
-)
-from controllers.console.wraps import (
-    account_initialization_required,
-    edit_permission_required,
-    setup_required,
-)
-from extensions.ext_database import db
-from fields.snippet_fields import snippet_fields, snippet_list_fields, snippet_pagination_fields
-from libs.login import current_account_with_tenant, login_required
-from models.snippet import SnippetType
-from services.snippet_service import SnippetService
-
-logger = logging.getLogger(__name__)
-
-# Register Pydantic models with Swagger
-register_schema_models(
-    console_ns,
-    SnippetListQuery,
-    CreateSnippetPayload,
-    UpdateSnippetPayload,
-)
-
-# Create namespace models for marshaling
-snippet_model = console_ns.model("Snippet", snippet_fields)
-snippet_list_model = console_ns.model("SnippetList", snippet_list_fields)
-snippet_pagination_model = console_ns.model("SnippetPagination", snippet_pagination_fields)
-
-
-@console_ns.route("/workspaces/current/customized-snippets")
-class CustomizedSnippetsApi(Resource):
-    @console_ns.doc("list_customized_snippets")
-    @console_ns.expect(console_ns.models.get(SnippetListQuery.__name__))
-    @console_ns.response(200, "Snippets retrieved successfully", snippet_pagination_model)
-    @setup_required
-    @login_required
-    @account_initialization_required
-    def get(self):
-        """List customized snippets with pagination and search."""
-        _, current_tenant_id = current_account_with_tenant()
-
-        query_params = request.args.to_dict()
-        query = SnippetListQuery.model_validate(query_params)
-
-        snippets, total, has_more = SnippetService.get_snippets(
-            tenant_id=current_tenant_id,
-            page=query.page,
-            limit=query.limit,
-            keyword=query.keyword,
-        )
-
-        return {
-            "data": marshal(snippets, snippet_list_fields),
-            "page": query.page,
-            "limit": query.limit,
-            "total": total,
-            "has_more": has_more,
-        }, 200
-
-    @console_ns.doc("create_customized_snippet")
-    @console_ns.expect(console_ns.models.get(CreateSnippetPayload.__name__))
-    @console_ns.response(201, "Snippet created successfully", snippet_model)
-    @console_ns.response(400, "Invalid request or name already exists")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @edit_permission_required
-    def post(self):
-        """Create a new customized snippet."""
-        current_user, current_tenant_id = current_account_with_tenant()
-
-        payload = CreateSnippetPayload.model_validate(console_ns.payload or {})
-
-        try:
-            snippet_type = SnippetType(payload.type)
-        except ValueError:
-            snippet_type = SnippetType.NODE
-
-        try:
-            snippet = SnippetService.create_snippet(
-                tenant_id=current_tenant_id,
-                name=payload.name,
-                description=payload.description,
-                snippet_type=snippet_type,
-                icon_info=payload.icon_info.model_dump() if payload.icon_info else None,
-                graph=payload.graph,
-                input_fields=[f.model_dump() for f in payload.input_fields] if payload.input_fields else None,
-                account=current_user,
-            )
-        except ValueError as e:
-            return {"message": str(e)}, 400
-
-        return marshal(snippet, snippet_fields), 201
-
-
-@console_ns.route("/workspaces/current/customized-snippets/<uuid:snippet_id>")
-class CustomizedSnippetDetailApi(Resource):
-    @console_ns.doc("get_customized_snippet")
-    @console_ns.response(200, "Snippet retrieved successfully", snippet_model)
-    @console_ns.response(404, "Snippet not found")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    def get(self, snippet_id: str):
-        """Get customized snippet details."""
-        _, current_tenant_id = current_account_with_tenant()
-
-        snippet = SnippetService.get_snippet_by_id(
-            snippet_id=str(snippet_id),
-            tenant_id=current_tenant_id,
-        )
-
-        if not snippet:
-            raise NotFound("Snippet not found")
-
-        return marshal(snippet, snippet_fields), 200
-
-    @console_ns.doc("update_customized_snippet")
-    @console_ns.expect(console_ns.models.get(UpdateSnippetPayload.__name__))
-    @console_ns.response(200, "Snippet updated successfully", snippet_model)
-    @console_ns.response(400, "Invalid request or name already exists")
-    @console_ns.response(404, "Snippet not found")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @edit_permission_required
-    def patch(self, snippet_id: str):
-        """Update customized snippet."""
-        current_user, current_tenant_id = current_account_with_tenant()
-
-        snippet = SnippetService.get_snippet_by_id(
-            snippet_id=str(snippet_id),
-            tenant_id=current_tenant_id,
-        )
-
-        if not snippet:
-            raise NotFound("Snippet not found")
-
-        payload = UpdateSnippetPayload.model_validate(console_ns.payload or {})
-        update_data = payload.model_dump(exclude_unset=True)
-
-        if "icon_info" in update_data and update_data["icon_info"] is not None:
-            update_data["icon_info"] = payload.icon_info.model_dump() if payload.icon_info else None
-
-        if not update_data:
-            return {"message": "No valid fields to update"}, 400
-
-        try:
-            with Session(db.engine, expire_on_commit=False) as session:
-                snippet = session.merge(snippet)
-                snippet = SnippetService.update_snippet(
-                    session=session,
-                    snippet=snippet,
-                    account_id=current_user.id,
-                    data=update_data,
-                )
-                session.commit()
-        except ValueError as e:
-            return {"message": str(e)}, 400
-
-        return marshal(snippet, snippet_fields), 200
-
-    @console_ns.doc("delete_customized_snippet")
-    @console_ns.response(204, "Snippet deleted successfully")
-    @console_ns.response(404, "Snippet not found")
-    @setup_required
-    @login_required
-    @account_initialization_required
-    @edit_permission_required
-    def delete(self, snippet_id: str):
-        """Delete customized snippet."""
-        _, current_tenant_id = current_account_with_tenant()
-
-        snippet = SnippetService.get_snippet_by_id(
-            snippet_id=str(snippet_id),
-            tenant_id=current_tenant_id,
-        )
-
-        if not snippet:
-            raise NotFound("Snippet not found")
-
-        with Session(db.engine) as session:
-            snippet = session.merge(snippet)
-            SnippetService.delete_snippet(
-                session=session,
-                snippet=snippet,
-            )
-            session.commit()
-
-        return "", 204

api/core/mcp/session/base_session.py

@@ -347,7 +347,7 @@ class BaseSession(
                         message.message.root.model_dump(by_alias=True, mode="json", exclude_none=True)
                     )
 
-                    responder = RequestResponder(
+                    responder = RequestResponder[ReceiveRequestT, SendResultT](
                         request_id=message.message.root.id,
                         request_meta=validated_request.root.params.meta if validated_request.root.params else None,
                         request=validated_request,

api/core/model_runtime/model_providers/__base/large_language_model.py

@@ -283,7 +283,7 @@ class LargeLanguageModel(AIModel):
             # TODO
             raise self._transform_invoke_error(e)
 
-        if stream and isinstance(result, Generator):
+        if stream and not isinstance(result, LLMResult):
             return self._invoke_result_generator(
                 model=model,
                 result=result,

api/core/model_runtime/model_providers/model_provider_factory.py

@@ -314,6 +314,8 @@ class ModelProviderFactory:
         elif model_type == ModelType.TTS:
             return TTSModel.model_validate(init_params)
 
+        raise ValueError(f"Unsupported model type: {model_type}")
+
     def get_provider_icon(self, provider: str, icon_type: str, lang: str) -> tuple[bytes, str]:
         """
         Get provider icon

api/fields/snippet_fields.py

@@ -1,45 +0,0 @@
-from flask_restx import fields
-
-from fields.member_fields import simple_account_fields
-from libs.helper import TimestampField
-
-# Snippet list item fields (lightweight for list display)
-snippet_list_fields = {
-    "id": fields.String,
-    "name": fields.String,
-    "description": fields.String,
-    "type": fields.String,
-    "version": fields.Integer,
-    "use_count": fields.Integer,
-    "is_published": fields.Boolean,
-    "icon_info": fields.Raw,
-    "created_at": TimestampField,
-    "updated_at": TimestampField,
-}
-
-# Full snippet fields (includes creator info and graph data)
-snippet_fields = {
-    "id": fields.String,
-    "name": fields.String,
-    "description": fields.String,
-    "type": fields.String,
-    "version": fields.Integer,
-    "use_count": fields.Integer,
-    "is_published": fields.Boolean,
-    "icon_info": fields.Raw,
-    "graph": fields.Raw(attribute="graph_dict"),
-    "input_fields": fields.Raw(attribute="input_fields_list"),
-    "created_by": fields.Nested(simple_account_fields, attribute="created_by_account", allow_null=True),
-    "created_at": TimestampField,
-    "updated_by": fields.Nested(simple_account_fields, attribute="updated_by_account", allow_null=True),
-    "updated_at": TimestampField,
-}
-
-# Pagination response fields
-snippet_pagination_fields = {
-    "data": fields.List(fields.Nested(snippet_list_fields)),
-    "page": fields.Integer,
-    "limit": fields.Integer,
-    "total": fields.Integer,
-    "has_more": fields.Boolean,
-}

api/libs/gmpy2_pkcs10aep_cipher.py

@@ -136,7 +136,7 @@ class PKCS1OAepCipher:
         # Step 3a (OS2IP)
         em_int = bytes_to_long(em)
         # Step 3b (RSAEP)
-        m_int = gmpy2.powmod(em_int, self._key.e, self._key.n)
+        m_int: int = gmpy2.powmod(em_int, self._key.e, self._key.n)  # type: ignore[attr-defined]
         # Step 3c (I2OSP)
         c = long_to_bytes(m_int, k)
         return c
@@ -169,7 +169,7 @@ class PKCS1OAepCipher:
         ct_int = bytes_to_long(ciphertext)
         # Step 2b (RSADP)
         # m_int = self._key._decrypt(ct_int)
-        m_int = gmpy2.powmod(ct_int, self._key.d, self._key.n)
+        m_int: int = gmpy2.powmod(ct_int, self._key.d, self._key.n)  # type: ignore[attr-defined]
         # Complete step 2c (I2OSP)
         em = long_to_bytes(m_int, k)
         # Step 3a

api/migrations/versions/2026_01_29_1200-1c05e80d2380_add_customized_snippets_table.py

@@ -1,83 +0,0 @@
-"""add_customized_snippets_table
-
-Revision ID: 1c05e80d2380
-Revises: 788d3099ae3a
-Create Date: 2026-01-29 12:00:00.000000
-
-"""
-
-import sqlalchemy as sa
-from alembic import op
-from sqlalchemy.dialects import postgresql
-
-import models as models
-
-
-def _is_pg(conn):
-    return conn.dialect.name == "postgresql"
-
-
-# revision identifiers, used by Alembic.
-revision = "1c05e80d2380"
-down_revision = "788d3099ae3a"
-branch_labels = None
-depends_on = None
-
-
-def upgrade():
-    conn = op.get_bind()
-
-    if _is_pg(conn):
-        op.create_table(
-            "customized_snippets",
-            sa.Column("id", models.types.StringUUID(), server_default=sa.text("uuidv7()"), nullable=False),
-            sa.Column("tenant_id", models.types.StringUUID(), nullable=False),
-            sa.Column("name", sa.String(length=255), nullable=False),
-            sa.Column("description", sa.Text(), nullable=True),
-            sa.Column("type", sa.String(length=50), server_default=sa.text("'node'"), nullable=False),
-            sa.Column("workflow_id", models.types.StringUUID(), nullable=True),
-            sa.Column("is_published", sa.Boolean(), server_default=sa.text("false"), nullable=False),
-            sa.Column("version", sa.Integer(), server_default=sa.text("1"), nullable=False),
-            sa.Column("use_count", sa.Integer(), server_default=sa.text("0"), nullable=False),
-            sa.Column("icon_info", postgresql.JSONB(astext_type=sa.Text()), nullable=True),
-            sa.Column("graph", sa.Text(), nullable=True),
-            sa.Column("input_fields", sa.Text(), nullable=True),
-            sa.Column("created_by", models.types.StringUUID(), nullable=True),
-            sa.Column("created_at", sa.DateTime(), server_default=sa.text("CURRENT_TIMESTAMP"), nullable=False),
-            sa.Column("updated_by", models.types.StringUUID(), nullable=True),
-            sa.Column("updated_at", sa.DateTime(), server_default=sa.text("CURRENT_TIMESTAMP"), nullable=False),
-            sa.PrimaryKeyConstraint("id", name="customized_snippet_pkey"),
-            sa.UniqueConstraint("tenant_id", "name", name="customized_snippet_tenant_name_key"),
-        )
-    else:
-        op.create_table(
-            "customized_snippets",
-            sa.Column("id", models.types.StringUUID(), nullable=False),
-            sa.Column("tenant_id", models.types.StringUUID(), nullable=False),
-            sa.Column("name", sa.String(length=255), nullable=False),
-            sa.Column("description", models.types.LongText(), nullable=True),
-            sa.Column("type", sa.String(length=50), server_default=sa.text("'node'"), nullable=False),
-            sa.Column("workflow_id", models.types.StringUUID(), nullable=True),
-            sa.Column("is_published", sa.Boolean(), server_default=sa.text("false"), nullable=False),
-            sa.Column("version", sa.Integer(), server_default=sa.text("1"), nullable=False),
-            sa.Column("use_count", sa.Integer(), server_default=sa.text("0"), nullable=False),
-            sa.Column("icon_info", models.types.AdjustedJSON(astext_type=sa.Text()), nullable=True),
-            sa.Column("graph", models.types.LongText(), nullable=True),
-            sa.Column("input_fields", models.types.LongText(), nullable=True),
-            sa.Column("created_by", models.types.StringUUID(), nullable=True),
-            sa.Column("created_at", sa.DateTime(), server_default=sa.func.current_timestamp(), nullable=False),
-            sa.Column("updated_by", models.types.StringUUID(), nullable=True),
-            sa.Column("updated_at", sa.DateTime(), server_default=sa.func.current_timestamp(), nullable=False),
-            sa.PrimaryKeyConstraint("id", name="customized_snippet_pkey"),
-            sa.UniqueConstraint("tenant_id", "name", name="customized_snippet_tenant_name_key"),
-        )
-
-    with op.batch_alter_table("customized_snippets", schema=None) as batch_op:
-        batch_op.create_index("customized_snippet_tenant_idx", ["tenant_id"], unique=False)
-
-
-def downgrade():
-    with op.batch_alter_table("customized_snippets", schema=None) as batch_op:
-        batch_op.drop_index("customized_snippet_tenant_idx")
-
-    op.drop_table("customized_snippets")

api/models/__init__.py

@@ -79,7 +79,6 @@ from .provider import (
     TenantDefaultModel,
     TenantPreferredModelProvider,
 )
-from .snippet import CustomizedSnippet, SnippetType
 from .source import DataSourceApiKeyAuthBinding, DataSourceOauthBinding
 from .task import CeleryTask, CeleryTaskSet
 from .tools import (
@@ -139,7 +138,6 @@ __all__ = [
     "Conversation",
     "ConversationVariable",
     "CreatorUserRole",
-    "CustomizedSnippet",
     "DataSourceApiKeyAuthBinding",
     "DataSourceOauthBinding",
     "Dataset",
@@ -181,7 +179,6 @@ __all__ = [
     "RecommendedApp",
     "SavedMessage",
     "Site",
-    "SnippetType",
     "Tag",
     "TagBinding",
     "Tenant",

api/models/snippet.py

@@ -1,96 +0,0 @@
-import json
-from datetime import datetime
-from enum import StrEnum
-from typing import Any
-
-import sqlalchemy as sa
-from sqlalchemy import DateTime, String, func
-from sqlalchemy.orm import Mapped, mapped_column
-
-from libs.uuid_utils import uuidv7
-
-from .account import Account
-from .base import Base
-from .engine import db
-from .types import AdjustedJSON, LongText, StringUUID
-
-
-class SnippetType(StrEnum):
-    """Snippet Type Enum"""
-
-    NODE = "node"
-    GROUP = "group"
-
-
-class CustomizedSnippet(Base):
-    """
-    Customized Snippet Model
-
-    Stores reusable workflow components (nodes or node groups) that can be
-    shared across applications within a workspace.
-    """
-
-    __tablename__ = "customized_snippets"
-    __table_args__ = (
-        sa.PrimaryKeyConstraint("id", name="customized_snippet_pkey"),
-        sa.Index("customized_snippet_tenant_idx", "tenant_id"),
-        sa.UniqueConstraint("tenant_id", "name", name="customized_snippet_tenant_name_key"),
-    )
-
-    id: Mapped[str] = mapped_column(StringUUID, default=lambda: str(uuidv7()))
-    tenant_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
-    name: Mapped[str] = mapped_column(String(255), nullable=False)
-    description: Mapped[str | None] = mapped_column(LongText, nullable=True)
-    type: Mapped[str] = mapped_column(String(50), nullable=False, server_default=sa.text("'node'"))
-
-    # Workflow reference for published version
-    workflow_id: Mapped[str | None] = mapped_column(StringUUID, nullable=True)
-
-    # State flags
-    is_published: Mapped[bool] = mapped_column(sa.Boolean, nullable=False, server_default=sa.text("false"))
-    version: Mapped[int] = mapped_column(sa.Integer, nullable=False, server_default=sa.text("1"))
-    use_count: Mapped[int] = mapped_column(sa.Integer, nullable=False, server_default=sa.text("0"))
-
-    # Visual customization
-    icon_info: Mapped[dict | None] = mapped_column(AdjustedJSON, nullable=True)
-
-    # Snippet configuration (stored as JSON text)
-    graph: Mapped[str | None] = mapped_column(LongText, nullable=True)
-    input_fields: Mapped[str | None] = mapped_column(LongText, nullable=True)
-
-    # Audit fields
-    created_by: Mapped[str | None] = mapped_column(StringUUID, nullable=True)
-    created_at: Mapped[datetime] = mapped_column(DateTime, nullable=False, server_default=func.current_timestamp())
-    updated_by: Mapped[str | None] = mapped_column(StringUUID, nullable=True)
-    updated_at: Mapped[datetime] = mapped_column(
-        DateTime, nullable=False, server_default=func.current_timestamp(), onupdate=func.current_timestamp()
-    )
-
-    @property
-    def graph_dict(self) -> dict[str, Any]:
-        """Parse graph JSON to dict."""
-        return json.loads(self.graph) if self.graph else {}
-
-    @property
-    def input_fields_list(self) -> list[dict[str, Any]]:
-        """Parse input_fields JSON to list."""
-        return json.loads(self.input_fields) if self.input_fields else []
-
-    @property
-    def created_by_account(self) -> Account | None:
-        """Get the account that created this snippet."""
-        if self.created_by:
-            return db.session.get(Account, self.created_by)
-        return None
-
-    @property
-    def updated_by_account(self) -> Account | None:
-        """Get the account that last updated this snippet."""
-        if self.updated_by:
-            return db.session.get(Account, self.updated_by)
-        return None
-
-    @property
-    def version_str(self) -> str:
-        """Get version as string for API response."""
-        return str(self.version)

api/models/workflow.py

@@ -65,7 +65,6 @@ class WorkflowType(StrEnum):
     WORKFLOW = "workflow"
     CHAT = "chat"
     RAG_PIPELINE = "rag-pipeline"
-    SNIPPET = "snippet"
 
     @classmethod
     def value_of(cls, value: str) -> "WorkflowType":

api/pyproject.toml

@@ -175,6 +175,7 @@ dev = [
     # "locust>=2.40.4",  # Temporarily removed due to compatibility issues. Uncomment when resolved.
     "sseclient-py>=1.8.0",
     "pytest-timeout>=2.4.0",
+    "pytest-xdist>=3.8.0",
 ]
 
 ############################################################

api/services/snippet_service.py

@@ -1,542 +0,0 @@
-import json
-import logging
-from collections.abc import Mapping, Sequence
-from datetime import UTC, datetime
-from typing import Any
-
-from sqlalchemy import func, select
-from sqlalchemy.orm import Session, sessionmaker
-
-from core.variables.variables import VariableBase
-from core.workflow.enums import NodeType
-from core.workflow.nodes.node_mapping import LATEST_VERSION, NODE_TYPE_CLASSES_MAPPING
-from extensions.ext_database import db
-from libs.infinite_scroll_pagination import InfiniteScrollPagination
-from models import Account
-from models.enums import WorkflowRunTriggeredFrom
-from models.snippet import CustomizedSnippet, SnippetType
-from models.workflow import (
-    Workflow,
-    WorkflowNodeExecutionModel,
-    WorkflowRun,
-    WorkflowType,
-)
-from repositories.factory import DifyAPIRepositoryFactory
-from services.errors.app import WorkflowHashNotEqualError
-
-logger = logging.getLogger(__name__)
-
-
-class SnippetService:
-    """Service for managing customized snippets."""
-
-    def __init__(self, session_maker: sessionmaker | None = None):
-        """Initialize SnippetService with repository dependencies."""
-        if session_maker is None:
-            session_maker = sessionmaker(bind=db.engine, expire_on_commit=False)
-        self._node_execution_service_repo = DifyAPIRepositoryFactory.create_api_workflow_node_execution_repository(
-            session_maker
-        )
-        self._workflow_run_repo = DifyAPIRepositoryFactory.create_api_workflow_run_repository(session_maker)
-
-    # --- CRUD Operations ---
-
-    @staticmethod
-    def get_snippets(
-        *,
-        tenant_id: str,
-        page: int = 1,
-        limit: int = 20,
-        keyword: str | None = None,
-    ) -> tuple[Sequence[CustomizedSnippet], int, bool]:
-        """
-        Get paginated list of snippets with optional search.
-
-        :param tenant_id: Tenant ID
-        :param page: Page number (1-indexed)
-        :param limit: Number of items per page
-        :param keyword: Optional search keyword for name/description
-        :return: Tuple of (snippets list, total count, has_more flag)
-        """
-        stmt = (
-            select(CustomizedSnippet)
-            .where(CustomizedSnippet.tenant_id == tenant_id)
-            .order_by(CustomizedSnippet.created_at.desc())
-        )
-
-        if keyword:
-            stmt = stmt.where(
-                CustomizedSnippet.name.ilike(f"%{keyword}%") | CustomizedSnippet.description.ilike(f"%{keyword}%")
-            )
-
-        # Get total count
-        count_stmt = select(func.count()).select_from(stmt.subquery())
-        total = db.session.scalar(count_stmt) or 0
-
-        # Apply pagination
-        stmt = stmt.limit(limit + 1).offset((page - 1) * limit)
-        snippets = list(db.session.scalars(stmt).all())
-
-        has_more = len(snippets) > limit
-        if has_more:
-            snippets = snippets[:-1]
-
-        return snippets, total, has_more
-
-    @staticmethod
-    def get_snippet_by_id(
-        *,
-        snippet_id: str,
-        tenant_id: str,
-    ) -> CustomizedSnippet | None:
-        """
-        Get snippet by ID with tenant isolation.
-
-        :param snippet_id: Snippet ID
-        :param tenant_id: Tenant ID
-        :return: CustomizedSnippet or None
-        """
-        return (
-            db.session.query(CustomizedSnippet)
-            .where(
-                CustomizedSnippet.id == snippet_id,
-                CustomizedSnippet.tenant_id == tenant_id,
-            )
-            .first()
-        )
-
-    @staticmethod
-    def create_snippet(
-        *,
-        tenant_id: str,
-        name: str,
-        description: str | None,
-        snippet_type: SnippetType,
-        icon_info: dict | None,
-        graph: dict | None,
-        input_fields: list[dict] | None,
-        account: Account,
-    ) -> CustomizedSnippet:
-        """
-        Create a new snippet.
-
-        :param tenant_id: Tenant ID
-        :param name: Snippet name (must be unique per tenant)
-        :param description: Snippet description
-        :param snippet_type: Type of snippet (node or group)
-        :param icon_info: Icon information
-        :param graph: Workflow graph structure
-        :param input_fields: Input field definitions
-        :param account: Creator account
-        :return: Created CustomizedSnippet
-        :raises ValueError: If name already exists
-        """
-        # Check if name already exists for this tenant
-        existing = (
-            db.session.query(CustomizedSnippet)
-            .where(
-                CustomizedSnippet.tenant_id == tenant_id,
-                CustomizedSnippet.name == name,
-            )
-            .first()
-        )
-        if existing:
-            raise ValueError(f"Snippet with name '{name}' already exists")
-
-        snippet = CustomizedSnippet(
-            tenant_id=tenant_id,
-            name=name,
-            description=description or "",
-            type=snippet_type.value,
-            icon_info=icon_info,
-            graph=json.dumps(graph) if graph else None,
-            input_fields=json.dumps(input_fields) if input_fields else None,
-            created_by=account.id,
-        )
-
-        db.session.add(snippet)
-        db.session.commit()
-
-        return snippet
-
-    @staticmethod
-    def update_snippet(
-        *,
-        session: Session,
-        snippet: CustomizedSnippet,
-        account_id: str,
-        data: dict,
-    ) -> CustomizedSnippet:
-        """
-        Update snippet attributes.
-
-        :param session: Database session
-        :param snippet: Snippet to update
-        :param account_id: ID of account making the update
-        :param data: Dictionary of fields to update
-        :return: Updated CustomizedSnippet
-        """
-        if "name" in data:
-            # Check if new name already exists for this tenant
-            existing = (
-                session.query(CustomizedSnippet)
-                .where(
-                    CustomizedSnippet.tenant_id == snippet.tenant_id,
-                    CustomizedSnippet.name == data["name"],
-                    CustomizedSnippet.id != snippet.id,
-                )
-                .first()
-            )
-            if existing:
-                raise ValueError(f"Snippet with name '{data['name']}' already exists")
-            snippet.name = data["name"]
-
-        if "description" in data:
-            snippet.description = data["description"]
-
-        if "icon_info" in data:
-            snippet.icon_info = data["icon_info"]
-
-        snippet.updated_by = account_id
-        snippet.updated_at = datetime.now(UTC).replace(tzinfo=None)
-
-        session.add(snippet)
-        return snippet
-
-    @staticmethod
-    def delete_snippet(
-        *,
-        session: Session,
-        snippet: CustomizedSnippet,
-    ) -> bool:
-        """
-        Delete a snippet.
-
-        :param session: Database session
-        :param snippet: Snippet to delete
-        :return: True if deleted successfully
-        """
-        session.delete(snippet)
-        return True
-
-    # --- Workflow Operations ---
-
-    def get_draft_workflow(self, snippet: CustomizedSnippet) -> Workflow | None:
-        """
-        Get draft workflow for snippet.
-
-        :param snippet: CustomizedSnippet instance
-        :return: Draft Workflow or None
-        """
-        workflow = (
-            db.session.query(Workflow)
-            .where(
-                Workflow.tenant_id == snippet.tenant_id,
-                Workflow.app_id == snippet.id,
-                Workflow.type == WorkflowType.SNIPPET.value,
-                Workflow.version == "draft",
-            )
-            .first()
-        )
-        return workflow
-
-    def get_published_workflow(self, snippet: CustomizedSnippet) -> Workflow | None:
-        """
-        Get published workflow for snippet.
-
-        :param snippet: CustomizedSnippet instance
-        :return: Published Workflow or None
-        """
-        if not snippet.workflow_id:
-            return None
-
-        workflow = (
-            db.session.query(Workflow)
-            .where(
-                Workflow.tenant_id == snippet.tenant_id,
-                Workflow.app_id == snippet.id,
-                Workflow.type == WorkflowType.SNIPPET.value,
-                Workflow.id == snippet.workflow_id,
-            )
-            .first()
-        )
-        return workflow
-
-    def sync_draft_workflow(
-        self,
-        *,
-        snippet: CustomizedSnippet,
-        graph: dict,
-        unique_hash: str | None,
-        account: Account,
-        environment_variables: Sequence[VariableBase],
-        conversation_variables: Sequence[VariableBase],
-        input_variables: list[dict] | None = None,
-    ) -> Workflow:
-        """
-        Sync draft workflow for snippet.
-
-        :param snippet: CustomizedSnippet instance
-        :param graph: Workflow graph configuration
-        :param unique_hash: Hash for conflict detection
-        :param account: Account making the change
-        :param environment_variables: Environment variables
-        :param conversation_variables: Conversation variables
-        :param input_variables: Input variables for snippet
-        :return: Synced Workflow
-        :raises WorkflowHashNotEqualError: If hash mismatch
-        """
-        workflow = self.get_draft_workflow(snippet=snippet)
-
-        if workflow and workflow.unique_hash != unique_hash:
-            raise WorkflowHashNotEqualError()
-
-        # Create draft workflow if not found
-        if not workflow:
-            workflow = Workflow(
-                tenant_id=snippet.tenant_id,
-                app_id=snippet.id,
-                features="{}",
-                type=WorkflowType.SNIPPET.value,
-                version="draft",
-                graph=json.dumps(graph),
-                created_by=account.id,
-                environment_variables=environment_variables,
-                conversation_variables=conversation_variables,
-            )
-            db.session.add(workflow)
-            db.session.flush()
-        else:
-            # Update existing draft workflow
-            workflow.graph = json.dumps(graph)
-            workflow.updated_by = account.id
-            workflow.updated_at = datetime.now(UTC).replace(tzinfo=None)
-            workflow.environment_variables = environment_variables
-            workflow.conversation_variables = conversation_variables
-
-        # Update snippet's input_fields if provided
-        if input_variables is not None:
-            snippet.input_fields = json.dumps(input_variables)
-            snippet.updated_by = account.id
-            snippet.updated_at = datetime.now(UTC).replace(tzinfo=None)
-
-        db.session.commit()
-        return workflow
-
-    def publish_workflow(
-        self,
-        *,
-        session: Session,
-        snippet: CustomizedSnippet,
-        account: Account,
-    ) -> Workflow:
-        """
-        Publish the draft workflow as a new version.
-
-        :param session: Database session
-        :param snippet: CustomizedSnippet instance
-        :param account: Account making the change
-        :return: Published Workflow
-        :raises ValueError: If no draft workflow exists
-        """
-        draft_workflow_stmt = select(Workflow).where(
-            Workflow.tenant_id == snippet.tenant_id,
-            Workflow.app_id == snippet.id,
-            Workflow.type == WorkflowType.SNIPPET.value,
-            Workflow.version == "draft",
-        )
-        draft_workflow = session.scalar(draft_workflow_stmt)
-        if not draft_workflow:
-            raise ValueError("No valid workflow found.")
-
-        # Create new published workflow
-        workflow = Workflow.new(
-            tenant_id=snippet.tenant_id,
-            app_id=snippet.id,
-            type=draft_workflow.type,
-            version=str(datetime.now(UTC).replace(tzinfo=None)),
-            graph=draft_workflow.graph,
-            features=draft_workflow.features,
-            created_by=account.id,
-            environment_variables=draft_workflow.environment_variables,
-            conversation_variables=draft_workflow.conversation_variables,
-            marked_name="",
-            marked_comment="",
-        )
-        session.add(workflow)
-
-        # Update snippet version
-        snippet.version += 1
-        snippet.is_published = True
-        snippet.workflow_id = workflow.id
-        snippet.updated_by = account.id
-        session.add(snippet)
-
-        return workflow
-
-    def get_all_published_workflows(
-        self,
-        *,
-        session: Session,
-        snippet: CustomizedSnippet,
-        page: int,
-        limit: int,
-    ) -> tuple[Sequence[Workflow], bool]:
-        """
-        Get all published workflow versions for snippet.
-
-        :param session: Database session
-        :param snippet: CustomizedSnippet instance
-        :param page: Page number
-        :param limit: Items per page
-        :return: Tuple of (workflows list, has_more flag)
-        """
-        if not snippet.workflow_id:
-            return [], False
-
-        stmt = (
-            select(Workflow)
-            .where(
-                Workflow.app_id == snippet.id,
-                Workflow.type == WorkflowType.SNIPPET.value,
-                Workflow.version != "draft",
-            )
-            .order_by(Workflow.version.desc())
-            .limit(limit + 1)
-            .offset((page - 1) * limit)
-        )
-
-        workflows = list(session.scalars(stmt).all())
-        has_more = len(workflows) > limit
-        if has_more:
-            workflows = workflows[:-1]
-
-        return workflows, has_more
-
-    # --- Default Block Configs ---
-
-    def get_default_block_configs(self) -> list[dict]:
-        """
-        Get default block configurations for all node types.
-
-        :return: List of default configurations
-        """
-        default_block_configs: list[dict[str, Any]] = []
-        for node_class_mapping in NODE_TYPE_CLASSES_MAPPING.values():
-            node_class = node_class_mapping[LATEST_VERSION]
-            default_config = node_class.get_default_config()
-            if default_config:
-                default_block_configs.append(dict(default_config))
-
-        return default_block_configs
-
-    def get_default_block_config(self, node_type: str, filters: dict | None = None) -> Mapping[str, object] | None:
-        """
-        Get default config for specific node type.
-
-        :param node_type: Node type string
-        :param filters: Optional filters
-        :return: Default configuration or None
-        """
-        node_type_enum = NodeType(node_type)
-
-        if node_type_enum not in NODE_TYPE_CLASSES_MAPPING:
-            return None
-
-        node_class = NODE_TYPE_CLASSES_MAPPING[node_type_enum][LATEST_VERSION]
-        default_config = node_class.get_default_config(filters=filters)
-        if not default_config:
-            return None
-
-        return default_config
-
-    # --- Workflow Run Operations ---
-
-    def get_snippet_workflow_runs(
-        self,
-        *,
-        snippet: CustomizedSnippet,
-        args: dict,
-    ) -> InfiniteScrollPagination:
-        """
-        Get paginated workflow runs for snippet.
-
-        :param snippet: CustomizedSnippet instance
-        :param args: Request arguments (last_id, limit)
-        :return: InfiniteScrollPagination result
-        """
-        limit = int(args.get("limit", 20))
-        last_id = args.get("last_id")
-
-        triggered_from_values = [
-            WorkflowRunTriggeredFrom.DEBUGGING,
-        ]
-
-        return self._workflow_run_repo.get_paginated_workflow_runs(
-            tenant_id=snippet.tenant_id,
-            app_id=snippet.id,
-            triggered_from=triggered_from_values,
-            limit=limit,
-            last_id=last_id,
-        )
-
-    def get_snippet_workflow_run(
-        self,
-        *,
-        snippet: CustomizedSnippet,
-        run_id: str,
-    ) -> WorkflowRun | None:
-        """
-        Get workflow run details.
-
-        :param snippet: CustomizedSnippet instance
-        :param run_id: Workflow run ID
-        :return: WorkflowRun or None
-        """
-        return self._workflow_run_repo.get_workflow_run_by_id(
-            tenant_id=snippet.tenant_id,
-            app_id=snippet.id,
-            run_id=run_id,
-        )
-
-    def get_snippet_workflow_run_node_executions(
-        self,
-        *,
-        snippet: CustomizedSnippet,
-        run_id: str,
-    ) -> Sequence[WorkflowNodeExecutionModel]:
-        """
-        Get workflow run node execution list.
-
-        :param snippet: CustomizedSnippet instance
-        :param run_id: Workflow run ID
-        :return: List of WorkflowNodeExecutionModel
-        """
-        workflow_run = self.get_snippet_workflow_run(snippet=snippet, run_id=run_id)
-        if not workflow_run:
-            return []
-
-        node_executions = self._node_execution_service_repo.get_executions_by_workflow_run(
-            tenant_id=snippet.tenant_id,
-            app_id=snippet.id,
-            workflow_run_id=workflow_run.id,
-        )
-
-        return node_executions
-
-    # --- Use Count ---
-
-    @staticmethod
-    def increment_use_count(
-        *,
-        session: Session,
-        snippet: CustomizedSnippet,
-    ) -> None:
-        """
-        Increment the use_count when snippet is used.
-
-        :param session: Database session
-        :param snippet: CustomizedSnippet instance
-        """
-        snippet.use_count += 1
-        session.add(snippet)

api/tests/unit_tests/conftest.py

@@ -3,6 +3,7 @@ from unittest.mock import MagicMock, patch
 
 import pytest
 from flask import Flask
+from sqlalchemy import create_engine
 
 # Getting the absolute path of the current file's directory
 ABS_PATH = os.path.dirname(os.path.abspath(__file__))
@@ -36,6 +37,7 @@ import sys
 
 sys.path.insert(0, PROJECT_DIR)
 
+from core.db.session_factory import configure_session_factory, session_factory
 from extensions import ext_redis
 
 
@@ -102,3 +104,18 @@ def reset_secret_key():
         yield
     finally:
         dify_config.SECRET_KEY = original
+
+
+@pytest.fixture(scope="session")
+def _unit_test_engine():
+    engine = create_engine("sqlite:///:memory:")
+    yield engine
+    engine.dispose()
+
+
+@pytest.fixture(autouse=True)
+def _configure_session_factory(_unit_test_engine):
+    try:
+        session_factory.get_session_maker()
+    except RuntimeError:
+        configure_session_factory(_unit_test_engine, expire_on_commit=False)

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

@@ -31,6 +31,13 @@ def _load_app_module():
 
         def schema_model(self, name, schema):
             self.models[name] = schema
+            return schema
+
+        def model(self, name, model_dict=None, **kwargs):
+            """Register a model with the namespace (flask-restx compatibility)."""
+            if model_dict is not None:
+                self.models[name] = model_dict
+            return model_dict
 
         def _decorator(self, obj):
             return obj

api/ty.toml

@@ -1,16 +1,30 @@
 [src]
 exclude = [
-    # TODO: enable when violations fixed
+    # deps groups (A1/A2/B/C/D/E)
+    # A2: workflow engine/nodes
+    "core/workflow",
+    "core/app/workflow",
+    "core/helper/code_executor",
+    # B: app runner + prompt
+    "core/prompt",
+    "core/app/apps/base_app_runner.py",
     "core/app/apps/workflow_app_runner.py",
+    # C: services/controllers/fields/libs
+    "services",
     "controllers/console/app",
     "controllers/console/explore",
     "controllers/console/datasets",
     "controllers/console/workspace",
+    "controllers/service_api/wraps.py",
+    "fields/conversation_fields.py",
+    "libs/external_api.py",
+    # D: observability + integrations
+    "core/ops",
+    "extensions",
+    # E: vector DB integrations
+    "core/rag/datasource/vdb",
     # non-producition or generated code
     "migrations",
     "tests",
 ]
 
-[rules]
-missing-argument = "ignore" # TODO: restore when **args for constructor is supported properly
-possibly-unbound-attribute = "ignore"

api/uv.lock

@@ -1479,6 +1479,7 @@ dev = [
     { name = "pytest-env" },
     { name = "pytest-mock" },
     { name = "pytest-timeout" },
+    { name = "pytest-xdist" },
     { name = "ruff" },
     { name = "scipy-stubs" },
     { name = "sseclient-py" },
@@ -1678,6 +1679,7 @@ dev = [
     { name = "pytest-env", specifier = "~=1.1.3" },
     { name = "pytest-mock", specifier = "~=3.14.0" },
     { name = "pytest-timeout", specifier = ">=2.4.0" },
+    { name = "pytest-xdist", specifier = ">=3.8.0" },
     { name = "ruff", specifier = "~=0.14.0" },
     { name = "scipy-stubs", specifier = ">=1.15.3.0" },
     { name = "sseclient-py", specifier = ">=1.8.0" },
@@ -1896,6 +1898,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/19/d8/2a1c638d9e0aa7e269269a1a1bf423ddd94267f1a01bbe3ad03432b67dd4/eval_type_backport-0.3.0-py3-none-any.whl", hash = "sha256:975a10a0fe333c8b6260d7fdb637698c9a16c3a9e3b6eb943fee6a6f67a37fe8", size = 6061, upload-time = "2025-11-13T20:56:49.499Z" },
 ]
 
+[[package]]
+name = "execnet"
+version = "2.1.2"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/bf/89/780e11f9588d9e7128a3f87788354c7946a9cbb1401ad38a48c4db9a4f07/execnet-2.1.2.tar.gz", hash = "sha256:63d83bfdd9a23e35b9c6a3261412324f964c2ec8dcd8d3c6916ee9373e0befcd", size = 166622, upload-time = "2025-11-12T09:56:37.75Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/ab/84/02fc1827e8cdded4aa65baef11296a9bbe595c474f0d6d758af082d849fd/execnet-2.1.2-py3-none-any.whl", hash = "sha256:67fba928dd5a544b783f6056f449e5e3931a5c378b128bc18501f7ea79e296ec", size = 40708, upload-time = "2025-11-12T09:56:36.333Z" },
+]
+
 [[package]]
 name = "faker"
 version = "38.2.0"
@@ -5141,6 +5152,19 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/fa/b6/3127540ecdf1464a00e5a01ee60a1b09175f6913f0644ac748494d9c4b21/pytest_timeout-2.4.0-py3-none-any.whl", hash = "sha256:c42667e5cdadb151aeb5b26d114aff6bdf5a907f176a007a30b940d3d865b5c2", size = 14382, upload-time = "2025-05-05T19:44:33.502Z" },
 ]
 
+[[package]]
+name = "pytest-xdist"
+version = "3.8.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "execnet" },
+    { name = "pytest" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/78/b4/439b179d1ff526791eb921115fca8e44e596a13efeda518b9d845a619450/pytest_xdist-3.8.0.tar.gz", hash = "sha256:7e578125ec9bc6050861aa93f2d59f1d8d085595d6551c2c90b6f4fad8d3a9f1", size = 88069, upload-time = "2025-07-01T13:30:59.346Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/ca/31/d4e37e9e550c2b92a9cbc2e4d0b7420a27224968580b5a447f420847c975/pytest_xdist-3.8.0-py3-none-any.whl", hash = "sha256:202ca578cfeb7370784a8c33d6d05bc6e13b4f25b5053c30a152269fd10f0b88", size = 46396, upload-time = "2025-07-01T13:30:56.632Z" },
+]
+
 [[package]]
 name = "python-calamine"
 version = "0.5.4"

dev/pytest/pytest_unit_tests.sh

@@ -5,6 +5,12 @@ SCRIPT_DIR="$(dirname "$(realpath "$0")")"
 cd "$SCRIPT_DIR/../.."
 
 PYTEST_TIMEOUT="${PYTEST_TIMEOUT:-20}"
+PYTEST_XDIST_ARGS="${PYTEST_XDIST_ARGS:--n auto}"
 
-# libs
-pytest --timeout "${PYTEST_TIMEOUT}" api/tests/unit_tests
+# Run most tests in parallel (excluding controllers which have import conflicts with xdist)
+# Controller tests have module-level side effects (Flask route registration) that cause
+# race conditions when imported concurrently by multiple pytest-xdist workers.
+pytest --timeout "${PYTEST_TIMEOUT}" ${PYTEST_XDIST_ARGS} api/tests/unit_tests --ignore=api/tests/unit_tests/controllers
+
+# Run controller tests sequentially to avoid import race conditions
+pytest --timeout "${PYTEST_TIMEOUT}" api/tests/unit_tests/controllers

docker/.env.example

@@ -1375,6 +1375,7 @@ PLUGIN_DAEMON_PORT=5002
 PLUGIN_DAEMON_KEY=lYkiYYT6owG+71oLerGzA7GXCgOT++6ovaezWAjpCjf+Sjc3ZtU+qUEi
 PLUGIN_DAEMON_URL=http://plugin_daemon:5002
 PLUGIN_MAX_PACKAGE_SIZE=52428800
+PLUGIN_MODEL_SCHEMA_CACHE_TTL=3600
 PLUGIN_PPROF_ENABLED=false
 
 PLUGIN_DEBUGGING_HOST=0.0.0.0

docker/docker-compose.yaml

@@ -589,6 +589,7 @@ x-shared-env: &shared-api-worker-env
   PLUGIN_DAEMON_KEY: ${PLUGIN_DAEMON_KEY:-lYkiYYT6owG+71oLerGzA7GXCgOT++6ovaezWAjpCjf+Sjc3ZtU+qUEi}
   PLUGIN_DAEMON_URL: ${PLUGIN_DAEMON_URL:-http://plugin_daemon:5002}
   PLUGIN_MAX_PACKAGE_SIZE: ${PLUGIN_MAX_PACKAGE_SIZE:-52428800}
+  PLUGIN_MODEL_SCHEMA_CACHE_TTL: ${PLUGIN_MODEL_SCHEMA_CACHE_TTL:-3600}
   PLUGIN_PPROF_ENABLED: ${PLUGIN_PPROF_ENABLED:-false}
   PLUGIN_DEBUGGING_HOST: ${PLUGIN_DEBUGGING_HOST:-0.0.0.0}
   PLUGIN_DEBUGGING_PORT: ${PLUGIN_DEBUGGING_PORT:-5003}

web/AGENTS.md

@@ -1,5 +1,9 @@
+## Frontend Workflow
+
+- Refer to the `./docs/test.md` and `./docs/lint.md` for detailed frontend workflow instructions.
+
 ## Automated Test Generation
 
-- Use `web/testing/testing.md` as the canonical instruction set for generating frontend automated tests.
+- Use `./docs/test.md` as the canonical instruction set for generating frontend automated tests.
 - When proposing or saving tests, re-read that document and follow every requirement.
 - All frontend tests MUST also comply with the `frontend-testing` skill. Treat the skill as a mandatory constraint, not optional guidance.

web/README.md

@@ -107,6 +107,8 @@ Open [http://localhost:6006](http://localhost:6006) with your browser to see the
 
 If your IDE is VSCode, rename `web/.vscode/settings.example.json` to `web/.vscode/settings.json` for lint code setting.
 
+Then follow the [Lint Documentation](./docs/lint.md) to lint the code.
+
 ## Test
 
 We use [Vitest](https://vitest.dev/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for Unit Testing.

web/app/components/app-sidebar/app-info.tsx

@@ -31,6 +31,7 @@ import { fetchWorkflowDraft } from '@/service/workflow'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
 import { cn } from '@/utils/classnames'
+import { downloadBlob } from '@/utils/download'
 import AppIcon from '../base/app-icon'
 import AppOperations from './app-operations'
 
@@ -145,13 +146,8 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
         appID: appDetail.id,
         include,
       })
-      const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
-      const url = URL.createObjectURL(file)
-      a.href = url
-      a.download = `${appDetail.name}.yml`
-      a.click()
-      URL.revokeObjectURL(url)
+      downloadBlob({ data: file, fileName: `${appDetail.name}.yml` })
     }
     catch {
       notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })

web/app/components/app-sidebar/dataset-info/dropdown.tsx

@@ -11,6 +11,7 @@ import { datasetDetailQueryKeyPrefix, useInvalidDatasetList } from '@/service/kn
 import { useInvalid } from '@/service/use-base'
 import { useExportPipelineDSL } from '@/service/use-pipeline'
 import { cn } from '@/utils/classnames'
+import { downloadBlob } from '@/utils/download'
 import ActionButton from '../../base/action-button'
 import Confirm from '../../base/confirm'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
@@ -64,13 +65,8 @@ const DropDown = ({
         pipelineId: pipeline_id,
         include,
       })
-      const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
-      const url = URL.createObjectURL(file)
-      a.href = url
-      a.download = `${name}.pipeline`
-      a.click()
-      URL.revokeObjectURL(url)
+      downloadBlob({ data: file, fileName: `${name}.pipeline` })
     }
     catch {
       Toast.notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })

web/app/components/app-sidebar/toggle-button.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
 import Button from '../base/button'
 import Tooltip from '../base/tooltip'
-import { getKeyboardKeyNameBySystem } from '../workflow/utils'
+import ShortcutsName from '../workflow/shortcuts-name'
 
 type TooltipContentProps = {
   expand: boolean
@@ -20,18 +20,7 @@ const TooltipContent = ({
   return (
     <div className="flex items-center gap-x-1">
       <span className="system-xs-medium px-0.5 text-text-secondary">{expand ? t('sidebar.collapseSidebar', { ns: 'layout' }) : t('sidebar.expandSidebar', { ns: 'layout' })}</span>
-      <div className="flex items-center gap-x-0.5">
-        {
-          TOGGLE_SHORTCUT.map(key => (
-            <span
-              key={key}
-              className="system-kbd inline-flex items-center justify-center rounded-[4px] bg-components-kbd-bg-gray px-1 text-text-tertiary"
-            >
-              {getKeyboardKeyNameBySystem(key)}
-            </span>
-          ))
-        }
-      </div>
+      <ShortcutsName keys={TOGGLE_SHORTCUT} textColor="secondary" />
     </div>
   )
 }

web/app/components/app/annotation/header-opts/index.tsx

@@ -21,6 +21,7 @@ import { LanguagesSupported } from '@/i18n-config/language'
 import { clearAllAnnotations, fetchExportAnnotationList } from '@/service/annotation'
 
 import { cn } from '@/utils/classnames'
+import { downloadBlob } from '@/utils/download'
 import Button from '../../../base/button'
 import AddAnnotationModal from '../add-annotation-modal'
 import BatchAddModal from '../batch-add-annotation-modal'
@@ -56,28 +57,23 @@ const HeaderOptions: FC<Props> = ({
   )
 
   const JSONLOutput = () => {
-    const a = document.createElement('a')
     const content = listTransformer(list).join('\n')
     const file = new Blob([content], { type: 'application/jsonl' })
-    const url = URL.createObjectURL(file)
-    a.href = url
-    a.download = `annotations-${locale}.jsonl`
-    a.click()
-    URL.revokeObjectURL(url)
+    downloadBlob({ data: file, fileName: `annotations-${locale}.jsonl` })
   }
 
-  const fetchList = async () => {
+  const fetchList = React.useCallback(async () => {
     const { data }: any = await fetchExportAnnotationList(appId)
     setList(data as AnnotationItemBasic[])
-  }
+  }, [appId])
 
   useEffect(() => {
     fetchList()
-  }, [])
+  }, [fetchList])
   useEffect(() => {
     if (controlUpdateList)
       fetchList()
-  }, [controlUpdateList])
+  }, [controlUpdateList, fetchList])
 
   const [showBulkImportModal, setShowBulkImportModal] = useState(false)
   const [showClearConfirm, setShowClearConfirm] = useState(false)

web/app/components/app/app-publisher/index.tsx

@@ -49,7 +49,8 @@ import Divider from '../../base/divider'
 import Loading from '../../base/loading'
 import Toast from '../../base/toast'
 import Tooltip from '../../base/tooltip'
-import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '../../workflow/utils'
+import ShortcutsName from '../../workflow/shortcuts-name'
+import { getKeyboardKeyCodeBySystem } from '../../workflow/utils'
 import AccessControl from '../app-access-control'
 import PublishWithMultipleModel from './publish-with-multiple-model'
 import SuggestedAction from './suggested-action'
@@ -345,13 +346,7 @@ const AppPublisher = ({
                             : (
                                 <div className="flex gap-1">
                                   <span>{t('common.publishUpdate', { ns: 'workflow' })}</span>
-                                  <div className="flex gap-0.5">
-                                    {PUBLISH_SHORTCUT.map(key => (
-                                      <span key={key} className="system-kbd h-4 w-4 rounded-[4px] bg-components-kbd-bg-white text-text-primary-on-surface">
-                                        {getKeyboardKeyNameBySystem(key)}
-                                      </span>
-                                    ))}
-                                  </div>
+                                  <ShortcutsName keys={PUBLISH_SHORTCUT} bgColor="white" />
                                 </div>
                               )
                         }

web/app/components/app/configuration/config-var/index.spec.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import type { IConfigVarProps } from './index'
 import type { ExternalDataTool } from '@/models/common'
 import type { PromptVariable } from '@/models/debug'
-import { act, fireEvent, render, screen } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { vi } from 'vitest'
 import Toast from '@/app/components/base/toast'
@@ -240,7 +240,9 @@ describe('ConfigVar', () => {
       const saveButton = await screen.findByRole('button', { name: 'common.operation.save' })
       fireEvent.click(saveButton)
 
-      expect(onPromptVariablesChange).toHaveBeenCalledTimes(1)
+      await waitFor(() => {
+        expect(onPromptVariablesChange).toHaveBeenCalledTimes(1)
+      })
     })
 
     it('should show error when variable key is duplicated', async () => {

web/app/components/app/create-app-modal/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { AppIconSelection } from '../../base/app-icon-picker'
-import { RiArrowRightLine, RiArrowRightSLine, RiCommandLine, RiCornerDownLeftLine, RiExchange2Fill } from '@remixicon/react'
+import { RiArrowRightLine, RiArrowRightSLine, RiExchange2Fill } from '@remixicon/react'
 
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import Image from 'next/image'
@@ -29,6 +29,7 @@ import { getRedirection } from '@/utils/app-redirection'
 import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 import AppIconPicker from '../../base/app-icon-picker'
+import ShortcutsName from '../../workflow/shortcuts-name'
 
 type CreateAppProps = {
   onSuccess: () => void
@@ -269,10 +270,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                 <Button onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
                 <Button disabled={isAppsFull || !name} className="gap-1" variant="primary" onClick={handleCreateApp}>
                   <span>{t('newApp.Create', { ns: 'app' })}</span>
-                  <div className="flex gap-0.5">
-                    <RiCommandLine size={14} className="system-kbd rounded-sm bg-components-kbd-bg-white p-0.5" />
-                    <RiCornerDownLeftLine size={14} className="system-kbd rounded-sm bg-components-kbd-bg-white p-0.5" />
-                  </div>
+                  <ShortcutsName keys={['ctrl', '↵']} bgColor="white" />
                 </Button>
               </div>
             </div>

web/app/components/app/create-from-dsl-modal/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { MouseEventHandler } from 'react'
-import { RiCloseLine, RiCommandLine, RiCornerDownLeftLine } from '@remixicon/react'
+import { RiCloseLine } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { useRouter } from 'next/navigation'
@@ -28,6 +28,7 @@ import {
 } from '@/service/apps'
 import { getRedirection } from '@/utils/app-redirection'
 import { cn } from '@/utils/classnames'
+import ShortcutsName from '../../workflow/shortcuts-name'
 import Uploader from './uploader'
 
 type CreateFromDSLModalProps = {
@@ -298,10 +299,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
             className="gap-1"
           >
             <span>{t('newApp.Create', { ns: 'app' })}</span>
-            <div className="flex gap-0.5">
-              <RiCommandLine size={14} className="system-kbd rounded-sm bg-components-kbd-bg-white p-0.5" />
-              <RiCornerDownLeftLine size={14} className="system-kbd rounded-sm bg-components-kbd-bg-white p-0.5" />
-            </div>
+            <ShortcutsName keys={['ctrl', '↵']} bgColor="white" />
           </Button>
         </div>
       </Modal>

web/app/components/apps/app-card.tsx

@@ -33,6 +33,7 @@ import { fetchWorkflowDraft } from '@/service/workflow'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
 import { cn } from '@/utils/classnames'
+import { downloadBlob } from '@/utils/download'
 import { formatTime } from '@/utils/time'
 import { basePath } from '@/utils/var'
 
@@ -161,13 +162,8 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
         appID: app.id,
         include,
       })
-      const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
-      const url = URL.createObjectURL(file)
-      a.href = url
-      a.download = `${app.name}.yml`
-      a.click()
-      URL.revokeObjectURL(url)
+      downloadBlob({ data: file, fileName: `${app.name}.yml` })
     }
     catch {
       notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })
@@ -346,7 +342,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       dateFormat: `${t('segment.dateTimeFormat', { ns: 'datasetDocuments' })}`,
     })
     return `${t('segment.editedAt', { ns: 'datasetDocuments' })} ${timeText}`
-  }, [app.updated_at, app.created_at])
+  }, [app.updated_at, app.created_at, t])
 
   return (
     <>

web/app/components/apps/index.tsx

@@ -105,6 +105,7 @@ const Apps = () => {
         {isShowTryAppPanel && (
           <TryApp
             appId={currentTryAppParams?.appId || ''}
+            app={currentTryAppParams?.app}
             category={currentTryAppParams?.app?.category}
             onClose={hideTryAppPanel}
             onCreate={handleShowFromTryApp}

web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx

@@ -15,11 +15,11 @@ import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { cn } from '@/utils/classnames'
+import { downloadUrl } from '@/utils/download'
 import { formatFileSize } from '@/utils/format'
 import FileImageRender from '../file-image-render'
 import FileTypeIcon from '../file-type-icon'
 import {
-  downloadFile,
   fileIsUploaded,
   getFileAppearanceType,
   getFileExtension,
@@ -140,7 +140,7 @@ const FileInAttachmentItem = ({
             showDownloadAction && (
               <ActionButton onClick={(e) => {
                 e.stopPropagation()
-                downloadFile(url || base64Url || '', name)
+                downloadUrl({ url: url || base64Url || '', fileName: name, target: '_blank' })
               }}
               >
                 <RiDownloadLine className="h-4 w-4" />

web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx

@@ -8,9 +8,9 @@ import Button from '@/app/components/base/button'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
+import { downloadUrl } from '@/utils/download'
 import FileImageRender from '../file-image-render'
 import {
-  downloadFile,
   fileIsUploaded,
 } from '../utils'
 
@@ -85,7 +85,7 @@ const FileImageItem = ({
                 className="absolute bottom-0.5 right-0.5  flex h-6 w-6 items-center justify-center rounded-lg bg-components-actionbar-bg shadow-md"
                 onClick={(e) => {
                   e.stopPropagation()
-                  downloadFile(download_url || '', name)
+                  downloadUrl({ url: download_url || '', fileName: name, target: '_blank' })
                 }}
               >
                 <RiDownloadLine className="h-4 w-4 text-text-tertiary" />

web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx

@@ -12,10 +12,10 @@ import VideoPreview from '@/app/components/base/file-uploader/video-preview'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import { cn } from '@/utils/classnames'
+import { downloadUrl } from '@/utils/download'
 import { formatFileSize } from '@/utils/format'
 import FileTypeIcon from '../file-type-icon'
 import {
-  downloadFile,
   fileIsUploaded,
   getFileAppearanceType,
   getFileExtension,
@@ -100,7 +100,7 @@ const FileItem = ({
                 className="absolute -right-1 -top-1 hidden group-hover/file-item:flex"
                 onClick={(e) => {
                   e.stopPropagation()
-                  downloadFile(download_url || '', name)
+                  downloadUrl({ url: download_url || '', fileName: name, target: '_blank' })
                 }}
               >
                 <RiDownloadLine className="h-3.5 w-3.5 text-text-tertiary" />

web/app/components/base/file-uploader/utils.spec.ts

@@ -1,4 +1,3 @@
-import type { MockInstance } from 'vitest'
 import mime from 'mime'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { upload } from '@/service/base'
@@ -6,7 +5,6 @@ import { TransferMethod } from '@/types/app'
 import { FILE_EXTS } from '../prompt-editor/constants'
 import { FileAppearanceTypeEnum } from './types'
 import {
-  downloadFile,
   fileIsUploaded,
   fileUpload,
   getFileAppearanceType,
@@ -782,74 +780,4 @@ describe('file-uploader utils', () => {
       } as any)).toBe(true)
     })
   })
-
-  describe('downloadFile', () => {
-    let mockAnchor: HTMLAnchorElement
-    let createElementMock: MockInstance
-    let appendChildMock: MockInstance
-    let removeChildMock: MockInstance
-
-    beforeEach(() => {
-      // Mock createElement and appendChild
-      mockAnchor = {
-        href: '',
-        download: '',
-        style: { display: '' },
-        target: '',
-        title: '',
-        click: vi.fn(),
-      } as unknown as HTMLAnchorElement
-
-      createElementMock = vi.spyOn(document, 'createElement').mockReturnValue(mockAnchor as any)
-      appendChildMock = vi.spyOn(document.body, 'appendChild').mockImplementation((node: Node) => {
-        return node
-      })
-      removeChildMock = vi.spyOn(document.body, 'removeChild').mockImplementation((node: Node) => {
-        return node
-      })
-    })
-
-    afterEach(() => {
-      vi.resetAllMocks()
-    })
-
-    it('should create and trigger download with correct attributes', () => {
-      const url = 'https://example.com/test.pdf'
-      const filename = 'test.pdf'
-
-      downloadFile(url, filename)
-
-      // Verify anchor element was created with correct properties
-      expect(createElementMock).toHaveBeenCalledWith('a')
-      expect(mockAnchor.href).toBe(url)
-      expect(mockAnchor.download).toBe(filename)
-      expect(mockAnchor.style.display).toBe('none')
-      expect(mockAnchor.target).toBe('_blank')
-      expect(mockAnchor.title).toBe(filename)
-
-      // Verify DOM operations
-      expect(appendChildMock).toHaveBeenCalledWith(mockAnchor)
-      expect(mockAnchor.click).toHaveBeenCalled()
-      expect(removeChildMock).toHaveBeenCalledWith(mockAnchor)
-    })
-
-    it('should handle empty filename', () => {
-      const url = 'https://example.com/test.pdf'
-      const filename = ''
-
-      downloadFile(url, filename)
-
-      expect(mockAnchor.download).toBe('')
-      expect(mockAnchor.title).toBe('')
-    })
-
-    it('should handle empty url', () => {
-      const url = ''
-      const filename = 'test.pdf'
-
-      downloadFile(url, filename)
-
-      expect(mockAnchor.href).toBe('')
-    })
-  })
 })

web/app/components/base/file-uploader/utils.ts

@@ -249,15 +249,3 @@ export const fileIsUploaded = (file: FileEntity) => {
   if (file.transferMethod === TransferMethod.remote_url && file.progress === 100)
     return true
 }
-
-export const downloadFile = (url: string, filename: string) => {
-  const anchor = document.createElement('a')
-  anchor.href = url
-  anchor.download = filename
-  anchor.style.display = 'none'
-  anchor.target = '_blank'
-  anchor.title = filename
-  document.body.appendChild(anchor)
-  anchor.click()
-  document.body.removeChild(anchor)
-}

web/app/components/base/image-uploader/image-preview.tsx

@@ -8,6 +8,7 @@ import { createPortal } from 'react-dom'
 import { useHotkeys } from 'react-hotkeys-hook'
 import Toast from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
+import { downloadUrl } from '@/utils/download'
 
 type ImagePreviewProps = {
   url: string
@@ -60,27 +61,14 @@ const ImagePreview: FC<ImagePreviewProps> = ({
 
   const downloadImage = () => {
     // Open in a new window, considering the case when the page is inside an iframe
-    if (url.startsWith('http') || url.startsWith('https')) {
-      const a = document.createElement('a')
-      a.href = url
-      a.target = '_blank'
-      a.download = title
-      a.click()
-    }
-    else if (url.startsWith('data:image')) {
-      // Base64 image
-      const a = document.createElement('a')
-      a.href = url
-      a.target = '_blank'
-      a.download = title
-      a.click()
-    }
-    else {
-      Toast.notify({
-        type: 'error',
-        message: `Unable to open image: ${url}`,
-      })
+    if (url.startsWith('http') || url.startsWith('https') || url.startsWith('data:image')) {
+      downloadUrl({ url, fileName: title, target: '_blank' })
+      return
     }
+    Toast.notify({
+      type: 'error',
+      message: `Unable to open image: ${url}`,
+    })
   }
 
   const zoomIn = () => {
@@ -135,12 +123,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       catch (err) {
         console.error('Failed to copy image:', err)
 
-        const link = document.createElement('a')
-        link.href = url
-        link.download = `${title}.png`
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
+        downloadUrl({ url, fileName: `${title}.png` })
 
         Toast.notify({
           type: 'info',
@@ -215,6 +198,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       tabIndex={-1}
     >
       { }
+      {/* eslint-disable-next-line next/no-img-element */}
       <img
         ref={imgRef}
         alt={title}

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

@@ -8,6 +8,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
+import { downloadUrl } from '@/utils/download'
 
 type Props = {
   content: string
@@ -40,11 +41,10 @@ const ShareQRCode = ({ content }: Props) => {
   }, [isShow])
 
   const downloadQR = () => {
-    const canvas = document.getElementsByTagName('canvas')[0]
-    const link = document.createElement('a')
-    link.download = 'qrcode.png'
-    link.href = canvas.toDataURL()
-    link.click()
+    const canvas = qrCodeRef.current?.querySelector('canvas')
+    if (!(canvas instanceof HTMLCanvasElement))
+      return
+    downloadUrl({ url: canvas.toDataURL(), fileName: 'qrcode.png' })
   }
 
   const handlePanelClick = (event: React.MouseEvent) => {

web/app/components/datasets/common/document-status-with-action/index-failed.spec.tsx

@@ -179,8 +179,10 @@ describe('RetryButton (IndexFailed)', () => {
         }, false),
       )
 
-      // Delay the response to test loading state
-      mockRetryErrorDocs.mockImplementation(() => new Promise(resolve => setTimeout(() => resolve({ result: 'success' }), 100)))
+      let resolveRetry: ((value: { result: 'success' }) => void) | undefined
+      mockRetryErrorDocs.mockImplementation(() => new Promise((resolve) => {
+        resolveRetry = resolve
+      }))
 
       render(<RetryButton datasetId="test-dataset" />)
 
@@ -193,6 +195,11 @@ describe('RetryButton (IndexFailed)', () => {
         expect(button).toHaveClass('cursor-not-allowed')
         expect(button).toHaveClass('text-text-disabled')
       })
+
+      resolveRetry?.({ result: 'success' })
+      await waitFor(() => {
+        expect(mockRefetch).toHaveBeenCalled()
+      })
     })
   })
 

web/app/components/datasets/create-from-pipeline/list/template-card/index.spec.tsx

@@ -23,9 +23,10 @@ vi.mock('@/app/components/base/toast', () => ({
   },
 }))
 
-// Mock downloadFile utility
-vi.mock('@/utils/format', () => ({
-  downloadFile: vi.fn(),
+// Mock download utilities
+vi.mock('@/utils/download', () => ({
+  downloadBlob: vi.fn(),
+  downloadUrl: vi.fn(),
 }))
 
 // Capture Confirm callbacks
@@ -502,8 +503,8 @@ describe('TemplateCard', () => {
       })
     })
 
-    it('should call downloadFile on successful export', async () => {
-      const { downloadFile } = await import('@/utils/format')
+    it('should call downloadBlob on successful export', async () => {
+      const { downloadBlob } = await import('@/utils/download')
       mockExportPipelineDSL.mockImplementation((_id, callbacks) => {
         callbacks.onSuccess({ data: 'yaml_content' })
         return Promise.resolve()
@@ -514,7 +515,7 @@ describe('TemplateCard', () => {
       fireEvent.click(exportButton)
 
       await waitFor(() => {
-        expect(downloadFile).toHaveBeenCalledWith(expect.objectContaining({
+        expect(downloadBlob).toHaveBeenCalledWith(expect.objectContaining({
           fileName: 'Test Pipeline.pipeline',
         }))
       })

web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx

@@ -16,7 +16,7 @@ import {
   useInvalidCustomizedTemplateList,
   usePipelineTemplateById,
 } from '@/service/use-pipeline'
-import { downloadFile } from '@/utils/format'
+import { downloadBlob } from '@/utils/download'
 import Actions from './actions'
 import Content from './content'
 import Details from './details'
@@ -108,10 +108,7 @@ const TemplateCard = ({
     await exportPipelineDSL(pipeline.id, {
       onSuccess: (res) => {
         const blob = new Blob([res.data], { type: 'application/yaml' })
-        downloadFile({
-          data: blob,
-          fileName: `${pipeline.name}.pipeline`,
-        })
+        downloadBlob({ data: blob, fileName: `${pipeline.name}.pipeline` })
         Toast.notify({
           type: 'success',
           message: t('exportDSL.successTip', { ns: 'datasetPipeline' }),

web/app/components/datasets/create/website/watercrawl/index.tsx

@@ -125,11 +125,25 @@ const WaterCrawl: FC<Props> = ({
       await sleep(2500)
       return await waitForCrawlFinished(jobId)
     }
-    catch (e: any) {
-      const errorBody = await e.json()
+    catch (error: unknown) {
+      let errorMessage = ''
+
+      const maybeErrorWithJson = error as { json?: () => Promise<unknown>, message?: unknown } | null
+      if (maybeErrorWithJson?.json) {
+        try {
+          const errorBody = await maybeErrorWithJson.json() as { message?: unknown } | null
+          if (typeof errorBody?.message === 'string')
+            errorMessage = errorBody.message
+        }
+        catch {}
+      }
+
+      if (!errorMessage && typeof maybeErrorWithJson?.message === 'string')
+        errorMessage = maybeErrorWithJson.message
+
       return {
         isError: true,
-        errorMessage: errorBody.message,
+        errorMessage,
         data: {
           data: [],
         },

web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx

@@ -4,7 +4,8 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
+import ShortcutsName from '@/app/components/workflow/shortcuts-name'
+import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
 import { ChunkingMode } from '@/models/datasets'
 import { useDocumentContext } from '../../context'
 
@@ -54,7 +55,7 @@ const ActionButtons: FC<IActionButtonsProps> = ({
       >
         <div className="flex items-center gap-x-1">
           <span className="system-sm-medium text-components-button-secondary-text">{t('operation.cancel', { ns: 'common' })}</span>
-          <span className="system-kbd rounded-[4px] bg-components-kbd-bg-gray px-[1px] text-text-tertiary">ESC</span>
+          <ShortcutsName keys={['ESC']} textColor="secondary" />
         </div>
       </Button>
       {(isParentChildParagraphMode && actionType === 'edit' && !isChildChunk && showRegenerationButton)
@@ -76,10 +77,7 @@ const ActionButtons: FC<IActionButtonsProps> = ({
       >
         <div className="flex items-center gap-x-1">
           <span className="text-components-button-primary-text">{t('operation.save', { ns: 'common' })}</span>
-          <div className="flex items-center gap-x-0.5">
-            <span className="system-kbd h-4 w-4 rounded-[4px] bg-components-kbd-bg-white capitalize text-text-primary-on-surface">{getKeyboardKeyNameBySystem('ctrl')}</span>
-            <span className="system-kbd h-4 w-4 rounded-[4px] bg-components-kbd-bg-white text-text-primary-on-surface">S</span>
-          </div>
+          <ShortcutsName keys={['ctrl', 'S']} bgColor="white" />
         </div>
       </Button>
     </div>

web/app/components/datasets/list/dataset-card/hooks/use-dataset-card-state.ts

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import Toast from '@/app/components/base/toast'
 import { useCheckDatasetUsage, useDeleteDataset } from '@/service/use-dataset-card'
 import { useExportPipelineDSL } from '@/service/use-pipeline'
+import { downloadBlob } from '@/utils/download'
 
 type ModalState = {
   showRenameModal: boolean
@@ -65,13 +66,8 @@ export const useDatasetCardState = ({ dataset, onSuccess }: UseDatasetCardStateO
         pipelineId: pipeline_id,
         include,
       })
-      const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
-      const url = URL.createObjectURL(file)
-      a.href = url
-      a.download = `${name}.pipeline`
-      a.click()
-      URL.revokeObjectURL(url)
+      downloadBlob({ data: file, fileName: `${name}.pipeline` })
     }
     catch {
       Toast.notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })

web/app/components/explore/app-card/index.tsx

@@ -74,17 +74,15 @@ const AppCard = ({
       </div>
       {isExplore && (canCreate || isTrialApp) && (
         <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
-          <div className={cn('grid h-8 w-full grid-cols-1 space-x-2', isTrialApp && 'grid-cols-2')}>
+          <div className={cn('grid h-8 w-full grid-cols-2 space-x-2')}>
             <Button variant="primary" className="h-7" onClick={() => onCreate()}>
               <PlusIcon className="mr-1 h-4 w-4" />
               <span className="text-xs">{t('appCard.addToWorkspace', { ns: 'explore' })}</span>
             </Button>
-            {isTrialApp && (
-              <Button className="h-7" onClick={showTryAPPPanel(app.app_id)}>
-                <RiInformation2Line className="mr-1 size-4" />
-                <span>{t('appCard.try', { ns: 'explore' })}</span>
-              </Button>
-            )}
+            <Button className="h-7" onClick={showTryAPPPanel(app.app_id)}>
+              <RiInformation2Line className="mr-1 size-4" />
+              <span>{t('appCard.try', { ns: 'explore' })}</span>
+            </Button>
           </div>
         </div>
       )}

web/app/components/explore/app-list/index.tsx

@@ -251,6 +251,7 @@ const Apps = ({
       {isShowTryAppPanel && (
         <TryApp
           appId={appParams?.appId || ''}
+          app={appParams?.app}
           category={appParams?.app?.category}
           onClose={hideTryAppPanel}
           onCreate={handleShowFromTryApp}

web/app/components/explore/create-app-modal/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { AppIconType } from '@/types/app'
-import { RiCloseLine, RiCommandLine, RiCornerDownLeftLine } from '@remixicon/react'
+import { RiCloseLine } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
@@ -17,6 +17,7 @@ import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { useProviderContext } from '@/context/provider-context'
 import { AppModeEnum } from '@/types/app'
 import AppIconPicker from '../../base/app-icon-picker'
+import ShortcutsName from '../../workflow/shortcuts-name'
 
 export type CreateAppModalProps = {
   show: boolean
@@ -198,10 +199,7 @@ const CreateAppModal = ({
             onClick={handleSubmit}
           >
             <span>{!isEditModal ? t('operation.create', { ns: 'common' }) : t('operation.save', { ns: 'common' })}</span>
-            <div className="flex gap-0.5">
-              <RiCommandLine size={14} className="system-kbd rounded-sm bg-components-kbd-bg-white p-0.5" />
-              <RiCornerDownLeftLine size={14} className="system-kbd rounded-sm bg-components-kbd-bg-white p-0.5" />
-            </div>
+            <ShortcutsName keys={['ctrl', '↵']} bgColor="white" />
           </Button>
           <Button className="w-24" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
         </div>

web/app/components/explore/try-app/index.tsx

@@ -1,11 +1,13 @@
 /* eslint-disable style/multiline-ternary */
 'use client'
 import type { FC } from 'react'
+import type { App as AppType } from '@/models/explore'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal/index'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useGetTryAppInfo } from '@/service/use-try-app'
 import Button from '../../base/button'
 import App from './app'
@@ -15,6 +17,7 @@ import Tab, { TypeEnum } from './tab'
 
 type Props = {
   appId: string
+  app?: AppType
   category?: string
   onClose: () => void
   onCreate: () => void
@@ -22,13 +25,23 @@ type Props = {
 
 const TryApp: FC<Props> = ({
   appId,
+  app,
   category,
   onClose,
   onCreate,
 }) => {
-  const [type, setType] = useState<TypeEnum>(TypeEnum.TRY)
+  const { systemFeatures } = useGlobalPublicStore()
+  const isTrialApp = !!(app && app.can_trial && systemFeatures.enable_trial_app)
+  const [type, setType] = useState<TypeEnum>(() => (app && !isTrialApp ? TypeEnum.DETAIL : TypeEnum.TRY))
   const { data: appDetail, isLoading } = useGetTryAppInfo(appId)
 
+  React.useEffect(() => {
+    if (app && !isTrialApp && type !== TypeEnum.DETAIL)
+      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+      setType(TypeEnum.DETAIL)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [app, isTrialApp])
+
   return (
     <Modal
       isShow
@@ -45,6 +58,7 @@ const TryApp: FC<Props> = ({
             <Tab
               value={type}
               onChange={setType}
+              disableTry={app ? !isTrialApp : false}
             />
             <Button
               size="large"

web/app/components/explore/try-app/tab.tsx

@@ -12,15 +12,17 @@ export enum TypeEnum {
 type Props = {
   value: TypeEnum
   onChange: (value: TypeEnum) => void
+  disableTry?: boolean
 }
 
 const Tab: FC<Props> = ({
   value,
   onChange,
+  disableTry,
 }) => {
   const { t } = useTranslation()
   const tabs = [
-    { id: TypeEnum.TRY, name: t('tryApp.tabHeader.try', { ns: 'explore' }) },
+    { id: TypeEnum.TRY, name: t('tryApp.tabHeader.try', { ns: 'explore' }), disabled: disableTry },
     { id: TypeEnum.DETAIL, name: t('tryApp.tabHeader.detail', { ns: 'explore' }) },
   ]
   return (

web/app/components/goto-anything/index.tsx

@@ -12,7 +12,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { getKeyboardKeyCodeBySystem, isEventTargetInputArea, isMac } from '@/app/components/workflow/utils/common'
+import ShortcutsName from '@/app/components/workflow/shortcuts-name'
+import { getKeyboardKeyCodeBySystem, isEventTargetInputArea } from '@/app/components/workflow/utils/common'
 import { selectWorkflowNode } from '@/app/components/workflow/utils/node-navigation'
 import { useGetLanguage } from '@/context/i18n'
 import InstallFromMarketplace from '../plugins/install-plugin/install-from-marketplace'
@@ -356,14 +357,7 @@ const GotoAnything: FC<Props> = ({
                   </div>
                 )}
               </div>
-              <div className="text-xs text-text-quaternary">
-                <span className="system-kbd rounded bg-gray-200 px-1 py-[2px] font-mono text-gray-700 dark:bg-gray-800 dark:text-gray-100">
-                  {isMac() ? '⌘' : 'Ctrl'}
-                </span>
-                <span className="system-kbd ml-1 rounded bg-gray-200 px-1 py-[2px] font-mono text-gray-700 dark:bg-gray-800 dark:text-gray-100">
-                  K
-                </span>
-              </div>
+              <ShortcutsName keys={['ctrl', 'K']} textColor="secondary" />
             </div>
 
             <Command.List className="h-[240px] overflow-y-auto">

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

@@ -10,6 +10,7 @@ import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { getDocDownloadUrl } from '@/service/common'
 import { cn } from '@/utils/classnames'
+import { downloadUrl } from '@/utils/download'
 import Button from '../../base/button'
 import Gdpr from '../../base/icons/src/public/common/Gdpr'
 import Iso from '../../base/icons/src/public/common/Iso'
@@ -47,9 +48,7 @@ const UpgradeOrDownload: FC<UpgradeOrDownloadProps> = ({ doc_name }) => {
     mutationFn: async () => {
       try {
         const ret = await getDocDownloadUrl(doc_name)
-        const a = document.createElement('a')
-        a.href = ret.url
-        a.click()
+        downloadUrl({ url: ret.url })
         Toast.notify({
           type: 'success',
           message: t('operation.downloadSuccess', { ns: 'common' }),

web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx

@@ -28,11 +28,12 @@ import { useToastContext } from '@/app/components/base/toast'
 import {
   useChecklistBeforePublish,
 } from '@/app/components/workflow/hooks'
+import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import {
   useStore,
   useWorkflowStore,
 } from '@/app/components/workflow/store'
-import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
+import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useDocLink } from '@/context/i18n'
 import { useModalContextSelector } from '@/context/modal-context'
@@ -261,13 +262,7 @@ const Popup = () => {
               : (
                   <div className="flex gap-1">
                     <span>{t('common.publishUpdate', { ns: 'workflow' })}</span>
-                    <div className="flex gap-0.5">
-                      {PUBLISH_SHORTCUT.map(key => (
-                        <span key={key} className="system-kbd h-4 w-4 rounded-[4px] bg-components-kbd-bg-white text-text-primary-on-surface">
-                          {getKeyboardKeyNameBySystem(key)}
-                        </span>
-                      ))}
-                    </div>
+                    <ShortcutsName keys={PUBLISH_SHORTCUT} bgColor="white" />
                   </div>
                 )
           }

web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx

@@ -4,9 +4,9 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { useWorkflowRun, useWorkflowStartRun } from '@/app/components/workflow/hooks'
+import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
-import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
 import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { cn } from '@/utils/classnames'
@@ -78,14 +78,7 @@ const RunMode = ({
         )}
         {
           !isDisabled && (
-            <div className="system-kbd flex items-center gap-x-0.5 text-text-tertiary">
-              <div className="flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray">
-                {getKeyboardKeyNameBySystem('alt')}
-              </div>
-              <div className="flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray">
-                R
-              </div>
-            </div>
+            <ShortcutsName keys={['alt', 'R']} textColor="secondary" />
           )
         }
       </button>

web/app/components/rag-pipeline/hooks/use-DSL.ts

@@ -11,6 +11,7 @@ import { useWorkflowStore } from '@/app/components/workflow/store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useExportPipelineDSL } from '@/service/use-pipeline'
 import { fetchWorkflowDraft } from '@/service/workflow'
+import { downloadBlob } from '@/utils/download'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
 
 export const useDSL = () => {
@@ -37,13 +38,8 @@ export const useDSL = () => {
         pipelineId,
         include,
       })
-      const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
-      const url = URL.createObjectURL(file)
-      a.href = url
-      a.download = `${knowledgeName}.pipeline`
-      a.click()
-      URL.revokeObjectURL(url)
+      downloadBlob({ data: file, fileName: `${knowledgeName}.pipeline` })
     }
     catch {
       notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })

web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
+import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { BlockEnum } from '@/app/components/workflow/types'
 import StartNodeSelectionPanel from './start-node-selection-panel'
 
@@ -75,9 +76,7 @@ const WorkflowOnboardingModal: FC<WorkflowOnboardingModalProps> = ({
       {isShow && (
         <div className="body-xs-regular pointer-events-none fixed left-1/2 top-1/2 z-[70] flex -translate-x-1/2 translate-y-[165px] items-center gap-1 text-text-quaternary">
           <span>{t('onboarding.escTip.press', { ns: 'workflow' })}</span>
-          <kbd className="system-kbd inline-flex h-4 min-w-4 items-center justify-center rounded bg-components-kbd-bg-gray px-1 text-text-tertiary">
-            {t('onboarding.escTip.key', { ns: 'workflow' })}
-          </kbd>
+          <ShortcutsName keys={[t('onboarding.escTip.key', { ns: 'workflow' })]} textColor="secondary" />
           <span>{t('onboarding.escTip.toDismiss', { ns: 'workflow' })}</span>
         </div>
       )}

web/app/components/workflow-app/hooks/use-DSL.ts

@@ -11,6 +11,7 @@ import {
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { exportAppConfig } from '@/service/apps'
 import { fetchWorkflowDraft } from '@/service/workflow'
+import { downloadBlob } from '@/utils/download'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
 
 export const useDSL = () => {
@@ -37,13 +38,8 @@ export const useDSL = () => {
         include,
         workflowID: workflowId,
       })
-      const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
-      const url = URL.createObjectURL(file)
-      a.href = url
-      a.download = `${appDetail.name}.yml`
-      a.click()
-      URL.revokeObjectURL(url)
+      downloadBlob({ data: file, fileName: `${appDetail.name}.yml` })
     }
     catch {
       notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })

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

@@ -0,0 +1,705 @@
+/**
+ * Test Suite for useNodesSyncDraft Hook
+ *
+ * PURPOSE:
+ * This hook handles syncing workflow draft to the server. The key fix being tested
+ * is the error handling behavior when `draft_workflow_not_sync` error occurs.
+ *
+ * MULTI-TAB PROBLEM SCENARIO:
+ * 1. User opens the same workflow in Tab A and Tab B (both have hash: v1)
+ * 2. Tab A saves successfully, server returns new hash: v2
+ * 3. Tab B tries to save with old hash: v1, server returns 400 error with code
+ *    'draft_workflow_not_sync'
+ * 4. BEFORE FIX: handleRefreshWorkflowDraft() was called without args, which fetched
+ *    draft AND overwrote canvas - user lost unsaved changes in Tab B
+ * 5. AFTER FIX: handleRefreshWorkflowDraft(true) is called, which fetches draft but
+ *    only updates hash (notUpdateCanvas=true), preserving user's canvas changes
+ *
+ * TESTING STRATEGY:
+ * We don't simulate actual tab switching UI behavior. Instead, we mock the API to
+ * return `draft_workflow_not_sync` error and verify:
+ * - The hook calls handleRefreshWorkflowDraft(true) - not handleRefreshWorkflowDraft()
+ * - This ensures canvas data is preserved while hash is updated for retry
+ *
+ * This is behavior-driven testing - we verify "what the code does when receiving
+ * specific API errors" rather than simulating complete user interaction flows.
+ * True multi-tab integration testing would require E2E frameworks like Playwright.
+ */
+
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useNodesSyncDraft } from './use-nodes-sync-draft'
+
+// Mock reactflow store
+const mockGetNodes = vi.fn()
+
+type MockEdge = {
+  id: string
+  source: string
+  target: string
+  data: Record<string, unknown>
+}
+
+const mockStoreState: {
+  getNodes: ReturnType<typeof vi.fn>
+  edges: MockEdge[]
+  transform: number[]
+} = {
+  getNodes: mockGetNodes,
+  edges: [],
+  transform: [0, 0, 1],
+}
+vi.mock('reactflow', () => ({
+  useStoreApi: () => ({
+    getState: () => mockStoreState,
+  }),
+}))
+
+// Mock features store
+const mockFeaturesState = {
+  features: {
+    opening: { enabled: false, opening_statement: '', suggested_questions: [] },
+    suggested: {},
+    text2speech: {},
+    speech2text: {},
+    citation: {},
+    moderation: {},
+    file: {},
+  },
+}
+vi.mock('@/app/components/base/features/hooks', () => ({
+  useFeaturesStore: () => ({
+    getState: () => mockFeaturesState,
+  }),
+}))
+
+// Mock workflow service
+const mockSyncWorkflowDraft = vi.fn()
+vi.mock('@/service/workflow', () => ({
+  syncWorkflowDraft: (...args: unknown[]) => mockSyncWorkflowDraft(...args),
+}))
+
+// Mock useNodesReadOnly
+const mockGetNodesReadOnly = vi.fn()
+vi.mock('@/app/components/workflow/hooks/use-workflow', () => ({
+  useNodesReadOnly: () => ({
+    getNodesReadOnly: mockGetNodesReadOnly,
+  }),
+}))
+
+// Mock useSerialAsyncCallback - pass through the callback
+vi.mock('@/app/components/workflow/hooks/use-serial-async-callback', () => ({
+  useSerialAsyncCallback: (callback: (...args: unknown[]) => unknown) => callback,
+}))
+
+// Mock workflow store
+const mockSetSyncWorkflowDraftHash = vi.fn()
+const mockSetDraftUpdatedAt = vi.fn()
+
+const createMockWorkflowStoreState = (overrides = {}) => ({
+  appId: 'test-app-id',
+  conversationVariables: [],
+  environmentVariables: [],
+  syncWorkflowDraftHash: 'current-hash-123',
+  isWorkflowDataLoaded: true,
+  setSyncWorkflowDraftHash: mockSetSyncWorkflowDraftHash,
+  setDraftUpdatedAt: mockSetDraftUpdatedAt,
+  ...overrides,
+})
+
+const mockWorkflowStoreGetState = vi.fn()
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    getState: mockWorkflowStoreGetState,
+  }),
+}))
+
+// Mock useWorkflowRefreshDraft (THE KEY DEPENDENCY FOR THIS TEST)
+const mockHandleRefreshWorkflowDraft = vi.fn()
+vi.mock('.', () => ({
+  useWorkflowRefreshDraft: () => ({
+    handleRefreshWorkflowDraft: mockHandleRefreshWorkflowDraft,
+  }),
+}))
+
+// Mock API_PREFIX
+vi.mock('@/config', () => ({
+  API_PREFIX: '/api',
+}))
+
+// Create a mock error response that mimics the actual API error
+const createMockErrorResponse = (code: string) => {
+  const errorBody = { code, message: 'Draft not in sync' }
+  let bodyUsed = false
+
+  return {
+    json: vi.fn().mockImplementation(() => {
+      bodyUsed = true
+      return Promise.resolve(errorBody)
+    }),
+    get bodyUsed() {
+      return bodyUsed
+    },
+  }
+}
+
+describe('useNodesSyncDraft', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockGetNodesReadOnly.mockReturnValue(false)
+    mockGetNodes.mockReturnValue([
+      { id: 'node-1', type: 'start', data: { type: 'start' } },
+      { id: 'node-2', type: 'llm', data: { type: 'llm' } },
+    ])
+    mockStoreState.edges = [
+      { id: 'edge-1', source: 'node-1', target: 'node-2', data: {} },
+    ]
+    mockWorkflowStoreGetState.mockReturnValue(createMockWorkflowStoreState())
+    mockSyncWorkflowDraft.mockResolvedValue({
+      hash: 'new-hash-456',
+      updated_at: Date.now(),
+    })
+  })
+
+  afterEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('doSyncWorkflowDraft function', () => {
+    it('should return doSyncWorkflowDraft function', () => {
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      expect(result.current.doSyncWorkflowDraft).toBeDefined()
+      expect(typeof result.current.doSyncWorkflowDraft).toBe('function')
+    })
+
+    it('should return syncWorkflowDraftWhenPageClose function', () => {
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      expect(result.current.syncWorkflowDraftWhenPageClose).toBeDefined()
+      expect(typeof result.current.syncWorkflowDraftWhenPageClose).toBe('function')
+    })
+  })
+
+  describe('successful sync', () => {
+    it('should call syncWorkflowDraft service on successful sync', async () => {
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      expect(mockSyncWorkflowDraft).toHaveBeenCalledWith({
+        url: '/apps/test-app-id/workflows/draft',
+        params: expect.objectContaining({
+          hash: 'current-hash-123',
+          graph: expect.objectContaining({
+            nodes: expect.any(Array),
+            edges: expect.any(Array),
+            viewport: expect.any(Object),
+          }),
+        }),
+      })
+    })
+
+    it('should update syncWorkflowDraftHash on success', async () => {
+      mockSyncWorkflowDraft.mockResolvedValue({
+        hash: 'new-hash-789',
+        updated_at: 1234567890,
+      })
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      expect(mockSetSyncWorkflowDraftHash).toHaveBeenCalledWith('new-hash-789')
+    })
+
+    it('should update draftUpdatedAt on success', async () => {
+      const updatedAt = 1234567890
+      mockSyncWorkflowDraft.mockResolvedValue({
+        hash: 'new-hash',
+        updated_at: updatedAt,
+      })
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      expect(mockSetDraftUpdatedAt).toHaveBeenCalledWith(updatedAt)
+    })
+
+    it('should call onSuccess callback on success', async () => {
+      const onSuccess = vi.fn()
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft(false, { onSuccess })
+      })
+
+      expect(onSuccess).toHaveBeenCalled()
+    })
+
+    it('should call onSettled callback after success', async () => {
+      const onSettled = vi.fn()
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft(false, { onSettled })
+      })
+
+      expect(onSettled).toHaveBeenCalled()
+    })
+  })
+
+  describe('sync error handling - draft_workflow_not_sync (THE KEY FIX)', () => {
+    /**
+     * This is THE KEY TEST for the bug fix.
+     *
+     * SCENARIO: Multi-tab editing
+     * 1. User opens workflow in Tab A and Tab B
+     * 2. Tab A saves draft successfully, gets new hash
+     * 3. Tab B tries to save with old hash
+     * 4. Server returns 400 with code 'draft_workflow_not_sync'
+     *
+     * BEFORE FIX:
+     * - handleRefreshWorkflowDraft() was called without arguments
+     * - This would fetch draft AND overwrite the canvas
+     * - User loses their unsaved changes in Tab B
+     *
+     * AFTER FIX:
+     * - handleRefreshWorkflowDraft(true) is called
+     * - This fetches draft but DOES NOT overwrite canvas
+     * - Only hash is updated for the next sync attempt
+     * - User's unsaved changes are preserved
+     */
+    it('should call handleRefreshWorkflowDraft with notUpdateCanvas=true when draft_workflow_not_sync error occurs', async () => {
+      const mockError = createMockErrorResponse('draft_workflow_not_sync')
+      mockSyncWorkflowDraft.mockRejectedValue(mockError)
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      // THE KEY ASSERTION: handleRefreshWorkflowDraft must be called with true
+      await waitFor(() => {
+        expect(mockHandleRefreshWorkflowDraft).toHaveBeenCalledWith(true)
+      })
+    })
+
+    it('should NOT call handleRefreshWorkflowDraft when notRefreshWhenSyncError is true', async () => {
+      const mockError = createMockErrorResponse('draft_workflow_not_sync')
+      mockSyncWorkflowDraft.mockRejectedValue(mockError)
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        // First parameter is notRefreshWhenSyncError
+        await result.current.doSyncWorkflowDraft(true)
+      })
+
+      // Wait a bit for async operations
+      await new Promise(resolve => setTimeout(resolve, 100))
+
+      expect(mockHandleRefreshWorkflowDraft).not.toHaveBeenCalled()
+    })
+
+    it('should call onError callback when draft_workflow_not_sync error occurs', async () => {
+      const mockError = createMockErrorResponse('draft_workflow_not_sync')
+      mockSyncWorkflowDraft.mockRejectedValue(mockError)
+      const onError = vi.fn()
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft(false, { onError })
+      })
+
+      expect(onError).toHaveBeenCalled()
+    })
+
+    it('should call onSettled callback after error', async () => {
+      const mockError = createMockErrorResponse('draft_workflow_not_sync')
+      mockSyncWorkflowDraft.mockRejectedValue(mockError)
+      const onSettled = vi.fn()
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft(false, { onSettled })
+      })
+
+      expect(onSettled).toHaveBeenCalled()
+    })
+  })
+
+  describe('other error handling', () => {
+    it('should NOT call handleRefreshWorkflowDraft for non-draft_workflow_not_sync errors', async () => {
+      const mockError = createMockErrorResponse('some_other_error')
+      mockSyncWorkflowDraft.mockRejectedValue(mockError)
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      // Wait a bit for async operations
+      await new Promise(resolve => setTimeout(resolve, 100))
+
+      expect(mockHandleRefreshWorkflowDraft).not.toHaveBeenCalled()
+    })
+
+    it('should handle error without json method', async () => {
+      const mockError = new Error('Network error')
+      mockSyncWorkflowDraft.mockRejectedValue(mockError)
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+      const onError = vi.fn()
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft(false, { onError })
+      })
+
+      expect(onError).toHaveBeenCalled()
+      expect(mockHandleRefreshWorkflowDraft).not.toHaveBeenCalled()
+    })
+
+    it('should handle error with bodyUsed already true', async () => {
+      const mockError = {
+        json: vi.fn(),
+        bodyUsed: true,
+      }
+      mockSyncWorkflowDraft.mockRejectedValue(mockError)
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      // Should not call json() when bodyUsed is true
+      expect(mockError.json).not.toHaveBeenCalled()
+      expect(mockHandleRefreshWorkflowDraft).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('read-only mode', () => {
+    it('should not sync when nodes are read-only', async () => {
+      mockGetNodesReadOnly.mockReturnValue(true)
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      expect(mockSyncWorkflowDraft).not.toHaveBeenCalled()
+    })
+
+    it('should not sync on page close when nodes are read-only', () => {
+      mockGetNodesReadOnly.mockReturnValue(true)
+
+      // Mock sendBeacon
+      const mockSendBeacon = vi.fn()
+      Object.defineProperty(navigator, 'sendBeacon', {
+        value: mockSendBeacon,
+        writable: true,
+      })
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      act(() => {
+        result.current.syncWorkflowDraftWhenPageClose()
+      })
+
+      expect(mockSendBeacon).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('workflow data not loaded', () => {
+    it('should not sync when workflow data is not loaded', async () => {
+      mockWorkflowStoreGetState.mockReturnValue(
+        createMockWorkflowStoreState({ isWorkflowDataLoaded: false }),
+      )
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      expect(mockSyncWorkflowDraft).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('no appId', () => {
+    it('should not sync when appId is not set', async () => {
+      mockWorkflowStoreGetState.mockReturnValue(
+        createMockWorkflowStoreState({ appId: null }),
+      )
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      expect(mockSyncWorkflowDraft).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('node filtering', () => {
+    it('should filter out temp nodes', async () => {
+      mockGetNodes.mockReturnValue([
+        { id: 'node-1', type: 'start', data: { type: 'start' } },
+        { id: 'node-temp', type: 'custom', data: { type: 'custom', _isTempNode: true } },
+        { id: 'node-2', type: 'llm', data: { type: 'llm' } },
+      ])
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      expect(mockSyncWorkflowDraft).toHaveBeenCalledWith(
+        expect.objectContaining({
+          params: expect.objectContaining({
+            graph: expect.objectContaining({
+              nodes: expect.not.arrayContaining([
+                expect.objectContaining({ id: 'node-temp' }),
+              ]),
+            }),
+          }),
+        }),
+      )
+    })
+
+    it('should remove internal underscore properties from nodes', async () => {
+      mockGetNodes.mockReturnValue([
+        {
+          id: 'node-1',
+          type: 'start',
+          data: {
+            type: 'start',
+            _internalProp: 'should be removed',
+            _anotherInternal: true,
+            publicProp: 'should remain',
+          },
+        },
+      ])
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      const callArgs = mockSyncWorkflowDraft.mock.calls[0][0]
+      const sentNode = callArgs.params.graph.nodes[0]
+
+      expect(sentNode.data).not.toHaveProperty('_internalProp')
+      expect(sentNode.data).not.toHaveProperty('_anotherInternal')
+      expect(sentNode.data).toHaveProperty('publicProp', 'should remain')
+    })
+  })
+
+  describe('edge filtering', () => {
+    it('should filter out temp edges', async () => {
+      mockStoreState.edges = [
+        { id: 'edge-1', source: 'node-1', target: 'node-2', data: {} },
+        { id: 'edge-temp', source: 'node-1', target: 'node-3', data: { _isTemp: true } },
+      ]
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      const callArgs = mockSyncWorkflowDraft.mock.calls[0][0]
+      const sentEdges = callArgs.params.graph.edges
+
+      expect(sentEdges).toHaveLength(1)
+      expect(sentEdges[0].id).toBe('edge-1')
+    })
+
+    it('should remove internal underscore properties from edges', async () => {
+      mockStoreState.edges = [
+        {
+          id: 'edge-1',
+          source: 'node-1',
+          target: 'node-2',
+          data: {
+            _internalEdgeProp: 'should be removed',
+            publicEdgeProp: 'should remain',
+          },
+        },
+      ]
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      const callArgs = mockSyncWorkflowDraft.mock.calls[0][0]
+      const sentEdge = callArgs.params.graph.edges[0]
+
+      expect(sentEdge.data).not.toHaveProperty('_internalEdgeProp')
+      expect(sentEdge.data).toHaveProperty('publicEdgeProp', 'should remain')
+    })
+  })
+
+  describe('viewport handling', () => {
+    it('should send current viewport from transform', async () => {
+      mockStoreState.transform = [100, 200, 1.5]
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      expect(mockSyncWorkflowDraft).toHaveBeenCalledWith(
+        expect.objectContaining({
+          params: expect.objectContaining({
+            graph: expect.objectContaining({
+              viewport: { x: 100, y: 200, zoom: 1.5 },
+            }),
+          }),
+        }),
+      )
+    })
+  })
+
+  describe('multi-tab concurrent editing scenario (END-TO-END TEST)', () => {
+    /**
+     * Simulates the complete multi-tab scenario to verify the fix works correctly.
+     *
+     * Scenario:
+     * 1. Tab A and Tab B both have the workflow open with hash 'hash-v1'
+     * 2. Tab A saves successfully, server returns 'hash-v2'
+     * 3. Tab B tries to save with 'hash-v1', gets 'draft_workflow_not_sync' error
+     * 4. Tab B should only update hash to 'hash-v2', not overwrite canvas
+     * 5. Tab B can now retry save with correct hash
+     */
+    it('should preserve canvas data during hash conflict resolution', async () => {
+      // Initial state: both tabs have hash-v1
+      mockWorkflowStoreGetState.mockReturnValue(
+        createMockWorkflowStoreState({ syncWorkflowDraftHash: 'hash-v1' }),
+      )
+
+      // Tab B tries to save with old hash, server returns error
+      const syncError = createMockErrorResponse('draft_workflow_not_sync')
+      mockSyncWorkflowDraft.mockRejectedValue(syncError)
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      // Tab B attempts to sync
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      // Verify the sync was attempted with old hash
+      expect(mockSyncWorkflowDraft).toHaveBeenCalledWith(
+        expect.objectContaining({
+          params: expect.objectContaining({
+            hash: 'hash-v1',
+          }),
+        }),
+      )
+
+      // Verify handleRefreshWorkflowDraft was called with true (not overwrite canvas)
+      await waitFor(() => {
+        expect(mockHandleRefreshWorkflowDraft).toHaveBeenCalledWith(true)
+      })
+
+      // The key assertion: only one argument (true) was passed
+      expect(mockHandleRefreshWorkflowDraft).toHaveBeenCalledTimes(1)
+      expect(mockHandleRefreshWorkflowDraft.mock.calls[0]).toEqual([true])
+    })
+
+    it('should handle multiple consecutive sync failures gracefully', async () => {
+      // Create fresh error for each call to avoid bodyUsed issue
+      mockSyncWorkflowDraft
+        .mockRejectedValueOnce(createMockErrorResponse('draft_workflow_not_sync'))
+        .mockRejectedValueOnce(createMockErrorResponse('draft_workflow_not_sync'))
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      // First sync attempt
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      // Wait for first refresh call
+      await waitFor(() => {
+        expect(mockHandleRefreshWorkflowDraft).toHaveBeenCalledTimes(1)
+      })
+
+      // Second sync attempt
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft()
+      })
+
+      // Both should call handleRefreshWorkflowDraft with true
+      await waitFor(() => {
+        expect(mockHandleRefreshWorkflowDraft).toHaveBeenCalledTimes(2)
+      })
+
+      mockHandleRefreshWorkflowDraft.mock.calls.forEach((call) => {
+        expect(call).toEqual([true])
+      })
+    })
+  })
+
+  describe('callbacks behavior', () => {
+    it('should not call onSuccess when sync fails', async () => {
+      const syncError = createMockErrorResponse('draft_workflow_not_sync')
+      mockSyncWorkflowDraft.mockRejectedValue(syncError)
+      const onSuccess = vi.fn()
+      const onError = vi.fn()
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft(false, { onSuccess, onError })
+      })
+
+      expect(onSuccess).not.toHaveBeenCalled()
+      expect(onError).toHaveBeenCalled()
+    })
+
+    it('should always call onSettled regardless of success or failure', async () => {
+      const onSettled = vi.fn()
+
+      const { result } = renderHook(() => useNodesSyncDraft())
+
+      // Test success case
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft(false, { onSettled })
+      })
+      expect(onSettled).toHaveBeenCalledTimes(1)
+
+      // Reset
+      onSettled.mockClear()
+
+      // Test failure case
+      const syncError = createMockErrorResponse('draft_workflow_not_sync')
+      mockSyncWorkflowDraft.mockRejectedValue(syncError)
+
+      await act(async () => {
+        await result.current.doSyncWorkflowDraft(false, { onSettled })
+      })
+      expect(onSettled).toHaveBeenCalledTimes(1)
+    })
+  })
+})

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

@@ -115,7 +115,7 @@ export const useNodesSyncDraft = () => {
         if (error && error.json && !error.bodyUsed) {
           error.json().then((err: any) => {
             if (err.code === 'draft_workflow_not_sync' && !notRefreshWhenSyncError)
-              handleRefreshWorkflowDraft()
+              handleRefreshWorkflowDraft(true)
           })
         }
         callback?.onError?.()

web/app/components/workflow-app/hooks/use-workflow-refresh-draft.spec.ts

@@ -0,0 +1,556 @@
+/**
+ * Test Suite for useWorkflowRefreshDraft Hook
+ *
+ * PURPOSE:
+ * This hook is responsible for refreshing workflow draft data from the server.
+ * The key fix being tested is the `notUpdateCanvas` parameter behavior.
+ *
+ * MULTI-TAB PROBLEM SCENARIO:
+ * 1. User opens the same workflow in Tab A and Tab B (both have hash: v1)
+ * 2. Tab A saves successfully, server returns new hash: v2
+ * 3. Tab B tries to save with old hash: v1, server returns 400 error (draft_workflow_not_sync)
+ * 4. BEFORE FIX: handleRefreshWorkflowDraft() was called without args, which fetched
+ *    draft AND overwrote canvas - user lost unsaved changes in Tab B
+ * 5. AFTER FIX: handleRefreshWorkflowDraft(true) is called, which fetches draft but
+ *    only updates hash, preserving user's canvas changes
+ *
+ * TESTING STRATEGY:
+ * We don't simulate actual tab switching UI behavior. Instead, we test the hook's
+ * response to specific inputs:
+ * - When notUpdateCanvas=true: should NOT call handleUpdateWorkflowCanvas
+ * - When notUpdateCanvas=false/undefined: should call handleUpdateWorkflowCanvas
+ *
+ * This is behavior-driven testing - we verify "what the code does when given specific
+ * inputs" rather than simulating complete user interaction flows.
+ */
+
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useWorkflowRefreshDraft } from './use-workflow-refresh-draft'
+
+// Mock the workflow service
+const mockFetchWorkflowDraft = vi.fn()
+vi.mock('@/service/workflow', () => ({
+  fetchWorkflowDraft: (...args: unknown[]) => mockFetchWorkflowDraft(...args),
+}))
+
+// Mock the workflow update hook
+const mockHandleUpdateWorkflowCanvas = vi.fn()
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useWorkflowUpdate: () => ({
+    handleUpdateWorkflowCanvas: mockHandleUpdateWorkflowCanvas,
+  }),
+}))
+
+// Mock store state
+const mockSetSyncWorkflowDraftHash = vi.fn()
+const mockSetIsSyncingWorkflowDraft = vi.fn()
+const mockSetEnvironmentVariables = vi.fn()
+const mockSetEnvSecrets = vi.fn()
+const mockSetConversationVariables = vi.fn()
+const mockSetIsWorkflowDataLoaded = vi.fn()
+const mockCancelDebouncedSync = vi.fn()
+
+const createMockStoreState = (overrides = {}) => ({
+  appId: 'test-app-id',
+  setSyncWorkflowDraftHash: mockSetSyncWorkflowDraftHash,
+  setIsSyncingWorkflowDraft: mockSetIsSyncingWorkflowDraft,
+  setEnvironmentVariables: mockSetEnvironmentVariables,
+  setEnvSecrets: mockSetEnvSecrets,
+  setConversationVariables: mockSetConversationVariables,
+  setIsWorkflowDataLoaded: mockSetIsWorkflowDataLoaded,
+  isWorkflowDataLoaded: true,
+  debouncedSyncWorkflowDraft: {
+    cancel: mockCancelDebouncedSync,
+  },
+  ...overrides,
+})
+
+const mockWorkflowStoreGetState = vi.fn()
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    getState: mockWorkflowStoreGetState,
+  }),
+}))
+
+// Default mock response from fetchWorkflowDraft
+const createMockDraftResponse = (overrides = {}) => ({
+  hash: 'new-hash-12345',
+  graph: {
+    nodes: [{ id: 'node-1', type: 'start', data: {} }],
+    edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
+    viewport: { x: 100, y: 200, zoom: 1.5 },
+  },
+  environment_variables: [
+    { id: 'env-1', name: 'API_KEY', value: 'secret-key', value_type: 'secret' },
+    { id: 'env-2', name: 'BASE_URL', value: 'https://api.example.com', value_type: 'string' },
+  ],
+  conversation_variables: [
+    { id: 'conv-1', name: 'user_input', value: 'test' },
+  ],
+  ...overrides,
+})
+
+describe('useWorkflowRefreshDraft', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockWorkflowStoreGetState.mockReturnValue(createMockStoreState())
+    mockFetchWorkflowDraft.mockResolvedValue(createMockDraftResponse())
+  })
+
+  afterEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('handleRefreshWorkflowDraft function', () => {
+    it('should return handleRefreshWorkflowDraft function', () => {
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      expect(result.current.handleRefreshWorkflowDraft).toBeDefined()
+      expect(typeof result.current.handleRefreshWorkflowDraft).toBe('function')
+    })
+  })
+
+  describe('notUpdateCanvas parameter behavior (THE KEY FIX)', () => {
+    it('should NOT call handleUpdateWorkflowCanvas when notUpdateCanvas is true', async () => {
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(true)
+      })
+
+      await waitFor(() => {
+        expect(mockFetchWorkflowDraft).toHaveBeenCalledWith('/apps/test-app-id/workflows/draft')
+      })
+
+      await waitFor(() => {
+        expect(mockSetSyncWorkflowDraftHash).toHaveBeenCalledWith('new-hash-12345')
+      })
+
+      // THE KEY ASSERTION: Canvas should NOT be updated when notUpdateCanvas is true
+      expect(mockHandleUpdateWorkflowCanvas).not.toHaveBeenCalled()
+    })
+
+    it('should call handleUpdateWorkflowCanvas when notUpdateCanvas is false', async () => {
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(false)
+      })
+
+      await waitFor(() => {
+        expect(mockFetchWorkflowDraft).toHaveBeenCalledWith('/apps/test-app-id/workflows/draft')
+      })
+
+      await waitFor(() => {
+        // Canvas SHOULD be updated when notUpdateCanvas is false
+        expect(mockHandleUpdateWorkflowCanvas).toHaveBeenCalledWith({
+          nodes: [{ id: 'node-1', type: 'start', data: {} }],
+          edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
+          viewport: { x: 100, y: 200, zoom: 1.5 },
+        })
+      })
+
+      await waitFor(() => {
+        expect(mockSetSyncWorkflowDraftHash).toHaveBeenCalledWith('new-hash-12345')
+      })
+    })
+
+    it('should call handleUpdateWorkflowCanvas when notUpdateCanvas is undefined (default)', async () => {
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft()
+      })
+
+      await waitFor(() => {
+        expect(mockFetchWorkflowDraft).toHaveBeenCalled()
+      })
+
+      await waitFor(() => {
+        // Canvas SHOULD be updated when notUpdateCanvas is undefined
+        expect(mockHandleUpdateWorkflowCanvas).toHaveBeenCalled()
+      })
+    })
+
+    it('should still update hash even when notUpdateCanvas is true', async () => {
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(true)
+      })
+
+      await waitFor(() => {
+        expect(mockSetSyncWorkflowDraftHash).toHaveBeenCalledWith('new-hash-12345')
+      })
+
+      // Verify canvas was NOT updated
+      expect(mockHandleUpdateWorkflowCanvas).not.toHaveBeenCalled()
+    })
+
+    it('should still update environment variables when notUpdateCanvas is true', async () => {
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(true)
+      })
+
+      await waitFor(() => {
+        expect(mockSetEnvironmentVariables).toHaveBeenCalledWith([
+          { id: 'env-1', name: 'API_KEY', value: '[__HIDDEN__]', value_type: 'secret' },
+          { id: 'env-2', name: 'BASE_URL', value: 'https://api.example.com', value_type: 'string' },
+        ])
+      })
+
+      expect(mockHandleUpdateWorkflowCanvas).not.toHaveBeenCalled()
+    })
+
+    it('should still update env secrets when notUpdateCanvas is true', async () => {
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(true)
+      })
+
+      await waitFor(() => {
+        expect(mockSetEnvSecrets).toHaveBeenCalledWith({
+          'env-1': 'secret-key',
+        })
+      })
+
+      expect(mockHandleUpdateWorkflowCanvas).not.toHaveBeenCalled()
+    })
+
+    it('should still update conversation variables when notUpdateCanvas is true', async () => {
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(true)
+      })
+
+      await waitFor(() => {
+        expect(mockSetConversationVariables).toHaveBeenCalledWith([
+          { id: 'conv-1', name: 'user_input', value: 'test' },
+        ])
+      })
+
+      expect(mockHandleUpdateWorkflowCanvas).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('syncing state management', () => {
+    it('should set isSyncingWorkflowDraft to true before fetch', () => {
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft()
+      })
+
+      expect(mockSetIsSyncingWorkflowDraft).toHaveBeenCalledWith(true)
+    })
+
+    it('should set isSyncingWorkflowDraft to false after fetch completes', async () => {
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft()
+      })
+
+      await waitFor(() => {
+        expect(mockSetIsSyncingWorkflowDraft).toHaveBeenCalledWith(false)
+      })
+    })
+
+    it('should set isSyncingWorkflowDraft to false even when fetch fails', async () => {
+      mockFetchWorkflowDraft.mockRejectedValue(new Error('Network error'))
+
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft()
+      })
+
+      await waitFor(() => {
+        expect(mockSetIsSyncingWorkflowDraft).toHaveBeenCalledWith(false)
+      })
+    })
+  })
+
+  describe('isWorkflowDataLoaded flag management', () => {
+    it('should set isWorkflowDataLoaded to false before fetch when it was true', () => {
+      mockWorkflowStoreGetState.mockReturnValue(
+        createMockStoreState({ isWorkflowDataLoaded: true }),
+      )
+
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft()
+      })
+
+      expect(mockSetIsWorkflowDataLoaded).toHaveBeenCalledWith(false)
+    })
+
+    it('should set isWorkflowDataLoaded to true after fetch succeeds', async () => {
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft()
+      })
+
+      await waitFor(() => {
+        expect(mockSetIsWorkflowDataLoaded).toHaveBeenCalledWith(true)
+      })
+    })
+
+    it('should restore isWorkflowDataLoaded when fetch fails and it was previously loaded', async () => {
+      mockWorkflowStoreGetState.mockReturnValue(
+        createMockStoreState({ isWorkflowDataLoaded: true }),
+      )
+      mockFetchWorkflowDraft.mockRejectedValue(new Error('Network error'))
+
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft()
+      })
+
+      await waitFor(() => {
+        // Should restore to true because wasLoaded was true
+        expect(mockSetIsWorkflowDataLoaded).toHaveBeenLastCalledWith(true)
+      })
+    })
+  })
+
+  describe('debounced sync cancellation', () => {
+    it('should cancel debounced sync before fetching draft', () => {
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft()
+      })
+
+      expect(mockCancelDebouncedSync).toHaveBeenCalled()
+    })
+
+    it('should handle case when debouncedSyncWorkflowDraft has no cancel method', () => {
+      mockWorkflowStoreGetState.mockReturnValue(
+        createMockStoreState({ debouncedSyncWorkflowDraft: {} }),
+      )
+
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      // Should not throw
+      expect(() => {
+        act(() => {
+          result.current.handleRefreshWorkflowDraft()
+        })
+      }).not.toThrow()
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle empty graph in response', async () => {
+      mockFetchWorkflowDraft.mockResolvedValue({
+        hash: 'hash-empty',
+        graph: null,
+        environment_variables: [],
+        conversation_variables: [],
+      })
+
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(false)
+      })
+
+      await waitFor(() => {
+        expect(mockHandleUpdateWorkflowCanvas).toHaveBeenCalledWith({
+          nodes: [],
+          edges: [],
+          viewport: { x: 0, y: 0, zoom: 1 },
+        })
+      })
+    })
+
+    it('should handle missing viewport in response', async () => {
+      mockFetchWorkflowDraft.mockResolvedValue({
+        hash: 'hash-no-viewport',
+        graph: {
+          nodes: [{ id: 'node-1' }],
+          edges: [],
+          viewport: null,
+        },
+        environment_variables: [],
+        conversation_variables: [],
+      })
+
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(false)
+      })
+
+      await waitFor(() => {
+        expect(mockHandleUpdateWorkflowCanvas).toHaveBeenCalledWith({
+          nodes: [{ id: 'node-1' }],
+          edges: [],
+          viewport: { x: 0, y: 0, zoom: 1 },
+        })
+      })
+    })
+
+    it('should handle missing environment_variables in response', async () => {
+      mockFetchWorkflowDraft.mockResolvedValue({
+        hash: 'hash-no-env',
+        graph: { nodes: [], edges: [], viewport: { x: 0, y: 0, zoom: 1 } },
+        environment_variables: undefined,
+        conversation_variables: [],
+      })
+
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(true)
+      })
+
+      await waitFor(() => {
+        expect(mockSetEnvironmentVariables).toHaveBeenCalledWith([])
+        expect(mockSetEnvSecrets).toHaveBeenCalledWith({})
+      })
+    })
+
+    it('should handle missing conversation_variables in response', async () => {
+      mockFetchWorkflowDraft.mockResolvedValue({
+        hash: 'hash-no-conv',
+        graph: { nodes: [], edges: [], viewport: { x: 0, y: 0, zoom: 1 } },
+        environment_variables: [],
+        conversation_variables: undefined,
+      })
+
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(true)
+      })
+
+      await waitFor(() => {
+        expect(mockSetConversationVariables).toHaveBeenCalledWith([])
+      })
+    })
+
+    it('should filter only secret type for envSecrets', async () => {
+      mockFetchWorkflowDraft.mockResolvedValue({
+        hash: 'hash-mixed-env',
+        graph: { nodes: [], edges: [], viewport: { x: 0, y: 0, zoom: 1 } },
+        environment_variables: [
+          { id: 'env-1', name: 'SECRET_KEY', value: 'secret-value', value_type: 'secret' },
+          { id: 'env-2', name: 'PUBLIC_URL', value: 'https://example.com', value_type: 'string' },
+          { id: 'env-3', name: 'ANOTHER_SECRET', value: 'another-secret', value_type: 'secret' },
+        ],
+        conversation_variables: [],
+      })
+
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(true)
+      })
+
+      await waitFor(() => {
+        expect(mockSetEnvSecrets).toHaveBeenCalledWith({
+          'env-1': 'secret-value',
+          'env-3': 'another-secret',
+        })
+      })
+    })
+
+    it('should hide secret values in environment variables', async () => {
+      mockFetchWorkflowDraft.mockResolvedValue({
+        hash: 'hash-secrets',
+        graph: { nodes: [], edges: [], viewport: { x: 0, y: 0, zoom: 1 } },
+        environment_variables: [
+          { id: 'env-1', name: 'SECRET_KEY', value: 'super-secret', value_type: 'secret' },
+          { id: 'env-2', name: 'PUBLIC_URL', value: 'https://example.com', value_type: 'string' },
+        ],
+        conversation_variables: [],
+      })
+
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(true)
+      })
+
+      await waitFor(() => {
+        expect(mockSetEnvironmentVariables).toHaveBeenCalledWith([
+          { id: 'env-1', name: 'SECRET_KEY', value: '[__HIDDEN__]', value_type: 'secret' },
+          { id: 'env-2', name: 'PUBLIC_URL', value: 'https://example.com', value_type: 'string' },
+        ])
+      })
+    })
+  })
+
+  describe('multi-tab scenario simulation (THE BUG FIX VERIFICATION)', () => {
+    /**
+     * This test verifies the fix for the multi-tab scenario:
+     * 1. User opens workflow in Tab A and Tab B
+     * 2. Tab A saves draft successfully
+     * 3. Tab B tries to save but gets 'draft_workflow_not_sync' error (hash mismatch)
+     * 4. BEFORE FIX: Tab B would fetch draft and overwrite canvas with old data
+     * 5. AFTER FIX: Tab B only updates hash, preserving user's canvas changes
+     */
+    it('should only update hash when called with notUpdateCanvas=true (simulating sync error recovery)', async () => {
+      const mockResponse = createMockDraftResponse()
+      mockFetchWorkflowDraft.mockResolvedValue(mockResponse)
+
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      // Simulate the sync error recovery scenario where notUpdateCanvas is true
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(true)
+      })
+
+      await waitFor(() => {
+        expect(mockFetchWorkflowDraft).toHaveBeenCalled()
+      })
+
+      await waitFor(() => {
+        // Hash should be updated for next sync attempt
+        expect(mockSetSyncWorkflowDraftHash).toHaveBeenCalledWith('new-hash-12345')
+      })
+
+      // Canvas should NOT be updated - user's changes are preserved
+      expect(mockHandleUpdateWorkflowCanvas).not.toHaveBeenCalled()
+
+      // Other states should still be updated
+      expect(mockSetEnvironmentVariables).toHaveBeenCalled()
+      expect(mockSetConversationVariables).toHaveBeenCalled()
+    })
+
+    it('should update canvas when called with notUpdateCanvas=false (normal refresh)', async () => {
+      const mockResponse = createMockDraftResponse()
+      mockFetchWorkflowDraft.mockResolvedValue(mockResponse)
+
+      const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+      // Simulate normal refresh scenario
+      act(() => {
+        result.current.handleRefreshWorkflowDraft(false)
+      })
+
+      await waitFor(() => {
+        expect(mockFetchWorkflowDraft).toHaveBeenCalled()
+      })
+
+      await waitFor(() => {
+        expect(mockSetSyncWorkflowDraftHash).toHaveBeenCalledWith('new-hash-12345')
+      })
+
+      // Canvas SHOULD be updated in normal refresh
+      await waitFor(() => {
+        expect(mockHandleUpdateWorkflowCanvas).toHaveBeenCalled()
+      })
+    })
+  })
+})

web/app/components/workflow-app/hooks/use-workflow-refresh-draft.ts

@@ -8,7 +8,7 @@ export const useWorkflowRefreshDraft = () => {
   const workflowStore = useWorkflowStore()
   const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
 
-  const handleRefreshWorkflowDraft = useCallback(() => {
+  const handleRefreshWorkflowDraft = useCallback((notUpdateCanvas?: boolean) => {
     const {
       appId,
       setSyncWorkflowDraftHash,
@@ -31,12 +31,14 @@ export const useWorkflowRefreshDraft = () => {
     fetchWorkflowDraft(`/apps/${appId}/workflows/draft`)
       .then((response) => {
         // Ensure we have a valid workflow structure with viewport
-        const workflowData: WorkflowDataUpdater = {
-          nodes: response.graph?.nodes || [],
-          edges: response.graph?.edges || [],
-          viewport: response.graph?.viewport || { x: 0, y: 0, zoom: 1 },
+        if (!notUpdateCanvas) {
+          const workflowData: WorkflowDataUpdater = {
+            nodes: response.graph?.nodes || [],
+            edges: response.graph?.edges || [],
+            viewport: response.graph?.viewport || { x: 0, y: 0, zoom: 1 },
+          }
+          handleUpdateWorkflowCanvas(workflowData)
         }
-        handleUpdateWorkflowCanvas(workflowData)
         setSyncWorkflowDraftHash(response.hash)
         setEnvSecrets((response.environment_variables || []).filter(env => env.value_type === 'secret').reduce((acc, env) => {
           acc[env.id] = env.value

web/app/components/workflow/block-selector/market-place-plugin/action.tsx

@@ -15,7 +15,7 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import { useDownloadPlugin } from '@/service/use-plugins'
 import { cn } from '@/utils/classnames'
-import { downloadFile } from '@/utils/format'
+import { downloadBlob } from '@/utils/download'
 import { getMarketplaceUrl } from '@/utils/var'
 
 type Props = {
@@ -67,7 +67,7 @@ const OperationDropdown: FC<Props> = ({
     if (!needDownload || !blob)
       return
     const fileName = `${author}-${name}_${version}.zip`
-    downloadFile({ data: blob, fileName })
+    downloadBlob({ data: blob, fileName })
     setNeedDownload(false)
     queryClient.removeQueries({
       queryKey: ['plugins', 'downloadPlugin', downloadInfo],

web/app/components/workflow/header/run-mode.tsx

@@ -7,9 +7,9 @@ import { trackEvent } from '@/app/components/base/amplitude'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { useToastContext } from '@/app/components/base/toast'
 import { useWorkflowRun, useWorkflowRunValidation, useWorkflowStartRun } from '@/app/components/workflow/hooks'
+import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { useStore } from '@/app/components/workflow/store'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
-import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
 import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { cn } from '@/utils/classnames'
@@ -143,14 +143,7 @@ const RunMode = ({
                 >
                   <RiPlayLargeLine className="mr-1 size-4" />
                   {text ?? t('common.run', { ns: 'workflow' })}
-                  <div className="system-kbd flex items-center gap-x-0.5 text-text-tertiary">
-                    <div className="flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray">
-                      {getKeyboardKeyNameBySystem('alt')}
-                    </div>
-                    <div className="flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray">
-                      R
-                    </div>
-                  </div>
+                  <ShortcutsName keys={['alt', 'R']} textColor="secondary" />
                 </div>
               </TestRunMenu>
             )

web/app/components/workflow/header/version-history-button.tsx

@@ -8,7 +8,8 @@ import useTheme from '@/hooks/use-theme'
 import { cn } from '@/utils/classnames'
 import Button from '../../base/button'
 import Tooltip from '../../base/tooltip'
-import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '../utils'
+import ShortcutsName from '../shortcuts-name'
+import { getKeyboardKeyCodeBySystem } from '../utils'
 
 type VersionHistoryButtonProps = {
   onClick: () => Promise<unknown> | unknown
@@ -23,16 +24,7 @@ const PopupContent = React.memo(() => {
       <div className="system-xs-medium px-0.5 text-text-secondary">
         {t('common.versionHistory', { ns: 'workflow' })}
       </div>
-      <div className="flex items-center gap-x-0.5">
-        {VERSION_HISTORY_SHORTCUT.map(key => (
-          <span
-            key={key}
-            className="system-kbd rounded-[4px] bg-components-kbd-bg-white px-[1px] text-text-tertiary"
-          >
-            {getKeyboardKeyNameBySystem(key)}
-          </span>
-        ))}
-      </div>
+      <ShortcutsName keys={VERSION_HISTORY_SHORTCUT} bgColor="gray" textColor="secondary" />
     </div>
   )
 })

web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx

@@ -3,7 +3,8 @@ import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
+import ShortcutsName from '@/app/components/workflow/shortcuts-name'
+import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
 
 type AdvancedActionsProps = {
   isConfirmDisabled: boolean
@@ -11,15 +12,6 @@ type AdvancedActionsProps = {
   onConfirm: () => void
 }
 
-const Key = (props: { keyName: string }) => {
-  const { keyName } = props
-  return (
-    <kbd className="system-kbd flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-white px-px text-text-primary-on-surface">
-      {keyName}
-    </kbd>
-  )
-}
-
 const AdvancedActions: FC<AdvancedActionsProps> = ({
   isConfirmDisabled,
   onCancel,
@@ -48,10 +40,7 @@ const AdvancedActions: FC<AdvancedActionsProps> = ({
         onClick={onConfirm}
       >
         <span>{t('operation.confirm', { ns: 'common' })}</span>
-        <div className="flex items-center gap-x-0.5">
-          <Key keyName={getKeyboardKeyNameBySystem('ctrl')} />
-          <Key keyName="⏎" />
-        </div>
+        <ShortcutsName keys={['ctrl', '⏎']} bgColor="white" />
       </Button>
     </div>
   )

web/app/components/workflow/operator/more-actions.tsx

@@ -19,6 +19,7 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import { useStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
+import { downloadUrl } from '@/utils/download'
 import { useNodesReadOnly } from '../hooks'
 import TipPopup from './tip-popup'
 
@@ -146,26 +147,14 @@ const MoreActions: FC = () => {
         }
       }
 
+      const fileName = `${filename}.${type}`
+
       if (currentWorkflow) {
         setPreviewUrl(dataUrl)
-        setPreviewTitle(`${filename}.${type}`)
+        setPreviewTitle(fileName)
+      }
 
-        const link = document.createElement('a')
-        link.href = dataUrl
-        link.download = `${filename}.${type}`
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
-      }
-      else {
-        // For current view, just download
-        const link = document.createElement('a')
-        link.href = dataUrl
-        link.download = `${filename}.${type}`
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
-      }
+      downloadUrl({ url: dataUrl, fileName })
     }
     catch (error) {
       console.error('Export image failed:', error)

web/app/components/workflow/shortcuts-name.tsx

@@ -6,11 +6,13 @@ type ShortcutsNameProps = {
   keys: string[]
   className?: string
   textColor?: 'default' | 'secondary'
+  bgColor?: 'gray' | 'white'
 }
 const ShortcutsName = ({
   keys,
   className,
   textColor = 'default',
+  bgColor = 'gray',
 }: ShortcutsNameProps) => {
   return (
     <div className={cn(
@@ -23,7 +25,9 @@ const ShortcutsName = ({
           <div
             key={key}
             className={cn(
-              'system-kbd flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray capitalize',
+              'system-kbd flex h-4 min-w-4 items-center justify-center rounded-[4px] px-1 capitalize',
+              bgColor === 'gray' && 'bg-components-kbd-bg-gray',
+              bgColor === 'white' && 'bg-components-kbd-bg-white text-text-primary-on-surface',
               textColor === 'secondary' && 'text-text-tertiary',
             )}
           >

web/app/styles/monaco-sticky-fix.css

@@ -9,8 +9,7 @@ html[data-theme="dark"] .monaco-editor .sticky-line-content:hover {
   background-color: var(--color-components-sticky-header-bg-hover) !important;
 }
 
-/* Fallback: any app sticky header using input-bg variables should use the sticky header bg when sticky */
-html[data-theme="dark"] .sticky, html[data-theme="dark"] .is-sticky {
+/* Monaco editor specific sticky scroll styles in dark mode */
+html[data-theme="dark"] .monaco-editor .sticky-line-root {
   background-color: var(--color-components-sticky-header-bg) !important;
-  border-bottom: 1px solid var(--color-components-sticky-header-border) !important;
 }

web/docs/lint.md

@@ -0,0 +1,51 @@
+# Lint Guide
+
+We use ESLint and Typescript to maintain code quality and consistency across the project.
+
+## ESLint
+
+### Common Flags
+
+**File/folder targeting**: Append paths to lint specific files or directories.
+
+```sh
+pnpm eslint [options] file.js [file.js] [dir]
+```
+
+**`--cache`**: Caches lint results for faster subsequent runs. Keep this enabled by default; only disable when you encounter unexpected lint results.
+
+**`--concurrency`**: Enables multi-threaded linting. Use `--concurrency=auto` or experiment with specific numbers to find the optimal setting for your machine. Keep this enabled when linting multiple files.
+
+- [ESLint multi-thread linting blog post](https://eslint.org/blog/2025/08/multithread-linting/)
+
+**`--fix`**: Automatically fixes auto-fixable rule violations. Always review the diff before committing to ensure no unintended changes.
+
+**`--quiet`**: Suppresses warnings and only shows errors. Useful when you want to reduce noise from existing issues.
+
+**`--suppress-all`**: Temporarily suppresses error-level violations and records them, allowing CI to pass. Treat this as an escape hatch—fix these errors when time permits.
+
+**`--prune-suppressions`**: Removes outdated suppressions after you've fixed the underlying errors.
+
+- [ESLint bulk suppressions blog post](https://eslint.org/blog/2025/04/introducing-bulk-suppressions/)
+
+### Type-Aware Linting
+
+Some ESLint rules require type information, such as [no-leaked-conditional-rendering](https://www.eslint-react.xyz/docs/rules/no-leaked-conditional-rendering). However, [typed linting via typescript-eslint](https://typescript-eslint.io/getting-started/typed-linting) is too slow for practical use, so we use [TSSLint](https://github.com/johnsoncodehk/tsslint) instead.
+
+```sh
+pnpm lint:tss
+```
+
+This command lints the entire project and is intended for final verification before committing or pushing changes.
+
+## Type Check
+
+You should be able to see suggestions from TypeScript in your editor for all open files.
+
+However, it can be useful to run the TypeScript 7 command-line (tsgo) to type check all files:
+
+```sh
+pnpm type-check:tsgo
+```
+
+Prefer using `tsgo` for type checking as it is significantly faster than the standard TypeScript compiler. Only fall back to `pnpm type-check` (which uses `tsc`) if you encounter unexpected results.

web/docs/test.md

@@ -360,11 +360,11 @@ describe('ComponentName', () => {
 let mockPortalOpenState = false
 
 vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open, ...props }: any) => {
+  PortalToFollowElem: ({ children, open, ...props }) => {
     mockPortalOpenState = open || false // Update shared state
     return <div data-open={open}>{children}</div>
   },
-  PortalToFollowElemContent: ({ children }: any) => {
+  PortalToFollowElemContent: ({ children }) => {
     // ✅ Matches actual: returns null when open is false
     if (!mockPortalOpenState)
       return null

web/eslint-rules/index.js

@@ -3,13 +3,14 @@ import noAsAnyInT from './rules/no-as-any-in-t.js'
 import noExtraKeys from './rules/no-extra-keys.js'
 import noLegacyNamespacePrefix from './rules/no-legacy-namespace-prefix.js'
 import noVersionPrefix from './rules/no-version-prefix.js'
+import preferTailwindIcon from './rules/prefer-tailwind-icon.js'
 import requireNsOption from './rules/require-ns-option.js'
 import validI18nKeys from './rules/valid-i18n-keys.js'
 
 /** @type {import('eslint').ESLint.Plugin} */
 const plugin = {
   meta: {
-    name: 'dify-i18n',
+    name: 'dify',
     version: '1.0.0',
   },
   rules: {
@@ -18,6 +19,7 @@ const plugin = {
     'no-extra-keys': noExtraKeys,
     'no-legacy-namespace-prefix': noLegacyNamespacePrefix,
     'no-version-prefix': noVersionPrefix,
+    'prefer-tailwind-icon': preferTailwindIcon,
     'require-ns-option': requireNsOption,
     'valid-i18n-keys': validI18nKeys,
   },

web/eslint-rules/rules/prefer-tailwind-icon.js

@@ -0,0 +1,384 @@
+/**
+ * Default prop-to-class mappings
+ * Maps component props to Tailwind class prefixes
+ */
+const DEFAULT_PROP_MAPPINGS = {
+  size: 'size',
+  width: 'w',
+  height: 'h',
+}
+
+/**
+ * Convert PascalCase/camelCase to kebab-case
+ * @param {string} name
+ * @returns {string} The kebab-case string
+ */
+function camelToKebab(name) {
+  return name
+    .replace(/([a-z])(\d)/g, '$1-$2')
+    .replace(/(\d)([a-z])/gi, '$1-$2')
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .toLowerCase()
+}
+
+/**
+ * Default icon library configurations
+ *
+ * Config options:
+ * - pattern: string | RegExp - Pattern to match import source
+ * - prefix: string | ((match: RegExpMatchArray) => string) - Icon class prefix
+ * - suffix: string | ((match: RegExpMatchArray) => string) - Icon class suffix
+ * - extractSubPath: boolean - Extract subdirectory path and add to prefix
+ * - iconFilter: (name: string) => boolean - Filter which imports to process
+ * - stripPrefix: string - Prefix to remove from icon name before transform
+ * - stripSuffix: string - Suffix to remove from icon name before transform
+ */
+const DEFAULT_ICON_CONFIGS = [
+  {
+    // @/app/components/base/icons/src/public/* and vender/*
+    pattern: /^@\/app\/components\/base\/icons\/src\/(public|vender)/,
+    prefix: match => `i-custom-${match[1]}-`,
+    extractSubPath: true,
+  },
+  {
+    // @remixicon/react
+    pattern: '@remixicon/react',
+    prefix: 'i-ri-',
+    iconFilter: name => name.startsWith('Ri'),
+    stripPrefix: 'Ri',
+  },
+  {
+    // @heroicons/react/{size}/{variant}
+    pattern: /^@heroicons\/react\/(\d+)\/(solid|outline)$/,
+    prefix: 'i-heroicons-',
+    suffix: match => `-${match[1]}-${match[2]}`,
+    iconFilter: name => name.endsWith('Icon'),
+    stripSuffix: 'Icon',
+  },
+]
+
+/**
+ * Convert pixel value to Tailwind class
+ * @param {number} pixels
+ * @param {string} classPrefix - e.g., 'size', 'w', 'h'
+ * @returns {string} The Tailwind class string
+ */
+function pixelToClass(pixels, classPrefix) {
+  if (pixels % 4 === 0) {
+    const units = pixels / 4
+    return `${classPrefix}-${units}`
+  }
+  // For non-standard sizes, use Tailwind arbitrary value syntax
+  return `${classPrefix}-[${pixels}px]`
+}
+
+/**
+ * Match source against config pattern
+ * @param {string} source - The import source path
+ * @param {object} config - The icon config
+ * @returns {{ matched: boolean, match: RegExpMatchArray | null, basePath: string }} Match result
+ */
+function matchPattern(source, config) {
+  const { pattern } = config
+  if (pattern instanceof RegExp) {
+    const match = source.match(pattern)
+    if (match) {
+      return { matched: true, match, basePath: match[0] }
+    }
+    return { matched: false, match: null, basePath: '' }
+  }
+  // String pattern: exact match or prefix match
+  if (source === pattern || source.startsWith(`${pattern}/`)) {
+    return { matched: true, match: null, basePath: pattern }
+  }
+  return { matched: false, match: null, basePath: '' }
+}
+
+/**
+ * Get icon class from config
+ * @param {string} iconName
+ * @param {object} config
+ * @param {string} source - The import source path
+ * @param {RegExpMatchArray | null} match - The regex match result
+ * @returns {string} The full Tailwind icon class string
+ */
+function getIconClass(iconName, config, source, match) {
+  // Strip prefix/suffix from icon name if configured
+  let name = iconName
+  if (config.stripPrefix && name.startsWith(config.stripPrefix)) {
+    name = name.slice(config.stripPrefix.length)
+  }
+  if (config.stripSuffix && name.endsWith(config.stripSuffix)) {
+    name = name.slice(0, -config.stripSuffix.length)
+  }
+
+  // Transform name (use custom or default camelToKebab)
+  const transformed = config.transformName ? config.transformName(name, source) : camelToKebab(name)
+
+  // Get prefix (can be string or function)
+  const prefix = typeof config.prefix === 'function' ? config.prefix(match) : config.prefix
+
+  // Get suffix (can be string or function)
+  const suffix = typeof config.suffix === 'function' ? config.suffix(match) : (config.suffix || '')
+
+  // Extract subdirectory path after the pattern to include in prefix (only if extractSubPath is enabled)
+  let subPrefix = ''
+  if (config.extractSubPath) {
+    const basePath = match ? match[0] : config.pattern
+    if (source.startsWith(`${basePath}/`)) {
+      const subPath = source.slice(basePath.length + 1)
+      if (subPath) {
+        subPrefix = `${subPath.replace(/\//g, '-')}-`
+      }
+    }
+  }
+
+  return `${prefix}${subPrefix}${transformed}${suffix}`
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Prefer Tailwind CSS icon classes over icon library components',
+    },
+    hasSuggestions: true,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          libraries: {
+            type: 'array',
+            items: {
+              type: 'object',
+              properties: {
+                pattern: { type: 'string' },
+                prefix: { type: 'string' },
+                suffix: { type: 'string' },
+                extractSubPath: { type: 'boolean' },
+              },
+              required: ['pattern', 'prefix'],
+            },
+          },
+          propMappings: {
+            type: 'object',
+            additionalProperties: { type: 'string' },
+            description: 'Maps component props to Tailwind class prefixes, e.g., { size: "size", width: "w", height: "h" }',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      preferTailwindIcon:
+        'Prefer using Tailwind CSS icon class "{{iconClass}}" over "{{componentName}}" from "{{source}}"',
+      preferTailwindIconImport:
+        'Icon "{{importedName}}" from "{{source}}" can be replaced with Tailwind CSS class "{{iconClass}}"',
+    },
+  },
+  create(context) {
+    const options = context.options[0] || {}
+    const iconConfigs = options.libraries || DEFAULT_ICON_CONFIGS
+    const propMappings = options.propMappings || DEFAULT_PROP_MAPPINGS
+
+    // Track imports: localName -> { node, importedName, config, source, match, used }
+    const iconImports = new Map()
+
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value
+
+        // Find matching config
+        let matchedConfig = null
+        let matchResult = null
+        for (const config of iconConfigs) {
+          const result = matchPattern(source, config)
+          if (result.matched) {
+            matchedConfig = config
+            matchResult = result.match
+            break
+          }
+        }
+        if (!matchedConfig)
+          return
+
+        // Use default filter if not provided (for user-configured libraries)
+        const iconFilter = matchedConfig.iconFilter || (() => true)
+
+        for (const specifier of node.specifiers) {
+          if (specifier.type === 'ImportSpecifier') {
+            const importedName = specifier.imported.name
+            const localName = specifier.local.name
+
+            if (iconFilter(importedName)) {
+              iconImports.set(localName, {
+                node: specifier,
+                importedName,
+                localName,
+                config: matchedConfig,
+                source,
+                match: matchResult,
+                used: false,
+              })
+            }
+          }
+        }
+      },
+
+      JSXOpeningElement(node) {
+        if (node.name.type !== 'JSXIdentifier')
+          return
+
+        const componentName = node.name.name
+        const iconInfo = iconImports.get(componentName)
+
+        if (!iconInfo)
+          return
+
+        iconInfo.used = true
+
+        const iconClass = getIconClass(iconInfo.importedName, iconInfo.config, iconInfo.source, iconInfo.match)
+
+        // Find className attribute
+        const classNameAttr = node.attributes.find(
+          attr => attr.type === 'JSXAttribute' && attr.name.name === 'className',
+        )
+
+        // Process prop mappings (size, width, height, etc.)
+        const mappedClasses = []
+        const mappedPropNames = Object.keys(propMappings)
+
+        for (const propName of mappedPropNames) {
+          const attr = node.attributes.find(
+            a => a.type === 'JSXAttribute' && a.name.name === propName,
+          )
+
+          if (attr && attr.value) {
+            let pixelValue = null
+
+            if (attr.value.type === 'JSXExpressionContainer'
+              && attr.value.expression.type === 'Literal'
+              && typeof attr.value.expression.value === 'number') {
+              pixelValue = attr.value.expression.value
+            }
+            else if (attr.value.type === 'Literal'
+              && typeof attr.value.value === 'number') {
+              pixelValue = attr.value.value
+            }
+
+            if (pixelValue !== null) {
+              mappedClasses.push(pixelToClass(pixelValue, propMappings[propName]))
+            }
+          }
+        }
+
+        // Build new className
+        const sourceCode = context.sourceCode
+        let newClassName
+        const classesToAdd = [iconClass, ...mappedClasses].filter(Boolean).join(' ')
+
+        if (classNameAttr && classNameAttr.value) {
+          if (classNameAttr.value.type === 'Literal') {
+            newClassName = `${classesToAdd} ${classNameAttr.value.value}`
+          }
+          else if (classNameAttr.value.type === 'JSXExpressionContainer') {
+            const expression = sourceCode.getText(classNameAttr.value.expression)
+            newClassName = `\`${classesToAdd} \${${expression}}\``
+          }
+        }
+        else {
+          newClassName = classesToAdd
+        }
+
+        const parent = node.parent
+        const isSelfClosing = node.selfClosing
+        const excludedAttrs = ['className', ...mappedPropNames]
+
+        context.report({
+          node,
+          messageId: 'preferTailwindIcon',
+          data: {
+            iconClass,
+            componentName,
+            source: iconInfo.source,
+          },
+          suggest: [
+            {
+              messageId: 'preferTailwindIcon',
+              data: {
+                iconClass,
+                componentName,
+                source: iconInfo.source,
+              },
+              fix(fixer) {
+                const fixes = []
+
+                const classValue = newClassName.startsWith('`')
+                  ? `{${newClassName}}`
+                  : `"${newClassName}"`
+
+                const otherAttrs = node.attributes
+                  .filter(attr => !(attr.type === 'JSXAttribute' && excludedAttrs.includes(attr.name.name)))
+                  .map(attr => sourceCode.getText(attr))
+                  .join(' ')
+
+                const attrsStr = otherAttrs
+                  ? `className=${classValue} ${otherAttrs}`
+                  : `className=${classValue}`
+
+                if (isSelfClosing) {
+                  fixes.push(fixer.replaceText(parent, `<span ${attrsStr} />`))
+                }
+                else {
+                  const closingElement = parent.closingElement
+                  fixes.push(fixer.replaceText(node, `<span ${attrsStr}>`))
+                  if (closingElement) {
+                    fixes.push(fixer.replaceText(closingElement, '</span>'))
+                  }
+                }
+
+                return fixes
+              },
+            },
+          ],
+        })
+      },
+
+      'Program:exit': function () {
+        const sourceCode = context.sourceCode
+
+        // Report icons that were imported but not found in JSX
+        for (const [, iconInfo] of iconImports) {
+          if (!iconInfo.used) {
+            // Verify the import is still referenced somewhere in the file (besides the import itself)
+            try {
+              const variables = sourceCode.getDeclaredVariables(iconInfo.node)
+              const variable = variables[0]
+              // Check if there are any references besides the import declaration
+              const hasReferences = variable && variable.references.some(
+                ref => ref.identifier !== iconInfo.node.local,
+              )
+              if (!hasReferences)
+                continue
+            }
+            catch {
+              continue
+            }
+
+            const iconClass = getIconClass(iconInfo.importedName, iconInfo.config, iconInfo.source, iconInfo.match)
+            context.report({
+              node: iconInfo.node,
+              messageId: 'preferTailwindIconImport',
+              data: {
+                importedName: iconInfo.importedName,
+                source: iconInfo.source,
+                iconClass,
+              },
+            })
+          }
+        }
+      },
+    }
+  },
+}

web/eslint-suppressions.json

@@ -994,7 +994,7 @@
       "count": 1
     },
     "ts/no-explicit-any": {
-      "count": 3
+      "count": 2
     }
   },
   "app/components/base/file-uploader/utils.ts": {
@@ -1661,7 +1661,7 @@
       "count": 1
     },
     "ts/no-explicit-any": {
-      "count": 5
+      "count": 4
     }
   },
   "app/components/datasets/create/website/watercrawl/options.tsx": {
@@ -4318,11 +4318,6 @@
       "count": 10
     }
   },
-  "testing/testing.md": {
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
   "types/app.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -4376,11 +4371,6 @@
       "count": 1
     }
   },
-  "utils/format.spec.ts": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "utils/get-icon.spec.ts": {
     "ts/no-explicit-any": {
       "count": 2

web/eslint.config.mjs

@@ -4,7 +4,7 @@ import pluginQuery from '@tanstack/eslint-plugin-query'
 import sonar from 'eslint-plugin-sonarjs'
 import storybook from 'eslint-plugin-storybook'
 import tailwind from 'eslint-plugin-tailwindcss'
-import difyI18n from './eslint-rules/index.js'
+import dify from './eslint-rules/index.js'
 
 export default antfu(
   {
@@ -104,44 +104,34 @@ export default antfu(
       'tailwindcss/migration-from-tailwind-2': 'warn',
     },
   },
-  // dify i18n namespace migration
-  // {
-  //   files: ['**/*.ts', '**/*.tsx'],
-  //   ignores: ['eslint-rules/**', 'i18n/**', 'i18n-config/**'],
-  //   plugins: {
-  //     'dify-i18n': difyI18n,
-  //   },
-  //   rules: {
-  //     // 'dify-i18n/no-as-any-in-t': ['error', { mode: 'all' }],
-  //     'dify-i18n/no-as-any-in-t': 'error',
-  //     // 'dify-i18n/no-legacy-namespace-prefix': 'error',
-  //     // 'dify-i18n/require-ns-option': 'error',
-  //   },
-  // },
-  // i18n JSON validation rules
+  // Dify custom rules
+  {
+    plugins: {
+      dify,
+    },
+  },
+  {
+    files: ['**/*.tsx'],
+    rules: {
+      'dify/prefer-tailwind-icon': 'warn',
+    },
+  },
   {
     files: ['i18n/**/*.json'],
-    plugins: {
-      'dify-i18n': difyI18n,
-    },
     rules: {
       'sonarjs/max-lines': 'off',
       'max-lines': 'off',
       'jsonc/sort-keys': 'error',
 
-      'dify-i18n/valid-i18n-keys': 'error',
-      'dify-i18n/no-extra-keys': 'error',
-      'dify-i18n/consistent-placeholders': 'error',
+      'dify/valid-i18n-keys': 'error',
+      'dify/no-extra-keys': 'error',
+      'dify/consistent-placeholders': 'error',
     },
   },
-  // package.json version prefix validation
   {
     files: ['**/package.json'],
-    plugins: {
-      'dify-i18n': difyI18n,
-    },
     rules: {
-      'dify-i18n/no-version-prefix': 'error',
+      'dify/no-version-prefix': 'error',
     },
   },
 )

web/i18n/en-US/explore.json

@@ -36,5 +36,5 @@
   "tryApp.requirements": "Requirements",
   "tryApp.tabHeader.detail": "Orchestration Details",
   "tryApp.tabHeader.try": "Try it",
-  "tryApp.tryInfo": "This is a sample app. You can try up to 5 messages. To keep using it, click \"Create form this sample app\" and set it up!"
+  "tryApp.tryInfo": "This is a sample app. You can try up to 5 messages. To keep using it, click \"Create from this sample app\" and set it up!"
 }

web/package.json

@@ -162,7 +162,13 @@
   "devDependencies": {
     "@antfu/eslint-config": "7.0.1",
     "@chromatic-com/storybook": "5.0.0",
+    "@egoist/tailwindcss-icons": "1.9.0",
     "@eslint-react/eslint-plugin": "2.7.0",
+    "@iconify-json/heroicons": "1.2.3",
+    "@iconify-json/ri": "1.2.7",
+    "@iconify/tools": "5.0.2",
+    "@iconify/types": "2.0.0",
+    "@iconify/utils": "3.1.0",
     "@mdx-js/loader": "3.1.1",
     "@mdx-js/react": "3.1.1",
     "@next/bundle-analyzer": "16.1.5",
@@ -205,7 +211,7 @@
     "@vitejs/plugin-react": "5.1.2",
     "@vitest/coverage-v8": "4.0.17",
     "autoprefixer": "10.4.21",
-    "code-inspector-plugin": "1.3.6",
+    "code-inspector-plugin": "1.4.1",
     "cross-env": "10.1.0",
     "esbuild-wasm": "0.27.2",
     "eslint": "9.39.2",

web/pnpm-lock.yaml

@@ -372,9 +372,27 @@ importers:
       '@chromatic-com/storybook':
         specifier: 5.0.0
         version: 5.0.0(storybook@10.2.0(@testing-library/dom@10.4.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
+      '@egoist/tailwindcss-icons':
+        specifier: 1.9.0
+        version: 1.9.0(tailwindcss@3.4.18(tsx@4.21.0)(yaml@2.8.2))
       '@eslint-react/eslint-plugin':
         specifier: 2.7.0
         version: 2.7.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@iconify-json/heroicons':
+        specifier: 1.2.3
+        version: 1.2.3
+      '@iconify-json/ri':
+        specifier: 1.2.7
+        version: 1.2.7
+      '@iconify/tools':
+        specifier: 5.0.2
+        version: 5.0.2
+      '@iconify/types':
+        specifier: 2.0.0
+        version: 2.0.0
+      '@iconify/utils':
+        specifier: 3.1.0
+        version: 3.1.0
       '@mdx-js/loader':
         specifier: 3.1.1
         version: 3.1.1(webpack@5.104.1(esbuild@0.27.2)(uglify-js@3.19.3))
@@ -502,8 +520,8 @@ importers:
         specifier: 10.4.21
         version: 10.4.21(postcss@8.5.6)
       code-inspector-plugin:
-        specifier: 1.3.6
-        version: 1.3.6
+        specifier: 1.4.1
+        version: 1.4.1
       cross-env:
         specifier: 10.1.0
         version: 10.1.0
@@ -730,6 +748,9 @@ packages:
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
 
+  '@antfu/utils@8.1.1':
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
+
   '@asamuzakjp/css-color@4.1.1':
     resolution: {integrity: sha512-B0Hv6G3gWGMn0xKJ0txEi/jM5iFpT3MfDxmhZFb4W047GvytCf1DHQ1D69W3zHI4yWe2aTZAA0JnbMZ7Xc8DuQ==}
 
@@ -866,23 +887,23 @@ packages:
   '@clack/prompts@0.8.2':
     resolution: {integrity: sha512-6b9Ab2UiZwJYA9iMyboYyW9yJvAO9V753ZhS+DHKEjZRKAxPPOb7MXXu84lsPFG+vZt6FRFniZ8rXi+zCIw4yQ==}
 
-  '@code-inspector/core@1.3.6':
-    resolution: {integrity: sha512-bSxf/PWDPY6rv9EFf0mJvTnLnz3927PPrpX6BmQcRKQab+Ez95yRqrVZY8IcBUpaqA/k3etA5rZ1qkN0V4ERtw==}
+  '@code-inspector/core@1.4.1':
+    resolution: {integrity: sha512-k5iLYvrBBPBPODcwuzgEcAZnXU4XTnEO1jOmNQBHCehN6nrMO1m5Efjz35KPkSX+8T4IWvXvLoXR5XPfhDlxug==}
 
-  '@code-inspector/esbuild@1.3.6':
-    resolution: {integrity: sha512-s35dseBXI2yqfX6ZK29Ix941jaE/4KPlZZeMk6B5vDahj75FDUfVxQ7ORy4cX2hyz8CmlOycsY/au5mIvFpAFg==}
+  '@code-inspector/esbuild@1.4.1':
+    resolution: {integrity: sha512-0tf73j0wgsu1Rl5CNe5o5L/GB/lGvQQVjuLTbAB/but+Bw//nHRnlrA29lBzNM6cyBDZzwofa71Q+TH8Fu4aZQ==}
 
-  '@code-inspector/mako@1.3.6':
-    resolution: {integrity: sha512-FJvuTElOi3TUCWTIaYTFYk2iTUD6MlO51SC8SYfwmelhuvnOvTMa2TkylInX16OGb4f7sGNLRj2r+7NNx/gqpw==}
+  '@code-inspector/mako@1.4.1':
+    resolution: {integrity: sha512-inpiJbc8J+qaEYcMgzyAFusuyryZ9i0wUQhLJRbWl1WrUdWTE8xNHDjhPeTVaMav42NTGDnVKJhhKD6tNaxyFA==}
 
-  '@code-inspector/turbopack@1.3.6':
-    resolution: {integrity: sha512-pfXgvZCn4/brpTvqy8E0HTe6V/ksVKEPQo697Nt5k22kBnlEM61UT3rI2Art+fDDEMPQTxVOFpdbwCKSLwMnmQ==}
+  '@code-inspector/turbopack@1.4.1':
+    resolution: {integrity: sha512-xVefk907E39U/oywR9YiEqJn1VlNBHIcIsYkjNnFp0U3qBb3A40VqivlCqkWaP9xHAwEH8/UT3Sfh3aoUPC9/Q==}
 
-  '@code-inspector/vite@1.3.6':
-    resolution: {integrity: sha512-vXYvzGc0S1NR4p3BeD1Xx2170OnyecZD0GtebLlTiHw/cetzlrBHVpbkIwIEzzzpTYYshwwDt8ZbuvdjmqhHgw==}
+  '@code-inspector/vite@1.4.1':
+    resolution: {integrity: sha512-ptbGkmtw5mvuFse6Kjmd6bCgm+isHrBq+HumWlAMBH//Qb2frHkEV7kWjO6/AkBXfm/ccNJy+jNwWq0632ChDg==}
 
-  '@code-inspector/webpack@1.3.6':
-    resolution: {integrity: sha512-bi/+vsym9d6NXQQ++Phk74VLMiVoGKjgPHr445j/D43URG8AN8yYa+gRDBEDcZx4B128dihrVMxEO8+OgWGjTw==}
+  '@code-inspector/webpack@1.4.1':
+    resolution: {integrity: sha512-UkqC5MsWRVJT2y10GM7tIZdQmFuGAlArJSfq2hq727eXMDV3otY5d1UCQopYvUIEC90QQNHJDeK4e+UQipF6AQ==}
 
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
@@ -915,10 +936,18 @@ packages:
     resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
     engines: {node: '>=18'}
 
+  '@cyberalien/svg-utils@1.0.11':
+    resolution: {integrity: sha512-qEE9mnyI+avfGT3emKuRs3ucYkITeaV0Xi7VlYN41f+uGnZBecQP3jwz/AF437H9J4Q7qPClHKm4NiTYpNE6hA==}
+
   '@discoveryjs/json-ext@0.5.7':
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
 
+  '@egoist/tailwindcss-icons@1.9.0':
+    resolution: {integrity: sha512-xWA9cUy6hzlK7Y6TaoRIcwmilSXiTJ8rbXcEdf9uht7yzDgw/yIgF4rThIQMrpD2Y2v4od51+r2y6Z7GStanDQ==}
+    peerDependencies:
+      tailwindcss: '*'
+
   '@emnapi/core@1.8.1':
     resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
 
@@ -1292,9 +1321,21 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/heroicons@1.2.3':
+    resolution: {integrity: sha512-n+vmCEgTesRsOpp5AB5ILB6srsgsYK+bieoQBNlafvoEhjVXLq8nIGN4B0v/s4DUfa0dOrjwE/cKJgIKdJXOEg==}
+
+  '@iconify-json/ri@1.2.7':
+    resolution: {integrity: sha512-j/Fkb8GlWY5y/zLj1BGxWRtDzuJFrI7562zLw+iQVEykieBgew43+r8qAvtSajvb75MfUIHjsNOYQPRD8FfLfw==}
+
+  '@iconify/tools@5.0.2':
+    resolution: {integrity: sha512-esoFiH0LYpiqqVAO+RTenh6qqGKf0V8T0T6IG7dFLCw26cjcYGG34UMHjkbuq+MMl23U39FtkzhWZsCDDtOhew==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
+  '@iconify/utils@2.3.0':
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
+
   '@iconify/utils@3.1.0':
     resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
 
@@ -3879,8 +3920,8 @@ packages:
       react: ^18 || ^19 || ^19.0.0-rc
       react-dom: ^18 || ^19 || ^19.0.0-rc
 
-  code-inspector-plugin@1.3.6:
-    resolution: {integrity: sha512-ddTg8embDqLZxKEdSNOm+/0YnVVgWKr10+Bu2qFqQDObj/3twGh0Z23TIz+5/URxfRhTPbp2sUSpWlw78piJbQ==}
+  code-inspector-plugin@1.4.1:
+    resolution: {integrity: sha512-DuOEoOWtkz3Mq6JTogJjSfXkVnXuGy6Gjfi+eBYtgRFlZmQ5sw1/LacsPnTK89O4Oz6gZj+zjxpwNfpWg3htpA==}
 
   collapse-white-space@2.1.0:
     resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
@@ -3908,6 +3949,10 @@ packages:
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
   commander@13.1.0:
     resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
     engines: {node: '>=18'}
@@ -3979,10 +4024,21 @@ packages:
   css-mediaquery@0.1.2:
     resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==}
 
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
   css-tree@3.1.0:
     resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
@@ -3991,6 +4047,10 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
   cssstyle@5.3.7:
     resolution: {integrity: sha512-7D2EPVltRrsTkhpQmksIu+LxeWAIEk6wRDMJ1qljlv+CKHJM+cJLlfhWIzNA44eAsHXSNe3+vO6DW1yCYx8SuQ==}
     engines: {node: '>=20'}
@@ -4249,12 +4309,25 @@ packages:
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
   dompurify@3.2.7:
     resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
 
   dompurify@3.3.0:
     resolution: {integrity: sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==}
 
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
   dotenv@16.6.1:
     resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
     engines: {node: '>=12'}
@@ -4312,6 +4385,10 @@ packages:
     resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
     engines: {node: '>=10.13.0'}
 
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
   entities@6.0.1:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
@@ -4745,6 +4822,9 @@ packages:
   fflate@0.4.8:
     resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
 
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
@@ -5546,6 +5626,9 @@ packages:
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
@@ -5733,6 +5816,10 @@ packages:
   mlly@1.8.0:
     resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
 
+  modern-tar@0.7.3:
+    resolution: {integrity: sha512-4W79zekKGyYU4JXVmB78DOscMFaJth2gGhgfTl2alWE4rNe3nf4N2pqenQ0rEtIewrnD79M687Ouba3YGTLOvg==}
+    engines: {node: '>=18.0.0'}
+
   module-alias@2.2.3:
     resolution: {integrity: sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==}
 
@@ -6533,6 +6620,10 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  sax@1.4.4:
+    resolution: {integrity: sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==}
+    engines: {node: '>=11.0.0'}
+
   saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
@@ -6802,6 +6893,11 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svgo@4.0.0:
+    resolution: {integrity: sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
@@ -7712,6 +7808,8 @@ snapshots:
       package-manager-detector: 1.6.0
       tinyexec: 1.0.2
 
+  '@antfu/utils@8.1.1': {}
+
   '@asamuzakjp/css-color@4.1.1':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
@@ -7899,7 +7997,7 @@ snapshots:
       picocolors: 1.1.1
       sisteransi: 1.0.5
 
-  '@code-inspector/core@1.3.6':
+  '@code-inspector/core@1.4.1':
     dependencies:
       '@vue/compiler-dom': 3.5.27
       chalk: 4.1.2
@@ -7909,35 +8007,35 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/esbuild@1.3.6':
+  '@code-inspector/esbuild@1.4.1':
     dependencies:
-      '@code-inspector/core': 1.3.6
+      '@code-inspector/core': 1.4.1
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/mako@1.3.6':
+  '@code-inspector/mako@1.4.1':
     dependencies:
-      '@code-inspector/core': 1.3.6
+      '@code-inspector/core': 1.4.1
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/turbopack@1.3.6':
+  '@code-inspector/turbopack@1.4.1':
     dependencies:
-      '@code-inspector/core': 1.3.6
-      '@code-inspector/webpack': 1.3.6
+      '@code-inspector/core': 1.4.1
+      '@code-inspector/webpack': 1.4.1
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/vite@1.3.6':
+  '@code-inspector/vite@1.4.1':
     dependencies:
-      '@code-inspector/core': 1.3.6
+      '@code-inspector/core': 1.4.1
       chalk: 4.1.1
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/webpack@1.3.6':
+  '@code-inspector/webpack@1.4.1':
     dependencies:
-      '@code-inspector/core': 1.3.6
+      '@code-inspector/core': 1.4.1
     transitivePeerDependencies:
       - supports-color
 
@@ -7963,8 +8061,19 @@ snapshots:
 
   '@csstools/css-tokenizer@3.0.4': {}
 
+  '@cyberalien/svg-utils@1.0.11':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@discoveryjs/json-ext@0.5.7': {}
 
+  '@egoist/tailwindcss-icons@1.9.0(tailwindcss@3.4.18(tsx@4.21.0)(yaml@2.8.2))':
+    dependencies:
+      '@iconify/utils': 2.3.0
+      tailwindcss: 3.4.18(tsx@4.21.0)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - supports-color
+
   '@emnapi/core@1.8.1':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
@@ -8328,8 +8437,39 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@iconify-json/heroicons@1.2.3':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/ri@1.2.7':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/tools@5.0.2':
+    dependencies:
+      '@cyberalien/svg-utils': 1.0.11
+      '@iconify/types': 2.0.0
+      '@iconify/utils': 3.1.0
+      fflate: 0.8.2
+      modern-tar: 0.7.3
+      pathe: 2.0.3
+      svgo: 4.0.0
+
   '@iconify/types@2.0.0': {}
 
+  '@iconify/utils@2.3.0':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 8.1.1
+      '@iconify/types': 2.0.0
+      debug: 4.4.3
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      mlly: 1.8.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@iconify/utils@3.1.0':
     dependencies:
       '@antfu/install-pkg': 1.1.0
@@ -11143,14 +11283,14 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
-  code-inspector-plugin@1.3.6:
+  code-inspector-plugin@1.4.1:
     dependencies:
-      '@code-inspector/core': 1.3.6
-      '@code-inspector/esbuild': 1.3.6
-      '@code-inspector/mako': 1.3.6
-      '@code-inspector/turbopack': 1.3.6
-      '@code-inspector/vite': 1.3.6
-      '@code-inspector/webpack': 1.3.6
+      '@code-inspector/core': 1.4.1
+      '@code-inspector/esbuild': 1.4.1
+      '@code-inspector/mako': 1.4.1
+      '@code-inspector/turbopack': 1.4.1
+      '@code-inspector/vite': 1.4.1
+      '@code-inspector/webpack': 1.4.1
       chalk: 4.1.1
     transitivePeerDependencies:
       - supports-color
@@ -11179,6 +11319,8 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
+  commander@11.1.0: {}
+
   commander@13.1.0: {}
 
   commander@2.20.3:
@@ -11237,15 +11379,34 @@ snapshots:
 
   css-mediaquery@0.1.2: {}
 
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-tree@2.2.1:
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.1
+
   css-tree@3.1.0:
     dependencies:
       mdn-data: 2.12.2
       source-map-js: 1.2.1
 
+  css-what@6.2.2: {}
+
   css.escape@1.5.1: {}
 
   cssesc@3.0.0: {}
 
+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
   cssstyle@5.3.7:
     dependencies:
       '@asamuzakjp/css-color': 4.1.1
@@ -11511,6 +11672,18 @@ snapshots:
 
   dom-accessibility-api@0.6.3: {}
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
   dompurify@3.2.7:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
@@ -11519,6 +11692,12 @@ snapshots:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   dotenv@16.6.1: {}
 
   duplexer@0.1.2: {}
@@ -11571,6 +11750,8 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
+  entities@4.5.0: {}
+
   entities@6.0.1: {}
 
   entities@7.0.1: {}
@@ -12220,6 +12401,8 @@ snapshots:
 
   fflate@0.4.8: {}
 
+  fflate@0.8.2: {}
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -13171,6 +13354,8 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
+  mdn-data@2.0.28: {}
+
   mdn-data@2.12.2: {}
 
   memoize-one@5.2.1: {}
@@ -13535,6 +13720,8 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.6.3
 
+  modern-tar@0.7.3: {}
+
   module-alias@2.2.3: {}
 
   monaco-editor@0.55.1:
@@ -14464,6 +14651,8 @@ snapshots:
     optionalDependencies:
       '@parcel/watcher': 2.5.6
 
+  sax@1.4.4: {}
+
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
@@ -14772,6 +14961,16 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svgo@4.0.0:
+    dependencies:
+      commander: 11.1.0
+      css-select: 5.2.2
+      css-tree: 3.1.0
+      css-what: 6.2.2
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.4.4
+
   symbol-tree@3.2.4: {}
 
   synckit@0.11.12:

web/scripts/analyze-component.js

@@ -337,7 +337,7 @@ Test file under review:
 ${testPath}
 
 Checklist (ensure every item is addressed in your review):
-- Confirm the tests satisfy all requirements listed above and in web/testing/TESTING.md.
+- Confirm the tests satisfy all requirements listed above and in web/docs/test.md.
 - Verify Arrange → Act → Assert structure, mocks, and cleanup follow project conventions.
 - Ensure all detected component features (state, effects, routing, API, events, etc.) are exercised, including edge cases and error paths.
 - Check coverage of prop variations, null/undefined inputs, and high-priority workflows implied by usage score.
@@ -382,7 +382,7 @@ Examples:
   # Review existing test
   pnpm analyze-component app/components/base/button/index.tsx --review
 
-For complete testing guidelines, see: web/testing/testing.md
+For complete testing guidelines, see: web/docs/test.md
 `)
 }
 

web/tailwind-common-config.ts

@@ -1,8 +1,131 @@
+import type { IconifyJSON } from '@iconify/types'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
+import { cleanupSVG, deOptimisePaths, importDirectorySync, isEmptyColor, parseColors, runSVGO } from '@iconify/tools'
+import { compareColors, stringToColor } from '@iconify/utils/lib/colors'
 import tailwindTypography from '@tailwindcss/typography'
 // @ts-expect-error workaround for turbopack issue
 import tailwindThemeVarDefine from './themes/tailwind-theme-var-define.ts'
 import typography from './typography.js'
 
+const _dirname = typeof __dirname !== 'undefined'
+  ? __dirname
+  : path.dirname(fileURLToPath(import.meta.url))
+
+// https://iconify.design/docs/articles/cleaning-up-icons/
+function getIconSetFromDir(dir: string, prefix: string) {
+  // Import icons
+  const iconSet = importDirectorySync(dir, {
+    prefix,
+    ignoreImportErrors: 'warn',
+  })
+
+  // Validate, clean up, fix palette and optimise
+  iconSet.forEachSync((name, type) => {
+    if (type !== 'icon')
+      return
+
+    const svg = iconSet.toSVG(name)
+    if (!svg) {
+      // Invalid icon
+      iconSet.remove(name)
+      return
+    }
+
+    // Clean up and optimise icons
+    try {
+      // Clean up icon code
+      cleanupSVG(svg)
+
+      // Change color to `currentColor`
+      // Skip this step if icon has hardcoded palette
+      const blackColor = stringToColor('black')!
+      const whiteColor = stringToColor('white')!
+      parseColors(svg, {
+        defaultColor: 'currentColor',
+        callback: (attr, colorStr, color) => {
+          if (!color) {
+            // Color cannot be parsed!
+            throw new Error(`Invalid color: "${colorStr}" in attribute ${attr}`)
+          }
+
+          if (isEmptyColor(color)) {
+            // Color is empty: 'none' or 'transparent'. Return as is
+            return color
+          }
+
+          // Change black to 'currentColor'
+          if (compareColors(color, blackColor))
+            return 'currentColor'
+
+          // Remove shapes with white color
+          if (compareColors(color, whiteColor))
+            return 'remove'
+
+          // Icon is not monotone
+          return color
+        },
+      })
+
+      // Optimise
+      runSVGO(svg)
+
+      // Update paths for compatibility with old software
+      deOptimisePaths(svg)
+    }
+    catch (err) {
+      // Invalid icon
+      console.error(`Error parsing ${name}:`, err)
+      iconSet.remove(name)
+      return
+    }
+
+    // Update icon
+    iconSet.fromSVG(name, svg)
+  })
+
+  // Export
+  return iconSet.export()
+}
+
+function getCollectionsFromSubDirs(baseDir: string, prefixBase: string): Record<string, IconifyJSON> {
+  const collections: Record<string, IconifyJSON> = {}
+
+  function processDir(dir: string, prefix: string): void {
+    const entries = fs.readdirSync(dir, { withFileTypes: true })
+    const subDirs = entries.filter(e => e.isDirectory())
+    const svgFiles = entries.filter(e => e.isFile() && e.name.endsWith('.svg'))
+
+    // Process SVG files in current directory if any
+    if (svgFiles.length > 0) {
+      collections[prefix] = getIconSetFromDir(dir, prefix)
+    }
+
+    // Recurse into subdirectories if any
+    if (subDirs.length > 0) {
+      for (const subDir of subDirs) {
+        const subDirPath = path.join(dir, subDir.name)
+        const subPrefix = `${prefix}-${subDir.name}`
+        processDir(subDirPath, subPrefix)
+      }
+    }
+  }
+
+  // Read top-level subdirectories and process each
+  const entries = fs.readdirSync(baseDir, { withFileTypes: true })
+  for (const entry of entries) {
+    if (entry.isDirectory()) {
+      const subDirPath = path.join(baseDir, entry.name)
+      const prefix = `${prefixBase}-${entry.name}`
+      processDir(subDirPath, prefix)
+    }
+  }
+
+  return collections
+}
+
 const config = {
   theme: {
     typography,
@@ -146,7 +269,21 @@ const config = {
       },
     },
   },
-  plugins: [tailwindTypography],
+  plugins: [
+    tailwindTypography,
+    iconsPlugin({
+      collections: {
+        ...getCollectionsFromSubDirs(path.resolve(_dirname, 'app/components/base/icons/assets/public'), 'custom-public'),
+        ...getCollectionsFromSubDirs(path.resolve(_dirname, 'app/components/base/icons/assets/vender'), 'custom-vender'),
+        ...getIconCollections(['heroicons', 'ri']),
+      },
+      extraProperties: {
+        width: '1rem',
+        height: '1rem',
+        display: 'block',
+      },
+    }),
+  ],
   // https://github.com/tailwindlabs/tailwindcss/discussions/5969
   corePlugins: {
     preflight: false,

web/utils/download.spec.ts

@@ -0,0 +1,75 @@
+import { downloadBlob, downloadUrl } from './download'
+
+describe('downloadUrl', () => {
+  let mockAnchor: HTMLAnchorElement
+
+  beforeEach(() => {
+    mockAnchor = {
+      href: '',
+      download: '',
+      rel: '',
+      target: '',
+      style: { display: '' },
+      click: vi.fn(),
+      remove: vi.fn(),
+    } as unknown as HTMLAnchorElement
+
+    vi.spyOn(document, 'createElement').mockReturnValue(mockAnchor)
+    vi.spyOn(document.body, 'appendChild').mockImplementation((node: Node) => node)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('should create a link and trigger a download correctly', () => {
+    downloadUrl({ url: 'https://example.com/file.txt', fileName: 'file.txt', target: '_blank' })
+
+    expect(mockAnchor.href).toBe('https://example.com/file.txt')
+    expect(mockAnchor.download).toBe('file.txt')
+    expect(mockAnchor.rel).toBe('noopener noreferrer')
+    expect(mockAnchor.target).toBe('_blank')
+    expect(mockAnchor.style.display).toBe('none')
+    expect(mockAnchor.click).toHaveBeenCalled()
+    expect(mockAnchor.remove).toHaveBeenCalled()
+  })
+
+  it('should skip when url is empty', () => {
+    downloadUrl({ url: '' })
+    expect(document.createElement).not.toHaveBeenCalled()
+  })
+})
+
+describe('downloadBlob', () => {
+  it('should create a blob url, trigger download, and revoke url', () => {
+    const blob = new Blob(['test'], { type: 'text/plain' })
+    const mockUrl = 'blob:mock-url'
+    const createObjectURLMock = vi.spyOn(window.URL, 'createObjectURL').mockReturnValue(mockUrl)
+    const revokeObjectURLMock = vi.spyOn(window.URL, 'revokeObjectURL').mockImplementation(() => {})
+
+    const mockAnchor = {
+      href: '',
+      download: '',
+      rel: '',
+      target: '',
+      style: { display: '' },
+      click: vi.fn(),
+      remove: vi.fn(),
+    } as unknown as HTMLAnchorElement
+
+    vi.spyOn(document, 'createElement').mockReturnValue(mockAnchor)
+    vi.spyOn(document.body, 'appendChild').mockImplementation((node: Node) => node)
+
+    downloadBlob({ data: blob, fileName: 'file.txt' })
+
+    expect(createObjectURLMock).toHaveBeenCalledWith(blob)
+    expect(mockAnchor.href).toBe(mockUrl)
+    expect(mockAnchor.download).toBe('file.txt')
+    expect(mockAnchor.rel).toBe('noopener noreferrer')
+    expect(mockAnchor.click).toHaveBeenCalled()
+    expect(mockAnchor.remove).toHaveBeenCalled()
+    expect(revokeObjectURLMock).toHaveBeenCalledWith(mockUrl)
+
+    vi.restoreAllMocks()
+  })
+})

web/utils/format.spec.ts

@@ -1,4 +1,4 @@
-import { downloadFile, formatFileSize, formatNumber, formatNumberAbbreviated, formatTime } from './format'
+import { formatFileSize, formatNumber, formatNumberAbbreviated, formatTime } from './format'
 
 describe('formatNumber', () => {
   it('should correctly format integers', () => {
@@ -82,49 +82,6 @@ describe('formatTime', () => {
     expect(formatTime(7200)).toBe('2.00 h')
   })
 })
-describe('downloadFile', () => {
-  it('should create a link and trigger a download correctly', () => {
-    // Mock data
-    const blob = new Blob(['test content'], { type: 'text/plain' })
-    const fileName = 'test-file.txt'
-    const mockUrl = 'blob:mockUrl'
-
-    // Mock URL.createObjectURL
-    const createObjectURLMock = vi.fn().mockReturnValue(mockUrl)
-    const revokeObjectURLMock = vi.fn()
-    Object.defineProperty(window.URL, 'createObjectURL', { value: createObjectURLMock })
-    Object.defineProperty(window.URL, 'revokeObjectURL', { value: revokeObjectURLMock })
-
-    // Mock createElement and appendChild
-    const mockLink = {
-      href: '',
-      download: '',
-      click: vi.fn(),
-      remove: vi.fn(),
-    }
-    const createElementMock = vi.spyOn(document, 'createElement').mockReturnValue(mockLink as any)
-    const appendChildMock = vi.spyOn(document.body, 'appendChild').mockImplementation((node: Node) => {
-      return node
-    })
-
-    // Call the function
-    downloadFile({ data: blob, fileName })
-
-    // Assertions
-    expect(createObjectURLMock).toHaveBeenCalledWith(blob)
-    expect(createElementMock).toHaveBeenCalledWith('a')
-    expect(mockLink.href).toBe(mockUrl)
-    expect(mockLink.download).toBe(fileName)
-    expect(appendChildMock).toHaveBeenCalledWith(mockLink)
-    expect(mockLink.click).toHaveBeenCalled()
-    expect(mockLink.remove).toHaveBeenCalled()
-    expect(revokeObjectURLMock).toHaveBeenCalledWith(mockUrl)
-
-    // Clean up mocks
-    vi.restoreAllMocks()
-  })
-})
-
 describe('formatNumberAbbreviated', () => {
   it('should return number as string when less than 1000', () => {
     expect(formatNumberAbbreviated(0)).toBe('0')

web/utils/format.ts

@@ -100,17 +100,6 @@ export const formatTime = (seconds: number) => {
   return `${seconds.toFixed(2)} ${units[index]}`
 }
 
-export const downloadFile = ({ data, fileName }: { data: Blob, fileName: string }) => {
-  const url = window.URL.createObjectURL(data)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = fileName
-  document.body.appendChild(a)
-  a.click()
-  a.remove()
-  window.URL.revokeObjectURL(url)
-}
-
 /**
  * Formats a number into a readable string using "k", "M", or "B" suffix.
  * @example