evaluations

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

@@ -480,4 +480,4 @@ const useButtonState = () => {
 ### Related Skills
 
 - `frontend-testing` - For testing refactored components
-- `web/docs/test.md` - Testing specification
+- `web/testing/testing.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/docs/test.md`. Use Vitest mock/timer APIs (`vi.*`).
+> **⚠️ Authoritative Source**: This skill is derived from `web/testing/testing.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/docs/test.md`** - The canonical testing specification. This skill is derived from this document.
+- **`web/testing/testing.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/docs/test.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/testing/testing.md` § Coverage Goals.
 
 | Scope | Rule |
 |-------|------|

.github/workflows/api-tests.yml

@@ -72,7 +72,6 @@ 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,9 +47,13 @@ jobs:
         if: steps.changed-files.outputs.any_changed == 'true'
         run: uv run --directory api --dev lint-imports
 
-      - name: Run Type Checks
+      - name: Run Basedpyright Checks
         if: steps.changed-files.outputs.any_changed == 'true'
-        run: make type-check
+        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 .
 
       - 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 application using TypeScript and React
+- **Frontend Web** (`/web`): Next.js 15 application using TypeScript and React 19
 - **Docker deployment** (`/docker`): Containerized deployment configurations
 
 ## Backend Workflow
@@ -18,7 +18,36 @@ The codebase is split into:
 
 ## Frontend Workflow
 
-- Read `web/AGENTS.md` for details
+```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.
 
 ## 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/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.
+**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.
 
 #### Backend
 

Makefile

@@ -68,11 +68,9 @@ lint:
 	@echo "✅ Linting complete"
 
 type-check:
-	@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"
+	@echo "📝 Running type check with basedpyright..."
+	@uv run --directory api --dev basedpyright
+	@echo "✅ Type check complete"
 
 test:
 	@echo "🧪 Running backend unit tests..."
@@ -80,7 +78,7 @@ test:
 		echo "Target: $(TARGET_TESTS)"; \
 		uv run --project api --dev pytest $(TARGET_TESTS); \
 	else \
-		PYTEST_XDIST_ARGS="-n auto" uv run --project api --dev dev/pytest/pytest_unit_tests.sh; \
+		uv run --project api --dev dev/pytest/pytest_unit_tests.sh; \
 	fi
 	@echo "✅ Tests complete"
 
@@ -132,7 +130,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 checks (basedpyright, mypy, ty)"
+	@echo "  make type-check     - Run type checking with basedpyright"
 	@echo "  make test           - Run backend unit tests (or TARGET_TESTS=./api/tests/<target_tests>)"
 	@echo ""
 	@echo "Docker Build Targets:"

api/.env.example

@@ -617,7 +617,6 @@ 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
@@ -717,3 +716,4 @@ 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,12 +1,4 @@
-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:
@@ -31,7 +23,7 @@ else:
     from app_factory import create_app
 
     app = create_app()
-    celery = cast("Celery", app.extensions["celery"])
+    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() -> DifyApp:
+def create_migrations_app():
     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=60 * 60,
+        default=24 * 60 * 60,
     )
 
 

api/controllers/console/__init__.py

@@ -115,6 +115,12 @@ 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
 
@@ -128,6 +134,7 @@ from .workspace import (
     model_providers,
     models,
     plugin,
+    snippets,
     tool_providers,
     trigger_providers,
     workspace,
@@ -165,6 +172,7 @@ __all__ = [
     "datasource_content_preview",
     "email_register",
     "endpoint",
+    "evaluation",
     "extension",
     "external",
     "feature",
@@ -197,6 +205,8 @@ __all__ = [
     "saved_message",
     "setup",
     "site",
+    "snippet_workflow",
+    "snippets",
     "spec",
     "statistic",
     "tags",

api/controllers/console/evaluation/__init__.py

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

api/controllers/console/evaluation/evaluation.py

@@ -0,0 +1,288 @@
+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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,306 @@
+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

@@ -0,0 +1,202 @@
+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[ReceiveRequestT, SendResultT](
+                    responder = RequestResponder(
                         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 not isinstance(result, LLMResult):
+        if stream and isinstance(result, Generator):
             return self._invoke_result_generator(
                 model=model,
                 result=result,

api/core/model_runtime/model_providers/model_provider_factory.py

@@ -314,8 +314,6 @@ 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

@@ -0,0 +1,45 @@
+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: int = gmpy2.powmod(em_int, self._key.e, self._key.n)  # type: ignore[attr-defined]
+        m_int = gmpy2.powmod(em_int, self._key.e, self._key.n)
         # 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: int = gmpy2.powmod(ct_int, self._key.d, self._key.n)  # type: ignore[attr-defined]
+        m_int = gmpy2.powmod(ct_int, self._key.d, self._key.n)
         # 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

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

api/models/snippet.py

@@ -0,0 +1,96 @@
+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,6 +65,7 @@ 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,7 +175,6 @@ 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

@@ -0,0 +1,542 @@
+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,7 +3,6 @@ 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__))
@@ -37,7 +36,6 @@ import sys
 
 sys.path.insert(0, PROJECT_DIR)
 
-from core.db.session_factory import configure_session_factory, session_factory
 from extensions import ext_redis
 
 
@@ -104,18 +102,3 @@ 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,13 +31,6 @@ 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,30 +1,16 @@
 [src]
 exclude = [
-    # 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",
+    # TODO: enable when violations fixed
     "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,7 +1479,6 @@ dev = [
     { name = "pytest-env" },
     { name = "pytest-mock" },
     { name = "pytest-timeout" },
-    { name = "pytest-xdist" },
     { name = "ruff" },
     { name = "scipy-stubs" },
     { name = "sseclient-py" },
@@ -1679,7 +1678,6 @@ 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" },
@@ -1898,15 +1896,6 @@ 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"
@@ -5152,19 +5141,6 @@ 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,12 +5,6 @@ SCRIPT_DIR="$(dirname "$(realpath "$0")")"
 cd "$SCRIPT_DIR/../.."
 
 PYTEST_TIMEOUT="${PYTEST_TIMEOUT:-20}"
-PYTEST_XDIST_ARGS="${PYTEST_XDIST_ARGS:--n auto}"
 
-# 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
+# libs
+pytest --timeout "${PYTEST_TIMEOUT}" api/tests/unit_tests

docker/.env.example

@@ -1375,7 +1375,6 @@ 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,7 +589,6 @@ 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,9 +1,5 @@
-## Frontend Workflow
-
-- Refer to the `./docs/test.md` and `./docs/lint.md` for detailed frontend workflow instructions.
-
 ## Automated Test Generation
 
-- Use `./docs/test.md` as the canonical instruction set for generating frontend automated tests.
+- Use `web/testing/testing.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,8 +107,6 @@ 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,7 +31,6 @@ 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'
 
@@ -146,8 +145,13 @@ 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' })
-      downloadBlob({ data: file, fileName: `${appDetail.name}.yml` })
+      const url = URL.createObjectURL(file)
+      a.href = url
+      a.download = `${appDetail.name}.yml`
+      a.click()
+      URL.revokeObjectURL(url)
     }
     catch {
       notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })

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

@@ -11,7 +11,6 @@ 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'
@@ -65,8 +64,13 @@ const DropDown = ({
         pipelineId: pipeline_id,
         include,
       })
+      const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
-      downloadBlob({ data: file, fileName: `${name}.pipeline` })
+      const url = URL.createObjectURL(file)
+      a.href = url
+      a.download = `${name}.pipeline`
+      a.click()
+      URL.revokeObjectURL(url)
     }
     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 ShortcutsName from '../workflow/shortcuts-name'
+import { getKeyboardKeyNameBySystem } from '../workflow/utils'
 
 type TooltipContentProps = {
   expand: boolean
@@ -20,7 +20,18 @@ 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>
-      <ShortcutsName keys={TOGGLE_SHORTCUT} textColor="secondary" />
+      <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>
     </div>
   )
 }

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

@@ -21,7 +21,6 @@ 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'
@@ -57,23 +56,28 @@ 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' })
-    downloadBlob({ data: file, fileName: `annotations-${locale}.jsonl` })
+    const url = URL.createObjectURL(file)
+    a.href = url
+    a.download = `annotations-${locale}.jsonl`
+    a.click()
+    URL.revokeObjectURL(url)
   }
 
-  const fetchList = React.useCallback(async () => {
+  const fetchList = async () => {
     const { data }: any = await fetchExportAnnotationList(appId)
     setList(data as AnnotationItemBasic[])
-  }, [appId])
+  }
 
   useEffect(() => {
     fetchList()
-  }, [fetchList])
+  }, [])
   useEffect(() => {
     if (controlUpdateList)
       fetchList()
-  }, [controlUpdateList, fetchList])
+  }, [controlUpdateList])
 
   const [showBulkImportModal, setShowBulkImportModal] = useState(false)
   const [showClearConfirm, setShowClearConfirm] = useState(false)

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

@@ -49,8 +49,7 @@ import Divider from '../../base/divider'
 import Loading from '../../base/loading'
 import Toast from '../../base/toast'
 import Tooltip from '../../base/tooltip'
-import ShortcutsName from '../../workflow/shortcuts-name'
-import { getKeyboardKeyCodeBySystem } from '../../workflow/utils'
+import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '../../workflow/utils'
 import AccessControl from '../app-access-control'
 import PublishWithMultipleModel from './publish-with-multiple-model'
 import SuggestedAction from './suggested-action'
@@ -346,7 +345,13 @@ const AppPublisher = ({
                             : (
                                 <div className="flex gap-1">
                                   <span>{t('common.publishUpdate', { ns: 'workflow' })}</span>
-                                  <ShortcutsName keys={PUBLISH_SHORTCUT} bgColor="white" />
+                                  <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>
                                 </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, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { vi } from 'vitest'
 import Toast from '@/app/components/base/toast'
@@ -240,9 +240,7 @@ describe('ConfigVar', () => {
       const saveButton = await screen.findByRole('button', { name: 'common.operation.save' })
       fireEvent.click(saveButton)
 
-      await waitFor(() => {
-        expect(onPromptVariablesChange).toHaveBeenCalledTimes(1)
-      })
+      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, RiExchange2Fill } from '@remixicon/react'
+import { RiArrowRightLine, RiArrowRightSLine, RiCommandLine, RiCornerDownLeftLine, RiExchange2Fill } from '@remixicon/react'
 
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import Image from 'next/image'
@@ -29,7 +29,6 @@ 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
@@ -270,7 +269,10 @@ 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>
-                  <ShortcutsName keys={['ctrl', '↵']} bgColor="white" />
+                  <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>
                 </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 } from '@remixicon/react'
+import { RiCloseLine, RiCommandLine, RiCornerDownLeftLine } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { useRouter } from 'next/navigation'
@@ -28,7 +28,6 @@ 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 = {
@@ -299,7 +298,10 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
             className="gap-1"
           >
             <span>{t('newApp.Create', { ns: 'app' })}</span>
-            <ShortcutsName keys={['ctrl', '↵']} bgColor="white" />
+            <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>
           </Button>
         </div>
       </Modal>

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

@@ -33,7 +33,6 @@ 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'
 
@@ -162,8 +161,13 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
         appID: app.id,
         include,
       })
+      const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
-      downloadBlob({ data: file, fileName: `${app.name}.yml` })
+      const url = URL.createObjectURL(file)
+      a.href = url
+      a.download = `${app.name}.yml`
+      a.click()
+      URL.revokeObjectURL(url)
     }
     catch {
       notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })
@@ -342,7 +346,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, t])
+  }, [app.updated_at, app.created_at])
 
   return (
     <>

web/app/components/apps/index.tsx

@@ -105,7 +105,6 @@ 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()
-                downloadUrl({ url: url || base64Url || '', fileName: name, target: '_blank' })
+                downloadFile(url || base64Url || '', name)
               }}
               >
                 <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()
-                  downloadUrl({ url: download_url || '', fileName: name, target: '_blank' })
+                  downloadFile(download_url || '', name)
                 }}
               >
                 <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()
-                  downloadUrl({ url: download_url || '', fileName: name, target: '_blank' })
+                  downloadFile(download_url || '', name)
                 }}
               >
                 <RiDownloadLine className="h-3.5 w-3.5 text-text-tertiary" />

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

@@ -1,3 +1,4 @@
+import type { MockInstance } from 'vitest'
 import mime from 'mime'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { upload } from '@/service/base'
@@ -5,6 +6,7 @@ import { TransferMethod } from '@/types/app'
 import { FILE_EXTS } from '../prompt-editor/constants'
 import { FileAppearanceTypeEnum } from './types'
 import {
+  downloadFile,
   fileIsUploaded,
   fileUpload,
   getFileAppearanceType,
@@ -780,4 +782,74 @@ 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,3 +249,15 @@ 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,7 +8,6 @@ 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
@@ -61,14 +60,27 @@ 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') || url.startsWith('data:image')) {
-      downloadUrl({ url, fileName: title, target: '_blank' })
-      return
+    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}`,
+      })
     }
-    Toast.notify({
-      type: 'error',
-      message: `Unable to open image: ${url}`,
-    })
   }
 
   const zoomIn = () => {
@@ -123,7 +135,12 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       catch (err) {
         console.error('Failed to copy image:', err)
 
-        downloadUrl({ url, fileName: `${title}.png` })
+        const link = document.createElement('a')
+        link.href = url
+        link.download = `${title}.png`
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
 
         Toast.notify({
           type: 'info',
@@ -198,7 +215,6 @@ 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,7 +8,6 @@ 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
@@ -41,10 +40,11 @@ const ShareQRCode = ({ content }: Props) => {
   }, [isShow])
 
   const downloadQR = () => {
-    const canvas = qrCodeRef.current?.querySelector('canvas')
-    if (!(canvas instanceof HTMLCanvasElement))
-      return
-    downloadUrl({ url: canvas.toDataURL(), fileName: 'qrcode.png' })
+    const canvas = document.getElementsByTagName('canvas')[0]
+    const link = document.createElement('a')
+    link.download = 'qrcode.png'
+    link.href = canvas.toDataURL()
+    link.click()
   }
 
   const handlePanelClick = (event: React.MouseEvent) => {

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

@@ -179,10 +179,8 @@ describe('RetryButton (IndexFailed)', () => {
         }, false),
       )
 
-      let resolveRetry: ((value: { result: 'success' }) => void) | undefined
-      mockRetryErrorDocs.mockImplementation(() => new Promise((resolve) => {
-        resolveRetry = resolve
-      }))
+      // Delay the response to test loading state
+      mockRetryErrorDocs.mockImplementation(() => new Promise(resolve => setTimeout(() => resolve({ result: 'success' }), 100)))
 
       render(<RetryButton datasetId="test-dataset" />)
 
@@ -195,11 +193,6 @@ 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,10 +23,9 @@ vi.mock('@/app/components/base/toast', () => ({
   },
 }))
 
-// Mock download utilities
-vi.mock('@/utils/download', () => ({
-  downloadBlob: vi.fn(),
-  downloadUrl: vi.fn(),
+// Mock downloadFile utility
+vi.mock('@/utils/format', () => ({
+  downloadFile: vi.fn(),
 }))
 
 // Capture Confirm callbacks
@@ -503,8 +502,8 @@ describe('TemplateCard', () => {
       })
     })
 
-    it('should call downloadBlob on successful export', async () => {
-      const { downloadBlob } = await import('@/utils/download')
+    it('should call downloadFile on successful export', async () => {
+      const { downloadFile } = await import('@/utils/format')
       mockExportPipelineDSL.mockImplementation((_id, callbacks) => {
         callbacks.onSuccess({ data: 'yaml_content' })
         return Promise.resolve()
@@ -515,7 +514,7 @@ describe('TemplateCard', () => {
       fireEvent.click(exportButton)
 
       await waitFor(() => {
-        expect(downloadBlob).toHaveBeenCalledWith(expect.objectContaining({
+        expect(downloadFile).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 { downloadBlob } from '@/utils/download'
+import { downloadFile } from '@/utils/format'
 import Actions from './actions'
 import Content from './content'
 import Details from './details'
@@ -108,7 +108,10 @@ const TemplateCard = ({
     await exportPipelineDSL(pipeline.id, {
       onSuccess: (res) => {
         const blob = new Blob([res.data], { type: 'application/yaml' })
-        downloadBlob({ data: blob, fileName: `${pipeline.name}.pipeline` })
+        downloadFile({
+          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,25 +125,11 @@ const WaterCrawl: FC<Props> = ({
       await sleep(2500)
       return await waitForCrawlFinished(jobId)
     }
-    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
-
+    catch (e: any) {
+      const errorBody = await e.json()
       return {
         isError: true,
-        errorMessage,
+        errorMessage: errorBody.message,
         data: {
           data: [],
         },

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

@@ -4,8 +4,7 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import ShortcutsName from '@/app/components/workflow/shortcuts-name'
-import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
+import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
 import { ChunkingMode } from '@/models/datasets'
 import { useDocumentContext } from '../../context'
 
@@ -55,7 +54,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>
-          <ShortcutsName keys={['ESC']} textColor="secondary" />
+          <span className="system-kbd rounded-[4px] bg-components-kbd-bg-gray px-[1px] text-text-tertiary">ESC</span>
         </div>
       </Button>
       {(isParentChildParagraphMode && actionType === 'edit' && !isChildChunk && showRegenerationButton)
@@ -77,7 +76,10 @@ 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>
-          <ShortcutsName keys={['ctrl', 'S']} bgColor="white" />
+          <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>
         </div>
       </Button>
     </div>

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

@@ -5,7 +5,6 @@ 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
@@ -66,8 +65,13 @@ export const useDatasetCardState = ({ dataset, onSuccess }: UseDatasetCardStateO
         pipelineId: pipeline_id,
         include,
       })
+      const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
-      downloadBlob({ data: file, fileName: `${name}.pipeline` })
+      const url = URL.createObjectURL(file)
+      a.href = url
+      a.download = `${name}.pipeline`
+      a.click()
+      URL.revokeObjectURL(url)
     }
     catch {
       Toast.notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })

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

@@ -74,15 +74,17 @@ 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-2 space-x-2')}>
+          <div className={cn('grid h-8 w-full grid-cols-1 space-x-2', isTrialApp && 'grid-cols-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>
-            <Button className="h-7" onClick={showTryAPPPanel(app.app_id)}>
-              <RiInformation2Line className="mr-1 size-4" />
-              <span>{t('appCard.try', { 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>
+            )}
           </div>
         </div>
       )}

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

@@ -251,7 +251,6 @@ 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 } from '@remixicon/react'
+import { RiCloseLine, RiCommandLine, RiCornerDownLeftLine } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
@@ -17,7 +17,6 @@ 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
@@ -199,7 +198,10 @@ const CreateAppModal = ({
             onClick={handleSubmit}
           >
             <span>{!isEditModal ? t('operation.create', { ns: 'common' }) : t('operation.save', { ns: 'common' })}</span>
-            <ShortcutsName keys={['ctrl', '↵']} bgColor="white" />
+            <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>
           </Button>
           <Button className="w-24" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
         </div>

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

@@ -1,13 +1,11 @@
 /* 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'
@@ -17,7 +15,6 @@ import Tab, { TypeEnum } from './tab'
 
 type Props = {
   appId: string
-  app?: AppType
   category?: string
   onClose: () => void
   onCreate: () => void
@@ -25,23 +22,13 @@ type Props = {
 
 const TryApp: FC<Props> = ({
   appId,
-  app,
   category,
   onClose,
   onCreate,
 }) => {
-  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 [type, setType] = useState<TypeEnum>(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
@@ -58,7 +45,6 @@ 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,17 +12,15 @@ 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' }), disabled: disableTry },
+    { id: TypeEnum.TRY, name: t('tryApp.tabHeader.try', { ns: 'explore' }) },
     { id: TypeEnum.DETAIL, name: t('tryApp.tabHeader.detail', { ns: 'explore' }) },
   ]
   return (

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

@@ -12,8 +12,7 @@ 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 ShortcutsName from '@/app/components/workflow/shortcuts-name'
-import { getKeyboardKeyCodeBySystem, isEventTargetInputArea } from '@/app/components/workflow/utils/common'
+import { getKeyboardKeyCodeBySystem, isEventTargetInputArea, isMac } 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'
@@ -357,7 +356,14 @@ const GotoAnything: FC<Props> = ({
                   </div>
                 )}
               </div>
-              <ShortcutsName keys={['ctrl', 'K']} textColor="secondary" />
+              <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>
             </div>
 
             <Command.List className="h-[240px] overflow-y-auto">

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

@@ -10,7 +10,6 @@ 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'
@@ -48,7 +47,9 @@ const UpgradeOrDownload: FC<UpgradeOrDownloadProps> = ({ doc_name }) => {
     mutationFn: async () => {
       try {
         const ret = await getDocDownloadUrl(doc_name)
-        downloadUrl({ url: ret.url })
+        const a = document.createElement('a')
+        a.href = ret.url
+        a.click()
         Toast.notify({
           type: 'success',
           message: t('operation.downloadSuccess', { ns: 'common' }),

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

@@ -28,12 +28,11 @@ 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 } from '@/app/components/workflow/utils'
+import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useDocLink } from '@/context/i18n'
 import { useModalContextSelector } from '@/context/modal-context'
@@ -262,7 +261,13 @@ const Popup = () => {
               : (
                   <div className="flex gap-1">
                     <span>{t('common.publishUpdate', { ns: 'workflow' })}</span>
-                    <ShortcutsName keys={PUBLISH_SHORTCUT} bgColor="white" />
+                    <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>
                   </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,7 +78,14 @@ const RunMode = ({
         )}
         {
           !isDisabled && (
-            <ShortcutsName keys={['alt', 'R']} textColor="secondary" />
+            <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>
           )
         }
       </button>

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

@@ -11,7 +11,6 @@ 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 = () => {
@@ -38,8 +37,13 @@ export const useDSL = () => {
         pipelineId,
         include,
       })
+      const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
-      downloadBlob({ data: file, fileName: `${knowledgeName}.pipeline` })
+      const url = URL.createObjectURL(file)
+      a.href = url
+      a.download = `${knowledgeName}.pipeline`
+      a.click()
+      URL.revokeObjectURL(url)
     }
     catch {
       notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })

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

@@ -7,7 +7,6 @@ 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'
 
@@ -76,7 +75,9 @@ 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>
-          <ShortcutsName keys={[t('onboarding.escTip.key', { ns: 'workflow' })]} textColor="secondary" />
+          <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>
           <span>{t('onboarding.escTip.toDismiss', { ns: 'workflow' })}</span>
         </div>
       )}

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

@@ -11,7 +11,6 @@ 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 = () => {
@@ -38,8 +37,13 @@ export const useDSL = () => {
         include,
         workflowID: workflowId,
       })
+      const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
-      downloadBlob({ data: file, fileName: `${appDetail.name}.yml` })
+      const url = URL.createObjectURL(file)
+      a.href = url
+      a.download = `${appDetail.name}.yml`
+      a.click()
+      URL.revokeObjectURL(url)
     }
     catch {
       notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })

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

@@ -1,705 +0,0 @@
-/**
- * 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(true)
+              handleRefreshWorkflowDraft()
           })
         }
         callback?.onError?.()

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

@@ -1,556 +0,0 @@
-/**
- * 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((notUpdateCanvas?: boolean) => {
+  const handleRefreshWorkflowDraft = useCallback(() => {
     const {
       appId,
       setSyncWorkflowDraftHash,
@@ -31,14 +31,12 @@ export const useWorkflowRefreshDraft = () => {
     fetchWorkflowDraft(`/apps/${appId}/workflows/draft`)
       .then((response) => {
         // Ensure we have a valid workflow structure with viewport
-        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)
+        const workflowData: WorkflowDataUpdater = {
+          nodes: response.graph?.nodes || [],
+          edges: response.graph?.edges || [],
+          viewport: response.graph?.viewport || { x: 0, y: 0, zoom: 1 },
         }
+        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 { downloadBlob } from '@/utils/download'
+import { downloadFile } from '@/utils/format'
 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`
-    downloadBlob({ data: blob, fileName })
+    downloadFile({ 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,7 +143,14 @@ const RunMode = ({
                 >
                   <RiPlayLargeLine className="mr-1 size-4" />
                   {text ?? t('common.run', { ns: 'workflow' })}
-                  <ShortcutsName keys={['alt', 'R']} textColor="secondary" />
+                  <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>
                 </div>
               </TestRunMenu>
             )

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

@@ -8,8 +8,7 @@ import useTheme from '@/hooks/use-theme'
 import { cn } from '@/utils/classnames'
 import Button from '../../base/button'
 import Tooltip from '../../base/tooltip'
-import ShortcutsName from '../shortcuts-name'
-import { getKeyboardKeyCodeBySystem } from '../utils'
+import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '../utils'
 
 type VersionHistoryButtonProps = {
   onClick: () => Promise<unknown> | unknown
@@ -24,7 +23,16 @@ const PopupContent = React.memo(() => {
       <div className="system-xs-medium px-0.5 text-text-secondary">
         {t('common.versionHistory', { ns: 'workflow' })}
       </div>
-      <ShortcutsName keys={VERSION_HISTORY_SHORTCUT} bgColor="gray" textColor="secondary" />
+      <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>
     </div>
   )
 })

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

@@ -3,8 +3,7 @@ import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import ShortcutsName from '@/app/components/workflow/shortcuts-name'
-import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
+import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
 
 type AdvancedActionsProps = {
   isConfirmDisabled: boolean
@@ -12,6 +11,15 @@ 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,
@@ -40,7 +48,10 @@ const AdvancedActions: FC<AdvancedActionsProps> = ({
         onClick={onConfirm}
       >
         <span>{t('operation.confirm', { ns: 'common' })}</span>
-        <ShortcutsName keys={['ctrl', '⏎']} bgColor="white" />
+        <div className="flex items-center gap-x-0.5">
+          <Key keyName={getKeyboardKeyNameBySystem('ctrl')} />
+          <Key keyName="⏎" />
+        </div>
       </Button>
     </div>
   )

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

@@ -19,7 +19,6 @@ 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'
 
@@ -147,14 +146,26 @@ const MoreActions: FC = () => {
         }
       }
 
-      const fileName = `${filename}.${type}`
-
       if (currentWorkflow) {
         setPreviewUrl(dataUrl)
-        setPreviewTitle(fileName)
-      }
+        setPreviewTitle(`${filename}.${type}`)
 
-      downloadUrl({ url: dataUrl, 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)
+      }
     }
     catch (error) {
       console.error('Export image failed:', error)

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

@@ -6,13 +6,11 @@ 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(
@@ -25,9 +23,7 @@ const ShortcutsName = ({
           <div
             key={key}
             className={cn(
-              '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',
+              'system-kbd flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray capitalize',
               textColor === 'secondary' && 'text-text-tertiary',
             )}
           >

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

@@ -9,7 +9,8 @@ html[data-theme="dark"] .monaco-editor .sticky-line-content:hover {
   background-color: var(--color-components-sticky-header-bg-hover) !important;
 }
 
-/* Monaco editor specific sticky scroll styles in dark mode */
-html[data-theme="dark"] .monaco-editor .sticky-line-root {
+/* 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 {
   background-color: var(--color-components-sticky-header-bg) !important;
+  border-bottom: 1px solid var(--color-components-sticky-header-border) !important;
 }

web/docs/lint.md

@@ -1,51 +0,0 @@
-# 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/eslint-rules/index.js

@@ -3,14 +3,13 @@ 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',
+    name: 'dify-i18n',
     version: '1.0.0',
   },
   rules: {
@@ -19,7 +18,6 @@ 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

@@ -1,384 +0,0 @@
-/**
- * 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": 2
+      "count": 3
     }
   },
   "app/components/base/file-uploader/utils.ts": {
@@ -1661,7 +1661,7 @@
       "count": 1
     },
     "ts/no-explicit-any": {
-      "count": 4
+      "count": 5
     }
   },
   "app/components/datasets/create/website/watercrawl/options.tsx": {
@@ -4318,6 +4318,11 @@
       "count": 10
     }
   },
+  "testing/testing.md": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
   "types/app.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -4371,6 +4376,11 @@
       "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 dify from './eslint-rules/index.js'
+import difyI18n from './eslint-rules/index.js'
 
 export default antfu(
   {
@@ -104,34 +104,44 @@ export default antfu(
       'tailwindcss/migration-from-tailwind-2': 'warn',
     },
   },
-  // Dify custom rules
-  {
-    plugins: {
-      dify,
-    },
-  },
-  {
-    files: ['**/*.tsx'],
-    rules: {
-      'dify/prefer-tailwind-icon': '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
   {
     files: ['i18n/**/*.json'],
+    plugins: {
+      'dify-i18n': difyI18n,
+    },
     rules: {
       'sonarjs/max-lines': 'off',
       'max-lines': 'off',
       'jsonc/sort-keys': 'error',
 
-      'dify/valid-i18n-keys': 'error',
-      'dify/no-extra-keys': 'error',
-      'dify/consistent-placeholders': 'error',
+      'dify-i18n/valid-i18n-keys': 'error',
+      'dify-i18n/no-extra-keys': 'error',
+      'dify-i18n/consistent-placeholders': 'error',
     },
   },
+  // package.json version prefix validation
   {
     files: ['**/package.json'],
+    plugins: {
+      'dify-i18n': difyI18n,
+    },
     rules: {
-      'dify/no-version-prefix': 'error',
+      'dify-i18n/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 from 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 form this sample app\" and set it up!"
 }

web/package.json

@@ -162,13 +162,7 @@
   "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",
@@ -211,7 +205,7 @@
     "@vitejs/plugin-react": "5.1.2",
     "@vitest/coverage-v8": "4.0.17",
     "autoprefixer": "10.4.21",
-    "code-inspector-plugin": "1.4.1",
+    "code-inspector-plugin": "1.3.6",
     "cross-env": "10.1.0",
     "esbuild-wasm": "0.27.2",
     "eslint": "9.39.2",

web/pnpm-lock.yaml

@@ -372,27 +372,9 @@ 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))
@@ -520,8 +502,8 @@ importers:
         specifier: 10.4.21
         version: 10.4.21(postcss@8.5.6)
       code-inspector-plugin:
-        specifier: 1.4.1
-        version: 1.4.1
+        specifier: 1.3.6
+        version: 1.3.6
       cross-env:
         specifier: 10.1.0
         version: 10.1.0
@@ -748,9 +730,6 @@ 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==}
 
@@ -887,23 +866,23 @@ packages:
   '@clack/prompts@0.8.2':
     resolution: {integrity: sha512-6b9Ab2UiZwJYA9iMyboYyW9yJvAO9V753ZhS+DHKEjZRKAxPPOb7MXXu84lsPFG+vZt6FRFniZ8rXi+zCIw4yQ==}
 
-  '@code-inspector/core@1.4.1':
-    resolution: {integrity: sha512-k5iLYvrBBPBPODcwuzgEcAZnXU4XTnEO1jOmNQBHCehN6nrMO1m5Efjz35KPkSX+8T4IWvXvLoXR5XPfhDlxug==}
+  '@code-inspector/core@1.3.6':
+    resolution: {integrity: sha512-bSxf/PWDPY6rv9EFf0mJvTnLnz3927PPrpX6BmQcRKQab+Ez95yRqrVZY8IcBUpaqA/k3etA5rZ1qkN0V4ERtw==}
 
-  '@code-inspector/esbuild@1.4.1':
-    resolution: {integrity: sha512-0tf73j0wgsu1Rl5CNe5o5L/GB/lGvQQVjuLTbAB/but+Bw//nHRnlrA29lBzNM6cyBDZzwofa71Q+TH8Fu4aZQ==}
+  '@code-inspector/esbuild@1.3.6':
+    resolution: {integrity: sha512-s35dseBXI2yqfX6ZK29Ix941jaE/4KPlZZeMk6B5vDahj75FDUfVxQ7ORy4cX2hyz8CmlOycsY/au5mIvFpAFg==}
 
-  '@code-inspector/mako@1.4.1':
-    resolution: {integrity: sha512-inpiJbc8J+qaEYcMgzyAFusuyryZ9i0wUQhLJRbWl1WrUdWTE8xNHDjhPeTVaMav42NTGDnVKJhhKD6tNaxyFA==}
+  '@code-inspector/mako@1.3.6':
+    resolution: {integrity: sha512-FJvuTElOi3TUCWTIaYTFYk2iTUD6MlO51SC8SYfwmelhuvnOvTMa2TkylInX16OGb4f7sGNLRj2r+7NNx/gqpw==}
 
-  '@code-inspector/turbopack@1.4.1':
-    resolution: {integrity: sha512-xVefk907E39U/oywR9YiEqJn1VlNBHIcIsYkjNnFp0U3qBb3A40VqivlCqkWaP9xHAwEH8/UT3Sfh3aoUPC9/Q==}
+  '@code-inspector/turbopack@1.3.6':
+    resolution: {integrity: sha512-pfXgvZCn4/brpTvqy8E0HTe6V/ksVKEPQo697Nt5k22kBnlEM61UT3rI2Art+fDDEMPQTxVOFpdbwCKSLwMnmQ==}
 
-  '@code-inspector/vite@1.4.1':
-    resolution: {integrity: sha512-ptbGkmtw5mvuFse6Kjmd6bCgm+isHrBq+HumWlAMBH//Qb2frHkEV7kWjO6/AkBXfm/ccNJy+jNwWq0632ChDg==}
+  '@code-inspector/vite@1.3.6':
+    resolution: {integrity: sha512-vXYvzGc0S1NR4p3BeD1Xx2170OnyecZD0GtebLlTiHw/cetzlrBHVpbkIwIEzzzpTYYshwwDt8ZbuvdjmqhHgw==}
 
-  '@code-inspector/webpack@1.4.1':
-    resolution: {integrity: sha512-UkqC5MsWRVJT2y10GM7tIZdQmFuGAlArJSfq2hq727eXMDV3otY5d1UCQopYvUIEC90QQNHJDeK4e+UQipF6AQ==}
+  '@code-inspector/webpack@1.3.6':
+    resolution: {integrity: sha512-bi/+vsym9d6NXQQ++Phk74VLMiVoGKjgPHr445j/D43URG8AN8yYa+gRDBEDcZx4B128dihrVMxEO8+OgWGjTw==}
 
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
@@ -936,18 +915,10 @@ 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==}
 
@@ -1321,21 +1292,9 @@ 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==}
 
@@ -3920,8 +3879,8 @@ packages:
       react: ^18 || ^19 || ^19.0.0-rc
       react-dom: ^18 || ^19 || ^19.0.0-rc
 
-  code-inspector-plugin@1.4.1:
-    resolution: {integrity: sha512-DuOEoOWtkz3Mq6JTogJjSfXkVnXuGy6Gjfi+eBYtgRFlZmQ5sw1/LacsPnTK89O4Oz6gZj+zjxpwNfpWg3htpA==}
+  code-inspector-plugin@1.3.6:
+    resolution: {integrity: sha512-ddTg8embDqLZxKEdSNOm+/0YnVVgWKr10+Bu2qFqQDObj/3twGh0Z23TIz+5/URxfRhTPbp2sUSpWlw78piJbQ==}
 
   collapse-white-space@2.1.0:
     resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
@@ -3949,10 +3908,6 @@ 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'}
@@ -4024,21 +3979,10 @@ 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==}
 
@@ -4047,10 +3991,6 @@ 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'}
@@ -4309,25 +4249,12 @@ 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'}
@@ -4385,10 +4312,6 @@ 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'}
@@ -4822,9 +4745,6 @@ 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'}
@@ -5626,9 +5546,6 @@ 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==}
 
@@ -5816,10 +5733,6 @@ 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==}
 
@@ -6620,10 +6533,6 @@ 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'}
@@ -6893,11 +6802,6 @@ 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==}
 
@@ -7808,8 +7712,6 @@ 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)
@@ -7997,7 +7899,7 @@ snapshots:
       picocolors: 1.1.1
       sisteransi: 1.0.5
 
-  '@code-inspector/core@1.4.1':
+  '@code-inspector/core@1.3.6':
     dependencies:
       '@vue/compiler-dom': 3.5.27
       chalk: 4.1.2
@@ -8007,35 +7909,35 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/esbuild@1.4.1':
+  '@code-inspector/esbuild@1.3.6':
     dependencies:
-      '@code-inspector/core': 1.4.1
+      '@code-inspector/core': 1.3.6
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/mako@1.4.1':
+  '@code-inspector/mako@1.3.6':
     dependencies:
-      '@code-inspector/core': 1.4.1
+      '@code-inspector/core': 1.3.6
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/turbopack@1.4.1':
+  '@code-inspector/turbopack@1.3.6':
     dependencies:
-      '@code-inspector/core': 1.4.1
-      '@code-inspector/webpack': 1.4.1
+      '@code-inspector/core': 1.3.6
+      '@code-inspector/webpack': 1.3.6
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/vite@1.4.1':
+  '@code-inspector/vite@1.3.6':
     dependencies:
-      '@code-inspector/core': 1.4.1
+      '@code-inspector/core': 1.3.6
       chalk: 4.1.1
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/webpack@1.4.1':
+  '@code-inspector/webpack@1.3.6':
     dependencies:
-      '@code-inspector/core': 1.4.1
+      '@code-inspector/core': 1.3.6
     transitivePeerDependencies:
       - supports-color
 
@@ -8061,19 +7963,8 @@ 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
@@ -8437,39 +8328,8 @@ 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
@@ -11283,14 +11143,14 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
-  code-inspector-plugin@1.4.1:
+  code-inspector-plugin@1.3.6:
     dependencies:
-      '@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
+      '@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
       chalk: 4.1.1
     transitivePeerDependencies:
       - supports-color
@@ -11319,8 +11179,6 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
-  commander@11.1.0: {}
-
   commander@13.1.0: {}
 
   commander@2.20.3:
@@ -11379,34 +11237,15 @@ 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
@@ -11672,18 +11511,6 @@ 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
@@ -11692,12 +11519,6 @@ 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: {}
@@ -11750,8 +11571,6 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
-  entities@4.5.0: {}
-
   entities@6.0.1: {}
 
   entities@7.0.1: {}
@@ -12401,8 +12220,6 @@ snapshots:
 
   fflate@0.4.8: {}
 
-  fflate@0.8.2: {}
-
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -13354,8 +13171,6 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
-  mdn-data@2.0.28: {}
-
   mdn-data@2.12.2: {}
 
   memoize-one@5.2.1: {}
@@ -13720,8 +13535,6 @@ 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:
@@ -14651,8 +14464,6 @@ snapshots:
     optionalDependencies:
       '@parcel/watcher': 2.5.6
 
-  sax@1.4.4: {}
-
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
@@ -14961,16 +14772,6 @@ 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/docs/test.md.
+- Confirm the tests satisfy all requirements listed above and in web/testing/TESTING.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/docs/test.md
+For complete testing guidelines, see: web/testing/testing.md
 `)
 }
 

web/tailwind-common-config.ts

@@ -1,131 +1,8 @@
-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,
@@ -269,21 +146,7 @@ const config = {
       },
     },
   },
-  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',
-      },
-    }),
-  ],
+  plugins: [tailwindTypography],
   // https://github.com/tailwindlabs/tailwindcss/discussions/5969
   corePlugins: {
     preflight: false,

web/testing/testing.md

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

web/utils/download.spec.ts

@@ -1,75 +0,0 @@
-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 { formatFileSize, formatNumber, formatNumberAbbreviated, formatTime } from './format'
+import { downloadFile, formatFileSize, formatNumber, formatNumberAbbreviated, formatTime } from './format'
 
 describe('formatNumber', () => {
   it('should correctly format integers', () => {
@@ -82,6 +82,49 @@ 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,6 +100,17 @@ 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