diff --git a/api/core/workflow/nodes/agent_v2/runtime_request_builder.py b/api/core/workflow/nodes/agent_v2/runtime_request_builder.py
index 0dcdcb35b36532..b044e2b4cacc39 100644
--- a/api/core/workflow/nodes/agent_v2/runtime_request_builder.py
+++ b/api/core/workflow/nodes/agent_v2/runtime_request_builder.py
@@ -53,6 +53,7 @@
 from graphon.file import File, FileTransferMethod
 from graphon.variables.segments import Segment
 from graphon.variables.template_resolution import convert_template
+from libs.workflow_template_values import resolve_template_value
 from models.agent import Agent, AgentConfigSnapshot, WorkflowAgentNodeBinding
 from models.agent_config_entities import (
     AgentKnowledgeMetadataFilteringConfig,
@@ -216,7 +217,7 @@ def build(self, context: WorkflowAgentRuntimeBuildContext) -> WorkflowAgentRunti
             runtime_config_skills=runtime_config_skills,
         )
         soul_prompt = expand_prompt_mentions(agent_soul.prompt.system_prompt, soul_prompt_resolver).strip()
-        knowledge_config = build_knowledge_layer_config(agent_soul)
+        knowledge_config = build_knowledge_layer_config(agent_soul, variable_pool=context.variable_pool)
         context_window_tokens = resolve_model_context_window(
             run_context=context.dify_context,
             provider_name=agent_soul.model.model_provider,
@@ -743,7 +744,9 @@ def build_shell_layer_config(agent_soul: AgentSoulConfig) -> DifyShellLayerConfi
     )
 
 
-def build_knowledge_layer_config(agent_soul: AgentSoulConfig) -> DifyKnowledgeBaseLayerConfig | None:
+def build_knowledge_layer_config(
+    agent_soul: AgentSoulConfig, *, variable_pool: VariablePoolReader | None = None
+) -> DifyKnowledgeBaseLayerConfig | None:
     """Map Agent Soul knowledge sets into one Dify knowledge-base layer.
 
     Agent Soul DTO validation owns malformed set rejection. Runtime mapping is
@@ -751,6 +754,8 @@ def build_knowledge_layer_config(agent_soul: AgentSoulConfig) -> DifyKnowledgeBa
     policy, dataset refs, retrieval controls, and metadata-filtering controls.
     ``score_threshold=None`` means disabled threshold filtering and maps to the
     inner retrieval request's ``0.0`` default through the Agent backend DTO.
+    Workflow callers supply the current run's variable pool; ``None`` preserves
+    literal filters for standalone Agent requests, which have no workflow scope.
     """
     if not agent_soul.knowledge.sets:
         return None
@@ -774,7 +779,9 @@ def build_knowledge_layer_config(agent_soul: AgentSoulConfig) -> DifyKnowledgeBa
                     value=knowledge_set.query.value,
                 ),
                 retrieval=_knowledge_retrieval_config(knowledge_set.retrieval),
-                metadata_filtering=_knowledge_metadata_filtering_config(knowledge_set.metadata_filtering),
+                metadata_filtering=_knowledge_metadata_filtering_config(
+                    knowledge_set.metadata_filtering, variable_pool=variable_pool
+                ),
             )
             for knowledge_set in agent_soul.knowledge.sets
         ],
@@ -821,17 +828,33 @@ def _knowledge_retrieval_config(retrieval: AgentKnowledgeRetrievalConfig) -> Dif
 
 def _knowledge_metadata_filtering_config(
     metadata_filtering: AgentKnowledgeMetadataFilteringConfig,
+    *,
+    variable_pool: VariablePoolReader | None,
 ) -> DifyKnowledgeMetadataFilteringConfig:
+    conditions = metadata_filtering.conditions
+    if conditions is not None and metadata_filtering.mode == "manual" and variable_pool is not None:
+        try:
+            conditions = conditions.model_copy(
+                update={
+                    "conditions": [
+                        condition.model_copy(update={"value": resolve_template_value(condition.value, variable_pool)})
+                        for condition in conditions.conditions
+                    ]
+                }
+            )
+        except ValueError as error:
+            raise WorkflowAgentRuntimeRequestBuildError(
+                "agent_metadata_filter_variable_not_found", str(error)
+            ) from error
+
     return DifyKnowledgeMetadataFilteringConfig(
         mode=metadata_filtering.mode,
         model_config=_knowledge_model_config(metadata_filtering.metadata_model_config),
         conditions=cast(
             Any,
-            metadata_filtering.conditions.model_dump(
-                mode="json", exclude={"conditions": {"__all__": {"id", "metadata_id"}}}
-            ),
+            conditions.model_dump(mode="json", exclude={"conditions": {"__all__": {"id", "metadata_id"}}}),
         )
-        if metadata_filtering.conditions is not None
+        if conditions is not None
         else None,
     )
 
diff --git a/api/core/workflow/workflow_entry.py b/api/core/workflow/workflow_entry.py
index c0f532a6750c21..ed71946728f324 100644
--- a/api/core/workflow/workflow_entry.py
+++ b/api/core/workflow/workflow_entry.py
@@ -22,6 +22,8 @@
     is_start_node_type,
     resolve_workflow_node_class,
 )
+from core.workflow.nodes.agent_v2.binding_resolver import WorkflowAgentBindingResolver
+from core.workflow.nodes.agent_v2.discriminator import is_dify_agent_node_data
 from core.workflow.nodes.human_input.boundary import HumanInputFormEventFilter
 from core.workflow.system_variables import (
     default_system_variables,
@@ -47,6 +49,8 @@
 from graphon.nodes.container_effects import ContainerAwaitRequest
 from graphon.runtime import GraphRuntimeState, ReadOnlyGraphRuntimeStateWrapper, VariablePool
 from graphon.variable_loader import DUMMY_VARIABLE_LOADER, VariableLoader, load_into_variable_pool
+from libs.workflow_template_values import template_value_selectors
+from models.agent_config_entities import AgentSoulConfig
 from models.workflow import Workflow
 
 logger = logging.getLogger(__name__)
@@ -271,6 +275,28 @@ def single_step_run(
             )
         except NotImplementedError:
             variable_mapping = {}
+        if is_dify_agent_node_data(node_config_data):
+            # Agent Soul lives in its owned snapshot, outside graph node data.
+            # Single-step execution must also load references used only by its
+            # retrieval filters, which are absent from the task prompt.
+            bundle = WorkflowAgentBindingResolver().resolve(
+                tenant_id=workflow.tenant_id,
+                app_id=workflow.app_id,
+                workflow_id=workflow.id,
+                node_id=node_id,
+            )
+            agent_soul = AgentSoulConfig.model_validate(bundle.snapshot.config_snapshot_dict)
+            variable_mapping = {
+                **variable_mapping,
+                **{
+                    f"{node_id}.metadata_filter.{'.'.join(selector)}": selector
+                    for knowledge_set in agent_soul.knowledge.sets
+                    if knowledge_set.metadata_filtering.mode == "manual"
+                    and knowledge_set.metadata_filtering.conditions is not None
+                    for condition in knowledge_set.metadata_filtering.conditions.conditions
+                    for selector in template_value_selectors(condition.value)
+                },
+            }
         variable_mapping = inject_default_system_variable_mappings(
             node_id=node_id,
             node_type=node_type,
diff --git a/api/libs/workflow_template_values.py b/api/libs/workflow_template_values.py
new file mode 100644
index 00000000000000..86f37a571a517b
--- /dev/null
+++ b/api/libs/workflow_template_values.py
@@ -0,0 +1,52 @@
+from collections.abc import Iterator, Sequence
+from typing import Protocol
+
+from graphon.nodes.base.variable_template_parser import extract_selectors_from_template
+from graphon.variables.segments import Segment
+from graphon.variables.template_resolution import VARIABLE_PATTERN
+
+type TemplateValue = str | Sequence[str] | int | float | None
+
+
+class TemplateVariablePool(Protocol):
+    def get(self, selector: Sequence[str], /) -> Segment | None: ...
+
+
+def template_value_selectors(value: TemplateValue) -> Iterator[list[str]]:
+    """Extract workflow references from a scalar string or string sequence."""
+    values = [value] if isinstance(value, str) else value
+    if isinstance(values, Sequence):
+        for template in values:
+            for reference in extract_selectors_from_template(template):
+                yield list(reference.value_selector)
+
+
+def resolve_template_value(value: TemplateValue, variable_pool: TemplateVariablePool) -> TemplateValue:
+    """Resolve scalar values and string sequences against a workflow variable pool.
+
+    A whole scalar reference retains its string or numeric type;
+    interpolated text and elements of string lists remain strings. Missing
+    references fail explicitly rather than becoming literal selector text.
+    """
+
+    def get_segment(selector: str) -> Segment:
+        segment = variable_pool.get(selector.split("."))
+        if segment is None:
+            raise ValueError(f"Workflow variable {selector} is not available.")
+        return segment
+
+    def resolve_template(template: str) -> str | int | float | None:
+        if match := VARIABLE_PATTERN.fullmatch(template):
+            resolved = get_segment(match.group(1)).to_object()
+            if resolved is None or isinstance(resolved, str | float):
+                return resolved
+            if isinstance(resolved, int) and not isinstance(resolved, bool):
+                return resolved
+            return str(resolved)
+        return VARIABLE_PATTERN.sub(lambda match: get_segment(match.group(1)).text, template)
+
+    if isinstance(value, str):
+        return resolve_template(value)
+    if isinstance(value, Sequence):
+        return [str(resolve_template(item)) for item in value]
+    return value
diff --git a/api/tests/unit_tests/commands/test_fix_app_site_missing.py b/api/tests/unit_tests/commands/test_fix_app_site_missing.py
index c69f4eb6463746..8666429fc9786f 100644
--- a/api/tests/unit_tests/commands/test_fix_app_site_missing.py
+++ b/api/tests/unit_tests/commands/test_fix_app_site_missing.py
@@ -66,6 +66,13 @@ def _bind_command_database(
     return command_sessions, command_session
 
 
+def _run_fix_app_site_missing() -> None:
+    """Invoke the command callback through a narrowed, non-optional reference."""
+    callback = system_commands.fix_app_site_missing.callback
+    assert callback is not None
+    callback()
+
+
 def test_fix_app_site_missing_passes_loaded_session_to_signal(
     monkeypatch: pytest.MonkeyPatch,
     sqlite_engine: Engine,
@@ -89,7 +96,7 @@ def create_site(sender: App, *, account: Account, session: Session) -> None:
     monkeypatch.setattr(system_commands.app_was_created, "send", send)
 
     try:
-        system_commands.fix_app_site_missing.callback()
+        _run_fix_app_site_missing()
     finally:
         command_sessions.remove()
 
@@ -123,7 +130,7 @@ def fail_signal(sender: App, **_kwargs: object) -> None:
     monkeypatch.setattr(system_commands.app_was_created, "send", MagicMock(side_effect=fail_signal))
 
     try:
-        system_commands.fix_app_site_missing.callback()
+        _run_fix_app_site_missing()
     finally:
         command_sessions.remove()
 
diff --git a/api/tests/unit_tests/commands/test_reset_encrypt_key_pair.py b/api/tests/unit_tests/commands/test_reset_encrypt_key_pair.py
index bb3201bbdaafb5..24afa1cb44a16e 100644
--- a/api/tests/unit_tests/commands/test_reset_encrypt_key_pair.py
+++ b/api/tests/unit_tests/commands/test_reset_encrypt_key_pair.py
@@ -26,8 +26,10 @@
 
 
 def _invoke_reset() -> int:
+    callback = commands.reset_encrypt_key_pair.callback
+    assert callback is not None
     try:
-        commands.reset_encrypt_key_pair.callback()
+        callback()
     except SystemExit as e:
         return int(e.code or 0)
     return 0
@@ -87,7 +89,7 @@ def _bind_command_to_sqlite(monkeypatch: pytest.MonkeyPatch, session: Session) -
     monkeypatch.setattr(system_commands, "db", SimpleNamespace(engine=session.get_bind()))
 
 
-def test_reset_aborts_when_not_self_hosted(monkeypatch, capsys):
+def test_reset_aborts_when_not_self_hosted(monkeypatch: pytest.MonkeyPatch, capsys: pytest.CaptureFixture[str]) -> None:
     apply_config_overrides(monkeypatch, DEPLOYMENT_EDITION=DeploymentEdition.CLOUD)
 
     exit_code = _invoke_reset()
@@ -128,8 +130,12 @@ def test_reset_purges_provider_and_tool_tables_for_each_tenant(
     assert TENANT_ID in captured.out
 
     sqlite_session.expire_all()
-    assert sqlite_session.get(Tenant, TENANT_ID).encrypt_public_key == f"new-key-{TENANT_ID}"
-    assert sqlite_session.get(Tenant, OTHER_TENANT_ID).encrypt_public_key == f"new-key-{OTHER_TENANT_ID}"
+    tenant_after = sqlite_session.get(Tenant, TENANT_ID)
+    other_tenant_after = sqlite_session.get(Tenant, OTHER_TENANT_ID)
+    assert tenant_after is not None
+    assert other_tenant_after is not None
+    assert tenant_after.encrypt_public_key == f"new-key-{TENANT_ID}"
+    assert other_tenant_after.encrypt_public_key == f"new-key-{OTHER_TENANT_ID}"
     assert sqlite_session.scalars(select(Provider).where(Provider.provider_type == ProviderType.CUSTOM)).all() == []
     assert sqlite_session.scalars(select(ProviderModel)).all() == []
     assert sqlite_session.scalars(select(BuiltinToolProvider)).all() == []
diff --git a/api/tests/unit_tests/core/workflow/nodes/agent_v2/test_runtime_request_builder.py b/api/tests/unit_tests/core/workflow/nodes/agent_v2/test_runtime_request_builder.py
index 2678610cb80bf6..76162384b102c8 100644
--- a/api/tests/unit_tests/core/workflow/nodes/agent_v2/test_runtime_request_builder.py
+++ b/api/tests/unit_tests/core/workflow/nodes/agent_v2/test_runtime_request_builder.py
@@ -10,6 +10,7 @@
 from dify_agent.layers.prompt import Config as PromptConfig
 from dify_agent.protocol import DIFY_AGENT_HISTORY_LAYER_ID, DIFY_AGENT_MODEL_LAYER_ID, DIFY_AGENT_OUTPUT_LAYER_ID
 from dify_agent.protocol.snapshot import SessionSnapshot
+from sqlalchemy.orm import Session
 
 from clients.agent_backend import (
     DIFY_CONFIG_LAYER_ID,
@@ -27,9 +28,18 @@
     WorkflowAgentRuntimeRequestBuildError,
     build_shell_layer_config,
 )
+from core.workflow.workflow_entry import WorkflowEntry
 from graphon.file import File, FileTransferMethod, FileType
+from graphon.runtime.variable_pool import VariablePool
 from graphon.variables.segments import ArrayFileSegment, FileSegment, StringSegment
-from models.agent import Agent, AgentConfigSnapshot, WorkflowAgentNodeBinding
+from models.agent import (
+    Agent,
+    AgentConfigSnapshot,
+    AgentScope,
+    AgentSource,
+    WorkflowAgentBindingType,
+    WorkflowAgentNodeBinding,
+)
 from models.agent_config_entities import (
     AgentSoulConfig,
     AgentSoulModelConfig,
@@ -40,6 +50,7 @@
     DeclaredOutputType,
     WorkflowNodeJobConfig,
 )
+from models.workflow import Workflow
 from tests.unit_tests.config_override import apply_config_overrides
 
 
@@ -228,6 +239,192 @@ def _request_layers(result) -> dict[str, dict[str, object]]:
     return {layer["name"]: layer for layer in dumped["composition"]["layers"]}
 
 
+def _metadata_filter_context() -> WorkflowAgentRuntimeBuildContext:
+    context = _context()
+    soul = context.snapshot.config_snapshot_dict
+    soul["knowledge"] = {
+        "sets": [
+            {
+                "id": "exhibits",
+                "name": "Exhibits",
+                "datasets": [{"id": "dataset-1"}],
+                "query": {"mode": "generated_query"},
+                "retrieval": {"mode": "multiple", "top_k": 4},
+                "metadata_filtering": {
+                    "mode": "manual",
+                    "conditions": {
+                        "logical_operator": "and",
+                        "conditions": [
+                            {"name": name, "comparison_operator": "=", "value": "{{#start." + name + "#}}"}
+                            for name in ("guide_program_id", "guide_item_id")
+                        ],
+                    },
+                },
+            }
+        ],
+    }
+    context.snapshot.config_snapshot = soul
+    return context
+
+
+def test_workflow_metadata_filters_resolve_current_run_values_without_mutating_snapshot():
+    context = _metadata_filter_context()
+    saved_snapshot = context.snapshot.config_snapshot_dict
+    builder = WorkflowAgentRuntimeRequestBuilder()
+
+    for program_id, item_id in [(123, 456), (789, 0), ("00123", "00456")]:
+        pool = VariablePool()
+        pool.add(["start", "guide_program_id"], program_id)
+        pool.add(["start", "guide_item_id"], item_id)
+        pool.add(["sys", "query"], "Describe this exhibit")
+        result = builder.build(replace(context, variable_pool=pool))
+        layer = result.request.model_dump(mode="json")["composition"]["layers"]
+        knowledge = next(item for item in layer if item["name"] == "knowledge")
+        filtering = knowledge["config"]["sets"][0]["metadata_filtering"]
+
+        assert filtering["conditions"] == {
+            "logical_operator": "and",
+            "conditions": [
+                {"name": "guide_program_id", "comparison_operator": "=", "value": program_id},
+                {"name": "guide_item_id", "comparison_operator": "=", "value": item_id},
+            ],
+        }
+        assert context.snapshot.config_snapshot_dict == saved_snapshot
+
+
+def test_workflow_metadata_filter_rejects_missing_variable_before_starting_agent():
+    context = _metadata_filter_context()
+    with pytest.raises(WorkflowAgentRuntimeRequestBuildError, match="start.guide_program_id"):
+        WorkflowAgentRuntimeRequestBuilder().build(replace(context, variable_pool=VariablePool()))
+
+
+def test_single_step_loads_variables_referenced_only_by_knowledge_filters(
+    sqlite_session: Session, monkeypatch: pytest.MonkeyPatch
+):
+    apply_config_overrides(monkeypatch, AGENT_BACKEND_BASE_URL="http://agent-backend.invalid")
+    context = _metadata_filter_context()
+    context.binding.workflow_version = "draft"
+    context.binding.binding_type = WorkflowAgentBindingType.INLINE_AGENT
+    context.agent.scope = AgentScope.WORKFLOW_ONLY
+    context.agent.source = AgentSource.WORKFLOW
+    sqlite_session.add_all([context.agent, context.snapshot, context.binding])
+    sqlite_session.commit()
+    workflow = Workflow(
+        id=context.workflow_id,
+        tenant_id=context.dify_context.tenant_id,
+        app_id=context.dify_context.app_id,
+        graph=json.dumps(
+            {
+                "nodes": [
+                    {
+                        "id": context.node_id,
+                        "data": {"type": "agent", "version": "2", "agent_node_kind": "dify_agent", "title": "Agent"},
+                    }
+                ],
+                "edges": [],
+            }
+        ),
+    )
+    source_pool = VariablePool()
+    source_pool.add(["start", "guide_program_id"], "00123")
+    source_pool.add(["start", "guide_item_id"], 456)
+
+    class DraftVariableLoader:
+        def load_variables(self, selectors):
+            return [value for selector in selectors if (value := source_pool.get(selector)) is not None]
+
+    pool = VariablePool()
+    WorkflowEntry.single_step_run(
+        workflow=workflow,
+        node_id=context.node_id,
+        user_id=context.dify_context.user_id,
+        user_inputs={},
+        variable_pool=pool,
+        variable_loader=DraftVariableLoader(),
+    )
+    result = WorkflowAgentRuntimeRequestBuilder().build(replace(context, variable_pool=pool))
+    conditions = _request_layers(result)["knowledge"]["config"]["sets"][0]["metadata_filtering"]["conditions"][
+        "conditions"
+    ]
+    assert [condition["value"] for condition in conditions] == ["00123", 456]
+
+
+def test_single_step_legacy_agent_v2_does_not_resolve_new_agent_binding(monkeypatch):
+    legacy_node = SimpleNamespace(id="legacy-agent")
+    monkeypatch.setattr(WorkflowEntry, "_run_node_with_layers", lambda *_args, **_kwargs: iter(()))
+    monkeypatch.setattr(
+        "core.workflow.workflow_entry.DifyNodeFactory.from_graph_init_context",
+        lambda **_kwargs: SimpleNamespace(create_node=lambda _config: legacy_node),
+    )
+
+    def reject_new_agent_binding(*_args, **_kwargs):
+        raise AssertionError("Legacy Agent must not resolve an Agent v2 binding")
+
+    monkeypatch.setattr("core.workflow.workflow_entry.WorkflowAgentBindingResolver.resolve", reject_new_agent_binding)
+    workflow = Workflow(
+        id="workflow-id",
+        tenant_id="tenant-id",
+        app_id="app-id",
+        graph=json.dumps(
+            {
+                "nodes": [{"id": "legacy-agent", "data": {"type": "agent", "version": "2", "title": "Legacy Agent"}}],
+                "edges": [],
+            }
+        ),
+    )
+    node, _ = WorkflowEntry.single_step_run(
+        workflow=workflow,
+        node_id="legacy-agent",
+        user_id="user-id",
+        user_inputs={},
+        variable_pool=VariablePool(),
+    )
+    assert node is legacy_node
+
+
+@pytest.mark.parametrize(
+    ("value", "expected"),
+    [
+        ("program:{{#start.guide_program_id#}}/{{#start.guide_item_id#}}", "program:123/00456"),
+        (["{{#start.guide_program_id#}}", "{{#start.guide_item_id#}}", "constant"], ["123", "00456", "constant"]),
+        (0, 0),
+        (None, None),
+        ("", ""),
+    ],
+)
+def test_metadata_filters_resolve_templates_and_lists_preserving_constants(value, expected):
+    context = _metadata_filter_context()
+    soul = context.snapshot.config_snapshot_dict
+    condition = soul["knowledge"]["sets"][0]["metadata_filtering"]["conditions"]["conditions"][0]
+    condition.update(value=value, id="condition-1", metadata_id="program-metadata")
+    context.snapshot.config_snapshot = soul
+    pool = VariablePool()
+    pool.add(["start", "guide_program_id"], 123)
+    pool.add(["start", "guide_item_id"], "00456")
+    result = WorkflowAgentRuntimeRequestBuilder().build(replace(context, variable_pool=pool))
+    conditions = _request_layers(result)["knowledge"]["config"]["sets"][0]["metadata_filtering"]["conditions"][
+        "conditions"
+    ]
+    assert conditions[0] == {"name": "guide_program_id", "comparison_operator": "=", "value": expected}
+
+
+@pytest.mark.parametrize("mode", ["disabled", "automatic"])
+def test_inactive_manual_filters_do_not_require_workflow_variables(mode):
+    context = _metadata_filter_context()
+    soul = context.snapshot.config_snapshot_dict
+    soul["knowledge"]["sets"][0]["metadata_filtering"]["mode"] = mode
+    if mode == "automatic":
+        soul["knowledge"]["sets"][0]["metadata_filtering"]["model_config"] = {
+            "provider": "openai",
+            "name": "gpt-test",
+            "mode": "chat",
+            "completion_params": {},
+        }
+    context.snapshot.config_snapshot = soul
+    result = WorkflowAgentRuntimeRequestBuilder().build(replace(context, variable_pool=VariablePool()))
+    assert _request_layers(result)["knowledge"]["config"]["sets"][0]["metadata_filtering"]["mode"] == mode
+
+
 def _workflow_user_prompt(result) -> str:
     from clients.agent_backend import WORKFLOW_USER_PROMPT_LAYER_ID
 
diff --git a/api/tests/unit_tests/libs/test_workflow_template_values.py b/api/tests/unit_tests/libs/test_workflow_template_values.py
new file mode 100644
index 00000000000000..9ef7025b8bc0bf
--- /dev/null
+++ b/api/tests/unit_tests/libs/test_workflow_template_values.py
@@ -0,0 +1,27 @@
+import pytest
+
+from graphon.runtime.variable_pool import VariablePool
+from libs.workflow_template_values import resolve_template_value, template_value_selectors
+
+
+@pytest.mark.parametrize("value", [0, 1.5, None])
+def test_constant_filter_values_do_not_request_workflow_variables(value: int | float | None) -> None:
+    assert list(template_value_selectors(value)) == []
+
+
+@pytest.mark.parametrize(
+    ("value", "expected"),
+    [
+        (True, "True"),
+        (False, "False"),
+        (["I10", "I20"], "['I10', 'I20']"),
+        ({"guide_item_id": "I10"}, "{'guide_item_id': 'I10'}"),
+    ],
+)
+def test_boolean_and_collection_filter_references_resolve_to_strings(
+    value: bool | list[str] | dict[str, str], expected: str
+) -> None:
+    pool = VariablePool()
+    pool.add(["start", "filter_value"], value)
+
+    assert resolve_template_value("{{#start.filter_value#}}", pool) == expected
diff --git a/api/tests/unit_tests/pyrefly.toml b/api/tests/unit_tests/pyrefly.toml
index ac608fef71b6a4..62936434dd4f13 100644
--- a/api/tests/unit_tests/pyrefly.toml
+++ b/api/tests/unit_tests/pyrefly.toml
@@ -18,11 +18,9 @@ project-excludes = [
   "commands/test_clean_expired_messages.py",
   "commands/test_data_migration_commands.py",
   "commands/test_data_migration_wizard.py",
-  "commands/test_fix_app_site_missing.py",
   "commands/test_generate_swagger_markdown_docs.py",
   "commands/test_generate_swagger_specs.py",
   "commands/test_lint_response_contracts.py",
-  "commands/test_reset_encrypt_key_pair.py",
   "commands/test_upgrade_db.py",
   "configs/test_dify_config.py",
   "configs/test_env_consistency.py",
diff --git a/packages/dify-ui/docs/selection.md b/packages/dify-ui/docs/selection.md
index 167622ceadf36b..5fdf3989e6039b 100644
--- a/packages/dify-ui/docs/selection.md
+++ b/packages/dify-ui/docs/selection.md
@@ -29,6 +29,13 @@ Autocomplete, Combobox, and Select popups use Base UI's `--anchor-width` and `--
 variables to follow their trigger while clamping to the viewport. Do not replace that sizing with
 a fixed width or an unclamped minimum width.
 
+When a Combobox renders its input inside the popup, do not add a control that clears the typed
+query. The query is per-open state that Base UI resets: choosing an item clears it in `multiple`
+mode and closes the popup in single mode, and closing the popup (Escape, outside press) clears it.
+A clear control there adds a second tab stop to the popup's focus loop and a second x that means
+something other than `ComboboxClear`, which clears the selected value. Outside the popup, use
+`ComboboxClear` or `AutocompleteClear`.
+
 Use `Radio` for the default radio appearance. Use `RadioItem` when custom content itself is a
 radio item, and put `RadioControl` inside it for Dify UI's visual indicator. `RadioControl` is a
 visual part, not a standalone radio.
diff --git a/packages/dify-ui/src/autocomplete/index.stories.tsx b/packages/dify-ui/src/autocomplete/index.stories.tsx
index b47cd73a9cbc71..7aabbd20741597 100644
--- a/packages/dify-ui/src/autocomplete/index.stories.tsx
+++ b/packages/dify-ui/src/autocomplete/index.stories.tsx
@@ -300,7 +300,7 @@ function SuggestionItem({ item, dense }: { item: Suggestion; dense?: boolean })
         <span className={cn(item.icon, 'size-4 shrink-0 text-text-tertiary')} aria-hidden="true" />
       )}
       <div className="flex min-w-0 grow flex-col">
-        <AutocompleteItemText className="px-0">{item.label}</AutocompleteItemText>
+        <AutocompleteItemText>{item.label}</AutocompleteItemText>
         {!dense && item.description && (
           <span className="truncate system-xs-regular text-text-tertiary">{item.description}</span>
         )}
@@ -330,7 +330,7 @@ function VirtualizedSuggestionItem({
         <span className={cn(item.icon, 'size-4 shrink-0 text-text-tertiary')} aria-hidden="true" />
       )}
       <div className="flex min-w-0 grow flex-col">
-        <AutocompleteItemText className="px-0">{item.label}</AutocompleteItemText>
+        <AutocompleteItemText>{item.label}</AutocompleteItemText>
         {!dense && item.description && (
           <span className="truncate system-xs-regular text-text-tertiary">{item.description}</span>
         )}
@@ -347,7 +347,7 @@ function VirtualizedSuggestionItem({
 function TagSuggestionItem({ item }: { item: Suggestion }) {
   return (
     <AutocompleteItem value={item}>
-      <AutocompleteItemText className="px-0">{item.label}</AutocompleteItemText>
+      <AutocompleteItemText>{item.label}</AutocompleteItemText>
       {item.description && (
         <span className="ml-auto max-w-36 truncate system-xs-regular text-text-tertiary">
           {item.description}
@@ -367,7 +367,7 @@ function BasicTagAutocomplete({ size = 'medium' }: { size?: 'small' | 'medium' |
     >
       <AutocompleteInputGroup size={size}>
         <span
-          className="ml-2 i-ri-search-line size-4 shrink-0 text-text-tertiary"
+          className="i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
           aria-hidden="true"
         />
         <AutocompleteInput
@@ -417,11 +417,8 @@ function CommandPaletteList() {
     <AutocompleteList className="max-h-72 rounded-lg border border-divider-subtle bg-components-panel-bg p-1 shadow-xs">
       {groups.map((group, groupIndex) => (
         <AutocompleteGroup key={group.label} items={group.items}>
-          <AutocompleteGroupLabel
-            className={groupIndex > 0 ? 'mt-1 border-t border-divider-subtle pt-2' : undefined}
-          >
-            {group.label}
-          </AutocompleteGroupLabel>
+          {groupIndex > 0 && <AutocompleteSeparator />}
+          <AutocompleteGroupLabel>{group.label}</AutocompleteGroupLabel>
           <AutocompleteCollection<Suggestion>>
             {(item) => (
               <AutocompleteItem key={item.value} value={item} className="grid grid-cols-[1fr_auto]">
@@ -433,7 +430,7 @@ function CommandPaletteList() {
                     />
                   )}
                   <span className="min-w-0">
-                    <AutocompleteItemText className="block px-0">{item.label}</AutocompleteItemText>
+                    <AutocompleteItemText className="block">{item.label}</AutocompleteItemText>
                     <span className="block truncate system-xs-regular text-text-tertiary">
                       {item.description}
                     </span>
@@ -515,7 +512,7 @@ function AsyncSearchDemo() {
       >
         <AutocompleteInputGroup>
           <span
-            className="ml-2 i-ri-cloud-line size-4 shrink-0 text-text-tertiary"
+            className="i-ri-cloud-line size-4 shrink-0 text-components-input-text-placeholder"
             aria-hidden="true"
           />
           <AutocompleteInput
@@ -565,7 +562,7 @@ function VirtualizedSuggestionList({
   return (
     <div
       ref={scrollRef}
-      className="max-h-[min(22rem,var(--available-height))] overflow-x-hidden overflow-y-auto overscroll-contain outline-hidden"
+      className="max-h-[min(22rem,var(--available-height))] overflow-x-hidden overflow-y-auto overscroll-contain p-1 outline-hidden"
     >
       <AutocompleteList
         className="relative max-h-none overflow-visible p-0"
@@ -598,7 +595,7 @@ function VirtualizedStatus() {
   const filteredItems = useAutocompleteFilteredItems<Suggestion>()
 
   return (
-    <AutocompleteStatus className="border-b border-divider-subtle text-text-quaternary tabular-nums">
+    <AutocompleteStatus>
       {filteredItems.length} matching suggestions. Selecting one only replaces the input text.
     </AutocompleteStatus>
   )
@@ -647,7 +644,7 @@ function FuzzyMatchingDemo() {
       >
         <AutocompleteInputGroup>
           <span
-            className="ml-2 i-ri-sparkling-2-line size-4 shrink-0 text-text-tertiary"
+            className="i-ri-sparkling-2-line size-4 shrink-0 text-components-input-text-placeholder"
             aria-hidden="true"
           />
           <AutocompleteInput
@@ -670,7 +667,7 @@ function FuzzyMatchingDemo() {
                       />
                     )}
                     <div className="min-w-0 grow">
-                      <AutocompleteItemText className="block px-0">
+                      <AutocompleteItemText className="block">
                         <FuzzyHighlight text={item.label} query={value} />
                       </AutocompleteItemText>
                       <span className="block truncate system-xs-regular text-text-tertiary">
@@ -738,7 +735,7 @@ export const InlineAutocomplete: Story = {
       >
         <AutocompleteInputGroup>
           <span
-            className="ml-2 i-ri-text-snippet size-4 shrink-0 text-text-tertiary"
+            className="i-ri-text-snippet size-4 shrink-0 text-components-input-text-placeholder"
             aria-hidden="true"
           />
           <AutocompleteInput
@@ -774,7 +771,7 @@ export const GroupedSuggestions: Story = {
       >
         <AutocompleteInputGroup>
           <span
-            className="ml-2 i-ri-command-line size-4 shrink-0 text-text-tertiary"
+            className="i-ri-command-line size-4 shrink-0 text-components-input-text-placeholder"
             aria-hidden="true"
           />
           <AutocompleteInput
@@ -786,7 +783,7 @@ export const GroupedSuggestions: Story = {
         </AutocompleteInputGroup>
         <AutocompletePortal>
           <AutocompletePositioner>
-            <AutocompletePopup className="w-105">
+            <AutocompletePopup>
               <GroupedSuggestionList />
               <AutocompleteEmpty>No suggestion. Use the text as entered.</AutocompleteEmpty>
             </AutocompletePopup>
@@ -813,7 +810,7 @@ export const LimitResults: Story = {
       >
         <AutocompleteInputGroup>
           <span
-            className="ml-2 i-ri-tools-line size-4 shrink-0 text-text-tertiary"
+            className="i-ri-tools-line size-4 shrink-0 text-components-input-text-placeholder"
             aria-hidden="true"
           />
           <AutocompleteInput
@@ -825,8 +822,8 @@ export const LimitResults: Story = {
         </AutocompleteInputGroup>
         <AutocompletePortal>
           <AutocompletePositioner>
-            <AutocompletePopup className="w-105">
-              <AutocompleteStatus className="border-b border-divider-subtle">
+            <AutocompletePopup>
+              <AutocompleteStatus>
                 <LimitedStatus total={workflowSuggestions.length} />
               </AutocompleteStatus>
               <AutocompleteList<Suggestion>>
@@ -855,7 +852,7 @@ export const CommandPalette: Story = {
       >
         <AutocompleteInputGroup className="mb-2">
           <span
-            className="ml-2 i-ri-search-line size-4 shrink-0 text-text-tertiary"
+            className="i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
             aria-hidden="true"
           />
           <AutocompleteInput
@@ -888,7 +885,7 @@ function VirtualizedLongSuggestionsDemo() {
       >
         <AutocompleteInputGroup>
           <span
-            className="ml-2 i-ri-search-line size-4 shrink-0 text-text-tertiary"
+            className="i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
             aria-hidden="true"
           />
           <AutocompleteInput
@@ -900,7 +897,7 @@ function VirtualizedLongSuggestionsDemo() {
         </AutocompleteInputGroup>
         <AutocompletePortal>
           <AutocompletePositioner>
-            <AutocompletePopup className="w-110 p-1">
+            <AutocompletePopup>
               <VirtualizedStatus />
               <VirtualizedSuggestionList virtualizerRef={virtualizerRef} />
               <AutocompleteEmpty>No suggestion. Free-form text is still valid.</AutocompleteEmpty>
@@ -932,7 +929,7 @@ export const Empty: Story = {
       >
         <AutocompleteInputGroup>
           <span
-            className="ml-2 i-ri-search-line size-4 shrink-0 text-text-tertiary"
+            className="i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
             aria-hidden="true"
           />
           <AutocompleteInput
diff --git a/packages/dify-ui/src/autocomplete/index.tsx b/packages/dify-ui/src/autocomplete/index.tsx
index cc69d4b0fada0f..a7599c2e5e4b9d 100644
--- a/packages/dify-ui/src/autocomplete/index.tsx
+++ b/packages/dify-ui/src/autocomplete/index.tsx
@@ -79,19 +79,21 @@ const autocompleteListClassName = [
 ]
 
 const autocompleteItemClassName = [
-  'mx-1 flex min-h-8 cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 text-text-secondary outline-hidden',
+  'flex min-h-8 cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 text-text-secondary outline-hidden',
   'data-highlighted:bg-state-base-hover data-highlighted:text-text-primary',
   'data-disabled:cursor-not-allowed data-disabled:opacity-30',
 ]
 
+// Same layout as `ComboboxInputGroup`: the group owns the horizontal padding and the gap, the input
+// keeps a narrow inset, and the controls have no margins of their own.
 const autocompleteInputGroupVariants = cva(
-  [textControlGroupClassName, 'group/autocomplete items-center'],
+  [textControlGroupClassName, 'group/autocomplete items-center gap-0.5'],
   {
     variants: {
       size: {
-        small: 'h-6 rounded-md',
-        medium: 'h-8 rounded-lg',
-        large: 'h-9 rounded-[10px]',
+        small: 'min-h-6 rounded-md px-1',
+        medium: 'min-h-8 rounded-lg px-2',
+        large: 'min-h-9 rounded-[10px] px-3',
       },
     },
     defaultVariants: {
@@ -120,17 +122,18 @@ function AutocompleteInputGroup({
 
 const autocompleteInputVariants = cva(
   [
-    'w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent text-components-input-text-filled caret-primary-600 outline-hidden',
+    'w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent px-1 text-components-input-text-filled caret-primary-600 outline-hidden',
     'placeholder:text-components-input-text-placeholder',
     'disabled:cursor-not-allowed disabled:text-components-input-text-filled-disabled disabled:placeholder:text-components-input-text-disabled',
     'enabled:data-readonly:cursor-default',
   ],
   {
     variants: {
+      // Vertical padding fills the group's min height exactly, so the group never grows past it.
       size: {
-        small: 'px-2 py-1 system-xs-regular',
-        medium: 'px-3 py-1.75 system-sm-regular',
-        large: 'px-4 py-2 system-md-regular',
+        small: 'py-0.75 system-xs-regular',
+        medium: 'py-1.75 system-sm-regular',
+        large: 'py-1.75 system-md-regular',
       },
     },
     defaultVariants: {
@@ -172,9 +175,9 @@ const autocompleteControlVariants = cva(
   {
     variants: {
       size: {
-        small: 'me-1 size-4',
-        medium: 'me-1.5 size-5',
-        large: 'me-2 size-5',
+        small: 'size-4',
+        medium: 'size-5',
+        large: 'size-5',
       },
     },
     defaultVariants: {
@@ -327,17 +330,19 @@ function AutocompleteItem<Value = unknown>({ className, ...props }: Autocomplete
 type AutocompleteItemTextProps = React.ComponentProps<'span'>
 
 function AutocompleteItemText({ className, ...props }: AutocompleteItemTextProps) {
-  return (
-    <span className={cn('min-w-0 grow truncate px-1 system-sm-medium', className)} {...props} />
-  )
+  return <span className={cn('min-w-0 grow truncate system-sm-medium', className)} {...props} />
 }
 
 type AutocompleteGroupLabelProps = BaseAutocomplete.GroupLabel.Props
 
+// The list's own padding supplies the rest of the inset, so the label text lines up with the
+// item text.
 function AutocompleteGroupLabel({ className, ...props }: AutocompleteGroupLabelProps) {
   return (
     <BaseAutocomplete.GroupLabel
-      className={(state) => cn(floatingGroupLabelClassName, resolveClassName(className, state))}
+      className={(state) =>
+        cn(floatingGroupLabelClassName, 'px-2', resolveClassName(className, state))
+      }
       {...props}
     />
   )
@@ -376,7 +381,10 @@ function AutocompleteStatus({ className, ...props }: AutocompleteStatusProps) {
   return (
     <BaseAutocomplete.Status
       className={(state) =>
-        cn('px-3 py-2 system-sm-regular text-text-tertiary', resolveClassName(className, state))
+        cn(
+          'px-3 py-2 system-sm-regular text-text-tertiary empty:p-0',
+          resolveClassName(className, state),
+        )
       }
       {...props}
     />
diff --git a/packages/dify-ui/src/combobox/index.stories.tsx b/packages/dify-ui/src/combobox/index.stories.tsx
index 5e14fc361b261f..f05ed771607858 100644
--- a/packages/dify-ui/src/combobox/index.stories.tsx
+++ b/packages/dify-ui/src/combobox/index.stories.tsx
@@ -300,13 +300,8 @@ async function searchOptions(
 }
 
 const renderOptionItem = (option: Option) => (
-  <ComboboxItem
-    key={option.value}
-    value={option}
-    disabled={option.disabled}
-    className="h-auto min-h-8 py-1.5"
-  >
-    <ComboboxItemText className="flex items-center gap-2 px-0">
+  <ComboboxItem key={option.value} value={option} disabled={option.disabled}>
+    <ComboboxItemText className="flex items-center gap-2">
       {option.icon && (
         <span aria-hidden className={cn(option.icon, 'size-4 shrink-0 text-text-tertiary')} />
       )}
@@ -337,9 +332,8 @@ const renderVirtualizedOptionItem = (option: Option, index: number, itemCount: n
     aria-posinset={index + 1}
     aria-setsize={itemCount}
     disabled={option.disabled}
-    className="h-auto min-h-8 py-1.5"
   >
-    <ComboboxItemText className="flex items-center gap-2 px-0">
+    <ComboboxItemText className="flex items-center gap-2">
       {option.icon && (
         <span aria-hidden className={cn(option.icon, 'size-4 shrink-0 text-text-tertiary')} />
       )}
@@ -451,11 +445,7 @@ function VirtualizedModelList({
 function FilteredModelStatus() {
   const filteredItems = useComboboxFilteredItems<Option>()
 
-  return (
-    <ComboboxStatus className="border-y border-divider-subtle px-2 py-1 text-text-quaternary tabular-nums">
-      {filteredItems.length} matching models
-    </ComboboxStatus>
-  )
+  return <ComboboxStatus>{filteredItems.length} matching models</ComboboxStatus>
 }
 
 function VirtualizedLongListDemo() {
@@ -570,22 +560,19 @@ function AsyncDirectoryDemo() {
           })
         }}
       >
-        <ComboboxInputGroup className="h-8 min-h-8 px-2">
+        <ComboboxInputGroup>
           <span
             aria-hidden
-            className="mr-0.5 i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
-          />
-          <ComboboxInput
-            placeholder="Search owners…"
-            className="block h-4.5 grow px-1 py-0 system-sm-regular text-components-input-text-filled"
+            className="i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
           />
-          <ComboboxClear className="mr-0.5" />
-          <ComboboxInputTrigger className="mr-0" />
+          <ComboboxInput placeholder="Search owners…" />
+          <ComboboxClear />
+          <ComboboxInputTrigger />
         </ComboboxInputGroup>
         <ComboboxPortal>
           <ComboboxPositioner>
-            <ComboboxPopup className="w-105" aria-busy={isPending || undefined}>
-              <ComboboxStatus className="border-b border-divider-subtle">{status}</ComboboxStatus>
+            <ComboboxPopup aria-busy={isPending || undefined}>
+              <ComboboxStatus>{status}</ComboboxStatus>
               <ComboboxList<Option>>{renderOptionItem}</ComboboxList>
               <ComboboxEmpty>{emptyMessage}</ComboboxEmpty>
             </ComboboxPopup>
@@ -625,16 +612,12 @@ function InlinePopoverDemo() {
             onInputValueChange={setInputValue}
           >
             <div className="p-2 pb-1">
-              <ComboboxInputGroup className="h-8 min-h-8 px-2">
+              <ComboboxInputGroup>
                 <span
                   aria-hidden
-                  className="mr-0.5 i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
-                />
-                <ComboboxInput
-                  aria-label="Search reviewers"
-                  placeholder="Search reviewers…"
-                  className="block h-4.5 grow px-1 py-0 system-sm-regular text-components-input-text-filled"
+                  className="i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
                 />
+                <ComboboxInput aria-label="Search reviewers" placeholder="Search reviewers…" />
               </ComboboxInputGroup>
             </div>
             <ComboboxList<Option>>{renderOptionItem}</ComboboxList>
@@ -672,17 +655,14 @@ export const Default: Story = {
     <Field name="dataSource" className={fieldWidth}>
       <FieldLabel>Connect source</FieldLabel>
       <Combobox items={dataSourceOptions} defaultValue={defaultDataSource}>
-        <ComboboxInputGroup className="h-8 min-h-8 px-2">
+        <ComboboxInputGroup>
           <span
             aria-hidden
-            className="mr-0.5 i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
+            className="i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
           />
-          <ComboboxInput
-            placeholder="Search data sources…"
-            className="block h-4.5 grow px-1 py-0 system-sm-regular text-components-input-text-filled"
-          />
-          <ComboboxClear className="mr-0.5" />
-          <ComboboxInputTrigger className="mr-0" />
+          <ComboboxInput placeholder="Search data sources…" />
+          <ComboboxClear />
+          <ComboboxInputTrigger />
         </ComboboxInputGroup>
         <ComboboxPortal>
           <ComboboxPositioner>
@@ -716,7 +696,7 @@ export const TriggerWithPopupInput: Story = {
     <div className={fieldWidth}>
       <Combobox items={dataSourceOptions} defaultValue={defaultPopupDataSource}>
         <ComboboxLabel>Data source</ComboboxLabel>
-        <ComboboxTrigger className="group/trigger flex h-8 w-full min-w-0 items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-3 py-2 text-start system-sm-regular text-components-input-text-filled transition-colors hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt data-placeholder:text-components-input-text-placeholder data-popup-open:bg-state-base-hover-alt motion-reduce:transition-none">
+        <ComboboxTrigger className="group/trigger flex h-8 w-full min-w-0 items-center gap-0.5 rounded-lg bg-components-input-bg-normal py-2 pr-2 pl-3 text-start system-sm-regular text-components-input-text-filled transition-colors hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt data-placeholder:text-components-input-text-placeholder data-popup-open:bg-state-base-hover-alt motion-reduce:transition-none">
           <span className="min-w-0 grow truncate">
             <ComboboxValue placeholder="Choose source" />
           </span>
@@ -788,14 +768,14 @@ export const Sizes: Story = {
         <Field key={size} name={`provider-${size}`}>
           <FieldLabel>{`${size[0]!.toUpperCase()}${size.slice(1)}`}</FieldLabel>
           <Combobox items={sizeOptions} defaultValue={defaultProvider}>
-            <ComboboxInputGroup size={size} className="px-2">
+            <ComboboxInputGroup size={size}>
               <span
                 aria-hidden
-                className="mr-0.5 i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
+                className="i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
               />
-              <ComboboxInput size={size} placeholder="Search providers…" className="px-1" />
-              <ComboboxClear size={size} className="mr-0.5" />
-              <ComboboxInputTrigger size={size} className="mr-0" />
+              <ComboboxInput size={size} placeholder="Search providers…" />
+              <ComboboxClear size={size} />
+              <ComboboxInputTrigger size={size} />
             </ComboboxInputGroup>
             <ComboboxPortal>
               <ComboboxPositioner>
@@ -839,7 +819,7 @@ function MultipleChipsDemo() {
     <Field name="reviewers" className={fieldWidth}>
       <FieldLabel>Reviewers</FieldLabel>
       <Combobox items={reviewerOptions} multiple value={value} onValueChange={setValue}>
-        <ComboboxInputGroup className="h-auto min-h-8 items-start py-1">
+        <ComboboxInputGroup className="items-start py-1">
           <ComboboxValue<Option, true>>
             {(selectedValue) => {
               const selectedReviewers = selectedValue ?? []
@@ -859,7 +839,7 @@ function MultipleChipsDemo() {
                   ))}
                   <ComboboxInput
                     placeholder={selectedReviewers.length > 0 ? '' : 'Assign reviewers…'}
-                    className="min-w-24 px-1 py-0.5"
+                    className="min-w-24 py-0.5"
                   />
                 </ComboboxChips>
               )
@@ -922,16 +902,13 @@ export const Empty: Story = {
     <Field name="connector" className={fieldWidth}>
       <FieldLabel>Connector</FieldLabel>
       <Combobox items={emptyOptions} defaultInputValue="salesforce">
-        <ComboboxInputGroup className="h-8 min-h-8 px-2">
+        <ComboboxInputGroup>
           <span
             aria-hidden
-            className="mr-0.5 i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
-          />
-          <ComboboxInput
-            placeholder="Search connectors…"
-            className="block h-4.5 grow px-1 py-0 system-sm-regular text-components-input-text-filled"
+            className="i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
           />
-          <ComboboxInputTrigger className="mr-0" />
+          <ComboboxInput placeholder="Search connectors…" />
+          <ComboboxInputTrigger />
         </ComboboxInputGroup>
         <ComboboxPortal>
           <ComboboxPositioner>
@@ -972,12 +949,9 @@ export const ReadOnly: Story = {
     <Field name="readOnlySource" className={fieldWidth}>
       <FieldLabel>Read-only source</FieldLabel>
       <Combobox items={dataSourceOptions} defaultValue={readOnlyDataSource} readOnly>
-        <ComboboxInputGroup className="h-8 min-h-8 px-2">
-          <ComboboxInput
-            placeholder="Read-only data source…"
-            className="block h-4.5 grow px-1 py-0 system-sm-regular text-components-input-text-filled"
-          />
-          <ComboboxInputTrigger className="mr-0" />
+        <ComboboxInputGroup>
+          <ComboboxInput placeholder="Read-only data source…" />
+          <ComboboxInputTrigger />
         </ComboboxInputGroup>
         <ComboboxPortal>
           <ComboboxPositioner>
diff --git a/packages/dify-ui/src/combobox/index.tsx b/packages/dify-ui/src/combobox/index.tsx
index b151223a27e55d..1aa597825b624b 100644
--- a/packages/dify-ui/src/combobox/index.tsx
+++ b/packages/dify-ui/src/combobox/index.tsx
@@ -108,24 +108,24 @@ function ComboboxTrigger({ className, type = 'button', ...props }: ComboboxTrigg
   )
 }
 
+// The group owns the horizontal padding and the gap, so an icon, the input, and the controls sit in
+// it without margins of their own, like `DropdownMenuInputGroup`. The input keeps a narrow inset so
+// its text lands where a standalone `Input` of the same size puts it.
 const comboboxInputGroupVariants = cva(
   [
     textControlGroupClassName,
-    'group/combobox items-center',
-    // Inside the popup the group is the search box, laid out like `DropdownMenuInputGroup`: it
-    // lines up with the options on 4px gutters,
-    // hosts an inline icon, and takes over the horizontal padding from its input and controls.
+    'group/combobox items-center gap-0.5',
+    // Inside the popup the group is the search box and lines up with the options on 4px gutters.
     // The popup marks itself with a data attribute because a `role="dialog"` ancestor could also be
     // a Dialog hosting a field anchor.
-    'in-data-dify-combobox-popup:mx-1 in-data-dify-combobox-popup:mt-1 in-data-dify-combobox-popup:w-auto in-data-dify-combobox-popup:gap-0.5 in-data-dify-combobox-popup:px-2',
-    'in-data-dify-combobox-popup:[&>button]:me-0 in-data-dify-combobox-popup:[&>input]:px-1',
+    'in-data-dify-combobox-popup:mx-1 in-data-dify-combobox-popup:mt-1 in-data-dify-combobox-popup:w-auto',
   ],
   {
     variants: {
       size: {
-        small: 'min-h-6 rounded-md',
-        medium: 'min-h-8 rounded-lg',
-        large: 'min-h-9 rounded-[10px]',
+        small: 'min-h-6 rounded-md px-1',
+        medium: 'min-h-8 rounded-lg px-2',
+        large: 'min-h-9 rounded-[10px] px-3',
       },
     },
     defaultVariants: {
@@ -150,17 +150,18 @@ function ComboboxInputGroup({ className, size = 'medium', ...props }: ComboboxIn
 
 const comboboxInputVariants = cva(
   [
-    'w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent text-components-input-text-filled caret-primary-600 outline-hidden',
+    'w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent px-1 text-components-input-text-filled caret-primary-600 outline-hidden',
     'placeholder:text-components-input-text-placeholder',
     'disabled:cursor-not-allowed disabled:text-components-input-text-filled-disabled disabled:placeholder:text-components-input-text-disabled',
     'enabled:data-readonly:cursor-default',
   ],
   {
     variants: {
+      // Vertical padding fills the group's min height exactly, so the group never grows past it.
       size: {
-        small: 'px-2 py-1 system-xs-regular',
-        medium: 'px-3 py-1.75 system-sm-regular',
-        large: 'px-4 py-2 system-md-regular',
+        small: 'py-0.75 system-xs-regular',
+        medium: 'py-1.75 system-sm-regular',
+        large: 'py-1.75 system-md-regular',
       },
     },
     defaultVariants: {
@@ -200,9 +201,9 @@ const comboboxControlVariants = cva(
   {
     variants: {
       size: {
-        small: 'me-1 size-4',
-        medium: 'me-1.5 size-5',
-        large: 'me-2 size-5',
+        small: 'size-4',
+        medium: 'size-5',
+        large: 'size-5',
       },
     },
     defaultVariants: {
@@ -353,9 +354,7 @@ function ComboboxItem<Value = unknown>({ className, ...props }: ComboboxItemProp
 type ComboboxItemTextProps = React.ComponentProps<'span'>
 
 function ComboboxItemText({ className, ...props }: ComboboxItemTextProps) {
-  return (
-    <span className={cn('min-w-0 grow truncate px-1 system-sm-medium', className)} {...props} />
-  )
+  return <span className={cn('min-w-0 grow truncate system-sm-medium', className)} {...props} />
 }
 
 function ComboboxItemIndicator({ className, children, ...props }: ComboboxItemIndicatorProps) {
@@ -386,10 +385,14 @@ function ComboboxLabel({ className, ...props }: ComboboxLabelProps) {
 
 type ComboboxGroupLabelProps = BaseCombobox.GroupLabel.Props
 
+// The list's own padding supplies the rest of the inset, so the label text lines up with the
+// item text.
 function ComboboxGroupLabel({ className, ...props }: ComboboxGroupLabelProps) {
   return (
     <BaseCombobox.GroupLabel
-      className={(state) => cn(floatingGroupLabelClassName, resolveClassName(className, state))}
+      className={(state) =>
+        cn(floatingGroupLabelClassName, 'px-2', resolveClassName(className, state))
+      }
       {...props}
     />
   )
@@ -445,10 +448,7 @@ function ComboboxChips({ className, ...props }: ComboboxChipsProps) {
   return (
     <BaseCombobox.Chips
       className={(state) =>
-        cn(
-          'flex w-full min-w-0 flex-wrap items-center gap-1 px-1',
-          resolveClassName(className, state),
-        )
+        cn('flex w-full min-w-0 flex-wrap items-center gap-1', resolveClassName(className, state))
       }
       {...props}
     />
diff --git a/packages/dify-ui/src/context-menu/index.tsx b/packages/dify-ui/src/context-menu/index.tsx
index cd29f014192ccf..a5d119625ad8eb 100644
--- a/packages/dify-ui/src/context-menu/index.tsx
+++ b/packages/dify-ui/src/context-menu/index.tsx
@@ -259,7 +259,9 @@ type ContextMenuGroupLabelProps = BaseContextMenu.GroupLabel.Props
 function ContextMenuGroupLabel({ className, ...props }: ContextMenuGroupLabelProps) {
   return (
     <BaseContextMenu.GroupLabel
-      className={(state) => cn(floatingGroupLabelClassName, resolveClassName(className, state))}
+      className={(state) =>
+        cn(floatingGroupLabelClassName, 'px-3', resolveClassName(className, state))
+      }
       {...props}
     />
   )
diff --git a/packages/dify-ui/src/dropdown-menu/index.tsx b/packages/dify-ui/src/dropdown-menu/index.tsx
index 9438c24ea42c0b..bc7d62a8b03146 100644
--- a/packages/dify-ui/src/dropdown-menu/index.tsx
+++ b/packages/dify-ui/src/dropdown-menu/index.tsx
@@ -225,7 +225,9 @@ type DropdownMenuGroupLabelProps = Menu.GroupLabel.Props
 function DropdownMenuGroupLabel({ className, ...props }: DropdownMenuGroupLabelProps) {
   return (
     <Menu.GroupLabel
-      className={(state) => cn(floatingGroupLabelClassName, resolveClassName(className, state))}
+      className={(state) =>
+        cn(floatingGroupLabelClassName, 'px-3', resolveClassName(className, state))
+      }
       {...props}
     />
   )
diff --git a/packages/dify-ui/src/overlay-shared.ts b/packages/dify-ui/src/overlay-shared.ts
index ef6ebc169c7595..b06f99f498e65b 100644
--- a/packages/dify-ui/src/overlay-shared.ts
+++ b/packages/dify-ui/src/overlay-shared.ts
@@ -9,8 +9,10 @@ export const menuItemClassName =
 export const menuItemDestructiveClassName =
   'data-[variant=destructive]:text-text-destructive data-[variant=destructive]:data-highlighted:bg-state-destructive-hover'
 export const floatingItemIndicatorClassName = 'ms-auto flex shrink-0 items-center text-text-accent'
+// The horizontal inset belongs to the component: it depends on whether the label sits in the
+// popup (12px) or in a padded list (8px, with the list's padding supplying the rest).
 export const floatingGroupLabelClassName =
-  'px-3 pb-0.5 pt-1 text-text-tertiary system-xs-medium-uppercase'
+  'pb-0.5 pt-1 text-text-tertiary system-xs-medium-uppercase'
 export const floatingSeparatorClassName = 'my-1 h-px bg-divider-subtle'
 export const menuPopupBaseClassName =
   'max-h-(--available-height) overflow-y-auto overflow-x-hidden text-sm text-text-secondary outline-hidden focus:outline-hidden focus-visible:outline-hidden'
diff --git a/packages/dify-ui/src/select/index.tsx b/packages/dify-ui/src/select/index.tsx
index 6dbcf2146c79f9..998bda89b2275e 100644
--- a/packages/dify-ui/src/select/index.tsx
+++ b/packages/dify-ui/src/select/index.tsx
@@ -79,9 +79,11 @@ const selectTriggerVariants = cva(
   {
     variants: {
       size: {
-        small: 'h-6 gap-px rounded-md px-2 py-1 system-xs-regular',
-        medium: 'h-8 gap-0.5 rounded-lg px-3 py-2 system-sm-regular',
-        large: 'h-9 gap-0.5 rounded-[10px] px-4 py-2 system-md-regular',
+        // The text sits 4px further in than the icon: 8px around the control, 4px more for text.
+        // Physical padding, so callers' `px-*`/`pl-*`/`pr-*` overrides keep replacing it.
+        small: 'h-6 gap-px rounded-md py-1 pr-1 pl-2 system-xs-regular',
+        medium: 'h-8 gap-0.5 rounded-lg py-2 pr-2 pl-3 system-sm-regular',
+        large: 'h-9 gap-0.5 rounded-[10px] py-2 pr-3 pl-4 system-md-regular',
       },
     },
     defaultVariants: {
@@ -124,10 +126,14 @@ function SelectLabel({ className, ...props }: SelectLabelProps) {
 
 type SelectGroupLabelProps = BaseSelect.GroupLabel.Props
 
+// The list's own padding supplies the rest of the inset, so the label text lines up with the
+// item text.
 function SelectGroupLabel({ className, ...props }: SelectGroupLabelProps) {
   return (
     <BaseSelect.GroupLabel
-      className={(state) => cn(floatingGroupLabelClassName, resolveClassName(className, state))}
+      className={(state) =>
+        cn(floatingGroupLabelClassName, 'px-2', resolveClassName(className, state))
+      }
       {...props}
     />
   )
@@ -252,9 +258,7 @@ type SelectItemTextProps = BaseSelect.ItemText.Props
 function SelectItemText({ className, ...props }: SelectItemTextProps) {
   return (
     <BaseSelect.ItemText
-      className={(state) =>
-        cn('me-1 min-w-0 grow truncate px-1', resolveClassName(className, state))
-      }
+      className={(state) => cn('me-1 min-w-0 grow truncate', resolveClassName(className, state))}
       {...props}
     />
   )
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
index 6805ea62252559..e1be177fe0442f 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
@@ -93,7 +93,7 @@ const RangeSelector: FC<Props> = ({ isCustomRange, ranges, onSelect }) => {
                   value={item.value}
                   className="relative h-8 py-0 pr-2 pl-7 system-md-regular"
                 >
-                  <SelectItemText className="px-0">{item.name}</SelectItemText>
+                  <SelectItemText>{item.name}</SelectItemText>
                   <SelectItemIndicator className="absolute top-2 left-2 ml-0" />
                 </SelectItem>
               ))}
diff --git a/web/app/components/app/configuration/config-var/config-modal/type-select.tsx b/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
index c1a7b6aa8f971a..9012c4eef79e94 100644
--- a/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
@@ -103,7 +103,7 @@ const TypeSelector: FC<Props> = ({
                   className="h-9 justify-between px-2 text-text-secondary"
                   title={item.name}
                 >
-                  <SelectItemText className="flex items-center space-x-2 px-0">
+                  <SelectItemText className="flex items-center space-x-2">
                     <InputVarTypeIcon
                       type={item.value}
                       className="size-4 shrink-0 text-text-secondary"
diff --git a/web/app/components/app/deploy/shared/deployment-configuration/credential-field.tsx b/web/app/components/app/deploy/shared/deployment-configuration/credential-field.tsx
index 292b80ef096792..b6249caedcf3af 100644
--- a/web/app/components/app/deploy/shared/deployment-configuration/credential-field.tsx
+++ b/web/app/components/app/deploy/shared/deployment-configuration/credential-field.tsx
@@ -71,7 +71,7 @@ export function CredentialField({
           if (nextValue) onChange(nextValue)
         }}
       >
-        <SelectTrigger aria-label={name} className="px-2">
+        <SelectTrigger aria-label={name} className="pl-2">
           <span className="flex min-w-0 items-center gap-1.5">
             <StatusDot />
             <span className="truncate">
@@ -109,7 +109,7 @@ export function CredentialField({
                   <span className="flex size-2 shrink-0 items-center justify-center">
                     <StatusDot size="small" />
                   </span>
-                  <SelectItemText className="me-0 px-0 system-md-regular">
+                  <SelectItemText className="me-0 system-md-regular">
                     {candidate.display_name || candidate.credential_id}
                   </SelectItemText>
                 </SelectItem>
diff --git a/web/app/components/apps/__tests__/creators-filter.spec.tsx b/web/app/components/apps/__tests__/creators-filter.spec.tsx
index 98849d51f5f08d..2b16f309643f6e 100644
--- a/web/app/components/apps/__tests__/creators-filter.spec.tsx
+++ b/web/app/components/apps/__tests__/creators-filter.spec.tsx
@@ -52,7 +52,7 @@ describe('CreatorsFilter', () => {
     expect(screen.queryByText('Pending User')).not.toBeInTheDocument()
   })
 
-  it('should search creators, clear keywords, and select a creator', async () => {
+  it('should search creators, clear the query, and select a creator', async () => {
     const user = userEvent.setup()
     render(<CreatorsFilter value={[]} onChange={mockOnChange} />)
 
@@ -69,7 +69,7 @@ describe('CreatorsFilter', () => {
       expect(searchInput).toHaveAttribute('aria-activedescendant', zoeOption.id)
     })
 
-    await user.click(screen.getByRole('button', { name: 'common.operation.clear' }))
+    await user.clear(searchInput)
 
     expect(searchInput).toHaveValue('')
     expect(searchInput).toHaveFocus()
@@ -79,23 +79,6 @@ describe('CreatorsFilter', () => {
     expect(mockOnChange).toHaveBeenCalledWith(['member-3'])
   })
 
-  it('should clear only the search query from the input action', async () => {
-    const user = userEvent.setup()
-    render(<CreatorsFilter value={['member-2']} onChange={mockOnChange} />)
-
-    await user.click(screen.getByRole('combobox', { name: 'app.studio.filters.creators' }))
-    const searchInput = screen.getByRole('combobox', {
-      name: 'app.studio.filters.searchCreators',
-    })
-    await user.type(searchInput, 'zo')
-    await user.click(screen.getByRole('button', { name: 'common.operation.clear' }))
-
-    expect(searchInput).toHaveValue('')
-    expect(searchInput).toHaveFocus()
-    expect(screen.getByRole('option', { name: /Alice/ })).toHaveAttribute('aria-selected', 'true')
-    expect(mockOnChange).not.toHaveBeenCalled()
-  })
-
   it('should return focus to the trigger after clearing creators from the filter chip', async () => {
     const user = userEvent.setup()
     render(<StatefulCreatorsFilter initialValue={['member-2', 'member-3']} />)
diff --git a/web/app/components/apps/creators-filter.tsx b/web/app/components/apps/creators-filter.tsx
index f4da792a6ebdb4..22c2652ce5f8f6 100644
--- a/web/app/components/apps/creators-filter.tsx
+++ b/web/app/components/apps/creators-filter.tsx
@@ -20,7 +20,7 @@ import {
 } from '@langgenius/dify-ui/combobox'
 import { IconButton } from '@langgenius/dify-ui/icon-button'
 import { useSuspenseQuery } from '@tanstack/react-query'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useCallback, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { userProfileQueryOptions } from '@/features/account-profile/client'
 import { useMembers } from '@/service/use-common'
@@ -47,9 +47,7 @@ const CreatorsFilter = ({ value, onChange }: CreatorsFilterProps) => {
     select: (data) => data.profile.id,
   })
   const { data: membersData } = useMembers()
-  const [keywords, setKeywords] = useState('')
   const triggerRef = useRef<HTMLButtonElement>(null)
-  const searchInputRef = useRef<HTMLInputElement>(null)
 
   const creatorOptions = useMemo<CreatorOption[]>(() => {
     const members = membersData?.accounts ?? []
@@ -87,15 +85,8 @@ const CreatorsFilter = ({ value, onChange }: CreatorsFilterProps) => {
       .filter((creator): creator is CreatorOption => Boolean(creator))
   }, [creatorMap, value])
 
-  // Clears the query only. `ComboboxClear` would clear the selected creators in `multiple` mode.
-  const clearCreatorQuery = useCallback(() => {
-    setKeywords('')
-    searchInputRef.current?.focus()
-  }, [])
-
   const handleSelectionClear = useCallback(() => {
     onChange([])
-    setKeywords('')
     triggerRef.current?.focus()
   }, [onChange])
 
@@ -117,8 +108,6 @@ const CreatorsFilter = ({ value, onChange }: CreatorsFilterProps) => {
       autoHighlight
       items={creatorItems}
       value={value}
-      inputValue={keywords}
-      onInputValueChange={setKeywords}
       onValueChange={(nextValue) => onChange(nextValue)}
     >
       <div className="relative inline-flex h-8 items-stretch">
@@ -180,22 +169,11 @@ const CreatorsFilter = ({ value, onChange }: CreatorsFilterProps) => {
                 className="i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
               />
               <ComboboxInput
-                ref={searchInputRef}
                 name="creator-query"
                 enterKeyHint="search"
                 aria-label={t(($) => $['studio.filters.searchCreators'], { ns: 'app' })}
                 placeholder={t(($) => $['studio.filters.searchCreators'], { ns: 'app' })}
               />
-              {!!keywords && (
-                <IconButton
-                  size="sm"
-                  aria-label={t(($) => $['operation.clear'], { ns: 'common' })}
-                  className="shrink-0 text-text-quaternary hover:bg-transparent hover:text-text-tertiary focus-visible:bg-components-input-bg-hover focus-visible:ring-inset"
-                  onClick={clearCreatorQuery}
-                >
-                  <span aria-hidden className="i-ri-close-circle-fill size-4" />
-                </IconButton>
-              )}
             </ComboboxInputGroup>
             <ComboboxEmpty>{t(($) => $.noData, { ns: 'common' })}</ComboboxEmpty>
             <ComboboxList<CreatorOption> className="max-h-60">
diff --git a/web/app/components/base/form/components/base/base-field.tsx b/web/app/components/base/form/components/base/base-field.tsx
index 0a3ce35a610de5..103829605cddcc 100644
--- a/web/app/components/base/form/components/base/base-field.tsx
+++ b/web/app/components/base/form/components/base/base-field.tsx
@@ -396,7 +396,7 @@ const BaseField = ({
           )}
           {isSelect && (
             <>
-              <SelectTrigger id={controlId} {...controlProps} className="px-2">
+              <SelectTrigger id={controlId} {...controlProps}>
                 {multiple ? (
                   <SelectValue<string, true> placeholder={selectPlaceholder}>
                     {(selectedValue) =>
diff --git a/web/app/components/base/form/components/field/input-type-select/index.tsx b/web/app/components/base/form/components/field/input-type-select/index.tsx
index 08cff7ffcc908f..896b5fd33b4380 100644
--- a/web/app/components/base/form/components/field/input-type-select/index.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/index.tsx
@@ -42,7 +42,7 @@ const InputTypeSelectField = ({
         disabled={disabled}
         onValueChange={handleInputTypeChange}
       >
-        <SelectTrigger id={field.name} className="gap-x-0.5 px-2">
+        <SelectTrigger id={field.name} className="gap-x-0.5 pl-2">
           <Trigger option={selected} />
         </SelectTrigger>
         <SelectContent className="w-92 bg-components-panel-bg-blur shadow-shadow-shadow-5">
diff --git a/web/app/components/base/form/components/field/select.tsx b/web/app/components/base/form/components/field/select.tsx
index 01e3fa257218c4..76acee69a41a8e 100644
--- a/web/app/components/base/form/components/field/select.tsx
+++ b/web/app/components/base/form/components/field/select.tsx
@@ -70,7 +70,7 @@ const SelectField = ({
           onChange?.(next)
         }}
       >
-        <SelectTrigger id={field.name} className="px-2">
+        <SelectTrigger id={field.name}>
           <SelectValue<string> placeholder={placeholderText}>
             {(nextValue) => getDisplayLabel(nextValue, options, placeholderText)}
           </SelectValue>
diff --git a/web/app/components/base/icon-picker/emoji-picker.tsx b/web/app/components/base/icon-picker/emoji-picker.tsx
index ef18caef144ccf..dd1393ed942e87 100644
--- a/web/app/components/base/icon-picker/emoji-picker.tsx
+++ b/web/app/components/base/icon-picker/emoji-picker.tsx
@@ -199,14 +199,13 @@ export const EmojiPicker = memo(({ value, onValueChange, className, ref }: Emoji
         <div className="shrink-0 border-b border-divider-subtle px-3 pb-2">
           <AutocompleteInputGroup>
             <span
-              className="ms-2 i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
+              className="i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
               aria-hidden="true"
             />
             <AutocompleteInput
               ref={ref}
               aria-label={t(($) => $['iconPicker.search'], { ns: 'app' })}
               placeholder={t(($) => $['iconPicker.search'], { ns: 'app' })}
-              className="ps-1.5"
             />
             <AutocompleteClear aria-label={t(($) => $['iconPicker.clearSearch'], { ns: 'app' })} />
           </AutocompleteInputGroup>
diff --git a/web/app/components/datasets/common/document-picker/document-list.tsx b/web/app/components/datasets/common/document-picker/document-list.tsx
index 184272e7ce78f4..0dca1538f50f77 100644
--- a/web/app/components/datasets/common/document-picker/document-list.tsx
+++ b/web/app/components/datasets/common/document-picker/document-list.tsx
@@ -27,10 +27,10 @@ export default function DocumentList({ className }: Props) {
           <ComboboxItem
             key={item.id}
             value={item}
-            className="mx-0 flex h-8 grid-cols-none items-center gap-2 rounded-lg px-3 py-0"
+            className="flex h-8 grid-cols-none items-center gap-2 rounded-lg px-3 py-0"
           >
             <FileIcon name={item.name} extension={extension} size="lg" />
-            <ComboboxItemText className="min-w-0 px-0 system-sm-regular text-text-secondary">
+            <ComboboxItemText className="system-sm-regular text-text-secondary">
               {item.name}
             </ComboboxItemText>
           </ComboboxItem>
diff --git a/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-picker.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-picker.spec.tsx
index bc7f94d94a8578..b8cc289f1a2985 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-picker.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-picker.spec.tsx
@@ -106,27 +106,6 @@ describe('DatasetMetadataPicker', () => {
       expect(await screen.findByRole('status')).toHaveTextContent('common.noData')
     })
 
-    it('should clear only the search query and keep focus in the input', async () => {
-      const user = userEvent.setup()
-      const onSelectMetadata = vi.fn()
-      renderDatasetMetadataPicker({ onSelectMetadata })
-
-      await user.click(screen.getByRole('button', { name: 'dataset.metadata.addMetadata' }))
-      const searchInput = screen.getByRole('combobox', {
-        name: 'dataset.metadata.selectMetadata.search',
-      })
-      await user.type(searchInput, 'two')
-      const clearButton = screen.getByRole('button', { name: 'common.operation.clear' })
-      clearButton.focus()
-      await user.keyboard('{Enter}')
-
-      expect(searchInput).toHaveValue('')
-      expect(searchInput).toHaveFocus()
-      expect(onSelectMetadata).not.toHaveBeenCalled()
-      expect(screen.getByRole('option', { name: /field_one/ })).toBeInTheDocument()
-      expect(screen.getByRole('option', { name: /field_three/ })).toBeInTheDocument()
-    })
-
     it('should reset the search query after the picker finishes closing', async () => {
       const user = userEvent.setup()
       renderDatasetMetadataPicker()
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-picker.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-picker.tsx
index 2d86515a479055..f95662e65850c5 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-picker.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-picker.tsx
@@ -14,9 +14,8 @@ import {
   ComboboxList,
   ComboboxSeparator,
 } from '@langgenius/dify-ui/combobox'
-import { IconButton } from '@langgenius/dify-ui/icon-button'
 import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from '@langgenius/dify-ui/popover'
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDatasetMetaData } from '@/service/knowledge/use-metadata'
 import { getIconClassName } from '../utils/get-icon'
@@ -63,11 +62,9 @@ export function DatasetMetadataPicker({
   const metadataItems = datasetMetaData?.doc_metadata ?? []
   const [open, setOpen] = useState(false)
   const [view, setView] = useState<PickerView>(PickerView.select)
-  const [query, setQuery] = useState('')
 
   const resetPickerState = () => {
     setView(PickerView.select)
-    setQuery('')
   }
 
   const handleOpenChangeComplete = (nextOpen: boolean) => {
@@ -76,7 +73,6 @@ export function DatasetMetadataPicker({
 
   const handleStartMetadataCreation = () => {
     setView(PickerView.create)
-    setQuery('')
   }
 
   const handleSelectMetadata = (metadata: MetadataItem | null) => {
@@ -136,15 +132,11 @@ export function DatasetMetadataPicker({
             onOpenChange={setOpen}
             value={null}
             items={metadataItems}
-            inputValue={query}
-            onInputValueChange={setQuery}
             onValueChange={handleSelectMetadata}
             itemToStringLabel={getMetadataLabel}
             filter={metadataFilter}
           >
             <MetadataPickerSelectPanel
-              query={query}
-              onClearQuery={() => setQuery('')}
               onStartMetadataCreation={handleStartMetadataCreation}
               onOpenMetadataManagement={handleOpenMetadataManagement}
             />
@@ -163,49 +155,26 @@ export function DatasetMetadataPicker({
 }
 
 function MetadataPickerSelectPanel({
-  query,
-  onClearQuery,
   onStartMetadataCreation,
   onOpenMetadataManagement,
 }: {
-  query: string
-  onClearQuery: () => void
   onStartMetadataCreation: () => void
   onOpenMetadataManagement: () => void
 }) {
   const { t } = useTranslation(['common', 'dataset'])
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  const handleClearQuery = () => {
-    onClearQuery()
-    inputRef.current?.focus()
-  }
 
   return (
     <>
       <div className="p-2 pb-1">
         <ComboboxInputGroup>
           <span
-            className="ml-2 i-ri-search-line size-4 shrink-0 text-text-tertiary"
+            className="i-ri-search-line size-4 shrink-0 text-text-tertiary"
             aria-hidden="true"
           />
           <ComboboxInput
-            ref={inputRef}
             aria-label={t(($) => $[`${i18nPrefix}.search`], { ns: 'dataset' })}
             placeholder={t(($) => $[`${i18nPrefix}.search`], { ns: 'dataset' })}
-            className="pl-2"
           />
-          {query && (
-            <IconButton
-              size="sm"
-              aria-label={t(($) => $['operation.clear'], { ns: 'common' })}
-              className="mr-1.5 shrink-0 hover:bg-components-input-bg-hover focus-visible:bg-components-input-bg-hover"
-              onClick={handleClearQuery}
-              onMouseDown={(event) => event.preventDefault()}
-            >
-              <span className="i-ri-close-line size-4" aria-hidden="true" />
-            </IconButton>
-          )}
         </ComboboxInputGroup>
       </div>
       <ComboboxList<MetadataItem>>
@@ -226,7 +195,7 @@ function MetadataOption({ metadata }: { metadata: MetadataItem }) {
 
   return (
     <ComboboxItem value={metadata}>
-      <ComboboxItemText className="flex items-center gap-1.5 px-0">
+      <ComboboxItemText className="flex items-center gap-1.5">
         <span className={cn(iconClassName, 'size-3.5 shrink-0')} aria-hidden="true" />
         <span className="min-w-0 grow truncate">{metadata.name}</span>
       </ComboboxItemText>
diff --git a/web/app/components/plugins/marketplace/home/__tests__/embedded-marketplace-search.spec.tsx b/web/app/components/plugins/marketplace/home/__tests__/embedded-marketplace-search.spec.tsx
index dffc78ceb6a99e..f13b6364b7e9b2 100644
--- a/web/app/components/plugins/marketplace/home/__tests__/embedded-marketplace-search.spec.tsx
+++ b/web/app/components/plugins/marketplace/home/__tests__/embedded-marketplace-search.spec.tsx
@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { screen, waitFor, within } from '@testing-library/react'
+import { fireEvent, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vite-plus/test'
 import { renderWithNuqs } from '@/test/nuqs-testing'
@@ -25,13 +25,12 @@ const { debounceState, mockPluginSearch, mockTemplateSearch, mockCheckInstalled
   }),
 )
 
-vi.mock('ahooks', async (importOriginal) => {
-  const original = await importOriginal<typeof import('ahooks')>()
+vi.mock('foxact/use-debounced-value', async (importOriginal) => {
+  const original = await importOriginal<typeof import('foxact/use-debounced-value')>()
 
   return {
-    ...original,
-    useDebounce: <T,>(value: T, options?: { wait?: number }) =>
-      debounceState.useRealDebounce ? original.useDebounce(value, options) : value,
+    useDebouncedValue: (value: string, wait: number) =>
+      debounceState.useRealDebounce ? original.useDebouncedValue(value, wait) : value,
   }
 })
 
@@ -247,8 +246,11 @@ describe('EmbeddedMarketplaceSearch', () => {
     const { onUrlUpdate } = renderSearch()
 
     await user.type(screen.getByRole('combobox'), 'google')
-    await user.hover(await screen.findByRole('option', { name: /Google Search/ }))
-    await user.keyboard('{Enter}')
+    await screen.findByRole('option', { name: /Google Search/ })
+    // Nothing is highlighted, so Enter is left to the browser's implicit form submission;
+    // happy-dom has none, so the form is submitted here.
+    expect(fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter' })).toBe(true)
+    fireEvent.submit(screen.getByRole('combobox').closest('form')!)
 
     await waitFor(() => {
       expect(onUrlUpdate.mock.calls.at(-1)?.[0].searchParams.get('q')).toBe('google')
diff --git a/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.browser.spec.tsx b/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.browser.spec.tsx
index 6b27a9ca91da11..9e367eef8093ae 100644
--- a/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.browser.spec.tsx
+++ b/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.browser.spec.tsx
@@ -2,27 +2,25 @@ import type { ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useAtomValue } from 'jotai'
 import { useState } from 'react'
-import { page } from 'vite-plus/test/browser'
+import { page, userEvent } from 'vite-plus/test/browser'
 import { render } from 'vitest-browser-react'
 import { MARKETPLACE_CONTAINER_ID } from '../../constants'
 import HomeCatalogNavigation from '../home-catalog-navigation'
 import HomeSearch from '../home-search'
 import { homeCatalogPinnedAtom } from '../home-sticky-state'
 import { HomeStickyStateProvider } from '../home-sticky-state-provider'
-import { MarketplaceSearchAutocomplete } from '../marketplace-search-autocomplete'
+import {
+  MarketplaceSearchAutocomplete,
+  MarketplaceSearchForm,
+} from '../marketplace-search-autocomplete'
 
 const { mockTemplateSearch } = vi.hoisted(() => ({
   mockTemplateSearch: vi.fn(),
 }))
 
-vi.mock('ahooks', async (importOriginal) => {
-  const original = await importOriginal<typeof import('ahooks')>()
-
-  return {
-    ...original,
-    useDebounce: <T,>(value: T) => value,
-  }
-})
+vi.mock('foxact/use-debounced-value', () => ({
+  useDebouncedValue: <T,>(value: T) => value,
+}))
 
 vi.mock('react-i18next', async (importOriginal) => {
   const original = await importOriginal<typeof import('react-i18next')>()
@@ -160,8 +158,43 @@ describe('Marketplace search autocomplete layout', () => {
     await expect.element(screen.getByText('No templates found')).toBeVisible()
 
     expect(scrollContainer.scrollTop).toBe(scrollTopBefore)
-    await expect.element(screen.getByRole('tablist', { name: 'Header catalog tabs' })).toBeVisible()
+    // Base UI hides the page outside the open suggestions from assistive technology, so the
+    // pinned tabs are only reachable when hidden elements are included.
+    await expect
+      .element(screen.getByRole('tablist', { name: 'Header catalog tabs', includeHidden: true }))
+      .toBeVisible()
     expect(input.element().getBoundingClientRect().top).toBeCloseTo(inputTopBefore)
     expect(catalogNavigation.getBoundingClientRect().top).toBeCloseTo(navigationTopBefore)
   })
+
+  // The search owns no Enter handler: the browser's implicit submission submits the route form
+  // when no suggestion is highlighted. Only a real browser performs that submission.
+  it('submits the route search form on Enter when no suggestion is highlighted', async () => {
+    const handleSubmit = vi.fn((event: Event) => {
+      event.preventDefault()
+    })
+
+    const screen = await render(
+      <Wrapper>
+        <MarketplaceSearchForm
+          action="/search/templates"
+          locale="en-US"
+          placeholder="Search templates"
+          query=""
+          scope="templates"
+        />
+      </Wrapper>,
+    )
+
+    screen.container.querySelector('form')!.addEventListener('submit', handleSubmit)
+
+    const input = screen.getByRole('combobox', { name: 'Search templates' })
+    await input.fill('open')
+    await expect.element(screen.getByText('No templates found')).toBeVisible()
+
+    await userEvent.keyboard('{Enter}')
+
+    expect(handleSubmit).toHaveBeenCalledOnce()
+    await expect.element(input).toHaveValue('open')
+  })
 })
diff --git a/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.spec.tsx b/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.spec.tsx
index 64fa3078f7d6af..c7161d3934521f 100644
--- a/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.spec.tsx
+++ b/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.spec.tsx
@@ -19,13 +19,12 @@ const { debounceState, mockAssign, mockPluginSearch, mockTemplateSearch } = vi.h
   mockTemplateSearch: vi.fn(),
 }))
 
-vi.mock('ahooks', async (importOriginal) => {
-  const original = await importOriginal<typeof import('ahooks')>()
+vi.mock('foxact/use-debounced-value', async (importOriginal) => {
+  const original = await importOriginal<typeof import('foxact/use-debounced-value')>()
 
   return {
-    ...original,
-    useDebounce: <T,>(value: T, options?: { wait?: number }) =>
-      debounceState.useRealDebounce ? original.useDebounce(value, options) : value,
+    useDebouncedValue: (value: string, wait: number) =>
+      debounceState.useRealDebounce ? original.useDebouncedValue(value, wait) : value,
   }
 })
 
@@ -265,7 +264,7 @@ describe('MarketplaceSearchAutocomplete', () => {
     expect(handleSubmit).not.toHaveBeenCalled()
   })
 
-  it('submits the typed query on Enter without selecting a hovered suggestion', async () => {
+  it('leaves Enter to the form submission when no suggestion is highlighted', async () => {
     mockTemplateSearch.mockResolvedValue({
       data: {
         templates: [
@@ -318,13 +317,25 @@ describe('MarketplaceSearchAutocomplete', () => {
     container.querySelector('form')?.addEventListener('submit', handleSubmit)
 
     await user.type(screen.getByRole('combobox'), 'search')
-    await user.hover(await screen.findByRole('option', { name: /Legal Research Agent/ }))
-    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter', isComposing: true })
+    await screen.findByRole('option', { name: /Legal Research Agent/ })
+
+    // An IME confirmation keeps the suggestions open and submits nothing.
+    fireEvent.keyDown(screen.getByRole('combobox'), {
+      key: 'Enter',
+      keyCode: 229,
+      which: 229,
+      isComposing: true,
+    })
     expect(handleSubmit).not.toHaveBeenCalled()
-    await user.keyboard('{Enter}')
+    expect(screen.getByRole('option', { name: /Legal Research Agent/ })).toBeInTheDocument()
 
-    expect(handleSubmit).toHaveBeenCalledOnce()
+    // Nothing is highlighted, so Enter is not consumed and the browser's implicit form submission
+    // runs; happy-dom has none, so the browser spec covers the submit.
+    expect(fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter' })).toBe(true)
     expect(screen.getByRole('combobox')).toHaveValue('search')
+    await waitFor(() => {
+      expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+    })
   })
 
   it('opens plugin detail when a suggestion is chosen', async () => {
@@ -523,7 +534,7 @@ describe('MarketplaceSearchAutocomplete', () => {
     expect(screen.getByRole('combobox')).toHaveValue('')
   })
 
-  it('does not offer the previous term suggestions while a new search is pending', async () => {
+  it('keeps the previous suggestions listed under a loading status while a new search is pending', async () => {
     const googleResponse = {
       data: {
         plugins: [
@@ -541,8 +552,7 @@ describe('MarketplaceSearchAutocomplete', () => {
     }
     mockPluginSearch.mockImplementation((input: { body: { query: string } }) => {
       if (input.body.query === 'google') return Promise.resolve(googleResponse)
-      // Keep the follow-up term pending so stale suggestions would be visible
-      // if the query still returned placeholder data.
+      // Keep the follow-up term pending so the loading state stays observable.
       return new Promise(() => {})
     })
     const user = userEvent.setup()
@@ -568,7 +578,7 @@ describe('MarketplaceSearchAutocomplete', () => {
 
     await user.type(screen.getByRole('combobox'), ' drive')
 
-    expect(screen.queryByText('Google Search')).not.toBeInTheDocument()
+    expect(screen.getByText('Google Search')).toBeInTheDocument()
     expect(screen.getByText(/Loading/)).toBeInTheDocument()
     expect(screen.getByText(/Loading/).closest('[aria-busy="true"]')).not.toBeNull()
   })
@@ -619,9 +629,12 @@ describe('MarketplaceSearchAutocomplete', () => {
     await user.type(screen.getByRole('combobox'), 'google')
     expect(screen.getByText(/Loading/)).toBeInTheDocument()
 
-    await user.click(screen.getByRole('button', { name: 'Outside search' }))
+    // Base UI hides the rest of the page from assistive technology while the suggestions are
+    // open, so the outside control is reached by text rather than by role.
+    await user.click(screen.getByText('Outside search'))
     await waitFor(() => {
-      expect(screen.getByText(/Loading/)).not.toBeVisible()
+      const loading = screen.queryByText(/Loading/)
+      if (loading) expect(loading).not.toBeVisible()
     })
 
     resolvePluginSearch(pluginResponse)
@@ -660,7 +673,7 @@ describe('MarketplaceSearchAutocomplete', () => {
     expect(screen.queryByText(/Loading/)).not.toBeInTheDocument()
   })
 
-  it('clears suggestions while the edited value is still debouncing', async () => {
+  it('keeps the previous suggestions listed while the edited value is still debouncing', async () => {
     debounceState.useRealDebounce = true
     mockPluginSearch.mockResolvedValue({
       data: {
@@ -700,10 +713,10 @@ describe('MarketplaceSearchAutocomplete', () => {
     expect(await screen.findByText('Google Search')).toBeInTheDocument()
 
     // For the first 300ms after editing, the debounced term still points at
-    // the old query; the previous suggestions must already be gone.
+    // the old query; its suggestions stay listed under the loading status.
     await user.type(screen.getByRole('combobox'), ' drive')
 
-    expect(screen.queryByText('Google Search')).not.toBeInTheDocument()
+    expect(screen.getByText('Google Search')).toBeInTheDocument()
     expect(screen.getByText(/Loading/)).toBeInTheDocument()
     expect(screen.getByText(/Loading/).closest('[aria-busy="true"]')).not.toBeNull()
   })
diff --git a/web/app/components/plugins/marketplace/home/marketplace-search-autocomplete.tsx b/web/app/components/plugins/marketplace/home/marketplace-search-autocomplete.tsx
index 5d3be387357b15..71b3d8db5c1ac4 100644
--- a/web/app/components/plugins/marketplace/home/marketplace-search-autocomplete.tsx
+++ b/web/app/components/plugins/marketplace/home/marketplace-search-autocomplete.tsx
@@ -13,6 +13,7 @@ import {
   AutocompleteItem,
   AutocompleteItemText,
   AutocompleteList,
+  AutocompletePopup,
   AutocompletePortal,
   AutocompletePositioner,
   AutocompleteSeparator,
@@ -20,9 +21,10 @@ import {
   useAutocompleteFilteredItems,
 } from '@langgenius/dify-ui/autocomplete'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useQuery } from '@tanstack/react-query'
-import { useDebounce } from 'ahooks'
-import { useEffect, useRef, useState } from 'react'
+import { SpinnerIcon } from '@langgenius/dify-ui/spinner'
+import { keepPreviousData, useQuery } from '@tanstack/react-query'
+import { useDebouncedValue } from 'foxact/use-debounced-value'
+import { useState } from 'react'
 import { useTranslation } from '#i18n'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import { renderI18nObject } from '@/i18n/metadata'
@@ -98,17 +100,26 @@ const toPluginSuggestion = (plugin: MarketplacePlugin, locale: string): Marketpl
 })
 
 function MarketplaceSuggestionList({
+  pending,
   onSelect,
 }: {
+  pending: boolean
   onSelect: (selection: MarketplaceSearchSelection) => void
 }) {
   const groups = useAutocompleteFilteredItems<MarketplaceSuggestionGroup>()
 
   return (
-    <AutocompleteList className="max-h-none overflow-visible p-0 data-empty:p-0">
+    // The list is the scroll container. Its scroll padding matches the group label height so
+    // keyboard navigation keeps the label above a group's first item in view.
+    <AutocompleteList
+      className={cn(
+        'scroll-pt-9 transition-opacity motion-reduce:transition-none',
+        pending && 'opacity-60',
+      )}
+    >
       {groups.map((group, groupIndex) => (
-        <AutocompleteGroup key={group.id} items={group.items} className="p-1">
-          {groupIndex > 0 && <AutocompleteSeparator className="-mx-1 mb-1" />}
+        <AutocompleteGroup key={group.id} items={group.items}>
+          {groupIndex > 0 && <AutocompleteSeparator />}
           <AutocompleteGroupLabel className="px-3 pt-3 pb-2 system-xs-semibold-uppercase text-text-primary">
             {group.label}
           </AutocompleteGroupLabel>
@@ -117,7 +128,7 @@ function MarketplaceSuggestionList({
               <AutocompleteItem
                 key={item.id}
                 value={item}
-                className="mx-0 items-start gap-1 rounded-lg py-1 pr-1 pl-3 hover:text-text-primary not-data-highlighted:hover:bg-state-base-hover"
+                className="items-start gap-1 py-1 pr-1 pl-3"
                 onClick={() => onSelect(item.selection)}
               >
                 <span className="flex shrink-0 items-start py-1">
@@ -148,7 +159,7 @@ function MarketplaceSuggestionList({
                   )}
                 </span>
                 <span className="flex min-w-0 flex-1 flex-col gap-0.5 p-1">
-                  <AutocompleteItemText className="px-0 system-md-medium text-text-primary">
+                  <AutocompleteItemText className="system-md-medium text-text-primary">
                     {item.label}
                   </AutocompleteItemText>
                   {!!item.description && (
@@ -184,33 +195,20 @@ export function MarketplaceSearchAutocomplete({
   const { t } = useTranslation(['app'])
   const { t: tCommon } = useTranslation(['common'])
   const { t: tPlugin } = useTranslation(['plugin'])
-  const [isOpen, setIsOpen] = useState(false)
-  const searchRootRef = useRef<HTMLDivElement>(null)
-  const resultsPanelRef = useRef<HTMLDivElement>(null)
-  const keyboardHighlightedRef = useRef(false)
-
-  const submitSearchForm = () => {
-    const form = searchRootRef.current?.closest('form')
-    if (form instanceof HTMLFormElement) form.requestSubmit()
-  }
   const openSuggestion = (selection: MarketplaceSearchSelection) => {
     if (onSuggestionSelect) {
       const result = onSuggestionSelect(selection)
-      queueMicrotask(() => {
-        if (!result?.preserveQuery) onValueChange('')
-        setIsOpen(false)
-      })
+      if (!result?.preserveQuery) onValueChange('')
       return
     }
 
-    const href =
+    window.location.assign(
       selection.kind === 'plugin'
         ? getPluginDetailLinkInMarketplace(selection.plugin)
-        : getTemplateDetailLinkInMarketplace(selection.template)
-    setIsOpen(false)
-    window.location.assign(href)
+        : getTemplateDetailLinkInMarketplace(selection.template),
+    )
   }
-  const debouncedSearch = useDebounce(value.trim(), { wait: 300 })
+  const debouncedSearch = useDebouncedValue(value.trim(), 300)
   const hasQuery = Boolean(debouncedSearch)
   const searchesPlugins = scope === 'all' || scope === 'plugins'
   const searchesTemplates = scope === 'all' || scope === 'templates'
@@ -230,8 +228,10 @@ export function MarketplaceSearchAutocomplete({
       },
       retry: false,
     }),
-    // No placeholderData here: showing the previous term's suggestions would
-    // leave stale items keyboard-selectable while the new request is pending.
+    // While a query is active, the previous term's suggestions stay listed under a loading
+    // status until the next term loads, so the popup does not collapse on every keystroke.
+    // Clearing the input drops them.
+    placeholderData: hasQuery ? keepPreviousData : undefined,
     enabled: hasQuery && searchesPlugins,
     staleTime: 60_000,
   })
@@ -249,23 +249,19 @@ export function MarketplaceSearchAutocomplete({
       },
       retry: false,
     }),
+    placeholderData: hasQuery ? keepPreviousData : undefined,
     enabled: hasQuery && searchesTemplates,
     staleTime: 60_000,
   })
-  // While the edited value is still debouncing, the queries above still hold
-  // the previous term's data; gate the suggestions until both agree so stale
-  // options are never visible or keyboard-selectable.
   const isDebouncing = value.trim() !== debouncedSearch
-  const pluginSuggestions =
-    !isDebouncing && searchesPlugins
-      ? (pluginQuery.data?.data.bundles ?? pluginQuery.data?.data.plugins ?? []).map((plugin) =>
-          toPluginSuggestion(plugin, locale),
-        )
-      : []
-  const templateSuggestions =
-    !isDebouncing && searchesTemplates
-      ? (templateQuery.data?.data?.templates ?? []).map(toTemplateSuggestion)
-      : []
+  const pluginSuggestions = searchesPlugins
+    ? (pluginQuery.data?.data.bundles ?? pluginQuery.data?.data.plugins ?? []).map((plugin) =>
+        toPluginSuggestion(plugin, locale),
+      )
+    : []
+  const templateSuggestions = searchesTemplates
+    ? (templateQuery.data?.data?.templates ?? []).map(toTemplateSuggestion)
+    : []
   const suggestions = [...templateSuggestions, ...pluginSuggestions]
   const suggestionGroups: MarketplaceSuggestionGroup[] = [
     ...(templateSuggestions.length
@@ -287,11 +283,8 @@ export function MarketplaceSearchAutocomplete({
         ]
       : []),
   ]
-  const isSearching = isDebouncing || pluginQuery.isFetching || templateQuery.isFetching
-  // Keep open tied to the typing session so outside-press can dismiss during
-  // debounce/fetch. Pending, empty, and error copy live inside the popup.
-  const hasTypedQuery = Boolean(value.trim())
-  const isPopupOpen = isOpen && hasTypedQuery
+  const isFetching = pluginQuery.isFetching || templateQuery.isFetching
+  const isSearching = isDebouncing || isFetching
   // A failed request must not read as "nothing matched"; when every source in
   // scope errored and nothing is displayable, surface a load failure instead.
   const hasLoadError =
@@ -304,94 +297,80 @@ export function MarketplaceSearchAutocomplete({
       ? t(($) => $['newApp.noTemplateFound'], { ns: 'app' })
       : tPlugin(($) => $['marketplace.noPluginFound'], { ns: 'plugin' })
 
-  useEffect(() => {
-    if (!isPopupOpen) return
-
-    const handleOutsidePress = (event: MouseEvent) => {
-      const target = event.target
-      if (!(target instanceof Node)) return
-      if (searchRootRef.current?.contains(target) || resultsPanelRef.current?.contains(target))
-        return
-      setIsOpen(false)
-    }
-
-    document.addEventListener('click', handleOutsidePress)
-    return () => document.removeEventListener('click', handleOutsidePress)
-  }, [isPopupOpen])
-
+  // Base UI owns opening on input, outside-press and Escape dismissal, and Enter: it selects the
+  // highlighted item or leaves the key to the browser, which submits the form when nothing is
+  // highlighted.
   return (
-    <div ref={searchRootRef} className="relative">
-      <Autocomplete
-        filter={null}
-        highlightItemOnHover={false}
-        itemToStringValue={(item) => item.label}
-        items={suggestionGroups}
-        mode="list"
-        name={inputName}
-        onOpenChange={setIsOpen}
-        onValueChange={(nextValue) => {
-          onValueChange(nextValue)
-          setIsOpen(Boolean(nextValue.trim()))
-        }}
-        open={isPopupOpen}
-        openOnInputClick
-        submitOnItemClick={false}
-        value={value}
-        onItemHighlighted={(item, details) => {
-          keyboardHighlightedRef.current = Boolean(item) && details.reason === 'keyboard'
-        }}
-      >
-        <AutocompleteInputGroup size="large">
-          <span
-            aria-hidden
-            className="ml-3 i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
-          />
-          <AutocompleteInput
-            aria-label={placeholder}
-            className="px-2 text-sm"
-            placeholder={placeholder}
+    <Autocomplete
+      filter={null}
+      itemToStringValue={(item) => item.label}
+      items={suggestionGroups}
+      name={inputName}
+      onOpenChange={(nextOpen, details) => {
+        // Base UI also opens on arrow keys; with no query there is nothing to show, so that
+        // open is cancelled. Typing opens and emptying the input closes.
+        if (nextOpen && details.reason !== 'input-change' && !value.trim()) details.cancel()
+      }}
+      onValueChange={(nextValue, details) => {
+        // Choosing a suggestion opens it instead of filling the input, so its label never
+        // replaces the typed query.
+        if (details.reason !== 'item-press') onValueChange(nextValue)
+      }}
+      value={value}
+    >
+      <AutocompleteInputGroup size="large">
+        <span
+          aria-hidden
+          className="i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
+        />
+        <AutocompleteInput
+          aria-label={placeholder}
+          placeholder={placeholder}
+          size="large"
+          type="text"
+        />
+        {!!value && (
+          <AutocompleteClear
+            aria-label={tPlugin(($) => $.clearSearch, { ns: 'plugin', label: placeholder })}
             size="large"
-            type="text"
-            onKeyDownCapture={(event) => {
-              if (
-                event.defaultPrevented ||
-                event.nativeEvent.isComposing ||
-                event.key !== 'Enter' ||
-                !inputName
-              )
-                return
-              if (keyboardHighlightedRef.current) return
-              event.preventDefault()
-              event.stopPropagation()
-              if (value.trim()) submitSearchForm()
-            }}
           />
-          {!!value && (
-            <AutocompleteClear
-              aria-label={tPlugin(($) => $.clearSearch, { ns: 'plugin', label: placeholder })}
-              size="large"
+        )}
+      </AutocompleteInputGroup>
+      {/* Base UI adds its own text input to the owning form, which blocks the browser's implicit
+          submission, so a form field brings the submit button Enter needs. */}
+      {inputName && (
+        <button type="submit" className="sr-only" tabIndex={-1} aria-hidden>
+          {placeholder}
+        </button>
+      )}
+      <AutocompletePortal>
+        <AutocompletePositioner sideOffset={8}>
+          <AutocompletePopup
+            className="max-h-[min(20rem,var(--available-height))] max-w-(--available-width) bg-components-panel-bg-blur shadow-xl backdrop-blur-sm"
+            aria-busy={isSearching || undefined}
+          >
+            {/* The previous suggestions stay listed while the next term loads, dimmed only while a
+                request is in flight so a cached result does not flicker; the loading row follows
+                them so nothing on screen moves, and it is the content on the first search. */}
+            <MarketplaceSuggestionList
+              pending={isFetching && suggestions.length > 0}
+              onSelect={openSuggestion}
             />
-          )}
-        </AutocompleteInputGroup>
-        <AutocompletePortal hidden={!isPopupOpen}>
-          <AutocompletePositioner anchor={searchRootRef} sideOffset={8}>
-            <div
-              ref={resultsPanelRef}
-              className="max-h-[min(20rem,var(--available-height))] w-(--anchor-width) max-w-(--available-width) overflow-y-auto overscroll-contain rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl outline-hidden backdrop-blur-sm"
-              aria-busy={isSearching || undefined}
-            >
-              <MarketplaceSuggestionList onSelect={openSuggestion} />
-              <AutocompleteEmpty>
-                {!isSearching && suggestions.length === 0 ? emptyText : null}
-              </AutocompleteEmpty>
-              <AutocompleteStatus className="empty:h-0 empty:p-0">
-                {isSearching ? tCommon(($) => $.loading, { ns: 'common' }) : null}
-              </AutocompleteStatus>
-            </div>
-          </AutocompletePositioner>
-        </AutocompletePortal>
-      </Autocomplete>
-    </div>
+            <AutocompleteStatus className="flex items-center gap-2">
+              {isSearching ? (
+                <>
+                  <SpinnerIcon />
+                  {tCommon(($) => $.loading, { ns: 'common' })}
+                </>
+              ) : null}
+            </AutocompleteStatus>
+            <AutocompleteEmpty>
+              {!isSearching && suggestions.length === 0 ? emptyText : null}
+            </AutocompleteEmpty>
+          </AutocompletePopup>
+        </AutocompletePositioner>
+      </AutocompletePortal>
+    </Autocomplete>
   )
 }
 
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/app-picker.spec.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/app-picker.spec.tsx
index 360436f187b2c8..8b79cc49196db4 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/app-picker.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/app-picker.spec.tsx
@@ -84,43 +84,4 @@ describe('AppPicker', () => {
     expect(scrollRegion).toContainElement(listbox)
     expect(scrollRegion).toContainElement(loadMoreButton)
   })
-
-  it('should clear only the search query and keep focus in the input', async () => {
-    const user = userEvent.setup()
-    const onSelect = vi.fn()
-
-    function AppPickerHarness() {
-      const [open, setOpen] = useState(false)
-      const [searchText, setSearchText] = useState('')
-
-      return (
-        <AppPicker
-          disabled={false}
-          trigger={<span>Choose app</span>}
-          isShow={open}
-          onShowChange={setOpen}
-          onSelect={onSelect}
-          apps={[app]}
-          isLoading={false}
-          hasMore={false}
-          onLoadMore={vi.fn()}
-          searchText={searchText}
-          onSearchChange={setSearchText}
-        />
-      )
-    }
-
-    render(<AppPickerHarness />)
-    await user.click(screen.getByRole('combobox', { name: 'app.appSelector.label' }))
-    const searchInput = screen.getByRole('combobox', { name: 'app.appSelector.placeholder' })
-    await user.type(searchInput, 'workflow')
-    const clearButton = screen.getByRole('button', { name: 'common.operation.clear' })
-    clearButton.focus()
-    await user.keyboard('{Enter}')
-
-    expect(searchInput).toHaveValue('')
-    expect(searchInput).toHaveFocus()
-    expect(onSelect).not.toHaveBeenCalled()
-    expect(screen.getByRole('option', { name: /Workflow App/ })).toBeInTheDocument()
-  })
 })
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
index 2593df7a5160b3..eb2d6440b77896 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
@@ -19,7 +19,6 @@ import {
   ComboboxStatus,
   ComboboxTrigger,
 } from '@langgenius/dify-ui/combobox'
-import { IconButton } from '@langgenius/dify-ui/icon-button'
 import {
   ScrollArea,
   ScrollAreaContent,
@@ -27,7 +26,7 @@ import {
   ScrollAreaThumb,
   ScrollAreaViewport,
 } from '@langgenius/dify-ui/scroll-area'
-import { useCallback, useRef } from 'react'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import { AppModeEnum } from '@/types/app'
@@ -75,9 +74,9 @@ function AppPickerOption({ app }: { app: AppPartial }) {
     <ComboboxItem
       key={app.id}
       value={app}
-      className="mx-0 grid-cols-[minmax(0,1fr)_auto] gap-3 py-1 pr-3 pl-2"
+      className="grid-cols-[minmax(0,1fr)_auto] gap-3 py-1 pr-3 pl-2"
     >
-      <ComboboxItemText className="flex min-w-0 items-center gap-3 px-0">
+      <ComboboxItemText className="flex items-center gap-3">
         <AppIcon
           className="shrink-0"
           size="xs"
@@ -114,8 +113,6 @@ export function AppPicker({
   onSearchChange,
 }: AppPickerProps) {
   const { t } = useTranslation(['app', 'common', 'workflow'])
-  const inputRef = useRef<HTMLInputElement>(null)
-
   const handleValueChange = useCallback(
     (app: AppPartial | null) => {
       if (!app) return
@@ -126,11 +123,6 @@ export function AppPicker({
     [onSelect, onShowChange],
   )
 
-  const handleClearSearch = () => {
-    onSearchChange('')
-    inputRef.current?.focus()
-  }
-
   return (
     <Combobox<AppPartial>
       items={apps}
@@ -163,24 +155,9 @@ export function AppPicker({
                   aria-hidden="true"
                 />
                 <ComboboxInput
-                  ref={inputRef}
                   aria-label={t(($) => $['appSelector.placeholder'], { ns: 'app' })}
                   placeholder={t(($) => $['appSelector.placeholder'], { ns: 'app' })}
                 />
-                {searchText && (
-                  <IconButton
-                    size="xs"
-                    aria-label={t(($) => $['operation.clear'], { ns: 'common' })}
-                    className="ml-1.5 size-3.5 shrink-0 rounded-none text-text-quaternary hover:bg-transparent hover:text-text-quaternary focus-visible:ring-1 focus-visible:ring-components-input-border-active"
-                    onClick={handleClearSearch}
-                    onMouseDown={(event) => event.preventDefault()}
-                  >
-                    <span
-                      className="i-custom-vender-solid-general-x-circle size-3.5"
-                      aria-hidden="true"
-                    />
-                  </IconButton>
-                )}
               </ComboboxInputGroup>
               <ScrollArea className="min-h-0 flex-1 overflow-hidden">
                 <ScrollAreaViewport
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
index 6d3d716953e4d2..f052a9b9793b2e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
@@ -57,9 +57,9 @@ const VarReferencePicker: FC<Props> = ({ readonly, className, value, onChange })
                   <SelectItem<VarType>
                     key={type}
                     value={type}
-                    className="h-7.5 rounded-lg pr-2 pl-3 text-[13px] text-text-primary"
+                    className="h-7.5 text-[13px] text-text-primary"
                   >
-                    <SelectItemText className="px-0 capitalize">{type}</SelectItemText>
+                    <SelectItemText className="capitalize">{type}</SelectItemText>
                     <SelectItemIndicator />
                   </SelectItem>
                 ))}
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
index 55c35799aead62..666db4f05f3f82 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
@@ -369,7 +369,7 @@ const ConditionItem = ({
                                   aria-hidden
                                   className="mr-1.25 i-custom-vender-solid-development-variable-02 h-3.5 w-3.5 text-text-accent"
                                 />
-                                <SelectItemText className="mr-0 px-0 system-sm-medium text-text-secondary">
+                                <SelectItemText className="mr-0 system-sm-medium text-text-secondary">
                                   {option.name}
                                 </SelectItemText>
                               </div>
@@ -444,7 +444,7 @@ const ConditionItem = ({
               value={selectedSelectOption?.value ?? null}
               onValueChange={(value) => value && handleUpdateConditionValue(value)}
             >
-              <SelectTrigger className="h-8 rounded-t-none border-0 px-2 text-xs hover:bg-components-input-bg-normal focus-visible:bg-components-input-bg-normal">
+              <SelectTrigger className="h-8 rounded-t-none border-0 pl-2 text-xs hover:bg-components-input-bg-normal focus-visible:bg-components-input-bg-normal">
                 {selectedSelectOption?.name ?? t(($) => $['placeholder.select'], { ns: 'common' })}
               </SelectTrigger>
               <SelectContent>
diff --git a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
index b61b6aab09bf34..addf74d44b1b99 100644
--- a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
@@ -86,7 +86,7 @@ const SubVariablePicker: FC<Props> = ({ value, onChange, className }) => {
                           aria-hidden
                           className="mr-1.25 i-custom-vender-solid-development-variable-02 h-3.5 w-3.5 text-text-accent"
                         />
-                        <SelectItemText className="mr-0 px-0 system-sm-medium text-text-secondary">
+                        <SelectItemText className="mr-0 system-sm-medium text-text-secondary">
                           {option.name}
                         </SelectItemText>
                       </div>
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
index f705b806922ae4..1d4c1d108555e3 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
@@ -287,7 +287,7 @@ const ConditionItem = ({
                                   aria-hidden
                                   className="mr-1.25 i-custom-vender-solid-development-variable-02 h-3.5 w-3.5 text-text-accent"
                                 />
-                                <SelectItemText className="mr-0 px-0 system-sm-medium text-text-secondary">
+                                <SelectItemText className="mr-0 system-sm-medium text-text-secondary">
                                   {option.name}
                                 </SelectItemText>
                               </div>
@@ -363,7 +363,7 @@ const ConditionItem = ({
               value={selectedSelectOption?.value ?? null}
               onValueChange={(value) => value && handleUpdateConditionValue(value)}
             >
-              <SelectTrigger className="h-8 rounded-t-none border-0 px-2 text-xs hover:bg-components-input-bg-normal focus-visible:bg-components-input-bg-normal">
+              <SelectTrigger className="h-8 rounded-t-none border-0 pl-2 text-xs hover:bg-components-input-bg-normal focus-visible:bg-components-input-bg-normal">
                 {selectedSelectOption?.name ?? t(($) => $['placeholder.select'], { ns: 'common' })}
               </SelectTrigger>
               <SelectContent>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
index de21a0e461d9b3..a91ee9e1f97416 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
@@ -77,9 +77,9 @@ const VariableTypeSelector = <T extends string>({
           <SelectItem
             key={item}
             value={item}
-            className="h-auto gap-2 py-1.5 pr-2 pl-3 system-md-regular font-normal"
+            className="h-auto gap-2 py-1.5 system-md-regular font-normal"
           >
-            <SelectItemText className="px-0 system-md-regular text-text-secondary">
+            <SelectItemText className="system-md-regular text-text-secondary">
               {item}
             </SelectItemText>
             <SelectItemIndicator />
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/index.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/index.tsx
index 38df49edf68dd6..ee77591336cee0 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/index.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/index.tsx
@@ -186,7 +186,9 @@ export function AgentOrchestratePanel({
                             <AgentTools />
                           </>
                         )}
-                        {ENABLE_AGENT_KNOWLEDGE_RETRIEVAL && <AgentKnowledgeRetrieval />}
+                        {ENABLE_AGENT_KNOWLEDGE_RETRIEVAL && (
+                          <AgentKnowledgeRetrieval workflowNodeId={nodeId} />
+                        )}
                         {!isTemplatePreview && <AgentAdvancedSettings />}
                       </AgentBuildDraftChangedKeysProvider>
                     </AgentOrchestrateAddActionsProvider>
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/__tests__/index.spec.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/__tests__/index.spec.tsx
index 28ae7bac53351b..cff158e25fa7fe 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/__tests__/index.spec.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/__tests__/index.spec.tsx
@@ -1,21 +1,109 @@
+import type { Node, Var } from '@/app/components/workflow/types'
 import type { AgentSoulConfigFormState } from '@/features/agent-v2/agent-composer/form-state'
-import { fireEvent, screen, within } from '@testing-library/react'
+import type { MetadataInDoc } from '@/models/datasets'
+import { act, fireEvent, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useAtomValue } from 'jotai'
+import { ReactFlowProvider } from 'reactflow'
 import { beforeEach, describe, expect, it, vi } from 'vite-plus/test'
-import { MetadataFilteringModeEnum } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
+import {
+  ComparisonOperator,
+  LogicalOperator,
+  MetadataFilteringModeEnum,
+  MetadataFilteringVariableType,
+} from '@/app/components/workflow/nodes/knowledge-retrieval/types'
+import { BlockEnum, VarType } from '@/app/components/workflow/types'
 import { formStateToAgentSoulConfig } from '@/features/agent-v2/agent-composer/conversions'
 import { defaultAgentSoulConfigFormState } from '@/features/agent-v2/agent-composer/form-state'
 import { AgentComposerProvider } from '@/features/agent-v2/agent-composer/provider'
 import { agentComposerDraftAtom } from '@/features/agent-v2/agent-composer/store'
 import { RerankingModeEnum } from '@/models/datasets'
 import { renderWithConsoleQuery as render } from '@/test/console/query-data'
+import { AgentOrchestratePanel } from '../../index'
 import {
   AgentOrchestrateReadOnlyContext,
   AgentOrchestrateViewingVersionContext,
 } from '../../read-only-context'
 import { AgentKnowledgeRetrieval } from '../index'
 
+vi.mock('@/features/agent-v2/agent-detail/configure/feature-flags', async (importOriginal) => ({
+  ...(await importOriginal<
+    typeof import('@/features/agent-v2/agent-detail/configure/feature-flags')
+  >()),
+  ENABLE_AGENT_KNOWLEDGE_RETRIEVAL: true,
+}))
+
+// Keep the configuration panel and retrieval editor real; unrelated editors have their own suites.
+vi.mock('../../advanced', () => ({ AgentAdvancedSettings: () => null }))
+vi.mock('../../model-config/field', () => ({ AgentModelField: () => null }))
+vi.mock('../../prompt-editor', () => ({
+  AgentPromptEditor: () => null,
+  AgentTemplatePromptEditor: () => null,
+}))
+vi.mock('../../skills', () => ({ AgentSkills: () => null, AgentTemplateSkills: () => null }))
+vi.mock('../../files', () => ({ AgentFiles: () => null, AgentTemplateFiles: () => null }))
+vi.mock('../../tools', () => ({ AgentTools: () => null, AgentTemplateTools: () => null }))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-available-var-list', () => ({
+  default: (_nodeId: string, { filterVar }: { filterVar: (value: Var) => boolean }) => ({
+    availableVars: [
+      {
+        nodeId: 'start',
+        title: 'Start',
+        isStartNode: true,
+        vars: [
+          { variable: 'program_input', type: VarType.number },
+          { variable: 'item_input', type: VarType.string },
+        ].filter(filterVar),
+      },
+    ],
+    availableNodesWithParent: [
+      {
+        id: 'start',
+        position: { x: 0, y: 0 },
+        data: { type: BlockEnum.Start, title: 'Start', desc: '' },
+      } satisfies Node,
+    ],
+  }),
+}))
+
+const datasetQuery = vi.hoisted(() => ({
+  pages: [] as Array<{ data: unknown[] }>,
+  notify: () => {},
+  error: null as Error | null,
+}))
+vi.mock('@/service/console', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/service/console')>()
+  const datasetsQuery = new Proxy(actual.consoleQuery.datasets, {
+    get(target, property, receiver) {
+      if (property !== 'get') return Reflect.get(target, property, receiver)
+      return {
+        ...target.get,
+        queryOptions: (...args: Parameters<typeof target.get.queryOptions>) => ({
+          ...target.get.queryOptions(...args),
+          retry: false,
+          initialData: datasetQuery.pages[0],
+          queryFn: () => {
+            if (datasetQuery.error) return Promise.reject(datasetQuery.error)
+            return new Promise((resolve) => {
+              datasetQuery.notify = () => resolve(datasetQuery.pages[0])
+            })
+          },
+        }),
+      }
+    },
+  })
+  return {
+    ...actual,
+    consoleQuery: new Proxy(actual.consoleQuery, {
+      get(target, property, receiver) {
+        if (property === 'datasets') return datasetsQuery
+        return Reflect.get(target, property, receiver)
+      },
+    }),
+  }
+})
+
 vi.mock('@/context/workspace-state', async () => {
   const { createWorkspaceStateModuleMock } = await import('@/test/console/state-fixture')
   return createWorkspaceStateModuleMock(() => ({
@@ -39,6 +127,7 @@ vi.mock('@/app/components/workflow/nodes/knowledge-retrieval/components/add-data
           search_method: string
         }
         is_multimodal: boolean
+        doc_metadata: MetadataInDoc[]
       }>,
     ) => void
   }) {
@@ -59,6 +148,20 @@ vi.mock('@/app/components/workflow/nodes/knowledge-retrieval/components/add-data
                 search_method: 'semantic',
               },
               is_multimodal: false,
+              doc_metadata: [
+                {
+                  id: 'program-metadata',
+                  name: 'guide_program_id',
+                  type: MetadataFilteringVariableType.number,
+                  value: '',
+                },
+                {
+                  id: 'item-metadata',
+                  name: 'guide_item_id',
+                  type: MetadataFilteringVariableType.string,
+                  value: '',
+                },
+              ],
             },
           ])
         }
@@ -112,17 +215,38 @@ function renderKnowledgeRetrieval({
   readOnly = false,
   viewingVersion = false,
   showConfigSnapshot = false,
+  workflowNodeId,
+  throughPanel = false,
 }: {
   initialDraft?: AgentSoulConfigFormState
   readOnly?: boolean
   viewingVersion?: boolean
   showConfigSnapshot?: boolean
+  workflowNodeId?: string
+  throughPanel?: boolean
 } = {}) {
   return render(
     <AgentComposerProvider initialDraft={initialDraft}>
       <AgentOrchestrateViewingVersionContext value={viewingVersion}>
         <AgentOrchestrateReadOnlyContext value={readOnly}>
-          <AgentKnowledgeRetrieval />
+          {workflowNodeId ? (
+            <ReactFlowProvider>
+              {throughPanel ? (
+                <AgentOrchestratePanel
+                  agentId="agent-1"
+                  appId="workflow-1"
+                  nodeId={workflowNodeId}
+                  showHeader={false}
+                  showPublishBar={false}
+                  onSelectModel={() => {}}
+                />
+              ) : (
+                <AgentKnowledgeRetrieval workflowNodeId={workflowNodeId} />
+              )}
+            </ReactFlowProvider>
+          ) : (
+            <AgentKnowledgeRetrieval />
+          )}
         </AgentOrchestrateReadOnlyContext>
       </AgentOrchestrateViewingVersionContext>
       {showConfigSnapshot && <ConfigSnapshotPreview />}
@@ -147,6 +271,8 @@ vi.mock('@/context/permission-state', async () => {
 describe('AgentKnowledgeRetrieval', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    datasetQuery.pages = []
+    datasetQuery.error = null
   })
 
   describe('Rendering', () => {
@@ -196,6 +322,279 @@ describe('AgentKnowledgeRetrieval', () => {
   })
 
   describe('User Interactions', () => {
+    it.each(['failed', 'missing'])(
+      'preserves saved filters and allows recovery when dataset metadata is %s',
+      async (result) => {
+        const user = userEvent.setup()
+        if (result === 'failed') datasetQuery.error = new Error('Dataset request failed')
+        else datasetQuery.pages = [{ data: [] }]
+        renderKnowledgeRetrieval({
+          workflowNodeId: 'agent-node',
+          showConfigSnapshot: true,
+          initialDraft: {
+            ...agentKnowledgeDraft,
+            knowledgeRetrievals: [
+              {
+                id: 'retrieval-1',
+                name: 'Guide retrieval',
+                datasetRefs: [{ id: 'dataset-1', name: 'Guide knowledge' }],
+                metadataFilterMode: MetadataFilteringModeEnum.manual,
+                metadataFilteringConditions: {
+                  logical_operator: LogicalOperator.and,
+                  conditions: [
+                    {
+                      id: 'condition-1',
+                      metadata_id: 'guide-metadata',
+                      name: 'guide_item_id',
+                      comparison_operator: ComparisonOperator.is,
+                      value: '{{#start.item_input#}}',
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        })
+        await user.click(
+          screen.getByRole('button', {
+            name: 'agentV2.agentDetail.configure.knowledgeRetrieval.edit:{"name":"Guide retrieval"}',
+          }),
+        )
+        expect(await screen.findByRole('alert')).toHaveTextContent('common.dynamicSelect.error')
+        expect(
+          screen.queryByRole('progressbar', { name: 'appApi.loading' }),
+        ).not.toBeInTheDocument()
+        expect(screen.getByLabelText('config snapshot')).toHaveTextContent('{{#start.item_input#}}')
+        await user.click(screen.getByRole('button', { name: /metadata.options.manual.title/ }))
+        await user.click(
+          screen.getByRole('menuitemradio', { name: /metadata.options.disabled.title/ }),
+        )
+        expect(screen.getByLabelText('config snapshot')).toHaveTextContent('"mode":"disabled"')
+
+        datasetQuery.error = null
+        datasetQuery.pages = [
+          {
+            data: [
+              {
+                id: 'dataset-1',
+                name: 'Guide knowledge',
+                doc_metadata: [{ id: 'guide-metadata', name: 'guide_item_id', type: 'string' }],
+              },
+            ],
+          },
+        ]
+        await user.click(screen.getByRole('button', { name: 'common.operation.retry' }))
+        await act(async () => {
+          datasetQuery.notify()
+        })
+        await waitFor(() => expect(screen.queryByRole('alert')).not.toBeInTheDocument())
+        await user.click(
+          await screen.findByRole('button', { name: /metadata.options.disabled.title/ }),
+        )
+        await user.click(
+          screen.getByRole('menuitemradio', { name: /metadata.options.manual.title/ }),
+        )
+        await user.click(await screen.findByRole('button', { name: /metadata.panel.conditions/ }))
+        expect(screen.getByRole('button', { name: 'Variable' })).toBeInTheDocument()
+        expect(screen.getByText('item_input')).toBeInTheDocument()
+        expect(screen.getByLabelText('config snapshot')).toHaveTextContent('{{#start.item_input#}}')
+        expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+      },
+    )
+
+    it.each([false, true])(
+      'preserves saved metadata conditions while dataset definitions are loaded: %s',
+      async (loaded) => {
+        const user = userEvent.setup()
+        if (loaded)
+          datasetQuery.pages = [
+            {
+              data: [
+                {
+                  id: 'dataset-1',
+                  name: 'Guide knowledge',
+                  doc_metadata: [
+                    { id: 'program-metadata', name: 'guide_program_id', type: 'string' },
+                  ],
+                },
+              ],
+            },
+          ]
+        const draft: AgentSoulConfigFormState = {
+          ...agentKnowledgeDraft,
+          knowledgeRetrievals: [
+            {
+              id: 'retrieval-1',
+              name: 'Guide retrieval',
+              datasetRefs: [{ id: 'dataset-1', name: 'Guide knowledge' }],
+              metadataFilterMode: MetadataFilteringModeEnum.manual,
+              metadataFilteringConditions: {
+                logical_operator: LogicalOperator.and,
+                conditions: [
+                  {
+                    id: 'condition-1',
+                    metadata_id: 'program-metadata',
+                    name: 'guide_program_id',
+                    comparison_operator: ComparisonOperator.is,
+                    value: '{{#start.item_input#}}',
+                  },
+                ],
+              },
+            },
+          ],
+        }
+        renderKnowledgeRetrieval({
+          initialDraft: draft,
+          showConfigSnapshot: true,
+          workflowNodeId: 'agent-node',
+        })
+        await user.click(
+          screen.getByRole('button', {
+            name: 'agentV2.agentDetail.configure.knowledgeRetrieval.edit:{"name":"Guide retrieval"}',
+          }),
+        )
+        expect(screen.getByLabelText('config snapshot')).toHaveTextContent('{{#start.item_input#}}')
+        if (loaded) {
+          await user.click(screen.getByRole('button', { name: /metadata.panel.conditions/ }))
+          expect(screen.getByText('guide_program_id')).toBeInTheDocument()
+          await user.click(screen.getByRole('button', { name: /metadata.panel.add/ }))
+          expect(screen.getAllByText('guide_program_id')).toHaveLength(2)
+        } else {
+          expect(screen.getByRole('progressbar', { name: 'appApi.loading' })).toBeInTheDocument()
+          expect(
+            screen.queryByRole('button', { name: /metadata.panel.conditions/ }),
+          ).not.toBeInTheDocument()
+        }
+      },
+    )
+
+    it.each([
+      ['string', 'item_input', ComparisonOperator.is],
+      ['number', 'program_input', ComparisonOperator.equal],
+    ] as const)(
+      'waits for metadata before editing a saved %s variable',
+      async (metadataType, variableName, comparisonOperator) => {
+        const user = userEvent.setup()
+        const value = `{{#start.${variableName}#}}`
+        renderKnowledgeRetrieval({
+          workflowNodeId: 'agent-node',
+          showConfigSnapshot: true,
+          initialDraft: {
+            ...agentKnowledgeDraft,
+            knowledgeRetrievals: [
+              {
+                id: 'retrieval-1',
+                name: 'Guide retrieval',
+                datasetRefs: [{ id: 'dataset-1', name: 'Guide knowledge' }],
+                metadataFilterMode: MetadataFilteringModeEnum.manual,
+                metadataFilteringConditions: {
+                  logical_operator: LogicalOperator.and,
+                  conditions: [
+                    {
+                      id: 'condition-1',
+                      metadata_id: 'guide-metadata',
+                      name: 'guide_item_id',
+                      comparison_operator: comparisonOperator,
+                      value,
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        })
+        await user.click(
+          screen.getByRole('button', {
+            name: 'agentV2.agentDetail.configure.knowledgeRetrieval.edit:{"name":"Guide retrieval"}',
+          }),
+        )
+        expect(screen.getByRole('progressbar', { name: 'appApi.loading' })).toBeInTheDocument()
+        expect(
+          screen.queryByRole('button', { name: /metadata.panel.conditions/ }),
+        ).not.toBeInTheDocument()
+        expect(screen.getByLabelText('config snapshot')).toHaveTextContent(value)
+
+        await act(async () => {
+          datasetQuery.pages = [
+            {
+              data: [
+                {
+                  id: 'dataset-1',
+                  name: 'Guide knowledge',
+                  doc_metadata: [
+                    { id: 'guide-metadata', name: 'guide_item_id', type: metadataType },
+                  ],
+                },
+              ],
+            },
+          ]
+          datasetQuery.notify()
+        })
+
+        await user.click(await screen.findByRole('button', { name: /metadata.panel.conditions/ }))
+        expect(
+          screen.queryByRole('progressbar', { name: 'appApi.loading' }),
+        ).not.toBeInTheDocument()
+        expect(screen.getByRole('button', { name: 'Variable' })).toBeInTheDocument()
+        expect(screen.queryByRole('button', { name: 'Constant' })).not.toBeInTheDocument()
+        expect(screen.getByText(variableName)).toBeInTheDocument()
+        expect(screen.getByLabelText('config snapshot')).toHaveTextContent(value)
+      },
+    )
+
+    it.each([
+      ['guide_program_id', 'program_input', 'item_input'],
+      ['guide_item_id', 'item_input', 'program_input'],
+    ])(
+      'should save a matching workflow variable for %s through the configuration panel',
+      async (metadataName, variableName, otherTypeVariable) => {
+        const user = userEvent.setup()
+        renderKnowledgeRetrieval({
+          workflowNodeId: 'agent-node',
+          showConfigSnapshot: true,
+          throughPanel: true,
+        })
+
+        await user.click(
+          screen.getByRole('button', {
+            name: 'agentV2.agentDetail.configure.knowledgeRetrieval.add',
+          }),
+        )
+        await user.click(
+          screen.getByRole('button', {
+            name: 'common.operation.add workflow.nodes.knowledgeRetrieval.knowledge',
+          }),
+        )
+        await user.click(
+          screen.getByRole('button', {
+            name: 'workflowModels.nodes.knowledgeRetrieval.metadata.options.disabled.title',
+          }),
+        )
+        await user.click(
+          screen.getByRole('menuitemradio', { name: /metadata.options.manual.title/ }),
+        )
+        await user.click(screen.getByRole('button', { name: /metadata.panel.conditions/ }))
+        await user.click(
+          screen.getByRole('button', {
+            name: 'workflowModels.nodes.knowledgeRetrieval.metadata.panel.add',
+          }),
+        )
+        await user.click(screen.getByText(metadataName))
+        await user.click(screen.getByRole('button', { name: 'Constant' }))
+        await user.click(screen.getByText('Variable', { exact: true }))
+        await user.click(
+          screen.getByText('workflowModels.nodes.knowledgeRetrieval.metadata.panel.select'),
+        )
+
+        expect(screen.queryByText(otherTypeVariable)).not.toBeInTheDocument()
+        await user.click(screen.getByText(variableName))
+        expect(screen.getByLabelText('config snapshot')).toHaveTextContent(
+          `{{#start.${variableName}#}}`,
+        )
+        expect(screen.getByLabelText('config snapshot')).toHaveTextContent(metadataName)
+      },
+    )
+
     it('should open the knowledge retrieval dialog from the add button', async () => {
       const user = userEvent.setup()
       renderKnowledgeRetrieval()
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/dialog.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/dialog.tsx
index c1ca4c1f9a80bd..d58bebeb6b1b74 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/dialog.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/dialog.tsx
@@ -16,6 +16,7 @@ import { IconButton } from '@langgenius/dify-ui/icon-button'
 import { Input } from '@langgenius/dify-ui/input'
 import { RadioGroup, RadioItem } from '@langgenius/dify-ui/radio-group'
 import { Textarea } from '@langgenius/dify-ui/textarea'
+import { useQuery } from '@tanstack/react-query'
 import { intersectionBy } from 'es-toolkit/compat'
 import { useAtomValue } from 'jotai'
 import { useLayoutEffect, useMemo, useRef, useState } from 'react'
@@ -29,7 +30,6 @@ import {
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import AddKnowledge from '@/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset'
 import DatasetList from '@/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list'
-import MetadataFilter from '@/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter'
 import RetrievalConfig from '@/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config'
 import {
   ComparisonOperator,
@@ -46,7 +46,9 @@ import {
 } from '@/features/agent-v2/agent-composer/knowledge-validation'
 import { agentComposerKnowledgeRetrievalsAtom } from '@/features/agent-v2/agent-composer/store-modules/knowledge'
 import { ChunkingMode, DatasetPermission, DataSourceType } from '@/models/datasets'
+import { consoleQuery } from '@/service/console'
 import { AppModeEnum, RETRIEVE_METHOD, RETRIEVE_TYPE } from '@/types/app'
+import { AgentMetadataFilter } from './metadata-filter'
 
 type KnowledgeRetrievalQueryMode = 'agent' | 'custom'
 type MetadataFilteringConditions = {
@@ -68,6 +70,7 @@ type KnowledgeRetrievalDialogState = {
 }
 
 type AgentKnowledgeRetrievalDialogProps = {
+  workflowNodeId?: string
   item?: AgentKnowledgeRetrievalItem
   initialName?: string
   onItemCreate?: (item: AgentKnowledgeRetrievalItem) => void
@@ -323,6 +326,7 @@ function EditableKnowledgeRetrievalName({
 }
 
 function AgentKnowledgeRetrievalDialogContent({
+  workflowNodeId,
   item,
   initialName,
   onItemCreate,
@@ -347,9 +351,45 @@ function AgentKnowledgeRetrievalDialogContent({
     name,
     queryMode,
     retrievalMode,
-    selectedDatasets,
+    selectedDatasets: storedDatasets,
     singleRetrievalConfig,
   } = dialogState
+  // Saved Agent snapshots contain dataset references, not metadata definitions.
+  // Load definitions before allowing MetadataTrigger to prune deleted fields.
+  const unresolvedDatasetIds = storedDatasets
+    .filter((dataset) => dataset.doc_metadata === undefined)
+    .map((dataset) => dataset.id)
+  const {
+    data: datasetPage,
+    isPending: metadataPending,
+    refetch: reloadMetadata,
+  } = useQuery(
+    consoleQuery.datasets.get.queryOptions({
+      input: { query: { ids: unresolvedDatasetIds, page: 1, limit: 100 } },
+      enabled: unresolvedDatasetIds.length > 0,
+    }),
+  )
+  const selectedDatasets = useMemo(() => {
+    const fetchedDatasets = new Map(
+      datasetPage?.data.map((dataset) => [dataset.id, dataset] as const),
+    )
+    return storedDatasets.map((dataset) => {
+      const definitions = fetchedDatasets.get(dataset.id)?.doc_metadata
+      if (dataset.doc_metadata !== undefined || !definitions) return dataset
+      return {
+        ...dataset,
+        doc_metadata: definitions.flatMap(({ id, name, type }) => {
+          const metadataType = Object.values(MetadataFilteringVariableType).find(
+            (supportedType) => supportedType === type,
+          )
+          return metadataType ? [{ id, name, type: metadataType, value: '' }] : []
+        }),
+      }
+    })
+  }, [storedDatasets, datasetPage])
+  const selectedDatasetsLoaded = selectedDatasets.every(
+    (dataset) => dataset.doc_metadata !== undefined,
+  )
   const { modelList: rerankModelList, defaultModel: rerankDefaultModel } =
     useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.rerank)
   const { currentModel: currentRerankModel, currentProvider: currentRerankProvider } =
@@ -632,9 +672,14 @@ function AgentKnowledgeRetrievalDialogContent({
         </div>
 
         <div className="py-2">
-          <MetadataFilter
+          <AgentMetadataFilter
+            workflowNodeId={workflowNodeId}
             metadataList={metadataList}
-            selectedDatasetsLoaded
+            selectedDatasetsLoaded={selectedDatasetsLoaded}
+            metadataUnavailable={!metadataPending && !selectedDatasetsLoaded}
+            onRetryMetadata={() => {
+              void reloadMetadata()
+            }}
             metadataFilterMode={metadataFilterMode}
             metadataFilteringConditions={metadataFilteringConditions}
             handleMetadataFilterModeChange={(nextMode) =>
@@ -731,6 +776,7 @@ function AgentKnowledgeRetrievalDialogContent({
 }
 
 export function AgentKnowledgeRetrievalDialog({
+  workflowNodeId,
   item,
   initialName,
   onItemCreate,
@@ -745,6 +791,7 @@ export function AgentKnowledgeRetrievalDialog({
         className="flex h-130 max-h-[calc(100dvh-2rem)] w-100 flex-col overflow-hidden p-0"
       >
         <AgentKnowledgeRetrievalDialogContent
+          workflowNodeId={workflowNodeId}
           item={item}
           initialName={initialName}
           onItemCreate={onItemCreate}
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/index.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/index.tsx
index 88852e67cffdd5..9af81b31fe9092 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/index.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/index.tsx
@@ -61,7 +61,7 @@ function AgentKnowledgeRetrievalRow({
   )
 }
 
-export function AgentKnowledgeRetrieval() {
+export function AgentKnowledgeRetrieval({ workflowNodeId }: { workflowNodeId?: string }) {
   const { t } = useTranslation(['agentV2'])
   const retrievals = useAtomValue(agentComposerKnowledgeRetrievalsAtom)
   const addKnowledgeRetrieval = useSetAtom(addKnowledgeRetrievalAtom)
@@ -130,6 +130,7 @@ export function AgentKnowledgeRetrieval() {
         )}
       </ConfigureSection>
       <AgentKnowledgeRetrievalDialog
+        workflowNodeId={workflowNodeId}
         item={editingRetrieval ?? undefined}
         initialName={
           editingRetrieval ? getKnowledgeRetrievalName(editingRetrieval, t) : addDialogName
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/metadata-filter.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/metadata-filter.tsx
new file mode 100644
index 00000000000000..352872d6d6453b
--- /dev/null
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/metadata-filter.tsx
@@ -0,0 +1,80 @@
+import type { ComponentProps } from 'react'
+import type { Var } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { Spinner } from '@langgenius/dify-ui/spinner'
+import { useTranslation } from 'react-i18next'
+import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
+import MetadataFilter from '@/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter'
+import MetadataFilterSelector from '@/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector'
+import { VarType } from '@/app/components/workflow/types'
+
+type Props = ComponentProps<typeof MetadataFilter> & {
+  workflowNodeId?: string
+  metadataUnavailable?: boolean
+  onRetryMetadata?: () => void
+}
+
+const filterStringVar = (variable: Var) => variable.type === VarType.string
+const filterNumberVar = (variable: Var) => variable.type === VarType.number
+
+function WorkflowMetadataFilter({ workflowNodeId, ...props }: Props & { workflowNodeId: string }) {
+  const strings = useAvailableVarList(workflowNodeId, {
+    onlyLeafNodeVar: false,
+    filterVar: filterStringVar,
+  })
+  const numbers = useAvailableVarList(workflowNodeId, {
+    onlyLeafNodeVar: false,
+    filterVar: filterNumberVar,
+  })
+
+  return (
+    <MetadataFilter
+      {...props}
+      availableStringVars={strings.availableVars}
+      availableStringNodesWithParent={strings.availableNodesWithParent}
+      availableNumberVars={numbers.availableVars}
+      availableNumberNodesWithParent={numbers.availableNodesWithParent}
+    />
+  )
+}
+
+export function AgentMetadataFilter({
+  workflowNodeId,
+  metadataUnavailable = false,
+  onRetryMetadata,
+  ...props
+}: Props) {
+  const { t } = useTranslation(['appApi', 'common'])
+  // Condition editors initialize their value mode from the metadata type.
+  // Mount them only once definitions are available so saved variables stay variables.
+  if (props.selectedDatasetsLoaded === false) {
+    if (metadataUnavailable) {
+      return (
+        <div className="flex flex-col gap-2 py-2">
+          <span role="alert" className="body-xs-regular text-text-destructive">
+            {t(($) => $['dynamicSelect.error'], { ns: 'common' })}
+          </span>
+          <div className="flex items-center gap-2">
+            <MetadataFilterSelector
+              value={props.metadataFilterMode}
+              onSelect={props.handleMetadataFilterModeChange}
+            />
+            <Button size="small" onClick={onRetryMetadata}>
+              {t(($) => $['operation.retry'], { ns: 'common' })}
+            </Button>
+          </div>
+        </div>
+      )
+    }
+    return (
+      <div className="py-2">
+        <Spinner aria-label={t(($) => $.loading, { ns: 'appApi' })} />
+      </div>
+    )
+  }
+
+  // Standalone Agent composers do not have a workflow canvas or variable scope.
+  if (workflowNodeId) return <WorkflowMetadataFilter {...props} workflowNodeId={workflowNodeId} />
+
+  return <MetadataFilter {...props} />
+}
diff --git a/web/features/agent-v2/agent-detail/logs/components/source-picker.tsx b/web/features/agent-v2/agent-detail/logs/components/source-picker.tsx
index 9d817b252e6a44..36a55bd02f644c 100644
--- a/web/features/agent-v2/agent-detail/logs/components/source-picker.tsx
+++ b/web/features/agent-v2/agent-detail/logs/components/source-picker.tsx
@@ -164,7 +164,7 @@ export function AgentLogSourcePicker({
                           className="min-h-7 grid-cols-[1fr] gap-0 px-1 py-1"
                           render={(props, state) => (
                             <div {...props} className={props.className}>
-                              <ComboboxItemText className="flex min-w-0 items-center gap-2 px-0 system-sm-regular">
+                              <ComboboxItemText className="flex items-center gap-2 system-sm-regular">
                                 <SourceCheckbox checked={state.selected} />
                                 <LogSourceIcon source={source} />
                                 <span className="min-w-0 flex-1 truncate">{source.app_name}</span>
diff --git a/web/features/skills/detail/skill-metadata.tsx b/web/features/skills/detail/skill-metadata.tsx
index cffd3a9fe00708..b3d6e8544ae0af 100644
--- a/web/features/skills/detail/skill-metadata.tsx
+++ b/web/features/skills/detail/skill-metadata.tsx
@@ -247,8 +247,6 @@ export function SkillTagsEditor({
                 <ComboboxPopup className="w-(--anchor-width) min-w-60 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-0 shadow-lg backdrop-blur-[5px]">
                   <TagSearchContentView
                     type="skill"
-                    inputValue={tagSearch}
-                    onInputValueChange={setTagSearch}
                     canBindOrUnbindTags
                     canManageTags
                     onOpenTagManagement={() => setShowTagManagement(true)}
diff --git a/web/features/tag-management/__tests__/tag-filter.spec.tsx b/web/features/tag-management/__tests__/tag-filter.spec.tsx
index 04d642f4d3b6cf..1219a15bfa0307 100644
--- a/web/features/tag-management/__tests__/tag-filter.spec.tsx
+++ b/web/features/tag-management/__tests__/tag-filter.spec.tsx
@@ -299,30 +299,6 @@ describe('TagFilter', () => {
       expect(screen.getByText(i18n.noTag)).toBeInTheDocument()
       expect(searchInput).toHaveFocus()
     })
-
-    it('should clear search and show all tags when clear icon is clicked', async () => {
-      const user = userEvent.setup()
-
-      render(<TagFilter {...defaultProps} />)
-
-      await user.click(screen.getByText(i18n.placeholder))
-
-      const searchInput = screen.getByRole('combobox', { name: i18n.selectorPlaceholder })
-      await user.type(searchInput, 'Front')
-
-      expect(screen.queryByText('Backend')).not.toBeInTheDocument()
-
-      const clearButton = screen.getByRole('button', { name: i18n.operationClear })
-      clearButton.focus()
-      await user.keyboard('{Enter}')
-
-      expect(searchInput).toHaveValue('')
-      expect(searchInput).toHaveFocus()
-
-      expect(screen.getByText('Backend')).toBeInTheDocument()
-      expect(screen.getByText('Frontend')).toBeInTheDocument()
-      expect(screen.getByText('API Design')).toBeInTheDocument()
-    })
   })
 
   describe('Edge Cases', () => {
diff --git a/web/features/tag-management/__tests__/tag-search-content.spec.tsx b/web/features/tag-management/__tests__/tag-search-content.spec.tsx
index cb4ab21e981b0d..913e24ac11ed99 100644
--- a/web/features/tag-management/__tests__/tag-search-content.spec.tsx
+++ b/web/features/tag-management/__tests__/tag-search-content.spec.tsx
@@ -109,8 +109,6 @@ const PanelHarness = ({
     >
       <TagSearchContent
         type={type}
-        inputValue={inputValue}
-        onInputValueChange={setInputValue}
         canBindOrUnbindTags={canBindOrUnbindTags}
         onOpenTagManagement={onOpenTagManagement}
       />
@@ -144,29 +142,6 @@ describe('TagSearchContent', () => {
     expect(screen.queryByRole('option', { name: /API/i })).not.toBeInTheDocument()
   })
 
-  it('clears only the search input from the input clear button', async () => {
-    const user = userEvent.setup()
-    render(<PanelHarness />)
-
-    const input = screen.getByRole('combobox', { name: i18n.selectorPlaceholder })
-    await user.type(input, 'Back')
-    expect(input).toHaveValue('Back')
-    vi.clearAllMocks()
-
-    const clearButton = screen.getByRole('button', { name: i18n.operationClear })
-    await user.pointer({ keys: '[MouseLeft>]', target: clearButton })
-    expect(input).toHaveFocus()
-    await user.pointer({ keys: '[/MouseLeft]', target: clearButton })
-
-    expect(input).toHaveValue('')
-    expect(input).toHaveFocus()
-    expect(onValueChangeSpy).not.toHaveBeenCalled()
-    expect(screen.getByRole('option', { name: /Frontend/i })).toHaveAttribute(
-      'aria-selected',
-      'true',
-    )
-  })
-
   it('shows a create option when the query is not an existing tag name', async () => {
     const user = userEvent.setup()
     render(<PanelHarness />)
diff --git a/web/features/tag-management/components/tag-filter.tsx b/web/features/tag-management/components/tag-filter.tsx
index 14a3104d25a35e..86a40a870bc5f6 100644
--- a/web/features/tag-management/components/tag-filter.tsx
+++ b/web/features/tag-management/components/tag-filter.tsx
@@ -171,8 +171,6 @@ export const TagFilter = ({
             >
               <TagSearchContent
                 type={type}
-                inputValue={inputValue}
-                onInputValueChange={setInputValue}
                 canBindOrUnbindTags
                 onOpenTagManagement={onOpenTagManagement}
                 showTagManagement={showTagManagement}
diff --git a/web/features/tag-management/components/tag-search-content.tsx b/web/features/tag-management/components/tag-search-content.tsx
index ff94636a149524..c422c84282b435 100644
--- a/web/features/tag-management/components/tag-search-content.tsx
+++ b/web/features/tag-management/components/tag-search-content.tsx
@@ -11,9 +11,7 @@ import {
   ComboboxList,
   ComboboxSeparator,
 } from '@langgenius/dify-ui/combobox'
-import { IconButton } from '@langgenius/dify-ui/icon-button'
 import { useAtomValue } from 'jotai'
-import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { workspacePermissionKeysAtom } from '@/context/permission-state'
 import { hasPermission } from '@/utils/permission'
@@ -22,8 +20,6 @@ import { isCreateTagOption } from './tag-combobox-item'
 
 type TagSearchContentProps = {
   type: TagType
-  inputValue: string
-  onInputValueChange: (value: string) => void
   onOpenTagManagement?: () => void
   onClose?: () => void
   canBindOrUnbindTags?: boolean
@@ -36,8 +32,6 @@ type TagSearchContentViewProps = TagSearchContentProps & {
 
 export const TagSearchContentView = ({
   type,
-  inputValue,
-  onInputValueChange,
   onOpenTagManagement,
   onClose,
   canBindOrUnbindTags = false,
@@ -45,42 +39,24 @@ export const TagSearchContentView = ({
   canManageTags,
 }: TagSearchContentViewProps) => {
   const { t } = useTranslation(['common'])
-  const inputRef = useRef<HTMLInputElement>(null)
   const placeholder = t(($) => $['tag.selectorPlaceholder'], { ns: 'common' }) || ''
 
-  const handleClearInput = () => {
-    onInputValueChange('')
-    inputRef.current?.focus()
-  }
-
   return (
     <>
       <ComboboxInputGroup>
         <span aria-hidden="true" className="i-ri-search-line size-4 shrink-0 text-text-tertiary" />
         <ComboboxInput
-          ref={inputRef}
           aria-label={placeholder}
           name={`tag-search-${type}`}
           placeholder={placeholder}
         />
-        {inputValue && (
-          <IconButton
-            size="sm"
-            aria-label={t(($) => $['operation.clear'], { ns: 'common' })}
-            className="shrink-0 hover:bg-components-input-bg-hover focus-visible:bg-components-input-bg-hover"
-            onClick={handleClearInput}
-            onMouseDown={(event) => event.preventDefault()}
-          >
-            <span className="i-ri-close-line size-4" aria-hidden="true" />
-          </IconButton>
-        )}
       </ComboboxInputGroup>
       <ComboboxList<TagComboboxItem> className="max-h-58">
         {(tag) => {
           if (isCreateTagOption(tag) && canManageTags) {
             return (
               <ComboboxItem<string> key={tag.id} value={tag.id}>
-                <ComboboxItemText className="flex items-center gap-x-1 px-0">
+                <ComboboxItemText className="flex items-center gap-x-1">
                   <span
                     aria-hidden="true"
                     className="i-ri-add-line size-4 shrink-0 text-text-tertiary"
diff --git a/web/features/tag-management/components/tag-selector.tsx b/web/features/tag-management/components/tag-selector.tsx
index 00632dffda9c5f..6840b1161dc9a1 100644
--- a/web/features/tag-management/components/tag-selector.tsx
+++ b/web/features/tag-management/components/tag-selector.tsx
@@ -288,8 +288,6 @@ export const TagSelector = ({
           >
             <TagSearchContent
               type={type}
-              inputValue={inputValue}
-              onInputValueChange={setInputValue}
               canBindOrUnbindTags={canBindOrUnbindTags}
               onOpenTagManagement={onOpenTagManagement}
               onClose={() => handleOpenChange(false)}