From a784121070122097c277c075f2fac80bf954fca1 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Wed, 28 Jan 2026 15:58:49 +0800
Subject: [PATCH] fix(skill): align upload tooltip with Figma design

Replace animated pulse background with static progress bar using
design tokens and increase upload icon to 24px.
---
 .../workflow/skill/file-tree/upload-status-tooltip.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/skill/file-tree/upload-status-tooltip.tsx b/web/app/components/workflow/skill/file-tree/upload-status-tooltip.tsx
index 1c2c00a78a..5c90d898bc 100644
--- a/web/app/components/workflow/skill/file-tree/upload-status-tooltip.tsx
+++ b/web/app/components/workflow/skill/file-tree/upload-status-tooltip.tsx
@@ -57,7 +57,13 @@ const UploadStatusTooltip: FC<UploadStatusTooltipProps> = ({ fallback }) => {
         )}
       >
         {uploadStatus === 'uploading' && (
-          <div className="absolute inset-[-0.5px] animate-pulse bg-state-accent-hover-alt opacity-60" />
+          <>
+            <div className="absolute inset-[-0.5px] bg-components-progress-bar-bg" />
+            <div
+              className="absolute bottom-[-0.5px] left-[-0.5px] top-[-0.5px] border-r-[1.5px] border-components-progress-bar-progress-highlight bg-components-progress-bar-progress"
+              style={{ width: uploadProgress.total > 0 ? `${(uploadProgress.uploaded / uploadProgress.total) * 100}%` : '0%' }}
+            />
+          </>
         )}
         {uploadStatus === 'success' && (
           <div className="absolute inset-[-0.5px] bg-toast-success-bg opacity-40" />
@@ -68,7 +74,7 @@ const UploadStatusTooltip: FC<UploadStatusTooltipProps> = ({ fallback }) => {
 
         <div className="relative z-10 shrink-0">
           {uploadStatus === 'uploading' && (
-            <RiUploadCloud2Line className="size-5 text-text-accent" />
+            <RiUploadCloud2Line className="size-6 text-text-accent" />
           )}
           {uploadStatus === 'success' && (
             <RiCheckboxCircleFill className="size-5 text-text-success" />