diff --git a/backend/app/agent/factory/browser.py b/backend/app/agent/factory/browser.py
index cf9a8724f..528f8b800 100644
--- a/backend/app/agent/factory/browser.py
+++ b/backend/app/agent/factory/browser.py
@@ -16,9 +16,6 @@
 import threading
 import uuid
 
-from camel.messages import BaseMessage
-from camel.toolkits import ToolkitMessageIntegration
-
 from app.agent.agent_model import agent_model
 from app.agent.listen_chat_agent import logger
 from app.agent.prompt import BROWSER_SYS_PROMPT
@@ -36,6 +33,8 @@
 from app.model.chat import Chat
 from app.service.task import Agents
 from app.utils.file_utils import get_working_directory
+from camel.messages import BaseMessage
+from camel.toolkits import ToolkitMessageIntegration
 
 
 def _get_browser_port(browser: dict) -> int:
diff --git a/electron/main/index.ts b/electron/main/index.ts
index ee5f699a7..0752c7ace 100644
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -2755,10 +2755,10 @@ async function createWindow() {
   // Windows: native frame and solid background. macOS/Linux: frameless; macOS corner radius via native hook.
   win = new BrowserWindow({
     title: 'Eigent',
-    width: 1200,
-    height: 800,
-    minWidth: 1050,
-    minHeight: 650,
+    width: 1366,
+    height: 860,
+    minWidth: 1100,
+    minHeight: 700,
     // Use native frame on Windows for better native integration
     frame: isWindows ? true : false,
     show: false, // Don't show until content is ready to avoid white screen
diff --git a/package.json b/package.json
index 264deabbc..a21c7821e 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "test:watch": "vitest",
     "test:e2e": "vitest run --config vitest.config.ts",
     "test:coverage": "vitest run --coverage",
+    "check:i18n": "node scripts/check-i18n-locale-parity.js",
     "type-check": "tsc -p tsconfig.build.json --noEmit",
     "lint": "eslint . --no-warn-ignored",
     "lint:fix": "eslint . --fix --no-warn-ignored",
diff --git a/src/assets/icon/cursor.svg b/src/assets/icon/cursor.svg
new file mode 100644
index 000000000..2104885da
--- /dev/null
+++ b/src/assets/icon/cursor.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="56" viewBox="0 0 24 24" width="56" xmlns="http://www.w3.org/2000/svg" style="flex: 0 0 auto; line-height: 1;"><title>Cursor</title><path d="M22.106 5.68L12.5.135a.998.998 0 00-.998 0L1.893 5.68a.84.84 0 00-.419.726v11.186c0 .3.16.577.42.727l9.607 5.547a.999.999 0 00.998 0l9.608-5.547a.84.84 0 00.42-.727V6.407a.84.84 0 00-.42-.726zm-.603 1.176L12.228 22.92c-.063.108-.228.064-.228-.061V12.34a.59.59 0 00-.295-.51l-9.11-5.26c-.107-.062-.063-.228.062-.228h18.55c.264 0 .428.286.296.514z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icon/vs-code.svg b/src/assets/icon/vs-code.svg
new file mode 100644
index 000000000..24c1d67a9
--- /dev/null
+++ b/src/assets/icon/vs-code.svg
@@ -0,0 +1,23 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.3782 6.09398C43.3782 4.44593 41.533 4.44591 40.7129 4.65192C41.861 3.74549 43.2074 3.96526 43.6857 4.23992L54.7733 9.67651C55.8297 10.1945 56.4998 11.2724 56.4998 12.4536V48.2183C56.4998 49.4153 55.8119 50.5047 54.734 51.0143L44.3009 55.9476C43.5831 56.2564 42.025 57.0188 40.7129 55.9474C42.3531 56.2566 43.2415 55.0892 43.3782 54.2995V6.09398Z" fill="url(#paint0_linear_7473_8719)"/>
+<path d="M40.846 4.62243C41.7164 4.45044 43.3784 4.5302 43.3784 6.09422V18.4049L9.76298 43.8351C9.17541 44.2796 8.3485 44.2057 7.84804 43.6642L4.3835 39.9154C3.84075 39.3281 3.87872 38.4088 4.46805 37.8688L40.7129 4.65215L40.846 4.62243Z" fill="url(#paint1_linear_7473_8719)"/>
+<path d="M43.3784 42.1954L9.76298 16.7651C9.17541 16.3206 8.3485 16.3944 7.84804 16.9359L4.3835 20.6848C3.84075 21.2721 3.87872 22.1914 4.46805 22.7316L40.7129 55.9481C42.3531 56.2571 43.2417 55.0897 43.3784 54.3V42.1954Z" fill="url(#paint2_linear_7473_8719)"/>
+<defs>
+<linearGradient id="paint0_linear_7473_8719" x1="48.6065" y1="4" x2="48.6065" y2="56.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#32B5F1"/>
+<stop offset="1" stop-color="#2B9FED"/>
+</linearGradient>
+<linearGradient id="paint1_linear_7473_8719" x1="43.3784" y1="10.6263" x2="5.91569" y2="42.0722" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0F6FB3"/>
+<stop offset="0.270551" stop-color="#1279B7"/>
+<stop offset="0.421376" stop-color="#1176B5"/>
+<stop offset="0.618197" stop-color="#0E69AC"/>
+<stop offset="0.855344" stop-color="#0F70AF"/>
+<stop offset="1" stop-color="#0F6DAD"/>
+</linearGradient>
+<linearGradient id="paint2_linear_7473_8719" x1="6.16604" y1="18.9699" x2="43.5233" y2="49.9016" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1791D2"/>
+<stop offset="1" stop-color="#1173C5"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/AddWorker/ToolSelect.tsx b/src/components/AddWorker/ToolSelect.tsx
index 5bc863484..abc8d14ae 100644
--- a/src/components/AddWorker/ToolSelect.tsx
+++ b/src/components/AddWorker/ToolSelect.tsx
@@ -757,12 +757,12 @@ const ToolSelect = forwardRef<
       {(initialSelectedTools || []).map((item: any) => (
         <Badge
           key={item.id + item.key + (item.isLocal + '')}
-          className="flex h-5 w-auto flex-shrink-0 items-center gap-1 bg-button-tertiery-fill-default px-xs"
+          className="h-5 gap-1 bg-button-tertiery-fill-default px-xs flex w-auto flex-shrink-0 items-center"
         >
           {item.name || item.mcp_name || item.key || `tool_${item.id}`}
-          <div className="flex items-center justify-center rounded-sm bg-button-secondary-fill-disabled">
+          <div className="rounded-sm bg-button-secondary-fill-disabled flex items-center justify-center">
             <X
-              className="h-4 w-4 cursor-pointer text-button-secondary-icon-disabled"
+              className="h-4 w-4 text-button-secondary-icon-disabled cursor-pointer"
               onClick={() => removeOption(item)}
             />
           </div>
@@ -788,21 +788,21 @@ const ToolSelect = forwardRef<
           checkEnv(item.id);
         }
       }}
-      className="flex cursor-pointer justify-between px-3 py-2 hover:bg-surface-hover-subtle"
+      className="px-3 py-2 hover:bg-surface-hover-subtle flex cursor-pointer justify-between"
     >
-      <div className="flex items-center gap-1">
+      <div className="gap-1 flex items-center">
         {getCategoryIcon(item.category?.name)}
-        <div className="line-clamp-1 overflow-hidden text-ellipsis break-words text-sm font-bold leading-17 text-text-action">
+        <div className="text-sm font-bold leading-17 text-text-action line-clamp-1 overflow-hidden break-words text-ellipsis">
           {item.name}
         </div>
         <TooltipSimple content={item.description}>
           <CircleAlert
-            className="h-4 w-4 cursor-pointer text-icon-primary"
+            className="h-4 w-4 text-icon-primary cursor-pointer"
             onClick={(e) => e.stopPropagation()}
           />
         </TooltipSimple>
       </div>
-      <div className="flex items-center gap-1">
+      <div className="gap-1 flex items-center">
         {getGithubRepoName(item.home_page) && (
           <div className="flex items-center">
             <img
@@ -816,7 +816,7 @@ const ToolSelect = forwardRef<
                 verticalAlign: 'middle',
               }}
             />
-            <span className="line-clamp-1 items-center justify-center self-stretch overflow-hidden text-ellipsis break-words text-xs font-medium leading-3">
+            <span className="text-xs font-medium leading-3 line-clamp-1 items-center justify-center self-stretch overflow-hidden break-words text-ellipsis">
               {getGithubRepoName(item.home_page)}
             </span>
           </div>
@@ -847,21 +847,21 @@ const ToolSelect = forwardRef<
         addOption(item);
         setKeyword('');
       }}
-      className="flex cursor-pointer justify-between px-3 py-2 hover:bg-surface-hover-subtle"
+      className="px-3 py-2 hover:bg-surface-hover-subtle flex cursor-pointer justify-between"
     >
-      <div className="flex items-center gap-1">
+      <div className="gap-1 flex items-center">
         {/* {getCategoryIcon(item.category?.name)} */}
-        <div className="line-clamp-1 overflow-hidden text-ellipsis break-words text-sm font-bold leading-17 text-text-action">
+        <div className="text-sm font-bold leading-17 text-text-action line-clamp-1 overflow-hidden break-words text-ellipsis">
           {item.mcp_name}
         </div>
         <TooltipSimple content={item.mcp_desc}>
           <CircleAlert
-            className="h-4 w-4 cursor-pointer text-icon-primary"
+            className="h-4 w-4 text-icon-primary cursor-pointer"
             onClick={(e) => e.stopPropagation()}
           />
         </TooltipSimple>
       </div>
-      <div className="flex items-center gap-1">
+      <div className="gap-1 flex items-center">
         <Button
           className="h-6 rounded-md bg-button-secondary-fill-default px-sm py-xs text-xs font-bold leading-17 text-button-secondary-text-default shadow-sm hover:bg-button-tertiery-text-default"
           disabled={true}
@@ -873,8 +873,8 @@ const ToolSelect = forwardRef<
   );
   return (
     <div className="relative w-full" ref={containerRef}>
-      <div className="bg-white flex min-h-[40px] flex-wrap gap-1.5 rounded-lg border">
-        <div className="flex items-center gap-1 text-sm font-bold leading-normal text-text-body">
+      <div className="bg-white gap-1.5 rounded-lg flex min-h-[40px] flex-wrap border">
+        <div className="gap-1 text-sm font-bold leading-normal text-text-body flex items-center">
           {t('workforce.agent-tool')}
           <TooltipSimple content={t('workforce.agent-tool-tooltip')}>
             <CircleAlert size={16} className="text-icon-primary" />
@@ -885,7 +885,7 @@ const ToolSelect = forwardRef<
             inputRef.current?.focus();
             setIsOpen(true);
           }}
-          className="flex max-h-[120px] min-h-[60px] w-full flex-wrap justify-start gap-1 overflow-y-auto rounded-lg border border-solid border-input-border-default bg-input-bg-default px-[6px] py-1"
+          className="gap-1 rounded-lg border-input-border-default bg-input-bg-default py-1 flex max-h-[120px] min-h-[60px] w-full flex-wrap justify-start overflow-y-auto border border-solid px-[6px]"
         >
           {renderSelectedItems()}
           <Textarea
@@ -894,14 +894,14 @@ const ToolSelect = forwardRef<
             onChange={(e) => setKeyword(e.target.value)}
             onFocus={() => setIsOpen(true)}
             ref={inputRef}
-            className="!h-[20px] w-auto resize-none border-none bg-transparent p-0 text-sm leading-normal !shadow-none !ring-0 !ring-offset-0"
+            className="p-0 text-sm leading-normal !h-[20px] w-auto resize-none border-none bg-transparent !shadow-none !ring-0 !ring-offset-0"
           />
         </div>
       </div>
 
       {/* floating dropdown */}
       {isOpen && (
-        <div className="absolute left-0 right-0 top-full z-50 mt-1 overflow-y-auto rounded-lg border border-solid border-input-border-default bg-dropdown-bg">
+        <div className="left-0 right-0 mt-1 rounded-lg border-input-border-default bg-dropdown-bg absolute top-full z-50 overflow-y-auto border border-solid">
           <div className="max-h-[192px] overflow-y-auto">
             <IntegrationList
               variant="select"
diff --git a/src/components/AddWorker/index.tsx b/src/components/AddWorker/index.tsx
index 64fc05f49..8cd61643e 100644
--- a/src/components/AddWorker/index.tsx
+++ b/src/components/AddWorker/index.tsx
@@ -469,8 +469,8 @@ export function AddWorker({
           {showEnvConfig ? (
             // environment configuration interface
             <>
-              <DialogContentSection className="flex flex-col gap-3 bg-white-100% p-md">
-                <div className="flex items-center gap-md">
+              <DialogContentSection className="gap-3 bg-white-100% p-md flex flex-col">
+                <div className="gap-md flex items-center">
                   {getCategoryIcon(activeMcp?.category?.name)}
                   <div>
                     <div className="text-base font-bold leading-9 text-text-action">
@@ -490,7 +490,7 @@ export function AddWorker({
                               verticalAlign: 'middle',
                             }}
                           />
-                          <span className="line-clamp-1 items-center justify-center self-stretch overflow-hidden text-ellipsis break-words text-xs font-medium leading-normal">
+                          <span className="text-xs font-medium leading-normal line-clamp-1 items-center justify-center self-stretch overflow-hidden break-words text-ellipsis">
                             {getGithubRepoName(activeMcp?.home_page)}
                           </span>
                         </div>
@@ -498,7 +498,7 @@ export function AddWorker({
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col gap-sm">
+                <div className="gap-sm flex flex-col">
                   {Object.keys(activeMcp?.install_command?.env || {}).map(
                     (key) => (
                       <div key={key}>
@@ -568,10 +568,10 @@ export function AddWorker({
           ) : (
             // default add interface
             <>
-              <DialogContentSection className="flex flex-col gap-3 bg-white-100% p-md">
-                <div className="flex flex-col gap-4">
-                  <div className="flex items-center gap-sm">
-                    <div className="flex h-16 w-16 items-center justify-center">
+              <DialogContentSection className="gap-3 bg-white-100% p-md flex flex-col">
+                <div className="gap-4 flex flex-col">
+                  <div className="gap-sm flex items-center">
+                    <div className="h-16 w-16 flex items-center justify-center">
                       <Bot size={32} className="text-icon-primary" />
                     </div>
                     <Input
@@ -608,10 +608,10 @@ export function AddWorker({
                 />
 
                 {/* Model Configuration Section */}
-                <div className="mt-2 flex flex-col gap-2">
+                <div className="mt-2 gap-2 flex flex-col">
                   <button
                     type="button"
-                    className="flex items-center gap-1 text-sm text-text-body hover:text-text-action"
+                    className="gap-1 text-sm text-text-body hover:text-text-action flex items-center"
                     onClick={() => setShowModelConfig(!showModelConfig)}
                   >
                     {showModelConfig ? (
@@ -623,8 +623,8 @@ export function AddWorker({
                   </button>
 
                   {showModelConfig && (
-                    <div className="flex flex-col gap-3 rounded-lg bg-surface-tertiary-subtle p-3">
-                      <label className="flex items-center gap-2 text-sm">
+                    <div className="gap-3 rounded-lg bg-surface-tertiary-subtle p-3 flex flex-col">
+                      <label className="gap-2 text-sm flex items-center">
                         <input
                           type="checkbox"
                           checked={useCustomModel}
@@ -636,7 +636,7 @@ export function AddWorker({
 
                       {useCustomModel && (
                         <>
-                          <div className="flex flex-col gap-1">
+                          <div className="gap-1 flex flex-col">
                             <label className="text-xs text-text-body">
                               {t('workforce.model-platform')}
                             </label>
@@ -662,7 +662,7 @@ export function AddWorker({
                             </Select>
                           </div>
 
-                          <div className="flex flex-col gap-1">
+                          <div className="gap-1 flex flex-col">
                             <label className="text-xs text-text-body">
                               {t('workforce.model-type')}
                             </label>
diff --git a/src/components/BottomBar/index.tsx b/src/components/BottomBar/index.tsx
index a25efae35..59fba6a29 100644
--- a/src/components/BottomBar/index.tsx
+++ b/src/components/BottomBar/index.tsx
@@ -23,7 +23,7 @@ interface BottomBarProps {
 
 // Red dot notification indicator
 const RedDotIcon = () => (
-  <div className="h-2 w-2 shrink-0 rounded-full bg-red-500" />
+  <div className="h-2 w-2 bg-red-500 shrink-0 rounded-full" />
 );
 
 function BottomBar({ onToggleChatBox, isChatBoxVisible }: BottomBarProps) {
@@ -51,7 +51,7 @@ function BottomBar({ onToggleChatBox, isChatBoxVisible }: BottomBarProps) {
     : null;
 
   return (
-    <div className="relative z-50 flex h-12 items-center justify-center pt-2">
+    <div className="h-12 pt-2 relative z-50 flex items-center justify-center">
       <WorkSpaceMenu
         onToggleChatBox={onToggleChatBox}
         isChatBoxVisible={isChatBoxVisible}
diff --git a/src/components/BrowserAgentWorkspace/index.tsx b/src/components/BrowserAgentWorkspace/index.tsx
index 6b393f64b..60a723cf9 100644
--- a/src/components/BrowserAgentWorkspace/index.tsx
+++ b/src/components/BrowserAgentWorkspace/index.tsx
@@ -167,9 +167,9 @@ export default function BrowserAgentWorkspace() {
   }
 
   return isTakeControl ? (
-    <div className="flex h-full w-full flex-col items-center justify-start rounded-xl border border-solid border-border-success bg-menutabs-bg-default">
-      <div className="flex w-full items-start justify-start gap-sm p-sm">
-        <div className="rounded-full border border-solid border-border-primary bg-transparent p-1">
+    <div className="rounded-xl border-border-success bg-menutabs-bg-default flex h-full w-full flex-col items-center justify-start border border-solid">
+      <div className="gap-sm p-sm flex w-full items-start justify-start">
+        <div className="border-border-primary p-1 rounded-full border border-solid bg-transparent">
           <Button
             onClick={() => {
               fetchPut(`/task/${projectStore.activeProjectId}/take-control`, {
@@ -192,13 +192,14 @@ export default function BrowserAgentWorkspace() {
     </div>
   ) : (
     <div
-      className={`flex h-full w-full flex-1 items-center justify-center transition-all duration-300 ease-in-out`}
+      className={`ease-in-out flex h-full w-full flex-1 items-center justify-center transition-all duration-300`}
     >
-      <div className="blur-bg relative flex h-full w-full flex-col overflow-hidden rounded-xl bg-surface-secondary">
-        <div className="flex flex-shrink-0 items-center justify-between rounded-t-2xl px-2 pb-2 pt-3">
-          <div className="flex items-center justify-start gap-sm">
+      <div className="blur-bg rounded-xl bg-surface-secondary relative flex h-full w-full flex-col overflow-hidden">
+        <div className="rounded-t-2xl px-2 pb-2 pt-3 flex flex-shrink-0 items-center justify-between">
+          <div className="gap-sm flex items-center justify-start">
             <Button
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               variant="ghost"
               onClick={() => {
                 chatStore.setActiveWorkspace(
@@ -278,14 +279,14 @@ export default function BrowserAgentWorkspace() {
                     activeAgent?.activeWebviewIds?.[0]?.id || ''
                   )
                 }
-                className="group relative h-full w-full cursor-pointer rounded-b-2xl pt-sm"
+                className="group rounded-b-2xl pt-sm relative h-full w-full cursor-pointer"
               >
                 <img
                   src={activeAgent?.activeWebviewIds[0]?.img}
                   alt=""
-                  className="h-full w-full rounded-b-2xl object-contain"
+                  className="rounded-b-2xl h-full w-full object-contain"
                 />
-                <div className="bg-black/20 pointer-events-none absolute inset-0 flex h-full w-full items-center justify-center rounded-b-lg opacity-0 transition-all group-hover:opacity-100">
+                <div className="bg-black/20 inset-0 rounded-b-lg pointer-events-none absolute flex h-full w-full items-center justify-center opacity-0 transition-all group-hover:opacity-100">
                   <Button
                     size="sm"
                     variant="primary"
@@ -305,7 +306,7 @@ export default function BrowserAgentWorkspace() {
             ref={scrollContainerRef}
             className={`${
               isSingleMode ? 'px-0' : 'px-2 pb-2'
-            } scrollbar relative flex min-h-0 flex-1 flex-wrap justify-start gap-4 overflow-y-auto`}
+            } scrollbar min-h-0 gap-4 relative flex flex-1 flex-wrap justify-start overflow-y-auto`}
           >
             {activeAgent?.activeWebviewIds
               ?.filter((item) => item?.img)
@@ -314,7 +315,7 @@ export default function BrowserAgentWorkspace() {
                   <div
                     key={index}
                     onClick={() => handleTakeControl(item.id)}
-                    className={`card-box group relative cursor-pointer rounded-lg ${
+                    className={`card-box group rounded-lg relative cursor-pointer ${
                       isSingleMode
                         ? 'h-[calc(100%)] w-[calc(100%)]'
                         : 'h-[calc(50%-8px)] w-[calc(50%-8px)]'
@@ -324,7 +325,7 @@ export default function BrowserAgentWorkspace() {
                       <img
                         src={item.img}
                         alt=""
-                        className="h-full w-full rounded-2xl object-contain"
+                        className="rounded-2xl h-full w-full object-contain"
                       />
                     )}
                     <div
@@ -333,7 +334,7 @@ export default function BrowserAgentWorkspace() {
                           activeAgent?.activeWebviewIds?.[0]?.id || ''
                         )
                       }
-                      className="bg-black/20 pointer-events-none absolute inset-0 flex h-full w-full items-center justify-center rounded-lg opacity-0 transition-all group-hover:opacity-100"
+                      className="bg-black/20 inset-0 rounded-lg pointer-events-none absolute flex h-full w-full items-center justify-center opacity-0 transition-all group-hover:opacity-100"
                     >
                       <Button
                         size="sm"
@@ -352,9 +353,10 @@ export default function BrowserAgentWorkspace() {
           </div>
         )}
         {activeAgent?.activeWebviewIds?.length !== 1 && (
-          <div className="z-100 absolute bottom-2 right-2 flex w-auto items-center gap-1 rounded-lg border border-solid border-border-primary bg-menutabs-bg-default p-1">
+          <div className="bottom-2 right-2 gap-1 rounded-lg border-border-primary bg-menutabs-bg-default p-1 absolute z-100 flex w-auto items-center border border-solid">
             <Button
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               variant="ghost"
               onClick={() => {
                 if (scrollContainerRef.current) {
@@ -378,7 +380,8 @@ export default function BrowserAgentWorkspace() {
               <ArrowDown size={16} />
             </Button>
             <Button
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               variant="ghost"
               onClick={() => {
                 if (scrollContainerRef.current) {
@@ -399,7 +402,8 @@ export default function BrowserAgentWorkspace() {
               <ArrowUp size={16} />
             </Button>
             <Button
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               variant="ghost"
               onClick={() => {
                 setIsSingleMode(!isSingleMode);
diff --git a/src/components/ChatBox/BottomBox/BoxHeader.tsx b/src/components/ChatBox/BottomBox/BoxHeader.tsx
index b9b33fe52..2486977be 100644
--- a/src/components/ChatBox/BottomBox/BoxHeader.tsx
+++ b/src/components/ChatBox/BottomBox/BoxHeader.tsx
@@ -14,6 +14,7 @@
 
 import { AnimateIcon } from '@/components/animate-ui/icons/icon';
 import { Orbit } from '@/components/animate-ui/icons/orbit';
+import { UserMessageRichContent } from '@/components/ChatBox/MessageItem/UserMessageRichContent';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { ChevronLeft } from 'lucide-react';
@@ -31,11 +32,11 @@ export const BoxHeaderSplitting = ({ className }: BoxHeaderSplittingProps) => {
   return (
     <div
       className={cn(
-        'mb-2 flex w-full flex-col items-start justify-center gap-1',
+        'mb-2 gap-1 flex w-full flex-col items-start justify-center',
         className
       )}
     >
-      <div className="relative box-border flex w-full items-center gap-1 px-2.5 py-0">
+      <div className="gap-1 px-2.5 pt-2 relative box-border flex w-full items-center">
         <Button
           variant="ghost"
           size="sm"
@@ -50,8 +51,8 @@ export const BoxHeaderSplitting = ({ className }: BoxHeaderSplittingProps) => {
           </AnimateIcon>
         </Button>
 
-        <div className="relative flex min-h-px min-w-px flex-1 items-center gap-0.5">
-          <span className="whitespace-nowrap text-sm font-bold text-text-information">
+        <div className="gap-0.5 relative flex min-h-px min-w-px flex-1 items-center">
+          <span className="text-sm font-bold text-text-information whitespace-nowrap">
             {t('chat.splitting-tasks')}
           </span>
         </div>
@@ -82,11 +83,11 @@ export const BoxHeaderConfirm = ({
   return (
     <div
       className={cn(
-        'mb-2 flex w-full flex-col items-start justify-center gap-1',
+        'mb-2 gap-1 flex w-full flex-col items-start justify-center',
         className
       )}
     >
-      <div className="relative box-border flex w-full items-center gap-1 px-2.5 py-0">
+      <div className="gap-1 px-2.5 pt-2 relative box-border flex w-full items-center">
         <Button
           variant="ghost"
           size="sm"
@@ -96,14 +97,16 @@ export const BoxHeaderConfirm = ({
           <ChevronLeft size={16} className="text-icon-primary" />
         </Button>
 
-        <div className="relative flex min-h-px min-w-px flex-1 items-center gap-0.5">
-          {subtitle && (
-            <div className="relative flex min-h-px min-w-px flex-1 flex-col justify-center overflow-hidden overflow-ellipsis">
-              <span className="m-0 overflow-hidden overflow-ellipsis whitespace-nowrap text-xs font-normal text-text-label">
-                {subtitle}
-              </span>
+        <div className="gap-0.5 relative flex min-h-px min-w-px flex-1 items-center">
+          {subtitle ? (
+            <div className="relative flex min-h-px min-w-px flex-1 flex-col justify-center overflow-hidden">
+              <UserMessageRichContent
+                content={subtitle}
+                variant="compact"
+                className="w-full"
+              />
             </div>
-          )}
+          ) : null}
         </div>
 
         <Button
diff --git a/src/components/ChatBox/BottomBox/ExpandedInputBox.tsx b/src/components/ChatBox/BottomBox/ExpandedInputBox.tsx
deleted file mode 100644
index 5ff7ecfd9..000000000
--- a/src/components/ChatBox/BottomBox/ExpandedInputBox.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-
-import { AddWorker } from '@/components/AddWorker';
-import { Button } from '@/components/ui/button';
-import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
-import { cn } from '@/lib/utils';
-import { useWorkerList } from '@/store/authStore';
-import { motion } from 'framer-motion';
-import { Bird, Bot, CodeXml, FileText, Globe, Image, X } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Inputbox, InputboxProps } from './InputBox';
-
-/**
- * Prompt example for ActionBox
- */
-interface PromptExample {
-  title: string;
-  prompt: string;
-}
-
-// TODO: Add prompt examples here
-const defaultPromptExamples: PromptExample[] = [];
-
-/**
- * ExpandedInputBox Props
- */
-export interface ExpandedInputBoxProps {
-  /** Props to pass through to Inputbox */
-  inputProps: InputboxProps;
-  /** Callback when close is triggered */
-  onClose?: () => void;
-  /** Additional CSS classes */
-  className?: string;
-}
-
-/**
- * ExpandedInputBox Component
- *
- * A larger input panel for composing longer messages.
- * Features:
- * - BoxHeader: Shows list of agents + close button
- * - InputSection: Larger textarea
- * - ActionBox: Expandable prompt examples with horizontal scroll
- */
-export const ExpandedInputBox = ({
-  inputProps,
-  onClose,
-  className,
-}: ExpandedInputBoxProps) => {
-  const { t } = useTranslation();
-  const { chatStore } = useChatStoreAdapter();
-  const workerList = useWorkerList();
-  const [agentList, setAgentList] = useState<Agent[]>([]);
-
-  // Base workers - same as WorkSpaceMenu
-  const baseWorker: Agent[] = useMemo(
-    () => [
-      {
-        tasks: [],
-        agent_id: 'developer_agent',
-        name: t('layout.developer-agent'),
-        type: 'developer_agent',
-        log: [],
-        activeWebviewIds: [],
-      },
-      {
-        tasks: [],
-        agent_id: 'browser_agent',
-        name: t('layout.browser-agent'),
-        type: 'browser_agent',
-        log: [],
-        activeWebviewIds: [],
-      },
-      {
-        tasks: [],
-        agent_id: 'multi_modal_agent',
-        name: t('layout.multi-modal-agent'),
-        type: 'multi_modal_agent',
-        log: [],
-        activeWebviewIds: [],
-      },
-      {
-        tasks: [],
-        agent_id: 'document_agent',
-        name: t('layout.document-agent'),
-        type: 'document_agent',
-        log: [],
-        activeWebviewIds: [],
-      },
-    ],
-    [t]
-  );
-
-  // Agent icon map
-  const agentIconMap: Record<string, React.ReactNode> = {
-    developer_agent: <CodeXml className="h-3 w-3 text-emerald-600" />,
-    search_agent: <Globe className="h-3 w-3 text-blue-600" />,
-    document_agent: <FileText className="h-3 w-3 text-yellow-600" />,
-    multi_modal_agent: <Image className="h-3 w-3 text-fuchsia-600" />,
-    social_medium_agent: <Bird className="h-3 w-3 text-purple-600" />,
-  };
-
-  // Build agent list same as WorkSpaceMenu
-  useEffect(() => {
-    if (!chatStore?.activeTaskId) return;
-    const activeTask = chatStore.tasks[chatStore.activeTaskId];
-    const taskAssigning = activeTask?.taskAssigning || [];
-    const base = [...baseWorker, ...workerList].filter(
-      (worker) => !taskAssigning.find((agent) => agent.type === worker.type)
-    );
-    setAgentList([...base, ...taskAssigning]);
-  }, [chatStore?.activeTaskId, chatStore?.tasks, workerList, baseWorker]);
-
-  const handlePromptClick = (prompt: string) => {
-    inputProps.onChange?.(prompt);
-  };
-
-  // Get display agents (limit to show)
-  const displayAgents = agentList.slice(0, 6);
-  const remainingCount = agentList.length > 6 ? agentList.length - 6 : 0;
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, scale: 0.9 }}
-      animate={{ opacity: 1, scale: 1 }}
-      exit={{ opacity: 0, scale: 0.9 }}
-      transition={{ duration: 0.2, ease: 'easeOut' }}
-      className={cn(
-        'fixed left-1/2 top-1/2 z-30',
-        'min-w-[600px] max-w-[760px]',
-        'rounded-2xl border border-solid border-border-tertiary bg-surface-primary backdrop-blur-md',
-        'perfect-shadow',
-        'flex flex-col',
-        className
-      )}
-      style={{
-        x: '-50%',
-        y: '-50%',
-        transformOrigin: 'center center',
-      }}
-    >
-      {/* BoxHeader */}
-      <div className="flex items-center justify-between gap-4 border-b border-border-tertiary px-4 py-3">
-        {/* Agent List */}
-        <div className="flex flex-1 flex-col gap-2">
-          <div className="flex flex-wrap items-center gap-1">
-            {displayAgents.map((agent: Agent, index: number) => (
-              <div
-                key={agent.agent_id || index}
-                className="flex items-center gap-1 rounded-full bg-surface-tertiary px-2 py-1 text-xs text-text-body"
-                title={agent.name}
-              >
-                {agentIconMap[agent.type] || (
-                  <Bot className="h-3 w-3 text-icon-secondary" />
-                )}
-                <span className="max-w-20 truncate">{agent.name}</span>
-              </div>
-            ))}
-            {remainingCount > 0 && (
-              <div className="rounded-full bg-surface-tertiary px-2 py-1 text-xs text-text-label">
-                +{remainingCount}
-              </div>
-            )}
-            {agentList.length === 0 && (
-              <span className="text-xs italic text-text-label">
-                {t('chat.no-agents-added')}
-              </span>
-            )}
-            {/* Add Worker Button */}
-            <AddWorker variant="icon" />
-          </div>
-        </div>
-
-        {/* Close Button */}
-        <div className="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7 rounded-full"
-            onClick={onClose}
-          >
-            <X className="h-4 w-4 text-icon-secondary" />
-          </Button>
-        </div>
-      </div>
-
-      {/* InputSection */}
-      <div className="flex-1 px-4">
-        <Inputbox
-          className="min-h-40"
-          hideExpandButton={true}
-          {...inputProps}
-        />
-      </div>
-
-      {/* ActionBox - Prompt Examples Always Visible */}
-      <div className="border-t border-border-tertiary">
-        {/* Prompt Cards - Horizontal Scroll */}
-        <div className="scrollbar-hide overflow-x-auto px-4 py-3">
-          <div className="flex gap-2">
-            {defaultPromptExamples.map((example, index) => (
-              <button
-                key={index}
-                onClick={() => handlePromptClick(example.prompt)}
-                className={cn(
-                  'w-48 flex-shrink-0 rounded-xl p-3',
-                  'border border-border-tertiary bg-surface-tertiary',
-                  'hover:bg-surface-tertiary-hover hover:border-border-secondary',
-                  'transition-all duration-200',
-                  'text-left'
-                )}
-              >
-                <div className="mb-1 text-xs font-medium text-text-body">
-                  {example.title}
-                </div>
-                <div className="line-clamp-2 text-xs text-text-label">
-                  {example.prompt}
-                </div>
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-    </motion.div>
-  );
-};
diff --git a/src/components/ChatBox/BottomBox/InputBox.tsx b/src/components/ChatBox/BottomBox/InputBox.tsx
index be5892709..e5a069b4d 100644
--- a/src/components/ChatBox/BottomBox/InputBox.tsx
+++ b/src/components/ChatBox/BottomBox/InputBox.tsx
@@ -14,33 +14,42 @@
 
 import { TriggerDialog } from '@/components/Trigger/TriggerDialog';
 import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
-import { Textarea } from '@/components/ui/textarea';
 import { processDroppedFiles } from '@/lib/fileUtils';
 import { cn } from '@/lib/utils';
 import type { TriggerInput } from '@/types';
-import { AnimatePresence } from 'framer-motion';
 import {
   ArrowRight,
+  Compass,
   FileText,
+  Hammer,
   Image,
+  Paperclip,
   Plus,
   UploadCloud,
+  Wand2,
   X,
   Zap,
 } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
-import { ExpandedInputBox } from './ExpandedInputBox';
-
-// Module-level singleton to track which InputBox instance has the expanded dialog open
-// This prevents multiple dialogs from opening when Cmd+P is pressed
-let activeExpandedDialogId: string | null = null;
+import { RichChatInput } from './RichChatInput';
 
 /**
  * File attachment object
@@ -66,24 +75,26 @@ export interface InputboxProps {
   onFilesChange?: (files: FileAttachment[]) => void;
   /** Callback when add file button is clicked */
   onAddFile?: () => void;
-  /** Placeholder text for empty state */
+  /** Static placeholder when empty (no rotation). RichChatInput defaults to rotating product hints when omitted. */
   placeholder?: string;
+  /** Rotating placeholders when empty; takes precedence over `placeholder` when non-empty. */
+  placeholders?: readonly string[];
   /** Disable all interactions */
   disabled?: boolean;
   /** Additional CSS classes */
   className?: string;
-  /** Ref for textarea */
-  textareaRef?: React.RefObject<HTMLTextAreaElement>;
+  /** Ref for the rich text input surface (contenteditable) */
+  textareaRef?: React.RefObject<HTMLDivElement | null>;
   /** Allow drag and drop */
   allowDragDrop?: boolean;
+  /** Privacy mode enabled */
+  privacy?: boolean;
   /** Use cloud model in dev */
   useCloudModelInDev?: boolean;
   /** Callback when trigger is being created (for placeholder) */
   onTriggerCreating?: (triggerData: TriggerInput) => void;
   /** Callback when trigger is created successfully */
   onTriggerCreated?: (triggerData: TriggerInput) => void;
-  /** Hide the expand button (used when InputBox is already inside ExpandedInputBox) */
-  hideExpandButton?: boolean;
 }
 
 /**
@@ -94,7 +105,7 @@ export interface InputboxProps {
  * - **Focus/Input**: Active state with content, file attachments, and active send button
  *
  * Features:
- * - Auto-expanding textarea (up to 100px height)
+ * - Auto-expanding rich text input (links + #skills, up to 200px height)
  * - File attachment display (shows up to 5 files + count indicator)
  * - Action buttons (add file on left, send on right)
  * - Send button changes color based on content (gray when empty, green when has content)
@@ -119,7 +130,7 @@ export interface InputboxProps {
  *   onAddFile={() => {
  *     // Open file picker
  *   }}
- *   placeholder="What do you need to achieve today?"
+ *   placeholder="Ask a follow-up"
  *   allowDragDrop={true}
  * />
  * ```
@@ -132,18 +143,20 @@ export const Inputbox = ({
   files = [],
   onFilesChange,
   onAddFile,
-  placeholder: _placeholder = 'Ask Eigent to automate your tasks',
+  placeholder,
+  placeholders,
   disabled = false,
   className,
   textareaRef: externalTextareaRef,
   allowDragDrop = false,
+  privacy = true,
   useCloudModelInDev = false,
-  onTriggerCreating,
-  onTriggerCreated,
-  hideExpandButton = false,
+  onTriggerCreating: _onTriggerCreating,
+  onTriggerCreated: _onTriggerCreated,
 }: InputboxProps) => {
   const { t } = useTranslation();
-  const internalTextareaRef = useRef<HTMLTextAreaElement>(null);
+  const navigate = useNavigate();
+  const internalTextareaRef = useRef<HTMLDivElement>(null);
   const textareaRef = externalTextareaRef || internalTextareaRef;
   const [isFocused, setIsFocused] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
@@ -152,51 +165,7 @@ export const Inputbox = ({
   const [isRemainingOpen, setIsRemainingOpen] = useState(false);
   const hoverCloseTimerRef = useRef<number | null>(null);
   const [isComposing, setIsComposing] = useState(false);
-  const [isExpandedDialogOpen, setIsExpandedDialogOpen] = useState(false);
   const [triggerDialogOpen, setTriggerDialogOpen] = useState(false);
-  const expandedTextareaRef = useRef<HTMLTextAreaElement>(null);
-  const instanceIdRef = useRef<string>(
-    `inputbox-${Math.random().toString(36).substr(2, 9)}`
-  );
-
-  // Handle dialog open/close with singleton tracking
-  const handleExpandedDialogChange = useCallback((open: boolean) => {
-    if (open) {
-      activeExpandedDialogId = instanceIdRef.current;
-      setIsExpandedDialogOpen(true);
-    } else {
-      if (activeExpandedDialogId === instanceIdRef.current) {
-        activeExpandedDialogId = null;
-      }
-      setIsExpandedDialogOpen(false);
-    }
-  }, []);
-
-  // Keyboard shortcut handler for Cmd+P / Ctrl+P
-  // Opens dialog if none is open, or closes if this instance owns the open dialog
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'p') {
-        e.preventDefault();
-
-        // If this instance has the dialog open, close it
-        if (
-          isExpandedDialogOpen &&
-          activeExpandedDialogId === instanceIdRef.current
-        ) {
-          handleExpandedDialogChange(false);
-        }
-        // If no dialog is open, open this one
-        else if (activeExpandedDialogId === null) {
-          handleExpandedDialogChange(true);
-        }
-        // Otherwise another instance has it open, do nothing
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isExpandedDialogOpen, handleExpandedDialogChange]);
 
   const openRemainingPopover = () => {
     if (hoverCloseTimerRef.current) {
@@ -228,9 +197,12 @@ export const Inputbox = ({
   const hasContent = value.trim().length > 0 || files.length > 0;
   const isActive = isFocused || hasContent;
 
-  const handleTextChange = (newValue: string) => {
-    onChange?.(newValue);
-  };
+  const handleTextChange = useCallback(
+    (newValue: string, _cursorPos?: number) => {
+      onChange?.(newValue);
+    },
+    [onChange]
+  );
 
   const handleSend = () => {
     if (value.trim().length > 0 && !disabled) {
@@ -242,7 +214,7 @@ export const Inputbox = ({
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if (e.key === 'Enter' && !e.shiftKey && !disabled && !isComposing) {
       e.preventDefault();
       handleSend();
@@ -257,9 +229,9 @@ export const Inputbox = ({
   const getFileIcon = (fileName: string) => {
     const ext = fileName.split('.').pop()?.toLowerCase() || '';
     if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) {
-      return <Image className="h-4 w-4 text-icon-primary" />;
+      return <Image className="size-3.5 text-icon-primary" />;
     }
-    return <FileText className="h-4 w-4 text-icon-primary" />;
+    return <FileText className="size-3.5 text-icon-primary" />;
   };
 
   // Drag & drop handlers
@@ -272,7 +244,7 @@ export const Inputbox = ({
   };
 
   const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-    if (!allowDragDrop || useCloudModelInDev) return;
+    if (!allowDragDrop || !privacy || useCloudModelInDev) return;
     if (!isFileDrag(e)) return;
     e.preventDefault();
     e.stopPropagation();
@@ -281,7 +253,7 @@ export const Inputbox = ({
   };
 
   const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
-    if (!allowDragDrop || useCloudModelInDev) return;
+    if (!allowDragDrop || !privacy || useCloudModelInDev) return;
     if (!isFileDrag(e)) return;
     e.preventDefault();
     e.stopPropagation();
@@ -301,7 +273,8 @@ export const Inputbox = ({
     e.stopPropagation();
     setIsDragging(false);
     dragCounter.current = 0;
-    if (!allowDragDrop || useCloudModelInDev) return;
+    if (!allowDragDrop || !privacy || useCloudModelInDev) return;
+
     try {
       const dropped = Array.from(e.dataTransfer?.files || []);
       if (dropped.length === 0) return;
@@ -332,7 +305,7 @@ export const Inputbox = ({
   return (
     <div
       className={cn(
-        'relative box-border flex w-full flex-col items-start rounded-2xl border border-solid border-input-border-default bg-input-bg-input px-2 pb-2 pt-0 transition-colors',
+        'rounded-3xl border-input-border-default bg-input-bg-input p-3 relative box-border flex w-full flex-col items-start border border-solid transition-colors',
         isFocused && 'border-input-border-focus',
         isDragging && 'border-info-primary bg-info-primary/10',
         className
@@ -343,60 +316,23 @@ export const Inputbox = ({
       onDrop={handleDrop}
     >
       {isDragging && (
-        <div className="border-info-primary bg-info-primary/10 text-info-primary pointer-events-none absolute inset-0 z-20 flex flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed backdrop-blur-sm">
+        <div className="border-info-primary bg-info-primary/10 text-info-primary inset-0 gap-2 rounded-2xl backdrop-blur-sm pointer-events-none absolute z-20 flex flex-col items-center justify-center border-2 border-dashed">
           <UploadCloud className="h-8 w-8" />
           <div className="text-sm font-semibold">
             {t('chat.drop-files-to-attach')}
           </div>
         </div>
       )}
-      {/* Text Input Area */}
-      <div className="relative box-border flex w-full flex-1 items-start justify-center gap-2.5 px-0 pb-2 pt-2.5">
-        <div className="relative mx-2 box-border flex min-h-px min-w-px flex-1 items-center justify-center gap-2.5 py-0">
-          <Textarea
-            variant="none"
-            size="default"
-            ref={textareaRef}
-            value={value}
-            onChange={(e) => handleTextChange(e.target.value)}
-            onKeyDown={handleKeyDown}
-            onCompositionStart={() => setIsComposing(true)}
-            onCompositionEnd={() => setIsComposing(false)}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-            disabled={disabled}
-            placeholder={t('chat.ask-placeholder')}
-            className={cn(
-              'flex-1 resize-none',
-              'border-none shadow-none focus-visible:outline-none focus-visible:ring-0',
-              'max-h-[200px] min-h-[40px] px-0 py-0',
-              'scrollbar overflow-auto',
-              'placeholder:text-text-label',
-              isActive ? 'text-input-text-focus' : 'text-input-text-default'
-            )}
-            style={{
-              fontFamily: 'Inter',
-            }}
-            rows={1}
-            onInput={(e) => {
-              const el = e.currentTarget;
-              el.style.height = 'auto';
-              el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
-            }}
-          />
-        </div>
-      </div>
-
-      {/* File Attachments (only show if has files) */}
+      {/* Layer 1: File attachments (only show if has files) */}
       {files.length > 0 && (
-        <div className="relative box-border flex w-full flex-wrap items-start gap-1 pb-2 pt-0">
+        <div className="gap-1 pb-2 relative box-border flex w-full flex-wrap items-start">
           {visibleFiles.map((file) => {
             const isHovered = hoveredFilePath === file.filePath;
             return (
               <div
                 key={file.filePath}
                 className={cn(
-                  'relative box-border flex h-auto max-w-32 items-center gap-0.5 rounded-lg bg-tag-surface pr-1'
+                  'max-w-24 gap-0.5 rounded-md bg-tag-surface pr-1 relative box-border flex h-auto items-center'
                 )}
                 onMouseEnter={() => setHoveredFilePath(file.filePath)}
                 onMouseLeave={() =>
@@ -409,7 +345,7 @@ export const Inputbox = ({
                 <a
                   href="#"
                   className={cn(
-                    'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md'
+                    'h-6 w-6 rounded-md flex cursor-pointer items-center justify-center'
                   )}
                   onClick={(e) => {
                     e.preventDefault();
@@ -419,7 +355,7 @@ export const Inputbox = ({
                   title={isHovered ? t('chat.remove-file') : file.fileName}
                 >
                   {isHovered ? (
-                    <X className="size-4 text-icon-secondary" />
+                    <X className="size-3.5 text-icon-secondary" />
                   ) : (
                     getFileIcon(file.fileName)
                   )}
@@ -428,7 +364,7 @@ export const Inputbox = ({
                 {/* File Name */}
                 <p
                   className={cn(
-                    "relative my-0 min-h-px min-w-px flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap font-['Inter'] text-xs font-bold leading-tight text-text-body"
+                    "my-0 text-xs font-bold leading-tight text-text-body relative min-h-px min-w-px flex-1 overflow-hidden font-['Inter'] overflow-ellipsis whitespace-nowrap"
                   )}
                   title={file.fileName}
                 >
@@ -442,34 +378,38 @@ export const Inputbox = ({
             <Popover open={isRemainingOpen} onOpenChange={setIsRemainingOpen}>
               <PopoverTrigger asChild>
                 <Button
-                  size="icon"
+                  size="xs"
                   variant="ghost"
-                  className="relative box-border flex h-auto items-center rounded-lg bg-tag-surface"
+                  buttonContent="text"
+                  textWeight="bold"
+                  buttonRadius="full"
+                  className="rounded-lg bg-tag-surface relative box-border flex h-auto items-center"
                   onMouseEnter={openRemainingPopover}
                   onMouseLeave={scheduleCloseRemainingPopover}
                   onClick={(e) => {
                     e.stopPropagation();
                   }}
                 >
-                  <p className="my-0 whitespace-nowrap font-['Inter'] text-xs font-bold leading-tight text-text-body">
+                  <p className="my-0 text-xs font-bold leading-tight text-text-body font-['Inter'] whitespace-nowrap">
                     {remainingCount}+
                   </p>
                 </Button>
               </PopoverTrigger>
               <PopoverContent
                 align="end"
+                side="right"
                 sideOffset={4}
-                className="!w-auto max-w-40 rounded-md border border-dropdown-border bg-dropdown-bg p-1 shadow-perfect"
+                className="max-w-40 rounded-lg border-dropdown-border bg-dropdown-bg p-1 shadow-perfect !w-auto border"
                 onMouseEnter={openRemainingPopover}
                 onMouseLeave={scheduleCloseRemainingPopover}
               >
-                <div className="scrollbar-hide flex max-h-[176px] flex-col gap-1 overflow-auto">
+                <div className="scrollbar-hide gap-1 flex max-h-[176px] flex-col overflow-auto">
                   {files.slice(maxVisibleFiles).map((file) => {
                     const isHovered = hoveredFilePath === file.filePath;
                     return (
                       <div
                         key={file.filePath}
-                        className="flex cursor-pointer items-center gap-1 rounded-lg bg-tag-surface px-1 py-0.5 transition-colors duration-300 hover:bg-tag-surface-hover"
+                        className="gap-1 rounded-lg bg-tag-surface px-1 py-0.5 hover:bg-tag-surface-hover flex cursor-pointer items-center transition-colors duration-300"
                         onMouseEnter={() => setHoveredFilePath(file.filePath)}
                         onMouseLeave={() =>
                           setHoveredFilePath((prev) =>
@@ -480,7 +420,7 @@ export const Inputbox = ({
                         <a
                           href="#"
                           className={cn(
-                            'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md'
+                            'h-6 w-6 rounded-md flex cursor-pointer items-center justify-center'
                           )}
                           onClick={(e) => {
                             e.preventDefault();
@@ -498,7 +438,7 @@ export const Inputbox = ({
                             getFileIcon(file.fileName)
                           )}
                         </a>
-                        <p className="my-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-['Inter'] text-xs font-bold leading-tight text-text-body">
+                        <p className="my-0 text-xs font-bold leading-tight text-text-body flex-1 overflow-hidden font-['Inter'] text-ellipsis whitespace-nowrap">
                           {file.fileName}
                         </p>
                       </div>
@@ -511,29 +451,169 @@ export const Inputbox = ({
         </div>
       )}
 
-      {/* Action Buttons */}
+      {/* Layer 2: Text input area */}
+      <div className="gap-2.5 pb-3 relative box-border flex w-full flex-1 items-start justify-center">
+        <RichChatInput
+          ref={textareaRef as React.RefObject<HTMLDivElement>}
+          value={value}
+          onChange={(next, cursorPos) =>
+            handleTextChange(next, cursorPos ?? undefined)
+          }
+          onKeyDown={handleKeyDown}
+          onCompositionStart={() => setIsComposing(true)}
+          onCompositionEnd={() => setIsComposing(false)}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          disabled={disabled}
+          placeholder={placeholder}
+          placeholders={placeholders}
+          className={cn(
+            'border-none shadow-none focus-visible:ring-0',
+            'max-h-[200px] min-h-[40px]'
+          )}
+          textClassName={
+            isActive ? 'text-input-text-focus' : 'text-input-text-default'
+          }
+          style={{
+            fontFamily: 'Inter',
+            fontSize: '13px',
+            lineHeight: '20px',
+          }}
+          maxHeightPx={200}
+        />
+      </div>
+
+      {/* Layer 3: Action buttons */}
       <div className="relative flex w-full items-center justify-between">
         {/* Left: Add File Button and Add Trigger Button */}
-        <div className="relative flex items-center gap-1">
-          <Button
-            variant="outline"
-            size="icon"
-            className="rounded-lg shadow-none"
-            onClick={onAddFile}
-            disabled={disabled || useCloudModelInDev}
-          >
-            <Plus size={16} className="text-icon-primary" />
-          </Button>
+        <div className="gap-1 relative flex items-center">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="xs"
+                buttonContent="icon-only"
+                textWeight="bold"
+                buttonRadius="lg"
+                disabled={disabled}
+                aria-label={t('chat.input-attach-menu-trigger')}
+                aria-haspopup="menu"
+              >
+                <Plus className="text-icon-primary" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              side="top"
+              align="start"
+              className="min-w-[13.5rem]"
+            >
+              <DropdownMenuItem
+                disabled={
+                  !privacy ||
+                  useCloudModelInDev ||
+                  typeof onAddFile !== 'function'
+                }
+                onSelect={() => {
+                  onAddFile?.();
+                }}
+              >
+                <Paperclip className="text-icon-primary" aria-hidden />
+                {t('chat.input-attach-add-files-or-photos')}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator className="bg-border-secondary -mx-1 my-1" />
+              {/* Submenus use alignOffset: Radix SubContent is fixed top-aligned; negative offset bottom-aligns panel to trigger row */}
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger className="gap-2">
+                  <Wand2 className="text-icon-primary" aria-hidden />
+                  {t('chat.input-attach-skills')}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent
+                  sideOffset={6}
+                  alignOffset={-40}
+                  className="min-w-[13.5rem]"
+                >
+                  <DropdownMenuItem
+                    onSelect={() =>
+                      navigate(
+                        '/history?tab=agents&section=skills&skillAction=upload'
+                      )
+                    }
+                  >
+                    {t('chat.input-attach-upload-new-skill')}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onSelect={() =>
+                      navigate('/history?tab=agents&section=skills')
+                    }
+                  >
+                    {t('chat.input-attach-manage-skills')}
+                  </DropdownMenuItem>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger className="gap-2">
+                  <Hammer className="text-icon-primary" aria-hidden />
+                  {t('layout.connectors')}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent
+                  sideOffset={6}
+                  alignOffset={-40}
+                  className="min-w-[13.5rem]"
+                >
+                  <DropdownMenuItem
+                    onSelect={() =>
+                      navigate('/history?tab=connectors&connectorAction=add')
+                    }
+                  >
+                    {t('chat.input-attach-add-mcp')}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onSelect={() => navigate('/history?tab=connectors')}
+                  >
+                    {t('chat.input-attach-manage-connectors')}
+                  </DropdownMenuItem>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger className="gap-2">
+                  <Compass className="text-icon-primary" aria-hidden />
+                  {t('layout.browser')}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent
+                  sideOffset={6}
+                  alignOffset={-40}
+                  className="min-w-[13.5rem]"
+                >
+                  <DropdownMenuItem
+                    onSelect={() =>
+                      navigate('/history?tab=browser&browserAction=launch')
+                    }
+                  >
+                    {t('chat.input-attach-open-browser')}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onSelect={() => navigate('/history?tab=browser')}
+                  >
+                    {t('chat.input-attach-manage-browsers')}
+                  </DropdownMenuItem>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuContent>
+          </DropdownMenu>
 
           {/* Add Trigger Button - opens TriggerDialog */}
           <Button
             variant="ghost"
             size="xs"
+            buttonContent="text"
+            textWeight="bold"
+            buttonRadius="full"
             className="rounded-lg"
             disabled={disabled}
             onClick={() => setTriggerDialogOpen(true)}
           >
-            <Zap size={16} className="text-icon-primary" />
+            <Zap className="text-icon-primary" />
             {t('triggers.trigger-label')}
           </Button>
 
@@ -547,57 +627,27 @@ export const Inputbox = ({
         </div>
 
         {/* Right: Send Button */}
-        <div className="flex items-center gap-1">
-          {/* Expand Input Dialog Button - hidden when inside ExpandedInputBox */}
-          {/*{!hideExpandButton && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="rounded-lg"
-              onClick={() => handleExpandedDialogChange(true)}
-              disabled={disabled}
-              title={t('chat.expand-input')}
-            >
-              <Maximize size={16} className="text-icon-primary" />
-            </Button>
-          )}*/}
+        <div className="gap-1 flex items-center">
           <Button
-            size="icon"
+            size="xs"
+            buttonContent="icon-only"
+            textWeight="bold"
+            buttonRadius="full"
             variant={value.trim().length > 0 ? 'success' : 'secondary'}
             className="rounded-full"
             onClick={handleSend}
             disabled={disabled || value.trim().length === 0}
           >
             <ArrowRight
-              size={16}
               className={cn(
                 'text-button-primary-icon-default transition-transform duration-200',
                 value.trim().length > 0 && 'rotate-[-90deg]'
               )}
             />
             {/* Inner shadow highlight (from Figma design) */}
-            <div className="pointer-events-none absolute inset-0 shadow-[0px_1px_0px_0px_inset_rgba(255,255,255,0.33)]" />
+            <div className="inset-0 pointer-events-none absolute shadow-[0px_1px_0px_0px_inset_rgba(255,255,255,0.33)]" />
           </Button>
         </div>
-
-        {/* Expanded Input Box */}
-        <AnimatePresence>
-          {isExpandedDialogOpen && (
-            <ExpandedInputBox
-              inputProps={{
-                value,
-                onChange,
-                onSend,
-                files,
-                onFilesChange,
-                onAddFile,
-                disabled,
-                useCloudModelInDev,
-              }}
-              onClose={() => handleExpandedDialogChange(false)}
-            />
-          )}
-        </AnimatePresence>
       </div>
     </div>
   );
diff --git a/src/components/ChatBox/BottomBox/QueuedBox.tsx b/src/components/ChatBox/BottomBox/QueuedBox.tsx
index 48c43a011..17b1b9e52 100644
--- a/src/components/ChatBox/BottomBox/QueuedBox.tsx
+++ b/src/components/ChatBox/BottomBox/QueuedBox.tsx
@@ -44,12 +44,12 @@ export function QueuedBox({
   return (
     <div
       className={cn(
-        'border-solid-80 flex w-full flex-col items-start justify-center gap-1 rounded-t-2xl border border-b-0 border-input-border-default bg-input-bg-input py-1',
+        'border-solid-80 gap-1 rounded-t-2xl border-input-border-default bg-input-bg-input py-1 flex w-full flex-col items-start justify-center border border-b-0',
         className
       )}
     >
       {/* Queuing Header Top */}
-      <div className="relative box-border flex w-full items-center gap-1 px-2.5 py-0">
+      <div className="gap-1 px-2.5 py-0 relative box-border flex w-full items-center">
         {/* Lead Button for expand/collapse */}
         <Button
           variant="ghost"
@@ -65,8 +65,8 @@ export function QueuedBox({
         </Button>
 
         {/* Middle - Queued Title */}
-        <div className="relative flex min-h-px min-w-px flex-1 items-center gap-0.5">
-          <div className="relative mr-1 flex shrink-0 flex-col justify-center">
+        <div className="gap-0.5 relative flex min-h-px min-w-px flex-1 items-center">
+          <div className="mr-1 relative flex shrink-0 flex-col justify-center">
             <span className="text-xs font-bold text-text-body">
               {queuedMessages.length}
             </span>
@@ -82,7 +82,7 @@ export function QueuedBox({
       {/* Header Content - Accordion Items for queued tasks */}
       <div
         className={cn(
-          'scrollbar-always-visible relative box-border flex w-full flex-col items-start gap-1 overflow-y-auto px-2 py-0 transition-all duration-200 ease-in-out',
+          'scrollbar-always-visible gap-1 px-2 py-0 ease-in-out relative box-border flex w-full flex-col items-start overflow-y-auto transition-all duration-200',
           isExpanded && queuedMessages.length > 0
             ? 'max-h-[156px] opacity-100'
             : 'max-h-0 opacity-0'
@@ -111,28 +111,29 @@ function QueueingItem({ content, onRemove }: QueueingItemProps) {
 
   return (
     <div
-      className="relative box-border flex w-full cursor-pointer items-center gap-2 rounded-md bg-surface-tertiary px-1 py-1 transition-all duration-200 hover:bg-surface-secondary"
+      className="gap-2 rounded-md bg-surface-tertiary px-1 py-1 hover:bg-surface-secondary relative box-border flex w-full cursor-pointer items-center transition-all duration-200"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-transparent p-0.5">
+      <div className="h-5 w-5 rounded-md p-0.5 flex shrink-0 items-center justify-center bg-transparent">
         <Circle size={16} className="text-icon-secondary" />
       </div>
 
       <div className="relative flex min-h-px min-w-px flex-1 flex-col justify-center overflow-hidden overflow-ellipsis">
-        <p className="m-0 overflow-hidden overflow-ellipsis whitespace-nowrap text-xs font-normal">
+        <p className="m-0 text-xs font-normal overflow-hidden overflow-ellipsis whitespace-nowrap">
           {content}
         </p>
       </div>
 
       <Button
         variant="ghost"
-        size="icon"
+        size="xs"
+        buttonContent="icon-only"
         className={cn(
-          'h-5 w-5 shrink-0 rounded-md p-0.5 transition-all duration-200',
+          'h-5 w-5 rounded-md p-0.5 shrink-0 transition-all duration-200',
           isHovered
-            ? 'translate-x-0 opacity-100 hover:bg-button-transparent-fill-hover'
-            : 'pointer-events-none translate-x-2 opacity-0'
+            ? 'translate-x-0 hover:bg-button-transparent-fill-hover opacity-100'
+            : 'translate-x-2 pointer-events-none opacity-0'
         )}
         onClick={(e) => {
           e.preventDefault();
diff --git a/src/components/ChatBox/BottomBox/RichChatInput.tsx b/src/components/ChatBox/BottomBox/RichChatInput.tsx
new file mode 100644
index 000000000..2c097b38d
--- /dev/null
+++ b/src/components/ChatBox/BottomBox/RichChatInput.tsx
@@ -0,0 +1,558 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { cn } from '@/lib/utils';
+import { AnimatePresence, motion } from 'framer-motion';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+
+const PLACEHOLDER_ROTATE_MS = 30_000;
+
+type RichSegment = { type: 'text' | 'url' | 'skill'; text: string };
+
+const SKILL_STYLE_CLASSES = [
+  'text-text-information bg-surface-information/35',
+  'text-text-success bg-surface-success/25',
+  'text-text-warning bg-surface-warning/35',
+  'text-icon-information bg-surface-action/20',
+] as const;
+
+function hashSkillLabel(label: string): number {
+  let h = 0;
+  for (let i = 0; i < label.length; i++) {
+    h = (h << 5) - h + label.charCodeAt(i);
+    h |= 0;
+  }
+  return Math.abs(h);
+}
+
+/** Strip trailing punctuation often typed after pasted URLs. */
+function trimUrlTail(raw: string): string {
+  return raw.replace(/[`'".,;:!?)\]]+$/g, '');
+}
+
+const URL_AT_START = /^(https?:\/\/[^\s<>"']+|www\.[^\s<>"']+)/i;
+
+/** Plain-text tokenizer: http(s) / www URLs and #skill tokens (alphanumeric + _-). */
+export function tokenizeRichPlainText(text: string): RichSegment[] {
+  const out: RichSegment[] = [];
+  let i = 0;
+  const len = text.length;
+
+  while (i < len) {
+    const slice = text.slice(i);
+    const urlMatch = slice.match(URL_AT_START);
+    if (urlMatch) {
+      const full = urlMatch[0];
+      const trimmed = trimUrlTail(full);
+      if (trimmed.length > 0) {
+        out.push({ type: 'url', text: trimmed });
+        if (full.length > trimmed.length) {
+          out.push({ type: 'text', text: full.slice(trimmed.length) });
+        }
+        i += full.length;
+        continue;
+      }
+    }
+
+    if (slice[0] === '#') {
+      const skillMatch = slice.match(/^#([a-zA-Z0-9_-]+)/);
+      if (skillMatch) {
+        out.push({ type: 'skill', text: skillMatch[0] });
+        i += skillMatch[0].length;
+        continue;
+      }
+    }
+
+    let j = i + 1;
+    while (j < len) {
+      const tail = text.slice(j);
+      if (URL_AT_START.test(tail)) break;
+      if (text[j] === '#' && /^#([a-zA-Z0-9_-]+)/.test(tail)) break;
+      j++;
+    }
+    out.push({ type: 'text', text: text.slice(i, j) });
+    i = j;
+  }
+
+  return out;
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function httpUrlOrNull(raw: string): string | null {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+  const withScheme = /^www\./i.test(trimmed) ? `https://${trimmed}` : trimmed;
+  try {
+    const u = new URL(withScheme);
+    if (u.protocol !== 'http:' && u.protocol !== 'https:') return null;
+    return u.href;
+  } catch {
+    if (/^https?:\/\//i.test(trimmed)) {
+      return trimmed;
+    }
+    if (/^www\./i.test(trimmed)) {
+      return `https://${trimmed}`;
+    }
+    return null;
+  }
+}
+
+function segmentsToHtml(segments: RichSegment[]): string {
+  const parts: string[] = [];
+  for (const seg of segments) {
+    if (seg.type === 'text') {
+      parts.push(escapeHtml(seg.text).replace(/\n/g, '<br />'));
+    } else if (seg.type === 'url') {
+      const href = httpUrlOrNull(seg.text);
+      const safe = escapeHtml(seg.text);
+      if (href) {
+        parts.push(
+          `<a href="${escapeHtml(href)}" data-rich-url="1" class="text-text-information underline decoration-text-information/80 underline-offset-2">${safe}</a>`
+        );
+      } else {
+        parts.push(safe);
+      }
+    } else {
+      const idx = hashSkillLabel(seg.text) % SKILL_STYLE_CLASSES.length;
+      const cls = SKILL_STYLE_CLASSES[idx];
+      parts.push(
+        `<span data-rich-skill="1" class="rounded px-0.5 py-px font-medium ${cls}">${escapeHtml(seg.text)}</span>`
+      );
+    }
+  }
+  return parts.join('');
+}
+
+function brToNewlineInTree(container: HTMLElement): void {
+  container.querySelectorAll('br').forEach((br) => {
+    br.replaceWith(document.createTextNode('\n'));
+  });
+}
+
+function innerPlainFromHtmlTree(container: HTMLElement): string {
+  brToNewlineInTree(container);
+  return container.innerText.replace(/\u00a0/g, ' ');
+}
+
+function getPlainTextFromRoot(root: HTMLElement): string {
+  const html = root.innerHTML;
+  if (!html || html === '<br>' || html === '<br/>' || html === '<br />') {
+    return '';
+  }
+  const tmp = document.createElement('div');
+  tmp.innerHTML = html;
+  return innerPlainFromHtmlTree(tmp);
+}
+
+/**
+ * Plain-text length from start of `root` to (container, offset), using the same
+ * rules as getPlainTextFromRoot. Range#toString() is wrong for &lt;br&gt; and
+ * block boundaries (e.g. Shift+Enter), which caused caret restore to jump.
+ */
+function plainTextLengthBefore(
+  root: HTMLElement,
+  endContainer: Node,
+  endOffset: number
+): number {
+  if (!root.contains(endContainer)) return 0;
+  const pre = document.createRange();
+  pre.selectNodeContents(root);
+  pre.setEnd(endContainer, endOffset);
+  const tmp = document.createElement('div');
+  tmp.appendChild(pre.cloneContents());
+  return innerPlainFromHtmlTree(tmp).length;
+}
+
+function getCaretOffset(root: HTMLElement): number {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return 0;
+  const range = sel.getRangeAt(0);
+  return plainTextLengthBefore(root, range.startContainer, range.startOffset);
+}
+
+function setCaretOffset(root: HTMLElement, offset: number): void {
+  const sel = window.getSelection();
+  if (!sel) return;
+
+  const walk = (
+    node: Node,
+    remaining: { n: number }
+  ): { node: Node; offset: number } | null => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const len = node.textContent?.length ?? 0;
+      if (remaining.n <= len) {
+        return { node, offset: remaining.n };
+      }
+      remaining.n -= len;
+      return null;
+    }
+    if (node.nodeName === 'BR') {
+      if (remaining.n <= 0) {
+        return { node, offset: 0 };
+      }
+      remaining.n -= 1;
+      return null;
+    }
+    for (let i = 0; i < node.childNodes.length; i++) {
+      const found = walk(node.childNodes[i], remaining);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  const pos = walk(root, { n: offset });
+  if (!pos) {
+    const range = document.createRange();
+    range.selectNodeContents(root);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+    return;
+  }
+
+  const range = document.createRange();
+  if (pos.node.nodeType === Node.TEXT_NODE) {
+    range.setStart(
+      pos.node,
+      Math.min(pos.offset, pos.node.textContent?.length ?? 0)
+    );
+    range.collapse(true);
+  } else if (pos.node.nodeName === 'BR') {
+    range.setStartBefore(pos.node);
+    range.collapse(true);
+  } else {
+    range.selectNodeContents(pos.node);
+    range.collapse(false);
+  }
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+/** Keep the caret visible when content is taller than max height (overflow scroll). */
+function scrollCaretIntoView(root: HTMLElement): void {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !root.contains(sel.anchorNode)) {
+    return;
+  }
+  const range = sel.getRangeAt(0);
+  let rect = range.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) {
+    const rects = range.getClientRects();
+    const last = rects[rects.length - 1];
+    if (last) rect = last;
+  }
+  if (rect.width === 0 && rect.height === 0) {
+    root.scrollTop = root.scrollHeight - root.clientHeight;
+    return;
+  }
+
+  const rootRect = root.getBoundingClientRect();
+  const padding = 8;
+  if (rect.bottom > rootRect.bottom - padding) {
+    root.scrollTop += rect.bottom - rootRect.bottom + padding;
+  } else if (rect.top < rootRect.top + padding) {
+    root.scrollTop += rect.top - rootRect.top - padding;
+  }
+}
+
+export interface RichChatInputProps {
+  value: string;
+  onChange: (value: string, cursorOffset?: number) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onCompositionStart?: () => void;
+  onCompositionEnd?: () => void;
+  disabled?: boolean;
+  /** @deprecated Use `placeholders` for rotating copy. If set without `placeholders`, shown as a single static line when empty. */
+  placeholder?: string;
+  /** When empty, cycles through these every 30s. Defaults to product copy. */
+  placeholders?: readonly string[];
+  className?: string;
+  textClassName?: string;
+  style?: React.CSSProperties;
+  maxHeightPx?: number;
+}
+
+export const RichChatInput = React.forwardRef<
+  HTMLDivElement,
+  RichChatInputProps
+>(function RichChatInput(
+  {
+    value,
+    onChange,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    onCompositionStart,
+    onCompositionEnd,
+    disabled,
+    placeholder,
+    placeholders: placeholdersProp,
+    className,
+    textClassName,
+    style,
+    maxHeightPx = 200,
+  },
+  ref
+) {
+  const { t } = useTranslation();
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const internalUpdate = useRef(false);
+  const composingRef = useRef(false);
+  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const setRootRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      rootRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref && 'current' in ref) {
+        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      }
+    },
+    [ref]
+  );
+
+  const applyHtml = useCallback((plain: string, restoreOffset?: number) => {
+    const el = rootRef.current;
+    if (!el) return;
+    if (plain.length === 0) {
+      el.scrollTop = 0;
+    }
+    const html =
+      plain.length === 0 ? '' : segmentsToHtml(tokenizeRichPlainText(plain));
+    el.innerHTML = html || '<br />';
+    if (restoreOffset !== undefined) {
+      requestAnimationFrame(() => {
+        setCaretOffset(el, Math.min(restoreOffset, plain.length));
+        scrollCaretIntoView(el);
+      });
+    }
+  }, []);
+
+  const resizeHeight = useCallback(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${Math.min(el.scrollHeight, maxHeightPx)}px`;
+  }, [maxHeightPx]);
+
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const handleScroll = () => {
+      el.classList.add('scrolling');
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+      scrollTimeoutRef.current = setTimeout(() => {
+        el.classList.remove('scrolling');
+      }, 1000);
+    };
+    el.addEventListener('scroll', handleScroll);
+    return () => {
+      el.removeEventListener('scroll', handleScroll);
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (internalUpdate.current) {
+      internalUpdate.current = false;
+      resizeHeight();
+      return;
+    }
+    const el = rootRef.current;
+    if (!el) return;
+    const current = getPlainTextFromRoot(el);
+    if (current === value) {
+      if (value === '' && el.innerHTML.replace(/\s/g, '') === '') {
+        applyHtml('');
+      }
+      resizeHeight();
+      return;
+    }
+    applyHtml(value);
+    resizeHeight();
+  }, [value, applyHtml, resizeHeight]);
+
+  const handleInput = () => {
+    const el = rootRef.current;
+    if (!el || composingRef.current) return;
+    const plain = getPlainTextFromRoot(el);
+    const caret = getCaretOffset(el);
+    internalUpdate.current = true;
+    onChange(plain, caret);
+    applyHtml(plain, caret);
+    resizeHeight();
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData('text/plain');
+    if (!text) return;
+    const el = rootRef.current;
+    if (!el) return;
+    document.execCommand('insertText', false, text);
+  };
+
+  const placeholders = useMemo(() => {
+    if (placeholdersProp && placeholdersProp.length > 0) {
+      return Array.from(placeholdersProp);
+    }
+    if (placeholder && placeholder.length > 0) {
+      return [placeholder];
+    }
+    return [
+      t('chat.rich-input-rotate-1'),
+      t('chat.rich-input-rotate-2'),
+      t('chat.rich-input-rotate-3'),
+    ];
+  }, [placeholdersProp, placeholder, t]);
+
+  const showPlaceholder = value.length === 0 && placeholders.length > 0;
+  const [placeholderCycleIndex, setPlaceholderCycleIndex] = useState(0);
+
+  useEffect(() => {
+    setPlaceholderCycleIndex(0);
+  }, [placeholders]);
+
+  useEffect(() => {
+    if (!showPlaceholder || placeholders.length <= 1) return;
+    const id = window.setInterval(() => {
+      setPlaceholderCycleIndex((i) => (i + 1) % placeholders.length);
+    }, PLACEHOLDER_ROTATE_MS);
+    return () => window.clearInterval(id);
+  }, [showPlaceholder, placeholders.length]);
+
+  const ariaPlaceholderLine = showPlaceholder
+    ? placeholders[placeholderCycleIndex % placeholders.length]
+    : undefined;
+
+  return (
+    <div className="min-w-0 relative isolate w-full flex-1">
+      <div
+        aria-hidden
+        className="left-1 top-0 pointer-events-none absolute z-[1] w-[calc(100%-0.25rem)] max-w-[calc(100%-0.25rem)] select-none"
+      >
+        <AnimatePresence mode="wait">
+          {showPlaceholder ? (
+            <motion.span
+              key={placeholders[placeholderCycleIndex % placeholders.length]}
+              className="text-text-label block w-full font-[Inter] text-[13px] leading-[20px]"
+              initial={{
+                opacity: 0,
+                filter: 'blur(8px)',
+                y: -18,
+              }}
+              animate={{
+                opacity: 1,
+                filter: 'blur(0px)',
+                y: 0,
+              }}
+              exit={{
+                opacity: 0,
+                filter: 'blur(8px)',
+                y: 18,
+              }}
+              transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
+            >
+              {placeholders[placeholderCycleIndex % placeholders.length]}
+            </motion.span>
+          ) : null}
+        </AnimatePresence>
+      </div>
+      <div
+        ref={setRootRef}
+        role="textbox"
+        aria-multiline="true"
+        aria-placeholder={ariaPlaceholderLine}
+        contentEditable={!disabled}
+        suppressContentEditableWarning
+        onInput={handleInput}
+        onPaste={handlePaste}
+        onKeyDown={onKeyDown}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onCompositionStart={() => {
+          composingRef.current = true;
+          onCompositionStart?.();
+        }}
+        onCompositionEnd={() => {
+          composingRef.current = false;
+          onCompositionEnd?.();
+          handleInput();
+        }}
+        className={cn(
+          'w-full flex-1 resize-none overflow-auto outline-none',
+          'pl-1 py-0 scrollbar max-h-[200px] min-h-[40px]',
+          'relative break-words whitespace-pre-wrap',
+          disabled && 'cursor-not-allowed opacity-60',
+          textClassName,
+          className
+        )}
+        style={style}
+        onMouseDown={(e) => {
+          const t = e.target as HTMLElement | null;
+          const a = t?.closest(
+            'a[data-rich-url="1"]'
+          ) as HTMLAnchorElement | null;
+          if (a) {
+            e.preventDefault();
+            const href = a.getAttribute('href');
+            const safe = href ? httpUrlOrNull(href) : null;
+            if (safe) {
+              window.open(safe, '_blank', 'noopener,noreferrer');
+            }
+          }
+        }}
+      />
+    </div>
+  );
+});
+
+RichChatInput.displayName = 'RichChatInput';
+
+/** Selection offsets for @mention / backspace logic (same semantics as textarea). */
+export function getRichInputSelection(el: HTMLElement | null): {
+  start: number;
+  end: number;
+} {
+  if (!el) return { start: 0, end: 0 };
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !el.contains(sel.anchorNode)) {
+    return { start: 0, end: 0 };
+  }
+  const range = sel.getRangeAt(0);
+  const start = plainTextLengthBefore(
+    el,
+    range.startContainer,
+    range.startOffset
+  );
+  const end = plainTextLengthBefore(el, range.endContainer, range.endOffset);
+  return { start, end };
+}
diff --git a/src/components/ChatBox/BottomBox/index.tsx b/src/components/ChatBox/BottomBox/index.tsx
index afac2f994..c824fbff4 100644
--- a/src/components/ChatBox/BottomBox/index.tsx
+++ b/src/components/ChatBox/BottomBox/index.tsx
@@ -69,15 +69,15 @@ export default function BottomBox({
   const enableQueuedBox = true; //TODO: Fix the reason of queued box disable in https://github.com/eigent-ai/eigent/issues/684
 
   // Background color reflects current state only
-  let backgroundClass = 'bg-input-bg-default';
+  let backgroundClass = 'bg-surface-secondary';
   if (state === 'splitting') backgroundClass = 'bg-input-bg-spliting';
   else if (state === 'confirm') backgroundClass = 'bg-input-bg-confirm';
 
   return (
-    <div className="relative z-50 flex w-full flex-col">
+    <div className="bg-surface-secondary relative z-50 flex w-full flex-col">
       {/* QueuedBox overlay (should not affect BoxMain layout) */}
       {enableQueuedBox && queuedMessages.length > 0 && (
-        <div className="pointer-events-auto z-50 px-2">
+        <div className="px-2 pointer-events-auto z-50">
           <QueuedBox
             queuedMessages={queuedMessages}
             onRemoveQueuedMessage={onRemoveQueuedMessage}
@@ -86,7 +86,7 @@ export default function BottomBox({
       )}
       {/* BoxMain */}
       <div
-        className={`flex w-full flex-col rounded-t-lg p-2 ${backgroundClass}`}
+        className={`rounded-3xl mb-sm flex w-full flex-col ${backgroundClass}`}
       >
         {/* BoxHeader variants */}
         {state === 'splitting' && <BoxHeaderSplitting />}
diff --git a/src/components/ChatBox/ChatTimeline.tsx b/src/components/ChatBox/ChatTimeline.tsx
new file mode 100644
index 000000000..b5aa98c58
--- /dev/null
+++ b/src/components/ChatBox/ChatTimeline.tsx
@@ -0,0 +1,246 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import {
+  getTaskListShelfTone,
+  isTaskListRowFailureState,
+} from '@/lib/taskLifecycleUi';
+import { cn } from '@/lib/utils';
+import type { ChatStore } from '@/store/chatStore';
+import { ChatTaskStatus } from '@/types/constants';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+const TASK_LIST_ROW_BG = {
+  information: 'bg-surface-information hover:brightness-[0.98]',
+  success: 'bg-surface-success hover:brightness-[0.98]',
+  caution: 'bg-surface-caution hover:brightness-[0.98]',
+  idle: 'bg-transparent hover:bg-surface-tertiary',
+} as const;
+
+/** Brief success highlight after a run completes; then idle (transparent). */
+const TASK_LIST_SUCCESS_HIGHLIGHT_MS = 1800;
+
+/** Horizontal drift speed for task query hover (~6px/s, capped) — readable marquee, not a snap. */
+const TASK_QUERY_SCROLL_PX_PER_SEC = 16;
+const TASK_QUERY_SCROLL_MIN_MS = 10_000;
+const TASK_QUERY_SCROLL_MAX_MS = 90_000;
+
+function taskQueryScrollDurationMs(scrollPx: number): number {
+  if (scrollPx <= 0) return 300;
+  const proportional = (scrollPx / TASK_QUERY_SCROLL_PX_PER_SEC) * 1000;
+  return Math.min(
+    TASK_QUERY_SCROLL_MAX_MS,
+    Math.max(TASK_QUERY_SCROLL_MIN_MS, Math.round(proportional))
+  );
+}
+
+function taskUserQueryLabel(task: ChatStore['tasks'][string]): string {
+  const firstUser = task.messages.find((m) => m.role === 'user');
+  const text = firstUser?.content?.trim() ?? '';
+  return text || '…';
+}
+
+function TaskQueryScrollLabel({
+  queryLabel,
+  rowHovered,
+}: {
+  queryLabel: string;
+  rowHovered: boolean;
+}) {
+  const outerRef = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLSpanElement>(null);
+  const [scrollPx, setScrollPx] = useState(0);
+
+  useLayoutEffect(() => {
+    const outer = outerRef.current;
+    const inner = innerRef.current;
+    if (!outer || !inner) return;
+
+    const measure = () => {
+      setScrollPx(Math.max(0, inner.scrollWidth - outer.clientWidth));
+    };
+
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(outer);
+    return () => ro.disconnect();
+  }, [queryLabel]);
+
+  const slide = rowHovered && scrollPx > 0;
+  const slideMs = taskQueryScrollDurationMs(scrollPx);
+
+  return (
+    <div
+      ref={outerRef}
+      className={cn('text-text-label min-w-0 w-full overflow-hidden')}
+    >
+      <span
+        ref={innerRef}
+        title={queryLabel}
+        className={cn(
+          'text-body-sm font-normal inline-block whitespace-nowrap first-letter:uppercase',
+          'transition-[transform]',
+          slide ? 'ease-linear' : 'ease-out duration-300'
+        )}
+        style={{
+          transform: slide ? `translateX(-${scrollPx}px)` : 'translateX(0)',
+          transitionDuration: slide ? `${slideMs}ms` : undefined,
+        }}
+      >
+        {queryLabel}
+      </span>
+    </div>
+  );
+}
+
+function ChatTimelineRow({
+  task,
+  firstUserMessageId,
+  active,
+  setScrollToQueryId,
+}: {
+  task: ChatStore['tasks'][string];
+  firstUserMessageId: string | null;
+  active: boolean;
+  setScrollToQueryId: (id: string) => void;
+}) {
+  const [rowHovered, setRowHovered] = useState(false);
+  const [successHighlight, setSuccessHighlight] = useState(false);
+  const mountedRef = useRef(false);
+  const prevStatusRef = useRef(task.status);
+
+  const queryLabel = taskUserQueryLabel(task);
+  const shelfTone = getTaskListShelfTone(task);
+  const failed = isTaskListRowFailureState(task);
+  const activeWork = shelfTone === 'splitting' || shelfTone === 'running';
+  const finishedSuccess =
+    !failed && task.status === ChatTaskStatus.FINISHED && task.type !== '';
+
+  useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      prevStatusRef.current = task.status;
+      return;
+    }
+    const prev = prevStatusRef.current;
+    prevStatusRef.current = task.status;
+
+    if (
+      finishedSuccess &&
+      prev !== ChatTaskStatus.FINISHED &&
+      task.status === ChatTaskStatus.FINISHED
+    ) {
+      setSuccessHighlight(true);
+      const id = window.setTimeout(
+        () => setSuccessHighlight(false),
+        TASK_LIST_SUCCESS_HIGHLIGHT_MS
+      );
+      return () => clearTimeout(id);
+    }
+  }, [task.status, finishedSuccess]);
+
+  const rowBg = failed
+    ? TASK_LIST_ROW_BG.caution
+    : successHighlight && finishedSuccess
+      ? TASK_LIST_ROW_BG.success
+      : activeWork
+        ? TASK_LIST_ROW_BG.information
+        : TASK_LIST_ROW_BG.idle;
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        if (firstUserMessageId) {
+          setScrollToQueryId(firstUserMessageId);
+        }
+      }}
+      onMouseEnter={() => setRowHovered(true)}
+      onMouseLeave={() => setRowHovered(false)}
+      className={cn(
+        'no-drag h-8 rounded-lg min-w-0 gap-3 px-3 relative flex w-full max-w-full shrink-0 cursor-pointer items-center text-left transition-colors',
+        rowBg
+      )}
+      aria-current={active ? 'true' : undefined}
+    >
+      <TaskQueryScrollLabel queryLabel={queryLabel} rowHovered={rowHovered} />
+    </button>
+  );
+}
+
+/** Initial fold state for the task timeline rail (ChatBox `useState` should match). */
+export const CHAT_TIMELINE_DEFAULT_COLLAPSED = true;
+
+export type ChatTimelineEntry = {
+  chatId: string;
+  taskId: string;
+  task: ChatStore['tasks'][string];
+  firstUserMessageId: string | null;
+};
+
+export interface ChatTimelineProps {
+  collapsed: boolean;
+  entries: ChatTimelineEntry[];
+  activeTaskId: string | null | undefined;
+  setScrollToQueryId: (id: string) => void;
+  title: string;
+  emptyLabel: string;
+}
+
+export function ChatTimeline({
+  collapsed,
+  entries,
+  activeTaskId,
+  setScrollToQueryId,
+  title,
+  emptyLabel,
+}: ChatTimelineProps) {
+  return (
+    <div
+      className={cn(
+        'min-h-0 min-w-0 p-1 flex w-full max-w-[200px] flex-col overflow-hidden',
+        collapsed ? 'max-h-0 pointer-events-none flex-none' : 'min-h-0 flex-1'
+      )}
+      style={{ minHeight: 0 }}
+    >
+      <div
+        className={cn(
+          'gap-2 pl-3 pr-3 py-2 flex w-full shrink-0 items-center',
+          collapsed && 'hidden'
+        )}
+      >
+        <span className="text-text-label min-w-0 text-xs font-semibold truncate">
+          {title}
+        </span>
+      </div>
+      <div className="min-h-0 min-w-0 w-full flex-1 overflow-x-hidden overflow-y-auto">
+        {entries.length === 0 ? (
+          <p className="text-text-label px-3 text-xs w-full">{emptyLabel}</p>
+        ) : (
+          <div className="gap-2 min-w-0 flex w-full flex-col">
+            {entries.map(({ chatId, taskId, task, firstUserMessageId }) => (
+              <ChatTimelineRow
+                key={`${chatId}-${taskId}`}
+                task={task}
+                firstUserMessageId={firstUserMessageId}
+                active={activeTaskId === taskId}
+                setScrollToQueryId={setScrollToQueryId}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ChatBox/FloatingAction.tsx b/src/components/ChatBox/FloatingAction.tsx
index a78a273c1..b9020317f 100644
--- a/src/components/ChatBox/FloatingAction.tsx
+++ b/src/components/ChatBox/FloatingAction.tsx
@@ -27,6 +27,8 @@ export interface FloatingActionProps {
   onSkip?: () => void;
   /** Loading state for pause/resume actions */
   loading?: boolean;
+  /** When true, do not show Stop even if status is still "running" (e.g. direct @-agent after AGENT_END). */
+  hideStop?: boolean;
   /** Additional CSS classes */
   className?: string;
 }
@@ -37,21 +39,22 @@ export const FloatingAction = ({
   // onResume,  // Commented out - temporary not needed
   onSkip,
   loading = false,
+  hideStop = false,
   className,
 }: FloatingActionProps) => {
   // Only show when task is running (removed pause state)
-  if (status !== ChatTaskStatus.RUNNING) {
+  if (status !== ChatTaskStatus.RUNNING || hideStop) {
     return null;
   }
 
   return (
     <div
       className={cn(
-        'pointer-events-none sticky bottom-2 left-0 right-0 top-2 z-20 mt-4 flex w-full items-center justify-center',
+        'bottom-2 left-0 right-0 top-2 mt-4 pointer-events-none sticky z-20 flex w-full items-center justify-center',
         className
       )}
     >
-      <div className="bg-bg-surface-primary/95 border-border-default pointer-events-auto flex items-center gap-2 rounded-full border p-1 shadow-[0px_4px_16px_rgba(0,0,0,0.12)] backdrop-blur-md">
+      <div className="bg-bg-surface-primary/95 border-border-default gap-2 p-1 backdrop-blur-md pointer-events-auto flex items-center rounded-full border shadow-[0px_4px_16px_rgba(0,0,0,0.12)]">
         {/* Always show Stop Task button when running (removed pause/resume logic) */}
         <Button
           variant="outline"
diff --git a/src/components/ChatBox/HeaderBox/index.tsx b/src/components/ChatBox/HeaderBox/index.tsx
index 3c12df89d..d134145fb 100644
--- a/src/components/ChatBox/HeaderBox/index.tsx
+++ b/src/components/ChatBox/HeaderBox/index.tsx
@@ -15,8 +15,13 @@
 import tokenDarkIcon from '@/assets/token-dark.svg';
 import tokenLightIcon from '@/assets/token-light.svg';
 import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent } from '@/components/ui/popover';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
 import { useAuthStore } from '@/store/authStore';
-import { PlayCircle } from 'lucide-react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Menu, PanelRight, PanelRightClose, PlayCircle } from 'lucide-react';
+import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AnimatedTokenNumber } from '../TokenUtils';
 
@@ -29,6 +34,21 @@ interface HeaderBoxProps {
   replayLoading?: boolean;
   /** Callback fired when the replay button is clicked */
   onReplay?: () => void;
+  /** When true, the chat timeline rail is folded closed */
+  chatTimelineCollapsed?: boolean;
+  /** Toggles the chat timeline rail open / folded (wide layout only) */
+  onToggleChatTimeline?: () => void;
+  /** When true, timeline is shown in a popover instead of the left rail */
+  narrowTimelineLayout?: boolean;
+  /** Controlled open state for the timeline popover (narrow layout) */
+  timelineDropdownOpen?: boolean;
+  onTimelineDropdownOpenChange?: (open: boolean) => void;
+  /** Timeline content rendered inside the popover when `narrowTimelineLayout` */
+  timelineDropdownContent?: ReactNode;
+  /** When true, the workforce rail on the right is folded closed (workforce tab only) */
+  workforceRailCollapsed?: boolean;
+  /** Toggles the workforce rail open / folded (workforce tab only) */
+  onToggleWorkforceRail?: () => void;
   /** Optional extra class names for the outer container */
   className?: string;
 }
@@ -38,11 +58,26 @@ export function HeaderBox({
   status,
   replayLoading = false,
   onReplay,
+  chatTimelineCollapsed = false,
+  onToggleChatTimeline,
+  narrowTimelineLayout = false,
+  timelineDropdownOpen,
+  onTimelineDropdownOpenChange,
+  timelineDropdownContent,
+  workforceRailCollapsed = false,
+  onToggleWorkforceRail,
   className,
 }: HeaderBoxProps) {
   const { t } = useTranslation();
   const { appearance } = useAuthStore();
   const tokenIcon = appearance === 'dark' ? tokenDarkIcon : tokenLightIcon;
+  const chatHistoryTooltip = t('layout.chat-history-tooltip', {
+    defaultValue: 'Chat history',
+  });
+  const workforceRailExpandTooltip = t('layout.show-workforce-panel', {
+    defaultValue: 'Show workforce panel',
+  });
+  const workforceRailCollapseTooltip = t('layout.minimize-workforce');
 
   const showReplayButton = status === 'finished';
   const isReplayDisabled =
@@ -50,21 +85,70 @@ export function HeaderBox({
 
   return (
     <div
-      className={`flex h-[44px] w-full flex-row items-center justify-between px-3 ${className || ''}`}
+      className={`px-3 flex h-[44px] w-full flex-row items-center justify-between ${className || ''}`}
     >
-      {/* Left: title + replay button */}
-      <div className="flex items-center gap-2">
-        <span className="text-body-base font-bold leading-relaxed text-text-body">
-          {t('chat.chat-title')}
-        </span>
-
+      {/* Left: timeline menu + replay */}
+      <div className="gap-2 flex items-center">
+        {narrowTimelineLayout && timelineDropdownContent ? (
+          <Popover
+            open={timelineDropdownOpen}
+            onOpenChange={onTimelineDropdownOpenChange}
+          >
+            <TooltipSimple content={chatHistoryTooltip}>
+              <PopoverPrimitive.Trigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  buttonContent="icon-only"
+                  aria-expanded={Boolean(timelineDropdownOpen)}
+                  aria-haspopup="dialog"
+                  aria-controls="chat-timeline-popover-panel"
+                  className="no-drag text-text-label hover:bg-surface-tertiary shrink-0"
+                  aria-label={chatHistoryTooltip}
+                >
+                  <Menu className="h-4 w-4" />
+                </Button>
+              </PopoverPrimitive.Trigger>
+            </TooltipSimple>
+            <PopoverContent
+              id="chat-timeline-popover-panel"
+              align="start"
+              sideOffset={4}
+              className={cn(
+                'min-w-0 p-0 max-h-[min(320px,50vh)] max-w-[calc(100vw-2rem)] overflow-x-hidden overflow-y-auto',
+                'w-max'
+              )}
+            >
+              {timelineDropdownContent}
+            </PopoverContent>
+          </Popover>
+        ) : (
+          onToggleChatTimeline && (
+            <TooltipSimple content={chatHistoryTooltip}>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                buttonContent="icon-only"
+                onClick={onToggleChatTimeline}
+                aria-expanded={!chatTimelineCollapsed}
+                aria-controls="chat-timeline-panel"
+                className="no-drag text-text-label hover:bg-surface-tertiary shrink-0"
+                aria-label={chatHistoryTooltip}
+              >
+                <Menu className="h-4 w-4" />
+              </Button>
+            </TooltipSimple>
+          )
+        )}
         {showReplayButton && (
           <Button
             onClick={onReplay}
             disabled={isReplayDisabled || replayLoading}
             variant="ghost"
             size="sm"
-            className="no-drag rounded-full bg-surface-information font-semibold !text-text-information"
+            className="no-drag bg-surface-information font-semibold !text-text-information rounded-full"
           >
             <PlayCircle className="mr-1 h-3.5 w-3.5" />
             {replayLoading ? t('common.loading') : t('chat.replay')}
@@ -72,13 +156,46 @@ export function HeaderBox({
         )}
       </div>
 
-      {/* Right: project total token count */}
-      <div className="flex items-center gap-1 text-text-label">
-        <img src={tokenIcon} alt="" className="h-3.5 w-3.5" />
-        <span className="text-xs font-medium">
-          {t('chat.token-total-label')}{' '}
-          <AnimatedTokenNumber value={totalTokens} />
-        </span>
+      {/* Right: project total token count + workforce rail toggle (workforce tab) */}
+      <div className="gap-2 text-text-label flex items-center">
+        <div className="gap-1 flex items-center">
+          <img src={tokenIcon} alt="" className="h-3.5 w-3.5" />
+          <span className="text-xs font-medium">
+            {t('chat.token-total-label')}{' '}
+            <AnimatedTokenNumber value={totalTokens} />
+          </span>
+        </div>
+        {onToggleWorkforceRail && (
+          <TooltipSimple
+            content={
+              workforceRailCollapsed
+                ? workforceRailExpandTooltip
+                : workforceRailCollapseTooltip
+            }
+          >
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              buttonContent="icon-only"
+              onClick={onToggleWorkforceRail}
+              aria-expanded={!workforceRailCollapsed}
+              aria-controls="workforce-folded-rail"
+              className="no-drag text-text-label hover:bg-surface-tertiary shrink-0"
+              aria-label={
+                workforceRailCollapsed
+                  ? workforceRailExpandTooltip
+                  : workforceRailCollapseTooltip
+              }
+            >
+              {workforceRailCollapsed ? (
+                <PanelRight className="h-4 w-4" />
+              ) : (
+                <PanelRightClose className="h-4 w-4" />
+              )}
+            </Button>
+          </TooltipSimple>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/ChatBox/MessageItem/AgentMessageCard.tsx b/src/components/ChatBox/MessageItem/AgentMessageCard.tsx
index a4773feef..f67e86449 100644
--- a/src/components/ChatBox/MessageItem/AgentMessageCard.tsx
+++ b/src/components/ChatBox/MessageItem/AgentMessageCard.tsx
@@ -13,7 +13,13 @@
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
 import { Check, Copy, FileText } from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import { Button } from '../../ui/button';
@@ -27,7 +33,10 @@ interface AgentMessageCardProps {
   className?: string;
   typewriter?: boolean;
   attaches?: File[];
+  /** Shown only after markdown (and typewriter, if enabled) has finished rendering — e.g. generated file chips. */
+  deferredFooter?: ReactNode;
   onTyping?: () => void;
+  onMarkdownRenderComplete?: () => void;
 }
 
 // global Map to track completed typewriter effect content hash
@@ -38,14 +47,23 @@ export function AgentMessageCard({
   content,
   typewriter = true,
   onTyping,
+  onMarkdownRenderComplete,
   className,
   attaches,
+  deferredFooter,
 }: AgentMessageCardProps) {
   // use content hash to track if typewriter effect is completed
   const contentHash = useMemo(() => {
     return `${id}-${content}`;
   }, [id, content]);
 
+  const [markdownAndTypingComplete, setMarkdownAndTypingComplete] =
+    useState(false);
+
+  useEffect(() => {
+    setMarkdownAndTypingComplete(false);
+  }, [contentHash]);
+
   // check if typewriter effect is completed
   const isCompleted = completedTypewriterHashes.has(contentHash);
 
@@ -76,27 +94,28 @@ export function AgentMessageCard({
     }
   }, [content, t]);
 
+  const handleMarkdownRenderComplete = useCallback(() => {
+    setMarkdownAndTypingComplete(true);
+    onMarkdownRenderComplete?.();
+  }, [onMarkdownRenderComplete]);
+
+  const showDeferredFileUi =
+    markdownAndTypingComplete &&
+    ((attaches && attaches.length > 0) || deferredFooter != null);
+
   return (
     <div
       key={id}
-      className={`relative w-full rounded-xl bg-transparent px-sm py-3 ${className || ''} group overflow-hidden`}
+      className={`rounded-xl px-sm py-3 flex w-full flex-col bg-transparent ${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">
-          {copied ? (
-            <Check className="h-4 w-4 text-text-success" />
-          ) : (
-            <Copy className="h-4 w-4" />
-          )}
-        </Button>
-      </div>
       <MarkDown
         content={content}
         onTyping={handleTypingComplete}
+        onMarkdownRenderComplete={handleMarkdownRenderComplete}
         enableTypewriter={enableTypewriter && typewriter}
       />
-      {attaches && attaches.length > 0 && (
-        <div className="mt-[10px] flex flex-wrap gap-2">
+      {showDeferredFileUi && attaches && attaches.length > 0 && (
+        <div className="gap-2 mt-[10px] flex flex-wrap">
           {attaches?.map((file) => {
             return (
               <div
@@ -105,11 +124,11 @@ export function AgentMessageCard({
                   window.ipcRenderer.invoke('reveal-in-folder', file.filePath);
                 }}
                 key={'attache-' + file.fileName}
-                className="flex w-full cursor-pointer items-center gap-2 rounded-2xl border border-solid border-task-border-default bg-message-fill-default py-1 pl-2"
+                className="gap-2 rounded-2xl border-task-border-default bg-message-fill-default py-1 pl-2 flex w-full cursor-pointer items-center border border-solid"
               >
                 <FileText size={24} className="flex-shrink-0" />
                 <div className="flex flex-col">
-                  <div className="text-body max-w-48 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold text-text-body">
+                  <div className="text-body max-w-48 text-sm font-bold text-text-body overflow-hidden text-ellipsis whitespace-nowrap">
                     {file?.fileName?.split('.')[0]}
                   </div>
                   <div className="text-xs font-medium leading-29 text-text-body">
@@ -121,6 +140,25 @@ export function AgentMessageCard({
           })}
         </div>
       )}
+      {showDeferredFileUi && deferredFooter != null && (
+        <div className="mt-[10px] w-full">{deferredFooter}</div>
+      )}
+      <div className="mt-1 flex shrink-0 justify-end">
+        <div className="pointer-events-none opacity-0 transition-opacity duration-300 group-hover:pointer-events-auto group-hover:opacity-100">
+          <Button
+            onClick={handleCopy}
+            variant="ghost"
+            size="xs"
+            buttonContent="icon-only"
+          >
+            {copied ? (
+              <Check className="h-4 w-4 text-text-success" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/ChatBox/MessageItem/FeedbackCard.tsx b/src/components/ChatBox/MessageItem/FeedbackCard.tsx
index eb8ef7ede..fc8b4abf4 100644
--- a/src/components/ChatBox/MessageItem/FeedbackCard.tsx
+++ b/src/components/ChatBox/MessageItem/FeedbackCard.tsx
@@ -70,13 +70,18 @@ export function FeedbackCard({
   return (
     <div
       key={id}
-      className={`bg-message-fill-secondary group relative flex w-full flex-col items-center justify-center gap-4 overflow-hidden rounded-xl border px-4 py-3 ${className || ''}`}
+      className={`bg-message-fill-secondary group gap-4 rounded-xl px-4 py-3 relative flex w-full flex-col items-center justify-center overflow-hidden border ${className || ''}`}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
       {/* Copy button - appears on hover */}
-      <div className="absolute bottom-1 right-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-        <Button onClick={handleCopy} variant="ghost" size="icon">
+      <div className="bottom-1 right-1 absolute opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+        <Button
+          onClick={handleCopy}
+          variant="ghost"
+          size="xs"
+          buttonContent="icon-only"
+        >
           {copied ? (
             <Check className="h-4 w-4 text-text-success" />
           ) : (
@@ -86,17 +91,17 @@ export function FeedbackCard({
       </div>
 
       {/* Title */}
-      <p className="w-full font-inter text-sm font-bold leading-normal text-text-body">
+      <p className="font-inter text-sm font-bold leading-normal text-text-body w-full">
         {title}
       </p>
 
       {/* Content */}
-      <p className="w-full font-inter text-sm font-medium leading-normal text-text-body">
+      <p className="font-inter text-sm font-medium leading-normal text-text-body w-full">
         {content}
       </p>
 
       {/* Action buttons */}
-      <div className="flex w-full items-center gap-1">
+      <div className="gap-1 flex w-full items-center">
         <Button
           onClick={onConfirm}
           variant="primary"
diff --git a/src/components/ChatBox/MessageItem/MarkDown.tsx b/src/components/ChatBox/MessageItem/MarkDown.tsx
index 43e2f6c37..150c6cab2 100644
--- a/src/components/ChatBox/MessageItem/MarkDown.tsx
+++ b/src/components/ChatBox/MessageItem/MarkDown.tsx
@@ -58,12 +58,15 @@ export const MarkDown = memo(
     content,
     speed = 10,
     onTyping,
+    onMarkdownRenderComplete,
     enableTypewriter = true,
     contentBasePath,
   }: {
     content: string;
     speed?: number;
     onTyping?: () => void;
+    /** Fires once per stable `content` when full text is shown and markdown HTML has been applied (after typewriter catches up if enabled). */
+    onMarkdownRenderComplete?: () => void;
     enableTypewriter?: boolean;
     pTextSize?: string;
     olPadding?: string;
@@ -76,11 +79,16 @@ export const MarkDown = memo(
     const contentRef = useRef<HTMLDivElement>(null);
     const lastContentRef = useRef<string | null>(null);
     const typingCallbackRef = useRef(onTyping);
+    const renderCompleteRef = useRef(onMarkdownRenderComplete);
 
     useEffect(() => {
       typingCallbackRef.current = onTyping;
     }, [onTyping]);
 
+    useEffect(() => {
+      renderCompleteRef.current = onMarkdownRenderComplete;
+    }, [onMarkdownRenderComplete]);
+
     // Typewriter effect
     useEffect(() => {
       if (lastContentRef.current === content) {
@@ -132,6 +140,9 @@ export const MarkDown = memo(
           setHtml(
             `<pre class="bg-code-surface p-2 rounded text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all" style="word-break: break-all;"><code>${DOMPurify.sanitize(formattedHtml)}</code></pre>`
           );
+          if (displayedContent === content && renderCompleteRef.current) {
+            renderCompleteRef.current();
+          }
           return;
         }
 
@@ -195,10 +206,13 @@ export const MarkDown = memo(
         // Sanitize HTML
         const sanitized = DOMPurify.sanitize(rawHtml);
         setHtml(sanitized);
+        if (displayedContent === content && renderCompleteRef.current) {
+          renderCompleteRef.current();
+        }
       };
 
       processMarkdown();
-    }, [displayedContent, contentBasePath]);
+    }, [displayedContent, content, contentBasePath]);
 
     // Add click handlers for images
     useEffect(() => {
@@ -238,14 +252,14 @@ export const MarkDown = memo(
         >
           <DialogContent
             size="lg"
-            className="flex h-auto max-h-[95vh] w-auto max-w-[95vw] items-center justify-center p-2"
+            className="p-2 flex h-auto max-h-[95vh] w-auto max-w-[95vw] items-center justify-center"
             showCloseButton
           >
             {previewImage && (
               <img
                 src={previewImage}
                 alt="Preview"
-                className="h-auto max-h-[90vh] w-auto max-w-full rounded object-contain"
+                className="rounded h-auto max-h-[90vh] w-auto max-w-full object-contain"
               />
             )}
           </DialogContent>
diff --git a/src/components/ChatBox/MessageItem/NoticeCard.tsx b/src/components/ChatBox/MessageItem/NoticeCard.tsx
index 633ecd3a1..aec99e7ac 100644
--- a/src/components/ChatBox/MessageItem/NoticeCard.tsx
+++ b/src/components/ChatBox/MessageItem/NoticeCard.tsx
@@ -55,13 +55,14 @@ export function NoticeCard() {
 
   return (
     <div>
-      <div className="flex h-auto w-full flex-col gap-2 py-sm transition-all duration-300">
-        <div className="relative h-auto w-full overflow-hidden rounded-xl py-3 pr-5 backdrop-blur-[5px]">
+      <div className="gap-2 py-sm flex h-auto w-full flex-col transition-all duration-300">
+        <div className="rounded-xl py-3 pr-5 relative h-auto w-full overflow-hidden backdrop-blur-[5px]">
           <div className="relative">
             <Button
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               variant="ghost"
-              className="absolute right-[-15px] top-0"
+              className="top-0 absolute right-[-15px]"
               onClick={() => setIsExpanded(!isExpanded)}
             >
               <ChevronDown
@@ -75,7 +76,7 @@ export function NoticeCard() {
               ref={contentRef}
               className={`${
                 isExpanded ? 'overflow-y-auto' : 'max-h-[200px] overflow-y-auto'
-              } scrollbar-hide relative transition-all duration-300 ease-in-out`}
+              } scrollbar-hide ease-in-out relative transition-all duration-300`}
               style={{
                 maskImage: isExpanded
                   ? 'none'
@@ -85,15 +86,15 @@ export function NoticeCard() {
                   : 'linear-gradient(to top, black 0%, black 40%, transparent 100%)',
               }}
             >
-              <div className="mt-sm flex flex-col gap-2 px-2">
+              <div className="mt-sm gap-2 px-2 flex flex-col">
                 {cotList.map((cot: string, index: number) => {
                   return (
                     <div
                       key={`taskList-${index}`}
-                      className={`flex cursor-pointer gap-2 rounded-lg border border-solid border-transparent transition-all duration-300 ease-in-out animate-in fade-in-0 slide-in-from-left-2`}
+                      className={`gap-2 rounded-lg ease-in-out animate-in fade-in-0 slide-in-from-left-2 flex cursor-pointer border border-solid border-transparent transition-all duration-300`}
                     >
-                      <div className="m-1.5 mt-2 h-1 w-1 rounded-full bg-icon-primary"></div>
-                      <div className="flex flex-1 flex-col items-start justify-center text-sm font-normal leading-normal">
+                      <div className="m-1.5 mt-2 h-1 w-1 bg-icon-primary rounded-full"></div>
+                      <div className="text-sm font-normal leading-normal flex flex-1 flex-col items-start justify-center">
                         {cot}
                       </div>
                     </div>
diff --git a/src/components/ChatBox/MessageItem/TaskCompletionCard.tsx b/src/components/ChatBox/MessageItem/TaskCompletionCard.tsx
index 8efdf66f8..314871295 100644
--- a/src/components/ChatBox/MessageItem/TaskCompletionCard.tsx
+++ b/src/components/ChatBox/MessageItem/TaskCompletionCard.tsx
@@ -15,17 +15,18 @@
 import { TriggerDialog } from '@/components/Trigger/TriggerDialog';
 import { Button } from '@/components/ui/button';
 import { motion } from 'framer-motion';
-import { Plus } from 'lucide-react';
+import { Plus, X } from 'lucide-react';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 interface TaskCompletionCardProps {
   taskPrompt?: string;
   onRerun?: () => void;
+  onDismiss?: () => void;
 }
 
 export const TaskCompletionCard: React.FC<TaskCompletionCardProps> = ({
   taskPrompt = '',
-  onRerun,
+  onDismiss,
 }) => {
   const { t } = useTranslation();
   const [isTriggerDialogOpen, setIsTriggerDialogOpen] = useState(false);
@@ -39,11 +40,26 @@ export const TaskCompletionCard: React.FC<TaskCompletionCardProps> = ({
       <motion.div
         initial={{ opacity: 0, y: 10 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.3 }}
-        className="flex w-full flex-row items-center gap-2 rounded-xl bg-surface-primary p-3"
+        transition={{ duration: 0.25 }}
+        className="group rounded-xl bg-surface-primary p-3 relative flex w-full flex-row items-center"
       >
-        {/* Description */}
-        <div className="flex w-full flex-col">
+        {onDismiss && (
+          <Button
+            type="button"
+            variant="outline"
+            size="xs"
+            buttonRadius="full"
+            buttonContent="icon-only"
+            onClick={onDismiss}
+            className="-top-2 -right-2 pointer-events-none absolute z-10 shrink-0 opacity-0 transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"
+            aria-label={t('chat.close')}
+          >
+            <X />
+          </Button>
+        )}
+        <div
+          className={`min-w-0 gap-0.5 flex w-full flex-col ${onDismiss ? 'pr-10' : ''}`}
+        >
           <div className="text-label-sm font-bold leading-normal text-text-body">
             {t('chat.task-completed-card-title')}
           </div>
@@ -55,7 +71,7 @@ export const TaskCompletionCard: React.FC<TaskCompletionCardProps> = ({
           variant="primary"
           size="sm"
           onClick={handleAddTrigger}
-          className="h-fit rounded-lg"
+          className="rounded-lg h-fit"
         >
           <Plus className="h-4 w-4" />
           {t('triggers.add-trigger')}
diff --git a/src/components/ChatBox/MessageItem/UserMessageCard.tsx b/src/components/ChatBox/MessageItem/UserMessageCard.tsx
index c3eb5253f..fe7623baa 100644
--- a/src/components/ChatBox/MessageItem/UserMessageCard.tsx
+++ b/src/components/ChatBox/MessageItem/UserMessageCard.tsx
@@ -13,38 +13,33 @@
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
 import { cn } from '@/lib/utils';
-import { Check, Copy, FileText, Image, Sparkles } from 'lucide-react';
-import { useCallback, useRef, useState } from 'react';
+import { Check, Copy, FileText, Image } from 'lucide-react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import { Button } from '../../ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
+import { UserMessageRichContent } from './UserMessageRichContent';
 
 const COPIED_RESET_MS = 2000;
 
-const SKILL_TAG_REGEX = /\{\{([^}]+)\}\}/g;
+/** Four lines at `body-sm` line height — same tokens as `text-body-sm` (13px / 20px). */
+const USER_MESSAGE_COLLAPSED_MAX = 'calc(4 * var(--lineHeight-14, 20px))';
 
-function parseContentWithSkillTags(
-  content: string
-): Array<{ type: 'text'; value: string } | { type: 'skill'; name: string }> {
-  const nodes: Array<
-    { type: 'text'; value: string } | { type: 'skill'; name: string }
-  > = [];
-  let lastIndex = 0;
-  let m: RegExpExecArray | null;
-  SKILL_TAG_REGEX.lastIndex = 0;
-  while ((m = SKILL_TAG_REGEX.exec(content)) !== null) {
-    if (m.index > lastIndex) {
-      nodes.push({ type: 'text', value: content.slice(lastIndex, m.index) });
-    }
-    nodes.push({ type: 'skill', name: m[1].trim() });
-    lastIndex = m.index + m[0].length;
-  }
-  if (lastIndex < content.length) {
-    nodes.push({ type: 'text', value: content.slice(lastIndex) });
-  }
-  return nodes.length > 0 ? nodes : [{ type: 'text', value: content }];
-}
+/** SVG alpha mask: CSS linear-gradient masks are often treated as luminance in WebKit/Chromium (black = hole), which reads as a flat white slab. */
+const USER_MESSAGE_FOLD_MASK_DATA_URL = `url("data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><defs><linearGradient id="g" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0"><stop offset="0%" stop-color="white"/><stop offset="50%" stop-color="white" stop-opacity="0.55"/><stop offset="100%" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="1" height="1" fill="url(#g)"/></svg>'
+)}")`;
+
+const USER_MESSAGE_FOLD_FADE_STYLE = {
+  backgroundColor: 'var(--surface-tertiary)',
+  maskImage: USER_MESSAGE_FOLD_MASK_DATA_URL,
+  WebkitMaskImage: USER_MESSAGE_FOLD_MASK_DATA_URL,
+  maskSize: '100% 100%',
+  WebkitMaskSize: '100% 100%',
+  maskRepeat: 'no-repeat',
+  WebkitMaskRepeat: 'no-repeat',
+} as const;
 
 interface UserMessageCardProps {
   id: string;
@@ -62,9 +57,36 @@ export function UserMessageCard({
   const [_hoveredFilePath, setHoveredFilePath] = useState<string | null>(null);
   const [isRemainingOpen, setIsRemainingOpen] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const [canClamp, setCanClamp] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
   const hoverCloseTimerRef = useRef<number | null>(null);
   const { t } = useTranslation();
 
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+
+    const updateClamp = () => {
+      if (expanded) {
+        const prevMax = el.style.maxHeight;
+        const prevOv = el.style.overflow;
+        el.style.maxHeight = USER_MESSAGE_COLLAPSED_MAX;
+        el.style.overflow = 'hidden';
+        setCanClamp(el.scrollHeight > el.clientHeight + 1);
+        el.style.maxHeight = prevMax;
+        el.style.overflow = prevOv;
+        return;
+      }
+      setCanClamp(el.scrollHeight > el.clientHeight + 1);
+    };
+
+    updateClamp();
+    const ro = new ResizeObserver(updateClamp);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [content, expanded, id]);
+
   const handleCopy = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(content);
@@ -103,169 +125,192 @@ export function UserMessageCard({
     return <FileText className="h-4 w-4 text-icon-primary" />;
   };
 
-  const handleOpenSkillFolder = (skillName: string) => {
-    window.electronAPI?.openSkillFolder?.(skillName);
-  };
-
-  const contentNodes = parseContentWithSkillTags(content);
-  const hasSkillTags = contentNodes.some((n) => n.type === 'skill');
-
   return (
-    <div
-      key={id}
-      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">
-          {copied ? (
-            <Check className="h-4 w-4 text-text-success" />
-          ) : (
-            <Copy className="h-4 w-4" />
-          )}
-        </Button>
-      </div>
-      <div className="whitespace-pre-wrap break-words text-body-sm text-text-body">
-        {hasSkillTags
-          ? contentNodes.map((node, i) =>
-              node.type === 'text' ? (
-                <span key={i}>{node.value}</span>
-              ) : (
-                <button
-                  key={i}
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleOpenSkillFolder(node.name);
-                  }}
-                  className="inline-flex cursor-pointer items-center gap-1 rounded-md border border-border-primary bg-surface-secondary px-1.5 py-0.5 font-medium text-text-body transition-colors hover:bg-surface-tertiary hover:underline"
-                  title="Open skill folder"
-                >
-                  <Sparkles className="h-3.5 w-3.5 text-icon-primary" />
-                  {node.name}
-                </button>
-              )
-            )
-          : content}
-      </div>
-      {attaches && attaches.length > 0 && (
-        <div className="relative mt-2 box-border flex w-full flex-wrap items-start gap-1">
-          {(() => {
-            // Show max 4 files + count indicator
-            const maxVisibleFiles = 4;
-            const visibleFiles = attaches.slice(0, maxVisibleFiles);
-            const remainingCount =
-              attaches.length > maxVisibleFiles
-                ? attaches.length - maxVisibleFiles
-                : 0;
+    <div key={id} className={cn('group/msg relative w-full', className)}>
+      <div className="rounded-xl bg-surface-tertiary px-sm pt-2 w-full overflow-visible">
+        {attaches && attaches.length > 0 && (
+          <div className="mb-2 gap-1 relative box-border flex w-full flex-wrap items-start">
+            {(() => {
+              // Show max 2 files + count indicator
+              const maxVisibleFiles = 2;
+              const visibleFiles = attaches.slice(0, maxVisibleFiles);
+              const remainingCount =
+                attaches.length > maxVisibleFiles
+                  ? attaches.length - maxVisibleFiles
+                  : 0;
 
-            return (
-              <>
-                {visibleFiles.map((file) => {
-                  return (
-                    <div
-                      key={'attache-' + file.fileName}
-                      className={cn(
-                        'relative box-border flex h-auto max-w-32 cursor-pointer items-center gap-0.5 rounded-lg bg-tag-surface transition-colors duration-300 hover:bg-tag-surface-hover'
-                      )}
-                      onMouseEnter={() => setHoveredFilePath(file.filePath)}
-                      onMouseLeave={() =>
-                        setHoveredFilePath((prev) =>
-                          prev === file.filePath ? null : prev
-                        )
-                      }
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        window.ipcRenderer.invoke(
-                          'reveal-in-folder',
-                          file.filePath
-                        );
-                      }}
-                    >
-                      {/* File icon */}
-                      <div className="flex h-6 w-6 items-center justify-center rounded-md">
-                        {getFileIcon(file.fileName)}
-                      </div>
-
-                      {/* File Name */}
-                      <p
+              return (
+                <>
+                  {visibleFiles.map((file) => {
+                    return (
+                      <div
+                        key={'attache-' + file.fileName}
                         className={cn(
-                          "relative my-0 min-h-px min-w-px flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap font-['Inter'] text-xs font-bold leading-tight text-text-body"
+                          'max-w-24 gap-0.5 rounded-lg bg-tag-surface hover:bg-tag-surface-hover relative box-border flex h-auto cursor-pointer items-center transition-colors duration-300'
                         )}
-                        title={file.fileName}
-                      >
-                        {file.fileName}
-                      </p>
-                    </div>
-                  );
-                })}
-
-                {/* Show remaining count if more than 4 files */}
-                {remainingCount > 0 && (
-                  <Popover
-                    open={isRemainingOpen}
-                    onOpenChange={setIsRemainingOpen}
-                  >
-                    <PopoverTrigger asChild>
-                      <Button
-                        size="icon"
-                        variant="ghost"
-                        className="relative box-border flex h-auto items-center rounded-lg bg-tag-surface"
-                        onMouseEnter={openRemainingPopover}
-                        onMouseLeave={scheduleCloseRemainingPopover}
+                        onMouseEnter={() => setHoveredFilePath(file.filePath)}
+                        onMouseLeave={() =>
+                          setHoveredFilePath((prev) =>
+                            prev === file.filePath ? null : prev
+                          )
+                        }
                         onClick={(e) => {
                           e.stopPropagation();
+                          window.ipcRenderer.invoke(
+                            'reveal-in-folder',
+                            file.filePath
+                          );
                         }}
                       >
-                        <p className="my-0 whitespace-nowrap font-['Inter'] text-xs font-bold leading-tight text-text-body">
-                          {remainingCount}+
+                        {/* File icon */}
+                        <div className="h-6 w-6 rounded-md flex items-center justify-center">
+                          {getFileIcon(file.fileName)}
+                        </div>
+
+                        {/* File Name */}
+                        <p
+                          className={cn(
+                            "my-0 text-xs font-bold leading-tight text-text-body relative min-h-px min-w-px flex-1 overflow-hidden font-['Inter'] overflow-ellipsis whitespace-nowrap"
+                          )}
+                          title={file.fileName}
+                        >
+                          {file.fileName}
                         </p>
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent
-                      align="end"
-                      sideOffset={4}
-                      className="!w-auto max-w-40 rounded-md border border-dropdown-border bg-dropdown-bg p-1 shadow-perfect"
-                      onMouseEnter={openRemainingPopover}
-                      onMouseLeave={scheduleCloseRemainingPopover}
+                      </div>
+                    );
+                  })}
+
+                  {/* Show remaining count if more than 2 files */}
+                  {remainingCount > 0 && (
+                    <Popover
+                      open={isRemainingOpen}
+                      onOpenChange={setIsRemainingOpen}
                     >
-                      <div className="scrollbar-hide flex max-h-[176px] flex-col gap-1 overflow-auto">
-                        {attaches.slice(maxVisibleFiles).map((file) => {
-                          return (
-                            <div
-                              key={file.filePath}
-                              className="flex cursor-pointer items-center gap-1 rounded-lg bg-tag-surface py-0.5 transition-colors duration-300 hover:bg-tag-surface-hover"
-                              onMouseLeave={() =>
-                                setHoveredFilePath((prev) =>
-                                  prev === file.filePath ? null : prev
-                                )
-                              }
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                window.ipcRenderer.invoke(
-                                  'reveal-in-folder',
-                                  file.filePath
-                                );
-                                setIsRemainingOpen(false);
-                              }}
-                            >
-                              <div className="flex h-6 w-6 items-center justify-center rounded-md">
-                                {getFileIcon(file.fileName)}
+                      <PopoverTrigger asChild>
+                        <Button
+                          size="xs"
+                          buttonContent="text"
+                          variant="ghost"
+                          className="rounded-lg bg-tag-surface relative flex items-center"
+                          onMouseEnter={openRemainingPopover}
+                          onMouseLeave={scheduleCloseRemainingPopover}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                          }}
+                        >
+                          <span className="text-label-xs font-bold leading-tight text-text-body font-['Inter'] whitespace-nowrap">
+                            {remainingCount}+
+                          </span>
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent
+                        align="end"
+                        sideOffset={4}
+                        className="max-w-40 rounded-md border-dropdown-border bg-dropdown-bg p-1 shadow-perfect !w-auto border"
+                        onMouseEnter={openRemainingPopover}
+                        onMouseLeave={scheduleCloseRemainingPopover}
+                      >
+                        <div className="scrollbar-hide gap-1 flex max-h-[176px] flex-col overflow-auto">
+                          {attaches.slice(maxVisibleFiles).map((file) => {
+                            return (
+                              <div
+                                key={file.filePath}
+                                className="gap-1 rounded-lg bg-tag-surface py-0.5 hover:bg-tag-surface-hover flex cursor-pointer items-center transition-colors duration-300"
+                                onMouseLeave={() =>
+                                  setHoveredFilePath((prev) =>
+                                    prev === file.filePath ? null : prev
+                                  )
+                                }
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  window.ipcRenderer.invoke(
+                                    'reveal-in-folder',
+                                    file.filePath
+                                  );
+                                  setIsRemainingOpen(false);
+                                }}
+                              >
+                                <div className="h-6 w-6 rounded-md flex items-center justify-center">
+                                  {getFileIcon(file.fileName)}
+                                </div>
+                                <p className="my-0 text-xs font-bold leading-tight text-text-body flex-1 overflow-hidden font-['Inter'] text-ellipsis whitespace-nowrap">
+                                  {file.fileName}
+                                </p>
                               </div>
-                              <p className="my-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-['Inter'] text-xs font-bold leading-tight text-text-body">
-                                {file.fileName}
-                              </p>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                )}
-              </>
-            );
-          })()}
+                            );
+                          })}
+                        </div>
+                      </PopoverContent>
+                    </Popover>
+                  )}
+                </>
+              );
+            })()}
+          </div>
+        )}
+        <div className="relative w-full">
+          <div
+            ref={contentRef}
+            style={
+              !expanded ? { maxHeight: USER_MESSAGE_COLLAPSED_MAX } : undefined
+            }
+            className={cn('relative', !expanded && 'overflow-hidden')}
+          >
+            <UserMessageRichContent content={content} variant="card" />
+            {canClamp && !expanded && (
+              <div
+                className="inset-x-0 bottom-0 h-14 pointer-events-none absolute z-[1]"
+                style={USER_MESSAGE_FOLD_FADE_STYLE}
+                aria-hidden
+              />
+            )}
+          </div>
         </div>
-      )}
+        <div className="gap-0.5 pointer-events-none flex w-full shrink-0 items-center justify-end opacity-0 transition-opacity duration-300 group-hover/msg:pointer-events-auto group-hover/msg:opacity-100">
+          {canClamp && !expanded && (
+            <Button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setExpanded(true);
+              }}
+              variant="ghost"
+              size="xs"
+              buttonContent="text"
+              textWeight="normal"
+            >
+              {t('chat.agent-outcome-expand')}
+            </Button>
+          )}
+          {canClamp && expanded && (
+            <Button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setExpanded(false);
+              }}
+              variant="ghost"
+              size="xs"
+              buttonContent="text"
+              textWeight="normal"
+            >
+              {t('chat.agent-outcome-collapse')}
+            </Button>
+          )}
+          <Button
+            onClick={handleCopy}
+            variant="ghost"
+            size="sm"
+            buttonContent="icon-only"
+          >
+            {copied ? (
+              <Check className="h-4 w-4 text-text-success" />
+            ) : (
+              <Copy />
+            )}
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/ChatBox/MessageItem/UserMessageRichContent.tsx b/src/components/ChatBox/MessageItem/UserMessageRichContent.tsx
new file mode 100644
index 000000000..094a0b9fe
--- /dev/null
+++ b/src/components/ChatBox/MessageItem/UserMessageRichContent.tsx
@@ -0,0 +1,274 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { cn } from '@/lib/utils';
+import { Fragment, type ReactNode } from 'react';
+
+/** Same tokens as `UserMessageCard` body (13px / 20px). */
+export const USER_MESSAGE_BODY_STYLE = {
+  fontSize: 'var(--fontSize-sm, 13px)',
+  lineHeight: 'var(--lineHeight-14, 20px)',
+} as const;
+
+type MessageRichSegment = { type: 'text' | 'url' | 'skill'; text: string };
+
+const MESSAGE_SKILL_STYLE_CLASSES = [
+  'text-text-information bg-surface-information/35',
+  'text-text-success bg-surface-success/25',
+  'text-text-warning bg-surface-warning/35',
+  'text-icon-information bg-surface-action/20',
+] as const;
+
+function hashMessageSkillLabel(label: string): number {
+  let h = 0;
+  for (let i = 0; i < label.length; i++) {
+    h = (h << 5) - h + label.charCodeAt(i);
+    h |= 0;
+  }
+  return Math.abs(h);
+}
+
+function trimMessageUrlTail(raw: string): string {
+  return raw.replace(/[`'".,;:!?)\]]+$/g, '');
+}
+
+const MESSAGE_URL_AT_START = /^(https?:\/\/[^\s<>"']+|www\.[^\s<>"']+)/i;
+
+function tokenizeMessagePlainText(text: string): MessageRichSegment[] {
+  const out: MessageRichSegment[] = [];
+  let i = 0;
+  const len = text.length;
+
+  while (i < len) {
+    const slice = text.slice(i);
+    const urlMatch = slice.match(MESSAGE_URL_AT_START);
+    if (urlMatch) {
+      const full = urlMatch[0];
+      const trimmed = trimMessageUrlTail(full);
+      if (trimmed.length > 0) {
+        out.push({ type: 'url', text: trimmed });
+        if (full.length > trimmed.length) {
+          out.push({ type: 'text', text: full.slice(trimmed.length) });
+        }
+        i += full.length;
+        continue;
+      }
+    }
+
+    if (slice[0] === '#') {
+      const skillMatch = slice.match(/^#([a-zA-Z0-9_-]+)/);
+      if (skillMatch) {
+        out.push({ type: 'skill', text: skillMatch[0] });
+        i += skillMatch[0].length;
+        continue;
+      }
+    }
+
+    let j = i + 1;
+    while (j < len) {
+      const tail = text.slice(j);
+      if (MESSAGE_URL_AT_START.test(tail)) break;
+      if (text[j] === '#' && /^#([a-zA-Z0-9_-]+)/.test(tail)) break;
+      j++;
+    }
+    out.push({ type: 'text', text: text.slice(i, j) });
+    i = j;
+  }
+
+  return out;
+}
+
+function messageHttpUrlOrNull(raw: string): string | null {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+  const withScheme = /^www\./i.test(trimmed) ? `https://${trimmed}` : trimmed;
+  try {
+    const u = new URL(withScheme);
+    if (u.protocol !== 'http:' && u.protocol !== 'https:') return null;
+    return u.href;
+  } catch {
+    if (/^https?:\/\//i.test(trimmed)) {
+      return trimmed;
+    }
+    if (/^www\./i.test(trimmed)) {
+      return `https://${trimmed}`;
+    }
+    return null;
+  }
+}
+
+const SKILL_TAG_REGEX = /\{\{([^}]+)\}\}/g;
+
+type ContentNode =
+  | { type: 'text'; value: string }
+  | { type: 'skill'; name: string }
+  | { type: 'mention'; id: string };
+
+function parseContentWithTags(content: string): ContentNode[] {
+  const nodes: ContentNode[] = [];
+  let lastIndex = 0;
+  let m: RegExpExecArray | null;
+  SKILL_TAG_REGEX.lastIndex = 0;
+  while ((m = SKILL_TAG_REGEX.exec(content)) !== null) {
+    if (m.index > lastIndex) {
+      nodes.push({ type: 'text', value: content.slice(lastIndex, m.index) });
+    }
+    const inner = m[1].trim();
+    if (inner.startsWith('@')) {
+      nodes.push({ type: 'mention', id: inner.slice(1) });
+    } else {
+      nodes.push({ type: 'skill', name: inner });
+    }
+    lastIndex = m.index + m[0].length;
+  }
+  if (lastIndex < content.length) {
+    nodes.push({ type: 'text', value: content.slice(lastIndex) });
+  }
+  return nodes.length > 0 ? nodes : [{ type: 'text', value: content }];
+}
+
+const MENTION_LABELS: Record<string, string> = {
+  workforce: 'Workforce',
+  browser: 'Browser Agent',
+  dev: 'Developer Agent',
+  doc: 'Document Agent',
+  media: 'Multi Modal Agent',
+};
+
+const MENTION_TEXT_CLASS: Record<string, string> = {
+  workforce: 'text-text-camel',
+  browser: 'text-text-browser',
+  dev: 'text-text-developer',
+  doc: 'text-text-document',
+  media: 'text-text-multimodal',
+};
+
+function renderMessageRichSegments(text: string, keyPrefix: string): ReactNode {
+  return tokenizeMessagePlainText(text).map((seg, i) => {
+    const key = `${keyPrefix}-${i}`;
+    if (seg.type === 'text') {
+      return <span key={key}>{seg.text}</span>;
+    }
+    if (seg.type === 'url') {
+      const href = messageHttpUrlOrNull(seg.text);
+      if (href) {
+        return (
+          <a
+            key={key}
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-text-information decoration-text-information/80 underline underline-offset-2"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {seg.text}
+          </a>
+        );
+      }
+      return <span key={key}>{seg.text}</span>;
+    }
+    const clsIdx =
+      hashMessageSkillLabel(seg.text) % MESSAGE_SKILL_STYLE_CLASSES.length;
+    return (
+      <span
+        key={key}
+        className={cn(
+          'rounded px-0.5 font-normal inline align-baseline',
+          MESSAGE_SKILL_STYLE_CLASSES[clsIdx]
+        )}
+      >
+        {seg.text}
+      </span>
+    );
+  });
+}
+
+export type UserMessageRichVariant = 'card' | 'compact';
+
+export interface UserMessageRichContentProps {
+  content: string;
+  variant?: UserMessageRichVariant;
+  className?: string;
+}
+
+/**
+ * Read-only rich body: `{{@agent}}`, `{{skill}}`, `#skill`, URLs — matches `UserMessageCard`.
+ */
+export function UserMessageRichContent({
+  content,
+  variant = 'card',
+  className,
+}: UserMessageRichContentProps) {
+  const contentNodes = parseContentWithTags(content);
+
+  const handleOpenSkillFolder = (skillName: string) => {
+    window.electronAPI?.openSkillFolder?.(skillName);
+  };
+
+  const bodyClass =
+    variant === 'card'
+      ? 'text-text-body font-sans relative z-0 break-words whitespace-pre-wrap'
+      : 'text-text-label font-sans relative z-0 min-w-0 break-words font-normal line-clamp-1';
+
+  return (
+    <div className={cn('min-w-0', className)}>
+      <div style={USER_MESSAGE_BODY_STYLE} className={bodyClass}>
+        {contentNodes.map((node, i) => {
+          if (node.type === 'text') {
+            return (
+              <Fragment key={i}>
+                {renderMessageRichSegments(node.value, `n${i}`)}
+              </Fragment>
+            );
+          }
+          if (node.type === 'mention') {
+            const label = MENTION_LABELS[node.id] ?? node.id;
+            return (
+              <span
+                key={i}
+                className={cn(
+                  'font-normal inline align-baseline',
+                  MENTION_TEXT_CLASS[node.id] ?? 'text-text-body'
+                )}
+              >
+                @{label}
+              </span>
+            );
+          }
+          const skillToken = `#${node.name}`;
+          const clsIdx =
+            hashMessageSkillLabel(skillToken) %
+            MESSAGE_SKILL_STYLE_CLASSES.length;
+          return (
+            <button
+              key={i}
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleOpenSkillFolder(node.name);
+              }}
+              title="Open skill folder"
+              className={cn(
+                'mx-0 rounded px-0.5 font-normal inline cursor-pointer align-baseline [font:inherit] hover:opacity-90',
+                MESSAGE_SKILL_STYLE_CLASSES[clsIdx]
+              )}
+            >
+              {skillToken}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ChatBox/ProjectChatContainer.tsx b/src/components/ChatBox/ProjectChatContainer.tsx
index 573284560..29c95357b 100644
--- a/src/components/ChatBox/ProjectChatContainer.tsx
+++ b/src/components/ChatBox/ProjectChatContainer.tsx
@@ -13,32 +13,29 @@
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+import { usePageTabStore } from '@/store/pageTabStore';
 import { AnimatePresence } from 'framer-motion';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ProjectSection } from './ProjectSection';
 
 interface ProjectChatContainerProps {
   className?: string;
-  // onPauseResume: () => void;  // Commented out - temporary not needed
+  /** Scroll viewport lives in ChatBox (full width) so the scrollbar sits on the panel edge. */
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>;
+  /** Bottom padding so scrolled content clears the fixed BottomBox overlay (px); measured in ChatBox. */
+  scrollBottomInsetPx: number;
   onSkip: () => void;
   isPauseResumeLoading: boolean;
 }
 
 export const ProjectChatContainer: React.FC<ProjectChatContainerProps> = ({
   className = '',
-  // onPauseResume,  // Commented out - temporary not needed
+  scrollContainerRef,
+  scrollBottomInsetPx,
   onSkip,
   isPauseResumeLoading,
 }) => {
   const { projectStore, chatStore } = useChatStoreAdapter();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const [activeQueryId, setActiveQueryId] = useState<string | null>(null);
   const [lastMessageCount, setLastMessageCount] = useState(0);
 
@@ -59,18 +56,16 @@ export const ProjectChatContainer: React.FC<ProjectChatContainerProps> = ({
 
   // Scroll to bottom function
   const scrollToBottom = useCallback(() => {
-    if (containerRef.current) {
-      setTimeout(() => {
-        // Double check containerRef is still valid before scrolling
-        if (containerRef.current) {
-          containerRef.current.scrollTo({
-            top: containerRef.current.scrollHeight,
-            behavior: 'smooth',
-          });
-        }
-      }, 100);
-    }
-  }, []);
+    if (!scrollContainerRef.current) return;
+    setTimeout(() => {
+      const root = scrollContainerRef.current;
+      if (!root) return;
+      root.scrollTo({
+        top: root.scrollHeight,
+        behavior: 'smooth',
+      });
+    }, 100);
+  }, [scrollContainerRef]);
 
   // Monitor for new user messages and auto-scroll
   useEffect(() => {
@@ -116,7 +111,8 @@ export const ProjectChatContainer: React.FC<ProjectChatContainerProps> = ({
 
   // Intersection Observer for scroll-based animations
   useEffect(() => {
-    if (!containerRef.current) return;
+    const root = scrollContainerRef.current;
+    if (!root) return;
 
     const observer = new IntersectionObserver(
       (entries) => {
@@ -130,92 +126,82 @@ export const ProjectChatContainer: React.FC<ProjectChatContainerProps> = ({
         });
       },
       {
-        root: containerRef.current,
+        root,
         rootMargin: '-20% 0px -60% 0px', // Trigger when query is in upper portion
         threshold: 0.1,
       }
     );
 
-    // Observe all query groups
-    const queryGroups =
-      containerRef.current.querySelectorAll('[data-query-id]');
+    const queryGroups = root.querySelectorAll('[data-query-id]');
     queryGroups.forEach((group) => observer.observe(group));
 
     return () => {
       queryGroups.forEach((group) => observer.unobserve(group));
     };
-  }, [chatStores]);
+  }, [chatStores, scrollContainerRef]);
 
-  // Handle scrollbar visibility on scroll
-  useEffect(() => {
-    const scrollContainer = containerRef.current;
-    if (!scrollContainer) return;
+  // Scroll to a specific query group when triggered from the sidebar
+  const scrollToQueryId = usePageTabStore((s) => s.scrollToQueryId);
+  const setScrollToQueryId = usePageTabStore((s) => s.setScrollToQueryId);
 
-    const handleScroll = () => {
-      // Add scrolling class
-      scrollContainer.classList.add('scrolling');
-
-      // Clear existing timeout
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-
-      // Remove scrolling class after 1 second of no scrolling
-      scrollTimeoutRef.current = setTimeout(() => {
-        scrollContainer.classList.remove('scrolling');
-      }, 1000);
-    };
+  useEffect(() => {
+    if (!scrollToQueryId || !scrollContainerRef.current) return;
 
-    scrollContainer.addEventListener('scroll', handleScroll);
+    const el = scrollContainerRef.current.querySelector(
+      `[data-query-id="${scrollToQueryId}"]`
+    );
+    if (el) {
+      const container = scrollContainerRef.current;
+      const containerRect = container.getBoundingClientRect();
+      const elRect = el.getBoundingClientRect();
+      const scrollOffset = elRect.top - containerRect.top + container.scrollTop;
+      container.scrollTo({ top: scrollOffset, behavior: 'smooth' });
+    }
 
-    return () => {
-      scrollContainer.removeEventListener('scroll', handleScroll);
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-    };
-  }, []);
+    setScrollToQueryId(null);
+  }, [scrollToQueryId, setScrollToQueryId]);
 
   return (
-    <div
-      ref={containerRef}
-      className={`scrollbar-always-visible relative z-10 flex flex-1 flex-col overflow-y-scroll ${className}`}
-    >
-      <AnimatePresence mode="popLayout">
-        {chatStores.map(({ chatId, chatStore }) => {
-          const chatState = chatStore.getState();
-          const activeTaskId = chatState.activeTaskId;
-
-          if (!activeTaskId || !chatState.tasks[activeTaskId]) {
-            return null;
-          }
+    <div className={`relative z-10 w-full ${className}`}>
+      <div
+        className="pl-3 pr-1 pt-0 mx-auto w-full max-w-[600px]"
+        style={{ paddingBottom: scrollBottomInsetPx }}
+      >
+        <AnimatePresence mode="popLayout">
+          {chatStores.map(({ chatId, chatStore }) => {
+            const chatState = chatStore.getState();
+            const activeTaskId = chatState.activeTaskId;
+
+            if (!activeTaskId || !chatState.tasks[activeTaskId]) {
+              return null;
+            }
 
-          const task = chatState.tasks[activeTaskId];
-          const messages = task.messages || [];
+            const task = chatState.tasks[activeTaskId];
+            const messages = task.messages || [];
 
-          // Only render if there are actual user messages (not just empty or system messages)
-          const hasUserMessages = messages.some(
-            (msg: any) => msg.role === 'user' && msg.content
-          );
+            // Only render if there are actual user messages (not just empty or system messages)
+            const hasUserMessages = messages.some(
+              (msg: any) => msg.role === 'user' && msg.content
+            );
 
-          if (!hasUserMessages) {
-            return null;
-          }
+            if (!hasUserMessages) {
+              return null;
+            }
 
-          return (
-            <ProjectSection
-              key={chatId}
-              chatId={chatId}
-              chatStore={chatStore}
-              activeQueryId={activeQueryId}
-              onQueryActive={setActiveQueryId}
-              // onPauseResume={onPauseResume}  // Commented out - temporary not needed
-              onSkip={onSkip}
-              isPauseResumeLoading={isPauseResumeLoading}
-            />
-          );
-        })}
-      </AnimatePresence>
+            return (
+              <ProjectSection
+                key={chatId}
+                chatId={chatId}
+                chatStore={chatStore}
+                activeQueryId={activeQueryId}
+                onQueryActive={setActiveQueryId}
+                onSkip={onSkip}
+                isPauseResumeLoading={isPauseResumeLoading}
+              />
+            );
+          })}
+        </AnimatePresence>
+      </div>
     </div>
   );
 };
diff --git a/src/components/ChatBox/ProjectSection.tsx b/src/components/ChatBox/ProjectSection.tsx
index 1951023a8..767f055b7 100644
--- a/src/components/ChatBox/ProjectSection.tsx
+++ b/src/components/ChatBox/ProjectSection.tsx
@@ -102,7 +102,7 @@ export const ProjectSection = React.forwardRef<
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: -20 }}
         transition={{ duration: 0.3 }}
-        className="relative mb-8"
+        className="relative"
       >
         {/* User Query Groups */}
         <div className="space-y-0">
@@ -127,6 +127,7 @@ export const ProjectSection = React.forwardRef<
             // onResume={onPauseResume}  // Commented out - temporary not needed
             onSkip={onSkip}
             loading={isPauseResumeLoading}
+            hideStop={false}
           />
         )}
       </motion.div>
diff --git a/src/components/ChatBox/TaskBox/StreamingTaskList.tsx b/src/components/ChatBox/TaskBox/StreamingTaskList.tsx
index e03b4e6e4..90365fa34 100644
--- a/src/components/ChatBox/TaskBox/StreamingTaskList.tsx
+++ b/src/components/ChatBox/TaskBox/StreamingTaskList.tsx
@@ -71,12 +71,12 @@ export function StreamingTaskList({ streamingText }: StreamingTaskListProps) {
   if (tasks.length === 0) {
     // Show a loading state when no tasks have been parsed yet
     return (
-      <div className="flex h-auto w-full flex-col gap-2 py-sm pl-2 transition-all duration-300">
-        <div className="relative h-auto w-full overflow-hidden rounded-xl bg-task-surface py-sm backdrop-blur-[5px]">
-          <div className="absolute left-0 top-0 w-full bg-transparent">
+      <div className="gap-2 py-sm px-2 flex h-auto w-full flex-col transition-all duration-300">
+        <div className="rounded-xl bg-task-surface py-sm relative h-auto w-full overflow-hidden backdrop-blur-[5px]">
+          <div className="left-0 top-0 absolute w-full bg-transparent">
             <Progress value={100} className="h-[2px] w-full" />
           </div>
-          <div className="flex items-center gap-2 px-sm py-2">
+          <div className="gap-2 px-sm py-2 flex items-center">
             <LoaderCircle
               size={16}
               className="animate-spin text-icon-information"
@@ -91,15 +91,15 @@ export function StreamingTaskList({ streamingText }: StreamingTaskListProps) {
   }
 
   return (
-    <div className="flex h-auto w-full flex-col gap-2 py-sm pl-2 transition-all duration-300">
-      <div className="relative h-auto w-full overflow-hidden rounded-xl bg-task-surface py-sm backdrop-blur-[5px]">
+    <div className="gap-2 py-sm px-2 flex h-auto w-full flex-col transition-all duration-300">
+      <div className="rounded-xl bg-task-surface py-sm relative h-auto w-full overflow-hidden backdrop-blur-[5px]">
         {/* Progress bar at top */}
-        <div className="absolute left-0 top-0 w-full bg-transparent">
+        <div className="left-0 top-0 absolute w-full bg-transparent">
           <Progress value={100} className="h-[2px] w-full" />
         </div>
 
         {/* Task type badge */}
-        <div className="mb-2 flex items-center gap-2 px-sm">
+        <div className="mb-2 gap-2 px-sm flex items-center">
           <TaskType type={1} />
           <span className="text-xs font-medium text-text-tertiary">
             {t('layout.tasks')} {tasks.length}
@@ -107,7 +107,7 @@ export function StreamingTaskList({ streamingText }: StreamingTaskListProps) {
         </div>
 
         {/* Task list */}
-        <div className="mt-sm flex flex-col px-sm">
+        <div className="mt-sm px-sm flex flex-col">
           {tasks.map((task, index) => {
             const isLastTask = index === tasks.length - 1;
             const isCurrentlyStreaming = isLastTask && isStreaming;
@@ -115,10 +115,10 @@ export function StreamingTaskList({ streamingText }: StreamingTaskListProps) {
             return (
               <div
                 key={`streaming-task-${index}`}
-                className="group relative flex min-h-2 items-start rounded-lg p-sm duration-300 animate-in fade-in-0 slide-in-from-left-2"
+                className="group min-h-2 rounded-lg p-sm animate-in fade-in-0 slide-in-from-left-2 relative flex items-start duration-300"
               >
                 {/* Task indicator */}
-                <div className="flex h-4 w-7 flex-shrink-0 items-center justify-center pr-sm pt-1">
+                <div className="h-4 w-7 pr-sm pt-1 flex flex-shrink-0 items-center justify-center">
                   {isCurrentlyStreaming ? (
                     <LoaderCircle
                       size={13}
@@ -130,11 +130,11 @@ export function StreamingTaskList({ streamingText }: StreamingTaskListProps) {
                 </div>
 
                 {/* Task content */}
-                <div className="relative flex min-h-4 w-full items-start border-[0px] border-b border-solid border-task-border-default pb-2">
-                  <span className="text-xs leading-[20px] text-text-primary">
+                <div className="min-h-4 border-task-border-default pb-2 relative flex w-full items-start border-[0px] border-b border-solid">
+                  <span className="text-xs text-text-primary leading-[20px]">
                     {task}
                     {isCurrentlyStreaming && (
-                      <span className="ml-0.5 inline-block h-4 w-1 animate-pulse bg-icon-information" />
+                      <span className="ml-0.5 h-4 w-1 animate-pulse bg-icon-information inline-block" />
                     )}
                   </span>
                 </div>
diff --git a/src/components/ChatBox/TaskBox/TaskItem.tsx b/src/components/ChatBox/TaskBox/TaskItem.tsx
index 89b880e69..c4284a5b2 100644
--- a/src/components/ChatBox/TaskBox/TaskItem.tsx
+++ b/src/components/ChatBox/TaskBox/TaskItem.tsx
@@ -67,26 +67,26 @@ export function TaskItem({
     <div key={`task-item-${taskIndex}`} className="w-full">
       <div
         onDoubleClick={(e) => handleFocus(e, true)}
-        className={`group relative flex min-h-2 w-full items-start gap-0 rounded-lg border border-solid p-sm hover:bg-task-fill-hover ${
+        className={`group min-h-2 gap-0 rounded-lg p-sm hover:bg-task-fill-hover relative flex w-full items-start border border-solid ${
           isFocus
             ? 'border-task-border-focus-default bg-task-fill-default'
             : 'border-task-border-default group-hover:border-transparent'
         }`}
       >
-        <div className="flex h-4 w-7 flex-shrink-0 cursor-pointer items-center justify-center pr-sm pt-0.5">
+        <div className="h-4 w-7 pr-sm pt-0.5 flex flex-shrink-0 cursor-pointer items-center justify-center">
           {taskInfo.id === '' ? (
             <CircleDashed size={13} className="text-icon-secondary" />
           ) : (
-            <div className="h-2 w-2 rounded-full bg-icon-information"></div>
+            <div className="h-2 w-2 bg-icon-information rounded-full"></div>
           )}
         </div>
-        <div className="relative flex min-h-4 min-w-0 flex-1 items-center self-stretch overflow-hidden py-0.5 transition-all duration-300">
+        <div className="min-h-4 min-w-0 py-0.5 relative flex flex-1 items-center self-stretch overflow-hidden transition-all duration-300">
           <Textarea
             ref={textareaRef}
             placeholder={t('layout.add-new-task')}
             className={`${
               isFocus && 'w-[calc(100%-52px)]'
-            } min-h-2 min-w-0 resize-none overflow-hidden break-words rounded-none border-none bg-transparent p-0 text-xs leading-[20px] shadow-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0`}
+            } min-h-2 min-w-0 p-0 text-xs resize-none overflow-hidden rounded-none border-none bg-transparent leading-[20px] break-words shadow-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0`}
             value={taskInfo.content}
             onChange={(e) => onUpdate(e.target.value)}
             onBlur={() => {
@@ -98,11 +98,11 @@ export function TaskItem({
             rows={1}
           />
           {!isFocus && (
-            <div className="absolute inset-0 h-full w-full bg-transparent"></div>
+            <div className="inset-0 absolute h-full w-full bg-transparent"></div>
           )}
         </div>
         <div
-          className={`absolute right-2 top-2 flex items-center gap-xs group-hover:opacity-100 ${
+          className={`right-2 top-2 gap-xs absolute flex items-center group-hover:opacity-100 ${
             isFocus ? 'opacity-100' : 'opacity-0'
           } transition-opacity duration-300`}
         >
@@ -111,7 +111,8 @@ export function TaskItem({
               onClick={(e) => handleFocus(e, true)}
               className="rounded-full"
               variant="outline"
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
             >
               <PenLine size={16} className="" />
             </Button>
@@ -123,7 +124,8 @@ export function TaskItem({
               }}
               className="rounded-full"
               variant="success"
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
             >
               <Check
                 size={16}
@@ -135,7 +137,8 @@ export function TaskItem({
             onClick={() => onDelete()}
             className="rounded-full"
             variant="cuation"
-            size="icon"
+            size="xs"
+            buttonContent="icon-only"
           >
             <Trash2 size={16} className="text-icon-tertiary" />
           </Button>
diff --git a/src/components/ChatBox/TaskBox/TypeCardSkeleton.tsx b/src/components/ChatBox/TaskBox/TypeCardSkeleton.tsx
index c377da12b..fe81eb4ee 100644
--- a/src/components/ChatBox/TaskBox/TypeCardSkeleton.tsx
+++ b/src/components/ChatBox/TaskBox/TypeCardSkeleton.tsx
@@ -26,40 +26,40 @@ export const TypeCardSkeleton = ({
   const { t } = useTranslation();
   return (
     <div>
-      <div className="flex h-auto w-full flex-col gap-2 py-sm pl-2 transition-all duration-300">
-        <div className="relative h-auto w-full overflow-hidden rounded-xl bg-task-surface py-sm backdrop-blur-[5px]">
-          <div className="absolute left-0 top-0 w-full bg-transparent">
+      <div className="gap-2 py-sm px-2 flex h-auto w-full flex-col transition-all duration-300">
+        <div className="rounded-xl bg-task-surface py-sm relative h-auto w-full overflow-hidden backdrop-blur-[5px]">
+          <div className="left-0 top-0 absolute w-full bg-transparent">
             <Progress value={100} className="h-[2px] w-full" />
           </div>
-          <div className="mb-2.5 flex flex-col gap-sm px-sm text-sm font-bold leading-13">
+          <div className="mb-2.5 gap-sm px-sm text-sm font-bold leading-13 flex flex-col">
             <div
-              className={`h-5 w-full rounded-full bg-fill-skeloten-default ${
+              className={`h-5 bg-fill-skeloten-default w-full rounded-full ${
                 !isTakeControl ? 'animate-pulse' : ''
               }`}
             ></div>
             <div
-              className={`h-5 w-1/2 rounded-full bg-fill-skeloten-default ${
+              className={`h-5 bg-fill-skeloten-default w-1/2 rounded-full ${
                 !isTakeControl ? 'animate-pulse' : ''
               }`}
             ></div>
             <div
-              className={`h-5 w-1/2 rounded-full bg-fill-skeloten-default ${
+              className={`h-5 bg-fill-skeloten-default w-1/2 rounded-full ${
                 !isTakeControl ? 'animate-pulse' : ''
               }`}
             ></div>
           </div>
 
-          <div className={`flex items-center justify-between gap-2 px-sm`}>
-            <div className="flex items-center gap-2">
+          <div className={`gap-2 px-sm flex items-center justify-between`}>
+            <div className="gap-2 flex items-center">
               <TaskType type={1} />
             </div>
 
-            <div className="transition-all duration-300 ease-in-out">
-              <div className="flex items-center gap-2 duration-300 animate-in fade-in-0 slide-in-from-right-2">
+            <div className="ease-in-out transition-all duration-300">
+              <div className="gap-2 animate-in fade-in-0 slide-in-from-right-2 flex items-center duration-300">
                 <div className="text-xs font-medium leading-17 text-text-tertiary">
                   {t('layout.tasks')}
                 </div>
-                <Button variant="ghost" size="icon">
+                <Button variant="ghost" size="xs" buttonContent="icon-only">
                   <ChevronDown
                     size={16}
                     className={`rotate-180 transition-transform duration-300`}
@@ -69,13 +69,13 @@ export const TypeCardSkeleton = ({
             </div>
           </div>
           <div className="relative">
-            <div className="overflow-hidden transition-all duration-300 ease-in-out">
-              <div className="mt-sm flex flex-col gap-2 px-2">
+            <div className="ease-in-out overflow-hidden transition-all duration-300">
+              <div className="mt-sm gap-2 px-2 flex flex-col">
                 {[1, 2, 3, 4].map((task: number) => {
                   return (
                     <div
                       key={`taskList-${task}`}
-                      className={`flex cursor-pointer gap-2 rounded-lg border border-solid border-transparent bg-task-fill-default px-sm py-sm transition-all duration-300 ease-in-out animate-in fade-in-0 slide-in-from-left-2`}
+                      className={`gap-2 rounded-lg bg-task-fill-default px-sm py-sm ease-in-out animate-in fade-in-0 slide-in-from-left-2 flex cursor-pointer border border-solid border-transparent transition-all duration-300`}
                     >
                       <div className="pt-0.5">
                         <LoaderCircle
@@ -85,14 +85,14 @@ export const TypeCardSkeleton = ({
                           }`}
                         />
                       </div>
-                      <div className="flex flex-1 flex-col items-start justify-center gap-sm">
+                      <div className="gap-sm flex flex-1 flex-col items-start justify-center">
                         <div
-                          className={`h-5 w-full rounded-full bg-fill-skeloten-default text-sm font-medium leading-13 ${
+                          className={`h-5 bg-fill-skeloten-default text-sm font-medium leading-13 w-full rounded-full ${
                             !isTakeControl ? 'animate-pulse' : ''
                           }`}
                         ></div>
                         <div
-                          className={`h-5 w-1/3 rounded-full bg-fill-skeloten-default text-sm font-medium leading-13 ${
+                          className={`h-5 bg-fill-skeloten-default text-sm font-medium leading-13 w-1/3 rounded-full ${
                             !isTakeControl ? 'animate-pulse' : ''
                           }`}
                         ></div>
diff --git a/src/components/ChatBox/UserQueryGroup.tsx b/src/components/ChatBox/UserQueryGroup.tsx
index 08c106b8d..7b8819dc5 100644
--- a/src/components/ChatBox/UserQueryGroup.tsx
+++ b/src/components/ChatBox/UserQueryGroup.tsx
@@ -14,10 +14,15 @@
 
 import { VanillaChatStore } from '@/store/chatStore';
 import { AgentStep, ChatTaskStatus } from '@/types/constants';
-import { AnimatePresence, motion } from 'framer-motion';
-import { FileText } from 'lucide-react';
-import React, { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
+import { ChevronDown, FileText } from 'lucide-react';
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
 import { AgentMessageCard } from './MessageItem/AgentMessageCard';
 import { NoticeCard } from './MessageItem/NoticeCard';
 import { TaskCompletionCard } from './MessageItem/TaskCompletionCard';
@@ -25,7 +30,51 @@ import { UserMessageCard } from './MessageItem/UserMessageCard';
 import { StreamingTaskList } from './TaskBox/StreamingTaskList';
 import { TaskCard } from './TaskBox/TaskCard';
 import { TypeCardSkeleton } from './TaskBox/TypeCardSkeleton';
-import { AnimatedTokenNumber } from './TokenUtils';
+
+/** Collapsible card that shows a single agent's result (workforce / non–single-agent turns). */
+const AgentResultCard: React.FC<{
+  id: string;
+  agentName?: string;
+  content: string;
+  attaches?: any[];
+  defaultOpen?: boolean;
+}> = ({ id, agentName, content, attaches, defaultOpen = false }) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const label = agentName || 'Agent';
+
+  return (
+    <div className="px-2 overflow-hidden">
+      {/* Header (always visible) */}
+      <button
+        type="button"
+        className="gap-2 rounded-xl px-3 py-2 text-sm font-semibold text-text-heading hover:bg-surface-tertiary active:bg-surface-tertiary focus-visible:ring-border-primary/40 flex w-full items-center text-left transition-colors focus-visible:ring-2 focus-visible:outline-none"
+        onClick={() => setIsOpen((v) => !v)}
+      >
+        <span className="min-w-0 flex-1 truncate">{label}</span>
+        <ChevronDown
+          size={14}
+          aria-hidden
+          className={`text-icon-primary shrink-0 transition-transform duration-200 ${isOpen ? 'rotate-180' : 'rotate-0'}`}
+        />
+      </button>
+
+      {/* Collapsible body */}
+      <div
+        className={`ease-in-out overflow-hidden transition-all duration-200 ${isOpen ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'}`}
+      >
+        <div className="border-border-default px-1 py-1 border-t">
+          <AgentMessageCard
+            id={id}
+            content={content}
+            typewriter={false}
+            onTyping={() => {}}
+            attaches={attaches}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
 
 interface QueryGroup {
   queryId: string;
@@ -51,25 +100,51 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
   onQueryActive,
   index,
 }) => {
-  const { t } = useTranslation();
   const groupRef = useRef<HTMLDivElement>(null);
   const taskBoxRef = useRef<HTMLDivElement>(null);
   const [_isTaskBoxSticky, setIsTaskBoxSticky] = useState(false);
-  const [isCompletionReady, setIsCompletionReady] = useState(false);
+  const [taskCompletionMarkdownReady, setTaskCompletionMarkdownReady] =
+    useState(false);
+  const [taskCompletionDismissed, setTaskCompletionDismissed] = useState(false);
   const chatState = chatStore.getState();
+
+  const completionEndMessage = queryGroup.otherMessages.find(
+    (m: any) => m.step === AgentStep.END && m.content.length > 0
+  );
+
+  useEffect(() => {
+    setTaskCompletionMarkdownReady(false);
+    setTaskCompletionDismissed(false);
+  }, [queryGroup.queryId, completionEndMessage?.id]);
+
+  const onTaskCompletionMarkdownReady = useCallback(() => {
+    setTaskCompletionMarkdownReady(true);
+  }, []);
   const activeTaskId = chatState.activeTaskId;
   const activeTask = activeTaskId ? chatState.tasks[activeTaskId] : null;
 
+  // Subscribe to streaming decompose text separately for efficient updates
+  const streamingDecomposeText = useSyncExternalStore(
+    (callback) => chatStore.subscribe(callback),
+    () => {
+      const state = chatStore.getState();
+      const taskId = state.activeTaskId;
+      if (!taskId || !state.tasks[taskId]) return '';
+      return state.tasks[taskId].streamingDecomposeText || '';
+    }
+  );
+
   // Show task if this query group has a task message OR if it's the most recent user query during splitting
   // During splitting phase (no to_sub_tasks yet), show task for the most recent query only
   // Exclude human-reply scenarios (when user is replying to an activeAsk)
   const isHumanReply =
     queryGroup.userMessage &&
-    activeTask &&
-    (activeTask.activeAsk ||
+    activeTaskId &&
+    chatState.tasks[activeTaskId] &&
+    (chatState.tasks[activeTaskId].activeAsk ||
       // Check if this user message follows an 'ask' message in the message sequence
       (() => {
-        const messages = activeTask.messages;
+        const messages = chatState.tasks[activeTaskId].messages;
         const userMessageIndex = messages.findIndex(
           (m: any) => m.id === queryGroup.userMessage.id
         );
@@ -86,34 +161,31 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
   const isLastUserQuery =
     !queryGroup.taskMessage &&
     !isHumanReply &&
-    activeTask &&
+    activeTaskId &&
+    chatState.tasks[activeTaskId] &&
     queryGroup.userMessage &&
     queryGroup.userMessage.id ===
-      activeTask.messages.filter((m: any) => m.role === 'user').pop()?.id &&
+      chatState.tasks[activeTaskId].messages
+        .filter((m: any) => m.role === 'user')
+        .pop()?.id &&
     // Only show during active phases (not finished)
-    activeTask.status !== ChatTaskStatus.FINISHED;
+    chatState.tasks[activeTaskId].status !== ChatTaskStatus.FINISHED;
 
   // Only show the fallback task box for the newest query while the agent is still splitting work.
   // Simple Q&A sessions set hasWaitComfirm to true, so we should not render an empty task box there.
   // Also, do not show fallback task if we are currently decomposing (streaming text).
-  const streamingDecomposeText = activeTask?.streamingDecomposeText || '';
   const isDecomposing = streamingDecomposeText.length > 0;
   const shouldShowFallbackTask =
     isLastUserQuery &&
-    activeTask &&
-    !activeTask.hasWaitComfirm &&
+    activeTaskId &&
+    !chatState.tasks[activeTaskId].hasWaitComfirm &&
     !isDecomposing;
 
   const task =
-    (queryGroup.taskMessage || shouldShowFallbackTask) && activeTask
-      ? activeTask
+    (queryGroup.taskMessage || shouldShowFallbackTask) && activeTaskId
+      ? chatState.tasks[activeTaskId]
       : null;
 
-  // Reset completion flag when active task or query group changes
-  useEffect(() => {
-    setIsCompletionReady(false);
-  }, [activeTaskId, queryGroup.queryId]);
-
   // Set up intersection observer for this query group
   useEffect(() => {
     if (!groupRef.current) return;
@@ -185,11 +257,15 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
   const isSkeletonPhase =
     task &&
     ((task.status !== ChatTaskStatus.FINISHED &&
+      task.status !== ChatTaskStatus.RUNNING &&
       !anyToSubTasksMessage &&
       !task.hasWaitComfirm &&
       task.messages.length > 0) ||
       (task.isTakeControl && !anyToSubTasksMessage));
 
+  /** Task card visible (user message is sticky alone in this mode). */
+  const taskCardVisible = Boolean(task) && !isSkeletonPhase && !isHumanReply;
+
   return (
     <motion.div
       ref={groupRef}
@@ -202,8 +278,8 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
       }}
       className="relative"
     >
-      {/* User Query (render only if exists) */}
-      {queryGroup.userMessage && (
+      {/* User query: scrolls with content unless workforce task is shown (then sticky user row only). */}
+      {queryGroup.userMessage && !taskCardVisible && (
         <motion.div
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
@@ -218,11 +294,11 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
         </motion.div>
       )}
 
-      {/* Sticky Task Box - Show only when task exists and NOT in skeleton phase */}
-      {task && !isSkeletonPhase && !isHumanReply && (
+      {/* Sticky user message only — task box scrolls away. */}
+      {taskCardVisible && queryGroup.userMessage && (
         <motion.div
           ref={taskBoxRef}
-          className="sticky top-0 z-20"
+          className="top-0 sticky z-20"
           style={{
             position: 'sticky',
             top: 0,
@@ -230,71 +306,67 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
           }}
         >
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{
-              opacity: 1,
-              y: 0,
-            }}
-            transition={{
-              duration: 0.3,
-              delay: 0.1, // Slight delay for sequencing
-            }}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3 }}
+            className="mb-sm"
           >
-            <div
-              style={{
-                transition: 'all 0.3s ease-in-out',
-                transformOrigin: 'top',
-              }}
-            >
-              <TaskCard
-                key={`task-${activeTaskId}-${queryGroup.queryId}`}
-                chatId={chatId}
-                taskInfo={task?.taskInfo || []}
-                taskType={queryGroup.taskMessage?.taskType || 1}
-                taskAssigning={task?.taskAssigning || []}
-                taskRunning={task?.taskRunning || []}
-                progressValue={task?.progressValue || 0}
-                summaryTask={task?.summaryTask || ''}
-                onAddTask={() => {
-                  chatState.setIsTaskEdit(activeTaskId as string, true);
-                  chatState.addTaskInfo();
-                }}
-                onUpdateTask={(taskIndex, content) => {
-                  chatState.setIsTaskEdit(activeTaskId as string, true);
-                  chatState.updateTaskInfo(taskIndex, content);
-                }}
-                onSaveTask={() => {
-                  chatState.saveTaskInfo();
-                }}
-                onDeleteTask={(taskIndex) => {
-                  chatState.setIsTaskEdit(activeTaskId as string, true);
-                  chatState.deleteTaskInfo(taskIndex);
-                }}
-                clickable={true}
-              />
-            </div>
+            <UserMessageCard
+              id={queryGroup.userMessage.id}
+              content={queryGroup.userMessage.content}
+              attaches={queryGroup.userMessage.attaches}
+            />
           </motion.div>
         </motion.div>
       )}
 
-      {/* Live token count – visible only while the task is running */}
-      <AnimatePresence>
-        {task && task.status === ChatTaskStatus.RUNNING && (
-          <motion.div
-            key="live-token-count"
-            initial={{ opacity: 0, y: 4 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -4 }}
-            transition={{ duration: 0.25, ease: 'easeOut' }}
-            className="mt-6 flex items-center justify-end gap-1 px-sm py-1 text-xs text-text-label"
+      {taskCardVisible && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{
+            opacity: 1,
+            y: 0,
+          }}
+          transition={{
+            duration: 0.3,
+            delay: 0.1,
+          }}
+        >
+          <div
+            style={{
+              transition: 'all 0.3s ease-in-out',
+              transformOrigin: 'top',
+            }}
           >
-            <span>{t('chat.current-task')}</span>
-            <span>·</span>
-            <AnimatedTokenNumber value={task.tokens || 0} />
-            <span>{t('chat.tokens')}</span>
-          </motion.div>
-        )}
-      </AnimatePresence>
+            <TaskCard
+              key={`task-${activeTaskId}-${queryGroup.queryId}`}
+              chatId={chatId}
+              taskInfo={task?.taskInfo || []}
+              taskType={queryGroup.taskMessage?.taskType || 1}
+              taskAssigning={task?.taskAssigning || []}
+              taskRunning={task?.taskRunning || []}
+              progressValue={task?.progressValue || 0}
+              summaryTask={task?.summaryTask || ''}
+              onAddTask={() => {
+                chatState.setIsTaskEdit(activeTaskId as string, true);
+                chatState.addTaskInfo();
+              }}
+              onUpdateTask={(taskIndex, content) => {
+                chatState.setIsTaskEdit(activeTaskId as string, true);
+                chatState.updateTaskInfo(taskIndex, content);
+              }}
+              onSaveTask={() => {
+                chatState.saveTaskInfo();
+              }}
+              onDeleteTask={(taskIndex) => {
+                chatState.setIsTaskEdit(activeTaskId as string, true);
+                chatState.deleteTaskInfo(taskIndex);
+              }}
+              clickable={true}
+            />
+          </div>
+        </motion.div>
+      )}
 
       {/* Other Messages */}
       {queryGroup.otherMessages.map((message) => {
@@ -306,7 +378,7 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.2 }}
-                className="flex flex-col gap-4 px-sm"
+                className="gap-4 px-sm flex flex-col"
               >
                 <AgentMessageCard
                   typewriter={
@@ -315,59 +387,45 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
                   }
                   id={message.id}
                   content={message.content}
-                  onTyping={() => {
-                    // Mark completion once the final END message finishes typing
-                    setIsCompletionReady(true);
-                  }}
+                  onTyping={() => {}}
+                  onMarkdownRenderComplete={onTaskCompletionMarkdownReady}
+                  deferredFooter={
+                    message.fileList?.length ? (
+                      <div className="gap-2 flex flex-wrap">
+                        {message.fileList.map(
+                          (file: any, fileIndex: number) => (
+                            <motion.div
+                              key={`file-${message.id}-${file.name}-${fileIndex}`}
+                              initial={{ opacity: 0, scale: 0.9 }}
+                              animate={{ opacity: 1, scale: 1 }}
+                              transition={{ delay: 0.05 }}
+                              onClick={() => {
+                                chatState.setSelectedFile(
+                                  activeTaskId as string,
+                                  file
+                                );
+                                chatState.setActiveWorkspace(
+                                  activeTaskId as string,
+                                  'documentWorkSpace'
+                                );
+                              }}
+                              className="gap-2 rounded-sm bg-message-fill-default px-2 py-1 hover:bg-message-fill-hover flex w-[140px] cursor-pointer items-center transition-colors"
+                            >
+                              <div className="flex flex-col">
+                                <div className="text-body text-sm font-bold text-text-body max-w-[100px] overflow-hidden text-ellipsis whitespace-nowrap">
+                                  {file.name.split('.')[0]}
+                                </div>
+                                <div className="text-xs font-medium leading-29 text-text-body">
+                                  {file.type}
+                                </div>
+                              </div>
+                            </motion.div>
+                          )
+                        )}
+                      </div>
+                    ) : undefined
+                  }
                 />
-                {/* File List */}
-                {message.fileList && (
-                  <div className="flex flex-wrap gap-2">
-                    {message.fileList.map((file: any, fileIndex: number) => (
-                      <motion.div
-                        key={`file-${message.id}-${file.name}-${fileIndex}`}
-                        initial={{ opacity: 0, scale: 0.9 }}
-                        animate={{ opacity: 1, scale: 1 }}
-                        transition={{ delay: 0.3 }}
-                        onClick={() => {
-                          chatState.setSelectedFile(
-                            activeTaskId as string,
-                            file
-                          );
-                          chatState.setActiveWorkspace(
-                            activeTaskId as string,
-                            'documentWorkSpace'
-                          );
-                        }}
-                        className="flex w-[140px] cursor-pointer items-center gap-2 rounded-sm bg-message-fill-default px-2 py-1 transition-colors hover:bg-message-fill-hover"
-                      >
-                        <div className="flex flex-col">
-                          <div className="text-body max-w-[100px] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold text-text-body">
-                            {file.name.split('.')[0]}
-                          </div>
-                          <div className="text-xs font-medium leading-29 text-text-body">
-                            {file.type}
-                          </div>
-                        </div>
-                      </motion.div>
-                    ))}
-                  </div>
-                )}
-                {/* Task Completion Action Card - show only after markdown typing completes */}
-                {task?.status === 'finished' && isCompletionReady && (
-                  <TaskCompletionCard
-                    taskPrompt={queryGroup.userMessage?.content}
-                    onRerun={() => {
-                      // Focus the input for task refinement
-                      const inputElement = document.querySelector(
-                        '[data-chat-input]'
-                      ) as HTMLInputElement;
-                      if (inputElement) {
-                        inputElement.focus();
-                      }
-                    }}
-                  />
-                )}
               </motion.div>
             );
           } else if (message.content === 'skip') {
@@ -377,7 +435,7 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.2 }}
-                className="flex flex-col gap-4 px-sm"
+                className="gap-4 px-sm flex flex-col"
               >
                 <AgentMessageCard
                   key={message.id}
@@ -387,6 +445,24 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
                 />
               </motion.div>
             );
+          } else if (message.step === AgentStep.AGENT_END) {
+            return (
+              <motion.div
+                key={`agent-end-${message.id}`}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.2 }}
+                className="px-sm"
+              >
+                <AgentResultCard
+                  id={message.id}
+                  agentName={message.agent_name}
+                  content={message.content}
+                  attaches={message.attaches}
+                  defaultOpen
+                />
+              </motion.div>
+            );
           } else {
             return (
               <motion.div
@@ -394,7 +470,7 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.2 }}
-                className="flex flex-col gap-4 px-sm"
+                className="gap-4 px-sm flex flex-col"
               >
                 <AgentMessageCard
                   key={message.id}
@@ -417,10 +493,10 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ delay: 0.2 }}
-              className="flex flex-col gap-4 px-sm"
+              className="gap-4 px-sm flex flex-col"
             >
               {message.fileList && (
-                <div className="flex flex-wrap gap-2">
+                <div className="gap-2 flex flex-wrap">
                   {message.fileList.map((file: any, fileIndex: number) => (
                     <motion.div
                       key={`file-${message.id}-${file.name}-${fileIndex}`}
@@ -434,14 +510,14 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
                           'documentWorkSpace'
                         );
                       }}
-                      className="flex w-[120px] cursor-pointer items-center gap-2 rounded-2xl bg-message-fill-default px-2 py-1 transition-colors hover:bg-message-fill-hover"
+                      className="gap-2 rounded-2xl bg-message-fill-default px-2 py-1 hover:bg-message-fill-hover flex w-[120px] cursor-pointer items-center transition-colors"
                     >
                       <FileText
                         size={16}
-                        className="flex-shrink-0 text-icon-primary"
+                        className="text-icon-primary flex-shrink-0"
                       />
                       <div className="flex flex-col">
-                        <div className="text-body max-w-48 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold text-text-body">
+                        <div className="text-body max-w-48 text-sm font-bold text-text-body overflow-hidden text-ellipsis whitespace-nowrap">
                           {file.name.split('.')[0]}
                         </div>
                         <div className="text-xs font-medium leading-29 text-text-body">
@@ -469,7 +545,32 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
         return null;
       })}
 
-      {/* Streaming Decompose Text - rendered separately to avoid flickering */}
+      {task?.status === ChatTaskStatus.FINISHED &&
+        completionEndMessage &&
+        taskCompletionMarkdownReady &&
+        !taskCompletionDismissed && (
+          <motion.div
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.25 }}
+            className="gap-4 px-sm mb-md flex flex-col"
+          >
+            <TaskCompletionCard
+              taskPrompt={queryGroup.userMessage?.content}
+              onRerun={() => {
+                const inputElement = document.querySelector(
+                  '[data-chat-input]'
+                ) as HTMLInputElement;
+                if (inputElement) {
+                  inputElement.focus();
+                }
+              }}
+              onDismiss={() => setTaskCompletionDismissed(true)}
+            />
+          </motion.div>
+        )}
+
+      {/* Streaming Decompose Text */}
       {isLastUserQuery && streamingDecomposeText && (
         <StreamingTaskList streamingText={streamingDecomposeText} />
       )}
diff --git a/src/components/ChatBox/index.tsx b/src/components/ChatBox/index.tsx
index dedbede29..0123c2551 100644
--- a/src/components/ChatBox/index.tsx
+++ b/src/components/ChatBox/index.tsx
@@ -19,46 +19,96 @@ import {
   proxyFetchDelete,
   proxyFetchGet,
 } from '@/api/http';
+import { AddWorker } from '@/components/AddWorker';
+import { Button } from '@/components/ui/button';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import FoldedPanel from '@/components/Workforce/FoldedPanel';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
 import { generateUniqueId, replayActiveTask } from '@/lib';
+import { cn } from '@/lib/utils';
 import { proxyUpdateTriggerExecution } from '@/service/triggerApi';
 import { useAuthStore } from '@/store/authStore';
-import type { VanillaChatStore } from '@/store/chatStore';
+import type { ChatStore } from '@/store/chatStore';
+import { usePageTabStore } from '@/store/pageTabStore';
 import { ExecutionStatus } from '@/types';
 import { AgentStep, ChatTaskStatus } from '@/types/constants';
-import { TriangleAlert } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Maximize2, Plus, TriangleAlert, X } from 'lucide-react';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
 import BottomBox from './BottomBox';
+import { CHAT_TIMELINE_DEFAULT_COLLAPSED, ChatTimeline } from './ChatTimeline';
 import { HeaderBox } from './HeaderBox';
 import { ProjectChatContainer } from './ProjectChatContainer';
 
-const getChatStoreTotalTokens = (chatStore: VanillaChatStore): number => {
-  const chatState = chatStore.getState();
-  return Object.values(chatState.tasks).reduce(
-    (total, task) =>
-      total + (typeof task.tokens === 'number' ? task.tokens : 0),
-    0
-  );
+/** Minimum scroll padding under messages (matches previous ~8rem floor). */
+const CHAT_SCROLL_BOTTOM_MIN_PX = 128;
+/** Small gap between last message and BottomBox top. */
+const CHAT_SCROLL_BOTTOM_GAP_PX = 8;
+/** Below this ChatBox width, the timeline uses a header dropdown instead of the left rail. */
+const CHAT_TIMELINE_BREAKPOINT_PX = 600;
+/** Fixed width for the folded workforce rail (matches useInitialWorkforceFoldedLayout target). */
+const WORKFORCE_FOLDED_RAIL_CLASS = 'w-[360px]';
+
+export type ChatBoxProps = {
+  /** When the full-screen workforce overlay is open; pauses folded panel agent sync. */
+  workforceExpandedOverlayOpen?: boolean;
+  onToggleWorkforceExpandedOverlay?: () => void;
 };
 
-export default function ChatBox(): JSX.Element {
+export default function ChatBox({
+  workforceExpandedOverlayOpen = false,
+  onToggleWorkforceExpandedOverlay,
+}: ChatBoxProps): JSX.Element {
   const [message, setMessage] = useState<string>('');
+  const [chatTimelineCollapsed, setChatTimelineCollapsed] = useState(
+    CHAT_TIMELINE_DEFAULT_COLLAPSED
+  );
+  const [timelineDropdownOpen, setTimelineDropdownOpen] = useState(false);
+  const chatBoxContainerRef = useRef<HTMLDivElement>(null);
+  const [chatBoxWidth, setChatBoxWidth] = useState<number | null>(null);
 
   //Get Chatstore for the active project's task
   const { chatStore, projectStore } = useChatStoreAdapter();
 
   const { t } = useTranslation();
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const textareaRef = useRef<HTMLDivElement>(null);
+  const workspaceChatFocusRequestId = usePageTabStore(
+    (s) => s.workspaceChatFocusRequestId
+  );
+  const setScrollToQueryId = usePageTabStore((s) => s.setScrollToQueryId);
+  const activeWorkspaceTab = usePageTabStore((s) => s.activeWorkspaceTab);
+  const workforceRailCollapsed = usePageTabStore(
+    (s) => s.workforceRailCollapsed
+  );
+  const toggleWorkforceRailCollapsed = usePageTabStore(
+    (s) => s.toggleWorkforceRailCollapsed
+  );
+  const setHasAgentFiles = usePageTabStore((s) => s.setHasAgentFiles);
+  const markTabAsUnviewed = usePageTabStore((s) => s.markTabAsUnviewed);
+  const [addWorkerDialogOpen, setAddWorkerDialogOpen] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [hasModel, setHasModel] = useState(false);
   const [isConfigLoaded, setIsConfigLoaded] = useState(false);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const [_hasSearchKey, setHasSearchKey] = useState<any>(false);
+  const bottomBoxOverlayRef = useRef<HTMLDivElement>(null);
+  const [scrollBottomInsetPx, setScrollBottomInsetPx] = useState(
+    CHAT_SCROLL_BOTTOM_MIN_PX
+  );
   const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const { modelType } = useAuthStore();
   const [useCloudModelInDev, setUseCloudModelInDev] = useState(false);
+  const location = useLocation();
+
   useEffect(() => {
     // Only show warning message, don't block functionality
     if (
@@ -70,27 +120,21 @@ export default function ChatBox(): JSX.Element {
       setUseCloudModelInDev(false);
     }
   }, [modelType]);
-
-  const [searchParams, setSearchParams] = useSearchParams();
-  const share_token = searchParams.get('share_token');
-  const skill_prompt = searchParams.get('skill_prompt');
-
-  const handleSendRef = useRef<
-    ((messageStr?: string, taskId?: string) => Promise<void>) | null
-  >(null);
-
-  const navigate = useNavigate();
-  const location = useLocation();
+  useEffect(() => {
+    if (workspaceChatFocusRequestId === 0) return;
+    const focusTimer = window.setTimeout(() => {
+      textareaRef.current?.focus();
+    }, 180);
+    return () => clearTimeout(focusTimer);
+  }, [workspaceChatFocusRequestId]);
 
   // Shared function to check model configuration
   const checkModelConfig = useCallback(async () => {
     try {
       if (modelType === 'cloud') {
-        // For cloud model, check if API key exists
         const res = await proxyFetchGet('/api/v1/user/key');
         setHasModel(!!res.value);
       } else if (modelType === 'local' || modelType === 'custom') {
-        // For local/custom model, check if provider exists
         const res = await proxyFetchGet('/api/v1/providers', { prefer: true });
         const providerList = res.items || [];
         setHasModel(providerList.length > 0);
@@ -107,25 +151,15 @@ export default function ChatBox(): JSX.Element {
 
   // Check model config on mount and when modelType changes
   useEffect(() => {
-    proxyFetchGet('/api/v1/configs')
-      .then((configsRes) => {
-        const configs = Array.isArray(configsRes) ? configsRes : [];
-        const _hasApiKey = configs.find(
-          (item) => item.config_name === 'GOOGLE_API_KEY'
-        );
-        const _hasApiId = configs.find(
-          (item) => item.config_name === 'SEARCH_ENGINE_ID'
-        );
-        if (_hasApiKey && _hasApiId) setHasSearchKey(true);
-      })
-      .catch((err) => console.error('Failed to fetch configs:', err));
+    proxyFetchGet('/api/configs').catch((err) =>
+      console.error('Failed to fetch configs:', err)
+    );
 
     checkModelConfig();
   }, [modelType, checkModelConfig]);
 
   // Re-check model config when returning from settings page
   useEffect(() => {
-    // Check when location changes (user navigates)
     if (location.pathname === '/') {
       checkModelConfig();
     }
@@ -142,6 +176,15 @@ export default function ChatBox(): JSX.Element {
       window.removeEventListener('focus', handleFocus);
     };
   }, [checkModelConfig]);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const share_token = searchParams.get('share_token');
+  const skill_prompt = searchParams.get('skill_prompt');
+
+  const handleSendRef = useRef<
+    ((messageStr?: string, taskId?: string) => Promise<void>) | null
+  >(null);
+
+  const navigate = useNavigate();
 
   // Task time tracking
   const [taskTime, setTaskTime] = useState(
@@ -149,14 +192,11 @@ export default function ChatBox(): JSX.Element {
       '00:00'
   );
 
-  const [_hasSubTask, setHasSubTask] = useState(false);
   const [loading, setLoading] = useState(false);
   const [isReplayLoading, setIsReplayLoading] = useState(false);
   const [isPauseResumeLoading, setIsPauseResumeLoading] = useState(false);
-  const [projectTotalTokens, setProjectTotalTokens] = useState(0);
 
   const activeTaskId = chatStore?.activeTaskId;
-  const activeTaskMessages = chatStore?.tasks[activeTaskId as string]?.messages;
   const activeAsk = chatStore?.tasks[activeTaskId as string]?.activeAsk;
 
   useEffect(() => {
@@ -169,16 +209,6 @@ export default function ChatBox(): JSX.Element {
     return () => clearInterval(interval);
   }, [chatStore?.activeTaskId, chatStore]);
 
-  useEffect(() => {
-    if (!chatStore) return;
-    const _hasSubTask = chatStore.tasks[
-      chatStore.activeTaskId as string
-    ]?.messages?.find((message) => message.step === AgentStep.TO_SUB_TASKS)
-      ? true
-      : false;
-    setHasSubTask(_hasSubTask);
-  }, [chatStore, activeTaskId, activeTaskMessages]);
-
   useEffect(() => {
     if (!chatStore) return;
     const _activeAsk = activeAsk;
@@ -196,55 +226,73 @@ export default function ChatBox(): JSX.Element {
     return () => {
       if (timer) clearTimeout(timer);
     };
-  }, [activeAsk, message, chatStore, activeTaskId]);
+  }, [activeAsk, chatStore, activeTaskId]);
 
   const getAllChatStoresMemoized = useMemo(() => {
     if (!projectStore.activeProjectId) return [];
     return projectStore.getAllChatStores(projectStore.activeProjectId);
   }, [projectStore]);
 
-  useEffect(() => {
-    if (!projectStore.activeProjectId) {
-      setProjectTotalTokens(0);
-      return;
+  const allTaskEntries = useMemo(() => {
+    const pid = projectStore.activeProjectId;
+    if (!pid) return [];
+    const stores = projectStore.getAllChatStores(pid);
+    const entries: Array<{
+      chatId: string;
+      taskId: string;
+      task: ChatStore['tasks'][string];
+      firstUserMessageId: string | null;
+    }> = [];
+    for (const { chatId, chatStore: cs } of stores) {
+      const state = cs.getState();
+      const tid = state.activeTaskId;
+      if (!tid || !state.tasks[tid]) continue;
+      const task = state.tasks[tid];
+      const hasUserMessages = task.messages.some(
+        (m) => m.role === 'user' && m.content
+      );
+      if (!hasUserMessages) continue;
+      const firstUser = task.messages.find((m) => m.role === 'user');
+      entries.push({
+        chatId,
+        taskId: tid,
+        task,
+        firstUserMessageId: firstUser?.id ?? null,
+      });
     }
+    return entries;
+    // `chatStore` triggers recalculation when the active chat store changes (adapter subscription);
+    // the body reads all project stores via `getAllChatStores`, so it must re-run on any chat update.
+  }, [projectStore, chatStore]);
+
+  const isNarrowTimelineLayout = useMemo(
+    () => chatBoxWidth !== null && chatBoxWidth < CHAT_TIMELINE_BREAKPOINT_PX,
+    [chatBoxWidth]
+  );
 
-    const chatTotals = new Map<string, number>();
-    let nextProjectTotalTokens = 0;
-
-    getAllChatStoresMemoized.forEach(({ chatId, chatStore }) => {
-      const chatTotalTokens = getChatStoreTotalTokens(chatStore);
-      chatTotals.set(chatId, chatTotalTokens);
-      nextProjectTotalTokens += chatTotalTokens;
+  useLayoutEffect(() => {
+    const el = chatBoxContainerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width;
+      if (typeof w === 'number' && Number.isFinite(w)) setChatBoxWidth(w);
     });
+    ro.observe(el);
+    setChatBoxWidth(el.getBoundingClientRect().width);
+    return () => ro.disconnect();
+  }, []);
 
-    setProjectTotalTokens(nextProjectTotalTokens);
-
-    const unsubscribers = getAllChatStoresMemoized.map(
-      ({ chatId, chatStore }) =>
-        chatStore.subscribe((state) => {
-          const nextChatTotalTokens = Object.values(state.tasks).reduce(
-            (total, task) =>
-              total + (typeof task.tokens === 'number' ? task.tokens : 0),
-            0
-          );
-          const previousChatTotalTokens = chatTotals.get(chatId) ?? 0;
-
-          if (nextChatTotalTokens === previousChatTotalTokens) {
-            return;
-          }
-
-          chatTotals.set(chatId, nextChatTotalTokens);
-          nextProjectTotalTokens +=
-            nextChatTotalTokens - previousChatTotalTokens;
-          setProjectTotalTokens(nextProjectTotalTokens);
-        })
-    );
+  useEffect(() => {
+    if (!isNarrowTimelineLayout) setTimelineDropdownOpen(false);
+  }, [isNarrowTimelineLayout]);
 
-    return () => {
-      unsubscribers.forEach((unsubscribe) => unsubscribe());
-    };
-  }, [projectStore.activeProjectId, getAllChatStoresMemoized]);
+  const handleScrollToQueryForTimeline = useCallback(
+    (id: string) => {
+      setScrollToQueryId(id);
+      if (isNarrowTimelineLayout) setTimelineDropdownOpen(false);
+    },
+    [setScrollToQueryId, isNarrowTimelineLayout]
+  );
 
   // Check if any chat store in the project has messages
   const hasAnyMessages = useMemo(() => {
@@ -272,10 +320,47 @@ export default function ChatBox(): JSX.Element {
     });
   }, [chatStore, getAllChatStoresMemoized]);
 
+  /** Persisted fold only applies once the project has chat content; welcome state keeps the rail expanded. */
+  const workforceRailEffectiveCollapsed =
+    workforceRailCollapsed && hasAnyMessages;
+
+  useEffect(() => {
+    if (!hasAnyMessages && workforceExpandedOverlayOpen) {
+      onToggleWorkforceExpandedOverlay?.();
+    }
+  }, [
+    hasAnyMessages,
+    workforceExpandedOverlayOpen,
+    onToggleWorkforceExpandedOverlay,
+  ]);
+
+  useLayoutEffect(() => {
+    if (!chatStore?.activeTaskId || !hasAnyMessages) return;
+
+    const el = bottomBoxOverlayRef.current;
+    if (!el) return;
+
+    const measure = () => {
+      const raw = el.getBoundingClientRect().height;
+      setScrollBottomInsetPx(
+        Math.max(
+          CHAT_SCROLL_BOTTOM_MIN_PX,
+          Math.round(raw) + CHAT_SCROLL_BOTTOM_GAP_PX
+        )
+      );
+    };
+
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [chatStore?.activeTaskId, hasAnyMessages]);
+
   const isTaskBusy = useMemo(() => {
     if (!chatStore?.activeTaskId || !chatStore.tasks[chatStore.activeTaskId])
       return false;
     const task = chatStore.tasks[chatStore.activeTaskId];
+
     return (
       // running or paused
       task.status === ChatTaskStatus.RUNNING ||
@@ -285,7 +370,9 @@ export default function ChatBox(): JSX.Element {
         (m) => m.step === AgentStep.TO_SUB_TASKS && !m.isConfirm
       ) ||
       // skeleton/computing phase
-      (!task.messages.find((m) => m.step === AgentStep.TO_SUB_TASKS) &&
+      ((task.status as string) !== ChatTaskStatus.FINISHED &&
+        (task.status as string) !== ChatTaskStatus.RUNNING &&
+        !task.messages.find((m) => m.step === AgentStep.TO_SUB_TASKS) &&
         !task.hasWaitComfirm &&
         task.messages.length > 0) ||
       task.isTakeControl
@@ -303,7 +390,7 @@ export default function ChatBox(): JSX.Element {
 
     if (isTaskBusy) return true;
 
-    // Standard checks - check model
+    // Standard checks - model required
     if (!hasModel) return true;
     if (useCloudModelInDev) return true;
     if (task.isContextExceeded) return true;
@@ -337,7 +424,7 @@ export default function ChatBox(): JSX.Element {
       let taskId: string = token.split('__')[1];
       chatStore.create(taskId, 'share');
       chatStore.setHasMessages(taskId, true);
-      const res = await proxyFetchGet(`/api/v1/chat/share/info/${_token}`);
+      const res = await proxyFetchGet(`/api/chat/share/info/${_token}`);
       if (res?.question) {
         chatStore.addMessages(taskId, {
           id: generateUniqueId(),
@@ -375,11 +462,6 @@ export default function ChatBox(): JSX.Element {
     }
   }, [skill_prompt, searchParams, setSearchParams]);
 
-  useEffect(() => {
-    if (!chatStore) return;
-    console.log('ChatStore Data: ', chatStore);
-  }, [chatStore]);
-
   const scrollToBottom = useCallback(() => {
     if (scrollContainerRef.current) {
       setTimeout(() => {
@@ -429,13 +511,15 @@ export default function ChatBox(): JSX.Element {
     const _taskId = taskId || chatStore.activeTaskId;
     if (message.trim() === '' && !messageStr) return;
 
-    // Check model configuration
     if (!hasModel) {
       toast.error('Please select a model first.');
       navigate('/history?tab=agents');
       return;
     }
-    const tempMessageContent = messageStr || message;
+
+    const rawMessageContent = messageStr || message;
+    let tempMessageContent = rawMessageContent;
+    const displayContent = tempMessageContent;
 
     if (executionId && projectStore.activeProjectId) {
       const project = projectStore.getProjectById(projectStore.activeProjectId);
@@ -455,7 +539,34 @@ export default function ChatBox(): JSX.Element {
     // Multi-turn support: Check if task is running or planning (splitting/confirm)
     const task = chatStore.tasks[_taskId];
     const requiresHumanReply = Boolean(task?.activeAsk);
+    const isTaskBusy =
+      (task.status === ChatTaskStatus.RUNNING && task.hasMessages) ||
+      task.status === ChatTaskStatus.PAUSE ||
+      // splitting phase: has to_sub_tasks not confirmed OR skeleton computing
+      task.messages.some(
+        (m) => m.step === AgentStep.TO_SUB_TASKS && !m.isConfirm
+      ) ||
+      (!task.messages.find((m) => m.step === AgentStep.TO_SUB_TASKS) &&
+        !task.hasWaitComfirm &&
+        task.messages.length > 0 &&
+        task.status !== ChatTaskStatus.FINISHED) ||
+      task.isTakeControl ||
+      // explicit confirm wait while task is pending but card not confirmed yet
+      (!!task.messages.find(
+        (m) => m.step === AgentStep.TO_SUB_TASKS && !m.isConfirm
+      ) &&
+        task.status === ChatTaskStatus.PENDING);
     const _isTaskInProgress = ['running', 'pause'].includes(task?.status || '');
+    const isReplayChatStore = task?.type === 'replay';
+    if (!requiresHumanReply && isTaskBusy && !isReplayChatStore) {
+      toast.error(
+        'Current task is in progress. Please wait for it to finish before sending a new request.',
+        {
+          closeButton: true,
+        }
+      );
+      return;
+    }
 
     if (textareaRef.current) textareaRef.current.style.height = '60px';
     try {
@@ -463,7 +574,7 @@ export default function ChatBox(): JSX.Element {
         chatStore.addMessages(_taskId, {
           id: generateUniqueId(),
           role: 'user',
-          content: tempMessageContent,
+          content: displayContent,
           attaches:
             JSON.parse(JSON.stringify(chatStore.tasks[_taskId]?.attaches)) ||
             [],
@@ -590,19 +701,20 @@ export default function ChatBox(): JSX.Element {
             //Generate nextId in case new chatStore is created to sync with the backend beforehand
             const nextTaskId = generateUniqueId();
             chatStore.setNextTaskId(nextTaskId);
-            chatStore.setNextExecutionId(taskId as string, executionId);
+            chatStore.setNextExecutionId(_taskId as string, executionId);
 
             // Use improve endpoint (POST /chat/{id}) - {id} is project_id
             fetchPost(`/chat/${projectStore.activeProjectId}`, {
               question: tempMessageContent,
               task_id: nextTaskId,
               attaches: improveAttaches,
+              target: undefined,
             });
             chatStore.setIsPending(_taskId, true);
             chatStore.addMessages(_taskId, {
               id: generateUniqueId(),
               role: 'user',
-              content: tempMessageContent,
+              content: displayContent,
               attaches: attachesForThisTurn,
             });
             chatStore.setAttaches(_taskId, []);
@@ -645,67 +757,7 @@ export default function ChatBox(): JSX.Element {
     }
   };
 
-  useEffect(() => {
-    if (!chatStore?.activeTaskId) return;
-    const interval = setInterval(() => {
-      if (chatStore.activeTaskId) {
-        setTaskTime(chatStore.getFormattedTaskTime(chatStore.activeTaskId));
-      }
-    }, 500);
-    return () => clearInterval(interval);
-  }, [chatStore?.activeTaskId, chatStore]);
-
-  useEffect(() => {
-    if (!chatStore) return;
-    const _hasSubTask = chatStore.tasks[
-      chatStore.activeTaskId as string
-    ]?.messages?.find((message) => message.step === AgentStep.TO_SUB_TASKS)
-      ? true
-      : false;
-    setHasSubTask(_hasSubTask);
-  }, [chatStore, activeTaskId, activeTaskMessages]);
-
-  useEffect(() => {
-    if (!chatStore) return;
-    const _activeAsk = activeAsk;
-    let timer: NodeJS.Timeout;
-    if (_activeAsk && _activeAsk !== '') {
-      const _taskId = chatStore.activeTaskId as string;
-      timer = setTimeout(() => {
-        if (handleSendRef.current) {
-          handleSendRef.current('skip', _taskId);
-        }
-      }, 30000); // 30 seconds
-      return () => clearTimeout(timer); // clear previous timer
-    }
-    // if activeAsk is empty, also clear timer
-    return () => {
-      if (timer) clearTimeout(timer);
-    };
-  }, [activeAsk, message, chatStore, activeTaskId]);
-
-  const activeAskValue =
-    chatStore?.tasks[chatStore.activeTaskId as string]?.activeAsk;
-
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-    if (activeAskValue && activeAskValue !== '') {
-      const _taskId = chatStore.activeTaskId as string;
-      timer = setTimeout(() => {
-        handleSend('skip', _taskId);
-      }, 30000); // 30 seconds
-      return () => clearTimeout(timer); // clear previous timer
-    }
-    // if activeAsk is empty, also clear timer
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [
-    activeAskValue,
-    message, // depend on message
-    chatStore,
-    handleSend,
-  ]);
+  handleSendRef.current = handleSend;
 
   // Reactive queuedMessages for the active project
   const queuedMessages = useMemo(() => {
@@ -720,11 +772,48 @@ export default function ChatBox(): JSX.Element {
   }, [projectStore]);
 
   useEffect(() => {
-    // Wait for config to be loaded before handling share token
-    if (share_token && isConfigLoaded) {
+    if (share_token) {
       handleSendShare(share_token);
     }
-  }, [share_token, isConfigLoaded, handleSendShare]);
+  }, [share_token, handleSendShare]);
+
+  const handleFileUpload = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (!files || files.length === 0) return;
+
+      const activeProjectId = projectStore.activeProjectId;
+      if (!activeProjectId) return;
+
+      for (const file of Array.from(files)) {
+        try {
+          const reader = new FileReader();
+          reader.onload = async () => {
+            if (reader.result && window.ipcRenderer) {
+              await window.ipcRenderer.invoke('save-file-to-agent-folder', {
+                projectId: activeProjectId,
+                fileName: file.name,
+                content: reader.result,
+              });
+              setHasAgentFiles(true);
+              if (activeWorkspaceTab !== 'inbox') {
+                markTabAsUnviewed('inbox', activeProjectId);
+              }
+            }
+          };
+          reader.onerror = () => {
+            console.error('Error reading file:', file.name, reader.error);
+          };
+          reader.readAsArrayBuffer(file);
+        } catch (error) {
+          console.error('Error uploading file:', error);
+        }
+      }
+
+      e.target.value = '';
+    },
+    [projectStore, setHasAgentFiles, markTabAsUnviewed, activeWorkspaceTab]
+  );
 
   if (!chatStore) {
     return <div>Loading...</div>;
@@ -906,7 +995,7 @@ export default function ChatBox(): JSX.Element {
     const history_id = projectStore.getHistoryId(projectId);
     if (history_id) {
       try {
-        await proxyFetchDelete(`/api/v1/chat/history/${history_id}`);
+        await proxyFetchDelete(`/api/chat/history/${history_id}`);
       } catch (error) {
         console.error(
           `Failed to delete chat history (ID: ${history_id}) for project ${projectId}:`,
@@ -947,8 +1036,10 @@ export default function ChatBox(): JSX.Element {
 
     // Determine if we're in the "splitting in progress" phase (skeleton visible)
     // Only show splitting if there's NO to_sub_tasks message yet (not even confirmed)
+    // Skip splitting phase when task is already RUNNING (e.g. direct @agent mode)
     const isSkeletonPhase =
-      (task.status !== 'finished' &&
+      (task.status !== ChatTaskStatus.FINISHED &&
+        task.status !== ChatTaskStatus.RUNNING &&
         !anyToSubTasksMessage &&
         !task.hasWaitComfirm &&
         task.messages.length > 0) ||
@@ -973,12 +1064,17 @@ export default function ChatBox(): JSX.Element {
     }
 
     // Check task status
-    if (
-      task.status === ChatTaskStatus.RUNNING ||
-      task.status === ChatTaskStatus.PAUSE
-    ) {
+    if (task.status === ChatTaskStatus.PAUSE) {
       return 'running';
     }
+    if (task.status === ChatTaskStatus.RUNNING) {
+      const hasSubTasks = task.messages.some(
+        (m) => m.step === AgentStep.TO_SUB_TASKS
+      );
+      const isDirectMode =
+        !hasSubTasks && (task.taskAssigning?.length ?? 0) > 0;
+      return isDirectMode ? 'input' : 'running';
+    }
 
     if (task.status === 'finished' && task.type !== '') {
       return 'finished';
@@ -1027,189 +1123,356 @@ export default function ChatBox(): JSX.Element {
     }
   };
 
-  if (!chatStore) {
-    return <div>Loading...</div>;
-  }
+  const workforcePanelKey = chatStore.activeTaskId ?? '';
+
+  const chatColumn = (
+    <>
+      {/* Header: hidden on new-project welcome state; shown once there is chat content */}
+      {chatStore.activeTaskId && hasAnyMessages && (
+        <HeaderBox
+          totalTokens={chatStore.tasks[chatStore.activeTaskId]?.tokens || 0}
+          status={chatStore.tasks[chatStore.activeTaskId]?.status}
+          replayLoading={isReplayLoading}
+          onReplay={handleReplay}
+          narrowTimelineLayout={isNarrowTimelineLayout}
+          timelineDropdownOpen={timelineDropdownOpen}
+          onTimelineDropdownOpenChange={setTimelineDropdownOpen}
+          timelineDropdownContent={
+            isNarrowTimelineLayout ? (
+              <ChatTimeline
+                collapsed={false}
+                entries={allTaskEntries}
+                activeTaskId={chatStore.activeTaskId}
+                setScrollToQueryId={handleScrollToQueryForTimeline}
+                title={t('layout.chat-history-title', {
+                  defaultValue: 'Chat history',
+                })}
+                emptyLabel={t('layout.no-tasks', {
+                  defaultValue: 'No tasks',
+                })}
+              />
+            ) : null
+          }
+          chatTimelineCollapsed={chatTimelineCollapsed}
+          onToggleChatTimeline={() => setChatTimelineCollapsed((c) => !c)}
+          workforceRailCollapsed={
+            activeWorkspaceTab === 'workforce'
+              ? workforceRailEffectiveCollapsed
+              : undefined
+          }
+          onToggleWorkforceRail={
+            activeWorkspaceTab === 'workforce'
+              ? toggleWorkforceRailCollapsed
+              : undefined
+          }
+        />
+      )}
+
+      {/* Main: chat timeline rail + scroll (scrollbar on panel edge) + BottomBox overlay when chatting */}
+      <div className="min-h-0 relative flex flex-1 flex-col overflow-hidden">
+        <div className="min-h-0 flex flex-1 flex-row overflow-hidden">
+          {!isNarrowTimelineLayout && (
+            <div
+              id="chat-timeline-panel"
+              className={cn(
+                'min-h-0 ease-out flex shrink-0 flex-col overflow-hidden transition-[width] duration-200',
+                chatTimelineCollapsed ? 'w-0' : 'w-[200px]'
+              )}
+              aria-hidden={chatTimelineCollapsed}
+            >
+              <ChatTimeline
+                collapsed={chatTimelineCollapsed}
+                entries={allTaskEntries}
+                activeTaskId={chatStore.activeTaskId}
+                setScrollToQueryId={setScrollToQueryId}
+                title={t('layout.chat-history-title', {
+                  defaultValue: 'Chat history',
+                })}
+                emptyLabel={t('layout.no-tasks', {
+                  defaultValue: 'No tasks',
+                })}
+              />
+            </div>
+          )}
+          <div className="min-h-0 min-w-0 relative flex flex-1 flex-col overflow-hidden">
+            <div
+              ref={scrollContainerRef}
+              className="scrollbar-always-visible min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto"
+            >
+              {hasAnyMessages ? (
+                <ProjectChatContainer
+                  scrollContainerRef={scrollContainerRef}
+                  scrollBottomInsetPx={scrollBottomInsetPx}
+                  onSkip={handleSkip}
+                  isPauseResumeLoading={isPauseResumeLoading}
+                />
+              ) : (
+                <div className="pl-4 pr-2 mx-auto flex min-h-full w-full max-w-[600px] flex-col">
+                  <div className="gap-1 pb-4 flex flex-1 flex-col items-center justify-end">
+                    <div className="text-heading-base font-bold text-text-heading text-center">
+                      {t('layout.welcome-to-eigent')}
+                    </div>
+                  </div>
 
-  return (
-    <div className="h-full w-full flex-none items-center justify-center overflow-hidden rounded-2xl border-solid border-border-tertiary bg-surface-secondary">
-      {/* Unified ChatBox Structure */}
-      <div className="relative flex h-full w-full flex-col overflow-hidden">
-        {/* Header Box - Always visible */}
-        {chatStore.activeTaskId && (
-          <HeaderBox
-            totalTokens={projectTotalTokens}
-            status={chatStore.tasks[chatStore.activeTaskId]?.status}
-            replayLoading={isReplayLoading}
-            onReplay={handleReplay}
-          />
-        )}
-
-        {/* Main Content Area - Flex 1 to take remaining space */}
-        <div className="relative flex flex-1 flex-col overflow-hidden">
-          {/* Project Chat Container - Show when has messages (absolute, full height) */}
-          <div
-            className={`absolute inset-0 flex h-full flex-col transition-all duration-300 ease-in-out ${
-              hasAnyMessages
-                ? 'pointer-events-auto translate-y-0 opacity-100'
-                : 'pointer-events-none -translate-y-4 opacity-0'
-            }`}
-          >
-            <ProjectChatContainer
-              onSkip={handleSkip}
-              isPauseResumeLoading={isPauseResumeLoading}
-            />
+                  {chatStore.activeTaskId && (
+                    <BottomBox
+                      state="input"
+                      queuedMessages={queuedMessages}
+                      onRemoveQueuedMessage={(id) => handleRemoveTaskQueue(id)}
+                      inputProps={{
+                        value: message,
+                        onChange: setMessage,
+                        onSend: handleSend,
+                        files:
+                          chatStore.tasks[
+                            chatStore.activeTaskId
+                          ]?.attaches?.map((f) => ({
+                            fileName: f.fileName,
+                            filePath: f.filePath,
+                          })) || [],
+                        onFilesChange: (files) =>
+                          chatStore.setAttaches(
+                            chatStore.activeTaskId as string,
+                            files as any
+                          ),
+                        onAddFile: handleFileSelect,
+                        disabled: isInputDisabled,
+                        textareaRef: textareaRef,
+                        allowDragDrop: true,
+                        useCloudModelInDev: useCloudModelInDev,
+                      }}
+                    />
+                  )}
+
+                  <div className="mt-3 gap-2 flex h-[210px] flex-1 items-start justify-center">
+                    {!hasModel ? (
+                      <div className="gap-2 flex items-center">
+                        <div
+                          onClick={() => {
+                            navigate('/history?tab=agents');
+                          }}
+                          className="gap-2 rounded-md bg-surface-warning px-sm py-xs flex cursor-pointer items-center"
+                        >
+                          <TriangleAlert
+                            size={20}
+                            className="text-icon-warning"
+                          />
+                          <span className="text-xs font-medium text-text-warning flex-1 leading-[20px]">
+                            {t('layout.please-select-model')}
+                          </span>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="mr-2 gap-2 flex flex-col items-center">
+                        {[
+                          {
+                            label: t('layout.it-ticket-creation'),
+                            message: t('layout.it-ticket-creation-message'),
+                          },
+                          {
+                            label: t('layout.bank-transfer-csv-analysis'),
+                            message: t(
+                              'layout.bank-transfer-csv-analysis-message'
+                            ),
+                          },
+                          {
+                            label: t('layout.find-duplicate-files'),
+                            message: t('layout.find-duplicate-files-message'),
+                          },
+                        ].map(({ label, message }) => (
+                          <div
+                            key={label}
+                            className="rounded-md bg-surface-tertiary px-sm py-xs text-xs font-medium text-button-tertiery-text-default cursor-pointer leading-none opacity-70 transition-all duration-300 hover:opacity-100"
+                            onClick={() => {
+                              setMessage(message);
+                            }}
+                          >
+                            <span>{label}</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {chatStore.activeTaskId && hasAnyMessages && (
+              <div
+                ref={bottomBoxOverlayRef}
+                className="inset-x-0 bottom-0 pointer-events-none absolute z-30 flex justify-center"
+              >
+                <div className="px-sm pointer-events-auto w-full max-w-[600px]">
+                  <BottomBox
+                    state={getBottomBoxState()}
+                    queuedMessages={queuedMessages}
+                    onRemoveQueuedMessage={(id) => handleRemoveTaskQueue(id)}
+                    subtitle={
+                      getBottomBoxState() === 'confirm'
+                        ? (() => {
+                            const messages =
+                              chatStore.tasks[chatStore.activeTaskId]
+                                ?.messages || [];
+                            const lastUserMessage = messages
+                              .slice()
+                              .reverse()
+                              .find((msg) => msg.role === 'user');
+                            return (
+                              lastUserMessage?.content ||
+                              chatStore.tasks[chatStore.activeTaskId]
+                                ?.summaryTask
+                            );
+                          })()
+                        : chatStore.tasks[chatStore.activeTaskId]?.summaryTask
+                    }
+                    onStartTask={() => handleConfirmTask()}
+                    onEdit={handleEditQuery}
+                    taskTime={taskTime}
+                    taskStatus={chatStore.tasks[chatStore.activeTaskId]?.status}
+                    onPauseResume={handlePauseResume}
+                    pauseResumeLoading={isPauseResumeLoading}
+                    loading={loading}
+                    inputProps={{
+                      value: message,
+                      onChange: setMessage,
+                      onSend: handleSend,
+                      files:
+                        chatStore.tasks[chatStore.activeTaskId]?.attaches?.map(
+                          (f) => ({
+                            fileName: f.fileName,
+                            filePath: f.filePath,
+                          })
+                        ) || [],
+                      onFilesChange: (files) =>
+                        chatStore.setAttaches(
+                          chatStore.activeTaskId as string,
+                          files as any
+                        ),
+                      onAddFile: handleFileSelect,
+                      placeholder: t('chat.follow-up-placeholder'),
+                      disabled: isInputDisabled,
+                      textareaRef: textareaRef,
+                      allowDragDrop: true,
+                      useCloudModelInDev: useCloudModelInDev,
+                    }}
+                  />
+                </div>
+              </div>
+            )}
           </div>
+        </div>
+      </div>
+    </>
+  );
 
-          {/* Init State Container - Welcome + BottomBox + Suggestions (vertically centered) */}
+  return (
+    <div
+      ref={chatBoxContainerRef}
+      className="rounded-2xl border-border-tertiary bg-surface-secondary h-full w-full flex-none items-center justify-center overflow-hidden border-solid"
+    >
+      {activeWorkspaceTab === 'workforce' ? (
+        <div className="min-h-0 min-w-0 flex h-full w-full flex-1 flex-row overflow-hidden">
+          <div className="min-h-0 min-w-0 relative flex flex-1 flex-col overflow-hidden">
+            {chatColumn}
+          </div>
           <div
-            className={`flex flex-1 flex-col transition-all duration-300 ease-in-out ${
-              hasAnyMessages
-                ? 'pointer-events-none absolute inset-0 opacity-0'
-                : 'pointer-events-auto opacity-100'
-            }`}
+            id="workforce-folded-rail"
+            className={cn(
+              'min-h-0 ease-out flex shrink-0 flex-col overflow-hidden transition-[width] duration-200',
+              workforceRailEffectiveCollapsed
+                ? 'w-0'
+                : WORKFORCE_FOLDED_RAIL_CLASS
+            )}
+            aria-hidden={workforceRailEffectiveCollapsed}
           >
-            {/* Welcome Message - Top area, flex-1 to push content down */}
-            <div className="flex flex-1 flex-col items-center justify-end gap-1 pb-4">
-              <div className="text-center text-body-lg font-bold text-text-heading">
-                {t('layout.welcome-to-eigent')}
+            <div className="bg-surface-secondary gap-2 p-2 relative z-50 flex w-full shrink-0 items-center justify-between">
+              <div className="min-w-0 gap-3 flex flex-1 items-center overflow-hidden">
+                <span className="text-text-heading px-1 text-body-md font-semibold shrink-0">
+                  {t('layout.aiWorkforce')}
+                </span>
               </div>
-            </div>
-
-            {/* Bottom Box - Center (init state only) */}
-            {chatStore.activeTaskId && (
-              <BottomBox
-                state="input"
-                queuedMessages={queuedMessages}
-                onRemoveQueuedMessage={(id) => handleRemoveTaskQueue(id)}
-                inputProps={{
-                  value: message,
-                  onChange: setMessage,
-                  onSend: handleSend,
-                  files:
-                    chatStore.tasks[chatStore.activeTaskId]?.attaches?.map(
-                      (f) => ({
-                        fileName: f.fileName,
-                        filePath: f.filePath,
-                      })
-                    ) || [],
-                  onFilesChange: (files) =>
-                    chatStore.setAttaches(
-                      chatStore.activeTaskId as string,
-                      files as any
-                    ),
-                  onAddFile: handleFileSelect,
-                  placeholder: t('chat.ask-placeholder'),
-                  disabled: isInputDisabled,
-                  textareaRef: textareaRef,
-                  allowDragDrop: true,
-                  useCloudModelInDev: useCloudModelInDev,
-                }}
-              />
-            )}
-
-            {/* Suggestion Area - Bottom area, flex-1 to push content up */}
-            <div className="mt-3 flex h-[210px] flex-1 items-start justify-center gap-2">
-              {!hasModel ? (
-                <div className="flex items-center gap-2">
-                  <div
-                    onClick={() => {
-                      navigate('/history?tab=agents');
-                    }}
-                    className="flex cursor-pointer items-center gap-2 rounded-md bg-surface-warning px-sm py-xs"
+              <div className="gap-1 flex shrink-0 items-center">
+                <Button
+                  variant="primary"
+                  size="sm"
+                  className="rounded-lg items-center justify-center"
+                  onClick={() => setAddWorkerDialogOpen(true)}
+                >
+                  <Plus />
+                  {t('triggers.add')}
+                </Button>
+                <input
+                  type="file"
+                  ref={fileInputRef}
+                  onChange={handleFileUpload}
+                  multiple
+                  className="hidden"
+                />
+                <AddWorker
+                  isOpen={addWorkerDialogOpen}
+                  onOpenChange={setAddWorkerDialogOpen}
+                />
+                {hasAnyMessages && (
+                  <TooltipSimple
+                    content={
+                      workforceExpandedOverlayOpen
+                        ? t('layout.close')
+                        : t('layout.expand-workforce', {
+                            defaultValue: 'Expand workforce',
+                          })
+                    }
+                    delayDuration={300}
+                    side="bottom"
                   >
-                    <TriangleAlert size={20} className="text-icon-warning" />
-                    <span className="flex-1 text-xs font-medium leading-[20px] text-text-warning">
-                      {t('layout.please-select-model')}
-                    </span>
-                  </div>
-                </div>
-              ) : null}
-              {hasModel && (
-                <div className="mr-2 flex flex-col items-center gap-2">
-                  {[
-                    {
-                      label: t('layout.it-ticket-creation'),
-                      message: t('layout.it-ticket-creation-message'),
-                    },
-                    {
-                      label: t('layout.bank-transfer-csv-analysis'),
-                      message: t('layout.bank-transfer-csv-analysis-message'),
-                    },
-                    {
-                      label: t('layout.find-duplicate-files'),
-                      message: t('layout.find-duplicate-files-message'),
-                    },
-                  ].map(({ label, message }) => (
-                    <div
-                      key={label}
-                      className="cursor-pointer rounded-md bg-surface-tertiary px-sm py-xs text-xs font-medium leading-none text-button-tertiery-text-default opacity-70 transition-all duration-300 hover:opacity-100"
-                      onClick={() => {
-                        setMessage(message);
-                      }}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      buttonContent="icon-only"
+                      buttonRadius="lg"
+                      className="shrink-0"
+                      onClick={() => onToggleWorkforceExpandedOverlay?.()}
+                      aria-pressed={workforceExpandedOverlayOpen}
+                      aria-label={
+                        workforceExpandedOverlayOpen
+                          ? t('layout.close')
+                          : t('layout.expand-workforce', {
+                              defaultValue: 'Expand workforce',
+                            })
+                      }
                     >
-                      <span>{label}</span>
-                    </div>
-                  ))}
-                </div>
-              )}
+                      {workforceExpandedOverlayOpen ? (
+                        <X className="h-4 w-4" />
+                      ) : (
+                        <Maximize2 className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </TooltipSimple>
+                )}
+              </div>
+            </div>
+            <div className="min-h-0 min-w-0 w-full flex-1">
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={`${workforcePanelKey}-folded`}
+                  initial={{ opacity: 0, filter: 'blur(4px)' }}
+                  animate={{ opacity: 1, filter: 'blur(0px)' }}
+                  exit={{ opacity: 0, filter: 'blur(4px)' }}
+                  transition={{ duration: 0.2 }}
+                  className="min-w-0 h-full w-full"
+                >
+                  <FoldedPanel
+                    pauseAgentWorkspaceSync={workforceExpandedOverlayOpen}
+                  />
+                </motion.div>
+              </AnimatePresence>
             </div>
           </div>
         </div>
-
-        {/* Bottom Box - Show when has messages */}
-        {chatStore.activeTaskId && hasAnyMessages && (
-          <BottomBox
-            state={hasAnyMessages ? getBottomBoxState() : 'input'}
-            queuedMessages={queuedMessages}
-            onRemoveQueuedMessage={(id) => handleRemoveTaskQueue(id)}
-            subtitle={
-              hasAnyMessages && getBottomBoxState() === 'confirm'
-                ? (() => {
-                    const messages =
-                      chatStore.tasks[chatStore.activeTaskId]?.messages || [];
-                    const lastUserMessage = messages
-                      .slice()
-                      .reverse()
-                      .find((msg) => msg.role === 'user');
-                    return (
-                      lastUserMessage?.content ||
-                      chatStore.tasks[chatStore.activeTaskId]?.summaryTask
-                    );
-                  })()
-                : chatStore.tasks[chatStore.activeTaskId]?.summaryTask
-            }
-            onStartTask={() => handleConfirmTask()}
-            onEdit={handleEditQuery}
-            taskTime={taskTime}
-            taskStatus={chatStore.tasks[chatStore.activeTaskId]?.status}
-            onPauseResume={handlePauseResume}
-            pauseResumeLoading={isPauseResumeLoading}
-            loading={loading}
-            inputProps={{
-              value: message,
-              onChange: setMessage,
-              onSend: handleSend,
-              files:
-                chatStore.tasks[chatStore.activeTaskId]?.attaches?.map((f) => ({
-                  fileName: f.fileName,
-                  filePath: f.filePath,
-                })) || [],
-              onFilesChange: (files) =>
-                chatStore.setAttaches(
-                  chatStore.activeTaskId as string,
-                  files as any
-                ),
-              onAddFile: handleFileSelect,
-              placeholder: t('chat.ask-placeholder'),
-              disabled: isInputDisabled,
-              textareaRef: textareaRef,
-              allowDragDrop: hasAnyMessages,
-              useCloudModelInDev: useCloudModelInDev,
-            }}
-          />
-        )}
-      </div>
+      ) : (
+        <div className="relative flex h-full w-full flex-col overflow-hidden">
+          {chatColumn}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/Folder/ZoomControls.tsx b/src/components/Folder/ZoomControls.tsx
index 2787b41ff..2801e02cc 100644
--- a/src/components/Folder/ZoomControls.tsx
+++ b/src/components/Folder/ZoomControls.tsx
@@ -30,10 +30,11 @@ export const ZoomControls = ({
   onZoomReset,
 }: ZoomControlsProps) => {
   return (
-    <div className="group absolute left-1/2 top-0 z-10 -translate-x-1/2">
-      <div className="bg-surface-hover-subtle/90 border-border-subtle-strong/50 flex translate-y-[calc(-100%-8px)] items-center gap-1 rounded-full border px-3 py-1.5 shadow-lg backdrop-blur-xl transition-transform duration-300 ease-out group-hover:translate-y-[20px]">
+    <div className="group top-0 absolute left-1/2 z-10 -translate-x-1/2">
+      <div className="bg-surface-hover-subtle/90 border-border-subtle-strong/50 gap-1 px-3 py-1.5 shadow-lg backdrop-blur-xl ease-out flex translate-y-[calc(-100%-8px)] items-center rounded-full border transition-transform duration-300 group-hover:translate-y-[20px]">
         <Button
-          size="icon"
+          size="xs"
+          buttonContent="icon-only"
           variant="ghost"
           onClick={onZoomOut}
           title="Zoom Out"
@@ -41,11 +42,12 @@ export const ZoomControls = ({
         >
           <ZoomOut className="h-3.5 w-3.5" />
         </Button>
-        <span className="min-w-[2.5rem] text-center text-xs font-medium tabular-nums text-text-primary">
+        <span className="text-xs font-medium text-text-primary min-w-[2.5rem] text-center tabular-nums">
           {zoom}%
         </span>
         <Button
-          size="icon"
+          size="xs"
+          buttonContent="icon-only"
           variant="ghost"
           onClick={onZoomIn}
           title="Zoom In"
@@ -53,9 +55,10 @@ export const ZoomControls = ({
         >
           <ZoomIn className="h-3.5 w-3.5" />
         </Button>
-        <div className="mx-0.5 h-4 w-px bg-border-secondary" />
+        <div className="mx-0.5 h-4 bg-border-secondary w-px" />
         <Button
-          size="icon"
+          size="xs"
+          buttonContent="icon-only"
           variant="ghost"
           onClick={onZoomReset}
           title="Reset Zoom"
diff --git a/src/components/Folder/index.tsx b/src/components/Folder/index.tsx
index c2d32771a..899dc2ca0 100644
--- a/src/components/Folder/index.tsx
+++ b/src/components/Folder/index.tsx
@@ -12,6 +12,8 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
+import cursorIcon from '@/assets/icon/cursor.svg';
+import vsCodeIcon from '@/assets/icon/vs-code.svg';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -22,15 +24,15 @@ import {
 import {
   ChevronDown,
   ChevronRight,
-  ChevronsLeft,
   CodeXml,
   Download,
   FileText,
   Folder as FolderIcon,
+  FolderOpen,
   Search,
   SquareTerminal,
 } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import FolderComponent from './FolderComponent';
 
 import { proxyFetchGet } from '@/api/http';
@@ -98,6 +100,12 @@ function getFileType(file: FileTypeTarget) {
   return extFromNameOrPath;
 }
 
+function workingFolderBasename(path: string) {
+  const normalized = path.replace(/\\/g, '/').replace(/\/$/, '');
+  const parts = normalized.split('/').filter(Boolean);
+  return parts[parts.length - 1] || normalized;
+}
+
 function isImageFile(file: FileTypeTarget) {
   return IMAGE_EXTENSIONS.includes(getFileType(file));
 }
@@ -119,6 +127,25 @@ interface FileTreeNode {
   isRemote?: boolean;
 }
 
+function filterFileTree(node: FileTreeNode, query: string): FileTreeNode {
+  const q = query.trim().toLowerCase();
+  if (!q || !node.children?.length) {
+    return node;
+  }
+  const filteredChildren: FileTreeNode[] = [];
+  for (const child of node.children) {
+    if (child.isFolder) {
+      const filtered = filterFileTree(child, query);
+      if (filtered.children?.length) {
+        filteredChildren.push(filtered);
+      }
+    } else if (child.name.toLowerCase().includes(q)) {
+      filteredChildren.push(child);
+    }
+  }
+  return { ...node, children: filteredChildren };
+}
+
 interface FileInfo {
   name: string;
   path: string;
@@ -175,14 +202,14 @@ export const FileTree: React.FC<FileTreeProps> = ({
                   onSelectFile(fileInfo);
                 }
               }}
-              className={`text-primary flex w-full items-center justify-start gap-2 rounded-xl bg-fill-fill-transparent p-2 text-left text-sm backdrop-blur-lg transition-colors hover:bg-fill-fill-transparent-active ${
+              className={`text-primary gap-2 rounded-xl bg-fill-fill-transparent p-2 text-sm backdrop-blur-lg hover:bg-fill-fill-transparent-active flex w-full items-center justify-start text-left transition-colors ${
                 selectedFile?.path === child.path
                   ? 'bg-fill-fill-transparent-active'
                   : ''
               }`}
             >
               {child.isFolder ? (
-                <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
+                <span className="h-4 w-4 flex flex-shrink-0 items-center justify-center">
                   {isExpanded ? (
                     <ChevronDown className="h-4 w-4" />
                   ) : (
@@ -191,13 +218,13 @@ export const FileTree: React.FC<FileTreeProps> = ({
                 </span>
               ) : (
                 <span
-                  className="flex h-4 w-4 flex-shrink-0 items-center justify-center"
+                  className="h-4 w-4 flex flex-shrink-0 items-center justify-center"
                   aria-hidden
                 />
               )}
 
               {child.isFolder ? (
-                <FolderIcon className="h-5 w-5 flex-shrink-0 text-yellow-600" />
+                <FolderIcon className="h-5 w-5 text-yellow-600 flex-shrink-0" />
               ) : child.icon ? (
                 <child.icon className="h-5 w-5 flex-shrink-0" />
               ) : (
@@ -205,7 +232,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
               )}
 
               <span
-                className={`truncate text-[13px] leading-5 ${
+                className={`leading-5 truncate text-[13px] ${
                   child.isFolder ? 'font-semibold' : 'font-medium'
                 }`}
               >
@@ -231,17 +258,21 @@ export const FileTree: React.FC<FileTreeProps> = ({
   );
 };
 
+type DownloadFileResult =
+  | { success: true; path: string }
+  | { success: false; error: string };
+
 function downloadByBrowser(url: string) {
   window.ipcRenderer
     .invoke('download-file', url)
-    .then((result) => {
+    .then((result: DownloadFileResult) => {
       if (result.success) {
         console.log('download-file success:', result.path);
       } else {
         console.error('download-file error:', result.error);
       }
     })
-    .catch((error) => {
+    .catch((error: unknown) => {
       console.error('download-file error:', error);
     });
 }
@@ -254,7 +285,10 @@ export default function Folder({ data: _data }: { data?: Agent }) {
   const [selectedFile, setSelectedFile] = useState<FileInfo | null>(null);
   const [loading, setLoading] = useState(false);
   const [isShowSourceCode, setIsShowSourceCode] = useState(false);
-  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [fileSearchQuery, setFileSearchQuery] = useState('');
+  const [workingFolderPath, setWorkingFolderPath] = useState<string | null>(
+    null
+  );
   const [fileTree, setFileTree] = useState<FileTreeNode>({
     name: 'root',
     path: '',
@@ -277,6 +311,11 @@ export default function Folder({ data: _data }: { data?: Agent }) {
   ]);
   const hasFetchedRemote = useRef(false);
 
+  const filteredFileTree = useMemo(
+    () => filterFileTree(fileTree, fileSearchQuery),
+    [fileTree, fileSearchQuery]
+  );
+
   const selectedFileChange = (file: FileInfo, isShowSourceCode?: boolean) => {
     if (file.type === 'zip') {
       // if file is remote, don't call reveal-in-folder
@@ -304,7 +343,7 @@ export default function Folder({ data: _data }: { data?: Agent }) {
           chatStore.setSelectedFile(chatStore.activeTaskId as string, file);
           setLoading(false);
         })
-        .catch((error) => {
+        .catch((error: unknown) => {
           console.error('read-file-dataurl error:', error);
           setLoading(false);
         });
@@ -322,12 +361,12 @@ export default function Folder({ data: _data }: { data?: Agent }) {
     // all other files call open-file interface, the backend handles download and parsing
     window.ipcRenderer
       .invoke('open-file', file.type, file.path, isShowSourceCode)
-      .then((res) => {
+      .then((res: string) => {
         setSelectedFile({ ...file, content: res });
         chatStore.setSelectedFile(chatStore.activeTaskId as string, file);
         setLoading(false);
       })
-      .catch((error) => {
+      .catch((error: unknown) => {
         console.error('open-file error:', error);
         setLoading(false);
       });
@@ -413,6 +452,33 @@ export default function Folder({ data: _data }: { data?: Agent }) {
     setExpandedFolders(new Set());
   }, [chatStore?.activeTaskId]);
 
+  useEffect(() => {
+    let cancelled = false;
+    const loadPath = async () => {
+      if (!authStore.email || !projectStore.activeProjectId) {
+        setWorkingFolderPath(null);
+        return;
+      }
+      if (typeof window.electronAPI?.getProjectFolderPath !== 'function') {
+        setWorkingFolderPath(null);
+        return;
+      }
+      try {
+        const folderPath = await window.electronAPI.getProjectFolderPath(
+          authStore.email,
+          projectStore.activeProjectId as string
+        );
+        if (!cancelled) setWorkingFolderPath(folderPath || null);
+      } catch {
+        if (!cancelled) setWorkingFolderPath(null);
+      }
+    };
+    void loadPath();
+    return () => {
+      cancelled = true;
+    };
+  }, [authStore.email, projectStore.activeProjectId]);
+
   useEffect(() => {
     if (!chatStore) return;
     const setFileList = async () => {
@@ -523,273 +589,258 @@ export default function Folder({ data: _data }: { data?: Agent }) {
     }
   };
 
+  const folderHeaderTitle = workingFolderPath
+    ? workingFolderBasename(workingFolderPath)
+    : t('chat.agent-folder');
+  const canOpenInExternalEditor =
+    window.electronAPI?.getProjectFolderPath && window.electronAPI?.openInIDE;
+
   return (
-    <div className="flex h-full w-full overflow-hidden">
-      {/* fileList */}
-      <div
-        className={`${
-          isCollapsed ? 'w-16' : 'w-64'
-        } flex flex-shrink-0 flex-col border-[0px] border-r !border-solid border-border-subtle-strong border-r-border-subtle transition-all duration-300 ease-in-out`}
-      >
-        {/* head */}
-        <div
-          className={`flex-shrink-0 border-b border-border-subtle py-2 ${
-            isCollapsed ? 'px-2' : 'pl-4 pr-2'
-          }`}
-        >
-          <div className="flex items-center justify-between">
-            {!isCollapsed && (
-              <div className="flex items-center gap-2">
-                <span className="text-body-base text-primary whitespace-nowrap font-bold">
-                  {t('chat.agent-folder')}
-                </span>
-              </div>
-            )}
-            <div className="flex items-center">
-              {!isCollapsed &&
-                window.electronAPI?.getProjectFolderPath &&
-                window.electronAPI?.openInIDE && (
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        title={t('chat.open-in-ide')}
-                      >
-                        <SquareTerminal className="h-5 w-5 text-icon-secondary" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent
-                      align="end"
-                      className="z-50 border-dropdown-border bg-dropdown-bg"
-                    >
-                      <DropdownMenuItem
-                        onClick={() => handleOpenInIDE('vscode')}
-                        className="cursor-pointer bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover"
-                      >
-                        {t('chat.open-in-vscode')}
-                      </DropdownMenuItem>
-                      <DropdownMenuItem
-                        onClick={() => handleOpenInIDE('cursor')}
-                        className="cursor-pointer bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover"
-                      >
-                        {t('chat.open-in-cursor')}
-                      </DropdownMenuItem>
-                      <DropdownMenuItem
-                        onClick={() => handleOpenInIDE('system')}
-                        className="cursor-pointer bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover"
-                      >
-                        {t('chat.open-in-file-manager')}
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                )}
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => setIsCollapsed(!isCollapsed)}
-                className={`${
-                  isCollapsed ? 'w-full' : ''
-                } flex items-center justify-center`}
-                title={isCollapsed ? t('chat.open') : t('chat.close')}
-              >
-                <ChevronsLeft
-                  className={`h-6 w-6 text-icon-secondary ${
-                    isCollapsed ? 'rotate-180' : ''
-                  } transition-transform ease-in-out`}
-                />
-              </Button>
-            </div>
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      {/* header */}
+      <div className="border-border-tertiary gap-2 p-2 flex w-full shrink-0 items-center border-x-0 border-t-0 border-b border-solid">
+        <div className="min-w-0 gap-1 flex max-w-[min(20rem,45%)] items-center">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            buttonContent="icon-only"
+            disabled
+            className="shrink-0 cursor-not-allowed opacity-60"
+            aria-label={t('chat.choose-agent-work-folder', {
+              defaultValue: 'Choose folder for agent',
+            })}
+            title={t('chat.choose-agent-work-folder-placeholder', {
+              defaultValue: 'Choose a folder on your computer (coming soon)',
+            })}
+          >
+            <FolderOpen className="h-3.5 w-3.5 shrink-0" aria-hidden />
+          </Button>
+          <span
+            className="text-text-heading text-body-sm min-w-0 font-semibold truncate leading-none"
+            title={workingFolderPath ?? undefined}
+          >
+            {folderHeaderTitle}
+          </span>
+        </div>
+        <div className="min-w-0 gap-2 ml-auto flex items-center">
+          <div className="h-7 w-32 max-w-xs rounded-lg relative min-w-[10rem] shrink-0">
+            <Search className="text-primary left-2 h-3.5 w-3.5 pointer-events-none absolute top-1/2 -translate-y-1/2" />
+            <input
+              type="text"
+              value={fileSearchQuery}
+              onChange={(e) => setFileSearchQuery(e.target.value)}
+              placeholder={t('chat.search')}
+              className="border-border-subtle focus:ring-text-link h-7 rounded-lg py-0 pl-7 pr-2 text-sm w-full border border-solid leading-none focus:ring-2 focus:ring-offset-0 focus:outline-none"
+              aria-label={t('chat.search')}
+            />
           </div>
+          {canOpenInExternalEditor && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  className="h-7 gap-1 rounded-lg px-2 py-0 [&_svg]:size-3.5 shrink-0 items-center justify-center"
+                >
+                  <SquareTerminal className="shrink-0" />
+                  {t('chat.open-in-ide')}
+                  <ChevronDown className="shrink-0 opacity-80" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                className="border-dropdown-border bg-dropdown-bg z-50"
+              >
+                <DropdownMenuItem
+                  onClick={() => handleOpenInIDE('system')}
+                  className="bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover cursor-pointer"
+                >
+                  <FolderIcon className="size-4 shrink-0" aria-hidden />
+                  {t('chat.open-in-file-manager')}
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => handleOpenInIDE('cursor')}
+                  className="bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover cursor-pointer"
+                >
+                  <img
+                    src={cursorIcon}
+                    alt=""
+                    className="size-4 shrink-0"
+                    aria-hidden
+                  />
+                  {t('chat.open-in-cursor')}
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => handleOpenInIDE('vscode')}
+                  className="bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover cursor-pointer"
+                >
+                  <img
+                    src={vsCodeIcon}
+                    alt=""
+                    className="size-4 shrink-0"
+                    aria-hidden
+                  />
+                  {t('chat.open-in-vscode')}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
         </div>
+      </div>
 
-        {/* Search Input*/}
-        {!isCollapsed && (
-          <div className="flex-shrink-0 border-b border-border-subtle px-2">
-            <div className="relative">
-              <Search className="text-primary absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform" />
-              <input
-                type="text"
-                placeholder={t('chat.search')}
-                className="w-full rounded-md border border-solid border-border-subtle py-2 pl-9 pr-2 text-sm focus:outline-none focus:ring-2 focus:ring-text-link"
-              />
+      <div className="min-h-0 flex flex-1 overflow-hidden">
+        {/* sidebar */}
+        <div className="border-border-tertiary w-64 flex h-full flex-shrink-0 flex-col border-y-0 border-r border-l-0 border-solid">
+          <div className="scrollbar-always-visible min-h-0 flex-1 overflow-y-auto">
+            <div className="h-10 text-text-primary px-3 py-2 font-bold text-body-sm">
+              {t('chat.files')}
             </div>
-          </div>
-        )}
-
-        {/* fileList */}
-        <div className="min-h-0 flex-1 overflow-y-auto">
-          {!isCollapsed ? (
             <div className="p-2">
-              <div className="mb-2">
-                <div className="text-primary px-2 py-1 text-[10px] font-bold leading-4">
-                  {t('chat.files')}
-                </div>
-                <FileTree
-                  node={fileTree}
-                  selectedFile={selectedFile}
-                  expandedFolders={expandedFolders}
-                  onToggleFolder={toggleFolder}
-                  onSelectFile={(file) =>
-                    selectedFileChange(file, isShowSourceCode)
-                  }
-                  isShowSourceCode={isShowSourceCode}
-                />
-              </div>
-            </div>
-          ) : (
-            // Display simplified file icons when collapsed
-            <div className="space-y-2 p-2">
-              {fileGroups.map((group) =>
-                group.files.map((file) => (
-                  <button
-                    key={file.path}
-                    onClick={() => selectedFileChange(file, isShowSourceCode)}
-                    className={`flex w-full items-center justify-center rounded-md p-2 transition-colors hover:bg-fill-fill-primary-hover ${
-                      selectedFile?.name === file.name
-                        ? 'bg-surface-information text-text-information'
-                        : 'text-text-secondary'
-                    }`}
-                    title={file.name}
-                  >
-                    {file.icon ? (
-                      <file.icon className="h-4 w-4" />
-                    ) : (
-                      <FileText className="h-4 w-4" />
-                    )}
-                  </button>
-                ))
-              )}
+              <FileTree
+                node={filteredFileTree}
+                selectedFile={selectedFile}
+                expandedFolders={expandedFolders}
+                onToggleFolder={toggleFolder}
+                onSelectFile={(file) =>
+                  selectedFileChange(file, isShowSourceCode)
+                }
+                isShowSourceCode={isShowSourceCode}
+              />
             </div>
-          )}
+          </div>
         </div>
-      </div>
 
-      {/* content */}
-      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
-        {/* head */}
-        {selectedFile && (
-          <div className="flex-shrink-0 border-b border-border-subtle px-4 py-2">
-            <div className="flex h-[30px] items-center justify-between gap-2">
-              <div
-                onClick={() => {
-                  // if file is remote, don't call reveal-in-folder
-                  if (selectedFile.isRemote) {
-                    downloadByBrowser(selectedFile.path);
-                    return;
-                  }
-                  window.ipcRenderer.invoke(
-                    'reveal-in-folder',
-                    selectedFile.path
-                  );
-                }}
-                className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 overflow-hidden"
-              >
-                <span className="text-primary block overflow-hidden text-ellipsis whitespace-nowrap text-[15px] font-medium leading-[22px]">
-                  {selectedFile.name}
-                </span>
-                <Button size="icon" variant="ghost">
-                  <Download className="h-4 w-4 text-icon-secondary" />
+        {/* content */}
+        <div className="min-w-0 flex flex-1 flex-col overflow-hidden">
+          {/* head */}
+          {selectedFile && (
+            <div className="px-3 py-2 flex-shrink-0">
+              <div className="gap-2 flex items-center justify-between">
+                <div
+                  onClick={() => {
+                    // if file is remote, don't call reveal-in-folder
+                    if (selectedFile.isRemote) {
+                      downloadByBrowser(selectedFile.path);
+                      return;
+                    }
+                    window.ipcRenderer.invoke(
+                      'reveal-in-folder',
+                      selectedFile.path
+                    );
+                  }}
+                  className="min-w-0 gap-2 flex flex-1 cursor-pointer items-center overflow-hidden"
+                >
+                  <span className="text-text-primary font-bold text-body-sm block overflow-hidden text-ellipsis whitespace-nowrap">
+                    {selectedFile.name}
+                  </span>
+                  <Button size="icon" variant="ghost">
+                    <Download className="h-4 w-4 text-icon-secondary" />
+                  </Button>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="flex-shrink-0"
+                  onClick={() => isShowSourceCodeChange()}
+                >
+                  <CodeXml className="h-4 w-4 text-icon-secondary" />
                 </Button>
               </div>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="flex-shrink-0"
-                onClick={() => isShowSourceCodeChange()}
-              >
-                <CodeXml className="h-4 w-4 text-icon-secondary" />
-              </Button>
             </div>
-          </div>
-        )}
+          )}
 
-        {/* content */}
-        <div
-          className={`flex min-h-0 flex-1 flex-col ${selectedFile?.type === 'html' && !isShowSourceCode ? 'overflow-hidden' : 'scrollbar overflow-y-auto'}`}
-        >
+          {/* content */}
           <div
-            className={`flex min-h-full flex-col ${selectedFile?.type === 'html' && !isShowSourceCode ? '' : 'p-6'} file-viewer-content`}
+            className={`min-h-0 flex flex-1 flex-col ${
+              selectedFile?.type === 'html' && !isShowSourceCode
+                ? 'overflow-hidden'
+                : 'scrollbar-always-visible overflow-y-auto'
+            }`}
           >
-            {selectedFile ? (
-              !loading ? (
-                selectedFile.type === 'md' && !isShowSourceCode ? (
-                  <div className="prose prose-sm max-w-none">
-                    <MarkDown
-                      content={selectedFile.content || ''}
-                      enableTypewriter={false}
-                      contentBasePath={
-                        selectedFile.isRemote
-                          ? null
-                          : getDirPath(selectedFile.path)
-                      }
+            <div
+              className={`flex min-h-full flex-col ${selectedFile?.type === 'html' && !isShowSourceCode ? '' : 'pl-4 py-2'} file-viewer-content`}
+            >
+              {selectedFile ? (
+                !loading ? (
+                  selectedFile.type === 'md' && !isShowSourceCode ? (
+                    <div className="prose prose-sm max-w-none">
+                      <MarkDown
+                        content={selectedFile.content || ''}
+                        enableTypewriter={false}
+                        contentBasePath={
+                          selectedFile.isRemote
+                            ? null
+                            : getDirPath(selectedFile.path)
+                        }
+                      />
+                    </div>
+                  ) : selectedFile.type === 'pdf' ? (
+                    <iframe
+                      src={selectedFile.content as string}
+                      className="h-full w-full border-0"
+                      title={selectedFile.name}
                     />
-                  </div>
-                ) : selectedFile.type === 'pdf' ? (
-                  <iframe
-                    src={selectedFile.content as string}
-                    className="h-full w-full border-0"
-                    title={selectedFile.name}
-                  />
-                ) : ['csv', 'doc', 'docx', 'pptx', 'xlsx'].includes(
-                    selectedFile.type
-                  ) ? (
-                  <FolderComponent selectedFile={selectedFile} />
-                ) : selectedFile.type === 'html' ? (
-                  isShowSourceCode ? (
-                    <>{selectedFile.content}</>
+                  ) : ['csv', 'doc', 'docx', 'pptx', 'xlsx'].includes(
+                      selectedFile.type
+                    ) ? (
+                    <FolderComponent selectedFile={selectedFile} />
+                  ) : selectedFile.type === 'html' ? (
+                    isShowSourceCode ? (
+                      <>{selectedFile.content}</>
+                    ) : (
+                      <HtmlRenderer
+                        selectedFile={selectedFile}
+                        projectFiles={fileGroups[0]?.files || []}
+                      />
+                    )
+                  ) : selectedFile.type === 'zip' ? (
+                    <div className="text-text-secondary flex h-full items-center justify-center">
+                      <div className="text-center">
+                        <FileText className="mb-4 h-12 w-12 text-text-tertiary mx-auto" />
+                        <p className="text-sm">
+                          {t('folder.zip-file-is-not-supported-yet')}
+                        </p>
+                      </div>
+                    </div>
+                  ) : isAudioFile(selectedFile) ? (
+                    <div className="flex h-full items-center justify-center">
+                      <AudioLoader selectedFile={selectedFile} />
+                    </div>
+                  ) : isVideoFile(selectedFile) ? (
+                    <div className="flex h-full items-center justify-center">
+                      <VideoLoader selectedFile={selectedFile} />
+                    </div>
+                  ) : isImageFile(selectedFile) ? (
+                    <div className="flex h-full items-center justify-center">
+                      <ImageLoader selectedFile={selectedFile} />
+                    </div>
                   ) : (
-                    <HtmlRenderer
-                      selectedFile={selectedFile}
-                      projectFiles={fileGroups[0]?.files || []}
-                    />
+                    <pre className="font-mono text-sm text-text-primary overflow-auto break-words whitespace-pre-wrap">
+                      {selectedFile.content}
+                    </pre>
                   )
-                ) : selectedFile.type === 'zip' ? (
-                  <div className="flex h-full items-center justify-center text-text-secondary">
+                ) : (
+                  <div className="flex h-full items-center justify-center">
                     <div className="text-center">
-                      <FileText className="mx-auto mb-4 h-12 w-12 text-text-tertiary" />
-                      <p className="text-sm">
-                        {t('folder.zip-file-is-not-supported-yet')}
+                      <div className="mb-4 h-8 w-8 animate-spin border-blue-600 mx-auto rounded-full border-b-2"></div>
+                      <p className="text-sm text-text-secondary">
+                        {t('chat.loading')}
                       </p>
                     </div>
                   </div>
-                ) : isAudioFile(selectedFile) ? (
-                  <div className="flex h-full items-center justify-center">
-                    <AudioLoader selectedFile={selectedFile} />
-                  </div>
-                ) : isVideoFile(selectedFile) ? (
-                  <div className="flex h-full items-center justify-center">
-                    <VideoLoader selectedFile={selectedFile} />
-                  </div>
-                ) : isImageFile(selectedFile) ? (
-                  <div className="flex h-full items-center justify-center">
-                    <ImageLoader selectedFile={selectedFile} />
-                  </div>
-                ) : (
-                  <pre className="overflow-auto whitespace-pre-wrap break-words font-mono text-sm text-text-primary">
-                    {selectedFile.content}
-                  </pre>
                 )
               ) : (
-                <div className="flex h-full items-center justify-center">
+                <div className="text-text-secondary flex flex-1 items-center justify-center">
                   <div className="text-center">
-                    <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
-                    <p className="text-sm text-text-secondary">
-                      {t('chat.loading')}
+                    <FileText className="mb-4 h-12 w-12 text-text-tertiary mx-auto" />
+                    <p className="text-sm">
+                      {t('chat.select-a-file-to-view-its-contents')}
                     </p>
                   </div>
                 </div>
-              )
-            ) : (
-              <div className="flex flex-1 items-center justify-center text-text-secondary">
-                <div className="text-center">
-                  <FileText className="mx-auto mb-4 h-12 w-12 text-text-tertiary" />
-                  <p className="text-sm">
-                    {t('chat.select-a-file-to-view-its-contents')}
-                  </p>
-                </div>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -874,7 +925,7 @@ function AudioLoader({ selectedFile }: { selectedFile: FileInfo }) {
   }, [selectedFile]);
 
   return (
-    <div className="flex w-full flex-col items-center gap-4 px-8">
+    <div className="gap-4 px-8 flex w-full flex-col items-center">
       <p className="text-sm font-medium text-text-primary">
         {selectedFile.name}
       </p>
@@ -1225,7 +1276,7 @@ function HtmlRenderer({
 
       {/* Content area with zoom */}
       <div
-        className="min-h-0 flex-1 overflow-hidden bg-code-surface"
+        className="min-h-0 bg-code-surface flex-1 overflow-hidden"
         onWheel={handleWheel}
       >
         <div
diff --git a/src/components/GlobalSearch/index.tsx b/src/components/GlobalSearch/index.tsx
index 3d42566a6..ed5a3d7a5 100644
--- a/src/components/GlobalSearch/index.tsx
+++ b/src/components/GlobalSearch/index.tsx
@@ -14,7 +14,7 @@
 
 import { useState } from 'react';
 
-import { Calculator, Calendar, Smile } from 'lucide-react';
+import { Calculator, Calendar, Search, Smile } from 'lucide-react';
 
 import {
   CommandDialog,
@@ -26,18 +26,49 @@ import {
   CommandSeparator,
 } from '@/components/ui/command';
 import { DialogTitle } from '@/components/ui/dialog';
-import { Search } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-const _items = [
-  'Apple',
-  'Banana',
-  'Orange',
-  'Grape',
-  'Watermelon',
-  'Pineapple',
-  'Mango',
-  'Blueberry',
-];
+
+export interface GlobalSearchDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function GlobalSearchDialog({
+  open,
+  onOpenChange,
+}: GlobalSearchDialogProps) {
+  const { t } = useTranslation();
+  return (
+    <CommandDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      overlayClassName="backdrop-blur-none"
+      contentClassName="border-0 bg-surface-primary shadow-perfect"
+      commandClassName="bg-surface-primary"
+    >
+      <DialogTitle className="sr-only">{t('dashboard.search')}</DialogTitle>
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>{t('dashboard.no-results')}</CommandEmpty>
+        <CommandGroup heading="Today">
+          <CommandItem>
+            <Calendar />
+            <span>{t('dashboard.calendar')}</span>
+          </CommandItem>
+          <CommandItem>
+            <Smile />
+            <span>{t('dashboard.search-emoji')}</span>
+          </CommandItem>
+          <CommandItem>
+            <Calculator />
+            <span>{t('dashboard.calculator')}</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+      </CommandList>
+    </CommandDialog>
+  );
+}
 
 export function GlobalSearch() {
   const [open, setOpen] = useState(false);
@@ -45,36 +76,15 @@ export function GlobalSearch() {
   return (
     <>
       <div
-        className="bg-bg-surface-secondary no-drag flex h-6 w-60 items-center justify-center space-x-2 rounded-lg"
+        className="bg-surface-primary no-drag h-6 w-60 space-x-2 rounded-lg flex items-center justify-center"
         onClick={() => setOpen(true)}
       >
         <Search className="h-4 w-4 text-text-secondary"></Search>
-        <span className="font-inter text-[10px] leading-4 text-text-secondary">
+        <span className="font-inter leading-4 text-text-secondary text-[10px]">
           {t('dashboard.search-for-a-task-or-document')}
         </span>
       </div>
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        <DialogTitle className="sr-only">{t('dashboard.search')}</DialogTitle>
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>{t('dashboard.no-results')}</CommandEmpty>
-          <CommandGroup heading="Today">
-            <CommandItem>
-              <Calendar />
-              <span>{t('dashboard.calendar')}</span>
-            </CommandItem>
-            <CommandItem>
-              <Smile />
-              <span>{t('dashboard.search-emoji')}</span>
-            </CommandItem>
-            <CommandItem>
-              <Calculator />
-              <span>{t('dashboard.calculator')}</span>
-            </CommandItem>
-          </CommandGroup>
-          <CommandSeparator />
-        </CommandList>
-      </CommandDialog>
+      <GlobalSearchDialog open={open} onOpenChange={setOpen} />
     </>
   );
 }
diff --git a/src/components/GroupedHistoryView/ProjectGroup.tsx b/src/components/GroupedHistoryView/ProjectGroup.tsx
index 3980a6671..2ac7c49a4 100644
--- a/src/components/GroupedHistoryView/ProjectGroup.tsx
+++ b/src/components/GroupedHistoryView/ProjectGroup.tsx
@@ -217,27 +217,27 @@ export default function ProjectGroup({
       <motion.div
         transition={{ duration: 0.2, ease: 'easeOut' }}
         onClick={handleProjectClick}
-        className={`relative h-full overflow-hidden rounded-xl border border-solid border-border-disabled bg-project-surface-default backdrop-blur-sm transition-colors hover:bg-project-surface-hover ${isLoadingProject ? 'pointer-events-none cursor-wait opacity-70' : 'cursor-pointer hover:bg-project-surface-hover'}`}
+        className={`rounded-xl border-border-disabled bg-project-surface-default backdrop-blur-sm hover:bg-project-surface-hover relative h-full overflow-hidden border border-solid transition-colors ${isLoadingProject ? 'pointer-events-none cursor-wait opacity-70' : 'hover:bg-project-surface-hover cursor-pointer'}`}
       >
         {isLoadingProject && (
-          <div className="bg-white/50 absolute inset-0 z-10 flex items-center justify-center">
+          <div className="bg-white/50 inset-0 absolute z-10 flex items-center justify-center">
             <Loader2 className="h-6 w-6 animate-spin text-icon-primary" />
           </div>
         )}
         {/* Project Card */}
         <div className="flex h-full flex-col">
           {/* Header with menu */}
-          <div className="flex min-h-32 items-start justify-between px-6 py-4">
-            <div className="flex w-full flex-col gap-2 pr-4">
-              <div className="flex w-full flex-row items-center justify-start gap-2">
+          <div className="min-h-32 px-6 py-4 flex items-start justify-between">
+            <div className="gap-2 pr-4 flex w-full flex-col">
+              <div className="gap-2 flex w-full flex-row items-center justify-start">
                 {isOngoing ? (
-                  <Sparkles className="h-6 w-6 flex-shrink-0 text-icon-information" />
+                  <Sparkles className="h-6 w-6 text-icon-information flex-shrink-0" />
                 ) : (
-                  <Sparkle className="h-6 w-6 flex-shrink-0 text-icon-secondary" />
+                  <Sparkle className="h-6 w-6 text-icon-secondary flex-shrink-0" />
                 )}
 
                 {/* Status badges */}
-                <div className="flex items-center gap-2">
+                <div className="gap-2 flex items-center">
                   {/* TODO: Add ongoing badge after finish state management is implemented */}
                   {/* {isOngoing && (
                     <motion.div
@@ -269,9 +269,9 @@ export default function ProjectGroup({
                 content={
                   <p className="max-w-xs break-words">{project.project_name}</p>
                 }
-                className="pointer-events-auto select-text text-wrap break-words bg-surface-tertiary px-2 text-label-xs shadow-perfect"
+                className="bg-surface-tertiary px-2 text-label-xs shadow-perfect pointer-events-auto text-wrap break-words select-text"
               >
-                <span className="line-clamp-2 text-body-md font-semibold leading-relaxed text-text-heading">
+                <span className="text-body-md font-semibold leading-relaxed text-text-heading line-clamp-2">
                   {project.project_name}
                 </span>
               </TooltipSimple>
@@ -282,8 +282,9 @@ export default function ProjectGroup({
               <DropdownMenuTrigger asChild>
                 <Button
                   variant="ghost"
-                  size="icon"
-                  className="relative z-10 flex-shrink-0 rounded-md"
+                  size="xs"
+                  buttonContent="icon-only"
+                  className="rounded-md relative z-10 flex-shrink-0"
                   onClick={(e) => e.stopPropagation()}
                 >
                   <MoreHorizontal className="h-4 w-4 text-icon-primary" />
@@ -291,12 +292,12 @@ export default function ProjectGroup({
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 align="end"
-                className="z-50 border-dropdown-border bg-dropdown-bg"
+                className="border-dropdown-border bg-dropdown-bg z-50"
               >
                 {onProjectEdit && (
                   <DropdownMenuItem
                     onClick={handleProjectEdit}
-                    className="cursor-pointer bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover"
+                    className="bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover cursor-pointer"
                   >
                     <Edit className="mr-2 h-4 w-4" />
                     {t('layout.edit') || 'Edit'}
@@ -308,7 +309,7 @@ export default function ProjectGroup({
                       e.stopPropagation();
                       onProjectDelete(project.project_id);
                     }}
-                    className="cursor-pointer bg-dropdown-item-bg-default text-text-cuation hover:bg-dropdown-item-bg-hover"
+                    className="bg-dropdown-item-bg-default text-text-cuation hover:bg-dropdown-item-bg-hover cursor-pointer"
                   >
                     <Trash2 className="mr-2 h-4 w-4" />
                     {t('layout.delete')}
@@ -335,12 +336,12 @@ export default function ProjectGroup({
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ delay: 0.1, duration: 0.3 }}
-            className="flex items-center justify-between border-x-0 border-b-0 border-solid border-border-disabled px-6 py-4"
+            className="border-border-disabled px-6 py-4 flex items-center justify-between border-x-0 border-b-0 border-solid"
           >
-            <div className="flex w-full flex-row items-center justify-between gap-4">
+            <div className="gap-4 flex w-full flex-row items-center justify-between">
               {/* Token count */}
               <TooltipSimple content={t('chat.token')}>
-                <div className="flex items-center gap-1">
+                <div className="gap-1 flex items-center">
                   <Hash className="h-4 w-4 text-icon-information" />
                   <span className="text-body-sm font-semibold text-text-information">
                     {' '}
@@ -354,10 +355,10 @@ export default function ProjectGroup({
                 </div>
               </TooltipSimple>
 
-              <div className="flex flex-row items-center justify-end gap-4">
+              <div className="gap-4 flex flex-row items-center justify-end">
                 {/* Task count */}
                 <TooltipSimple content="Tasks">
-                  <div className="flex items-center gap-1">
+                  <div className="gap-1 flex items-center">
                     <Pin className="h-4 w-4 text-icon-primary" />
                     <span className="text-body-sm font-semibold text-text-body">
                       {project.task_count}
@@ -367,7 +368,7 @@ export default function ProjectGroup({
 
                 {/* Trigger count */}
                 <TooltipSimple content="Triggers">
-                  <div className="flex items-center gap-1">
+                  <div className="gap-1 flex items-center">
                     <Zap className="h-4 w-4 text-icon-warning" />
                     <span className="text-body-sm font-semibold text-text-warning">
                       {project.total_triggers || 0}
@@ -386,36 +387,36 @@ export default function ProjectGroup({
   return (
     <div
       onClick={handleProjectClick}
-      className={`hover:perfect-shadow relative overflow-hidden rounded-xl border border-solid border-border-disabled bg-project-surface-default backdrop-blur-sm hover:bg-project-surface-hover ${isLoadingProject ? 'pointer-events-none cursor-wait opacity-70' : 'cursor-pointer'}`}
+      className={`hover:perfect-shadow rounded-xl border-border-disabled bg-project-surface-default backdrop-blur-sm hover:bg-project-surface-hover relative overflow-hidden border border-solid ${isLoadingProject ? 'pointer-events-none cursor-wait opacity-70' : 'cursor-pointer'}`}
     >
       {isLoadingProject && (
-        <div className="bg-white/50 absolute inset-0 z-10 flex items-center justify-center">
+        <div className="bg-white/50 inset-0 absolute z-10 flex items-center justify-center">
           <Loader2 className="h-6 w-6 animate-spin text-icon-primary" />
         </div>
       )}
       {/* Project */}
-      <div className="flex w-full items-center justify-between px-6 py-4">
+      <div className="px-6 py-4 flex w-full items-center justify-between">
         {/* Start: Folder icon and project name - Fixed width */}
-        <div className="flex w-48 flex-shrink-0 items-center gap-3">
+        <div className="w-48 gap-3 flex flex-shrink-0 items-center">
           {isOngoing ? (
-            <Sparkles className="h-5 w-5 flex-shrink-0 text-icon-information" />
+            <Sparkles className="h-5 w-5 text-icon-information flex-shrink-0" />
           ) : (
-            <Sparkle className="h-5 w-5 flex-shrink-0 text-icon-secondary" />
+            <Sparkle className="h-5 w-5 text-icon-secondary flex-shrink-0" />
           )}
           <TooltipSimple
             content={
               <p className="max-w-xs break-words">{project.project_name}</p>
             }
-            className="pointer-events-auto select-text text-wrap break-words bg-surface-tertiary px-2 text-label-xs shadow-perfect"
+            className="bg-surface-tertiary px-2 text-label-xs shadow-perfect pointer-events-auto text-wrap break-words select-text"
           >
-            <span className="block truncate text-left text-body-md font-semibold text-text-heading">
+            <span className="text-body-md font-semibold text-text-heading block truncate text-left">
               {project.project_name}
             </span>
           </TooltipSimple>
         </div>
 
         {/* Middle: Project, Trigger, Agent tags - Aligned to right */}
-        <div className="flex w-fit flex-1 items-center justify-end gap-4">
+        <div className="gap-4 flex w-fit flex-1 items-center justify-end">
           <Tag variant="info" size="sm">
             <Hash />
             <span>
@@ -441,7 +442,7 @@ export default function ProjectGroup({
         </div>
 
         {/* End: Status and menu */}
-        <div className="ml-4 flex w-fit min-w-32 items-center justify-end gap-2 border border-y-0 border-r-0 border-solid border-border-disabled pl-4">
+        <div className="ml-4 min-w-32 gap-2 border-border-disabled pl-4 flex w-fit items-center justify-end border border-y-0 border-r-0 border-solid">
           {/* Status tag */}
           {/* {isOngoing && (
             <Tag variant="info" size="sm">
@@ -461,20 +462,21 @@ export default function ProjectGroup({
             <DropdownMenuTrigger asChild>
               <Button
                 variant="ghost"
-                size="icon"
-                className="relative z-10 rounded-md"
+                size="xs"
+                buttonContent="icon-only"
+                className="rounded-md relative z-10"
               >
                 <MoreHorizontal className="h-4 w-4 text-icon-primary" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent
               align="end"
-              className="z-50 border-dropdown-border bg-dropdown-bg"
+              className="border-dropdown-border bg-dropdown-bg z-50"
             >
               {onProjectEdit && (
                 <DropdownMenuItem
                   onClick={handleProjectEdit}
-                  className="cursor-pointer bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover"
+                  className="bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover cursor-pointer"
                 >
                   <Edit className="mr-2 h-4 w-4" />
                   {t('layout.edit') || 'Edit'}
@@ -483,7 +485,7 @@ export default function ProjectGroup({
               {onProjectDelete && (
                 <DropdownMenuItem
                   onClick={() => onProjectDelete(project.project_id)}
-                  className="cursor-pointer bg-dropdown-item-bg-default text-text-cuation hover:bg-dropdown-item-bg-hover"
+                  className="bg-dropdown-item-bg-default text-text-cuation hover:bg-dropdown-item-bg-hover cursor-pointer"
                 >
                   <Trash2 className="mr-2 h-4 w-4" />
                   {t('layout.delete')}
diff --git a/src/components/GroupedHistoryView/TaskItem.tsx b/src/components/GroupedHistoryView/TaskItem.tsx
index 3cb253e3e..b83aec69a 100644
--- a/src/components/GroupedHistoryView/TaskItem.tsx
+++ b/src/components/GroupedHistoryView/TaskItem.tsx
@@ -102,17 +102,17 @@ export default function TaskItem({
   return (
     <div
       onClick={onSelect}
-      className={` ${isActive ? '!bg-white-100%' : ''} relative flex h-14 w-full cursor-pointer items-center justify-between gap-md rounded-xl border border-solid border-border-disabled bg-white-30% p-3 shadow-history-item transition-all duration-300 hover:bg-white-100% ${!isLast ? 'mb-2' : ''} `}
+      className={` ${isActive ? '!bg-white-100%' : ''} h-14 gap-md rounded-xl border-border-disabled bg-white-30% p-3 shadow-history-item hover:bg-white-100% relative flex w-full cursor-pointer items-center justify-between border border-solid transition-all duration-300 ${!isLast ? 'mb-2' : ''} `}
     >
-      <div className="flex min-w-0 flex-1 items-center gap-2">
+      <div className="min-w-0 gap-2 flex flex-1 items-center">
         <TooltipSimple content={t('layout.tasks')}>
           <Pin className="h-4 w-4 text-icon-primary" />
         </TooltipSimple>
 
-        <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <div className="min-w-0 gap-1 flex flex-1 flex-col">
           <TooltipSimple
             align="start"
-            className="pointer-events-auto max-w-xs select-text text-wrap break-words bg-surface-tertiary p-2 text-label-xs shadow-perfect"
+            className="max-w-xs bg-surface-tertiary p-2 text-label-xs shadow-perfect pointer-events-auto text-wrap break-words select-text"
             content={
               <div className="space-y-1">
                 <div className="font-medium">
@@ -128,14 +128,14 @@ export default function TaskItem({
               </div>
             }
           >
-            <span className="block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-text-body">
+            <span className="text-sm font-medium text-text-body block overflow-hidden text-ellipsis whitespace-nowrap">
               {task.summary || task.question || t('layout.new-project')}
             </span>
           </TooltipSimple>
         </div>
       </div>
 
-      <div className="flex flex-shrink-0 items-center gap-2">
+      <div className="gap-2 flex flex-shrink-0 items-center">
         {!isOngoing && getStatusTag(task.status)}
 
         <Tag variant="info" size="sm">
@@ -165,7 +165,8 @@ export default function TaskItem({
           <Popover>
             <PopoverTrigger asChild>
               <Button
-                size="icon"
+                size="xs"
+                buttonContent="icon-only"
                 onClick={(e) => e.stopPropagation()}
                 variant="ghost"
                 className="rounded-full"
@@ -175,7 +176,7 @@ export default function TaskItem({
             </PopoverTrigger>
             <PopoverContent
               align="end"
-              className="w-[98px] rounded-[12px] border border-solid border-dropdown-border bg-dropdown-bg p-sm"
+              className="border-dropdown-border bg-dropdown-bg p-sm w-[98px] rounded-[12px] border border-solid"
             >
               <div className="space-y-1">
                 {!isOngoing && (
diff --git a/src/components/HistorySidebar/index.tsx b/src/components/HistorySidebar/index.tsx
index 501df6759..1ea0c549a 100644
--- a/src/components/HistorySidebar/index.tsx
+++ b/src/components/HistorySidebar/index.tsx
@@ -20,6 +20,7 @@ import { loadProjectFromHistory } from '@/lib';
 import { share } from '@/lib/share';
 import { fetchGroupedHistoryTasks } from '@/service/historyApi';
 import { getAuthStore } from '@/store/authStore';
+import { usePageTabStore } from '@/store/pageTabStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { ChatTaskStatus } from '@/types/constants';
 import { HistoryTask, ProjectGroup } from '@/types/history';
@@ -50,6 +51,9 @@ import SearchInput from './SearchInput';
 export default function HistorySidebar() {
   const { t } = useTranslation();
   const { isOpen, close } = useSidebarStore();
+  const projectSidebarCollapsed = usePageTabStore(
+    (s) => s.projectSidebarCollapsed
+  );
   const navigate = useNavigate();
   //Get Chatstore for the active project's task
   const { chatStore, projectStore } = useChatStoreAdapter();
@@ -303,11 +307,40 @@ export default function HistorySidebar() {
   };
 
   useLayoutEffect(() => {
+    const PANEL_WIDTH = 360;
+    const GAP = 8;
+    const MARGIN = 8;
+
     const updateAnchor = () => {
-      const btn = document.getElementById('active-task-title-btn');
-      if (btn) {
-        const rect = btn.getBoundingClientRect();
-        setAnchorStyle({ left: rect.left, top: rect.bottom + 6 });
+      const sidebarTitleEl = document.getElementById(
+        'sidebar-active-task-title-btn'
+      );
+      const topBarTitleEl = document.getElementById('active-task-title-btn');
+
+      let anchorEl: HTMLElement | null = null;
+      if (!projectSidebarCollapsed && sidebarTitleEl) {
+        const r = sidebarTitleEl.getBoundingClientRect();
+        if (r.width > 0 && r.height > 0) {
+          anchorEl = sidebarTitleEl;
+        }
+      }
+      if (!anchorEl && topBarTitleEl) {
+        anchorEl = topBarTitleEl;
+      }
+
+      if (anchorEl) {
+        const rect = anchorEl.getBoundingClientRect();
+        let left = rect.left;
+        if (left + PANEL_WIDTH > window.innerWidth - MARGIN) {
+          left = window.innerWidth - MARGIN - PANEL_WIDTH;
+        }
+        if (left < MARGIN) {
+          left = MARGIN;
+        }
+        const top = rect.bottom + GAP;
+        setAnchorStyle({ left, top });
+      } else {
+        setAnchorStyle(null);
       }
     };
 
@@ -319,7 +352,7 @@ export default function HistorySidebar() {
     return () => {
       window.removeEventListener('resize', updateAnchor);
     };
-  }, [isOpen]);
+  }, [isOpen, projectSidebarCollapsed]);
 
   if (!chatStore) {
     return <div>Loading...</div>;
@@ -344,10 +377,10 @@ export default function HistorySidebar() {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="fixed inset-0 z-40 bg-transparent"
+            className="inset-0 fixed z-40 bg-transparent"
             onClick={close}
           />
-          {/* dropdown-style history panel under title bar */}
+          {/* History panel below project title (sidebar when expanded, else TopBar) */}
           <motion.div
             initial={false}
             animate={{ y: 0, opacity: 1 }}
@@ -355,21 +388,21 @@ export default function HistorySidebar() {
             transition={{ type: 'spring', damping: 22, stiffness: 220 }}
             onMouseLeave={close}
             ref={panelRef}
-            className="bg-bg-surface-tertiary fixed z-50 flex max-h-[70vh] w-[360px] flex-col overflow-hidden rounded-xl p-sm shadow-perfect backdrop-blur-xl"
+            className="bg-surface-tertiary rounded-xl p-2 shadow-perfect fixed z-50 flex max-h-[80vh] w-[360px] flex-col overflow-hidden"
             style={{
               left: anchorStyle.left,
               top: anchorStyle.top,
             }}
           >
-            <div className="flex items-center justify-between py-2 pl-2">
+            <div className="py-2 pl-2 flex items-center justify-between">
               {/* Search */}
               <SearchInput value={searchValue} onChange={handleSearch} />
               <Button variant="ghost" size="md" onClick={createChat}>
-                <Plus className="text-icon-tertiary h-8 w-8 transition-all duration-300 group-hover:text-icon-primary" />
+                <Plus className="text-icon-tertiary h-8 w-8 group-hover:text-icon-primary transition-all duration-300" />
               </Button>
             </div>
             <div className="scrollbar-hide mt-2 min-h-0 flex-1 overflow-y-auto">
-              <div className="flex flex-col gap-3 px-sm">
+              <div className="gap-3 px-sm flex flex-col">
                 {/* Ongoing Projects */}
                 {ongoingProjects
                   .filter(
@@ -389,30 +422,30 @@ export default function HistorySidebar() {
                         navigate(`/`);
                         close();
                       }}
-                      className="relative flex w-full max-w-full cursor-pointer items-center justify-between gap-sm rounded-xl border border-solid border-border-disabled bg-project-surface-default px-4 py-3 shadow-history-item transition-all duration-300 hover:bg-project-surface-hover"
+                      className="gap-sm rounded-xl border-border-disabled bg-project-surface-default px-4 py-3 shadow-history-item hover:bg-project-surface-hover relative flex w-full max-w-full cursor-pointer items-center justify-between border border-solid transition-all duration-300"
                     >
                       <Sparkles
                         size={20}
-                        className="flex-shrink-0 text-icon-information"
+                        className="text-icon-information flex-shrink-0"
                       />
 
-                      <div className="flex min-w-0 flex-1 flex-col gap-1">
+                      <div className="min-w-0 gap-1 flex flex-1 flex-col">
                         <TooltipSimple
                           align="start"
-                          className="pointer-events-auto w-[300px] select-text text-wrap break-words bg-surface-tertiary p-2 text-label-xs shadow-perfect"
+                          className="bg-surface-tertiary p-2 text-label-xs shadow-perfect pointer-events-auto w-[300px] text-wrap break-words select-text"
                           content={
                             <div>
                               {project.project_name || t('layout.new-project')}
                             </div>
                           }
                         >
-                          <span className="block overflow-hidden text-ellipsis whitespace-nowrap text-body-sm font-semibold text-text-heading">
+                          <span className="text-body-sm font-semibold text-text-heading block overflow-hidden text-ellipsis whitespace-nowrap">
                             {project.project_name || t('layout.new-project')}
                           </span>
                         </TooltipSimple>
                       </div>
 
-                      <div className="flex flex-shrink-0 items-center gap-2">
+                      <div className="gap-2 flex flex-shrink-0 items-center">
                         <TooltipSimple content={t('chat.token')}>
                           <Tag variant="info" size="sm">
                             <Hash className="h-3.5 w-3.5" />
@@ -443,7 +476,7 @@ export default function HistorySidebar() {
                             <Ellipsis size={16} className="text-text-primary" />
                           </Button>
                         </PopoverTrigger>
-                        <PopoverContent className="w-[98px] rounded-[12px] border border-solid border-dropdown-border bg-dropdown-bg p-sm">
+                        <PopoverContent className="border-dropdown-border bg-dropdown-bg p-sm w-[98px] rounded-[12px] border border-solid">
                           <div className="space-y-1">
                             <PopoverClose asChild>
                               <Button
@@ -504,17 +537,17 @@ export default function HistorySidebar() {
                         );
                       }}
                       key={project.project_id}
-                      className="relative flex w-full max-w-full cursor-pointer items-center justify-between gap-sm rounded-xl border border-solid border-border-disabled bg-project-surface-default px-4 py-3 shadow-history-item transition-all duration-300 hover:bg-project-surface-hover"
+                      className="gap-sm rounded-xl border-border-disabled bg-project-surface-default px-4 py-3 shadow-history-item hover:bg-project-surface-hover relative flex w-full max-w-full cursor-pointer items-center justify-between border border-solid transition-all duration-300"
                     >
                       <Sparkle
                         size={20}
-                        className="flex-shrink-0 text-icon-secondary"
+                        className="text-icon-secondary flex-shrink-0"
                       />
 
                       <div className="min-w-0 flex-1">
                         <TooltipSimple
                           align="start"
-                          className="pointer-events-auto w-[300px] select-text text-wrap break-words bg-surface-tertiary p-2 text-label-xs shadow-perfect"
+                          className="bg-surface-tertiary p-2 text-label-xs shadow-perfect pointer-events-auto w-[300px] text-wrap break-words select-text"
                           content={
                             <div>
                               {project.last_prompt ||
@@ -523,7 +556,7 @@ export default function HistorySidebar() {
                             </div>
                           }
                         >
-                          <span className="block overflow-hidden text-ellipsis whitespace-nowrap text-body-sm font-semibold text-text-heading">
+                          <span className="text-body-sm font-semibold text-text-heading block overflow-hidden text-ellipsis whitespace-nowrap">
                             {project.last_prompt ||
                               project.project_name ||
                               t('layout.new-project')}
@@ -531,7 +564,7 @@ export default function HistorySidebar() {
                         </TooltipSimple>
                       </div>
 
-                      <div className="flex flex-shrink-0 items-center gap-2">
+                      <div className="gap-2 flex flex-shrink-0 items-center">
                         <TooltipSimple content={t('chat.token')}>
                           <Tag variant="info" size="sm">
                             <Hash className="h-3.5 w-3.5" />
@@ -562,7 +595,7 @@ export default function HistorySidebar() {
                             <Ellipsis size={16} className="text-text-primary" />
                           </Button>
                         </PopoverTrigger>
-                        <PopoverContent className="w-[98px] rounded-[12px] border border-solid border-dropdown-border bg-dropdown-bg p-sm">
+                        <PopoverContent className="border-dropdown-border bg-dropdown-bg p-sm w-[98px] rounded-[12px] border border-solid">
                           <div className="space-y-1">
                             <PopoverClose asChild>
                               <Button
diff --git a/src/components/InstallStep/Carousel.tsx b/src/components/InstallStep/Carousel.tsx
index 04cca8aed..be68c24d7 100644
--- a/src/components/InstallStep/Carousel.tsx
+++ b/src/components/InstallStep/Carousel.tsx
@@ -152,7 +152,7 @@ export const CarouselStep: React.FC = () => {
 
   return (
     <div className="flex h-full w-full flex-col">
-      <div className="flex h-full min-h-0 w-full flex-col">
+      <div className="min-h-0 flex h-full w-full flex-col">
         <div className="mb-md text-heading-sm font-bold text-text-heading">
           {carouselItems[currentSlide].title}
         </div>
@@ -166,8 +166,8 @@ export const CarouselStep: React.FC = () => {
           <CarouselContent className="h-full">
             {carouselItems.map((_, index) => (
               <CarouselItem key={index} className="h-full">
-                <div className="h-full w-full p-0">
-                  <CardContent className="flex h-full w-full items-center justify-center p-0">
+                <div className="p-0 h-full w-full">
+                  <CardContent className="p-0 flex h-full w-full items-center justify-center">
                     <div
                       key={
                         index === currentSlide
@@ -202,7 +202,7 @@ export const CarouselStep: React.FC = () => {
                             }, 500);
                           }
                         }}
-                        className="h-full w-full rounded-3xl object-contain"
+                        className="rounded-3xl h-full w-full object-contain"
                       />
                     </div>
                   </CardContent>
@@ -212,8 +212,8 @@ export const CarouselStep: React.FC = () => {
           </CarouselContent>
         </Carousel>
       </div>
-      <div className="relative mt-2 flex items-center justify-center gap-sm">
-        <div className="flex items-center justify-center gap-6">
+      <div className="mt-2 gap-sm relative flex items-center justify-center">
+        <div className="gap-6 flex items-center justify-center">
           {carouselItems.map((item, index) => (
             <div
               key={index}
@@ -229,8 +229,9 @@ export const CarouselStep: React.FC = () => {
         <Button
           onClick={handleTogglePause}
           variant="ghost"
-          size="icon"
-          className="absolute bottom-0 right-0 rounded-full"
+          size="xs"
+          buttonContent="icon-only"
+          className="bottom-0 right-0 absolute rounded-full"
           aria-label={isPaused ? 'Resume' : 'Pause'}
         >
           {isPaused ? (
diff --git a/src/components/ProjectPageSidebar/BottomAction.tsx b/src/components/ProjectPageSidebar/BottomAction.tsx
new file mode 100644
index 000000000..b824df1e7
--- /dev/null
+++ b/src/components/ProjectPageSidebar/BottomAction.tsx
@@ -0,0 +1,189 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import folderIcon from '@/assets/Folder.svg';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { CircleHelp } from 'lucide-react';
+import type { CSSProperties } from 'react';
+
+import { WORKSPACE_TAB_LABEL_CLASS, workspaceTabButtonClass } from './NavTab';
+
+const PROJECT_HUB_DROPDOWN_CONTENT_CLASS = cn(
+  'min-w-[11rem] -mb-2 flex flex-col gap-1 rounded-xl border-0 bg-fill-default p-1 shadow-md'
+);
+
+const PROJECT_HUB_DROPDOWN_CONTENT_STYLE: CSSProperties = {
+  border: 'none',
+  borderRadius: 'var(--borderRadius-rounded-xl, 12px)',
+  background: 'var(--fill-default, #FFF)',
+};
+
+const PROJECT_HUB_DROPDOWN_ITEM_CLASS = cn(
+  'flex h-9 min-h-9 w-full shrink-0 cursor-pointer select-none items-center rounded-xl px-3 py-0 text-body-sm font-medium text-text-label outline-none',
+  'hover:bg-surface-secondary hover:text-text-label',
+  'data-[highlighted]:bg-surface-secondary data-[highlighted]:text-text-label',
+  'focus:bg-surface-secondary focus:text-text-label'
+);
+
+export interface BottomActionProps {
+  collapsed: boolean;
+  onOpenModels: () => void;
+  modelsAriaLabel: string;
+  modelModeLine: string;
+  modelDetailLine: string;
+  helpMenuOpen: boolean;
+  onHelpMenuOpenChange: (open: boolean) => void;
+  helpAriaLabel: string;
+  /** Visible row label (matches workspace `NavTab` label typography). */
+  helpLabel: string;
+  /** Tooltip on hover; defaults to {@link helpAriaLabel}. */
+  helpTooltip?: string;
+  onContactSupport: () => void;
+  onReportBug: () => void;
+  onDownloadLogs: () => void;
+  contactSupportLabel: string;
+  reportBugLabel: string;
+  downloadLogsLabel: string;
+}
+
+/** Bottom rail: help menu, then model summary — stacked vertically; folded rail shows icon-only rows. */
+export function BottomAction({
+  collapsed,
+  onOpenModels,
+  modelsAriaLabel,
+  modelModeLine,
+  modelDetailLine,
+  helpMenuOpen,
+  onHelpMenuOpenChange,
+  helpAriaLabel,
+  helpLabel,
+  helpTooltip,
+  onContactSupport,
+  onReportBug,
+  onDownloadLogs,
+  contactSupportLabel,
+  reportBugLabel,
+  downloadLogsLabel,
+}: BottomActionProps) {
+  const modelTitle = `${modelModeLine}\n${modelDetailLine}`;
+  const helpTooltipText = helpTooltip ?? helpAriaLabel;
+
+  return (
+    <div className="border-border-secondary pt-2 mt-auto w-full shrink-0 border-t">
+      <div className="min-w-0 gap-1 flex w-full flex-col overflow-hidden">
+        <div className="min-h-0 min-w-0 flex w-full">
+          <DropdownMenu open={helpMenuOpen} onOpenChange={onHelpMenuOpenChange}>
+            <TooltipSimple
+              content={helpTooltipText}
+              side="right"
+              align="center"
+              enabled={!helpMenuOpen}
+            >
+              <DropdownMenuTrigger asChild>
+                <button
+                  type="button"
+                  className={workspaceTabButtonClass(helpMenuOpen)}
+                  aria-label={helpAriaLabel}
+                  aria-haspopup="menu"
+                >
+                  <CircleHelp
+                    className="h-4 w-4 text-icon-primary shrink-0"
+                    aria-hidden
+                  />
+                  <span className={WORKSPACE_TAB_LABEL_CLASS}>{helpLabel}</span>
+                </button>
+              </DropdownMenuTrigger>
+            </TooltipSimple>
+            <DropdownMenuContent
+              side="right"
+              align="end"
+              sideOffset={8}
+              alignOffset={8}
+              className={PROJECT_HUB_DROPDOWN_CONTENT_CLASS}
+              style={PROJECT_HUB_DROPDOWN_CONTENT_STYLE}
+            >
+              <DropdownMenuItem
+                className={PROJECT_HUB_DROPDOWN_ITEM_CLASS}
+                onSelect={onContactSupport}
+              >
+                {contactSupportLabel}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className={PROJECT_HUB_DROPDOWN_ITEM_CLASS}
+                onSelect={onReportBug}
+              >
+                {reportBugLabel}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className={PROJECT_HUB_DROPDOWN_ITEM_CLASS}
+                onSelect={onDownloadLogs}
+              >
+                {downloadLogsLabel}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <div className="min-h-0 min-w-0 flex w-full">
+          <TooltipSimple
+            content={modelTitle}
+            side="right"
+            align="center"
+            enabled={collapsed}
+          >
+            <button
+              type="button"
+              onClick={onOpenModels}
+              title={collapsed ? modelTitle : undefined}
+              className={cn(
+                workspaceTabButtonClass(false),
+                'min-h-8 py-1.5 bg-surface-primary h-auto w-full items-center'
+              )}
+              aria-label={modelsAriaLabel}
+            >
+              <span
+                className="h-4 w-4 flex shrink-0 items-center justify-center"
+                aria-hidden
+              >
+                <img
+                  src={folderIcon}
+                  alt=""
+                  className="h-4 w-4 shrink-0 object-contain"
+                  draggable={false}
+                />
+              </span>
+              <div className="min-w-0 gap-0.5 flex flex-1 flex-col justify-center text-left leading-none">
+                <div className="bg-surface-information min-w-0 rounded-md px-1 w-fit max-w-full">
+                  <span className="text-text-information text-label-xs font-semibold leading-tight block truncate">
+                    {modelModeLine}
+                  </span>
+                </div>
+                <span className="text-text-secondary leading-tight truncate text-left text-[10px]">
+                  {modelDetailLine}
+                </span>
+              </div>
+            </button>
+          </TooltipSimple>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ProjectPageSidebar/HeaderAction.tsx b/src/components/ProjectPageSidebar/HeaderAction.tsx
new file mode 100644
index 000000000..c34b79cc1
--- /dev/null
+++ b/src/components/ProjectPageSidebar/HeaderAction.tsx
@@ -0,0 +1,146 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { TooltipSimple } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { PanelLeft, PanelLeftClose, Plus } from 'lucide-react';
+
+/** Hub tile shell without whole-area hover (split controls handle their own hover). */
+function hubIconTabShellClass(active: boolean): string {
+  return cn(
+    'no-drag w-full min-w-0 rounded-xl bg-surface-primary transition-colors',
+    active && 'bg-surface-tertiary'
+  );
+}
+
+export interface HeaderActionProps {
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+  expandAriaLabel: string;
+  expandTooltip: string;
+  collapseAriaLabel: string;
+  collapseTooltip: string;
+  historySidebarOpen: boolean;
+  activeTaskTitle: string;
+  onCenterClick: () => void;
+  newProjectAriaLabel: string;
+  newProjectTooltip: string;
+  onNewProject: () => void;
+}
+
+/** Project sidebar top bar: collapse | active title | new project (or expand when collapsed). */
+export function HeaderAction({
+  collapsed,
+  onToggleCollapsed,
+  expandAriaLabel,
+  expandTooltip,
+  collapseAriaLabel,
+  collapseTooltip,
+  historySidebarOpen,
+  activeTaskTitle,
+  onCenterClick,
+  newProjectAriaLabel,
+  newProjectTooltip,
+  onNewProject,
+}: HeaderActionProps) {
+  if (collapsed) {
+    return (
+      <TooltipSimple content={expandTooltip} side="right" align="center">
+        <button
+          type="button"
+          className={cn(
+            'no-drag h-8 min-h-8 rounded-xl flex w-full shrink-0 cursor-pointer items-center justify-start',
+            'hover:bg-surface-tertiary border-0 bg-transparent',
+            'focus-visible:ring-border-secondary focus-visible:z-10 focus-visible:ring-2 focus-visible:outline-none',
+            'px-3'
+          )}
+          onClick={onToggleCollapsed}
+          aria-label={expandAriaLabel}
+        >
+          <PanelLeft
+            className="h-4 w-4 text-icon-primary shrink-0"
+            aria-hidden
+          />
+        </button>
+      </TooltipSimple>
+    );
+  }
+
+  return (
+    <div className="min-w-0 flex items-stretch">
+      <div
+        className={cn(
+          hubIconTabShellClass(historySidebarOpen),
+          'h-8 min-h-8 min-w-0 flex flex-1 flex-row overflow-hidden'
+        )}
+      >
+        <TooltipSimple content={collapseTooltip} side="bottom" align="start">
+          <button
+            type="button"
+            className={cn(
+              'no-drag min-h-0 w-10 flex h-full shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent transition-colors',
+              historySidebarOpen
+                ? 'hover:brightness-[0.98]'
+                : 'hover:bg-surface-tertiary',
+              'focus-visible:ring-border-secondary focus-visible:z-10 focus-visible:ring-2 focus-visible:outline-none'
+            )}
+            onClick={onToggleCollapsed}
+            aria-label={collapseAriaLabel}
+          >
+            <PanelLeftClose
+              className="h-4 w-4 text-icon-primary shrink-0"
+              aria-hidden
+            />
+          </button>
+        </TooltipSimple>
+        <TooltipSimple content={activeTaskTitle} side="bottom" align="center">
+          <button
+            id="sidebar-active-task-title-btn"
+            type="button"
+            className={cn(
+              'no-drag min-h-0 min-w-0 border-border-tertiary flex h-full flex-1 cursor-pointer items-center border-x border-t border-b-0 border-solid bg-transparent text-left transition-colors',
+              historySidebarOpen
+                ? 'hover:brightness-[0.98]'
+                : 'hover:bg-surface-tertiary',
+              'focus-visible:ring-border-secondary focus-visible:z-10 focus-visible:ring-2 focus-visible:outline-none'
+            )}
+            onClick={onCenterClick}
+            aria-expanded={historySidebarOpen}
+            aria-haspopup="dialog"
+          >
+            <span className="min-w-0 text-text-body text-body-sm font-bold flex-1 truncate">
+              {activeTaskTitle}
+            </span>
+          </button>
+        </TooltipSimple>
+        <TooltipSimple content={newProjectTooltip} side="bottom" align="end">
+          <button
+            type="button"
+            className={cn(
+              'no-drag w-10 flex h-full shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent transition-colors',
+              historySidebarOpen
+                ? 'hover:brightness-[0.98]'
+                : 'hover:bg-surface-tertiary',
+              'focus-visible:ring-border-secondary focus-visible:z-10 focus-visible:ring-2 focus-visible:outline-none'
+            )}
+            onClick={onNewProject}
+            aria-label={newProjectAriaLabel}
+          >
+            <Plus className="h-4 w-4 text-icon-primary shrink-0" aria-hidden />
+          </button>
+        </TooltipSimple>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ProjectPageSidebar/NavTab.tsx b/src/components/ProjectPageSidebar/NavTab.tsx
new file mode 100644
index 000000000..9038aaea4
--- /dev/null
+++ b/src/components/ProjectPageSidebar/NavTab.tsx
@@ -0,0 +1,268 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { Button } from '@/components/ui/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import type { WebSocketConnectionStatus } from '@/store/triggerStore';
+import { RefreshCw } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+/** Workspace tabs: layout identical expanded/folded so the leading icon does not jump — text clips as the rail narrows. */
+export function workspaceTabButtonClass(active: boolean): string {
+  return cn(
+    'no-drag h-8 min-h-8 w-full min-w-0 shrink-0 rounded-xl cursor-pointer flex items-center justify-start gap-3 px-3 text-left outline-none overflow-hidden',
+    'hover:bg-surface-tertiary focus-visible:ring-2 focus-visible:ring-border-secondary focus-visible:outline-none',
+    active && 'bg-surface-tertiary'
+  );
+}
+
+export const WORKSPACE_TAB_LABEL_CLASS =
+  'min-w-0 flex-1 truncate text-text-label text-body-sm font-medium';
+
+const SPLIT_MAIN_BUTTON_CLASS =
+  'no-drag min-h-8 min-w-0 gap-3 rounded-xl py-0 pl-3 pr-1 relative flex flex-1 items-center text-left outline-none focus-visible:ring-border-secondary hover:bg-transparent focus-visible:z-10 focus-visible:ring-2 focus-visible:outline-none';
+
+const SPLIT_OUTER_EXTRA_CLASS =
+  'min-w-0 gap-0 !p-0 relative flex items-stretch overflow-visible';
+
+export function triggerListenerLeadIconClass(
+  status: WebSocketConnectionStatus
+): string {
+  switch (status) {
+    case 'connected':
+      return 'text-icon-primary';
+    case 'connecting':
+      return 'text-icon-warning animate-pulse';
+    case 'unhealthy':
+      return 'text-icon-caution';
+    case 'disconnected':
+    default:
+      return 'text-icon-secondary';
+  }
+}
+
+export interface NavTabReconnectSuffixProps {
+  wsConnectionStatus: WebSocketConnectionStatus;
+  reconnectHint: string;
+  reconnectButtonLabel: string;
+  onReconnect: () => void;
+}
+
+/** Optional right control for {@link NavTab} `layout="split"` (e.g. triggers reconnect). */
+export function NavTabReconnectSuffix({
+  wsConnectionStatus,
+  reconnectHint,
+  reconnectButtonLabel,
+  onReconnect,
+}: NavTabReconnectSuffixProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            'no-drag text-icon-secondary hover:bg-surface-tertiary h-8 w-8 rounded-xl flex shrink-0 items-center justify-center transition-colors outline-none',
+            'focus-visible:ring-border-secondary focus-visible:z-10 focus-visible:ring-2 focus-visible:outline-none'
+          )}
+          aria-label={reconnectHint}
+        >
+          <RefreshCw
+            className={cn(
+              'h-3.5 w-3.5',
+              wsConnectionStatus === 'connecting' && 'animate-spin'
+            )}
+            aria-hidden
+          />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-64 p-4" side="right" align="start">
+        <div className="gap-3 flex flex-col">
+          <p className="text-body-sm text-text-body">{reconnectHint}</p>
+          <Button
+            variant="primary"
+            size="sm"
+            className="w-full items-center justify-center"
+            onClick={onReconnect}
+          >
+            <RefreshCw
+              className={cn(
+                'mr-2 h-4 w-4',
+                wsConnectionStatus === 'connecting' && 'animate-spin'
+              )}
+              aria-hidden
+            />
+            {reconnectButtonLabel}
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export type NavTabLayout = 'simple' | 'split';
+
+export interface NavTabProps {
+  active: boolean;
+  onClick: () => void;
+  leading: ReactNode;
+  label: ReactNode;
+  /** Tag or secondary affordance after the label. */
+  trailing?: ReactNode;
+  showNotificationDot?: boolean;
+  notificationDotClassName?: string;
+  /** Inbox-style dot vs triggers-style attention dot. */
+  notificationDotTone?: 'default' | 'attention';
+  /**
+   * `simple` — one full-width control (default).
+   * `split` — shell row with a primary control plus optional `suffix` (e.g. extra icon button).
+   */
+  layout?: NavTabLayout;
+  suffix?: ReactNode;
+  collapsed: boolean;
+  tooltip: string;
+  tooltipEnabledWhenCollapsed?: boolean;
+  ariaLabel?: string;
+  ariaCurrentPage?: boolean;
+  /** Merged onto the outer control (`button` when simple, shell `div` when split). */
+  className?: string;
+  /** When `layout="split"`, extra classes on the primary `button` only. */
+  mainButtonClassName?: string;
+}
+
+function tabMainInner({
+  leading,
+  label,
+  trailing,
+  showNotificationDot,
+  notificationDotClassName,
+  notificationDotTone = 'default',
+}: Pick<
+  NavTabProps,
+  | 'leading'
+  | 'label'
+  | 'trailing'
+  | 'showNotificationDot'
+  | 'notificationDotClassName'
+  | 'notificationDotTone'
+>): ReactNode {
+  return (
+    <>
+      {leading}
+      <span className={WORKSPACE_TAB_LABEL_CLASS}>{label}</span>
+      {trailing}
+      {showNotificationDot && (
+        <span
+          className={cn(
+            'shrink-0 rounded-full transition-all duration-300',
+            notificationDotTone === 'attention'
+              ? 'bg-text-error'
+              : 'bg-red-500',
+            notificationDotClassName
+          )}
+          aria-hidden
+        />
+      )}
+    </>
+  );
+}
+
+/**
+ * Project page sidebar rail tab: leading icon, label, optional trailing chip, optional dot, optional split suffix.
+ * Add new tabs by composing `leading` / `trailing` / `suffix`; use `layout="split"` when the row needs a separate end control.
+ */
+export function NavTab({
+  active,
+  onClick,
+  leading,
+  label,
+  trailing,
+  showNotificationDot,
+  notificationDotClassName,
+  notificationDotTone = 'default',
+  layout = 'simple',
+  suffix,
+  collapsed,
+  tooltip,
+  tooltipEnabledWhenCollapsed = false,
+  ariaLabel,
+  ariaCurrentPage,
+  className,
+  mainButtonClassName,
+}: NavTabProps) {
+  const inner = tabMainInner({
+    leading,
+    label,
+    trailing,
+    showNotificationDot,
+    notificationDotClassName,
+    notificationDotTone,
+  });
+
+  const tooltipEnabled = tooltipEnabledWhenCollapsed ? collapsed : true;
+
+  if (layout === 'split') {
+    return (
+      <TooltipSimple
+        content={tooltip}
+        side="right"
+        align="center"
+        enabled={tooltipEnabled}
+      >
+        <div
+          className={cn(
+            workspaceTabButtonClass(active),
+            SPLIT_OUTER_EXTRA_CLASS,
+            className
+          )}
+        >
+          <button
+            type="button"
+            onClick={onClick}
+            className={cn(SPLIT_MAIN_BUTTON_CLASS, mainButtonClassName)}
+            aria-label={ariaLabel}
+            aria-current={ariaCurrentPage ? 'page' : undefined}
+          >
+            {inner}
+          </button>
+          {suffix}
+        </div>
+      </TooltipSimple>
+    );
+  }
+
+  return (
+    <TooltipSimple
+      content={tooltip}
+      side="right"
+      align="center"
+      enabled={tooltipEnabled}
+    >
+      <button
+        type="button"
+        onClick={onClick}
+        className={cn(workspaceTabButtonClass(active), className)}
+        aria-label={ariaLabel}
+        aria-current={ariaCurrentPage ? 'page' : undefined}
+      >
+        {inner}
+      </button>
+    </TooltipSimple>
+  );
+}
diff --git a/src/components/ProjectPageSidebar/index.tsx b/src/components/ProjectPageSidebar/index.tsx
new file mode 100644
index 000000000..ea111b7ea
--- /dev/null
+++ b/src/components/ProjectPageSidebar/index.tsx
@@ -0,0 +1,643 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { proxyFetchGet } from '@/api/http';
+import { GlobalSearchDialog } from '@/components/GlobalSearch';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogContentSection,
+  DialogHeader,
+} from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+import { useAuthStore } from '@/store/authStore';
+import type { ChatStore } from '@/store/chatStore';
+import { usePageTabStore } from '@/store/pageTabStore';
+import { useProjectStore } from '@/store/projectStore';
+import { useSidebarStore } from '@/store/sidebarStore';
+import { useTriggerStore } from '@/store/triggerStore';
+import { motion } from 'framer-motion';
+import {
+  Inbox,
+  LayoutGrid,
+  MonitorSmartphone,
+  Zap,
+  ZapOff,
+} from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import { BottomAction } from './BottomAction';
+import { HeaderAction } from './HeaderAction';
+import {
+  NavTab,
+  NavTabReconnectSuffix,
+  triggerListenerLeadIconClass,
+} from './NavTab';
+
+/** Match History.tsx tab normalization for sidebar “active hub” styling */
+const HISTORY_TAB_ALIASES: Record<string, string> = {
+  mcp_tools: 'connectors',
+};
+
+const SUPPORT_EMAIL = 'info@eigent.ai';
+const GITHUB_NEW_ISSUE_URL =
+  'https://github.com/eigent-ai/eigent/issues/new/choose';
+
+function humanizeCloudModelId(id: string): string {
+  return id.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function capitalizeFirstLetter(text: string): string {
+  const s = text.trim();
+  if (!s) return text;
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+function normalizeFolderPath(p: string): string {
+  return p.replace(/\\/g, '/').replace(/\/+$/, '').toLowerCase();
+}
+
+function folderPathBasename(path: string): string {
+  const normalized = path.replace(/\\/g, '/').replace(/\/$/, '');
+  const parts = normalized.split('/').filter(Boolean);
+  return parts[parts.length - 1] || normalized;
+}
+
+const PROJECT_SIDEBAR_WIDTH_PX = 200;
+/** Folded rail: tab row needs pl-3 + icon + pr-3 (no outer sidebar horizontal padding). */
+const PROJECT_SIDEBAR_FOLDED_WIDTH_PX = 40;
+/** Matches Home main panel layout animation */
+const PROJECT_SIDEBAR_SPRING = {
+  type: 'spring' as const,
+  stiffness: 380,
+  damping: 38,
+  mass: 0.85,
+};
+
+const SIDEBAR_EDGE_MARGIN_PX = 8;
+
+/** Tween for properties that don’t interpolate well with springs (grid template, height auto). */
+const SIDEBAR_LAYOUT_TWEEN = {
+  duration: 0.34,
+  ease: [0.22, 1, 0.36, 1] as [number, number, number, number],
+};
+
+export interface ProjectPageSidebarProps {
+  chatStore: ChatStore;
+  className?: string;
+}
+
+export default function ProjectPageSidebar({
+  chatStore,
+  className,
+}: ProjectPageSidebarProps) {
+  const collapsed = usePageTabStore((s) => s.projectSidebarCollapsed);
+  const toggleProjectSidebarCollapsed = usePageTabStore(
+    (s) => s.toggleProjectSidebarCollapsed
+  );
+  const activeWorkspaceTab = usePageTabStore((s) => s.activeWorkspaceTab);
+  const setActiveWorkspaceTab = usePageTabStore((s) => s.setActiveWorkspaceTab);
+  const unviewedTabs = usePageTabStore((s) => s.unviewedTabs);
+  const inboxUnviewedForProjects = usePageTabStore(
+    (s) => s.inboxUnviewedForProjects
+  );
+  const wsConnectionStatus = useTriggerStore((s) => s.wsConnectionStatus);
+  const triggerReconnect = useTriggerStore((s) => s.triggerReconnect);
+  const triggersListenerConnected = wsConnectionStatus === 'connected';
+  const showTriggersDisconnectedTag =
+    wsConnectionStatus === 'disconnected' || wsConnectionStatus === 'unhealthy';
+  const projectStore = useProjectStore();
+  const activeProjectId = projectStore.activeProjectId;
+  const folderTabHasUnviewedFiles =
+    !!activeProjectId && inboxUnviewedForProjects.has(activeProjectId);
+  const customFolderPath = usePageTabStore((s) =>
+    activeProjectId
+      ? s.customAgentFolderPathByProjectId[activeProjectId]
+      : undefined
+  );
+  const historySidebarOpen = useSidebarStore((s) => s.isOpen);
+  const toggleHistorySidebar = useSidebarStore((s) => s.toggle);
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [globalSearchOpen, setGlobalSearchOpen] = useState(false);
+  const [skillsMenuOpen, setSkillsMenuOpen] = useState(false);
+  const [connectorsMenuOpen, setConnectorsMenuOpen] = useState(false);
+  const [browserMenuOpen, setBrowserMenuOpen] = useState(false);
+  const [helpMenuOpen, setHelpMenuOpen] = useState(false);
+
+  const { skillsHubActive, connectorsHubActive, browserHubActive } =
+    useMemo(() => {
+      const path = location.pathname.replace(/\/$/, '');
+      const onHistory = path === '/history' || path.endsWith('/history');
+      const params = new URLSearchParams(location.search);
+      const rawTab = params.get('tab');
+      const tab = rawTab ? (HISTORY_TAB_ALIASES[rawTab] ?? rawTab) : null;
+      const section = params.get('section');
+      return {
+        skillsHubActive: onHistory && tab === 'agents' && section === 'skills',
+        connectorsHubActive: onHistory && tab === 'connectors',
+        browserHubActive: onHistory && tab === 'browser',
+      };
+    }, [location.pathname, location.search]);
+
+  const triggersTabTooltip = useMemo(() => {
+    const base = t('layout.triggers');
+    if (!collapsed) return base;
+    if (triggersListenerConnected) return base;
+    if (wsConnectionStatus === 'connecting') {
+      return `${base} — ${t('layout.triggers-connecting')}`;
+    }
+    if (wsConnectionStatus === 'unhealthy') {
+      return `${base} — ${t('layout.triggers-disconnected')}`;
+    }
+    return `${base} — ${t('layout.triggers-disconnected')}`;
+  }, [collapsed, t, triggersListenerConnected, wsConnectionStatus]);
+
+  const triggersTabAriaLabel = useMemo(() => {
+    const base = t('layout.triggers');
+    if (triggersListenerConnected) return base;
+    if (wsConnectionStatus === 'connecting') {
+      return `${base}, ${t('layout.triggers-connecting')}`;
+    }
+    return `${base}, ${t('layout.triggers-disconnected')}`;
+  }, [t, triggersListenerConnected, wsConnectionStatus]);
+
+  const authToken = useAuthStore((s) => s.token);
+  const email = useAuthStore((s) => s.email);
+  const modelType = useAuthStore((s) => s.modelType);
+  const cloud_model_type = useAuthStore((s) => s.cloud_model_type);
+
+  const [resolvedDefaultFolderPath, setResolvedDefaultFolderPath] = useState<
+    string | null
+  >(null);
+
+  const [credits, setCredits] = useState<number | null>(null);
+  const [customPlatformName, setCustomPlatformName] = useState<string | null>(
+    null
+  );
+  const [supportDialogOpen, setSupportDialogOpen] = useState(false);
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setGlobalSearchOpen(true);
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, []);
+
+  useEffect(() => {
+    if (import.meta.env.VITE_USE_LOCAL_PROXY === 'true') {
+      setCredits(null);
+      return;
+    }
+    if (modelType !== 'cloud' || !authToken) {
+      setCredits(null);
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await proxyFetchGet('/api/v1/user/current_credits');
+        if (!cancelled) {
+          const c = res?.credits;
+          setCredits(typeof c === 'number' ? c : null);
+        }
+      } catch {
+        if (!cancelled) setCredits(null);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [authToken, modelType]);
+
+  useEffect(() => {
+    if (modelType !== 'custom') {
+      setCustomPlatformName(null);
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await proxyFetchGet('/api/v1/providers', {
+          prefer: true,
+        });
+        const provider = res?.items?.[0];
+        const raw =
+          typeof provider?.provider_name === 'string'
+            ? provider.provider_name.trim()
+            : '';
+        if (!cancelled) {
+          setCustomPlatformName(raw || null);
+        }
+      } catch {
+        if (!cancelled) setCustomPlatformName(null);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [modelType, authToken]);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!email || !activeProjectId) {
+      setResolvedDefaultFolderPath(null);
+      return;
+    }
+    if (typeof window.electronAPI?.getProjectFolderPath !== 'function') {
+      setResolvedDefaultFolderPath(null);
+      return;
+    }
+    void window.electronAPI
+      .getProjectFolderPath(email, activeProjectId)
+      .then((p: string) => {
+        if (!cancelled) setResolvedDefaultFolderPath(p || null);
+      })
+      .catch(() => {
+        if (!cancelled) setResolvedDefaultFolderPath(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [email, activeProjectId]);
+
+  const folderSettingTagLabel = useMemo(() => {
+    const custom = customFolderPath?.trim();
+    if (!custom) return t('layout.default');
+    const def = resolvedDefaultFolderPath?.trim();
+    if (def && normalizeFolderPath(custom) === normalizeFolderPath(def)) {
+      return t('layout.default');
+    }
+    return folderPathBasename(custom);
+  }, [customFolderPath, resolvedDefaultFolderPath, t]);
+
+  const downloadLogs = async () => {
+    try {
+      const response = await window.electronAPI.exportLog();
+      if (!response.success) {
+        alert(t('layout.export-cancelled') + response.error);
+        return;
+      }
+      if (response.savedPath) {
+        toast.success(t('layout.log-saved') + response.savedPath);
+      }
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e);
+      alert(t('layout.export-error') + msg);
+    }
+  };
+
+  const reportBugOpenGithub = async () => {
+    try {
+      const response = await window.electronAPI.exportLog();
+      if (!response.success) {
+        alert(t('layout.export-cancelled') + response.error);
+        return;
+      }
+      if (response.savedPath) {
+        window.location.href = GITHUB_NEW_ISSUE_URL;
+        alert(t('layout.log-saved') + response.savedPath);
+      }
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e);
+      alert(t('layout.export-error') + msg);
+    }
+  };
+
+  const copySupportEmail = async () => {
+    try {
+      await navigator.clipboard.writeText(SUPPORT_EMAIL);
+      toast.success(
+        t('layout.email-copied', {
+          defaultValue: 'Email copied to clipboard',
+        })
+      );
+    } catch {
+      toast.error(
+        t('layout.copy-failed', {
+          defaultValue: 'Could not copy email',
+        })
+      );
+    }
+  };
+
+  const modelModeLine = useMemo(() => {
+    if (modelType === 'cloud') {
+      return t('setting.eigent-cloud');
+    }
+    if (modelType === 'custom') {
+      return t('setting.custom-model');
+    }
+    return t('setting.local-model');
+  }, [modelType, t]);
+
+  const modelDetailLine = useMemo(() => {
+    if (modelType === 'cloud') {
+      const modelLabel = humanizeCloudModelId(cloud_model_type);
+      if (import.meta.env.VITE_USE_LOCAL_PROXY === 'true') {
+        return t('layout.sidebar-model-manage-hint', {
+          defaultValue: 'Manage in Agents → Models',
+        });
+      }
+      if (credits != null) {
+        return `${modelLabel} · ${t('setting.credits')}: ${credits.toLocaleString()}`;
+      }
+      return `${modelLabel} · ${t('setting.credits')}: …`;
+    }
+    if (modelType === 'custom') {
+      if (customPlatformName) {
+        return capitalizeFirstLetter(customPlatformName);
+      }
+      return t('layout.sidebar-custom-platform-unknown', {
+        defaultValue: '—',
+      });
+    }
+    return t('layout.sidebar-model-manage-hint', {
+      defaultValue: 'Manage in Agents → Models',
+    });
+  }, [modelType, credits, customPlatformName, cloud_model_type, t]);
+
+  const summaryTask =
+    chatStore.tasks[chatStore.activeTaskId as string]?.summaryTask;
+  const activeTaskTitle = useMemo(() => {
+    if (chatStore.activeTaskId && summaryTask) {
+      return summaryTask.split('|')[0];
+    }
+    return t('layout.new-project');
+  }, [chatStore.activeTaskId, summaryTask, t]);
+
+  const createNewProject = () => {
+    projectStore.createProject('new project');
+    setActiveWorkspaceTab('workforce');
+    navigate('/');
+  };
+
+  return (
+    <>
+      <Dialog open={supportDialogOpen} onOpenChange={setSupportDialogOpen}>
+        <DialogContent
+          size="sm"
+          showCloseButton
+          onClose={() => setSupportDialogOpen(false)}
+        >
+          <DialogHeader
+            title={t('layout.contact-support')}
+            subtitle={t('layout.contact-support-description')}
+          />
+          <DialogContentSection className="gap-3 flex flex-col">
+            <p className="text-label-sm text-text-label">
+              {t('layout.contact-support-body', {
+                defaultValue: 'Copy our support email and reach out anytime.',
+              })}
+            </p>
+            <div className="gap-2 flex flex-wrap items-center">
+              <code className="text-body-sm bg-surface-secondary text-text-body rounded-lg px-3 py-2 font-medium max-w-full truncate">
+                {SUPPORT_EMAIL}
+              </code>
+              <Button type="button" size="sm" onClick={copySupportEmail}>
+                {t('layout.copy-email', { defaultValue: 'Copy email' })}
+              </Button>
+            </div>
+          </DialogContentSection>
+        </DialogContent>
+      </Dialog>
+
+      <GlobalSearchDialog
+        open={globalSearchOpen}
+        onOpenChange={setGlobalSearchOpen}
+      />
+
+      <motion.aside
+        initial={false}
+        animate={{
+          width: collapsed
+            ? PROJECT_SIDEBAR_FOLDED_WIDTH_PX
+            : PROJECT_SIDEBAR_WIDTH_PX,
+          marginRight: SIDEBAR_EDGE_MARGIN_PX,
+          paddingTop: 8,
+          paddingBottom: 4,
+        }}
+        transition={PROJECT_SIDEBAR_SPRING}
+        className={cn(
+          'min-h-0 flex h-full shrink-0 flex-col overflow-hidden',
+          className
+        )}
+      >
+        <div className="min-h-0 min-w-0 flex h-full w-full flex-col overflow-x-hidden">
+          <div className="gap-2 flex w-full shrink-0 flex-col">
+            <HeaderAction
+              collapsed={collapsed}
+              onToggleCollapsed={toggleProjectSidebarCollapsed}
+              expandAriaLabel={t('layout.expand-sidebar', {
+                defaultValue: 'Expand sidebar',
+              })}
+              expandTooltip={t('layout.expand-sidebar', {
+                defaultValue: 'Expand sidebar',
+              })}
+              collapseAriaLabel={t('layout.collapse-sidebar', {
+                defaultValue: 'Collapse sidebar',
+              })}
+              collapseTooltip={t('layout.collapse-sidebar', {
+                defaultValue: 'Collapse sidebar',
+              })}
+              historySidebarOpen={historySidebarOpen}
+              activeTaskTitle={activeTaskTitle}
+              onCenterClick={toggleHistorySidebar}
+              newProjectAriaLabel={t('layout.new-project')}
+              newProjectTooltip={t('layout.new-project')}
+              onNewProject={createNewProject}
+            />
+
+            <div className="gap-2 min-w-0 flex w-full flex-col">
+              <NavTab
+                active={activeWorkspaceTab === 'workforce'}
+                onClick={() => setActiveWorkspaceTab('workforce')}
+                leading={
+                  <LayoutGrid
+                    className="h-4 w-4 text-icon-primary shrink-0"
+                    aria-hidden
+                  />
+                }
+                label={t('triggers.workspace')}
+                collapsed={collapsed}
+                tooltip={t('triggers.workspace')}
+                tooltipEnabledWhenCollapsed
+                ariaLabel={t('triggers.workspace')}
+                ariaCurrentPage={activeWorkspaceTab === 'workforce'}
+              />
+              <NavTab
+                active={activeWorkspaceTab === 'inbox'}
+                onClick={() => {
+                  if (chatStore.activeTaskId) {
+                    chatStore.setNuwFileNum(chatStore.activeTaskId, 0);
+                  }
+                  setActiveWorkspaceTab('inbox', {
+                    clearInboxForProjectId: activeProjectId,
+                  });
+                }}
+                leading={
+                  <span className="h-4 w-4 relative inline-flex shrink-0">
+                    <Inbox className="h-4 w-4 text-icon-primary" aria-hidden />
+                    {folderTabHasUnviewedFiles ? (
+                      <span
+                        className="-right-1 -top-1 h-2 w-2 bg-red-500 absolute shrink-0 rounded-full"
+                        aria-hidden
+                      />
+                    ) : null}
+                  </span>
+                }
+                label={t('layout.folder')}
+                trailing={
+                  !collapsed ? (
+                    <span
+                      className="bg-surface-secondary text-text-secondary rounded-md px-1.5 font-medium leading-tight max-w-[5.5rem] shrink-0 truncate py-px text-[10px]"
+                      title={
+                        customFolderPath &&
+                        folderSettingTagLabel !== t('layout.default')
+                          ? customFolderPath
+                          : (resolvedDefaultFolderPath ?? undefined)
+                      }
+                    >
+                      {folderSettingTagLabel}
+                    </span>
+                  ) : undefined
+                }
+                collapsed={collapsed}
+                tooltip={
+                  collapsed
+                    ? `${t('layout.folder')} · ${folderSettingTagLabel}`
+                    : t('layout.folder')
+                }
+                tooltipEnabledWhenCollapsed
+                ariaLabel={`${t('layout.folder')}, ${folderSettingTagLabel}`}
+                ariaCurrentPage={activeWorkspaceTab === 'inbox'}
+              />
+              <NavTab
+                layout="split"
+                active={activeWorkspaceTab === 'triggers'}
+                onClick={() => setActiveWorkspaceTab('triggers')}
+                leading={
+                  triggersListenerConnected ? (
+                    <Zap
+                      className={cn(
+                        'h-4 w-4 shrink-0',
+                        triggerListenerLeadIconClass(wsConnectionStatus)
+                      )}
+                      aria-hidden
+                    />
+                  ) : (
+                    <ZapOff
+                      className={cn(
+                        'h-4 w-4 shrink-0',
+                        triggerListenerLeadIconClass(wsConnectionStatus)
+                      )}
+                      aria-hidden
+                    />
+                  )
+                }
+                label={t('layout.triggers')}
+                trailing={
+                  !collapsed && showTriggersDisconnectedTag ? (
+                    <span className="bg-surface-secondary text-text-error rounded-md px-1.5 font-medium leading-tight max-w-[5.5rem] shrink-0 truncate py-px text-[10px]">
+                      {t('layout.triggers-disconnected')}
+                    </span>
+                  ) : undefined
+                }
+                showNotificationDot={unviewedTabs.has('triggers')}
+                notificationDotTone="attention"
+                notificationDotClassName={
+                  collapsed ? 'top-1 right-1 h-2 w-2 absolute' : 'h-2 w-2'
+                }
+                suffix={
+                  wsConnectionStatus !== 'connected' && !collapsed ? (
+                    <NavTabReconnectSuffix
+                      wsConnectionStatus={wsConnectionStatus}
+                      reconnectHint={t('layout.triggers-reconnect-hint')}
+                      reconnectButtonLabel={t(
+                        'layout.triggers-listener-reconnect'
+                      )}
+                      onReconnect={triggerReconnect}
+                    />
+                  ) : undefined
+                }
+                collapsed={collapsed}
+                tooltip={triggersTabTooltip}
+                tooltipEnabledWhenCollapsed
+                ariaLabel={triggersTabAriaLabel}
+                ariaCurrentPage={activeWorkspaceTab === 'triggers'}
+              />
+              <NavTab
+                active={false}
+                onClick={() => void 0}
+                leading={
+                  <MonitorSmartphone
+                    className="h-4 w-4 text-icon-primary shrink-0"
+                    aria-hidden
+                  />
+                }
+                label={t('layout.sidebar-dispatch', {
+                  defaultValue: 'Dispatch',
+                })}
+                collapsed={collapsed}
+                tooltip={t('layout.sidebar-dispatch', {
+                  defaultValue: 'Dispatch',
+                })}
+                tooltipEnabledWhenCollapsed
+                ariaLabel={t('layout.sidebar-dispatch', {
+                  defaultValue: 'Dispatch',
+                })}
+              />
+            </div>
+          </div>
+
+          <BottomAction
+            collapsed={collapsed}
+            onOpenModels={() => navigate('/history?tab=agents&section=models')}
+            modelsAriaLabel={t('setting.models')}
+            modelModeLine={modelModeLine}
+            modelDetailLine={modelDetailLine}
+            helpMenuOpen={helpMenuOpen}
+            onHelpMenuOpenChange={setHelpMenuOpen}
+            helpAriaLabel={t('layout.help-and-support', {
+              defaultValue: 'Help and support',
+            })}
+            helpLabel={t('layout.sidebar-help-label', {
+              defaultValue: 'Support',
+            })}
+            onContactSupport={() => setSupportDialogOpen(true)}
+            onReportBug={() => {
+              void reportBugOpenGithub();
+            }}
+            onDownloadLogs={() => {
+              void downloadLogs();
+            }}
+            contactSupportLabel={t('layout.contact-support')}
+            reportBugLabel={t('layout.report-bug')}
+            downloadLogsLabel={t('layout.download-logs', {
+              defaultValue: 'Download logs',
+            })}
+          />
+        </div>
+      </motion.aside>
+    </>
+  );
+}
diff --git a/src/components/SearchInput/index.tsx b/src/components/SearchInput/index.tsx
index 43e27a2ae..d314f23ab 100644
--- a/src/components/SearchInput/index.tsx
+++ b/src/components/SearchInput/index.tsx
@@ -106,7 +106,8 @@ export default function SearchInput({
                 <Button
                   type="button"
                   variant="ghost"
-                  size="icon"
+                  size="xs"
+                  buttonContent="icon-only"
                   onClick={expand}
                   aria-label={searchLabel}
                 >
@@ -146,7 +147,8 @@ export default function SearchInput({
                 <Button
                   type="button"
                   variant="ghost"
-                  size="icon"
+                  size="xs"
+                  buttonContent="icon-only"
                   className="text-icon-secondary shrink-0 rounded-full"
                   onClick={collapse}
                   aria-label={clearLabel}
diff --git a/src/components/TerminalAgentWorkspace/index.tsx b/src/components/TerminalAgentWorkspace/index.tsx
index 54cf8e250..4f7bd7220 100644
--- a/src/components/TerminalAgentWorkspace/index.tsx
+++ b/src/components/TerminalAgentWorkspace/index.tsx
@@ -113,9 +113,9 @@ export default function TerminalAgentWorkspace() {
   };
 
   return isTakeControl ? (
-    <div className="flex h-full w-full flex-col items-center justify-start border border-solid border-border-success bg-menutabs-bg-default">
-      <div className="flex w-full items-start justify-start p-sm">
-        <div className="rounded-full border border-solid border-border-primary bg-transparent p-1">
+    <div className="border-border-success bg-menutabs-bg-default flex h-full w-full flex-col items-center justify-start border border-solid">
+      <div className="p-sm flex w-full items-start justify-start">
+        <div className="border-border-primary p-1 rounded-full border border-solid bg-transparent">
           <Button
             size="sm"
             variant="success"
@@ -139,13 +139,14 @@ export default function TerminalAgentWorkspace() {
     </div>
   ) : (
     <div
-      className={`flex h-full w-full flex-1 items-center justify-center transition-all duration-300 ease-in-out`}
+      className={`ease-in-out flex h-full w-full flex-1 items-center justify-center transition-all duration-300`}
     >
-      <div className="blur-bg relative flex h-full w-full flex-col overflow-hidden rounded-xl bg-surface-secondary">
-        <div className="flex flex-shrink-0 items-center justify-between rounded-t-2xl px-2 pb-2 pt-3">
-          <div className="flex items-center justify-start gap-sm">
+      <div className="blur-bg rounded-xl bg-surface-secondary relative flex h-full w-full flex-col overflow-hidden">
+        <div className="rounded-t-2xl px-2 pb-2 pt-3 flex flex-shrink-0 items-center justify-between">
+          <div className="gap-sm flex items-center justify-start">
             <Button
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               variant="ghost"
               onClick={() => {
                 chatStore.setActiveWorkspace(
@@ -157,14 +158,14 @@ export default function TerminalAgentWorkspace() {
               <ChevronLeft size={16} />
             </Button>
             <div
-              className={`flex h-[26px] items-center gap-xs rounded-lg px-2 py-0.5 ${
+              className={`gap-xs rounded-lg px-2 py-0.5 flex h-[26px] items-center ${
                 agentMap[activeAgent?.type as keyof typeof agentMap]
                   ?.bgColorLight
               }`}
             >
               <Bot className="h-4 w-4 text-icon-primary" />
               <div
-                className={`text-[10px] font-bold leading-17 ${
+                className={`font-bold leading-17 text-[10px] ${
                   agentMap[activeAgent?.type as keyof typeof agentMap]
                     ?.textColor
                 }`}
@@ -172,7 +173,7 @@ export default function TerminalAgentWorkspace() {
                 {agentMap[activeAgent?.type as keyof typeof agentMap]?.name}
               </div>
             </div>
-            <div className="text-[10px] font-medium leading-17 text-text-tertiary">
+            <div className="font-medium leading-17 text-text-tertiary text-[10px]">
               {
                 activeAgent?.tasks?.filter(
                   (task) => task.status && task.status !== 'running'
@@ -181,7 +182,7 @@ export default function TerminalAgentWorkspace() {
               /{activeAgent?.tasks?.length}
             </div>
           </div>
-          <Button size="icon" variant="ghost">
+          <Button size="xs" buttonContent="icon-only" variant="ghost">
             <Settings2 size={16} />
           </Button>
         </div>
@@ -199,7 +200,7 @@ export default function TerminalAgentWorkspace() {
                 // 		activeAgent?.activeWebviewIds?.[0]?.id || ""
                 // 	)
                 // }
-                className="group relative h-full w-full cursor-pointer rounded-b-2xl pt-sm"
+                className="group rounded-b-2xl pt-sm relative h-full w-full cursor-pointer"
               >
                 <Terminal
                   instanceId={activeAgent?.activeWebviewIds?.[0]?.id}
@@ -228,7 +229,7 @@ export default function TerminalAgentWorkspace() {
               ref={scrollContainerRef}
               className={`${
                 isSingleMode ? 'px-0' : 'px-2 pb-2'
-              } scrollbar relative flex min-h-0 flex-1 flex-wrap justify-start gap-4 overflow-y-auto`}
+              } scrollbar min-h-0 gap-4 relative flex flex-1 flex-wrap justify-start overflow-y-auto`}
             >
               {activeAgent?.tasks
                 .filter((task) => task?.terminal && task?.terminal.length > 0)
@@ -236,7 +237,7 @@ export default function TerminalAgentWorkspace() {
                   return (
                     <div
                       key={task.id}
-                      className={`card-box group relative cursor-pointer rounded-lg ${
+                      className={`card-box group rounded-lg relative cursor-pointer ${
                         isSingleMode
                           ? 'h-[calc(100%)] w-[calc(100%)]'
                           : 'h-[calc(50%-8px)] w-[calc(50%-8px)]'
@@ -266,10 +267,11 @@ export default function TerminalAgentWorkspace() {
         {activeAgent?.tasks.filter(
           (task) => task?.terminal && task?.terminal.length > 0
         ).length !== 1 && (
-          <div className="absolute bottom-2 right-2 z-[200] flex w-auto items-center gap-1 rounded-lg border border-solid border-border-primary bg-menutabs-bg-default p-1">
+          <div className="bottom-2 right-2 gap-1 rounded-lg border-border-primary bg-menutabs-bg-default p-1 absolute z-[200] flex w-auto items-center border border-solid">
             {isSingleMode && (
               <Button
-                size="icon"
+                size="xs"
+                buttonContent="icon-only"
                 variant="ghost"
                 onClick={() => {
                   if (scrollContainerRef.current) {
@@ -295,7 +297,8 @@ export default function TerminalAgentWorkspace() {
             )}
             {isSingleMode && (
               <Button
-                size="icon"
+                size="xs"
+                buttonContent="icon-only"
                 variant="ghost"
                 onClick={() => {
                   if (scrollContainerRef.current) {
@@ -317,7 +320,8 @@ export default function TerminalAgentWorkspace() {
               </Button>
             )}
             <Button
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               variant="ghost"
               onClick={() => {
                 setIsSingleMode(!isSingleMode);
diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx
index 1dc18956b..81ac691cc 100644
--- a/src/components/TopBar/index.tsx
+++ b/src/components/TopBar/index.tsx
@@ -18,7 +18,6 @@ import {
   proxyFetchDelete,
   proxyFetchGet,
 } from '@/api/http';
-import defaultFolderIcon from '@/assets/Folder.svg';
 import giftWhiteIcon from '@/assets/gift-white.svg';
 import giftIcon from '@/assets/gift.svg';
 import EndNoticeDialog from '@/components/Dialog/EndNotice';
@@ -32,22 +31,84 @@ import { usePageTabStore } from '@/store/pageTabStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { ChatTaskStatus } from '@/types/constants';
 import {
-  ChevronDown,
   ChevronLeft,
-  FileDown,
+  ChevronRight,
   House,
   Minus,
   Plus,
   Power,
   Settings,
+  Share,
+  Sparkles,
   Square,
   X,
 } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import {
+  NavigationType,
+  useLocation,
+  useNavigate,
+  useNavigationType,
+} from 'react-router-dom';
 import { toast } from 'sonner';
 
+/** Tracks linear in-app history so back/forward buttons can enable/disable like a browser. */
+function useStackNavigationBounds() {
+  const location = useLocation();
+  const navigationType = useNavigationType();
+  const seededRef = useRef(false);
+  const stackRef = useRef<string[]>([]);
+  const indexRef = useRef(0);
+  const [bounds, setBounds] = useState({
+    canGoBack: false,
+    canGoForward: false,
+  });
+
+  useEffect(() => {
+    const fullPath = `${location.pathname}${location.search}`;
+
+    if (!seededRef.current) {
+      seededRef.current = true;
+      stackRef.current = [fullPath];
+      indexRef.current = 0;
+      setBounds({ canGoBack: false, canGoForward: false });
+      return;
+    }
+
+    if (navigationType === NavigationType.Push) {
+      const stack = stackRef.current;
+      const idx = indexRef.current;
+      stackRef.current = [...stack.slice(0, idx + 1), fullPath];
+      indexRef.current = stackRef.current.length - 1;
+    } else if (navigationType === NavigationType.Replace) {
+      stackRef.current[indexRef.current] = fullPath;
+    } else {
+      const stack = stackRef.current;
+      let idx = indexRef.current;
+      if (idx > 0 && stack[idx - 1] === fullPath) {
+        indexRef.current = idx - 1;
+      } else if (idx < stack.length - 1 && stack[idx + 1] === fullPath) {
+        indexRef.current = idx + 1;
+      } else {
+        const found = stack.lastIndexOf(fullPath);
+        if (found !== -1) {
+          indexRef.current = found;
+        }
+      }
+    }
+
+    const i = indexRef.current;
+    const s = stackRef.current;
+    setBounds({
+      canGoBack: i > 0,
+      canGoForward: i < s.length - 1,
+    });
+  }, [location.pathname, location.search, navigationType]);
+
+  return bounds;
+}
+
 function HeaderWin() {
   const { t } = useTranslation();
   const titlebarRef = useRef<HTMLDivElement>(null);
@@ -55,10 +116,15 @@ function HeaderWin() {
   const [platform, setPlatform] = useState<string>('');
   const navigate = useNavigate();
   const location = useLocation();
+  const { canGoBack, canGoForward } = useStackNavigationBounds();
   //Get Chatstore for the active project's task
   const { chatStore, projectStore } = useChatStoreAdapter();
-  const { toggle } = useSidebarStore();
   const { chatPanelPosition, setChatPanelPosition } = usePageTabStore();
+  const projectSidebarCollapsed = usePageTabStore(
+    (s) => s.projectSidebarCollapsed
+  );
+  const historySidebarOpen = useSidebarStore((s) => s.isOpen);
+  const toggleHistorySidebar = useSidebarStore((s) => s.toggle);
   const appearance = useAuthStore((state) => state.appearance);
   const [endDialogOpen, setEndDialogOpen] = useState(false);
   const [endProjectLoading, setEndProjectLoading] = useState(false);
@@ -70,23 +136,6 @@ function HeaderWin() {
     const p = window.electronAPI.getPlatform();
     setPlatform(p);
   }, []);
-  const exportLog = async () => {
-    try {
-      const response = await window.electronAPI.exportLog();
-
-      if (!response.success) {
-        alert(t('layout.export-cancelled') + response.error);
-        return;
-      }
-      if (response.savedPath) {
-        window.location.href =
-          'https://github.com/eigent-ai/eigent/issues/new/choose';
-        alert(t('layout.log-saved') + response.savedPath);
-      }
-    } catch (e: any) {
-      alert(t('layout.export-error') + e.message);
-    }
-  };
 
   // create new project handler reused by plus icon and label
   const createNewProject = () => {
@@ -97,13 +146,18 @@ function HeaderWin() {
 
   const summaryTask =
     chatStore?.tasks[chatStore?.activeTaskId as string]?.summaryTask;
-
   const activeTaskTitle = useMemo(() => {
-    if (chatStore?.activeTaskId && summaryTask) {
+    if (!chatStore) return t('layout.new-project');
+    if (chatStore.activeTaskId && summaryTask) {
       return summaryTask.split('|')[0];
     }
     return t('layout.new-project');
-  }, [chatStore?.activeTaskId, summaryTask, t]);
+  }, [chatStore, summaryTask, t]);
+
+  const isHistoryRoute = useMemo(() => {
+    const path = location.pathname.replace(/\/$/, '') || '/';
+    return path === '/history' || path.endsWith('/history');
+  }, [location.pathname]);
 
   if (!chatStore) {
     return <div>Loading...</div>;
@@ -201,43 +255,66 @@ function HeaderWin() {
 
   return (
     <div
-      className={`drag absolute left-0 right-0 top-0 z-50 flex !h-9 items-center justify-between py-1 ${
+      className={`drag left-0 right-0 top-0 !h-9 py-1 absolute z-50 flex items-center justify-between ${
         platform === 'darwin' ? 'pl-16' : 'pl-2'
       }`}
       id="titlebar"
       ref={titlebarRef}
     >
-      {/* left */}
-      <div
-        className={`no-drag ml-2 mt-[1.5px] flex items-center justify-center gap-1 ${platform === 'darwin' ? 'w-8' : 'w-auto pr-4'}`}
-      >
-        <img src={defaultFolderIcon} alt="folder-icon" className="h-6 w-6" />
-        {platform !== 'darwin' && (
-          <span className="whitespace-nowrap text-label-md font-bold text-text-heading">
+      {/* left — macOS uses pl-16 for traffic lights only; no extra spacer */}
+      {platform !== 'darwin' && (
+        <div className="no-drag ml-2 gap-1 pr-4 mt-[1.5px] flex w-auto items-center justify-center">
+          <span className="text-label-md font-bold text-text-heading whitespace-nowrap">
             Eigent
           </span>
-        )}
-      </div>
+        </div>
+      )}
 
       {/* center */}
-      <div className="drag flex h-full flex-1 items-center justify-between pr-2">
+      <div className="drag pr-2 flex h-full flex-1 items-center justify-between">
         <div className="relative z-50 flex h-full items-center">
-          {location.pathname === '/history' && (
-            <div className="mr-1 flex items-center">
-              <Button
-                variant="ghost"
-                size="xs"
-                className="no-drag rounded-full"
-                onClick={() => navigate('/')}
-              >
-                <ChevronLeft className="h-4 w-4 text-text-label" />
-              </Button>
-            </div>
-          )}
-          {location.pathname !== '/history' && (
+          <div className="no-drag gap-2 pl-2 flex items-center">
             <div className="flex items-center">
+              {isHistoryRoute ? (
+                <TooltipSimple
+                  content={t('layout.home')}
+                  side="bottom"
+                  align="center"
+                >
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="no-drag rounded-full"
+                    onClick={() => navigate('/')}
+                    aria-label={t('layout.home')}
+                    aria-current="page"
+                  >
+                    <Sparkles
+                      className="h-4 w-4 text-icon-primary"
+                      aria-hidden
+                    />
+                  </Button>
+                </TooltipSimple>
+              ) : (
+                <TooltipSimple
+                  content={t('layout.dashboard')}
+                  side="bottom"
+                  align="center"
+                >
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="no-drag rounded-full"
+                    onClick={() => navigate('/history')}
+                    aria-label={t('layout.dashboard')}
+                    aria-current="page"
+                  >
+                    <House className="h-4 w-4 text-icon-primary" aria-hidden />
+                  </Button>
+                </TooltipSimple>
+              )}
               <TooltipSimple
-                content={t('layout.home')}
+                content={t('layout.back')}
                 side="bottom"
                 align="center"
               >
@@ -245,13 +322,18 @@ function HeaderWin() {
                   variant="ghost"
                   size="icon"
                   className="no-drag rounded-full"
-                  onClick={() => navigate('/history')}
+                  disabled={!canGoBack}
+                  onClick={() => navigate(-1)}
+                  aria-label={t('layout.back')}
                 >
-                  <House className="h-4 w-4" />
+                  <ChevronLeft
+                    className="h-4 w-4 text-icon-primary"
+                    aria-hidden
+                  />
                 </Button>
               </TooltipSimple>
               <TooltipSimple
-                content={t('layout.new-project')}
+                content={t('layout.forward')}
                 side="bottom"
                 align="center"
               >
@@ -259,167 +341,148 @@ function HeaderWin() {
                   variant="ghost"
                   size="icon"
                   className="no-drag rounded-full"
-                  onClick={createNewProject}
+                  disabled={!canGoForward}
+                  onClick={() => navigate(1)}
+                  aria-label={t('layout.forward')}
                 >
-                  <Plus className="h-4 w-4" />
+                  <ChevronRight
+                    className="h-4 w-4 text-icon-primary"
+                    aria-hidden
+                  />
                 </Button>
               </TooltipSimple>
             </div>
-          )}
-          {location.pathname !== '/history' && (
-            <>
-              {activeTaskTitle === t('layout.new-project') ? (
+            {location.pathname === '/' && projectSidebarCollapsed && (
+              <div className="no-drag ease-out animate-in fade-in-0 bg-surface-secondary inline-flex items-stretch overflow-hidden rounded-full duration-200">
                 <TooltipSimple
-                  content={t('layout.new-project')}
+                  content={
+                    activeTaskTitle === t('layout.new-project')
+                      ? t('layout.new-project')
+                      : activeTaskTitle
+                  }
                   side="bottom"
                   align="center"
                 >
-                  <Button
+                  <button
                     id="active-task-title-btn"
-                    variant="ghost"
-                    className="no-drag rounded-full text-base font-bold"
-                    onClick={toggle}
-                    size="sm"
+                    type="button"
+                    className="no-drag min-w-0 px-2 text-label-sm font-bold !text-button-transparent-text-default hover:bg-button-transparent-fill-hover active:bg-button-transparent-fill-active focus-visible:ring-ring/50 flex min-h-[28px] max-w-[300px] flex-1 items-center text-left outline-none focus-visible:ring-[3px]"
+                    onClick={toggleHistorySidebar}
+                    aria-expanded={historySidebarOpen}
+                    aria-haspopup="dialog"
                   >
-                    <span className="inline-block max-w-[300px] overflow-hidden text-ellipsis whitespace-nowrap align-middle">
-                      {t('layout.new-project')}
+                    <span className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
+                      {activeTaskTitle}
                     </span>
-                    <ChevronDown />
-                  </Button>
+                  </button>
                 </TooltipSimple>
-              ) : (
                 <TooltipSimple
-                  content={activeTaskTitle}
+                  content={t('layout.new-project')}
                   side="bottom"
                   align="center"
                 >
-                  <Button
-                    id="active-task-title-btn"
-                    variant="ghost"
-                    size="sm"
-                    className="no-drag text-base font-bold"
-                    onClick={toggle}
+                  <button
+                    type="button"
+                    className="no-drag w-8 !text-button-transparent-text-default hover:bg-button-transparent-fill-hover active:bg-button-transparent-fill-active focus-visible:ring-ring/50 box-border flex min-h-[28px] shrink-0 items-center justify-center outline-none focus-visible:ring-[3px]"
+                    onClick={createNewProject}
+                    aria-label={t('layout.new-project')}
                   >
-                    <span className="inline-block max-w-[300px] overflow-hidden text-ellipsis whitespace-nowrap align-middle">
-                      {activeTaskTitle}
-                    </span>
-                    <ChevronDown />
-                  </Button>
+                    <Plus className="h-4 w-4 shrink-0" aria-hidden />
+                  </button>
                 </TooltipSimple>
-              )}
-            </>
-          )}
+              </div>
+            )}
+          </div>
         </div>
 
         {/* right */}
-        {location.pathname !== '/history' && (
-          <div
-            className={`${
-              platform === 'darwin' && 'pr-2'
-            } no-drag relative z-50 flex h-full items-center gap-1`}
-          >
-            {chatStore.activeTaskId &&
-              chatStore.tasks[chatStore.activeTaskId as string] &&
-              ((chatStore.tasks[chatStore.activeTaskId as string]?.messages
-                ?.length || 0) > 0 ||
-                chatStore.tasks[chatStore.activeTaskId as string]
-                  ?.hasMessages ||
-                chatStore.tasks[chatStore.activeTaskId as string]?.status !==
-                  ChatTaskStatus.PENDING) && (
-                <TooltipSimple
-                  content={t('layout.end-project')}
-                  side="bottom"
-                  align="end"
-                >
-                  <Button
-                    onClick={() => setEndDialogOpen(true)}
-                    variant="ghost"
-                    size="xs"
-                    className="no-drag justify-center rounded-full bg-surface-cuation !text-text-cuation"
-                  >
-                    <Power />
-                    {t('layout.end-project')}
-                  </Button>
-                </TooltipSimple>
-              )}
-            {chatStore.activeTaskId &&
-              chatStore.tasks[chatStore.activeTaskId as string]?.status ===
-                ChatTaskStatus.FINISHED && (
-                <TooltipSimple
-                  content={t('layout.share')}
-                  side="bottom"
-                  align="end"
-                >
-                  <Button
-                    onClick={() =>
-                      handleShare(chatStore.activeTaskId as string)
-                    }
-                    variant="ghost"
-                    size="xs"
-                    className="no-drag rounded-full bg-surface-information !text-text-information"
+        <div
+          className={`${
+            platform === 'darwin' && 'pr-2'
+          } no-drag gap-1 relative z-50 flex h-full items-center`}
+        >
+          {location.pathname !== '/history' && (
+            <>
+              {chatStore.activeTaskId &&
+                chatStore.tasks[chatStore.activeTaskId as string] &&
+                ((chatStore.tasks[chatStore.activeTaskId as string]?.messages
+                  ?.length || 0) > 0 ||
+                  chatStore.tasks[chatStore.activeTaskId as string]
+                    ?.hasMessages ||
+                  chatStore.tasks[chatStore.activeTaskId as string]?.status !==
+                    ChatTaskStatus.PENDING) && (
+                  <TooltipSimple
+                    content={t('layout.end-project')}
+                    side="bottom"
+                    align="end"
                   >
-                    {t('layout.share')}
-                  </Button>
-                </TooltipSimple>
-              )}
-            {chatStore.activeTaskId &&
-              chatStore.tasks[chatStore.activeTaskId as string] && (
-                <TooltipSimple
-                  content={t('layout.report-bug')}
-                  side="bottom"
-                  align="end"
-                >
-                  <Button
-                    onClick={exportLog}
-                    variant="ghost"
-                    size="icon"
-                    className="no-drag rounded-full"
+                    <Button
+                      onClick={() => setEndDialogOpen(true)}
+                      variant="ghost"
+                      size="xs"
+                      className="no-drag bg-surface-cuation !text-text-cuation justify-center rounded-full"
+                    >
+                      <Power />
+                      {t('layout.end-project')}
+                    </Button>
+                  </TooltipSimple>
+                )}
+              {chatStore.activeTaskId &&
+                chatStore.tasks[chatStore.activeTaskId as string]?.status ===
+                  ChatTaskStatus.FINISHED && (
+                  <TooltipSimple
+                    content={t('layout.share')}
+                    side="bottom"
+                    align="end"
                   >
-                    <FileDown className="h-4 w-4" />
-                  </Button>
-                </TooltipSimple>
-              )}
-            <TooltipSimple
-              content={t('layout.refer-friends')}
-              side="bottom"
-              align="end"
-            >
-              <Button
-                onClick={getReferFriendsLink}
-                variant="ghost"
-                size="icon"
-                className="no-drag rounded-full"
+                    <Button
+                      onClick={() =>
+                        handleShare(chatStore.activeTaskId as string)
+                      }
+                      variant="ghost"
+                      size="icon"
+                      className="no-drag bg-surface-information !text-text-information rounded-full"
+                      aria-label={t('layout.share')}
+                    >
+                      <Share className="h-4 w-4" aria-hidden />
+                    </Button>
+                  </TooltipSimple>
+                )}
+              <TooltipSimple
+                content={t('layout.refer-friends')}
+                side="bottom"
+                align="end"
               >
-                <img
-                  src={appearance === 'dark' ? giftWhiteIcon : giftIcon}
-                  alt="gift-icon"
-                  className="h-4 w-4"
-                />
-              </Button>
-            </TooltipSimple>
-            <TooltipSimple
-              content={t('layout.settings')}
-              side="bottom"
-              align="end"
-            >
-              <Button
-                onClick={() => navigate('/history?tab=settings')}
-                variant="ghost"
-                size="icon"
-                className="no-drag rounded-full"
+                <Button
+                  onClick={getReferFriendsLink}
+                  variant="ghost"
+                  size="icon"
+                  className="no-drag rounded-full"
+                >
+                  <img
+                    src={appearance === 'dark' ? giftWhiteIcon : giftIcon}
+                    alt="gift-icon"
+                    className="h-4 w-4"
+                  />
+                </Button>
+              </TooltipSimple>
+              <TooltipSimple
+                content={t('layout.settings')}
+                side="bottom"
+                align="end"
               >
-                <Settings className="h-4 w-4" />
-              </Button>
-            </TooltipSimple>
-          </div>
-        )}
-        {location.pathname === '/history' && (
-          <div
-            className={`${
-              platform === 'darwin' && 'pr-2'
-            } no-drag relative z-50 flex h-full items-center gap-1`}
-          ></div>
-        )}
+                <Button
+                  onClick={() => navigate('/history?tab=settings')}
+                  variant="ghost"
+                  size="icon"
+                  className="no-drag rounded-full"
+                >
+                  <Settings className="h-4 w-4" />
+                </Button>
+              </TooltipSimple>
+            </>
+          )}
+        </div>
       </div>
       {/* Custom window controls only for Linux (Windows and macOS use native controls) */}
       {platform !== 'darwin' && platform !== 'win32' && (
@@ -429,19 +492,19 @@ function HeaderWin() {
           ref={controlsRef}
         >
           <div
-            className="flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center leading-5 hover:bg-surface-hover-subtle"
+            className="leading-5 hover:bg-surface-hover-subtle flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center"
             onClick={() => window.electronAPI.minimizeWindow()}
           >
             <Minus className="h-4 w-4" />
           </div>
           <div
-            className="flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center leading-5 hover:bg-surface-hover-subtle"
+            className="leading-5 hover:bg-surface-hover-subtle flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center"
             onClick={() => window.electronAPI.toggleMaximizeWindow()}
           >
             <Square className="h-4 w-4" />
           </div>
           <div
-            className="flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center leading-5 hover:bg-surface-hover-subtle"
+            className="leading-5 hover:bg-surface-hover-subtle flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center"
             onClick={() => window.electronAPI.closeWindow()}
           >
             <X className="h-4 w-4" />
diff --git a/src/components/Trigger/TriggerListItem.tsx b/src/components/Trigger/TriggerListItem.tsx
index 02273f53c..47cd87fc8 100644
--- a/src/components/Trigger/TriggerListItem.tsx
+++ b/src/components/Trigger/TriggerListItem.tsx
@@ -1,146 +1,195 @@
-import { Trigger, TriggerType, TriggerStatus } from "@/types";
-import { Button } from "@/components/ui/button";
-import { Switch } from "@/components/ui/switch";
-import { TooltipSimple } from "@/components/ui/tooltip";
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Switch } from '@/components/ui/switch';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import { formatDateTime } from '@/lib/utils';
+import { Trigger, TriggerStatus, TriggerType } from '@/types';
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Zap, Clock, MoreHorizontal, Edit, Copy, Trash2, Globe, MessageSquare, AlarmClockIcon, WebhookIcon, AlertTriangle } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import { formatDateTime } from "@/lib/utils";
+  AlarmClockIcon,
+  AlertTriangle,
+  Clock,
+  Edit,
+  MessageSquare,
+  MoreHorizontal,
+  Trash2,
+  WebhookIcon,
+  Zap,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 type TriggerListItemProps = {
-    trigger: Trigger;
-    isSelected: boolean;
-    onSelect: (id: number) => void;
-    onEdit: (trigger: Trigger) => void;
-    onDuplicate: (id: number) => void;
-    onDelete: (trigger: Trigger) => void;
-    onToggleActive: (trigger: Trigger) => void;
+  trigger: Trigger;
+  isSelected: boolean;
+  onSelect: (id: number) => void;
+  onEdit: (trigger: Trigger) => void;
+  onDuplicate: (id: number) => void;
+  onDelete: (trigger: Trigger) => void;
+  onToggleActive: (trigger: Trigger) => void;
 };
 
 export const TriggerListItem: React.FC<TriggerListItemProps> = ({
-    trigger,
-    isSelected,
-    onSelect,
-    onEdit,
-    onDuplicate,
-    onDelete,
-    onToggleActive,
+  trigger,
+  isSelected,
+  onSelect,
+  onEdit,
+  onDuplicate,
+  onDelete,
+  onToggleActive,
 }) => {
-    const { t } = useTranslation();
-    const isActive = trigger.status === TriggerStatus.Active;
-    const needsAuth = trigger.status === TriggerStatus.PendingAuth && trigger.config?.authentication_required;
+  const { t } = useTranslation();
+  const isActive = trigger.status === TriggerStatus.Active;
+  const needsAuth =
+    trigger.status === TriggerStatus.PendingAuth &&
+    trigger.config?.authentication_required;
 
-    const getTriggerTypeIcon = () => {
-        switch (trigger.trigger_type) {
-            case TriggerType.Schedule:
-                return <AlarmClockIcon className="w-3.5 h-3.5" />;
-            case TriggerType.Webhook:
-                return <WebhookIcon className="w-3.5 h-3.5" />;
-            case TriggerType.Slack:
-                return <MessageSquare className="w-3.5 h-3.5" />;
-            default:
-                return <Clock className="w-3.5 h-3.5" />;
-        }
-    };
+  const getTriggerTypeIcon = () => {
+    switch (trigger.trigger_type) {
+      case TriggerType.Schedule:
+        return <AlarmClockIcon className="w-3.5 h-3.5" />;
+      case TriggerType.Webhook:
+        return <WebhookIcon className="w-3.5 h-3.5" />;
+      case TriggerType.Slack:
+        return <MessageSquare className="w-3.5 h-3.5" />;
+      default:
+        return <Clock className="w-3.5 h-3.5" />;
+    }
+  };
 
-    const getTriggerTypeLabel = () => {
-        switch (trigger.trigger_type) {
-            case TriggerType.Schedule:
-                return t("triggers.schedule-trigger");
-            case TriggerType.Webhook:
-                return t("triggers.webhook-trigger");
-            case TriggerType.Slack:
-                return t("triggers.slack-trigger");
-            default:
-                return trigger.trigger_type;
-        }
-    };
+  const getTriggerTypeLabel = () => {
+    switch (trigger.trigger_type) {
+      case TriggerType.Schedule:
+        return t('triggers.schedule-trigger');
+      case TriggerType.Webhook:
+        return t('triggers.webhook-trigger');
+      case TriggerType.Slack:
+        return t('triggers.slack-trigger');
+      default:
+        return trigger.trigger_type;
+    }
+  };
 
-    const formatLastExecution = (dateString?: string) => {
-        if (!dateString) return t("triggers.never");
-        return formatDateTime(dateString, "HH:mm MMM dd");
-    };
+  const formatLastExecution = (dateString?: string) => {
+    if (!dateString) return t('triggers.never');
+    return formatDateTime(dateString, 'HH:mm MMM dd');
+  };
 
-    return (
-        <div
-            onClick={() => onSelect(trigger.id)}
-            className={`group flex items-center gap-3 p-3 bg-surface-primary rounded-xl border transition-all duration-200 cursor-pointer ${isSelected
-                ? 'border-border-action bg-surface-tertiary'
-                : needsAuth
-                    ? 'border-yellow-500 hover:border-yellow-600 hover:bg-surface-tertiary'
-                    : 'border-border-tertiary hover:border-border-secondary hover:bg-surface-tertiary'
-                }`}
-        >
-            {/* 1. Zap Icon */}
-            <div className="flex-shrink-0 w-10 h-10 flex items-center justify-center bg-amber-500/10 rounded-lg">
-                <Zap className="w-5 h-5 text-icon-primary" />
-            </div>
+  return (
+    <div
+      onClick={() => onSelect(trigger.id)}
+      className={`group gap-3 p-3 bg-surface-primary rounded-xl flex cursor-pointer items-center border transition-all duration-200 ${
+        isSelected
+          ? 'border-border-action bg-surface-tertiary'
+          : needsAuth
+            ? 'border-yellow-500 hover:border-yellow-600 hover:bg-surface-tertiary'
+            : 'border-border-tertiary hover:border-border-secondary hover:bg-surface-tertiary'
+      }`}
+    >
+      {/* 1. Zap Icon */}
+      <div className="w-10 h-10 bg-amber-500/10 rounded-lg flex flex-shrink-0 items-center justify-center">
+        <Zap className="w-5 h-5 text-icon-primary" />
+      </div>
 
-            {/* 2. Trigger Name + Task Prompt */}
-            <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                    <div className="text-sm font-semibold text-text-heading truncate group-hover:text-text-action transition-colors">
-                        {trigger.name}
-                    </div>
-                    {needsAuth && (
-                        <TooltipSimple content={t("triggers.verification-required")}>
-                            <div className="flex items-center justify-center p-1 rounded-full bg-yellow-100">
-                                <AlertTriangle className="w-3.5 h-3.5 text-yellow-600" />
-                            </div>
-                        </TooltipSimple>
-                    )}
-                </div>
-                <div className="text-xs text-text-label truncate mt-0.5">
-                    {trigger.task_prompt || trigger.description || t("triggers.no-task-prompt")}
-                </div>
-            </div>
+      {/* 2. Trigger Name + Task Prompt */}
+      <div className="min-w-0 flex-1">
+        <div className="gap-2 flex items-center">
+          <div className="text-sm font-semibold text-text-heading group-hover:text-text-action truncate transition-colors">
+            {trigger.name}
+          </div>
+          {needsAuth && (
+            <TooltipSimple content={t('triggers.verification-required')}>
+              <div className="p-1 bg-yellow-100 flex items-center justify-center rounded-full">
+                <AlertTriangle className="w-3.5 h-3.5 text-yellow-600" />
+              </div>
+            </TooltipSimple>
+          )}
+        </div>
+        <div className="text-xs text-text-label mt-0.5 truncate">
+          {trigger.task_prompt ||
+            trigger.description ||
+            t('triggers.no-task-prompt')}
+        </div>
+      </div>
 
-            {/* 3. Trigger Type */}
-            <div className="flex items-center gap-1.5 text-xs text-text-label min-w-[80px]">
-                {getTriggerTypeIcon()}
-                <span>{getTriggerTypeLabel()}</span>
-            </div>
+      {/* 3. Trigger Type */}
+      <div className="gap-1.5 text-xs text-text-label flex min-w-[80px] items-center">
+        {getTriggerTypeIcon()}
+        <span>{getTriggerTypeLabel()}</span>
+      </div>
 
-            {/* 5. Activation Switch */}
-            <TooltipSimple content={t("triggers.verification-required")} enabled={needsAuth}>
-                <div>
-                    <Switch
-                        checked={isActive || needsAuth}
-                        onCheckedChange={() => onToggleActive(trigger)}
-                        onClick={(e) => e.stopPropagation()}
-                        disabled={needsAuth}
-                    />
-                </div>
-            </TooltipSimple>
+      {/* 5. Activation Switch */}
+      <TooltipSimple
+        content={t('triggers.verification-required')}
+        enabled={needsAuth}
+      >
+        <div>
+          <Switch
+            checked={isActive || needsAuth}
+            onCheckedChange={() => onToggleActive(trigger)}
+            onClick={(e) => e.stopPropagation()}
+            disabled={needsAuth}
+          />
+        </div>
+      </TooltipSimple>
 
-            {/* 6. More Icon Dropdown */}
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon" className="h-8 w-8 flex items-center justify-center" onClick={(e) => e.stopPropagation()}>
-                        <MoreHorizontal className="w-4 h-4" />
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
-                    <DropdownMenuItem className="gap-2" onSelect={(e) => { e.preventDefault(); onEdit(trigger); }}>
-                        <Edit className="h-4 w-4" />
-                        {t("triggers.edit")}
-                    </DropdownMenuItem>
-                    {/* TODO: Support Duplicate Action */}
-                    {/* <DropdownMenuItem className="gap-2" onSelect={(e) => { e.preventDefault(); onDuplicate(trigger.id); }}>
+      {/* 6. More Icon Dropdown */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="xs"
+            buttonContent="icon-only"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <MoreHorizontal className="w-4 h-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
+          <DropdownMenuItem
+            className="gap-2"
+            onSelect={(e) => {
+              e.preventDefault();
+              onEdit(trigger);
+            }}
+          >
+            <Edit className="h-4 w-4" />
+            {t('triggers.edit')}
+          </DropdownMenuItem>
+          {/* TODO: Support Duplicate Action */}
+          {/* <DropdownMenuItem className="gap-2" onSelect={(e) => { e.preventDefault(); onDuplicate(trigger.id); }}>
                         <Copy className="h-4 w-4" />
                         {t("triggers.duplicate")}
                     </DropdownMenuItem> */}
-                    <DropdownMenuItem className="gap-2 text-red-600 focus:text-red-600" onSelect={(e) => { e.preventDefault(); onDelete(trigger); }}>
-                        <Trash2 className="h-4 w-4" />
-                        {t("triggers.delete")}
-                    </DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
-    );
+          <DropdownMenuItem
+            className="gap-2 text-red-600 focus:text-red-600"
+            onSelect={(e) => {
+              e.preventDefault();
+              onDelete(trigger);
+            }}
+          >
+            <Trash2 className="h-4 w-4" />
+            {t('triggers.delete')}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
 };
diff --git a/src/pages/Project/Triggers.tsx b/src/components/Trigger/Triggers.tsx
similarity index 74%
rename from src/pages/Project/Triggers.tsx
rename to src/components/Trigger/Triggers.tsx
index 33402d7d1..0f6a44b46 100644
--- a/src/pages/Project/Triggers.tsx
+++ b/src/components/Trigger/Triggers.tsx
@@ -23,13 +23,6 @@ import {
   DialogFooter,
   DialogHeader,
 } from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { TooltipSimple } from '@/components/ui/tooltip';
 import {
   useTriggerCacheInvalidation,
   useUserTriggerCountQuery,
@@ -46,32 +39,53 @@ import { usePageTabStore } from '@/store/pageTabStore';
 import { useTriggerStore } from '@/store/triggerStore';
 import { Trigger, TriggerStatus } from '@/types';
 import { motion } from 'framer-motion';
-import {
-  ArrowUpDown,
-  Plus,
-  SquareChevronRight,
-  SquareCode,
-} from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 
-const EXECUTION_LOGS_OPEN_STORAGE_KEY = 'triggers.executionLogs.open';
+export const EXECUTION_LOGS_OPEN_STORAGE_KEY = 'triggers.executionLogs.open';
 
-export default function Overview() {
-  const { t } = useTranslation();
-  const [sortBy, setSortBy] = useState<
-    'createdAt' | 'lastExecutionTime' | 'tokens'
-  >('createdAt');
-  const [selectedTriggerId, setSelectedTriggerId] = useState<number | null>(
-    null
-  );
-  const [isExecutionLogsOpen, setIsExecutionLogsOpen] = useState(() => {
-    if (typeof window === 'undefined') return false;
-    return (
-      window.localStorage.getItem(EXECUTION_LOGS_OPEN_STORAGE_KEY) === 'true'
-    );
+export type TriggerSortKey = 'createdAt' | 'lastExecutionTime' | 'tokens';
+
+export function sortTriggersList(
+  triggers: Trigger[],
+  sortBy: TriggerSortKey
+): Trigger[] {
+  return [...triggers].sort((a, b) => {
+    switch (sortBy) {
+      case 'createdAt':
+        return (
+          new Date(b.created_at || 0).getTime() -
+          new Date(a.created_at || 0).getTime()
+        );
+      case 'lastExecutionTime':
+        return (
+          new Date(b.last_executed_at || 0).getTime() -
+          new Date(a.last_executed_at || 0).getTime()
+        );
+      default:
+        return 0;
+    }
   });
+}
+
+export type OverviewProps = {
+  sortBy: TriggerSortKey;
+  selectedTriggerId: number | null;
+  onSelectedTriggerIdChange: (id: number | null) => void;
+  isExecutionLogsOpen: boolean;
+  onExecutionLogsOpenChange: (open: boolean) => void;
+};
+
+export default function Overview({
+  sortBy,
+  selectedTriggerId,
+  onSelectedTriggerIdChange,
+  isExecutionLogsOpen,
+  onExecutionLogsOpenChange,
+}: OverviewProps) {
+  const { t } = useTranslation();
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [editingTrigger, setEditingTrigger] = useState<Trigger | null>(null);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
@@ -117,51 +131,12 @@ export default function Overview() {
     fetchTriggers();
   }, [projectStore.activeProjectId]);
 
-  // Reset selected trigger when project changes
-  useEffect(() => {
-    setSelectedTriggerId(null);
-  }, [projectStore.activeProjectId]);
-
-  useEffect(() => {
-    window.localStorage.setItem(
-      EXECUTION_LOGS_OPEN_STORAGE_KEY,
-      String(isExecutionLogsOpen)
-    );
-  }, [isExecutionLogsOpen]);
-
   // Update hasTriggers based on the trigger list
   useEffect(() => {
     setHasTriggers(triggers.length > 0);
   }, [triggers, setHasTriggers]);
 
-  // Sort triggers directly
-  const sortedTriggers = [...triggers].sort((a, b) => {
-    switch (sortBy) {
-      case 'createdAt':
-        return (
-          new Date(b.created_at || 0).getTime() -
-          new Date(a.created_at || 0).getTime()
-        );
-      case 'lastExecutionTime':
-        return (
-          new Date(b.last_executed_at || 0).getTime() -
-          new Date(a.last_executed_at || 0).getTime()
-        );
-      default:
-        return 0;
-    }
-  });
-
-  const getSortLabel = () => {
-    switch (sortBy) {
-      case 'createdAt':
-        return t('triggers.created-time');
-      case 'lastExecutionTime':
-        return t('triggers.last-execution-label');
-      case 'tokens':
-        return t('triggers.token-cost');
-    }
-  };
+  const sortedTriggers = sortTriggersList(triggers, sortBy);
 
   const handleToggleActive = async (trigger: Trigger) => {
     const newStatus =
@@ -220,11 +195,11 @@ export default function Overview() {
   const setSelectedTriggerIdWrapper = (triggerId: number) => {
     //Double Click to Edit
     if (triggerId === selectedTriggerId) {
-      handleEdit(triggers.find((t) => t.id === triggerId)!);
+      handleEdit(triggers.find((tr) => tr.id === triggerId)!);
       return;
     }
-    setSelectedTriggerId(triggerId);
-    setIsExecutionLogsOpen(true);
+    onSelectedTriggerIdChange(triggerId);
+    onExecutionLogsOpenChange(true);
   };
 
   const handleEdit = (trigger: Trigger) => {
@@ -246,8 +221,8 @@ export default function Overview() {
       deleteTrigger(deletingTrigger.id);
 
       if (selectedTriggerId === deletingTrigger.id) {
-        setSelectedTriggerId(null);
-        setIsExecutionLogsOpen(false);
+        onSelectedTriggerIdChange(null);
+        onExecutionLogsOpenChange(false);
       }
 
       // Add activity log
@@ -300,77 +275,9 @@ export default function Overview() {
 
   return (
     <div className="min-h-0 min-w-0 flex h-full flex-1 flex-col">
-      <div className="bg-surface-secondary px-2 pt-2 flex h-full flex-row">
+      <div className="bg-surface-secondary pl-2 pt-2 flex h-full flex-row">
         {/* Left Side: Trigger List */}
         <div className="min-w-0 flex flex-1 flex-col">
-          {/* Header */}
-          <div className="pb-4 pl-1 pt-2 flex w-full items-center justify-between">
-            <div className="text-body-sm font-bold text-text-heading">
-              {t('triggers.title')}
-            </div>
-            <div className="gap-1 pr-2 flex items-center">
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="font-semibold opacity-50"
-                  >
-                    {getSortLabel()}
-                    <ArrowUpDown className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuItem onClick={() => setSortBy('createdAt')}>
-                    {t('triggers.created-time')}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onClick={() => setSortBy('lastExecutionTime')}
-                  >
-                    {t('triggers.last-execution-label')}
-                  </DropdownMenuItem>
-                  {/* TODO: Support Token Cost */}
-                  {/* <DropdownMenuItem onClick={() => setSortBy("tokens")}>
-                                    {t('triggers.token-cost')}
-                                </DropdownMenuItem> */}
-                </DropdownMenuContent>
-              </DropdownMenu>
-              <TooltipSimple
-                content={
-                  isExecutionLogsOpen
-                    ? 'Fold execution logs'
-                    : 'Open execution logs'
-                }
-                delayDuration={300}
-                side="bottom"
-              >
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="opacity-70"
-                  disabled={sortedTriggers.length === 0}
-                  onClick={() => {
-                    if (isExecutionLogsOpen) {
-                      setIsExecutionLogsOpen(false);
-                      return;
-                    }
-
-                    if (!selectedTriggerId && sortedTriggers.length > 0) {
-                      setSelectedTriggerId(sortedTriggers[0].id);
-                    }
-                    setIsExecutionLogsOpen(true);
-                  }}
-                >
-                  {isExecutionLogsOpen ? (
-                    <SquareChevronRight className="h-4 w-4" />
-                  ) : (
-                    <SquareCode className="h-4 w-4" />
-                  )}
-                </Button>
-              </TooltipSimple>
-            </div>
-          </div>
-
           {/* List View Section */}
           <div className="scrollbar-always-visible flex h-full flex-col overflow-auto">
             <div className="gap-2 flex flex-col">
diff --git a/src/components/WorkFlow/TaskLogPanelContent.tsx b/src/components/WorkFlow/TaskLogPanelContent.tsx
new file mode 100644
index 000000000..0485f1791
--- /dev/null
+++ b/src/components/WorkFlow/TaskLogPanelContent.tsx
@@ -0,0 +1,182 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { Button } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { getToolkitIcon } from '@/lib/toolkitIcons';
+import type { ChatStore } from '@/store/chatStore';
+import { AgentStatusValue, ChatTaskStatus } from '@/types/constants';
+import { Copy, LoaderCircle } from 'lucide-react';
+import type { RefObject } from 'react';
+import { MarkDown } from './MarkDown';
+
+type ToolkitEntry = NonNullable<TaskInfo['toolkits']>[number] & {
+  toolkitId?: string;
+};
+
+export function TaskLogPanelContent({
+  selectedTask,
+  chatStore,
+  isEditMode = false,
+  reportRef,
+}: {
+  selectedTask: TaskInfo;
+  chatStore: ChatStore;
+  isEditMode?: boolean;
+  reportRef?: RefObject<HTMLDivElement>;
+}) {
+  const activeTaskId = chatStore.activeTaskId as string;
+
+  return (
+    <>
+      {selectedTask.toolkits &&
+        selectedTask.toolkits.length > 0 &&
+        selectedTask.toolkits.map((toolkit: ToolkitEntry, index: number) => (
+          <div key={`toolkit-${toolkit.toolkitId ?? index}`}>
+            {toolkit.toolkitName === 'notice' ? (
+              <div
+                key={`notice-${index}`}
+                className="gap-sm px-2 py-1 flex w-full flex-col"
+              >
+                <MarkDown
+                  content={toolkit?.message}
+                  enableTypewriter={false}
+                  pTextSize="text-label-xs"
+                />
+              </div>
+            ) : (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div
+                    key={`toolkit-${index}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (toolkit.toolkitMethods === 'write to file') {
+                        chatStore.tasks[activeTaskId].activeWorkspace =
+                          'documentWorkSpace';
+                      } else if (toolkit.toolkitMethods === 'visit page') {
+                        const parts = toolkit.message.split('\n');
+                        const url = parts[0];
+                        window.location.href = url;
+                      } else if (toolkit.toolkitMethods === 'scrape') {
+                        window.location.href = toolkit.message;
+                      }
+                    }}
+                    className="gap-1 rounded-lg bg-log-default p-1 px-2 flex flex-col items-start justify-center transition-all duration-300 hover:opacity-50"
+                  >
+                    <div className="gap-sm flex w-full items-center justify-start">
+                      {toolkit.toolkitStatus === AgentStatusValue.RUNNING ? (
+                        <LoaderCircle
+                          size={16}
+                          className={
+                            chatStore.tasks[activeTaskId]?.status ===
+                            ChatTaskStatus.RUNNING
+                              ? 'animate-spin'
+                              : ''
+                          }
+                        />
+                      ) : (
+                        getToolkitIcon(toolkit.toolkitName)
+                      )}
+                      <span className="gap-sm text-label-xs font-bold text-text-primary flex items-center text-nowrap">
+                        {toolkit.toolkitName}
+                      </span>
+                    </div>
+                    <div className="gap-sm pl-6 pointer-events-auto flex w-full items-start justify-center overflow-hidden select-text">
+                      <div className="text-label-xs font-bold text-text-primary text-nowrap">
+                        {toolkit.toolkitMethods
+                          ? toolkit.toolkitMethods.charAt(0).toUpperCase() +
+                            toolkit.toolkitMethods.slice(1)
+                          : ''}
+                      </div>
+                      <div
+                        className={`text-label-xs font-normal text-text-primary max-w-full flex-1 truncate ${
+                          isEditMode
+                            ? 'overflow-hidden'
+                            : 'truncate overflow-hidden'
+                        }`}
+                      >
+                        {toolkit.message}
+                      </div>
+                    </div>
+                  </div>
+                </TooltipTrigger>
+                {toolkit.message && (
+                  <TooltipContent
+                    align="start"
+                    className="scrollbar left-6 rounded-lg border-task-border-default bg-surface-tertiary p-2 text-label-xs pointer-events-auto !fixed z-[9999] max-h-[200px] w-max max-w-[296px] overflow-y-auto border border-solid text-wrap break-words select-text"
+                    side="bottom"
+                    sideOffset={4}
+                  >
+                    <MarkDown
+                      content={toolkit.message}
+                      enableTypewriter={false}
+                      pTextSize="text-label-xs"
+                      olPadding="pl-4"
+                    />
+                  </TooltipContent>
+                )}
+              </Tooltip>
+            )}
+          </div>
+        ))}
+      {selectedTask.report && (
+        <div
+          ref={reportRef}
+          onWheel={(e) => {
+            e.stopPropagation();
+          }}
+          className="group my-2 rounded-lg bg-surface-primary relative flex w-full flex-col"
+        >
+          <div className="top-0 rounded-lg bg-surface-primary py-2 pl-2 pr-2 sticky z-10 flex items-center justify-between">
+            <div className="text-label-sm font-bold text-text-primary">
+              Completion Report
+            </div>
+            <Button
+              variant="ghost"
+              size="xs"
+              onClick={(e) => {
+                e.stopPropagation();
+                const reportText =
+                  typeof selectedTask?.report === 'string'
+                    ? selectedTask.report
+                    : '';
+                if (reportText && navigator.clipboard?.writeText) {
+                  navigator.clipboard.writeText(reportText).catch(() => {
+                    // silently fail if clipboard is unavailable
+                  });
+                }
+              }}
+              className="text-label-xs"
+            >
+              <Copy className="text-icon-secondary" />
+              <span className="text-icon-secondary">Copy</span>
+            </Button>
+          </div>
+          <div className="px-2 py-2">
+            <MarkDown
+              content={selectedTask?.report}
+              enableTypewriter={false}
+              pTextSize="text-label-xs"
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/WorkFlow/agentToolkitLabels.ts b/src/components/WorkFlow/agentToolkitLabels.ts
new file mode 100644
index 000000000..b666eb6d1
--- /dev/null
+++ b/src/components/WorkFlow/agentToolkitLabels.ts
@@ -0,0 +1,53 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+const agentToolkits: Record<string, string[]> = {
+  developer_agent: [
+    '# Terminal & Shell ',
+    '# Web Deployment ',
+    '# Screen Capture ',
+  ],
+  browser_agent: ['# Web Browser ', '# Search Engines '],
+  multi_modal_agent: [
+    '# Image Analysis ',
+    '# Video Processing ',
+    '# Audio Processing ',
+    '# Image Generation ',
+  ],
+  document_agent: [
+    '# File Management ',
+    '# Data Processing ',
+    '# Document Creation ',
+  ],
+};
+
+/**
+ * Toolkit label strings shown on workflow nodes and folded workforce cards.
+ * Mirrors `node.tsx` logic.
+ */
+export function getAgentToolkitLabels(
+  agent: Pick<Agent, 'type' | 'tools'> | undefined
+): string[] {
+  const customToolkits =
+    agent?.tools
+      ?.map((tool) => (tool ? '# ' + String(tool).replace(/_/g, ' ') : ''))
+      .filter(Boolean) || [];
+  const preset =
+    agent?.type && agentToolkits[agent.type]
+      ? agentToolkits[agent.type]
+      : undefined;
+  return (
+    preset ?? (customToolkits.length > 0 ? customToolkits : ['No Toolkits'])
+  );
+}
diff --git a/src/components/WorkFlow/baseWorkers.ts b/src/components/WorkFlow/baseWorkers.ts
new file mode 100644
index 000000000..6aee4827b
--- /dev/null
+++ b/src/components/WorkFlow/baseWorkers.ts
@@ -0,0 +1,82 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+/** Default workflow agents shown before / alongside task assignment (same data as WorkFlow). */
+export const BASE_WORKFLOW_AGENTS: Agent[] = [
+  {
+    tasks: [],
+    agent_id: 'developer_agent',
+    tools: [
+      'Human Toolkit',
+      'Terminal Toolkit',
+      'Note Taking Toolkit',
+      'Web Deploy Toolkit',
+    ],
+    name: 'Developer Agent',
+    type: 'developer_agent',
+    log: [],
+    activeWebviewIds: [],
+  },
+  {
+    tasks: [],
+    agent_id: 'browser_agent',
+    name: 'Browser Agent',
+    type: 'browser_agent',
+    tools: [
+      'Search Toolkit',
+      'Browser Toolkit',
+      'Human Toolkit',
+      'Note Taking Toolkit',
+      'Terminal Toolkit',
+    ],
+    log: [],
+    activeWebviewIds: [],
+  },
+  {
+    tasks: [],
+    tools: [
+      'Video Downloader Toolkit',
+      'Audio Analysis Toolkit',
+      'Screenshot Toolkit',
+      'Open AI Image Toolkit',
+      'Human Toolkit',
+      'Terminal Toolkit',
+      'Note Taking Toolkit',
+      'Search Toolkit',
+    ],
+    agent_id: 'multi_modal_agent',
+    name: 'Multi Modal Agent',
+    type: 'multi_modal_agent',
+    log: [],
+    activeWebviewIds: [],
+  },
+  {
+    tasks: [],
+    agent_id: 'document_agent',
+    name: 'Document Agent',
+    tools: [
+      'File Write Toolkit',
+      'Pptx Toolkit',
+      'Human Toolkit',
+      'Mark It Down Toolkit',
+      'Excel Toolkit',
+      'Note Taking Toolkit',
+      'Terminal Toolkit',
+      'Google Drive Mcp Toolkit',
+    ],
+    type: 'document_agent',
+    log: [],
+    activeWebviewIds: [],
+  },
+];
diff --git a/src/components/WorkFlow/index.tsx b/src/components/WorkFlow/index.tsx
index fc679086d..33841ff83 100644
--- a/src/components/WorkFlow/index.tsx
+++ b/src/components/WorkFlow/index.tsx
@@ -21,6 +21,7 @@ import {
   useReactFlow,
 } from '@xyflow/react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { BASE_WORKFLOW_AGENTS } from './baseWorkers';
 import { Node as CustomNodeComponent } from './node';
 import { createWorkflowWheelHandler } from './workflowWheelHandler';
 
@@ -86,85 +87,6 @@ export default function Workflow({
     [minViewportX]
   );
 
-  const baseWorker: Agent[] = useMemo(
-    () => [
-      {
-        tasks: [],
-        agent_id: 'developer_agent',
-        tools: [
-          'Human Toolkit',
-          'Terminal Toolkit',
-          'Note Taking Toolkit',
-          'Web Deploy Toolkit',
-        ],
-        name: 'Developer Agent',
-        type: 'developer_agent',
-        log: [],
-        activeWebviewIds: [],
-      },
-      {
-        tasks: [],
-        agent_id: 'browser_agent',
-        name: 'Browser Agent',
-        type: 'browser_agent',
-        tools: [
-          'Search Toolkit',
-          'Browser Toolkit',
-          'Human Toolkit',
-          'Note Taking Toolkit',
-          'Terminal Toolkit',
-        ],
-        log: [],
-        activeWebviewIds: [],
-      },
-      {
-        tasks: [],
-        tools: [
-          'Video Downloader Toolkit',
-          'Audio Analysis Toolkit',
-          'Screenshot Toolkit',
-          'Open AI Image Toolkit',
-          'Human Toolkit',
-          'Terminal Toolkit',
-          'Note Taking Toolkit',
-          'Search Toolkit',
-        ],
-        agent_id: 'multi_modal_agent',
-        name: 'Multi Modal Agent',
-        type: 'multi_modal_agent',
-        log: [],
-        activeWebviewIds: [],
-      },
-      // {
-      // 	tasks: [],
-      // 	agent_id: "social_media_agent",
-      // 	name: "Social Media Agent",
-      // 	type: "social_media_agent",
-      // 	log: [],
-      // 	activeWebviewIds: [],
-      // },
-      {
-        tasks: [],
-        agent_id: 'document_agent',
-        name: 'Document Agent',
-        tools: [
-          'File Write Toolkit',
-          'Pptx Toolkit',
-          'Human Toolkit',
-          'Mark It Down Toolkit',
-          'Excel Toolkit',
-          'Note Taking Toolkit',
-          'Terminal Toolkit',
-          'Google Drive Mcp Toolkit',
-        ],
-        type: 'document_agent',
-        log: [],
-        activeWebviewIds: [],
-      },
-    ],
-    []
-  );
-
   // update ref value
   useEffect(() => {
     isEditModeRef.current = isEditMode;
@@ -269,8 +191,8 @@ export default function Workflow({
     // console.log("workerList	", workerList);
     setNodes((prev: CustomNode[]) => {
       if (!taskAssigning) return prev;
-      // Agents not yet in taskAssigning (from baseWorker or workerList)
-      const base = [...baseWorker, ...workerList].filter(
+      // Agents not yet in taskAssigning (from defaults or workerList)
+      const base = [...BASE_WORKFLOW_AGENTS, ...workerList].filter(
         (worker) => !taskAssigning.find((agent) => agent.type === worker.type)
       );
       let targetData = [...prev];
@@ -327,7 +249,6 @@ export default function Workflow({
     taskAssigning,
     isEditMode,
     workerList,
-    baseWorker,
     handleExpandChange,
     reSetNodePosition,
     setNodes,
diff --git a/src/components/WorkFlow/node.tsx b/src/components/WorkFlow/node.tsx
index cd3208952..c2750a0c5 100644
--- a/src/components/WorkFlow/node.tsx
+++ b/src/components/WorkFlow/node.tsx
@@ -29,7 +29,6 @@ import {
   CircleCheckBig,
   CircleSlash,
   CircleSlash2,
-  Copy,
   Ellipsis,
   LoaderCircle,
   SquareChevronLeft,
@@ -48,9 +47,9 @@ import {
   PopoverTrigger,
 } from '../ui/popover';
 import ShinyText from '../ui/ShinyText/ShinyText';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 import { agentMap } from './agents';
-import { MarkDown } from './MarkDown';
+import { getAgentToolkitLabels } from './agentToolkitLabels';
+import { TaskLogPanelContent } from './TaskLogPanelContent';
 
 interface NodeProps {
   id: string;
@@ -339,26 +338,6 @@ export function Node({ id, data }: NodeProps) {
     };
   }, [wheelHandler, isExpanded, selectedTask, selectedTask?.report]);
 
-  const agentToolkits = {
-    developer_agent: [
-      '# Terminal & Shell ',
-      '# Web Deployment ',
-      '# Screen Capture ',
-    ],
-    browser_agent: ['# Web Browser ', '# Search Engines '],
-    multi_modal_agent: [
-      '# Image Analysis ',
-      '# Video Processing ',
-      '# Audio Processing ',
-      '# Image Generation ',
-    ],
-    document_agent: [
-      '# File Management ',
-      '# Data Processing ',
-      '# Document Creation ',
-    ],
-  };
-
   const getTaskId = (taskId: string) => {
     const list = taskId.split('.');
     let idStr = '';
@@ -369,13 +348,7 @@ export function Node({ id, data }: NodeProps) {
     return idStr;
   };
 
-  const customToolkits =
-    data.agent?.tools
-      ?.map((tool) => (tool ? '# ' + tool.replace(/_/g, ' ') : ''))
-      .filter(Boolean) || [];
-  const toolkitLabels =
-    agentToolkits[data.agent?.type as keyof typeof agentToolkits] ||
-    (customToolkits.length > 0 ? customToolkits : ['No Toolkits']);
+  const toolkitLabels = getAgentToolkitLabels(data.agent);
   const browserImages = (data.img || []).filter((img) => img?.img).slice(0, 4);
   const browserImageGridClass =
     browserImages.length === 1
@@ -445,7 +418,12 @@ export function Node({ id, data }: NodeProps) {
               </div>
             </div>
             <div className="gap-xs flex items-center">
-              <Button onClick={handleShowLog} variant="ghost" size="icon">
+              <Button
+                onClick={handleShowLog}
+                variant="ghost"
+                size="xs"
+                buttonContent="icon-only"
+              >
                 {isExpanded ? <SquareChevronLeft /> : <SquareCode />}
               </Button>
               {!Object.keys(agentMap).find((key) => key === data.type) &&
@@ -455,7 +433,8 @@ export function Node({ id, data }: NodeProps) {
                       <Button
                         onClick={(e) => e.stopPropagation()}
                         variant="ghost"
-                        size="icon"
+                        size="xs"
+                        buttonContent="icon-only"
                       >
                         <Ellipsis />
                       </Button>
@@ -843,164 +822,12 @@ export function Node({ id, data }: NodeProps) {
                       transition={{ duration: 0.25, ease: 'easeIn' }}
                       className="gap-sm flex w-full flex-col"
                     >
-                      {selectedTask.toolkits &&
-                        selectedTask.toolkits.length > 0 &&
-                        selectedTask.toolkits.map(
-                          (toolkit: any, index: number) => (
-                            <div key={`toolkit-${toolkit.toolkitId}`}>
-                              {toolkit.toolkitName === 'notice' ? (
-                                <div
-                                  key={`notice-${index}`}
-                                  className="gap-sm px-2 py-1 flex w-full flex-col"
-                                >
-                                  <MarkDown
-                                    content={toolkit?.message}
-                                    enableTypewriter={false}
-                                    pTextSize="text-label-xs"
-                                  />
-                                </div>
-                              ) : (
-                                <Tooltip>
-                                  <TooltipTrigger asChild>
-                                    <div
-                                      key={`toolkit-${index}`}
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        if (
-                                          toolkit.toolkitMethods ===
-                                          'write to file'
-                                        ) {
-                                          chatStore.tasks[
-                                            chatStore.activeTaskId as string
-                                          ].activeWorkspace =
-                                            'documentWorkSpace';
-                                        } else if (
-                                          toolkit.toolkitMethods ===
-                                          'visit page'
-                                        ) {
-                                          const parts =
-                                            toolkit.message.split('\n');
-                                          const url = parts[0]; // the first line is the URL
-                                          window.location.href = url;
-                                        } else if (
-                                          toolkit.toolkitMethods === 'scrape'
-                                        ) {
-                                          window.location.href =
-                                            toolkit.message;
-                                        }
-                                      }}
-                                      className="gap-1 rounded-lg bg-log-default p-1 px-2 flex flex-col items-start justify-center transition-all duration-300 hover:opacity-50"
-                                    >
-                                      {/* first row: icon + toolkit name */}
-                                      <div className="gap-sm flex w-full items-center justify-start">
-                                        {toolkit.toolkitStatus ===
-                                        AgentStatusValue.RUNNING ? (
-                                          <LoaderCircle
-                                            size={16}
-                                            className={`${
-                                              chatStore.tasks[
-                                                chatStore.activeTaskId as string
-                                              ].status ===
-                                                ChatTaskStatus.RUNNING &&
-                                              'animate-spin'
-                                            }`}
-                                          />
-                                        ) : (
-                                          getToolkitIcon(toolkit.toolkitName)
-                                        )}
-                                        <span className="gap-sm text-label-xs font-bold text-text-primary flex items-center text-nowrap">
-                                          {toolkit.toolkitName}
-                                        </span>
-                                      </div>
-                                      {/* second row: method + message */}
-                                      <div className="gap-sm pl-6 pointer-events-auto flex w-full items-start justify-center overflow-hidden select-text">
-                                        <div className="text-label-xs font-bold text-text-primary text-nowrap">
-                                          {toolkit.toolkitMethods
-                                            ? toolkit.toolkitMethods
-                                                .charAt(0)
-                                                .toUpperCase() +
-                                              toolkit.toolkitMethods.slice(1)
-                                            : ''}
-                                        </div>
-                                        <div
-                                          className={`text-label-xs font-normal text-text-primary max-w-full flex-1 truncate ${
-                                            data.isEditMode
-                                              ? 'overflow-hidden'
-                                              : 'truncate overflow-hidden'
-                                          }`}
-                                        >
-                                          {toolkit.message}
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </TooltipTrigger>
-                                  {toolkit.message && (
-                                    <TooltipContent
-                                      align="start"
-                                      className="scrollbar left-6 rounded-lg border-task-border-default bg-surface-tertiary p-2 text-label-xs pointer-events-auto !fixed z-[9999] max-h-[200px] w-max max-w-[296px] overflow-y-auto border border-solid text-wrap break-words select-text"
-                                      side="bottom"
-                                      sideOffset={4}
-                                    >
-                                      <MarkDown
-                                        content={toolkit.message}
-                                        enableTypewriter={false}
-                                        pTextSize="text-label-xs"
-                                        olPadding="pl-4"
-                                      />
-                                    </TooltipContent>
-                                  )}
-                                </Tooltip>
-                              )}
-                            </div>
-                          )
-                        )}
-                      {selectedTask.report && (
-                        <div
-                          ref={rePortRef}
-                          onWheel={(e) => {
-                            e.stopPropagation();
-                          }}
-                          className="group my-2 rounded-lg bg-surface-primary relative flex w-full flex-col"
-                        >
-                          <div className="top-0 rounded-lg bg-surface-primary py-2 pl-2 pr-2 sticky z-10 flex items-center justify-between">
-                            <div className="text-label-sm font-bold text-text-primary">
-                              Completion Report
-                            </div>
-                            <Button
-                              variant="ghost"
-                              size="xs"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                const reportText =
-                                  typeof selectedTask?.report === 'string'
-                                    ? selectedTask.report
-                                    : '';
-                                if (
-                                  reportText &&
-                                  navigator.clipboard?.writeText
-                                ) {
-                                  navigator.clipboard
-                                    .writeText(reportText)
-                                    .catch(() => {
-                                      // silently fail if clipboard is unavailable
-                                    });
-                                }
-                              }}
-                              className="text-label-xs"
-                            >
-                              <Copy className="text-icon-secondary" />
-                              <span className="text-icon-secondary">Copy</span>
-                            </Button>
-                          </div>
-                          <div className="px-2 py-2">
-                            <MarkDown
-                              content={selectedTask?.report}
-                              enableTypewriter={false}
-                              pTextSize="text-label-xs"
-                            />
-                          </div>
-                        </div>
-                      )}
+                      <TaskLogPanelContent
+                        selectedTask={selectedTask}
+                        chatStore={chatStore}
+                        isEditMode={data.isEditMode}
+                        reportRef={rePortRef}
+                      />
                     </motion.div>
                   )}
                 </AnimatePresence>
diff --git a/src/components/Workforce/ExpandedOverlay.tsx b/src/components/Workforce/ExpandedOverlay.tsx
new file mode 100644
index 000000000..20e5fe42f
--- /dev/null
+++ b/src/components/Workforce/ExpandedOverlay.tsx
@@ -0,0 +1,112 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useEffect, useRef, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+const EDGE_PADDING_PX = 32;
+
+export interface ExpandedOverlayProps {
+  open: boolean;
+  onClose: () => void;
+  header: ReactNode;
+  children: ReactNode;
+  bottomBar: ReactNode;
+  /** Dialog / surface accessible name */
+  titleLabel: string;
+  /** Label for the dimmed backdrop control (dismiss) */
+  backdropDismissLabel: string;
+}
+
+export default function ExpandedOverlay({
+  open,
+  onClose,
+  header,
+  children,
+  bottomBar,
+  titleLabel,
+  backdropDismissLabel,
+}: ExpandedOverlayProps) {
+  const { chatStore } = useChatStoreAdapter();
+  const workflowResetForOpenRef = useRef(false);
+
+  /** When the overlay opens, show workflow canvas with no agent workspace selected. */
+  useEffect(() => {
+    if (!open) {
+      workflowResetForOpenRef.current = false;
+      return;
+    }
+    if (workflowResetForOpenRef.current) return;
+    const taskId = chatStore?.activeTaskId;
+    if (!taskId || !chatStore) return;
+    workflowResetForOpenRef.current = true;
+    chatStore.setActiveWorkspace(taskId, 'workflow');
+    chatStore.setActiveAgent(taskId, '');
+    window.electronAPI?.hideAllWebview?.();
+  }, [open, chatStore]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  if (typeof document === 'undefined') return null;
+
+  return createPortal(
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          key="workforce-expanded-overlay"
+          className="inset-0 backdrop-blur-sm fixed z-[200] flex items-stretch justify-stretch bg-[rgba(0,0,0,0.5)]"
+          style={{ padding: EDGE_PADDING_PX }}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2, ease: [0.2, 0, 0, 1] }}
+        >
+          <button
+            type="button"
+            aria-label={backdropDismissLabel}
+            className="inset-0 absolute z-0 cursor-default bg-transparent"
+            onClick={onClose}
+          />
+          <motion.div
+            className="border-border-tertiary bg-surface-secondary min-h-0 min-w-0 rounded-2xl shadow-lg relative z-10 flex flex-1 flex-col overflow-hidden border border-solid"
+            role="dialog"
+            aria-modal="true"
+            aria-label={titleLabel}
+            onMouseDown={(e) => e.stopPropagation()}
+            initial={{ opacity: 0, y: 12, scale: 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 8, scale: 0.98 }}
+            transition={{ duration: 0.22, ease: [0.2, 0, 0, 1] }}
+          >
+            <div className="gap-2 p-2 relative z-50 flex w-full shrink-0 items-center justify-between">
+              {header}
+            </div>
+            <div className="min-h-0 min-w-0 w-full flex-1">{children}</div>
+            <div className="relative z-50 shrink-0">{bottomBar}</div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>,
+    document.body
+  );
+}
diff --git a/src/components/Workforce/FoldedPanel/AgentDetailPane.tsx b/src/components/Workforce/FoldedPanel/AgentDetailPane.tsx
new file mode 100644
index 000000000..d262c911f
--- /dev/null
+++ b/src/components/Workforce/FoldedPanel/AgentDetailPane.tsx
@@ -0,0 +1,593 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import Folder from '@/components/Folder';
+import { TaskState, type TaskStateType } from '@/components/TaskState';
+import Terminal from '@/components/Terminal';
+import { TaskLogPanelContent } from '@/components/WorkFlow/TaskLogPanelContent';
+import { getAgentToolkitLabels } from '@/components/WorkFlow/agentToolkitLabels';
+import { agentMap, type WorkflowAgentType } from '@/components/WorkFlow/agents';
+import { HoverScrollText } from '@/components/ui/HoverScrollText';
+import ShinyText from '@/components/ui/ShinyText/ShinyText';
+import { Button } from '@/components/ui/button';
+import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+import { getToolkitIcon } from '@/lib/toolkitIcons';
+import { cn } from '@/lib/utils';
+import {
+  AgentStatusValue,
+  ChatTaskStatus,
+  TaskStatus,
+} from '@/types/constants';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  ChevronDown,
+  ChevronLeft,
+  Circle,
+  CircleCheckBig,
+  CircleSlash,
+  CircleSlash2,
+  LoaderCircle,
+  TriangleAlert,
+} from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+
+function getTaskIdDisplay(taskId: string): string {
+  const list = taskId.split('.');
+  let idStr = '';
+  list.shift();
+  list.forEach((i: string, index: number) => {
+    idStr += Number(i) + (index === list.length - 1 ? '' : '.');
+  });
+  return idStr;
+}
+
+/** Enter: ease-out (settles gently). Exit: ease-in (picks up speed off-screen). */
+const SLIDE_EASE_OUT: [number, number, number, number] = [0.16, 1, 0.3, 1];
+const SLIDE_EASE_IN: [number, number, number, number] = [0.4, 0, 0.2, 1];
+
+const foldedTaskLogPanelVariants = {
+  initial: { x: '100%' },
+  animate: {
+    x: 0,
+    transition: { duration: 0.45, ease: SLIDE_EASE_OUT },
+  },
+  exit: {
+    x: '100%',
+    transition: { duration: 0.36, ease: SLIDE_EASE_IN },
+  },
+};
+
+const foldedTaskLogContentVariants = {
+  initial: { opacity: 0, x: -12 },
+  animate: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.35, ease: SLIDE_EASE_OUT },
+  },
+  exit: {
+    opacity: 0,
+    x: -8,
+    transition: { duration: 0.22, ease: SLIDE_EASE_IN },
+  },
+};
+
+export function AgentDetailPane({
+  agent,
+  onTakeManualFollowControl,
+}: {
+  agent: Agent;
+  /** Fires when user clicks task filter tabs (take control from auto-follow in folded workforce). */
+  onTakeManualFollowControl?: () => void;
+}) {
+  const { chatStore } = useChatStoreAdapter();
+  const [selectedState, setSelectedState] = useState<TaskStateType>('all');
+  const [filterTasks, setFilterTasks] = useState<NonNullable<Agent['tasks']>>(
+    []
+  );
+  const [toolkitHovered, setToolkitHovered] = useState(false);
+  /** Task accordion: collapsed = 1 header row + 2-line clamped title; expanded = full title + extras. */
+  const [expandedTaskIds, setExpandedTaskIds] = useState<
+    Record<string, boolean>
+  >({});
+  const [detailTask, setDetailTask] = useState<TaskInfo | null>(null);
+
+  useEffect(() => {
+    const tasks = agent?.tasks || [];
+    if (selectedState === 'all') {
+      setFilterTasks(tasks);
+      return;
+    }
+    setFilterTasks(
+      tasks.filter((task) => {
+        switch (selectedState) {
+          case 'done':
+            return task.status === TaskStatus.COMPLETED && !task.reAssignTo;
+          case 'reassigned':
+            return !!task.reAssignTo;
+          case 'ongoing':
+            return (
+              task.status !== TaskStatus.FAILED &&
+              task.status !== TaskStatus.COMPLETED &&
+              task.status !== TaskStatus.SKIPPED &&
+              task.status !== TaskStatus.WAITING &&
+              task.status !== TaskStatus.EMPTY &&
+              !task.reAssignTo
+            );
+          case 'pending':
+            return (
+              (task.status === TaskStatus.SKIPPED ||
+                task.status === TaskStatus.WAITING ||
+                task.status === TaskStatus.EMPTY) &&
+              !task.reAssignTo
+            );
+          case 'failed':
+            return task.status === TaskStatus.FAILED;
+          default:
+            return false;
+        }
+      })
+    );
+  }, [selectedState, agent?.tasks]);
+
+  useEffect(() => {
+    setSelectedState('all');
+    setExpandedTaskIds({});
+    setDetailTask(null);
+  }, [agent.agent_id]);
+
+  const activeTaskId = chatStore?.activeTaskId as string | undefined;
+
+  const toolkitLabels = getAgentToolkitLabels(agent);
+  const toolkitLine = toolkitLabels.join('  ');
+  const wfType = agent.type as WorkflowAgentType;
+  const preset = agentMap[wfType];
+
+  const browserImages = (agent.activeWebviewIds || [])
+    .filter((img) => img?.img)
+    .slice(0, 4);
+  const browserImageGridClass =
+    browserImages.length === 1
+      ? 'grid-cols-1 grid-rows-1'
+      : browserImages.length === 2
+        ? 'grid-cols-2 grid-rows-1'
+        : 'grid-cols-2 grid-rows-2';
+  const browserPlaceholderCount =
+    browserImages.length >= 3 ? Math.max(0, 4 - browserImages.length) : 0;
+
+  const terminalTasks = (agent?.tasks || [])
+    .filter((task) => task.terminal && task.terminal.length > 0)
+    .slice(0, 4);
+  const terminalGridClass =
+    terminalTasks.length === 1
+      ? 'grid-cols-1 grid-rows-1'
+      : terminalTasks.length === 2
+        ? 'grid-cols-2 grid-rows-1'
+        : 'grid-cols-2 grid-rows-2';
+  const terminalPlaceholderCount =
+    terminalTasks.length >= 3 ? Math.max(0, 4 - terminalTasks.length) : 0;
+
+  const focusAgent = useCallback(() => {
+    if (!chatStore?.activeTaskId) return;
+    chatStore.setActiveWorkspace(chatStore.activeTaskId, agent.agent_id);
+    window.electronAPI?.hideAllWebview?.();
+  }, [chatStore, agent.agent_id]);
+
+  if (!chatStore) {
+    return null;
+  }
+
+  return (
+    <div className="min-h-0 min-w-0 bg-surface-tertiary rounded-xl flex h-full w-full flex-col overflow-hidden">
+      <div
+        className={cn(
+          'bg-surface-tertiary top-0 min-h-0 min-w-0 pb-2 pt-2 w-full max-w-full shrink-0'
+        )}
+      >
+        <div
+          className={cn(
+            'min-w-0 text-base px-3 font-bold leading-relaxed',
+            preset?.textColor ?? 'text-text-primary'
+          )}
+        >
+          {preset?.name ?? agent.name}
+        </div>
+        <div
+          className="mt-sm min-h-4 min-w-0 px-3 w-full max-w-full"
+          onPointerEnter={() => setToolkitHovered(true)}
+          onPointerLeave={() => setToolkitHovered(false)}
+        >
+          <HoverScrollText
+            text={toolkitLine}
+            active={toolkitHovered}
+            className="text-xs font-normal leading-tight text-text-label"
+            innerClassName="text-xs font-normal leading-tight text-text-label"
+          />
+        </div>
+        {agent.tasks && agent.tasks.length > 0 && (
+          <div className="gap-1 border-task-border-default px-3 py-sm flex flex-col items-start justify-between border-0 border-b border-solid">
+            <div className="flex w-full flex-1 justify-start">
+              <TaskState
+                all={agent.tasks?.length || 0}
+                done={
+                  agent.tasks?.filter(
+                    (task) =>
+                      task.status === TaskStatus.COMPLETED && !task.reAssignTo
+                  ).length || 0
+                }
+                reAssignTo={
+                  agent.tasks?.filter((task) => task.reAssignTo)?.length || 0
+                }
+                progress={
+                  agent.tasks?.filter(
+                    (task) =>
+                      task.status !== TaskStatus.FAILED &&
+                      task.status !== TaskStatus.COMPLETED &&
+                      task.status !== TaskStatus.SKIPPED &&
+                      task.status !== TaskStatus.WAITING &&
+                      task.status !== TaskStatus.EMPTY &&
+                      !task.reAssignTo
+                  ).length || 0
+                }
+                skipped={
+                  agent.tasks?.filter(
+                    (task) =>
+                      (task.status === TaskStatus.SKIPPED ||
+                        task.status === TaskStatus.WAITING ||
+                        task.status === TaskStatus.EMPTY) &&
+                      !task.reAssignTo
+                  ).length || 0
+                }
+                failed={
+                  agent.tasks?.filter(
+                    (task) => task.status === TaskStatus.FAILED
+                  ).length || 0
+                }
+                selectedState={selectedState}
+                onStateChange={(state) => {
+                  onTakeManualFollowControl?.();
+                  setSelectedState(state);
+                }}
+                clickable={true}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Content: agent summary + task list; task log slides in from the right */}
+      <div className="min-h-0 relative flex-1 overflow-hidden">
+        <div
+          className="scrollbar scrollbar-always-visible min-h-0 h-full overflow-y-auto"
+          onWheel={(e) => e.stopPropagation()}
+        >
+          <div
+            className="pl-3 mb-2 mt-1 max-h-[180px] w-full"
+            onClick={focusAgent}
+          >
+            {browserImages.length > 0 && (
+              <div
+                className={`gap-1 grid h-[180px] w-full overflow-hidden ${browserImageGridClass}`}
+              >
+                {browserImages.map((img, index) => (
+                  <div
+                    key={`${img.img}-${index}`}
+                    className="rounded-lg relative h-full w-full overflow-hidden"
+                  >
+                    <img
+                      className="left-0 top-0 absolute h-[250%] w-[250%] origin-top-left scale-[0.4] object-cover"
+                      src={img.img}
+                      alt={agent.type}
+                    />
+                  </div>
+                ))}
+                {Array.from({ length: browserPlaceholderCount }).map(
+                  (_, index) => (
+                    <div
+                      key={`browser-placeholder-${index}`}
+                      className="rounded-sm bg-surface-primary h-full w-full"
+                    />
+                  )
+                )}
+              </div>
+            )}
+            {agent.type === 'document_agent' &&
+              agent.tasks &&
+              agent.tasks.length > 0 && (
+                <div className="rounded-sm relative h-[180px] w-full overflow-hidden">
+                  <div className="left-0 top-0 absolute h-[500px] w-[900px] origin-top-left scale-[0.36]">
+                    <Folder data={agent} />
+                  </div>
+                </div>
+              )}
+
+            {agent.type === 'developer_agent' && terminalTasks.length > 0 && (
+              <div
+                className={`gap-1 grid h-[180px] w-full overflow-hidden ${terminalGridClass}`}
+              >
+                {terminalTasks.map((task) => (
+                  <div
+                    key={task.id}
+                    className="rounded-lg relative h-full w-full overflow-hidden object-cover"
+                  >
+                    <div className="left-0 top-0 absolute h-[250%] w-[250%] origin-top-left scale-[0.4]">
+                      <Terminal content={task.terminal} />
+                    </div>
+                  </div>
+                ))}
+                {Array.from({ length: terminalPlaceholderCount }).map(
+                  (_, index) => (
+                    <div
+                      key={`terminal-placeholder-${index}`}
+                      className="rounded-lg bg-surface-primary h-full w-full"
+                    />
+                  )
+                )}
+              </div>
+            )}
+          </div>
+
+          <div className="gap-2 pl-3 pb-3 flex flex-col">
+            {agent.tasks &&
+              filterTasks.map((task) => {
+                const lastActiveToolkit = task.toolkits
+                  ?.filter(
+                    (tool: { toolkitName?: string }) =>
+                      tool.toolkitName !== 'notice'
+                  )
+                  .at(-1);
+                const isExpanded = Boolean(expandedTaskIds[task.id]);
+
+                return (
+                  <div
+                    key={`folded-task-${task.id}-${task.failure_count}`}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setDetailTask(task)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setDetailTask(task);
+                      }
+                    }}
+                    className={cn(
+                      'rounded-xl px-sm py-sm gap-1 flex cursor-pointer flex-col border border-solid transition-all duration-300',
+                      task.reAssignTo
+                        ? 'bg-task-fill-warning'
+                        : task.status === TaskStatus.COMPLETED
+                          ? 'bg-task-fill-success'
+                          : task.status === TaskStatus.FAILED
+                            ? 'bg-task-fill-error'
+                            : task.status === TaskStatus.RUNNING
+                              ? 'bg-task-fill-running'
+                              : task.status === TaskStatus.BLOCKED
+                                ? 'bg-task-fill-warning'
+                                : 'bg-task-fill-running',
+                      task.status === TaskStatus.COMPLETED
+                        ? 'hover:border-task-border-focus-success'
+                        : task.status === TaskStatus.FAILED
+                          ? 'hover:border-task-border-focus-error'
+                          : task.status === TaskStatus.RUNNING
+                            ? 'hover:border-border-primary'
+                            : task.status === TaskStatus.BLOCKED
+                              ? 'hover:border-task-border-focus-warning'
+                              : 'hover:border-task-border-focus',
+                      'border-transparent'
+                    )}
+                  >
+                    <div className="gap-2 flex w-full items-center justify-between">
+                      <div className="min-w-0 gap-x-2 gap-y-0.5 flex items-center">
+                        <div className="h-4 flex shrink-0 items-center justify-center">
+                          {task.reAssignTo ? (
+                            <CircleSlash2
+                              size={16}
+                              className="text-icon-warning"
+                            />
+                          ) : (
+                            <>
+                              {task.status === TaskStatus.RUNNING && (
+                                <LoaderCircle
+                                  size={16}
+                                  className={cn(
+                                    'text-icon-information',
+                                    activeTaskId &&
+                                      chatStore.tasks[activeTaskId]?.status ===
+                                        ChatTaskStatus.RUNNING &&
+                                      'animate-spin'
+                                  )}
+                                />
+                              )}
+                              {task.status === TaskStatus.SKIPPED && (
+                                <LoaderCircle
+                                  size={16}
+                                  className="text-icon-secondary"
+                                />
+                              )}
+                              {task.status === TaskStatus.COMPLETED && (
+                                <CircleCheckBig
+                                  size={16}
+                                  className="text-icon-success"
+                                />
+                              )}
+                              {task.status === TaskStatus.FAILED && (
+                                <CircleSlash
+                                  size={16}
+                                  className="text-icon-cuation"
+                                />
+                              )}
+                              {task.status === TaskStatus.BLOCKED && (
+                                <TriangleAlert
+                                  size={16}
+                                  className="text-icon-warning"
+                                />
+                              )}
+                              {(task.status === TaskStatus.EMPTY ||
+                                task.status === TaskStatus.WAITING) && (
+                                <Circle size={16} className="text-slate-400" />
+                              )}
+                            </>
+                          )}
+                        </div>
+                        <div className="min-w-0 gap-x-2 gap-y-0.5 flex flex-wrap items-center">
+                          <span className="text-xs font-bold leading-13 text-text-body shrink-0">
+                            No. {getTaskIdDisplay(task.id)}
+                          </span>
+                          {task.reAssignTo ? (
+                            <div className="rounded-lg bg-tag-fill-document px-1 py-0.5 text-xs font-bold text-text-warning leading-none">
+                              Reassigned to {task.reAssignTo}
+                            </div>
+                          ) : (
+                            (task.failure_count ?? 0) > 0 && (
+                              <div
+                                className={cn(
+                                  'rounded-lg px-1 py-0.5 text-xs font-bold leading-none',
+                                  task.status === TaskStatus.FAILED
+                                    ? 'bg-surface-error-subtle text-text-cuation'
+                                    : task.status === TaskStatus.COMPLETED
+                                      ? 'text-text-success-default bg-tag-fill-developer'
+                                      : 'bg-tag-surface-hover text-text-label'
+                                )}
+                              >
+                                Attempt {task.failure_count}
+                              </div>
+                            )
+                          )}
+                        </div>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="xxs"
+                        buttonContent="icon-only"
+                        buttonRadius="lg"
+                        className="text-icon-secondary shrink-0 opacity-50"
+                        aria-expanded={isExpanded}
+                        aria-label={
+                          isExpanded ? 'Collapse task details' : 'Expand task'
+                        }
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setExpandedTaskIds((prev) => ({
+                            ...prev,
+                            [task.id]: !prev[task.id],
+                          }));
+                        }}
+                      >
+                        <ChevronDown
+                          className={cn(
+                            'size-4 transition-transform duration-200',
+                            isExpanded && 'rotate-180'
+                          )}
+                          aria-hidden
+                        />
+                      </Button>
+                    </div>
+                    <div
+                      className={cn(
+                        'mt-0.5 pl-4 min-w-0 w-full max-w-full text-left',
+                        task.status === TaskStatus.FAILED
+                          ? 'text-text-cuation-default'
+                          : task.status === TaskStatus.BLOCKED
+                            ? 'text-text-body'
+                            : 'text-text-primary'
+                      )}
+                    >
+                      <div
+                        className={cn(
+                          'text-label-xs font-medium block break-words select-text',
+                          !isExpanded && 'line-clamp-2 overflow-hidden',
+                          isExpanded && 'whitespace-pre-line'
+                        )}
+                      >
+                        {task.content ?? ''}
+                      </div>
+                    </div>
+                    {task.status === TaskStatus.RUNNING && isExpanded && (
+                      <div className="ml-4 mt-0.5 gap-2 flex items-center duration-400">
+                        {lastActiveToolkit?.toolkitStatus ===
+                          AgentStatusValue.RUNNING && (
+                          <div className="min-w-0 gap-sm flex flex-1 items-center justify-start duration-300">
+                            {getToolkitIcon(
+                              lastActiveToolkit.toolkitName ?? ''
+                            )}
+                            <div className="min-w-0 pt-1 text-xs leading-17 text-text-primary max-w-full flex-shrink flex-grow-0 overflow-hidden text-ellipsis whitespace-nowrap">
+                              <ShinyText
+                                text={task.toolkits?.[0]?.toolkitName ?? ''}
+                                className="text-xs font-bold leading-17 text-text-primary pointer-events-auto w-full overflow-hidden text-ellipsis whitespace-nowrap select-text"
+                              />
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+          </div>
+        </div>
+
+        <AnimatePresence>
+          {detailTask && (
+            <motion.div
+              key="folded-agent-task-log"
+              variants={foldedTaskLogPanelVariants}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              className="inset-0 rounded-br-xl bg-surface-tertiary absolute z-20 flex flex-col overflow-hidden will-change-transform"
+            >
+              <div className="gap-1 px-2 pb-2 flex shrink-0 items-center">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="xxs"
+                  buttonContent="icon-only"
+                  buttonRadius="lg"
+                  className="text-icon-secondary shrink-0"
+                  aria-label="Back to agent details"
+                  onClick={() => setDetailTask(null)}
+                >
+                  <ChevronLeft className="size-4" aria-hidden />
+                </Button>
+                <span className="min-w-0 text-label-sm font-bold text-text-primary truncate">
+                  No. {getTaskIdDisplay(detailTask.id)}
+                </span>
+              </div>
+              <div
+                onWheel={(e) => e.stopPropagation()}
+                className="scrollbar scrollbar-always-visible min-h-0 pb-2 pl-3 pr-1 flex-1 overflow-y-auto"
+              >
+                <AnimatePresence mode="wait">
+                  <motion.div
+                    key={detailTask.id}
+                    variants={foldedTaskLogContentVariants}
+                    initial="initial"
+                    animate="animate"
+                    exit="exit"
+                    className="gap-sm flex w-full flex-col"
+                  >
+                    <TaskLogPanelContent
+                      selectedTask={detailTask}
+                      chatStore={chatStore}
+                      isEditMode={false}
+                    />
+                  </motion.div>
+                </AnimatePresence>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Workforce/FoldedPanel/index.tsx b/src/components/Workforce/FoldedPanel/index.tsx
new file mode 100644
index 000000000..2444eb2e5
--- /dev/null
+++ b/src/components/Workforce/FoldedPanel/index.tsx
@@ -0,0 +1,748 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { AddWorker } from '@/components/AddWorker';
+import { StreamingTaskList } from '@/components/ChatBox/TaskBox/StreamingTaskList';
+import { TaskCard } from '@/components/ChatBox/TaskBox/TaskCard';
+import { TypeCardSkeleton } from '@/components/ChatBox/TaskBox/TypeCardSkeleton';
+import { Button } from '@/components/ui/button';
+import { HoverScrollText } from '@/components/ui/HoverScrollText';
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import { agentMap, type WorkflowAgentType } from '@/components/WorkFlow/agents';
+import { getAgentToolkitLabels } from '@/components/WorkFlow/agentToolkitLabels';
+import { BASE_WORKFLOW_AGENTS } from '@/components/WorkFlow/baseWorkers';
+import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+import { cn } from '@/lib/utils';
+import { useAuthStore, useWorkerList } from '@/store/authStore';
+import { AgentStep, ChatTaskStatus, TaskStatus } from '@/types/constants';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  Bird,
+  Bot,
+  CodeXml,
+  Ellipsis,
+  FileText,
+  Globe,
+  Image,
+  Trash2,
+} from 'lucide-react';
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+
+import { AgentDetailPane } from './AgentDetailPane';
+
+const FOLDED_LAYOUT_TRANSITION = {
+  duration: 0.28,
+  ease: [0.4, 0, 0.2, 1] as const,
+};
+
+const EMPTY_TASK_ASSIGNING: Agent[] = [];
+
+/** After this long without pointer/scroll activity on the folded panel, resume auto-following the working agent. */
+const FOLDED_MANUAL_IDLE_RESUME_MS = 5 * 60 * 1000;
+
+/** True once any assigned sub-task has left waiting/empty (execution has begun or finished a unit of work). */
+function hasAgentTaskExecutionStarted(agents: Agent[]): boolean {
+  return agents.some((agent) =>
+    (agent.tasks ?? []).some((t) => {
+      const s = t.status;
+      if (!s || s === TaskStatus.WAITING) return false;
+      return true;
+    })
+  );
+}
+
+/**
+ * Prefer the last agent in list order that has an actively running (or blocked) sub-task — "latest" in rail order.
+ * Falls back to any agent with in-flight work (same sense as TaskState "ongoing"), then null.
+ */
+function pickLatestWorkingAgentId(agents: Agent[]): string | null {
+  const isRunningOrBlocked = (s: TaskInfo['status']) =>
+    s === TaskStatus.RUNNING || s === TaskStatus.BLOCKED;
+
+  for (let i = agents.length - 1; i >= 0; i--) {
+    const a = agents[i];
+    if ((a.tasks ?? []).some((t) => isRunningOrBlocked(t.status))) {
+      return a.agent_id;
+    }
+  }
+  for (let i = agents.length - 1; i >= 0; i--) {
+    const a = agents[i];
+    const hasOngoing = (a.tasks ?? []).some((t) => {
+      if (t.reAssignTo) return false;
+      const s = t.status;
+      return (
+        !!s &&
+        s !== TaskStatus.FAILED &&
+        s !== TaskStatus.COMPLETED &&
+        s !== TaskStatus.SKIPPED &&
+        s !== TaskStatus.WAITING
+      );
+    });
+    if (hasOngoing) return a.agent_id;
+  }
+  return null;
+}
+
+/** Sub icons aligned with `WorkspaceMenu` → `MenuToggleItem` (top-right badge, 10px). */
+function getWorkspaceMenuStyleSubIcon(agentType: string): ReactNode {
+  const key = agentType as WorkflowAgentType;
+  if (!agentMap[key]) return null;
+  const textColor = agentMap[key].textColor;
+  const iconClass = cn('!h-[10px] !w-[10px] shrink-0', textColor);
+  switch (key) {
+    case 'developer_agent':
+      return <CodeXml className={iconClass} />;
+    case 'browser_agent':
+      return <Globe className={iconClass} />;
+    case 'document_agent':
+      return <FileText className={iconClass} />;
+    case 'multi_modal_agent':
+      return <Image className={iconClass} />;
+    case 'social_media_agent':
+      return <Bird className={iconClass} />;
+    default:
+      return null;
+  }
+}
+
+function FoldedAgentLeadingIcon({ agentType }: { agentType: string }) {
+  const subIcon = getWorkspaceMenuStyleSubIcon(agentType);
+  return (
+    <div className="h-6 w-6 text-text-secondary relative inline-flex shrink-0 items-center justify-center self-center">
+      <Bot className="h-6 w-6" strokeWidth={2} aria-hidden />
+      {subIcon != null && (
+        <span className="-right-1 -top-1 absolute inline-flex items-center justify-center [&_svg]:shrink-0">
+          {subIcon}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function isBaseWorkflowAgent(agent: Agent): boolean {
+  return BASE_WORKFLOW_AGENTS.some((b) => b.agent_id === agent.agent_id);
+}
+
+function FoldedAgentCard({
+  agent,
+  isActive,
+  dimmed,
+  compactMode,
+  onSelect,
+  showUserAgentOverflow,
+  onDeleteUserAgent,
+}: {
+  agent: Agent;
+  isActive: boolean;
+  dimmed: boolean;
+  compactMode: boolean;
+  onSelect: () => void;
+  showUserAgentOverflow?: boolean;
+  onDeleteUserAgent?: (agentId: string) => void;
+}) {
+  const [toolkitHovered, setToolkitHovered] = useState(false);
+  const toolkitLabels = getAgentToolkitLabels(agent);
+  const toolkitLine = toolkitLabels.join('  ');
+  const wfType = agent.type as WorkflowAgentType;
+  const preset = agentMap[wfType];
+
+  const iconOnly = compactMode;
+
+  const agentLabel = preset?.name ?? agent.name;
+
+  const shellClass = cn(
+    'rounded-xl bg-worker-surface-primary focus-within:ring-ring ease-in-out overflow-hidden border border-solid transition-all duration-200 focus-within:ring-2',
+    compactMode
+      ? cn(
+          'border-border-secondary hover:border-worker-border-default',
+          isActive && (preset?.borderColor ?? 'border-worker-border-default'),
+          !isActive && 'opacity-80'
+        )
+      : cn(
+          'border-transparent hover:border-transparent',
+          !isActive && 'opacity-80'
+        ),
+    iconOnly ? 'inline-flex' : 'group relative w-full min-w-0 max-w-full',
+    dimmed && 'border-transparent opacity-30'
+  );
+
+  const expandedRow = (
+    <div className="gap-md px-3 pb-2 pt-2 min-w-0 flex w-full max-w-full items-center">
+      <FoldedAgentLeadingIcon agentType={agent.type} />
+      <div className="min-w-0 min-h-0 flex flex-1 flex-col overflow-hidden">
+        <div
+          className={cn(
+            'text-base font-bold leading-relaxed',
+            preset?.textColor ?? 'text-text-primary'
+          )}
+        >
+          {preset?.name ?? agent.name}
+        </div>
+        <div className="mt-0.5 min-h-4 min-w-0 w-full">
+          <HoverScrollText
+            text={toolkitLine}
+            active={toolkitHovered}
+            className="text-xs font-normal leading-tight text-text-label"
+            innerClassName="text-xs font-normal leading-tight text-text-label"
+          />
+        </div>
+      </div>
+    </div>
+  );
+
+  const button = iconOnly ? (
+    <button
+      type="button"
+      onClick={onSelect}
+      aria-label={agentLabel}
+      className={cn(
+        shellClass,
+        'focus-visible:ring-ring p-2 inline-flex items-center justify-center text-left focus-visible:ring-2 focus-visible:outline-none'
+      )}
+    >
+      <FoldedAgentLeadingIcon agentType={agent.type} />
+    </button>
+  ) : showUserAgentOverflow ? (
+    <div
+      className={shellClass}
+      onMouseEnter={() => setToolkitHovered(true)}
+      onMouseLeave={() => setToolkitHovered(false)}
+    >
+      <button
+        type="button"
+        onClick={onSelect}
+        className={cn(
+          'focus-visible:ring-ring min-w-0 flex w-full max-w-full flex-col bg-transparent text-left hover:bg-transparent focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-none',
+          'pr-9'
+        )}
+      >
+        {expandedRow}
+      </button>
+      <div className="right-1 pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 opacity-0 transition-opacity group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100">
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              onClick={(e) => e.stopPropagation()}
+              variant="ghost"
+              size="sm"
+              buttonContent="icon-only"
+              className="text-text-secondary shrink-0"
+              aria-label={`More actions for ${agentLabel}`}
+            >
+              <Ellipsis className="h-4 w-4" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            align="end"
+            className="border-dropdown-border bg-dropdown-bg p-sm w-[98px] rounded-[12px] border border-solid"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="space-y-1">
+              <PopoverClose asChild>
+                <AddWorker edit workerInfo={agent} />
+              </PopoverClose>
+              <PopoverClose asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="gap-2 w-full justify-start"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDeleteUserAgent?.(agent.agent_id);
+                  }}
+                >
+                  <Trash2
+                    size={16}
+                    className="text-icon-primary group-hover:text-icon-cuation"
+                  />
+                  Delete
+                </Button>
+              </PopoverClose>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  ) : (
+    <button
+      type="button"
+      onClick={onSelect}
+      onMouseEnter={() => setToolkitHovered(true)}
+      onMouseLeave={() => setToolkitHovered(false)}
+      className={cn(
+        shellClass,
+        'focus-visible:ring-ring min-w-0 flex w-full max-w-full flex-col text-left focus-visible:ring-2 focus-visible:outline-none'
+      )}
+    >
+      {expandedRow}
+    </button>
+  );
+
+  if (iconOnly) {
+    return (
+      <TooltipSimple
+        content={agentLabel}
+        side="right"
+        sideOffset={8}
+        delayDuration={300}
+      >
+        {button}
+      </TooltipSimple>
+    );
+  }
+
+  return button;
+}
+
+export interface FoldedPanelProps {
+  /** When true, do not push global activeWorkspace/activeAgent from the folded rail (expanded overlay shows workflow-only). */
+  pauseAgentWorkspaceSync?: boolean;
+}
+
+/**
+ * Narrow-column workforce layout when the workspace chat panel is visible.
+ * - `initial`: workforce list before any sub-task has started executing (agents may already exist on the task).
+ * - `task-live`: icon rail + detail pane once at least one assigned sub-task is past waiting.
+ */
+export default function FoldedPanel({
+  pauseAgentWorkspaceSync = false,
+}: FoldedPanelProps) {
+  const { chatStore, projectStore } = useChatStoreAdapter();
+  const workerList = useWorkerList();
+  const { setWorkerList } = useAuthStore();
+  const [detailAgentId, setDetailAgentId] = useState<string | null>(null);
+  /** User chose an agent in the rail; pause auto-follow until idle timeout. */
+  const [manualFollowPaused, setManualFollowPaused] = useState(false);
+  const idleResumeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearIdleResumeTimer = useCallback(() => {
+    if (idleResumeTimerRef.current) {
+      clearTimeout(idleResumeTimerRef.current);
+      idleResumeTimerRef.current = null;
+    }
+  }, []);
+
+  const resetManualIdleResumeTimer = useCallback(() => {
+    if (idleResumeTimerRef.current) {
+      clearTimeout(idleResumeTimerRef.current);
+      idleResumeTimerRef.current = null;
+    }
+    idleResumeTimerRef.current = setTimeout(() => {
+      idleResumeTimerRef.current = null;
+      setManualFollowPaused(false);
+    }, FOLDED_MANUAL_IDLE_RESUME_MS);
+  }, []);
+
+  const onDeleteUserAgent = useCallback(
+    (agentId: string) => {
+      setWorkerList(workerList.filter((w) => w.agent_id !== agentId));
+    },
+    [workerList, setWorkerList]
+  );
+
+  const activeTaskId = chatStore?.activeTaskId as string | undefined;
+  const activeTask = activeTaskId ? chatStore?.tasks[activeTaskId] : undefined;
+  const taskAssigning = activeTask?.taskAssigning ?? EMPTY_TASK_ASSIGNING;
+
+  const activeChatStore = projectStore.getActiveChatStore();
+  const streamingDecomposeText = useSyncExternalStore(
+    (callback) => {
+      if (!activeChatStore) return () => {};
+      return activeChatStore.subscribe(callback);
+    },
+    () => {
+      if (!activeChatStore) return '';
+      const state = activeChatStore.getState();
+      const taskId = state.activeTaskId;
+      if (!taskId || !state.tasks[taskId]) return '';
+      return state.tasks[taskId].streamingDecomposeText || '';
+    },
+    () => ''
+  );
+
+  const activeProjectId = projectStore.activeProjectId;
+  const taskPanelChatId =
+    activeProjectId && projectStore.projects[activeProjectId]
+      ? (projectStore.projects[activeProjectId].activeChatId ?? undefined)
+      : undefined;
+
+  const { taskCardVisible, isSkeletonPhase, showStreamingDecompose, taskType } =
+    useMemo(() => {
+      const fallback = {
+        taskCardVisible: false,
+        isSkeletonPhase: false,
+        showStreamingDecompose: false,
+        taskType: 1 as 1 | 2 | 3,
+      };
+      if (!activeTask || !activeTaskId) return fallback;
+
+      const messages = activeTask.messages;
+      const isHumanReply =
+        !!activeTask.activeAsk ||
+        (() => {
+          const userMessages = messages.filter((m: any) => m.role === 'user');
+          const lastUser = userMessages[userMessages.length - 1];
+          if (!lastUser) return false;
+          const userMessageIndex = messages.findIndex(
+            (m: any) => m.id === lastUser.id
+          );
+          if (userMessageIndex > 0) {
+            const prevMessage = messages[userMessageIndex - 1];
+            return (
+              prevMessage?.role === 'agent' &&
+              prevMessage?.step === AgentStep.ASK
+            );
+          }
+          return false;
+        })();
+
+      const anyToSubTasksMessage = messages.find(
+        (m: any) => m.step === AgentStep.TO_SUB_TASKS
+      );
+      const isSkeletonPhaseLocal =
+        (activeTask.status !== ChatTaskStatus.FINISHED &&
+          activeTask.status !== ChatTaskStatus.RUNNING &&
+          !anyToSubTasksMessage &&
+          !activeTask.hasWaitComfirm &&
+          messages.length > 0) ||
+        (!!activeTask.isTakeControl && !anyToSubTasksMessage);
+
+      let lastUserIndex = -1;
+      for (let i = messages.length - 1; i >= 0; i--) {
+        if (messages[i].role === 'user') {
+          lastUserIndex = i;
+          break;
+        }
+      }
+      const afterLastUser =
+        lastUserIndex >= 0 ? messages.slice(lastUserIndex + 1) : [];
+      const hasTaskPlanForCurrentTurn = afterLastUser.some(
+        (m: any) => m.step === AgentStep.TO_SUB_TASKS
+      );
+
+      const isDecomposing = streamingDecomposeText.length > 0;
+      const shouldShowFallbackTask =
+        lastUserIndex >= 0 &&
+        !hasTaskPlanForCurrentTurn &&
+        !activeTask.hasWaitComfirm &&
+        !isDecomposing &&
+        activeTask.status !== ChatTaskStatus.FINISHED;
+
+      const taskLike = hasTaskPlanForCurrentTurn || shouldShowFallbackTask;
+
+      const taskCardVisibleLocal =
+        taskLike && !isSkeletonPhaseLocal && !isHumanReply;
+
+      const showStreamingDecomposeLocal =
+        streamingDecomposeText.length > 0 &&
+        activeTask.status !== ChatTaskStatus.FINISHED &&
+        !isHumanReply &&
+        !hasTaskPlanForCurrentTurn;
+
+      const toSub = [...messages]
+        .reverse()
+        .find((m: any) => m.step === AgentStep.TO_SUB_TASKS);
+      const taskTypeLocal = (toSub?.taskType as 1 | 2 | 3) || 1;
+
+      return {
+        taskCardVisible: taskCardVisibleLocal,
+        isSkeletonPhase: isSkeletonPhaseLocal,
+        showStreamingDecompose: showStreamingDecomposeLocal,
+        taskType: taskTypeLocal,
+      };
+    }, [activeTask, activeTaskId, streamingDecomposeText]);
+
+  const sortedAgents = useMemo(() => {
+    const base = [...BASE_WORKFLOW_AGENTS, ...workerList].filter(
+      (worker) => !taskAssigning.find((a) => a.type === worker.type)
+    );
+    const allAgents = [...taskAssigning, ...base];
+    return [...allAgents].sort((a, b) => {
+      const aHas = a.tasks && a.tasks.length > 0;
+      const bHas = b.tasks && b.tasks.length > 0;
+      if (aHas && !bHas) return -1;
+      if (!aHas && bHas) return 1;
+      return 0;
+    });
+  }, [taskAssigning, workerList]);
+
+  const isTaskLiveLayout = hasAgentTaskExecutionStarted(taskAssigning);
+
+  useEffect(() => {
+    if (!manualFollowPaused || !isTaskLiveLayout) {
+      clearIdleResumeTimer();
+      return;
+    }
+    resetManualIdleResumeTimer();
+    return clearIdleResumeTimer;
+  }, [
+    manualFollowPaused,
+    isTaskLiveLayout,
+    resetManualIdleResumeTimer,
+    clearIdleResumeTimer,
+  ]);
+
+  const onFoldedPanelEngagement = useCallback(() => {
+    if (!manualFollowPaused || !isTaskLiveLayout) return;
+    resetManualIdleResumeTimer();
+  }, [manualFollowPaused, isTaskLiveLayout, resetManualIdleResumeTimer]);
+
+  const detailAgent = useMemo(
+    () =>
+      detailAgentId
+        ? (sortedAgents.find((a) => a.agent_id === detailAgentId) ?? null)
+        : null,
+    [detailAgentId, sortedAgents]
+  );
+
+  /** Match main chat: task execution has started (not PENDING planning). */
+  const isMainTaskStarted =
+    !!activeTask &&
+    (activeTask.status === ChatTaskStatus.RUNNING ||
+      activeTask.status === ChatTaskStatus.FINISHED ||
+      activeTask.status === ChatTaskStatus.PAUSE);
+
+  /** TaskCard only after the main task has started and an agent is selected (not detail-pane "Select an agent"). */
+  const showFoldedTaskCard =
+    taskCardVisible && isMainTaskStarted && detailAgent != null;
+
+  useEffect(() => {
+    if (pauseAgentWorkspaceSync) {
+      return;
+    }
+    if (!isTaskLiveLayout) {
+      setDetailAgentId(null);
+      setManualFollowPaused(false);
+      return;
+    }
+    if (manualFollowPaused) {
+      setDetailAgentId((prev) => {
+        if (prev && sortedAgents.some((a) => a.agent_id === prev)) return prev;
+        return (
+          sortedAgents.find((a) => (a.tasks?.length ?? 0) > 0)?.agent_id ??
+          sortedAgents[0]?.agent_id ??
+          null
+        );
+      });
+      return;
+    }
+
+    const workingId = pickLatestWorkingAgentId(sortedAgents);
+    const agentFromWorkspace =
+      activeTask?.activeWorkspace &&
+      sortedAgents.some((a) => a.agent_id === activeTask.activeWorkspace)
+        ? activeTask.activeWorkspace
+        : null;
+    const agentFromActiveAgent =
+      activeTask?.activeAgent &&
+      sortedAgents.some((a) => a.agent_id === activeTask.activeAgent)
+        ? activeTask.activeAgent
+        : null;
+    const fallback =
+      agentFromWorkspace ??
+      agentFromActiveAgent ??
+      sortedAgents.find((a) => (a.tasks?.length ?? 0) > 0)?.agent_id ??
+      sortedAgents[0]?.agent_id ??
+      null;
+    const resolved = workingId ?? fallback;
+
+    if (!resolved) return;
+
+    setDetailAgentId((prev) => (prev === resolved ? prev : resolved));
+
+    const taskId = chatStore?.activeTaskId;
+    if (!taskId || !chatStore) return;
+    if (
+      activeTask?.activeWorkspace === resolved &&
+      activeTask?.activeAgent === resolved
+    ) {
+      return;
+    }
+    chatStore.setActiveWorkspace(taskId, resolved);
+    chatStore.setActiveAgent(taskId, resolved);
+    window.electronAPI?.hideAllWebview?.();
+  }, [
+    isTaskLiveLayout,
+    manualFollowPaused,
+    sortedAgents,
+    activeTask?.activeAgent,
+    activeTask?.activeWorkspace,
+    chatStore,
+    activeTaskId,
+    pauseAgentWorkspaceSync,
+  ]);
+
+  const onSelectAgent = useCallback(
+    (agentId: string) => {
+      if (!chatStore?.activeTaskId) return;
+      chatStore.setActiveWorkspace(chatStore.activeTaskId, agentId);
+      chatStore.setActiveAgent(chatStore.activeTaskId, agentId);
+      window.electronAPI?.hideAllWebview?.();
+    },
+    [chatStore]
+  );
+
+  if (!chatStore) {
+    return null;
+  }
+
+  const activeAgentId = activeTask?.activeAgent;
+
+  return (
+    <div
+      className="bg-surface-secondary min-h-0 min-w-0 flex h-full w-full flex-col"
+      data-workforce-folded={isTaskLiveLayout ? 'task-live' : 'initial'}
+    >
+      <div className="min-h-0 min-w-0 flex flex-1 flex-col overflow-hidden">
+        <AnimatePresence mode="wait" initial={false}>
+          {isTaskLiveLayout ? (
+            <motion.div
+              key="task-live"
+              className="min-h-0 min-w-0 flex flex-1 flex-col overflow-hidden"
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 10 }}
+              transition={FOLDED_LAYOUT_TRANSITION}
+              onPointerDownCapture={onFoldedPanelEngagement}
+              onWheelCapture={onFoldedPanelEngagement}
+            >
+              <div className="scrollbar scrollbar-always-visible py-2 pl-2 pr-2 shrink-0 overflow-x-auto overflow-y-hidden">
+                <div className="gap-2 flex w-max min-w-full flex-row flex-nowrap items-center">
+                  {sortedAgents.map((agent) => (
+                    <div key={agent.agent_id} className="shrink-0">
+                      <FoldedAgentCard
+                        agent={agent}
+                        isActive={detailAgentId === agent.agent_id}
+                        dimmed={
+                          isTaskLiveLayout && (agent.tasks?.length ?? 0) === 0
+                        }
+                        compactMode
+                        onSelect={() => {
+                          setManualFollowPaused(true);
+                          setDetailAgentId(agent.agent_id);
+                          onSelectAgent(agent.agent_id);
+                        }}
+                        showUserAgentOverflow={false}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+              {(showFoldedTaskCard ||
+                isSkeletonPhase ||
+                showStreamingDecompose) &&
+                activeTaskId &&
+                activeTask &&
+                chatStore && (
+                  <div className="scrollbar scrollbar-always-visible min-h-0 min-w-0 pb-2 flex h-full shrink-0 flex-col overflow-x-hidden overflow-y-auto">
+                    {showStreamingDecompose && (
+                      <StreamingTaskList
+                        streamingText={streamingDecomposeText}
+                      />
+                    )}
+                    {isSkeletonPhase && (
+                      <TypeCardSkeleton
+                        isTakeControl={activeTask.isTakeControl || false}
+                      />
+                    )}
+                    {showFoldedTaskCard && (
+                      <TaskCard
+                        key={`task-folded-${activeTaskId}`}
+                        chatId={taskPanelChatId}
+                        taskInfo={activeTask.taskInfo || []}
+                        taskType={taskType}
+                        taskAssigning={activeTask.taskAssigning || []}
+                        taskRunning={activeTask.taskRunning || []}
+                        progressValue={activeTask.progressValue || 0}
+                        summaryTask={activeTask.summaryTask || ''}
+                        onAddTask={() => {
+                          chatStore.setIsTaskEdit(activeTaskId, true);
+                          chatStore.addTaskInfo();
+                        }}
+                        onUpdateTask={(taskIndex, content) => {
+                          chatStore.setIsTaskEdit(activeTaskId, true);
+                          chatStore.updateTaskInfo(taskIndex, content);
+                        }}
+                        onSaveTask={() => {
+                          chatStore.saveTaskInfo();
+                        }}
+                        onDeleteTask={(taskIndex) => {
+                          chatStore.setIsTaskEdit(activeTaskId, true);
+                          chatStore.deleteTaskInfo(taskIndex);
+                        }}
+                        clickable
+                      />
+                    )}
+                  </div>
+                )}
+              <div className="min-h-0 min-w-0 px-2 pb-2 hidden flex-1 flex-col overflow-hidden">
+                {detailAgent ? (
+                  <AgentDetailPane
+                    agent={detailAgent}
+                    onTakeManualFollowControl={() =>
+                      setManualFollowPaused(true)
+                    }
+                  />
+                ) : (
+                  <div className="text-text-label p-3 text-body-sm">
+                    Select an agent
+                  </div>
+                )}
+              </div>
+            </motion.div>
+          ) : (
+            <motion.div
+              key="initial"
+              className="scrollbar scrollbar-always-visible min-h-0 min-w-0 pl-2 pb-2 pt-1 flex-1 overflow-x-hidden overflow-y-auto"
+              initial={{ opacity: 0, x: 10 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -10 }}
+              transition={FOLDED_LAYOUT_TRANSITION}
+            >
+              <div className="gap-2 min-w-0 flex w-full max-w-full flex-col opacity-80">
+                {sortedAgents.map((agent) => (
+                  <FoldedAgentCard
+                    key={agent.agent_id}
+                    agent={agent}
+                    isActive={activeAgentId === agent.agent_id}
+                    dimmed={false}
+                    compactMode={false}
+                    onSelect={() => onSelectAgent(agent.agent_id)}
+                    showUserAgentOverflow={!isBaseWorkflowAgent(agent)}
+                    onDeleteUserAgent={onDeleteUserAgent}
+                  />
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Workforce/WorkspaceContent.tsx b/src/components/Workforce/WorkspaceContent.tsx
new file mode 100644
index 000000000..a78a998b2
--- /dev/null
+++ b/src/components/Workforce/WorkspaceContent.tsx
@@ -0,0 +1,106 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import BrowserAgentWorkspace from '@/components/BrowserAgentWorkSpace';
+import Folder from '@/components/Folder';
+import TerminalAgentWorkspace from '@/components/TerminalAgentWorkspace';
+import Workflow from '@/components/WorkFlow';
+import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+
+/** Shared workforce main canvas: browser, workflow, terminal, document folders, inbox. */
+export function WorkspaceContent() {
+  const { chatStore } = useChatStoreAdapter();
+  const activeTask = chatStore?.activeTaskId
+    ? chatStore.tasks[chatStore.activeTaskId]
+    : null;
+  const activeWorkSpace = activeTask?.activeWorkspace;
+
+  if (!chatStore || !activeTask || !activeWorkSpace) {
+    return (
+      <div className="flex h-full w-full flex-1 items-center justify-center">
+        <div className="relative flex h-full w-full flex-col">
+          <div className="inset-0 rounded-xl pointer-events-none absolute bg-transparent"></div>
+          <div className="relative z-10 h-full w-full">
+            <Workflow taskAssigning={[]} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {activeTask.taskAssigning?.find(
+        (agent) => agent.agent_id === activeWorkSpace
+      )?.type === 'browser_agent' && (
+        <div className="flex h-full w-full flex-1">
+          <BrowserAgentWorkspace />
+        </div>
+      )}
+      {activeWorkSpace === 'workflow' && (
+        <div className="flex h-full w-full flex-1 items-center justify-center">
+          <div className="relative flex h-full w-full flex-col">
+            <div className="inset-0 rounded-xl pointer-events-none absolute bg-transparent"></div>
+            <div className="relative z-10 h-full w-full">
+              <Workflow taskAssigning={activeTask.taskAssigning || []} />
+            </div>
+          </div>
+        </div>
+      )}
+      {activeTask.taskAssigning?.find(
+        (agent) => agent.agent_id === activeWorkSpace
+      )?.type === 'developer_agent' && (
+        <div className="flex h-full w-full flex-1">
+          <TerminalAgentWorkspace />
+        </div>
+      )}
+      {activeWorkSpace === 'documentWorkSpace' && (
+        <div className="flex h-full w-full flex-1 items-center justify-center">
+          <div className="relative flex h-full w-full flex-col">
+            <div className="blur-bg inset-0 rounded-xl bg-surface-secondary pointer-events-none absolute"></div>
+            <div className="relative z-10 h-full w-full">
+              <Folder />
+            </div>
+          </div>
+        </div>
+      )}
+      {activeTask.taskAssigning?.find(
+        (agent) => agent.agent_id === activeWorkSpace
+      )?.type === 'document_agent' && (
+        <div className="flex h-full w-full flex-1 items-center justify-center">
+          <div className="relative flex h-full w-full flex-col">
+            <div className="blur-bg inset-0 rounded-xl bg-surface-secondary pointer-events-none absolute"></div>
+            <div className="relative z-10 h-full w-full">
+              <Folder
+                data={activeTask.taskAssigning?.find(
+                  (agent) => agent.agent_id === activeWorkSpace
+                )}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+      {activeWorkSpace === 'inbox' && (
+        <div className="flex h-full w-full flex-1 items-center justify-center">
+          <div className="relative flex h-full w-full flex-col">
+            <div className="blur-bg inset-0 rounded-xl bg-surface-secondary pointer-events-none absolute"></div>
+            <div className="relative z-10 h-full w-full">
+              <Folder />
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/WorkspaceMenu/index.tsx b/src/components/WorkspaceMenu/index.tsx
index cb19f9ec7..40700a2f3 100644
--- a/src/components/WorkspaceMenu/index.tsx
+++ b/src/components/WorkspaceMenu/index.tsx
@@ -351,7 +351,7 @@ export function WorkSpaceMenu({
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: -30 }}
               transition={{ duration: 0.3, ease: 'easeInOut' }}
-              className={`flex w-fit flex-row gap-2 pl-2`}
+              className={`gap-2 pl-2 flex w-fit flex-row`}
             >
               <MenuToggleGroup
                 type="single"
@@ -359,7 +359,7 @@ export function WorkSpaceMenu({
                 orientation="horizontal"
                 value={getCurrentTask()?.activeWorkspace as string}
                 onValueChange={onValueChange}
-                className="flex w-full items-center gap-2 pb-2"
+                className="gap-2 pb-2 flex w-full items-center"
               >
                 <AnimatePresence mode="popLayout">
                   {agentList.map((agent) => (
@@ -401,19 +401,19 @@ export function WorkSpaceMenu({
         </AnimatePresence>
         {/* Viewport Navigation Buttons */}
         {(moveLeft || moveRight) && (
-          <div className="absolute right-2 flex items-center pb-2">
+          <div className="right-2 pb-2 absolute flex items-center">
             <Button
               variant="ghost"
-              size="md"
-              className="px-2"
+              size="sm"
+              buttonContent="icon-only"
               onClick={moveLeft || undefined}
             >
               <ChevronLeft />
             </Button>
             <Button
               variant="ghost"
-              size="md"
-              className="px-2"
+              size="sm"
+              buttonContent="icon-only"
               onClick={moveRight || undefined}
             >
               <ChevronRight />
diff --git a/src/components/ui/HoverScrollText.tsx b/src/components/ui/HoverScrollText.tsx
new file mode 100644
index 000000000..90b499fd2
--- /dev/null
+++ b/src/components/ui/HoverScrollText.tsx
@@ -0,0 +1,106 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { cn } from '@/lib/utils';
+import { useLayoutEffect, useRef, useState } from 'react';
+
+/** Horizontal drift speed (~px/s) — readable marquee, not a snap. Matches TaskList task query. */
+const HOVER_SCROLL_PX_PER_SEC = 16;
+const HOVER_SCROLL_MIN_MS = 10_000;
+const HOVER_SCROLL_MAX_MS = 90_000;
+
+function hoverScrollDurationMs(scrollPx: number): number {
+  if (scrollPx <= 0) return 300;
+  const proportional = (scrollPx / HOVER_SCROLL_PX_PER_SEC) * 1000;
+  return Math.min(
+    HOVER_SCROLL_MAX_MS,
+    Math.max(HOVER_SCROLL_MIN_MS, Math.round(proportional))
+  );
+}
+
+export interface HoverScrollTextProps {
+  text: string;
+  /** When true (e.g. row hovered), scroll to show overflow in one linear pass. */
+  active: boolean;
+  className?: string;
+  innerClassName?: string;
+}
+
+/**
+ * Single-line text that overflows hidden; on `active`, translates to reveal the rest
+ * (same behavior as task query labels in ChatBox ChatTimeline).
+ */
+export function HoverScrollText({
+  text,
+  active,
+  className,
+  innerClassName,
+}: HoverScrollTextProps) {
+  const outerRef = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLSpanElement>(null);
+  const [scrollPx, setScrollPx] = useState(0);
+
+  useLayoutEffect(() => {
+    if (!outerRef.current || !innerRef.current) return;
+
+    let cancelled = false;
+    const measure = () => {
+      if (cancelled) return;
+      const o = outerRef.current;
+      const i = innerRef.current;
+      if (!o || !i) return;
+      setScrollPx(Math.max(0, i.scrollWidth - o.clientWidth));
+    };
+
+    measure();
+    const raf1 = requestAnimationFrame(() => {
+      requestAnimationFrame(measure);
+    });
+    const ro = new ResizeObserver(measure);
+    ro.observe(outerRef.current);
+    ro.observe(innerRef.current);
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(raf1);
+      ro.disconnect();
+    };
+  }, [text, active]);
+
+  const slide = active && scrollPx > 0;
+  const slideMs = hoverScrollDurationMs(scrollPx);
+
+  return (
+    <div
+      ref={outerRef}
+      className={cn('min-w-0 w-full overflow-hidden', className)}
+    >
+      <span
+        ref={innerRef}
+        title={text}
+        className={cn(
+          'inline-block whitespace-nowrap',
+          'transition-[transform]',
+          slide ? 'ease-linear' : 'ease-out duration-300',
+          innerClassName
+        )}
+        style={{
+          transform: slide ? `translateX(-${scrollPx}px)` : 'translateX(0)',
+          transitionDuration: slide ? `${slideMs}ms` : undefined,
+        }}
+      >
+        {text}
+      </span>
+    </div>
+  );
+}
diff --git a/src/components/ui/button.stories.tsx b/src/components/ui/button.stories.tsx
index a0e91af11..3ad2e3f01 100644
--- a/src/components/ui/button.stories.tsx
+++ b/src/components/ui/button.stories.tsx
@@ -38,6 +38,18 @@ const meta: Meta<typeof Button> = {
       control: 'select',
       options: ['xxs', 'xs', 'sm', 'md', 'lg', 'icon'],
     },
+    buttonContent: {
+      control: 'select',
+      options: ['text', 'icon-only'],
+    },
+    textWeight: {
+      control: 'select',
+      options: ['normal', 'medium', 'semibold', 'bold'],
+    },
+    buttonRadius: {
+      control: 'select',
+      options: ['lg', 'full'],
+    },
     disabled: {
       control: 'boolean',
     },
@@ -134,7 +146,7 @@ export const IconOnly: Story = {
 
 export const AllVariants: Story = {
   render: () => (
-    <div className="flex flex-wrap gap-4">
+    <div className="gap-4 flex flex-wrap">
       <Button variant="primary">Primary</Button>
       <Button variant="secondary">Secondary</Button>
       <Button variant="outline">Outline</Button>
@@ -147,7 +159,7 @@ export const AllVariants: Story = {
 
 export const AllSizes: Story = {
   render: () => (
-    <div className="flex flex-wrap items-center gap-4">
+    <div className="gap-4 flex flex-wrap items-center">
       <Button variant="primary" size="xxs">
         XXS
       </Button>
@@ -163,7 +175,7 @@ export const AllSizes: Story = {
       <Button variant="primary" size="lg">
         LG
       </Button>
-      <Button variant="primary" size="icon">
+      <Button variant="primary" size="xs" buttonContent="icon-only">
         <Trash2 />
       </Button>
     </div>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index e0175999a..f2851e6aa 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -18,13 +18,33 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
+export type ButtonContent = 'text' | 'icon-only';
+export type ButtonTextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+/** Corner style; uses Tailwind important so it wins over variant/size radii. */
+export type ButtonRadius = 'lg' | 'full';
+
+/** Icon box (width/height) paired with text weight when `textWeight` is set */
+const TEXT_WEIGHT_CLASSES: Record<ButtonTextWeight, string> = {
+  normal: '!font-normal [&_svg:not([class*="size-"])]:!size-[14px]',
+  medium: '!font-medium [&_svg:not([class*="size-"])]:!size-[15px]',
+  semibold: '!font-semibold [&_svg:not([class*="size-"])]:!size-[16px]',
+  bold: '!font-bold [&_svg:not([class*="size-"])]:!size-[18px]',
+};
+
+const RADIUS_CLASSES: Record<ButtonRadius, string> = {
+  lg: '!rounded-lg',
+  full: '!rounded-full',
+};
+
+type ButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap transition-all duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20  aria-invalid:border-destructive",
+  'inline-flex items-center whitespace-nowrap transition-all duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive shrink-0',
   {
     variants: {
       variant: {
         primary:
-          'bg-button-primary-fill-default !text-button-primary-text-default font-bold rounded-xs shadow-button-shadow hover:bg-button-primary-fill-hover active:bg-button-primary-fill-active focus:bg-button-primary-fill-hover focus:ring-2 focus:ring-gray-4 focus:ring-offset-2 cursor-pointer ',
+          'bg-button-primary-fill-default !text-button-primary-text-default font-bold rounded-xs shadow-button-shadow hover:bg-button-primary-fill-hover active:bg-button-primary-fill-active focus:bg-button-primary-fill-hover focus:ring-2 focus:ring-gray-4 focus:ring-offset-2 cursor-pointer',
         secondary:
           'bg-button-secondary-fill-default !text-button-secondary-text-default font-bold rounded-xs shadow-button-shadow hover:bg-button-secondary-fill-hover active:bg-button-secondary-fill-active focus:bg-button-secondary-hover focus:ring-2 focus:ring-gray-4 focus:ring-offset-2 cursor-pointer',
         outline:
@@ -41,40 +61,157 @@ const buttonVariants = cva(
           'bg-button-fill-warning !text-button-fill-warning-foreground font-bold rounded-xs shadow-button-shadow focus:ring-2 focus:ring-gray-4 focus:ring-offset-2 cursor-pointer',
       },
       size: {
-        xxs: 'inline-flex justify-start items-center gap-1 px-1 py-0.5 rounded-md text-label-xs font-bold [&_svg]:size-16',
-        xs: 'inline-flex justify-start items-center gap-1 px-2 py-1 rounded-md text-label-xs font-bold [&_svg]:size-10',
-        sm: 'inline-flex justify-start items-center gap-1 px-2 py-1 rounded-md text-label-sm font-medium [&_svg]:size-[16px]',
-        md: 'inline-flex justify-start items-center gap-2 px-4 py-2 rounded-md text-label-md font-medium [&_svg]:size-[24px]',
-        lg: 'inline-flex justify-start items-center gap-sm px-4 py-2 rounded-md text-label-lg font-bold [&_svg]:size-[24px]',
-        icon: 'inline-flex justify-start items-center gap-1 px-1 py-1 rounded-md [&_svg]:size-10',
+        xxs: 'rounded-md text-label-xs',
+        xs: 'rounded-md text-label-xs',
+        sm: 'rounded-md text-label-sm',
+        md: 'rounded-md text-label-md',
+        lg: 'rounded-md text-label-lg',
+      },
+      /**
+       * `text`: label + optional icon; shares fixed min-height with `icon-only` per size.
+       * `icon-only`: fixed square (equal width/height) with centered icon.
+       */
+      layout: {
+        text: 'justify-start gap-1',
+        'icon-only': 'justify-center gap-0',
       },
     },
+    compoundVariants: [
+      {
+        size: 'xxs',
+        layout: 'text',
+        class:
+          'box-border min-h-5 px-1 py-0 font-bold [&_svg:not([class*="size-"])]:size-[14px]',
+      },
+      {
+        size: 'xs',
+        layout: 'text',
+        class:
+          'box-border min-h-6 px-1.5 py-0 font-bold [&_svg:not([class*="size-"])]:size-[14px]',
+      },
+      {
+        size: 'sm',
+        layout: 'text',
+        class:
+          'box-border min-h-[28px] px-2 py-0 font-medium [&_svg:not([class*="size-"])]:size-[16px]',
+      },
+      {
+        size: 'md',
+        layout: 'text',
+        class:
+          'box-border min-h-[32px] gap-2 px-4 py-0 font-medium [&_svg:not([class*="size-"])]:size-[24px]',
+      },
+      {
+        size: 'lg',
+        layout: 'text',
+        class:
+          'box-border min-h-[36px] gap-sm px-4 py-0 font-bold [&_svg:not([class*="size-"])]:size-[24px]',
+      },
+      {
+        size: 'xxs',
+        layout: 'icon-only',
+        class:
+          'box-border h-5 w-5 min-h-5 min-w-5 shrink-0 p-1 font-bold [&_svg:not([class*="size-"])]:size-[12px]',
+      },
+      {
+        size: 'xs',
+        layout: 'icon-only',
+        class:
+          'box-border h-6 w-6 min-h-6 min-w-6 shrink-0 p-[5px] font-bold [&_svg:not([class*="size-"])]:size-[14px]',
+      },
+      {
+        size: 'sm',
+        layout: 'icon-only',
+        class:
+          'box-border h-[28px] w-[28px] min-h-[28px] min-w-[28px] shrink-0 p-1.5 font-bold [&_svg:not([class*="size-"])]:size-[16px]',
+      },
+      {
+        size: 'md',
+        layout: 'icon-only',
+        class:
+          'box-border h-[32px] w-[32px] min-h-[32px] min-w-[32px] shrink-0 p-1.5 font-bold [&_svg:not([class*="size-"])]:size-[20px]',
+      },
+      {
+        size: 'lg',
+        layout: 'icon-only',
+        class:
+          'box-border h-[36px] w-[36px] min-h-[36px] min-w-[36px] shrink-0 p-1.5 font-bold [&_svg:not([class*="size-"])]:size-[24px]',
+      },
+    ],
     defaultVariants: {
       variant: 'primary',
       size: 'md',
+      layout: 'text',
     },
   }
 );
 
-const Button = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<'button'> &
-    VariantProps<typeof buttonVariants> & { asChild?: boolean }
->(({ className, variant, size, asChild = false, children, ...props }, ref) => {
-  const Comp = asChild ? Slot : 'button';
+export type ButtonProps = React.ComponentProps<'button'> &
+  Omit<VariantProps<typeof buttonVariants>, 'layout' | 'size'> & {
+    asChild?: boolean;
+    /** Text + optional icon (default). `icon-only`: fixed square per `size`, same outer height as text. */
+    buttonContent?: ButtonContent;
+    /** Overrides label weight and default icon size (when SVG has no explicit size class). */
+    textWeight?: ButtonTextWeight;
+    /** `lg` = rounded corners; `full` = pill / circle (icon-only). */
+    buttonRadius?: ButtonRadius;
+    /**
+     * @deprecated Use `size="xs"` with `buttonContent="icon-only"` instead.
+     */
+    size?: ButtonSize | 'icon';
+  };
 
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
-      {...props}
-    >
-      {children}
-      {/* {variant === "primary" && <div />} */}
-    </Comp>
-  );
-});
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size: sizeProp = 'md',
+      buttonContent,
+      textWeight,
+      buttonRadius,
+      asChild = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : 'button';
+
+    const legacyIcon = sizeProp === 'icon';
+    const resolvedSize: ButtonSize = legacyIcon
+      ? 'xs'
+      : (sizeProp as ButtonSize);
+    const resolvedLayout =
+      buttonContent === 'icon-only'
+        ? 'icon-only'
+        : buttonContent === 'text'
+          ? 'text'
+          : legacyIcon
+            ? 'icon-only'
+            : 'text';
+
+    return (
+      <Comp
+        data-slot="button"
+        className={cn(
+          buttonVariants({
+            variant,
+            size: resolvedSize,
+            layout: resolvedLayout,
+          }),
+          textWeight ? TEXT_WEIGHT_CLASSES[textWeight] : null,
+          buttonRadius ? RADIUS_CLASSES[buttonRadius] : null,
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  }
+);
 
 Button.displayName = 'Button';
 
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index 3e405b75b..0a4b9e5e1 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -209,59 +209,83 @@ CarouselItem.displayName = 'CarouselItem';
 const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
->(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+>(
+  (
+    {
+      className,
+      variant = 'outline',
+      size = 'xs',
+      buttonContent = 'icon-only',
+      ...props
+    },
+    ref
+  ) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        'absolute h-8 w-8 rounded-full',
-        orientation === 'horizontal'
-          ? '-left-12 top-1/2 -translate-y-1/2'
-          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  );
-});
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        buttonContent={buttonContent}
+        className={cn(
+          'absolute rounded-full',
+          orientation === 'horizontal'
+            ? '-left-12 top-1/2 -translate-y-1/2'
+            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+          className
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  }
+);
 CarouselPrevious.displayName = 'CarouselPrevious';
 
 const CarouselNext = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
->(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
+>(
+  (
+    {
+      className,
+      variant = 'outline',
+      size = 'xs',
+      buttonContent = 'icon-only',
+      ...props
+    },
+    ref
+  ) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        'absolute h-8 w-8 rounded-full',
-        orientation === 'horizontal'
-          ? '-right-12 top-1/2 -translate-y-1/2'
-          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  );
-});
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        buttonContent={buttonContent}
+        className={cn(
+          'absolute rounded-full',
+          orientation === 'horizontal'
+            ? '-right-12 top-1/2 -translate-y-1/2'
+            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+          className
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRight className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  }
+);
 CarouselNext.displayName = 'CarouselNext';
 
 export {
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index a828027fb..8b5f78ebb 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -27,7 +27,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      'text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-white-100%',
+      'text-popover-foreground rounded-md bg-white-100% flex h-full w-full flex-col overflow-hidden',
       className
     )}
     {...props}
@@ -35,11 +35,31 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-const CommandDialog = ({ children, ...props }: DialogProps) => {
+type CommandDialogProps = DialogProps & {
+  overlayClassName?: string;
+  contentClassName?: string;
+  commandClassName?: string;
+};
+
+const CommandDialog = ({
+  children,
+  overlayClassName,
+  contentClassName,
+  commandClassName,
+  ...props
+}: CommandDialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden bg-white-100% p-0">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+      <DialogContent
+        className={cn('bg-white-100% p-0 overflow-hidden', contentClassName)}
+        overlayClassName={overlayClassName}
+      >
+        <Command
+          className={cn(
+            '[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5',
+            commandClassName
+          )}
+        >
           {children}
         </Command>
       </DialogContent>
@@ -52,14 +72,14 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div
-    className="flex items-center border-b px-3"
+    className="px-3 flex items-center border-b"
     {...({ 'cmdk-input-wrapper': '' } as any)}
   >
     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        'placeholder:text-muted-foreground h-10 rounded-md py-3 text-sm flex w-full bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}
@@ -75,7 +95,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}
     {...props}
   />
 ));
@@ -88,7 +108,7 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="py-6 text-center text-sm"
+    className="py-6 text-sm text-center"
     {...props}
   />
 ));
@@ -102,7 +122,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium overflow-hidden',
       className
     )}
     {...props}
@@ -130,7 +150,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm border border-solid border-transparent px-2 py-1.5 text-sm outline-none transition-all duration-300 hover:border-green-600 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm hover:border-green-600 [&_svg]:size-4 relative flex cursor-default items-center border border-solid border-transparent transition-all duration-300 outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
       className
     )}
     {...props}
@@ -146,7 +166,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
+        'text-muted-foreground text-xs tracking-widest ml-auto',
         className
       )}
       {...props}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index d6267f997..c13344ea4 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -38,7 +38,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'bg-black/50 fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'bg-black/50 inset-0 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed z-50',
       className
     )}
     {...props}
@@ -76,6 +76,8 @@ interface DialogContentProps
   onClose?: () => void;
   /** Overlay behind the dialog: 'default' (transparent) or 'dark' (black overlay) */
   overlayVariant?: DialogOverlayVariant;
+  /** Merged onto the overlay (e.g. `backdrop-blur-none` to disable default blur) */
+  overlayClassName?: string;
 }
 
 const DialogContent = React.forwardRef<
@@ -92,13 +94,17 @@ const DialogContent = React.forwardRef<
       closeButtonIcon,
       onClose,
       overlayVariant = 'default',
+      overlayClassName,
       ...props
     },
     ref
   ) => (
     <DialogPortal>
       <DialogOverlay
-        className={overlayVariant === 'dark' ? 'bg-black/40' : undefined}
+        className={cn(
+          overlayVariant === 'dark' ? 'bg-black/40' : undefined,
+          overlayClassName
+        )}
         style={
           overlayVariant === 'dark'
             ? { backgroundColor: 'rgba(0, 0, 0, 0.4)' }
@@ -119,9 +125,10 @@ const DialogContent = React.forwardRef<
           <DialogPrimitive.Close asChild>
             <Button
               variant="ghost"
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               className={cn(
-                'absolute right-4 top-4 focus:outline-none focus:ring-0 focus:ring-offset-0',
+                'right-4 top-4 absolute focus:ring-0 focus:ring-offset-0 focus:outline-none',
                 closeButtonClassName
               )}
               onClick={onClose}
@@ -165,27 +172,28 @@ const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(
     <div
       ref={ref}
       className={cn(
-        'relative flex w-full shrink-0 items-center justify-between gap-2 overflow-hidden rounded-t-xl bg-popup-surface p-4',
+        'gap-2 rounded-t-xl bg-popup-surface p-4 relative flex w-full shrink-0 items-center justify-between overflow-hidden',
         className
       )}
       {...props}
     >
-      <div className="flex items-center gap-2">
+      <div className="gap-2 flex items-center">
         {showBackButton && (
           <Button
             variant="ghost"
-            size="icon"
+            size="xs"
+            buttonContent="icon-only"
             onClick={onBackClick}
-            className="h-6 w-6 p-0 hover:bg-transparent"
+            className="hover:bg-transparent"
           >
             <ChevronLeft className="h-4 w-4 text-icon-primary" />
           </Button>
         )}
-        <div className="flex flex-col text-center sm:text-left">
+        <div className="sm:text-left flex flex-col text-center">
           {title && (
-            <div className="flex items-center gap-1">
+            <div className="gap-1 flex items-center">
               <DialogPrimitive.Title asChild>
-                <span className="my-[1px] text-body-md font-bold text-text-heading">
+                <span className="text-body-md font-bold text-text-heading my-[1px]">
                   {title}
                 </span>
               </DialogPrimitive.Title>
@@ -216,7 +224,7 @@ const DialogContentSection = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('min-h-0 flex-1 p-4', className)} {...props} />
+  <div ref={ref} className={cn('min-h-0 p-4 flex-1', className)} {...props} />
 ));
 DialogContentSection.displayName = 'DialogContentSection';
 
@@ -328,9 +336,9 @@ const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
       <div
         ref={footerRef}
         className={cn(
-          'relative flex w-full shrink-0 items-center justify-end gap-2 px-4 pb-4 pt-2',
+          'gap-2 px-4 pb-4 pt-2 relative flex w-full shrink-0 items-center justify-end',
           hasScrollbar &&
-            'border-x-0 border-b-0 border-t-[0.5px] border-solid border-border-secondary',
+            'border-border-secondary border-x-0 border-t-[0.5px] border-b-0 border-solid',
           className
         )}
         {...props}
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 6ae777ea4..4411f54a0 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -39,7 +39,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none hover:bg-menutabs-fill-hover focus:bg-menutabs-fill-hover data-[state=open]:bg-menutabs-fill-hover [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      'gap-2 rounded-lg px-2 py-1.5 text-sm hover:bg-menutabs-fill-hover focus:bg-menutabs-fill-hover data-[state=open]:bg-menutabs-fill-hover [&_svg]:size-4 flex cursor-pointer items-center outline-none select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
       inset && 'pl-3',
       className
     )}
@@ -59,7 +59,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'text-popover-foreground z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-lg border border-solid border-border-secondary bg-fill-default p-1 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'text-popover-foreground rounded-lg border-border-secondary bg-fill-default p-1 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden border border-solid',
       className
     )}
     {...props}
@@ -71,20 +71,21 @@ DropdownMenuSubContent.displayName =
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 4, style, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'text-popover-foreground z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden p-xs shadow-md',
-        'origin-[--radix-dropdown-menu-content-transform-origin] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'text-popover-foreground p-xs shadow-md z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-x-hidden overflow-y-auto',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
         className
       )}
       style={{
         borderRadius: 'var(--borderRadius-rounded-lg, 8px)',
         border: '1px solid var(--border-secondary, #CCC)',
         background: 'var(--fill-default, #FFF)',
+        ...style,
       }}
       {...props}
     />
@@ -101,7 +102,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-menutabs-fill-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+      'focus:bg-accent focus:text-accent-foreground gap-2 rounded-lg px-2 py-1.5 text-sm hover:bg-menutabs-fill-hover [&>svg]:size-4 relative flex cursor-pointer items-center transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:shrink-0',
       inset && 'pl-8',
       className
     )}
@@ -117,13 +118,13 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-accent focus:text-accent-foreground rounded-sm py-1.5 pl-8 pr-2 text-sm relative flex cursor-default items-center transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="left-2 h-3.5 w-3.5 absolute flex items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -141,12 +142,12 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-accent focus:text-accent-foreground rounded-sm py-1.5 pl-8 pr-2 text-sm relative flex cursor-default items-center transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="left-2 h-3.5 w-3.5 absolute flex items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Circle className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -192,7 +193,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      className={cn('text-xs tracking-widest ml-auto opacity-60', className)}
       {...props}
     />
   );
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index e23e46faf..c2e3f6aa6 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -128,7 +128,7 @@ const Input = React.forwardRef<HTMLInputElement, BaseInputProps>(
     return (
       <div className={cn('w-full', stateCls.container)}>
         {title ? (
-          <div className="mb-1.5 flex items-center gap-1 text-body-sm font-bold text-text-heading">
+          <div className="mb-1.5 gap-1 text-body-sm font-bold text-text-heading flex items-center">
             <span>{title}</span>
             {required && <span className="text-text-body">*</span>}
             {optional && (
@@ -146,17 +146,17 @@ const Input = React.forwardRef<HTMLInputElement, BaseInputProps>(
 
         <div
           className={cn(
-            'relative flex items-center rounded-lg border border-solid shadow-sm transition-colors',
+            'rounded-lg shadow-sm relative flex items-center border border-solid transition-colors',
             // Only apply hover/focus visuals when not in error state
             state !== 'error' &&
               state !== 'success' &&
-              'focus-within:bg-input-bg-input focus-within:ring-1 focus-within:ring-input-border-focus focus-within:ring-offset-0 hover:bg-input-bg-hover hover:ring-1 hover:ring-input-border-hover hover:ring-offset-0',
+              'focus-within:bg-input-bg-input focus-within:ring-input-border-focus hover:bg-input-bg-hover hover:ring-input-border-hover focus-within:ring-1 focus-within:ring-offset-0 hover:ring-1 hover:ring-offset-0',
             stateCls.field,
             sizeClasses[size]
           )}
         >
           {leadingIcon ? (
-            <span className="pointer-events-none absolute left-2 inline-flex h-5 w-5 items-center justify-center text-icon-primary">
+            <span className="left-2 h-5 w-5 text-icon-primary pointer-events-none absolute inline-flex items-center justify-center">
               {leadingIcon}
             </span>
           ) : null}
@@ -167,7 +167,7 @@ const Input = React.forwardRef<HTMLInputElement, BaseInputProps>(
             disabled={disabled}
             placeholder={placeholder}
             className={cn(
-              'peer w-full bg-transparent outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:transition-colors',
+              'peer file:text-sm file:font-medium w-full bg-transparent outline-none file:border-0 file:bg-transparent placeholder:transition-colors',
               stateCls.input,
               stateCls.placeholder,
               hasLeft ? 'pl-9' : 'pl-3',
@@ -187,9 +187,10 @@ const Input = React.forwardRef<HTMLInputElement, BaseInputProps>(
             <Button
               type="button"
               variant="ghost"
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               tabIndex={-1}
-              className="absolute right-2 inline-flex h-5 w-5 items-center justify-center rounded-full text-icon-primary focus:ring-0 disabled:opacity-50"
+              className="right-2 text-icon-primary absolute inline-flex items-center justify-center rounded-full focus:ring-0 disabled:opacity-50"
               disabled={disabled}
               onClick={onBackIconClick}
             >
@@ -198,7 +199,7 @@ const Input = React.forwardRef<HTMLInputElement, BaseInputProps>(
           ) : null}
 
           {trailingButton ? (
-            <div className={cn('absolute right-2', backIcon ? '-mr-7' : '')}>
+            <div className={cn('right-2 absolute', backIcon ? '-mr-7' : '')}>
               {trailingButton}
             </div>
           ) : null}
diff --git a/src/components/ui/resizable.tsx b/src/components/ui/resizable.tsx
index 27557997e..80c17dbd4 100644
--- a/src/components/ui/resizable.tsx
+++ b/src/components/ui/resizable.tsx
@@ -36,11 +36,18 @@ function ResizablePanelGroup({
   );
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
-}
+const ResizablePanel = React.forwardRef<
+  React.ComponentRef<typeof ResizablePrimitive.Panel>,
+  React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Panel>
+>(function ResizablePanel({ ...props }, ref) {
+  return (
+    <ResizablePrimitive.Panel
+      ref={ref}
+      data-slot="resizable-panel"
+      {...props}
+    />
+  );
+});
 
 function ResizableHandle({
   withHandle,
@@ -53,13 +60,13 @@ function ResizableHandle({
     <ResizablePrimitive.PanelResizeHandle
       data-slot="resizable-handle"
       className={cn(
-        'bg-border focus-visible:ring-ring focus-visible:outline-hidden relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        'bg-border focus-visible:ring-ring after:inset-y-0 after:w-1 data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:translate-x-0 relative flex w-px items-center justify-center after:absolute after:left-1/2 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
         className
       )}
       {...props}
     >
       {withHandle && (
-        <div className="bg-border rounded-xs z-10 flex h-4 w-3 items-center justify-center border">
+        <div className="bg-border rounded-xs h-4 w-3 z-10 flex items-center justify-center border">
           <GripVerticalIcon className="size-2.5" />
         </div>
       )}
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 9961f514d..e696c1f68 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -216,7 +216,7 @@ const Sidebar = React.forwardRef<
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"
-            className="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+            className="bg-sidebar text-sidebar-foreground p-0 w-[--sidebar-width] [&>button]:hidden"
             style={
               {
                 '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
@@ -237,7 +237,7 @@ const Sidebar = React.forwardRef<
     return (
       <div
         ref={ref}
-        className="text-sidebar-foreground group peer hidden md:block"
+        className="text-sidebar-foreground group peer md:block hidden"
         data-state={state}
         data-collapsible={state === 'collapsed' ? collapsible : ''}
         data-variant={variant}
@@ -256,7 +256,7 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={cn(
-            'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+            'inset-y-0 md:flex fixed z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear',
             side === 'left'
               ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
               : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
@@ -270,7 +270,7 @@ const Sidebar = React.forwardRef<
         >
           <div
             data-sidebar="sidebar"
-            className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+            className="bg-sidebar group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow flex h-full w-full flex-col group-data-[variant=floating]:border"
           >
             {children}
           </div>
@@ -292,8 +292,9 @@ const SidebarTrigger = React.forwardRef<
       ref={ref}
       data-sidebar="trigger"
       variant="ghost"
-      size="icon"
-      className={cn('h-7 w-7', className)}
+      size="xs"
+      buttonContent="icon-only"
+      className={className}
       onClick={(event) => {
         onClick?.(event);
         toggleSidebar();
@@ -322,7 +323,7 @@ const SidebarRail = React.forwardRef<
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+        'hover:after:bg-sidebar-border inset-y-0 w-4 after:inset-y-0 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex absolute z-20 hidden -translate-x-1/2 transition-all ease-linear after:absolute after:left-1/2 after:w-[2px]',
         '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
         '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
         'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
@@ -380,7 +381,7 @@ const SidebarHeader = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="header"
-      className={cn('flex flex-col gap-2 p-2', className)}
+      className={cn('gap-2 p-2 flex flex-col', className)}
       {...props}
     />
   );
@@ -395,7 +396,7 @@ const SidebarFooter = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="footer"
-      className={cn('flex flex-col gap-2 p-2', className)}
+      className={cn('gap-2 p-2 flex flex-col', className)}
       {...props}
     />
   );
@@ -426,7 +427,7 @@ const SidebarContent = React.forwardRef<
       ref={ref}
       data-sidebar="content"
       className={cn(
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        'min-h-0 gap-2 flex flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden',
         className
       )}
       {...props}
@@ -443,7 +444,7 @@ const SidebarGroup = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="group"
-      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      className={cn('min-w-0 p-2 relative flex w-full flex-col', className)}
       {...props}
     />
   );
@@ -461,7 +462,7 @@ const SidebarGroupLabel = React.forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={cn(
-        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium [&>svg]:size-4 flex shrink-0 items-center transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:shrink-0',
         'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
         className
       )}
@@ -482,9 +483,9 @@ const SidebarGroupAction = React.forwardRef<
       ref={ref}
       data-sidebar="group-action"
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground right-3 top-3.5 w-5 rounded-md p-0 [&>svg]:size-4 absolute flex aspect-square items-center justify-center transition-transform outline-none focus-visible:ring-2 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 after:md:hidden',
+        'after:-inset-2 after:md:hidden after:absolute',
         'group-data-[collapsible=icon]:hidden',
         className
       )}
@@ -501,7 +502,7 @@ const SidebarGroupContent = React.forwardRef<
   <div
     ref={ref}
     data-sidebar="group-content"
-    className={cn('w-full text-sm', className)}
+    className={cn('text-sm w-full', className)}
     {...props}
   />
 ));
@@ -514,7 +515,7 @@ const SidebarMenu = React.forwardRef<
   <ul
     ref={ref}
     data-sidebar="menu"
-    className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+    className={cn('min-w-0 gap-1 flex w-full flex-col', className)}
     {...props}
   />
 ));
@@ -628,15 +629,15 @@ const SidebarMenuAction = React.forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground right-1 top-1.5 w-5 rounded-md p-0 [&>svg]:size-4 absolute flex aspect-square items-center justify-center transition-transform outline-none focus-visible:ring-2 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 after:md:hidden',
+        'after:-inset-2 after:md:hidden after:absolute',
         'peer-data-[size=sm]/menu-button:top-1',
         'peer-data-[size=default]/menu-button:top-1.5',
         'peer-data-[size=lg]/menu-button:top-2.5',
         'group-data-[collapsible=icon]:hidden',
         showOnHover &&
-          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100',
         className
       )}
       {...props}
@@ -653,7 +654,7 @@ const SidebarMenuBadge = React.forwardRef<
     ref={ref}
     data-sidebar="menu-badge"
     className={cn(
-      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',
+      'text-sidebar-foreground right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium pointer-events-none absolute flex items-center justify-center tabular-nums select-none',
       'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
       'peer-data-[size=sm]/menu-button:top-1',
       'peer-data-[size=default]/menu-button:top-1.5',
@@ -681,7 +682,7 @@ const SidebarMenuSkeleton = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="menu-skeleton"
-      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      className={cn('h-8 gap-2 rounded-md px-2 flex items-center', className)}
       {...props}
     >
       {showIcon && (
@@ -712,7 +713,7 @@ const SidebarMenuSub = React.forwardRef<
     ref={ref}
     data-sidebar="menu-sub"
     className={cn(
-      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+      'border-sidebar-border mx-3.5 min-w-0 gap-1 px-2.5 py-0.5 flex translate-x-px flex-col border-l',
       'group-data-[collapsible=icon]:hidden',
       className
     )}
@@ -744,7 +745,7 @@ const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground h-7 min-w-0 gap-2 rounded-md px-2 [&>svg]:size-4 flex -translate-x-px items-center overflow-hidden outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
         'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index f7043a85f..3fc2275f3 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -123,7 +123,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
           <textarea
             data-scrollbar="ui-textarea"
             className={cn(
-              'border-input placeholder:text-text-label/20 focus-visible:ring-ring flex min-h-[60px] w-full rounded-lg border bg-transparent py-2 pl-3 pr-3 text-body-sm shadow-sm [scrollbar-gutter:stable] focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+              'border-input placeholder:text-text-label/20 focus-visible:ring-ring rounded-lg py-2 pl-3 pr-3 text-body-sm shadow-sm flex min-h-[60px] w-full border bg-transparent [scrollbar-gutter:stable] focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
               className
             )}
             style={{ paddingRight: '4px', ...(style as React.CSSProperties) }}
@@ -164,7 +164,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
       <>
         <div className={cn('w-full', stateCls.container)}>
           {title ? (
-            <div className="mb-1.5 flex items-center gap-1 text-body-sm font-bold text-text-heading">
+            <div className="mb-1.5 gap-1 text-body-sm font-bold text-text-heading flex items-center">
               <span>{title}</span>
               {required && <span className="text-text-body">*</span>}
               {tooltip && (
@@ -177,17 +177,17 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
 
           <div
             className={cn(
-              'relative flex items-start rounded-lg border border-solid shadow-sm transition-all',
+              'rounded-lg shadow-sm relative flex items-start border border-solid transition-all',
               // Only apply hover/focus visuals when not in error or success state
               state !== 'error' &&
                 state !== 'success' &&
-                'focus-within:bg-input-bg-input focus-within:ring-1 focus-within:ring-input-border-focus focus-within:ring-offset-0 hover:bg-input-bg-hover hover:ring-1 hover:ring-input-border-hover hover:ring-offset-0',
+                'focus-within:bg-input-bg-input focus-within:ring-input-border-focus hover:bg-input-bg-hover hover:ring-input-border-hover focus-within:ring-1 focus-within:ring-offset-0 hover:ring-1 hover:ring-offset-0',
               stateCls.field,
               sizeClasses[size]
             )}
           >
             {leadingIcon ? (
-              <span className="pointer-events-none absolute left-2 top-2 inline-flex h-5 w-5 items-center justify-center text-icon-primary">
+              <span className="left-2 top-2 h-5 w-5 text-icon-primary pointer-events-none absolute inline-flex items-center justify-center">
                 {leadingIcon}
               </span>
             ) : null}
@@ -221,7 +221,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
             {backIcon ? (
               <Button
                 variant="ghost"
-                size="icon"
+                size="xs"
+                buttonContent="icon-only"
                 type="button"
                 tabIndex={-1}
                 disabled={disabled}
@@ -234,7 +235,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
             {trailingButton ? (
               <div
                 className={cn(
-                  'absolute right-2 top-2',
+                  'right-2 top-2 absolute',
                   backIcon ? '-mr-7' : ''
                 )}
               >
diff --git a/src/hooks/useInitialChatPanelLayout.ts b/src/hooks/useInitialChatPanelLayout.ts
new file mode 100644
index 000000000..de9f373be
--- /dev/null
+++ b/src/hooks/useInitialChatPanelLayout.ts
@@ -0,0 +1,46 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { useLayoutEffect, type RefObject } from 'react';
+import {
+  getPanelGroupElement,
+  type ImperativePanelHandle,
+} from 'react-resizable-panels';
+
+const CHAT_PANEL_DEFAULT_PX = 400;
+const CHAT_PANEL_MIN_PX = 360;
+
+/**
+ * On mount (and when resetKey changes), sizes the chat panel to ~400px as a
+ * percentage of the panel group width. ChatBox stays w-full inside the panel
+ * with min-w-[360px]; user drag can grow the panel beyond 400px.
+ */
+export function useInitialChatPanelLayout(
+  panelGroupId: string,
+  chatPanelRef: RefObject<ImperativePanelHandle | null>,
+  enabled: boolean,
+  resetKey?: string | number | boolean
+): void {
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    const groupEl = getPanelGroupElement(panelGroupId);
+    if (!groupEl) return;
+    const w = groupEl.getBoundingClientRect().width;
+    if (w <= 0) return;
+    const targetPct = (CHAT_PANEL_DEFAULT_PX / w) * 100;
+    const minPct = (CHAT_PANEL_MIN_PX / w) * 100;
+    const pct = Math.min(92, Math.max(minPct, targetPct));
+    chatPanelRef.current?.resize(pct);
+  }, [panelGroupId, enabled, resetKey, chatPanelRef]);
+}
diff --git a/src/hooks/useInitialWorkforceFoldedLayout.ts b/src/hooks/useInitialWorkforceFoldedLayout.ts
new file mode 100644
index 000000000..e3854ca35
--- /dev/null
+++ b/src/hooks/useInitialWorkforceFoldedLayout.ts
@@ -0,0 +1,56 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { useLayoutEffect, type MutableRefObject, type RefObject } from 'react';
+import {
+  getPanelGroupElement,
+  type ImperativePanelHandle,
+} from 'react-resizable-panels';
+
+export const WORKFORCE_FOLDED_MIN_PX = 300;
+export const WORKFORCE_FOLDED_MAX_PX = 420;
+const WORKFORCE_FOLDED_TARGET_PX = 360;
+
+/**
+ * Sizes the workforce (main) panel to ~360px as a percentage of the panel
+ * group when the chat is visible alongside the workforce tab.
+ */
+export function useInitialWorkforceFoldedLayout(
+  panelGroupId: string,
+  workforcePanelRef: RefObject<ImperativePanelHandle | null>,
+  enabled: boolean,
+  /** When false, callers should ignore transient wide layouts before init resize runs. */
+  autoExpandGateRef: MutableRefObject<boolean>,
+  resetKey?: string | number | boolean
+): void {
+  useLayoutEffect(() => {
+    if (!enabled) {
+      autoExpandGateRef.current = false;
+      return;
+    }
+    autoExpandGateRef.current = false;
+    const groupEl = getPanelGroupElement(panelGroupId);
+    if (!groupEl) return;
+    const w = groupEl.getBoundingClientRect().width;
+    if (w <= 0) return;
+    const minPct = (WORKFORCE_FOLDED_MIN_PX / w) * 100;
+    const maxPct = (WORKFORCE_FOLDED_MAX_PX / w) * 100;
+    const targetPct = (WORKFORCE_FOLDED_TARGET_PX / w) * 100;
+    const pct = Math.min(maxPct, Math.max(minPct, targetPct));
+    workforcePanelRef.current?.resize(pct);
+    queueMicrotask(() => {
+      autoExpandGateRef.current = true;
+    });
+  }, [panelGroupId, enabled, resetKey, workforcePanelRef, autoExpandGateRef]);
+}
diff --git a/src/i18n/locales/ar/agents.json b/src/i18n/locales/ar/agents.json
index 521624d12..a4be01260 100644
--- a/src/i18n/locales/ar/agents.json
+++ b/src/i18n/locales/ar/agents.json
@@ -46,5 +46,12 @@
   "custom-skill": "مهارة مخصصة",
   "delete-skill": "حذف المهارة",
   "delete-skill-confirmation": "هل أنت متأكد من أنك تريد حذف \"{{name}}\"؟ لا يمكن التراجع عن هذا الإجراء.",
-  "skill-deleted-success": "تم حذف المهارة بنجاح!"
+  "skill-deleted-success": "تم حذف المهارة بنجاح!",
+  "create-skill": "إنشاء مهارة",
+  "upload-skill": "تحميل مهارة",
+  "browse-skills": "تصفح المهارات",
+  "create-skill-default-name": "مهارة جديدة",
+  "create-skill-default-description": "صفّ ما تفعله هذه المهارة.",
+  "save-skill": "حفظ المهارة",
+  "compose-skill-hint": "عدّل SKILL.md (مطلوب ترويسة YAML بالاسم والوصف)، ثم احفظ."
 }
diff --git a/src/i18n/locales/ar/chat.json b/src/i18n/locales/ar/chat.json
index 631dfe510..fe9790382 100644
--- a/src/i18n/locales/ar/chat.json
+++ b/src/i18n/locales/ar/chat.json
@@ -2,6 +2,12 @@
   "welcome-to-eigent": "Eigent أهلاً بك في",
   "how-can-i-help-you": "كيف يمكنني مساعدتك اليوم؟",
   "ask-placeholder": "ما الذي تحتاج إلى تحقيقه اليوم؟",
+  "rich-input-rotate-1": "أتمتة أبحاث السوق والتحليل والتقارير",
+  "rich-input-rotate-2": "إنشاء عروض تقديمية ومنشورات على وسائل التواصل ومحتوى العلامة التجارية",
+  "rich-input-rotate-3": "تنظيم الملفات والمستندات ومهام سطح المكتب",
+  "follow-up-placeholder": "اطرح متابعة",
+  "select-agent": "اختر وكيلاً",
+  "clear-agent": "إزالة الوكيل",
   "select-file": "اختر ملف",
   "all-files": "كل الملفات",
   "token": "رمز",
@@ -28,6 +34,8 @@
   "task-running": "المهمة تعمل",
   "task-completed": "خلصت المهمة",
   "agent-folder": "مجلد العميل",
+  "choose-agent-work-folder": "اختر مجلد الوكيل",
+  "choose-agent-work-folder-placeholder": "اختر مجلداً على جهازك (قريباً)",
   "open": "افتح",
   "close": "اغلق",
   "search": "بحث",
@@ -58,14 +66,27 @@
   "remove-file": "إزالة الملف",
   "drop-files-to-attach": "أسقط الملفات للإرفاق",
   "expand-input": "توسيع الإدخال (⌘P)",
+  "collapse-input": "طي الإدخال (⌘P)",
   "queued-tasks": "المهام في قائمة الانتظار",
   "remove-queued-message": "إزالة الرسالة من قائمة الانتظار",
   "no-agents-added": "لم تتم إضافة وكلاء",
-  "open-in-ide": "فتح في IDE",
-  "open-in-vscode": "فتح في VS Code",
-  "open-in-cursor": "فتح في Cursor",
-  "open-in-file-manager": "فتح في مدير الملفات",
+  "open-in-ide": "فتح في",
+  "open-in-vscode": "VS Code",
+  "open-in-cursor": "Cursor",
+  "open-in-file-manager": "مدير الملفات",
   "failed-to-open-folder": "فشل في فتح المجلد",
   "task-completed-card-title": "تمت المهمة",
-  "task-completed-card-subtitle": "أتمت مهامك باستخدام الزناد"
+  "task-completed-card-subtitle": "أتمت مهامك باستخدام الزناد",
+  "single-agent-working": "{{agent}} يعمل بجد",
+  "agent-outcome-expand": "توسيع",
+  "agent-outcome-collapse": "طي",
+  "input-attach-add-files-or-photos": "إضافة ملفات أو صور",
+  "input-attach-skills": "المهارات",
+  "input-attach-upload-new-skill": "رفع مهارة جديدة",
+  "input-attach-manage-skills": "إدارة المهارات",
+  "input-attach-add-mcp": "إضافة MCP",
+  "input-attach-manage-connectors": "إدارة الموصلات",
+  "input-attach-open-browser": "فتح متصفح",
+  "input-attach-manage-browsers": "إدارة المتصفحات",
+  "input-attach-menu-trigger": "إضافة ملفات أو صور، أو فتح المهارات أو الموصلات أو المتصفح من القائمة"
 }
diff --git a/src/i18n/locales/ar/layout.json b/src/i18n/locales/ar/layout.json
index ae10e2abd..487c6be47 100644
--- a/src/i18n/locales/ar/layout.json
+++ b/src/i18n/locales/ar/layout.json
@@ -29,6 +29,7 @@
   "continue-with-google-login": "الدخول باستخدام جوجل",
   "continue-with-github-login": "الدخول باستخدام جيت هاب",
   "installation-failed": "فشل التثبيت",
+  "backend-startup-failed": "فشل بدء التشغيل الخلفي",
   "projects": "المشاريع",
   "agents": "الوكلاء",
   "mcp-tools": "MCP والأدوات",
@@ -46,8 +47,30 @@
   "browser": "المتصفح",
   "settings": "الإعدادات",
   "general": "عام",
-  "workers": "العمال",
+  "aiWorkforce": "قوة عمل الذكاء الاصطناعي",
+  "expand-workforce": "توسيع منطقة العمل",
+  "minimize-workforce": "تصغير منطقة العمل",
+  "show-workforce-panel": "إظهار لوحة القوى العاملة",
+  "chat-panel-left": "إظهار الدردشة على اليسار",
+  "chat-panel-right": "إظهار الدردشة على اليمين",
   "triggers": "المحفزات",
+  "triggers-disconnected": "غير متصل",
+  "triggers-connecting": "جارٍ الاتصال…",
+  "triggers-reconnect-hint": "إعادة الاتصال بمستمع المشغلات",
+  "triggers-listener-reconnect": "إعادة الاتصال",
+  "folder": "مجلد",
+  "sidebar-model-manage-hint": "إدارة في الوكلاء ← النماذج",
+  "sidebar-custom-platform-unknown": "—",
+  "expand-sidebar": "توسيع الشريط الجانبي",
+  "collapse-sidebar": "طي الشريط الجانبي",
+  "help-and-support": "المساعدة والدعم",
+  "contact-support": "الاتصال بالدعم",
+  "contact-support-description": "تواصل مع فريقنا",
+  "contact-support-body": "انسخ البريد الإلكتروني للدعم وتواصل معنا في أي وقت.",
+  "copy-email": "نسخ البريد الإلكتروني",
+  "email-copied": "تم نسخ البريد الإلكتروني إلى الحافظة",
+  "copy-failed": "تعذر نسخ البريد الإلكتروني",
+  "download-logs": "تنزيل السجلات",
   "new-project": "مشروع جديد",
   "welcome": "أهلاً وسهلاً",
   "delete-task": "حذف المهمة",
@@ -59,6 +82,9 @@
   "save": "حفظ",
   "not-found": "غير موجود",
   "tasks": "المهام",
+  "chat-history-title": "سجل الدردشة",
+  "chat-history-tooltip": "سجل الدردشة",
+  "task-list-add-hint": "فتح مساحة العمل والتركيز على الدردشة",
   "ongoing": "قيد التقدم",
   "token": "# الرمز",
   "configuring": "جاري التكوين...",
@@ -101,6 +127,7 @@
   "are-you-sure-you-want-to-delete": "هل أنت متأكد من أنك تريد حذف هذه المهمة؟ لا يمكن التراجع عن هذا الإجراء.",
   "share": "مشاركة",
   "home": "الرئيسية",
+  "dashboard": "لوحة التحكم",
   "developer-agent": "وكيل المطور",
   "browser-agent": "وكيل المتصفح",
   "document-agent": "وكيل المستندات",
@@ -116,6 +143,7 @@
   "project-ended-successfully": "تم إنهاء المشروع بنجاح",
   "failed-to-end-project": "فشل في إنهاء المشروع",
   "message-queued": "تم إدراج الرسالة في قائمة الانتظار. ستتم معالجتها عند انتهاء المهمة الحالية.",
+  "task-stopped-successfully": "تم إيقاف المهمة بنجاح",
   "task-skipped-successfully": "تم تخطي المهمة بنجاح",
   "failed-to-skip-task": "فشل في تخطي المهمة",
   "no-reply-received-task-continue": "لم يتم استلام رد، تستمر المهمة",
@@ -154,6 +182,7 @@
   "no-cookies-saved-yet": "لم يتم حفظ ملفات تعريف الارتباط بعد",
   "no-cookies-saved-yet-description": "انقر فوق \"فتح المتصفح\" أعلاه لتسجيل الدخول إلى المواقع وحفظ ملفات تعريف الارتباط الخاصة بها للمهام المستقبلية.",
   "back": "رجوع",
+  "forward": "إلى الأمام",
   "total-tokens": "إجمالي الرموز",
   "total-tasks": "إجمالي المهام",
   "edit": "تعديل",
@@ -243,5 +272,8 @@
   "restart-required": "إعادة التشغيل مطلوبة",
   "restart-required-message": "أعد تشغيل التطبيق لتفعيل تغييرات نطاق ملفات تعريف الارتباط.",
   "restart": "إعادة التشغيل",
-  "cookie-count": "{{count}} من ملفات تعريف الارتباط"
+  "cookie-count": "{{count}} من ملفات تعريف الارتباط",
+  "add-new-mcp": "إضافة MCP جديد",
+  "browse-mcps": "تصفح MCPs",
+  "browser-settings": "إعدادات المتصفح"
 }
diff --git a/src/i18n/locales/ar/setting.json b/src/i18n/locales/ar/setting.json
index 766aad86e..f915938a0 100644
--- a/src/i18n/locales/ar/setting.json
+++ b/src/i18n/locales/ar/setting.json
@@ -336,9 +336,35 @@
   "proxy-invalid-url": "عنوان URL للوكيل غير صالح. يجب أن يبدأ بـ http:// أو https:// أو socks4:// أو socks5://.",
   "proxy-restart-hint": "يجب إعادة التشغيل لتطبيق تغييرات الوكيل.",
 
+  "browser-login": "تسجيل الدخول عبر المتصفح",
+  "browser-login-description": "افتح متصفح Chrome لتسجيل الدخول إلى حساباتك. سيتم حفظ بيانات تسجيل الدخول محليًا في ملف شخصي آمن.",
+  "open-browser-login": "فتح المتصفح لتسجيل الدخول",
+  "opening-browser": "جاري فتح المتصفح...",
+  "browser-opened-successfully": "تم فتح المتصفح بنجاح. يرجى تسجيل الدخول إلى حساباتك.",
+  "failed-to-open-browser": "فشل فتح المتصفح. يرجى المحاولة مرة أخرى.",
+  "restart-to-apply": "أعد التشغيل للتطبيق",
+  "cookie-manager": "مدير ملفات تعريف الارتباط",
+  "cookie-manager-description": "إدارة ملفات تعريف الارتباط المحفوظة من جلسات المتصفح. احذف ملفات تعريف الارتباط لمواقع محددة أو كلها دفعة واحدة.",
+  "refresh": "تحديث",
+  "delete-all": "حذف الكل",
+  "search-domains": "البحث في النطاقات...",
+  "loading-cookies": "جاري تحميل ملفات تعريف الارتباط...",
+  "no-cookies-found": "لم يتم العثور على ملفات تعريف ارتباط",
+  "no-matching-domains": "لا توجد نطاقات مطابقة",
+  "login-to-save-cookies": "استخدم ميزة تسجيل الدخول عبر المتصفح أعلاه لحفظ ملفات تعريف الارتباط من حساباتك.",
+  "cookies-count": "{{count}} من ملفات تعريف الارتباط",
+  "last-access": "آخر وصول",
+  "cookies-deleted-successfully": "تم حذف ملفات تعريف الارتباط لـ {{domain}} بنجاح",
+  "failed-to-load-cookies": "فشل تحميل ملفات تعريف الارتباط. يرجى المحاولة مرة أخرى.",
+  "failed-to-delete-cookies": "فشل حذف ملفات تعريف الارتباط. يرجى المحاولة مرة أخرى.",
+  "confirm-delete-all-cookies": "هل أنت متأكد أنك تريد حذف جميع ملفات تعريف الارتباط؟ لا يمكن التراجع عن هذا الإجراء.",
+  "all-cookies-deleted": "تم حذف جميع ملفات تعريف الارتباط بنجاح.",
+  "cookie-delete-warning": "ملاحظة: سيؤدي حذف ملفات تعريف الارتباط إلى تسجيل خروجك من المواقع المرتبطة. قد تحتاج إلى إعادة تشغيل المتصفح لتطبيق التغييرات.",
+
   "preferred-ide": "IDE المفضل",
   "preferred-ide-description": "اختر التطبيق الذي سيتم استخدامه عند فتح مجلدات مشاريع الوكيل.",
   "system-file-manager": "مدير ملفات النظام",
+  "agents": "الوكلاء",
   "help-improve-eigent": "ساعد في تحسين Eigent",
   "help-improve-eigent-description": "اسمح لـ Eigent بجمع سجلات الأخطاء المجهولة وبيانات الاستخدام لتحسين الخدمة. هذا اختياري ويمكن تغييره في أي وقت."
 }
diff --git a/src/i18n/locales/ar/triggers.json b/src/i18n/locales/ar/triggers.json
index 329909522..1f1d6beae 100644
--- a/src/i18n/locales/ar/triggers.json
+++ b/src/i18n/locales/ar/triggers.json
@@ -138,6 +138,8 @@
   "no-activity": "No activity yet",
   "activity-hint": "Activity will appear here",
   "execution-logs": "Execution Logs",
+  "fold-execution-logs": "طي سجلات التنفيذ",
+  "open-execution-logs": "فتح سجلات التنفيذ",
   "delete-trigger": "Delete Trigger",
   "cancel": "Cancel",
   "deleting": "Deleting...",
@@ -190,6 +192,7 @@
   "got-it": "Got it",
   "add-trigger": "Add Trigger",
   "trigger-limit-reached": "تم الوصول إلى حد المشغلات: 5 لكل مشروع، 25 لكل مستخدم",
+  "activation-limit-reached": "تم بلوغ حد التفعيل: 5 محفزات نشطة كحد أقصى لكل مشروع، و25 لكل مستخدم",
   "never": "Never",
   "duplicate": "Duplicate",
   "no-task-prompt": "No task prompt",
diff --git a/src/i18n/locales/de/agents.json b/src/i18n/locales/de/agents.json
index 18bc2dd25..a9c20d222 100644
--- a/src/i18n/locales/de/agents.json
+++ b/src/i18n/locales/de/agents.json
@@ -46,5 +46,12 @@
   "custom-skill": "Benutzerdefinierte Fähigkeit",
   "delete-skill": "Fähigkeit löschen",
   "delete-skill-confirmation": "Sind Sie sicher, dass Sie \"{{name}}\" löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
-  "skill-deleted-success": "Fähigkeit erfolgreich gelöscht!"
+  "skill-deleted-success": "Fähigkeit erfolgreich gelöscht!",
+  "create-skill": "Fähigkeit erstellen",
+  "upload-skill": "Fähigkeit hochladen",
+  "browse-skills": "Fähigkeiten durchsuchen",
+  "create-skill-default-name": "Neue Fähigkeit",
+  "create-skill-default-description": "Beschreiben Sie, was diese Fähigkeit tut.",
+  "save-skill": "Fähigkeit speichern",
+  "compose-skill-hint": "Bearbeiten Sie SKILL.md (YAML-Frontmatter mit Name und Beschreibung ist erforderlich), dann speichern."
 }
diff --git a/src/i18n/locales/de/chat.json b/src/i18n/locales/de/chat.json
index 97a3be745..65e6179e5 100644
--- a/src/i18n/locales/de/chat.json
+++ b/src/i18n/locales/de/chat.json
@@ -2,6 +2,12 @@
   "welcome-to-eigent": "Willkommen bei Eigent",
   "how-can-i-help-you": "Wie kann ich Ihnen heute helfen?",
   "ask-placeholder": "Was möchten Sie heute erreichen?",
+  "rich-input-rotate-1": "Marktforschung, Analysen und Berichte automatisieren",
+  "rich-input-rotate-2": "Folien, Social-Media-Posts und Markeninhalte erstellen",
+  "rich-input-rotate-3": "Dateien, Dokumente und Desktop-Aufgaben organisieren",
+  "follow-up-placeholder": "Nachfragen",
+  "select-agent": "Agent auswählen",
+  "clear-agent": "Agent entfernen",
   "select-file": "Datei auswählen",
   "all-files": "Alle Dateien",
   "token": "Token",
@@ -28,6 +34,8 @@
   "task-running": "Aufgabe wird ausgeführt",
   "task-completed": "Aufgabe abgeschlossen",
   "agent-folder": "Agenten-Ordner",
+  "choose-agent-work-folder": "Ordner für den Agenten wählen",
+  "choose-agent-work-folder-placeholder": "Ordner auf Ihrem Computer wählen (demnächst)",
   "open": "Öffnen",
   "close": "Schließen",
   "search": "Suchen",
@@ -58,14 +66,27 @@
   "remove-file": "Datei entfernen",
   "drop-files-to-attach": "Dateien zum Anhängen ablegen",
   "expand-input": "Eingabe erweitern (⌘P)",
+  "collapse-input": "Eingabe reduzieren (⌘P)",
   "queued-tasks": "Aufgaben in Warteschlange",
   "remove-queued-message": "Nachricht aus Warteschlange entfernen",
   "no-agents-added": "Keine Agenten hinzugefügt",
-  "open-in-ide": "In IDE öffnen",
-  "open-in-vscode": "In VS Code öffnen",
-  "open-in-cursor": "In Cursor öffnen",
-  "open-in-file-manager": "Im Dateimanager öffnen",
+  "open-in-ide": "Öffnen in",
+  "open-in-vscode": "VS Code",
+  "open-in-cursor": "Cursor",
+  "open-in-file-manager": "Dateimanager",
   "failed-to-open-folder": "Ordner konnte nicht geöffnet werden",
   "task-completed-card-title": "Aufgabe abgeschlossen",
-  "task-completed-card-subtitle": "Automatisieren Sie Ihre Aufgabe mit einem Trigger"
+  "task-completed-card-subtitle": "Automatisieren Sie Ihre Aufgabe mit einem Trigger",
+  "single-agent-working": "{{agent}} arbeitet mit Hochdruck",
+  "agent-outcome-expand": "Erweitern",
+  "agent-outcome-collapse": "Einklappen",
+  "input-attach-add-files-or-photos": "Dateien oder Fotos hinzufügen",
+  "input-attach-skills": "Skills",
+  "input-attach-upload-new-skill": "Neuen Skill hochladen",
+  "input-attach-manage-skills": "Skills verwalten",
+  "input-attach-add-mcp": "MCP hinzufügen",
+  "input-attach-manage-connectors": "Connectors verwalten",
+  "input-attach-open-browser": "Browser öffnen",
+  "input-attach-manage-browsers": "Browser verwalten",
+  "input-attach-menu-trigger": "Dateien oder Fotos hinzufügen oder Skills, Connectors oder Browser über das Menü öffnen"
 }
diff --git a/src/i18n/locales/de/layout.json b/src/i18n/locales/de/layout.json
index d6f78e435..be631de2d 100644
--- a/src/i18n/locales/de/layout.json
+++ b/src/i18n/locales/de/layout.json
@@ -29,6 +29,7 @@
   "continue-with-google-login": "Mit Google anmelden",
   "continue-with-github-login": "Mit Github anmelden",
   "installation-failed": "Installation fehlgeschlagen",
+  "backend-startup-failed": "Backend-Start fehlgeschlagen",
   "projects": "Projekte",
   "agents": "Agenten",
   "mcp-tools": "MCP & Tools",
@@ -46,8 +47,30 @@
   "browser": "Browser",
   "settings": "Einstellungen",
   "general": "Allgemein",
-  "workers": "Mitarbeiter",
+  "aiWorkforce": "KI-Workforce",
+  "expand-workforce": "Workforce-Bereich vergrößern",
+  "minimize-workforce": "Workforce-Bereich verkleinern",
+  "show-workforce-panel": "Workforce-Bereich anzeigen",
+  "chat-panel-left": "Chat links anzeigen",
+  "chat-panel-right": "Chat rechts anzeigen",
   "triggers": "Trigger",
+  "triggers-disconnected": "Getrennt",
+  "triggers-connecting": "Verbindung wird hergestellt …",
+  "triggers-reconnect-hint": "Erneut mit dem Trigger-Listener verbinden",
+  "triggers-listener-reconnect": "Erneut verbinden",
+  "folder": "Ordner",
+  "sidebar-model-manage-hint": "In Agenten → Modelle verwalten",
+  "sidebar-custom-platform-unknown": "—",
+  "expand-sidebar": "Seitenleiste ausklappen",
+  "collapse-sidebar": "Seitenleiste einklappen",
+  "help-and-support": "Hilfe und Support",
+  "contact-support": "Support kontaktieren",
+  "contact-support-description": "Kontaktieren Sie unser Team",
+  "contact-support-body": "Kopieren Sie unsere Support-E-Mail und kontaktieren Sie uns jederzeit.",
+  "copy-email": "E-Mail kopieren",
+  "email-copied": "E-Mail in die Zwischenablage kopiert",
+  "copy-failed": "E-Mail konnte nicht kopiert werden",
+  "download-logs": "Protokolle herunterladen",
   "new-project": "Neues Projekt",
   "welcome": "Willkommen",
   "delete-task": "Aufgabe löschen",
@@ -59,6 +82,9 @@
   "save": "Speichern",
   "not-found": "Nicht gefunden",
   "tasks": "AUFGABEN",
+  "chat-history-title": "Chat-Verlauf",
+  "chat-history-tooltip": "Chat-Verlauf",
+  "task-list-add-hint": "Workspace öffnen und Chat fokussieren",
   "ongoing": "Laufend",
   "token": "# Token",
   "configuring": "Konfiguration...",
@@ -101,6 +127,7 @@
   "are-you-sure-you-want-to-delete": "Sind Sie sicher, dass Sie diese Aufgabe löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
   "share": "Teilen",
   "home": "Startseite",
+  "dashboard": "Dashboard",
   "developer-agent": "Entwickler-Agent",
   "browser-agent": "Browser-Agent",
   "document-agent": "Dokument-Agent",
@@ -116,6 +143,7 @@
   "project-ended-successfully": "Projekt erfolgreich beendet",
   "failed-to-end-project": "Fehler beim Beenden des Projekts",
   "message-queued": "Nachricht in Warteschlange. Sie wird verarbeitet, wenn die aktuelle Aufgabe beendet ist.",
+  "task-stopped-successfully": "Aufgabe erfolgreich gestoppt",
   "task-skipped-successfully": "Aufgabe erfolgreich übersprungen",
   "failed-to-skip-task": "Fehler beim Überspringen der Aufgabe",
   "no-reply-received-task-continue": "Keine Antwort erhalten, Aufgabe wird fortgesetzt",
@@ -154,6 +182,7 @@
   "no-cookies-saved-yet": "Noch keine Cookies gespeichert",
   "no-cookies-saved-yet-description": "Klicken Sie oben auf \"Browser öffnen\", um sich bei Websites anzumelden und deren Cookies für zukünftige Aufgaben zu speichern.",
   "back": "Zurück",
+  "forward": "Vorwärts",
   "total-tokens": "Gesamt-Tokens",
   "total-tasks": "Gesamt-Aufgaben",
   "edit": "Bearbeiten",
@@ -243,5 +272,8 @@
   "restart-required": "Neustart erforderlich",
   "restart-required-message": "Starten Sie die Anwendung neu, um Ihre Cookie-Domain-Änderungen zu aktivieren.",
   "restart": "Neustart",
-  "cookie-count": "{{count}} Cookies"
+  "cookie-count": "{{count}} Cookies",
+  "add-new-mcp": "Neuen MCP hinzufügen",
+  "browse-mcps": "MCPs durchsuchen",
+  "browser-settings": "Browsereinstellungen"
 }
diff --git a/src/i18n/locales/de/setting.json b/src/i18n/locales/de/setting.json
index 9d58d7cf4..558b0eabc 100644
--- a/src/i18n/locales/de/setting.json
+++ b/src/i18n/locales/de/setting.json
@@ -210,6 +210,32 @@
   "reset-success": "Zurücksetzen erfolgreich!",
   "reset-failed": "Zurücksetzen fehlgeschlagen!",
   "select-default-model": "Standardmodell auswählen",
+
+  "browser-login": "Browser-Anmeldung",
+  "browser-login-description": "Öffnen Sie Chrome, um sich bei Ihren Konten anzumelden. Ihre Anmeldedaten werden lokal in einem sicheren Profil gespeichert.",
+  "open-browser-login": "Browser zur Anmeldung öffnen",
+  "opening-browser": "Browser wird geöffnet...",
+  "browser-opened-successfully": "Browser erfolgreich geöffnet. Bitte melden Sie sich bei Ihren Konten an.",
+  "failed-to-open-browser": "Browser konnte nicht geöffnet werden. Bitte versuchen Sie es erneut.",
+  "restart-to-apply": "Neustart zum Anwenden",
+  "cookie-manager": "Cookie-Manager",
+  "cookie-manager-description": "Verwalten Sie Cookies aus Ihren Browser-Sitzungen. Löschen Sie Cookies für einzelne Seiten oder alle auf einmal.",
+  "refresh": "Aktualisieren",
+  "delete-all": "Alle löschen",
+  "search-domains": "Domains suchen...",
+  "loading-cookies": "Cookies werden geladen...",
+  "no-cookies-found": "Keine Cookies gefunden",
+  "no-matching-domains": "Keine passenden Domains",
+  "login-to-save-cookies": "Verwenden Sie oben die Browser-Anmeldung, um Cookies von Ihren Konten zu speichern.",
+  "cookies-count": "{{count}} Cookies",
+  "last-access": "Letzter Zugriff",
+  "cookies-deleted-successfully": "Cookies für {{domain}} erfolgreich gelöscht",
+  "failed-to-load-cookies": "Cookies konnten nicht geladen werden. Bitte versuchen Sie es erneut.",
+  "failed-to-delete-cookies": "Cookies konnten nicht gelöscht werden. Bitte versuchen Sie es erneut.",
+  "confirm-delete-all-cookies": "Alle Cookies wirklich löschen? Dies kann nicht rückgängig gemacht werden.",
+  "all-cookies-deleted": "Alle Cookies wurden erfolgreich gelöscht.",
+  "cookie-delete-warning": "Hinweis: Beim Löschen von Cookies werden Sie von den betreffenden Websites abgemeldet. Möglicherweise müssen Sie den Browser neu starten.",
+
   "network-proxy": "Netzwerk-Proxy",
   "network-proxy-description": "Konfigurieren Sie einen Proxy-Server für Netzwerkanfragen. Dies ist nützlich, wenn Sie über einen Proxy auf externe APIs zugreifen müssen.",
   "proxy-placeholder": "http://127.0.0.1:7890",
@@ -245,17 +271,11 @@
   "claude-sonnet-4-6-name": "Claude Sonnet 4.6",
   "claude-opus-4-6-name": "Claude Opus 4.6",
   "minimax-m2-5-name": "Minimax M2.5",
-  "network-proxy": "Netzwerk-Proxy",
-  "network-proxy-description": "Konfigurieren Sie einen Proxy-Server für Netzwerkanfragen. Dies ist nützlich, wenn Sie über einen Proxy auf externe APIs zugreifen müssen.",
-  "proxy-placeholder": "http://127.0.0.1:7890",
-  "proxy-saved-restart-required": "Proxy-Konfiguration gespeichert. Starten Sie die App neu, um die Änderungen anzuwenden.",
-  "proxy-save-failed": "Proxy-Konfiguration konnte nicht gespeichert werden.",
-  "proxy-invalid-url": "Ungültige Proxy-URL. Muss mit http://, https://, socks4:// oder socks5:// beginnen.",
-  "proxy-restart-hint": "Neustart erforderlich, um Proxy-Änderungen anzuwenden.",
 
   "preferred-ide": "Bevorzugte IDE",
   "preferred-ide-description": "Wählen Sie die Anwendung aus, die beim Öffnen von Agent-Projektordnern verwendet werden soll.",
   "system-file-manager": "System-Dateimanager",
+  "agents": "Agenten",
   "help-improve-eigent": "Helfen Sie, Eigent zu verbessern",
   "help-improve-eigent-description": "Erlauben Sie Eigent, anonyme Fehlerprotokolle und Nutzungsdaten zu sammeln, um den Dienst zu verbessern. Dies ist optional und kann jederzeit geändert werden."
 }
diff --git a/src/i18n/locales/de/triggers.json b/src/i18n/locales/de/triggers.json
index 58190dfdf..1f3ef165c 100644
--- a/src/i18n/locales/de/triggers.json
+++ b/src/i18n/locales/de/triggers.json
@@ -138,6 +138,8 @@
   "no-activity": "No activity yet",
   "activity-hint": "Activity will appear here",
   "execution-logs": "Execution Logs",
+  "fold-execution-logs": "Ausführungsprotokolle einklappen",
+  "open-execution-logs": "Ausführungsprotokolle öffnen",
   "delete-trigger": "Delete Trigger",
   "cancel": "Cancel",
   "deleting": "Deleting...",
@@ -190,6 +192,7 @@
   "got-it": "Got it",
   "add-trigger": "Add Trigger",
   "trigger-limit-reached": "Trigger-Limit erreicht: 5 pro Projekt, 25 pro Benutzer",
+  "activation-limit-reached": "Aktivierungslimit erreicht: Maximal 5 aktive Trigger pro Projekt, 25 pro Benutzer",
   "never": "Never",
   "duplicate": "Duplicate",
   "no-task-prompt": "No task prompt",
diff --git a/src/i18n/locales/en-us/agents.json b/src/i18n/locales/en-us/agents.json
index 13f215331..302889965 100644
--- a/src/i18n/locales/en-us/agents.json
+++ b/src/i18n/locales/en-us/agents.json
@@ -46,5 +46,12 @@
   "custom-skill": "Custom skill",
   "delete-skill": "Delete Skill",
   "delete-skill-confirmation": "Are you sure you want to delete \"{{name}}\"? This action cannot be undone.",
-  "skill-deleted-success": "Skill deleted successfully!"
+  "skill-deleted-success": "Skill deleted successfully!",
+  "create-skill": "Create a skill",
+  "upload-skill": "Upload a skill",
+  "browse-skills": "Browse skills",
+  "create-skill-default-name": "New skill",
+  "create-skill-default-description": "Describe what this skill does.",
+  "save-skill": "Save skill",
+  "compose-skill-hint": "Edit SKILL.md (YAML frontmatter with name and description is required), then save."
 }
diff --git a/src/i18n/locales/en-us/chat.json b/src/i18n/locales/en-us/chat.json
index 628a4e3b9..1d4b93520 100644
--- a/src/i18n/locales/en-us/chat.json
+++ b/src/i18n/locales/en-us/chat.json
@@ -2,6 +2,12 @@
   "welcome-to-eigent": "Welcome to Eigent",
   "how-can-i-help-you": "How can I help you today?",
   "ask-placeholder": "Ask Eigent to automate your tasks",
+  "rich-input-rotate-1": "Automate market research, analysis, and reports",
+  "rich-input-rotate-2": "Create slides, social posts, and brand content",
+  "rich-input-rotate-3": "Organize files, documents, and desktop tasks",
+  "follow-up-placeholder": "Ask a follow-up",
+  "select-agent": "Select an agent",
+  "clear-agent": "Clear agent",
   "select-file": "Select File",
   "all-files": "All Files",
   "token": "Token",
@@ -28,6 +34,8 @@
   "task-running": "Task Running",
   "task-completed": "Task Completed",
   "agent-folder": "Agent Folder",
+  "choose-agent-work-folder": "Choose folder for agent",
+  "choose-agent-work-folder-placeholder": "Choose a folder on your computer (coming soon)",
   "open": "Open",
   "close": "Close",
   "search": "Search",
@@ -58,14 +66,27 @@
   "remove-file": "Remove file",
   "drop-files-to-attach": "Drop files to attach",
   "expand-input": "Expand input (⌘P)",
+  "collapse-input": "Collapse input (⌘P)",
   "queued-tasks": "Queued Tasks",
   "remove-queued-message": "Remove queued message",
   "no-agents-added": "No agents added",
-  "open-in-ide": "Open in IDE",
-  "open-in-vscode": "Open in VS Code",
-  "open-in-cursor": "Open in Cursor",
-  "open-in-file-manager": "Open in File Manager",
+  "open-in-ide": "Open in",
+  "open-in-vscode": "VS Code",
+  "open-in-cursor": "Cursor",
+  "open-in-file-manager": "File manager",
   "failed-to-open-folder": "Failed to open folder",
   "task-completed-card-title": "Task completed",
-  "task-completed-card-subtitle": "Automate your task with a trigger"
+  "task-completed-card-subtitle": "Automate your task with a trigger",
+  "single-agent-working": "{{agent}} is working hard",
+  "agent-outcome-expand": "Expand",
+  "agent-outcome-collapse": "Collapse",
+  "input-attach-add-files-or-photos": "Add files or photos",
+  "input-attach-skills": "Skills",
+  "input-attach-upload-new-skill": "Upload a new skill",
+  "input-attach-manage-skills": "Manage skills",
+  "input-attach-add-mcp": "Add an MCP",
+  "input-attach-manage-connectors": "Manage connectors",
+  "input-attach-open-browser": "Open a browser",
+  "input-attach-manage-browsers": "Manage browsers",
+  "input-attach-menu-trigger": "Add files or photos, or open Skills, Connectors, or Browser from the menu"
 }
diff --git a/src/i18n/locales/en-us/layout.json b/src/i18n/locales/en-us/layout.json
index f56d4ebc4..34c897925 100644
--- a/src/i18n/locales/en-us/layout.json
+++ b/src/i18n/locales/en-us/layout.json
@@ -47,8 +47,30 @@
   "browser": "Browser",
   "settings": "Settings",
   "general": "General",
-  "workers": "Workers",
+  "aiWorkforce": "AI Workforce",
+  "expand-workforce": "Expand workforce",
+  "minimize-workforce": "Minimize workforce",
+  "show-workforce-panel": "Show workforce panel",
+  "chat-panel-left": "Show chat on the left",
+  "chat-panel-right": "Show chat on the right",
   "triggers": "Triggers",
+  "triggers-disconnected": "Disconnected",
+  "triggers-connecting": "Connecting…",
+  "triggers-reconnect-hint": "Reconnect to trigger listener",
+  "triggers-listener-reconnect": "Reconnect",
+  "folder": "Folder",
+  "sidebar-model-manage-hint": "Manage in Agents → Models",
+  "sidebar-custom-platform-unknown": "—",
+  "expand-sidebar": "Expand sidebar",
+  "collapse-sidebar": "Collapse sidebar",
+  "help-and-support": "Help and support",
+  "contact-support": "Contact support",
+  "contact-support-description": "Get in touch with our team",
+  "contact-support-body": "Copy our support email and reach out anytime.",
+  "copy-email": "Copy email",
+  "email-copied": "Email copied to clipboard",
+  "copy-failed": "Could not copy email",
+  "download-logs": "Download logs",
   "new-project": "New Project",
   "welcome": "Welcome",
   "delete-task": "Delete Task",
@@ -60,6 +82,9 @@
   "save": "Save",
   "not-found": "Not Found",
   "tasks": "TASKS",
+  "chat-history-title": "Chat history",
+  "chat-history-tooltip": "Chat history",
+  "task-list-add-hint": "Open workspace and focus chat",
   "ongoing": "Ongoing",
   "token": "# Token",
   "configuring": "Configuring...",
@@ -102,7 +127,9 @@
   "are-you-sure-you-want-to-delete": "Are you sure you want to delete this task? This action cannot be undone.",
   "share": "Share",
   "home": "Home",
+  "dashboard": "Dashboard",
   "back": "Back",
+  "forward": "Forward",
   "developer-agent": "Developer Agent",
   "browser-agent": "Browser Agent",
   "document-agent": "Document Agent",
@@ -245,5 +272,8 @@
   "restart-required": "Restart Required",
   "restart-required-message": "Restart the application to enable your cookie domain changes.",
   "restart": "Restart",
-  "cookie-count": "{{count}} Cookies"
+  "cookie-count": "{{count}} Cookies",
+  "add-new-mcp": "Add new MCP",
+  "browse-mcps": "Browse MCPs",
+  "browser-settings": "Browser settings"
 }
diff --git a/src/i18n/locales/en-us/triggers.json b/src/i18n/locales/en-us/triggers.json
index 737d73439..220b0dd2b 100644
--- a/src/i18n/locales/en-us/triggers.json
+++ b/src/i18n/locales/en-us/triggers.json
@@ -138,6 +138,8 @@
   "no-activity": "No activity yet",
   "activity-hint": "Activity will appear here",
   "execution-logs": "Execution Logs",
+  "fold-execution-logs": "Fold execution logs",
+  "open-execution-logs": "Open execution logs",
   "delete-trigger": "Delete Trigger",
   "cancel": "Cancel",
   "deleting": "Deleting...",
diff --git a/src/i18n/locales/es/agents.json b/src/i18n/locales/es/agents.json
index c16ad29b1..86dcef959 100644
--- a/src/i18n/locales/es/agents.json
+++ b/src/i18n/locales/es/agents.json
@@ -46,5 +46,12 @@
   "custom-skill": "Habilidad personalizada",
   "delete-skill": "Eliminar habilidad",
   "delete-skill-confirmation": "¿Está seguro de que desea eliminar \"{{name}}\"? Esta acción no se puede deshacer.",
-  "skill-deleted-success": "¡Habilidad eliminada exitosamente!"
+  "skill-deleted-success": "¡Habilidad eliminada exitosamente!",
+  "create-skill": "Crear una habilidad",
+  "upload-skill": "Subir una habilidad",
+  "browse-skills": "Explorar habilidades",
+  "create-skill-default-name": "Nueva habilidad",
+  "create-skill-default-description": "Describe qué hace esta habilidad.",
+  "save-skill": "Guardar habilidad",
+  "compose-skill-hint": "Edita SKILL.md (se requiere frontmatter YAML con nombre y descripción) y luego guarda."
 }
diff --git a/src/i18n/locales/es/chat.json b/src/i18n/locales/es/chat.json
index 4c57349fe..a386bead4 100644
--- a/src/i18n/locales/es/chat.json
+++ b/src/i18n/locales/es/chat.json
@@ -2,6 +2,12 @@
   "welcome-to-eigent": "¡Bienvenido a Eigent!",
   "how-can-i-help-you": "¿Cómo puedo ayudarte hoy?",
   "ask-placeholder": "¿Qué necesitas lograr hoy?",
+  "rich-input-rotate-1": "Automatiza investigación de mercado, análisis e informes",
+  "rich-input-rotate-2": "Crea presentaciones, publicaciones en redes y contenido de marca",
+  "rich-input-rotate-3": "Organiza archivos, documentos y tareas del escritorio",
+  "follow-up-placeholder": "Haz un seguimiento",
+  "select-agent": "Seleccionar un agente",
+  "clear-agent": "Quitar agente",
   "select-file": "Seleccionar archivo",
   "all-files": "Todos los archivos",
   "token": "Token",
@@ -28,6 +34,8 @@
   "task-running": "Tarea en ejecución",
   "task-completed": "Tarea completada",
   "agent-folder": "Carpeta del agente",
+  "choose-agent-work-folder": "Elegir carpeta del agente",
+  "choose-agent-work-folder-placeholder": "Elija una carpeta en su equipo (próximamente)",
   "open": "Abrir",
   "close": "Cerrar",
   "search": "Buscar",
@@ -58,14 +66,27 @@
   "remove-file": "Eliminar archivo",
   "drop-files-to-attach": "Arrastra archivos para adjuntar",
   "expand-input": "Expandir entrada (⌘P)",
+  "collapse-input": "Contraer entrada (⌘P)",
   "queued-tasks": "Tareas en cola",
   "remove-queued-message": "Eliminar mensaje en cola",
   "no-agents-added": "No se han agregado agentes",
-  "open-in-ide": "Abrir en IDE",
-  "open-in-vscode": "Abrir en VS Code",
-  "open-in-cursor": "Abrir en Cursor",
-  "open-in-file-manager": "Abrir en el administrador de archivos",
+  "open-in-ide": "Abrir en",
+  "open-in-vscode": "VS Code",
+  "open-in-cursor": "Cursor",
+  "open-in-file-manager": "Administrador de archivos",
   "failed-to-open-folder": "No se pudo abrir la carpeta",
   "task-completed-card-title": "Tarea completada",
-  "task-completed-card-subtitle": "Automatiza tu tarea con un desencadenador"
+  "task-completed-card-subtitle": "Automatiza tu tarea con un desencadenador",
+  "single-agent-working": "{{agent}} está trabajando a fondo",
+  "agent-outcome-expand": "Expandir",
+  "agent-outcome-collapse": "Contraer",
+  "input-attach-add-files-or-photos": "Añadir archivos o fotos",
+  "input-attach-skills": "Habilidades",
+  "input-attach-upload-new-skill": "Subir una habilidad nueva",
+  "input-attach-manage-skills": "Gestionar habilidades",
+  "input-attach-add-mcp": "Añadir un MCP",
+  "input-attach-manage-connectors": "Gestionar conectores",
+  "input-attach-open-browser": "Abrir un navegador",
+  "input-attach-manage-browsers": "Gestionar navegadores",
+  "input-attach-menu-trigger": "Añadir archivos o fotos o abrir Habilidades, Conectores o Navegador desde el menú"
 }
diff --git a/src/i18n/locales/es/layout.json b/src/i18n/locales/es/layout.json
index 164cdb25e..c7b623f39 100644
--- a/src/i18n/locales/es/layout.json
+++ b/src/i18n/locales/es/layout.json
@@ -29,6 +29,7 @@
   "continue-with-google-login": "Continuar con Google",
   "continue-with-github-login": "Continuar con Github",
   "installation-failed": "Error al instalar",
+  "backend-startup-failed": "Error al iniciar el servidor",
   "projects": "Proyectos",
   "agents": "Agentes",
   "mcp-tools": "MCP & Herramientas",
@@ -46,8 +47,30 @@
   "browser": "Navegador",
   "settings": "Ajustes",
   "general": "General",
-  "workers": "Trabajadores",
+  "aiWorkforce": "Fuerza laboral de IA",
+  "expand-workforce": "Ampliar el espacio de trabajo",
+  "minimize-workforce": "Reducir el espacio de trabajo",
+  "show-workforce-panel": "Mostrar panel de workforce",
+  "chat-panel-left": "Mostrar chat a la izquierda",
+  "chat-panel-right": "Mostrar chat a la derecha",
   "triggers": "Disparadores",
+  "triggers-disconnected": "Desconectado",
+  "triggers-connecting": "Conectando…",
+  "triggers-reconnect-hint": "Reconectar al listener de disparadores",
+  "triggers-listener-reconnect": "Reconectar",
+  "folder": "Carpeta",
+  "sidebar-model-manage-hint": "Gestionar en Agentes → Modelos",
+  "sidebar-custom-platform-unknown": "—",
+  "expand-sidebar": "Expandir barra lateral",
+  "collapse-sidebar": "Contraer barra lateral",
+  "help-and-support": "Ayuda y soporte",
+  "contact-support": "Contactar con soporte",
+  "contact-support-description": "Ponte en contacto con nuestro equipo",
+  "contact-support-body": "Copia nuestro correo de soporte y escríbenos cuando quieras.",
+  "copy-email": "Copiar correo",
+  "email-copied": "Correo copiado al portapapeles",
+  "copy-failed": "No se pudo copiar el correo",
+  "download-logs": "Descargar registros",
   "new-project": "Nuevo Proyecto",
   "welcome": "Bienvenido",
   "delete-task": "Eliminar Tarea",
@@ -59,6 +82,9 @@
   "save": "Guardar",
   "not-found": "No encontrado",
   "tasks": "TAREAS",
+  "chat-history-title": "Historial del chat",
+  "chat-history-tooltip": "Historial del chat",
+  "task-list-add-hint": "Abrir el espacio de trabajo y enfocar el chat",
   "ongoing": "En progreso",
   "token": "# Token",
   "configuring": "Configurando...",
@@ -101,6 +127,7 @@
   "are-you-sure-you-want-to-delete": "¿Estás seguro de que quieres eliminar esta tarea? Esta acción no se puede deshacer.",
   "share": "Compartir",
   "home": "Inicio",
+  "dashboard": "Panel",
   "developer-agent": "Agente Desarrollador",
   "browser-agent": "Agente de Navegador",
   "document-agent": "Agente de Documentos",
@@ -116,6 +143,7 @@
   "project-ended-successfully": "Proyecto finalizado exitosamente",
   "failed-to-end-project": "Error al finalizar proyecto",
   "message-queued": "Mensaje en cola. Se procesará cuando la tarea actual termine.",
+  "task-stopped-successfully": "Tarea detenida correctamente",
   "task-skipped-successfully": "Tarea omitida exitosamente",
   "failed-to-skip-task": "Error al omitir tarea",
   "no-reply-received-task-continue": "No se recibió respuesta, la tarea continúa",
@@ -154,6 +182,7 @@
   "no-cookies-saved-yet": "Aún no se han guardado cookies",
   "no-cookies-saved-yet-description": "Haga clic en \"Abrir Navegador\" arriba para iniciar sesión en sitios web y guardar sus cookies para tareas futuras.",
   "back": "Atrás",
+  "forward": "Adelante",
   "total-tokens": "Total de Tokens",
   "total-tasks": "Total de Tareas",
   "edit": "Editar",
@@ -243,5 +272,8 @@
   "restart-required": "Reinicio requerido",
   "restart-required-message": "Reinicie la aplicación para habilitar los cambios de dominio de cookies.",
   "restart": "Reiniciar",
-  "cookie-count": "{{count}} Cookies"
+  "cookie-count": "{{count}} Cookies",
+  "add-new-mcp": "Añadir nuevo MCP",
+  "browse-mcps": "Explorar MCPs",
+  "browser-settings": "Ajustes del navegador"
 }
diff --git a/src/i18n/locales/es/setting.json b/src/i18n/locales/es/setting.json
index 926a8e104..c9292cc89 100644
--- a/src/i18n/locales/es/setting.json
+++ b/src/i18n/locales/es/setting.json
@@ -210,6 +210,32 @@
   "reset-success": "¡Restablecido correctamente!",
   "reset-failed": "¡Error al restablecer!",
   "select-default-model": "Seleccionar modelo predeterminado",
+
+  "browser-login": "Inicio de sesión en el navegador",
+  "browser-login-description": "Abra Chrome para iniciar sesión en sus cuentas. Sus datos de acceso se guardarán localmente en un perfil seguro.",
+  "open-browser-login": "Abrir navegador para iniciar sesión",
+  "opening-browser": "Abriendo navegador...",
+  "browser-opened-successfully": "Navegador abierto correctamente. Inicie sesión en sus cuentas.",
+  "failed-to-open-browser": "No se pudo abrir el navegador. Inténtelo de nuevo.",
+  "restart-to-apply": "Reiniciar para aplicar",
+  "cookie-manager": "Administrador de cookies",
+  "cookie-manager-description": "Administre las cookies guardadas de sus sesiones del navegador. Elimine cookies de sitios concretos o todas a la vez.",
+  "refresh": "Actualizar",
+  "delete-all": "Eliminar todo",
+  "search-domains": "Buscar dominios...",
+  "loading-cookies": "Cargando cookies...",
+  "no-cookies-found": "No se encontraron cookies",
+  "no-matching-domains": "No hay dominios coincidentes",
+  "login-to-save-cookies": "Use el inicio de sesión del navegador arriba para guardar cookies de sus cuentas.",
+  "cookies-count": "{{count}} cookies",
+  "last-access": "Último acceso",
+  "cookies-deleted-successfully": "Cookies de {{domain}} eliminadas correctamente",
+  "failed-to-load-cookies": "No se pudieron cargar las cookies. Inténtelo de nuevo.",
+  "failed-to-delete-cookies": "No se pudieron eliminar las cookies. Inténtelo de nuevo.",
+  "confirm-delete-all-cookies": "¿Eliminar todas las cookies? Esta acción no se puede deshacer.",
+  "all-cookies-deleted": "Todas las cookies se eliminaron correctamente.",
+  "cookie-delete-warning": "Nota: Al eliminar cookies se cerrará sesión en los sitios asociados. Es posible que deba reiniciar el navegador para ver los cambios.",
+
   "network-proxy": "Proxy de red",
   "network-proxy-description": "Configure un servidor proxy para las solicitudes de red. Esto es útil si necesita acceder a APIs externas a través de un proxy.",
   "proxy-placeholder": "http://127.0.0.1:7890",
@@ -245,17 +271,11 @@
   "claude-sonnet-4-6-name": "Claude Sonnet 4.6",
   "claude-opus-4-6-name": "Claude Opus 4.6",
   "minimax-m2-5-name": "Minimax M2.5",
-  "network-proxy": "Proxy de red",
-  "network-proxy-description": "Configure un servidor proxy para las solicitudes de red. Esto es útil si necesita acceder a APIs externas a través de un proxy.",
-  "proxy-placeholder": "http://127.0.0.1:7890",
-  "proxy-saved-restart-required": "Configuración de proxy guardada. Reinicie la aplicación para aplicar los cambios.",
-  "proxy-save-failed": "Error al guardar la configuración del proxy.",
-  "proxy-invalid-url": "URL de proxy no válida. Debe comenzar con http://, https://, socks4:// o socks5://.",
-  "proxy-restart-hint": "Es necesario reiniciar para aplicar los cambios del proxy.",
 
   "preferred-ide": "IDE preferido",
   "preferred-ide-description": "Elija qué aplicación usar al abrir las carpetas de proyectos del agente.",
   "system-file-manager": "Administrador de archivos del sistema",
+  "agents": "Agentes",
   "help-improve-eigent": "Ayuda a mejorar Eigent",
   "help-improve-eigent-description": "Permite que Eigent recopile registros de errores anónimos y datos de uso para mejorar el servicio. Esto es opcional y se puede cambiar en cualquier momento."
 }
diff --git a/src/i18n/locales/es/triggers.json b/src/i18n/locales/es/triggers.json
index c7b99fdb7..bfd7e2da4 100644
--- a/src/i18n/locales/es/triggers.json
+++ b/src/i18n/locales/es/triggers.json
@@ -138,6 +138,8 @@
   "no-activity": "No activity yet",
   "activity-hint": "Activity will appear here",
   "execution-logs": "Execution Logs",
+  "fold-execution-logs": "Contraer registros de ejecución",
+  "open-execution-logs": "Abrir registros de ejecución",
   "delete-trigger": "Delete Trigger",
   "cancel": "Cancel",
   "deleting": "Deleting...",
@@ -190,6 +192,7 @@
   "got-it": "Got it",
   "add-trigger": "Add Trigger",
   "trigger-limit-reached": "Límite de triggers alcanzado: 5 por proyecto, 25 por usuario",
+  "activation-limit-reached": "Límite de activación alcanzado: máximo 5 triggers activos por proyecto, 25 por usuario",
   "never": "Never",
   "duplicate": "Duplicate",
   "no-task-prompt": "No task prompt",
diff --git a/src/i18n/locales/fr/agents.json b/src/i18n/locales/fr/agents.json
index 45a457600..cf4b09180 100644
--- a/src/i18n/locales/fr/agents.json
+++ b/src/i18n/locales/fr/agents.json
@@ -46,5 +46,12 @@
   "custom-skill": "Compétence personnalisée",
   "delete-skill": "Supprimer la compétence",
   "delete-skill-confirmation": "Êtes-vous sûr de vouloir supprimer \"{{name}}\" ? Cette action est irréversible.",
-  "skill-deleted-success": "Compétence supprimée avec succès !"
+  "skill-deleted-success": "Compétence supprimée avec succès !",
+  "create-skill": "Créer une compétence",
+  "upload-skill": "Téléverser une compétence",
+  "browse-skills": "Parcourir les compétences",
+  "create-skill-default-name": "Nouvelle compétence",
+  "create-skill-default-description": "Décrivez ce que fait cette compétence.",
+  "save-skill": "Enregistrer la compétence",
+  "compose-skill-hint": "Modifiez SKILL.md (un en-tête YAML avec nom et description est requis), puis enregistrez."
 }
diff --git a/src/i18n/locales/fr/chat.json b/src/i18n/locales/fr/chat.json
index 06fcfbc23..ffb259f65 100644
--- a/src/i18n/locales/fr/chat.json
+++ b/src/i18n/locales/fr/chat.json
@@ -2,6 +2,12 @@
   "welcome-to-eigent": "Bienvenue chez Eigent",
   "how-can-i-help-you": "Comment puis-je vous aider aujourd'hui ?",
   "ask-placeholder": "Que devez-vous accomplir aujourd'hui ?",
+  "rich-input-rotate-1": "Automatiser l'étude de marché, l'analyse et les rapports",
+  "rich-input-rotate-2": "Créer des diapositives, des posts sociaux et du contenu de marque",
+  "rich-input-rotate-3": "Organiser fichiers, documents et tâches sur le bureau",
+  "follow-up-placeholder": "Poser une question de suivi",
+  "select-agent": "Sélectionner un agent",
+  "clear-agent": "Retirer l’agent",
   "select-file": "Sélectionner un fichier",
   "all-files": "Tous les fichiers",
   "token": "Jeton",
@@ -28,6 +34,8 @@
   "task-running": "Tâche en cours",
   "task-completed": "Tâche terminée",
   "agent-folder": "Dossier de l'agent",
+  "choose-agent-work-folder": "Choisir le dossier de l'agent",
+  "choose-agent-work-folder-placeholder": "Choisir un dossier sur votre ordinateur (bientôt disponible)",
   "open": "Ouvrir",
   "close": "Fermer",
   "search": "Rechercher",
@@ -58,14 +66,27 @@
   "remove-file": "Supprimer le fichier",
   "drop-files-to-attach": "Déposez les fichiers à joindre",
   "expand-input": "Développer l'entrée (⌘P)",
+  "collapse-input": "Réduire l'entrée (⌘P)",
   "queued-tasks": "Tâches en file d'attente",
   "remove-queued-message": "Supprimer le message en file d'attente",
   "no-agents-added": "Aucun agent ajouté",
-  "open-in-ide": "Ouvrir dans l'IDE",
-  "open-in-vscode": "Ouvrir dans VS Code",
-  "open-in-cursor": "Ouvrir dans Cursor",
-  "open-in-file-manager": "Ouvrir dans le gestionnaire de fichiers",
+  "open-in-ide": "Ouvrir dans",
+  "open-in-vscode": "VS Code",
+  "open-in-cursor": "Cursor",
+  "open-in-file-manager": "Gestionnaire de fichiers",
   "failed-to-open-folder": "Impossible d'ouvrir le dossier",
   "task-completed-card-title": "Tâche terminée",
-  "task-completed-card-subtitle": "Automatisez votre tâche avec un déclencheur"
+  "task-completed-card-subtitle": "Automatisez votre tâche avec un déclencheur",
+  "single-agent-working": "{{agent}} travaille dur",
+  "agent-outcome-expand": "Développer",
+  "agent-outcome-collapse": "Réduire",
+  "input-attach-add-files-or-photos": "Ajouter des fichiers ou des photos",
+  "input-attach-skills": "Compétences",
+  "input-attach-upload-new-skill": "Téléverser une nouvelle compétence",
+  "input-attach-manage-skills": "Gérer les compétences",
+  "input-attach-add-mcp": "Ajouter un MCP",
+  "input-attach-manage-connectors": "Gérer les connecteurs",
+  "input-attach-open-browser": "Ouvrir un navigateur",
+  "input-attach-manage-browsers": "Gérer les navigateurs",
+  "input-attach-menu-trigger": "Ajouter fichiers ou photos ou ouvrir Compétences, Connecteurs ou Navigateur depuis le menu"
 }
diff --git a/src/i18n/locales/fr/layout.json b/src/i18n/locales/fr/layout.json
index 562de3fc5..fe74e4d7f 100644
--- a/src/i18n/locales/fr/layout.json
+++ b/src/i18n/locales/fr/layout.json
@@ -29,6 +29,7 @@
   "continue-with-google-login": "Continuer avec Google",
   "continue-with-github-login": "Continuer avec Github",
   "installation-failed": "Échec de l'installation",
+  "backend-startup-failed": "Échec du démarrage du backend",
   "projects": "Projets",
   "agents": "Agents",
   "mcp-tools": "MCP & Outils",
@@ -46,8 +47,30 @@
   "browser": "Navigateur",
   "settings": "Paramètres",
   "general": "Général",
-  "workers": "Travailleurs",
+  "aiWorkforce": "Main-d'œuvre IA",
+  "expand-workforce": "Agrandir l'espace Workforce",
+  "minimize-workforce": "Réduire l'espace Workforce",
+  "show-workforce-panel": "Afficher le panneau Workforce",
+  "chat-panel-left": "Afficher le chat à gauche",
+  "chat-panel-right": "Afficher le chat à droite",
   "triggers": "Déclencheurs",
+  "triggers-disconnected": "Déconnecté",
+  "triggers-connecting": "Connexion…",
+  "triggers-reconnect-hint": "Se reconnecter à l’écouteur de déclencheurs",
+  "triggers-listener-reconnect": "Reconnecter",
+  "folder": "Dossier",
+  "sidebar-model-manage-hint": "Gérer dans Agents → Modèles",
+  "sidebar-custom-platform-unknown": "—",
+  "expand-sidebar": "Développer la barre latérale",
+  "collapse-sidebar": "Réduire la barre latérale",
+  "help-and-support": "Aide et assistance",
+  "contact-support": "Contacter le support",
+  "contact-support-description": "Contactez notre équipe",
+  "contact-support-body": "Copiez notre e-mail de support et écrivez-nous à tout moment.",
+  "copy-email": "Copier l'e-mail",
+  "email-copied": "E-mail copié dans le presse-papiers",
+  "copy-failed": "Impossible de copier l'e-mail",
+  "download-logs": "Télécharger les journaux",
   "new-project": "Nouveau Projet",
   "welcome": "Bienvenue",
   "delete-task": "Supprimer la Tâche",
@@ -59,6 +82,9 @@
   "save": "Enregistrer",
   "not-found": "Non trouvé",
   "tasks": "TÂCHES",
+  "chat-history-title": "Historique du chat",
+  "chat-history-tooltip": "Historique du chat",
+  "task-list-add-hint": "Ouvrir l’espace de travail et focus sur le chat",
   "ongoing": "En cours",
   "token": "# Token",
   "configuring": "Configuration...",
@@ -101,6 +127,7 @@
   "are-you-sure-you-want-to-delete": "Êtes-vous sûr de vouloir supprimer cette tâche ? Cette action ne peut pas être annulée.",
   "share": "Partager",
   "home": "Accueil",
+  "dashboard": "Tableau de bord",
   "developer-agent": "Agent Développeur",
   "browser-agent": "Agent Navigateur",
   "document-agent": "Agent de Documents",
@@ -116,6 +143,7 @@
   "project-ended-successfully": "Projet terminé avec succès",
   "failed-to-end-project": "Échec de la fin du projet",
   "message-queued": "Message en file d'attente. Il sera traité lorsque la tâche actuelle se terminera.",
+  "task-stopped-successfully": "Tâche arrêtée avec succès",
   "task-skipped-successfully": "Tâche ignorée avec succès",
   "failed-to-skip-task": "Échec de l'ignorance de la tâche",
   "no-reply-received-task-continue": "Aucune réponse reçue, la tâche continue",
@@ -154,6 +182,7 @@
   "no-cookies-saved-yet": "Aucun cookie enregistré pour le moment",
   "no-cookies-saved-yet-description": "Cliquez sur \"Ouvrir le Navigateur\" ci-dessus pour vous connecter aux sites web et enregistrer leurs cookies pour les tâches futures.",
   "back": "Retour",
+  "forward": "Avancer",
   "total-tokens": "Total des Tokens",
   "total-tasks": "Total des Tâches",
   "edit": "Modifier",
@@ -243,5 +272,8 @@
   "restart-required": "Redémarrage requis",
   "restart-required-message": "Redémarrez l'application pour activer vos modifications de domaine de cookies.",
   "restart": "Redémarrer",
-  "cookie-count": "{{count}} Cookies"
+  "cookie-count": "{{count}} Cookies",
+  "add-new-mcp": "Ajouter un nouveau MCP",
+  "browse-mcps": "Parcourir les MCP",
+  "browser-settings": "Paramètres du navigateur"
 }
diff --git a/src/i18n/locales/fr/setting.json b/src/i18n/locales/fr/setting.json
index 2cdbd4234..8da71e992 100644
--- a/src/i18n/locales/fr/setting.json
+++ b/src/i18n/locales/fr/setting.json
@@ -170,8 +170,25 @@
   "no-more-mcp-servers": "No more MCP servers",
   "search-mcp": "Search MCPs",
   "installed": "Installed",
-  "worker-name-cannot-be-empty": "Worker name cannot be empty",
-  "worker-name-already-exists": "Worker name already exists",
+  "worker-name-cannot-be-empty": "Le nom du worker ne peut pas être vide",
+  "worker-name-already-exists": "Ce nom de worker existe déjà",
+  "warning-google-search-not-configured": "Attention : Google Search non configuré",
+  "search-functionality-may-be-limited-without-google-api": "La recherche peut être limitée sans clé API Google et ID de moteur de recherche. Configurez-les dans MCP et Outils.",
+  "search-engine": "Moteur de recherche",
+  "password-storage": "Stockage des mots de passe",
+  "notion-mcp-installed-successfully": "MCP Notion installé avec succès",
+  "failed-to-install-notion-mcp": "Échec de l'installation du MCP Notion",
+  "google-calendar-installed-successfully": "Google Calendar installé avec succès",
+  "failed-to-install-google-calendar": "Échec de l'installation de Google Calendar",
+  "notion-workspace-integration": "Intégration Notion pour lire et gérer les pages Notion",
+  "google-calendar-integration": "Intégration Google Calendar pour gérer événements et agenda",
+  "mcp-server-already-exists": "Le serveur MCP « {{name}} » existe déjà",
+  "google-search": "Recherche Google",
+  "select-default-search-engine": "Sélectionner le moteur de recherche par défaut",
+  "your-own-mcps": "Vos propres MCP",
+  "get-google-search-api": "Obtenir l'API Google Search",
+  "get-exa-api": "Obtenir l'API Exa",
+  "exa-ai": "Exa AI",
   "search-engine-integrations": "Intégrations de Moteur de Recherche",
   "configured": "Configuré",
   "incomplete": "Incomplet",
@@ -193,6 +210,32 @@
   "reset-success": "Réinitialisation réussie !",
   "reset-failed": "Échec de la réinitialisation !",
   "select-default-model": "Sélectionner le modèle par défaut",
+
+  "browser-login": "Connexion navigateur",
+  "browser-login-description": "Ouvrez Chrome pour vous connecter à vos comptes. Vos données de connexion sont enregistrées localement dans un profil sécurisé.",
+  "open-browser-login": "Ouvrir le navigateur pour la connexion",
+  "opening-browser": "Ouverture du navigateur...",
+  "browser-opened-successfully": "Navigateur ouvert. Veuillez vous connecter à vos comptes.",
+  "failed-to-open-browser": "Impossible d'ouvrir le navigateur. Veuillez réessayer.",
+  "restart-to-apply": "Redémarrer pour appliquer",
+  "cookie-manager": "Gestionnaire de cookies",
+  "cookie-manager-description": "Gérez les cookies enregistrés lors de vos sessions. Supprimez les cookies par site ou tous à la fois.",
+  "refresh": "Actualiser",
+  "delete-all": "Tout supprimer",
+  "search-domains": "Rechercher des domaines...",
+  "loading-cookies": "Chargement des cookies...",
+  "no-cookies-found": "Aucun cookie trouvé",
+  "no-matching-domains": "Aucun domaine correspondant",
+  "login-to-save-cookies": "Utilisez la connexion navigateur ci-dessus pour enregistrer les cookies de vos comptes.",
+  "cookies-count": "{{count}} cookies",
+  "last-access": "Dernier accès",
+  "cookies-deleted-successfully": "Cookies supprimés pour {{domain}}",
+  "failed-to-load-cookies": "Échec du chargement des cookies. Veuillez réessayer.",
+  "failed-to-delete-cookies": "Échec de la suppression des cookies. Veuillez réessayer.",
+  "confirm-delete-all-cookies": "Supprimer tous les cookies ? Cette action est irréversible.",
+  "all-cookies-deleted": "Tous les cookies ont été supprimés avec succès.",
+  "cookie-delete-warning": "Remarque : la suppression des cookies vous déconnectera des sites associés. Un redémarrage du navigateur peut être nécessaire.",
+
   "network-proxy": "Proxy réseau",
   "network-proxy-description": "Configurez un serveur proxy pour les requêtes réseau. Utile si vous devez accéder à des API externes via un proxy.",
   "proxy-placeholder": "http://127.0.0.1:7890",
@@ -228,17 +271,11 @@
   "claude-sonnet-4-6-name": "Claude Sonnet 4.6",
   "claude-opus-4-6-name": "Claude Opus 4.6",
   "minimax-m2-5-name": "Minimax M2.5",
-  "network-proxy": "Proxy réseau",
-  "network-proxy-description": "Configurez un serveur proxy pour les requêtes réseau. Utile si vous devez accéder à des API externes via un proxy.",
-  "proxy-placeholder": "http://127.0.0.1:7890",
-  "proxy-saved-restart-required": "Configuration du proxy enregistrée. Redémarrez l'application pour appliquer les modifications.",
-  "proxy-save-failed": "Échec de l'enregistrement de la configuration du proxy.",
-  "proxy-invalid-url": "URL de proxy invalide. Doit commencer par http://, https://, socks4:// ou socks5://.",
-  "proxy-restart-hint": "Redémarrage nécessaire pour appliquer les modifications du proxy.",
 
   "preferred-ide": "IDE préféré",
   "preferred-ide-description": "Choisissez l'application à utiliser lors de l'ouverture des dossiers de projets d'agent.",
   "system-file-manager": "Gestionnaire de fichiers système",
+  "agents": "Agents",
   "help-improve-eigent": "Aidez à améliorer Eigent",
   "help-improve-eigent-description": "Autorisez Eigent à collecter des journaux d'erreurs anonymes et des données d'utilisation pour améliorer le service. Ceci est facultatif et peut être modifié à tout moment."
 }
diff --git a/src/i18n/locales/fr/triggers.json b/src/i18n/locales/fr/triggers.json
index 431ad89a3..2c341b06d 100644
--- a/src/i18n/locales/fr/triggers.json
+++ b/src/i18n/locales/fr/triggers.json
@@ -138,6 +138,8 @@
   "no-activity": "No activity yet",
   "activity-hint": "Activity will appear here",
   "execution-logs": "Execution Logs",
+  "fold-execution-logs": "Replier les journaux d'exécution",
+  "open-execution-logs": "Ouvrir les journaux d'exécution",
   "delete-trigger": "Delete Trigger",
   "cancel": "Cancel",
   "deleting": "Deleting...",
@@ -190,6 +192,7 @@
   "got-it": "Got it",
   "add-trigger": "Add Trigger",
   "trigger-limit-reached": "Limite de déclencheurs atteinte : 5 par projet, 25 par utilisateur",
+  "activation-limit-reached": "Limite d'activation atteinte : 5 déclencheurs actifs maximum par projet, 25 par utilisateur",
   "never": "Never",
   "duplicate": "Duplicate",
   "no-task-prompt": "No task prompt",
diff --git a/src/i18n/locales/it/agents.json b/src/i18n/locales/it/agents.json
index b9855f585..c4c029289 100644
--- a/src/i18n/locales/it/agents.json
+++ b/src/i18n/locales/it/agents.json
@@ -46,5 +46,12 @@
   "custom-skill": "Competenza personalizzata",
   "delete-skill": "Elimina competenza",
   "delete-skill-confirmation": "Sei sicuro di voler eliminare \"{{name}}\"? Questa azione non può essere annullata.",
-  "skill-deleted-success": "Competenza eliminata con successo!"
+  "skill-deleted-success": "Competenza eliminata con successo!",
+  "create-skill": "Crea un'abilità",
+  "upload-skill": "Carica un'abilità",
+  "browse-skills": "Sfoglia le abilità",
+  "create-skill-default-name": "Nuova abilità",
+  "create-skill-default-description": "Descrivi cosa fa questa abilità.",
+  "save-skill": "Salva abilità",
+  "compose-skill-hint": "Modifica SKILL.md (è richiesto il frontmatter YAML con nome e descrizione), poi salva."
 }
diff --git a/src/i18n/locales/it/chat.json b/src/i18n/locales/it/chat.json
index 59f0e1e26..199711def 100644
--- a/src/i18n/locales/it/chat.json
+++ b/src/i18n/locales/it/chat.json
@@ -2,6 +2,12 @@
   "welcome-to-eigent": "Benvenuto in Eigent",
   "how-can-i-help-you": "Come posso aiutarti oggi?",
   "ask-placeholder": "Cosa devi realizzare oggi?",
+  "rich-input-rotate-1": "Automatizza ricerche di mercato, analisi e report",
+  "rich-input-rotate-2": "Crea slide, post sui social e contenuti del brand",
+  "rich-input-rotate-3": "Organizza file, documenti e attività sul desktop",
+  "follow-up-placeholder": "Chiedi un follow-up",
+  "select-agent": "Seleziona un agente",
+  "clear-agent": "Rimuovi agente",
   "select-file": "Seleziona File",
   "all-files": "Tutti i File",
   "token": "Token",
@@ -28,6 +34,8 @@
   "task-running": "Compito in Esecuzione",
   "task-completed": "Compito Completato",
   "agent-folder": "Cartella Agente",
+  "choose-agent-work-folder": "Scegli la cartella dell'agente",
+  "choose-agent-work-folder-placeholder": "Scegli una cartella sul computer (disponibile a breve)",
   "open": "Apri",
   "close": "Chiudi",
   "search": "Cerca",
@@ -58,14 +66,27 @@
   "remove-file": "Rimuovi file",
   "drop-files-to-attach": "Trascina i file da allegare",
   "expand-input": "Espandi input (⌘P)",
+  "collapse-input": "Comprimi input (⌘P)",
   "queued-tasks": "Compiti in coda",
   "remove-queued-message": "Rimuovi messaggio in coda",
   "no-agents-added": "Nessun agente aggiunto",
-  "open-in-ide": "Apri in IDE",
-  "open-in-vscode": "Apri in VS Code",
-  "open-in-cursor": "Apri in Cursor",
-  "open-in-file-manager": "Apri nel gestore file",
+  "open-in-ide": "Apri in",
+  "open-in-vscode": "VS Code",
+  "open-in-cursor": "Cursor",
+  "open-in-file-manager": "Gestore file",
   "failed-to-open-folder": "Impossibile aprire la cartella",
   "task-completed-card-title": "Compito completato",
-  "task-completed-card-subtitle": "Automatizza il tuo compito con un trigger"
+  "task-completed-card-subtitle": "Automatizza il tuo compito con un trigger",
+  "single-agent-working": "{{agent}} sta lavorando sodo",
+  "agent-outcome-expand": "Espandi",
+  "agent-outcome-collapse": "Comprimi",
+  "input-attach-add-files-or-photos": "Aggiungi file o foto",
+  "input-attach-skills": "Skill",
+  "input-attach-upload-new-skill": "Carica una nuova skill",
+  "input-attach-manage-skills": "Gestisci le skill",
+  "input-attach-add-mcp": "Aggiungi un MCP",
+  "input-attach-manage-connectors": "Gestisci i connettori",
+  "input-attach-open-browser": "Apri un browser",
+  "input-attach-manage-browsers": "Gestisci i browser",
+  "input-attach-menu-trigger": "Aggiungi file o foto o apri Skill, Connettori o Browser dal menu"
 }
diff --git a/src/i18n/locales/it/layout.json b/src/i18n/locales/it/layout.json
index 29289b3ba..b994de9e1 100644
--- a/src/i18n/locales/it/layout.json
+++ b/src/i18n/locales/it/layout.json
@@ -29,6 +29,7 @@
   "continue-with-google-login": "Continua con Google",
   "continue-with-github-login": "Continua con Github",
   "installation-failed": "Installazione fallita",
+  "backend-startup-failed": "Avvio del backend non riuscito",
   "projects": "Progetti",
   "agents": "Agenti",
   "mcp-tools": "MCP e Strumenti",
@@ -46,8 +47,30 @@
   "browser": "Navigatore",
   "settings": "Impostazioni",
   "general": "Generale",
-  "workers": "Lavoratori",
+  "aiWorkforce": "Forza lavoro IA",
+  "expand-workforce": "Espandi l'area Workforce",
+  "minimize-workforce": "Riduci l'area Workforce",
+  "show-workforce-panel": "Mostra pannello Workforce",
+  "chat-panel-left": "Mostra la chat a sinistra",
+  "chat-panel-right": "Mostra la chat a destra",
   "triggers": "Trigger",
+  "triggers-disconnected": "Disconnesso",
+  "triggers-connecting": "Connessione…",
+  "triggers-reconnect-hint": "Riconnetti al listener dei trigger",
+  "triggers-listener-reconnect": "Riconnetti",
+  "folder": "Cartella",
+  "sidebar-model-manage-hint": "Gestisci in Agenti → Modelli",
+  "sidebar-custom-platform-unknown": "—",
+  "expand-sidebar": "Espandi barra laterale",
+  "collapse-sidebar": "Comprimi barra laterale",
+  "help-and-support": "Aiuto e supporto",
+  "contact-support": "Contatta il supporto",
+  "contact-support-description": "Mettiti in contatto con il nostro team",
+  "contact-support-body": "Copia la nostra email di supporto e scrivici in qualsiasi momento.",
+  "copy-email": "Copia email",
+  "email-copied": "Email copiata negli appunti",
+  "copy-failed": "Impossibile copiare l'email",
+  "download-logs": "Scarica i log",
   "new-project": "Nuovo Progetto",
   "welcome": "Benvenuto",
   "delete-task": "Elimina Attività",
@@ -59,6 +82,9 @@
   "save": "Salva",
   "not-found": "Non trovato",
   "tasks": "ATTIVITÀ",
+  "chat-history-title": "Cronologia chat",
+  "chat-history-tooltip": "Cronologia chat",
+  "task-list-add-hint": "Apri workspace e metti a fuoco la chat",
   "ongoing": "In corso",
   "token": "# Token",
   "configuring": "Configurazione...",
@@ -101,6 +127,7 @@
   "are-you-sure-you-want-to-delete": "Sei sicuro di voler eliminare questa attività? Questa azione non può essere annullata.",
   "share": "Condividi",
   "home": "Home",
+  "dashboard": "Dashboard",
   "developer-agent": "Agente Sviluppatore",
   "browser-agent": "Agente Browser",
   "document-agent": "Agente Documenti",
@@ -116,6 +143,7 @@
   "project-ended-successfully": "Progetto terminato con successo",
   "failed-to-end-project": "Impossibile terminare il progetto",
   "message-queued": "Messaggio in coda. Verrà elaborato quando l'attività corrente finirà.",
+  "task-stopped-successfully": "Attività interrotta correttamente",
   "task-skipped-successfully": "Attività saltata con successo",
   "failed-to-skip-task": "Impossibile saltare l'attività",
   "no-reply-received-task-continue": "Nessuna risposta ricevuta, l'attività continua",
@@ -154,6 +182,7 @@
   "no-cookies-saved-yet": "Nessun cookie salvato ancora",
   "no-cookies-saved-yet-description": "Fai clic su \"Apri Browser\" sopra per accedere ai siti web e salvare i loro cookie per le attività future.",
   "back": "Indietro",
+  "forward": "Avanti",
   "total-tokens": "Totale Token",
   "total-tasks": "Totale Attività",
   "edit": "Modifica",
@@ -243,5 +272,8 @@
   "restart-required": "Riavvio necessario",
   "restart-required-message": "Riavvia l'applicazione per abilitare le modifiche al dominio dei cookie.",
   "restart": "Riavvia",
-  "cookie-count": "{{count}} Cookie"
+  "cookie-count": "{{count}} Cookie",
+  "add-new-mcp": "Aggiungi nuovo MCP",
+  "browse-mcps": "Sfoglia MCP",
+  "browser-settings": "Impostazioni browser"
 }
diff --git a/src/i18n/locales/it/setting.json b/src/i18n/locales/it/setting.json
index 68d6db58f..f713b160d 100644
--- a/src/i18n/locales/it/setting.json
+++ b/src/i18n/locales/it/setting.json
@@ -210,6 +210,32 @@
   "reset-success": "Reimpostazione riuscita!",
   "reset-failed": "Reimpostazione non riuscita!",
   "select-default-model": "Seleziona modello predefinito",
+
+  "browser-login": "Accesso browser",
+  "browser-login-description": "Apri Chrome per accedere ai tuoi account. I dati di accesso vengono salvati localmente in un profilo sicuro.",
+  "open-browser-login": "Apri browser per l'accesso",
+  "opening-browser": "Apertura browser...",
+  "browser-opened-successfully": "Browser aperto correttamente. Accedi ai tuoi account.",
+  "failed-to-open-browser": "Impossibile aprire il browser. Riprova.",
+  "restart-to-apply": "Riavvia per applicare",
+  "cookie-manager": "Gestione cookie",
+  "cookie-manager-description": "Gestisci i cookie salvati dalle sessioni del browser. Elimina i cookie per siti specifici o tutti insieme.",
+  "refresh": "Aggiorna",
+  "delete-all": "Elimina tutto",
+  "search-domains": "Cerca domini...",
+  "loading-cookies": "Caricamento cookie...",
+  "no-cookies-found": "Nessun cookie trovato",
+  "no-matching-domains": "Nessun dominio corrispondente",
+  "login-to-save-cookies": "Usa l'accesso browser sopra per salvare i cookie dei tuoi account.",
+  "cookies-count": "{{count}} cookie",
+  "last-access": "Ultimo accesso",
+  "cookies-deleted-successfully": "Cookie per {{domain}} eliminati correttamente",
+  "failed-to-load-cookies": "Impossibile caricare i cookie. Riprova.",
+  "failed-to-delete-cookies": "Impossibile eliminare i cookie. Riprova.",
+  "confirm-delete-all-cookies": "Eliminare tutti i cookie? Questa azione non può essere annullata.",
+  "all-cookies-deleted": "Tutti i cookie sono stati eliminati correttamente.",
+  "cookie-delete-warning": "Nota: l'eliminazione dei cookie disconnette dai siti associati. Potrebbe essere necessario riavviare il browser.",
+
   "network-proxy": "Proxy di rete",
   "network-proxy-description": "Configura un server proxy per le richieste di rete. Utile se devi accedere ad API esterne tramite un proxy.",
   "proxy-placeholder": "http://127.0.0.1:7890",
@@ -245,17 +271,11 @@
   "claude-sonnet-4-6-name": "Claude Sonnet 4.6",
   "claude-opus-4-6-name": "Claude Opus 4.6",
   "minimax-m2-5-name": "Minimax M2.5",
-  "network-proxy": "Proxy di rete",
-  "network-proxy-description": "Configura un server proxy per le richieste di rete. Utile se devi accedere ad API esterne tramite un proxy.",
-  "proxy-placeholder": "http://127.0.0.1:7890",
-  "proxy-saved-restart-required": "Configurazione proxy salvata. Riavvia l'app per applicare le modifiche.",
-  "proxy-save-failed": "Impossibile salvare la configurazione del proxy.",
-  "proxy-invalid-url": "URL proxy non valido. Deve iniziare con http://, https://, socks4:// o socks5://.",
-  "proxy-restart-hint": "Riavvio necessario per applicare le modifiche del proxy.",
 
   "preferred-ide": "IDE preferito",
   "preferred-ide-description": "Scegli quale applicazione utilizzare per aprire le cartelle dei progetti dell'agente.",
   "system-file-manager": "Gestione file di sistema",
+  "agents": "Agenti",
   "help-improve-eigent": "Aiuta a migliorare Eigent",
   "help-improve-eigent-description": "Consenti a Eigent di raccogliere log di errori anonimi e dati di utilizzo per migliorare il servizio. Questo è facoltativo e può essere modificato in qualsiasi momento."
 }
diff --git a/src/i18n/locales/it/triggers.json b/src/i18n/locales/it/triggers.json
index 16083035e..07f008a50 100644
--- a/src/i18n/locales/it/triggers.json
+++ b/src/i18n/locales/it/triggers.json
@@ -138,6 +138,8 @@
   "no-activity": "No activity yet",
   "activity-hint": "Activity will appear here",
   "execution-logs": "Execution Logs",
+  "fold-execution-logs": "Comprimi log di esecuzione",
+  "open-execution-logs": "Apri log di esecuzione",
   "delete-trigger": "Delete Trigger",
   "cancel": "Cancel",
   "deleting": "Deleting...",
@@ -190,6 +192,7 @@
   "got-it": "Got it",
   "add-trigger": "Add Trigger",
   "trigger-limit-reached": "Limite trigger raggiunto: 5 per progetto, 25 per utente",
+  "activation-limit-reached": "Limite di attivazione raggiunto: massimo 5 trigger attivi per progetto, 25 per utente",
   "never": "Never",
   "duplicate": "Duplicate",
   "no-task-prompt": "No task prompt",
diff --git a/src/i18n/locales/ja/agents.json b/src/i18n/locales/ja/agents.json
index eef61ac5a..cb3b2daa4 100644
--- a/src/i18n/locales/ja/agents.json
+++ b/src/i18n/locales/ja/agents.json
@@ -46,5 +46,12 @@
   "custom-skill": "カスタムスキル",
   "delete-skill": "スキルを削除",
   "delete-skill-confirmation": "\"{{name}}\" を削除してもよろしいですか？この操作は元に戻せません。",
-  "skill-deleted-success": "スキルが正常に削除されました！"
+  "skill-deleted-success": "スキルが正常に削除されました！",
+  "create-skill": "スキルを作成",
+  "upload-skill": "スキルをアップロード",
+  "browse-skills": "スキルを参照",
+  "create-skill-default-name": "新しいスキル",
+  "create-skill-default-description": "このスキルの役割を説明してください。",
+  "save-skill": "スキルを保存",
+  "compose-skill-hint": "SKILL.md を編集（名前と説明の YAML フロントマターが必須）してから保存してください。"
 }
diff --git a/src/i18n/locales/ja/chat.json b/src/i18n/locales/ja/chat.json
index 2cae0f472..8163eb87b 100644
--- a/src/i18n/locales/ja/chat.json
+++ b/src/i18n/locales/ja/chat.json
@@ -2,6 +2,12 @@
   "welcome-to-eigent": "Eigentへようこそ",
   "how-can-i-help-you": "本日はどのようなご用件でしょうか？",
   "ask-placeholder": "本日は何を達成したいですか？",
+  "rich-input-rotate-1": "市場調査、分析、レポートを自動化",
+  "rich-input-rotate-2": "スライド、SNS投稿、ブランドコンテンツを作成",
+  "rich-input-rotate-3": "ファイル、ドキュメント、デスクトップ作業を整理",
+  "follow-up-placeholder": "追加で質問する",
+  "select-agent": "エージェントを選択",
+  "clear-agent": "エージェントを解除",
   "select-file": "ファイルを選択",
   "all-files": "すべてのファイル",
   "token": "トークン",
@@ -28,6 +34,8 @@
   "task-running": "タスク実行中",
   "task-completed": "タスク完了",
   "agent-folder": "エージェントフォルダ",
+  "choose-agent-work-folder": "エージェントのフォルダを選ぶ",
+  "choose-agent-work-folder-placeholder": "コンピューター上のフォルダを選ぶ（近日対応）",
   "open": "開く",
   "close": "閉じる",
   "search": "検索",
@@ -58,14 +66,27 @@
   "remove-file": "ファイルを削除",
   "drop-files-to-attach": "ファイルをドロップして添付",
   "expand-input": "入力を展開 (⌘P)",
+  "collapse-input": "入力を折りたたむ (⌘P)",
   "queued-tasks": "キューに入れたタスク",
   "remove-queued-message": "キューに入れたメッセージを削除",
   "no-agents-added": "エージェントが追加されていません",
-  "open-in-ide": "IDEで開く",
-  "open-in-vscode": "VS Codeで開く",
-  "open-in-cursor": "Cursorで開く",
-  "open-in-file-manager": "ファイルマネージャーで開く",
+  "open-in-ide": "開く",
+  "open-in-vscode": "VS Code",
+  "open-in-cursor": "Cursor",
+  "open-in-file-manager": "ファイルマネージャー",
   "failed-to-open-folder": "フォルダを開けませんでした",
   "task-completed-card-title": "タスク完了",
-  "task-completed-card-subtitle": "トリガーでタスクを自動化"
+  "task-completed-card-subtitle": "トリガーでタスクを自動化",
+  "single-agent-working": "{{agent}}が処理中です",
+  "agent-outcome-expand": "展開",
+  "agent-outcome-collapse": "折りたたむ",
+  "input-attach-add-files-or-photos": "ファイルまたは写真を追加",
+  "input-attach-skills": "スキル",
+  "input-attach-upload-new-skill": "新しいスキルをアップロード",
+  "input-attach-manage-skills": "スキルを管理",
+  "input-attach-add-mcp": "MCP を追加",
+  "input-attach-manage-connectors": "コネクタを管理",
+  "input-attach-open-browser": "ブラウザを開く",
+  "input-attach-manage-browsers": "ブラウザを管理",
+  "input-attach-menu-trigger": "ファイル・写真の追加、またはメニューからスキル・コネクタ・ブラウザを開く"
 }
diff --git a/src/i18n/locales/ja/layout.json b/src/i18n/locales/ja/layout.json
index cdbdcddb3..8b6d52127 100644
--- a/src/i18n/locales/ja/layout.json
+++ b/src/i18n/locales/ja/layout.json
@@ -29,6 +29,7 @@
   "continue-with-google-login": "Googleでログイン",
   "continue-with-github-login": "Githubでログイン",
   "installation-failed": "インストールに失敗しました",
+  "backend-startup-failed": "バックエンドの起動に失敗しました",
   "projects": "プロジェクト",
   "agents": "エージェント",
   "mcp-tools": "MCP & ツール",
@@ -46,8 +47,30 @@
   "browser": "ブラウザ",
   "settings": "設定",
   "general": "一般",
-  "workers": "ワーカー",
+  "aiWorkforce": "AIワークフォース",
+  "expand-workforce": "ワークフォース表示領域を広げる",
+  "minimize-workforce": "ワークフォース表示領域を狭める",
+  "show-workforce-panel": "ワークフォースパネルを表示",
+  "chat-panel-left": "チャットを左側に表示",
+  "chat-panel-right": "チャットを右側に表示",
   "triggers": "トリガー",
+  "triggers-disconnected": "切断",
+  "triggers-connecting": "接続中…",
+  "triggers-reconnect-hint": "トリガーリスナーに再接続",
+  "triggers-listener-reconnect": "再接続",
+  "folder": "フォルダ",
+  "sidebar-model-manage-hint": "エージェント → モデルで管理",
+  "sidebar-custom-platform-unknown": "—",
+  "expand-sidebar": "サイドバーを展開",
+  "collapse-sidebar": "サイドバーを折りたたむ",
+  "help-and-support": "ヘルプとサポート",
+  "contact-support": "サポートに連絡",
+  "contact-support-description": "チームにお問い合わせください",
+  "contact-support-body": "サポート用メールをコピーして、いつでもご連絡ください。",
+  "copy-email": "メールをコピー",
+  "email-copied": "メールをクリップボードにコピーしました",
+  "copy-failed": "メールをコピーできませんでした",
+  "download-logs": "ログをダウンロード",
   "new-project": "新規プロジェクト",
   "welcome": "ようこそ",
   "delete-task": "タスクを削除",
@@ -59,6 +82,9 @@
   "save": "保存",
   "not-found": "見つかりません",
   "tasks": "タスク",
+  "chat-history-title": "チャット履歴",
+  "chat-history-tooltip": "チャット履歴",
+  "task-list-add-hint": "ワークスペースを開きチャット入力にフォーカス",
   "ongoing": "進行中",
   "token": "# トークン",
   "configuring": "設定中...",
@@ -101,6 +127,7 @@
   "are-you-sure-you-want-to-delete": "このタスクを削除してもよろしいですか？この操作は元に戻せません。",
   "share": "共有",
   "home": "ホーム",
+  "dashboard": "ダッシュボード",
   "developer-agent": "開発者エージェント",
   "browser-agent": "ブラウザエージェント",
   "document-agent": "ドキュメントエージェント",
@@ -116,6 +143,7 @@
   "project-ended-successfully": "プロジェクトが正常に終了しました",
   "failed-to-end-project": "プロジェクトの終了に失敗しました",
   "message-queued": "メッセージがキューに入りました。現在のタスクが終了したときに処理されます。",
+  "task-stopped-successfully": "タスクを正常に停止しました",
   "task-skipped-successfully": "タスクが正常にスキップされました",
   "failed-to-skip-task": "タスクのスキップに失敗しました",
   "no-reply-received-task-continue": "返信が受信されませんでした、タスクは続行されます",
@@ -154,6 +182,7 @@
   "no-cookies-saved-yet": "まだCookieが保存されていません",
   "no-cookies-saved-yet-description": "上記の「ブラウザを開く」をクリックして、ウェブサイトにログインし、将来のタスクのためにCookieを保存します。",
   "back": "戻る",
+  "forward": "進む",
   "total-tokens": "合計トークン",
   "total-tasks": "合計タスク",
   "edit": "編集",
@@ -243,5 +272,8 @@
   "restart-required": "再起動が必要です",
   "restart-required-message": "Cookie ドメインの変更を有効にするためにアプリケーションを再起動してください。",
   "restart": "再起動",
-  "cookie-count": "{{count}} 個の Cookie"
+  "cookie-count": "{{count}} 個の Cookie",
+  "add-new-mcp": "新しい MCP を追加",
+  "browse-mcps": "MCP を参照",
+  "browser-settings": "ブラウザ設定"
 }
diff --git a/src/i18n/locales/ja/setting.json b/src/i18n/locales/ja/setting.json
index a9ecb59d2..d9dd5861f 100644
--- a/src/i18n/locales/ja/setting.json
+++ b/src/i18n/locales/ja/setting.json
@@ -211,6 +211,32 @@
   "reset-success": "リセットに成功しました！",
   "reset-failed": "リセットに失敗しました！",
   "select-default-model": "デフォルトモデルを選択",
+
+  "browser-login": "ブラウザでログイン",
+  "browser-login-description": "Chrome でアカウントにログインします。ログインデータは安全なプロファイルにローカル保存されます。",
+  "open-browser-login": "ログイン用にブラウザを開く",
+  "opening-browser": "ブラウザを開いています...",
+  "browser-opened-successfully": "ブラウザを開きました。アカウントにログインしてください。",
+  "failed-to-open-browser": "ブラウザを開けませんでした。もう一度お試しください。",
+  "restart-to-apply": "再起動して適用",
+  "cookie-manager": "Cookie マネージャー",
+  "cookie-manager-description": "ブラウザセッションで保存された Cookie を管理します。特定のサイトまたはすべての Cookie を削除できます。",
+  "refresh": "更新",
+  "delete-all": "すべて削除",
+  "search-domains": "ドメインを検索...",
+  "loading-cookies": "Cookie を読み込み中...",
+  "no-cookies-found": "Cookie が見つかりません",
+  "no-matching-domains": "一致するドメインがありません",
+  "login-to-save-cookies": "上のブラウザログインでアカウントの Cookie を保存してください。",
+  "cookies-count": "{{count}} 件の Cookie",
+  "last-access": "最終アクセス",
+  "cookies-deleted-successfully": "{{domain}} の Cookie を削除しました",
+  "failed-to-load-cookies": "Cookie を読み込めませんでした。もう一度お試しください。",
+  "failed-to-delete-cookies": "Cookie を削除できませんでした。もう一度お試しください。",
+  "confirm-delete-all-cookies": "すべての Cookie を削除しますか？この操作は元に戻せません。",
+  "all-cookies-deleted": "すべての Cookie を削除しました。",
+  "cookie-delete-warning": "注意: Cookie を削除すると関連サイトからログアウトします。変更を反映するにはブラウザの再起動が必要な場合があります。",
+
   "network-proxy": "ネットワークプロキシ",
   "network-proxy-description": "ネットワークリクエスト用のプロキシサーバーを設定します。プロキシ経由で外部APIにアクセスする必要がある場合に便利です。",
   "proxy-placeholder": "http://127.0.0.1:7890",
@@ -246,17 +272,11 @@
   "claude-sonnet-4-6-name": "Claude Sonnet 4.6",
   "claude-opus-4-6-name": "Claude Opus 4.6",
   "minimax-m2-5-name": "Minimax M2.5",
-  "network-proxy": "ネットワークプロキシ",
-  "network-proxy-description": "ネットワークリクエスト用のプロキシサーバーを設定します。プロキシ経由で外部APIにアクセスする必要がある場合に便利です。",
-  "proxy-placeholder": "http://127.0.0.1:7890",
-  "proxy-saved-restart-required": "プロキシ設定が保存されました。変更を適用するにはアプリを再起動してください。",
-  "proxy-save-failed": "プロキシ設定の保存に失敗しました。",
-  "proxy-invalid-url": "無効なプロキシURLです。http://、https://、socks4://、またはsocks5://で始まる必要があります。",
-  "proxy-restart-hint": "プロキシの変更を適用するには再起動が必要です。",
 
   "preferred-ide": "優先IDE",
   "preferred-ide-description": "エージェントプロジェクトフォルダを開くときに使用するアプリケーションを選択します。",
   "system-file-manager": "システムファイルマネージャー",
+  "agents": "エージェント",
   "help-improve-eigent": "Eigentの改善に協力する",
   "help-improve-eigent-description": "サービス向上のため、Eigentが匿名のエラーログと使用状況データを収集することを許可します。これは任意であり、いつでも変更できます。"
 }
diff --git a/src/i18n/locales/ja/triggers.json b/src/i18n/locales/ja/triggers.json
index 3bc437c20..7402c6f1d 100644
--- a/src/i18n/locales/ja/triggers.json
+++ b/src/i18n/locales/ja/triggers.json
@@ -138,6 +138,8 @@
   "no-activity": "アクティビティはまだありません",
   "activity-hint": "アクティビティがここに表示されます",
   "execution-logs": "実行ログ",
+  "fold-execution-logs": "実行ログを折りたたむ",
+  "open-execution-logs": "実行ログを開く",
   "delete-trigger": "トリガーを削除",
   "cancel": "キャンセル",
   "deleting": "削除中...",
@@ -190,6 +192,7 @@
   "got-it": "了解",
   "add-trigger": "トリガーを追加",
   "trigger-limit-reached": "トリガー制限に達しました：プロジェクトあたり5個、ユーザーあたり25個",
+  "activation-limit-reached": "有効化上限に達しました：プロジェクトあたりアクティブなトリガーは最大 5 件、ユーザーあたり 25 件までです",
   "never": "なし",
   "duplicate": "複製",
   "no-task-prompt": "タスクプロンプトなし",
diff --git a/src/i18n/locales/ko/agents.json b/src/i18n/locales/ko/agents.json
index 5649fb6d1..cf59420ee 100644
--- a/src/i18n/locales/ko/agents.json
+++ b/src/i18n/locales/ko/agents.json
@@ -46,5 +46,12 @@
   "custom-skill": "사용자 정의 스킬",
   "delete-skill": "스킬 삭제",
   "delete-skill-confirmation": "\"{{name}}\"을(를) 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.",
-  "skill-deleted-success": "스킬이 성공적으로 삭제되었습니다!"
+  "skill-deleted-success": "스킬이 성공적으로 삭제되었습니다!",
+  "create-skill": "스킬 만들기",
+  "upload-skill": "스킬 업로드",
+  "browse-skills": "스킬 찾아보기",
+  "create-skill-default-name": "새 스킬",
+  "create-skill-default-description": "이 스킬이 하는 일을 설명하세요.",
+  "save-skill": "스킬 저장",
+  "compose-skill-hint": "SKILL.md를 편집(YAML 프론트매터에 이름과 설명 필요)한 뒤 저장하세요."
 }
diff --git a/src/i18n/locales/ko/chat.json b/src/i18n/locales/ko/chat.json
index 72fe22d26..3fa11e33a 100644
--- a/src/i18n/locales/ko/chat.json
+++ b/src/i18n/locales/ko/chat.json
@@ -2,6 +2,12 @@
   "welcome-to-eigent": "Eigent에 오신 것을 환영합니다",
   "how-can-i-help-you": "무엇을 도와드릴까요?",
   "ask-placeholder": "오늘 무엇을 달성하고 싶으신가요?",
+  "rich-input-rotate-1": "시장 조사, 분석, 보고서 자동화",
+  "rich-input-rotate-2": "슬라이드, 소셜 게시물, 브랜드 콘텐츠 만들기",
+  "rich-input-rotate-3": "파일, 문서, 바탕화면 작업 정리",
+  "follow-up-placeholder": "추가 질문하기",
+  "select-agent": "에이전트 선택",
+  "clear-agent": "에이전트 해제",
   "select-file": "파일 선택",
   "all-files": "모든 파일",
   "token": "토큰",
@@ -28,6 +34,8 @@
   "task-running": "작업 실행 중",
   "task-completed": "작업 완료",
   "agent-folder": "에이전트 폴더",
+  "choose-agent-work-folder": "에이전트용 폴더 선택",
+  "choose-agent-work-folder-placeholder": "컴퓨터에서 폴더 선택(곧 제공)",
   "open": "열기",
   "close": "닫기",
   "search": "검색",
@@ -58,12 +66,27 @@
   "remove-file": "파일 제거",
   "drop-files-to-attach": "첨부할 파일을 여기에 놓으세요",
   "expand-input": "입력 확장 (⌘P)",
+  "collapse-input": "입력 접기 (⌘P)",
   "queued-tasks": "대기 중인 작업",
   "remove-queued-message": "대기 중인 메시지 제거",
   "no-agents-added": "에이전트가 추가되지 않았습니다",
-  "open-in-ide": "IDE에서 열기",
-  "open-in-vscode": "VS Code에서 열기",
-  "open-in-cursor": "Cursor에서 열기",
-  "open-in-file-manager": "파일 관리자에서 열기",
-  "failed-to-open-folder": "폴더를 열 수 없습니다"
+  "open-in-ide": "열기",
+  "open-in-vscode": "VS Code",
+  "open-in-cursor": "Cursor",
+  "open-in-file-manager": "파일 관리자",
+  "failed-to-open-folder": "폴더를 열 수 없습니다",
+  "task-completed-card-title": "작업 완료",
+  "task-completed-card-subtitle": "트리거로 작업을 자동화하세요",
+  "single-agent-working": "{{agent}}가 열심히 작업 중입니다",
+  "agent-outcome-expand": "펼치기",
+  "agent-outcome-collapse": "접기",
+  "input-attach-add-files-or-photos": "파일 또는 사진 추가",
+  "input-attach-skills": "스킬",
+  "input-attach-upload-new-skill": "새 스킬 업로드",
+  "input-attach-manage-skills": "스킬 관리",
+  "input-attach-add-mcp": "MCP 추가",
+  "input-attach-manage-connectors": "커넥터 관리",
+  "input-attach-open-browser": "브라우저 열기",
+  "input-attach-manage-browsers": "브라우저 관리",
+  "input-attach-menu-trigger": "파일·사진 추가 또는 메뉴에서 스킬, 커넥터, 브라우저 열기"
 }
diff --git a/src/i18n/locales/ko/layout.json b/src/i18n/locales/ko/layout.json
index 8d63e507b..26d2d4d11 100644
--- a/src/i18n/locales/ko/layout.json
+++ b/src/i18n/locales/ko/layout.json
@@ -29,6 +29,7 @@
   "continue-with-google-login": "Google로 로그인",
   "continue-with-github-login": "Github로 로그인",
   "installation-failed": "설치 실패",
+  "backend-startup-failed": "백엔드 시작 실패",
   "projects": "프로젝트",
   "agents": "에이전트",
   "mcp-tools": "MCP 및 도구",
@@ -46,8 +47,30 @@
   "browser": "브라우저",
   "settings": "설정",
   "general": "일반",
-  "workers": "작업자",
+  "aiWorkforce": "AI 워크포스",
+  "expand-workforce": "워크포스 영역 넓히기",
+  "minimize-workforce": "워크포스 영역 줄이기",
+  "show-workforce-panel": "워크포스 패널 표시",
+  "chat-panel-left": "채팅을 왼쪽에 표시",
+  "chat-panel-right": "채팅을 오른쪽에 표시",
   "triggers": "트리거",
+  "triggers-disconnected": "연결 끊김",
+  "triggers-connecting": "연결 중…",
+  "triggers-reconnect-hint": "트리거 리스너에 다시 연결",
+  "triggers-listener-reconnect": "다시 연결",
+  "folder": "폴더",
+  "sidebar-model-manage-hint": "에이전트 → 모델에서 관리",
+  "sidebar-custom-platform-unknown": "—",
+  "expand-sidebar": "사이드바 펼치기",
+  "collapse-sidebar": "사이드바 접기",
+  "help-and-support": "도움말 및 지원",
+  "contact-support": "고객 지원 문의",
+  "contact-support-description": "팀에 문의하세요",
+  "contact-support-body": "지원 이메일을 복사하여 언제든지 연락하세요.",
+  "copy-email": "이메일 복사",
+  "email-copied": "이메일이 클립보드에 복사되었습니다",
+  "copy-failed": "이메일을 복사할 수 없습니다",
+  "download-logs": "로그 다운로드",
   "new-project": "새 프로젝트",
   "welcome": "환영",
   "delete-task": "작업 삭제",
@@ -59,6 +82,9 @@
   "save": "저장",
   "not-found": "찾을 수 없음",
   "tasks": "작업",
+  "chat-history-title": "채팅 기록",
+  "chat-history-tooltip": "채팅 기록",
+  "task-list-add-hint": "워크스페이스를 열고 채팅 입력에 포커스",
   "ongoing": "진행 중",
   "token": "# 토큰",
   "configuring": "구성 중...",
@@ -101,6 +127,7 @@
   "are-you-sure-you-want-to-delete": "이 작업을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
   "share": "공유",
   "home": "홈",
+  "dashboard": "대시보드",
   "developer-agent": "개발자 에이전트",
   "browser-agent": "브라우저 에이전트",
   "document-agent": "문서 에이전트",
@@ -116,6 +143,7 @@
   "project-ended-successfully": "프로젝트가 성공적으로 종료되었습니다",
   "failed-to-end-project": "프로젝트 종료에 실패했습니다",
   "message-queued": "메시지가 대기열에 추가되었습니다. 현재 작업이 완료되면 처리됩니다.",
+  "task-stopped-successfully": "작업이 성공적으로 중지되었습니다",
   "task-skipped-successfully": "작업이 성공적으로 건너뛰어졌습니다",
   "failed-to-skip-task": "작업 건너뛰기에 실패했습니다",
   "no-reply-received-task-continue": "응답이 없으므로 작업을 계속합니다",
@@ -154,6 +182,7 @@
   "no-cookies-saved-yet": "아직 쿠키가 저장되지 않았습니다",
   "no-cookies-saved-yet-description": "위의 \"브라우저 열기\"를 클릭하여 웹사이트에 로그인하고 향후 작업을 위해 쿠키를 저장하세요.",
   "back": "뒤로",
+  "forward": "앞으로",
   "total-tokens": "총 토큰",
   "total-tasks": "총 작업",
   "edit": "편집",
@@ -243,5 +272,8 @@
   "restart-required": "재시작 필요",
   "restart-required-message": "쿠키 도메인 변경을 활성화하려면 애플리케이션을 재시작하세요.",
   "restart": "재시작",
-  "cookie-count": "{{count}}개 쿠키"
+  "cookie-count": "{{count}}개 쿠키",
+  "add-new-mcp": "새 MCP 추가",
+  "browse-mcps": "MCP 찾아보기",
+  "browser-settings": "브라우저 설정"
 }
diff --git a/src/i18n/locales/ko/setting.json b/src/i18n/locales/ko/setting.json
index 7566dca35..a0f1b2d01 100644
--- a/src/i18n/locales/ko/setting.json
+++ b/src/i18n/locales/ko/setting.json
@@ -211,6 +211,32 @@
   "reset-success": "초기화 완료!",
   "reset-failed": "초기화 실패!",
   "select-default-model": "기본 모델 선택",
+
+  "browser-login": "브라우저 로그인",
+  "browser-login-description": "Chrome을 열어 계정에 로그인하세요. 로그인 정보는 안전한 프로필에 로컬로 저장됩니다.",
+  "open-browser-login": "로그인용 브라우저 열기",
+  "opening-browser": "브라우저 여는 중...",
+  "browser-opened-successfully": "브라우저가 열렸습니다. 계정에 로그인하세요.",
+  "failed-to-open-browser": "브라우저를 열 수 없습니다. 다시 시도하세요.",
+  "restart-to-apply": "적용하려면 다시 시작",
+  "cookie-manager": "쿠키 관리자",
+  "cookie-manager-description": "브라우저 세션에서 저장된 쿠키를 관리합니다. 특정 사이트 또는 전체 쿠키를 삭제할 수 있습니다.",
+  "refresh": "새로고침",
+  "delete-all": "모두 삭제",
+  "search-domains": "도메인 검색...",
+  "loading-cookies": "쿠키 로드 중...",
+  "no-cookies-found": "쿠키가 없습니다",
+  "no-matching-domains": "일치하는 도메인이 없습니다",
+  "login-to-save-cookies": "위의 브라우저 로그인으로 계정 쿠키를 저장하세요.",
+  "cookies-count": "쿠키 {{count}}개",
+  "last-access": "마지막 액세스",
+  "cookies-deleted-successfully": "{{domain}} 쿠키를 삭제했습니다",
+  "failed-to-load-cookies": "쿠키를 불러올 수 없습니다. 다시 시도하세요.",
+  "failed-to-delete-cookies": "쿠키를 삭제할 수 없습니다. 다시 시도하세요.",
+  "confirm-delete-all-cookies": "모든 쿠키를 삭제할까요? 이 작업은 취소할 수 없습니다.",
+  "all-cookies-deleted": "모든 쿠키가 삭제되었습니다.",
+  "cookie-delete-warning": "참고: 쿠키를 삭제하면 연결된 사이트에서 로그아웃됩니다. 변경 사항을 보려면 브라우저를 다시 시작해야 할 수 있습니다.",
+
   "network-proxy": "네트워크 프록시",
   "network-proxy-description": "네트워크 요청을 위한 프록시 서버를 구성합니다. 프록시를 통해 외부 API에 접근해야 하는 경우 유용합니다.",
   "proxy-placeholder": "http://127.0.0.1:7890",
@@ -246,17 +272,11 @@
   "claude-sonnet-4-6-name": "Claude Sonnet 4.6",
   "claude-opus-4-6-name": "Claude Opus 4.6",
   "minimax-m2-5-name": "Minimax M2.5",
-  "network-proxy": "네트워크 프록시",
-  "network-proxy-description": "네트워크 요청을 위한 프록시 서버를 구성합니다. 프록시를 통해 외부 API에 접근해야 하는 경우 유용합니다.",
-  "proxy-placeholder": "http://127.0.0.1:7890",
-  "proxy-saved-restart-required": "프록시 설정이 저장되었습니다. 변경 사항을 적용하려면 앱을 다시 시작하세요.",
-  "proxy-save-failed": "프록시 설정 저장에 실패했습니다.",
-  "proxy-invalid-url": "잘못된 프록시 URL입니다. http://, https://, socks4://, 또는 socks5://로 시작해야 합니다.",
-  "proxy-restart-hint": "프록시 변경 사항을 적용하려면 다시 시작해야 합니다.",
 
   "preferred-ide": "선호 IDE",
   "preferred-ide-description": "에이전트 프로젝트 폴더를 열 때 사용할 애플리케이션을 선택합니다.",
   "system-file-manager": "시스템 파일 관리자",
+  "agents": "에이전트",
   "help-improve-eigent": "Eigent 개선에 도움주기",
   "help-improve-eigent-description": "서비스 개선을 위해 Eigent가 익명의 오류 로그와 사용 데이터를 수집하도록 허용합니다. 이는 선택 사항이며 언제든지 변경할 수 있습니다."
 }
diff --git a/src/i18n/locales/ko/triggers.json b/src/i18n/locales/ko/triggers.json
index eb1c67ae6..d2467633b 100644
--- a/src/i18n/locales/ko/triggers.json
+++ b/src/i18n/locales/ko/triggers.json
@@ -138,6 +138,8 @@
   "no-activity": "아직 활동이 없습니다",
   "activity-hint": "활동이 여기에 표시됩니다",
   "execution-logs": "실행 로그",
+  "fold-execution-logs": "실행 로그 접기",
+  "open-execution-logs": "실행 로그 펼치기",
   "delete-trigger": "트리거 삭제",
   "cancel": "취소",
   "deleting": "삭제 중...",
@@ -190,6 +192,7 @@
   "got-it": "확인",
   "add-trigger": "트리거 추가",
   "trigger-limit-reached": "트리거 한도 도달: 프로젝트당 5개, 사용자당 25개",
+  "activation-limit-reached": "활성화 한도에 도달했습니다: 프로젝트당 활성 트리거 최대 5개, 사용자당 25개",
   "never": "안 함",
   "duplicate": "복제",
   "no-task-prompt": "작업 프롬프트 없음",
diff --git a/src/i18n/locales/ru/agents.json b/src/i18n/locales/ru/agents.json
index ef7c027f3..b6e246396 100644
--- a/src/i18n/locales/ru/agents.json
+++ b/src/i18n/locales/ru/agents.json
@@ -46,5 +46,12 @@
   "custom-skill": "Пользовательский навык",
   "delete-skill": "Удалить навык",
   "delete-skill-confirmation": "Вы уверены, что хотите удалить \"{{name}}\"? Это действие нельзя отменить.",
-  "skill-deleted-success": "Навык успешно удалён!"
+  "skill-deleted-success": "Навык успешно удалён!",
+  "create-skill": "Создать навык",
+  "upload-skill": "Загрузить навык",
+  "browse-skills": "Обзор навыков",
+  "create-skill-default-name": "Новый навык",
+  "create-skill-default-description": "Опишите, что делает этот навык.",
+  "save-skill": "Сохранить навык",
+  "compose-skill-hint": "Отредактируйте SKILL.md (нужен YAML frontmatter с именем и описанием), затем сохраните."
 }
diff --git a/src/i18n/locales/ru/chat.json b/src/i18n/locales/ru/chat.json
index fa58913b6..c356e4a18 100644
--- a/src/i18n/locales/ru/chat.json
+++ b/src/i18n/locales/ru/chat.json
@@ -2,6 +2,12 @@
   "welcome-to-eigent": "Добро пожаловать в Eigent",
   "how-can-i-help-you": "Чем я могу вам помочь сегодня?",
   "ask-placeholder": "Чего вы хотите достичь сегодня?",
+  "rich-input-rotate-1": "Автоматизируйте маркетинговые исследования, анализ и отчёты",
+  "rich-input-rotate-2": "Создавайте слайды, посты в соцсетях и контент бренда",
+  "rich-input-rotate-3": "Организуйте файлы, документы и задачи на рабочем столе",
+  "follow-up-placeholder": "Уточняющий вопрос",
+  "select-agent": "Выбрать агента",
+  "clear-agent": "Сбросить агента",
   "select-file": "Выбрать файл",
   "all-files": "Все файлы",
   "token": "Токен",
@@ -28,6 +34,8 @@
   "task-running": "Задача выполняется",
   "task-completed": "Задача выполнена",
   "agent-folder": "Папка агента",
+  "choose-agent-work-folder": "Выберите папку агента",
+  "choose-agent-work-folder-placeholder": "Выберите папку на компьютере (скоро)",
   "open": "Открыть",
   "close": "Закрыть",
   "search": "Поиск",
@@ -58,14 +66,27 @@
   "remove-file": "Удалить файл",
   "drop-files-to-attach": "Перетащите файлы для прикрепления",
   "expand-input": "Развернуть ввод (⌘P)",
+  "collapse-input": "Свернуть ввод (⌘P)",
   "queued-tasks": "Задачи в очереди",
   "remove-queued-message": "Удалить сообщение из очереди",
   "no-agents-added": "Агенты не добавлены",
-  "open-in-ide": "Открыть в IDE",
-  "open-in-vscode": "Открыть в VS Code",
-  "open-in-cursor": "Открыть в Cursor",
-  "open-in-file-manager": "Открыть в файловом менеджере",
+  "open-in-ide": "Открыть в",
+  "open-in-vscode": "VS Code",
+  "open-in-cursor": "Cursor",
+  "open-in-file-manager": "Проводник",
   "failed-to-open-folder": "Не удалось открыть папку",
   "task-completed-card-title": "Задача выполнена",
-  "task-completed-card-subtitle": "Автоматизируйте вашу задачу с помощью триггера"
+  "task-completed-card-subtitle": "Автоматизируйте вашу задачу с помощью триггера",
+  "single-agent-working": "{{agent}} усердно работает",
+  "agent-outcome-expand": "Развернуть",
+  "agent-outcome-collapse": "Свернуть",
+  "input-attach-add-files-or-photos": "Добавить файлы или фото",
+  "input-attach-skills": "Навыки",
+  "input-attach-upload-new-skill": "Загрузить новый навык",
+  "input-attach-manage-skills": "Управлять навыками",
+  "input-attach-add-mcp": "Добавить MCP",
+  "input-attach-manage-connectors": "Управлять коннекторами",
+  "input-attach-open-browser": "Открыть браузер",
+  "input-attach-manage-browsers": "Управлять браузерами",
+  "input-attach-menu-trigger": "Добавить файлы или фото или открыть Навыки, Коннекторы или Браузер из меню"
 }
diff --git a/src/i18n/locales/ru/layout.json b/src/i18n/locales/ru/layout.json
index 07079bd04..1acb8a9bb 100644
--- a/src/i18n/locales/ru/layout.json
+++ b/src/i18n/locales/ru/layout.json
@@ -29,6 +29,7 @@
   "continue-with-google-login": "Продолжить с Google",
   "continue-with-github-login": "Продолжить с Github",
   "installation-failed": "Установка не удалась",
+  "backend-startup-failed": "Ошибка запуска серверной части",
   "projects": "Проекты",
   "agents": "Агенты",
   "mcp-tools": "MCP и Инструменты",
@@ -46,8 +47,30 @@
   "browser": "Браузер",
   "settings": "Настройки",
   "general": "Общие",
-  "workers": "Работники",
+  "aiWorkforce": "Рабочая сила ИИ",
+  "expand-workforce": "Расширить рабочую область",
+  "minimize-workforce": "Сузить рабочую область",
+  "show-workforce-panel": "Показать панель Workforce",
+  "chat-panel-left": "Показать чат слева",
+  "chat-panel-right": "Показать чат справа",
   "triggers": "Триггеры",
+  "triggers-disconnected": "Отключено",
+  "triggers-connecting": "Подключение…",
+  "triggers-reconnect-hint": "Повторно подключиться к слушателю триггеров",
+  "triggers-listener-reconnect": "Повторить подключение",
+  "folder": "Папка",
+  "sidebar-model-manage-hint": "Управление в разделе Агенты → Модели",
+  "sidebar-custom-platform-unknown": "—",
+  "expand-sidebar": "Развернуть боковую панель",
+  "collapse-sidebar": "Свернуть боковую панель",
+  "help-and-support": "Помощь и поддержка",
+  "contact-support": "Связаться с поддержкой",
+  "contact-support-description": "Свяжитесь с нашей командой",
+  "contact-support-body": "Скопируйте наш адрес поддержки и напишите нам в любое время.",
+  "copy-email": "Копировать email",
+  "email-copied": "Email скопирован в буфер обмена",
+  "copy-failed": "Не удалось скопировать email",
+  "download-logs": "Скачать журналы",
   "new-project": "Новый проект",
   "welcome": "Добро пожаловать",
   "delete-task": "Удалить задачу",
@@ -59,6 +82,9 @@
   "save": "Сохранить",
   "not-found": "Не найдено",
   "tasks": "ЗАДАЧИ",
+  "chat-history-title": "История чата",
+  "chat-history-tooltip": "История чата",
+  "task-list-add-hint": "Открыть рабочее пространство и фокус на чате",
   "ongoing": "В процессе",
   "token": "# Токен",
   "configuring": "Настройка...",
@@ -101,6 +127,7 @@
   "are-you-sure-you-want-to-delete": "Вы уверены, что хотите удалить эту задачу? Это действие нельзя отменить.",
   "share": "Поделиться",
   "home": "Главная",
+  "dashboard": "Панель",
   "developer-agent": "Агент разработчика",
   "browser-agent": "Агент браузера",
   "document-agent": "Агент документов",
@@ -116,6 +143,7 @@
   "project-ended-successfully": "Проект успешно завершен",
   "failed-to-end-project": "Не удалось завершить проект",
   "message-queued": "Сообщение поставлено в очередь. Оно будет обработано, когда текущая задача завершится.",
+  "task-stopped-successfully": "Задача успешно остановлена",
   "task-skipped-successfully": "Задача успешно пропущена",
   "failed-to-skip-task": "Не удалось пропустить задачу",
   "no-reply-received-task-continue": "Ответ не получен, задача продолжается",
@@ -154,6 +182,7 @@
   "no-cookies-saved-yet": "Файлы cookie ещё не сохранены",
   "no-cookies-saved-yet-description": "Нажмите \"Открыть браузер\" выше, чтобы войти на веб-сайты и сохранить их файлы cookie для будущих задач.",
   "back": "Назад",
+  "forward": "Вперёд",
   "total-tokens": "Всего токенов",
   "total-tasks": "Всего задач",
   "edit": "Редактировать",
@@ -243,5 +272,8 @@
   "restart-required": "Требуется перезапуск",
   "restart-required-message": "Перезапустите приложение, чтобы активировать изменения домена cookie-файлов.",
   "restart": "Перезапустить",
-  "cookie-count": "{{count}} Cookie"
+  "cookie-count": "{{count}} Cookie",
+  "add-new-mcp": "Добавить новый MCP",
+  "browse-mcps": "Обзор MCP",
+  "browser-settings": "Настройки браузера"
 }
diff --git a/src/i18n/locales/ru/setting.json b/src/i18n/locales/ru/setting.json
index 84381dc2e..a223355c6 100644
--- a/src/i18n/locales/ru/setting.json
+++ b/src/i18n/locales/ru/setting.json
@@ -210,6 +210,32 @@
   "reset-success": "Сброс выполнен успешно!",
   "reset-failed": "Сбой сброса!",
   "select-default-model": "Выбрать модель по умолчанию",
+
+  "browser-login": "Вход через браузер",
+  "browser-login-description": "Откройте Chrome, чтобы войти в аккаунты. Данные входа сохраняются локально в защищённом профиле.",
+  "open-browser-login": "Открыть браузер для входа",
+  "opening-browser": "Открытие браузера...",
+  "browser-opened-successfully": "Браузер открыт. Войдите в свои аккаунты.",
+  "failed-to-open-browser": "Не удалось открыть браузер. Попробуйте снова.",
+  "restart-to-apply": "Перезапустите для применения",
+  "cookie-manager": "Диспетчер cookie",
+  "cookie-manager-description": "Управляйте cookie из сеансов браузера. Удаляйте cookie для отдельных сайтов или все сразу.",
+  "refresh": "Обновить",
+  "delete-all": "Удалить все",
+  "search-domains": "Поиск доменов...",
+  "loading-cookies": "Загрузка cookie...",
+  "no-cookies-found": "Cookie не найдены",
+  "no-matching-domains": "Нет подходящих доменов",
+  "login-to-save-cookies": "Используйте вход через браузер выше, чтобы сохранить cookie из аккаунтов.",
+  "cookies-count": "{{count}} cookie",
+  "last-access": "Последний доступ",
+  "cookies-deleted-successfully": "Cookie для {{domain}} успешно удалены",
+  "failed-to-load-cookies": "Не удалось загрузить cookie. Попробуйте снова.",
+  "failed-to-delete-cookies": "Не удалось удалить cookie. Попробуйте снова.",
+  "confirm-delete-all-cookies": "Удалить все cookie? Это действие нельзя отменить.",
+  "all-cookies-deleted": "Все cookie успешно удалены.",
+  "cookie-delete-warning": "Примечание: удаление cookie выйдет из связанных сайтов. Может потребоваться перезапуск браузера.",
+
   "network-proxy": "Сетевой прокси",
   "network-proxy-description": "Настройте прокси-сервер для сетевых запросов. Это полезно, если вам нужен доступ к внешним API через прокси.",
   "proxy-placeholder": "http://127.0.0.1:7890",
@@ -245,17 +271,11 @@
   "claude-sonnet-4-6-name": "Claude Sonnet 4.6",
   "claude-opus-4-6-name": "Claude Opus 4.6",
   "minimax-m2-5-name": "Minimax M2.5",
-  "network-proxy": "Сетевой прокси",
-  "network-proxy-description": "Настройте прокси-сервер для сетевых запросов. Это полезно, если вам нужен доступ к внешним API через прокси.",
-  "proxy-placeholder": "http://127.0.0.1:7890",
-  "proxy-saved-restart-required": "Конфигурация прокси сохранена. Перезапустите приложение для применения изменений.",
-  "proxy-save-failed": "Не удалось сохранить конфигурацию прокси.",
-  "proxy-invalid-url": "Недопустимый URL прокси. Должен начинаться с http://, https://, socks4:// или socks5://.",
-  "proxy-restart-hint": "Для применения изменений прокси требуется перезапуск.",
 
   "preferred-ide": "Предпочитаемая IDE",
   "preferred-ide-description": "Выберите приложение для открытия папок проектов агента.",
   "system-file-manager": "Системный файловый менеджер",
+  "agents": "Агенты",
   "help-improve-eigent": "Помогите улучшить Eigent",
   "help-improve-eigent-description": "Разрешите Eigent собирать анонимные журналы ошибок и данные об использовании для улучшения сервиса. Это необязательно и может быть изменено в любое время."
 }
diff --git a/src/i18n/locales/ru/triggers.json b/src/i18n/locales/ru/triggers.json
index f440b1a31..c5f1592e2 100644
--- a/src/i18n/locales/ru/triggers.json
+++ b/src/i18n/locales/ru/triggers.json
@@ -138,6 +138,8 @@
   "no-activity": "No activity yet",
   "activity-hint": "Activity will appear here",
   "execution-logs": "Execution Logs",
+  "fold-execution-logs": "Свернуть журналы выполнения",
+  "open-execution-logs": "Развернуть журналы выполнения",
   "delete-trigger": "Delete Trigger",
   "cancel": "Cancel",
   "deleting": "Deleting...",
@@ -190,6 +192,7 @@
   "got-it": "Got it",
   "add-trigger": "Add Trigger",
   "trigger-limit-reached": "Достигнут лимит триггеров: 5 на проект, 25 на пользователя",
+  "activation-limit-reached": "Достигнут лимит активации: максимум 5 активных триггеров на проект, 25 на пользователя",
   "never": "Never",
   "duplicate": "Duplicate",
   "no-task-prompt": "No task prompt",
diff --git a/src/i18n/locales/zh-Hans/agents.json b/src/i18n/locales/zh-Hans/agents.json
index adedc1988..14e1fbb59 100644
--- a/src/i18n/locales/zh-Hans/agents.json
+++ b/src/i18n/locales/zh-Hans/agents.json
@@ -46,5 +46,12 @@
   "custom-skill": "自定义技能",
   "delete-skill": "删除技能",
   "delete-skill-confirmation": "您确定要删除 \"{{name}}\" 吗？此操作无法撤销。",
-  "skill-deleted-success": "技能删除成功！"
+  "skill-deleted-success": "技能删除成功！",
+  "create-skill": "创建技能",
+  "upload-skill": "上传技能",
+  "browse-skills": "浏览技能",
+  "create-skill-default-name": "新技能",
+  "create-skill-default-description": "描述此技能的作用。",
+  "save-skill": "保存技能",
+  "compose-skill-hint": "编辑 SKILL.md（需要包含名称和描述的 YAML 前言），然后保存。"
 }
diff --git a/src/i18n/locales/zh-Hans/chat.json b/src/i18n/locales/zh-Hans/chat.json
index 9a0b6e07e..f3dfae06f 100644
--- a/src/i18n/locales/zh-Hans/chat.json
+++ b/src/i18n/locales/zh-Hans/chat.json
@@ -2,6 +2,12 @@
   "welcome-to-eigent": "欢迎使用 Eigent",
   "how-can-i-help-you": "今天有什么可以帮你的吗？",
   "ask-placeholder": "今天你需要完成什么任务？",
+  "rich-input-rotate-1": "自动化市场调研、分析与报告",
+  "rich-input-rotate-2": "制作幻灯片、社媒帖子和品牌内容",
+  "rich-input-rotate-3": "整理文件、文档和桌面任务",
+  "follow-up-placeholder": "继续提问",
+  "select-agent": "选择智能体",
+  "clear-agent": "清除智能体",
   "select-file": "选择文件",
   "all-files": "所有文件",
   "token": "Token",
@@ -28,6 +34,8 @@
   "task-running": "任务运行",
   "task-completed": "任务完成",
   "agent-folder": "智能体文件夹",
+  "choose-agent-work-folder": "选择智能体工作文件夹",
+  "choose-agent-work-folder-placeholder": "在电脑上选择文件夹（即将推出）",
   "open": "打开",
   "close": "关闭",
   "search": "搜索",
@@ -58,14 +66,27 @@
   "remove-file": "移除文件",
   "drop-files-to-attach": "拖放文件以附加",
   "expand-input": "展开输入 (⌘P)",
+  "collapse-input": "收起输入 (⌘P)",
   "queued-tasks": "排队任务",
   "remove-queued-message": "移除排队消息",
   "no-agents-added": "未添加智能体",
-  "open-in-ide": "在 IDE 中打开",
-  "open-in-vscode": "在 VS Code 中打开",
-  "open-in-cursor": "在 Cursor 中打开",
-  "open-in-file-manager": "在文件管理器中打开",
+  "open-in-ide": "打开于",
+  "open-in-vscode": "VS Code",
+  "open-in-cursor": "Cursor",
+  "open-in-file-manager": "文件管理器",
   "failed-to-open-folder": "无法打开文件夹",
   "task-completed-card-title": "任务已完成",
-  "task-completed-card-subtitle": "使用触发器自动化您的任务"
+  "task-completed-card-subtitle": "使用触发器自动化您的任务",
+  "single-agent-working": "{{agent}} 正在努力处理",
+  "agent-outcome-expand": "展开",
+  "agent-outcome-collapse": "收起",
+  "input-attach-add-files-or-photos": "添加文件或照片",
+  "input-attach-skills": "技能",
+  "input-attach-upload-new-skill": "上传新技能",
+  "input-attach-manage-skills": "管理技能",
+  "input-attach-add-mcp": "添加 MCP",
+  "input-attach-manage-connectors": "管理连接器",
+  "input-attach-open-browser": "打开浏览器",
+  "input-attach-manage-browsers": "管理浏览器",
+  "input-attach-menu-trigger": "添加文件、照片，或通过菜单打开技能、连接器、浏览器"
 }
diff --git a/src/i18n/locales/zh-Hans/layout.json b/src/i18n/locales/zh-Hans/layout.json
index ce7bce0cb..963541959 100644
--- a/src/i18n/locales/zh-Hans/layout.json
+++ b/src/i18n/locales/zh-Hans/layout.json
@@ -10,8 +10,6 @@
   "sign-up-failed-please-check-your-email-and-password": "注册失败, 请检查您的邮箱和密码",
   "login-failed-please-try-again": "登录失败, 请重试",
   "login-failed-please-check-your-email-and-password": "登录失败, 请检查您的邮箱和密码",
-  "continue-with-google": "使用Google注册",
-  "continue-with-github": "使用Github注册",
   "or": "或",
   "sign-up": "注册",
   "login": "登录",
@@ -49,8 +47,30 @@
   "browser": "浏览器",
   "settings": "设置",
   "general": "通用",
-  "workers": "工作器",
+  "aiWorkforce": "AI 团队",
+  "expand-workforce": "展开工作区",
+  "minimize-workforce": "收起工作区",
+  "show-workforce-panel": "显示工作区面板",
+  "chat-panel-left": "在左侧显示聊天",
+  "chat-panel-right": "在右侧显示聊天",
   "triggers": "触发器",
+  "triggers-disconnected": "已断开",
+  "triggers-connecting": "连接中…",
+  "triggers-reconnect-hint": "重新连接触发监听器",
+  "triggers-listener-reconnect": "重新连接",
+  "folder": "文件夹",
+  "sidebar-model-manage-hint": "在智能体 → 模型中管理",
+  "sidebar-custom-platform-unknown": "—",
+  "expand-sidebar": "展开侧边栏",
+  "collapse-sidebar": "收起侧边栏",
+  "help-and-support": "帮助与支持",
+  "contact-support": "联系客服",
+  "contact-support-description": "与我们的团队取得联系",
+  "contact-support-body": "复制支持邮箱，随时联系我们。",
+  "copy-email": "复制邮箱",
+  "email-copied": "邮箱已复制到剪贴板",
+  "copy-failed": "无法复制邮箱",
+  "download-logs": "下载日志",
   "new-project": "新项目",
   "welcome": "欢迎",
   "delete-task": "删除任务",
@@ -62,6 +82,10 @@
   "save": "保存",
   "not-found": "未找到",
   "tasks": "任务",
+  "chat-history-title": "聊天历史",
+  "chat-history-tooltip": "聊天历史",
+  "task-list-add-hint": "打开工作台并聚焦聊天输入框",
+  "ongoing": "进行中",
   "token": "# 令牌",
   "configuring": "配置中...",
   "not-configured": "未配置",
@@ -103,7 +127,9 @@
   "are-you-sure-you-want-to-delete": "您确定要删除此任务吗？此操作无法撤销。",
   "share": "分享",
   "home": "首页",
+  "dashboard": "控制台",
   "back": "返回",
+  "forward": "前进",
   "developer-agent": "开发者智能体",
   "browser-agent": "浏览器智能体",
   "document-agent": "文档智能体",
@@ -119,6 +145,7 @@
   "project-ended-successfully": "项目成功结束",
   "failed-to-end-project": "结束项目失败",
   "message-queued": "消息已排队。它将在当前任务完成时处理。",
+  "task-stopped-successfully": "任务已成功停止",
   "task-skipped-successfully": "任务成功跳过",
   "failed-to-skip-task": "跳过任务失败",
   "no-reply-received-task-continue": "未收到回复，任务继续",
@@ -245,5 +272,8 @@
   "restart-required": "需要重启",
   "restart-required-message": "重启应用程序以启用您的 Cookie 域名更改。",
   "restart": "重启",
-  "cookie-count": "{{count}} 个 Cookie"
+  "cookie-count": "{{count}} 个 Cookie",
+  "add-new-mcp": "添加新 MCP",
+  "browse-mcps": "浏览 MCP",
+  "browser-settings": "浏览器设置"
 }
diff --git a/src/i18n/locales/zh-Hans/setting.json b/src/i18n/locales/zh-Hans/setting.json
index 109ceff52..f6530a156 100644
--- a/src/i18n/locales/zh-Hans/setting.json
+++ b/src/i18n/locales/zh-Hans/setting.json
@@ -148,6 +148,7 @@
   "reset": "重置",
   "reset-success": "重置成功！",
   "reset-failed": "重置失败！",
+  "select-default-model": "选择默认模型",
 
   "browser-login": "浏览器登录",
   "browser-login-description": "打开 Chrome 浏览器以登录您的账户。您的登录数据将安全地保存在本地配置文件中。",
@@ -176,6 +177,14 @@
   "all-cookies-deleted": "所有 Cookie 已成功删除。",
   "cookie-delete-warning": "注意：删除 Cookie 会使您从相关网站登出。您可能需要重启浏览器才能看到更改生效。",
 
+  "network-proxy": "网络代理",
+  "network-proxy-description": "为网络请求配置代理服务器。如需通过代理访问外部 API，非常有用。",
+  "proxy-placeholder": "http://127.0.0.1:7890",
+  "proxy-saved-restart-required": "代理配置已保存。请重启应用以应用更改。",
+  "proxy-save-failed": "保存代理配置失败。",
+  "proxy-invalid-url": "无效的代理 URL。必须以 http://、https://、socks4:// 或 socks5:// 开头。",
+  "proxy-restart-hint": "需要重启应用以应用代理更改。",
+
   "cloud-not-available-in-local-proxy": "在本地代理模式下无法使用云端版本",
   "set-as-default": "设为默认",
   "api-key-setting": "API 密钥设置",
@@ -207,6 +216,7 @@
   "preferred-ide": "首选 IDE",
   "preferred-ide-description": "选择打开智能体项目文件夹时使用的应用程序。",
   "system-file-manager": "系统文件管理器",
+  "agents": "智能体",
   "help-improve-eigent": "帮助改进 Eigent",
   "help-improve-eigent-description": "允许 Eigent 收集匿名错误日志和使用数据以改进服务。此项为可选，可随时更改。"
 }
diff --git a/src/i18n/locales/zh-Hans/triggers.json b/src/i18n/locales/zh-Hans/triggers.json
index e0a822dc3..2408ee2fc 100644
--- a/src/i18n/locales/zh-Hans/triggers.json
+++ b/src/i18n/locales/zh-Hans/triggers.json
@@ -138,6 +138,8 @@
   "no-activity": "暂无活动",
   "activity-hint": "活动将显示在这里",
   "execution-logs": "执行日志",
+  "fold-execution-logs": "折叠执行日志",
+  "open-execution-logs": "展开执行日志",
   "delete-trigger": "删除触发器",
   "cancel": "取消",
   "deleting": "正在删除...",
@@ -190,6 +192,7 @@
   "got-it": "知道了",
   "add-trigger": "添加触发器",
   "trigger-limit-reached": "触发器数量已达上限：每个项目 5 个，每个用户 25 个",
+  "activation-limit-reached": "已达激活上限：每个项目最多 5 个启用中的触发器，每位用户最多 25 个",
   "never": "从不",
   "duplicate": "复制",
   "no-task-prompt": "暂无提示词",
diff --git a/src/i18n/locales/zh-Hant/agents.json b/src/i18n/locales/zh-Hant/agents.json
index 2884243db..8d31d3290 100644
--- a/src/i18n/locales/zh-Hant/agents.json
+++ b/src/i18n/locales/zh-Hant/agents.json
@@ -46,5 +46,12 @@
   "custom-skill": "自訂技能",
   "delete-skill": "刪除技能",
   "delete-skill-confirmation": "您確定要刪除 \"{{name}}\" 嗎？此操作無法撤銷。",
-  "skill-deleted-success": "技能刪除成功！"
+  "skill-deleted-success": "技能刪除成功！",
+  "create-skill": "建立技能",
+  "upload-skill": "上傳技能",
+  "browse-skills": "瀏覽技能",
+  "create-skill-default-name": "新技能",
+  "create-skill-default-description": "描述此技能的用途。",
+  "save-skill": "儲存技能",
+  "compose-skill-hint": "編輯 SKILL.md（需要含名稱與描述的 YAML 前言），然後儲存。"
 }
diff --git a/src/i18n/locales/zh-Hant/chat.json b/src/i18n/locales/zh-Hant/chat.json
index e64d3218f..0a8af8d89 100644
--- a/src/i18n/locales/zh-Hant/chat.json
+++ b/src/i18n/locales/zh-Hant/chat.json
@@ -2,6 +2,12 @@
   "welcome-to-eigent": "歡迎使用 Eigent",
   "how-can-i-help-you": "今天有什麼可以幫你的嗎？",
   "ask-placeholder": "今天你需要完成什麼任務？",
+  "rich-input-rotate-1": "自動化市場研究、分析與報告",
+  "rich-input-rotate-2": "製作簡報、社群貼文與品牌內容",
+  "rich-input-rotate-3": "整理檔案、文件與桌面工作",
+  "follow-up-placeholder": "繼續提問",
+  "select-agent": "選擇智能體",
+  "clear-agent": "清除智能體",
   "select-file": "選擇文件",
   "all-files": "所有文件",
   "token": "Token",
@@ -28,6 +34,8 @@
   "task-running": "任務運行",
   "task-completed": "任務完成",
   "agent-folder": "智能體文件夹",
+  "choose-agent-work-folder": "選擇智慧體工作資料夾",
+  "choose-agent-work-folder-placeholder": "在電腦上選擇資料夾（即將推出）",
   "open": "打開",
   "close": "關閉",
   "search": "搜索",
@@ -58,14 +66,27 @@
   "remove-file": "移除文件",
   "drop-files-to-attach": "拖放文件以附加",
   "expand-input": "展開輸入 (⌘P)",
+  "collapse-input": "收起輸入 (⌘P)",
   "queued-tasks": "排隊任務",
   "remove-queued-message": "移除排隊訊息",
   "no-agents-added": "未添加智能體",
-  "open-in-ide": "在 IDE 中開啟",
-  "open-in-vscode": "在 VS Code 中開啟",
-  "open-in-cursor": "在 Cursor 中開啟",
-  "open-in-file-manager": "在檔案管理器中開啟",
+  "open-in-ide": "開啟於",
+  "open-in-vscode": "VS Code",
+  "open-in-cursor": "Cursor",
+  "open-in-file-manager": "檔案管理器",
   "failed-to-open-folder": "無法開啟資料夾",
   "task-completed-card-title": "任務已完成",
-  "task-completed-card-subtitle": "使用觸發器自動化您的任務"
+  "task-completed-card-subtitle": "使用觸發器自動化您的任務",
+  "single-agent-working": "{{agent}} 正在努力處理",
+  "agent-outcome-expand": "展開",
+  "agent-outcome-collapse": "收合",
+  "input-attach-add-files-or-photos": "新增檔案或相片",
+  "input-attach-skills": "技能",
+  "input-attach-upload-new-skill": "上傳新技能",
+  "input-attach-manage-skills": "管理技能",
+  "input-attach-add-mcp": "新增 MCP",
+  "input-attach-manage-connectors": "管理連接器",
+  "input-attach-open-browser": "開啟瀏覽器",
+  "input-attach-manage-browsers": "管理瀏覽器",
+  "input-attach-menu-trigger": "新增檔案、相片，或從選單開啟技能、連接器、瀏覽器"
 }
diff --git a/src/i18n/locales/zh-Hant/layout.json b/src/i18n/locales/zh-Hant/layout.json
index 184a24ab5..79ae62628 100644
--- a/src/i18n/locales/zh-Hant/layout.json
+++ b/src/i18n/locales/zh-Hant/layout.json
@@ -10,8 +10,6 @@
   "sign-up-failed-please-check-your-email-and-password": "注册失败, 请检查您的邮箱和密码",
   "login-failed-please-try-again": "登录失败, 请重试",
   "login-failed-please-check-your-email-and-password": "登录失败, 请检查您的邮箱和密码",
-  "continue-with-google": "使用Google注册",
-  "continue-with-github": "使用Github注册",
   "or": "或",
   "sign-up": "注册",
   "login": "登录",
@@ -31,6 +29,7 @@
   "continue-with-google-login": "使用 Google 登录",
   "continue-with-github-login": "使用 Github 登录",
   "installation-failed": "安装失败",
+  "backend-startup-failed": "後端啟動失敗",
   "projects": "專案",
   "agents": "智能體",
   "mcp-tools": "MCP & 工具",
@@ -48,8 +47,30 @@
   "browser": "瀏覽器",
   "settings": "設定",
   "general": "一般",
-  "workers": "工作器",
+  "aiWorkforce": "AI 團隊",
+  "expand-workforce": "展開工作區",
+  "minimize-workforce": "收起工作區",
+  "show-workforce-panel": "顯示工作區面板",
+  "chat-panel-left": "在左側顯示聊天",
+  "chat-panel-right": "在右側顯示聊天",
   "triggers": "觸發器",
+  "triggers-disconnected": "已中斷",
+  "triggers-connecting": "連線中…",
+  "triggers-reconnect-hint": "重新連線至觸發監聽器",
+  "triggers-listener-reconnect": "重新連線",
+  "folder": "資料夾",
+  "sidebar-model-manage-hint": "在智能體 → 模型中管理",
+  "sidebar-custom-platform-unknown": "—",
+  "expand-sidebar": "展開側邊欄",
+  "collapse-sidebar": "收起側邊欄",
+  "help-and-support": "說明與支援",
+  "contact-support": "聯絡客服",
+  "contact-support-description": "與我們的團隊聯繫",
+  "contact-support-body": "複製支援信箱，隨時與我們聯繫。",
+  "copy-email": "複製信箱",
+  "email-copied": "信箱已複製到剪貼簿",
+  "copy-failed": "無法複製信箱",
+  "download-logs": "下載記錄檔",
   "new-project": "新專案",
   "welcome": "歡迎",
   "delete-task": "刪除任務",
@@ -61,6 +82,9 @@
   "save": "儲存",
   "not-found": "未找到",
   "tasks": "任務",
+  "chat-history-title": "聊天紀錄",
+  "chat-history-tooltip": "聊天紀錄",
+  "task-list-add-hint": "開啟工作區並聚焦聊天輸入框",
   "ongoing": "進行中",
   "token": "# 令牌",
   "configuring": "設定中...",
@@ -103,7 +127,9 @@
   "are-you-sure-you-want-to-delete": "您確定要刪除此任務嗎？此操作無法撤銷。",
   "share": "分享",
   "home": "首頁",
+  "dashboard": "控制台",
   "back": "返回",
+  "forward": "前進",
   "developer-agent": "開發者智能體",
   "browser-agent": "瀏覽器智能體",
   "document-agent": "文件智能體",
@@ -119,6 +145,7 @@
   "project-ended-successfully": "專案成功結束",
   "failed-to-end-project": "結束專案失敗",
   "message-queued": "訊息已排隊。它將在當前任務完成時處理。",
+  "task-stopped-successfully": "任務已成功停止",
   "task-skipped-successfully": "任務成功跳過",
   "failed-to-skip-task": "跳過任務失敗",
   "no-reply-received-task-continue": "未收到回覆，任務繼續",
@@ -245,5 +272,8 @@
   "restart-required": "需要重新啟動",
   "restart-required-message": "重新啟動應用程式以啟用您的 Cookie 網域變更。",
   "restart": "重新啟動",
-  "cookie-count": "{{count}} 個 Cookie"
+  "cookie-count": "{{count}} 個 Cookie",
+  "add-new-mcp": "新增 MCP",
+  "browse-mcps": "瀏覽 MCP",
+  "browser-settings": "瀏覽器設定"
 }
diff --git a/src/i18n/locales/zh-Hant/setting.json b/src/i18n/locales/zh-Hant/setting.json
index 2a4091eb0..0bf1ca27c 100644
--- a/src/i18n/locales/zh-Hant/setting.json
+++ b/src/i18n/locales/zh-Hant/setting.json
@@ -4,6 +4,9 @@
   "privacy": "隱私",
   "models": "模型",
   "mcp": "MCP & 工具",
+  "eigent-cloud": "Eigent Cloud",
+  "default": "預設",
+  "profile": "個人檔案",
 
   "account": "帳戶",
   "you-are-currently-signed-in-with": "您目前使用的是 {{email}} 帳戶",
@@ -147,6 +150,32 @@
   "reset-success": "重設成功！",
   "reset-failed": "重設失敗！",
   "select-default-model": "選擇預設模型",
+
+  "browser-login": "瀏覽器登入",
+  "browser-login-description": "開啟 Chrome 以登入您的帳戶。登入資料將安全地儲存在本機設定檔中。",
+  "open-browser-login": "開啟瀏覽器登入",
+  "opening-browser": "正在開啟瀏覽器...",
+  "browser-opened-successfully": "瀏覽器已成功開啟。請登入您的帳戶。",
+  "failed-to-open-browser": "無法開啟瀏覽器，請再試一次。",
+  "restart-to-apply": "重新啟動以套用",
+  "cookie-manager": "Cookie 管理器",
+  "cookie-manager-description": "管理從瀏覽器工作階段儲存的 Cookie。可刪除特定網站或一次刪除全部。",
+  "refresh": "重新整理",
+  "delete-all": "全部刪除",
+  "search-domains": "搜尋網域...",
+  "loading-cookies": "正在載入 Cookie...",
+  "no-cookies-found": "找不到 Cookie",
+  "no-matching-domains": "沒有相符的網域",
+  "login-to-save-cookies": "使用上方的瀏覽器登入功能，從您的帳戶儲存 Cookie。",
+  "cookies-count": "{{count}} 個 Cookie",
+  "last-access": "最後存取",
+  "cookies-deleted-successfully": "已成功刪除 {{domain}} 的 Cookie",
+  "failed-to-load-cookies": "載入 Cookie 失敗，請再試一次。",
+  "failed-to-delete-cookies": "刪除 Cookie 失敗，請再試一次。",
+  "confirm-delete-all-cookies": "確定要刪除所有 Cookie 嗎？此操作無法復原。",
+  "all-cookies-deleted": "所有 Cookie 已成功刪除。",
+  "cookie-delete-warning": "注意：刪除 Cookie 會使您從相關網站登出。您可能需要重新啟動瀏覽器才能看到變更生效。",
+
   "cloud-not-available-in-local-proxy": "在本機代理模式下無法使用雲端版本",
   "set-as-default": "設為預設",
   "api-key-setting": "API 金鑰設定",
@@ -185,6 +214,7 @@
   "preferred-ide": "偏好 IDE",
   "preferred-ide-description": "選擇開啟智能體專案資料夾時使用的應用程式。",
   "system-file-manager": "系統檔案管理器",
+  "agents": "智能體",
   "help-improve-eigent": "幫助改進 Eigent",
   "help-improve-eigent-description": "允許 Eigent 收集匿名錯誤日誌和使用數據以改進服務。此項為可選，可隨時更改。"
 }
diff --git a/src/i18n/locales/zh-Hant/triggers.json b/src/i18n/locales/zh-Hant/triggers.json
index 56f63cb99..e59b43f75 100644
--- a/src/i18n/locales/zh-Hant/triggers.json
+++ b/src/i18n/locales/zh-Hant/triggers.json
@@ -138,6 +138,8 @@
   "no-activity": "暫無活動",
   "activity-hint": "活動將顯示在這裡",
   "execution-logs": "執行日誌",
+  "fold-execution-logs": "摺疊執行日誌",
+  "open-execution-logs": "展開執行日誌",
   "delete-trigger": "刪除觸發器",
   "cancel": "取消",
   "deleting": "正在刪除...",
@@ -190,6 +192,7 @@
   "got-it": "知道了",
   "add-trigger": "添加觸發器",
   "trigger-limit-reached": "觸發器數量已達上限：每個項目 5 個，每個用戶 25 個",
+  "activation-limit-reached": "已達啟用上限：每個專案最多 5 個進行中的觸發器，每位使用者最多 25 個",
   "never": "從不",
   "duplicate": "複製",
   "no-task-prompt": "暫無提示詞",
diff --git a/src/lib/taskLifecycleUi.ts b/src/lib/taskLifecycleUi.ts
new file mode 100644
index 000000000..0b886de60
--- /dev/null
+++ b/src/lib/taskLifecycleUi.ts
@@ -0,0 +1,109 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import type { BottomBoxState } from '@/components/ChatBox/BottomBox';
+import {
+  AgentStep,
+  ChatTaskStatus,
+  type ChatTaskStatusType,
+} from '@/types/constants';
+
+/** Minimal task shape for bottom-box / sidebar lifecycle (matches chatStore Task fields used). */
+export interface TaskLifecycleFields {
+  messages: Message[];
+  type: string;
+  status: ChatTaskStatusType;
+  hasWaitComfirm: boolean;
+  isTakeControl: boolean;
+  taskInfo: { id: string; content: string }[];
+  isContextExceeded?: boolean;
+}
+
+export function getBottomBoxStateForTask(
+  task: TaskLifecycleFields
+): BottomBoxState {
+  const anyToSubTasksMessage = task.messages.find(
+    (m) => m.step === 'to_sub_tasks'
+  );
+  const toSubTasksMessage = task.messages.find(
+    (m) => m.step === 'to_sub_tasks' && !m.isConfirm
+  );
+
+  const isSkeletonPhase =
+    (task.status !== 'finished' &&
+      !anyToSubTasksMessage &&
+      !task.hasWaitComfirm &&
+      task.messages.length > 0) ||
+    (task.isTakeControl && !anyToSubTasksMessage);
+  if (isSkeletonPhase) {
+    return 'splitting';
+  }
+
+  if (
+    toSubTasksMessage &&
+    !toSubTasksMessage.isConfirm &&
+    task.status === 'pending'
+  ) {
+    return 'confirm';
+  }
+
+  if (toSubTasksMessage && !toSubTasksMessage.isConfirm) {
+    return 'splitting';
+  }
+
+  if (
+    task.status === ChatTaskStatus.RUNNING ||
+    task.status === ChatTaskStatus.PAUSE
+  ) {
+    return 'running';
+  }
+
+  if (task.status === 'finished' && task.type !== '') {
+    return 'finished';
+  }
+
+  return 'input';
+}
+
+/** Shelf tone for project-style task rows; finished and idle both use `default`. */
+export type TaskListShelfTone = 'splitting' | 'running' | 'default';
+
+export function getTaskListShelfTone(
+  task: TaskLifecycleFields
+): TaskListShelfTone {
+  const s = getBottomBoxStateForTask(task);
+  if (s === 'running') return 'running';
+  if (s === 'splitting' || s === 'confirm') return 'splitting';
+  return 'default';
+}
+
+/** Sidebar row: failures (model error, subtask failed, context limit, etc.). */
+export function isTaskListRowFailureState(task: TaskLifecycleFields): boolean {
+  if (task.isContextExceeded) return true;
+  return task.messages.some((m) => {
+    if (m.role !== 'agent') return false;
+    if (m.step === AgentStep.FAILED) return true;
+    const c = m.content?.trim() ?? '';
+    if (c.startsWith('❌ **Error**')) return true;
+    return false;
+  });
+}
+
+export function isWorkforceTask(task: TaskLifecycleFields): boolean {
+  const toSubTasks = task.messages.filter((m) => m.step === 'to_sub_tasks');
+  const latest = toSubTasks[toSubTasks.length - 1];
+  if (latest?.taskType === 2) return true;
+  if (task.taskInfo.length > 1) return true;
+  return false;
+}
diff --git a/src/pages/Agents/Models.tsx b/src/pages/Agents/Models.tsx
index 31a2dbacc..4b6b72949 100644
--- a/src/pages/Agents/Models.tsx
+++ b/src/pages/Agents/Models.tsx
@@ -1109,13 +1109,13 @@ export default function SettingModels() {
       <button
         key={tabId}
         onClick={() => setSelectedTab(tabId)}
-        className={`flex w-full items-center justify-between rounded-xl px-3 py-2 transition-all duration-200 ${isSubItem ? 'pl-3' : ''} ${
+        className={`rounded-xl px-3 py-2 flex w-full items-center justify-between transition-all duration-200 ${isSubItem ? 'pl-3' : ''} ${
           isActive
             ? 'bg-fill-fill-transparent-active'
             : 'bg-fill-fill-transparent hover:bg-fill-fill-transparent-hover'
         } `}
       >
-        <div className="flex items-center justify-center gap-3">
+        <div className="gap-3 flex items-center justify-center">
           {modelImage ? (
             <img
               src={modelImage}
@@ -1135,7 +1135,7 @@ export default function SettingModels() {
           </span>
         </div>
         {isConfigured && (
-          <div className="m-1 h-2 w-2 rounded-full bg-text-success" />
+          <div className="m-1 h-2 w-2 bg-text-success rounded-full" />
         )}
       </button>
     );
@@ -1147,16 +1147,16 @@ export default function SettingModels() {
     if (selectedTab === 'cloud') {
       if (import.meta.env.VITE_USE_LOCAL_PROXY === 'true') {
         return (
-          <div className="flex h-64 items-center justify-center text-text-label">
+          <div className="h-64 text-text-label flex items-center justify-center">
             {t('setting.cloud-not-available-in-local-proxy')}
           </div>
         );
       }
       return (
-        <div className="flex w-full flex-col rounded-2xl bg-surface-tertiary">
-          <div className="mx-6 mb-4 flex flex-col justify-start self-stretch border-x-0 border-b-[0.5px] border-t-0 border-solid border-border-secondary pb-4 pt-2">
-            <div className="inline-flex items-center justify-start gap-2 self-stretch">
-              <div className="text-body-base my-2 flex-1 justify-center font-bold text-text-heading">
+        <div className="rounded-2xl bg-surface-tertiary flex w-full flex-col">
+          <div className="mx-6 mb-4 border-border-secondary pb-4 pt-2 flex flex-col justify-start self-stretch border-x-0 border-t-0 border-b-[0.5px] border-solid">
+            <div className="gap-2 inline-flex items-center justify-start self-stretch">
+              <div className="text-body-base my-2 font-bold text-text-heading flex-1 justify-center">
                 {t('setting.eigent-cloud')}
               </div>
               {cloudPrefer ? (
@@ -1175,7 +1175,7 @@ export default function SettingModels() {
                 <Button
                   variant="ghost"
                   size="xs"
-                  className="rounded-full !text-text-label"
+                  className="!text-text-label rounded-full"
                   onClick={() => {
                     setLocalPrefer(false);
                     setActiveModelIdx(null);
@@ -1199,7 +1199,7 @@ export default function SettingModels() {
                 onClick={() => {
                   window.location.href = `https://www.eigent.ai/pricing`;
                 }}
-                className="cursor-pointer text-body-sm text-text-label underline"
+                className="text-body-sm text-text-label cursor-pointer underline"
               >
                 {t('setting.pricing-options')}
               </span>
@@ -1209,7 +1209,7 @@ export default function SettingModels() {
             </div>
           </div>
           {/*Content Area*/}
-          <div className="flex w-full flex-row items-center justify-between gap-4 px-6 pb-4">
+          <div className="gap-4 px-6 pb-4 flex w-full flex-row items-center justify-between">
             <div className="text-body-sm text-text-body">
               {t('setting.credits')}:{' '}
               {loadingCredits ? (
@@ -1234,9 +1234,9 @@ export default function SettingModels() {
               <Settings />
             </Button>
           </div>
-          <div className="flex w-full flex-1 items-center justify-between px-6 pb-4">
-            <div className="flex min-w-0 flex-1 items-center">
-              <span className="overflow-hidden text-ellipsis whitespace-nowrap text-body-sm">
+          <div className="px-6 pb-4 flex w-full flex-1 items-center justify-between">
+            <div className="min-w-0 flex flex-1 items-center">
+              <span className="text-body-sm overflow-hidden text-ellipsis whitespace-nowrap">
                 {t('setting.select-model-type')}
               </span>
             </div>
@@ -1312,15 +1312,15 @@ export default function SettingModels() {
       const canSwitch = !!form[idx].provider_id;
 
       return (
-        <div className="flex w-full flex-col rounded-2xl bg-surface-tertiary">
-          <div className="mx-6 mb-4 flex flex-col items-start justify-between border-x-0 border-b-[0.5px] border-t-0 border-solid border-border-secondary pb-4 pt-2">
-            <div className="inline-flex items-center justify-between gap-2 self-stretch">
+        <div className="rounded-2xl bg-surface-tertiary flex w-full flex-col">
+          <div className="mx-6 mb-4 border-border-secondary pb-4 pt-2 flex flex-col items-start justify-between border-x-0 border-t-0 border-b-[0.5px] border-solid">
+            <div className="gap-2 inline-flex items-center justify-between self-stretch">
               <div className="text-body-base my-2 font-bold text-text-heading">
                 {item.name}
               </div>
-              <div className="flex items-center gap-2">
+              <div className="gap-2 flex items-center">
                 {form[idx].prefer ? (
-                  <span className="inline-flex items-center rounded-full px-2 py-1 text-label-xs font-bold text-text-success">
+                  <span className="px-2 py-1 text-label-xs font-bold text-text-success inline-flex items-center rounded-full">
                     {t('setting.default')}
                   </span>
                 ) : (
@@ -1331,8 +1331,8 @@ export default function SettingModels() {
                     onClick={() => handleSwitch(idx, true)}
                     className={
                       canSwitch
-                        ? 'inline-flex items-center rounded-full bg-button-transparent-fill-hover !text-text-label shadow-none hover:bg-button-transparent-fill-active'
-                        : 'inline-flex items-center gap-1.5'
+                        ? 'bg-button-transparent-fill-hover !text-text-label hover:bg-button-transparent-fill-active inline-flex items-center rounded-full shadow-none'
+                        : 'gap-1.5 inline-flex items-center'
                     }
                   >
                     {!canSwitch
@@ -1341,9 +1341,9 @@ export default function SettingModels() {
                   </Button>
                 )}
                 {form[idx].provider_id ? (
-                  <div className="h-2 w-2 shrink-0 rounded-full bg-text-success" />
+                  <div className="h-2 w-2 bg-text-success shrink-0 rounded-full" />
                 ) : (
-                  <div className="h-2 w-2 shrink-0 rounded-full bg-text-label opacity-10" />
+                  <div className="h-2 w-2 bg-text-label shrink-0 rounded-full opacity-10" />
                 )}
               </div>
             </div>
@@ -1351,7 +1351,7 @@ export default function SettingModels() {
               {item.description}
             </div>
           </div>
-          <div className="flex w-full flex-col items-center gap-4 px-6">
+          <div className="gap-4 px-6 flex w-full flex-col items-center">
             {/* API Key Setting */}
             <Input
               id={`apiKey-${item.id}`}
@@ -1432,7 +1432,7 @@ export default function SettingModels() {
             {item.externalConfig &&
               form[idx].externalConfig &&
               form[idx].externalConfig.map((ec, ecIdx) => (
-                <div key={ec.key} className="flex h-full w-full flex-col gap-4">
+                <div key={ec.key} className="gap-4 flex h-full w-full flex-col">
                   {ec.options && ec.options.length > 0 ? (
                     <Select
                       value={ec.value}
@@ -1499,7 +1499,7 @@ export default function SettingModels() {
               ))}
           </div>
           {/* Action Button */}
-          <div className="flex justify-end gap-2 px-6 py-4">
+          <div className="gap-2 px-6 py-4 flex justify-end">
             <Button
               variant="ghost"
               size="sm"
@@ -1539,10 +1539,10 @@ export default function SettingModels() {
       const platformModelsError = platformState?.error || null;
 
       return (
-        <div className="flex w-full flex-col rounded-2xl bg-surface-tertiary">
-          <div className="mx-6 mb-4 flex flex-col items-start justify-between border-x-0 border-b-[0.5px] border-t-0 border-solid border-border-secondary pb-4 pt-2">
-            <div className="inline-flex items-center justify-between gap-2 self-stretch">
-              <div className="flex items-center gap-2">
+        <div className="rounded-2xl bg-surface-tertiary flex w-full flex-col">
+          <div className="mx-6 mb-4 border-border-secondary pb-4 pt-2 flex flex-col items-start justify-between border-x-0 border-t-0 border-b-[0.5px] border-solid">
+            <div className="gap-2 inline-flex items-center justify-between self-stretch">
+              <div className="gap-2 flex items-center">
                 <div className="text-body-base my-2 font-bold text-text-heading">
                   {getLocalPlatformName(platform)}
                 </div>
@@ -1564,7 +1564,7 @@ export default function SettingModels() {
                     onClick={() => handleLocalSwitch(true)}
                     className={
                       isConfigured
-                        ? 'rounded-full bg-button-transparent-fill-hover !text-text-label shadow-none'
+                        ? 'bg-button-transparent-fill-hover !text-text-label rounded-full shadow-none'
                         : ''
                     }
                   >
@@ -1575,14 +1575,14 @@ export default function SettingModels() {
                 )}
               </div>
               {isConfigured ? (
-                <div className="h-2 w-2 rounded-full bg-text-success" />
+                <div className="h-2 w-2 bg-text-success rounded-full" />
               ) : (
-                <div className="h-2 w-2 rounded-full bg-text-label opacity-10" />
+                <div className="h-2 w-2 bg-text-label rounded-full opacity-10" />
               )}
             </div>
           </div>
           {/* Model Endpoint URL Setting */}
-          <div className="flex w-full flex-col items-center gap-4 px-6">
+          <div className="gap-4 px-6 flex w-full flex-col items-center">
             <Input
               size="default"
               title={t('setting.model-endpoint-url')}
@@ -1624,8 +1624,8 @@ export default function SettingModels() {
               note={localError ?? undefined}
             />
             {isModelListPlatform ? (
-              <div className="flex w-full flex-col gap-1">
-                <div className="flex w-full items-end gap-2">
+              <div className="gap-1 flex w-full flex-col">
+                <div className="gap-2 flex w-full items-end">
                   <div className="flex-1">
                     <Select
                       value={currentType}
@@ -1679,7 +1679,8 @@ export default function SettingModels() {
                   </div>
                   <Button
                     variant="ghost"
-                    size="icon"
+                    size="xs"
+                    buttonContent="icon-only"
                     onClick={() =>
                       void fetchModelsForPlatform(
                         platform,
@@ -1720,7 +1721,7 @@ export default function SettingModels() {
             )}
           </div>
           {/* Action Button */}
-          <div className="flex justify-end gap-2 px-6 py-4">
+          <div className="gap-2 px-6 py-4 flex justify-end">
             <Button
               variant="ghost"
               size="sm"
@@ -1750,8 +1751,8 @@ export default function SettingModels() {
   return (
     <div className="m-auto flex h-auto w-full flex-1 flex-col">
       {/* Header Section */}
-      <div className="sticky top-0 z-10 flex w-full items-center justify-between bg-surface-primary px-6 pb-6 pt-8">
-        <div className="flex w-full flex-col items-start justify-between gap-4">
+      <div className="top-0 bg-surface-primary px-6 pb-6 pt-8 sticky z-10 flex w-full items-center justify-between">
+        <div className="gap-4 flex w-full flex-col items-start justify-between">
           <div className="flex flex-col">
             <div className="text-heading-sm font-bold text-text-heading">
               {t('setting.models')}
@@ -1760,10 +1761,10 @@ export default function SettingModels() {
         </div>
       </div>
       {/* Content Section */}
-      <div className="mb-8 flex flex-col gap-6">
+      <div className="mb-8 gap-6 flex flex-col">
         {/* Default Model Cascading Dropdown */}
-        <div className="flex w-full flex-col items-end justify-between gap-4 rounded-2xl bg-surface-secondary px-6 py-4">
-          <div className="flex w-full flex-col items-start justify-center gap-1">
+        <div className="gap-4 rounded-2xl bg-surface-secondary px-6 py-4 flex w-full flex-col items-end justify-between">
+          <div className="gap-1 flex w-full flex-col items-start justify-center">
             <div className="text-body-base font-bold text-text-heading">
               {t('setting.models-default-setting-title')}
             </div>
@@ -1773,11 +1774,11 @@ export default function SettingModels() {
           </div>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button className="flex w-fit items-center justify-between gap-2 rounded-lg border-[0.5px] border-solid border-border-success bg-surface-success px-3 py-1 font-semibold text-text-success transition-colors hover:opacity-70 active:opacity-90">
-                <span className="whitespace-nowrap text-body-sm">
+              <button className="gap-2 rounded-lg border-border-success bg-surface-success px-3 py-1 font-semibold text-text-success flex w-fit items-center justify-between border-[0.5px] border-solid transition-colors hover:opacity-70 active:opacity-90">
+                <span className="text-body-sm whitespace-nowrap">
                   {getDefaultModelDisplayText()}
                 </span>
-                <ChevronDown className="h-4 w-4 flex-shrink-0 text-text-success" />
+                <ChevronDown className="h-4 w-4 text-text-success flex-shrink-0" />
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-[180px]">
@@ -1831,7 +1832,7 @@ export default function SettingModels() {
                         }
                         className="flex items-center justify-between"
                       >
-                        <div className="flex items-center gap-2">
+                        <div className="gap-2 flex items-center">
                           {modelImage ? (
                             <img
                               src={modelImage}
@@ -1852,15 +1853,15 @@ export default function SettingModels() {
                             {item.name}
                           </span>
                         </div>
-                        <div className="flex items-center gap-1">
+                        <div className="gap-1 flex items-center">
                           {!isConfigured && (
-                            <div className="h-2 w-2 rounded-full bg-text-label opacity-10" />
+                            <div className="h-2 w-2 bg-text-label rounded-full opacity-10" />
                           )}
                           {isPreferred && (
                             <Check className="h-4 w-4 text-text-success" />
                           )}
                           {isConfigured && !isPreferred && (
-                            <div className="h-2 w-2 rounded-full bg-text-success" />
+                            <div className="h-2 w-2 bg-text-success rounded-full" />
                           )}
                         </div>
                       </DropdownMenuItem>
@@ -1892,7 +1893,7 @@ export default function SettingModels() {
                         }
                         className="flex items-center justify-between"
                       >
-                        <div className="flex items-center gap-2">
+                        <div className="gap-2 flex items-center">
                           {modelImage ? (
                             <img
                               src={modelImage}
@@ -1913,15 +1914,15 @@ export default function SettingModels() {
                             {model.name}
                           </span>
                         </div>
-                        <div className="flex items-center gap-1">
+                        <div className="gap-1 flex items-center">
                           {!isConfigured && (
-                            <div className="h-2 w-2 rounded-full bg-text-label opacity-10" />
+                            <div className="h-2 w-2 bg-text-label rounded-full opacity-10" />
                           )}
                           {isPreferred && (
                             <Check className="h-4 w-4 text-text-success" />
                           )}
                           {isConfigured && !isPreferred && (
-                            <div className="h-2 w-2 rounded-full bg-text-success" />
+                            <div className="h-2 w-2 bg-text-success rounded-full" />
                           )}
                         </div>
                       </DropdownMenuItem>
@@ -1934,17 +1935,17 @@ export default function SettingModels() {
         </div>
 
         {/* Content Section with Sidebar */}
-        <div className="flex w-full flex-col items-start justify-between gap-2 rounded-2xl bg-surface-secondary px-6 py-4">
-          <div className="text-body-base sticky top-[86px] z-10 mb-2 w-full border-x-0 border-b-[0.5px] border-t-0 border-solid border-border-secondary bg-surface-secondary pb-4 font-bold text-text-heading">
+        <div className="gap-2 rounded-2xl bg-surface-secondary px-6 py-4 flex w-full flex-col items-start justify-between">
+          <div className="text-body-base mb-2 border-border-secondary bg-surface-secondary pb-4 font-bold text-text-heading sticky top-[86px] z-10 w-full border-x-0 border-t-0 border-b-[0.5px] border-solid">
             {t('setting.models-configuration')}
           </div>
 
           <div className="flex w-full flex-row items-start justify-between">
             {/* Sidebar */}
-            <div className="-ml-2 mr-4 h-full w-[240px] rounded-2xl bg-surface-secondary">
-              <div className="flex flex-col gap-4">
+            <div className="-ml-2 mr-4 rounded-2xl bg-surface-secondary h-full w-[240px]">
+              <div className="gap-4 flex flex-col">
                 {/* Eigent Cloud Section */}
-                <div className="flex flex-col gap-1">
+                <div className="gap-1 flex flex-col">
                   <div className="px-3 py-2 text-body-sm font-bold text-text-heading">
                     {t('setting.eigent-cloud')}
                   </div>
@@ -1959,10 +1960,10 @@ export default function SettingModels() {
                     )}
                 </div>
                 {/* Bring Your Own Key Section */}
-                <div className="flex flex-col gap-1">
+                <div className="gap-1 flex flex-col">
                   <button
                     onClick={() => setByokCollapsed(!byokCollapsed)}
-                    className="flex items-center justify-between rounded-lg bg-transparent px-3 py-2 transition-colors hover:bg-surface-secondary"
+                    className="rounded-lg px-3 py-2 hover:bg-surface-secondary flex items-center justify-between bg-transparent transition-colors"
                   >
                     <div className="text-body-sm font-bold text-text-heading">
                       {t('setting.custom-model')}
@@ -1974,7 +1975,7 @@ export default function SettingModels() {
                     )}
                   </button>
                   <div
-                    className={`overflow-hidden transition-all duration-300 ease-in-out ${
+                    className={`ease-in-out overflow-hidden transition-all duration-300 ${
                       byokCollapsed
                         ? 'max-h-0 opacity-0'
                         : 'max-h-[2000px] opacity-100'
@@ -1994,10 +1995,10 @@ export default function SettingModels() {
                 </div>
 
                 {/* Local Model Section */}
-                <div className="flex flex-col gap-1">
+                <div className="gap-1 flex flex-col">
                   <button
                     onClick={() => setLocalCollapsed(!localCollapsed)}
-                    className="flex items-center justify-between rounded-lg bg-transparent px-3 py-2 transition-colors hover:bg-surface-secondary"
+                    className="rounded-lg px-3 py-2 hover:bg-surface-secondary flex items-center justify-between bg-transparent transition-colors"
                   >
                     <div className="text-body-sm font-bold text-text-heading">
                       {t('setting.local-model')}
@@ -2009,7 +2010,7 @@ export default function SettingModels() {
                     )}
                   </button>
                   <div
-                    className={`overflow-hidden transition-all duration-300 ease-in-out ${
+                    className={`ease-in-out overflow-hidden transition-all duration-300 ${
                       localCollapsed
                         ? 'max-h-0 opacity-0'
                         : 'max-h-[2000px] opacity-100'
@@ -2060,7 +2061,7 @@ export default function SettingModels() {
               </div>
             </div>
             {/* Main Content */}
-            <div className="sticky top-[136px] z-10 min-w-0 flex-1">
+            <div className="min-w-0 sticky top-[136px] z-10 flex-1">
               {renderContent()}
             </div>
           </div>
diff --git a/src/pages/Agents/Skills.tsx b/src/pages/Agents/Skills.tsx
index aeeedec01..52deb19f7 100644
--- a/src/pages/Agents/Skills.tsx
+++ b/src/pages/Agents/Skills.tsx
@@ -19,15 +19,20 @@ import { useSkillsStore, type Skill } from '@/store/skillsStore';
 import { Plus } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
 import SkillDeleteDialog from './components/SkillDeleteDialog';
 import SkillListItem from './components/SkillListItem';
 import SkillUploadDialog from './components/SkillUploadDialog';
 
 export default function Skills() {
   const { t } = useTranslation();
+  const [searchParams, setSearchParams] = useSearchParams();
   const { skills, syncFromDisk } = useSkillsStore();
   const [searchQuery, setSearchQuery] = useState('');
   const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
+  const [skillDialogMode, setSkillDialogMode] = useState<'upload' | 'create'>(
+    'upload'
+  );
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [skillToDelete, setSkillToDelete] = useState<Skill | null>(null);
 
@@ -37,6 +42,16 @@ export default function Skills() {
     syncFromDisk();
   }, [syncFromDisk]);
 
+  useEffect(() => {
+    const action = searchParams.get('skillAction');
+    if (action !== 'create' && action !== 'upload') return;
+    setSkillDialogMode(action);
+    setUploadDialogOpen(true);
+    const next = new URLSearchParams(searchParams);
+    next.delete('skillAction');
+    setSearchParams(next, { replace: true });
+  }, [searchParams, setSearchParams]);
+
   const yourSkills = useMemo(() => {
     return skills
       .filter((skill) => !skill.isExample)
@@ -75,17 +90,17 @@ export default function Skills() {
   return (
     <div className="m-auto flex h-auto w-full flex-1 flex-col">
       {/* Header Section */}
-      <div className="flex w-full items-center justify-between px-6 pb-6 pt-8">
+      <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
         <div className="text-heading-sm font-bold text-text-heading">
           {t('agents.skills')}
         </div>
       </div>
 
       {/* Content Section */}
-      <div className="mb-12 flex flex-col gap-6">
-        <div className="flex w-full flex-col items-center justify-between gap-4 rounded-2xl bg-surface-secondary px-6 py-4">
+      <div className="mb-12 gap-6 flex flex-col">
+        <div className="gap-4 rounded-2xl bg-surface-secondary px-6 py-4 flex w-full flex-col items-center justify-between">
           <Tabs defaultValue="your-skills" className="w-full">
-            <div className="sticky top-[84px] z-10 flex w-full items-center justify-between gap-4 border-x-0 border-b-[0.5px] border-t-0 border-solid border-border-secondary bg-surface-secondary">
+            <div className="gap-4 border-border-secondary bg-surface-secondary sticky top-[84px] z-10 flex w-full items-center justify-between border-x-0 border-t-0 border-b-[0.5px] border-solid">
               <TabsList
                 variant="outline"
                 className="h-auto flex-1 justify-start border-0 bg-transparent"
@@ -103,7 +118,7 @@ export default function Skills() {
                   {t('agents.example-skills')}
                 </TabsTrigger>
               </TabsList>
-              <div className="flex items-center gap-2">
+              <div className="gap-2 flex items-center">
                 <SearchInput
                   variant="icon"
                   value={searchQuery}
@@ -113,7 +128,10 @@ export default function Skills() {
                 <Button
                   variant="primary"
                   size="sm"
-                  onClick={() => setUploadDialogOpen(true)}
+                  onClick={() => {
+                    setSkillDialogMode('upload');
+                    setUploadDialogOpen(true);
+                  }}
                 >
                   <Plus className="h-4 w-4" />
                   {t('agents.add-skill')}
@@ -133,11 +151,16 @@ export default function Skills() {
                     !searchQuery ? t('agents.add-your-first-skill') : undefined
                   }
                   onAddClick={
-                    !searchQuery ? () => setUploadDialogOpen(true) : undefined
+                    !searchQuery
+                      ? () => {
+                          setSkillDialogMode('upload');
+                          setUploadDialogOpen(true);
+                        }
+                      : undefined
                   }
                 />
               ) : (
-                <div className="flex flex-col gap-3">
+                <div className="gap-3 flex flex-col">
                   {yourSkills.map((skill) => (
                     <SkillListItem
                       key={skill.id}
@@ -159,7 +182,7 @@ export default function Skills() {
                   }
                 />
               ) : (
-                <div className="flex flex-col gap-3">
+                <div className="gap-3 flex flex-col">
                   {exampleSkills.map((skill) => (
                     <SkillListItem
                       key={skill.id}
@@ -177,6 +200,7 @@ export default function Skills() {
       {/* Upload Dialog */}
       <SkillUploadDialog
         open={uploadDialogOpen}
+        mode={skillDialogMode}
         onClose={() => setUploadDialogOpen(false)}
       />
 
diff --git a/src/pages/Agents/components/SkillListItem.tsx b/src/pages/Agents/components/SkillListItem.tsx
index 194fdde4d..d1cb74a42 100644
--- a/src/pages/Agents/components/SkillListItem.tsx
+++ b/src/pages/Agents/components/SkillListItem.tsx
@@ -100,7 +100,7 @@ export default function SkillListItem(props: SkillListItemProps) {
       <div
         role={isClickable ? 'button' : undefined}
         tabIndex={isClickable ? 0 : undefined}
-        className={`focus-visible:ring-ring flex w-full flex-col flex-wrap items-center justify-center gap-3 rounded-2xl bg-surface-primary px-6 py-8 transition-colors focus:outline-none focus-visible:ring-2 ${isClickable ? 'cursor-pointer hover:bg-surface-tertiary' : ''}`}
+        className={`focus-visible:ring-ring gap-3 rounded-2xl bg-surface-primary px-6 py-8 flex w-full flex-col flex-wrap items-center justify-center transition-colors focus:outline-none focus-visible:ring-2 ${isClickable ? 'hover:bg-surface-tertiary cursor-pointer' : ''}`}
         onClick={isClickable ? props.onAddClick : undefined}
         onKeyDown={
           isClickable
@@ -177,17 +177,17 @@ export default function SkillListItem(props: SkillListItemProps) {
 
   return (
     <div
-      className={`w-full flex-1 flex-col justify-between rounded-2xl bg-surface-tertiary p-4 transition-colors ${skill.isExample && !skill.enabled ? 'opacity-50' : ''}`}
+      className={`rounded-2xl bg-surface-tertiary p-4 w-full flex-1 flex-col justify-between transition-colors ${skill.isExample && !skill.enabled ? 'opacity-50' : ''}`}
     >
       {/* Row 1: Name / Actions */}
       <div className="flex items-center justify-between">
-        <div className="flex min-w-0 items-center gap-2">
-          <span className="text-body-base truncate font-bold text-text-heading">
+        <div className="min-w-0 gap-2 flex items-center">
+          <span className="text-body-base font-bold text-text-heading truncate">
             {skill.name}
           </span>
         </div>
 
-        <div className="flex flex-shrink-0 items-center gap-md">
+        <div className="gap-md flex flex-shrink-0 items-center">
           <Switch
             checked={skill.enabled}
             onCheckedChange={() => toggleSkill(skill.id)}
@@ -195,7 +195,8 @@ export default function SkillListItem(props: SkillListItemProps) {
           <TooltipSimple content={t('agents.try-in-chat')}>
             <Button
               variant="ghost"
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               disabled={!skill.enabled}
               onClick={skill.enabled ? handleTryInChat : undefined}
             >
@@ -205,7 +206,7 @@ export default function SkillListItem(props: SkillListItemProps) {
           {!skill.isExample && onDelete && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon">
+                <Button variant="ghost" size="xs" buttonContent="icon-only">
                   <Ellipsis className="h-4 w-4 text-icon-primary" />
                 </Button>
               </DropdownMenuTrigger>
@@ -226,17 +227,17 @@ export default function SkillListItem(props: SkillListItemProps) {
       {/* Row 2: Description - 5 lines max, hover shows full */}
       <TooltipSimple
         content={skill.description}
-        className="max-w-sm whitespace-pre-wrap break-words"
+        className="max-w-sm break-words whitespace-pre-wrap"
       >
         <div className="w-full cursor-default">
-          <p className="line-clamp-5 overflow-hidden break-words text-body-sm text-text-label">
+          <p className="text-body-sm text-text-label line-clamp-5 overflow-hidden break-words">
             {skill.description}
           </p>
         </div>
       </TooltipSimple>
 
       {/* Row 3: Added time / Skill scope */}
-      <div className="flex flex-col items-start gap-2">
+      <div className="gap-2 flex flex-col items-start">
         <Button
           variant="ghost"
           size="sm"
@@ -250,14 +251,14 @@ export default function SkillListItem(props: SkillListItemProps) {
         </Button>
 
         {scopeOpen && (
-          <div className="flex w-full flex-wrap items-center gap-2 border-x-0 border-b-0 border-t-[0.5px] border-solid border-border-secondary pt-4">
+          <div className="gap-2 border-border-secondary pt-4 flex w-full flex-wrap items-center border-x-0 border-t-[0.5px] border-b-0 border-solid">
             {/* All agents as first tab; then each agent toggle */}
             <button
               type="button"
               onClick={handleToggleAllAgents}
-              className={`inline-flex items-center gap-2 rounded-full bg-surface-primary px-2 py-1 text-label-xs font-medium text-text-primary transition-opacity hover:opacity-100 [&>svg]:shrink-0 ${
+              className={`gap-2 bg-surface-primary px-2 py-1 text-label-xs font-medium text-text-primary inline-flex items-center rounded-full transition-opacity hover:opacity-100 [&>svg]:shrink-0 ${
                 isAllAgentsSelected
-                  ? 'opacity-100 [&>svg]:text-icon-success'
+                  ? '[&>svg]:text-icon-success opacity-100'
                   : 'opacity-60 [&>svg]:text-inherit'
               }`}
             >
@@ -282,9 +283,9 @@ export default function SkillListItem(props: SkillListItemProps) {
                   key={agent.value}
                   type="button"
                   onClick={() => handleToggleAgent(agent.value)}
-                  className={`inline-flex items-center gap-2 rounded-full bg-surface-primary px-2 py-1 text-label-xs font-medium text-text-primary transition-opacity hover:opacity-100 [&>svg]:shrink-0 ${
+                  className={`gap-2 bg-surface-primary px-2 py-1 text-label-xs font-medium text-text-primary inline-flex items-center rounded-full transition-opacity hover:opacity-100 [&>svg]:shrink-0 ${
                     isSelected
-                      ? 'opacity-100 [&>svg]:text-icon-success'
+                      ? '[&>svg]:text-icon-success opacity-100'
                       : 'opacity-50 [&>svg]:text-inherit'
                   }`}
                 >
diff --git a/src/pages/Agents/components/SkillUploadDialog.tsx b/src/pages/Agents/components/SkillUploadDialog.tsx
index 65d228a59..c5242f0dd 100644
--- a/src/pages/Agents/components/SkillUploadDialog.tsx
+++ b/src/pages/Agents/components/SkillUploadDialog.tsx
@@ -20,21 +20,25 @@ import {
   DialogContentSection,
   DialogHeader,
 } from '@/components/ui/dialog';
-import { parseSkillMd } from '@/lib/skillToolkit';
+import { Textarea } from '@/components/ui/textarea';
+import { buildSkillMd, parseSkillMd } from '@/lib/skillToolkit';
 import { useSkillsStore } from '@/store/skillsStore';
 import { AlertCircle, File, Upload, X } from 'lucide-react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 
 interface SkillUploadDialogProps {
   open: boolean;
   onClose: () => void;
+  /** File upload vs compose SKILL.md in the editor */
+  mode?: 'upload' | 'create';
 }
 
 export default function SkillUploadDialog({
   open,
   onClose,
+  mode = 'upload',
 }: SkillUploadDialogProps) {
   const { t } = useTranslation();
   const { addSkill, syncFromDisk } = useSkillsStore();
@@ -58,6 +62,19 @@ export default function SkillUploadDialog({
   >(new Set());
   const [pendingFileBuffer, setPendingFileBuffer] =
     useState<ArrayBuffer | null>(null);
+  const [composeContent, setComposeContent] = useState('');
+  const [savingCompose, setSavingCompose] = useState(false);
+
+  useEffect(() => {
+    if (!open || mode !== 'create') return;
+    setComposeContent(
+      buildSkillMd(
+        t('agents.create-skill-default-name'),
+        t('agents.create-skill-default-description'),
+        '## Instructions\n\n'
+      )
+    );
+  }, [open, mode, t]);
 
   const handleClose = useCallback(() => {
     setSelectedFile(null);
@@ -69,9 +86,36 @@ export default function SkillUploadDialog({
     setPendingConflicts([]);
     setConfirmedReplacements(new Set());
     setPendingFileBuffer(null);
+    setComposeContent('');
+    setSavingCompose(false);
     onClose();
   }, [onClose]);
 
+  const handleSaveCompose = useCallback(async () => {
+    const meta = parseSkillMd(composeContent);
+    if (!meta) {
+      toast.error(t('agents.upload-error-invalid-yaml'));
+      return;
+    }
+    setSavingCompose(true);
+    try {
+      await addSkill({
+        name: meta.name,
+        description: meta.description,
+        filePath: 'SKILL.md',
+        fileContent: composeContent,
+        scope: { isGlobal: true, selectedAgents: [] },
+        enabled: true,
+      });
+      toast.success(t('agents.skill-added-success'));
+      handleClose();
+    } catch {
+      toast.error(t('agents.skill-add-error'));
+    } finally {
+      setSavingCompose(false);
+    }
+  }, [addSkill, composeContent, handleClose, t]);
+
   const resetConflictState = useCallback(() => {
     setConflictDialog(null);
     setPendingConflicts([]);
@@ -413,111 +457,151 @@ export default function SkillUploadDialog({
     <>
       <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
         <DialogContent
-          size="sm"
+          size={mode === 'create' ? 'md' : 'sm'}
           showCloseButton
           onClose={handleClose}
           overlayVariant="dark"
         >
-          <DialogHeader title={t('agents.add-skill')} />
+          <DialogHeader
+            title={
+              mode === 'create'
+                ? t('agents.create-skill')
+                : t('agents.add-skill')
+            }
+          />
           <DialogContentSection>
-            <div className="flex flex-col gap-4">
-              {/* Drop Zone */}
-              <div
-                className={`relative cursor-pointer rounded-xl border-2 border-dashed p-8 transition-colors duration-300 ease-in ${
-                  uploadError
-                    ? 'border-border-cuation bg-surface-cuation'
-                    : isDragging
-                      ? 'border-border-focus bg-surface-tertiary'
-                      : 'border-border-secondary hover:border-border-primary hover:bg-surface-secondary'
-                }`}
-                onDragOver={handleDragOver}
-                onDragLeave={handleDragLeave}
-                onDrop={handleDrop}
-                onClick={() => fileInputRef.current?.click()}
-              >
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  accept=".skill,.md,.zip"
-                  onChange={handleFileSelect}
-                  className="hidden"
-                />
-
-                {selectedFile ? (
-                  <div className="flex flex-col items-center gap-6">
-                    <div className="flex items-center gap-2">
-                      <div
-                        className={`flex flex-shrink-0 items-center justify-center rounded-lg p-1 ${
-                          uploadError
-                            ? 'bg-surface-cuation'
-                            : 'bg-surface-tertiary'
-                        }`}
-                      >
-                        <File
-                          className={`h-4 w-4 ${
-                            uploadError
-                              ? 'text-icon-cuation'
-                              : 'text-icon-primary'
-                          }`}
-                        />
-                      </div>
-                      <div className="flex w-full min-w-0 flex-col">
-                        <span
-                          className={`truncate text-body-sm font-medium ${
+            <div className="gap-4 flex flex-col">
+              {mode === 'create' ? (
+                <>
+                  <p className="text-label-sm text-text-label">
+                    {t('agents.compose-skill-hint')}
+                  </p>
+                  <Textarea
+                    variant="none"
+                    value={composeContent}
+                    onChange={(e) => setComposeContent(e.target.value)}
+                    className="font-mono text-body-sm min-h-[220px] resize-y"
+                    spellCheck={false}
+                  />
+                  <div className="gap-2 flex justify-end">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      type="button"
+                      onClick={handleClose}
+                    >
+                      {t('layout.cancel')}
+                    </Button>
+                    <Button
+                      variant="primary"
+                      size="sm"
+                      type="button"
+                      disabled={savingCompose || !composeContent.trim()}
+                      onClick={() => void handleSaveCompose()}
+                    >
+                      {t('agents.save-skill')}
+                    </Button>
+                  </div>
+                </>
+              ) : null}
+              {mode === 'upload' ? (
+                <div
+                  className={`rounded-xl p-8 ease-in relative cursor-pointer border-2 border-dashed transition-colors duration-300 ${
+                    uploadError
+                      ? 'border-border-cuation bg-surface-cuation'
+                      : isDragging
+                        ? 'border-border-focus bg-surface-tertiary'
+                        : 'border-border-secondary hover:border-border-primary hover:bg-surface-secondary'
+                  }`}
+                  onDragOver={handleDragOver}
+                  onDragLeave={handleDragLeave}
+                  onDrop={handleDrop}
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept=".skill,.md,.zip"
+                    onChange={handleFileSelect}
+                    className="hidden"
+                  />
+
+                  {selectedFile ? (
+                    <div className="gap-6 flex flex-col items-center">
+                      <div className="gap-2 flex items-center">
+                        <div
+                          className={`rounded-lg p-1 flex flex-shrink-0 items-center justify-center ${
                             uploadError
-                              ? 'text-text-cuation'
-                              : 'text-text-heading'
+                              ? 'bg-surface-cuation'
+                              : 'bg-surface-tertiary'
                           }`}
                         >
-                          {selectedFile.name}
-                        </span>
+                          <File
+                            className={`h-4 w-4 ${
+                              uploadError
+                                ? 'text-icon-cuation'
+                                : 'text-icon-primary'
+                            }`}
+                          />
+                        </div>
+                        <div className="min-w-0 flex w-full flex-col">
+                          <span
+                            className={`text-body-sm font-medium truncate ${
+                              uploadError
+                                ? 'text-text-cuation'
+                                : 'text-text-heading'
+                            }`}
+                          >
+                            {selectedFile.name}
+                          </span>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleRemoveFile();
+                          }}
+                        >
+                          <X className="h-4 w-4" />
+                        </Button>
                       </div>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleRemoveFile();
-                        }}
-                      >
-                        <X className="h-4 w-4" />
-                      </Button>
-                    </div>
 
-                    <span
-                      className={`text-label-sm ${
-                        uploadError ? 'text-text-cuation' : 'text-text-label'
-                      }`}
-                    >
-                      {uploadError
-                        ? t('agents.reupload-file')
-                        : `${(selectedFile.size / 1024).toFixed(1)} KB`}
-                    </span>
-                  </div>
-                ) : (
-                  <div className="flex flex-col items-center gap-2">
-                    <div className="flex h-12 w-12 items-center justify-center">
-                      <Upload className="h-6 w-6 text-icon-secondary" />
-                    </div>
-                    <div className="flex flex-col items-center gap-1 text-center">
-                      <span className="text-body-sm font-medium text-text-heading">
-                        {t('agents.drag-and-drop')}
-                      </span>
-                      <span className="mt-1 text-label-sm text-text-label">
-                        {t('agents.or-click-to-browse')}
+                      <span
+                        className={`text-label-sm ${
+                          uploadError ? 'text-text-cuation' : 'text-text-label'
+                        }`}
+                      >
+                        {uploadError
+                          ? t('agents.reupload-file')
+                          : `${(selectedFile.size / 1024).toFixed(1)} KB`}
                       </span>
                     </div>
-                  </div>
-                )}
-              </div>
+                  ) : (
+                    <div className="gap-2 flex flex-col items-center">
+                      <div className="h-12 w-12 flex items-center justify-center">
+                        <Upload className="h-6 w-6 text-icon-secondary" />
+                      </div>
+                      <div className="gap-1 flex flex-col items-center text-center">
+                        <span className="text-body-sm font-medium text-text-heading">
+                          {t('agents.drag-and-drop')}
+                        </span>
+                        <span className="mt-1 text-label-sm text-text-label">
+                          {t('agents.or-click-to-browse')}
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ) : null}
 
               {/* Error notice */}
-              {uploadError && errorMessage && (
+              {mode === 'upload' && uploadError && errorMessage && (
                 <div
-                  className="flex items-center gap-4 rounded-xl border border-border-cuation bg-surface-cuation px-4 py-3"
+                  className="gap-4 rounded-xl border-border-cuation bg-surface-cuation px-4 py-3 flex items-center border"
                   role="alert"
                 >
-                  <AlertCircle className="h-4 w-4 shrink-0 text-icon-cuation" />
+                  <AlertCircle className="h-4 w-4 text-icon-cuation shrink-0" />
                   <span className="text-label-sm text-text-cuation">
                     {errorMessage}
                   </span>
@@ -525,19 +609,21 @@ export default function SkillUploadDialog({
               )}
 
               {/* File Requirements */}
-              <div className="rounded-xl bg-surface-secondary p-4">
-                <span className="text-label-sm font-bold text-text-body">
-                  {t('agents.file-requirements')}
-                </span>
-                <span className="mt-2 flex items-start gap-2 text-label-sm text-text-label">
-                  <span className="text-text-label">•</span>
-                  <span>{t('agents.file-requirements-detail-1')}</span>
-                </span>
-                <span className="mt-1 flex items-start gap-2 text-label-sm text-text-label">
-                  <span className="text-text-label">•</span>
-                  <span>{t('agents.file-requirements-detail-2')}</span>
-                </span>
-              </div>
+              {mode === 'upload' ? (
+                <div className="rounded-xl bg-surface-secondary p-4">
+                  <span className="text-label-sm font-bold text-text-body">
+                    {t('agents.file-requirements')}
+                  </span>
+                  <span className="mt-2 gap-2 text-label-sm text-text-label flex items-start">
+                    <span className="text-text-label">•</span>
+                    <span>{t('agents.file-requirements-detail-1')}</span>
+                  </span>
+                  <span className="mt-1 gap-2 text-label-sm text-text-label flex items-start">
+                    <span className="text-text-label">•</span>
+                    <span>{t('agents.file-requirements-detail-2')}</span>
+                  </span>
+                </div>
+              ) : null}
             </div>
           </DialogContentSection>
         </DialogContent>
diff --git a/src/pages/Agents/index.tsx b/src/pages/Agents/index.tsx
index 97d34b194..3b77807b5 100644
--- a/src/pages/Agents/index.tsx
+++ b/src/pages/Agents/index.tsx
@@ -15,15 +15,35 @@
 import VerticalNavigation, {
   type VerticalNavItem,
 } from '@/components/Navigation';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import Memory from './Memory';
 import Models from './Models';
 import Skills from './Skills';
 
+const AGENT_SECTIONS = ['models', 'skills', 'memory'] as const;
+type AgentSection = (typeof AGENT_SECTIONS)[number];
+
+function isAgentSection(value: string | null): value is AgentSection {
+  return value !== null && AGENT_SECTIONS.includes(value as AgentSection);
+}
+
 export default function Capabilities() {
   const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState('models');
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const sectionFromUrl = searchParams.get('section');
+
+  const [activeTab, setActiveTab] = useState<AgentSection>(() =>
+    isAgentSection(sectionFromUrl) ? sectionFromUrl : 'models'
+  );
+
+  useEffect(() => {
+    if (isAgentSection(sectionFromUrl)) {
+      setActiveTab(sectionFromUrl);
+    }
+  }, [sectionFromUrl]);
 
   const menuItems = [
     {
@@ -41,7 +61,9 @@ export default function Capabilities() {
   ];
 
   const handleTabChange = (tabId: string) => {
-    setActiveTab(tabId);
+    if (!AGENT_SECTIONS.includes(tabId as AgentSection)) return;
+    setActiveTab(tabId as AgentSection);
+    navigate(`?tab=agents&section=${tabId}`, { replace: true });
   };
 
   return (
diff --git a/src/pages/Browser/CDP.tsx b/src/pages/Browser/CDP.tsx
index 12d1e9293..2b059a74f 100644
--- a/src/pages/Browser/CDP.tsx
+++ b/src/pages/Browser/CDP.tsx
@@ -15,8 +15,9 @@
 import AlertDialog from '@/components/ui/alertDialog';
 import { Button } from '@/components/ui/button';
 import { Globe, Link2, Loader2, Plus, Trash2 } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
 
 interface CdpBrowser {
@@ -29,6 +30,7 @@ interface CdpBrowser {
 
 export default function CDP() {
   const { t } = useTranslation();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [cdpBrowsers, setCdpBrowsers] = useState<CdpBrowser[]>([]);
   const [deletingBrowser, setDeletingBrowser] = useState<string | null>(null);
   const [browserToRemove, setBrowserToRemove] = useState<CdpBrowser | null>(
@@ -83,7 +85,7 @@ export default function CDP() {
     }
   };
 
-  const handleOpenNewBrowser = async () => {
+  const handleOpenNewBrowser = useCallback(async () => {
     try {
       toast.loading(t('layout.launching-browser', { port: '...' }), {
         id: 'launch-browser',
@@ -103,7 +105,15 @@ export default function CDP() {
         id: 'launch-browser',
       });
     }
-  };
+  }, [t]);
+
+  useEffect(() => {
+    if (searchParams.get('browserAction') !== 'launch') return;
+    const next = new URLSearchParams(searchParams);
+    next.delete('browserAction');
+    setSearchParams(next, { replace: true });
+    void handleOpenNewBrowser();
+  }, [searchParams, setSearchParams, handleOpenNewBrowser]);
 
   const handleConnectExistingBrowser = () => {
     setConnectPort('');
@@ -188,14 +198,14 @@ export default function CDP() {
         confirmVariant="cuation"
       />
 
-      <div className="flex w-full items-center justify-between px-6 pb-6 pt-8">
+      <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
         <div className="text-heading-sm font-bold text-text-heading">
           {t('layout.cdp-browser-connection')}
         </div>
       </div>
 
-      <div className="flex flex-col gap-4 px-6">
-        <div className="flex items-center gap-3">
+      <div className="gap-4 px-6 flex flex-col">
+        <div className="gap-3 flex items-center">
           <Button variant="primary" size="sm" onClick={handleOpenNewBrowser}>
             <Plus className="h-4 w-4" />
             {t('layout.open-new-browser')}
@@ -210,20 +220,20 @@ export default function CDP() {
           </Button>
         </div>
 
-        <div className="flex flex-col gap-2">
+        <div className="gap-2 flex flex-col">
           <div className="text-body-base font-bold text-text-body">
             {t('layout.cdp-browser-pool')}
           </div>
 
           {cdpBrowsers.length > 0 ? (
-            <div className="flex flex-col gap-2">
+            <div className="gap-2 flex flex-col">
               {cdpBrowsers.map((browser) => (
                 <div
                   key={browser.id}
-                  className="flex items-center justify-between rounded-xl border-solid border-border-disabled bg-surface-tertiary px-4 py-2"
+                  className="rounded-xl border-border-disabled bg-surface-tertiary px-4 py-2 flex items-center justify-between border-solid"
                 >
-                  <div className="flex w-full flex-row items-center gap-2">
-                    <div className="h-2 w-2 shrink-0 rounded-full bg-text-success" />
+                  <div className="gap-2 flex w-full flex-row items-center">
+                    <div className="h-2 w-2 bg-text-success shrink-0 rounded-full" />
                     <div className="flex flex-col items-start justify-start">
                       <span className="text-body-sm font-bold text-text-body">
                         {browser.name || `Browser ${browser.port}`}
@@ -235,7 +245,8 @@ export default function CDP() {
                   </div>
                   <Button
                     variant="ghost"
-                    size="icon"
+                    size="xs"
+                    buttonContent="icon-only"
                     onClick={() => setBrowserToRemove(browser)}
                     disabled={deletingBrowser === browser.id}
                     className="ml-3 flex-shrink-0"
@@ -246,12 +257,12 @@ export default function CDP() {
               ))}
             </div>
           ) : (
-            <div className="flex flex-col items-center justify-center px-4 py-8">
+            <div className="px-4 py-8 flex flex-col items-center justify-center">
               <Globe className="mb-4 h-12 w-12 text-icon-secondary opacity-50" />
-              <div className="text-body-base text-center font-bold text-text-label">
+              <div className="text-body-base font-bold text-text-label text-center">
                 {t('layout.no-browsers-in-pool')}
               </div>
-              <p className="text-center text-label-xs font-medium text-text-label">
+              <p className="text-label-xs font-medium text-text-label text-center">
                 {t('layout.add-browsers-hint')}
               </p>
             </div>
@@ -260,8 +271,8 @@ export default function CDP() {
       </div>
 
       {showConnectDialog && (
-        <div className="bg-black/50 fixed inset-0 z-50 flex items-center justify-center">
-          <div className="w-full max-w-md rounded-xl bg-surface-primary p-6 shadow-lg">
+        <div className="bg-black/50 inset-0 fixed z-50 flex items-center justify-center">
+          <div className="max-w-md rounded-xl bg-surface-primary p-6 shadow-lg w-full">
             <div className="text-body-base mb-2 font-bold text-text-heading">
               {t('layout.connect-existing-browser')}
             </div>
@@ -276,7 +287,7 @@ export default function CDP() {
                 setConnectError('');
               }}
               placeholder={t('layout.enter-port-number')}
-              className="w-full rounded-lg border border-border-disabled bg-surface-secondary px-4 py-2 text-body-sm text-text-body outline-none focus:border-border-focus"
+              className="rounded-lg border-border-disabled bg-surface-secondary px-4 py-2 text-body-sm text-text-body focus:border-border-focus w-full border outline-none"
               onKeyDown={(event) => {
                 if (event.key === 'Enter') handleCheckAndConnect();
               }}
@@ -286,7 +297,7 @@ export default function CDP() {
                 {connectError}
               </p>
             )}
-            <div className="mt-4 flex justify-end gap-2">
+            <div className="mt-4 gap-2 flex justify-end">
               <Button
                 variant="ghost"
                 size="sm"
diff --git a/src/pages/Browser/Cookies.tsx b/src/pages/Browser/Cookies.tsx
index 141e50d37..0b019d119 100644
--- a/src/pages/Browser/Cookies.tsx
+++ b/src/pages/Browser/Cookies.tsx
@@ -220,20 +220,20 @@ export default function Cookies() {
         confirmVariant="information"
       />
 
-      <div className="flex w-full items-center justify-between px-6 pb-6 pt-8">
+      <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
         <div className="text-heading-sm font-bold text-text-heading">
           {t('layout.browser-cookie-management')}
         </div>
       </div>
 
-      <div className="flex flex-col gap-4">
-        <div className="relative flex w-full flex-col rounded-xl border border-border-disabled bg-surface-secondary p-6">
-          <div className="max-w-[600px] text-body-sm text-text-label">
+      <div className="gap-4 flex flex-col">
+        <div className="rounded-xl border-border-disabled bg-surface-secondary p-6 relative flex w-full flex-col border">
+          <div className="text-body-sm text-text-label max-w-[600px]">
             {t('layout.browser-cookies-description')}
           </div>
-          <div className="mt-4 flex w-full flex-col gap-3 border-[0.5px] border-x-0 border-b-0 border-solid border-border-secondary pt-3">
-            <div className="flex flex-row items-center justify-between py-2">
-              <div className="flex flex-row items-center justify-start gap-2">
+          <div className="mt-4 gap-3 border-border-secondary pt-3 flex w-full flex-col border-[0.5px] border-x-0 border-b-0 border-solid">
+            <div className="py-2 flex flex-row items-center justify-between">
+              <div className="gap-2 flex flex-row items-center justify-start">
                 <div className="text-body-base font-bold text-text-body">
                   {t('layout.cookie-domains')}
                 </div>
@@ -244,14 +244,14 @@ export default function Cookies() {
                 )}
               </div>
 
-              <div className="flex items-center gap-2">
+              <div className="gap-2 flex items-center">
                 {cookieDomains.length > 0 && (
                   <Button
                     variant="ghost"
                     size="sm"
                     onClick={handleDeleteAll}
                     disabled={deletingAll}
-                    className="uppercase !text-text-cuation"
+                    className="!text-text-cuation uppercase"
                   >
                     {deletingAll
                       ? t('layout.deleting')
@@ -283,14 +283,14 @@ export default function Cookies() {
             </div>
 
             {cookieDomains.length > 0 ? (
-              <div className="flex flex-col gap-2">
+              <div className="gap-2 flex flex-col">
                 {groupDomainsByMain(cookieDomains).map((group, index) => (
                   <div
                     key={index}
-                    className="flex items-center justify-between rounded-xl border-solid border-border-disabled bg-surface-tertiary px-4 py-2"
+                    className="rounded-xl border-border-disabled bg-surface-tertiary px-4 py-2 flex items-center justify-between border-solid"
                   >
                     <div className="flex w-full flex-col items-start justify-start">
-                      <span className="truncate text-body-sm font-bold text-text-body">
+                      <span className="text-body-sm font-bold text-text-body truncate">
                         {group.mainDomain}
                       </span>
                       <span className="mt-1 text-label-xs text-text-label">
@@ -300,7 +300,8 @@ export default function Cookies() {
                     </div>
                     <Button
                       variant="ghost"
-                      size="icon"
+                      size="xs"
+                      buttonContent="icon-only"
                       onClick={() =>
                         handleDeleteMainDomain(
                           group.mainDomain,
@@ -316,12 +317,12 @@ export default function Cookies() {
                 ))}
               </div>
             ) : (
-              <div className="flex flex-col items-center justify-center px-4 py-8">
+              <div className="px-4 py-8 flex flex-col items-center justify-center">
                 <Cookie className="mb-4 h-12 w-12 text-icon-secondary opacity-50" />
-                <div className="text-body-base text-center font-bold text-text-label">
+                <div className="text-body-base font-bold text-text-label text-center">
                   {t('layout.no-cookies-saved-yet')}
                 </div>
-                <p className="text-center text-label-xs font-medium text-text-label">
+                <p className="text-label-xs font-medium text-text-label text-center">
                   {t('layout.no-cookies-saved-yet-description')}
                 </p>
               </div>
@@ -329,7 +330,7 @@ export default function Cookies() {
           </div>
         </div>
 
-        <div className="w-full text-center text-label-xs text-text-label">
+        <div className="text-label-xs text-text-label w-full text-center">
           For more information, check out our
           <a
             href="https://www.eigent.ai/privacy-policy"
diff --git a/src/pages/Browser/index.tsx b/src/pages/Browser/index.tsx
index bccdb50ce..94f70417e 100644
--- a/src/pages/Browser/index.tsx
+++ b/src/pages/Browser/index.tsx
@@ -15,15 +15,41 @@
 import VerticalNavigation, {
   type VerticalNavItem,
 } from '@/components/Navigation';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
 import CDP from './CDP';
 import Cookies from './Cookies';
 import Extension from './Extension';
 
+const BROWSER_SECTIONS = ['cdp', 'extension', 'cookies'] as const;
+type BrowserSection = (typeof BROWSER_SECTIONS)[number];
+
+function isBrowserSection(value: string | null): value is BrowserSection {
+  return value !== null && BROWSER_SECTIONS.includes(value as BrowserSection);
+}
+
 export default function Browser() {
   const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState('cdp');
+  const [searchParams, setSearchParams] = useSearchParams();
+  const sectionFromUrl = searchParams.get('browserSection');
+  const [activeTab, setActiveTab] = useState<BrowserSection>(() =>
+    isBrowserSection(sectionFromUrl) ? sectionFromUrl : 'cdp'
+  );
+
+  useEffect(() => {
+    if (searchParams.get('browserAction') === 'launch') {
+      setActiveTab('cdp');
+    }
+  }, [searchParams]);
+
+  useEffect(() => {
+    if (!isBrowserSection(sectionFromUrl)) return;
+    setActiveTab(sectionFromUrl);
+    const next = new URLSearchParams(searchParams);
+    next.delete('browserSection');
+    setSearchParams(next, { replace: true });
+  }, [sectionFromUrl, searchParams, setSearchParams]);
 
   const menuItems = [
     {
@@ -41,7 +67,7 @@ export default function Browser() {
   ];
 
   const handleTabChange = (tabId: string) => {
-    setActiveTab(tabId);
+    if (isBrowserSection(tabId)) setActiveTab(tabId);
   };
 
   return (
diff --git a/src/pages/Connectors/MCP.tsx b/src/pages/Connectors/MCP.tsx
index 67cd499c4..90b713a7c 100644
--- a/src/pages/Connectors/MCP.tsx
+++ b/src/pages/Connectors/MCP.tsx
@@ -30,6 +30,7 @@ import { motion } from 'framer-motion';
 import { Plus } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
 import MCPAddDialog from './components/MCPAddDialog';
 import MCPConfigDialog from './components/MCPConfigDialog';
 import MCPDeleteDialog from './components/MCPDeleteDialog';
@@ -46,6 +47,7 @@ const EXCLUDED_FROM_MCP = ['Search'];
 export default function SettingMCP() {
   const { checkAgentTool } = useAuthStore();
   const { t } = useTranslation();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [items, setItems] = useState<MCPUserItem[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
@@ -86,6 +88,24 @@ export default function SettingMCP() {
   const [isLoadingIntegrations, setIsLoadingIntegrations] = useState(true);
   const [refreshKey, setRefreshKey] = useState<number>(0);
 
+  useEffect(() => {
+    const action = searchParams.get('connectorAction');
+    const section = searchParams.get('connectorSection');
+    if (action !== 'add' && section !== 'mcp-tools' && section !== 'your-mcp') {
+      return;
+    }
+    const next = new URLSearchParams(searchParams);
+    if (action === 'add') {
+      setShowAdd(true);
+      next.delete('connectorAction');
+    }
+    if (section === 'mcp-tools' || section === 'your-mcp') {
+      setActiveTab(section);
+      next.delete('connectorSection');
+    }
+    setSearchParams(next, { replace: true });
+  }, [searchParams, setSearchParams]);
+
   // Filter integrations (MCP & Tools) by search
   const filteredIntegrations = useMemo(() => {
     if (!searchQuery.trim()) return integrations;
@@ -537,21 +557,21 @@ export default function SettingMCP() {
   return (
     <div className="m-auto flex h-auto w-full flex-1 flex-col">
       {/* Header Section */}
-      <div className="flex w-full items-center justify-between px-6 pb-6 pt-8">
+      <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
         <div className="text-heading-sm font-bold text-text-heading">
           {t('setting.mcp-and-tools')}
         </div>
       </div>
 
       {/* Content Section */}
-      <div className="mb-12 flex flex-col gap-6">
-        <div className="flex w-full flex-col items-center justify-between gap-4 rounded-2xl bg-surface-secondary px-6 py-4">
+      <div className="mb-12 gap-6 flex flex-col">
+        <div className="gap-4 rounded-2xl bg-surface-secondary px-6 py-4 flex w-full flex-col items-center justify-between">
           <Tabs
             value={activeTab}
             onValueChange={(v) => setActiveTab(v as 'mcp-tools' | 'your-mcp')}
             className="w-full"
           >
-            <div className="sticky top-[84px] z-10 flex w-full items-center justify-between gap-4 border-x-0 border-b-[0.5px] border-t-0 border-solid border-border-secondary bg-surface-secondary">
+            <div className="gap-4 border-border-secondary bg-surface-secondary sticky top-[84px] z-10 flex w-full items-center justify-between border-x-0 border-t-0 border-b-[0.5px] border-solid">
               <TabsList
                 variant="outline"
                 className="h-auto flex-1 justify-start border-0 bg-transparent"
@@ -569,7 +589,7 @@ export default function SettingMCP() {
                   {t('setting.your-own-mcps')}
                 </TabsTrigger>
               </TabsList>
-              <div className="flex items-center gap-2">
+              <div className="gap-2 flex items-center">
                 <SearchInput
                   variant="icon"
                   value={searchQuery}
@@ -588,22 +608,22 @@ export default function SettingMCP() {
             </div>
             <TabsContent value="mcp-tools" className="mt-4">
               {isLoadingIntegrations ? (
-                <div className="flex w-full flex-col items-start justify-start gap-4">
+                <div className="gap-4 flex w-full flex-col items-start justify-start">
                   {[1, 2, 3, 4].map((i) => (
                     <div
                       key={i}
-                      className="relative w-full overflow-hidden rounded-2xl bg-surface-tertiary px-6 py-4"
+                      className="rounded-2xl bg-surface-tertiary px-6 py-4 relative w-full overflow-hidden"
                     >
-                      <div className="flex w-full flex-row items-center justify-between gap-xs">
-                        <div className="flex flex-row items-center gap-xs">
-                          <div className="mr-2 h-3 w-3 rounded-full bg-surface-hover-subtle" />
+                      <div className="gap-xs flex w-full flex-row items-center justify-between">
+                        <div className="gap-xs flex flex-row items-center">
+                          <div className="mr-2 h-3 w-3 bg-surface-hover-subtle rounded-full" />
                           <div className="h-5 w-32 rounded-md bg-surface-hover-subtle" />
                           <div className="h-4 w-4 rounded bg-surface-hover-subtle" />
                         </div>
                         <div className="h-9 w-20 rounded-lg bg-surface-hover-subtle" />
                       </div>
                       <motion.div
-                        className="via-white/20 absolute inset-0 w-1/2 bg-gradient-to-r from-transparent to-transparent"
+                        className="via-white/20 inset-0 absolute w-1/2 bg-gradient-to-r from-transparent to-transparent"
                         initial={{ x: '-100%' }}
                         animate={{ x: '200%' }}
                         transition={{
@@ -616,7 +636,7 @@ export default function SettingMCP() {
                   ))}
                 </div>
               ) : filteredIntegrations.length === 0 ? (
-                <div className="py-8 text-center text-text-label">
+                <div className="py-8 text-text-label text-center">
                   {searchQuery.trim()
                     ? t('dashboard.no-results')
                     : t('setting.no-mcp-servers')}
@@ -633,15 +653,15 @@ export default function SettingMCP() {
             </TabsContent>
             <TabsContent value="your-mcp" className="mt-4">
               {isLoading && (
-                <div className="py-8 text-center text-text-label">
+                <div className="py-8 text-text-label text-center">
                   {t('setting.loading')}
                 </div>
               )}
               {error && (
-                <div className="py-8 text-center text-text-error">{error}</div>
+                <div className="py-8 text-text-error text-center">{error}</div>
               )}
               {!isLoading && !error && items.length === 0 && (
-                <div className="flex flex-col items-center justify-center gap-4 py-12">
+                <div className="gap-4 py-12 flex flex-col items-center justify-center">
                   <p className="text-body-md text-text-label">
                     {t('setting.no-mcp-servers')}
                   </p>
@@ -659,7 +679,7 @@ export default function SettingMCP() {
                 !error &&
                 items.length > 0 &&
                 filteredItems.length === 0 && (
-                  <div className="py-8 text-center text-text-label">
+                  <div className="py-8 text-text-label text-center">
                     {t('dashboard.no-results')}
                   </div>
                 )}
diff --git a/src/pages/Connectors/components/MCPListItem.tsx b/src/pages/Connectors/components/MCPListItem.tsx
index 6c6661645..de5374d61 100644
--- a/src/pages/Connectors/components/MCPListItem.tsx
+++ b/src/pages/Connectors/components/MCPListItem.tsx
@@ -71,7 +71,7 @@ export default function MCPListItem({
 						<PopoverTrigger asChild>
 							<Button
 								variant="ghost"
-								size="icon"
+								size="xs" buttonContent="icon-only"
 								onClick={() => setShowMenu((v) => !v)}
 								disabled={loading}
 							>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index f3d7aaf25..33f107094 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -15,173 +15,139 @@
 import { checkLocalServerStale } from '@/api/http';
 import ChatBox from '@/components/ChatBox';
 import Folder from '@/components/Folder';
+import ProjectPageSidebar from '@/components/ProjectPageSidebar';
 import UpdateElectron from '@/components/update';
-import Workflow from '@/components/WorkFlow';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
 import { ChatTaskStatus } from '@/types/constants';
 import { ReactFlowProvider } from '@xyflow/react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { AnimatePresence, motion, type Transition } from 'framer-motion';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { AddWorker } from '@/components/AddWorker';
-import {
-  MenuToggleGroup,
-  MenuToggleItem,
-} from '@/components/MenuButton/MenuButton';
 import { TriggerDialog } from '@/components/Trigger/TriggerDialog';
 import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import ExpandedOverlay from '@/components/Workforce/ExpandedOverlay';
+import { WorkspaceContent } from '@/components/Workforce/WorkspaceContent';
 
 import { useAuthStore } from '@/store/authStore';
 import { usePageTabStore } from '@/store/pageTabStore';
+import { useTriggerStore } from '@/store/triggerStore';
 import {
-  useTriggerStore,
-  WebSocketConnectionStatus,
-} from '@/store/triggerStore';
-import { Inbox, LayoutGrid, Plus, RefreshCw, Zap, ZapOff } from 'lucide-react';
-import Overview from './Project/Triggers';
+  ArrowUpDown,
+  Maximize2,
+  Plus,
+  SquareChevronRight,
+  SquareCode,
+  X,
+} from 'lucide-react';
+import Overview, {
+  EXECUTION_LOGS_OPEN_STORAGE_KEY,
+  sortTriggersList,
+  type TriggerSortKey,
+} from '../components/Trigger/Triggers';
+
+import { ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 
 import BottomBar from '@/components/BottomBar';
-import BrowserAgentWorkspace from '@/components/BrowserAgentWorkspace';
-import TerminalAgentWorkspace from '@/components/TerminalAgentWorkspace';
-import { Popover, PopoverContent } from '@/components/ui/popover';
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from '@/components/ui/resizable';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-
-// Connection status icon component
-function ConnectionStatusIcon({
-  status,
-}: {
-  status: WebSocketConnectionStatus;
-}) {
-  const getStatusColor = () => {
-    switch (status) {
-      case 'connected':
-        return 'text-green-500';
-      case 'connecting':
-        return 'text-yellow-500 animate-pulse';
-      case 'unhealthy':
-        return 'text-orange-500';
-      case 'disconnected':
-      default:
-        return 'text-icon-secondary';
-    }
-  };
-
-  const getStatusTooltip = () => {
-    switch (status) {
-      case 'connected':
-        return 'Connected to trigger listener';
-      case 'connecting':
-        return 'Connecting...';
-      case 'unhealthy':
-        return 'Connection unhealthy - click refresh to reconnect';
-      case 'disconnected':
-      default:
-        return 'Disconnected from trigger listener';
-    }
-  };
-
-  const isConnected = status === 'connected';
 
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          {isConnected ? (
-            <Zap className={getStatusColor()} />
-          ) : (
-            <ZapOff className={getStatusColor()} />
-          )}
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>{getStatusTooltip()}</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}
+/** Keep in sync with ProjectPageSidebar PROJECT_SIDEBAR_SPRING */
+const HOME_MAIN_LAYOUT_SPRING: Transition = {
+  type: 'spring',
+  stiffness: 380,
+  damping: 38,
+  mass: 0.85,
+};
 
 export default function Home() {
   const { t } = useTranslation();
   //Get Chatstore for the active project's task
   const { chatStore, projectStore } = useChatStoreAdapter();
 
-  const {
-    activeTab,
-    activeWorkspaceTab,
-    setActiveWorkspaceTab,
-    chatPanelPosition,
-    hasTriggers,
-    setHasTriggers,
-    hasAgentFiles,
-    setHasAgentFiles,
-    unviewedTabs,
-    markTabAsUnviewed,
-  } = usePageTabStore();
-
-  const { wsConnectionStatus, triggerReconnect } = useTriggerStore();
-  const authStore = useAuthStore.getState();
+  const { activeWorkspaceTab, setHasAgentFiles } = usePageTabStore();
+  const workspaceChatFocusRequestId = usePageTabStore(
+    (s) => s.workspaceChatFocusRequestId
+  );
+
+  const { wsConnectionStatus, triggers } = useTriggerStore();
+  const email = useAuthStore((s) => s.email);
 
   const [activeWebviewId, setActiveWebviewId] = useState<string | null>(null);
   const [isChatBoxVisible, setIsChatBoxVisible] = useState(true);
   const [addWorkerDialogOpen, setAddWorkerDialogOpen] = useState(false);
+  const [isWorkforceExpandedOverlayOpen, setIsWorkforceExpandedOverlayOpen] =
+    useState(false);
   const [triggerDialogOpen, setTriggerDialogOpen] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [triggerSortBy, setTriggerSortBy] =
+    useState<TriggerSortKey>('createdAt');
+  const [triggerSelectedId, setTriggerSelectedId] = useState<number | null>(
+    null
+  );
+  const [triggerExecutionLogsOpen, setTriggerExecutionLogsOpen] = useState(
+    () => {
+      if (typeof window === 'undefined') return false;
+      return (
+        window.localStorage.getItem(EXECUTION_LOGS_OPEN_STORAGE_KEY) === 'true'
+      );
+    }
+  );
 
-  const toggleChatBox = () => {
-    setIsChatBoxVisible((prev) => !prev);
-  };
+  const sortedTriggersForHeader = useMemo(
+    () => sortTriggersList(triggers, triggerSortBy),
+    [triggers, triggerSortBy]
+  );
 
-  // Handle file upload
-  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (!files || files.length === 0) return;
+  const triggerSortLabel = useMemo(() => {
+    switch (triggerSortBy) {
+      case 'createdAt':
+        return t('triggers.created-time');
+      case 'lastExecutionTime':
+        return t('triggers.last-execution-label');
+      case 'tokens':
+        return t('triggers.token-cost');
+      default:
+        return t('triggers.created-time');
+    }
+  }, [triggerSortBy, t]);
 
-    // Get the active project's folder path
-    const activeProjectId = projectStore.activeProjectId;
-    if (!activeProjectId) return;
+  useEffect(() => {
+    window.localStorage.setItem(
+      EXECUTION_LOGS_OPEN_STORAGE_KEY,
+      String(triggerExecutionLogsOpen)
+    );
+  }, [triggerExecutionLogsOpen]);
 
-    // Upload files using electron API
-    for (const file of Array.from(files)) {
-      try {
-        const reader = new FileReader();
-        reader.onload = async () => {
-          if (reader.result && window.ipcRenderer) {
-            await window.ipcRenderer.invoke('save-file-to-agent-folder', {
-              projectId: activeProjectId,
-              fileName: file.name,
-              content: reader.result,
-            });
-            // Mark the inbox tab as having new content
-            setHasAgentFiles(true);
-            if (activeWorkspaceTab !== 'inbox') {
-              markTabAsUnviewed('inbox');
-            }
-          }
-        };
-        reader.readAsArrayBuffer(file);
-      } catch (error) {
-        console.error('Error uploading file:', error);
-      }
+  useEffect(() => {
+    setTriggerSelectedId(null);
+    setIsWorkforceExpandedOverlayOpen(false);
+  }, [projectStore.activeProjectId]);
+
+  useEffect(() => {
+    if (activeWorkspaceTab !== 'workforce') {
+      setIsWorkforceExpandedOverlayOpen(false);
     }
+  }, [activeWorkspaceTab]);
+
+  useEffect(() => {
+    if (workspaceChatFocusRequestId === 0) return;
+    setIsChatBoxVisible(true);
+  }, [workspaceChatFocusRequestId]);
+
+  const toggleWorkforceExpandedOverlay = useCallback(() => {
+    setIsWorkforceExpandedOverlayOpen((prev) => !prev);
+  }, []);
 
-    // Reset input
-    e.target.value = '';
-  };
+  const closeWorkforceExpandedOverlay = useCallback(() => {
+    setIsWorkforceExpandedOverlayOpen(false);
+  }, []);
 
-  // One-time check: warn if local server is outdated after a git pull
   useEffect(() => {
     checkLocalServerStale();
   }, []);
@@ -189,11 +155,11 @@ export default function Home() {
   // Detect files and triggers when project loads
   useEffect(() => {
     const detectAgentFiles = async () => {
-      if (!projectStore.activeProjectId || !authStore.email) return;
+      if (!projectStore.activeProjectId || !email) return;
       try {
         const files = await window.ipcRenderer?.invoke(
           'get-project-file-list',
-          authStore.email,
+          email,
           projectStore.activeProjectId
         );
         setHasAgentFiles(files && files.length > 0);
@@ -202,17 +168,8 @@ export default function Home() {
       }
     };
 
-    // For triggers, since we're using mock data, we set hasTriggers to true
-    // When you have real trigger data, replace this with an API call
-    setHasTriggers(true); // Mock data has triggers
-
     detectAgentFiles();
-  }, [
-    projectStore.activeProjectId,
-    authStore.email,
-    setHasAgentFiles,
-    setHasTriggers,
-  ]);
+  }, [projectStore.activeProjectId, email, setHasAgentFiles]);
 
   // Add webview-show listener in useEffect with cleanup
   useEffect(() => {
@@ -364,489 +321,323 @@ export default function Home() {
     }
   }, [chatStore, projectStore, getSize]);
 
+  const getAllChatStoresMemoized = useMemo(() => {
+    if (!projectStore.activeProjectId) return [];
+    return projectStore.getAllChatStores(projectStore.activeProjectId);
+  }, [projectStore]);
+
+  /** Matches ChatBox: any task in the project has chat content (not welcome-only). */
+  const hasAnyMessages = useMemo(() => {
+    if (!chatStore) return false;
+    if (chatStore.activeTaskId && chatStore.tasks[chatStore.activeTaskId]) {
+      const activeTask = chatStore.tasks[chatStore.activeTaskId];
+      if (
+        (activeTask.messages && activeTask.messages.length > 0) ||
+        activeTask.hasMessages
+      ) {
+        return true;
+      }
+    }
+    return getAllChatStoresMemoized.some(({ chatStore: store }) => {
+      const state = store.getState();
+      return (
+        state.activeTaskId &&
+        state.tasks[state.activeTaskId] &&
+        (state.tasks[state.activeTaskId].messages.length > 0 ||
+          state.tasks[state.activeTaskId].hasMessages)
+      );
+    });
+  }, [chatStore, getAllChatStoresMemoized]);
+
   if (!chatStore) {
     return <div>{t('triggers.loading')}</div>;
   }
 
-  // Render workspace content based on active workspace tab
-  const renderWorkspaceContent = () => {
-    const activeTask = chatStore.activeTaskId
-      ? chatStore.tasks[chatStore.activeTaskId]
-      : null;
-    const activeWorkSpace = activeTask?.activeWorkspace;
-
-    switch (activeWorkspaceTab) {
-      case 'triggers':
-        return (
-          <div
-            className={`h-full w-full ${wsConnectionStatus === 'disconnected' ? 'pointer-events-none opacity-50 grayscale' : ''}`}
-          >
-            <Overview />
-          </div>
-        );
-      case 'inbox':
-        return (
-          <div className="flex h-full w-full flex-1 items-center justify-center">
-            <div className="relative z-10 h-full w-full">
-              <Folder />
-            </div>
-          </div>
-        );
-      case 'workforce':
-      default:
-        // If no active task, show default workflow view
-        if (!activeTask || !activeWorkSpace) {
-          return (
-            <div className="flex h-full w-full flex-1 items-center justify-center">
-              <div className="relative flex h-full w-full flex-col">
-                <div className="pointer-events-none absolute inset-0 rounded-xl bg-transparent"></div>
-                <div className="relative z-10 h-full w-full">
-                  <Workflow taskAssigning={[]} />
-                </div>
-              </div>
-            </div>
-          );
-        }
-
-        return (
-          <>
-            {activeTask.taskAssigning?.find(
-              (agent) => agent.agent_id === activeWorkSpace
-            )?.type === 'browser_agent' && (
-              <div className="flex h-full w-full flex-1 duration-300 animate-in fade-in-0 slide-in-from-right-2">
-                <BrowserAgentWorkspace />
-              </div>
-            )}
-            {activeWorkSpace === 'workflow' && (
-              <div className="flex h-full w-full flex-1 items-center justify-center">
-                <div className="relative flex h-full w-full flex-col">
-                  {/*filter blur */}
-                  <div className="pointer-events-none absolute inset-0 rounded-xl bg-transparent"></div>
-                  <div className="relative z-10 h-full w-full">
-                    <Workflow taskAssigning={activeTask.taskAssigning || []} />
-                  </div>
-                </div>
-              </div>
-            )}
-            {activeTask.taskAssigning?.find(
-              (agent) => agent.agent_id === activeWorkSpace
-            )?.type === 'developer_agent' && (
-              <div className="flex h-full w-full flex-1">
-                <TerminalAgentWorkspace />
-                {/* <Terminal content={[]} /> */}
-              </div>
-            )}
-            {activeWorkSpace === 'documentWorkSpace' && (
-              <div className="flex h-full w-full flex-1 items-center justify-center">
-                <div className="relative flex h-full w-full flex-col">
-                  {/*filter blur */}
-                  <div className="blur-bg pointer-events-none absolute inset-0 rounded-xl bg-surface-secondary"></div>
-                  <div className="relative z-10 h-full w-full">
-                    <Folder />
-                  </div>
-                </div>
-              </div>
-            )}
-            {activeTask.taskAssigning?.find(
-              (agent) => agent.agent_id === activeWorkSpace
-            )?.type === 'document_agent' && (
-              <div className="flex h-full w-full flex-1 items-center justify-center">
-                <div className="relative flex h-full w-full flex-col">
-                  {/*filter blur */}
-                  <div className="blur-bg pointer-events-none absolute inset-0 rounded-xl bg-surface-secondary"></div>
-                  <div className="relative z-10 h-full w-full">
-                    <Folder
-                      data={activeTask.taskAssigning?.find(
-                        (agent) => agent.agent_id === activeWorkSpace
-                      )}
-                    />
-                  </div>
-                </div>
-              </div>
-            )}
-            {/* Inbox Workspace - kept for backward compatibility */}
-            {activeWorkSpace === 'inbox' && (
-              <div className="flex h-full w-full flex-1 items-center justify-center">
-                <div className="relative flex h-full w-full flex-col">
-                  {/*filter blur */}
-                  <div className="blur-bg pointer-events-none absolute inset-0 rounded-xl bg-surface-secondary"></div>
-                  <div className="relative z-10 h-full w-full">
-                    <Folder />
-                  </div>
-                </div>
-              </div>
-            )}
-          </>
-        );
-    }
-  };
+  // Task id only — including `activeWorkspace` remounted the motion wrapper on every
+  // agent tab switch and replayed the blur/fade on the folded agent list.
+  const workforcePanelKey = chatStore.activeTaskId ?? '';
 
-  // Render Tasks tab content (default)
   return (
     <ReactFlowProvider>
-      <div className="flex h-full min-h-0 flex-row overflow-hidden px-2 pb-2 pt-10">
-        <div className="relative flex h-full min-h-0 min-w-0 flex-1 items-center justify-center gap-4 overflow-hidden">
+      <div className="min-h-0 px-2 pb-2 pt-10 flex h-full flex-row overflow-hidden">
+        <ProjectPageSidebar chatStore={chatStore} />
+        <motion.div
+          layout
+          transition={{ layout: HOME_MAIN_LAYOUT_SPRING }}
+          className="min-h-0 min-w-0 gap-4 relative flex h-full flex-1 items-center justify-center overflow-hidden"
+        >
           <ResizablePanelGroup
+            id="home-main-panel-group"
             direction="horizontal"
-            key={`${isChatBoxVisible}-${chatPanelPosition}`}
-            className="w-full items-center justify-center gap-0.5"
+            key={`${isChatBoxVisible}-${activeWorkspaceTab}`}
+            className="gap-0.5 w-full items-center justify-center"
           >
-            {/* ChatBox Panel - Left side */}
-            {isChatBoxVisible && chatPanelPosition === 'left' && (
-              <>
-                <ResizablePanel
-                  defaultSize={30}
-                  minSize={20}
-                  className="h-full"
-                >
-                  <ChatBox />
-                </ResizablePanel>
-                <ResizableHandle
-                  withHandle={true}
-                  className="custom-resizable-handle"
+            <ResizablePanel className="min-h-0 h-full w-full min-w-[300px]">
+              {activeWorkspaceTab === 'workforce' && isChatBoxVisible && (
+                <ChatBox
+                  workforceExpandedOverlayOpen={isWorkforceExpandedOverlayOpen}
+                  onToggleWorkforceExpandedOverlay={
+                    toggleWorkforceExpandedOverlay
+                  }
                 />
-              </>
-            )}
-            <ResizablePanel className="h-full w-full min-w-[600px]">
-              {chatStore.activeTaskId &&
-              chatStore.tasks[chatStore.activeTaskId]?.activeWorkspace ? (
-                <div className="flex h-full w-full flex-col rounded-2xl border-solid border-border-tertiary bg-surface-secondary">
-                  {/* Header with workspace tabs */}
-                  <div className="flex w-full items-center justify-between px-2 py-2">
-                    <div className="flex w-full flex-row items-center justify-start gap-4">
-                      <MenuToggleGroup
-                        type="single"
-                        variant="info"
-                        size="xs"
-                        orientation="horizontal"
-                        value={activeWorkspaceTab}
-                        onValueChange={(val) =>
-                          val &&
-                          setActiveWorkspaceTab(
-                            val as 'triggers' | 'workforce' | 'inbox'
-                          )
-                        }
-                        className="rounded-lg bg-surface-primary"
+              )}
+              {activeWorkspaceTab === 'workforce' && !isChatBoxVisible && (
+                <div className="rounded-2xl border-border-tertiary bg-surface-secondary min-w-0 relative flex h-full w-full flex-col border-solid">
+                  <div className="gap-2 p-2 relative z-50 flex w-full shrink-0 items-center justify-between">
+                    <div className="min-w-0 gap-3 flex flex-1 items-center overflow-hidden">
+                      <span className="text-text-heading px-1 text-body-md font-semibold shrink-0">
+                        {t('layout.aiWorkforce')}
+                      </span>
+                    </div>
+                    <div className="gap-1 flex shrink-0 items-center">
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        className="rounded-lg items-center justify-center"
+                        onClick={() => setAddWorkerDialogOpen(true)}
                       >
-                        <MenuToggleItem
-                          value="workforce"
-                          variant="info"
-                          size="xs"
-                          icon={<LayoutGrid />}
-                          className="w-32"
-                        >
-                          {t('triggers.workspace')}
-                        </MenuToggleItem>
-                        <MenuToggleItem
-                          value="inbox"
-                          variant="info"
-                          size="xs"
-                          icon={<Inbox />}
-                          showSubIcon={unviewedTabs.has('inbox')}
-                          subIcon={
-                            <span className="h-2 w-2 rounded-full bg-red-500" />
-                          }
-                          className="w-32"
-                        >
-                          {t('triggers.agent-folder')}
-                        </MenuToggleItem>
-                        <MenuToggleItem
-                          value="triggers"
-                          variant="info"
-                          size="xs"
-                          icon={
-                            <ConnectionStatusIcon status={wsConnectionStatus} />
-                          }
-                          showSubIcon={unviewedTabs.has('triggers')}
-                          subIcon={
-                            <span className="h-2 w-2 rounded-full bg-text-error" />
-                          }
-                          className="w-32"
-                          rightElement={
-                            wsConnectionStatus !== 'connected' && (
-                              <Popover>
-                                <PopoverPrimitive.Trigger asChild>
-                                  <div className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md transition-colors hover:bg-surface-tertiary">
-                                    <RefreshCw
-                                      className={`h-3 w-3 ${wsConnectionStatus === 'connecting' ? 'animate-spin' : ''}`}
-                                    />
-                                  </div>
-                                </PopoverPrimitive.Trigger>
-                                <PopoverContent
-                                  className="w-64 p-4"
-                                  side="bottom"
-                                  align="end"
-                                >
-                                  <div className="flex flex-col gap-3">
-                                    <p className="text-body-sm text-text-body">
-                                      Reconnect to trigger listener
-                                    </p>
-                                    <Button
-                                      variant="primary"
-                                      size="sm"
-                                      className="w-full items-center justify-center"
-                                      onClick={triggerReconnect}
-                                    >
-                                      <RefreshCw
-                                        className={`mr-2 h-4 w-4 ${wsConnectionStatus === 'connecting' ? 'animate-spin' : ''}`}
-                                      />
-                                      Reconnect
-                                    </Button>
-                                  </div>
-                                </PopoverContent>
-                              </Popover>
-                            )
+                        <Plus />
+                        {t('triggers.add')}
+                      </Button>
+                      <AddWorker
+                        isOpen={addWorkerDialogOpen}
+                        onOpenChange={setAddWorkerDialogOpen}
+                      />
+                      {hasAnyMessages && (
+                        <TooltipSimple
+                          content={
+                            isWorkforceExpandedOverlayOpen
+                              ? t('layout.close')
+                              : t('layout.expand-workforce', {
+                                  defaultValue: 'Expand workforce',
+                                })
                           }
+                          delayDuration={300}
+                          side="bottom"
                         >
-                          {t('triggers.title')}
-                        </MenuToggleItem>
-                      </MenuToggleGroup>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      {activeWorkspaceTab !== 'inbox' && (
-                        <Button
-                          variant="primary"
-                          size="sm"
-                          className="w-24 items-center justify-center rounded-lg"
-                          onClick={() => {
-                            if (activeWorkspaceTab === 'workforce') {
-                              setAddWorkerDialogOpen(true);
-                            } else if (activeWorkspaceTab === 'triggers') {
-                              setTriggerDialogOpen(true);
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            buttonContent="icon-only"
+                            buttonRadius="lg"
+                            className="shrink-0"
+                            onClick={toggleWorkforceExpandedOverlay}
+                            aria-pressed={isWorkforceExpandedOverlayOpen}
+                            aria-label={
+                              isWorkforceExpandedOverlayOpen
+                                ? t('layout.close')
+                                : t('layout.expand-workforce', {
+                                    defaultValue: 'Expand workforce',
+                                  })
                             }
-                          }}
-                        >
-                          <Plus />
-                          {activeWorkspaceTab === 'workforce' &&
-                            t('triggers.add')}
-                          {activeWorkspaceTab === 'triggers' &&
-                            t('triggers.create')}
-                        </Button>
+                          >
+                            {isWorkforceExpandedOverlayOpen ? (
+                              <X className="h-4 w-4" />
+                            ) : (
+                              <Maximize2 className="h-4 w-4" />
+                            )}
+                          </Button>
+                        </TooltipSimple>
                       )}
                     </div>
-
-                    {/* Hidden file input for upload */}
-                    <input
-                      type="file"
-                      ref={fileInputRef}
-                      onChange={handleFileUpload}
-                      multiple
-                      className="hidden"
-                    />
-
-                    {/* AddWorker Dialog */}
-                    <AddWorker
-                      isOpen={addWorkerDialogOpen}
-                      onOpenChange={setAddWorkerDialogOpen}
-                    />
-
-                    {/* TriggerDialog */}
-                    <TriggerDialog
-                      selectedTrigger={null}
-                      isOpen={triggerDialogOpen}
-                      onOpenChange={setTriggerDialogOpen}
-                    />
                   </div>
-                  <div className="min-h-0 w-full flex-1">
+                  <div className="min-h-0 min-w-0 w-full flex-1">
                     <AnimatePresence mode="wait">
                       <motion.div
-                        key={activeWorkspaceTab}
+                        key={`${workforcePanelKey}-expanded`}
                         initial={{ opacity: 0, filter: 'blur(4px)' }}
                         animate={{ opacity: 1, filter: 'blur(0px)' }}
                         exit={{ opacity: 0, filter: 'blur(4px)' }}
                         transition={{ duration: 0.2 }}
-                        className="h-full w-full"
+                        className="min-w-0 h-full w-full"
                       >
-                        {renderWorkspaceContent()}
+                        <WorkspaceContent />
                       </motion.div>
                     </AnimatePresence>
                   </div>
-                  {activeWorkspaceTab === 'workforce' && (
-                    <BottomBar
-                      onToggleChatBox={toggleChatBox}
-                      isChatBoxVisible={isChatBoxVisible}
-                    />
-                  )}
+                  <div className="inset-x-0 bottom-0 pointer-events-none absolute z-50">
+                    <div className="pointer-events-auto">
+                      <BottomBar />
+                    </div>
+                  </div>
                 </div>
-              ) : (
-                // Show default workspace when activeTaskId is null or task doesn't exist
-                <div className="flex h-full w-full flex-col rounded-2xl border-solid border-border-tertiary bg-surface-secondary">
-                  {/* Header with workspace tabs */}
-                  <div className="flex w-full items-center justify-between px-2 py-2">
-                    <div className="flex w-full flex-row items-center justify-start gap-4">
-                      <MenuToggleGroup
-                        type="single"
-                        variant="info"
-                        size="xs"
-                        orientation="horizontal"
-                        value={activeWorkspaceTab}
-                        onValueChange={(val) =>
-                          val &&
-                          setActiveWorkspaceTab(
-                            val as 'triggers' | 'workforce' | 'inbox'
-                          )
+              )}
+              {activeWorkspaceTab === 'inbox' && (
+                <div className="rounded-2xl border-border-tertiary bg-surface-secondary flex h-full w-full flex-col overflow-hidden border-solid">
+                  <div className="min-h-0 w-full flex-1">
+                    <div className="flex h-full w-full flex-1 items-center justify-center">
+                      <div className="relative z-10 h-full w-full">
+                        <Folder />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+              {activeWorkspaceTab === 'triggers' && (
+                <div className="rounded-2xl border-border-tertiary bg-surface-secondary flex h-full w-full flex-col border-solid">
+                  <div className="gap-2 px-2 py-2 flex w-full shrink-0 items-center justify-between">
+                    <div className="text-text-heading min-w-0 gap-2 px-1 text-body-md font-bold flex flex-1 items-center">
+                      <span className="truncate">{t('triggers.title')}</span>
+                    </div>
+                    <div className="gap-2 flex shrink-0 items-center">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="outline"
+                            buttonContent="text"
+                            size="sm"
+                            className="rounded-lg"
+                          >
+                            {triggerSortLabel}
+                            <ArrowUpDown className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem
+                            onClick={() => setTriggerSortBy('createdAt')}
+                          >
+                            {t('triggers.created-time')}
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={() =>
+                              setTriggerSortBy('lastExecutionTime')
+                            }
+                          >
+                            {t('triggers.last-execution-label')}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        className="rounded-lg items-center justify-center"
+                        onClick={() => setTriggerDialogOpen(true)}
+                      >
+                        <Plus />
+                        {t('triggers.create')}
+                      </Button>
+                      <TooltipSimple
+                        content={
+                          triggerExecutionLogsOpen
+                            ? t('triggers.fold-execution-logs')
+                            : t('triggers.open-execution-logs')
                         }
-                        className="rounded-lg bg-surface-primary"
+                        delayDuration={300}
+                        side="bottom"
                       >
-                        <MenuToggleItem
-                          value="workforce"
-                          variant="info"
-                          size="xs"
-                          icon={<LayoutGrid />}
-                          className="w-32"
-                        >
-                          {t('triggers.workspace')}
-                        </MenuToggleItem>
-                        <MenuToggleItem
-                          value="inbox"
-                          variant="info"
-                          size="xs"
-                          icon={<Inbox />}
-                          showSubIcon={unviewedTabs.has('inbox')}
-                          subIcon={
-                            <span className="h-2 w-2 rounded-full bg-red-500" />
-                          }
-                          className="w-32"
-                        >
-                          {t('triggers.agent-folder')}
-                        </MenuToggleItem>
-                        <MenuToggleItem
-                          value="triggers"
-                          variant="info"
-                          size="xs"
-                          icon={
-                            <ConnectionStatusIcon status={wsConnectionStatus} />
-                          }
-                          showSubIcon={unviewedTabs.has('triggers')}
-                          subIcon={
-                            <span className="h-2 w-2 rounded-full bg-red-500" />
-                          }
-                          className="w-32"
-                          rightElement={
-                            wsConnectionStatus !== 'connected' && (
-                              <Popover>
-                                <PopoverPrimitive.Trigger asChild>
-                                  <div className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md transition-colors hover:bg-surface-tertiary">
-                                    <RefreshCw
-                                      className={`h-3 w-3 ${wsConnectionStatus === 'connecting' ? 'animate-spin' : ''}`}
-                                    />
-                                  </div>
-                                </PopoverPrimitive.Trigger>
-                                <PopoverContent
-                                  className="w-64 p-4"
-                                  side="bottom"
-                                  align="end"
-                                >
-                                  <div className="flex flex-col gap-3">
-                                    <p className="text-sm text-text-body">
-                                      Reconnect to trigger listener
-                                    </p>
-                                    <Button
-                                      variant="primary"
-                                      size="sm"
-                                      className="w-full"
-                                      onClick={triggerReconnect}
-                                    >
-                                      <RefreshCw
-                                        className={`mr-2 h-4 w-4 ${wsConnectionStatus === 'connecting' ? 'animate-spin' : ''}`}
-                                      />
-                                      Reconnect
-                                    </Button>
-                                  </div>
-                                </PopoverContent>
-                              </Popover>
-                            )
-                          }
-                        >
-                          {t('triggers.triggers')}
-                        </MenuToggleItem>
-                      </MenuToggleGroup>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      {activeWorkspaceTab !== 'inbox' && (
                         <Button
-                          variant="primary"
-                          size="sm"
-                          className="rounded-lg"
+                          variant="ghost"
+                          size="icon"
+                          className="opacity-70"
+                          disabled={sortedTriggersForHeader.length === 0}
                           onClick={() => {
-                            if (activeWorkspaceTab === 'workforce') {
-                              setAddWorkerDialogOpen(true);
-                            } else if (activeWorkspaceTab === 'triggers') {
-                              setTriggerDialogOpen(true);
+                            if (triggerExecutionLogsOpen) {
+                              setTriggerExecutionLogsOpen(false);
+                              return;
                             }
+                            if (
+                              !triggerSelectedId &&
+                              sortedTriggersForHeader.length > 0
+                            ) {
+                              setTriggerSelectedId(
+                                sortedTriggersForHeader[0].id
+                              );
+                            }
+                            setTriggerExecutionLogsOpen(true);
                           }}
                         >
-                          <Plus />
-                          {activeWorkspaceTab === 'workforce' &&
-                            t('triggers.add')}
-                          {activeWorkspaceTab === 'triggers' &&
-                            t('triggers.create')}
+                          {triggerExecutionLogsOpen ? (
+                            <SquareChevronRight className="h-4 w-4" />
+                          ) : (
+                            <SquareCode className="h-4 w-4" />
+                          )}
                         </Button>
-                      )}
+                      </TooltipSimple>
+                      <TriggerDialog
+                        selectedTrigger={null}
+                        isOpen={triggerDialogOpen}
+                        onOpenChange={setTriggerDialogOpen}
+                      />
                     </div>
-                    {/* Hidden file input for upload */}
-                    <input
-                      type="file"
-                      ref={fileInputRef}
-                      onChange={handleFileUpload}
-                      multiple
-                      className="hidden"
-                    />
-
-                    {/* AddWorker Dialog */}
-                    <AddWorker
-                      isOpen={addWorkerDialogOpen}
-                      onOpenChange={setAddWorkerDialogOpen}
-                    />
-
-                    {/* TriggerDialog */}
-                    <TriggerDialog
-                      selectedTrigger={null}
-                      isOpen={triggerDialogOpen}
-                      onOpenChange={setTriggerDialogOpen}
-                    />
                   </div>
-                  <div className="min-h-0 w-full flex-1">
-                    <AnimatePresence mode="wait">
-                      <motion.div
-                        key={activeWorkspaceTab}
-                        initial={{ opacity: 0, filter: 'blur(4px)' }}
-                        animate={{ opacity: 1, filter: 'blur(0px)' }}
-                        exit={{ opacity: 0, filter: 'blur(4px)' }}
-                        transition={{ duration: 0.2 }}
-                        className="h-full w-full"
-                      >
-                        {renderWorkspaceContent()}
-                      </motion.div>
-                    </AnimatePresence>
-                  </div>
-                  {activeWorkspaceTab === 'workforce' && (
-                    <BottomBar
-                      onToggleChatBox={toggleChatBox}
-                      isChatBoxVisible={isChatBoxVisible}
+                  <div
+                    className={`min-h-0 w-full flex-1 ${wsConnectionStatus === 'disconnected' ? 'pointer-events-none opacity-50 grayscale' : ''}`}
+                  >
+                    <Overview
+                      sortBy={triggerSortBy}
+                      selectedTriggerId={triggerSelectedId}
+                      onSelectedTriggerIdChange={setTriggerSelectedId}
+                      isExecutionLogsOpen={triggerExecutionLogsOpen}
+                      onExecutionLogsOpenChange={setTriggerExecutionLogsOpen}
                     />
-                  )}
+                  </div>
                 </div>
               )}
             </ResizablePanel>
-            {/* ChatBox Panel - Right side */}
-            {isChatBoxVisible && chatPanelPosition === 'right' && (
-              <>
-                <ResizableHandle
-                  withHandle={true}
-                  className="custom-resizable-handle"
-                />
-                <ResizablePanel
-                  defaultSize={30}
-                  minSize={20}
-                  className="h-full"
-                >
-                  <ChatBox />
-                </ResizablePanel>
-              </>
-            )}
           </ResizablePanelGroup>
-        </div>
+        </motion.div>
+        <ExpandedOverlay
+          open={isWorkforceExpandedOverlayOpen}
+          onClose={closeWorkforceExpandedOverlay}
+          titleLabel={t('layout.aiWorkforce')}
+          backdropDismissLabel={t('layout.close')}
+          header={
+            <>
+              <div className="min-w-0 gap-3 flex flex-1 items-center overflow-hidden">
+                <span className="text-text-heading px-1 text-body-md font-semibold shrink-0">
+                  {t('layout.aiWorkforce')}
+                </span>
+              </div>
+              <div className="gap-1 flex shrink-0 items-center">
+                <Button
+                  variant="primary"
+                  size="sm"
+                  className="rounded-lg items-center justify-center"
+                  onClick={() => setAddWorkerDialogOpen(true)}
+                >
+                  <Plus />
+                  {t('triggers.add')}
+                </Button>
+                <TooltipSimple
+                  content={t('layout.close')}
+                  delayDuration={300}
+                  side="bottom"
+                >
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    buttonContent="icon-only"
+                    buttonRadius="lg"
+                    className="shrink-0"
+                    onClick={closeWorkforceExpandedOverlay}
+                    aria-pressed={true}
+                    aria-label={t('layout.close')}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </TooltipSimple>
+              </div>
+            </>
+          }
+          bottomBar={
+            <div className="pointer-events-auto">
+              <BottomBar />
+            </div>
+          }
+        >
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={`overlay-${workforcePanelKey}`}
+              initial={{ opacity: 0, filter: 'blur(4px)' }}
+              animate={{ opacity: 1, filter: 'blur(0px)' }}
+              exit={{ opacity: 0, filter: 'blur(4px)' }}
+              transition={{ duration: 0.2 }}
+              className="min-w-0 h-full w-full"
+            >
+              <WorkspaceContent />
+            </motion.div>
+          </AnimatePresence>
+        </ExpandedOverlay>
         <UpdateElectron />
       </div>
     </ReactFlowProvider>
diff --git a/src/pages/Project/Workspace.tsx b/src/pages/Project/Workspace.tsx
deleted file mode 100644
index b9b0cb8e8..000000000
--- a/src/pages/Project/Workspace.tsx
+++ /dev/null
@@ -1,300 +0,0 @@
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-
-import BottomBar from '@/components/BottomBar';
-import BrowserAgentWorkspace from '@/components/BrowserAgentWorkspace';
-import ChatBox from '@/components/ChatBox';
-import Folder from '@/components/Folder';
-import TerminalAgentWorkspace from '@/components/TerminalAgentWorkspace';
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from '@/components/ui/resizable';
-import Workflow from '@/components/WorkFlow';
-import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
-import { ReactFlowProvider } from '@xyflow/react';
-import { useCallback, useEffect, useState } from 'react';
-
-export default function Tasks() {
-  //Get Chatstore for the active project's task
-  const { chatStore, projectStore } = useChatStoreAdapter();
-  const [isChatBoxVisible, setIsChatBoxVisible] = useState(true);
-
-  useEffect(() => {
-    const activeTaskId = chatStore.activeTaskId;
-    const activeTask = chatStore.tasks[activeTaskId as string];
-    const taskAssigning = activeTask?.taskAssigning || [];
-
-    let webviews: { id: string; agent_id: string; index: number }[] = [];
-    taskAssigning.forEach((item) => {
-      if (item.type === 'browser_agent') {
-        item.activeWebviewIds?.forEach((webview, index) => {
-          webviews.push({ ...webview, agent_id: item.agent_id, index });
-        });
-      }
-    });
-
-    if (taskAssigning.length === 0) {
-      return;
-    }
-
-    if (webviews.length === 0) {
-      const searchAgent = taskAssigning.find(
-        (agent) => agent.type === 'browser_agent'
-      );
-      if (
-        searchAgent &&
-        searchAgent.activeWebviewIds &&
-        searchAgent.activeWebviewIds.length > 0
-      ) {
-        searchAgent.activeWebviewIds.forEach((webview, index) => {
-          webviews.push({ ...webview, agent_id: searchAgent.agent_id, index });
-        });
-      }
-    }
-
-    if (webviews.length === 0) {
-      return;
-    }
-
-    // capture webview
-    const captureWebview = async () => {
-      if (!activeTask || activeTask.status === 'finished') {
-        return;
-      }
-      webviews.forEach((webview) => {
-        window.ipcRenderer
-          .invoke('capture-webview', webview.id)
-          .then((base64: string) => {
-            const currentTask = chatStore.tasks[activeTaskId as string];
-            if (!currentTask || currentTask.type) return;
-            const currentTaskAssigning = [...currentTask.taskAssigning];
-            const searchAgentIndex = currentTaskAssigning.findIndex(
-              (agent) => agent.agent_id === webview.agent_id
-            );
-
-            if (
-              searchAgentIndex !== -1 &&
-              base64 !== 'data:image/jpeg;base64,'
-            ) {
-              currentTaskAssigning[searchAgentIndex].activeWebviewIds![
-                webview.index
-              ].img = base64;
-              chatStore.setTaskAssigning(
-                activeTaskId as string,
-                currentTaskAssigning
-              );
-              const { processTaskId, url } =
-                currentTaskAssigning[searchAgentIndex].activeWebviewIds![
-                  webview.index
-                ];
-              chatStore.setSnapshotsTemp(activeTaskId as string, {
-                api_task_id: activeTaskId,
-                camel_task_id: processTaskId,
-                browser_url: url,
-                image_base64: base64,
-              });
-            }
-          })
-          .catch((error: unknown) => {
-            console.error('capture webview error:', error);
-          });
-      });
-    };
-
-    let intervalTimer: NodeJS.Timeout | null = null;
-
-    const initialTimer = setTimeout(() => {
-      captureWebview();
-      intervalTimer = setInterval(captureWebview, 2000);
-    }, 2000);
-
-    // cleanup function
-    return () => {
-      clearTimeout(initialTimer);
-      if (intervalTimer) {
-        clearInterval(intervalTimer);
-      }
-    };
-  }, [chatStore]);
-
-  const getSize = useCallback(() => {
-    const webviewContainer = document.getElementById('webview-container');
-    if (webviewContainer) {
-      const rect = webviewContainer.getBoundingClientRect();
-      window.electronAPI.setSize({
-        x: rect.left,
-        y: rect.top,
-        width: rect.width,
-        height: rect.height,
-      });
-      console.log('setSize', rect);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!chatStore.activeTaskId) {
-      projectStore.createProject('new project');
-    }
-
-    const webviewContainer = document.getElementById('webview-container');
-    if (webviewContainer) {
-      const resizeObserver = new ResizeObserver(() => {
-        getSize();
-      });
-      resizeObserver.observe(webviewContainer);
-
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [chatStore.activeTaskId, projectStore, getSize]);
-
-  if (!chatStore) {
-    return <div>Loading...</div>;
-  }
-
-  const toggleChatBox = () => {
-    setIsChatBoxVisible((prev) => !prev);
-  };
-
-  return (
-    <ReactFlowProvider>
-      <div className="relative flex h-full min-h-0 min-w-0 flex-1 items-center justify-center gap-2 overflow-hidden rounded-2xl border-solid border-border-tertiary bg-surface-secondary">
-        <ResizablePanelGroup
-          direction="horizontal"
-          key={isChatBoxVisible ? 'with-chat' : 'without-chat'}
-        >
-          {isChatBoxVisible && (
-            <>
-              <ResizablePanel defaultSize={30} minSize={20}>
-                <ChatBox />
-              </ResizablePanel>
-              <ResizableHandle
-                withHandle={true}
-                className="custom-resizable-handle"
-              />
-            </>
-          )}
-          <ResizablePanel>
-            {chatStore.tasks[chatStore.activeTaskId as string]
-              ?.activeWorkspace && (
-              <div className="flex h-full w-full flex-1 flex-col duration-300 animate-in fade-in-0 slide-in-from-right-2">
-                {chatStore.tasks[
-                  chatStore.activeTaskId as string
-                ]?.taskAssigning?.find(
-                  (agent) =>
-                    agent.agent_id ===
-                    chatStore.tasks[chatStore.activeTaskId as string]
-                      .activeWorkspace
-                )?.type === 'browser_agent' && (
-                  <div className="flex h-full w-full flex-1 duration-300 animate-in fade-in-0 slide-in-from-right-2">
-                    <BrowserAgentWorkspace />
-                  </div>
-                )}
-                {chatStore.tasks[chatStore.activeTaskId as string]
-                  ?.activeWorkspace === 'workflow' && (
-                  <div className="flex h-full w-full flex-1 items-center justify-center duration-300 animate-in fade-in-0 slide-in-from-right-2">
-                    <div className="relative flex h-full w-full flex-col">
-                      {/*filter blur */}
-                      <div className="pointer-events-none absolute inset-0 bg-transparent"></div>
-                      <div className="relative z-10 h-full w-full">
-                        <Workflow
-                          taskAssigning={
-                            chatStore.tasks[chatStore.activeTaskId as string]
-                              ?.taskAssigning || []
-                          }
-                        />
-                      </div>
-                    </div>
-                  </div>
-                )}
-                {chatStore.tasks[
-                  chatStore.activeTaskId as string
-                ]?.taskAssigning?.find(
-                  (agent) =>
-                    agent.agent_id ===
-                    chatStore.tasks[chatStore.activeTaskId as string]
-                      .activeWorkspace
-                )?.type === 'developer_agent' && (
-                  <div className="flex h-full w-full flex-1 duration-300 animate-in fade-in-0 slide-in-from-right-2">
-                    <TerminalAgentWorkspace />
-                    {/* <Terminal content={[]} /> */}
-                  </div>
-                )}
-                {chatStore.tasks[chatStore.activeTaskId as string]
-                  .activeWorkspace === 'documentWorkSpace' && (
-                  <div className="flex h-full w-full flex-1 items-center justify-center duration-300 animate-in fade-in-0 slide-in-from-right-2">
-                    <div className="relative flex h-full w-full flex-col pb-2">
-                      {/*filter blur */}
-                      <div className="blur-bg pointer-events-none absolute inset-0 rounded-xl bg-surface-secondary"></div>
-                      <div className="relative z-10 h-full w-full">
-                        <Folder />
-                      </div>
-                    </div>
-                  </div>
-                )}
-                {chatStore.tasks[
-                  chatStore.activeTaskId as string
-                ]?.taskAssigning?.find(
-                  (agent) =>
-                    agent.agent_id ===
-                    chatStore.tasks[chatStore.activeTaskId as string]
-                      .activeWorkspace
-                )?.type === 'document_agent' && (
-                  <div className="flex h-full w-full flex-1 items-center justify-center duration-300 animate-in fade-in-0 slide-in-from-right-2">
-                    <div className="relative flex h-full w-full flex-col">
-                      {/*filter blur */}
-                      <div className="blur-bg pointer-events-none absolute inset-0 rounded-xl bg-surface-secondary"></div>
-                      <div className="relative z-10 h-full w-full">
-                        <Folder
-                          data={chatStore.tasks[
-                            chatStore.activeTaskId as string
-                          ]?.taskAssigning?.find(
-                            (agent) =>
-                              agent.agent_id ===
-                              chatStore.tasks[chatStore.activeTaskId as string]
-                                .activeWorkspace
-                          )}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                )}
-                {/* Inbox Workspace */}
-                {chatStore.tasks[chatStore.activeTaskId as string]
-                  .activeWorkspace === 'inbox' && (
-                  <div className="flex h-full w-full flex-1 items-center justify-center duration-300 animate-in fade-in-0 slide-in-from-right-2">
-                    <div className="relative flex h-full w-full flex-col">
-                      {/*filter blur */}
-                      <div className="blur-bg pointer-events-none absolute inset-0 rounded-xl bg-surface-secondary"></div>
-                      <div className="relative z-10 h-full w-full">
-                        <Folder />
-                      </div>
-                    </div>
-                  </div>
-                )}
-                <BottomBar
-                  onToggleChatBox={toggleChatBox}
-                  isChatBoxVisible={isChatBoxVisible}
-                />
-              </div>
-            )}
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </div>
-    </ReactFlowProvider>
-  );
-}
diff --git a/src/pages/Setting/Privacy.tsx b/src/pages/Setting/Privacy.tsx
index df6917bce..59c44b1aa 100644
--- a/src/pages/Setting/Privacy.tsx
+++ b/src/pages/Setting/Privacy.tsx
@@ -41,8 +41,8 @@ export default function SettingPrivacy() {
   return (
     <div className="m-auto h-auto w-full flex-1">
       {/* Header Section */}
-      <div className="mx-auto flex w-full max-w-[900px] items-center justify-between px-6 pb-6 pt-8">
-        <div className="flex w-full flex-row items-center justify-between gap-4">
+      <div className="px-6 pb-6 pt-8 mx-auto flex w-full max-w-[900px] items-center justify-between">
+        <div className="gap-4 flex w-full flex-row items-center justify-between">
           <div className="flex flex-col">
             <div className="text-heading-sm font-bold text-text-heading">
               {t('setting.privacy')}
@@ -52,11 +52,11 @@ export default function SettingPrivacy() {
       </div>
 
       {/* Content Section */}
-      <div className="mb-8 flex flex-col gap-6">
+      <div className="mb-8 gap-6 flex flex-col">
         {/* How We Handle Your Data Section */}
         <div className="rounded-2xl bg-surface-secondary px-6 py-4">
-          <div className="flex items-start justify-between gap-4">
-            <div className="flex flex-1 flex-col gap-2">
+          <div className="gap-4 flex items-start justify-between">
+            <div className="gap-2 flex flex-1 flex-col">
               <div className="text-body-base font-bold text-text-heading">
                 {t('setting.how-we-handle-your-data')}
               </div>
@@ -75,7 +75,8 @@ export default function SettingPrivacy() {
             </div>
             <Button
               variant="ghost"
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               onClick={() => setIsHowWeHandleOpen((prev) => !prev)}
               aria-expanded={isHowWeHandleOpen}
               aria-controls="how-we-handle-your-data"
@@ -86,7 +87,7 @@ export default function SettingPrivacy() {
             </Button>
           </div>
           {isHowWeHandleOpen && (
-            <div className="mr-10 mt-4 border-x-0 border-b-0 border-t-[0.5px] border-solid border-border-secondary">
+            <div className="mr-10 mt-4 border-border-secondary border-x-0 border-t-[0.5px] border-b-0 border-solid">
               <ol
                 id="how-we-handle-your-data"
                 className="pl-5 text-body-sm font-normal text-text-body"
@@ -113,8 +114,8 @@ export default function SettingPrivacy() {
 
         {/* Help Improve Eigent Section */}
         <div className="rounded-2xl bg-surface-secondary px-6 py-4">
-          <div className="flex items-center justify-between gap-md">
-            <div className="flex flex-col gap-2">
+          <div className="gap-md flex items-center justify-between">
+            <div className="gap-2 flex flex-col">
               <div className="text-body-base font-bold text-text-heading">
                 {t('setting.help-improve-eigent')}
               </div>
diff --git a/src/store/chatStore.ts b/src/store/chatStore.ts
index 3c404ea82..0b895f579 100644
--- a/src/store/chatStore.ts
+++ b/src/store/chatStore.ts
@@ -1979,8 +1979,11 @@ const chatStore = (initial?: Partial<ChatStore>) =>
           if (agentMessages.step === AgentStep.WRITE_FILE) {
             console.log('write_to_file', agentMessages.data);
             setNuwFileNum(currentTaskId, tasks[currentTaskId].nuwFileNum + 1);
-            // Mark inbox tab as having unviewed content
-            usePageTabStore.getState().markTabAsUnviewed('inbox');
+            const { activeWorkspaceTab, markTabAsUnviewed } =
+              usePageTabStore.getState();
+            if (activeWorkspaceTab !== 'inbox' && project_id) {
+              markTabAsUnviewed('inbox', project_id);
+            }
             const { file_path } = agentMessages.data;
             const fileName =
               file_path?.replace(/\\/g, '/').split('/').pop() || '';
diff --git a/src/store/pageTabStore.ts b/src/store/pageTabStore.ts
index 3f2f4aa91..253366e2f 100644
--- a/src/store/pageTabStore.ts
+++ b/src/store/pageTabStore.ts
@@ -1,56 +1,192 @@
-import { create } from 'zustand'
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 interface PageTabState {
-    activeTab: 'tasks' | 'trigger'
-    setActiveTab: (tab: 'tasks' | 'trigger') => void
-    // Workspace tabs within the Tasks page
-    activeWorkspaceTab: 'triggers' | 'workforce' | 'inbox'
-    setActiveWorkspaceTab: (tab: 'triggers' | 'workforce' | 'inbox') => void
-    // Panel position for ChatBox
-    chatPanelPosition: 'left' | 'right'
-    setChatPanelPosition: (position: 'left' | 'right') => void
-    // Track if there are triggers (for dynamic menu toggle visibility)
-    hasTriggers: boolean
-    setHasTriggers: (value: boolean) => void
-    // Track if there are files in agent folder (for dynamic menu toggle visibility)
-    hasAgentFiles: boolean
-    setHasAgentFiles: (value: boolean) => void
-    // Track unviewed tabs with new content (for red dot indicator)
-    unviewedTabs: Set<'triggers' | 'inbox'>
-    markTabAsViewed: (tab: 'triggers' | 'inbox') => void
-    markTabAsUnviewed: (tab: 'triggers' | 'inbox') => void
+  activeTab: 'tasks' | 'trigger';
+  setActiveTab: (tab: 'tasks' | 'trigger') => void;
+  // Workspace tabs within the Tasks page
+  activeWorkspaceTab: 'triggers' | 'workforce' | 'inbox';
+  setActiveWorkspaceTab: (
+    tab: 'triggers' | 'workforce' | 'inbox',
+    /** When switching to the folder tab, pass the active project id to clear its inbox dot. */
+    options?: { clearInboxForProjectId?: string | null }
+  ) => void;
+  // Panel position for ChatBox
+  chatPanelPosition: 'left' | 'right';
+  setChatPanelPosition: (position: 'left' | 'right') => void;
+  /** Project (Home) page left sidebar rail */
+  projectSidebarCollapsed: boolean;
+  toggleProjectSidebarCollapsed: () => void;
+  /** Workforce tab: right rail folded to give chat more width (persisted) */
+  workforceRailCollapsed: boolean;
+  toggleWorkforceRailCollapsed: () => void;
+  // Track if there are triggers (for dynamic menu toggle visibility)
+  hasTriggers: boolean;
+  setHasTriggers: (value: boolean) => void;
+  // Track if there are files in agent folder (for dynamic menu toggle visibility)
+  hasAgentFiles: boolean;
+  setHasAgentFiles: (value: boolean) => void;
+  // Track unviewed tabs with new content (for red dot indicator)
+  unviewedTabs: Set<'triggers' | 'inbox'>;
+  /** Projects with new agent-folder files not yet “seen” on the folder tab (dot on Folder nav). */
+  inboxUnviewedForProjects: Set<string>;
+  markTabAsViewed: (
+    tab: 'triggers' | 'inbox',
+    /** For inbox: project to clear from the folder dot (optional). */
+    inboxProjectId?: string | null
+  ) => void;
+  markTabAsUnviewed: (
+    tab: 'triggers' | 'inbox',
+    /** For inbox: required — project that received the new file(s). */
+    inboxProjectId?: string
+  ) => void;
+  /** Set by the sidebar to tell the chat container to scroll to a specific query group */
+  scrollToQueryId: string | null;
+  setScrollToQueryId: (queryId: string | null) => void;
+  /**
+   * Optional absolute path override for the agent folder (per project).
+   * When unset for a project, the default Eigent project folder is used.
+   */
+  customAgentFolderPathByProjectId: Record<string, string>;
+  setProjectCustomAgentFolderPath: (
+    projectId: string,
+    path: string | null
+  ) => void;
+  /**
+   * Incremented when UI should switch to the workforce workspace and focus the chat input.
+   * ChatBox / Home listen to perform focus and ensure the chat panel is visible.
+   */
+  workspaceChatFocusRequestId: number;
+  requestWorkspaceChatFocus: () => void;
 }
 
-export const usePageTabStore = create<PageTabState>((set) => ({
-    activeTab: 'tasks',
-    setActiveTab: (tab) => set({ activeTab: tab }),
-    activeWorkspaceTab: 'workforce',
-    setActiveWorkspaceTab: (tab) => set((state) => {
-        // When switching to a tab with new content, mark it as viewed
-        const newUnviewedTabs = new Set(state.unviewedTabs);
-        if (tab === 'triggers' || tab === 'inbox') {
-            newUnviewedTabs.delete(tab);
-        }
-        return { activeWorkspaceTab: tab, unviewedTabs: newUnviewedTabs };
-    }),
-    chatPanelPosition: 'left',
-    setChatPanelPosition: (position) => set({ chatPanelPosition: position }),
-    // Trigger tracking
-    hasTriggers: false,
-    setHasTriggers: (value) => set({ hasTriggers: value }),
-    // Agent files tracking
-    hasAgentFiles: false,
-    setHasAgentFiles: (value) => set({ hasAgentFiles: value }),
-    // Unviewed tabs tracking
-    unviewedTabs: new Set<'triggers' | 'inbox'>(),
-    markTabAsViewed: (tab) => set((state) => {
-        const newUnviewedTabs = new Set(state.unviewedTabs);
-        newUnviewedTabs.delete(tab);
-        return { unviewedTabs: newUnviewedTabs };
-    }),
-    markTabAsUnviewed: (tab) => set((state) => {
-        const newUnviewedTabs = new Set(state.unviewedTabs);
-        newUnviewedTabs.add(tab);
-        return { unviewedTabs: newUnviewedTabs };
+export const usePageTabStore = create<PageTabState>()(
+  persist(
+    (set) => ({
+      activeTab: 'tasks',
+      setActiveTab: (tab) => set({ activeTab: tab }),
+      activeWorkspaceTab: 'workforce',
+      setActiveWorkspaceTab: (tab, options) =>
+        set((state) => {
+          const newUnviewedTabs = new Set(state.unviewedTabs);
+          let nextInboxProjects = state.inboxUnviewedForProjects;
+
+          if (tab === 'triggers') {
+            newUnviewedTabs.delete('triggers');
+          }
+
+          if (tab === 'inbox') {
+            const pid = options?.clearInboxForProjectId ?? undefined;
+            if (pid) {
+              nextInboxProjects = new Set(state.inboxUnviewedForProjects);
+              nextInboxProjects.delete(pid);
+            }
+            if (nextInboxProjects.size === 0) {
+              newUnviewedTabs.delete('inbox');
+            } else {
+              newUnviewedTabs.add('inbox');
+            }
+          }
+
+          return {
+            activeWorkspaceTab: tab,
+            unviewedTabs: newUnviewedTabs,
+            inboxUnviewedForProjects: nextInboxProjects,
+          };
+        }),
+      chatPanelPosition: 'left',
+      setChatPanelPosition: (position) => set({ chatPanelPosition: position }),
+      projectSidebarCollapsed: false,
+      toggleProjectSidebarCollapsed: () =>
+        set((state) => ({
+          projectSidebarCollapsed: !state.projectSidebarCollapsed,
+        })),
+      workforceRailCollapsed: false,
+      toggleWorkforceRailCollapsed: () =>
+        set((state) => ({
+          workforceRailCollapsed: !state.workforceRailCollapsed,
+        })),
+      hasTriggers: false,
+      setHasTriggers: (value) => set({ hasTriggers: value }),
+      hasAgentFiles: false,
+      setHasAgentFiles: (value) => set({ hasAgentFiles: value }),
+      unviewedTabs: new Set<'triggers' | 'inbox'>(),
+      inboxUnviewedForProjects: new Set<string>(),
+      markTabAsViewed: (tab, inboxProjectId) =>
+        set((state) => {
+          const newUnviewedTabs = new Set(state.unviewedTabs);
+          newUnviewedTabs.delete(tab);
+          if (tab === 'inbox' && inboxProjectId) {
+            const nextInbox = new Set(state.inboxUnviewedForProjects);
+            nextInbox.delete(inboxProjectId);
+            if (nextInbox.size === 0) newUnviewedTabs.delete('inbox');
+            else newUnviewedTabs.add('inbox');
+            return {
+              unviewedTabs: newUnviewedTabs,
+              inboxUnviewedForProjects: nextInbox,
+            };
+          }
+          return { unviewedTabs: newUnviewedTabs };
+        }),
+      markTabAsUnviewed: (tab, inboxProjectId) =>
+        set((state) => {
+          if (tab === 'inbox') {
+            if (!inboxProjectId) return state;
+            const newUnviewedTabs = new Set(state.unviewedTabs);
+            newUnviewedTabs.add('inbox');
+            const nextInbox = new Set(state.inboxUnviewedForProjects);
+            nextInbox.add(inboxProjectId);
+            return {
+              unviewedTabs: newUnviewedTabs,
+              inboxUnviewedForProjects: nextInbox,
+            };
+          }
+          const newUnviewedTabs = new Set(state.unviewedTabs);
+          newUnviewedTabs.add(tab);
+          return { unviewedTabs: newUnviewedTabs };
+        }),
+      scrollToQueryId: null,
+      setScrollToQueryId: (queryId) => set({ scrollToQueryId: queryId }),
+      customAgentFolderPathByProjectId: {},
+      setProjectCustomAgentFolderPath: (projectId, path) =>
+        set((state) => {
+          const next = { ...state.customAgentFolderPathByProjectId };
+          if (path == null || path === '') {
+            delete next[projectId];
+          } else {
+            next[projectId] = path;
+          }
+          return { customAgentFolderPathByProjectId: next };
+        }),
+      workspaceChatFocusRequestId: 0,
+      requestWorkspaceChatFocus: () =>
+        set((state) => ({
+          activeWorkspaceTab: 'workforce',
+          workspaceChatFocusRequestId: state.workspaceChatFocusRequestId + 1,
+        })),
     }),
-}))
+    {
+      name: 'eigent-page-tab',
+      partialize: (state) => ({
+        projectSidebarCollapsed: state.projectSidebarCollapsed,
+        workforceRailCollapsed: state.workforceRailCollapsed,
+        customAgentFolderPathByProjectId:
+          state.customAgentFolderPathByProjectId,
+      }),
+    }
+  )
+);
diff --git a/src/style/index.css b/src/style/index.css
index 0d39423c9..b128a5d83 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -354,11 +354,13 @@ code {
 
 .scrollbar-always-visible::-webkit-scrollbar {
   width: 8px;
+  max-height: 25%;
 }
 
 .scrollbar-always-visible::-webkit-scrollbar-thumb {
-  background-color: rgba(156, 163, 175, 0.4);
+  background-color: rgba(156, 163, 175, 0.3);
   border-radius: 4px;
+  max-height: 25%;
 }
 
 .scrollbar-always-visible::-webkit-scrollbar-thumb:hover {
@@ -607,3 +609,30 @@ code {
     background-position: -200% 0;
   }
 }
+
+/* Chat: single-agent "working" — shimmer painted on the text glyphs only */
+.single-agent-text-shimmer {
+  color: transparent;
+  background: linear-gradient(
+    110deg,
+    var(--text-body) 0%,
+    var(--text-body) 35%,
+    var(--colors-primary-4) 50%,
+    var(--text-body) 65%,
+    var(--text-body) 100%
+  );
+  background-size: 250% 100%;
+  background-position: 100% 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  animation: single-agent-text-shimmer 2.5s ease-in-out infinite;
+}
+
+@keyframes single-agent-text-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -50% 0;
+  }
+}
diff --git a/src/style/token.css b/src/style/token.css
index cf45ad3f6..28dea68e5 100644
--- a/src/style/token.css
+++ b/src/style/token.css
@@ -174,6 +174,23 @@
     /* Gradient */
     --colors-gradient: #ffffff;
 
+    /* Neon (Workforce / camel brand) */
+    --colors-neon-50: #f2f2ff;
+    --colors-neon-100: #e9e7ff;
+    --colors-neon-200: #d5d3ff;
+    --colors-neon-300: #b5afff;
+    --colors-neon-400: #9081ff;
+    --colors-neon-500: #6d4fff;
+    --colors-neon-600: #5a2afd;
+    --colors-neon-700: #4c19e8;
+    --colors-neon-800: #4215cc;
+    --colors-neon-900: #36139f;
+    --colors-neon-950: #1e096c;
+    --colors-neon-default: #4c19e8;
+
+    /* Alias: same as --colors-neon-default */
+    --camel-color: var(--colors-neon-default);
+
     /* Component Tokens */
     /* Input Component */
     --input-bg-input: var(--surface-tertiary);
@@ -351,6 +368,7 @@
     /* Tag Component */
     --tag-surface: var(--button-tertiery-fill-default);
     --tag-fill-browser: var(--fill-browser);
+    --tag-fill-camel: var(--fill-camel);
     --tag-fill-developer: var(--fill-developer);
     --tag-fill-document: var(--fill-document);
     --tag-fill-multimodal: var(--fill-multimodal);
@@ -506,7 +524,10 @@
     --border-socialmedia: var(--colors-purple-default);
     --border-multimodal: var(--colors-fuchsia-default);
     --border-document: var(--colors-amber-default);
+    --border-camel: var(--colors-neon-500);
     --border-transparent: var(--colors-white-0);
+    --text-camel: var(--colors-neon-default);
+    --fill-camel: var(--colors-neon-100);
     --icon-primary: var(--colors-primary-default);
     --icon-action: var(--colors-primary-default);
     --icon-disabled: var(--colors-primary-3);
@@ -624,7 +645,10 @@
     --border-socialmedia: var(--colors-purple-default);
     --border-multimodal: var(--colors-fuchsia-default);
     --border-document: var(--colors-amber-default);
+    --border-camel: var(--colors-neon-500);
     --border-transparent: var(--colors-white-0);
+    --text-camel: var(--colors-neon-default);
+    --fill-camel: var(--colors-neon-100);
     --icon-primary: var(--colors-primary-default);
     --icon-action: var(--colors-primary-default);
     --icon-disabled: var(--colors-primary-3);
@@ -654,7 +678,7 @@
     --fill-fill-primary-disabled: var(--colors-primary-5);
     --fill-fill-tertiary: var(--colors-primary-1);
     --fill-fill-transparent: var(--colors-white-0);
-    --fill-fill-transparent-hover: var(--colors-white-80);
+    --fill-fill-transparent-hover: var(--colors-off-white-100);
     --fill-fill-tertiary-hover: var(--colors-primary-2);
     --fill-fill-tertiary-active: var(--colors-primary-3);
     --fill-fill-tertiary-disabled: var(--colors-primary-2);
@@ -679,7 +703,7 @@
     --fill-scrollbar-light: var(--colors-primary-1);
     --fill-skeloten-default: var(--colors-primary-2);
     --fill-fill-information: var(--colors-blue-default);
-    --bg-page: var(--colors-off-white-100);
+    --bg-page: var(--colors-primary-1);
     --bg-primary: var(--colors-primary-1);
     --bg-secondary: var(--colors-primary-2);
     --bg-tertiary: var(--colors-primary-3);
@@ -751,7 +775,12 @@
     --border-socialmedia: rgba(216, 180, 254, 0.6);
     --border-multimodal: rgba(245, 168, 255, 0.6);
     --border-document: rgba(255, 212, 121, 0.6);
+    --border-camel: var(--colors-neon-500);
     --border-transparent: var(--colors-black-0);
+    /* Dark: lighter default for readability on dark surfaces */
+    --camel-color: var(--colors-neon-400);
+    --text-camel: var(--camel-color);
+    --fill-camel: var(--colors-neon-100);
     --icon-primary: #d0dcff;
     --icon-action: #f1f5ff;
     --icon-disabled: rgba(148, 163, 184, 0.4);
diff --git a/src/types/constants.ts b/src/types/constants.ts
index eba956f65..fa88c4a4b 100644
--- a/src/types/constants.ts
+++ b/src/types/constants.ts
@@ -42,6 +42,7 @@ export const AgentStep = {
   NOTICE_CARD: 'notice_card',
   FAILED: 'failed',
   AGENT_SUMMARY_END: 'agent_summary_end',
+  AGENT_END: 'agent_end',
 } as const;
 
 export type AgentStepType = (typeof AgentStep)[keyof typeof AgentStep];
diff --git a/tailwind.config.js b/tailwind.config.js
index dde8e9020..82a1ad99b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -151,6 +151,20 @@ module.exports = {
           950: 'var(--colors-fuchsia-950)',
           default: 'var(--colors-fuchsia-default)',
         },
+        neon: {
+          50: 'var(--colors-neon-50)',
+          100: 'var(--colors-neon-100)',
+          200: 'var(--colors-neon-200)',
+          300: 'var(--colors-neon-300)',
+          400: 'var(--colors-neon-400)',
+          500: 'var(--colors-neon-500)',
+          600: 'var(--colors-neon-600)',
+          700: 'var(--colors-neon-700)',
+          800: 'var(--colors-neon-800)',
+          900: 'var(--colors-neon-900)',
+          950: 'var(--colors-neon-950)',
+          default: 'var(--colors-neon-default)',
+        },
         black: {
           '0%': 'var(--colors-black-0)',
           '10%': 'var(--colors-black-10)',
@@ -389,6 +403,7 @@ module.exports = {
         tag: {
           surface: 'var(--tag-surface)',
           'fill-browser': 'var(--tag-fill-browser)',
+          'fill-camel': 'var(--tag-fill-camel)',
           'fill-developer': 'var(--tag-fill-developer)',
           'fill-document': 'var(--tag-fill-document)',
           'fill-multimodal': 'var(--tag-fill-multimodal)',
@@ -485,6 +500,7 @@ module.exports = {
         'text-document': 'var(--text-document)',
         'text-socialmedia': 'var(--text-socialmedia)',
         'text-browser': 'var(--text-browser)',
+        'text-camel': 'var(--text-camel)',
         'text-developer': 'var(--text-developer)',
         'text-multimodal': 'var(--text-multimodal)',
         'text-on-hover': 'var(--text-on-hover)',
@@ -495,6 +511,7 @@ module.exports = {
         'surface-information': 'var(--surface-information)',
         'surface-warning': 'var(--surface-warning)',
         'surface-cuation': 'var(--surface-cuation)',
+        'surface-caution': 'var(--surface-cuation)',
         'surface-action': 'var(--surface-action)',
         'surface-action-hover': 'var(--surface-action-hover)',
         'surface-disabled': 'var(--surface-disabled)',
@@ -517,6 +534,7 @@ module.exports = {
         'border-disabled': 'var(--border-disabled)',
         'border-developer': 'var(--border-developer)',
         'border-browser': 'var(--border-browser)',
+        'border-camel': 'var(--border-camel)',
         'border-socialmedia': 'var(--border-socialmedia)',
         'border-multimodal': 'var(--border-multimodal)',
         'border-document': 'var(--border-document)',
@@ -540,6 +558,8 @@ module.exports = {
         'icon-on-hover': 'var(--icon-on-hover)',
         'icon-on-action': 'var(--icon-on-action)',
         'icon-secondary': 'var(--icon-secondary)',
+        /** Muted icons aligned with label text (e.g. row affordances) */
+        'icon-label': 'var(--text-label)',
 
         'fill-default': 'var(--fill-default)',
         'fill-fill-primary': 'var(--fill-fill-primary)',
@@ -568,6 +588,7 @@ module.exports = {
         'fill-socialmedia': 'var(--fill-socialmedia)',
         'fill-document': 'var(--fill-document)',
         'fill-browser': 'var(--fill-browser)',
+        'fill-camel': 'var(--fill-camel)',
         'fill-multimodal': 'var(--fill-multimodal)',
         'fill-developer': 'var(--fill-developer)',
         'fill-scrollbar-dark': 'var(--fill-scrollbar-dark)',
diff --git a/test/unit/components/ChatBox.test.tsx b/test/unit/components/ChatBox.test.tsx
index 951950a5b..ae37f4edc 100644
--- a/test/unit/components/ChatBox.test.tsx
+++ b/test/unit/components/ChatBox.test.tsx
@@ -87,6 +87,10 @@ vi.mock('react-i18next', () => ({
   }),
 }));
 
+vi.mock('../../../src/components/AddWorker', () => ({
+  AddWorker: () => null,
+}));
+
 // Mock BottomBox component
 vi.mock('../../../src/components/ChatBox/BottomBox', () => ({
   default: vi.fn(({ inputProps }: any) => {
@@ -133,6 +137,10 @@ vi.mock('../../../src/components/ChatBox/TypeCardSkeleton', () => ({
   TypeCardSkeleton: vi.fn(() => <div data-testid="skeleton">Loading...</div>),
 }));
 
+vi.mock('../../../src/components/Workforce/FoldedPanel', () => ({
+  default: () => <div data-testid="workforce-folded-panel" />,
+}));
+
 describe('ChatBox Component', async () => {
   const mockUseAuthStore = vi.mocked(useAuthStore);
   const _mockFetchPost = vi.mocked(fetchPost);
@@ -195,6 +203,7 @@ describe('ChatBox Component', async () => {
     getFormattedTaskTime: vi.fn(() => '00:00:00'),
     setAttaches: vi.fn(),
     setNextTaskId: vi.fn(),
+    setNextExecutionId: vi.fn(),
     removeTask: vi.fn(),
     setElapsed: vi.fn(),
     setTaskTime: vi.fn(),
@@ -249,7 +258,7 @@ describe('ChatBox Component', async () => {
 
     // Setup default API responses
     mockProxyFetchGet.mockImplementation((url: string) => {
-      if (url === '/api/user/key') {
+      if (url === '/api/user/key' || url === '/api/v1/user/key') {
         return Promise.resolve({ value: 'test-api-key' });
       }
       if (url === '/api/configs') {
@@ -287,7 +296,6 @@ describe('ChatBox Component', async () => {
       renderChatBox();
 
       expect(screen.getByText('Welcome to Eigent')).toBeInTheDocument();
-      expect(screen.getByText('How can I help you today?')).toBeInTheDocument();
     });
 
     it('should render bottom box component', () => {
@@ -702,7 +710,7 @@ describe('ChatBox Component', async () => {
 
     it('should show search key warning when missing API keys', async () => {
       mockProxyFetchGet.mockImplementation((url: string) => {
-        if (url === '/api/providers') {
+        if (url === '/api/providers' || url === '/api/v1/providers') {
           return Promise.resolve({
             items: [{ id: 'test-provider', name: 'Test' }],
           });
@@ -733,7 +741,7 @@ describe('ChatBox Component', async () => {
   describe('Example Prompts', () => {
     beforeEach(() => {
       mockProxyFetchGet.mockImplementation((url: string) => {
-        if (url === '/api/providers') {
+        if (url === '/api/providers' || url === '/api/v1/providers') {
           return Promise.resolve({
             items: [{ id: 'test-provider', name: 'Test' }],
           });
@@ -853,19 +861,15 @@ describe('ChatBox Component', async () => {
       });
     });
 
-    it('should handle privacy fetch errors', async () => {
-      // Mock console.error to suppress expected error logs
+    it('should handle configs fetch errors', async () => {
       const consoleErrorSpy = vi
         .spyOn(console, 'error')
         .mockImplementation(() => {});
 
-      // Mock the fetch to reject properly for testing error handling
-      mockProxyFetchGet.mockRejectedValue(new Error('Privacy fetch failed'));
+      mockProxyFetchGet.mockRejectedValue(new Error('Configs fetch failed'));
 
-      // Rendering should not throw even with fetch error
       expect(() => renderChatBox()).not.toThrow();
 
-      // Wait for the promise to settle
       await waitFor(() => {
         expect(consoleErrorSpy).toHaveBeenCalled();
       });
diff --git a/test/unit/electron/main/index.test.ts b/test/unit/electron/main/index.test.ts
index 5d7aa21f7..f75310e85 100644
--- a/test/unit/electron/main/index.test.ts
+++ b/test/unit/electron/main/index.test.ts
@@ -671,10 +671,10 @@ describe('Electron Main Index Functions', () => {
 
       const mockConfig = {
         title: 'Eigent',
-        width: 1200,
-        height: 800,
-        minWidth: 1200,
-        minHeight: 800,
+        width: 1366,
+        height: 860,
+        minWidth: 1100,
+        minHeight: 700,
         frame: false,
         transparent: true,
         backgroundColor: '#f5f5f5',
@@ -696,10 +696,10 @@ describe('Electron Main Index Functions', () => {
 
       const mockConfig = {
         title: 'Eigent',
-        width: 1200,
-        height: 800,
-        minWidth: 1200,
-        minHeight: 800,
+        width: 1366,
+        height: 860,
+        minWidth: 1100,
+        minHeight: 700,
         frame: true,
         transparent: false,
         backgroundColor: '#ffffff',