Merge remote-tracking branch 'origin/main' into feat/support-agent-sandbox

web/app/components/workflow/skill/editor/markdown-file-editor.tsx

@@ -46,11 +46,11 @@ const MarkdownFileEditor = ({
           : (
               <span className="flex items-center gap-1 text-components-input-text-placeholder">
                 <span>{t('promptEditor.skillMarkdown.placeholderPrefix', { ns: 'common' })}</span>
-                <span className="system-kbd inline-flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray px-[1px] text-text-placeholder">/</span>
+                <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray px-[1px] text-text-placeholder system-kbd">/</span>
                 <span className="text-[13px] leading-4 underline decoration-dotted">
                   {t('promptEditor.skillMarkdown.placeholderReferenceFiles', { ns: 'common' })}
                 </span>
-                <span className="system-kbd inline-flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray px-[1px] text-text-placeholder">@</span>
+                <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray px-[1px] text-text-placeholder system-kbd">@</span>
                 <span className="text-[13px] leading-4 underline decoration-dotted">
                   {t('promptEditor.skillMarkdown.placeholderUseTools', { ns: 'common' })}
                 </span>

web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx

@@ -81,13 +81,13 @@ const FileReferenceBlock = ({ nodeKey, resourceId }: FileReferenceBlockProps) =>
   const tooltipContent = isMissing
     ? (
         <div className="space-y-1">
-          <div className="system-xs-medium text-text-secondary">{missingMessage}</div>
+          <div className="text-text-secondary system-xs-medium">{missingMessage}</div>
           {pathForTooltip && (
             <div>{pathForTooltip}</div>
           )}
         </div>
       )
-    : (<div className="system-xs-medium text-text-secondary">{pathForTooltip ?? displayName}</div>)
+    : (<div className="text-text-secondary system-xs-medium">{pathForTooltip ?? displayName}</div>)
 
   const handleSelect = useCallback((node: TreeNodeData) => {
     editor.update(() => {

web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx

@@ -147,7 +147,7 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
       </div>
       <div className="flex min-h-0 w-full flex-1 gap-2 overflow-auto pb-4 pl-4 pr-3 pt-1">
         {isFolder && (
-          <div className="system-sm-regular text-text-tertiary">
+          <div className="text-text-tertiary system-sm-regular">
             {t('skillEditor.previewUnavailable')}
           </div>
         )}
@@ -157,7 +157,7 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
           </div>
         )}
         {isMarkdownPreview && contentError && (
-          <div className="system-sm-regular text-text-tertiary">
+          <div className="text-text-tertiary system-sm-regular">
             {t('skillSidebar.loadError')}
           </div>
         )}
@@ -177,7 +177,7 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
           </div>
         )}
         {isReadOnlyPreview && downloadError && (
-          <div className="system-sm-regular text-text-tertiary">
+          <div className="text-text-tertiary system-sm-regular">
             {t('skillSidebar.loadError')}
           </div>
         )}
@@ -190,7 +190,7 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
           />
         )}
         {isReadOnlyPreview && !isDownloadLoading && !downloadError && !downloadUrl && (
-          <div className="system-sm-regular text-text-tertiary">
+          <div className="text-text-tertiary system-sm-regular">
             {t('skillSidebar.loadError')}
           </div>
         )}

web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx

@@ -542,7 +542,7 @@ const ToolBlockComponent = ({
           <div className="flex h-9 w-9 items-center justify-center rounded-full border border-divider-subtle">
             <InfoCircle className="h-4 w-4 text-text-tertiary" />
           </div>
-          <div className="system-xs-regular mt-3 text-text-tertiary">
+          <div className="mt-3 text-text-tertiary system-xs-regular">
             {t('skillEditor.authorizationRequired', { ns: 'workflow' })}
           </div>
         </div>
@@ -584,11 +584,11 @@ const ToolBlockComponent = ({
         }}
       >
         {renderIcon()}
-        <span className={cn('system-xs-medium max-w-[180px] truncate', needAuthorization ? 'text-text-warning' : 'text-text-accent')}>
+        <span className={cn('max-w-[180px] truncate system-xs-medium', needAuthorization ? 'text-text-warning' : 'text-text-accent')}>
           {displayLabel}
         </span>
         {needAuthorization && (
-          <span className="system-2xs-medium-uppercase flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning">
+          <span className="flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning system-2xs-medium-uppercase">
             {authBadgeLabel}
             <RiAlertFill className="h-3 w-3" />
           </span>

web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx

@@ -665,7 +665,7 @@ const ToolGroupBlockComponent = ({
       />
       {needAuthorization && (
         <div className="flex min-h-[200px] flex-1 flex-col items-center justify-center px-4 py-6 text-text-tertiary">
-          <div className="system-xs-regular text-text-tertiary">
+          <div className="text-text-tertiary system-xs-regular">
             {t('skillEditor.authorizationRequired', { ns: 'workflow' })}
           </div>
         </div>
@@ -682,9 +682,9 @@ const ToolGroupBlockComponent = ({
           <div className="flex items-center gap-3">
             {renderProviderHeaderIcon()}
             <div className="flex flex-col">
-              <span className="system-md-semibold text-text-secondary">{providerLabel}</span>
+              <span className="text-text-secondary system-md-semibold">{providerLabel}</span>
               {providerAuthor && (
-                <span className="system-xs-regular text-text-tertiary">{t('toolGroup.byAuthor', { ns: 'workflow', author: providerAuthor })}</span>
+                <span className="text-text-tertiary system-xs-regular">{t('toolGroup.byAuthor', { ns: 'workflow', author: providerAuthor })}</span>
               )}
             </div>
           </div>
@@ -702,7 +702,7 @@ const ToolGroupBlockComponent = ({
           </button>
         </div>
         {providerDescription && (
-          <div className="system-xs-regular mt-2 text-text-tertiary">
+          <div className="mt-2 text-text-tertiary system-xs-regular">
             {providerDescription}
           </div>
         )}
@@ -755,7 +755,7 @@ const ToolGroupBlockComponent = ({
         />
         {needAuthorization && (
           <div className="flex min-h-[120px] flex-1 flex-col items-center justify-center px-4 py-6 text-text-tertiary">
-            <div className="system-xs-regular text-text-tertiary">
+            <div className="text-text-tertiary system-xs-regular">
               {t('skillEditor.authorizationRequired', { ns: 'workflow' })}
             </div>
           </div>
@@ -763,7 +763,7 @@ const ToolGroupBlockComponent = ({
       </div>
       {!needAuthorization && (
         <div className="mt-2 flex flex-col gap-2 border-t border-divider-subtle px-4 pb-4 pt-2">
-          <div className="system-sm-semibold-uppercase text-text-secondary">
+          <div className="text-text-secondary system-sm-semibold-uppercase">
             {t('toolGroup.actionsEnabled', { ns: 'workflow', num: displayEnabledCount })}
           </div>
           <div className="flex flex-col gap-2">
@@ -776,7 +776,7 @@ const ToolGroupBlockComponent = ({
                 )}
               >
                 <div className="flex items-center gap-2">
-                  <div className="system-md-semibold flex-1 text-text-secondary">
+                  <div className="flex-1 text-text-secondary system-md-semibold">
                     {item.toolLabel}
                   </div>
                   {item.toolParams?.length
@@ -807,7 +807,7 @@ const ToolGroupBlockComponent = ({
                   </div>
                 </div>
                 {item.toolDescription && (
-                  <div className="system-xs-regular mt-1 text-text-tertiary">
+                  <div className="mt-1 text-text-tertiary system-xs-regular">
                     {item.toolDescription}
                   </div>
                 )}
@@ -842,18 +842,18 @@ const ToolGroupBlockComponent = ({
         }}
       >
         {renderIcon()}
-        <span className={cn('system-xs-medium max-w-[160px] truncate', needAuthorization ? 'text-text-warning' : 'text-text-accent')}>
+        <span className={cn('max-w-[160px] truncate system-xs-medium', needAuthorization ? 'text-text-warning' : 'text-text-accent')}>
           {providerLabel}
         </span>
         {needAuthorization
           ? (
-              <span className="system-2xs-medium-uppercase flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning">
+              <span className="flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning system-2xs-medium-uppercase">
                 {authBadgeLabel}
                 <RiAlertFill className="h-3 w-3" />
               </span>
             )
           : (
-              <span className="system-2xs-medium-uppercase flex h-4 items-center rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1 text-text-accent-secondary">
+              <span className="flex h-4 items-center rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1 text-text-accent-secondary system-2xs-medium-uppercase">
                 {displayEnabledCount}
               </span>
             )}

web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-header.tsx

@@ -75,7 +75,7 @@ const ToolHeader = ({
               </button>
             )}
             {renderHeaderIcon()}
-            <span className="system-xs-medium text-text-tertiary">
+            <span className="text-text-tertiary system-xs-medium">
               {providerLabel}
             </span>
           </div>
@@ -94,10 +94,10 @@ const ToolHeader = ({
         </div>
       </div>
       <div className="mt-1.5 px-3 pb-2">
-        <div className="system-md-semibold text-text-primary">
+        <div className="text-text-primary system-md-semibold">
           {toolLabel}
         </div>
-        <div className="system-sm-regular mt-2.5 text-text-secondary">
+        <div className="mt-2.5 text-text-secondary system-sm-regular">
           {description}
         </div>
       </div>

web/app/components/workflow/skill/editor/skill-editor/tool-setting/tool-settings-section.tsx

@@ -141,9 +141,9 @@ const ToolSettingsSection = ({
     <>
       <Divider className="my-1 w-full" />
       <div className="px-4 pb-1 pt-3">
-        <div className="system-sm-semibold-uppercase mb-1 text-text-primary">{t('detailPanel.toolSelector.reasoningConfig', { ns: 'plugin' })}</div>
-        <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip1', { ns: 'plugin' })}</div>
-        <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip2', { ns: 'plugin' })}</div>
+        <div className="mb-1 text-text-primary system-sm-semibold-uppercase">{t('detailPanel.toolSelector.reasoningConfig', { ns: 'plugin' })}</div>
+        <div className="text-text-tertiary system-xs-regular">{t('detailPanel.toolSelector.paramsTip1', { ns: 'plugin' })}</div>
+        <div className="text-text-tertiary system-xs-regular">{t('detailPanel.toolSelector.paramsTip2', { ns: 'plugin' })}</div>
       </div>
       {showSettingsSection && (
         <ReasoningConfigForm