Update worker node design and add missing token

.prettierrc.json

@@ -4,6 +4,7 @@
     "prettier-plugin-tailwindcss"
   ],
   "tailwindFunctions": ["classNames"],
+  "tailwindConfig": "./tailwind.config.js",
   "singleQuote": true,
   "trailingComma": "es5"
 }

package.json

@@ -116,6 +116,7 @@
     "zustand": "^5.0.4"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@playwright/test": "^1.48.2",
     "@storybook/addon-a11y": "^10.1.11",
     "@storybook/addon-docs": "^10.1.11",
@@ -132,7 +133,6 @@
     "@types/react-dom": "^18.3.1",
     "@types/unzipper": "^0.10.11",
     "@types/xml2js": "^0.4.14",
-    "@eslint/js": "^9.39.2",
     "@typescript-eslint/eslint-plugin": "^8.53.0",
     "@typescript-eslint/parser": "^8.53.0",
     "@vitejs/plugin-react": "^4.3.3",
@@ -154,7 +154,7 @@
     "postcss-import": "^16.1.0",
     "prettier": "^3.8.1",
     "prettier-plugin-organize-imports": "^4.3.0",
-    "prettier-plugin-tailwindcss": "^0.7.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.7.3",

src/components/ChatBox/MessageItem/AgentMessageCard.tsx

@@ -65,7 +65,7 @@ export function AgentMessageCard({
   return (
     <div
       key={id}
-      className={`relative w-full rounded-xl border bg-message-fill-default px-sm py-3 ${className || ''} group overflow-hidden`}
+      className={`relative w-full rounded-xl bg-transparent px-sm py-3 ${className || ''} group overflow-hidden`}
     >
       <div className="absolute bottom-[0px] right-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
         <Button onClick={handleCopy} variant="ghost" size="icon">

src/components/ChatBox/MessageItem/UserMessageCard.tsx

@@ -69,7 +69,7 @@ export function UserMessageCard({
   return (
     <div
       key={id}
-      className={`relative w-full rounded-xl border bg-surface-primary px-sm py-2 ${className || ''} group overflow-visible`}
+      className={`relative w-full rounded-xl border bg-surface-tertiary px-sm py-2 ${className || ''} group overflow-visible`}
     >
       <div className="absolute bottom-[0px] right-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
         <Button onClick={handleCopy} variant="ghost" size="icon">

src/components/WorkFlow/MarkDown.tsx

@@ -86,30 +86,30 @@ export const MarkDown = ({
         remarkPlugins={[remarkGfm]}
         components={{
           h1: ({ children }) => (
-            <h1 className="text-primary mb-1 break-words text-xs font-bold">
+            <h1 className="text-primary mb-1 break-words text-label-sm font-bold">
               {children}
             </h1>
           ),
           h2: ({ children }) => (
-            <h2 className="text-primary mb-1 break-words text-xs font-semibold">
+            <h2 className="text-primary mb-1 break-words text-label-sm font-semibold">
               {children}
             </h2>
           ),
           h3: ({ children }) => (
-            <h3 className="text-primary mb-1 break-words text-xs font-medium">
+            <h3 className="text-primary mb-1 break-words text-label-sm font-medium">
               {children}
             </h3>
           ),
           p: ({ children }) => (
             <p
-              className={`m-0 ${pTextSize} text-primary whitespace-pre-line break-words font-inter text-xs font-medium leading-10`}
+              className={`m-0 ${pTextSize} text-primary whitespace-pre-line break-words font-inter text-label-xs font-medium`}
             >
               {children}
             </p>
           ),
           ul: ({ children }) => (
             <ul
-              className={`text-primary mb-1 list-inside list-disc text-xs ${olPadding}`}
+              className={`text-primary mb-1 list-disc pl-4 text-label-xs ${olPadding}`}
             >
               {children}
             </ul>
@@ -122,7 +122,7 @@ export const MarkDown = ({
           // 	</ol>
           // ),
           li: ({ children }) => (
-            <li className="mb-1 list-inside break-all">{children}</li>
+            <li className="mb-1 list-outside break-words">{children}</li>
           ),
           a: ({ children, href }) => (
             <a