chore: mask the debug key

web/app/components/plugins/base/key-value-item.tsx

@@ -15,6 +15,7 @@ type Props = {
   label: string
   labelWidthClassName?: string
   value: string
+  maskedValue?: string
   valueMaxWidthClassName?: string
 }
 
@@ -22,6 +23,7 @@ const KeyValueItem: FC<Props> = ({
   label,
   labelWidthClassName = 'w-10',
   value,
+  maskedValue,
   valueMaxWidthClassName = 'max-w-[162px]',
 }) => {
   const { t } = useTranslation()
@@ -49,7 +51,7 @@ const KeyValueItem: FC<Props> = ({
       <span className={cn('flex flex-col justify-center items-start text-text-tertiary system-xs-medium', labelWidthClassName)}>{label}</span>
       <div className='flex justify-center items-center gap-0.5'>
         <span className={cn(valueMaxWidthClassName, ' truncate system-xs-medium text-text-secondary')}>
-          {value}
+          {maskedValue || value}
         </span>
         <Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>
           <ActionButton onClick={handleCopy}>

web/app/components/plugins/plugin-page/debug-info.tsx

@@ -17,6 +17,9 @@ const DebugInfo: FC = () => {
   const { t } = useTranslation()
   const { data: info, isLoading } = useDebugKey()
 
+  // info.key likes 4580bdb7-b878-471c-a8a4-bfd760263a53 mask the middle part using *.
+  const maskedKey = info?.key?.replace(/(.{8})(.*)(.{8})/, '$1********$3')
+
   if (isLoading) return null
 
   return (
@@ -40,6 +43,7 @@ const DebugInfo: FC = () => {
             <KeyValueItem
               label={'Key'}
               value={info?.key || ''}
+              maskedValue={maskedKey}
             />
           </div>
         </>