Merge branch 'main' into 4-27-app-deploy

.github/actions/setup-web/action.yml

@@ -5,11 +5,11 @@ runs:
   using: composite
   steps:
     - name: Setup pnpm
-      uses: pnpm/action-setup@8912a9102ac27614460f54aedde9e1e7f9aec20d # v6.0.5
+      uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
       with:
         run_install: false
     - name: Setup Vite+
-      uses: voidzero-dev/setup-vp@4f5aa3e38c781f1b01e78fb9255527cee8a6efa6 # v1.8.0
+      uses: voidzero-dev/setup-vp@ca1c46663915d6c1042ae23bd39ab85718bfb0fa # v1.10.0
       with:
         node-version-file: .nvmrc
         cache: true

.github/workflows/api-tests.yml

@@ -195,7 +195,7 @@ jobs:
 
       - name: Report coverage
         if: ${{ env.CODECOV_TOKEN != '' }}
-        uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6.0.0
+        uses: codecov/codecov-action@e79a6962e0d4c0c17b229090214935d2e33f8354 # v6.0.1
         with:
           files: ./coverage.xml
           disable_search: true

.github/workflows/translate-i18n-claude.yml

@@ -158,7 +158,7 @@ jobs:
 
       - name: Run Claude Code for Translation Sync
         if: steps.context.outputs.CHANGED_FILES != ''
-        uses: anthropics/claude-code-action@476e359e6203e73dad705c8b322e333fabbd7416 # v1.0.119
+        uses: anthropics/claude-code-action@1dc994ee7a008f0ecc866d9ac23ef036b7229f84 # v1.0.127
         with:
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
           github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/web-tests.yml

@@ -83,7 +83,7 @@ jobs:
 
       - name: Report coverage
         if: ${{ env.CODECOV_TOKEN != '' }}
-        uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6.0.0
+        uses: codecov/codecov-action@e79a6962e0d4c0c17b229090214935d2e33f8354 # v6.0.1
         with:
           directory: web/coverage
           flags: web
@@ -117,7 +117,7 @@ jobs:
 
       - name: Report coverage
         if: ${{ env.CODECOV_TOKEN != '' }}
-        uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6.0.0
+        uses: codecov/codecov-action@e79a6962e0d4c0c17b229090214935d2e33f8354 # v6.0.1
         with:
           directory: packages/dify-ui/coverage
           flags: dify-ui

api/core/memory/token_buffer_memory.py

@@ -235,10 +235,11 @@ class TokenBufferMemory:
             if isinstance(m.content, list):
                 inner_msg = ""
                 for content in m.content:
-                    if isinstance(content, TextPromptMessageContent):
-                        inner_msg += f"{content.data}\n"
-                    elif isinstance(content, ImagePromptMessageContent):
-                        inner_msg += "[image]\n"
+                    match content:
+                        case TextPromptMessageContent():
+                            inner_msg += f"{content.data}\n"
+                        case ImagePromptMessageContent():
+                            inner_msg += "[image]\n"
 
                 string_messages.append(f"{role}: {inner_msg.strip()}")
             else:

api/core/tools/tool_label_manager.py

@@ -79,12 +79,13 @@ class ToolLabelManager:
         :return: list of tool labels (str)
         """
 
-        if isinstance(controller, ApiToolProviderController | WorkflowToolProviderController):
-            provider_id = controller.provider_id
-        elif isinstance(controller, BuiltinToolProviderController):
-            return controller.tool_labels
-        else:
-            raise ValueError("Unsupported tool type")
+        match controller:
+            case ApiToolProviderController() | WorkflowToolProviderController():
+                provider_id = controller.provider_id
+            case BuiltinToolProviderController():
+                return controller.tool_labels
+            case _:
+                raise ValueError("Unsupported tool type")
         stmt = select(ToolLabelBinding.label_name).where(
             ToolLabelBinding.tool_id == provider_id,
             ToolLabelBinding.tool_type == controller.provider_type,

api/services/rag_pipeline/rag_pipeline.py

@@ -618,26 +618,27 @@ class RagPipelineService:
             for key, value in datasource_parameters.items():
                 param_value = value.get("value")
 
-                if not param_value:
-                    variables_map[key] = param_value
-                elif isinstance(param_value, str):
-                    # handle string type parameter value, check if it contains variable reference pattern
-                    pattern = r"\{\{#([a-zA-Z0-9_]{1,50}(?:\.[a-zA-Z0-9_][a-zA-Z0-9_]{0,29}){1,10})#\}\}"
-                    match = re.match(pattern, param_value)
-                    if match:
-                        # extract variable path and try to get value from user inputs
-                        full_path = match.group(1)
-                        last_part = full_path.split(".")[-1]
-                        variables_map[key] = user_inputs.get(last_part, param_value)
-                    else:
+                match param_value:
+                    case None | "" | [] | {}:
+                        variables_map[key] = param_value
+                    case str():
+                        # handle string type parameter value, check if it contains variable reference pattern
+                        pattern = r"\{\{#([a-zA-Z0-9_]{1,50}(?:\.[a-zA-Z0-9_][a-zA-Z0-9_]{0,29}){1,10})#\}\}"
+                        match_result = re.match(pattern, param_value)
+                        if match_result:
+                            # extract variable path and try to get value from user inputs
+                            full_path = match_result.group(1)
+                            last_part = full_path.split(".")[-1]
+                            variables_map[key] = user_inputs.get(last_part, param_value)
+                        else:
+                            variables_map[key] = param_value
+                    case list() if param_value:
+                        # handle list type parameter value, check if the last element is in user inputs
+                        last_part = param_value[-1]
+                        variables_map[key] = user_inputs.get(last_part, param_value)
+                    case _:
+                        # other type directly use original value
                         variables_map[key] = param_value
-                elif isinstance(param_value, list) and param_value:
-                    # handle list type parameter value, check if the last element is in user inputs
-                    last_part = param_value[-1]
-                    variables_map[key] = user_inputs.get(last_part, param_value)
-                else:
-                    # other type directly use original value
-                    variables_map[key] = param_value
 
             from core.datasource.datasource_manager import DatasourceManager
 

api/services/tools/tools_transform_service.py

@@ -78,32 +78,33 @@ class ToolTransformService:
         :param tenant_id: the tenant id
         :param provider: the provider dict
         """
-        if isinstance(provider, dict) and "icon" in provider:
-            provider["icon"] = ToolTransformService.get_tool_provider_icon_url(
-                provider_type=provider["type"], provider_name=provider["name"], icon=provider["icon"]
-            )
-        elif isinstance(provider, ToolProviderApiEntity):
-            if provider.plugin_id:
-                if isinstance(provider.icon, str):
-                    provider.icon = PluginService.get_plugin_icon_url(tenant_id=tenant_id, filename=provider.icon)
-                if isinstance(provider.icon_dark, str) and provider.icon_dark:
-                    provider.icon_dark = PluginService.get_plugin_icon_url(
-                        tenant_id=tenant_id, filename=provider.icon_dark
-                    )
-            else:
-                provider.icon = ToolTransformService.get_tool_provider_icon_url(
-                    provider_type=provider.type.value, provider_name=provider.name, icon=provider.icon
+        match provider:
+            case dict() if "icon" in provider:
+                provider["icon"] = ToolTransformService.get_tool_provider_icon_url(
+                    provider_type=provider["type"], provider_name=provider["name"], icon=provider["icon"]
                 )
-                if provider.icon_dark:
-                    provider.icon_dark = ToolTransformService.get_tool_provider_icon_url(
-                        provider_type=provider.type.value, provider_name=provider.name, icon=provider.icon_dark
-                    )
-        elif isinstance(provider, PluginDatasourceProviderEntity):
-            if provider.plugin_id:
-                if isinstance(provider.declaration.identity.icon, str):
-                    provider.declaration.identity.icon = PluginService.get_plugin_icon_url(
-                        tenant_id=tenant_id, filename=provider.declaration.identity.icon
+            case ToolProviderApiEntity():
+                if provider.plugin_id:
+                    if isinstance(provider.icon, str):
+                        provider.icon = PluginService.get_plugin_icon_url(tenant_id=tenant_id, filename=provider.icon)
+                    if isinstance(provider.icon_dark, str) and provider.icon_dark:
+                        provider.icon_dark = PluginService.get_plugin_icon_url(
+                            tenant_id=tenant_id, filename=provider.icon_dark
+                        )
+                else:
+                    provider.icon = ToolTransformService.get_tool_provider_icon_url(
+                        provider_type=provider.type.value, provider_name=provider.name, icon=provider.icon
                     )
+                    if provider.icon_dark:
+                        provider.icon_dark = ToolTransformService.get_tool_provider_icon_url(
+                            provider_type=provider.type.value, provider_name=provider.name, icon=provider.icon_dark
+                        )
+            case PluginDatasourceProviderEntity():
+                if provider.plugin_id:
+                    if isinstance(provider.declaration.identity.icon, str):
+                        provider.declaration.identity.icon = PluginService.get_plugin_icon_url(
+                            tenant_id=tenant_id, filename=provider.declaration.identity.icon
+                        )
 
     @classmethod
     def builtin_provider_to_user_provider(

eslint-suppressions.json

@@ -1023,14 +1023,6 @@
       "count": 2
     }
   },
-  "web/app/components/base/ga/index.tsx": {
-    "erasable-syntax-only/enums": {
-      "count": 1
-    },
-    "react-refresh/only-export-components": {
-      "count": 1
-    }
-  },
   "web/app/components/base/icons/src/public/avatar/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 2

package.json

@@ -2,7 +2,7 @@
   "name": "dify",
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@11.1.1",
+  "packageManager": "pnpm@11.1.3",
   "engines": {
     "node": "^22.22.1"
   },

pnpm-workspace.yaml

@@ -29,6 +29,7 @@ overrides:
   '@lexical/code': npm:lexical-code-no-prism@0.41.0
   '@monaco-editor/loader': 1.7.0
   brace-expansion@>=2.0.0 <2.0.3: 2.0.3
+  brace-expansion@>=5.0.0 <5.0.6: ^5.0.6
   canvas: ^3.2.2
   dompurify@<3.4.0: ^3.4.0
   dompurify@<=3.3.3: ^3.3.4
@@ -53,26 +54,27 @@ overrides:
   svgo@>=3.0.0 <3.3.3: 3.3.3
   tar@<=7.5.10: 7.5.11
   undici@>=7.0.0 <7.24.0: 7.24.0
-  vite: npm:@voidzero-dev/vite-plus-core@0.1.20
-  vitest: npm:@voidzero-dev/vite-plus-test@0.1.20
+  vite: npm:@voidzero-dev/vite-plus-core@0.1.21
+  vitest: npm:@voidzero-dev/vite-plus-test@0.1.21
+  ws@>=8.0.0 <8.20.1: ^8.20.1
   yaml@>=2.0.0 <2.8.3: 2.8.3
   yauzl@<3.2.1: 3.2.1
 catalog:
-  '@amplitude/analytics-browser': 2.42.2
-  '@amplitude/plugin-session-replay-browser': 1.30.3
+  '@amplitude/analytics-browser': 2.42.3
+  '@amplitude/plugin-session-replay-browser': 1.30.4
   '@antfu/eslint-config': 9.0.0
   '@base-ui/react': 1.4.1
-  '@chromatic-com/storybook': 5.1.2
-  '@cucumber/cucumber': 12.8.3
+  '@chromatic-com/storybook': 5.2.1
+  '@cucumber/cucumber': 12.9.0
   '@egoist/tailwindcss-icons': 1.9.2
   '@emoji-mart/data': 1.2.1
-  '@eslint-react/eslint-plugin': 5.7.7
+  '@eslint-react/eslint-plugin': 5.8.1
   '@eslint/js': 10.0.1
   '@floating-ui/react': 0.27.19
-  '@formatjs/intl-localematcher': 0.8.7
+  '@formatjs/intl-localematcher': 0.8.8
   '@heroicons/react': 2.2.0
-  '@hey-api/openapi-ts': 0.97.1
-  '@hono/node-server': 2.0.2
+  '@hey-api/openapi-ts': 0.97.2
+  '@hono/node-server': 2.0.3
   '@iconify-json/heroicons': 1.2.3
   '@iconify-json/ri': 1.2.10
   '@lexical/code': 0.44.0
@@ -96,46 +98,46 @@ catalog:
   '@remixicon/react': 4.9.0
   '@rgrove/parse-xml': 4.2.0
   '@sentry/react': 10.53.1
-  '@storybook/addon-docs': 10.3.6
-  '@storybook/addon-links': 10.3.6
-  '@storybook/addon-onboarding': 10.3.6
-  '@storybook/addon-themes': 10.3.6
-  '@storybook/nextjs-vite': 10.3.6
-  '@storybook/react': 10.3.6
-  '@storybook/react-vite': 10.3.6
+  '@storybook/addon-docs': 10.4.0
+  '@storybook/addon-links': 10.4.0
+  '@storybook/addon-onboarding': 10.4.0
+  '@storybook/addon-themes': 10.4.0
+  '@storybook/nextjs-vite': 10.4.0
+  '@storybook/react': 10.4.0
+  '@storybook/react-vite': 10.4.0
   '@streamdown/math': 1.0.2
   '@svgdotjs/svg.js': 3.2.5
   '@t3-oss/env-nextjs': 0.13.11
   '@tailwindcss/postcss': 4.3.0
   '@tailwindcss/typography': 0.5.19
   '@tailwindcss/vite': 4.3.0
-  '@tanstack/eslint-plugin-query': 5.100.10
-  '@tanstack/react-devtools': 0.10.3
+  '@tanstack/eslint-plugin-query': 5.100.11
+  '@tanstack/react-devtools': 0.10.5
   '@tanstack/react-form': 1.32.0
   '@tanstack/react-form-devtools': 0.2.27
   '@tanstack/react-hotkeys': 0.10.0
-  '@tanstack/react-query': 5.100.10
-  '@tanstack/react-query-devtools': 5.100.10
+  '@tanstack/react-query': 5.100.11
+  '@tanstack/react-query-devtools': 5.100.11
   '@tanstack/react-virtual': 3.13.24
   '@testing-library/dom': 10.4.1
   '@testing-library/jest-dom': 6.9.1
   '@testing-library/react': 16.3.2
   '@testing-library/user-event': 14.6.1
-  '@tsslint/cli': 3.1.2
-  '@tsslint/compat-eslint': 3.1.2
-  '@tsslint/config': 3.1.2
+  '@tsslint/cli': 3.1.3
+  '@tsslint/compat-eslint': 3.1.3
+  '@tsslint/config': 3.1.3
   '@types/js-cookie': 3.0.6
   '@types/js-yaml': 4.0.9
   '@types/negotiator': 0.6.4
-  '@types/node': 25.7.0
+  '@types/node': 25.9.0
   '@types/qs': 6.15.1
   '@types/react': 19.2.14
   '@types/react-dom': 19.2.3
   '@types/sortablejs': 1.15.9
-  '@typescript-eslint/eslint-plugin': 8.59.3
-  '@typescript-eslint/parser': 8.59.3
-  '@typescript/native-preview': 7.0.0-dev.20260512.1
-  '@vitejs/plugin-react': 6.0.1
+  '@typescript-eslint/eslint-plugin': 8.59.4
+  '@typescript-eslint/parser': 8.59.4
+  '@typescript/native-preview': 7.0.0-dev.20260518.1
+  '@vitejs/plugin-react': 6.0.2
   '@vitejs/plugin-rsc': 0.5.26
   '@vitest/coverage-v8': 4.1.6
   abcjs: 6.6.3
@@ -153,41 +155,41 @@ catalog:
   cron-parser: 5.5.0
   dayjs: 1.11.20
   decimal.js: 10.6.0
-  dompurify: 3.4.2
-  echarts: 6.0.0
+  dompurify: 3.4.5
+  echarts: 6.1.0-rc.2
   echarts-for-react: 3.0.6
   elkjs: 0.11.1
   embla-carousel-autoplay: 8.6.0
   embla-carousel-react: 8.6.0
   emoji-mart: 5.6.0
   es-toolkit: 1.46.1
-  eslint: 10.3.0
-  eslint-markdown: 0.9.0
+  eslint: 10.4.0
+  eslint-markdown: 0.9.1
   eslint-plugin-better-tailwindcss: 4.5.0
   eslint-plugin-hyoban: 0.14.1
   eslint-plugin-markdown-preferences: 0.41.1
   eslint-plugin-no-barrel-files: 1.3.1
   eslint-plugin-react-refresh: 0.5.2
   eslint-plugin-sonarjs: 4.0.3
-  eslint-plugin-storybook: 10.3.6
+  eslint-plugin-storybook: 10.4.0
   fast-deep-equal: 3.1.3
   fuse.js: 7.3.0
   happy-dom: 20.9.0
   hast-util-to-jsx-runtime: 2.3.6
-  hono: 4.12.18
+  hono: 4.12.19
   html-entities: 2.6.0
   html-to-image: 1.11.13
-  i18next: 26.1.0
+  i18next: 26.2.0
   i18next-resources-to-backend: 1.2.1
   iconify-import-svg: 0.2.0
   immer: 11.1.8
   jotai: 2.20.0
   js-audio-recorder: 1.0.7
-  js-cookie: 3.0.5
+  js-cookie: 3.0.7
   js-yaml: 4.1.1
   jsonschema: 1.5.0
-  katex: 0.16.45
-  knip: 6.13.1
+  katex: 0.16.47
+  knip: 6.14.1
   ky: 2.0.2
   lamejs: 1.2.1
   lexical: 0.44.0
@@ -203,7 +205,7 @@ catalog:
   playwright: 1.60.0
   postcss: 8.5.14
   qrcode.react: 4.2.0
-  qs: 6.15.1
+  qs: 6.15.2
   react: 19.2.6
   react-18-input-autosize: 3.0.0
   react-dom: 19.2.6
@@ -225,23 +227,23 @@ catalog:
   socket.io-client: 4.8.3
   sortablejs: 1.15.7
   std-semver: 1.0.8
-  storybook: 10.3.6
+  storybook: 10.4.0
   streamdown: 2.5.0
   string-ts: 2.3.1
   tailwind-merge: 3.6.0
   tailwindcss: 4.3.0
   tldts: 7.0.30
-  tsx: 4.21.0
+  tsx: 4.22.2
   typescript: 6.0.3
   uglify-js: 3.19.3
   unist-util-visit: 5.1.0
   use-context-selector: 2.0.0
   uuid: 14.0.0
-  vinext: 0.0.49
-  vite: npm:@voidzero-dev/vite-plus-core@0.1.20
-  vite-plugin-inspect: 12.0.0-beta.1
-  vite-plus: 0.1.20
-  vitest: npm:@voidzero-dev/vite-plus-test@0.1.20
+  vinext: 0.0.50
+  vite: npm:@voidzero-dev/vite-plus-core@0.1.21
+  vite-plugin-inspect: 12.0.0-beta.2
+  vite-plus: 0.1.21
+  vitest: npm:@voidzero-dev/vite-plus-test@0.1.21
   vitest-browser-react: 2.2.0
   vitest-canvas-mock: 1.1.4
   zod: 4.4.3

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx

@@ -253,11 +253,11 @@ const Panel: FC = () => {
             <TracingIcon size="md" />
             <div className="mx-2 system-sm-semibold text-text-secondary">{t(`${I18N_PREFIX}.title`, { ns: 'app' })}</div>
             <div className="rounded-md p-1">
-              <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+              <RiEqualizer2Line className="size-4 text-text-tertiary" />
             </div>
             <Divider type="vertical" className="h-3.5" />
             <div className="rounded-md p-1">
-              <RiArrowDownDoubleLine className="h-4 w-4 text-text-tertiary" />
+              <RiArrowDownDoubleLine className="size-4 text-text-tertiary" />
             </div>
           </div>
         </ConfigButton>
@@ -297,7 +297,7 @@ const Panel: FC = () => {
             </div>
             {InUseProviderIcon && <InUseProviderIcon className="ml-1 h-4" />}
             <div className="ml-2 rounded-md p-1">
-              <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+              <RiEqualizer2Line className="size-4 text-text-tertiary" />
             </div>
             <Divider type="vertical" className="h-3.5" />
           </div>

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx

@@ -649,7 +649,7 @@ const ProviderConfigModal: FC<Props> = ({
                           href={docURL[type]}
                         >
                           <span>{t(`${I18N_PREFIX}.viewDocsLink`, { ns: 'app', key: t(`tracing.${type}.title`, { ns: 'app' }) })}</span>
-                          <LinkExternal02 className="h-3 w-3" />
+                          <LinkExternal02 className="size-3" />
                         </a>
                         <div className="flex items-center">
                           {isEdit && (
@@ -683,7 +683,7 @@ const ProviderConfigModal: FC<Props> = ({
                     </div>
                     <div className="border-t-[0.5px] border-divider-regular">
                       <div className="flex items-center justify-center bg-background-section-burn py-3 text-xs text-text-tertiary">
-                        <Lock01 className="mr-1 h-3 w-3 text-text-tertiary" />
+                        <Lock01 className="mr-1 size-3 text-text-tertiary" />
                         {t('modelProvider.encrypted.front', { ns: 'common' })}
                         <a
                           className="mx-1 text-primary-600"

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx

@@ -88,7 +88,7 @@ const ProviderPanel: FC<Props> = ({
           <div className="flex items-center justify-between space-x-1">
             {hasConfigured && (
               <div className="flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-text-secondary shadow-xs" onClick={viewBtnClick}>
-                <View className="h-3 w-3" />
+                <View className="size-3" />
                 <div className="text-xs font-medium">{t(`${I18N_PREFIX}.view`, { ns: 'app' })}</div>
               </div>
             )}
@@ -96,7 +96,7 @@ const ProviderPanel: FC<Props> = ({
               className="flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-text-secondary shadow-xs"
               onClick={handleConfigBtnClick}
             >
-              <RiEqualizer2Line className="h-3 w-3" />
+              <RiEqualizer2Line className="size-3" />
               <div className="text-xs font-medium">{t(`${I18N_PREFIX}.config`, { ns: 'app' })}</div>
             </div>
           </div>

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx

@@ -21,7 +21,7 @@ const TracingIcon: FC<Props> = ({
   const sizeClass = sizeClassMap[size]
   return (
     <div className={cn(className, sizeClass, 'bg-primary-500 shadow-md')}>
-      <Icon className="h-full w-full" />
+      <Icon className="size-full" />
     </div>
   )
 }

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx

@@ -2,7 +2,7 @@ import WorkflowApp from '@/app/components/workflow-app'
 
 const Page = () => {
   return (
-    <div className="h-full w-full overflow-x-auto">
+    <div className="size-full overflow-x-auto">
       <WorkflowApp />
     </div>
   )

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/pipeline/page.tsx

@@ -3,7 +3,7 @@ import RagPipeline from '@/app/components/rag-pipeline'
 
 const PipelinePage = () => {
   return (
-    <div className="h-full w-full overflow-x-auto">
+    <div className="size-full overflow-x-auto">
       <RagPipeline />
     </div>
   )

web/app/(commonLayout)/layout.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { AppInitializer } from '@/app/components/app-initializer'
 import InSiteMessageNotification from '@/app/components/app/in-site-message/notification'
 import AmplitudeProvider from '@/app/components/base/amplitude'
-import GA, { GaType } from '@/app/components/base/ga'
+import { GoogleAnalyticsScripts } from '@/app/components/base/ga'
 import Zendesk from '@/app/components/base/zendesk'
 import { GotoAnything } from '@/app/components/goto-anything'
 import { Header } from '@/app/components/header'
@@ -19,7 +19,7 @@ import RoleRouteGuard from './role-route-guard'
 const Layout = ({ children }: { children: ReactNode }) => {
   return (
     <>
-      <GA gaType={GaType.admin} />
+      <GoogleAnalyticsScripts />
       <AmplitudeProvider />
       <AppInitializer>
         <AppContextProvider>

web/app/(humanInputLayout)/form/[token]/form.tsx

@@ -99,11 +99,11 @@ const FormContent = () => {
 
   if (success) {
     return (
-      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+      <div className={cn('flex size-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="h-[56px] w-[56px] shrink-0 rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
-              <RiCheckboxCircleFill className="h-8 w-8 text-text-success" />
+              <RiCheckboxCircleFill className="size-8 text-text-success" />
             </div>
             <div className="grow">
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.thanks', { ns: 'share' })}</div>
@@ -127,11 +127,11 @@ const FormContent = () => {
 
   if (expired) {
     return (
-      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+      <div className={cn('flex size-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
-            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
-              <RiInformation2Fill className="h-8 w-8 text-text-accent" />
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
+              <RiInformation2Fill className="size-8 text-text-accent" />
             </div>
             <div className="grow">
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
@@ -155,11 +155,11 @@ const FormContent = () => {
 
   if (submitted) {
     return (
-      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+      <div className={cn('flex size-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
-            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
-              <RiInformation2Fill className="h-8 w-8 text-text-accent" />
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
+              <RiInformation2Fill className="size-8 text-text-accent" />
             </div>
             <div className="grow">
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
@@ -183,11 +183,11 @@ const FormContent = () => {
 
   if (rateLimitExceeded) {
     return (
-      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+      <div className={cn('flex size-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
-            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
-              <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
+              <RiErrorWarningFill className="size-8 text-text-destructive" />
             </div>
             <div className="grow">
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.rateLimitExceeded', { ns: 'share' })}</div>
@@ -209,11 +209,11 @@ const FormContent = () => {
 
   if (!formData) {
     return (
-      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+      <div className={cn('flex size-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
-            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
-              <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
+              <RiErrorWarningFill className="size-8 text-text-destructive" />
             </div>
             <div className="grow">
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.formNotFound', { ns: 'share' })}</div>

web/app/(shareLayout)/components/authenticated-layout.tsx

@@ -82,7 +82,7 @@ const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
   if (userCanAccessApp && !userCanAccessApp.result) {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-y-2">
-        <AppUnavailable className="h-auto w-auto" code={403} unknownReason="no permission." />
+        <AppUnavailable className="size-auto" code={403} unknownReason="no permission." />
         <span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{t('userProfile.logout', { ns: 'common' })}</span>
       </div>
     )

web/app/(shareLayout)/components/splash.tsx

@@ -94,7 +94,7 @@ const Splash: FC<PropsWithChildren> = ({ children }) => {
   if (message) {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-y-4">
-        <AppUnavailable className="h-auto w-auto" code={code || t('common.appUnavailable', { ns: 'share' })} unknownReason={message} />
+        <AppUnavailable className="size-auto" code={code || t('common.appUnavailable', { ns: 'share' })} unknownReason={message} />
         <span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{code === '403' ? t('userProfile.logout', { ns: 'common' }) : t('login.backToHome', { ns: 'share' })}</span>
       </div>
     )

web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx

@@ -59,8 +59,8 @@ export default function CheckCode() {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg">
-        <RiMailSendFill className="h-6 w-6 text-2xl" />
+      <div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg">
+        <RiMailSendFill className="size-6 text-2xl" />
       </div>
       <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>

web/app/(shareLayout)/webapp-reset-password/page.tsx

@@ -61,8 +61,8 @@ export default function CheckCode() {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
-        <RiLockPasswordLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
+      <div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
+        <RiLockPasswordLine className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('resetPassword', { ns: 'login' })}</h2>

web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx

@@ -164,8 +164,8 @@ const ChangePasswordForm = () => {
       {showSuccess && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
-            <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
-              <RiCheckboxCircleFill className="h-6 w-6 text-text-success" />
+            <div className="mb-3 flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
+              <RiCheckboxCircleFill className="size-6 text-text-success" />
             </div>
             <h2 className="title-4xl-semi-bold text-text-primary">
               {t('passwordChangedTip', { ns: 'login' })}

web/app/(shareLayout)/webapp-signin/check-code/page.tsx

@@ -97,8 +97,8 @@ export default function CheckCode() {
 
   return (
     <div className="flex w-[400px] flex-col gap-3">
-      <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
-        <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
+      <div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
+        <RiMailSendFill className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>

web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx

@@ -75,7 +75,7 @@ const SSOAuth: FC<SSOAuthProps> = ({
       disabled={isLoading}
       className="w-full"
     >
-      <Lock01 className="mr-2 h-5 w-5 text-text-accent-light-mode-only" />
+      <Lock01 className="mr-2 size-5 text-text-accent-light-mode-only" />
       <span className="truncate">{t('withSSO', { ns: 'login' })}</span>
     </Button>
   )

web/app/(shareLayout)/webapp-signin/normalForm.tsx

@@ -57,9 +57,9 @@ const NormalForm = () => {
       <div className="mx-auto mt-8 w-full">
         <div className="relative">
           <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
-            <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-              <RiContractLine className="h-5 w-5" />
-              <RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
+            <div className="shadows-shadow-lg relative mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
+              <RiContractLine className="size-5" />
+              <RiErrorWarningFill className="absolute -top-1 -right-1 size-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseLost', { ns: 'login' })}</p>
             <p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseLostTip', { ns: 'login' })}</p>
@@ -73,9 +73,9 @@ const NormalForm = () => {
       <div className="mx-auto mt-8 w-full">
         <div className="relative">
           <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
-            <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-              <RiContractLine className="h-5 w-5" />
-              <RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
+            <div className="shadows-shadow-lg relative mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
+              <RiContractLine className="size-5" />
+              <RiErrorWarningFill className="absolute -top-1 -right-1 size-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseExpired', { ns: 'login' })}</p>
             <p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseExpiredTip', { ns: 'login' })}</p>
@@ -89,9 +89,9 @@ const NormalForm = () => {
       <div className="mx-auto mt-8 w-full">
         <div className="relative">
           <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
-            <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-              <RiContractLine className="h-5 w-5" />
-              <RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
+            <div className="shadows-shadow-lg relative mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
+              <RiContractLine className="size-5" />
+              <RiErrorWarningFill className="absolute -top-1 -right-1 size-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseInactive', { ns: 'login' })}</p>
             <p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseInactiveTip', { ns: 'login' })}</p>
@@ -156,8 +156,8 @@ const NormalForm = () => {
           {allMethodsAreDisabled && (
             <>
               <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
-                <div className="shadows-shadow-lg mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-                  <RiDoorLockLine className="h-5 w-5" />
+                <div className="shadows-shadow-lg mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
+                  <RiDoorLockLine className="size-5" />
                 </div>
                 <p className="system-sm-medium text-text-primary">{t('noLoginMethod', { ns: 'login' })}</p>
                 <p className="mt-1 system-xs-regular text-text-tertiary">{t('noLoginMethodTip', { ns: 'login' })}</p>

web/app/(shareLayout)/webapp-signin/page.tsx

@@ -63,7 +63,7 @@ const WebSSOForm: FC = () => {
 
   return (
     <div className="flex h-full flex-col items-center justify-center gap-y-4">
-      <AppUnavailable className="h-auto w-auto" isUnknownReason={true} />
+      <AppUnavailable className="size-auto" isUnknownReason={true} />
       <span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{t('login.backToHome', { ns: 'share' })}</span>
     </div>
   )

web/app/account/(commonLayout)/account-page/email-change-modal.tsx

@@ -196,7 +196,7 @@ const EmailChangeModal = ({ onClose, email }: Props) => {
     <Dialog open onOpenChange={open => !open && onClose()}>
       <DialogContent className="w-[420px]! p-6!">
         <div className="absolute top-5 right-5 cursor-pointer p-1.5" onClick={onClose}>
-          <RiCloseLine className="h-5 w-5 text-text-tertiary" />
+          <RiCloseLine className="size-5 text-text-tertiary" />
         </div>
         {step === STEP.start && (
           <>

web/app/account/(commonLayout)/account-page/index.tsx

@@ -159,14 +159,14 @@ export default function AccountPage() {
       <div className="pt-2 pb-3">
         <h4 className="title-2xl-semi-bold text-text-primary">{t('account.myAccount', { ns: 'common' })}</h4>
       </div>
-      <div className="mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6">
+      <div className="mb-8 flex items-center rounded-xl bg-linear-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6">
         <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={mutateUserProfile} size="3xl" />
         <div className="ml-4">
           <p className="system-xl-semibold text-text-primary">
             {userProfile.name}
             {isEducationAccount && (
-              <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
-                <RiGraduationCapFill aria-hidden="true" className="mr-1 h-3 w-3" />
+              <PremiumBadge size="s" color="blue" className="ml-1 px-2!">
+                <RiGraduationCapFill aria-hidden="true" className="mr-1 size-3" />
                 <span className="system-2xs-medium">EDU</span>
               </PremiumBadge>
             )}
@@ -209,7 +209,7 @@ export default function AccountPage() {
           </div>
         )
       }
-      <div className="mb-6 border-[1px] border-divider-subtle" />
+      <div className="mb-6 border border-divider-subtle" />
       <div className="mb-8">
         <div className={titleClassName}>{t('account.langGeniusAccount', { ns: 'common' })}</div>
         <div className={descriptionClassName}>{t('account.langGeniusAccountTip', { ns: 'common' })}</div>

web/app/account/(commonLayout)/avatar.tsx

@@ -61,7 +61,7 @@ export default function AppSelector() {
                 {userProfile.name}
                 {isEducationAccount && (
                   <PremiumBadge size="s" color="blue" className="ml-1 px-2!">
-                    <span aria-hidden="true" className="mr-1 i-ri-graduation-cap-fill h-3 w-3" />
+                    <span aria-hidden="true" className="mr-1 i-ri-graduation-cap-fill size-3" />
                     <span className="system-2xs-medium">EDU</span>
                   </PremiumBadge>
                 )}

web/app/account/(commonLayout)/header.tsx

@@ -37,9 +37,9 @@ const Header = () => {
       </div>
       <div className="flex shrink-0 items-center gap-3">
         <Button className="gap-2 px-3 py-2 system-sm-medium" onClick={goToStudio}>
-          <RiRobot2Line className="h-4 w-4" />
+          <RiRobot2Line className="size-4" />
           <p>{t('account.studio', { ns: 'common' })}</p>
-          <RiArrowRightUpLine className="h-4 w-4" />
+          <RiArrowRightUpLine className="size-4" />
         </Button>
         <div className="h-4 w-px bg-divider-regular" />
         <Avatar />

web/app/account/(commonLayout)/layout.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import * as React from 'react'
 import { AppInitializer } from '@/app/components/app-initializer'
 import AmplitudeProvider from '@/app/components/base/amplitude'
-import GA, { GaType } from '@/app/components/base/ga'
+import { GoogleAnalyticsScripts } from '@/app/components/base/ga'
 import HeaderWrapper from '@/app/components/header/header-wrapper'
 import { AppContextProvider } from '@/context/app-context-provider'
 import { EventEmitterContextProvider } from '@/context/event-emitter-provider'
@@ -13,7 +13,7 @@ import Header from './header'
 const Layout = ({ children }: { children: ReactNode }) => {
   return (
     <>
-      <GA gaType={GaType.admin} />
+      <GoogleAnalyticsScripts />
       <AmplitudeProvider />
       <AppInitializer>
         <AppContextProvider>

web/app/account/oauth/authorize/page.tsx

@@ -127,14 +127,14 @@ export default function OAuthAuthorize() {
     <div className="bg-background-default-subtle">
       {authAppInfo?.app_icon && (
         <div className="w-max rounded-2xl border-[0.5px] border-components-panel-border bg-text-primary-on-surface p-3 shadow-lg">
-          <img src={authAppInfo.app_icon} alt="app icon" className="h-10 w-10 rounded-sm" />
+          <img src={authAppInfo.app_icon} alt="app icon" className="size-10 rounded-sm" />
         </div>
       )}
 
       <div className={`mt-5 mb-4 flex flex-col gap-2 ${isLoggedIn ? 'pb-2' : ''}`}>
         <div className="title-4xl-semi-bold">
           {isLoggedIn && <div className="text-text-primary">{t('connect', { ns: 'oauth' })}</div>}
-          <div className="text-(--color-saas-dify-blue-inverted)">{authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })}</div>
+          <div className="text-saas-dify-blue-inverted">{authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })}</div>
           {!isLoggedIn && <div className="text-text-primary">{t('tips.notLoggedIn', { ns: 'oauth' })}</div>}
         </div>
         <div className="body-md-regular text-text-secondary">{isLoggedIn ? `${authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })} ${t('tips.loggedIn', { ns: 'oauth' })}` : t('tips.needLogin', { ns: 'oauth' })}</div>
@@ -159,7 +159,7 @@ export default function OAuthAuthorize() {
             const Icon = SCOPE_INFO_MAP[scope]
             return (
               <div key={scope} className="flex items-center gap-2 body-sm-medium text-text-secondary">
-                {Icon ? <Icon.icon className="h-4 w-4" /> : <RiAccountCircleLine className="h-4 w-4" />}
+                {Icon ? <Icon.icon className="size-4" /> : <RiAccountCircleLine className="size-4" />}
                 {Icon!.label}
               </div>
             )

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

@@ -36,16 +36,16 @@ const AppInfoTrigger = ({ appDetail, expand, onClick }: AppInfoTriggerProps) =>
           </div>
           {expand && (
             <div className="ml-auto flex items-center justify-center rounded-md p-0.5">
-              <div className="flex h-5 w-5 items-center justify-center">
-                <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+              <div className="flex size-5 items-center justify-center">
+                <RiEqualizer2Line className="size-4 text-text-tertiary" />
               </div>
             </div>
           )}
         </div>
         {!expand && (
           <div className="flex items-center justify-center">
-            <div className="flex h-5 w-5 items-center justify-center rounded-md p-0.5">
-              <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+            <div className="flex size-5 items-center justify-center rounded-md p-0.5">
+              <RiEqualizer2Line className="size-4 text-text-tertiary" />
             </div>
           </div>
         )}

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

@@ -149,7 +149,7 @@ const AppOperations = ({
           className="gap-px focus-visible:ring-inset"
           tabIndex={-1}
         >
-          <RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
+          <RiMoreLine className="size-3.5 text-components-button-secondary-text" />
           <span className="system-xs-medium text-components-button-secondary-text">
             {t('operation.more', { ns: 'common' })}
           </span>
@@ -183,7 +183,7 @@ const AppOperations = ({
               )}
             >
               <>
-                <RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
+                <RiMoreLine className="size-3.5 text-components-button-secondary-text" />
                 <span className="system-xs-medium text-components-button-secondary-text">
                   {t('operation.more', { ns: 'common' })}
                 </span>

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

@@ -59,7 +59,7 @@ const AppSidebarDropdown = ({ navigation, appInfoActions }: Props) => {
               background={appDetail.icon_background}
               imageUrl={appDetail.icon_url}
             />
-            <RiMenuLine className="h-4 w-4 text-text-tertiary" />
+            <RiMenuLine className="size-4 text-text-tertiary" />
           </DropdownMenuTrigger>
           <DropdownMenuContent
             placement="bottom-start"
@@ -87,8 +87,8 @@ const AppSidebarDropdown = ({ navigation, appInfoActions }: Props) => {
                       imageUrl={appDetail.icon_url}
                     />
                     <div className="flex items-center justify-center rounded-md p-0.5">
-                      <div className="flex h-5 w-5 items-center justify-center">
-                        <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+                      <div className="flex size-5 items-center justify-center">
+                        <RiEqualizer2Line className="size-4 text-text-tertiary" />
                       </div>
                     </div>
                   </div>

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

@@ -46,13 +46,13 @@ const ICON_MAP = {
   app: <AppIcon className="border border-[rgba(0,0,0,0.05)]!" />,
   api: (
     <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 p-1 shadow-md">
-      <ApiAggregate className="h-4 w-4 text-text-primary-on-surface" />
+      <ApiAggregate className="size-4 text-text-primary-on-surface" />
     </div>
   ),
   dataset: <AppIcon innerIcon={DatasetSvg} className="border-[0.5px]! border-indigo-100! bg-indigo-25!" />,
   webapp: (
     <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 p-1 shadow-md">
-      <WindowCursor className="h-4 w-4 text-text-primary-on-surface" />
+      <WindowCursor className="size-4 text-text-primary-on-surface" />
     </div>
   ),
   notion: <AppIcon innerIcon={NotionSvg} className="border-[0.5px]! border-indigo-100! bg-white!" />,

web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx

@@ -109,8 +109,8 @@ describe('NavLink Animation and Layout Issues', () => {
       expect(expandedIconWrapper).not.toHaveClass('-ml-1')
 
       // Icon itself maintains consistent classes - no margin changes
-      expect(iconElement).toHaveClass('h-4')
-      expect(iconElement).toHaveClass('w-4')
+      expect(iconElement).toHaveClass('size-4')
+      expect(iconElement).toHaveClass('size-4')
       expect(iconElement).toHaveClass('shrink-0')
 
       // This wrapper approach eliminates the icon margin shift issue
@@ -168,8 +168,8 @@ describe('NavLink Animation and Layout Issues', () => {
       expect(iconWrapper).toHaveClass('-ml-1')
 
       // Icon itself has consistent classes
-      expect(iconElement).toHaveClass('h-4')
-      expect(iconElement).toHaveClass('w-4')
+      expect(iconElement).toHaveClass('size-4')
+      expect(iconElement).toHaveClass('size-4')
       expect(iconElement).toHaveClass('shrink-0')
 
       rerender(<NavLink {...mockProps} mode="expand" />)
@@ -180,8 +180,8 @@ describe('NavLink Animation and Layout Issues', () => {
       expect(expandedIconWrapper).not.toHaveClass('-ml-1')
 
       // Icon classes remain consistent - no margin shifts
-      expect(iconElement).toHaveClass('h-4')
-      expect(iconElement).toHaveClass('w-4')
+      expect(iconElement).toHaveClass('size-4')
+      expect(iconElement).toHaveClass('size-4')
       expect(iconElement).toHaveClass('shrink-0')
     })
   })

web/app/components/app-sidebar/nav-link/index.tsx

@@ -44,7 +44,7 @@ const NavLink = ({
 
   const renderIcon = () => (
     <div className={cn(mode !== 'expand' && '-ml-1')}>
-      <NavIcon className="h-4 w-4 shrink-0" aria-hidden="true" />
+      <NavIcon className="size-4 shrink-0" aria-hidden="true" />
     </div>
   )
 

web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx

@@ -21,7 +21,7 @@ const EditItem: FC<Props> = ({
   onChange,
 }) => {
   const { t } = useTranslation()
-  const avatar = type === EditItemType.Query ? <User className="h-6 w-6" /> : <Robot className="h-6 w-6" />
+  const avatar = type === EditItemType.Query ? <User className="size-6" /> : <Robot className="size-6" />
   const name = type === EditItemType.Query ? t('addModal.queryName', { ns: 'appAnnotation' }) : t('addModal.answerName', { ns: 'appAnnotation' })
   const placeholder = type === EditItemType.Query ? t('addModal.queryPlaceholder', { ns: 'appAnnotation' }) : t('addModal.answerPlaceholder', { ns: 'appAnnotation' })
 

web/app/components/app/annotation/add-annotation-modal/index.tsx

@@ -103,7 +103,7 @@ const AddAnnotationModal: FC<Props> = ({
                     </DrawerTitle>
                     <DrawerCloseButton
                       aria-label={t('operation.close', { ns: 'common' })}
-                      className="h-6 w-6 rounded-md"
+                      className="size-6 rounded-md"
                     />
                   </div>
                 </div>
@@ -127,7 +127,7 @@ const AddAnnotationModal: FC<Props> = ({
                       <AnnotationFull />
                     </div>
                   )}
-                  <div className="flex h-16 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
+                  <div className="flex h-16 items-center justify-between rounded-b-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
                     <label className="flex items-center space-x-2">
                       <Checkbox checked={isCreateNext} onCheckedChange={setIsCreateNext} />
                       <span>{t('addModal.createNext', { ns: 'appAnnotation' })}</span>

web/app/components/app/annotation/batch-action.tsx

@@ -49,7 +49,7 @@ const BatchAction: FC<IBatchActionProps> = ({
     <div className={cn('pointer-events-none flex w-full justify-center gap-x-2', className)}>
       <div className="pointer-events-auto flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5">
         <div className="inline-flex items-center gap-x-2 py-1 pr-3 pl-2">
-          <span className="flex h-5 w-5 items-center justify-center rounded-md bg-text-accent system-xs-medium text-text-primary-on-surface">
+          <span className="flex size-5 items-center justify-center rounded-md bg-text-accent system-xs-medium text-text-primary-on-surface">
             {selectedIds.length}
           </span>
           <span className="system-sm-semibold text-text-accent">{t(`${i18nPrefix}.selected`, { ns: 'appAnnotation' })}</span>

web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx

@@ -78,7 +78,7 @@ const CSVDownload: FC = () => {
         data={getTemplate()}
       >
         <div className="flex h-[18px] items-center space-x-1 system-xs-medium text-text-accent">
-          <DownloadIcon className="mr-1 h-3 w-3" />
+          <DownloadIcon className="mr-1 size-3" />
           {t('batchModal.template', { ns: 'appAnnotation' })}
         </div>
       </CSVDownloader>

web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx

@@ -106,7 +106,7 @@ const CSVUploader: FC<Props> = ({
                 </button>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
+            {dragging && <div ref={dragRef} className="absolute top-0 left-0 size-full" />}
           </div>
         )}
         {file && (
@@ -125,7 +125,7 @@ const CSVUploader: FC<Props> = ({
                 aria-label={t('operation.delete', { ns: 'common' })}
                 onClick={removeFile}
               >
-                <RiDeleteBinLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                <RiDeleteBinLine className="size-4 text-text-tertiary" aria-hidden="true" />
               </button>
             </div>
           </div>

web/app/components/app/annotation/batch-add-annotation-modal/index.tsx

@@ -97,7 +97,7 @@ const BatchModal: FC<IBatchModalProps> = ({
           aria-label={t('operation.close', { ns: 'common' })}
           onClick={onCancel}
         >
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
         </button>
         <CSVUploader
           file={currentCSV}

web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx

@@ -22,7 +22,7 @@ type Props = {
 
 export const EditTitle: FC<{ className?: string, title: string }> = ({ className, title }) => (
   <div className={cn(className, 'flex h-[18px] items-center system-xs-medium text-text-tertiary')}>
-    <RiEditFill className="mr-1 h-3.5 w-3.5" />
+    <RiEditFill className="mr-1 size-3.5" />
     <div>{title}</div>
     <div
       className="ml-2 h-px grow"
@@ -42,7 +42,7 @@ const EditItem: FC<Props> = ({
   const { t } = useTranslation()
   const [newContent, setNewContent] = useState('')
   const showNewContent = newContent && newContent !== content
-  const avatar = type === EditItemType.Query ? <User className="h-6 w-6" /> : <Robot className="h-6 w-6" />
+  const avatar = type === EditItemType.Query ? <User className="size-6" /> : <Robot className="size-6" />
   const name = type === EditItemType.Query ? t('editModal.queryName', { ns: 'appAnnotation' }) : t('editModal.answerName', { ns: 'appAnnotation' })
   const editTitle = type === EditItemType.Query ? t('editModal.yourQuery', { ns: 'appAnnotation' }) : t('editModal.yourAnswer', { ns: 'appAnnotation' })
   const placeholder = type === EditItemType.Query ? t('editModal.queryPlaceholder', { ns: 'appAnnotation' }) : t('editModal.answerPlaceholder', { ns: 'appAnnotation' })
@@ -94,7 +94,7 @@ const EditItem: FC<Props> = ({
                         setIsEdit(true)
                       }}
                     >
-                      <RiEditLine className="mr-1 h-3.5 w-3.5" />
+                      <RiEditLine className="mr-1 size-3.5" />
                       <div>{t('operation.edit', { ns: 'common' })}</div>
                     </div>
                   )}
@@ -116,8 +116,8 @@ const EditItem: FC<Props> = ({
                           }
                         }}
                       >
-                        <div className="h-3.5 w-3.5">
-                          <RiDeleteBinLine className="h-3.5 w-3.5" />
+                        <div className="size-3.5">
+                          <RiDeleteBinLine className="size-3.5" />
                         </div>
                         <div>{t('operation.delete', { ns: 'common' })}</div>
                       </div>

web/app/components/app/annotation/edit-annotation-modal/index.tsx

@@ -126,7 +126,7 @@ const EditAnnotationModal: FC<Props> = ({
                     </DrawerTitle>
                     <DrawerCloseButton
                       aria-label={t('operation.close', { ns: 'common' })}
-                      className="h-6 w-6 rounded-md"
+                      className="size-6 rounded-md"
                     />
                   </div>
                 </div>
@@ -183,7 +183,7 @@ const EditAnnotationModal: FC<Props> = ({
                   {
                     annotationId
                       ? (
-                          <div className="flex h-16 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
+                          <div className="flex h-16 items-center justify-between rounded-b-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
                             <div
                               className="flex cursor-pointer items-center space-x-2 pl-3"
                               onClick={() => setShowModal(true)}

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

@@ -186,7 +186,7 @@ const HeaderOptions: FC<Props> = ({
   return (
     <div className="flex space-x-2">
       <Button variant="primary" onClick={() => setShowAddModal(true)}>
-        <span aria-hidden className="mr-0.5 i-ri-add-line h-4 w-4" />
+        <span aria-hidden className="mr-0.5 i-ri-add-line size-4" />
         <div>{t('table.header.addAnnotation', { ns: 'appAnnotation' })}</div>
       </Button>
       <DropdownMenu modal={false} open={isOperationsMenuOpen} onOpenChange={setIsOperationsMenuOpen}>
@@ -194,7 +194,7 @@ const HeaderOptions: FC<Props> = ({
           aria-label={t('operation.more', { ns: 'common' })}
           className="mr-0 box-border inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg p-0 text-components-button-secondary-text shadow-xs backdrop-blur-[5px] hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover data-popup-open:border-components-button-secondary-border-hover data-popup-open:bg-components-button-secondary-bg-hover"
         >
-          <span aria-hidden className="i-ri-more-fill h-4 w-4" />
+          <span aria-hidden className="i-ri-more-fill size-4" />
         </DropdownMenuTrigger>
         <DropdownMenuContent
           placement="bottom-end"

web/app/components/app/annotation/index.tsx

@@ -151,7 +151,7 @@ const Annotation: FC<Props> = (props) => {
             {isChatApp && (
               <>
                 <div className={cn(!annotationConfig?.enabled && 'pr-2', 'flex h-7 items-center space-x-1 rounded-lg border border-components-panel-border bg-components-panel-bg-blur pl-2')}>
-                  <MessageFast className="h-4 w-4 text-util-colors-indigo-indigo-600" />
+                  <MessageFast className="size-4 text-util-colors-indigo-indigo-600" />
                   <div className="system-sm-medium text-text-primary">{t('name', { ns: 'appAnnotation' })}</div>
                   <Switch
                     key={controlRefreshSwitch}
@@ -179,7 +179,7 @@ const Annotation: FC<Props> = (props) => {
                     <div className="flex items-center pr-1 pl-1.5">
                       <div className="mr-1 h-3.5 w-px shrink-0 bg-divider-subtle"></div>
                       <ActionButton onClick={() => setIsShowEdit(true)}>
-                        <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+                        <RiEqualizer2Line className="size-4 text-text-tertiary" />
                       </ActionButton>
                     </div>
                   )}

web/app/components/app/annotation/list.tsx

@@ -49,13 +49,13 @@ function AnnotationTableRow({
         </div>
       </td>
       <td
-        className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
+        className="max-w-62.5 truncate p-3 pr-2"
         title={item.question}
       >
         <span id={questionId}>{item.question}</span>
       </td>
       <td
-        className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
+        className="max-w-62.5 truncate p-3 pr-2"
         title={item.answer}
       >
         {item.answer}
@@ -65,13 +65,13 @@ function AnnotationTableRow({
       <td className="w-24 p-3 pr-2" onClick={e => e.stopPropagation()}>
         <div className="flex space-x-1 text-text-tertiary">
           <ActionButton aria-label={t('feature.annotation.edit', { ns: 'appDebug' })} onClick={() => onView(item)}>
-            <span aria-hidden className="i-ri-edit-line h-4 w-4" />
+            <span aria-hidden className="i-ri-edit-line size-4" />
           </ActionButton>
           <ActionButton
             aria-label={t('feature.annotation.remove', { ns: 'appDebug' })}
             onClick={() => onRemoveClick(item.id)}
           >
-            <span aria-hidden className="i-ri-delete-bin-line h-4 w-4" />
+            <span aria-hidden className="i-ri-delete-bin-line size-4" />
           </ActionButton>
         </div>
       </td>

web/app/components/app/annotation/view-annotation-modal/hit-history-no-data.tsx

@@ -9,7 +9,7 @@ const HitHistoryNoData: FC = () => {
   return (
     <div className="mx-auto mt-20 w-[480px] space-y-2 rounded-2xl bg-background-section-burn p-5">
       <div className="inline-block rounded-lg border border-divider-subtle p-3">
-        <ClockFastForward className="h-5 w-5 text-text-tertiary" />
+        <ClockFastForward className="size-5 text-text-tertiary" />
       </div>
       <div className="system-sm-regular text-text-tertiary">{t('viewModal.noHitHistory', { ns: 'appAnnotation' })}</div>
     </div>

web/app/components/app/annotation/view-annotation-modal/index.tsx

@@ -241,7 +241,7 @@ const ViewAnnotationModal: FC<Props> = ({
                     </DrawerTitle>
                     <DrawerCloseButton
                       aria-label={t('operation.close', { ns: 'common' })}
-                      className="h-6 w-6 rounded-md"
+                      className="size-6 rounded-md"
                     />
                   </div>
                 </div>
@@ -278,7 +278,7 @@ const ViewAnnotationModal: FC<Props> = ({
                   </AlertDialog>
                 </div>
                 {id && (
-                  <div className="flex h-16 shrink-0 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
+                  <div className="flex h-16 shrink-0 items-center justify-between rounded-b-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
                     <div
                       className="flex cursor-pointer items-center space-x-2 pl-3"
                       onClick={() => setShowModal(true)}

web/app/components/app/app-access-control/access-control-dialog.tsx

@@ -32,7 +32,7 @@ const AccessControlDialog = ({
           className,
         )}
       >
-        <DialogCloseButton className="top-5 right-5 h-8 w-8" />
+        <DialogCloseButton className="top-5 right-5 size-8" />
         {children}
       </DialogContent>
     </Dialog>

web/app/components/app/app-access-control/add-member-or-group-pop.tsx

@@ -111,7 +111,7 @@ export default function AddMemberOrGroupDialog() {
         size="small"
         className="flex h-6 w-auto shrink-0 items-center gap-x-0.5 rounded-md border-0 bg-transparent px-2 py-0 text-xs font-medium text-components-button-secondary-accent-text hover:bg-state-accent-hover focus-visible:bg-state-accent-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid data-open:bg-state-accent-hover"
       >
-        <RiAddCircleFill className="h-4 w-4" aria-hidden="true" />
+        <RiAddCircleFill className="size-4" aria-hidden="true" />
         <span>{t('operation.add', { ns: 'common' })}</span>
       </ComboboxTrigger>
       <ComboboxContent
@@ -277,8 +277,8 @@ function GroupItem({ group, subject }: GroupItemProps) {
       <BaseItem subject={subject}>
         <SelectionBox checked={isChecked} />
         <ComboboxItemText className="flex grow items-center px-0">
-          <div className="mr-2 h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-            <div className="bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center">
+          <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
+            <div className="bg-access-app-icon-mask-bg flex size-full items-center justify-center">
               <RiOrganizationChart className="h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0" aria-hidden="true" />
             </div>
           </div>
@@ -295,7 +295,7 @@ function GroupItem({ group, subject }: GroupItemProps) {
         onClick={handleExpandClick}
       >
         <span className="px-[3px]">{t('accessControlDialog.operateGroupAndMember.expand', { ns: 'app' })}</span>
-        <RiArrowRightSLine className="h-4 w-4" aria-hidden="true" />
+        <RiArrowRightSLine className="size-4" aria-hidden="true" />
       </Button>
     </div>
   )
@@ -314,8 +314,8 @@ function MemberItem({ member, subject }: MemberItemProps) {
     <BaseItem subject={subject} className="pr-3">
       <SelectionBox checked={isChecked} />
       <ComboboxItemText className="flex grow items-center px-0">
-        <div className="mr-2 h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-          <div className="bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center">
+        <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
+          <div className="bg-access-app-icon-mask-bg flex size-full items-center justify-center">
             <Avatar size="xxs" avatar={null} name={member.name} />
           </div>
         </div>

web/app/components/app/app-access-control/index.tsx

@@ -79,7 +79,7 @@ export default function AccessControl(props: AccessControlProps) {
           <AccessControlItem type={AccessMode.ORGANIZATION}>
             <div className="flex items-center p-3">
               <div className="flex grow items-center gap-x-2">
-                <RiBuildingLine className="h-4 w-4 text-text-primary" />
+                <RiBuildingLine className="size-4 text-text-primary" />
                 <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.organization', { ns: 'app' })}</p>
               </div>
             </div>
@@ -90,7 +90,7 @@ export default function AccessControl(props: AccessControlProps) {
           <AccessControlItem type={AccessMode.EXTERNAL_MEMBERS}>
             <div className="flex items-center p-3">
               <div className="flex grow items-center gap-x-2">
-                <RiVerifiedBadgeLine className="h-4 w-4 text-text-primary" />
+                <RiVerifiedBadgeLine className="size-4 text-text-primary" />
                 <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.external', { ns: 'app' })}</p>
               </div>
               {!hideTip && <WebAppSSONotEnabledTip />}
@@ -98,7 +98,7 @@ export default function AccessControl(props: AccessControlProps) {
           </AccessControlItem>
           <AccessControlItem type={AccessMode.PUBLIC}>
             <div className="flex items-center gap-x-2 p-3">
-              <RiGlobalLine className="h-4 w-4 text-text-primary" />
+              <RiGlobalLine className="size-4 text-text-primary" />
               <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.anyone', { ns: 'app' })}</p>
             </div>
           </AccessControlItem>

web/app/components/app/app-access-control/specific-groups-or-members.tsx

@@ -28,7 +28,7 @@ export default function SpecificGroupsOrMembers() {
     return (
       <div className="flex items-center p-3">
         <div className="flex grow items-center gap-x-2">
-          <RiLockLine className="h-4 w-4 text-text-primary" />
+          <RiLockLine className="size-4 text-text-primary" />
           <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.specific', { ns: 'app' })}</p>
         </div>
       </div>
@@ -39,7 +39,7 @@ export default function SpecificGroupsOrMembers() {
     <div>
       <div className="flex items-center gap-x-1 p-3">
         <div className="flex grow items-center gap-x-1">
-          <RiLockLine className="h-4 w-4 text-text-primary" />
+          <RiLockLine className="size-4 text-text-primary" />
           <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.specific', { ns: 'app' })}</p>
         </div>
         <div className="flex items-center gap-x-1">
@@ -124,15 +124,15 @@ function BaseItem({ icon, onRemove, children }: BaseItemProps) {
 
   return (
     <div className="group flex flex-row items-center gap-x-1 rounded-full border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark p-1 pr-1.5 shadow-xs">
-      <div className="h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-        <div className="bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center">
+      <div className="size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
+        <div className="bg-access-app-icon-mask-bg flex size-full items-center justify-center">
           {icon}
         </div>
       </div>
       {children}
       <button
         type="button"
-        className="flex h-4 w-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+        className="flex size-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
         aria-label={t('operation.remove', { ns: 'common' })}
         onClick={onRemove}
       >

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

@@ -382,7 +382,7 @@ const AppPublisher = ({
               disabled={disabled}
             >
               {t('common.publish', { ns: 'workflow' })}
-              <span className="i-ri-arrow-down-s-line h-4 w-4 text-components-button-primary-text" />
+              <span className="i-ri-arrow-down-s-line size-4 text-components-button-primary-text" />
             </Button>
           )}
         />
@@ -451,7 +451,7 @@ const AppPublisher = ({
             {systemFeatures.enable_creators_platform && (
               <div className="border-t border-divider-subtle p-4">
                 <SuggestedAction
-                  icon={<span className="i-ri-store-line h-4 w-4" />}
+                  icon={<span className="i-ri-store-line size-4" />}
                   disabled={!publishedAt || publishingToMarketplace}
                   onClick={handlePublishToMarketplace}
                 >

web/app/components/app/app-publisher/publish-with-multiple-model.tsx

@@ -68,7 +68,7 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
       >
         <>
           {t('operation.applyConfig', { ns: 'appDebug' })}
-          <RiArrowDownSLine className="ml-0.5 h-3 w-3" />
+          <RiArrowDownSLine className="ml-0.5 size-3" />
         </>
       </DropdownMenuTrigger>
       <DropdownMenuContent

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

@@ -85,7 +85,7 @@ export const AccessModeDisplay = ({ mode }: { mode?: keyof typeof ACCESS_MODE_MA
 
   return (
     <>
-      <span className={`${icon} h-4 w-4 shrink-0 text-text-secondary`} />
+      <span className={`${icon} size-4 shrink-0 text-text-secondary`} />
       <div className="grow truncate">
         <span className="system-sm-medium text-text-secondary">{t(`accessControlDialog.accessItems.${label}`, { ns: 'app' })}</span>
       </div>
@@ -170,13 +170,13 @@ export const PublisherSummarySection = ({
               {startNodeLimitExceeded && (
                 <div className="mt-3 flex flex-col items-stretch">
                   <p
-                    className="text-sm leading-5 font-semibold text-transparent"
+                    className="text-sm/5 font-semibold text-transparent"
                     style={upgradeHighlightStyle}
                   >
                     <span className="block">{t('publishLimit.startNodeTitlePrefix', { ns: 'workflow' })}</span>
                     <span className="block">{t('publishLimit.startNodeTitleSuffix', { ns: 'workflow' })}</span>
                   </p>
-                  <p className="mt-1 text-xs leading-4 text-text-secondary">
+                  <p className="mt-1 text-xs/4 text-text-secondary">
                     {t('publishLimit.startNodeDesc', { ns: 'workflow' })}
                   </p>
                   <UpgradeBtn
@@ -219,8 +219,8 @@ export const PublisherAccessSection = ({
               <AccessModeDisplay mode={accessMode} />
             </div>
             {!isAppAccessSet && <p className="shrink-0 system-xs-regular text-text-tertiary">{t('publishApp.notSet', { ns: 'app' })}</p>}
-            <div className="flex h-4 w-4 shrink-0 items-center justify-center">
-              <span className="i-ri-arrow-right-s-line h-4 w-4 text-text-quaternary" />
+            <div className="flex size-4 shrink-0 items-center justify-center">
+              <span className="i-ri-arrow-right-s-line size-4 text-text-quaternary" />
             </div>
           </div>
           {!isAppAccessSet && <p className="mt-1 system-xs-regular text-text-warning">{t('publishApp.notSetDesc', { ns: 'app' })}</p>}
@@ -288,11 +288,11 @@ export const PublisherActionsSection = ({
           className="flex-1"
           disabled={disabledFunctionButton}
           link={appURL}
-          icon={<span className="i-ri-play-circle-line h-4 w-4" />}
+          icon={<span className="i-ri-play-circle-line size-4" />}
           actionButton={showRunConfig
             ? {
                 ariaLabel: t('operation.config', { ns: 'common' }),
-                icon: <RiSettings2Line className="h-4 w-4" />,
+                icon: <RiSettings2Line className="size-4" />,
                 onClick: () => handleOpenRunConfig?.(appURL),
               }
             : undefined}
@@ -307,11 +307,11 @@ export const PublisherActionsSection = ({
                 className="flex-1"
                 disabled={disabledFunctionButton}
                 link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
-                icon={<span className="i-ri-play-list-2-line h-4 w-4" />}
+                icon={<span className="i-ri-play-list-2-line size-4" />}
                 actionButton={showBatchRunConfig
                   ? {
                       ariaLabel: t('operation.config', { ns: 'common' }),
-                      icon: <RiSettings2Line className="h-4 w-4" />,
+                      icon: <RiSettings2Line className="size-4" />,
                       onClick: () => handleOpenRunConfig?.(`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`),
                     }
                   : undefined}
@@ -324,7 +324,7 @@ export const PublisherActionsSection = ({
             <SuggestedAction
               onClick={handleEmbed}
               disabled={!publishedAt}
-              icon={<span className="i-custom-vender-line-development-code-browser h-4 w-4" />}
+              icon={<span className="i-custom-vender-line-development-code-browser size-4" />}
             >
               {t('common.embedIntoSite', { ns: 'workflow' })}
             </SuggestedAction>
@@ -337,7 +337,7 @@ export const PublisherActionsSection = ({
               handleOpenInExplore()
           }}
           disabled={disabledFunctionButton}
-          icon={<span className="i-ri-planet-line h-4 w-4" />}
+          icon={<span className="i-ri-planet-line size-4" />}
         >
           {t('common.openInExplore', { ns: 'workflow' })}
         </SuggestedAction>
@@ -350,7 +350,7 @@ export const PublisherActionsSection = ({
           className="flex-1"
           disabled={!publishedAt || missingStartNode}
           link="./develop"
-          icon={<span className="i-ri-terminal-box-line h-4 w-4" />}
+          icon={<span className="i-ri-terminal-box-line size-4" />}
         >
           {t('common.accessAPIReference', { ns: 'workflow' })}
         </SuggestedAction>

web/app/components/app/app-publisher/suggested-action.tsx

@@ -56,9 +56,9 @@ const SuggestedAction = ({
       onClick={handleClick}
       {...props}
     >
-      <div className="relative h-4 w-4 shrink-0">{icon}</div>
+      <div className="relative size-4 shrink-0">{icon}</div>
       <div className="shrink grow basis-0 system-sm-medium">{children}</div>
-      <RiArrowRightUpLine className="h-3.5 w-3.5 shrink-0" />
+      <RiArrowRightUpLine className="size-3.5 shrink-0" />
     </a>
   )
 

web/app/components/app/app-publisher/version-info-modal.tsx

@@ -81,7 +81,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
           </div>
           <button
             type="button"
-            className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            className="absolute top-5 right-5 flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             aria-label={t('operation.close', { ns: 'common' })}
             onClick={onClose}
           >

web/app/components/app/configuration/base/feature-panel/index.tsx

@@ -28,7 +28,7 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
       <div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')} data-testid="feature-panel-header">
         <div className="flex h-8 items-center justify-between">
           <div className="flex shrink-0 items-center space-x-1">
-            {!!headerIcon && <div className="flex h-6 w-6 items-center justify-center">{headerIcon}</div>}
+            {!!headerIcon && <div className="flex size-6 items-center justify-center">{headerIcon}</div>}
             <div className="system-sm-semibold text-text-secondary">{title}</div>
           </div>
           <div className="flex items-center gap-2">

web/app/components/app/configuration/base/operation-btn/index.tsx

@@ -17,8 +17,8 @@ type IOperationBtnProps = {
 }
 
 const iconMap = {
-  add: <RiAddLine className="h-3.5 w-3.5" />,
-  edit: <RiEditLine className="h-3.5 w-3.5" />,
+  add: <RiAddLine className="size-3.5" />,
+  edit: <RiEditLine className="size-3.5" />,
 }
 
 const OperationBtn: FC<IOperationBtnProps> = ({

web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx

@@ -17,7 +17,7 @@ const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({
       <div className="flex w-full max-w-[400px] flex-col gap-2 px-4 py-4">
         <div className="flex h-10 w-10 items-center justify-center rounded-[10px]">
           <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg backdrop-blur-[5px]">
-            <span className="i-ri-brain-2-line h-5 w-5 text-text-tertiary" />
+            <span className="i-ri-brain-2-line size-5 text-text-tertiary" />
           </div>
         </div>
         <div className="flex flex-col gap-1">
@@ -30,7 +30,7 @@ const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({
           onClick={onSetting}
         >
           <span className="system-sm-medium text-components-button-secondary-accent-text">{t('manageModels', { ns: 'appDebug' })}</span>
-          <span className="i-ri-arrow-right-line h-4 w-4 text-components-button-secondary-accent-text" />
+          <span className="i-ri-arrow-right-line size-4 text-components-button-secondary-accent-text" />
         </button>
       </div>
     </div>

web/app/components/app/configuration/base/warning-mask/index.tsx

@@ -24,7 +24,7 @@ const WarningMask: FC<IWarningMaskProps> = ({
   return (
     <div className={`${s.mask} absolute inset-0 z-10 bg-components-panel-bg-blur pt-16`}>
       <div className="mx-auto px-10">
-        <div className={`${s.icon} flex h-11 w-11 items-center justify-center rounded-xl bg-components-panel-bg`}>{warningIcon}</div>
+        <div className={`${s.icon} flex size-11 items-center justify-center rounded-xl bg-components-panel-bg`}>{warningIcon}</div>
         <div className="mt-4 text-[24px] leading-normal font-semibold text-text-primary">
           {title}
         </div>

web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx

@@ -144,7 +144,7 @@ const AdvancedPromptInput: FC<Props> = ({
   const [editorHeight, setEditorHeight] = React.useState(isChatMode ? 200 : 508)
   const contextMissing = (
     <div
-      className="flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl pt-2 pr-3 pb-1 pl-4"
+      className="flex h-11 items-center justify-between rounded-t-xl pt-2 pr-3 pb-1 pl-4"
       style={{
         background: 'linear-gradient(180deg, #FEF0C7 0%, rgba(254, 240, 199, 0) 100%)',
       }}
@@ -168,7 +168,7 @@ const AdvancedPromptInput: FC<Props> = ({
         {isContextMissing
           ? contextMissing
           : (
-              <div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-background-default pt-2 pr-3 pb-1 pl-4 hover:shadow-xs')}>
+              <div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-t-xl bg-background-default pt-2 pr-3 pb-1 pl-4 hover:shadow-xs')}>
                 {isChatMode
                   ? (
                       <MessageTypeSelector value={type} onChange={onTypeChange} />
@@ -190,12 +190,12 @@ const AdvancedPromptInput: FC<Props> = ({
                     )}
                 <div className={cn(s.optionWrap, 'items-center space-x-1')}>
                   {canDelete && (
-                    <RiDeleteBinLine onClick={onDelete} className="h-6 w-6 cursor-pointer p-1 text-text-tertiary" />
+                    <RiDeleteBinLine onClick={onDelete} className="size-6 cursor-pointer p-1 text-text-tertiary" />
                   )}
                   {!isCopied
                     ? (
                         <Copy
-                          className="h-6 w-6 cursor-pointer p-1 text-text-tertiary"
+                          className="size-6 cursor-pointer p-1 text-text-tertiary"
                           onClick={() => {
                             copy(value)
                             setIsCopied(true)
@@ -203,7 +203,7 @@ const AdvancedPromptInput: FC<Props> = ({
                         />
                       )
                     : (
-                        <CopyCheck className="h-6 w-6 p-1 text-text-tertiary" />
+                        <CopyCheck className="size-6 p-1 text-text-tertiary" />
                       )}
                 </div>
               </div>

web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx

@@ -49,7 +49,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
       >
         <div className="flex items-start space-x-3">
           <div
-            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-components-card-border bg-components-card-bg-alt shadow-lg"
+            className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-components-card-border bg-components-card-bg-alt shadow-lg"
           >
             {VarIcon}
           </div>

web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx

@@ -39,7 +39,7 @@ const EditModal: FC<Props> = ({
 
         <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.userPrefix', { ns: 'appDebug' })}</div>
         <input
-          className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
+          className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm/10"
           value={tempData.user_prefix}
           onChange={e => setTempData({
             ...tempData,
@@ -49,7 +49,7 @@ const EditModal: FC<Props> = ({
 
         <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.assistantPrefix', { ns: 'appDebug' })}</div>
         <input
-          className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
+          className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm/10"
           value={tempData.assistant_prefix}
           onChange={e => setTempData({
             ...tempData,

web/app/components/app/configuration/config-prompt/index.tsx

@@ -161,7 +161,7 @@ const Prompt: FC<IPromptProps> = ({
           onClick={handleAddMessage}
           className="mt-3 w-full"
         >
-          <RiAddLine className="mr-2 h-4 w-4" />
+          <RiAddLine className="mr-2 size-4" />
           <div>{t('promptMode.operation.addMessage', { ns: 'appDebug' })}</div>
         </Button>
       )}

web/app/components/app/configuration/config-prompt/message-type-selector.tsx

@@ -28,7 +28,7 @@ const MessageTypeSelector: FC<Props> = ({
         className={cn(showOption && 'bg-indigo-100', 'flex h-7 cursor-pointer items-center space-x-0.5 rounded-lg pr-1 pl-1.5 text-indigo-800')}
       >
         <div className="text-sm font-semibold uppercase">{value}</div>
-        <ChevronSelectorVertical className="h-3 w-3" />
+        <ChevronSelectorVertical className="size-3" />
       </div>
       {showOption && (
         <div className="absolute top-[30px] z-10 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg">

web/app/components/app/configuration/config-var/__tests__/var-item.spec.tsx

@@ -20,7 +20,7 @@ describe('VarItem', () => {
     expect(screen.getByTitle('api_key · API Key')).toBeInTheDocument()
     expect(screen.getByText('required')).toBeInTheDocument()
 
-    const editButton = container.querySelector('.mr-1.flex.h-6.w-6') as HTMLElement
+    const editButton = container.querySelector('.mr-1.flex.size-6') as HTMLElement
     fireEvent.click(editButton)
 
     expect(onEdit).toHaveBeenCalledTimes(1)

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

@@ -49,7 +49,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                 )}
                 key={index}
               >
-                <RiDraggable className="handle h-4 w-4 cursor-grab text-text-quaternary" />
+                <RiDraggable className="handle size-4 cursor-grab text-text-quaternary" />
                 <input
                   key={index}
                   type="input"
@@ -63,7 +63,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                       return item
                     }))
                   }}
-                  className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pr-8 pl-1.5 text-sm leading-9 text-text-secondary focus:outline-hidden"
+                  className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pr-8 pl-1.5 text-sm/9 text-text-secondary focus:outline-hidden"
                   onFocus={() => setFocusID(index)}
                   onBlur={() => setFocusID(null)}
                 />
@@ -78,7 +78,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                   onMouseEnter={() => setDeletingID(index)}
                   onMouseLeave={() => setDeletingID(null)}
                 >
-                  <RiDeleteBinLine className="h-3.5 w-3.5" aria-hidden="true" />
+                  <RiDeleteBinLine className="size-3.5" aria-hidden="true" />
                 </button>
               </div>
             ))}
@@ -90,7 +90,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
         onClick={() => { onChange([...options, '']) }}
         className="mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3 text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover"
       >
-        <RiAddLine className="h-4 w-4" />
+        <RiAddLine className="size-4" />
         <div className="system-sm-medium text-[13px]">{t('variableConfig.addOption', { ns: 'appDebug' })}</div>
       </div>
     </div>

web/app/components/app/configuration/config-var/input-type-icon.tsx

@@ -11,7 +11,7 @@ export type IInputTypeIconProps = {
 }
 
 const IconMap = (type: IInputTypeIconProps['type'], className: string) => {
-  const classNames = `h-3.5 w-3.5 ${className}`
+  const classNames = `size-3.5 ${className}`
   const icons = {
     string: (
       <InputVarTypeIcon type={InputVarType.textInput} className={classNames} />

web/app/components/app/configuration/config-var/select-type-item/index.tsx

@@ -38,7 +38,7 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
       onClick={onClick}
     >
       <div className="shrink-0">
-        <InputVarTypeIcon type={type} className="h-5 w-5" />
+        <InputVarTypeIcon type={type} className="size-5" />
       </div>
       <span>{typeName}</span>
     </div>

web/app/components/app/configuration/config-var/select-var-type.tsx

@@ -33,7 +33,7 @@ const SelectItem: FC<ItemProps> = ({ text, type, value, Icon, onClick }) => {
       className="h-8 rounded-lg px-3 text-text-primary"
       onClick={() => onClick(value)}
     >
-      {Icon ? <Icon className="h-4 w-4 text-text-secondary" /> : <InputVarTypeIcon type={type!} className="h-4 w-4 text-text-secondary" />}
+      {Icon ? <Icon className="size-4 text-text-secondary" /> : <InputVarTypeIcon type={type!} className="size-4 text-text-secondary" />}
       <div className="ml-2 truncate text-xs text-text-primary">{text}</div>
     </DropdownMenuItem>
   )

web/app/components/app/configuration/config-var/var-item.tsx

@@ -42,9 +42,9 @@ const VarItem: FC<ItemProps> = ({
 
   return (
     <div className={cn('group relative mb-1 flex h-[34px] w-full items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pr-3 pl-2.5 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover', readonly && 'cursor-not-allowed', className)}>
-      <VarIcon className={cn('mr-1 h-4 w-4 shrink-0 text-text-accent', canDrag && 'group-hover:opacity-0')} />
+      <VarIcon className={cn('mr-1 size-4 shrink-0 text-text-accent', canDrag && 'group-hover:opacity-0')} />
       {canDrag && (
-        <RiDraggable className="absolute top-3 left-3 hidden h-3 w-3 cursor-pointer text-text-tertiary group-hover:block" />
+        <RiDraggable className="absolute top-3 left-3 hidden size-3 cursor-pointer text-text-tertiary group-hover:block" />
       )}
       <div className="flex w-0 grow items-center">
         <div className="truncate" title={`${name} · ${label}`}>
@@ -63,20 +63,20 @@ const VarItem: FC<ItemProps> = ({
           <button
             type="button"
             aria-label={t('operation.edit', { ns: 'common' })}
-            className="mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 hover:bg-black/5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            className="mr-1 flex size-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 hover:bg-black/5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             onClick={onEdit}
           >
-            <RiEditLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiEditLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
           <button
             type="button"
             aria-label={t('operation.delete', { ns: 'common' })}
-            className="flex h-6 w-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-text-tertiary hover:text-text-destructive focus-visible:ring-1 focus-visible:ring-state-destructive-border focus-visible:outline-hidden"
+            className="flex size-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-text-tertiary hover:text-text-destructive focus-visible:ring-1 focus-visible:ring-state-destructive-border focus-visible:outline-hidden"
             onClick={onRemove}
             onMouseOver={() => setIsDeleting(true)}
             onMouseLeave={() => setIsDeleting(false)}
           >
-            <RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
+            <RiDeleteBinLine className="size-4" aria-hidden="true" />
           </button>
         </div>
       </div>

web/app/components/app/configuration/config-vision/index.tsx

@@ -65,7 +65,7 @@ const ConfigVision: FC = () => {
     <div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] border-effects-highlight bg-background-section-burn p-2">
       <div className="shrink-0 p-1">
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs">
-          <Vision className="h-4 w-4 text-text-primary-on-surface" />
+          <Vision className="size-4 text-text-primary-on-surface" />
         </div>
       </div>
       <div className="flex grow items-center">

web/app/components/app/configuration/config-vision/param-config-content.tsx

@@ -42,7 +42,7 @@ const ParamConfigContent: FC = () => {
 
   return (
     <div>
-      <div className="text-base leading-6 font-semibold text-text-primary">{t('vision.visionSettings.title', { ns: 'appDebug' })}</div>
+      <div className="text-base/6 font-semibold text-text-primary">{t('vision.visionSettings.title', { ns: 'appDebug' })}</div>
       <div className="space-y-6 pt-3">
         <div>
           <div className="mb-2 flex items-center space-x-1">

web/app/components/app/configuration/config-vision/param-config.tsx

@@ -20,7 +20,7 @@ const ParamsConfig: FC = () => {
       <PopoverTrigger
         render={(
           <Button variant="ghost" size="small" className={cn('')}>
-            <RiSettings2Line className="h-3.5 w-3.5" />
+            <RiSettings2Line className="size-3.5" />
             <div className="ml-1">{t('voice.settings', { ns: 'appDebug' })}</div>
           </Button>
         )}

web/app/components/app/configuration/config/agent-setting-button.tsx

@@ -27,7 +27,7 @@ const AgentSettingButton: FC<Props> = ({
   return (
     <>
       <Button onClick={() => setIsShowAgentSetting(true)} className="mr-2 shrink-0">
-        <RiSettings2Line className="mr-1 h-4 w-4 text-text-tertiary" />
+        <RiSettings2Line className="mr-1 size-4 text-text-tertiary" />
         {t('agent.setting.name', { ns: 'appDebug' })}
       </Button>
       {isShowAgentSetting && (

web/app/components/app/configuration/config/agent/agent-setting/index.tsx

@@ -66,9 +66,9 @@ const AgentSetting: FC<Props> = ({
           <div className="flex items-center">
             <div
               onClick={onCancel}
-              className="flex h-6 w-6 cursor-pointer items-center justify-center"
+              className="flex size-6 cursor-pointer items-center justify-center"
             >
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+              <RiCloseLine className="size-4 text-text-tertiary" />
             </div>
           </div>
         </div>
@@ -83,7 +83,7 @@ const AgentSetting: FC<Props> = ({
           <ItemPanel
             className="mb-4"
             icon={
-              <CuteRobot className="h-4 w-4 text-indigo-600" />
+              <CuteRobot className="size-4 text-indigo-600" />
             }
             name={t('agent.agentMode', { ns: 'appDebug' })}
             description={t('agent.agentModeDes', { ns: 'appDebug' })}
@@ -139,7 +139,7 @@ const AgentSetting: FC<Props> = ({
 
           {!isFunctionCall && (
             <div className="rounded-xl bg-background-section-burn py-2 shadow-xs">
-              <div className="flex h-8 items-center px-4 text-sm leading-6 font-semibold text-text-secondary">{t('builtInPromptTitle', { ns: 'tools' })}</div>
+              <div className="flex h-8 items-center px-4 text-sm/6 font-semibold text-text-secondary">{t('builtInPromptTitle', { ns: 'tools' })}</div>
               <div className="h-[396px] overflow-y-auto px-4 text-sm leading-5 font-normal whitespace-pre-line text-text-secondary">
                 {isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion}
               </div>

web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx

@@ -23,7 +23,7 @@ const ItemPanel: FC<Props> = ({
     <div className={cn(className, 'flex h-12 items-center justify-between rounded-lg bg-background-section-burn px-3')}>
       <div className="flex items-center">
         {icon}
-        <div className="mr-1 ml-3 text-sm leading-6 font-semibold text-text-secondary">{name}</div>
+        <div className="mr-1 ml-3 text-sm/6 font-semibold text-text-secondary">{name}</div>
         <Infotip aria-label={description} popupClassName="w-[180px]">
           {description}
         </Infotip>

web/app/components/app/configuration/config/agent/agent-tools/index.tsx

@@ -198,10 +198,10 @@ const AgentTools: FC = () => {
               )}
             >
               <div className="flex w-0 grow items-center">
-                {item.isDeleted && <DefaultToolIcon className="h-5 w-5" />}
+                {item.isDeleted && <DefaultToolIcon className="size-5" />}
                 {!item.isDeleted && (
                   <div className={cn((item.notAuthor || !item.enabled) && 'shrink-0 opacity-50')}>
-                    {typeof item.icon === 'string' && <div className="h-5 w-5 rounded-md bg-cover bg-center" style={{ backgroundImage: `url(${item.icon})` }} />}
+                    {typeof item.icon === 'string' && <div className="size-5 rounded-md bg-cover bg-center" style={{ backgroundImage: `url(${item.icon})` }} />}
                     {typeof item.icon !== 'string' && <AppIcon className="rounded-md" size="xs" icon={item.icon?.content} background={item.icon?.background} />}
                   </div>
                 )}
@@ -268,7 +268,7 @@ const AgentTools: FC = () => {
                       onMouseOver={() => setIsDeleting(index)}
                       onMouseLeave={() => setIsDeleting(-1)}
                     >
-                      <RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
+                      <RiDeleteBinLine className="size-4" aria-hidden="true" />
                     </button>
                   </div>
                 )}
@@ -287,7 +287,7 @@ const AgentTools: FC = () => {
                                 setIsShowSettingTool(true)
                               }}
                             >
-                              <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+                              <RiEqualizer2Line className="size-4 text-text-tertiary" />
                             </button>
                           )}
                         />
@@ -310,7 +310,7 @@ const AgentTools: FC = () => {
                       onMouseOver={() => setIsDeleting(index)}
                       onMouseLeave={() => setIsDeleting(-1)}
                     >
-                      <RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
+                      <RiDeleteBinLine className="size-4" aria-hidden="true" />
                     </button>
                   </div>
                 )}

web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx

@@ -192,7 +192,7 @@ const SettingBuiltInTool: FC<Props> = ({
                   <div className="relative border-b border-divider-subtle p-4 pb-3">
                     <div className="absolute top-3 right-3">
                       <ActionButton onClick={onHide}>
-                        <RiCloseLine className="h-4 w-4" />
+                        <RiCloseLine className="size-4" />
                       </ActionButton>
                     </div>
                     {showBackButton && (
@@ -200,12 +200,12 @@ const SettingBuiltInTool: FC<Props> = ({
                         className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
                         onClick={onHide}
                       >
-                        <RiArrowLeftLine className="h-4 w-4" />
+                        <RiArrowLeftLine className="size-4" />
                         {t('detailPanel.operation.back', { ns: 'plugin' })}
                       </div>
                     )}
                     <div className="flex items-center gap-1">
-                      <Icon size="tiny" className="h-6 w-6" src={collection.icon} />
+                      <Icon size="tiny" className="size-6" src={collection.icon} />
                       <OrgInfo
                         packageNameClassName="w-auto"
                         orgName={collection.author}

web/app/components/app/configuration/config/assistant-type-picker/index.tsx

@@ -47,9 +47,9 @@ const SelectItem: FC<ItemProps> = ({ text, value, Icon, isChecked, description,
       <div className="flex items-center justify-between">
         <div className="flex items-center">
           <div className="mr-3 rounded-lg bg-indigo-50 p-1">
-            <Icon className="h-4 w-4 text-indigo-600" />
+            <Icon className="size-4 text-indigo-600" />
           </div>
-          <div className="text-sm leading-5 font-medium text-gray-900">{text}</div>
+          <div className="text-sm/5 font-medium text-gray-900">{text}</div>
         </div>
         <Radio isChecked={isChecked} />
       </div>
@@ -117,9 +117,9 @@ const AssistantTypePicker: FC<Props> = ({
             <div className={cn(open && 'bg-gray-50', 'flex h-8 cursor-pointer items-center space-x-1 rounded-lg border border-black/5 px-3 text-indigo-600 select-none')} />
           )}
         >
-          {isAgent ? <BubbleText className="h-3 w-3" /> : <CuteRobot className="h-3 w-3" />}
+          {isAgent ? <BubbleText className="size-3" /> : <CuteRobot className="size-3" />}
           <div className="text-xs font-medium">{t(`assistantType.${isAgent ? 'agentAssistant' : 'chatAssistant'}.name`, { ns: 'appDebug' })}</div>
-          <RiArrowDownSLine className="h-3 w-3" />
+          <RiArrowDownSLine className="size-3" />
         </PopoverTrigger>
         <PopoverContent
           placement="bottom-end"
@@ -127,7 +127,7 @@ const AssistantTypePicker: FC<Props> = ({
           alignOffset={-2}
           popupClassName="relative left-0.5 w-[480px] rounded-xl border border-black/8 bg-white p-6 shadow-lg"
         >
-          <div className="mb-2 text-sm leading-5 font-semibold text-gray-900">{t('assistantType.name', { ns: 'appDebug' })}</div>
+          <div className="mb-2 text-sm/5 font-semibold text-gray-900">{t('assistantType.name', { ns: 'appDebug' })}</div>
           <SelectItem
             Icon={BubbleText}
             value="chat"

web/app/components/app/configuration/config/automatic/automatic-btn.tsx

@@ -17,7 +17,7 @@ const AutomaticBtn: FC<IAutomaticBtnProps> = ({
 
   return (
     <Button variant="secondary-accent" size="small" onClick={onClick}>
-      <RiSparklingFill className="mr-1 h-3.5 w-3.5" />
+      <RiSparklingFill className="mr-1 size-3.5" />
       <span className="">{t('operation.automatic', { ns: 'appDebug' })}</span>
     </Button>
   )

web/app/components/app/configuration/config/automatic/get-automatic-res.tsx

@@ -72,7 +72,7 @@ const TryLabel: FC<{
       className="mt-2 mr-1 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-components-button-secondary-bg px-2"
       onClick={onClick}
     >
-      <Icon className="h-4 w-4 text-text-tertiary"></Icon>
+      <Icon className="size-4 text-text-tertiary"></Icon>
       <div className="ml-1 text-xs font-medium text-text-secondary">{text}</div>
     </div>
   )
@@ -375,7 +375,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
                   onClick={onGenerate}
                   disabled={isLoading}
                 >
-                  <Generator className="h-4 w-4" />
+                  <Generator className="size-4" />
                   <span className="text-xs font-semibold">{t('generate.generate', { ns: 'appDebug' })}</span>
                 </Button>
               </div>

web/app/components/app/configuration/config/automatic/idea-output.tsx

@@ -27,7 +27,7 @@ const IdeaOutput: FC<Props> = ({
   return (
     <div className="mt-4 text-[0px]">
       <div
-        className="mb-1.5 flex cursor-pointer items-center text-sm leading-5 font-medium text-text-primary"
+        className="mb-1.5 flex cursor-pointer items-center text-sm/5 font-medium text-text-primary"
         onClick={toggleFoldIdeaOutput}
       >
         <div className="mr-1 system-sm-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}.idealOutput`, { ns: 'appDebug' })}</div>

web/app/components/app/configuration/config/automatic/result.tsx

@@ -57,7 +57,7 @@ const Result: FC<Props> = ({
               toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
             }}
           >
-            <RiClipboardLine className="h-4 w-4 text-text-secondary" />
+            <RiClipboardLine className="size-4 text-text-secondary" />
           </Button>
           <Button variant="primary" onClick={onApply}>
             {t('generate.apply', { ns: 'appDebug' })}

web/app/components/app/configuration/config/automatic/version-selector.tsx

@@ -85,7 +85,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
                 {option.label}
               </div>
               {
-                value === option.value && <RiCheckLine className="h-4 w-4 shrink-0 text-text-accent" />
+                value === option.value && <RiCheckLine className="size-4 shrink-0 text-text-accent" />
               }
             </DropdownMenuRadioItem>
           ))}

web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx

@@ -254,7 +254,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
                   onClick={onGenerate}
                   disabled={isLoading}
                 >
-                  <Generator className="h-4 w-4" />
+                  <Generator className="size-4" />
                   <span className="text-xs font-semibold">{t('codegen.generate', { ns: 'appDebug' })}</span>
                 </Button>
               </div>

web/app/components/app/configuration/config/config-audio.tsx

@@ -52,7 +52,7 @@ const ConfigAudio: FC = () => {
     <div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn p-2">
       <div className="shrink-0 p-1">
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs">
-          <Microphone01 className="h-4 w-4 text-text-primary-on-surface" />
+          <Microphone01 className="size-4 text-text-primary-on-surface" />
         </div>
       </div>
       <div className="flex grow items-center">

web/app/components/app/configuration/config/config-document.tsx

@@ -52,7 +52,7 @@ const ConfigDocument: FC = () => {
     <div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn p-2">
       <div className="shrink-0 p-1">
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs">
-          <Document className="h-4 w-4 text-text-primary-on-surface" />
+          <Document className="size-4 text-text-primary-on-surface" />
         </div>
       </div>
       <div className="flex grow items-center">

web/app/components/app/configuration/configuration-view.tsx

@@ -130,14 +130,14 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
                     {isMobile && (
                       <Button className="mr-2 h-8! text-[13px]! font-medium" onClick={onOpenDebugPanel}>
                         <span className="mr-1">{t('operation.debugConfig', { ns: 'appDebug' })}</span>
-                        <CodeBracketIcon className="h-4 w-4 text-text-tertiary" />
+                        <CodeBracketIcon className="size-4 text-text-tertiary" />
                       </Button>
                     )}
                     <AppPublisher {...appPublisherProps} />
                   </div>
                 </div>
               </div>
-              <div className={`flex h-full w-full shrink-0 flex-col sm:w-1/2 ${debugWithMultipleModel && 'max-w-[560px]'}`}>
+              <div className={`flex size-full shrink-0 flex-col sm:w-1/2 ${debugWithMultipleModel && 'max-w-[560px]'}`}>
                 <Config />
               </div>
               {!isMobile && (
@@ -217,7 +217,7 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
                       <div className="mb-4 flex shrink-0 justify-end">
                         <DrawerCloseButton
                           aria-label={t('operation.close', { ns: 'common' })}
-                          className="h-6 w-6 rounded-md"
+                          className="size-6 rounded-md"
                         />
                       </div>
                       <Debug

web/app/components/app/configuration/dataset-config/card-item/index.tsx

@@ -86,7 +86,7 @@ const Item: FC<ItemProps> = ({
                 setShowSettingsModal(true)
               }}
             >
-              <RiEditLine className="h-4 w-4 shrink-0 text-text-tertiary" />
+              <RiEditLine className="size-4 shrink-0 text-text-tertiary" />
             </ActionButton>
           )
         }
@@ -98,7 +98,7 @@ const Item: FC<ItemProps> = ({
               onMouseEnter={() => setIsDeleting(true)}
               onMouseLeave={() => setIsDeleting(false)}
             >
-              <RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary', isDeleting && 'text-text-destructive')} />
+              <RiDeleteBinLine className={cn('size-4 shrink-0 text-text-tertiary', isDeleting && 'text-text-destructive')} />
             </ActionButton>
           )
         }

web/app/components/app/configuration/dataset-config/context-var/index.tsx

@@ -17,7 +17,7 @@ const ContextVar: FC<Props> = (props) => {
     <div className={cn(notSetVar ? 'rounded-br-xl rounded-bl-xl border-[#FEF0C7] bg-[#FEF0C7]' : 'border-components-panel-border-subtle', 'flex h-12 items-center justify-between border-t px-3')}>
       <div className="flex shrink-0 items-center space-x-1">
         <div className="p-1">
-          <BracketsX className="h-4 w-4 text-text-accent" />
+          <BracketsX className="size-4 text-text-accent" />
         </div>
         <div className="mr-1 text-sm font-medium text-text-secondary">{t('feature.dataSet.queryVariable.title', { ns: 'appDebug' })}</div>
         <Infotip

web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx

@@ -74,7 +74,7 @@ const VarPicker: FC<Props> = ({
                       </div>
                     )}
               </div>
-              <ChevronDownIcon className={cn(open && 'rotate-180 text-text-tertiary', 'h-3.5 w-3.5')} />
+              <ChevronDownIcon className={cn(open && 'rotate-180 text-text-tertiary', 'size-3.5')} />
             </div>
           </div>
         )}
@@ -104,7 +104,7 @@ const VarPicker: FC<Props> = ({
           : (
               <div className="w-[240px] rounded-lg border border-components-panel-border bg-components-panel-bg p-6 shadow-lg">
                 <div className="mb-1 text-sm font-medium text-text-secondary">{t('feature.dataSet.queryVariable.noVar', { ns: 'appDebug' })}</div>
-                <div className="text-xs leading-normal text-text-tertiary">{t('feature.dataSet.queryVariable.noVarTip', { ns: 'appDebug' })}</div>
+                <div className="text-xs/normal text-text-tertiary">{t('feature.dataSet.queryVariable.noVarTip', { ns: 'appDebug' })}</div>
               </div>
             )}
       </PopoverContent>

web/app/components/app/configuration/dataset-config/params-config/config-content.tsx

@@ -246,7 +246,7 @@ const ConfigContent: FC<Props> = ({
                       <div className="truncate">{option.label}</div>
                       <Infotip
                         aria-label={option.tips}
-                        className="ml-0.5 h-3.5 w-3.5"
+                        className="ml-0.5 size-3.5"
                         iconClassName="h-3.5 w-3.5"
                         popupClassName="w-[200px]"
                       >