From 5e6154fdd1a68ea0ef8d915cf263dbf795870f5f Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Thu, 30 Jul 2026 21:37:04 +0800
Subject: [PATCH] refactor(web): align Base UI composition contracts (#39820)

---
 .../debug/__tests__/chat-user-input.spec.tsx  |  9 ++-
 .../configuration/debug/chat-user-input.tsx   |  7 +-
 .../__tests__/index.spec.tsx                  |  9 ++-
 .../prompt-value-panel/index.tsx              |  7 +-
 .../chat-with-history/inputs-form/content.tsx |  3 +-
 .../__tests__/field-renderer.spec.tsx         | 80 +++++++++++--------
 .../human-input-content/field-renderer.tsx    |  3 +-
 .../submitted-content-item.tsx                |  3 +-
 .../embedded-chatbot/inputs-form/content.tsx  |  3 +-
 .../language-select/__tests__/index.spec.tsx  |  1 +
 .../create/step-two/language-select/index.tsx |  3 +-
 .../model-selector/popup.tsx                  |  5 +-
 .../workspace-role-checkbox-list.tsx          |  1 +
 .../share/text-generation/run-once/index.tsx  |  9 ++-
 .../workflow/block-selector/blocks.tsx        |  4 +-
 .../block-selector/featured-tools.tsx         |  2 +-
 .../block-selector/featured-triggers.tsx      | 10 +--
 .../rag-tool-recommendations/list.tsx         |  4 +-
 .../block-selector/snippets/index.tsx         |  2 +-
 .../workflow/block-selector/start-blocks.tsx  |  4 +-
 .../workflow/block-selector/tools.tsx         |  4 +-
 .../block-selector/trigger-plugin/list.tsx    |  7 +-
 .../components/before-run-form/form-item.tsx  |  5 +-
 .../components/variable/output-var-list.tsx   |  4 +-
 .../components/variable/var-type-picker.tsx   | 11 +--
 .../components/variable-in-markdown.tsx       |  3 +-
 .../visual-editor/edit-card/type-selector.tsx |  5 +-
 .../components/extract-parameter/update.tsx   |  9 ++-
 .../logs/__tests__/source-picker.spec.tsx     | 77 ++++++++++++++++++
 .../logs/components/source-picker.tsx         | 22 +++--
 .../create-guide/ui/source-step.tsx           |  1 +
 .../create-guide/ui/target-step.tsx           |  1 +
 .../ui/__tests__/source-app-picker.spec.tsx   | 13 +++
 .../create-release/ui/source-app-picker.tsx   |  7 ++
 34 files changed, 239 insertions(+), 99 deletions(-)
 create mode 100644 web/features/agent-v2/agent-detail/logs/__tests__/source-picker.spec.tsx

diff --git a/web/app/components/app/configuration/debug/__tests__/chat-user-input.spec.tsx b/web/app/components/app/configuration/debug/__tests__/chat-user-input.spec.tsx
index 401afe403de..b4506f33dcb 100644
--- a/web/app/components/app/configuration/debug/__tests__/chat-user-input.spec.tsx
+++ b/web/app/components/app/configuration/debug/__tests__/chat-user-input.spec.tsx
@@ -46,6 +46,7 @@ vi.mock('@langgenius/dify-ui/select', async () => {
   const SelectContext = React.createContext<{
     disabled?: boolean
     onValueChange?: (value: string) => void
+    value?: string | null
   }>({})
 
   return {
@@ -53,15 +54,21 @@ vi.mock('@langgenius/dify-ui/select', async () => {
       children,
       disabled,
       onValueChange,
+      value,
     }: {
       children: React.ReactNode
       disabled?: boolean
       onValueChange?: (value: string) => void
+      value?: string | null
     }) => (
-      <SelectContext.Provider value={{ disabled, onValueChange }}>
+      <SelectContext.Provider value={{ disabled, onValueChange, value }}>
         <div>{children}</div>
       </SelectContext.Provider>
     ),
+    SelectValue: ({ placeholder }: { placeholder?: React.ReactNode }) => {
+      const context = React.use(SelectContext)
+      return <>{context.value || placeholder}</>
+    },
     SelectTrigger: ({ children, className }: { children: React.ReactNode; className?: string }) => {
       const context = React.useContext(SelectContext)
       return (
diff --git a/web/app/components/app/configuration/debug/chat-user-input.tsx b/web/app/components/app/configuration/debug/chat-user-input.tsx
index 9268a2b77ba..3ad495da64a 100644
--- a/web/app/components/app/configuration/debug/chat-user-input.tsx
+++ b/web/app/components/app/configuration/debug/chat-user-input.tsx
@@ -7,6 +7,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   SelectTrigger,
+  SelectValue,
 } from '@langgenius/dify-ui/select'
 import { Textarea } from '@langgenius/dify-ui/textarea'
 import * as React from 'react'
@@ -130,9 +131,9 @@ const ChatUserInput = ({ inputs }: Props) => {
                     }}
                   >
                     <SelectTrigger className="w-full">
-                      {typeof inputs[key] === 'string' && inputs[key] !== ''
-                        ? inputs[key]
-                        : t(($) => $['placeholder.select'], { ns: 'common' })}
+                      <SelectValue
+                        placeholder={t(($) => $['placeholder.select'], { ns: 'common' })}
+                      />
                     </SelectTrigger>
                     <SelectContent>
                       {(options || []).map((option) => (
diff --git a/web/app/components/app/configuration/prompt-value-panel/__tests__/index.spec.tsx b/web/app/components/app/configuration/prompt-value-panel/__tests__/index.spec.tsx
index 66ba4f14491..4fcb36ba44a 100644
--- a/web/app/components/app/configuration/prompt-value-panel/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/__tests__/index.spec.tsx
@@ -69,20 +69,27 @@ vi.mock('@langgenius/dify-ui/select', async () => {
   const React = await import('react')
   const SelectContext = React.createContext<{
     onValueChange?: (value: string) => void
+    value?: string | null
   }>({})
 
   return {
     Select: ({
       children,
       onValueChange,
+      value,
     }: {
       children: React.ReactNode
       onValueChange?: (value: string) => void
+      value?: string | null
     }) => (
-      <SelectContext.Provider value={{ onValueChange }}>
+      <SelectContext.Provider value={{ onValueChange, value }}>
         <div>{children}</div>
       </SelectContext.Provider>
     ),
+    SelectValue: ({ placeholder }: { placeholder?: React.ReactNode }) => {
+      const context = React.use(SelectContext)
+      return <>{context.value || placeholder}</>
+    },
     SelectTrigger: ({ children }: { children: React.ReactNode }) => {
       const context = React.useContext(SelectContext)
       return (
diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx
index d409a76c12d..c7522902272 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -11,6 +11,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   SelectTrigger,
+  SelectValue,
 } from '@langgenius/dify-ui/select'
 import { Textarea } from '@langgenius/dify-ui/textarea'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
@@ -208,9 +209,9 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                         }}
                       >
                         <SelectTrigger className="w-full bg-gray-50">
-                          {typeof inputs[key] === 'string' && inputs[key] !== ''
-                            ? inputs[key]
-                            : t(($) => $['placeholder.select'], { ns: 'common' })}
+                          <SelectValue
+                            placeholder={t(($) => $['placeholder.select'], { ns: 'common' })}
+                          />
                         </SelectTrigger>
                         <SelectContent>
                           {(options || []).map((option) => (
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
index 087bb972a56..b53e238e24d 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
@@ -5,6 +5,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   SelectTrigger,
+  SelectValue,
 } from '@langgenius/dify-ui/select'
 import { Textarea } from '@langgenius/dify-ui/textarea'
 import * as React from 'react'
@@ -108,7 +109,7 @@ const InputsFormContent = ({ showTip }: Props) => {
               onValueChange={(value) => value && handleFormChange(form.variable, value)}
             >
               <SelectTrigger className="w-full">
-                {String(inputsFormValue?.[form.variable] ?? form.default ?? form.label)}
+                <SelectValue placeholder={form.label} />
               </SelectTrigger>
               <SelectContent>
                 {form.options.map((option: string) => (
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/__tests__/field-renderer.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/__tests__/field-renderer.spec.tsx
index 1ea31ba7d10..b450277debf 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/__tests__/field-renderer.spec.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/__tests__/field-renderer.spec.tsx
@@ -32,42 +32,52 @@ vi.mock('@langgenius/dify-ui/textarea', () => ({
   Textarea: MockTextarea,
 }))
 
-vi.mock('@langgenius/dify-ui/select', () => ({
-  Select: ({
-    children,
-    onValueChange,
-  }: {
-    children: React.ReactNode
-    onValueChange: (value: string | null) => void
-  }) => (
-    <div>
-      <button
-        type="button"
-        data-testid="content-item-select-root"
-        onClick={() => onValueChange('alice')}
-      >
-        select alice
+vi.mock('@langgenius/dify-ui/select', async () => {
+  const React = await import('react')
+  const SelectValueContext = React.createContext<string | null>(null)
+
+  return {
+    Select: ({
+      children,
+      onValueChange,
+      value,
+    }: {
+      children: React.ReactNode
+      onValueChange: (value: string | null) => void
+      value: string | null
+    }) => (
+      <SelectValueContext value={value}>
+        <div>
+          <button
+            type="button"
+            data-testid="content-item-select-root"
+            onClick={() => onValueChange('alice')}
+          >
+            select alice
+          </button>
+          <button
+            type="button"
+            data-testid="content-item-select-null"
+            onClick={() => onValueChange(null)}
+          >
+            select null
+          </button>
+          {children}
+        </div>
+      </SelectValueContext>
+    ),
+    SelectValue: () => <>{React.use(SelectValueContext)}</>,
+    SelectTrigger: ({ children }: { children: React.ReactNode }) => (
+      <button type="button" data-testid="content-item-select">
+        {children}
       </button>
-      <button
-        type="button"
-        data-testid="content-item-select-null"
-        onClick={() => onValueChange(null)}
-      >
-        select null
-      </button>
-      {children}
-    </div>
-  ),
-  SelectTrigger: ({ children }: { children: React.ReactNode }) => (
-    <button type="button" data-testid="content-item-select">
-      {children}
-    </button>
-  ),
-  SelectContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  SelectItem: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  SelectItemText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
-  SelectItemIndicator: () => <span>selected</span>,
-}))
+    ),
+    SelectContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    SelectItem: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    SelectItemText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
+    SelectItemIndicator: () => <span>selected</span>,
+  }
+})
 
 vi.mock('@/app/components/base/file-uploader', () => ({
   FileUploaderInAttachmentWrapper: ({
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/field-renderer.tsx b/web/app/components/base/chat/chat/answer/human-input-content/field-renderer.tsx
index 6b09c9d5430..9f1cf6dbe70 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/field-renderer.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/field-renderer.tsx
@@ -7,6 +7,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   SelectTrigger,
+  SelectValue,
 } from '@langgenius/dify-ui/select'
 import { Textarea } from '@langgenius/dify-ui/textarea'
 import * as React from 'react'
@@ -54,7 +55,7 @@ const HumanInputFieldRenderer = ({ field, value, onChange }: Props) => {
         }}
       >
         <SelectTrigger size="large" className="w-full" aria-label={field.output_variable_name}>
-          {typeof value === 'string' ? value : ''}
+          <SelectValue />
         </SelectTrigger>
         <SelectContent listClassName="max-h-[140px] overflow-y-auto">
           {options.map((option) => (
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/submitted-content-item.tsx b/web/app/components/base/chat/chat/answer/human-input-content/submitted-content-item.tsx
index 5983efbbbcf..a429e02691d 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/submitted-content-item.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/submitted-content-item.tsx
@@ -7,6 +7,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   SelectTrigger,
+  SelectValue,
 } from '@langgenius/dify-ui/select'
 import * as React from 'react'
 import { FileList } from '@/app/components/base/file-uploader'
@@ -68,7 +69,7 @@ const SubmittedContentItem = ({ content, formInputFields, values }: SubmittedCon
             aria-label={field.output_variable_name}
             disabled
           >
-            {selectedValue}
+            <SelectValue />
           </SelectTrigger>
           <SelectContent listClassName="max-h-[140px] overflow-y-auto">
             {field.option_source.value.map((option) => (
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
index b83a720a789..5e1540c6d53 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
@@ -5,6 +5,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   SelectTrigger,
+  SelectValue,
 } from '@langgenius/dify-ui/select'
 import { Textarea } from '@langgenius/dify-ui/textarea'
 import * as React from 'react'
@@ -112,7 +113,7 @@ const InputsFormContent = ({ showTip }: Props) => {
               onValueChange={(value) => value && handleFormChange(form.variable, value)}
             >
               <SelectTrigger className="w-full">
-                {String(inputsFormValue?.[form.variable] ?? form.default ?? form.label)}
+                <SelectValue placeholder={form.label} />
               </SelectTrigger>
               <SelectContent>
                 {form.options.map((option: string) => (
diff --git a/web/app/components/datasets/create/step-two/language-select/__tests__/index.spec.tsx b/web/app/components/datasets/create/step-two/language-select/__tests__/index.spec.tsx
index 1419ce18f3f..948d62158dd 100644
--- a/web/app/components/datasets/create/step-two/language-select/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/step-two/language-select/__tests__/index.spec.tsx
@@ -128,6 +128,7 @@ describe('LanguageSelect', () => {
             {children}
           </button>
         ),
+        SelectValue: ({ placeholder }: { placeholder?: React.ReactNode }) => <>{placeholder}</>,
         SelectContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
         SelectItem: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
         SelectItemText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
diff --git a/web/app/components/datasets/create/step-two/language-select/index.tsx b/web/app/components/datasets/create/step-two/language-select/index.tsx
index 486b436a6d4..96a281807b0 100644
--- a/web/app/components/datasets/create/step-two/language-select/index.tsx
+++ b/web/app/components/datasets/create/step-two/language-select/index.tsx
@@ -8,6 +8,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   SelectTrigger,
+  SelectValue,
 } from '@langgenius/dify-ui/select'
 import * as React from 'react'
 import { languages } from '@/i18n-config/language'
@@ -39,7 +40,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({ currentLanguage, onSelect, d
             'cursor-not-allowed bg-components-button-tertiary-bg-disabled text-components-button-tertiary-text-disabled hover:bg-components-button-tertiary-bg-disabled',
         )}
       >
-        {currentLanguage || <span>&nbsp;</span>}
+        <SelectValue placeholder={<span>&nbsp;</span>} />
       </SelectTrigger>
       <SelectContent placement="bottom-start" sideOffset={4} popupClassName="w-max">
         {supportedLanguages.map(({ prompt_name }) => (
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
index dcde8341b05..bd20c530e26 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
@@ -89,10 +89,7 @@ function Popup({
   )
   const { theme } = useTheme()
   const language = useLanguage()
-  const previewCardHandle = useMemo(
-    () => createPreviewCardHandle<ModelSelectorPreviewPayload>(),
-    [],
-  )
+  const [previewCardHandle] = useState(() => createPreviewCardHandle<ModelSelectorPreviewPayload>())
   const [marketplaceCollapsed, setMarketplaceCollapsed] = useState(false)
   const [showIncompatibleModels, setShowIncompatibleModels] = useState(false)
   const { modelProviders } = useProviderContext()
diff --git a/web/app/components/header/account-setting/workspace-role-checkbox-list.tsx b/web/app/components/header/account-setting/workspace-role-checkbox-list.tsx
index 763d4a76f9a..e3c40d67b3b 100644
--- a/web/app/components/header/account-setting/workspace-role-checkbox-list.tsx
+++ b/web/app/components/header/account-setting/workspace-role-checkbox-list.tsx
@@ -282,6 +282,7 @@ const WorkspaceRoleCheckboxList = ({
               </ul>
             ) : (
               <RadioGroup
+                aria-label={t(($) => $['role.workspaceRoles.title'], { ns: 'permission' })}
                 value={selectedRoleIds[0] ?? ''}
                 onValueChange={handleRadioValueChange}
                 className="flex-col items-stretch gap-0.5 pb-2"
diff --git a/web/app/components/share/text-generation/run-once/index.tsx b/web/app/components/share/text-generation/run-once/index.tsx
index 5223fbe9324..a800957fe77 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -13,6 +13,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   SelectTrigger,
+  SelectValue,
 } from '@langgenius/dify-ui/select'
 import { Textarea } from '@langgenius/dify-ui/textarea'
 import { RiLoader2Line, RiPlayLargeLine } from '@remixicon/react'
@@ -143,16 +144,16 @@ const RunOnce: FC<IRunOnceProps> = ({
                       <div className="mt-1">
                         {item.type === 'select' && (
                           <Select<string>
-                            value={selectValue}
+                            value={selectValue ?? defaultSelectValue}
                             onValueChange={(nextValue) => {
                               if (nextValue == null || nextValue === '') return
                               handleInputsChange({ ...inputsRef.current, [item.key]: nextValue })
                             }}
                           >
                             <SelectTrigger className="w-full">
-                              {selectValue ??
-                                defaultSelectValue ??
-                                t(($) => $['placeholder.select'], { ns: 'common' })}
+                              <SelectValue
+                                placeholder={t(($) => $['placeholder.select'], { ns: 'common' })}
+                              />
                             </SelectTrigger>
                             <SelectContent>
                               {(item.options || []).map((option) => (
diff --git a/web/app/components/workflow/block-selector/blocks.tsx b/web/app/components/workflow/block-selector/blocks.tsx
index 2526be204b8..a36fde13c81 100644
--- a/web/app/components/workflow/block-selector/blocks.tsx
+++ b/web/app/components/workflow/block-selector/blocks.tsx
@@ -6,7 +6,7 @@ import {
   PreviewCardTrigger,
 } from '@langgenius/dify-ui/preview-card'
 import { groupBy } from 'es-toolkit/compat'
-import { Fragment, memo, useCallback, useId, useMemo } from 'react'
+import { Fragment, memo, useCallback, useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStoreApi } from 'reactflow'
 import Badge from '@/app/components/base/badge'
@@ -36,7 +36,7 @@ const Blocks = ({
   const { t } = useTranslation()
   const store = useStoreApi()
   const blocksFromHooks = useBlocks()
-  const previewCardHandle = useMemo(() => createPreviewCardHandle<BlockPreviewPayload>(), [])
+  const [previewCardHandle] = useState(() => createPreviewCardHandle<BlockPreviewPayload>())
   const previewDescriptionBaseId = useId()
 
   // Use external blocks if provided, otherwise fallback to hook-based blocks
diff --git a/web/app/components/workflow/block-selector/featured-tools.tsx b/web/app/components/workflow/block-selector/featured-tools.tsx
index 23972a1a417..225ca1c2823 100644
--- a/web/app/components/workflow/block-selector/featured-tools.tsx
+++ b/web/app/components/workflow/block-selector/featured-tools.tsx
@@ -60,7 +60,7 @@ const FeaturedTools = ({
 }: FeaturedToolsProps) => {
   const { t } = useTranslation()
   const language = useGetLanguage()
-  const previewCardHandle = useMemo(() => createPreviewCardHandle<FeaturedToolPreviewPayload>(), [])
+  const [previewCardHandle] = useState(() => createPreviewCardHandle<FeaturedToolPreviewPayload>())
   const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE_COUNT)
   const [visibleCountPlugins, setVisibleCountPlugins] = useState(plugins)
   const [isCollapsed, setIsCollapsed] = useFeaturedToolsCollapsed()
diff --git a/web/app/components/workflow/block-selector/featured-triggers.tsx b/web/app/components/workflow/block-selector/featured-triggers.tsx
index 6398b4fde75..97ed6fa9cbb 100644
--- a/web/app/components/workflow/block-selector/featured-triggers.tsx
+++ b/web/app/components/workflow/block-selector/featured-triggers.tsx
@@ -58,13 +58,11 @@ const FeaturedTriggers = ({
 }: FeaturedTriggersProps) => {
   const { t } = useTranslation()
   const language = useGetLanguage()
-  const previewCardHandle = useMemo(
-    () => createPreviewCardHandle<FeaturedTriggerPreviewPayload>(),
-    [],
+  const [previewCardHandle] = useState(() =>
+    createPreviewCardHandle<FeaturedTriggerPreviewPayload>(),
   )
-  const triggerActionPreviewCardHandle = useMemo(
-    () => createPreviewCardHandle<TriggerPluginActionPreviewPayload>(),
-    [],
+  const [triggerActionPreviewCardHandle] = useState(() =>
+    createPreviewCardHandle<TriggerPluginActionPreviewPayload>(),
   )
   const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE_COUNT)
   const [visibleCountPlugins, setVisibleCountPlugins] = useState(plugins)
diff --git a/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx b/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
index 5ffea50c7e8..124f5cef802 100644
--- a/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
+++ b/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
@@ -5,7 +5,7 @@ import type { Plugin } from '@/app/components/plugins/types'
 import type { OnSelectBlock } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
 import { createPreviewCardHandle, PreviewCard } from '@langgenius/dify-ui/preview-card'
-import { useCallback, useMemo, useRef } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { useGetLanguage } from '@/context/i18n'
 import { createToolListData } from '../tool-list-data'
 import { ToolActionPreviewCard } from '../tool/action-item'
@@ -24,7 +24,7 @@ type ListProps = {
 
 const List = ({ onSelect, tools, viewType, unInstalledPlugins, className }: ListProps) => {
   const language = useGetLanguage()
-  const previewCardHandle = useMemo(() => createPreviewCardHandle<ToolActionPreviewPayload>(), [])
+  const [previewCardHandle] = useState(() => createPreviewCardHandle<ToolActionPreviewPayload>())
   const isFlatView = viewType === ViewType.flat
 
   const { letters, flatTools, treeGroups } = useMemo(
diff --git a/web/app/components/workflow/block-selector/snippets/index.tsx b/web/app/components/workflow/block-selector/snippets/index.tsx
index e19875d1483..fd94f43f155 100644
--- a/web/app/components/workflow/block-selector/snippets/index.tsx
+++ b/web/app/components/workflow/block-selector/snippets/index.tsx
@@ -68,7 +68,7 @@ const Snippets = ({ searchText, onSearchTextChange, insertPayload, onInserted }:
   const deferredSearchText = useDeferredValue(searchText)
   const viewportRef = useRef<HTMLDivElement>(null)
   const [tagIds, setTagIds] = useState<string[]>([])
-  const previewCardHandle = useMemo(() => createPreviewCardHandle<SnippetListItemData>(), [])
+  const [previewCardHandle] = useState(() => createPreviewCardHandle<SnippetListItemData>())
 
   const keyword = deferredSearchText.trim() || undefined
 
diff --git a/web/app/components/workflow/block-selector/start-blocks.tsx b/web/app/components/workflow/block-selector/start-blocks.tsx
index 6e3db52bb16..c754c4c78e0 100644
--- a/web/app/components/workflow/block-selector/start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/start-blocks.tsx
@@ -7,7 +7,7 @@ import {
   PreviewCardTrigger,
 } from '@langgenius/dify-ui/preview-card'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
-import { Fragment, memo, useCallback, useEffect, useId, useMemo } from 'react'
+import { Fragment, memo, useCallback, useEffect, useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
 import BlockIcon from '../block-icon'
@@ -46,7 +46,7 @@ const StartBlocks = ({
 }: StartBlocksProps) => {
   const { t } = useTranslation()
   const nodes = useNodes()
-  const previewCardHandle = useMemo(() => createPreviewCardHandle<StartBlockPreviewPayload>(), [])
+  const [previewCardHandle] = useState(() => createPreviewCardHandle<StartBlockPreviewPayload>())
   const previewDescriptionBaseId = useId()
 
   const filteredBlocks = useMemo(() => {
diff --git a/web/app/components/workflow/block-selector/tools.tsx b/web/app/components/workflow/block-selector/tools.tsx
index 43f0eca71e7..91b28861710 100644
--- a/web/app/components/workflow/block-selector/tools.tsx
+++ b/web/app/components/workflow/block-selector/tools.tsx
@@ -3,7 +3,7 @@ import type { ToolActionPreviewPayload } from './tool/action-item'
 import type { ToolDefaultValue, ToolType, ToolValue } from './types'
 import { cn } from '@langgenius/dify-ui/cn'
 import { createPreviewCardHandle, PreviewCard } from '@langgenius/dify-ui/preview-card'
-import { memo, useMemo, useRef } from 'react'
+import { memo, useMemo, useRef, useState } from 'react'
 import Empty from '@/app/components/tools/provider/empty'
 import { useGetLanguage } from '@/context/i18n'
 import { IndexBar } from './index-bar'
@@ -40,7 +40,7 @@ const Tools = ({
   selectedTools,
 }: ToolsProps) => {
   const language = useGetLanguage()
-  const previewCardHandle = useMemo(() => createPreviewCardHandle<ToolActionPreviewPayload>(), [])
+  const [previewCardHandle] = useState(() => createPreviewCardHandle<ToolActionPreviewPayload>())
   const isFlatView = viewType === ViewType.flat
   const isShowLetterIndex = isFlatView && tools.length > 10
 
diff --git a/web/app/components/workflow/block-selector/trigger-plugin/list.tsx b/web/app/components/workflow/block-selector/trigger-plugin/list.tsx
index e4c76cccba2..256ec1402b8 100644
--- a/web/app/components/workflow/block-selector/trigger-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/trigger-plugin/list.tsx
@@ -3,7 +3,7 @@ import type { BlockEnum } from '../../types'
 import type { TriggerDefaultValue, TriggerWithProvider } from '../types'
 import type { TriggerPluginActionPreviewPayload } from './action-item'
 import { createPreviewCardHandle, PreviewCard } from '@langgenius/dify-ui/preview-card'
-import { memo, useEffect, useMemo } from 'react'
+import { memo, useEffect, useMemo, useState } from 'react'
 import { useGetLanguage } from '@/context/i18n'
 import { useAllTriggerPlugins } from '@/service/use-triggers'
 import { TriggerPluginActionPreviewCard } from './action-item'
@@ -25,9 +25,8 @@ const TriggerPluginList = ({
 }: TriggerPluginListProps) => {
   const { data: triggerPluginsData } = useAllTriggerPlugins()
   const language = useGetLanguage()
-  const previewCardHandle = useMemo(
-    () => createPreviewCardHandle<TriggerPluginActionPreviewPayload>(),
-    [],
+  const [previewCardHandle] = useState(() =>
+    createPreviewCardHandle<TriggerPluginActionPreviewPayload>(),
   )
 
   const normalizedSearch = searchText.trim().toLowerCase()
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
index 13edee51ce1..3e53916b6e4 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -10,6 +10,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   SelectTrigger,
+  SelectValue,
 } from '@langgenius/dify-ui/select'
 import { Textarea } from '@langgenius/dify-ui/textarea'
 import { RiDeleteBinLine } from '@remixicon/react'
@@ -198,9 +199,7 @@ const FormItem: FC<Props> = ({
             }}
           >
             <SelectTrigger className="w-full">
-              {String(
-                value || payload.default || t(($) => $['placeholder.select'], { ns: 'common' }),
-              )}
+              <SelectValue placeholder={t(($) => $['placeholder.select'], { ns: 'common' })} />
             </SelectTrigger>
             <SelectContent>
               {(payload.options || []).map((option) => (
diff --git a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
index 1e276f20cce..71f260082e5 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
@@ -76,10 +76,10 @@ const OutputVarList: FC<Props> = ({ readonly, outputs, outputKeyOrders, onChange
 
   const handleVarTypeChange = useCallback(
     (index: number) => {
-      return (value: string) => {
+      return (value: VarType) => {
         const key = list[index]!.variable
         const newOutputs = produce(outputs, (draft) => {
-          draft[key]!.type = value as VarType
+          draft[key]!.type = value
         })
         onChange(newOutputs)
       }
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 26cff721527..b1fb87e1db5 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
@@ -8,6 +8,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   SelectTrigger,
+  SelectValue,
 } from '@langgenius/dify-ui/select'
 import * as React from 'react'
 import { VarType } from '@/app/components/workflow/types'
@@ -15,8 +16,8 @@ import { VarType } from '@/app/components/workflow/types'
 type Props = Readonly<{
   className?: string
   readonly: boolean
-  value: string
-  onChange: (value: string) => void
+  value: VarType
+  onChange: (value: VarType) => void
 }>
 
 const TYPES = [
@@ -32,7 +33,7 @@ const TYPES = [
 const VarReferencePicker: FC<Props> = ({ readonly, className, value, onChange }) => {
   return (
     <div className={cn(className, !readonly && 'cursor-pointer select-none')}>
-      <Select
+      <Select<VarType>
         value={value}
         readOnly={readonly}
         onValueChange={(type) => {
@@ -43,7 +44,7 @@ const VarReferencePicker: FC<Props> = ({ readonly, className, value, onChange })
           className="h-8 w-30 cursor-pointer rounded-lg px-2.5 text-[13px] text-text-primary"
           title={value}
         >
-          <span className="capitalize">{value}</span>
+          <SelectValue className="capitalize" />
         </SelectTrigger>
         <SelectContent
           sideOffset={4}
@@ -51,7 +52,7 @@ const VarReferencePicker: FC<Props> = ({ readonly, className, value, onChange })
           listClassName="p-0"
         >
           {TYPES.map((type) => (
-            <SelectItem
+            <SelectItem<VarType>
               key={type}
               value={type}
               className="h-7.5 rounded-lg pr-2 pl-3 text-[13px] text-text-primary"
diff --git a/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx b/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
index ec529a11f42..ddddfb60111 100644
--- a/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
@@ -9,6 +9,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   SelectTrigger,
+  SelectValue,
 } from '@langgenius/dify-ui/select'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -156,7 +157,7 @@ const SelectPreview: React.FC<{ label: string; options: string[] }> = ({ label,
           className="w-full rounded-[10px]"
           aria-label="human-input-note-select"
         >
-          {value}
+          <SelectValue />
         </SelectTrigger>
         <SelectContent listClassName="max-h-[140px] overflow-y-auto">
           {options.map((option) => (
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
index 80c0ada624d..5d3f7edf529 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
@@ -8,6 +8,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   SelectTrigger,
+  SelectValue,
 } from '@langgenius/dify-ui/select'
 import { RiCheckLine } from '@remixicon/react'
 import { useState } from 'react'
@@ -43,7 +44,7 @@ const TypeSelector: FC<TypeSelectorProps> = ({ items, currentValue, onSelect, po
           open && 'bg-state-base-hover',
         )}
       >
-        <span className="system-xs-medium text-text-tertiary">{currentValue}</span>
+        <SelectValue className="system-xs-medium text-text-tertiary" />
       </SelectTrigger>
       <SelectContent
         sideOffset={4}
@@ -54,7 +55,7 @@ const TypeSelector: FC<TypeSelectorProps> = ({ items, currentValue, onSelect, po
         {items.map((item) => {
           const isSelected = item.value === currentValue
           return (
-            <SelectItem
+            <SelectItem<Type | ArrayType>
               key={item.value}
               value={item.value}
               className="gap-x-1 rounded-lg px-2 py-1"
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index deccf49a7d3..cc3b4c35948 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -11,6 +11,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   SelectTrigger,
+  SelectValue,
 } from '@langgenius/dify-ui/select'
 import { Switch } from '@langgenius/dify-ui/switch'
 import { Textarea } from '@langgenius/dify-ui/textarea'
@@ -189,14 +190,16 @@ const AddExtractParameter: FC<Props> = ({ type, payload, onSave, onCancel }) =>
                     ns: 'workflow',
                   })}
                 >
-                  <Select
+                  <Select<ParamType>
                     value={param.type}
                     onValueChange={(value) => value && handleParamChange('type')(value)}
                   >
-                    <SelectTrigger className="w-full capitalize">{param.type}</SelectTrigger>
+                    <SelectTrigger className="w-full capitalize">
+                      <SelectValue />
+                    </SelectTrigger>
                     <SelectContent>
                       {TYPES.map((type) => (
-                        <SelectItem key={type} value={type} className="capitalize">
+                        <SelectItem<ParamType> key={type} value={type} className="capitalize">
                           <SelectItemText className="capitalize">{type}</SelectItemText>
                           <SelectItemIndicator />
                         </SelectItem>
diff --git a/web/features/agent-v2/agent-detail/logs/__tests__/source-picker.spec.tsx b/web/features/agent-v2/agent-detail/logs/__tests__/source-picker.spec.tsx
new file mode 100644
index 00000000000..c6395efeb9c
--- /dev/null
+++ b/web/features/agent-v2/agent-detail/logs/__tests__/source-picker.spec.tsx
@@ -0,0 +1,77 @@
+import type {
+  AgentLogSourceGroupResponse,
+  AgentLogSourceResponse,
+} from '@dify/contracts/api/console/agent/types.gen'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { AgentLogSourcePicker } from '../components/source-picker'
+
+const sources = {
+  webapp: {
+    app_id: 'webapp-app-id',
+    app_name: 'Book Translation',
+    id: 'webapp:webapp-app-id',
+    type: 'webapp',
+  },
+  workflow: {
+    app_id: 'workflow-app-id',
+    app_name: 'SVG Logo Design',
+    id: 'workflow:workflow-app-id:workflow-id:v3:agent-node-id',
+    node_id: 'agent-node-id',
+    type: 'workflow',
+    workflow_id: 'workflow-id',
+    workflow_version: 'v3',
+  },
+} satisfies Record<string, AgentLogSourceResponse>
+
+const groups: AgentLogSourceGroupResponse[] = [
+  {
+    label: 'Webapp',
+    type: 'webapp',
+    sources: [sources.webapp],
+  },
+  {
+    label: 'Workflow',
+    type: 'workflow',
+    sources: [sources.workflow],
+  },
+]
+
+describe('AgentLogSourcePicker', () => {
+  it('should filter sources across groups and only show empty when no source matches', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <AgentLogSourcePicker
+        value={[]}
+        groups={groups}
+        isLoading={false}
+        isError={false}
+        onRetry={vi.fn()}
+        onChange={vi.fn()}
+      />,
+    )
+
+    await user.click(
+      screen.getByRole('combobox', {
+        name: 'agentV2.agentDetail.logs.filters.source.label',
+      }),
+    )
+    const searchInput = screen.getByRole('combobox', {
+      name: 'agentV2.agentDetail.logs.filters.source.searchLabel',
+    })
+    await user.type(searchInput, 'Book')
+
+    expect(screen.getByRole('option', { name: /Book Translation/ })).toBeInTheDocument()
+    expect(screen.queryByRole('option', { name: /SVG Logo Design/ })).not.toBeInTheDocument()
+    expect(
+      screen.queryByText('agentV2.agentDetail.logs.filters.source.empty'),
+    ).not.toBeInTheDocument()
+
+    await user.clear(searchInput)
+    await user.type(searchInput, 'Missing source')
+
+    expect(screen.queryByRole('option')).not.toBeInTheDocument()
+    expect(screen.getByText('agentV2.agentDetail.logs.filters.source.empty')).toBeInTheDocument()
+  })
+})
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 971dab79a1b..db188fef3bf 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
@@ -21,7 +21,7 @@ import {
   ComboboxTrigger,
   ComboboxValue,
 } from '@langgenius/dify-ui/combobox'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { LogSourceIcon } from './source-icon'
 
@@ -35,6 +35,10 @@ const getSourceGroupLabel = (group: AgentLogSourceGroupResponse, t: TFunction<'a
 
 const getSourceLabel = (source: AgentLogSourceResponse) => source.app_name
 
+type AgentLogSourceComboboxGroup = Omit<AgentLogSourceGroupResponse, 'sources'> & {
+  items: AgentLogSourceResponse[]
+}
+
 export function AgentLogSourcePicker({
   value,
   groups,
@@ -53,13 +57,17 @@ export function AgentLogSourcePicker({
   const { t } = useTranslation('agentV2')
   const { t: tCommon } = useTranslation('common')
   const [inputValue, setInputValue] = useState('')
-  const sources = groups.flatMap((group) => group.sources ?? [])
+  const sourceGroups = useMemo<AgentLogSourceComboboxGroup[]>(
+    () => groups.map(({ sources, ...group }) => ({ ...group, items: sources ?? [] })),
+    [groups],
+  )
+  const sources = sourceGroups.flatMap((group) => group.items)
   const selectedSources = sources.filter((source) => value.includes(source.id))
 
   return (
     <Combobox<AgentLogSourceResponse, true>
       multiple
-      items={groups}
+      items={sourceGroups}
       value={selectedSources}
       itemToStringLabel={getSourceLabel}
       onValueChange={(nextSources) => {
@@ -112,9 +120,9 @@ export function AgentLogSourcePicker({
         )}
         {!isLoading && !isError && (
           <>
-            <ComboboxList className="max-h-69 p-2 pt-1">
-              {groups.map((group) => (
-                <ComboboxGroup key={group.type} items={group.sources ?? []}>
+            <ComboboxList<AgentLogSourceComboboxGroup> className="max-h-69 p-2 pt-1">
+              {(group) => (
+                <ComboboxGroup key={group.type} items={group.items}>
                   <ComboboxGroupLabel className="px-1 pt-2 pb-1">
                     {getSourceGroupLabel(group, t)}
                   </ComboboxGroupLabel>
@@ -134,7 +142,7 @@ export function AgentLogSourcePicker({
                     )}
                   </ComboboxCollection>
                 </ComboboxGroup>
-              ))}
+              )}
             </ComboboxList>
             <ComboboxEmpty className="px-3 py-3 text-center system-xs-regular">
               {t(($) => $['agentDetail.logs.filters.source.empty'])}
diff --git a/web/features/deployments/create-guide/ui/source-step.tsx b/web/features/deployments/create-guide/ui/source-step.tsx
index ad943e83dd3..d18f8736592 100644
--- a/web/features/deployments/create-guide/ui/source-step.tsx
+++ b/web/features/deployments/create-guide/ui/source-step.tsx
@@ -77,6 +77,7 @@ function SourceMethodSection() {
       hideHeader
     >
       <RadioGroup<GuideMethod>
+        aria-label={t(($) => $['createGuide.steps.method'])}
         value={method}
         onValueChange={selectMethod}
         className="flex flex-col items-stretch gap-2 sm:flex-row"
diff --git a/web/features/deployments/create-guide/ui/target-step.tsx b/web/features/deployments/create-guide/ui/target-step.tsx
index 78281844506..f50cff3f941 100644
--- a/web/features/deployments/create-guide/ui/target-step.tsx
+++ b/web/features/deployments/create-guide/ui/target-step.tsx
@@ -90,6 +90,7 @@ function TargetEnvironmentSection() {
       </div>
       {hasEnvironmentOptions ? (
         <RadioGroup<string>
+          aria-label={t(($) => $['createGuide.target.environment'])}
           value={effectiveSelectedEnvironmentId}
           onValueChange={selectEnvironment}
           className="grid grid-cols-1 items-stretch gap-3 lg:grid-cols-2"
diff --git a/web/features/deployments/create-release/ui/__tests__/source-app-picker.spec.tsx b/web/features/deployments/create-release/ui/__tests__/source-app-picker.spec.tsx
index 98445eafbae..9c625a019fe 100644
--- a/web/features/deployments/create-release/ui/__tests__/source-app-picker.spec.tsx
+++ b/web/features/deployments/create-release/ui/__tests__/source-app-picker.spec.tsx
@@ -155,4 +155,17 @@ describe('SourceAppPicker', () => {
       screen.queryByRole('button', { name: /createModal\.loadMoreApps/ }),
     ).not.toBeInTheDocument()
   })
+
+  it('should restore the selected app by business identity', async () => {
+    const user = userEvent.setup()
+
+    renderSourceAppPicker(false)
+
+    await user.click(screen.getByRole('combobox', { name: 'deployments.versions.sourceAppOption' }))
+
+    expect(screen.getByRole('option', { name: /Workflow App/ })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    )
+  })
 })
diff --git a/web/features/deployments/create-release/ui/source-app-picker.tsx b/web/features/deployments/create-release/ui/source-app-picker.tsx
index f34cfe6ff60..9f07fa902ff 100644
--- a/web/features/deployments/create-release/ui/source-app-picker.tsx
+++ b/web/features/deployments/create-release/ui/source-app-picker.tsx
@@ -41,6 +41,10 @@ function sourceAppSearchText(app: App) {
   return `${app.name} ${app.id}`.toLowerCase()
 }
 
+function isSameApp(app: App, selectedApp: App) {
+  return app.id === selectedApp.id
+}
+
 function SourceAppTrigger({ app }: { app?: SourceAppPickerValue }) {
   const { t } = useTranslation('deployments')
 
@@ -144,6 +148,7 @@ export function SourceAppPicker({
   const sourceAppsIsFetching = useAtomValue(createReleaseSourceAppsIsFetchingAtom)
   const sourceAppsIsFetchingNextPage = useAtomValue(createReleaseSourceAppsIsFetchingNextPageAtom)
   const sourceAppsIsLoading = useAtomValue(createReleaseSourceAppsIsLoadingAtom)
+  const selectedApp = apps.find((app) => app.id === value?.id) ?? null
   const { rootRef, sentinelRef } = useInfiniteScroll<HTMLDivElement>(
     {
       error: sourceAppsError,
@@ -163,8 +168,10 @@ export function SourceAppPicker({
   return (
     <Combobox<App>
       items={apps}
+      value={selectedApp}
       open={!disabled && isShow}
       inputValue={searchText}
+      isItemEqualToValue={isSameApp}
       onOpenChange={(open) => {
         setIsShow(disabled ? false : open)
       }}